/* Veinico base — ported verbatim from the design helmet styles */
:root {
  --slate: #0F171C;
  --steel: #39424A;
  --copper: #B8622B;
  --copper-hi: #a1541f;
  --clay: #CFAA93;
  --lgrey: #E6E6E3;
  --off: #FFFFFF;
  --line: #DBDBD7;
  --line-dark: #263038;
}
body { margin: 0; background: #06090C; color: var(--off); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--copper); }
a:hover { color: var(--copper-hi); }
.rail { scrollbar-width: none; -ms-overflow-style: none; }
.rail::-webkit-scrollbar { display: none; }

/* body text ONLY: Plus Jakarta Sans on paragraphs and form fields.
   Everything else (headings, nav, buttons, spans) inherits Inter exactly as
   the design always did — a broader rule here once leaked into headings via
   inheritance; do not widen this scope again. */
p, input, select, textarea { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
p { font-weight: 600; }

/* a11y: skip link (visually hidden until focused) */
.skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--copper); color: var(--off); padding: 10px 18px; text-decoration: none; border-radius: 0 0 4px 0; }
.skip:focus { left: 0; }
/* focus visibility on interactive elements */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* hover states (ported from style-hover) */
.hv0:hover{color:var(--clay) !important}
.hv1:hover{background:var(--copper-hi) !important;color:var(--off) !important}
.hv2:hover{background:rgba(184,98,43,0.14) !important;color:var(--off) !important}
.hv3:hover{color:var(--copper-hi) !important}
.hv4:hover{color:var(--clay) !important;border-color:var(--clay) !important}
.hv5:hover{border-color:var(--copper) !important;background:#0B0F13 !important}
.hv6:hover{border-color:var(--copper) !important;background:rgba(184,98,43,0.14) !important;color:var(--copper) !important}
.hv7:hover{border-color:var(--copper) !important;color:var(--copper) !important}
.hv8:hover{border-color:rgba(184,98,43,0.7) !important}
.hv9:hover{background:#1b262e !important;color:var(--off) !important}
.hv10:hover{color:var(--off) !important}
.hv11:hover{background:rgba(184,98,43,0.06) !important}
.hv12:hover{background:var(--copper-hi) !important}
.hv13:hover{border-color:var(--copper) !important}
/* ============================================================
   Mobile layer — the 430px artboards re-expressed as overrides.
   !important is required to beat the design's inline styles.
   ============================================================ */
@media (max-width: 767px) {
  /* --- header: logo + burger only (mobile artboard) --- */
  .vn-header { padding: 12px 20px !important; }
  .vn-header > *:not(:first-child) { display: none !important; }
  .vn-header > div:last-child { display: flex !important; }
  .vn-header > div:last-child > *:not([data-menu-btn]) { display: none !important; }
  .vn-header [data-menu-btn] { display: flex !important; }
  /* mobile menu: no 11-service list — "All services" is the way in (desktop keeps the full column) */
  .m-menu-svccol { display: none !important; }

  /* --- gutters: 20px sides everywhere (homepage hero excluded) --- */
  section[data-screen-label]:not(.m-hero) { padding-left: 20px !important; padding-right: 20px !important; }

  /* --- vertical rhythm, straight from the mobile artboards --- */
  /* card/step sections: 40 top / 72 bottom */
  section[data-screen-label="S3 Services"], section[data-screen-label="S4 Process"],
  section[data-screen-label="S5 Testimonials"], section[data-screen-label="S3 Problem"],
  section[data-screen-label="S3 Why it matters"], section[data-screen-label="S8 FAQ"],
  section[data-screen-label="S4 What is included"], section[data-screen-label="S5 How we work"],
  section[data-screen-label="S5 How it works"], section[data-screen-label="S6 Client stories"],
  section[data-screen-label="S6 Differentiators"], section[data-screen-label="S7 Other services"],
  section[data-screen-label="S9 Other services"] { padding-top: 40px !important; padding-bottom: 72px !important; }
  /* flowing sections that hug the one above: 20 top */
  section[data-screen-label="S2 All services"], section[data-screen-label="S2 What we believe"],
  section[data-screen-label="S3 AI"], section[data-screen-label="S4 How we work with you"],
  section[data-screen-label="S3 CTA"], section[data-screen-label="S5 CTA"],
  section[data-screen-label="S8 CTA"], section[data-screen-label="S6 CTA"] { padding-top: 20px !important; padding-bottom: 72px !important; }
  /* homepage problem block breathes more (artboard: 72) */
  section[data-screen-label="S2 Problem"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  /* copper CTA bubble tightens on mobile (artboard: 40/26) */
  .m-bubble { padding: 40px 26px !important; }
  /* "View all ten services" link row sits tight under the cards */
  section[data-screen-label="S3b All services"] { padding-top: 0 !important; padding-bottom: 40px !important; }
  /* page heroes (breadcrumb + heading intros) */
  section[data-screen-label="S1 Hero"], section[data-screen-label="S1 Service hero"],
  section[data-screen-label="S1 Contact"] { padding-top: 28px !important; padding-bottom: 56px !important; }
  /* the homepage's full-art hero keeps its own internal layout */
  section.m-hero { padding: 0 !important; min-height: 660px !important; background-position: 62% center !important; }

  /* --- card grids -> snap rails (mobile artboard pattern) --- */
  section[data-screen-label].m-railsec { padding-left: 0 !important; padding-right: 0 !important; }
  .m-rail {
    display: flex !important; gap: 14px !important;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px 20px 8px !important;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .m-rail::-webkit-scrollbar { display: none; }
  .m-rail > * { flex: 0 0 272px !important; scroll-snap-align: start; min-width: 0; }
  section[data-screen-label="S5 Testimonials"] .m-rail > *,
  section[data-screen-label="S6 Client stories"] .m-rail > * { flex-basis: 288px !important; }
  /* headings above rails keep the gutter the section gave up */
  .m-railsec > div > *:not(.m-rail) { padding-left: 20px; padding-right: 20px; }

  /* --- multi-column blocks -> single column (grid kept so design gaps hold) --- */
  .m-col1 { grid-template-columns: 1fr !important; }
  /* trust strip 4-up -> 2x2 */
  .m-g22 { grid-template-columns: 1fr 1fr !important; }
  /* footer: 4 columns -> 2 */
  .m-foot { grid-template-columns: 1fr 1fr !important; gap: 36px 20px !important; }
  /* service-list rows: number / text / arrow, description wraps under title */
  .m-svcrow { grid-template-columns: 32px 1fr 40px !important; gap: 6px 14px !important; }
  .m-svcrow > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .m-svcrow > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .m-svcrow > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .m-svcrow > :nth-child(4) { grid-column: 3; grid-row: 1; }
  /* comparison table: capability spans full width, the two values sit at
     opposite edges (mobile artboard pattern) with clear air between them */
  .m-tbl { grid-template-columns: 1fr 1fr !important; row-gap: 10px !important; column-gap: 32px !important; }
  .m-tbl > :first-child { grid-column: 1 / -1; }
  .m-tbl > :nth-child(2) { justify-self: start; }
  .m-tbl > :nth-child(3) { justify-self: end; text-align: right; }
  /* services dropdown is hover-driven; hide on touch layouts */
  [data-svc-panel] { display: none !important; }
}


/* homepage service cards: text one extra step on desktop (user request) */
@media (min-width: 768px) {
  section[data-screen-label="S3 Services"] .d-s13_0 { font-size: 15.5px !important; }
  section[data-screen-label="S3 Services"] .d-s15_0 { font-size: 17.5px !important; }
}

/* desktop-only text step-up (generated: design size + 1.5px) */
@media (min-width: 768px) {
  .d-s13_0 { font-size: 14.5px !important; }
  .d-s14_0 { font-size: 15.5px !important; }
  .d-s14_5 { font-size: 16px !important; }
  .d-s15_0 { font-size: 16.5px !important; }
  .d-s15_5 { font-size: 17px !important; }
  .d-s16_0 { font-size: 17.5px !important; }
  .d-s16_5 { font-size: 18px !important; }
  .d-s17_0 { font-size: 18.5px !important; }
  .d-s17_5 { font-size: 19px !important; }
}