/* ════════════════════════════════════════════════════════════════════
   NORTHBOUND IT — site stylesheet
   ════════════════════════════════════════════════════════════════════
   Shared by index.html, websites/index.html and ai-automation/index.html,
   so tokens, type, the nav and the footer can only be changed in one place.
   Served as a normal stylesheet on the live site; make-review-build.py
   inlines it back into the artifact copy, which cannot fetch anything.
   ════════════════════════════════════════════════════════════════════ */
/* ═══════════════ TOKENS ═══════════════ */
:root{
  --black:#0E0E0E;
  --black-2:#141414;
  --black-3:#0A0A0A;
  --white:#F4F2ED;
  --paper:#EDEBE6;
  --paper-2:#E7E4DE;

  /* dark-first defaults (pre-JS paint) */
  --base-bg:var(--black);
  --base-fg:var(--white);
  --alt-bg:var(--paper-2);
  --alt-fg:#131211;

  --fg-2:rgba(128,128,128,.9);
  --fg-2:color-mix(in srgb, currentColor 64%, transparent);
  --fg-3:rgba(128,128,128,.6);
  --fg-3:color-mix(in srgb, currentColor 44%, transparent);
  --line:rgba(128,128,128,.35);
  --line:color-mix(in srgb, currentColor 16%, transparent);
  --line-2:rgba(128,128,128,.6);
  --line-2:color-mix(in srgb, currentColor 34%, transparent);

  /* readable card device (.see-cols columns and the .keeps retainer grid).
     --card-bg is the frosted-glass fill for cards sitting on imagery, where the
     backdrop blur has something to blur (opaque enough that the image is a
     hint, not a competitor); --card-bg-solid is the near-opaque fill for cards
     on a plain section background. --card-fg / --card-label are
     measured against the composited card fill, not the raw image, and clear
     WCAG AA in both themes (dark: 13.8:1 / 8.7:1, light: 16:1 / 6.7:1). */
  --radius:12px;
  --card-bg:rgba(14,14,17,.74);
  --card-bg-solid:rgba(30,30,34,.96);
  --card-line:rgba(255,255,255,.16);
  --card-fg:#E6E6E6;
  --card-label:#B8B8B8;
  /* glass cues: a faint diagonal sheen over the fill, a 1px inner highlight
     along the top edge, and a soft shadow lifting the card off the section */
  --card-sheen:linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,0) 62%);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 14px 34px -14px rgba(0,0,0,.55);
  /* fixed theme toggle: how much room content near a section's bottom edge
     leaves for it on small screens (see the ≤768px block) */
  --toggle-clear:56px;

  --font:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --ease:cubic-bezier(.22,.61,.21,1);
  --pad:clamp(20px,5vw,84px);
  --maxw:1640px;
  --nav-h:66px;
  --hero-runway:180vh;   /* pin length beyond the viewport → 280vh total */
  --logo-block:#3a3f47;  /* grey app-icon tile behind the chevrons */
}
html[data-theme="dark"]{
  --base-bg:var(--black); --base-fg:var(--white);
  --alt-bg:var(--paper-2); --alt-fg:#131211;
  --card-bg:rgba(14,14,17,.74);
  --card-bg-solid:rgba(30,30,34,.96);
  --card-line:rgba(255,255,255,.16);
  --card-fg:#E6E6E6;
  --card-label:#B8B8B8;
  --card-sheen:linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,0) 62%);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 14px 34px -14px rgba(0,0,0,.55);
  color-scheme:dark;
}
html[data-theme="light"]{
  --base-bg:var(--paper); --base-fg:#161511;
  --alt-bg:var(--black); --alt-fg:var(--white);
  --card-bg:rgba(255,255,255,.84);
  --card-bg-solid:rgba(255,255,255,.9);
  --card-line:rgba(0,0,0,.12);
  --card-fg:#1A1916;
  --card-label:#5A5854;
  --card-sheen:linear-gradient(160deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 38%, rgba(255,255,255,0) 62%);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 14px 34px -14px rgba(20,18,12,.18);
  color-scheme:light;
}

/* url()s here resolve against THIS FILE (assets/), not the page that links
   it — keep them relative to assets/, never prefixed with assets/ */
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-vf.woff2') format('woff2-variations');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

/* ═══════════════ BASE ═══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;overflow-y:auto}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  font-family:var(--font);
  font-size:16px; line-height:1.5; font-weight:420;
  background:var(--base-bg); color:var(--base-fg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .55s ease, color .55s ease;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:#F4F2ED;color:#0E0E0E}
html[data-theme="light"] ::selection{background:#161511;color:#EDEBE6}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:1px}
.skip{
  position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-260%);
  background:var(--base-fg);color:var(--base-bg);
  padding:10px 16px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .3s var(--ease);border-radius:2px;
}
.skip:focus-visible{transform:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(44px,5.4vw,84px)}
section{scroll-margin-top:16px}
/* seams: About tucks up under the hero; the marquee's neighbors close in so it reads as a divider */
#about{padding-top:clamp(40px,4.6vw,60px);padding-bottom:clamp(90px,12vw,160px)}
#services{padding-top:clamp(28px,3.5vw,56px)}

/* tones */
.tone-base{background:var(--base-bg);color:var(--base-fg);transition:background-color .55s ease,color .55s ease}
.tone-alt{background:var(--alt-bg);color:var(--alt-fg);transition:background-color .55s ease,color .55s ease}

/* ═══════════════ SHARED DEVICES ═══════════════ */
.blabel{
  display:inline-block;
  font-size:12.5px;font-weight:520;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-2);white-space:nowrap;
}
/* Readable card: the three columns under "What we do, in plain terms" and the
   three retainer promises under "We stay with you" are the same component, so
   they are styled by one rule. Contained fill + hairline border + radius; the
   old top rule per block is gone because the card border now does that job.
   .keeps li swaps in the more opaque fill: its section background is flat,
   so the blur has nothing to work on and the lighter fill would vanish. */
.see-col,.keeps li{
  background:var(--card-sheen),var(--card-bg);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid var(--card-line);border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  padding:28px;color:var(--card-fg);
}
.keeps li{background:var(--card-sheen),var(--card-bg-solid)}
.see-col .blabel,.keeps .blabel{color:var(--card-label)}
.see-col p,.keeps p{
  margin-top:14px;font-size:clamp(15.5px,1.15vw,17px);line-height:1.6;
  color:var(--card-fg);text-wrap:pretty;
}
.sec-title{
  font-size:clamp(34px,5vw,78px);
  font-weight:620;font-stretch:110%;letter-spacing:-.015em;line-height:1.02;
  text-transform:uppercase;text-wrap:balance;
  margin-top:20px;
}
/* lead-in line under a section title (services journey framing) */
.sec-lead{
  margin-top:clamp(16px,1.8vw,24px);
  font-size:clamp(16px,1.45vw,21px);font-weight:450;line-height:1.55;
  color:var(--fg-2);max-width:46ch;text-wrap:pretty;
}
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.btn-bracket{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:13px;font-weight:560;letter-spacing:.17em;text-transform:uppercase;
  padding:12px 6px;cursor:pointer;white-space:nowrap;
}
.btn-bracket .bk{transition:transform .35s var(--ease);font-weight:420}
.btn-bracket:hover .bk-l,.btn-bracket:focus-visible .bk-l{transform:translateX(-5px)}
.btn-bracket:hover .bk-r,.btn-bracket:focus-visible .bk-r{transform:translateX(5px)}
.pill{
  display:inline-block;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);border:1px solid var(--line-2);border-radius:999px;
  padding:5px 11px 4px;white-space:nowrap;
}
/* ── brand mark: "Loft" / Kinetic ascent, CHARCOAL · PLATINUM colourway ──
   From northbound-it-loft-pitch.pptx (Concept B). Platinum #CCD2D7 mark on
   charcoal #252729. Nav, hero and footer lockups sit on dark ground in BOTH
   themes so they always carry the platinum mark; anywhere the ground follows
   the theme (service pages) it flips to the colourway's charcoal. The
   back-to-top chevron is a UI control, so it keeps inheriting currentColor. */
:root{--logo-platinum:#CCD2D7;--logo-charcoal:#252729;--logo-ink:var(--logo-platinum)}
html[data-theme="light"]{--logo-ink:var(--logo-charcoal)}
.north{display:inline-block;height:.6em;width:auto;vertical-align:baseline}
.wm .north{color:var(--logo-ink);transform:translateY(-.06em)}
.site-foot .wm .north,.ft-mark .north{color:#CCD2D7}
/* in the nav + hero the mark sits inside the grey block, where both chevrons
   are solid white — see .brand-mark / .hero-mark */

/* ═══════════════ NAV ═══════════════ */
/* darkened bar (blurred, hairline under) so it stays legible over the bright
   hero frames — still NOT sticky: it scrolls away, as decided earlier */
.nav{
  position:absolute;top:0;inset-inline:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);padding-inline:clamp(18px,3.2vw,44px);
  color:#F4F2ED;
  background:rgba(10,12,16,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(232,234,237,.06);
}
/* brand lockup: grey app-icon block FIRST, wordmark after */
.brand{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.brand-mark{
  width:40px;height:40px;border-radius:10px;flex:none;
  background:var(--logo-block);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.brand-mark .north{height:20px;transform:none;color:#fff}
.brand-word{
  font-size:14px;font-weight:640;font-stretch:118%;letter-spacing:.22em;
  text-transform:uppercase;line-height:1;
}
.wm{
  display:inline-flex;align-items:baseline;gap:.34em;
  font-weight:640;font-stretch:118%;letter-spacing:.045em;
  text-transform:uppercase;line-height:1;white-space:nowrap;
}
.nav .wm{font-size:14.5px}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.6vw,38px)}
.nav-link{
  font-size:12px;font-weight:480;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-2);padding:8px 2px;position:relative;
  transition:color .3s ease;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;
  background:currentColor;transition:right .35s var(--ease);
}
.nav-link:hover,.nav-link:focus-visible{color:inherit}
.nav-link:hover::after,.nav-link:focus-visible::after{right:0}
.nav .btn-bracket{font-size:12px;padding-block:8px}

/* ═══════════════ HERO ═══════════════ */
/* hero: full-viewport raw imagery; the writing is its own layer on top of the
   media (independent of the image / future video) — no scrims, no theme washes */
/* pin wrapper: plain passthrough until JS enables the scroll-scrub (.scrub-on),
   then it grows by 150vh and the hero rides sticky inside it */
.hero-pin{position:relative}
/* scroll runway beyond the viewport — the one place to retune pin length */
.hero-pin.scrub-on{height:calc(100vh + var(--hero-runway));height:calc(100svh + var(--hero-runway))}
.hero-pin.scrub-on .hero{position:sticky;top:0}
.hero{
  position:relative;
  height:100vh;height:100dvh;height:100svh;
  min-height:100vh;min-height:100dvh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:clip;text-align:center;color:#F4F2ED;
}
.hero-intro{
  position:relative;z-index:2;width:100%;
  padding:calc(var(--nav-h) + 12px) var(--pad) 28px;
  /* no max-width: the lockup runs wide at its 130px clamp cap and any
     narrower cap wraps the wordmark under the mark on large desktops */
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-bgs{position:absolute;inset:0}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1s ease;
}
.hero-bg.active{opacity:1}
/* scrub canvas: transparent until its first frame draws, so the poster
   background beneath shows instantly; cover-cropping is done in drawImage */
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%}
/* mobile ambient loop video (non-scrub path) — cover-crop like the canvas;
   the poster still sits beneath as first paint + autoplay-blocked fallback */
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ── hero lockup: the same [block][NORTHBOUND IT] as the nav, scaled up ── */
.hero-lockup{
  /* 7vw, not the mockup's 8.5 — Archivo at 110% stretch runs wider than the
     mockup's face, and this keeps [mark][wordmark] on one line to ~1113px */
  font-size:clamp(28px,7vw,130px);
  font-weight:620;font-stretch:110%;letter-spacing:.02em;line-height:1;
  text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  column-gap:.32em;row-gap:.12em;
  color:#F4F2ED;
  text-shadow:0 2px 4px rgba(8,8,8,.28), 0 14px 48px rgba(8,8,8,.35);
}
@media (prefers-reduced-motion:no-preference){
  .hero-lockup{animation:floaty 6.5s ease-in-out infinite alternate}
}
@keyframes floaty{from{transform:translateY(4px)}to{transform:translateY(-7px)}}
.hero-mark{
  width:1.05em;height:1.05em;border-radius:.22em;flex:none;
  background:var(--logo-block);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 30px rgba(0,0,0,.5);
}
.hero-mark .north{height:.58em;transform:none;color:#fff}

/* ── identity statement: the plain "what we are" line. Static and full-opacity
      from first paint, never staged, because the whole point is that it is
      readable before anyone scrolls. Sits between the lockup and the beats. ── */
.hero-head{
  margin-top:clamp(14px,2.6vh,30px);
  font-size:clamp(19px,2.4vw,36px);
  font-weight:500;font-stretch:104%;letter-spacing:-.004em;line-height:1.28;
  max-width:min(100%,1280px);margin-inline:auto;text-wrap:balance;
  text-shadow:0 1px 3px rgba(8,8,8,.5), 0 4px 24px rgba(8,8,8,.5);
}

/* ── staged reveals: the three promise beats, then the CTA. Progress through
      the pin toggles .in, so scrolling back up hides them again. ── */
.hero-lines{margin-top:clamp(22px,5.5vh,54px);display:grid;row-gap:.14em}
.hero-lines .line{
  display:block;
  font-size:clamp(22px,3.4vw,46px);
  font-weight:600;font-stretch:104%;letter-spacing:-.008em;line-height:1.25;
  text-shadow:0 1px 3px rgba(8,8,8,.5), 0 4px 24px rgba(8,8,8,.5);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
/* staged elements start hidden ONLY once the <head> script has stamped html.js:
   without JavaScript every line and button is simply visible */
.js .hero-lines .line,.js .hero .btn-bracket{opacity:0;transform:translateY(34px)}
.hero-ctas{margin-top:clamp(26px,7vh,64px);display:flex;justify-content:center}
.hero .btn-bracket{
  font-size:13.5px;text-shadow:0 1px 3px rgba(8,8,8,.5), 0 3px 18px rgba(8,8,8,.45);
  transition:opacity .55s var(--ease),transform .55s var(--ease),
             background-color .3s ease,color .3s ease,border-color .3s ease;
}
/* the hero CTA is the payoff of a 280vh runway — boxed so it can't be missed */
.hero .hero-cta{
  border:1px solid rgba(244,242,237,.85);border-radius:2px;
  padding:18px clamp(26px,3vw,44px);
}
.hero .hero-cta:hover,.hero .hero-cta:focus-visible{
  background:#F4F2ED;color:#0E0E0E;border-color:#F4F2ED;text-shadow:none;
}
.hero-lines .line.in,.hero .btn-bracket.in{opacity:1;transform:none}
.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(244,242,237,.7);pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .scroll-hint{animation:hint 2.2s ease-in-out infinite}
}
@keyframes hint{
  0%,100%{opacity:.35;transform:translate(-50%,0)}
  50%{opacity:.9;transform:translate(-50%,6px)}
}
/* class, not inline opacity — a running animation outranks inline styles */
.scroll-hint.gone{animation:none;opacity:0;transition:opacity .5s ease}

/* ═══════════════ SEE (subhead + positioning line, own imagery) ═══════════════ */
/* always dark regardless of theme — image + heavy overlay, like the footer */
.see{
  position:relative;min-height:88vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(84px,11vw,140px) var(--pad);
  overflow:clip;color:#F4F2ED;
  /* the section is dark in both themes, so its cards use the dark card tokens
     whatever html[data-theme] says */
  --card-bg:rgba(14,14,17,.74);
  --card-line:rgba(255,255,255,.16);
  --card-fg:#E6E6E6;
  --card-label:#B8B8B8;
  --card-sheen:linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,0) 62%);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 14px 34px -14px rgba(0,0,0,.55);
}
.see-bg{
  position:absolute;inset:0;z-index:0;
  background:url('server-corridor-dark.png') center/cover no-repeat fixed;
}
/* darker towards the bottom, where the card row sits, so the rack lights in the
   image do not punch through the cards' blur */
.see-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,10,13,.78) 0%, rgba(8,10,13,.85) 40%, rgba(8,10,13,.93) 100%);
}
.see > :not(.see-bg){position:relative;z-index:1}
.see-kicker{
  font-family:var(--mono);font-size:clamp(15px,2vw,26px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:clamp(24px,3vw,36px);
}
/* 3-across positioning triptych under the tagline (what · how · who), bracket
   label + paragraph per card — the same card device as the .keeps retainer
   grid (see .see-col,.keeps li under SHARED DEVICES) */
.see-cols{
  width:min(100%,1120px);margin-top:clamp(40px,5.2vw,66px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px);
  text-align:left;
}

/* ═══════════════ SERVICES INDEX (home) ═══════════════ */
/* bracket links to every service page, under the three cards: the cards are
   the doors, this is the directory. Navigation, not a CTA, so no fill. */
.svc-index{
  margin-top:clamp(26px,3vw,40px);
  display:flex;flex-wrap:wrap;gap:10px clamp(14px,1.8vw,26px);align-items:center;
}
.svc-index .svc-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-right:6px}
.svc-index a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--fg-2);
  padding:6px 0;transition:color .3s ease;
}
.svc-index a:hover,.svc-index a:focus-visible{color:var(--base-fg)}
.svc-index .bk{color:var(--fg-3)}

/* ═══════════════ ABOUT ═══════════════ */
.about-grid{
  display:grid;grid-template-columns:minmax(280px,420px) 1fr;
  gap:clamp(40px,5.6vw,72px);align-items:start;
  margin-top:clamp(32px,4.4vw,56px);
}
.about-fig{
  width:100%;max-width:470px;aspect-ratio:4/5;
  border-radius:12px;overflow:clip;
}
.about-fig img{width:100%;height:100%;object-fit:cover}
.statement{
  font-size:clamp(22px,2.7vw,42px);
  font-weight:510;font-stretch:103%;letter-spacing:-.012em;line-height:1.22;
  text-wrap:pretty;
}
/* second About paragraph — steps down from the statement so the block stays
   readable now that the story runs two paragraphs */
.statement-sub{
  margin-top:clamp(18px,2.2vw,28px);
  font-size:clamp(15.5px,1.35vw,19px);font-weight:450;line-height:1.6;
  color:var(--fg-2);max-width:52ch;text-wrap:pretty;
}
.principles{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3.5vw,54px);
  margin-top:clamp(28px,4vw,52px);
}
.principles .blabel{color:var(--fg-3)}
/* route out of the About story into the work, which lives on its own subdomain.
   Boxed like .sp-cta so it reads as a button, but it is a navigation link and
   deliberately not a second call to action: "Book a free call" stays the only
   CTA phrase on the site. */
.about-cta{margin-top:clamp(26px,3.4vw,44px)}
.about-cta .btn-bracket{
  border:1px solid var(--line-2);border-radius:2px;padding:15px clamp(20px,2.4vw,32px);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.about-cta .btn-bracket:hover,.about-cta .btn-bracket:focus-visible{
  background:var(--base-fg);color:var(--base-bg);border-color:var(--base-fg);
}

/* ═══════════════ MARQUEE ═══════════════ */
.marquee{
  overflow:clip;border-block:1px solid var(--line);
  padding-block:clamp(16px,2.2vw,26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mq-track{display:flex;width:max-content;animation:mq 52s linear infinite}
.mq-seg{display:flex;align-items:baseline;white-space:nowrap;padding-right:1.6em}
.mq-word{
  font-size:clamp(17px,2.4vw,33px);
  font-weight:560;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-3);
}
.mq-dot{color:var(--fg-3);opacity:.55;font-size:clamp(13px,1.6vw,20px);padding-inline:1.05em}
@keyframes mq{to{transform:translateX(-50%)}}

/* ═══════════════ SERVICES GRID ═══════════════ */
/* auto-fit so the grid tracks however many services COPY.services holds */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,1.9vw,30px);
  margin-top:clamp(44px,6vw,84px);
}
.card{
  position:relative;display:block;aspect-ratio:1/1;overflow:clip;
  border-radius:3px;border:1px solid rgba(255,255,255,.14);
  background:#101010;color:#F4F2ED;
  transform:translateZ(0);
}
.card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,8,.16) 0%,rgba(8,8,8,0) 34%,rgba(8,8,8,0) 55%,rgba(8,8,8,.62) 100%);
}
.card:hover img,.card:focus-visible img{transform:scale(1.045)}
.card-row{
  position:absolute;z-index:2;inset-inline:clamp(16px,1.8vw,26px);bottom:clamp(14px,1.7vw,24px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.card-name{
  font-size:clamp(20px,1.8vw,27px);
  font-weight:600;font-stretch:108%;letter-spacing:.015em;text-transform:uppercase;
  line-height:1.06;text-wrap:balance;
}
.card-arrow{flex:none;width:clamp(18px,1.5vw,22px);height:auto;transition:transform .45s var(--ease)}
.card:hover .card-arrow,.card:focus-visible .card-arrow{transform:translate(4px,-4px)}

/* ═══════════════ SERVICE BREAKDOWNS ═══════════════ */
.breakdown .wrap{
  display:grid;grid-template-columns:minmax(250px,5fr) 7fr;
  gap:clamp(36px,6vw,110px);align-items:start;
}
.breakdown + .breakdown{border-top:1px solid var(--line)}
.bd-side{position:sticky;top:34px}
.bd-title{
  font-size:clamp(28px,3.3vw,52px);
  font-weight:600;font-stretch:108%;letter-spacing:-.012em;line-height:1.06;
  margin-top:18px;text-wrap:balance;max-width:13em;
}
.bd-summary{margin-top:20px;font-size:15.5px;line-height:1.6;color:var(--fg-2);max-width:36ch}
.offerings{
  list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,3.4vw,52px) clamp(18px,2.2vw,34px);
}
.off-card{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:clamp(200px,21vw,296px);
  padding:clamp(24px,2.8vw,44px);
  border:1px solid var(--line);border-radius:10px;
  background:color-mix(in srgb, currentColor 3%, transparent);
  transition:border-color .35s ease,background-color .55s ease;
}
.offering:hover .off-card{border-color:var(--line-2)}
.off-card p{font-size:clamp(15.5px,1.25vw,18px);line-height:1.6;font-weight:470;color:var(--fg-2);max-width:36ch}
.offering h3{
  margin-top:18px;
  font-size:clamp(21px,1.9vw,30px);
  font-weight:580;font-stretch:106%;letter-spacing:-.008em;line-height:1.1;
}
.offering .pill{margin-top:12px}
.off-toggle{display:none}

/* ═══════════════ THE CHAOS ═══════════════ */
/* standalone centered statement between the breakdowns and the process —
   no card, no box, deliberately generous whitespace */
#chaos{padding-block:clamp(72px,10vw,152px)}
.chaos-line{
  margin-inline:auto;max-width:min(100%,38ch);text-align:center;
  font-size:clamp(21px,2.5vw,37px);
  font-weight:510;font-stretch:103%;letter-spacing:-.012em;line-height:1.3;
  text-wrap:pretty;
}

/* ═══════════════ APPROACH ═══════════════ */
.ap-grid{
  display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(36px,5.5vw,96px);align-items:center;
  margin-top:clamp(44px,6vw,84px);
}
.ap-fig{border-radius:3px;overflow:clip;border:1px solid var(--line)}
.ap-fig img{width:100%;height:100%;object-fit:cover}
.ap-list{list-style:none}
.ap-item{
  display:block;width:100%;text-align:left;position:relative;
  padding:clamp(20px,2.6vw,30px) 0;
  border-bottom:1px solid var(--line);
}
.ap-item::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.ap-item.is-active::after{transform:scaleX(1)}
.ap-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
/* the three items are numbered steps now, so each carries a mono index */
.ap-headline{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,22px);min-width:0}
.ap-idx{
  flex:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--fg-3);transition:color .4s ease;
}
.ap-item.is-active .ap-idx,.ap-item:hover .ap-idx{color:inherit}
/* sized so all three step sentences hold one line down to the 1023px stack */
.ap-title{
  font-size:clamp(24px,2.6vw,38px);
  font-weight:610;font-stretch:110%;letter-spacing:-.012em;line-height:1.05;
  text-transform:uppercase;color:var(--fg-3);transition:color .4s ease;
}
.ap-item.is-active .ap-title,.ap-item:hover .ap-title{color:inherit}
.ap-arrow{
  flex:none;width:clamp(16px,1.6vw,22px);height:auto;color:var(--fg-3);
  transition:transform .5s var(--ease),color .4s ease;
}
.ap-item.is-active .ap-arrow{transform:rotate(180deg);color:inherit}
.ap-blurb{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease);
}
.ap-item.is-active .ap-blurb{grid-template-rows:1fr}
.ap-blurb-in{overflow:hidden;opacity:0;transition:opacity .45s ease .08s}
.ap-item.is-active .ap-blurb-in{opacity:1}
.ap-blurb p{padding-top:14px;font-size:15.5px;line-height:1.6;color:var(--fg-2);max-width:52ch}

/* ═══════════════ AFTER THE BUILD ═══════════════ */
/* the retainer's three promises are cards: see .see-col,.keeps li under
   SHARED DEVICES for the fill, border, label and paragraph styling */
.after-body{
  margin-top:clamp(26px,3.4vw,44px);
  display:grid;gap:clamp(14px,1.6vw,20px);max-width:62ch;
}
.after-body p{font-size:clamp(15.5px,1.35vw,18.5px);line-height:1.65;color:var(--fg-2);text-wrap:pretty}
.keeps{
  list-style:none;margin-top:clamp(38px,5vw,68px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,1.8vw,24px);
}
.after-foot{
  margin-top:clamp(34px,4.4vw,60px);
  font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--fg-3);
}

/* ═══════════════ PROOF ═══════════════ */
/* mono, centred and quiet — a measurement promise, not a stat block */
#proof{border-top:1px solid var(--line);padding-block:clamp(46px,5.6vw,84px)}
.proof-line{
  margin-inline:auto;max-width:56ch;text-align:center;
  font-family:var(--mono);font-size:clamp(13.5px,1.35vw,17px);
  line-height:1.7;letter-spacing:.03em;color:var(--fg-2);
}

/* ═══════════════ CONTACT ═══════════════ */
.ct-grid{
  display:grid;grid-template-columns:minmax(270px,5fr) 7fr;
  gap:clamp(40px,6vw,110px);align-items:start;
}
.ct-side .sec-title{font-size:clamp(28px,3.3vw,52px)}
.ct-note{margin-top:22px;font-size:15.5px;line-height:1.6;color:var(--fg-2);max-width:36ch}
.ct-direct{margin-top:clamp(28px,3.5vw,48px);display:grid;gap:10px;justify-items:start}
.ct-direct a{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--fg-2);
  border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:color .3s ease,border-color .3s ease;
}
.ct-direct a:hover{color:inherit;border-color:currentColor}
.field{margin-bottom:clamp(24px,3vw,34px)}
.field label{
  display:block;font-size:11px;font-weight:520;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-2);margin-bottom:8px;
}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);
  border-radius:0;color:inherit;font-family:var(--font);font-size:16px;font-weight:450;
  padding:8px 0 10px;transition:border-color .3s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:currentColor}
.field textarea{resize:vertical;min-height:96px;line-height:1.5}
.f-err{
  display:none;margin-top:8px;font-size:12.5px;font-weight:520;letter-spacing:.02em;
}
.field.invalid .f-err{display:block}
/* honeypot: off-screen, not display:none — bots ignore display:none fields.
   tabindex="-1" plus aria-hidden on the wrapper keeps it out of the tab order
   and out of the accessibility tree. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* failed submit: bordered so it cannot be mistaken for the success state */
.f-fail{
  margin-bottom:22px;padding:16px 18px;
  border:1px solid currentColor;border-radius:3px;
  font-size:14px;line-height:1.55;
}
.f-fail-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px}
.f-fail-links a{
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:border-color .3s ease;
}
.f-fail-links a:hover{border-bottom-color:currentColor}
.field.invalid input{border-bottom-color:currentColor;border-bottom-width:2px}
fieldset{border:0;margin-bottom:clamp(24px,3vw,34px)}
fieldset legend{
  font-size:11px;font-weight:520;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);margin-bottom:14px;
}
/* no --fg-3 here either: the legend is already --fg-2, so mixing again gave
   .28 alpha (2.33:1). The em is set apart by case and tracking, not by dimming. */
fieldset legend em{font-style:normal;text-transform:none;letter-spacing:.03em}
.optset{display:flex;flex-wrap:wrap;gap:10px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{
  display:inline-block;cursor:pointer;
  font-size:13px;font-weight:480;letter-spacing:.02em;
  border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.opt span:hover{border-color:currentColor}
.opt input:checked + span{
  background:var(--base-fg);color:var(--base-bg);border-color:var(--base-fg);
}
.opt input:focus-visible + span{outline:2px solid currentColor;outline-offset:3px}
/* the HTML `hidden` attribute must always win — class-level display (e.g.
   .btn-solid below) otherwise beats the UA [hidden] rule and leaves the
   form opener visible after it's toggled off */
[hidden]{display:none!important}
.btn-solid{
  display:inline-block;margin-top:6px;
  background:var(--base-fg);color:var(--base-bg);
  font-size:13px;font-weight:580;letter-spacing:.17em;text-transform:uppercase;
  padding:17px 34px;border-radius:2px;
  transition:opacity .3s ease,transform .3s var(--ease);
}
.btn-solid:hover{opacity:.85;transform:translateY(-1px)}
/* ── multi-step form: stepper + panels ── */
.fsteps{
  display:flex;align-items:center;gap:20px;list-style:none;padding:0 0 18px;
  margin:0 0 clamp(26px,3vw,36px);border-bottom:1px solid var(--line-2);
}
.fstep-dot{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--fg-3);transition:color .3s ease;
}
.fstep-dot b{
  display:grid;place-items:center;width:26px;height:26px;border-radius:999px;
  border:1px solid var(--line-2);font-weight:600;font-size:11px;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.fstep-dot.is-current{color:var(--base-fg)}
.fstep-dot.is-done{color:var(--fg-2)}
.fstep-dot.is-current b,.fstep-dot.is-done b{
  background:var(--base-fg);color:var(--base-bg);border-color:var(--base-fg);
}
.fpanel[hidden]{display:none}
.fpanel:not([hidden]){animation:fstepIn .32s var(--ease) both}
@keyframes fstepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fnav{display:flex;align-items:center;gap:18px;margin-top:4px}
.fnav-2{justify-content:space-between}
.fback{
  background:transparent;border:0;cursor:pointer;color:var(--fg-2);
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;padding:8px 2px;
  transition:color .3s ease;
}
.fback::before{content:"‹";margin-right:8px;font-size:16px;line-height:0}
.fback:hover,.fback:focus-visible{color:var(--base-fg);outline:none}
@media (max-width:479px){.fs-lbl{display:none}}
.ct-open{margin-top:10px;padding:20px 42px;font-size:13.5px}
.ct-success{padding-block:clamp(30px,4vw,60px)}
.ct-success h3{
  font-size:clamp(30px,3.4vw,50px);
  font-weight:610;font-stretch:108%;letter-spacing:-.012em;text-transform:uppercase;
}
.ct-success p{margin-top:16px;font-size:16px;line-height:1.6;color:var(--fg-2);max-width:44ch}
.ct-success .btn-bracket{margin-top:26px}

/* ═══════════════ FOOTER ═══════════════ */
/* bottom padding clears the fixed theme toggle at every width (it used to cover
   "Back to top" whenever the page was scrolled to the end) */
.site-foot{background:var(--black-3);color:var(--white);padding-block:clamp(32px,3.5vw,52px) calc(30px + var(--toggle-clear))}
.ft-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(36px,5vw,72px);
}
.ft-brand .wm{font-size:16px}
.ft-tagline{margin-top:16px;font-size:14.5px;line-height:1.6;color:var(--fg-2);max-width:30ch}
.ft-h{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:16px;
}
.ft-links a{
  display:block;width:fit-content;font-size:14.5px;color:var(--fg-2);
  padding-block:5px;transition:color .3s ease;
}
.ft-links a:hover{color:inherit}
.ft-contact{display:grid;gap:9px;align-content:start;justify-items:start}
.ft-contact a,.ft-contact span{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--fg-2);
}
.ft-contact a{transition:color .3s ease}
.ft-contact a:hover{color:inherit}
.ft-mark{display:flex;justify-content:center;margin:clamp(48px,6vw,76px) 0 26px}
.ft-mark .north{height:15px;opacity:.4}
.ft-legal{
  border-top:1px solid rgba(255,255,255,.12);padding-top:24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  font-size:12.5px;color:var(--fg-3);
}
.ft-legal-links{display:flex;gap:22px}
/* NB: --fg-3 is a color-mix on currentColor, so re-declaring it on a child of
   .ft-legal (which already sets it) dimmed these twice — .44 x .44 = .19 alpha,
   1.66:1 against the footer. They inherit the parent's --fg-3 instead. */
.ft-legal a,.ft-legal button{
  font-size:12.5px;padding:4px 0;
  border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease;
}
.ft-legal a:hover,.ft-legal button:hover{color:var(--white);border-color:currentColor}
.ft-top{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .3s ease;
}
.ft-top .north{height:11px;transition:transform .35s var(--ease)}
.ft-top:hover{color:var(--white)}
.ft-top:hover .north{transform:translateY(-3px)}

/* Privacy and Terms are real pages (/privacy/, /terms/) since 2026-09-16; the
   footer links there, and the old <dialog> device is gone. */
/* ═══════════════ SERVICE DETAIL PAGES ═══════════════ */
/* websites/index.html and ai-automation/index.html. These were fixed-position
   overlays rendered from JS until they became real pages, so .svc-page is now
   just the <main> of an ordinary document and the nav above it sits in flow
   (.nav--page) instead of floating over a hero. */
.svc-page{background:var(--base-bg);color:var(--base-fg)}
.nav--page{position:static}
/* narrower than the site's 1640px .wrap: this is a reading page, and at full
   width the 62ch measure leaves half the viewport empty */
.sp-body{max-width:1180px;padding-block:clamp(36px,6vw,80px) clamp(90px,12vw,160px)}
.sp-title{
  margin-top:16px;
  font-size:clamp(40px,6.4vw,96px);
  font-weight:620;font-stretch:110%;letter-spacing:-.015em;line-height:1.02;
  text-transform:uppercase;text-wrap:balance;
}
.sp-sub{margin-top:22px;font-size:16.5px;line-height:1.6;color:var(--fg-2);max-width:54ch}
.sp-rule{border:0;border-top:1px solid var(--line);margin-block:clamp(30px,4.5vw,54px)}
.sp-detail p{font-size:16px;line-height:1.65;color:var(--fg-2);max-width:62ch}
.sp-detail p + p{margin-top:15px}
/* the offering sub-heads inside the write-up: same face as the breakdown
   grid's .offering h3, so a service page reads as part of the same system */
.sp-detail h2{
  margin-top:clamp(30px,3.4vw,46px);
  font-size:clamp(21px,1.9vw,30px);
  font-weight:580;font-stretch:106%;letter-spacing:-.008em;line-height:1.1;
  color:var(--base-fg);
}
.sp-detail h2 + p{margin-top:12px}
/* third level inside a section: the items under "What's included", FAQ questions */
.sp-detail h3{
  margin-top:clamp(20px,2.2vw,28px);
  font-size:clamp(17px,1.35vw,20px);font-weight:560;font-stretch:104%;letter-spacing:-.005em;line-height:1.25;
  color:var(--base-fg);
}
.sp-detail h3 + p{margin-top:8px}
.sp-detail a{color:var(--base-fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2);transition:text-decoration-color .3s ease}
.sp-detail a:hover{text-decoration-color:currentColor}
/* "How it works": the four steps, numbered the way the home page numbers its approach */
.sp-steps{list-style:none;margin-top:14px;display:grid;gap:14px;max-width:62ch}
.sp-steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline}
.sp-steps .sp-idx{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--fg-3)}
.sp-steps b{display:block;font-weight:580;color:var(--base-fg)}
.sp-steps p{margin-top:3px;max-width:none}
/* legal pages reuse the write-up styles; the dated line sits quieter */
.sp-detail p.sp-dated{margin-top:clamp(26px,3vw,40px);font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--fg-3)}
/* closing line of the write-up, then the one CTA */
.sp-detail p.sp-outro{margin-top:clamp(30px,3.6vw,48px);color:var(--base-fg)}
.sp-cta{
  margin-top:clamp(34px,4.4vw,60px);padding-top:clamp(28px,3.4vw,44px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,34px);
}
.sp-cta .btn-bracket{
  border:1px solid var(--line-2);border-radius:2px;padding:16px clamp(22px,2.6vw,36px);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.sp-cta .btn-bracket:hover,.sp-cta .btn-bracket:focus-visible{
  background:var(--base-fg);color:var(--base-bg);border-color:var(--base-fg);
}
.sp-cta p{font-size:15px;line-height:1.6;color:var(--fg-2);max-width:38ch}

/* ── founders list (custom-builds/ only) ──────────────────────────────
   The direct-contact route, rendered from NB_SHARED.founders. Each of
   .fd-name / .fd-mail / .fd-todo carries its own colour on an element
   that does NOT already have --fg-2 or --fg-3 set, so no alpha squares. */
.sp-founders{
  margin-top:clamp(26px,3.2vw,40px);
  display:grid;gap:18px;list-style:none;max-width:62ch;
}
.sp-founders li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  border-top:1px solid var(--line);padding-top:16px;
}
.fd-name{
  flex:none;min-width:9ch;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);
}
.fd-mail{font-size:17px;font-weight:500;letter-spacing:-.004em;color:var(--base-fg)}
a.fd-mail{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
a.fd-mail:hover,a.fd-mail:focus-visible{text-decoration-color:var(--line-2)}
/* an address nobody has filled in yet: quiet, but unmistakably a gap and
   not something a visitor should try to email */
.fd-todo{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--fg-3)}

/* ═══════════════ SWITCHER PILL ═══════════════ */
.switcher{
  position:fixed;right:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,22px);z-index:95;
  display:flex;align-items:center;gap:10px;
  background:color-mix(in srgb, var(--base-bg) 66%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:999px;
  padding:6px 12px 6px 6px;color:var(--base-fg);
  transition:background-color .55s ease,color .55s ease,border-color .55s ease;
}
.sw-seg{display:flex;background:transparent;border-radius:999px}
.sw-btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-2);padding:7px 12px;border-radius:999px;
  transition:background-color .3s ease,color .3s ease;
}
.sw-btn[aria-pressed="true"]{background:var(--base-fg);color:var(--base-bg)}

/* ═══════════════ REVEAL / MOTION ═══════════════ */
/* .js-gated: see the <head> of each page. No script, no hidden copy. */
.js .reveal{opacity:0;transform:translateY(26px)}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--rd,0s);
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .mq-track{animation:none}
}

/* ═══════════════ RESPONSIVE ═══════════════ */
/* ≤768px: the two card sections stack full-width with a 16px gap and 20px side
   padding; body copy holds at 17px. The fixed theme toggle shrinks and the
   sections whose last line sits at the bottom edge (#approach, #after, #proof, the footer)
   get enough bottom padding to clear it when their end lines up with the
   viewport's. */
@media (max-width:768px){
  .see{padding-inline:20px}
  #after .wrap{padding-inline:20px}
  .see-cols,.keeps{grid-template-columns:1fr;gap:16px}
  .see-col,.keeps li{padding:22px}
  .see-col p,.keeps p{font-size:17px}
  .see-col .blabel,.keeps .blabel{font-size:12.5px}
  #approach,#after,#proof{padding-bottom:calc(clamp(44px,5.4vw,84px) + var(--toggle-clear))}
  .switcher{right:12px;bottom:12px;gap:6px;padding:4px 8px 4px 4px}
  .sw-btn{padding:6px 10px;font-size:9.5px}
}
@media (max-width:1023px){
  .breakdown .wrap{grid-template-columns:1fr;gap:34px}
  .bd-side{position:static}
  .bd-summary{max-width:56ch}
  .ap-grid{grid-template-columns:1fr;align-items:start}
  .ap-fig{max-width:640px}
  .ct-grid{grid-template-columns:1fr;gap:52px}
}
/* ≤919px: the nav drops the wordmark. Measured against four links plus the CTA,
   the full lockup needs 812px of the 805px available at 860 wide, and still has
   only 26px of slack at 900; it first clears comfortably at 920 (43px). The
   app-icon mark stays at every width, and .brand keeps the accessible name
   ("Northbound IT, home") either way, so nothing is lost but the repetition. */
@media (max-width:919px){
  .brand-word{display:none}
}
@media (max-width:859px){
  /* fixed attachment is unreliable on mobile browsers */
  .see-bg{background-attachment:scroll}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .about-fig{max-width:430px;aspect-ratio:4/3}
  .cards{grid-template-columns:1fr;gap:16px}
  .card{aspect-ratio:4/3}
  .ft-grid{grid-template-columns:1fr 1fr;gap:44px}
  .ft-brand{grid-column:1 / -1}
}
/* ≤679px: the nav links drop, and offering descriptions collapse behind a
   tap-to-open name row */
@media (max-width:679px){
  /* below 680 not even the mark-only lockup leaves room for four links and the
     CTA: it needs 596px of the 636px available at 680, and goes over at 620.
     The links drop and the footer's Explore list carries navigation. This used
     to sit at 559px, which had been overflowing since well before there were
     four links. */
  .nav-link{display:none}
  .offerings{grid-template-columns:1fr;gap:26px}
  .offering{display:flex;flex-direction:column;align-items:flex-start}
  .off-name{display:none}
  .off-toggle{
    display:flex;order:1;width:100%;align-items:center;justify-content:space-between;
    gap:14px;text-align:left;padding:0;color:inherit;
    font-size:21px;font-weight:580;font-stretch:106%;letter-spacing:-.008em;line-height:1.15;
  }
  .off-chev{width:15px;flex:none;color:var(--fg-3);transition:transform .4s var(--ease)}
  .offering.open .off-chev{transform:rotate(180deg)}
  .offering .pill{order:2;margin-top:10px}
  .off-card{
    order:3;width:100%;min-height:0;margin-top:0;
    display:grid;grid-template-rows:0fr;align-items:stretch;justify-items:stretch;
    padding:0 16px;border-color:transparent;background:transparent;
    transition:grid-template-rows .5s var(--ease),padding .4s ease,margin .4s ease,border-color .3s ease;
  }
  .off-card p{overflow:hidden;min-height:0;max-width:none;text-align:left}
  .offering.open .off-card{
    grid-template-rows:1fr;padding:16px;margin-top:14px;
    border-color:var(--line);background:color-mix(in srgb, currentColor 3%, transparent);
  }
}
@media (max-width:559px){
  .hero{align-items:flex-start}
  .hero-intro{padding-top:calc(var(--nav-h) + 9svh)}
  /* the mark shrinks but never hides; the wordmark is already gone by 919, so
     the type rule that used to sit here would never have applied */
  .brand-mark{width:34px;height:34px;border-radius:9px}
  .brand-mark .north{height:17px}
  .ft-top{margin-left:0}
}