/* ==========================================================================
   MAROSI — partners.marosilabs.com · Partner Program

   The chrome below (tokens, reset, utilities, brand, buttons, nav, the
   card-stack menu, the contact CTA, the FAQ accordion, the footer, the
   split-text states) is copied VERBATIM from the main site's css/main.css so
   the two properties read as one property. If you change any of it there,
   copy it down again. Everything after the "PARTNERS — the sections" banner
   is this page's own, built from the same parts.

   The one deliberate difference: this page has no film. Its sections flow,
   the way the main site's process, lab, FAQ, and contact sections do, and
   their structure (rules, column rules, vias, chips, the stack) is drawn
   in copper by js/board.js as the reader scrolls. See the sections banner.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #f5f6f8;
  --fg: #0b0d10;

  /* neutral grey ramp — the only "colors" in the chrome */
  --grey-700: #3f444b;  /* secondary text — AA on the halls */
  --grey-600: #565d66;  /* muted text */
  --grey-400: #8a9098;
  --grey-300: #b4b9c0;

  --hairline: rgba(11, 13, 16, 0.08);
  --hairline-strong: rgba(11, 13, 16, 0.16);
  --panel: rgba(255, 255, 255, 0.58);
  --panel-hover: rgba(255, 255, 255, 0.74);
  --panel-border: rgba(11, 13, 16, 0.08);
  --nav-bg: rgba(245, 246, 248, 0.72);
  --btn-hover: #2a2e34;
  --shadow-panel: 0 1px 2px rgba(11, 13, 16, 0.05), 0 12px 32px rgba(11, 13, 16, 0.07);

  /* menu card stack: near-opaque paper cards */
  --menu-card: rgba(252, 253, 254, 0.92);

  /* Aeonik leads both stacks — drop licensed @font-face files in and it
     takes over; Inter (text) / Inter Tight (display) are the live webfonts */
  --font-sans: 'Aeonik', 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-display: 'Aeonik', 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  /* the menu's voice: fast launch, long soft landing (card toss + rolls) */
  --ease-menu: cubic-bezier(0.4, 0, 0.1, 1);

  /* ---- the grid: 12 columns, one shared outer margin, one gap unit.
     Every block on every page keys off these three — the margin is the
     page's left/right datum (nav, hero, sections, footer all sit on it),
     the gap is the only horizontal spacing unit inside the grid. ---- */
  --grid-margin: clamp(28px, 7vw, 140px);
  --col-gap: clamp(16px, 1.8vw, 32px);
  --gutter: var(--grid-margin); /* legacy alias — everything already keys off it */

  --nav-h: 84px;
  --nav-top: clamp(10px, 2vh, 24px);
  --container: 1520px;
  --edge-y: clamp(28px, 4.5vh, 52px);
}

/* the one inversion: the dark capabilities night track mid-film */
html.inverted {
  --bg: #08090b;
  --fg: #f4f5f7;
  --grey-700: #aab0b8;
  --grey-600: #9ba1a9;
  --grey-400: #6a7078;
  --grey-300: #4a5058;
  --hairline: rgba(244, 245, 247, 0.1);
  --hairline-strong: rgba(244, 245, 247, 0.2);
  --panel: rgba(12, 14, 17, 0.55);
  --panel-hover: rgba(12, 14, 17, 0.72);
  --panel-border: rgba(244, 245, 247, 0.1);
  --nav-bg: rgba(8, 9, 11, 0.6);
  --btn-hover: #d9dce1;
  --shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.4);
  --menu-card: rgba(16, 18, 22, 0.92);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100svh;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  /* the chrome flip rides inside the GL dusk (eclipse + iris dip) — a longer,
     eased fade sits in that envelope instead of snapping through it */
  transition: background-color 0.9s var(--ease-io), color 0.9s var(--ease-io);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; cursor: pointer; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; cursor: text; -webkit-user-select: text; user-select: text; }
sup { font-size: 0.42em; }
::selection { background: var(--fg); color: var(--bg); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--grey-300); border-radius: 4px; }

/* js/scrollbar.js replaces the native bar with a Lusion-style overlay pill —
   it rides the film's damped scroll, fades out when idle, drags on fine
   pointers. The 8px native styling above stays as the no-JS fallback. */
html.csb { scrollbar-width: none; }
html.csb::-webkit-scrollbar { display: none; }

.csb-track {
  position: fixed; top: 6px; bottom: 6px; right: 0;
  width: 18px; z-index: 4000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}
.csb-track.is-on { opacity: 1; }
.csb-track.csb-idle { display: none; }
/* touch keeps it as a pure indicator — the rail never intercepts a swipe */
@media (pointer: fine) { .csb-track.is-on { pointer-events: auto; } }

.csb-thumb {
  position: absolute; top: 0; right: 6px; width: 4px;
  border-radius: 999px;
  background: rgba(11, 13, 16, 0.34);
  background: color-mix(in srgb, var(--fg) 36%, transparent);
  transition: width 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
  will-change: transform;
}
@media (pointer: fine) {
  .csb-track:hover .csb-thumb,
  .csb-track.is-dragging .csb-thumb {
    width: 7px;
    background: rgba(11, 13, 16, 0.55);
    background: color-mix(in srgb, var(--fg) 58%, transparent);
  }
}

:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 5000;
  padding: 10px 18px; border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font-size: 0.9375rem; font-weight: 600;
  transition: top 0.25s var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* microlabel — the only uppercase on the site */
.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  word-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-600);
}
/* weight accent for single emphasized words inside headlines — the word
   goes black (900) against the 700 line, nothing else changes */
.acc {
  font-style: normal;
  font-weight: 900;
}
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }

/* every display voice speaks Inter Tight (or Aeonik when present) —
   body copy stays in Inter for text-size rendering */
.mega, .mega-s, .statement, .slide-title, .slide-index,
.proc-name, .manifesto p,
.menu-link, .menu-talk-row, .nav-burger, .brand, .btn {
  font-family: var(--font-display);
}

.mega {
  font-weight: 700;
  font-size: clamp(3.25rem, 8.5vw, 9rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.mega-s {
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: 1.03;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

/* ---------- Brand (the MAROSI antelope mark + name) ---------- */
.brand {
  display: inline-flex; align-items: center; gap: 0.65em;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.brand [aria-hidden] { display: inline-flex; align-items: center; gap: 0.65em; }
.logo { width: 1.9em; height: 1.9em; object-fit: contain; }
.logo--light { display: none; }
html.inverted .logo--dark { display: none; }
html.inverted .logo--light { display: block; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  height: 58px;
  padding: 0 34px;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
              color 0.35s var(--ease-out), transform 0.1s ease-out;
}
.btn:active { transform: scale(0.98); }
/* the arrow window: two stacked ↗ glyphs in a clipped 1em box — on hover the
   first exits up-right, its twin lands from down-left. One quiet, decisive move. */
.btn-arr {
  display: inline-grid; place-items: center;
  width: 1em; height: 1em;
  overflow: clip;
}
.btn-arr svg {
  grid-area: 1 / 1;
  width: 0.8em; height: 0.8em;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.45s var(--ease-out);
}
.btn-arr svg:last-child { transform: translate(-150%, 150%); }
.btn:hover .btn-arr svg:first-child, .btn:focus-visible .btn-arr svg:first-child,
.cta-talk:hover .btn-arr svg:first-child, .cta-talk:focus-visible .btn-arr svg:first-child,
.menu-card--talk:hover .btn-arr svg:first-child, .menu-card--talk:focus-visible .btn-arr svg:first-child {
  transform: translate(150%, -150%);
}
.btn:hover .btn-arr svg:last-child, .btn:focus-visible .btn-arr svg:last-child,
.cta-talk:hover .btn-arr svg:last-child, .cta-talk:focus-visible .btn-arr svg:last-child,
.menu-card--talk:hover .btn-arr svg:last-child, .menu-card--talk:focus-visible .btn-arr svg:last-child {
  transform: translate(0, 0);
}
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover { background: var(--btn-hover); }
.btn--ghost {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--fg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* the ghost pill commits on hover: fills to full ink, text flips paper */
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

/* ---------- Nav — colorless, floating clear of the top edge ---------- */
.nav {
  position: fixed; top: var(--nav-top); left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
}
.nav-inner {
  height: 100%;
  max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
/* the bar carries no surface — the brand floats directly over the scene */
.nav-brand {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  transition: opacity 0.45s var(--ease-out);
}
.nav-brand .logo { width: 2.35em; height: 2.35em; }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.nav-cta {
  height: 52px; padding: 0 30px; font-size: 1.0625rem;
  /* restate the .btn transition + opacity so the end-of-page fade rides along */
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
              color 0.35s var(--ease-out), transform 0.1s ease-out,
              opacity 0.45s var(--ease-out);
}
/* html.at-end (set by initNavEnd when the contact section arrives): the page's
   own Let's Talk owns the frame — the nav brand and CTA bow out until scroll-up */
html.at-end .nav-brand, html.at-end .nav-cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s,
              transform 0.1s ease-out;
}
/* the menu button: a speaking pill. "Menu" rolls out, "Close" rolls in,
   and the two dots spin a quarter turn on hover and while open. */
.nav-burger {
  display: inline-flex; align-items: center; gap: 0.55em;
  height: 52px; padding: 0 22px 0 26px;
  border-radius: 999px;
  font-size: 1.0625rem; font-weight: 600;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, transform 0.15s ease-out;
}
/* both words share one grid cell: the label keeps the wider word's width,
   so the pill never jumps when Menu swaps for Close */
.burger-label { display: inline-grid; justify-items: start; overflow: clip; line-height: 1.25; }
.burger-word {
  grid-area: 1 / 1;
  transition: transform 0.35s var(--ease-menu);
}
.burger-word--close { transform: translateY(115%); }
.nav-burger[aria-expanded="true"] .burger-word { transform: translateY(-115%); }
.nav-burger[aria-expanded="true"] .burger-word--close { transform: translateY(0); }
.burger-dots {
  position: relative; width: 1em; height: 1em;
  transition: transform 0.4s var(--ease-menu);
}
.burger-dots i {
  position: absolute; top: 50%; width: 0.29em; height: 0.29em; margin-top: -0.145em;
  border-radius: 50%; background: currentColor;
}
.burger-dots i:first-child { left: 0.04em; }
.burger-dots i:last-child { right: 0.04em; }
/* open state commits to full ink, same as the ghost pill next door */
.nav-burger[aria-expanded="true"] {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.nav-burger[aria-expanded="true"] .burger-dots { transform: rotate(90deg); }
/* hover-capable pointers only: touch taps would leave :hover stuck */
@media (hover: hover) {
  .nav-burger:hover {
    background: var(--panel-hover);
    border-color: var(--hairline-strong);
  }
  .nav-burger:hover .burger-dots { transform: rotate(90deg); }
  .nav-burger[aria-expanded="true"]:hover {
    background: var(--fg);
    border-color: var(--fg);
  }
}

/* ---------- Menu: a stack of cards tossed in under the nav ----------
   Desktop: an invisible click-catcher over the untouched page; the cards
   fly up from below with a slight rotation and settle straight, links card
   first, talk card behind it. Closing reverses the stagger. */
.menu {
  position: fixed; inset: 0; z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-menu), visibility 0s linear 0.6s;
}
.menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-cards {
  position: absolute;
  top: calc(var(--nav-top) + var(--nav-h) + 10px);
  right: var(--gutter);
  width: min(400px, calc(100vw - var(--gutter) * 2));
  display: flex; flex-direction: column; gap: 10px;
}
.menu-card {
  border-radius: 22px;
  background: var(--menu-card);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transform: translate3d(0, 88px, 0) rotate(3.5deg);
  transition: transform 0.55s var(--ease-menu), opacity 0.4s ease-out;
  transition-delay: var(--close-d, 0s);
  will-change: transform;
}
.menu.is-open .menu-card {
  opacity: 1;
  transform: none;
  transition-delay: var(--open-d, 0s);
}
.menu-card--links { --open-d: 0.05s; --close-d: 0.12s; }
.menu-card--notes { --open-d: 0.09s; --close-d: 0.08s; transform: translate3d(0, 96px, 0) rotate(2.5deg); }
.menu-card--careers { --open-d: 0.13s; --close-d: 0.04s; transform: translate3d(0, 104px, 0) rotate(-2.5deg); }
.menu-card--talk { --open-d: 0.17s; --close-d: 0s; transform: translate3d(0, 120px, 0) rotate(-3.5deg); }

/* link rows: pill highlight scales in, text rolls up, arrow lands */
.menu-card--links { padding: 14px 8px; display: flex; flex-direction: column; }
.menu-link {
  position: relative;
  display: block;
  padding: 16px 26px;
  font-size: 1.5rem; font-weight: 600;
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--fg);
}
.menu-link-bg {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--fg);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-menu);
}
/* the roll window: word + clone share a clipped grid cell (see .burger-label);
   the padding/margin pair keeps descenders inside the clip */
.menu-link-inner {
  position: relative; display: inline-grid; vertical-align: top;
  overflow: clip;
  padding: 0.12em; margin: -0.12em;
}
.menu-link-text {
  grid-area: 1 / 1;
  transition: transform 0.4s var(--ease-menu);
}
.menu-link-text--clone { transform: translateY(115%); }
.menu-link-arr {
  position: absolute; right: 24px; top: 50%;
  width: 1em; height: 1em; margin-top: -0.5em;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transform: scale(0);
  transition: transform 0.2s var(--ease-menu);
}
.menu-link:hover .menu-link-bg, .menu-link:focus-visible .menu-link-bg { opacity: 0.06; transform: none; }
.menu-link:hover .menu-link-text, .menu-link:focus-visible .menu-link-text,
.menu-card--talk:hover .menu-link-text, .menu-card--talk:focus-visible .menu-link-text,
.menu-card--notes:hover .menu-link-text, .menu-card--notes:focus-visible .menu-link-text,
.menu-card--careers:hover .menu-link-text, .menu-card--careers:focus-visible .menu-link-text { transform: translateY(-115%); }
.menu-link:hover .menu-link-text--clone, .menu-link:focus-visible .menu-link-text--clone,
.menu-card--talk:hover .menu-link-text--clone, .menu-card--talk:focus-visible .menu-link-text--clone,
.menu-card--notes:hover .menu-link-text--clone, .menu-card--notes:focus-visible .menu-link-text--clone,
.menu-card--careers:hover .menu-link-text--clone, .menu-card--careers:focus-visible .menu-link-text--clone { transform: translateY(0); }
.menu-link:hover .menu-link-arr, .menu-link:focus-visible .menu-link-arr {
  transform: scale(1);
  transition-delay: 0.12s;
}
/* the ink pill needs more alpha to read on the dark night-track cards */
html.inverted .menu-link:hover .menu-link-bg, html.inverted .menu-link:focus-visible .menu-link-bg { opacity: 0.1; }

/* the page cards (field notes, careers): the talk card's shape in paper —
   page destinations, so they keep the card stock and carry the forward
   arrow, not the ↗ */
.menu-card--notes, .menu-card--careers {
  display: flex; flex-direction: column; gap: 2px;
  padding: 24px 28px;
}
.menu-card--notes .btn-arr svg, .menu-card--careers .btn-arr svg { stroke-width: 1.5; }
.menu-card--notes:hover .btn-arr--fwd svg:first-child,
.menu-card--notes:focus-visible .btn-arr--fwd svg:first-child,
.menu-card--careers:hover .btn-arr--fwd svg:first-child,
.menu-card--careers:focus-visible .btn-arr--fwd svg:first-child { transform: translate(150%, 0); }
.menu-card--notes:hover .btn-arr--fwd svg:last-child,
.menu-card--notes:focus-visible .btn-arr--fwd svg:last-child,
.menu-card--careers:hover .btn-arr--fwd svg:last-child,
.menu-card--careers:focus-visible .btn-arr--fwd svg:last-child { transform: translate(0, 0); }

/* the talk card: full ink, the site's Let's Talk voice with the email line */
.menu-card--talk {
  display: flex; flex-direction: column; gap: 2px;
  padding: 24px 28px;
  background: var(--fg);
  border-color: transparent;
  color: var(--bg);
}
.menu-talk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 1.5rem; font-weight: 600;
  line-height: 1.2; letter-spacing: -0.02em;
}
.menu-talk-mail {
  font-size: 0.9375rem;
  opacity: 0.62;
  transition: opacity 0.3s ease;
}
.menu-card--talk:hover .menu-talk-mail, .menu-card--talk:focus-visible .menu-talk-mail,
.menu-card--notes:hover .menu-talk-mail, .menu-card--notes:focus-visible .menu-talk-mail,
.menu-card--careers:hover .menu-talk-mail, .menu-card--careers:focus-visible .menu-talk-mail { opacity: 1; }

/* short viewports: tighten the rows, then allow the stack itself to scroll */
@media (max-height: 700px) {
  .menu-link { padding: 12px 24px; font-size: 1.35rem; }
  .menu-card--talk, .menu-card--notes, .menu-card--careers { padding: 18px 26px; }
  .menu-talk-row { font-size: 1.35rem; }
}
@media (max-height: 560px) {
  .menu-cards {
    bottom: var(--edge-y);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.hero-title {
  margin-bottom: 2.75rem;
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 11rem);
  line-height: 0.98;
  letter-spacing: -0.034em;
}
.hero-line { display: block; }
.hero-line--deck {
  margin-top: 1.75rem;
  font-family: var(--font-sans); /* body voice inside the display h1 */
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: var(--grey-700);
}
/* the hero foot sits on the grid: sub copy owns columns 1-6 */
.hero-foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: end;
}
.hero-sub {
  grid-column: 1 / span 6;
  max-width: 36ch;
  color: var(--grey-700);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.55;
}
/* mobile-only Let's Talk under the hero copy — stands in for the nav CTA,
   which is hidden below 820px (see the 820px media block) */
/* ---------- 06 · contact — one headline, one giant invitation ---------- */
.contact { text-align: center; }
.contact-title {
  margin-bottom: 1.75rem;
  font-size: clamp(3rem, 7.4vw, 7.5rem);
  line-height: 1.0;
  letter-spacing: -0.028em;
}
.contact-sub {
  color: var(--grey-700);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  max-width: 44ch; margin: 0 auto clamp(3.5rem, 7vh, 5.5rem);
  text-wrap: balance;
}
/* NOTE: the main site's giant Let's Talk pill and its sonar echoes are
   deliberately not copied down. On this page the form is the ask, so the
   pill would be a second, competing object in the same frame. */

/* the quiet alternative under the loud one */
.contact-alt { margin-top: clamp(2rem, 4vh, 3rem); }
.contact-alt a {
  display: inline-block;
  padding: 12px 4px; margin: -12px 0; /* tap target without moving the text */
  transition: color 0.2s ease;
}
.contact-alt a:hover { color: var(--fg); }

/* ---------- 06 · questions — a quiet accordion before the ask ---------- */
.faq-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -0.03em;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.faq-item { border-top: 1px solid var(--hairline-strong); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline-strong); }
.faq-item summary {
  display: flex; align-items: baseline; gap: 1.4rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  letter-spacing: -0.015em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-index { flex: none; width: 2.2rem; color: var(--grey-600); font-size: 0.75rem; }
/* plus that loses its vertical bar when the item opens */
.faq-mark { position: relative; flex: none; width: 14px; height: 14px; margin-left: auto; align-self: center; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor;
}
.faq-mark::before { width: 14px; height: 1.5px; }
.faq-mark::after { width: 1.5px; height: 14px; transition: transform 0.3s var(--ease-out); }
.faq-item[open] .faq-mark::after { transform: scaleY(0); }
.faq-answer {
  padding: 0 0 1.6rem 3.6rem; /* clears the index column */
  color: var(--grey-700);
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 62ch;
}
.faq-answer a { border-bottom: 1px solid var(--hairline-strong); transition: border-color 0.15s ease-out; }
.faq-answer a:hover { border-bottom-color: var(--fg); }
@media (max-width: 640px) {
  .faq-index { display: none; }
  .faq-answer { padding-left: 0; }
}

/* ---------- footer — the mark signs off, links beside it, legal line ---------- */
.footer { padding: clamp(3.5rem, 8vh, 5.5rem) 0 2rem; position: relative; }
.footer-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 2rem 2.5rem; flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
/* the closing brand — same proportions as the nav brand, three times the size */
.brand--footer { font-size: clamp(2.65rem, 8vw, 4rem); }
.brand--footer .logo { width: 2.35em; height: 2.35em; }
.footer-nav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.25rem 2.4rem;
}
.footer-nav a {
  position: relative;
  padding-block: 9px; /* 44px hit-area floor */
  color: var(--fg); font-size: 1.125rem;
}
.footer-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 5px;
  width: 100%; height: 1px; background: var(--fg);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.footer-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 1.4rem;
  font-size: 0.9375rem;
  color: var(--grey-600);
}
/* inline links: grow the tap target upward without moving the text */
.footer-legal a {
  display: inline-block;
  padding-top: 12px; margin-top: -12px;
}
.footer-legal a:hover { color: var(--fg); }

/* ==========================================================================
   TEXT ANIMATION STATES
   ========================================================================== */

/* the clip window is padded (with compensating negative margin) so tight
   line-heights don't crop descenders or the serif accent's overhang */
.split-w {
  display: inline-block; overflow: clip; vertical-align: top;
  padding: 0.22em 0.28em; margin: -0.22em -0.28em;
}
.split-c {
  display: inline-block;
  transform: translateY(150%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(min(var(--i, 0), 24) * 24ms);
}
.is-visible .split-c { transform: none; }


/* ==========================================================================
/* ==========================================================================
   PARTNERS — the sections.
   Everything above this line is the main site's chrome, copied verbatim from
   css/main.css so the two properties are one property. Below it, only the
   pieces this page needs, built out of the same parts: mono kickers, .mega-s
   headlines, hairline columns, grey body copy, and the board.

   The board (js/board.js) is a fixed canvas behind the document. It draws
   the structure this stylesheet deliberately leaves out: the rule under each
   title, the left rule of each column, the via beside each row, the chips,
   the chain, the stack. With JS off those come back as
   hairlines (the html.no-js rules) so the document still has its bones.
   ========================================================================== */

/* ---------- the board ---------- */
.board {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
html.no-js .board { display: none; }
main, .footer { position: relative; z-index: 1; }

/* the flow rhythm the main site uses between its unpinned sections */
.flow-section { position: relative; padding: clamp(7rem, 15vh, 12rem) 0; }
.flow-section.contact { padding-block: clamp(8rem, 16vh, 14rem) clamp(6rem, 12vh, 10rem); }

/* section opening: mono kicker, headline, then the rule, which the board
   draws in copper from the rail to the left spine. The element stays as the
   geometry the copper lands on. */
.sec-kicker { margin-bottom: clamp(1.4rem, 3vh, 2.2rem); }
.sec-title { margin-bottom: 2.2rem; max-width: 20ch; }
.sec-rule { height: 1px; margin-bottom: clamp(3.5rem, 7vh, 5rem); background: transparent; }
html.no-js .sec-rule { background: var(--fg); }

.sec-note { margin-top: 2rem; font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 600; }

/* the reveal: everything rises a little, in order. One observer, one class.
   Anchors the board measures are never transformed (the board reads layout
   positions, so a mid-reveal element still lands where it will rest). */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 01 · hero ---------- */
/* the main site's hero, unpinned: the headline owns the frame from the
   lower third, the etch grows on the right half behind it */
.p-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--nav-h) + var(--nav-top) + 2rem);
  padding-bottom: clamp(96px, 14svh, 160px);
  overflow: clip;
}
@supports (align-items: safe center) { .p-hero { justify-content: safe flex-end; } }
.hero-inner { position: relative; z-index: 2; }
.hero-eyebrow { display: block; margin-bottom: clamp(1.6rem, 3.5vh, 2.6rem); }
.hero-eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px; margin-right: 0.85em;
  border-radius: 50%; background: var(--fg);
  vertical-align: middle;
  animation: dot-pulse 2.8s var(--ease-io) infinite;
}
@keyframes dot-pulse { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
.hero-title {
  margin-bottom: 2.75rem;
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 11rem);
  line-height: 0.98;
  letter-spacing: -0.034em;
}
.hero-line { display: block; }
.hero-line--deck {
  margin-top: 1.75rem;
  font-family: var(--font-sans); /* body voice inside the display h1 */
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: var(--grey-700);
}
.hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.hero-sub {
  max-width: 36ch;
  color: var(--grey-700);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.55;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }
/* mobile-only Become a Partner, standing in for the nav CTA that is hidden
   below 820px, the same trick the main site plays */
.hero-cta { display: none; }
.hero-fine { color: var(--grey-600); }
.scroll-hint {
  position: absolute; bottom: var(--edge-y); left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; align-items: center; gap: 12px;
  transition: opacity 0.6s var(--ease-out);
}
html.scrolled .scroll-hint { opacity: 0; }
.scroll-hint-line { width: 44px; height: 1px; background: var(--grey-400); }

/* ---------- 02 · the problem ---------- */
.split2 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vh, 4rem) var(--col-gap);
  align-items: start;
}
.split2 > :first-child { grid-column: 1 / span 6; }
.split2 > :last-child { grid-column: 8 / span 5; }
.prose p { color: var(--grey-700); font-size: clamp(1.1875rem, 1.5vw, 1.375rem); line-height: 1.55; }
.prose p + p { margin-top: 1.2rem; }
.prose strong { color: var(--fg); font-weight: 600; }

/* each row is a part marked DNP: never placed. The board tees a pad and
   rung off its feeder at every row; the X is the silk no-fit mark.
   html.no-js gets hairline rows back. */
.prose .lead { color: var(--fg); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.5; font-weight: 500; }
.cost-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.dnp-tag {
  border: 1px solid var(--grey-400);
  padding: 0.3em 0.7em;
  font-size: 0.72rem; letter-spacing: 0.16em; color: var(--grey-600);
}
.cost-list { display: grid; gap: 18px; }
.cost {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.55rem 0;
  font-size: 1.0625rem; color: var(--grey-700);
}
html.no-js .cost { border-bottom: 1px solid var(--hairline); }
.cost-ref { margin-left: auto; flex: none; padding-left: 1rem; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--grey-600); }
.cost-x {
  flex: none; width: 15px; height: 15px; margin-top: 0.15em;
  fill: none; stroke: var(--grey-400); stroke-width: 1.6; stroke-linecap: round;
  transform: rotate(-90deg) scale(0.4); opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.4s ease-out;
  transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.is-in .cost-x { transform: none; opacity: 1; }

/* the one path that leaves the section: the board wires it onward */
.third-note { margin-top: clamp(3.5rem, 7vh, 5rem); font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; }

/* ---------- columns: the main site's process grid, at three widths ----------
   The left rule of every column is copper (a feeder above the row fans out
   with 45° drops), so the CSS border is transparent unless JS is off. */
.cols { display: grid; gap: clamp(2.25rem, 4vh, 3.25rem) var(--col-gap); }
.cols--4 { grid-template-columns: repeat(4, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.col {
  border-left: 1px solid transparent;
  padding-left: clamp(1.1rem, 1.8vw, 1.6rem);
}
html.no-js .col { border-left-color: var(--hairline); }
.col-index { margin-bottom: 1.1rem; }
.col-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.016em;
  margin-bottom: 0.7rem;
}
.col-desc { color: var(--grey-700); font-size: 1.125rem; line-height: 1.55; }

/* the model's three columns are chips: the board draws a footprint around
   each one, so they need air between them and a designator line above */
.cols--chips {
  gap: clamp(4rem, 8vh, 6rem) clamp(4rem, 7vw, 7rem);
  margin-top: 2.5rem;
  padding-right: clamp(2rem, 5vw, 5rem);
}
.cols--chips .col { border-left: 0; padding: 0.35rem 0.5rem; }
html.no-js .cols--chips .col { border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 1.2rem 1.25rem; }

/* ---------- rows: a key, a claim, a line ---------- */
.rows { border-top: 1px solid var(--hairline-strong); }
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.5rem var(--col-gap);
  align-items: baseline;
  padding: clamp(1.35rem, 2.4vw, 1.9rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.row-k { grid-column: 1 / span 2; color: var(--grey-400); }
.row-t {
  grid-column: 3 / span 4;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  line-height: 1.15; letter-spacing: -0.016em;
}
.row-d { grid-column: 7 / span 6; color: var(--grey-700); font-size: 1.125rem; line-height: 1.55; }

/* the why rows, tightened: no hairlines (the board's ground does the
   separating), index inline with the title, four rows only */
.rows--why { border-top: 0; display: grid; gap: 22px; }
.rows--why .row { border-bottom: 0; padding: 0.55rem 0; }
.rows--why .row-t { grid-column: 1 / span 5; }
.rows--why .row-t .row-k { margin-right: 0.9em; font-size: 0.8rem; letter-spacing: 0.08em; vertical-align: 0.18em; }
.rows--why .row-d { grid-column: 6 / span 7; }
html.no-js .rows--why .row { border-bottom: 1px solid var(--hairline); padding: 1rem 0; }

/* ---------- partnership models: tabs left, the wire stage right ---------- */
.models {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vh, 3rem) var(--col-gap);
  align-items: start;
}
.model-side { grid-column: 1 / span 5; }
.model-tabs { display: flex; flex-direction: column; }
.model-tab {
  position: relative;
  display: flex; align-items: baseline; gap: 1rem;
  width: 100%; padding: 1.2rem 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  letter-spacing: -0.016em;
  color: var(--grey-400);
  transition: color 0.35s var(--ease-out), padding-left 0.45s var(--ease-out);
}
.model-tab::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--fg);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.model-tab:hover { color: var(--grey-700); }
.model-tab[aria-selected="true"] { color: var(--fg); padding-left: 0.9rem; }
.model-tab[aria-selected="true"]::after { transform: scaleX(1); }
.model-tab .tab-n { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; color: var(--grey-400); }
/* the panels stack in one cell so the page never shifts when a tab changes
   (the board's anchors below would move with it) */
.model-panels { display: grid; margin-top: clamp(2rem, 4vh, 2.75rem); }
.model-panel { grid-area: 1 / 1; }
.model-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.model-panel h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.024em;
  margin-bottom: 1.1rem;
}
.model-panel p { color: var(--grey-700); font-size: clamp(1.1875rem, 1.5vw, 1.375rem); line-height: 1.55; max-width: 44ch; }
.model-fine { margin-top: clamp(2.5rem, 5vh, 3.5rem); font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 600; max-width: 56ch; }

/* the wire stage: three HTML nodes the board draws chips around and wires
   per the selected model. No transforms on the nodes: the board measures
   layout positions. */
.wire-stage {
  grid-column: 7 / span 6;
  position: relative;
  aspect-ratio: 5 / 4;
  min-height: 380px;
  margin-right: clamp(1rem, 3vw, 3rem);
}
.wnode {
  position: absolute;
  width: clamp(160px, 15vw, 210px);
  padding: 15px 18px;
}
.wnode b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.125rem; letter-spacing: -0.016em; line-height: 1.15;
}
.wnode span {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-600);
}
.wnode--client { left: 0; top: 40%; }
.wnode--agency { right: 0; top: 6%; }
.wnode--marosi { right: 0; bottom: 8%; }
/* the stage's nodes are typography; the board draws their terminals.
   White-label pulls MAROSI behind the curtain by dimming the node */
.wnode { transition: opacity 0.6s var(--ease-out); }
.wire-stage[data-model="white-label"] .wnode--marosi { opacity: 0.5; }
html.no-js .wnode { border: 1px solid var(--hairline-strong); border-radius: 10px; }

/* ---------- the scoping pipeline: the spine is the chain ---------- */
.pipe {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vh, 3.5rem) var(--col-gap);
  align-items: start;
}
.pipe-list { grid-column: 1 / span 6; }
.pipe-step {
  padding: 0.9rem 0 0.9rem 1.9rem; /* the chain runs in this gutter */
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 600;
  letter-spacing: -0.018em;
}
html.no-js .pipe-step { border-left: 1px solid var(--hairline-strong); padding-left: 1.2rem; }
.pipe-step small {
  display: block; margin-top: 0.15rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-600);
}
.pipe-aside { grid-column: 8 / span 5; padding: 2.4rem clamp(1.1rem, 1.8vw, 1.6rem) 1.5rem; }
html.no-js .pipe-aside { border-left: 1px solid var(--hairline); }
.pipe-kicker { margin-bottom: 1.2rem; }
.pipe-aside p { color: var(--grey-700); font-size: 1.1875rem; line-height: 1.55; }
.pipe-aside .btn { margin-top: 1.9rem; }
.pipe-fine { margin-top: 1.5rem; font-size: 1rem; color: var(--grey-600); }

/* ---------- the checklist ---------- */
.checks { max-width: 1080px; display: grid; gap: 20px; }
.check {
  display: flex; align-items: flex-start; gap: 1.15rem;
  padding: 0.55rem 0;
  font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
  line-height: 1.5;
}
html.no-js .check { border-bottom: 1px solid var(--hairline); padding: 1.1rem 0; }
.check svg {
  flex: none; width: 20px; height: 20px; margin-top: 0.25em;
  fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms + 100ms);
}
.check.is-in svg { stroke-dashoffset: 0; }
.fit-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; margin-top: clamp(2.5rem, 5vh, 3.5rem); }
.fit-cta .sec-note { margin-top: 0; }
/* who the program is for, said plainly, in the site's microlabel voice */
.audience { margin-top: clamp(2.5rem, 5vh, 3.5rem); display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.audience span { color: var(--grey-600); }

/* ---------- the stack: the day chapter ----------
   The page runs dark (html.inverted from the markup); while this section
   holds the viewport the class lifts and the whole frame returns to paper,
   the body's own background flip, the main site's dusk in reverse. The
   section paints nothing itself. Each layer is a row: name, an empty zone
   the copper runs along, a note. */
.stack-section { padding-block: clamp(8rem, 16vh, 14rem); }
.stack-wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vh, 4rem) var(--col-gap);
  align-items: start;
}
.stack-wrap > :first-child { grid-column: 1 / span 5; }
.stack-side { grid-column: 7 / span 6; }
.stack { display: flex; flex-direction: column-reverse; }
.stack-layer {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-700);
  transition: color 0.45s var(--ease-out);
}
.layer-name { flex: 0 0 auto; }
.layer-zone { flex: 1 1 auto; min-width: 72px; height: 1px; }
html.no-js .layer-zone { background: var(--hairline-strong); }
.stack-layer em { flex: 0 0 auto; font-style: normal; color: var(--grey-400); letter-spacing: 0.06em; text-transform: none; }
/* the model is one thin layer on top, and that is the whole argument */
.stack-layer--ai { color: var(--fg); border-bottom-color: var(--hairline-strong); }
.stack-layer--ai em { color: var(--grey-600); }
.stack-cap { margin-top: 2.5rem; }
.stack-kicker {
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid var(--hairline-strong);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700;
  letter-spacing: -0.022em; line-height: 1.15;
  color: var(--fg);
}

/* ---------- 12 · contact: the main site's closing section, with the form ---------- */
.contact-form-wrap { max-width: 780px; margin: clamp(2rem, 4vh, 3rem) auto 0; text-align: left; }
.form-row { display: grid; gap: 1.15rem; }
@media (min-width: 620px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.form-row + .form-row { margin-top: 1.15rem; }
.field { position: relative; display: block; }
.field-label {
  display: block; margin-bottom: 0.5rem;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--grey-600);
}
.field-label .req { color: var(--grey-400); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--panel-border); border-radius: 14px;
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 1.0625rem; line-height: 1.4;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 118px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a9098' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px;
  padding-right: 42px;
  cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--grey-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--fg); background: var(--panel-hover);
}
.field-err {
  display: block; min-height: 1.2em; margin-top: 0.4rem;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grey-600);
  opacity: 0; transform: translateY(-3px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
.field.has-err input, .field.has-err select, .field.has-err textarea { border-color: var(--fg); }
.field.has-err .field-err { opacity: 1; transform: none; }
.form-foot { margin-top: 1.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.form-fine { font-size: 1rem; color: var(--grey-600); max-width: 34ch; }
.form-status {
  margin-top: 1.25rem;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey-600);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.7; }
/* the done state takes the form's place: one mark, one line, no confetti */
.form-done { display: none; text-align: center; padding: clamp(2rem, 5vh, 3.5rem) 0; }
.contact-form-wrap.is-done .form-body { display: none; }
.contact-form-wrap.is-done .form-done { display: block; }
.form-done-mark {
  width: 46px; height: 46px; margin: 0 auto 1.75rem;
  fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 90; stroke-dashoffset: 90;
  animation: draw 0.9s var(--ease-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.form-done h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.6rem); letter-spacing: -0.024em; margin-bottom: 0.9rem;
}
.form-done p { color: var(--grey-700); font-size: 1.1875rem; line-height: 1.55; max-width: 46ch; margin-inline: auto; }
.contact-alt a { display: inline-block; padding: 12px 4px; margin: -12px 0; transition: color 0.2s ease; }
.contact-alt a:hover { color: var(--fg); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  /* the problem split gets cramped before the 900 stack point: let the
     DNP list drop below the prose a step earlier */
  .split2 > :first-child, .split2 > :last-child { grid-column: 1 / -1; }
  .split2 > :first-child { max-width: 640px; }
}
@media (max-width: 1080px) {
  .cols--4 { grid-template-columns: repeat(2, 1fr); }
  .row-k { grid-column: 1 / span 3; }
  .row-t { grid-column: 4 / span 4; }
  .row-d { grid-column: 8 / span 5; }
  .wnode { width: clamp(150px, 20vw, 190px); padding: 12px 14px; }
}
@media (max-width: 900px) {
  .p-hero { padding-bottom: clamp(72px, 12svh, 120px); }
  .hero-title { font-size: clamp(2.75rem, 11.5vw, 6rem); }
  .split2 > :first-child, .split2 > :last-child,
  .model-side, .wire-stage, .pipe-list, .pipe-aside,
  .stack-wrap > :first-child, .stack-side { grid-column: 1 / -1; }
  .cols--3, .cols--chips { grid-template-columns: 1fr; }
  .cols--chips { gap: 4.75rem; padding-right: 0; max-width: 560px; }
  .row { grid-template-columns: 1fr; gap: 0.35rem; }
  .row-k, .row-t, .row-d { grid-column: 1 / -1; }
  .rows--why { gap: 26px; }
  .rows--why .row-t, .rows--why .row-d { grid-column: 1 / -1; }
  .wire-stage { aspect-ratio: 1 / 1; min-height: min(340px, 88vw); max-width: 560px; margin-right: 0; }
  .wnode--client { top: 42%; }
  .pipe-aside { padding: 1.5rem 0 0; }
  .stack-layer em { display: none; }
}
@media (max-width: 820px) {
  :root { --nav-h: 72px; }
  .menu { background: var(--bg); }
  .nav-cta { display: none; }
  .nav-burger { height: 48px; padding: 0 19px 0 22px; font-size: 1rem; }
  .hero-cta { display: inline-flex; }
}
@media (max-width: 640px) {
  .cols--4 { grid-template-columns: 1fr; }
  .wnode { width: 44%; }
  .stack-layer { letter-spacing: 0.06em; font-size: 0.75rem; }
}
@media (max-width: 340px) {
  /* legacy-narrow screens: offscreen chrome (the tossed menu cards) can
     inflate the scroll area without any element actually showing past
     the edge; clip it */
  body { overflow-x: clip; }
}
@media (max-width: 520px) {
  body { font-size: 1.125rem; }
  /* the closing brand's 2.65rem floor + the 2.35em logo outgrow very
     narrow screens; let it scale down with the viewport */
  .brand--footer { font-size: clamp(1.9rem, 10.5vw, 2.65rem); }
  .hero-ctas .btn, .form-foot .btn { width: 100%; }
  .scroll-hint { display: none; }
}
html.no-js .nav-burger { display: none; }
html.no-js .nav-cta { display: inline-flex; }

/* ==========================================================================
   REDUCED MOTION (the board draws instantly, signals stay off)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important; /* the menu stagger is delay-built */
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .split-c { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .cost-x { opacity: 1; transform: none; }
  .check svg, .form-done-mark { stroke-dashoffset: 0; }
  .hero-eyebrow .dot { opacity: 1; }
  .scroll-hint { display: none; }
}