/* ==========================================================================
   ANIMATRIX — Animation, VFX & Creative Production
   Design system: "midnight projection room"
   Structure follows .claude/skills/animatrix-style/DESIGN.md
   Identity diverges from the reference: violet-iris accent over a three-ramp
   spectral atmosphere (azure / mint / blush). Not Frame.io's SaaS blue.
   ========================================================================== */

:root {
  /* --- Colors: canvas — bases taken from the ramp floors ---------------- */
  --color-obsidian:        #0a0912;   /* primary canvas */
  --color-void:            #050410;   /* nav veil, deepest layer */
  --color-graphite:        #100e1c;   /* media surface, one step up */
  --color-card-halo:       #15122c;   /* inset tint under framed media */

  /* --- Colors: type ---------------------------------------------------- */
  --color-vellum:          #f4f3f9;   /* primary text, cool near-white */
  --color-ash:             #a6a3bb;   /* tertiary — descriptions, lists */
  --color-smoke:           #77738e;   /* secondary — quiet body, captions */
  --color-charcoal:        #241f33;   /* hairline dividers */

  /* --- Colors: the single UI accent ------------------------------------ */
  --color-iris:            #a98cff;   /* icons, eyebrows, links, active states */
  --color-iris-core:       #9250f2;   /* gradient stop, stronger borders */
  --color-iris-dim:        #402a6b;   /* media halo, atmospheric edge */
  --color-iris-wash:       rgba(146, 80, 242, 0.12);

  /* --- The three spectral ramps — atmosphere only, never UI ------------- */
  --ramp-azure-hi:  #beeaec;  --ramp-azure-mid: #1761a6;  --ramp-azure-lo: #050c12;
  --ramp-mint-hi:   #86edd2;  --ramp-mint-mid:  #68379d;  --ramp-mint-lo:  #15122c;
  --ramp-blush-hi:  #ff9cba;  --ramp-blush-mid: #9250f2;  --ramp-blush-lo: #180b2e;

  /* --- Typography ------------------------------------------------------ */
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-stamp:   'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale: reference values × 1.05 */
  --text-caption:     12.6px;  --leading-caption:     1.45;  --tracking-caption:     0.76px;
  --text-body-sm:     14.7px;  --leading-body-sm:     1.5;
  --text-body:        16.8px;  --leading-body:        1.45;  --tracking-body:        0.17px;
  --text-subheading:  18.9px;  --leading-subheading:  1.35;
  --text-heading-sm:  25.2px;  --leading-heading-sm:  1.25;  --tracking-heading-sm:  -0.76px;

  --text-heading:     clamp(27.3px, 4.2vw,   39.9px);
  --text-heading-lg:  clamp(33.6px, 5.25vw, 50.4px);
  --text-display:     clamp(46.2px, 7.9vw,  84px);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* --- Spacing --------------------------------------------------------- */
  --space-8: 8px;    --space-16: 16px;  --space-24: 24px;
  --space-32: 32px;  --space-40: 40px;  --space-48: 48px;
  --space-56: 56px;  --space-80: 80px;  --space-96: 96px;
  --space-144: 144px; --space-160: 160px; --space-176: 176px;

  /* --- Layout ---------------------------------------------------------- */
  --page-max-width: 1344px;   /* 1280 × 1.05 */
  --gutter: 34px;
  --section-gap: 84px;
  --measure: 588px;

  /* --- Radii ----------------------------------------------------------- */
  --radius-pill:  100px;
  --radius-media: 10px;
  --radius-lg:    24px;

  /* --- Motion ---------------------------------------------------------- */
  --ease-slow: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--color-obsidian);
  color: var(--color-vellum);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--color-iris); color: var(--color-void); }

:focus-visible {
  outline: 2px solid var(--color-iris);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  position: relative;
  padding-block: var(--space-96);
}

.band--tight { padding-block: var(--space-80); }
.band--tall  { padding-block: var(--space-144); }

/* Each band carries its own gradient so light pools in a different corner
   as the page scrolls. Never a flat fill. */
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Azure ramp — light pooling top-left */
.band--aurora::before {
  background:
    radial-gradient(78% 62% at 2% 8%,  rgba(23, 97, 166, 0.22) 0%, transparent 60%),
    radial-gradient(50% 45% at 14% 0%, rgba(190, 234, 236, 0.07) 0%, transparent 62%),
    linear-gradient(176deg, #0a0912 0%, #070a14 100%);
}

/* Mint → violet ramp — light pooling top-right */
.band--tide::before {
  background:
    radial-gradient(74% 60% at 98% 14%, rgba(104, 55, 157, 0.30) 0%, transparent 62%),
    radial-gradient(44% 40% at 88% 2%,  rgba(134, 237, 210, 0.08) 0%, transparent 64%),
    linear-gradient(184deg, #090813 0%, #0b0a18 100%);
}

/* Deep well — light falling from directly above */
.band--deep::before {
  background:
    radial-gradient(105% 78% at 50% 0%, #18142e 0%, #0c0a18 52%, #060510 100%);
}

/* Blush → violet ramp — light rising from below, for the closing CTA */
.band--nebula::before {
  background:
    radial-gradient(66% 88% at 50% 112%, rgba(146, 80, 242, 0.34) 0%, transparent 60%),
    radial-gradient(40% 52% at 50% 118%, rgba(255, 156, 186, 0.16) 0%, transparent 64%),
    linear-gradient(180deg, #060510 0%, #0c081c 100%);
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--color-charcoal);
}

/* ==========================================================================
   Type components
   ========================================================================== */

.eyebrow {
  font-family: var(--font-stamp);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-iris);
  margin-bottom: var(--space-24);
  display: block;
}

.eyebrow--quiet { color: var(--color-smoke); }

.display {
  font-size: var(--text-display);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: var(--weight-regular);
  color: var(--color-vellum);
  text-wrap: balance;
}

.heading-lg {
  font-size: var(--text-heading-lg);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: var(--weight-regular);
  text-wrap: balance;
}

.heading {
  font-size: var(--text-heading);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: var(--weight-regular);
  text-wrap: balance;
}

.heading-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--weight-regular);
}

.lede {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  color: var(--color-smoke);
  max-width: var(--measure);
}

.lede + .lede { margin-top: var(--space-16); }

.body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-ash);
}

.caption {
  font-family: var(--font-stamp);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.04em;
  color: var(--color-smoke);
}

/* ==========================================================================
   Actions — pills and iris links
   ========================================================================== */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-40);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  letter-spacing: 0;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease-slow),
              color 0.35s var(--ease-slow),
              border-color 0.35s var(--ease-slow);
}

.pill--solid {
  background: var(--color-vellum);
  color: var(--color-void);
  font-weight: var(--weight-medium);
  border: 1px solid var(--color-vellum);
}

.pill--solid:hover { background: var(--color-iris); border-color: var(--color-iris); }

.pill--ghost {
  background: transparent;
  color: var(--color-vellum);
  border: 1px solid rgba(247, 246, 244, 0.35);
}

.pill--ghost:hover {
  background: var(--color-vellum);
  color: var(--color-void);
  border-color: var(--color-vellum);
}

/* Section-level link: text + arrow, never a pill. Ten pills would be noise. */
.iris-link {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--color-iris);
  font-size: var(--text-body-sm);
  letter-spacing: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-slow), gap 0.3s var(--ease-slow);
}

.iris-link:hover { border-bottom-color: var(--color-iris); gap: 16px; }
.iris-link .arrow { transition: transform 0.3s var(--ease-slow); }
.iris-link:hover .arrow { transform: translateX(2px); }

.iris-link--quiet { color: var(--color-ash); }
.iris-link--quiet:hover { color: var(--color-iris); border-bottom-color: var(--color-iris); }

/* ==========================================================================
   Media frame — iris halo and corner brackets
   ========================================================================== */

.frame {
  position: relative;
  border-radius: var(--radius-media);
  border: 1px solid var(--color-iris-dim);
  background: var(--color-graphite);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.frame--reel   { aspect-ratio: 16 / 9; }
.frame--tile   { aspect-ratio: 4 / 3; }
.frame--tall   { aspect-ratio: 3 / 4; }
.frame--square { aspect-ratio: 1 / 1; }

/* Real media fills the frame exactly as the placeholder did */
.frame__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--color-graphite);
  transform: scale(1.001);            /* kills the hairline edge on scale-up */
  transition: transform 0.6s var(--ease-slow), opacity 0.4s var(--ease-slow);
}

.frame:hover .frame__video { transform: scale(1.04); }

/* Play mark stays legible over footage */
.frame__video ~ .frame__play span {
  background: rgba(8, 8, 12, 0.45);
  backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .frame:hover .frame__video { transform: scale(1.001); }
}

/* Placeholder treatment — real media drops straight in, one-line change */
.frame__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;   /* label sits low; play button owns the centre */
  gap: 4px;
  text-align: center;
  padding: var(--space-24) var(--space-40) 18px;
  /* Plain surface — no hatch, no gradient. Real media replaces this whole
     layer, so it should read as an empty slot, not as decoration. */
  background: var(--color-graphite);
}

/* Corner bracket — reads as a framing mark, not a broken image */
.frame__ph::before,
.frame__ph::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-iris-dim);
  opacity: 0.85;
}

.frame__ph::before { top: 14px;    left: 14px;  border-right: 0; border-bottom: 0; }
.frame__ph::after  { bottom: 14px; right: 14px; border-left: 0;  border-top: 0; }

.frame__ph-label {
  font-family: var(--font-stamp);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-smoke);
  max-width: 32ch;
}

.frame__ph-ratio {
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--color-iris-dim);
}

/* A frame can hold a still as readily as a loop — same fill, same crop. */
.frame__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play affordance for showreel / work tiles */
/* Play sits above centre so it never lands on the caption below it */
.frame__play {
  position: absolute;
  inset: 0 0 22% 0;
  display: grid;
  place-items: center;
}

.frame__play span {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-iris);
  display: grid;
  place-items: center;
  color: var(--color-iris);
  opacity: 0.6;
  transition: opacity 0.4s var(--ease-slow), background-color 0.4s var(--ease-slow);
}

a.frame:hover .frame__play span,
.frame:hover .frame__play span {
  opacity: 1;
  background: var(--color-iris-wash);
}

/* ==========================================================================
   Top navigation
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease-slow), background-color 0.4s var(--ease-slow);
}

.nav.is-stuck {
  border-bottom-color: var(--color-charcoal);
  background: rgba(6, 6, 8, 0.92);
}

.nav__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: var(--space-32);
  min-height: 72px;
  padding-block: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
}

/* Full brand lockup — mark + wordmark + parent line, supplied as one white
   asset for dark backgrounds. The only place a colour outside the accent
   appears. Height drives the size; width follows the 537:172 ratio. */
.brand__logo {
  height: 42px;               /* the "Messenger2050" line is illegible below ~40px */
  width: auto;
  flex: none;
  transition: opacity 0.4s var(--ease-slow);
}

.brand:hover .brand__logo { opacity: 0.72; }

.brand--footer .brand__logo { height: 54px; }

@media (max-width: 860px) {
  .brand__logo { height: 36px; }
}

.nav__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 18px;
}

.nav__link {
  font-size: var(--text-body-sm);
  color: var(--color-ash);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.3s var(--ease-slow), border-color 0.3s var(--ease-slow);
}

.nav__link:hover { color: var(--color-vellum); border-bottom-color: var(--color-vellum); }

.nav__cta { padding: 11px 22px; font-size: var(--text-body-sm); }

.nav__toggle { display: none; }

/* --- Services dropdown ----------------------------------------------------
   The nine Animatrix pages only — the Messenger2050 network links live as
   plain flat items in the main bar (.nav__link--ext below), not nested here.
   Pure-CSS hover/focus flyout on desktop; becomes a static inline block
   inside the mobile menu panel (see @media below) — no JS dependency, so
   it works identically on every page regardless of which script it loads.
   -------------------------------------------------------------------- */

.nav__item { position: relative; }

.nav__link--trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  color: var(--color-ash);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s var(--ease-slow), border-color 0.3s var(--ease-slow);
}

.nav__link--trigger:hover,
.nav__item--dropdown:hover .nav__link--trigger,
.nav__item--dropdown:focus-within .nav__link--trigger,
.nav__item--dropdown.is-open .nav__link--trigger {
  color: var(--color-vellum);
  border-bottom-color: var(--color-vellum);
}

.nav__caret {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.3s var(--ease-slow);
}

.nav__item--dropdown:hover .nav__caret,
.nav__item--dropdown:focus-within .nav__caret,
.nav__item--dropdown.is-open .nav__caret { transform: rotate(-135deg) translateY(0); }

/* Bridges the gap between the trigger and the flyout so the mouse never
   leaves a hovered element mid-travel — this is what was breaking hover. */
.nav__item--dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 20px;
}

.nav__mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: 2px 28px;
  width: max-content;
  padding: 14px;
  background: #03122791;
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-media);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s var(--ease-slow), transform 0.24s var(--ease-slow), visibility 0.24s;
  z-index: 50;
}

.nav__item--dropdown:hover .nav__mega,
.nav__item--dropdown:focus-within .nav__mega,
.nav__item--dropdown.is-open .nav__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Architectural Visualization only has three items — one wide column so
   each label sits on a single line, instead of a cramped two-up grid. */
#nav-archviz .nav__mega {
  grid-template-columns: minmax(280px, 360px);
}

.nav__mega-link {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: var(--text-body-sm);
  line-height: 1.3;
  color: var(--color-ash);
  transition: color 0.2s var(--ease-slow), background-color 0.2s var(--ease-slow);
}

.nav__mega-link:hover { color: var(--color-vellum); background: var(--color-iris-wash); }
.nav__mega-link[aria-current="page"] { color: var(--color-iris); }

/* --- Flat top-level links for the Messenger2050 network -------------------
   Deliberately not a dropdown — these are separate destinations that sit in
   the main bar next to Home / Services / Our Process. */

/* Same size and weight as the other top-level links — only the small
   arrow glyph marks it as external, not a different type scale. */
.nav__link--ext {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.ext {
  display: inline-block;
  font-size: 0.85em;
  opacity: 0.7;
  transform: translateY(-1px);
}

/* Footer external-link marker reuses the same glyph styling */
.footer__list a .ext { display: inline-block; font-size: 0.75em; opacity: 0.6; margin-left: 2px; }

/* ==========================================================================
   Hero — full-bleed reel, type overlaid low-left
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: center;          /* centred, not bottom-weighted */
  padding-block: var(--space-96);
  overflow: hidden;
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(62% 58% at 74% 22%, rgba(61, 255, 242, 0.30) 0%, transparent 64%),
    radial-gradient(42% 40% at 88% 6%,  rgba(255, 156, 186, 0.13) 0%, transparent 66%),
    radial-gradient(78% 64% at 6% 92%,  rgba(23, 97, 166, 0.24) 0%, transparent 62%),
    radial-gradient(38% 34% at 22% 100%, rgba(134, 237, 210, 0.08) 0%, transparent 66%),
    linear-gradient(198deg, #100c22 0%, #07060f 48%, #0a0912 100%);
}

/* Slow spectral drift — the only thing that moves on its own */
.hero__beam {
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(44% 38% at 62% 30%, rgba(146, 80, 242, 0.16) 0%, transparent 68%),
    radial-gradient(34% 30% at 34% 74%, rgba(23, 97, 166, 0.12) 0%, transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0); opacity: 0.75; }
  to   { transform: translate3d(3%,  2%, 0); opacity: 1; }
}

.hero__ph {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--color-charcoal);
}

/* Hero loop sits behind the headline. Knocked well down at the source —
   several clips are bright enough that a scrim alone cannot save the type. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.38) saturate(0.85) contrast(1.05);
}

/* Scrim: a flat floor across the whole frame so contrast never depends on
   what the footage happens to be doing, then directional falloff on top —
   heaviest behind the headline at left, fading out to the right. */
.hero__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--color-ink) 0%, rgba(8, 8, 12, 0.88) 42%, rgba(8, 8, 12, 0.62) 100%),
    linear-gradient(to top, var(--color-ink) 0%, rgba(8, 8, 12, 0.30) 46%, transparent 100%),
    rgba(8, 8, 12, 0.42);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-56);
  align-items: end;
  width: 100%;
}

.hero__title { margin-top: var(--space-24); }

.hero__title .line { display: block; }
.hero__title .line--iris { color: var(--color-iris); }

.hero__lede { margin-top: var(--space-32); }

/* Page name: the h1 carries a line of copy, so the service itself needs
   its own rung on the ladder --- bigger than the keyword eyebrow above it,
   smaller than the headline below, and in the accent so it reads first. */
.hero__service {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-iris);
  margin-bottom: var(--space-16);
}

/* A rule running off to the right gives the name presence without weight */
.hero__service::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}

.hero__service {
  opacity: 0;
  animation: settle 1.1s var(--ease-slow) 0.2s forwards;
}

@media (max-width: 600px) {
  .hero__service::after { display: none; }
}


/* Hero copy sits over footage rather than flat ink, so it steps up one tone.
   At --color-smoke it topped out around 4.4:1 even against a full scrim. */
.hero__lede,
.hero__meta .caption,
.hero__aside .caption { color: var(--color-ash); }

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 4px 0 6px var(--space-32);
  border-left: 1px solid var(--color-charcoal);
}

.hero__aside p {
  color: var(--color-ash);
  font-size: var(--text-body-sm);
  line-height: 1.55;
  max-width: none;   /* fills its track so both edges meet the shell */
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-56);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-charcoal);
  flex-wrap: wrap;
}

/* ==========================================================================
   Sticky section index — solves the long scroll
   ========================================================================== */

.index-rail {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 11px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-slow), visibility 0.5s;
}

.index-rail.is-visible { opacity: 1; visibility: visible; }

.index-rail__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--color-smoke);
  transition: color 0.3s var(--ease-slow);
}

.index-rail__label {
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s var(--ease-slow), transform 0.3s var(--ease-slow);
  white-space: nowrap;
}

.index-rail__tick {
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease-slow);
  flex: none;
}

.index-rail__item:hover,
.index-rail__item.is-active { color: var(--color-iris); }

.index-rail__item:hover .index-rail__label,
.index-rail__item.is-active .index-rail__label { opacity: 1; transform: none; }

.index-rail__item.is-active .index-rail__tick { width: 30px; }

/* ==========================================================================
   Statement band
   ========================================================================== */

.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-80);
  align-items: start;
}

.statement__body { display: flex; flex-direction: column; gap: var(--space-24); }

/* Fills its track so the right edge meets the shell, same as the left */
.statement__body p {
  color: var(--color-ash);
  font-size: var(--text-body);
  line-height: 1.6;
  max-width: none;
}

/* ==========================================================================
   Featured work
   ========================================================================== */

/* Grid, not space-between — the right block must land flush on the shell edge
   instead of floating short of it, which reads as an off-centre section. */
.work__head {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-56);
  margin-bottom: var(--space-48);
}

.work__head .lede { max-width: none; }

.work__reel { margin-bottom: var(--space-24); }

.work__reel-caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-24);
  flex-wrap: wrap;
  margin-bottom: var(--space-80);
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}

.work__item { display: block; }

.work__item .frame { transition: border-color 0.4s var(--ease-slow); }
.work__item:hover .frame { border-color: var(--color-iris); }

/* Single label now — left aligned under its tile, no tag to balance against */
.work__item-meta {
  display: flex;
  align-items: baseline;
  margin-top: 14px;
}

.work__item-title { font-size: var(--text-body); letter-spacing: -0.01em; }

.work__actions { margin-top: var(--space-56); }

/* ==========================================================================
   Service section — one component, ten instances
   ========================================================================== */

.service {
  position: relative;
  padding-block: var(--space-96);
}

/* Each service carries its own light, pooled behind its media column so the
   frame reads as lit rather than pasted onto a flat panel. */
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56% 66% at var(--glow-x, 86%) 44%, var(--glow-a) 0%, transparent 64%),
    radial-gradient(38% 46% at var(--glow-x2, 96%) 6%, var(--glow-b) 0%, transparent 68%);
}

/* Media on the left → light follows it */
.service--flip { --glow-x: 14%; --glow-x2: 4%; }

/* Cycle the three ramps down the run so nine sections never repeat twice over */
.service:nth-child(3n + 1) { --glow-a: rgba(146,  80, 242, 0.20); --glow-b: rgba(255, 156, 186, 0.07); }
.service:nth-child(3n + 2) { --glow-a: rgba( 23,  97, 166, 0.21); --glow-b: rgba(190, 234, 236, 0.06); }
.service:nth-child(3n)     { --glow-a: rgba(104,  55, 157, 0.23); --glow-b: rgba(134, 237, 210, 0.07); }

/* Top hairline fades in from the edges and brightens at the centre */
.service::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-charcoal) 16%,
    rgba(169, 140, 255, 0.34) 50%,
    var(--color-charcoal) 84%,
    transparent 100%
  );
}

.service__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-80);
  align-items: start;
}

/* Alternate the media side so the scroll has rhythm */
.service--flip .service__media { order: -1; }

.service__index {
  font-family: var(--font-stamp);
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  color: var(--color-iris-dim);
  margin-bottom: var(--space-16);
  display: block;
}

.service__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px var(--space-24);
  margin-top: var(--space-40);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-charcoal);
}

.service__list li {
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-ash);
}

.service__cta { margin-top: var(--space-40); }

.service__media { position: sticky; top: 120px; }

/* Visualization group — nested children under one parent */
.viz__intro { max-width: 720px; }

/* Intro and a supporting still, side by side. If the image element removes
   itself (file not uploaded yet) the grid collapses to one column on its
   own, because the intro is then the only child. */
.viz__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--space-56);
  align-items: center;
  margin-bottom: var(--space-56);
}

.viz__head > :only-child { grid-column: 1 / -1; }

.viz__media { width: 100%; }

@media (max-width: 1080px) {
  .viz__head { grid-template-columns: 1fr; gap: var(--space-32); }
  .viz__media { max-width: 520px; }
}


.viz__group { display: flex; flex-direction: column; gap: var(--space-56); }

.viz__child {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--space-48);
  padding-top: var(--space-40);
  border-top: 1px solid var(--color-charcoal);
  align-items: start;
}

.viz__child-body p { color: var(--color-ash); font-size: var(--text-body-sm); line-height: 1.6; max-width: 62ch; }

.viz__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px var(--space-24);
  margin-top: var(--space-24);
}

.viz__list li { font-size: var(--text-body-sm); color: var(--color-ash); line-height: 1.5; }

.viz__child-cta { margin-top: var(--space-24); }

/* ==========================================================================
   Pipeline run
   ========================================================================== */

.pipeline {
  margin-top: var(--space-48);
  padding-block: var(--space-32);
  border-block: 1px solid var(--color-charcoal);
  overflow-x: auto;
  scrollbar-width: none;
}

.pipeline::-webkit-scrollbar { display: none; }

.pipeline__run {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: var(--text-body-sm);
}

.pipeline__step { color: var(--color-vellum); }
.pipeline__arrow { color: var(--color-iris); }

.combos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px var(--space-24);
  margin-top: var(--space-40);
}

.combos li {
  font-size: var(--text-body-sm);
  color: var(--color-ash);
  padding-left: 18px;
  position: relative;
}

.combos li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--color-iris);
}

/* ==========================================================================
   Feature columns — industries, why, tech
   ========================================================================== */

.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-48) var(--space-24);
  margin-top: var(--space-56);
}

.col__icon { color: var(--color-iris); margin-bottom: var(--space-16); }
.col__icon svg { width: 24px; height: 24px; }

.col__title {
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.col__body { font-size: var(--text-body-sm); line-height: 1.55; color: var(--color-ash); }

/* Process steps — numbered, no timeline rail */
.steps {
  display: grid;
  /* Column count is chosen per grid so the last row always fills --- see
     nav.js. Ten steps run 5+5 rather than 4+4+2; eight and twelve stay 4. */
  grid-template-columns: repeat(var(--step-cols, 4), minmax(0, 1fr));
  gap: var(--space-48) var(--space-24);
  margin-top: var(--space-56);
}

.step__num {
  font-family: var(--font-stamp);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  color: var(--color-iris);
  display: block;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-charcoal);
}

.step__title {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.step__body { font-size: var(--text-body-sm); line-height: 1.55; color: var(--color-ash); }

/* Tech chips — plain typographic list, no pills */
.tech {
  columns: 4;
  column-gap: var(--space-24);
  margin-top: var(--space-48);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-charcoal);
}

.tech li + li { margin-top: 12px; }

.tech li { font-size: var(--text-body-sm); color: var(--color-ash); }

/* ==========================================================================
   Parent brand + closing CTA
   ========================================================================== */

.parent__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-80);
  align-items: start;
}

.parent__body { display: flex; flex-direction: column; gap: var(--space-24); }
.parent__body p { color: var(--color-ash); font-size: var(--text-body); line-height: 1.6; max-width: none; }

.closing { text-align: left; }
.closing__inner { max-width: 700px; }

/* The closing headline shares its row with a sketch now, so it drops a
   step off the full display scale --- at 84px the longer ones towered
   into four lines in a 590px column and left the sketch stranded. */
.closing .display { font-size: clamp(38px, 4.6vw, 62px); }

/* The closing band sits on a shorter rhythm than the other tall bands —
   its content is one balanced two-column block, not a full section. */
.closing.band--tall { padding-block: var(--space-80); }

/* A frame playing on its own needs no play triangle */
.frame--live .frame__play { display: none; }

.closing .lede { max-width: 640px; }

/* Closing CTA sat as one left-aligned column with the right half empty.
   It is now a two-column band: the pitch on the left, a page-specific
   line sketch on the right, drawn in the iris accent at low opacity so
   it reads as atmosphere behind the call to action, never as a control. */
.closing .shell {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--space-56);
  align-items: center;
}

.closing__art {
  color: var(--color-iris);
  justify-self: end;
  width: 100%;
  max-width: 560px;
}

.closing__art svg {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.58;
}

@media (prefers-reduced-motion: no-preference) {
  .closing__art svg { animation: artDrift 19s var(--ease-slow) infinite alternate; }
}

@keyframes artDrift {
  from { transform: translate3d(0, -7px, 0); }
  to   { transform: translate3d(0, 7px, 0); }
}

@media (max-width: 1080px) {
  .closing .shell { grid-template-columns: 1fr; gap: var(--space-40); }
  .closing__art   { justify-self: start; max-width: 480px; }
}

@media (max-width: 600px) {
  .closing__art { max-width: 320px; }
}

/* ==========================================================================
   Spectrum accents — colour that moves with the page
   ========================================================================== */

/* Each band owns an accent drawn from its own background ramp, so a label
   picks up the light already pooling behind it. One variable, inherited. */
.band--aurora { --accent: var(--ramp-azure-hi); }
.band--tide   { --accent: var(--ramp-mint-hi); }
.band--nebula { --accent: var(--ramp-blush-hi); }
.band--deep   { --accent: var(--color-iris); }
.service      { --accent: var(--color-iris); }
.service:nth-of-type(3n + 2) { --accent: var(--ramp-mint-hi); }
.service:nth-of-type(3n)     { --accent: var(--ramp-azure-hi); }

.eyebrow { color: var(--accent, var(--color-iris)); }

/* Numerals and icons follow the same accent */
.col__icon,
.cap:hover .cap__index,
.step__num { color: var(--accent, var(--color-iris)); }

/* Card icons cycle within a grid so a row of six is not six of one colour */
.cols .col:nth-child(3n + 2) .col__icon { color: var(--ramp-mint-hi); }
.cols .col:nth-child(3n)     .col__icon { color: var(--ramp-blush-hi); }

/* --- Gradient headings ---------------------------------------------------
   Not every heading: the spectrum lands on the tide and nebula bands and on
   the closing display, so it reads as punctuation down the page rather than
   as a default. Background-clip needs a painted box, hence the inline-block. */
.band--tide .heading-lg,
.band--nebula .heading-lg,
.closing .display {
  background: linear-gradient(
    100deg,
    var(--ramp-mint-hi) 0%,
    var(--color-iris) 34%,
    var(--ramp-blush-hi) 64%,
    var(--color-iris) 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .band--tide .heading-lg,
  .band--nebula .heading-lg,
  .closing .display {
    animation: spectrum 16s ease-in-out infinite alternate;
  }
}

/* --- Section rules and hairlines pick up the accent ---------------------- */
.cap--lit {
  border-top-color: var(--color-iris-dim);
  border-top-color: color-mix(in srgb, var(--accent, var(--color-iris)) 45%, transparent);
}

.cap__index {
  color: var(--color-iris-dim);
  color: color-mix(in srgb, var(--accent, var(--color-iris)) 60%, transparent);
}

/* --- The pipeline reads as a spectrum run ------------------------------- */
/* Steps and arrows alternate as siblings, so a step is always at an odd
   child index --- the cycle counts in sixes to land one colour per step. */
.pipeline__step:nth-child(6n + 1) { color: var(--ramp-mint-hi); }
.pipeline__step:nth-child(6n + 3) { color: var(--ramp-azure-hi); }
.pipeline__step:nth-child(6n + 5) { color: var(--ramp-blush-hi); }

/* --- Closing sketch takes its page's accent ----------------------------- */
.closing__art { color: var(--accent, var(--color-iris)); }

/* ==========================================================================
   Contact page — enquiry form
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--space-80);
  align-items: start;
}

.contact__form .heading-lg { margin-bottom: var(--space-40); }

.form { display: flex; flex-direction: column; gap: var(--space-24); }

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.field { display: flex; flex-direction: column; gap: 10px; }

/* The honeypot must be reachable by bots but never by people */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field__label {
  font-family: var(--font-stamp);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-smoke);
}

.field__label span { color: var(--color-iris); }

.field__input {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-vellum);
  background: var(--color-graphite);
  border: 1px solid var(--color-charcoal);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.3s var(--ease-slow), background-color 0.3s var(--ease-slow);
  -webkit-appearance: none;
  appearance: none;
}

.field__input::placeholder { color: var(--color-smoke); opacity: 0.75; }

.field__input:hover { border-color: var(--color-iris-dim); }

.field__input:focus-visible {
  outline: none;
  border-color: var(--color-iris);
  background: var(--color-card-halo);
}

.field__input--area { resize: vertical; min-height: 160px; }

/* Native arrow is invisible on this ground, so draw one */
select.field__input {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-iris) 50%),
    linear-gradient(135deg, var(--color-iris) 50%, transparent 50%);
  background-position: right 20px top 22px, right 14px top 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

select.field__input option { background: var(--color-obsidian); color: var(--color-vellum); }

/* Only after a submit attempt — never while the form is still being filled */
.form--checked .field__input:invalid { border-color: var(--ramp-blush-hi); }

/* reCAPTCHA sits on the page ground, so let it breathe and let it shrink
   on small screens rather than pushing the form sideways. */
.field--captcha { margin-top: var(--space-8); }

@media (max-width: 380px) {
  .field--captcha .g-recaptcha {
    transform: scale(0.86);
    transform-origin: 0 0;
  }
}

.form__foot {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.form__note { max-width: 34ch; }

.form__status { font-size: var(--text-body-sm); line-height: 1.5; min-height: 1.5em; }
.form__status--ok   { color: var(--ramp-mint-hi); }
.form__status--bad  { color: var(--ramp-blush-hi); }
.form__status--busy { color: var(--color-ash); }

.contact__side { display: flex; flex-direction: column; gap: var(--space-24); }

.contact__card {
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-media);
  background: var(--color-graphite);
  padding: var(--space-32);
}

.contact__email { font-size: var(--text-body); line-height: 1.4; word-break: break-word; }
.contact__email a { color: var(--color-iris); }
.contact__email a:hover { text-decoration: underline; }

.contact__note {
  margin-top: 10px;
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--color-ash);
}

.contact__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-ash);
}

.contact__list a { color: var(--color-ash); }
.contact__list a:hover { color: var(--color-iris); }

@media (max-width: 1080px) {
  .contact { grid-template-columns: 1fr; gap: var(--space-56); }
}

@media (max-width: 600px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--color-charcoal);
  background: var(--color-void);
  padding-block: var(--space-80) var(--space-40);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-48) var(--space-24);
}

.footer__title {
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-smoke);
  margin-bottom: var(--space-24);
}

.footer__list { display: flex; flex-direction: column; gap: 11px; }
.footer__list a { font-size: var(--text-body-sm); color: var(--color-ash); transition: color 0.3s var(--ease-slow); }
.footer__list a:hover { color: var(--color-iris); }

.footer__brand .brand { margin-right: 0; }
.footer__blurb { margin-top: var(--space-24); max-width: 34ch; }

.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-24);
  flex-wrap: wrap;
  margin-top: var(--space-80);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-charcoal);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease-slow), transform 1s var(--ease-slow);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Life — the motion layer
   ========================================================================== */

/* --- Gradient headline: the accent line carries the full spectrum ------- */
.line--iris > span {
  background: linear-gradient(
    100deg,
    var(--ramp-mint-hi) 0%,
    var(--color-iris) 32%,
    var(--ramp-blush-hi) 62%,
    var(--color-iris) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Rises with the other line, then drifts through the spectrum forever */
.hero__title .line--iris > span {
  animation: rise 1.1s var(--ease-slow) 0.26s forwards,
             spectrum 14s ease-in-out 1.4s infinite alternate;
}

@keyframes spectrum {
  from { background-position:   0% 50%; }
  to   { background-position: 100% 50%; }
}

/* --- Hero entrance: lines rise from behind a mask ----------------------- */
.hero__title .line {
  display: block;
  overflow: hidden;
}

.hero__title .line > span,
.hero .eyebrow > span {
  display: block;
  transform: translateY(105%);
  animation: rise 1.1s var(--ease-slow) forwards;
}

.hero__title .line:nth-child(1) > span { animation-delay: 0.12s; }
.hero__title .line:nth-child(2) > span { animation-delay: 0.26s; }

@keyframes rise {
  to { transform: none; }
}

.hero__lede,
.hero .actions,
.hero__aside,
.hero__meta {
  opacity: 0;
  animation: settle 1.1s var(--ease-slow) forwards;
}

.hero__lede   { animation-delay: 0.42s; }
.hero .actions{ animation-delay: 0.54s; }
.hero__aside  { animation-delay: 0.62s; }
.hero__meta   { animation-delay: 0.72s; }

@keyframes settle {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Filmic grain: keeps flat gradients from banding, adds texture ------ */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(4) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 1%); }
}

/* --- Scroll progress: a spectral hairline across the top ---------------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(
    90deg,
    var(--ramp-azure-mid) 0%,
    var(--ramp-mint-hi) 30%,
    var(--color-iris) 62%,
    var(--ramp-blush-hi) 100%
  );
}

/* --- Media frames wake on hover ----------------------------------------- */
.frame {
  transition: border-color 0.6s var(--ease-slow),
              box-shadow 0.6s var(--ease-slow),
              transform 0.6s var(--ease-slow);
}

.frame:hover {
  border-color: var(--color-iris-core);
  box-shadow: inset 0 0 80px rgba(146, 80, 242, 0.14),
              0 28px 60px rgba(0, 0, 0, 0.6),
              0 0 40px rgba(146, 80, 242, 0.12);
}

.work__item:hover .frame { transform: translateY(-4px); }

/* Placeholder sheen sweeps across on hover */
.frame__ph {
  transition: opacity 0.6s var(--ease-slow);
}

.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 38%,
    rgba(169, 140, 255, 0.10) 50%,
    transparent 62%
  );
  background-size: 280% 100%;
  background-position: 130% 0;
  transition: background-position 1.1s var(--ease-slow);
}

.frame:hover::after { background-position: -30% 0; }

/* --- Pills get a spectral sweep ----------------------------------------- */
.pill--solid:hover {
  background: linear-gradient(100deg, var(--ramp-mint-hi), var(--color-iris) 55%, var(--ramp-blush-hi));
  border-color: transparent;
  color: var(--color-void);
}

.pill--ghost {
  position: relative;
  overflow: hidden;
}

.pill--ghost:hover {
  background: var(--color-iris-wash);
  border-color: var(--color-iris);
  color: var(--color-vellum);
}

/* --- Nav links draw a spectral underline -------------------------------- */
.nav__link {
  position: relative;
  border-bottom: 0;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, var(--ramp-mint-hi), var(--color-iris), var(--ramp-blush-hi));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease-slow);
}

.nav__link:hover::after { transform: scaleX(1); }

/* Current-page indicator — solid colour plus a permanent underline so it
   reads at a glance, not just on hover. */
.nav__link[aria-current="page"] { color: var(--color-vellum); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* The Services trigger has no href of its own, so it lights up whenever the
   page you're on is one of its children — set via a data attribute since
   :has() support can't be assumed for every viewer's browser. */
.nav__item--dropdown[data-current="true"] .nav__link--trigger { color: var(--color-vellum); }

/* --- Service index numerals glow as their section arrives --------------- */
.service__index {
  transition: color 0.8s var(--ease-slow);
}

.service.is-active .service__index { color: var(--color-iris); }

/* --- Capability lists stagger in ---------------------------------------- */
.service__list li,
.viz__list li,
.tech li,
.combos li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease-slow), transform 0.6s var(--ease-slow);
}

.is-in .service__list li,
.is-in .viz__list li,
.reveal.is-in.tech li,
.reveal.is-in.combos li,
.tech.is-in li,
.combos.is-in li { opacity: 1; transform: none; }

/* --- Pipeline arrows pulse along the run -------------------------------- */
.pipeline__arrow {
  animation: pulse 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.13s);
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .hero__grid       { grid-template-columns: 1fr; gap: var(--space-40); }
  .hero__aside      { max-width: var(--measure); }
  .statement__grid,
  .parent__grid     { grid-template-columns: 1fr; gap: var(--space-40); }
  .service__grid    { grid-template-columns: 1fr; gap: var(--space-40); }
  .service--flip .service__media { order: 0; }
  .service__media   { position: static; }
  .viz__child       { grid-template-columns: 1fr; gap: var(--space-24); }
  .steps            { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech             { columns: 3; }
  .footer__grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The rail lives in the right margin. Below this it would sit on top of the
   1344px shell, so it goes away entirely. */
@media (max-width: 1699px) {
  .index-rail { display: none; }
}

@media (max-width: 860px) {
  :root { --gutter: 22px; --section-gap: 56px; }

  .band       { padding-block: var(--space-80); }
  .band--tall { padding-block: var(--space-96); }
  .service    { padding-block: var(--space-80); }

  .nav__links { display: none; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-stamp);
    font-size: 11.6px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ash);
  }
  .nav__cta { display: none; }

  .nav__links.is-open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
    padding: var(--space-24) var(--gutter) var(--space-32);
    background: var(--color-void);
    border-bottom: 1px solid var(--color-charcoal);
  }

  /* No hover on touch — the mega menu sits inline under its trigger */
  .nav__item--dropdown { width: 100%; }
  .nav__item--dropdown::after { display: none; }  /* hover bridge — desktop only */

  .nav__link--trigger {
    width: 100%;
    justify-content: space-between;
    font-size: var(--text-body-sm);
  }

  .nav__mega {
    position: static;
    display: none;
    grid-template-columns: 1fr;
    width: 100%;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    border-left: 1px solid var(--color-charcoal);
    border-radius: 0;
    padding: var(--space-16) 0 var(--space-8) var(--space-16);
    margin-top: 10px;
    gap: var(--space-24);
    background: transparent;
  }

  /* Must match the desktop hover rule's specificity (three classes) or its
     translateX(-50%) leaks through and shifts the panel off-screen. */
  .nav__item--dropdown.is-open .nav__mega {
    display: grid;
    transform: none;
  }

  .nav__caret { transition: transform 0.3s var(--ease-slow); }
  .nav__item--dropdown.is-open .nav__caret { transform: rotate(-135deg) translateY(1px); }

  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .combos     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viz__list  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .hero        { min-height: auto; padding-block: var(--space-80) var(--space-56); }
  .work__grid  { grid-template-columns: 1fr; }
  .cols        { grid-template-columns: 1fr; }
  .steps       { grid-template-columns: 1fr; }
  .combos      { grid-template-columns: 1fr; }
  .tech        { columns: 2; }
  .viz__list   { grid-template-columns: 1fr; }
  .service__list { grid-template-columns: 1fr; }
  .footer__grid  { grid-template-columns: 1fr; }
  .actions .pill { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .grain  { display: none; }

  .hero__title .line > span,
  .hero .eyebrow > span { transform: none; }

  .hero__lede, .hero .actions, .hero__aside, .hero__meta { opacity: 1; }

  .service__list li, .viz__list li, .tech li, .combos li { opacity: 1; transform: none; }

  .line--iris > span,
  .hero__title .line--iris > span { animation: none; background-position: 20% 50%; }
}

/* ==========================================================================
   Sub-page components — hero variant, capability rows
   ========================================================================== */

.hero--page {
  min-height: auto;
  align-items: flex-start;
  padding-block: var(--space-80) var(--space-96);
}

.hero--page .hero__grid { align-items: start; }
.hero--page .hero__aside { padding-top: 8px; }

.nav__link--current { color: var(--color-vellum); }
.nav__link--current::after { transform: scaleX(1); }

/* --- Capability rows ---------------------------------------------------
   Fourteen run consecutively, so these are deliberately denser than the
   homepage service block: no per-item media, no sticky column. Showcase
   frames are injected between groups instead.
   -------------------------------------------------------------------- */

.caps__head { margin-bottom: var(--space-80); }

/* A long capability list needs something to look at before it starts, so
   the section head can carry a picture beside its copy. */
.caps__head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: var(--space-56);
  align-items: center;
}

.caps__head--split .lede { max-width: none; }

.caps__head-media { width: 100%; }

@media (max-width: 1080px) {
  .caps__head--split { grid-template-columns: 1fr; gap: var(--space-32); }
  .caps__head-media { max-width: 520px; }
}

.caps__head .lede { max-width: 640px; }

.caps { display: flex; flex-direction: column; gap: var(--space-56); }

.cap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  gap: var(--space-56);
  padding-top: var(--space-48);
  border-top: 1px solid var(--color-charcoal);
  align-items: start;
}

.cap__index {
  display: block;
  font-family: var(--font-stamp);
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  color: var(--color-iris-dim);
  margin-bottom: var(--space-16);
  transition: color 0.6s var(--ease-slow);
}

.cap:hover .cap__index { color: var(--color-iris); }

.cap__title { color: var(--color-vellum); }

.cap__lede {
  margin-top: 14px;
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--color-iris);
  max-width: 30ch;
}

.cap__body { display: flex; flex-direction: column; gap: var(--space-16); }

.cap__body p {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-ash);
  max-width: none;
}

.cap__list-label { margin-top: var(--space-8); }

.cap__list {
  columns: 3;
  column-gap: var(--space-24);
}

.cap__list li + li { margin-top: 9px; }

.cap__list li {
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-ash);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease-slow), transform 0.6s var(--ease-slow);
}

.cap.is-in .cap__list li { opacity: 1; transform: none; }

.cap__cta { margin-top: var(--space-8); }

/* The clip sits under the title and lede, filling the head column, so the
   row reads: number, title, what it is, and then what it looks like. */
.cap__media {
  width: 100%;
  margin-top: var(--space-24);
}

@media (max-width: 1080px) {
  /* Head and body stack here, so stop the clip running the full width */
  .cap__media { max-width: 460px; }
}

/* Word lists flow down-then-across and let the browser balance the columns,
   so the last row is never a lone orphan. Items must stay whole. */
.cap__list li,
.tech li,
.combos li,
.purpose__list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Alternating bands: odd rows (01, 03, 05...) sit on a raised surface,
   even rows stay on the page ground, so the numbered list reads as a
   rhythm rather than one long undifferentiated column. The panel bleeds
   past the text on both sides but is clipped by .shell on narrow screens. */
.cap--lit {
  background: linear-gradient(180deg, var(--color-graphite) 0%, rgba(16, 14, 28, 0.55) 100%);
  border-radius: var(--radius-media);
  border-top-color: var(--color-iris-dim);
  padding: var(--space-48) var(--space-32) var(--space-40);
  margin-inline: calc(var(--space-32) * -1);
}

.cap--deep {
  padding-inline: var(--space-32);
  margin-inline: calc(var(--space-32) * -1);
}

@media (max-width: 1080px) {
  .cap--lit,
  .cap--deep { padding-inline: var(--space-24); margin-inline: calc(var(--space-24) * -1); }
}

@media (max-width: 1080px) {
  .cap       { grid-template-columns: 1fr; gap: var(--space-24); }
  .cap__lede { max-width: none; }
  .cap__list { columns: 2; }
}

@media (max-width: 600px) {
  .cap__list { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cap__list li { opacity: 1; transform: none; }
}

/* --- Media bands on sub-pages ------------------------------------------ */

.frame--vertical { aspect-ratio: 9 / 16; }

/* Tracks sized so the three different aspect ratios render at equal height */
.media-grid {
  display: grid;
  grid-template-columns: 1.778fr 0.5625fr 1fr;
  gap: var(--space-24);
  margin-top: var(--space-56);
  align-items: start;
}

.media-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-grid--two > .frame { aspect-ratio: 16 / 9; }
.media-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-grid--three > .frame { aspect-ratio: 16 / 9; }

.media-grid__note { margin-top: var(--space-24); }

@media (max-width: 860px) {
  .media-grid { grid-template-columns: 1fr; }
}

/* --- Overview / purpose band -------------------------------------------
   Both columns carry weight: the left holds heading AND image so it is
   never a tall empty space beside a dense right column.
   -------------------------------------------------------------------- */

.purpose__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-80);
  align-items: stretch;      /* both columns end level */
}

/* The frame absorbs the leftover height rather than forcing a fixed ratio,
   so the image column matches the text column instead of overrunning it. */
.purpose__lead {
  display: flex;
  flex-direction: column;
}

.purpose__media {
  margin-top: var(--space-40);
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 260px;
}

.purpose__media-caption { margin-top: 14px; }

.purpose__body { display: flex; flex-direction: column; gap: var(--space-24); }

.purpose__body p {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-ash);
  max-width: none;
}

/* No border, no big top gap — the label sits directly on its list */
.purpose__list-label {
  margin-top: var(--space-16);
  margin-bottom: calc(var(--space-16) * -1 + 4px);
}

.purpose__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--space-24);
}

.purpose__list li {
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-ash);
  padding-left: 16px;
  position: relative;
}

.purpose__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--color-iris);
}

@media (max-width: 1080px) {
  .purpose__grid  { grid-template-columns: 1fr; gap: var(--space-40); }
  .purpose__media { margin-top: var(--space-32); }
}

@media (max-width: 600px) {
  .purpose__list { grid-template-columns: 1fr; }
}

/* --- Band separation ----------------------------------------------------
   Two adjacent dark bands read as one continuous section. A fading hairline
   marks the seam without becoming a hard rule across the page.
   -------------------------------------------------------------------- */

.band + .band::after,
.band + .service::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-charcoal) 18%,
    rgba(169, 140, 255, 0.24) 50%,
    var(--color-charcoal) 82%,
    transparent 100%
  );
}

/* --- Duo: text left, media filling the column on the right --------------
   Used where the copy would otherwise leave half the band empty and push a
   stretched full-width frame underneath.
   -------------------------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-80);
  align-items: stretch;
}

.duo__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.duo__text p {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-ash);
  max-width: none;
}

.duo__cta { margin-top: auto; padding-top: var(--space-16); }

.duo__media { display: flex; flex-direction: column; }

/* Fills the column height rather than dictating it */
.duo__media .frame {
  flex: 1 1 auto;
  aspect-ratio: auto;
  width: 100%;
  min-height: 300px;
}

.duo__media-caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-24);
  flex-wrap: wrap;
  margin-top: 14px;
}

.duo__list-label { margin-top: var(--space-56); }

@media (max-width: 1080px) {
  .duo { grid-template-columns: 1fr; gap: var(--space-40); }
  .duo__cta { margin-top: 0; }
  .duo__media .frame { min-height: 260px; }
}

/* ==========================================================================
   Process page — a sequence, not a capability list.
   Vertical spine timeline, phase groupings, workflow tracks, review ladder.
   ========================================================================== */

/* --- Hero summary strip ------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-56);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-charcoal);
}

.fact__num {
  display: block;
  font-size: var(--text-heading-sm);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-iris);
  margin-bottom: 10px;
}

.fact__label {
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-smoke);
  line-height: 1.5;
}

/* --- Workflow tracks ---------------------------------------------------- */

.tracks {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  margin-top: var(--space-56);
}

.track {
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-charcoal);
}

.track__title {
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-vellum);
  margin-bottom: var(--space-16);
}

.track__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.track__flow li {
  font-size: var(--text-body-sm);
  color: var(--color-ash);
  display: flex;
  align-items: center;
  gap: 12px;
}

.track__flow li:not(:last-child)::after {
  content: "\2192";
  color: var(--color-iris);
  opacity: 0.7;
}

/* --- Review ladder ------------------------------------------------------ */

.ladder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-40);
  background: var(--color-charcoal);
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-media);
  overflow: hidden;
}

.gate {
  background: var(--color-obsidian);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gate__num {
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--color-iris-dim);
}

.gate__name {
  font-size: var(--text-body);
  letter-spacing: -0.01em;
  color: var(--color-vellum);
}

/* --- Connected stacks --------------------------------------------------- */

.stacks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-56);
}

.stack {
  padding: var(--space-24);
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-media);
  background: linear-gradient(180deg, rgba(146,80,242,0.05) 0%, transparent 60%);
}

.stack__label {
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-iris);
  margin-bottom: var(--space-16);
}

.stack__flow { display: flex; flex-direction: column; gap: 10px; }

.stack__flow li {
  font-size: var(--text-body-sm);
  color: var(--color-ash);
  padding-left: 18px;
  position: relative;
}

.stack__flow li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-iris-dim);
}

.stack__flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.2em;
  bottom: -10px;
  width: 1px;
  background: var(--color-charcoal);
}

/* --- Two-column prose for the closing sections -------------------------- */

.prose-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-80);
  align-items: start;
  margin-top: var(--space-56);
}

.prose-duo__col > p {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-ash);
  margin-bottom: var(--space-16);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  .facts        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage__lists { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .stacks       { grid-template-columns: 1fr; }
  .ladder       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose-duo    { grid-template-columns: 1fr; gap: var(--space-40); }
}

@media (max-width: 700px) {
  .spine::before { left: 17px; }
  .phase, .stage { grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-24); }
  .phase__mark   { width: 35px; height: 35px; font-size: 9px; }
  .stage__num    { width: 35px; height: 26px; font-size: 10.5px; }
  .stage__list,
  .stage__lists--one .stage__list { grid-template-columns: 1fr; }
  .ladder        { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__list li { opacity: 1; transform: none; }
}

/* ==========================================================================
   Process pipeline — phase tabs + stage accordion
   27 stages fully expanded ran ~15,000px. Tabs split them by phase; each
   stage collapses to a single row until opened.
   ========================================================================== */

.pipe { margin-top: var(--space-56); }

/* --- Phase tabs --------------------------------------------------------- */

.pipe__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-charcoal);
}

.pipe__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-charcoal);
  background: transparent;
  color: var(--color-smoke);
  font-size: var(--text-body-sm);
  letter-spacing: 0;
  white-space: nowrap;
  transition: color 0.35s var(--ease-slow),
              border-color 0.35s var(--ease-slow),
              background-color 0.35s var(--ease-slow);
}

.pipe__tab:hover { color: var(--color-vellum); border-color: var(--color-iris-dim); }

.pipe__tab[aria-selected="true"] {
  color: var(--color-vellum);
  border-color: var(--color-iris-core);
  background: var(--color-iris-wash);
}

.pipe__tab-mark {
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--color-iris);
}

.pipe__tab-count {
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--color-smoke);
}

/* --- Panels ------------------------------------------------------------- */

.pipe__panel[hidden] { display: none; }

.pipe__panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-24);
  flex-wrap: wrap;
  padding-block: var(--space-40) var(--space-16);
}

.pipe__panel-title {
  font-size: var(--text-heading-sm);
  letter-spacing: -0.02em;
  color: var(--color-vellum);
}

/* --- Accordion rows ----------------------------------------------------- */

.acc {
  border-top: 1px solid var(--color-charcoal);
  position: relative;
}

.acc:last-child { border-bottom: 1px solid var(--color-charcoal); }

.acc__head {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  gap: var(--space-24);
  align-items: center;
  padding-block: var(--space-24);
  text-align: left;
  transition: opacity 0.3s var(--ease-slow);
}

.acc__head:hover { opacity: 0.82; }

.acc__num {
  font-family: var(--font-stamp);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  color: var(--color-iris-dim);
  transition: color 0.4s var(--ease-slow);
}

.acc.is-open .acc__num { color: var(--color-iris); }

.acc__title {
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-vellum);
  line-height: 1.3;
}

.acc__lede {
  display: block;
  margin-top: 5px;
  font-size: var(--text-body-sm);
  line-height: 1.4;
  color: var(--color-smoke);
  transition: color 0.4s var(--ease-slow);
}

.acc.is-open .acc__lede { color: var(--color-iris); }

/* Plus / minus toggle drawn from two rules */
.acc__icon {
  position: relative;
  width: 15px;
  height: 15px;
  justify-self: end;
}

.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 1px;
  background: var(--color-iris);
  transition: transform 0.4s var(--ease-slow), opacity 0.4s var(--ease-slow);
}

.acc__icon::after { transform: rotate(90deg); }
.acc.is-open .acc__icon::after { transform: rotate(0deg); opacity: 0; }

/* Height animates via grid rows — no max-height guesswork */
.acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-slow);
}

.acc.is-open .acc__body { grid-template-rows: 1fr; }

.acc__body > div { overflow: hidden; }

.acc__inner {
  padding: 0 0 var(--space-40) calc(52px + var(--space-24));
  max-width: 92ch;
}

.acc__inner > p {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-ash);
  margin-bottom: var(--space-16);
}

.acc__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-40);
  margin-top: var(--space-24);
}

.acc__lists--one { grid-template-columns: minmax(0, 1fr); }

.acc__cta { margin-top: var(--space-24); }

/* --- Shared term list (also used by the collaboration band) ------------- */

.term-list-label { margin-bottom: 14px; }

.term-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px var(--space-24);
}

.acc__lists--one .term-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.term-list li {
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-ash);
}

/* --- Progress dots below the tabs --------------------------------------- */

.pipe__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--space-24);
  font-family: var(--font-stamp);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-smoke);
}

.pipe__legend-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-iris-dim), transparent);
}

@media (max-width: 860px) {
  .acc__head   { grid-template-columns: 40px minmax(0, 1fr) 20px; gap: var(--space-16); }
  .acc__inner  { padding-left: calc(40px + var(--space-16)); }
  .acc__lists  { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .term-list,
  .acc__lists--one .term-list { grid-template-columns: 1fr; }
  .pipe__tab   { padding: 10px 16px; font-size: var(--text-caption); }
}

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