/* =============================================================================
   JDM Web Solutions — components and layout

   Ported from the design export's .jsx files, which use inline style objects
   because the prototype environment required it. The handoff is explicit that
   the pattern must not carry into production, so every value is expressed here
   against the tokens instead.

   The prototype is desktop-only at 1280px. The responsive layer at the bottom
   is new work, following the breakpoints the handoff suggests.
   ========================================================================== */

/* ------------------------------------------------------------------ layout */
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--head{padding:var(--space-9) 0 var(--space-8)}
.s-page{background:var(--surface-page)}
.s-cream{background:var(--surface-cream)}
.s-dark{background:var(--surface-dark);color:var(--paper-100)}
.s-navy{background:var(--surface-brand-deep);color:var(--paper-100)}
.stack{display:flex;flex-direction:column}
.stack-3{gap:var(--space-3)}.stack-4{gap:var(--space-4)}
.stack-5{gap:var(--space-5)}.stack-6{gap:var(--space-6)}

/* `hidden` is a UA `display:none`, so any explicit display in this sheet beats
   it. The contact form's success panel is a .stack — without this it renders
   underneath the form instead of replacing it. */
[hidden]{display:none!important}

/* Anything on a dark ground needs its heading colour restated — the base
   stylesheet pins h1/h2 to --text-strong. */
.s-dark h1,.s-dark h2,.s-dark h3,.s-navy h1,.s-navy h2,.s-navy h3{color:var(--paper-100)}

/* Skip link — the prototype has none. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink-900);
  color:var(--paper-100);padding:12px 20px;border:0}
.skip:focus{left:0}

/* ------------------------------------------------------------ SectionLabel */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);
  font-size:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--blue-600)}
.eyebrow--dark{color:var(--blue-300)}
.eyebrow i{font-style:normal;color:var(--ink-900)}
.eyebrow--dark i{color:var(--paper-100)}
.eyebrow s{display:block;width:28px;height:1px;background:currentColor;opacity:.5;
  text-decoration:none}

/* ----------------------------------------------------------------- Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid transparent;
  font-family:var(--font-sans);font-weight:600;cursor:pointer;white-space:nowrap;
  border-radius:var(--radius-pill);text-decoration:none;line-height:1;
  padding:14px 24px;font-size:var(--text-body);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.btn:hover{border-bottom-color:transparent}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:10px 16px;font-size:var(--text-body-s)}
.btn--lg{padding:18px 32px;font-size:var(--text-body-l)}
.btn--full{width:100%;justify-content:center}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn .arw{font-size:1.05em;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .arw{transform:translateX(3px)}

.btn--primary{background:var(--ink-900);color:var(--paper-100)}
.btn--primary:hover{background:var(--blue-800);color:var(--paper-100)}
.btn--brand{background:var(--blue-600);color:var(--paper-100)}
.btn--brand:hover{background:var(--blue-800);color:var(--paper-100)}
.btn--accent{background:var(--orange-500);color:var(--paper-100)}
.btn--accent:hover{background:#DC521D;color:var(--paper-100)}
.btn--secondary{background:var(--paper-100);color:var(--ink-900);border-color:var(--border-subtle)}
.btn--secondary:hover{background:var(--paper-300);color:var(--ink-900)}
.btn--ghost{background:transparent;color:var(--ink-900);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--ink-900);color:var(--paper-100);border-color:var(--ink-900)}
.btn--ondark{background:var(--paper-100);color:var(--ink-900)}
.btn--ondark:hover{background:var(--blue-100);color:var(--ink-900)}
/* Ghost sitting on a dark ground inverts its resting colours. */
.s-dark .btn--ghost,.hero .btn--ghost{color:var(--paper-100);border-color:var(--border-on-dark)}

/* Focus is visible on every interactive element — the prototype has none. */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--electric-500);outline-offset:3px;border-radius:var(--radius-xs)}

/* ------------------------------------------------------------------- Cards */
.card{border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-card);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.card--paper{background:var(--surface-card);color:var(--text-body);border:1px solid var(--border-subtle)}
.card--cream{background:var(--surface-cream);color:var(--text-body);border:1px solid var(--paper-400)}
.card--tint{background:var(--surface-tint);color:var(--blue-900);border:1px solid var(--blue-200)}
.card--dark{background:var(--ink-800);color:var(--text-on-dark);border:1px solid var(--border-on-dark)}
.card--brand{background:var(--blue-600);color:var(--text-on-dark)}
.card--gradient{background:var(--brand-gradient);color:var(--text-on-dark)}
.card--xl{border-radius:var(--radius-xl)}
.card--float{box-shadow:var(--shadow-float)}
.card--flat{box-shadow:none}
.card--p20{padding:20px}.card--p24{padding:24px}.card--p26{padding:26px}
.card--p40{padding:40px}.card--p64{padding:64px}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised)}

/* ------------------------------------------------------------ Tag / Badge */
.tag{display:inline-flex;align-items:center;border-radius:var(--radius-pill);
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-label);
  font-size:var(--text-label);padding:7px 14px;border:1px solid transparent}
.tag--sm{font-size:var(--text-label-s);padding:5px 10px}
.tag--tint{background:var(--blue-100);color:var(--blue-800);border-color:var(--blue-200)}
.tag--outline{color:var(--ink-900);border-color:var(--border-strong)}
.tag--ondark{background:rgba(255,255,255,.08);color:var(--paper-100);border-color:var(--border-on-dark)}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-xs);
  padding:4px 8px;font-size:var(--text-label);font-weight:600;letter-spacing:var(--tracking-wide);
  width:max-content}
.badge--success{background:rgba(46,158,107,.14);color:#1E7A50}

/* ------------------------------------------------------------------- Icons
   Lucide via an external sprite. Line only, currentColor, 18-22px. Arrows in
   copy and buttons are the typographic characters, never icons. */
.ico{width:20px;height:20px;flex:0 0 auto;display:inline-block;color:currentColor}
.ico--18{width:18px;height:18px}

/* --------------------------------------------------------------- IconButton */
.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);cursor:pointer;border:1px solid transparent;
  transition:background var(--dur-base) var(--ease-out)}
.icon-btn--ink{background:var(--ink-900);color:var(--paper-100)}
.icon-btn--ink:hover{background:var(--blue-800)}

/* ------------------------------------------------------------------ NavBar */
.nav{position:sticky;top:0;z-index:20;background:rgba(250,248,243,.78);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  border-bottom:1px solid var(--border-subtle)}
.nav--dark{background:rgba(20,22,26,.72);border-bottom-color:var(--border-on-dark)}
.nav__in{max-width:var(--container);margin:0 auto;padding:16px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{border:0;display:block;flex:0 0 auto}
.nav__logo img{display:block;height:34px;width:auto}
.nav__links{display:flex;gap:28px}
.nav__links a{font-family:var(--font-mono);font-size:var(--text-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--ink-600);padding:6px 0;
  border-bottom:1px solid transparent}
.nav__links a:hover{color:var(--ink-900)}
.nav__links a[aria-current=page]{color:var(--ink-900);border-bottom-color:currentColor}
.nav--dark .nav__links a{color:var(--blue-300)}
.nav--dark .nav__links a:hover,.nav--dark .nav__links a[aria-current=page]{color:var(--paper-100)}
.nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
  cursor:pointer;color:var(--ink-900)}
.nav--dark .nav__toggle{border-color:var(--border-on-dark);color:var(--paper-100)}

/* ------------------------------------------------------------------ Footer */
.footer{background:var(--ink-900);color:var(--paper-100);padding:var(--space-9) 0 var(--space-5)}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px}
.footer__name{font-family:var(--font-display);text-transform:uppercase;font-size:34px;
  line-height:.92;letter-spacing:var(--tracking-display);color:var(--paper-100)}
.footer a{color:var(--paper-100);border-bottom-color:var(--blue-500)}
.footer a:hover{color:var(--blue-200)}
.footer__col-t{font-family:var(--font-mono);font-size:var(--text-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--ink-400)}
.footer__col a,.footer__col span{font-size:var(--text-body-s);color:var(--blue-200);border:0}
.footer__col a:hover{color:var(--paper-100)}
.footer__base{max-width:var(--container);margin:var(--space-8) auto 0;
  padding:var(--space-4) var(--gutter) 0;border-top:1px solid var(--border-on-dark);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--text-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--ink-400)}

/* -------------------------------------------------------------------- Tabs */
.tabs{display:inline-flex;gap:6px;padding:6px;border-radius:var(--radius-pill);
  background:var(--paper-300);flex-wrap:wrap}
.tabs--dark{background:rgba(255,255,255,.08)}
.tabs button{border:0;cursor:pointer;padding:10px 20px;border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:var(--text-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);background:transparent;color:var(--ink-600);
  transition:background var(--dur-base) var(--ease-out)}
.tabs--dark button{color:var(--blue-200)}
.tabs button[aria-selected=true]{background:var(--ink-900);color:var(--paper-100)}
.tabs--dark button[aria-selected=true]{background:var(--paper-100);color:var(--ink-900)}

/* ------------------------------------------------------------- ServiceCard */
.svc{background:var(--surface-card);color:var(--text-body);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow-card);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised)}
.svc--dark{background:var(--ink-800);color:var(--text-on-dark);border-color:var(--border-on-dark)}
.svc__top{display:flex;align-items:center;justify-content:space-between}
.svc__icon{width:44px;height:44px;border-radius:var(--radius-md);display:inline-flex;
  align-items:center;justify-content:center;background:var(--brand-gradient);color:var(--paper-100)}
/* 12px is normal-size text, so this needs 4.5:1. --ink-400 on a white card is
   3.21:1 and fails; --ink-600 reaches 7.6:1. On the dark card the same token
   already passes at 4.74:1, so only the light variant changes. */
.svc__i{font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--ink-600)}
.svc--dark .svc__i{color:var(--ink-400)}
.svc h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:var(--text-display-s);line-height:.95;letter-spacing:var(--tracking-display);
  color:var(--ink-900)}
.svc--dark h3{color:var(--paper-100)}
.svc p{font-size:var(--text-body-s)}
.svc--dark p{color:var(--blue-200)}

/* ----------------------------------------------------------------- Marquee */
.marquee{overflow:hidden;padding:20px 0;
  background:linear-gradient(180deg,#060C24 0%,#0A1233 100%);
  border-bottom:1px solid rgba(13,125,242,.35)}
.marquee__row{display:flex;gap:48px;width:max-content;animation:jdm-marquee 26s linear infinite}
.marquee__row span{display:inline-flex;align-items:center;gap:48px;font-family:var(--font-display);
  text-transform:uppercase;font-size:28px;letter-spacing:var(--tracking-display);
  color:var(--paper-100);white-space:nowrap}
.marquee__row b{width:7px;height:7px;border-radius:50%;background:var(--electric-500);
  box-shadow:0 0 10px rgba(13,125,242,.9)}
@keyframes jdm-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --------------------------------------------------------------- Accordion */
.acc{display:flex;flex-direction:column;gap:12px}
.acc__item{border-radius:var(--radius-md);overflow:hidden;background:var(--surface-card);
  border:1px solid var(--border-subtle);transition:background var(--dur-base) var(--ease-out)}
.acc__item[data-open=true]{background:var(--blue-600);border-color:transparent}
.acc__q{width:100%;display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:20px 24px;background:transparent;border:0;cursor:pointer;text-align:left;
  font-weight:600;font-size:var(--text-body-l);color:var(--ink-900)}
.acc__item[data-open=true] .acc__q{color:var(--paper-100)}
.acc__q em{font-style:normal;font-size:20px;line-height:1;flex:0 0 auto}
.acc__a{padding:0 24px 22px;font-size:var(--text-body);color:var(--blue-100);max-width:62ch}
.acc__item[data-open=false] .acc__a{display:none}

/* ------------------------------------------------------------- Testimonial */
.quote{background:var(--paper-300);color:var(--ink-900);border-radius:var(--radius-lg);
  padding:40px 40px 32px;display:flex;flex-direction:column;gap:28px}
.quote__mark{font-family:var(--font-display);font-size:56px;line-height:.6;color:var(--blue-500)}
.quote p{font-size:clamp(20px,1.7vw,28px);line-height:1.35;letter-spacing:var(--tracking-tight);
  font-weight:500;max-width:34ch}
.quote__who b{font-weight:700;display:block}
.quote__who span{font-family:var(--font-mono);font-size:var(--text-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--ink-600)}

/* ------------------------------------------------------------------- Forms */
.field{display:flex;flex-direction:column;gap:8px}
.field > span{font-family:var(--font-mono);font-size:var(--text-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--blue-200)}
.field input,.field select,.field textarea{font:inherit;font-size:var(--text-body);
  padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-on-dark);
  outline:none;background:rgba(255,255,255,.06);color:var(--paper-100);width:100%;
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.field textarea{resize:vertical;line-height:var(--leading-body)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(62,142,180,.22)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-400)}
.field[data-invalid=true] input,.field[data-invalid=true] textarea{border-color:var(--state-error)}
.field__err{font-size:var(--text-body-s);color:var(--state-error)}
.field__err:empty{display:none}
.sel{position:relative}
.sel::after{content:"\25BE";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--ink-400);font-size:12px}
.field select{padding-right:40px;appearance:none}
/* Explicit dark-on-white, or the options vanish in the OS dropdown when the
   select sits on a dark surface. */
.field option{background:var(--paper-100);color:var(--ink-900)}
.check{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  font-size:var(--text-body);color:var(--blue-200)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check i{width:22px;height:22px;flex:0 0 auto;border-radius:var(--radius-xs);display:inline-flex;
  align-items:center;justify-content:center;color:var(--paper-100);font-size:13px;font-style:normal;
  background:var(--paper-100);border:1px solid var(--border-strong);
  transition:background var(--dur-fast) var(--ease-out)}
.check input:checked + i{background:var(--blue-600);border-color:var(--blue-600)}
.check input:checked + i::after{content:"\2713"}
.check input:focus-visible + i{outline:2px solid var(--electric-500);outline-offset:3px}
.form__note{font-family:var(--font-mono);font-size:var(--text-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--ink-400)}

/* Honeypot. Off-screen rather than display:none — some bots skip anything
   hidden that way, and the point is that they fill it in. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Turnstile renders an iframe at a fixed size; collapse the slot when no
   widget is mounted so the form does not carry an empty gap. */
.captcha:empty{display:none}
.captcha{min-height:65px}

/* ======================================================== page composition */

/* Hero -------------------------------------------------------------------- */
.hero{background:#060C24;color:var(--paper-100);padding:var(--space-10) 0 var(--space-8);
  position:relative;overflow:hidden}
/* Filename is versioned rather than overwritten: /assets/* is served with a
   one-year immutable cache, so reusing a name would leave returning visitors
   on the old image. Rename on change. */
.hero__art{position:absolute;inset:0;background-image:url("../assets/hero-websites.webp");
  background-size:cover;background-position:right center;background-repeat:no-repeat}
/* Protection gradient. Pulled well left of the previous ramp: this artwork is
   already near-black across its left third, so the old stop at 56%/.35 sat on
   top of the mockups and flattened the thing the image exists to show. */
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,12,36,.92) 0%,rgba(6,12,36,.74) 26%,
    rgba(6,12,36,.22) 46%,rgba(6,12,36,0) 64%)}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,640px) 1fr;
  gap:var(--space-8);align-items:end;min-height:520px}
.hero h1{font-size:var(--text-display-xl);color:var(--paper-100)}
.hero__lede{font-size:var(--text-body-l);color:var(--blue-100);max-width:46ch}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* Problem ----------------------------------------------------------------- */
.problem{display:flex;flex-direction:column;gap:var(--space-6);align-items:center;text-align:center}
.problem h2{font-size:var(--text-display-l);max-width:24ch}
/* 3.47:1 on cream. --ink-300 measured 1.5:1, below the 3:1 large-text floor. */
.problem h2 span{color:var(--ink-500)}
.problem > p{max-width:56ch;color:var(--ink-700)}
.claims{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);width:100%;
  margin-top:var(--space-4);text-align:left}
.claim{border-radius:var(--radius-lg);padding:26px;min-height:190px;display:flex;
  flex-direction:column;justify-content:space-between;gap:20px}
.claim h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:var(--text-display-s);line-height:.95;letter-spacing:var(--tracking-display)}
.claim p{font-size:var(--text-body-s)}
.claim--cream{background:var(--paper-100);border:1px solid var(--border-subtle);color:var(--ink-900)}
.claim--cream p{color:var(--ink-700)}
.claim--accent{background:var(--yellow-400);color:var(--ink-900)}
.claim--accent p{color:var(--ink-700)}
.claim--brand{background:var(--blue-600);color:var(--paper-100)}
.claim--brand h3{color:var(--paper-100)}.claim--brand p{color:var(--blue-100)}
.claim--dark{background:var(--ink-900);color:var(--paper-100)}
.claim--dark h3{color:var(--paper-100)}.claim--dark p{color:var(--blue-100)}

/* Generic head row: eyebrow+title left, action right --------------------- */
.headrow{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-6);margin-bottom:var(--space-7)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-8)}
.split--l{grid-template-columns:1.1fr .9fr}
.split--faq{grid-template-columns:.85fr 1.15fr}

/* Process ----------------------------------------------------------------- */
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:56px 1fr;gap:var(--space-4);padding:var(--space-5) 0;
  border-top:1px solid var(--border-on-dark)}
.step__n{font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--blue-300)}
.step h3{font-size:var(--text-h3);color:var(--paper-100)}
.step p{color:var(--ink-400);font-size:var(--text-body-s);margin-top:6px}

/* Proof ------------------------------------------------------------------- */
.shot{aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border-subtle);box-shadow:var(--shadow-card)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* CTA card ---------------------------------------------------------------- */
.ctacard{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-6);flex-wrap:wrap}
.ctacard h2{font-size:var(--text-display-l);color:var(--paper-100);max-width:20ch}
.ctaband{display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-6);flex-wrap:wrap}
.ctaband h2{font-size:var(--text-display-m);max-width:22ch}

/* Checklist rows (Services cost, About asks) ----------------------------- */
.checkrow{display:flex;gap:18px;align-items:flex-start}
.checkrow h3{font-size:var(--text-h4)}
.checkrow p{font-size:var(--text-body-s);color:var(--ink-700);margin-top:6px}

/* Work -------------------------------------------------------------------- */
.workcard{display:flex;flex-direction:column;gap:var(--space-4)}
.workcard__meta{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-4);padding:0 8px 8px}
/* A pill is sized by its content, never by the column it sits in. */
.workcard .tag{align-self:flex-start}
.workcard h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:var(--text-display-s);letter-spacing:var(--tracking-display)}
.workcard__result{font-family:var(--font-mono);font-size:var(--text-label);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--blue-600)}
.workshot{aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border-subtle)}
.workshot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* About stages ------------------------------------------------------------ */
.stage{display:grid;grid-template-columns:64px 1fr 1.2fr 190px;gap:var(--space-5);
  align-items:start;padding:var(--space-5) 0;border-top:1px solid var(--border-subtle)}
.stage__n{font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);color:var(--blue-600)}
.stage h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:var(--text-display-s);line-height:.95;letter-spacing:var(--tracking-display)}
.stage p{color:var(--ink-700)}
/* Grid items stretch by default; a pill must stay content-width. */
.stage .tag{justify-self:start}
.aboutart{aspect-ratio:4/3;border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid var(--border-on-dark)}
.aboutart img{width:100%;height:100%;object-fit:cover;display:block}

/* Service pages ----------------------------------------------------------- */
/* Long-form reading, which the marketing pages never needed. Measure capped at
   68ch; below that lines get too short to scan, above it the eye loses the
   return sweep. */
.prose{max-width:68ch;display:flex;flex-direction:column;gap:var(--space-4)}
/* When .prose sits on the same element as .wrap, wrap's `margin:0 auto` would
   centre a 68ch box under a left-aligned page header — the measure is right
   but it floats away from everything above it. Keep the container's width and
   its gutter, and cap the children instead. */
.wrap.prose{max-width:var(--container)}
.wrap.prose > *{max-width:68ch}
.prose p{font-size:var(--text-body-l);line-height:var(--leading-body);color:var(--ink-700)}
.prose h2{font-size:var(--text-display-m);margin-top:var(--space-5)}
.prose h3{font-size:var(--text-h3);margin-top:var(--space-3)}
.prose strong{color:var(--ink-900);font-weight:600}
.s-dark .prose p,.s-navy .prose p{color:var(--blue-200)}

.deliver{display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.deliver .card{display:flex;gap:16px;align-items:flex-start}
.deliver h3{font-size:var(--text-h4)}
.deliver p{font-size:var(--text-body-s);color:var(--ink-700);margin-top:6px}

/* "What we don't do" — the honest boundary list. Rendered as a plain column
   rather than cards; it is a caveat, not a selling point, and should not be
   dressed as one. */
.limits{display:flex;flex-direction:column;gap:var(--space-3);max-width:62ch}
.limits li{display:flex;gap:14px;color:var(--ink-700);font-size:var(--text-body);
  list-style:none;padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle)}
.limits li:last-child{border-bottom:0}
.limits b{color:var(--ink-900);font-weight:600;flex:0 0 auto}
.limits ul{margin:0;padding:0}

/* Crumb trail. Small, mono, never competing with the eyebrow below it. */
.crumb{font-family:var(--font-mono);font-size:var(--text-label-s);
  text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--blue-300)}
.crumb a{color:var(--blue-300);border:0}
.crumb a:hover{color:var(--paper-100)}

/* Contact ----------------------------------------------------------------- */
.contactline{display:flex;gap:12px;align-items:center;color:var(--paper-100);
  border:0;font-size:var(--text-body)}
.contactline:hover{color:var(--blue-200)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}

/* ============================================================== responsive
   The prototype is desktop-only at 1280px. These breakpoints follow the
   handoff's own suggestions: single column below 900, hero art to a band with
   the scrim rotated vertical, four-across grids to 2x2 then 1-up, process rows
   drop the approval column, nav collapses to a sheet.
   ========================================================================== */

@media (max-width:1100px){
  .claims{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stage{grid-template-columns:56px 1fr 1.1fr;gap:var(--space-4)}
  .stage .tag{grid-column:2/-1;justify-self:start}
}

@media (max-width:900px){
  :root{--section-y:var(--space-9);--section-y-tight:var(--space-8);--gutter:var(--space-5)}
  .nav__links{position:fixed;inset:64px 0 auto;flex-direction:column;gap:0;
    background:var(--paper-200);border-bottom:1px solid var(--border-subtle);
    padding:var(--space-4) var(--gutter) var(--space-6);display:none}
  .nav--dark .nav__links{background:var(--ink-900)}
  .nav__links[data-open=true]{display:flex}
  .nav__links a{padding:14px 0;font-size:var(--text-body);min-height:44px;display:flex;
    align-items:center}
  .nav__toggle{display:inline-flex}
  .nav__cta{display:none}

  .hero{padding:var(--space-8) 0 var(--space-7)}
  .hero__in{grid-template-columns:1fr;min-height:0;gap:var(--space-6)}
  /* Art becomes a band above the copy and the scrim rotates to vertical.
     Half-size source below this breakpoint: 53 KB against 104 KB, on the LCP
     resource, on the connection least able to afford it. A phone needs about
     1,170 physical pixels here (390 CSS wide x DPR 3) — the box is only 210px
     tall, so width is what binds — and 1280 covers that with room over.
     The soft edge is at the top of the range: a 900px viewport at DPR 2 wants
     1,800px and gets 1,280. Invisible in practice, because this band sits
     under a scrim that reaches 75% opacity by its midpoint.
     Paired with media-conditioned preloads in index.html — if those ever stop
     matching these queries the browser fetches both files and this becomes a
     regression rather than a saving. Change them together. */
  .hero__art{inset:auto 0 auto 0;top:0;height:210px;background-position:center;
    background-image:url("../assets/hero-websites-1280.webp")}
  .hero__scrim{background:linear-gradient(180deg,rgba(6,12,36,.30) 0%,rgba(6,12,36,.75) 55%,
    rgba(6,12,36,.97) 100%)}
  .hero__in{padding-top:150px}

  .split,.split--l,.split--faq,.grid-2,.formgrid{grid-template-columns:1fr;gap:var(--space-6)}
  .headrow{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
  .card--p64{padding:36px}
  .card--p40{padding:28px}
  .quote{padding:28px 28px 24px}
  .stage{grid-template-columns:44px 1fr;row-gap:var(--space-2)}
  .stage p,.stage .tag{grid-column:2/-1}
  .marquee__row span{font-size:22px;gap:32px}
  .marquee__row{gap:32px}
}

@media (max-width:620px){
  .claims,.grid-3{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .ctacard,.ctaband{flex-direction:column;align-items:flex-start}
  .btn{width:100%;justify-content:center}
  .nav__logo img{height:28px}
  .workcard__meta{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
}

/* The marquee is the only continuous motion on the site. The prototype does
   not honour reduced-motion; the handoff says production must. */
@media (prefers-reduced-motion:reduce){
  .marquee__row{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}