/* ════════════════════════════════════════════════════════════════════
   NORTHBOUND IT PORTFOLIO — site stylesheet
   ════════════════════════════════════════════════════════════════════
   A FORK of the main site's assets/site.css, taken 2026-07-31. The two
   are separate deploys and share no files: edit this one freely, and
   never assume a change here reaches northboundit.co.za or the reverse.
   Served as a normal stylesheet; make-portfolio-artifact.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);

  --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;
  color-scheme:dark;
}
html[data-theme="light"]{
  --base-bg:var(--paper); --base-fg:#161511;
  --alt-bg:var(--black); --alt-fg:var(--white);
  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;
}
.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}
/* the page you are on: the underline hover draws, already drawn */
.nav-link.is-current{color:inherit}
.nav-link.is-current::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);
  opacity:0;transform:translateY(34px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.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);
  opacity:0;transform:translateY(34px);
  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}

/* The main site's SEE section lived here. Its .see-bg was the one rule in this
   sheet that pulled in an image (server-corridor-dark.png, 1.5MB), and this
   site has no such section, so the rule and the image were both left behind
   rather than forked. The font is now the only thing this file fetches. */

/* ═══════════════ 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 itself. 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 one 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 reuse the bracket-label device from
   .principles rather than introducing a new card shape */
.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(24px,3vw,44px);
}
.keeps li{border-top:1px solid var(--line);padding-top:clamp(14px,1.6vw,20px)}
.keeps p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--fg-2);max-width:34ch}
.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 + 56px)}
.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,.ft-links a[aria-current]{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 pages on the main site 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. .pf-page (portfolio/) is the
   same kind of document, so it shares the plain page ground. */
.svc-page,.pf-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}
/* 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}

/* ═══════════════ PORTFOLIO ═══════════════ */
/* portfolio/index.html. Page furniture matches the service pages, but the
   catalogue wants the full 1640px .wrap rather than the 1180px reading measure
   .sp-body uses, so the head gets its own rule instead of borrowing that one.

   Nothing here is a photograph. There is no shot of these projects we are
   allowed to publish, so the blocks are typeset cards on the page's own ground
   rather than the image-led treatment .card and the old .pf-block used. The
   card itself never moves on hover either: most projects have no public URL,
   and a card that lifts under the cursor promises a link that is not there.
   The ones that do have a URL carry a .pf-link in the foot, and that is the
   only thing on the card that responds. */
.pf-head{padding-block:clamp(36px,6vw,80px) clamp(44px,5.4vw,76px)}
.pf-sub{margin-top:22px;font-size:16.5px;line-height:1.6;color:var(--fg-2);max-width:56ch}

/* head meta and the studio facts are the same key/value pair, so they share the
   value rule. The <dt> carries .blabel, which is ALREADY --fg-2 — never colour
   the row itself as well, or the pair squares its own alpha (see CLAUDE.md). */
.pf-meta{
  margin-top:clamp(30px,3.6vw,48px);padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:18px clamp(28px,4vw,64px);
}
.pf-meta > div,.pf-facts > div{display:flex;flex-direction:column;gap:7px}
.pf-meta-v{font-size:16.5px;font-weight:520;line-height:1.35}
.pf-tab{font-variant-numeric:tabular-nums}

/* auto-fit, like .cards, so the grid tracks however many projects are in it.
   The 370px floor caps it at three across on the widest .wrap: a fourth column
   would leave the last row orphaned and squeeze the descriptions. */
.pf-grid{
  margin-top:clamp(44px,6vw,84px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(370px,1fr));
  gap:clamp(14px,1.9vw,30px);
}
.pf-card{
  min-width:0;
  display:flex;flex-direction:column;
  padding:clamp(22px,2vw,30px);
  border:1px solid var(--line);border-radius:3px;
  background:color-mix(in srgb, currentColor 3%, transparent);
}
.pf-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
/* .blabel is nowrap everywhere else, where the labels are two or three words.
   The category labels here run to "[ Native iOS · Student platform ]", which
   as an unbreakable line sets the card's min-content width and pushes the
   single-column grid past a phone viewport. Let it wrap, ragged from the right. */
.pf-card-top .blabel{white-space:normal;text-align:right}
.pf-num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--fg-3)}
.pf-name{
  margin-top:clamp(14px,1.5vw,20px);
  font-size:clamp(22px,2vw,31px);
  font-weight:600;font-stretch:108%;letter-spacing:.015em;text-transform:uppercase;
  line-height:1.06;text-wrap:balance;
}
/* the project's own one-liner: full ink, because it is the claim the card is
   making. Everything under it steps back to --fg-2. */
.pf-line{margin-top:11px;font-size:16.5px;font-weight:480;line-height:1.4;text-wrap:pretty}
.pf-desc{margin-top:14px;font-size:15px;line-height:1.6;color:var(--fg-2);text-wrap:pretty}
.pf-stack{margin-top:clamp(18px,2vw,24px);display:flex;flex-wrap:wrap;gap:7px;list-style:none}
/* the stack chips are .pill, with only the case relaxed: "shadcn/ui" and
   "Next.js" are product names and uppercasing them makes them harder to read */
.pill--case{font-size:11px;letter-spacing:.02em;text-transform:none;padding:5px 10px 4px}

/* the foot pins to the bottom of the card so the row of them lines up however
   long the descriptions run: status on the left, and the live link on the right
   for the projects that have one */
.pf-foot{
  margin-top:auto;padding-top:clamp(20px,2.2vw,28px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 16px;
}
/* status: text only, no colour dot. The word alone carries the meaning. */
.pf-status{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);
}
/* the one hover on the card, and it belongs to the link rather than the card:
   only part of a card actually goes anywhere, so only that part may move */
.pf-link{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--fg-2);border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:color .3s ease,border-color .3s ease;
}
.pf-link:hover,.pf-link:focus-visible{color:inherit;border-color:currentColor}
.pf-link-arr{flex:none;width:11px;height:auto;transition:transform .35s var(--ease)}
.pf-link:hover .pf-link-arr,.pf-link:focus-visible .pf-link-arr{transform:translate(3px,-3px)}

/* ── the studio note ── */
.pf-studio{
  margin-top:clamp(40px,5vw,72px);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(30px,4.4vw,80px);align-items:start;
}
/* smaller than .statement: this sits under a .sec-title on a sub-page, not at
   the top of the home page's About block */
.pf-studio-lead{
  font-size:clamp(19px,1.9vw,27px);
  font-weight:490;font-stretch:103%;letter-spacing:-.01em;line-height:1.34;
  max-width:34ch;text-wrap:pretty;
}
.pf-studio-body{
  margin-top:clamp(16px,1.8vw,24px);
  font-size:16px;line-height:1.65;color:var(--fg-2);max-width:48ch;text-wrap:pretty;
}
.pf-facts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,30px)}

/* ── capability and process columns ── */
/* a hairline over each column with the writing hanging off it, the device the
   two build tracks used before this page had a catalogue to show. Both users
   get a fixed column count rather than auto-fit: the six capabilities divide
   into 3 + 3, and the four process steps are a sequence, so a reflow that puts
   04 beside 01 or leaves 05 and 06 stranded is worse than a narrower column. */
.pf-cols{
  margin-top:clamp(40px,5vw,72px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3vw,52px);
}
.pf-cols--4{grid-template-columns:repeat(4,1fr)}
.pf-col{border-top:1px solid var(--line-2);padding-top:clamp(14px,1.6vw,22px)}
.pf-col h3{
  margin-top:12px;
  font-size:clamp(18px,1.6vw,24px);
  font-weight:580;font-stretch:106%;letter-spacing:-.008em;line-height:1.14;
}
.pf-col p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--fg-2);text-wrap:pretty}
/* same breakpoints the rest of the sheet uses: 1023 / 859 / 679 */
@media (max-width:1023px){
  .pf-cols,.pf-cols--4{grid-template-columns:1fr 1fr}
}
@media (max-width:859px){
  .pf-studio{grid-template-columns:1fr;gap:clamp(28px,7vw,38px)}
}
@media (max-width:679px){
  .pf-cols,.pf-cols--4{grid-template-columns:1fr}
}

/* ═══════════════ 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 index.html. 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 ═══════════════ */
@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}
}
@media (max-width:859px){
  .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}
  .pf-grid{grid-template-columns:1fr;gap:16px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:44px}
  .ft-brand{grid-column:1 / -1}
  /* the wordmark goes, the app-icon mark stays. Four nav links plus the CTA
     will not sit beside the full lockup below this, and .brand carries the
     accessible name ("Northbound IT, home") either way. */
  .brand-word{display:none}
}
/* ≤679px: nav links drop out, and offering descriptions collapse behind a
   tap-to-open name row */
@media (max-width:679px){
  /* below 680px not even the mark-only lockup leaves room for four links and
     the CTA, so the links drop and the footer's Explore list carries
     navigation. This used to be 559px, which already overflowed at three. */
  .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)}
  .brand-mark{width:34px;height:34px;border-radius:9px}
  .brand-mark .north{height:17px}
  .ft-top{margin-left:0}
}