/* ===========================================================================
   ConsultAI - chaptered interrogative
   Tokens first, then the page's own composition classes.
   Nothing here restyles a [data-sc-*] device: those are the mechanism.
   ========================================================================= */

:root {
  /* grounds -------------------------------------------------------------- */
  --paper:    #FBFAF8;
  --bone:     #F4F2ED;
  --concrete: #E6E4DD;
  /* one step up from ink, same family. Was #22333A, a teal that appeared
     nowhere else on the site and turned every gold glow olive. */
  --slate:    #1A1E23;
  --ink:      #14181C;

  /* one accent hue, stopped per ground family.
     gold-deep  small text on light   (5.6:1 on concrete, 6.4:1 on bone)
     gold-line  graphic strokes light (3.7:1 - navigation, not prose)
     gold-lt    text on ink           (10.1:1)
     gold-brand the logo's own value                                      */
  --gold-deep:  #6F5410;
  --gold-line:  #9C7826;
  --gold-lt:    #E0BC63;
  --gold-brand: #B8923A;

  /* scrollcraft roles. Light is the page default; dark grounds restate. */
  --sc-canvas:     var(--bone);
  --sc-surface:    #FFFFFF;
  --sc-ink:        #14181C;
  --sc-ink-soft:   #4E555C;
  --sc-accent:     var(--gold-deep);
  --sc-accent-ink: #FFFFFF;

  --sc-font-display: "Instrument Sans", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* light-ground depth: the engine's alphas are tuned for near-black. */
  --sc-shadow-color: 210 18% 30%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.09),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.07);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.08),
           0 10px 22px -6px hsl(var(--sc-shadow-color) / 0.13);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.07),
           0 20px 44px -10px hsl(var(--sc-shadow-color) / 0.16);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.7);

  /* The content set is fixed by the client and larger than the default
     section rhythm assumes. Tighten the block padding rather than cut an act. */
  --sc-section: clamp(3.75rem, 7vw, 8.5rem);

  --span-h: 46px;
  --span-ink: var(--gold-line);
  --span-dim: rgb(20 24 28 / 0.16);
}

@media (max-width: 860px) { :root { --span-h: 36px; } }

body { background: var(--bone); }

/* the grain is tuned for a dark ground; on paper it reads as dirt. */
.sc-grain { opacity: 0.022; mix-blend-mode: multiply; }

/* ------------------------------------------------------------- grounds --
   Hard cuts, no drift. Redefining --sc-ink alone does not re-ink inherited
   text, so every ground restates `color` on the same subtree.            */
.g {
  position: relative;
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
.g-paper    { --sc-canvas: var(--paper);    --sc-surface: #FFFFFF; }
.g-bone     { --sc-canvas: var(--bone);     --sc-surface: #FFFFFF; }
.g-concrete { --sc-canvas: var(--concrete); --sc-surface: #F3F1EB; }
.g-slate {
  --sc-canvas: var(--slate); --sc-surface: #242931;
  --sc-ink: #EFEEE9; --sc-ink-soft: #A9B7BE;
  --sc-accent: var(--gold-lt); --sc-accent-ink: #14181C;
  --sc-hairline: color-mix(in oklab, #EFEEE9 15%, transparent);
  --sc-hairline-strong: color-mix(in oklab, #EFEEE9 28%, transparent);
}
.g-ink {
  --sc-canvas: var(--ink); --sc-surface: #1C2126;
  --sc-ink: #F2F0EB; --sc-ink-soft: #9AA6AE;
  --sc-accent: var(--gold-lt); --sc-accent-ink: #14181C;
  /* The engine derives both hairlines from --sc-ink ON :root, and a custom
     property resolves where it is DEFINED, not where it is used. Redefining
     --sc-ink on this subtree therefore left every rule and list divider on a
     dark ground at 12% of the DARK ink: invisible. Restate them here. */
  --sc-hairline: color-mix(in oklab, #F2F0EB 15%, transparent);
  --sc-hairline-strong: color-mix(in oklab, #F2F0EB 28%, transparent);
}
/* light text on dark wants a touch more leading, tracking and weight. */
.g-ink, .g-slate { letter-spacing: 0.004em; }
.g-ink .sc-body, .g-slate .sc-body { line-height: 1.68; }
.g-ink .sc-display, .g-slate .sc-display { font-weight: 400; }

/* --------------------------------------------------------------- chrome --
   Not a marketing bar: a mark that goes home and two page links. The span
   rail below is the page's real navigation.

   The chrome is fixed, so headings scroll under it. Same answer as the rail:
   the page fades into it on whichever ground is currently at the top edge,
   rather than letting a wordmark sit inside a headline.                  */
.chrome-veil {
  position: fixed; z-index: 68; pointer-events: none;
  top: 0; left: 0; right: 0; height: 5.4rem;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--top-ground, #F4F2ED) 98%, transparent) 0%,
    color-mix(in oklab, var(--top-ground, #F4F2ED) 94%, transparent) 42%,
    color-mix(in oklab, var(--top-ground, #F4F2ED) 58%, transparent) 68%,
    transparent 100%);
  transition: background-color 420ms var(--sc-ease-out);
}
@media (max-width: 860px) { .chrome-veil { height: 4.2rem; } }

.mark {
  position: fixed; z-index: 70;
  top: clamp(1rem, 2.4vw, 1.9rem); left: var(--sc-gutter);
  display: flex; align-items: center;
  text-decoration: none;
  transition: opacity 240ms var(--sc-ease-out);
}
/* the original lockup, cut from the supplied artwork and laid out horizontally
   so the wordmark stays readable in a fixed bar */
.mark-logo { display: block; height: clamp(26px, 2.6vw, 34px); width: auto; }
.mark:hover { opacity: 0.78; }

.topnav {
  position: fixed; z-index: 70;
  top: clamp(1rem, 2.4vw, 1.9rem); right: var(--sc-gutter);
  display: flex; gap: clamp(0.9rem, 1.9vw, 1.8rem);
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.topnav a {
  text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
}
.topnav a:hover, .topnav a:focus-visible, .topnav a[aria-current] {
  color: var(--gold-brand); border-bottom-color: currentColor;
}
/* both take the ink of whichever ground is at the top edge */
.mark, .topnav a { color: var(--top-ink, var(--gold-line)); }
/* five destinations will not fit beside the logo on a narrow screen, and the
   span rail below already carries a link to every one of them */
@media (max-width: 1000px) { .topnav a:nth-child(2), .topnav a:nth-child(4) { display: none; } }
@media (max-width: 720px) { .topnav { display: none; } .mark-logo { height: 24px; } }

/* ===================================================== the phone menu ====
   Five destinations will not fit beside the logo on a narrow screen, so the
   bar hands over to one button and one panel. Everything here is inside a
   query: nothing in this block can reach a desktop.                       */
.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;
}
.burger {
  display: none; position: fixed; z-index: 96;
  top: clamp(0.6rem, 2vw, 1.4rem); right: calc(var(--sc-gutter) - 0.55rem);
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--top-ink, var(--gold-line));
  align-items: center; justify-content: center;
}
.burger:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -6px; border-radius: 8px; }
.burger-box { position: relative; display: block; width: 22px; height: 12px; }
.burger-box i {
  position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px;
  background: currentColor;
  transition: transform 320ms var(--sc-ease-out), top 260ms var(--sc-ease-out);
}
.burger-box i:first-child { top: 0; }
.burger-box i:last-child { top: 10.4px; }
.burger.on { color: var(--gold-lt); }
.burger.on .burger-box i:first-child { top: 5.2px; transform: rotate(45deg); }
.burger.on .burger-box i:last-child { top: 5.2px; transform: rotate(-45deg); }

/* `display: grid` here and `[hidden] { display: none }` in the engine have the
   same specificity, and this rule comes later, so the closed panel stayed in
   the layout: an invisible full-screen sheet at z-index 85 over every page,
   swallowing every tap except the logo and the button, which sit above it.
   This is what stopped the links working on a phone. */
.mobnav[hidden] { display: none; }
.mobnav {
  position: fixed; inset: 0; z-index: 85;
  display: grid; grid-template-rows: 1fr;
  padding: calc(var(--sc-gutter) + 3.6rem) var(--sc-gutter) calc(var(--sc-gutter) + 1rem);
  background:
    radial-gradient(76% 46% at 50% 8%, rgb(224 188 99 / 0.15) 0%, transparent 72%),
    radial-gradient(60% 40% at 8% 96%, rgb(224 188 99 / 0.08) 0%, transparent 70%),
    #0E1114;
  opacity: 0; transition: opacity 300ms var(--sc-ease-out);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobnav.in { opacity: 1; }
.mobnav:focus { outline: none; }
/* the panel is a page in itself: a label, an index, and the firm's own
   contact line under it, so it is not five words floating in the middle */
.mobnav-in {
  align-self: stretch;
  display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(1.2rem, 4vh, 2.2rem);
  width: 100%;
}
.mobnav-eyebrow {
  margin: 0;
  font-family: var(--sc-font-mono); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-lt);
  opacity: 0; transform: translateY(10px);
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.mobnav.in .mobnav-eyebrow { opacity: 1; transform: none; }
.mobnav-list { display: grid; align-content: center; }
/* the rule belongs to the row, not to the track: on the container it floated
   at the top of a centred list with the first row well below it */
.mobnav-list a:first-child { border-top: 1px solid rgb(231 237 241 / 0.12); }
/* every destination is a full-width row with its number, the way the acts on
   the page are numbered, and a rule under it: an index, not a list */
.mobnav-list a {
  display: grid; grid-template-columns: 2.1rem 1fr auto;
  align-items: center; gap: 0.9rem;
  padding: clamp(0.75rem, 2.1vh, 1.15rem) 0;
  border-bottom: 1px solid rgb(231 237 241 / 0.12);
  color: #E7EDF1; text-decoration: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out),
              color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
}
.mobnav-n {
  font-family: var(--sc-font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; color: var(--gold-lt); opacity: 0.75;
}
.mobnav-t {
  font-family: var(--sc-font-display);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.1rem);
  font-weight: 500; line-height: 1.15; letter-spacing: var(--sc-track-tight);
}
.mobnav-go { color: var(--gold-lt); opacity: 0.45; transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); }
.mobnav.in a { opacity: 1; transform: none; }
.mobnav-list a:nth-child(1) { transition-delay: 60ms; }
.mobnav-list a:nth-child(2) { transition-delay: 105ms; }
.mobnav-list a:nth-child(3) { transition-delay: 150ms; }
.mobnav-list a:nth-child(4) { transition-delay: 195ms; }
.mobnav-list a:nth-child(5) { transition-delay: 240ms; }
.mobnav-list a:active, .mobnav-list a:focus-visible { color: var(--gold-lt); }
.mobnav-list a:active .mobnav-go, .mobnav-list a:focus-visible .mobnav-go {
  opacity: 1; transform: translateX(3px);
}
.mobnav-list a:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; border-radius: 4px; }

.mobnav-foot {
  display: grid; gap: 0.9rem; justify-items: start;
  opacity: 0; transform: translateY(12px);
  transition: opacity 360ms 300ms var(--sc-ease-out), transform 360ms 300ms var(--sc-ease-out);
}
.mobnav.in .mobnav-foot { opacity: 1; transform: none; }
.mobnav-mail {
  font-family: var(--sc-font-text); font-size: 0.88rem;
  color: #94A0A8; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.mobnav-mail:active, .mobnav-mail:focus-visible { color: var(--gold-lt); border-bottom-color: currentColor; }
.mobnav-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.55rem; }
.mobnav-social a {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgb(231 237 241 / 0.14); border-radius: 9px;
  color: #94A0A8;
  transition: color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out);
}
.mobnav-social a:active, .mobnav-social a:focus-visible {
  color: var(--gold-lt); border-color: rgb(224 188 99 / 0.5);
}
.mobnav-social a:focus-visible, .mobnav-mail:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }
html.nav-open, html.nav-open body { overflow: hidden; }

/* the button, the panel and the raised mark exist only on a phone */
@media (max-width: 720px) {
  .burger { display: flex; }
  /* the mark stays above the panel: it is the way home, and it says where
     you are while the menu covers everything else */
  .mark { z-index: 95; }
}
@media (min-width: 721px) { .mobnav { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mobnav, .mobnav-list a, .mobnav-eyebrow, .mobnav-foot, .burger-box i { transition: none; }
  .mobnav-list a, .mobnav-eyebrow, .mobnav-foot { opacity: 1; transform: none; }
}
.ico-li { flex: none; opacity: 0.85; }

/* ==================================================== THE SPAN ============
   The signature move, at the right weight. A single suspension cable across
   the bottom edge, dark ahead of you and gold behind: the span is only drawn
   where you have already been. A node sits on it at each question and every
   node is a jump link, so the cable is also the navigation.              */
.span {
  position: fixed; z-index: 65;
  inset: auto 0 0 0;
  height: var(--span-h);
  pointer-events: none;
  color: var(--span-ink);
  transition: color 420ms var(--sc-ease-out);
}
.span::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  top: -1.4rem; pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in oklab, var(--span-ground, #F4F2ED) 62%, transparent) 38%,
    var(--span-ground, #F4F2ED) 62%);
  transition: background-color 420ms var(--sc-ease-out);
}
.span svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.span__back, .span__cable { fill: none; vector-effect: non-scaling-stroke; }
.span__back  { stroke: var(--span-dim); stroke-width: 1; }
.span__cable { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.span__node {
  fill: var(--span-ground, #F4F2ED); stroke: var(--span-dim); stroke-width: 1.2;
  transition: fill 300ms var(--sc-ease-out), stroke 300ms var(--sc-ease-out);
}
.span__node.on { fill: currentColor; stroke: currentColor; }
.span__car {
  fill: var(--gold-brand);
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--gold-brand) 60%, transparent));
}
.span__jumps { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.span__jump {
  position: absolute; bottom: 0; width: 40px; height: 100%;
  transform: translateX(-50%);
  background: none; border: 0; padding: 0; cursor: pointer;
  pointer-events: auto;
}
.span__jump::after {
  content: attr(data-label);
  position: absolute; bottom: calc(100% - 2px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-family: var(--sc-font-mono); font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--span-ground, #F4F2ED); background: var(--span-ink);
  padding: 4px 9px; border-radius: var(--sc-r-sm);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .span__jump:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.span__jump:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.span__jump:focus-visible { outline: 2px solid var(--gold-brand); outline-offset: -4px; border-radius: var(--sc-r-sm); }

/* keep the last screen clear of the rail */
.tail-pad { height: calc(var(--span-h) + 1rem); }

/* --------------------------------------------------------------- type --- */
.q {
  font-family: var(--sc-font-display);
  font-size: clamp(2.4rem, 1.3rem + 4.4vw, 5.4rem);
  font-weight: 500; line-height: 0.98;
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance; margin: 0;
  max-width: 15ch;
}
@media (max-width: 700px) { .q { font-size: clamp(2.05rem, 1.2rem + 5.2vw, 3rem); } }
.q--sm { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); max-width: 18ch; }
/* one gold rule under the question, echoing the material's own device */
.q-rule {
  width: 52px; height: 2px; border: 0; margin: var(--sc-5) 0 0;
  background: var(--sc-accent); opacity: 0.85;
}
.lede-xl {
  font-family: var(--sc-font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 400; line-height: 1.3;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink); max-width: 24ch; margin: 0;
  text-wrap: pretty;
}
.tag {
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-accent); margin: 0;
}
.tlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sc-font-mono);
  font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--sc-accent); text-decoration: none;
  padding-bottom: 4px; border-bottom: 1px solid currentColor;
  transition: gap 200ms var(--sc-ease-out), opacity 160ms var(--sc-ease-out);
}
.tlink:hover, .tlink:focus-visible { gap: 0.85rem; }
.tlink:active { opacity: 0.7; }
.tlink svg { flex: none; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--btn-bg, var(--gold-brand)); color: var(--btn-ink, #14181C);
  font-family: var(--sc-font-display); font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.01em; white-space: nowrap;
  border: 0; border-radius: var(--sc-r-sm);
  padding: 0.95rem 1.7rem; cursor: pointer; text-decoration: none;
  box-shadow: var(--sc-e1);
  transition: transform 140ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out),
              background-color 160ms var(--sc-ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sc-e2); background: var(--btn-bg-hover, #C9A247); }
.btn:active { transform: translateY(1px) scale(0.985); box-shadow: var(--sc-e1); }
.g-ink .btn, .g-slate .btn { --btn-bg: var(--gold-lt); --btn-bg-hover: #EBCC80; }

/* the span's jump links land sections under the fixed chrome otherwise */
main > section[id] { scroll-margin-top: 4.5rem; }

/* A flow section straight after a pinned act inherits a full viewport of the
   stage sliding off, and then adds its own section padding on top. The reader
   gets most of a screen of nothing. Cut the top padding there. */
[data-sc-act="pin"] + .sc-section,
[data-sc-act="scrub"] + .sc-section { padding-block-start: clamp(2rem, 3.5vw, 4rem); }

/* ============================================================ act 1 hero ==
   The first screen has one job: land. The frame opens from slightly too
   close and slightly too soft, a single warm sweep crosses the die once,
   and the headline assembles behind it.                                  */
.hero-stage { background: var(--bone); }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top right,
      rgb(251 250 248 / 0.97) 0%,
      rgb(251 250 248 / 0.88) 26%,
      rgb(251 250 248 / 0.44) 50%,
      rgb(251 250 248 / 0) 74%);
}
@media (max-width: 860px) {
  .hero-scrim {
    background: linear-gradient(to top,
      rgb(251 250 248 / 0.97) 0%,
      rgb(251 250 248 / 0.9) 26%,
      rgb(251 250 248 / 0.46) 48%,
      rgb(251 250 248 / 0) 66%);
  }
}
.hero-copy { max-width: min(40rem, 78vw); bottom: clamp(6rem, 16vh, 10rem); }
.hero-copy .q { margin-bottom: var(--sc-4); }
.hero-copy .lede-xl { max-width: 22ch; }
.hero-copy .sc-body { margin-top: var(--sc-3); max-width: 44ch; }
.hero-copy .tlink { margin-top: var(--sc-6); }
@media (max-width: 700px) {
  .hero-copy { bottom: calc(var(--span-h) + 2.6rem); max-width: none; }
  .hero-copy .sc-body { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-stage :is(video[data-sc-scrub], .sc-stage__poster) {
    animation: heroOpen 1700ms var(--sc-ease-out) both;
  }
  @keyframes heroOpen {
    0%   { transform: scale(1.075); filter: blur(9px) saturate(0.85); }
    55%  { filter: blur(0) saturate(1); }
    100% { transform: scale(1); filter: blur(0) saturate(1); }
  }
  /* one warm pass of light across the die, once */
  .hero-sweep {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(105deg,
      transparent 34%,
      rgb(255 244 214 / 0.55) 47%,
      rgb(255 232 176 / 0.75) 50%,
      rgb(255 244 214 / 0.55) 53%,
      transparent 66%);
    mix-blend-mode: screen;
    transform: translateX(-115%);
    animation: heroSweep 1500ms 260ms cubic-bezier(0.4, 0, 0.15, 1) both;
  }
  @keyframes heroSweep {
    0%   { transform: translateX(-115%); opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translateX(115%); opacity: 0; }
  }

  /* The hero copy arrives in beats: one line of the headline, then the next,
     then the lede, then the supporting sentence, then the link.

     The staging is driven from page.js rather than from animation-delay,
     because the engine re-splits the headline when the real font finishes
     loading. That replaces the line elements and would restart a CSS
     animation mid-sequence. JS waits for the split to be final.

     These target the line MASK and the non-heading children, both of which
     the engine never writes to. The masked inner spans carry the engine's own
     inline styles every frame and must be left alone. */
  .hero-copy.is-armed .sc-split--line,
  .hero-copy.is-armed > :not(.q) {
    opacity: 0;
    transform: translateY(22px);
  }
  .hero-copy.is-armed .sc-split--line.in,
  .hero-copy.is-armed > :not(.q).in {
    opacity: 1;
    transform: none;
    transition: opacity 820ms var(--sc-ease-out), transform 850ms var(--sc-ease-out);
  }
}
.hero-sweep { display: block; }
@media (prefers-reduced-motion: reduce) { .hero-sweep { display: none; } }

/* ============================================== act 3 · CONFIDENCE ========
   Four stages on one span. The stage you are on is large and lit; the ones
   behind you shrink, dim and take a gold seal; the ones ahead wait.

   The connector is drawn as shallow arcs hopping BETWEEN the marks rather than
   as one line running under them. The line used to be a ::after on the track,
   which is the track's last child and therefore painted over the circles.  */
.proc-stage {
  background: var(--concrete);
  display: grid; place-items: center;
  padding: 0 var(--sc-gutter);
}
.proc-inner { width: 100%; max-width: var(--sc-maxw); }
.proc-wrap { position: relative; margin-top: clamp(2rem, 6vh, 4rem); }
.proc-spine {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 60px;
  overflow: visible; pointer-events: none;
}
.proc-arc-bg { fill: none; stroke: rgb(20 24 28 / 0.16); stroke-width: 1.2; }
.proc-arc {
  fill: none; stroke: var(--gold-line); stroke-width: 1.6; stroke-linecap: round;
}
.proc-track {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.4vw, 2.4rem);
}
.proc-step {
  position: relative; padding-top: 4.4rem;
  transform-origin: left top;
  transition: opacity 420ms var(--sc-ease-out), transform 520ms var(--sc-ease-out);
  opacity: 0.26;
}
.proc-step.done { opacity: 0.46; }
.proc-step.live { opacity: 1; }

.proc-mark {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--concrete);
  /* the ground-coloured halo is what opens a clean gap in the connector */
  box-shadow: inset 0 0 0 1.5px rgb(20 24 28 / 0.22), 0 0 0 7px var(--concrete);
  transition: box-shadow 380ms var(--sc-ease-out), background-color 380ms var(--sc-ease-out);
}
.proc-step.done .proc-mark {
  background: var(--gold-line);
  box-shadow: inset 0 0 0 1.5px var(--gold-line), 0 0 0 7px var(--concrete);
}
.proc-step.live .proc-mark {
  background: var(--gold-brand);
  box-shadow: inset 0 0 0 1.5px var(--gold-brand),
              0 0 0 7px var(--concrete),
              0 0 0 13px rgb(184 146 58 / 0.18);
}
.proc-n {
  font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  color: var(--gold-deep);
  transition: opacity 260ms var(--sc-ease-out);
}
.proc-step.live .proc-n, .proc-step.done .proc-n { opacity: 0; }
.proc-seal {
  /* ink, not white: a white tick on the live disc (#B8923A) measures 2.9:1,
     under the 3:1 a meaningful graphic needs. Ink gives 6.3:1 on the live
     disc and 4.5:1 on a sealed one. */
  position: absolute; width: 17px; height: 17px;
  color: #14181C; opacity: 0;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  transition: opacity 220ms var(--sc-ease-out);
}
.proc-step.live .proc-seal, .proc-step.done .proc-seal {
  opacity: 1; animation: sealDraw 460ms var(--sc-ease-out) forwards;
}
@keyframes sealDraw { to { stroke-dashoffset: 0; } }

.proc-t {
  font-family: var(--sc-font-display);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2.1rem);
  font-weight: 500; letter-spacing: var(--sc-track-snug);
  margin: 0; color: var(--sc-ink);
}
.proc-verb {
  margin: 0.35rem 0 0.85rem;
  font-family: var(--sc-font-display);
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.12rem);
  font-weight: 500; letter-spacing: var(--sc-track-snug);
  color: var(--gold-deep);
}
.proc-d { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--sc-ink-soft); }

@media (min-width: 881px) {
  .proc-step { transform: scale(0.95); }
  .proc-step.live { transform: scale(1.06); }
}
@media (max-width: 880px) {
  .proc-spine { display: none; }
  .proc-track { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.4rem; }
  .proc-step { padding-top: 3rem; }
  .proc-mark { width: 28px; height: 28px; box-shadow: inset 0 0 0 1.5px rgb(20 24 28 / 0.22); }
  .proc-step.done .proc-mark, .proc-step.live .proc-mark { box-shadow: none; }
  .proc-d { font-size: 0.85rem; }
}
@media (max-width: 520px) {
  .proc-track { grid-template-columns: 1fr; gap: 1.1rem; }
  .proc-step { padding-top: 0; padding-left: 3rem; opacity: 0.45; }
  .proc-t { font-size: 1.2rem; }
  .proc-verb { font-size: 0.92rem; margin: 0.2rem 0 0.45rem; }
  .proc-step.live { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .proc-step { opacity: 1 !important; transform: none !important; }
  .proc-seal { animation: none; stroke-dashoffset: 0; }
}

/* ================================================= act 2 · the join ======
   Two services that literally close on each other as you scroll, because
   the sentence underneath them says they run as one engagement.         */
.join-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.join {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}
.join-half {
  --shift: calc((1 - var(--join, 0)) * clamp(1.5rem, 6vw, 7rem));
  transition: transform 120ms linear;
}
.join-half--l { transform: translateX(calc(-1 * var(--shift))); padding-right: clamp(1rem, 2.5vw, 2.2rem); }
.join-half--r { transform: translateX(var(--shift)); padding-left: clamp(1rem, 2.5vw, 2.2rem); }
.join-fig {
  margin: 0 0 var(--sc-5); overflow: hidden;
  border-radius: var(--sc-r-md); aspect-ratio: 3 / 2; background: #1C2126;
}
.join-fig img { width: 100%; height: 100%; object-fit: cover; }
.join-half h3 {
  font-family: var(--sc-font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.65rem);
  font-weight: 500; letter-spacing: var(--sc-track-snug);
  margin: 0 0 var(--sc-3); color: var(--sc-ink);
}
.join-half p { margin: 0; color: var(--sc-ink-soft); font-size: 0.98rem; max-width: 40ch; }
/* Both halves align to the left edge of their own column, so the paragraph
   lines up with the heading and the image above it. */

/* the seam only exists once the two halves have met */
.join-seam { position: relative; width: 1px; }
.join-seam span {
  position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold-lt), transparent);
  transform: scaleY(var(--join, 0));
  transform-origin: 50% 50%;
  opacity: var(--join, 0);
}

/* A band across the full width of the section. The sentence governs both
   columns, so it spans both of them under a hairline rather than sitting off
   to one side, and the link goes to the far edge of the same band. */
.join-band {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  /* the engine's hairline is 12% of ink, which all but vanishes on this
     ground; the band needs its edge to actually read as an edge */
  border-top: 1px solid var(--sc-hairline-strong);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
}
.join-note {
  margin: 0; max-width: 46ch;
  font-family: var(--sc-font-display);
  font-size: clamp(1.05rem, 0.92rem + 0.7vw, 1.45rem);
  font-weight: 400; line-height: 1.32;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink); text-wrap: pretty;
}
/* Sized up to sit against the display-size sentence beside it. */
.join-band .tlink {
  white-space: nowrap;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  padding-bottom: 5px;
}
.join-band .tlink svg { width: 15px; height: 11px; }
@media (max-width: 700px) {
  .join-band { grid-template-columns: 1fr; gap: var(--sc-6); }
  .join-band .tlink { justify-self: start; }
}
@media (max-width: 760px) {
  .join { grid-template-columns: 1fr; gap: var(--sc-8); }
  .join-half, .join-half--l, .join-half--r { transform: none; padding: 0; }
  .join-seam { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .join-half { transform: none !important; }
  .join-seam span { transform: scaleY(1); opacity: 1; }
}

/* ================================================ act 4 · the four gates ==
   Each review is a panel with its own ground, filling the frame, so the four
   checks ARE the frame and the footage is what they stand in front of.   */
.rev-stage { background: var(--ink); }
/* The panels' own backgrounds cannot be the density that protects their text:
   the verification pass hides the copy element and everything inside it to
   photograph the frame underneath, so a background on the copy block is never
   measured. The density lives in this sibling scrim, in the band the gates
   occupy; the panel grounds sit on top of it as a second layer. */
.rev-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(10 13 16 / 0.95) 0%,
    rgb(10 13 16 / 0.90) 18%,
    rgb(10 13 16 / 0.72) 34%,
    rgb(10 13 16 / 0.70) 54%,
    rgb(10 13 16 / 0.84) 68%,
    rgb(10 13 16 / 0.90) 100%);
}
.rev-copy { inset-inline: var(--sc-gutter); max-width: none; }
.rev-copy--head { bottom: auto; top: clamp(5rem, 13vh, 8rem); }
.rev-lede { margin-top: 1.1rem; max-width: 44ch; color: #C4CDD3; }

/* Bottom-anchored and sized to their own content rather than stretched to
   fill everything under the heading. */
.gates {
  position: absolute; z-index: 20;
  inset-inline: var(--sc-gutter);
  bottom: calc(var(--span-h) + clamp(1.6rem, 5vh, 3.4rem));
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  padding-top: 2.4rem;
}
.gate-rail {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgb(224 188 99 / 0.22);
}
.gate-rail i {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: calc(var(--gate-fill, 0) * 100%);
  background: var(--gold-lt);
  box-shadow: 0 0 10px rgb(224 188 99 / 0.6);
}
.gate {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1rem, 1.9vw, 1.6rem);
  border-radius: var(--sc-r-md);
  /* Density and element opacity both feed the measured contrast. */
  background: rgb(11 14 17 / 0.88);
  border: 1px solid rgb(224 188 99 / 0.14);
  transform: translateY(10px);
  opacity: 0.9;
  transition: opacity 460ms var(--sc-ease-out), transform 520ms var(--sc-ease-out),
              background-color 460ms var(--sc-ease-out), border-color 460ms var(--sc-ease-out),
              box-shadow 460ms var(--sc-ease-out);
}
.gate.open {
  opacity: 1; transform: none;
  background: rgb(11 14 17 / 0.94);
  border-color: rgb(224 188 99 / 0.42);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.6);
}
.gate::before {
  content: ""; position: absolute;
  top: -2.4rem; left: 50%; width: 1px; height: 2.4rem;
  background: rgb(224 188 99 / 0.2);
  transition: background-color 420ms var(--sc-ease-out);
}
.gate.open::before { background: rgb(224 188 99 / 0.55); }
.gate::after {
  content: ""; position: absolute;
  top: calc(-2.4rem - 3px); left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sc-canvas);
  box-shadow: inset 0 0 0 1px rgb(224 188 99 / 0.45);
  transition: background-color 420ms var(--sc-ease-out);
}
.gate.open::after { background: var(--gold-lt); box-shadow: inset 0 0 0 1px var(--gold-lt); }

.gate-head { display: flex; align-items: center; justify-content: space-between; }
.gate-no {
  font-family: var(--sc-font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; color: rgb(224 188 99 / 0.55);
  transition: color 420ms var(--sc-ease-out);
}
.gate.open .gate-no { color: var(--gold-lt); }
.gate-seal { display: block; width: 24px; height: 24px; color: var(--gold-lt); }
.gate-seal svg { width: 24px; height: 24px; opacity: 0.25; transition: opacity 420ms var(--sc-ease-out); }
.gate.open .gate-seal svg { opacity: 1; }
.gate-tick { stroke-dasharray: 20; stroke-dashoffset: 20; }
.gate.open .gate-tick { animation: gateTick 520ms 120ms var(--sc-ease-out) forwards; }
@keyframes gateTick { to { stroke-dashoffset: 0; } }

.gate-body { margin-top: auto; }
.gate h3 {
  font-family: var(--sc-font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.85vw, 1.6rem);
  font-weight: 500; letter-spacing: var(--sc-track-snug);
  color: #F2F0EB; margin: 0 0 0.6rem;
  transition: color 420ms var(--sc-ease-out);
}
.gate.open h3 { color: var(--gold-lt); }
.gate p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: #DDE4E9; }

@media (max-width: 980px) {
  .gates { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .gate p { font-size: 0.82rem; line-height: 1.5; }
  .gate h3 { font-size: 1.1rem; }
}
@media (max-width: 880px) {
  /* Two rows of gates cannot hang off one line, and an absolutely placed
     seal lands on the next row's label. Below this width each gate carries
     its own seal inline and the connector line is dropped. */
  .gates { padding-top: 0; }
  .gate-rail { display: none; }
  .gate::before, .gate::after { display: none; }
  .gate {
    display: grid; grid-template-columns: 20px 1fr; gap: 0.55rem 0.6rem;
    align-items: center; padding-top: 0.7rem; padding-bottom: 0.7rem;
  }
  .gate-seal { position: static; width: 18px; height: 18px; background: none; }
  .gate-seal svg { width: 18px; height: 18px; }
  .gate h3 { margin: 0; }
  .gate p { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .gates { grid-template-columns: 1fr; gap: 0.5rem; padding-top: 1.6rem; }
  /* the stacked gates fill the frame, so the scrim behind them is flat and
     dense rather than a band: the harness measures this, not the panels */
  .rev-scrim { background: rgb(10 13 16 / 0.86); }
  .gate { padding: 0.7rem 0.85rem; transform: none; }
  .gate-no { font-size: 0.6rem; }
  .gate-body { margin-top: 0; }
  .gate h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
  .gate p { font-size: 0.76rem; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .gate { opacity: 1; transform: none; }
  .gate-tick { stroke-dashoffset: 0; }
  .gate.open .gate-tick { animation: none; }
}

/* ============================================ act 5 · the same standard ==
   The sentence is an equivalence, so the frame performs one. Each condition
   carries an identical object above it; as you scroll the two travel toward
   each other and land on exactly the same spot, becoming one object with both
   conditions still naming it. Lighting is the argument as much as position:
   apart they are cold steel, together they are warm gold.                */
.std-stage {
  background: var(--slate);
  display: grid; place-items: center;
  padding: 0 var(--sc-gutter);
  overflow: clip;
  /* NO `position` here. `.sc-stage` is `position: sticky` at the same
     specificity, so a plain `position: relative` declared later silently wins
     and the act stops pinning: it just scrolls away. Sticky already
     establishes the containing block the ::after below needs. */
}
/* The frame answers the light. */
.std-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(50% 46% at 50% 34%,
    rgb(255 226 160 / 0.13) 0%,
    rgb(240 200 120 / 0.045) 38%,
    transparent 68%);
  opacity: var(--std-c, 0);
}
.std-line {
  position: relative; z-index: 3; margin: 0;
  width: 100%; max-width: 62rem;
  display: grid;
  /* One column, not two. Set side by side, the left condition wrapped onto a
     second line and the eye read straight across the row: "Whether the system
     runs ... or ships inside your product," and only then dropped to "inside
     your organization". Stacked, the reading order is the sentence's own. */
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: start;
  row-gap: 0;
  font-family: var(--sc-font-display);
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  text-align: center;
}
.std-a, .std-b {
  font-size: clamp(1rem, 0.8rem + 1vw, 1.55rem);
  font-weight: 400; line-height: 1.4;
  opacity: calc(0.88 + var(--std-c, 0) * 0.12);
  text-align: center; text-wrap: balance; max-width: 40ch;
}
/* the two conditions sit close, because they are one sentence; the resolve
   gets the air, because it is the answer to both */
.std-a { grid-area: 2 / 1; margin-top: clamp(1rem, 3vh, 2rem); }
.std-b { grid-area: 3 / 1; }
.std-c {
  grid-area: 4 / 1;
  margin-top: clamp(1.1rem, 3.4vh, 2.4rem);
  /* set in capitals: the answer to both conditions, said flat out. Caps carry
     more width and need a little air between them to stay readable at size. */
  text-transform: uppercase;
  font-size: clamp(1.45rem, 0.9rem + 2.5vw, 3.15rem);
  font-weight: 600; line-height: 1.12;
  letter-spacing: 0.012em;
  color: color-mix(in oklab, #FFE9B4 calc(var(--std-c, 0) * 55%), var(--gold-lt));
  text-shadow: 0 0 calc(var(--std-c, 0) * 34px) rgb(255 220 150 / 0.32);
  opacity: var(--std-c, 0);
  transform: translateY(calc((1 - var(--std-c, 0)) * 0.4em));
}

/* the objects, on their own row: travelling across the two labels meant they
   occluded the words they were meant to be arguing about */
.std-orb {
  grid-area: 1 / 1;
  width: 100%;
  position: relative; display: block;
  height: clamp(6rem, 14vw, 12rem);
}
.std-o, .std-ring {
  position: absolute; top: 0;
  width: clamp(6rem, 14vw, 12rem); aspect-ratio: 1;
  border-radius: 50%;
}
/* cold state: steel, lit from the upper left */
.std-o {
  background:
    radial-gradient(125% 125% at 30% 22%,
      rgb(255 255 255 / 0.22) 0%,
      rgb(255 255 255 / 0.07) 26%,
      rgb(0 0 0 / 0.05) 60%,
      rgb(0 0 0 / 0.32) 100%),
    linear-gradient(158deg, #3D454E 0%, #2B323A 54%, #1D2228 100%);
  box-shadow:
    inset 0 0 0 1px rgb(176 190 204 / 0.34),
    inset 0 2px 0 rgb(255 255 255 / 0.18),
    0 30px 62px -30px rgb(0 0 0 / 0.75);
}
/* warm state, cross-faded in as they close on each other */
.std-o::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  opacity: var(--std-warm, 0);
  background:
    radial-gradient(125% 125% at 30% 22%,
      rgb(255 243 214 / 0.34) 0%,
      rgb(243 209 138 / 0.14) 28%,
      rgb(0 0 0 / 0.04) 60%,
      rgb(48 32 8 / 0.30) 100%),
    linear-gradient(158deg, #8A7440 0%, #5C4E2C 54%, #35301F 100%);
  box-shadow:
    inset 0 0 0 1px rgb(240 208 132 / 0.8),
    inset 0 2px 0 rgb(255 243 210 / 0.42),
    0 0 34px rgb(224 188 99 / 0.28);
}
/* the crescent that makes it read as a lit sphere rather than a flat circle */
.std-o::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 188deg at 50% 50%,
    transparent 0deg,
    rgb(255 255 255 / 0.26) 24deg,
    rgb(255 228 168 / 0.4) 44deg,
    rgb(224 188 99 / 0.18) 62deg,
    transparent 88deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 80%, #000 85%);
  mask-image: radial-gradient(closest-side, transparent 80%, #000 85%);
}
/* --conv is a quarter of the row, set from JS, so the travel is a transform
   rather than an animated `left` */
.std-o--l { left: 20%; transform: translateX(-50%) translateX(calc(var(--std, 0) * var(--conv, 0px))); }
.std-o--r { left: 80%; transform: translateX(-50%) translateX(calc(var(--std, 0) * var(--conv, 0px) * -1)); }

/* the light the meeting makes: a hot core, a wide halo, and a ring that
   travels outward once and fades, so contact reads as an event */
.std-glow {
  position: absolute; left: 50%; top: 50%;
  width: 340%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(0.6 + var(--std-c, 0) * 0.4));
  background: radial-gradient(closest-side,
    rgb(255 245 214 / 0.5) 0%,
    rgb(255 226 160 / 0.3) 14%,
    rgb(238 196 112 / 0.15) 30%,
    rgb(224 188 99 / 0.06) 50%,
    transparent 72%);
  opacity: var(--std-c, 0);
  pointer-events: none;
}
.std-burst {
  position: absolute; left: 50%; top: 0;
  width: clamp(6rem, 14vw, 12rem); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgb(255 232 178 / 0.9);
  transform: translateX(-50%) scale(calc(1 + var(--std-c, 0) * 1.5));
  opacity: calc(var(--std-c, 0) * (1 - var(--std-c, 0)) * 2.6);
  pointer-events: none;
}
.std-ring {
  left: 50%;
  transform: translateX(-50%) scale(calc(1.22 - var(--std-c, 0) * 0.16));
  border: 1px solid rgb(255 226 160 / 0.95);
  opacity: calc(var(--std-c, 0) * 0.95);
  box-shadow: 0 0 40px rgb(255 220 150 / 0.42), inset 0 0 30px rgb(255 220 150 / 0.18);
}

@media (max-width: 720px) {
  .std-line { row-gap: 0; }
  .std-c { grid-area: 4 / 1; }
  .std-orb { grid-area: 1 / 1; height: clamp(5rem, 26vw, 8rem); }
  .std-o, .std-ring, .std-burst { width: clamp(5rem, 26vw, 8rem); }
  .std-a, .std-b { max-width: 26ch; }
}
@media (prefers-reduced-motion: reduce) {
  .std-o--l, .std-o--r { transform: translateX(-50%); }
  .std-c { opacity: 1; transform: none; }
  .std-ring { opacity: 0.95; transform: translateX(-50%) scale(1.06); }
  .std-burst { display: none; }
}

/* ================================================= act 6 · the work rail
   The studies travel sideways as you scroll and the one nearest the middle
   of the screen grows. Each card is a link to its own page.             */
.work-stage { background: var(--bone); display: flex; align-items: center; overflow: clip; }
.work-rail {
  display: flex; align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: var(--sc-gutter);
}
.work-lead, .work-tail {
  flex: 0 0 auto; width: min(30rem, 76vw);
  padding-right: clamp(1rem, 3vw, 3rem);
}
.work-tail { display: grid; gap: 1.6rem; align-content: center; width: min(24rem, 72vw); }
.study-card {
  flex: 0 0 auto;
  width: clamp(17rem, 25vw, 23rem);
  text-decoration: none; color: inherit;
  display: block;
  transform: scale(var(--near, 0.86));
  transition: transform 240ms var(--sc-ease-out);
  opacity: var(--nearO, 1);
  will-change: transform;
}
.study-card figure {
  margin: 0 0 var(--sc-5); overflow: hidden;
  border-radius: var(--sc-r-md); aspect-ratio: 4 / 5;
  background: var(--concrete);
  box-shadow: var(--sc-e1);
  transition: box-shadow 320ms var(--sc-ease-out);
}
.study-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--sc-ease-out);
}
.study-card:hover figure { box-shadow: var(--sc-e3); }
@media (hover: hover) and (pointer: fine) { .study-card:hover img { transform: scale(1.04); } }
.study-card:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 8px; border-radius: var(--sc-r-md); }
.study-card__body { display: grid; }
.case-sec {
  font-family: var(--sc-font-mono); font-size: 0.64rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.case-r {
  font-family: var(--sc-font-display);
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem);
  font-weight: 500; line-height: 1; letter-spacing: var(--sc-track-tight);
  color: var(--gold-deep); margin: 0.5rem 0 0.6rem;
  padding-block: 0.06em;
}
.case-d { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--sc-ink-soft); }
/* One key phrase per card, marked by weight and full ink against the soft grey
   around it. Deliberately NOT gold: the figure above is already the gold thing
   on this card, and a second accent mid-sentence would compete with it. */
.case-d b { font-weight: 500; color: var(--sc-ink); }
.case-go {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: var(--sc-4);
  font-family: var(--sc-font-mono); font-size: 0.66rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-deep);
  transition: gap 200ms var(--sc-ease-out);
}
.study-card:hover .case-go, .study-card:focus-visible .case-go { gap: 0.8rem; }
@media (max-width: 760px) {
  .work-lead, .work-tail { width: 78vw; }
  .study-card { width: 74vw; }
}
@media (prefers-reduced-motion: reduce) {
  .work-stage { height: auto; }
  .study-card { transform: none; }
  .study-card img { transition: none; }
}

/* =================================================== act 7 · the system ==
   ConsultAI as the sun, the ten disciplines as planets on their own orbits.
   Scroll walks the system one discipline at a time: the focused planet grows
   and lights, its orbit goes gold, and the panel in the copy column reads out
   what is actually inside it.                                             */
.orbit-stage {
  /* The ground stays ink like the rest of the site's dark sections. The blue
     is a pool of deep space behind the system only, falling off before the
     copy column so the left veil still meets a flat ground. */
  background:
    radial-gradient(112% 88% at 60% 46%,
      rgb(46 78 112 / 0.5) 0%,
      rgb(34 56 82 / 0.30) 30%,
      rgb(24 38 56 / 0.12) 52%,
      transparent 74%),
    var(--sc-canvas);
  display: grid; place-items: center;
  overflow: clip;
}
.sys-scene {
  position: absolute; inset: 0;
  display: grid;
  /* place-CONTENT as well as place-items: the plane is wider than the phone
     viewport, so the auto track grows to fit it and, being start-aligned by
     default, pushed the whole system off to the right. */
  place-items: center; place-content: center;
  perspective: 1500px;
  margin-left: clamp(0px, 17vw, 21rem);
}
.sys {
  position: relative;
  width: min(112vh, 70vw); aspect-ratio: 1;
  transform: rotateX(66deg);
  transform-style: preserve-3d;
}
.sys.is-pickable .orb-body { pointer-events: auto; }

/* the arrival: everything comes up over the first fifth of the act, so the
   stage is never empty on the way in and never lands fully formed either */
.orb-path {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%;
  border: 1px solid rgb(126 164 196 / 0.17);
  opacity: calc(0.25 + var(--in, 1) * 0.75);
  transform: scale(calc(0.82 + var(--in, 1) * 0.18));
  transition: border-color 420ms var(--sc-ease-out);
}
.orb-path.is-focus { border-color: rgb(224 188 99 / 0.55); }

.orb-body {
  position: absolute; left: 50%; top: 50%;
  display: grid; justify-items: center; gap: 0.5rem;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--a, 0) * 1deg))
    translateX(calc(var(--r, 0px) * (0.82 + var(--in, 1) * 0.18)))
    rotate(calc(var(--a, 0) * -1deg))
    rotateX(-66deg);
  opacity: calc((0.5 + var(--depth, 1) * 0.5) * var(--in, 1));
}
.orb-dot {
  position: relative;
  width: var(--d, 10px); height: var(--d, 10px); border-radius: 50%;
  /* cold and far by default: a blue body the sun is not currently on */
  background:
    radial-gradient(circle at 32% 28%,
      #C6D6E4 0%, #7B96AE 32%, #43607C 70%, #22354A 100%);
  box-shadow:
    0 0 calc(var(--d, 10px) * 0.9) rgb(122 158 192 / 0.35),
    inset 0 0 0 0.5px rgb(210 228 242 / 0.5);
  transition: transform 420ms var(--sc-ease-out), box-shadow 420ms var(--sc-ease-out);
}
/* the sun lights the one you are on. A gradient cannot be transitioned, so the
   warm body is a second layer that fades up over the cold one. */
.orb-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      #FFF3D2 0%, #F0CE7C 32%, #B8923A 70%, #6B4E12 100%);
  opacity: 0;
  transition: opacity 420ms var(--sc-ease-out);
}
.orb-body.is-focus .orb-dot { transform: scale(1.9); }
.orb-body.is-focus .orb-dot::after { opacity: 1; }
.orb-body.is-focus .orb-dot {
  box-shadow:
    0 0 calc(var(--d, 10px) * 3) rgb(255 226 160 / 0.9),
    0 0 calc(var(--d, 10px) * 6.5) rgb(224 188 99 / 0.4),
    inset 0 0 0 0.5px rgb(255 246 220 / 0.9);
}
.orb-name {
  font-family: var(--sc-font-mono);
  font-size: clamp(0.58rem, 0.5rem + 0.22vw, 0.7rem);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #8B9EB0; white-space: nowrap;
  text-shadow: 0 1px 10px rgb(15 21 27 / 0.92);
  transition: color 380ms var(--sc-ease-out), transform 380ms var(--sc-ease-out);
}
.orb-body.is-focus .orb-name {
  color: var(--gold-lt);
  transform: translateY(3px) scale(1.08);
}

/* the sun */
.sys-sun {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  display: grid; place-items: center;
  transform: translate(-50%, -50%) rotateX(-66deg);
}
.sys-sun::before {
  content: ""; position: absolute;
  width: min(46vh, 30vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgb(255 236 186 / 0.34) 0%,
    rgb(240 200 120 / 0.16) 22%,
    rgb(224 188 99 / 0.07) 44%,
    transparent 72%);
  opacity: calc(0.4 + var(--in, 1) * 0.6);
}
.sys-sun::after {
  content: ""; position: absolute;
  width: min(19vh, 13vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgb(255 246 220 / 0.5) 0%, rgb(255 226 160 / 0.22) 52%, transparent 100%);
}
.sys-sun img {
  position: relative;
  width: clamp(104px, 15vw, 190px); height: auto;
  filter: drop-shadow(0 0 26px rgb(255 214 140 / 0.55));
}

/* ------------------------------------------------------------ the panel -- */
.orbit-side {
  position: absolute; z-index: 6;
  left: var(--sc-gutter); top: clamp(4.5rem, 12vh, 7.5rem);
  max-width: 30ch;
}
.sys-panel {
  position: relative;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  min-height: 14.5rem;
}
.sys-card {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
  transition: opacity 340ms var(--sc-ease-out), transform 380ms var(--sc-ease-out);
}
.sys-card.is-focus { opacity: 1; transform: none; }
.sys-card__name {
  margin: 0 0 0.9rem;
  font-family: var(--sc-font-mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-lt);
}
.sys-card__tools { list-style: none; margin: 0; padding: 0; }
.sys-card__tools li {
  font-family: var(--sc-font-text);
  font-size: 0.94rem; line-height: 1.72;
  color: #C3CBD2;
  opacity: 0; transform: translateY(5px);
}
.sys-card.is-focus .sys-card__tools li {
  opacity: 1; transform: none;
  transition: opacity 320ms var(--sc-ease-out), transform 340ms var(--sc-ease-out);
  transition-delay: calc(var(--k) * 42ms + 80ms);
}
.sys-link { margin-top: clamp(1.4rem, 3.5vh, 2.2rem); }

/* keep the system clear of the copy column */
.orbit-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to right,
    var(--sc-canvas) 0%, var(--sc-canvas) 16%,
    color-mix(in oklab, var(--sc-canvas) 55%, transparent) 27%,
    transparent 40%);
}

@media (max-width: 900px) {
  /* The scene's own box is moved down rather than the plane being translated
     inside it: a translateY on a perspective-projected plane also moves it in
     depth, which threw the whole system sideways on a phone. */
  .sys-scene { margin-left: 0; perspective: 1000px; inset: 30% 0 0 0; }
  .sys { width: 132vw; transform: rotateX(60deg); }
  .orb-body { transform:
    translate(-50%, -50%) rotate(calc(var(--a, 0) * 1deg))
    translateX(calc(var(--r, 0px) * (0.82 + var(--in, 1) * 0.18)))
    rotate(calc(var(--a, 0) * -1deg)) rotateX(-60deg); }
  .sys-sun { transform: translate(-50%, -50%) rotateX(-60deg); }
  .orb-name { font-size: 0.54rem; letter-spacing: 0.1em; }
  .orbit-side {
    left: var(--sc-gutter); right: var(--sc-gutter);
    top: clamp(4rem, 11vh, 6.5rem); max-width: none;
  }
  .sys-panel { min-height: 11.5rem; }
  .sys-card__tools { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
  .sys-card__tools li { font-size: 0.86rem; line-height: 1.5; }
  .orbit-stage::before {
    background: linear-gradient(to bottom,
      var(--sc-canvas) 0%, var(--sc-canvas) 36%,
      color-mix(in oklab, var(--sc-canvas) 62%, transparent) 46%, transparent 60%);
  }
}
@media (max-width: 560px) {
  .orb-name { display: none; }
  .sys { width: 150vw; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-path, .orb-body { opacity: 1; }
  .sys-card__tools li { transition-delay: 0ms !important; }
}

/* ================================================ act 8 · who are we ======
   Two things only. The firm, set plainly. Then a full-bleed band where you
   meet the person: she runs floor to ceiling at close to life size and her own
   sentence sits beside her at scale.

   Six earlier versions arranged a photograph and some paragraphs in six
   different ways and all of them read as an About page. The difference here is
   scale and order: the facts first and quietly, then one room-sized moment
   where somebody looks back at you.                                      */
/* The heading anchors a narrow left column and the prose runs as one measure
   beside it. Two short grey columns under a full-width lede left the copy
   floating in a field of paper with nothing holding it; this fills the width
   on purpose and reads as one block of writing rather than four fragments. */
/* contains the meeting band's bottom margin: see the note on .meet */
#about { display: flow-root; }

.firm {
  position: relative;
  padding-block: clamp(4rem, 10vw, 8rem) clamp(3.5rem, 9vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 3.2fr) 1px minmax(0, 8.4fr);
  column-gap: clamp(1.6rem, 4vw, 4rem);
  align-items: stretch;
}
/* a warm light falling across the paper from the heading side, so the ground
   is lit rather than flat */
.firm::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -6% -10% -10% -14%;
  background:
    radial-gradient(52% 56% at 20% 30%,
      rgb(224 188 99 / 0.22) 0%,
      rgb(196 156 68 / 0.075) 40%,
      transparent 72%),
    radial-gradient(64% 70% at 88% 96%,
      rgb(126 164 196 / 0.10) 0%, transparent 62%);
}
.firm > * { position: relative; z-index: 1; }
/* the seam between title and text, drawn downward as the section arrives */
.firm-rule {
  position: relative;
  align-self: stretch;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--gold-lt) 10%,
    var(--gold-brand) 40%,
    var(--gold-line) 80%,
    transparent 100%);
  transform: scaleY(var(--fr, 0));
  transform-origin: 50% 0;
}
/* the light that runs down the seam, and burns out once it lands */
.firm-rule > i {
  position: absolute; left: 50%; top: calc(var(--fr, 0) * 100%);
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: #FFF3D6;
  box-shadow: 0 0 3px 1px rgb(255 226 160 / 0.9),
              0 0 16px 5px rgb(224 188 99 / 0.55),
              0 0 40px 14px rgb(184 146 58 / 0.22);
  opacity: calc(min(1, var(--fr, 0) * 6) * (1 - max(0, (var(--fr, 0) - 0.86) / 0.14)));
}
@media (prefers-reduced-motion: reduce) {
  .firm-rule { transform: none; }
  .firm-rule > i { display: none; }
}
.firm-head { align-self: start; }
.firm-mark {
  display: block; height: auto;
  width: clamp(94px, 11vw, 158px);
  margin-top: clamp(2.8rem, 7vw, 5rem);
  margin-left: clamp(0.2rem, 1vw, 1rem);
  /* arrives with the seam, and sits in the warm light rather than on it */
  opacity: calc(clamp(0, (var(--fr, 0) - 0.24) / 0.5, 1) * 0.9);
  transform: translateY(calc((1 - clamp(0, (var(--fr, 0) - 0.24) / 0.5, 1)) * 18px));
  filter: drop-shadow(0 14px 34px rgb(184 146 58 / 0.28));
}
@media (prefers-reduced-motion: reduce) {
  .firm-mark { opacity: 0.9; transform: none; }
}
@media (max-width: 900px) { .firm-mark { display: none; } }
/* let the column set the measure: an 8ch cap broke it as "Who / are we?" */
.firm-head .q { max-width: none; }
.firm-copy { max-width: 58ch; }
.firm-copy p { margin: 0; color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.75; }
/* specificity: the reset above is (0,1,1) and would otherwise zero this */
.firm-copy > p + p { margin-top: clamp(1.1rem, 2.4vw, 1.7rem); }
.firm-lede {
  font-family: var(--sc-font-display);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem) !important;
  font-weight: 400; line-height: 1.34 !important;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink) !important; text-wrap: pretty;
}
/* the commitment stays in the prose and is simply the bold one */
.firm-name { color: var(--gold-deep); font-weight: 500; }
.firm-copy > .firm-commit {
  margin-top: clamp(1.9rem, 4vw, 2.9rem);
  padding: clamp(1.05rem, 2.2vw, 1.5rem) clamp(1.15rem, 2.4vw, 1.6rem);
  border-radius: 0 4px 4px 0;
  font-weight: 500;
  color: var(--sc-ink) !important;
}
/* Two clocks. The rule draws down first, then the panel unrolls to the right
   from it, then the words come up. Nothing fades in as a block. */
.firm-commit::before {
  content: ""; position: absolute; inset: 0 0 0 0; z-index: -1;
  border-radius: 0 4px 4px 0;
  background:
    linear-gradient(to right,
      rgb(224 188 99 / 0.17) 0%, rgb(224 188 99 / 0.05) 62%, rgb(224 188 99 / 0.02) 100%);
  box-shadow: 0 12px 30px -18px rgb(111 84 16 / 0.4);
  transform: scaleX(var(--fw, 0));
  transform-origin: 0 50%;
}
.firm-commit::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: var(--gold-brand);
  transform: scaleY(var(--fl, 0));
  transform-origin: 50% 0;
}
/* it is a child of a staggered reveal, and the engine writes an inline
   transition-delay onto every kid; so this one is lifted out of the stagger
   and put on the section's own clock, which lands it after the prose has set */
.firm-copy > .firm-commit,
.firm-copy > .firm-commit.sc-in {
  position: relative; isolation: isolate;
  transition: none;
  opacity: 1;
  transform: none;
}
/* the words ride the last of the three clocks */
.firm-commit > span {
  display: block;
  opacity: var(--fn, 0);
  transform: translateY(calc((1 - var(--fn, 0)) * 12px));
}
@media (prefers-reduced-motion: reduce) {
  .firm-commit::before { transform: none; }
  .firm-commit::after { transform: none; }
  .firm-commit > span { opacity: 1; transform: none; }
}
/* Between a phone and a wide screen there is no seam holding the reserved
   slot, so a delayed note reads as a hole in the column and arrives with the
   prose instead. On a phone the note is the width of the column and the
   reveal reads as it does on a wide screen, so it keeps its three clocks. */
@media (min-width: 721px) and (max-width: 900px) {
  .firm-commit::before { transform: none; }
  .firm-commit::after { transform: none; }
  .firm-commit > span { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .firm-rule { display: none; }
  .firm {
    grid-template-columns: 1fr;
    row-gap: clamp(1.8rem, 5vw, 2.8rem);
    padding-block: clamp(3rem, 8vw, 5rem) clamp(2.5rem, 7vw, 4rem);
  }
  .firm-head .q { max-width: none; }
  .firm-copy { max-width: none; }
  .firm-copy p { font-size: 0.96rem; line-height: 1.7; }
}

/* ------------------------------------------------------- and then, her --
   Full bleed, floor to ceiling, no card and no rounded corners: the point is
   that she is not a thumbnail on a page, she is the size of a person.    */
.meet {
  position: relative;
  /* the band used to run edge to edge, which made the photograph enormous and
     the whole thing read as a slab rather than as part of the section; it now
     sits on exactly the measure the prose above it uses */
  width: min(100% - var(--sc-gutter) * 2, calc(var(--sc-maxw) - var(--sc-gutter) * 2));
  /* the section has no padding of its own, so this margin used to collapse out
     through its foot and open a 41px strip of body colour between the paper
     here and the sky of the peak; #about is a flow-root now and contains it */
  margin: clamp(1rem, 3vw, 2.5rem) auto clamp(3rem, 7vw, 6rem);
  border-radius: 6px;
  box-shadow: 0 34px 70px -46px rgb(20 24 28 / 0.55);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  min-height: clamp(21rem, 52vh, 29rem);
  /* a warm floor across the whole band, not just the text column: while the
     reveal is running the ink beside the photograph is on screen too, and a
     gradient stopping at the column edge drew a hard vertical step */
  background:
    radial-gradient(64% 74% at 5% 72%,
      rgb(224 188 99 / 0.20) 0%,
      rgb(196 156 68 / 0.08) 38%,
      transparent 70%),
    radial-gradient(54% 60% at 50% 8%,
      rgb(126 164 196 / 0.10) 0%, transparent 66%),
    var(--ink);
  /* the band is a dark island inside a paper section, so the whole subtree has
     to carry light text: without this the credit block inherited the section's
     ink and read as dark-on-dark to anything measuring it */
  color: #F4F2ED;
  overflow: hidden;
}
.meet-words {
  display: grid; align-content: center;
  padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.2rem, 2.2vw, 2.2rem)
           clamp(2rem, 4.5vw, 3.4rem) clamp(1.6rem, 3.4vw, 3.4rem);
}
.meet-q {
  margin: 0; max-width: 23ch;
  text-shadow: 0 0 46px rgb(255 220 150 / 0.14);
  font-family: var(--sc-font-display);
  font-size: clamp(1.3rem, 0.95rem + 1.5vw, 2.35rem);
  font-weight: 400; line-height: 1.16;
  letter-spacing: var(--sc-track-tight);
  color: #F4F2ED; text-wrap: pretty;
}
.meet-q::before, .meet-q::after {
  color: var(--gold-lt);
  opacity: clamp(0, (var(--mp, 0) - 0.04) / 0.16, 1);
}
.meet-q::before { content: "“"; }
.meet-q::after  { content: "”"; }
.meet-who {
  display: grid; gap: 0.35rem;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  padding-top: var(--sc-5);
  max-width: 30ch;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right,
    var(--gold-brand) 0%, rgb(184 146 58 / 0.35) 52%, transparent 100%) 1;
}
.meet-name {
  font-family: var(--sc-font-display); font-size: 1.05rem; font-weight: 500;
  letter-spacing: var(--sc-track-snug); color: #F4F2ED;
}
.meet-role {
  font-family: var(--sc-font-mono); font-size: 0.68rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: #A9B7BE;
}
.meet-link { margin-top: var(--sc-5); justify-self: start; color: var(--gold-lt); }

.meet-face { position: relative; overflow: hidden; }
.meet-face img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 46% 20%;
  /* a slow settle as the band crosses, so a still photograph at this size is
     not completely inert */
  transform: scale(calc(1.06 - var(--mp, 0) * 0.06));
  transform-origin: 46% 30%;
}
/* the seam: her side is bright, the words side is ink, and this carries one
   into the other instead of butting them together on a hard edge */
/* The resting blend is a mask on the photograph itself, not an ink panel laid
   over it: an overlay would repaint the band's warm floor flat in the strip
   beside her, and during the reveal that strip is bare ink and on screen. */
.meet-face img {
  clip-path: inset(0 0 0 calc((1 - var(--mp, 0)) * 100%));
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, rgb(0 0 0 / 0.42) 10%, rgb(0 0 0 / 0.86) 24%, #000 42%);
  mask-image: linear-gradient(to right,
    transparent 0%, rgb(0 0 0 / 0.42) 10%, rgb(0 0 0 / 0.86) 24%, #000 42%);
}
.meet-face::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: 0; bottom: 0; width: 2px;
  left: calc((1 - var(--mp, 0)) * 100%);
  background: linear-gradient(to bottom,
    transparent 0%, var(--gold-lt) 12%, #FFF0CE 50%, var(--gold-lt) 88%, transparent 100%);
  box-shadow: 0 0 12px 2px rgb(224 188 99 / 0.55), 0 0 30px 6px rgb(184 146 58 / 0.18);
  opacity: calc(clamp(0, var(--mp, 0) / 0.06, 1) * clamp(0, (1 - var(--mp, 0)) / 0.18, 1));
}
@media (prefers-reduced-motion: reduce) {
  .meet-face img { clip-path: none; }
  .meet-face::after { display: none; }
}

@media (max-width: 860px) {
  .meet {
    grid-template-columns: 1fr;
    grid-template-rows: clamp(15rem, 34vh, 20rem) auto;
    min-height: 0;
  }
  .meet-face { grid-row: 1; }
  /* the band is short here, so a crop tuned for a tall column lands on her
     torso and takes her head off */
  .meet-face img { object-position: 50% 10%; }
  /* stacked here, so the photograph blends downward into the words instead of
     sideways, and the travelling edge runs the short way */
  .meet-face img {
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 54%, rgb(0 0 0 / 0.72) 78%, transparent 100%);
    mask-image: linear-gradient(to bottom,
      #000 0%, #000 54%, rgb(0 0 0 / 0.72) 78%, transparent 100%);
  }
  .meet-words {
    grid-row: 2;
    padding: clamp(1.6rem, 5vw, 2.3rem) clamp(1.2rem, 5vw, 2.3rem);
  }
  .meet-q { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .meet-face img { transform: none; } }

/* ==================================================== act 9 where - PEAK
   The one moment on the page that is daylight all the way through. Everything
   before it is either paper with ink on it or ink with light on it; this is a
   lit sphere on an open sky, and the section is the brightest ground on the
   site so that the peak reads as arrival rather than as another chapter.    */
.where-stage {
  overflow: clip;
  /* The act is pinned, so this ground is a fixed screen-sized layer: whatever
     sits at its top edge is what the page cuts to when the section boundary
     crosses the fold. It therefore starts as the paper of the section above
     and only opens into sky below that, so entering the peak is a change of
     light rather than a line drawn across the page. */
  background:
    radial-gradient(66% 56% at 56% 52%,
      rgb(255 252 244 / 0.95) 0%, rgb(246 249 251 / 0.6) 46%, transparent 74%),
    radial-gradient(58% 52% at 88% 94%,
      rgb(126 164 196 / 0.18) 0%, transparent 66%),
    radial-gradient(42% 40% at 6% 40%,
      rgb(224 188 99 / 0.16) 0%, transparent 70%),
    linear-gradient(to bottom,
      #FBFAF8 0%, #FBFAF8 14%, #F4F7F9 42%, #EDF1F4 74%, #E8EDF1 100%);
}
.globe-holder {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding-left: clamp(0px, 21vw, 310px);
}
.globe { width: min(82vmin, 840px); height: min(82vmin, 840px); overflow: visible; }

.gl-grid { fill: none; stroke: #93B0C1; stroke-width: 0.5; opacity: 0.5; }
.gl-land {
  fill: #F4F0E7; stroke: #8C9BA4; stroke-width: 0.7;
  stroke-linejoin: round; fill-rule: evenodd;
}
.gl-limb { fill: none; stroke: #6F93A8; stroke-width: 1.2; }
/* the atmosphere: two soft rings just outside the limb, so the sphere sits in
   air rather than being cut out of the page */
.gl-air-a { fill: none; stroke: rgb(111 147 168 / 0.26); stroke-width: 8; }
.gl-air-b { fill: none; stroke: rgb(111 147 168 / 0.10); stroke-width: 26; }
/* volume: a lit sphere, not a flat disc */
.gl-shade { pointer-events: none; }

.gl-city { opacity: 0; transition: opacity 620ms var(--sc-ease-out); }
.gl-city.on { opacity: 1; }
.gl-dot { fill: var(--gold-brand); stroke: #FFFDF6; stroke-width: 1.4; }
.gl-ring {
  fill: none; stroke: var(--gold-brand); stroke-width: 1.2; opacity: 0.6;
  transform-box: fill-box; transform-origin: 50% 50%;
}
.gl-city.on .gl-ring { animation: glPulse 3.4s var(--sc-ease-out) infinite; }
@keyframes glPulse {
  0%, 70%, 100% { opacity: 0.6; transform: scale(1); }
  18%           { opacity: 0;   transform: scale(2); }
  19%           { opacity: 0.6; transform: scale(1); }
}
.gl-tick { fill: none; stroke: var(--gold-line); stroke-width: 0.9; opacity: 0.75; stroke-linejoin: round; }
.gl-name {
  font-family: var(--sc-font-mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; fill: #14181C;
}
/* the local clock under each name: the same team, five places, and the page
   can simply show you what time it is for them */
.gl-time {
  font-family: var(--sc-font-mono); font-size: 10px;
  letter-spacing: 0.1em; fill: #6F5410;
}
@media (max-width: 700px) {
  /* SVG text is in user units and the viewBox is scaled to about half on a
     phone, so a 10-unit label lands at five pixels. These are the sizes that
     actually arrive at eleven, and the globe comes in to leave the label
     columns, which are drawn outside the viewBox, room on both sides. */
  .gl-name { font-size: 20px; }
  .gl-time { font-size: 19px; }
  .globe { width: 70vmin; height: 70vmin; }
}
@media (prefers-reduced-motion: reduce) { .gl-city.on .gl-ring { animation: none; } }

.where-copy {
  position: absolute; z-index: 20;
  left: var(--sc-gutter); top: 50%; transform: translateY(-54%);
  max-width: 30ch;
}
/* text-wrap: balance was splitting this into four short lines inside the
   inherited 18ch cap; the question wants two */
.where-copy .q { max-width: 14ch; }
.where-copy .q-rule { margin-top: var(--sc-4, 1.4rem); }
@media (max-width: 700px) {
  /* the globe was centred in the stage and the question pinned to its foot,
     which left nearly 300px of nothing between them. On a phone they are one
     stacked composition instead, centred as a pair. */
  .where-stage {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: clamp(0.5rem, 2vh, 1.4rem);
    padding-bottom: calc(var(--span-h) + 1.5rem);
  }
  .globe-holder { position: static; padding: 0; }
  .where-copy {
    position: static; transform: none; bottom: auto; left: auto;
    align-self: start; margin-left: var(--sc-gutter);
  }
  .where-copy { top: auto; transform: none; bottom: calc(var(--span-h) + 6.5rem); max-width: 20ch; }
  .where-copy .q { max-width: 12ch; }
}

/* ========================================================= act 10 contact
   The close. Every ground before it asks a question; this one stops asking and
   gives an instruction, so it is the darkest ground on the page and the gold
   finally gets to be the brightest thing on screen rather than an accent on
   paper.

   One band across the top carrying the instruction, one pane below carrying
   the form. It was two unequal columns before, which left the short one with a
   void under it and nothing sensible to put there.                         */
#contact {
  position: relative;
  overflow: clip;
  /* the rule for a flow section after a pinned act cuts the top padding to
     nothing much, which is right when a stage is still sliding off; this act
     is the close and wants its own headroom under the fixed chrome */
  padding-block-start: clamp(4rem, 7vw, 6.5rem);
  background:
    /* light in the room, low and to the left, the way the meeting band is lit */
    radial-gradient(58% 62% at 6% 88%,
      rgb(224 188 99 / 0.16) 0%, rgb(196 156 68 / 0.05) 40%, transparent 70%),
    /* and one cold window high on the other side */
    radial-gradient(52% 48% at 92% 4%,
      rgb(126 164 196 / 0.13) 0%, transparent 64%),
    /* a shaft of warm light crossing the room behind the pane */
    linear-gradient(104deg,
      transparent 26%, rgb(255 236 178 / 0.045) 44%, rgb(255 236 178 / 0.055) 52%,
      transparent 70%),
    var(--ink);
}

/* The words on the left, the form beside them, with a drawn gold seam between
   the two. The type is deliberately modest: the pane is the subject of this
   act, and a headline the size of a chapter question was shouting over it. */
.contact {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) 1px minmax(0, 1.22fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.contact > .foot, .contact > .tail-pad { grid-column: 1 / -1; }
.contact-seam {
  align-self: stretch; position: relative;
  background: linear-gradient(to bottom,
    transparent 0%, rgb(224 188 99 / 0.75) 16%, rgb(184 146 58 / 0.5) 74%, transparent 100%);
  transform: scaleY(var(--cs, 0)); transform-origin: 50% 0;
}
/* the light that runs down the seam and burns out when it lands */
.contact-seam > i {
  position: absolute; left: 50%; top: calc(var(--cs, 0) * 100%);
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: #FFF3D6;
  box-shadow: 0 0 4px 1px rgb(255 226 160 / 0.9), 0 0 18px 6px rgb(224 188 99 / 0.5);
  opacity: calc(min(1, var(--cs, 0) * 6) * (1 - max(0, (var(--cs, 0) - 0.86) / 0.14)));
}
@media (prefers-reduced-motion: reduce) {
  .contact-seam { transform: none; }
  .contact-seam > i { display: none; }
}

.contact-head { max-width: 30ch; }
.contact-eyebrow {
  margin: 0 0 clamp(1rem, 2.2vw, 1.5rem);
  font-family: var(--sc-font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-lt);
}
.contact-h {
  margin: 0; max-width: 12ch;
  font-family: var(--sc-font-display);
  font-size: clamp(1.85rem, 1.15rem + 1.9vw, 2.9rem);
  font-weight: 500; line-height: 1.06;
  letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink); text-wrap: balance;
}
.contact-h .dot { color: var(--gold-lt); }
.contact-head .q-rule { margin-top: clamp(1.1rem, 2.4vw, 1.6rem); }
.contact-lede {
  margin: clamp(1.5rem, 3.2vw, 2.2rem) 0 0;
  max-width: 34ch;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.14rem);
  line-height: 1.7; color: var(--sc-ink-soft);
}
@media (max-width: 980px) {
  .contact { grid-template-columns: 1fr; }
  .contact-seam { display: none; }
  .contact-head { max-width: 46ch; }
  .contact-h { max-width: none; }
  .contact-form { margin-top: clamp(2.4rem, 7vw, 3.6rem); }
}

/* a pane of lit glass on the ink: the form is the one thing in this act the
   visitor has to act on, so it is given an edge and a surface of its own */
.contact-form {
  position: relative; z-index: 2;
  margin-top: 0;
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.6rem) clamp(1.6rem, 3.2vw, 2.4rem);
  border: 1px solid var(--sc-hairline);
  border-radius: 14px;
  background:
    linear-gradient(to bottom right,
      rgb(255 246 224 / 0.075) 0%, rgb(255 250 236 / 0.025) 44%, rgb(255 253 246 / 0.008) 100%);
  box-shadow: 0 40px 90px -55px rgb(0 0 0 / 0.95),
              inset 0 1px 0 0 rgb(255 250 236 / 0.06);
}
/* one warm edge along the top, where the light in the room falls on it */
.contact-form::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  inset: -1px -1px auto -1px; height: 2px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(to right,
    transparent 3%, var(--gold-lt) 22%, var(--gold-lt) 58%, transparent 95%);
  box-shadow: 0 0 14px rgb(224 188 99 / 0.3);
}

.frow { display: grid; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.frow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .frow--2 { grid-template-columns: 1fr; } }

.field { position: relative; margin-top: var(--sc-5); }
.field label {
  display: block; font-family: var(--sc-font-mono); font-size: 0.66rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin-bottom: 0.55rem;
  transition: color 200ms var(--sc-ease-out);
}
.field input, .field textarea {
  width: 100%; background: transparent; color: var(--sc-ink);
  border: 0; border-bottom: 1px solid var(--sc-hairline);
  padding: 0.55rem 0; font-size: 1rem; font-family: var(--sc-font-text);
  transition: border-color 200ms var(--sc-ease-out);
}
.field textarea { resize: vertical; display: block; line-height: 1.6; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--sc-hairline-strong); }
/* the gold rule under a field draws out from the left as it takes focus:
   an underline that grows is the same drawn line the rest of the page uses */
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold-lt); pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 340ms var(--sc-ease-out);
}
.field:focus-within::after { transform: scaleX(1); }
.field:focus-within label { color: var(--gold-lt); }
.field input:focus, .field textarea:focus { outline: none; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gold-lt); outline-offset: 5px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) { .field::after { transition: none; } }

/* the message runs the whole pane: the change of measure is what separates it
   from the short answers above, so it needs no rule of its own */
.field--msg { margin-top: clamp(1.8rem, 3.6vw, 2.6rem); }
.field--msg textarea { min-height: clamp(7.5rem, 15vh, 11rem); }

.form-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: clamp(1.8rem, 3.6vw, 2.6rem);
}
.consent {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: 0.9rem; line-height: 1.55; max-width: 46ch;
}
.consent input {
  margin-top: 0.28rem; width: 1rem; height: 1rem; flex: none;
  accent-color: var(--gold-lt);
}
.consent label {
  font-family: var(--sc-font-text); font-size: 0.9rem; letter-spacing: 0;
  text-transform: none; color: var(--sc-ink-soft); margin: 0;
}
.form-foot .btn { margin-top: 0; flex: none; }
.form-status { margin-top: var(--sc-4); font-size: 0.9rem; color: var(--sc-accent); min-height: 1.4em; }
.form-status.is-good { color: #A8D5A2; }
.form-status.is-bad { color: #E8A87C; }
/* the honeypot: off screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }

/* ------------------------------------------------------------- footer ---
   Reference material, not part of the argument, so it sits back: quieter
   type, a fainter rule, muted labels, and colours pulled a step towards the
   ground they stand on. Everything still clears 4.5:1, because subtle is a
   matter of weight and hierarchy rather than of making text hard to read,
   and every link comes to full strength the moment it is pointed at.      */
/* Its own band, at the foot of every page, on a ground deeper than any the
   page itself uses. Sitting inside the last section it read as part of that
   section; standing on its own it reads as what it is. */
.site-foot {
  --sc-canvas: #0E1114;
  --sc-ink: #E7EDF1;
  --sc-ink-soft: #94A0A8;
  --sc-accent: var(--gold-lt);
  --sc-hairline: color-mix(in oklab, #E7EDF1 14%, transparent);
  --sc-hairline-strong: color-mix(in oklab, #E7EDF1 26%, transparent);
  background: var(--sc-canvas);
  border-top: 1px solid rgb(224 188 99 / 0.22);
  padding-block: clamp(3rem, 6.5vw, 5rem) 0;
  color: var(--sc-ink);
}
.foot {
  --foot-ink: color-mix(in oklab, var(--sc-ink-soft) 82%, var(--sc-canvas));
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-cols { grid-template-columns: 1fr; } }
.foot-col { display: grid; gap: 0.42rem; justify-items: start; }
.foot-h {
  font-family: var(--sc-font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--foot-ink);
  margin: 0 0 0.3rem;
}
.foot-col a, .foot-addr {
  font-family: var(--sc-font-text); font-size: 0.82rem; line-height: 1.55;
  letter-spacing: 0; color: var(--foot-ink);
  text-decoration: none; font-style: normal; margin: 0;
}
.foot-col a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out);
}
.foot-col a:hover, .foot-col a:focus-visible {
  color: var(--sc-ink); border-bottom-color: var(--sc-accent);
}
/* the mark is the whole link: an icon everyone recognises does not need its
   own name beside it, so the name lives in the accessible label instead */
.foot-h--sub { margin-top: clamp(1rem, 2.4vw, 1.5rem); }
.foot-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; }
.foot-social a {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--sc-hairline); border-radius: 8px;
  color: var(--foot-ink);
  transition: color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out),
              background-color 180ms var(--sc-ease-out);
}
.foot-social a:hover, .foot-social a:focus-visible {
  color: var(--sc-accent); border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent);
  background: color-mix(in oklab, var(--sc-accent) 10%, transparent);
}
.foot-social a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.ico-li { flex: none; }
.foot-base {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding-top: var(--sc-4);
  border-top: 1px solid color-mix(in oklab, var(--sc-hairline) 55%, transparent);
  display: flex; flex-wrap: wrap; gap: 0.8rem clamp(1rem, 3vw, 2.4rem);
  align-items: baseline; justify-content: space-between;
  font-family: var(--sc-font-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; color: var(--foot-ink);
}
.foot-nav { display: flex; gap: clamp(1rem, 3vw, 2.2rem); }
.foot-base a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.foot-base a:hover { color: var(--sc-accent); border-bottom-color: currentColor; }

/* ------------------------------------------------------- inner pages --- */
.page-top { padding-block: clamp(8rem, 16vh, 12rem) clamp(3rem, 7vw, 5rem); }
.page-h {
  font-family: var(--sc-font-display);
  font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem);
  font-weight: 500; line-height: 1.02; letter-spacing: var(--sc-track-tight);
  margin: var(--sc-5) 0 0; max-width: 17ch; text-wrap: balance;
}
.page-hero-fig {
  position: relative; height: clamp(240px, 44vh, 460px); overflow: hidden;
}
.page-hero-fig img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .span__node { transition: none; }
  .case-r { transition: none; }
}

/* ======================================================== on a phone =====
   Two things a narrow screen needs that a wide one does not: micro-type big
   enough to read at arm's length, and links big enough to hit with a thumb.
   Both are floors, not redesigns, and both are inside this query, so the
   desktop layout is untouched.                                            */
@media (max-width: 720px) {
  /* the warm light behind the prose is inset past the section's right edge
     on purpose; on a wide screen the wrap's margins absorb it, on a phone
     the wrap fills the width and it widens the document instead */
  #about { overflow: clip; }

  .tag, .foot-h, .gate-no, .case-sec, .case-go, .proc-n,
  .sys-card__name, .contact-eyebrow, .meet-role, .field label,
  .consent label, .orb-name { font-size: 0.72rem; }
  .foot-base, .foot-base a { font-size: 0.7rem; }
  .foot-col a, .foot-addr { font-size: 0.88rem; }
  .tlink { font-size: 0.72rem; }

  /* a thumb needs something to land on */
  .foot-col a { padding-block: 0.45rem; }
  .foot-base a { padding-block: 0.4rem; }
  .foot-col { gap: 0.15rem; }
  .tlink { padding-block: 0.35rem; }
}

/* ============================================ one type scale on a phone ==
   On a wide screen these sizes are proportionate to the columns they sit in,
   and the differences read as hierarchy. On a phone every column is the same
   width, so the same differences read as inconsistency: body copy arrived in
   seven sizes between 12.2 and 16.2px and sub-headings in three. This
   collapses them to one scale. Inside the query, so the desktop is untouched. */
@media (max-width: 720px) {
  /* the chapter question, and the close set to match it */
  .contact-h { font-size: 2rem; }
  .join-band .tlink { font-size: 0.72rem; }

  /* statements: the hero lede, the pull quotes, the founder's line */
  .lede-xl, .join-note, .meet-q { font-size: 1.3rem; line-height: 1.35; }
  .firm-lede { font-size: 1.3rem !important; line-height: 1.4 !important; }
  .std-c { font-size: 1.55rem; }
  .std-a, .std-b { font-size: 1rem; }

  /* sub-headings */
  .join-half h3, .gate h3, .study-card h3, .proc-t, .meet-name,
  .sys-card h3 { font-size: 1.12rem; }

  /* body, one size everywhere it appears */
  .sc-body, .join-half p, .firm-copy p, .case-d, .proc-d, .gate p,
  .study-card p, .contact-lede, .rev-lede, .sys-card__tools li,
  .consent label, .field input, .field textarea {
    font-size: 0.97rem; line-height: 1.6;
  }
}

/* ====================================== phone · rhythm and proportion ====
   A second pass over the narrow layout, section by section. Everything is
   inside the query, so the wide layout is untouched.                      */
@media (max-width: 720px) {

  /* --- the hero -------------------------------------------------------
     Bottom-anchored, the block left 440px of empty ceiling above it and
     60px below. It is one module, so it is tightened and set where the two
     margins are equal. */
  .hero-copy { top: 39vh; bottom: auto; }
  .hero-copy .q { margin-bottom: 0.55rem; }
  .hero-copy .sc-body { margin-top: 0.5rem; }
  .hero-copy .tlink { margin-top: 1.5rem; }

  /* --- the process ----------------------------------------------------
     "We investigate." is the line that carries the step. It reads as
     display type, at the weight the step's own name is set in. */
  .proc-verb {
    font-size: 1.02rem; font-weight: 500;
    margin: 0.3rem 0 0.5rem;
    color: var(--gold-deep);
  }

  /* --- the four reviews ----------------------------------------------
     The stacked gates are bottom-anchored and had grown up over the lede.
     The heading starts higher, the gates carry no rail padding they no
     longer have a rail for, and the panels sit closer to their own text. */
  .rev-copy--head { top: 5.4rem; }
  .rev-lede { margin-top: 0.8rem; }
  .gates {
    padding-top: 0;
    bottom: calc(var(--span-h) + 1.4rem);
    gap: 0.55rem;
  }
  .gate { padding: 0.62rem 0.85rem; }
  .gate p { line-height: 1.5; }

  /* --- the standard --------------------------------------------------
     Two conditions and a verdict, alone in the frame: they were set
     smaller than body copy in a field of nothing else. */
  .std-a, .std-b { font-size: 1.15rem; line-height: 1.4; }

  /* --- the case rail --------------------------------------------------
     The tail is a grid, which blockifies its inline-flex link and stretches
     the rule under it across the whole column. It ends at the arrow. */
  .work-tail .tlink { justify-self: start; }

  /* --- the stack ------------------------------------------------------
     The panel reserves the height of the longest discipline; on a phone
     the tools wrap into far fewer rows, so the reserve was mostly air
     between the list and the link under it. */
  .sys-panel { min-height: 7.6rem; }
  .sys-link { margin-top: 1.3rem; }

  /* --- who are we ------------------------------------------------------
     One column, one measure: both edges align. */
  .firm-copy p { text-align: justify; hyphens: auto; }
  .firm-lede { text-align: left; }

  /* --- and the photograph ---------------------------------------------
     The crop was tuned to keep her head clear of the top edge and took the
     lower half of the frame with it. */
  .meet-face img { object-position: 50% 26%; }

  /* --- get in touch ----------------------------------------------------
     The pane started a line under the sentence that introduces it, and
     inside it every field was spaced for a wide two-column form. */
  .contact-form {
    margin-top: 2.6rem;
    padding: 1.5rem 1.25rem 1.7rem;
  }
  .frow { gap: 0.2rem; }
  .field { margin-top: 1.15rem; }
  .field label { margin-bottom: 0.3rem; }
  .field input, .field textarea { padding: 0.4rem 0; }
  .field--msg { margin-top: 1.4rem; }
  .field--msg textarea { min-height: 6.5rem; }
  .form-foot { margin-top: 1.5rem; gap: 1.1rem; }

  /* --- the footer ------------------------------------------------------
     A single column of eleven links is a long scroll of near-identical
     rows. The two reference lists sit side by side, each group is separated
     by a rule rather than by a gap, and the rows come in closer. */
  .foot-cols {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.1rem; row-gap: 0;
  }
  .foot-col:nth-child(1), .foot-col:nth-child(2) { grid-column: 1 / -1; }
  .foot-col { position: relative; gap: 0.05rem; padding-block: 1.15rem; }
  .foot-col:nth-child(1) { padding-top: 0; }
  .foot-col:nth-child(2) {
    border-top: 1px solid color-mix(in oklab, var(--sc-hairline) 60%, transparent);
  }
  /* the last two stand side by side, so their shared rule is drawn by the
     left one across both tracks and the gutter between them */
  .foot-col:nth-child(3) { padding-right: 0.4rem; }
  .foot-col:nth-child(3)::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: calc(200% + 1.1rem); height: 1px;
    background: color-mix(in oklab, var(--sc-hairline) 60%, transparent);
  }
  .foot-h { margin-bottom: 0.45rem; }
  .foot-col a { padding-block: 0.3rem; line-height: 1.4; }
  .foot-col a, .foot-addr { font-size: 0.85rem; }
  .foot-addr { line-height: 1.7; }
  .foot-social { gap: 0.55rem; margin-top: 0.15rem; }
  .foot-base { margin-top: 1.3rem; }
}

/* ============================================ phone · the acts that move ==
   Two of the moves on this page were built around a wide frame and were
   switched off when the layout stacked, which left those sections inert on a
   phone. Both are here in the form the narrow layout can carry. Inside the
   query, so neither can reach a wide screen.                              */
@media (max-width: 720px) {

  /* --- what exactly do we do -------------------------------------------
     The two services close on each other as you scroll, because the
     sentence underneath says they run as one engagement. Stacked, they
     close the short way instead of the long one, and the seam that appears
     when they meet is drawn across the column rather than down it. */
  .join { gap: clamp(2.2rem, 8vw, 3.4rem); }
  .join-half { --shift: calc((1 - var(--join, 0)) * clamp(1.6rem, 8vw, 3rem)); }
  .join-half--l { transform: translateY(calc(-1 * var(--shift))); }
  .join-half--r { transform: translateY(var(--shift)); }
  .join-seam {
    display: block; width: auto; height: 1px;
    justify-self: stretch; align-self: center;
  }
  .join-seam span {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(to right,
      transparent, var(--gold-lt) 30%, var(--gold-lt) 70%, transparent);
    transform: scaleX(var(--join, 0));
  }

  /* --- what happens when you choose us ---------------------------------
     The connector is drawn by the same code that draws it on a wide screen,
     turned a quarter turn; the spine box has to run the height of the
     column rather than the 60px band the horizontal hops need. */
  .proc-spine { display: block; height: 100%; }
}

/* ================================== phone · the screen Safari leaves you ==
   A phone's screen is not the viewport. An iPhone 15 Pro is 393 x 852, but
   Safari keeps its bars and hands the page 393 x 659 - a full 193px less than
   the frame these pinned acts were tuned against. On an SE it is 320 x 568.
   Two acts did not fit in what is actually there: the four reviews landed on
   top of their own heading, and the four stages ran past the fold.

   Everything here is behind a max-width as well as a max-height, so no
   desktop window, however short, can reach it.                            */
@media (max-width: 720px) and (max-height: 740px) {

  /* --- the four reviews ------------------------------------------------
     Heading, lede and four panels have to share 659px. The question comes
     down a size, the panels lose the air they could afford on a taller
     screen, and the copy inside them sets one step tighter. */
  .rev-copy--head { top: 4.2rem; }
  .rev-copy--head .q { font-size: 1.62rem; }
  .rev-lede { margin-top: 0.55rem; font-size: 0.88rem; line-height: 1.45; }
  .gates { bottom: calc(var(--span-h) + 0.8rem); gap: 0.4rem; }
  .gate { padding: 0.45rem 0.7rem; }
  .gate h3 { font-size: 0.98rem; margin-bottom: 0.1rem; }
  .gate p { font-size: 0.85rem; line-height: 1.4; }
  .gate-seal { width: 15px; height: 15px; }
  .gate-seal svg { width: 15px; height: 15px; }

  /* --- what happens when you choose us ---------------------------------
     Four stages in one column, and on this screen the last of them was
     below the fold for the whole act. */
  .proc-head .q { font-size: 1.62rem; }
  .proc-wrap { margin-top: 1rem; }
  .proc-track { gap: 0.55rem; }
  .proc-step { padding-left: 2.5rem; }
  .proc-mark { width: 24px; height: 24px; }
  .proc-seal { width: 14px; height: 14px; }
  .proc-t { font-size: 1rem; }
  .proc-verb { font-size: 0.92rem; margin: 0.15rem 0 0.3rem; }
  .proc-d { font-size: 0.86rem; line-height: 1.45; }

  /* --- the hero --------------------------------------------------------
     Two pixels over, but the block is one module and sits better a little
     higher on a short screen anyway. */
  .hero-copy { top: 34vh; }
}

/* ------------------------- and the shortest screen still in circulation --
   An iPhone SE hands the page 320 x 568. Everything above is taken one step
   further; below this there is nothing left to give without dropping copy,
   which is not a trade worth making.                                      */
@media (max-width: 720px) and (max-height: 600px) {
  .rev-copy--head { top: 3.4rem; }
  .rev-copy--head .q { font-size: 1.42rem; }
  .rev-lede { margin-top: 0.4rem; font-size: 0.82rem; line-height: 1.4; }
  .gates { bottom: calc(var(--span-h) + 0.5rem); gap: 0.28rem; }
  .gate { padding: 0.35rem 0.6rem; }
  .gate h3 { font-size: 0.9rem; }
  .gate p { font-size: 0.79rem; line-height: 1.34; }

  .proc-head .q { font-size: 1.42rem; }
  .proc-wrap { margin-top: 0.7rem; }
  .proc-track { gap: 0.35rem; }
  .proc-step { padding-left: 2.2rem; }
  .proc-mark { width: 21px; height: 21px; }
  .proc-t { font-size: 0.95rem; }
  .proc-verb { font-size: 0.86rem; margin: 0.1rem 0 0.22rem; }
  .proc-d { font-size: 0.8rem; line-height: 1.4; }
}