/* ============================================================
   LILAC MARKETING — "Your Own AI Digital Asset"

   ARCHITECTURE
   Two structural modes, alternating:
     .scene  — a tall parent holding a position:sticky 100svh stage.
               Scroll becomes time: the stage holds still while its
               content advances.
     .flow   — normal document flow, used for the back half. The
               contrast between the two modes is the pacing.

   TYPE
     Syne  → display, labels, UI.
     Inter → body. Legible at small sizes reversed out of #0f0a14,
             where a Didone's hairlines would break up.

   COLOUR
     --primary (#8a00be) scores 2.4:1 on the dark ground: it drives
     surfaces, glows and borders only, never text. Tinted type uses
     --accent (#eb94cf, 8.9:1).
   ============================================================ */

@font-face {
  font-family: "Syne";
  src:
    url("../assets/fonts/Syne-VariableFont.woff2") format("woff2-variations"),
    url("../assets/fonts/Syne-VariableFont.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src:
    url("../assets/fonts/inter.woff2") format("woff2-variations"),
    url("../assets/fonts/inter.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #8a00be;
  --secondary: #75008c;
  --accent: #eb94cf;
  --rgb-primary: 138 0 190;
  --rgb-accent: 235 148 207;

  --bg: #0f0a14;
  --bg-deep: #0a0614;
  --bg-elev: #160f1d;

  --ink: #faf7fb;
  --ink-soft: #ded3e6;
  --muted: #b8a8c4;
  --dim: #8d7d99;

  --line: rgb(250 247 251 / 0.1);
  --line-soft: rgb(250 247 251 / 0.055);
  --line-lit: rgb(var(--rgb-primary) / 0.45);

  --display: "Syne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --e-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --e-glide: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 260ms;
  --t-base: 560ms;
  --t-cine: 1000ms;

  --pad: clamp(20px, 5vw, 90px);
  --max: 1560px;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  overflow-x: hidden;
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
video {
  max-width: 100%;
  display: block;
}
::selection {
  background: var(--primary);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.noise {
  position: fixed;
  inset: -50%;
  z-index: 90;
  opacity: 0.028;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: noise 0.22s steps(2) infinite;
}
@keyframes noise {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(2%, -1%);
  }
  50% {
    transform: translate(-1%, 2%);
  }
  75% {
    transform: translate(1%, 1%);
  }
  100% {
    transform: translate(-2%, -2%);
  }
}
.cursor-glow {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(var(--rgb-primary) / 0.14),
    transparent 66%
  );
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

/* ============================================================
   STRUCTURE
   ============================================================ */
.scene {
  position: relative;
  overflow: clip;
}
.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
}
.flow {
  position: relative;
  padding: clamp(110px, 14vh, 190px) var(--pad);
}
.inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

/* ---------- Type primitives ---------- */
/* Inline flow, not flex: a flex row can only break BETWEEN items, so a
   long segment wraps inside itself while the dot separators keep their
   own slots. Inline flow breaks at any word boundary. Spacing comes
   from margins on the separators below. */
.kicker {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.7;
  /* Long tracked uppercase strings offer no soft-wrap opportunity of
     their own; without this an over-long segment forces a horizontal
     scrollbar. */
  overflow-wrap: anywhere;
}
/* nowrap binds each separator to the word before it, so a dot can never
   begin a line on its own. */
.kicker i {
  font-style: normal;
  color: var(--dim);
  font-size: 9px;
  white-space: nowrap;
  margin-inline-end: 14px;
}
/* The leading chapter number opens the line rather than following a
   word, so it takes the trailing gap only. */
.kicker i:first-child {
  margin-inline-start: 0;
}

/* The scale is restrained on purpose: at these sizes a headline lands
   on 2-3 lines and the space around it carries the weight. Larger type
   pushes headings to 5+ lines inside their column, which reads cramped.
   `text-wrap: balance` evens line lengths so no line holds an orphan. */
.h-display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  font-size: clamp(34px, 4.6vw, 72px);
  text-wrap: balance;
}
.h-scene {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
  font-size: clamp(29px, 3.5vw, 54px);
  text-wrap: balance;
}
.h-sub {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0;
  font-size: clamp(21px, 1.9vw, 29px);
  text-wrap: balance;
}
.accent {
  color: var(--accent);
}

.lede {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
  color: var(--muted);
  max-width: 62ch;
  margin: 0;
}
.body-sm {
  font-size: 14px;
  line-height: 1.72;
  color: var(--dim);
  margin: 0;
}
.label {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Line-reveal masks: the mask clips, the line inside rises. The padding
   plus matching negative margin gives descenders room without adding
   height. */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.split-line {
  display: block;
  will-change: transform, opacity;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 56px;
  padding: 0 26px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  border: 1px solid var(--line-lit);
  transition:
    background var(--t-base) var(--e-glide),
    border-color var(--t-base),
    transform var(--t-base) var(--e-lux),
    box-shadow var(--t-base);
}
.btn i {
  font-style: normal;
  font-size: 15px;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--secondary);
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 20px 56px rgb(var(--rgb-primary) / 0.5);
}
.btn-ghost {
  color: var(--ink-soft);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.tlink i {
  font-style: normal;
  transition: transform var(--t-base) var(--e-lux);
}
.tlink:hover i {
  transform: translateX(8px);
}

/* ============================================================
   CHROME
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--pad);
}
/* Solid blurred backdrop, not a fading gradient — a gradient leaves the
   lower half of the bar transparent and page content scrolls through. */
.site-header:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(10 6 20 / 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
/* Baseline-aligned so the endorsement line sits on the name's footing
   rather than against its cap height. flex-wrap is deliberately absent:
   both halves are nowrap and clamp down far enough that the pair fits a
   320px header beside the menu toggle. */
.brand {
  display: flex;
  align-items: baseline;
  gap: clamp(5px, 1.4vw, 9px);
  /* min-height: 44px; */
}
/* Roughly triple the endorsement line, so the hierarchy holds at any
   width. */
.brand-name {
  font-family: var(--display);
  font-size: clamp(17px, 2.4vw, 23px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}
/* Small enough to read as an endorsement rather than compete with the
   wordmark. */
.brand-sub {
  font-family: var(--display);
  font-size: clamp(7.5px, 1vw, 9px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  line-height: 1;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 16px);
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.site-nav a {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  transition: color var(--t-fast);
}
.site-nav a:hover {
  color: var(--ink);
}
.site-nav .nav-cta {
  color: var(--ink);
  border: 1px solid var(--line-lit);
  padding: 0 20px;
  margin-left: 8px;
  transition:
    background var(--t-base),
    border-color var(--t-base);
}
.site-nav .nav-cta:hover {
  background: rgb(var(--rgb-primary) / 0.26);
  border-color: var(--primary);
}
.header-loc {
  font-family: var(--display);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.5em;
  color: var(--dim);
}

/* ---- Language switcher -------------------------------------------
   Shows only the language being switched TO, labelled in that
   language's own script so it stays legible to someone who cannot read
   the page they are on. Remains in the header at every width rather
   than collapsing into the menu, at a 44px tap target on touch. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-soft);
  transition:
    color var(--t-base),
    border-color var(--t-base),
    background-color var(--t-base);
}
.lang-switch:hover,
.lang-switch:focus-visible {
  color: var(--ink);
  border-color: var(--line-lit);
  background: rgb(var(--rgb-primary) / 0.1);
}
/* Placeholder state for pages with no translated build yet: holds the
   header layout so enabling the link shifts nothing, while staying
   inert so it cannot reach a 404. */
.lang-switch.is-soon {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  height: 1px;
  width: 26px;
  background: var(--ink);
  transition: transform var(--t-fast) var(--e-glide);
}
.menu-toggle.is-open span:first-child {
  transform: translateY(4px) rotate(45deg);
}
.menu-toggle.is-open span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: visibility 0s linear 0.9s;
}
.mobile-menu.is-open {
  visibility: visible;
  transition-delay: 0s;
}
.mobile-menu a {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 6vw, 38px);
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  min-height: 56px;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 95;
  background: rgb(255 255 255 / 0.05);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 20px rgb(var(--rgb-primary) / 0.7);
}
.chapter {
  position: fixed;
  right: clamp(16px, 2.6vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--dim);
  pointer-events: none;
  font-variant-numeric: lining-nums tabular-nums;
}
.chapter .now {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
.chapter .rule {
  width: 1px;
  height: 64px;
  background: linear-gradient(var(--primary), transparent);
}

/* ---------- Sticky action bar ----------
   z-index 65 sits above page content but under the mobile menu (70),
   so opening the menu covers it. Visible from first paint over every
   section — these are contact routes and are never gated on scroll.

   A flex row with logical padding, so dir="rtl" mirrors it with no
   override in rtl.css. */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  display: flex;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line-lit);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.action-btn {
  flex: 1 1 0;
  /* min-width:0 lets a long label ellipsis rather than forcing the bar
     past the viewport width. */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 56px floor: tap target. */
  min-height: 56px;
  padding: 12px clamp(10px, 2vw, 24px);
  font-family: var(--display);
  font-size: clamp(11px, 1.05vw, 13.5px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  transition:
    background var(--t-base),
    color var(--t-base);
}
.action-btn span {
  /* Only the label truncates; the icon never shrinks. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action-btn svg {
  width: 21px;
  height: 21px;
  flex: none;
  fill: currentColor;
}
.action-btn i {
  font-style: normal;
  flex: none;
}
/* Official WhatsApp green — brand recognition carries the affordance. */
.action-wa {
  background: #25d366;
  color: #06210f;
}
.action-wa:hover,
.action-wa:focus-visible {
  background: #1fb855;
  color: #fff;
}
.action-book {
  background: var(--primary);
  color: var(--ink);
}
.action-book:hover,
.action-book:focus-visible {
  background: var(--accent);
  color: #12060f;
}
.action-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) {
  .action-btn {
    transition: none;
  }
}
@media (max-width: 600px) {
  .action-btn {
    min-height: 52px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    gap: 7px;
  }
  .action-btn svg {
    width: 19px;
    height: 19px;
  }
}

/* ============================================================
   I. HERO — full-bleed portrait, type breaking the grid
   ============================================================ */
/* Scene height is the sticky stage (100svh) plus exactly the scroll the
   choreography consumes. Surplus reads as dead space at the end of the
   section. */
/* .sc-hero {
  height: 132svh;
} */
.hero-stage {
  background: var(--bg-deep);
}
/* The portrait is confined to the right half: at full viewport width
   object-fit zooms hard into the face. Constraining the frame keeps the
   subject at human scale and leaves the left as ground for the
   headline. */
.hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(62%, 900px);
  z-index: 0;
  overflow: hidden;
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(0.62) contrast(1.06);
  will-change: transform;
}
/* Three-layer grade: a left falloff dissolving the photo's edge into
   the page ground, a violet wash, and a base scrim so type always lands
   on something dark enough to read. */
.hero-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      var(--bg-deep) 0%,
      rgb(10 6 20 / 0.92) 16%,
      rgb(10 6 20 / 0.35) 46%,
      rgb(10 6 20 / 0.2) 100%
    ),
    radial-gradient(
      ellipse at 55% 40%,
      rgb(var(--rgb-primary) / 0.3),
      transparent 62%
    ),
    linear-gradient(0deg, var(--bg-deep) 2%, transparent 32%);
}
.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgb(var(--rgb-primary) / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--rgb-primary) / 0.07) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at 30% 50%, #000, transparent 72%);
}
/* Centred in the stage, padded clear of the fixed header above and the
   scroll cue below. */
.hero-content {
  position: relative;
  z-index: 3;
  align-self: center;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(96px, 12vh, 130px) var(--pad) clamp(80px, 11vh, 110px);
}
/* On a short viewport the stacked tail outgrows the stage; a smaller
   display size keeps the block inside 100svh. */
@media (max-height: 760px) and (min-width: 601px) {
  .hero-title {
    font-size: clamp(34px, 4.6vw, 62px);
  }
  .hero-content {
    padding-top: clamp(88px, 11vh, 104px);
    padding-bottom: clamp(64px, 8vh, 80px);
  }
}
.hero-kicker {
  margin-bottom: clamp(16px, 2.4vh, 30px);
}
.hero-title {
  font-size: clamp(40px, 6.2vw, 94px);
}
.hero-title .accent {
  display: block;
}
/* One full-width row per element. Sharing a track between the lede and
   the CTA pair compresses the buttons until their labels wrap
   mid-phrase; the lede is capped by measure instead. */
.hero-tail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  margin-top: clamp(24px, 3.4vh, 44px);
}
.hero-tail .lede {
  max-width: min(52ch, 100%);
}
/* auto-fit keeps the buttons side by side while they fit and stacks
   them the moment they don't, so labels never wrap. */
.hero-cta {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(276px, 100%), max-content)
  );
  gap: 12px;
  margin-top: clamp(20px, 2.6vh, 28px);
}
.hero-cta .btn {
  white-space: nowrap;
}
/* The auto-fit track resolves to max-content and `nowrap` stops it
   shrinking, fixing the buttons at 346px — wider than the viewport
   below ~380px. Here the track becomes 1fr and the type steps down far
   enough for the longest label to fit without breaking mid-phrase. */
@media (max-width: 380px) {
  .hero-cta {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-cta .btn {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}
.hero-micro {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 18px 0 0;
}
.hero-foot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 26px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--dim);
}
.scroll-cue span {
  width: 38px;
  height: 1px;
  background: var(--primary);
  transform-origin: left;
}

/* Below ~560px of height nothing seats the headline, lede, buttons and
   disclaimer in one screen, so the hero scrolls rather than overlapping
   the cue.

   Must stay below the base .hero-title and .hero-foot rules: it
   overrides both at equal specificity, so source order decides. */
@media (max-height: 560px) and (min-width: 601px) {
  .sc-hero,
  .sc-hero .stage {
    height: auto;
    min-height: 100svh;
  }
  .sc-hero .stage {
    position: relative;
  }
  .hero-title {
    font-size: clamp(28px, 3.6vw, 40px);
  }
  .hero-content {
    padding-top: 80px;
    padding-bottom: 40px;
  }
  .hero-tail {
    margin-top: 16px;
  }
  .hero-cta {
    margin-top: 14px;
  }
  /* In flow, so the stage accounts for its height instead of letting it
     overlap the tail. */
  .hero-foot {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 24px;
    padding: 0 var(--pad);
  }
}

/* ---------- Sector band ---------- */
.sectors {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-elev);
  padding: 26px var(--pad);
}
.sectors .inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(6, 1fr);
  align-items: center;
  gap: 24px;
}
.sectors p {
  margin: 0;
  font-family: var(--display);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.7;
  color: var(--dim);
  text-transform: uppercase;
}
.sector {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
}

/* ============================================================
   II. PROBLEM — horizontal track; panels move sideways
   ============================================================ */
/* ScrollTrigger pins this section and creates its own spacer, so the
   section is exactly one viewport tall and the scroll distance lives in
   the trigger's `end`. Adding height here, or making .stage sticky,
   duplicates the pin. */
.sc-problem {
  height: 100svh;
  background: var(--bg-elev);
}
.sc-problem .stage {
  position: relative;
}
/* Two rows: the head takes the height it needs, the track gets what is
   left and centres inside it. The grid does the arithmetic, so a
   headline that wraps to a different number of lines can neither
   collide with the track nor leave a gulf. */
.problem-stage {
  grid-template-rows: auto 1fr;
  align-content: stretch;
  padding: clamp(100px, 13vh, 150px) 0 clamp(40px, 6vh, 70px);
}
.problem-head {
  z-index: 3;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  pointer-events: none;
}
.problem-head .h-scene {
  margin-top: 20px;
  font-size: clamp(30px, 3.9vw, 58px);
  /* Measure cap. text-wrap:balance evens line lengths, so at 1560px a
     balanced line runs flush to the right gutter while the first line
     does not, reading as uneven padding. Breaking earlier keeps both
     sides visibly inset. */
  max-width: 44ch;
}
/* min-height:0 overrides the implicit auto minimum on this flex
   container; without it the row stays at content height and the track
   overhangs the bottom of the stage. */
.htrack {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  padding: clamp(30px, 5vh, 64px) var(--pad) 0;
  min-height: 0;
  will-change: transform;
}
.loss {
  flex: 0 0 clamp(260px, 25vw, 380px);
  /* Fills the track row rather than asserting its own height, so cards
     can't overflow the stage on a short viewport; the cap stops them
     stretching on a tall one. */
  align-self: stretch;
  max-height: clamp(300px, 46vh, 470px);
  margin: auto 0;
  border: 1px solid var(--line);
  background: linear-gradient(
    155deg,
    rgb(var(--rgb-primary) / 0.1),
    transparent 70%
  );
  padding: 30px;
  /* Explicit rows: number top, icon middle, copy anchored bottom.
     space-between would float the icon as the card height changes. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--t-base),
    background var(--t-base);
}
.loss:hover {
  border-color: var(--line-lit);
}
.loss-icon {
  width: clamp(38px, 3.4vw, 50px);
  height: auto;
  color: var(--accent);
  opacity: 0.75;
  align-self: center;
  justify-self: start;
  margin: 18px 0;
  transition:
    opacity var(--t-cine) var(--e-lux),
    transform var(--t-cine) var(--e-lux);
}
.loss:hover .loss-icon {
  opacity: 1;
  transform: translateY(-3px);
}
.loss-n {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.loss h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.loss p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--dim);
}
.loss-kicker {
  flex: 0 0 clamp(300px, 30vw, 460px);
  padding: 0 clamp(10px, 2vw, 30px);
}
.loss-kicker p {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

/* ============================================================
   III. SHIFT — violet horizon rises through the scene
   ============================================================ */
/* Pinned by ScrollTrigger, so the section is one viewport and the hold
   distance lives in the trigger's `end`. */
.sc-shift {
  height: 100svh;
}
.sc-shift .stage {
  position: relative;
}
.shift-stage {
  background: var(--bg);
  overflow: hidden;
}
/* The iris disc sits behind the copy (z-index 1 against .shift-inner's
   2) and reads as atmosphere: no hard rim, and it fades out at its own
   edge. Sized in px, not %, so JS can scale it by an absolute multiple
   of a known base — offsetWidth is unscaled, so the scale factor is
   halfDiagonal / (base / 2). */
.iris {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 40%,
    rgb(var(--rgb-primary) / 0.34),
    rgb(var(--rgb-primary) / 0.16) 52%,
    rgb(var(--rgb-primary) / 0.05) 78%,
    transparent 100%
  );
  pointer-events: none;
  will-change: transform;
}
.shift-halo {
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: min(150vw, 1500px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;

  /* background:
    radial-gradient(
      circle at 50% 0%,
      rgb(var(--rgb-primary) / 0.26),
      transparent 60%
    ),
    radial-gradient(
      circle,
      transparent 68%,
      rgb(var(--rgb-primary) / 0.16) 76%,
      transparent 88%
    ); */
  will-change: transform;
}
/* Sits above the flooding iris disc. */
.shift-inner {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.shift-top {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 90px);
  align-items: end;
}
.mech {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 72px);
  margin-top: clamp(50px, 9vh, 110px);
}
.mech-item {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.mech-n {
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
  display: block;
  line-height: 1;
}
.mech-item h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 27px);
  letter-spacing: -0.02em;
  margin: 18px 0 10px;
}
.mech-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--dim);
  max-width: 32ch;
}

/* ============================================================
   IV. PRODUCTS — two full-height panels
   ============================================================ */
.sc-products {
  padding: clamp(110px, 14vh, 190px) 0 0;
}
.products-head {
  padding: 0 var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}
.products-head .h-scene {
  margin-top: 22px;
}
.products-lede {
  margin-top: 26px;
  max-width: 56ch;
}
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: clamp(50px, 8vh, 96px);
  background: var(--line-soft);
}
.panel {
  position: relative;
  min-height: clamp(560px, 82vh, 860px);
  overflow: hidden;
  isolation: isolate;
}
.panel-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.05);
  transition: transform 1.4s var(--e-lux);
  will-change: transform;
}
.panel:hover .panel-media img {
  transform: scale(1.06);
}
.panel-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    var(--bg-deep) 5%,
    rgb(10 6 20 / 0.82) 42%,
    rgb(10 6 20 / 0.18) 100%
  );
}
.panel-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(26px, 3vw, 52px);
  gap: 22px;
}
.panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 46ch;
}
.panel li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-soft);
}
.panel li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--accent);
  border-radius: 50%;
}
.panel:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color var(--t-cine);
}
.panel:hover:after {
  border-color: var(--line-lit);
}

/* The comparison is the decision-making content of this section, not
   a footnote: it gets its own titled block, real scale and a lit
   header row rather than being tacked under the panels. */
.compare-wrap {
  padding: clamp(70px, 10vh, 120px) var(--pad) 0;
  max-width: var(--max);
  margin: 0 auto;
}
.compare-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.025em;
  margin: 18px 0 clamp(26px, 4vh, 44px);
}
.compare {
  border: 1px solid var(--line);
  overflow-x: auto;
  background: rgb(var(--rgb-primary) / 0.05);
}
.compare-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  border-bottom: 1px solid var(--line-soft);
  min-width: 720px;
  transition: background var(--t-base);
}
.compare-row:last-child {
  border-bottom: 0;
}
.compare-row:not(.is-head):hover {
  background: rgb(var(--rgb-primary) / 0.1);
}
.compare-row > * {
  padding: clamp(18px, 2.2vh, 26px) clamp(20px, 2.6vw, 42px);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 0;
}
.compare-row dt {
  font-family: var(--display);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--line-soft);
}
.compare-row dd {
  color: var(--ink-soft);
  border-right: 1px solid var(--line-soft);
}
.compare-row dd:last-child {
  border-right: 0;
}
.compare-row.is-head {
  background: rgb(var(--rgb-primary) / 0.18);
  border-bottom-color: var(--line-lit);
}
.compare-row.is-head dd {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.18em;
}

/* ============================================================
   V. PROOF — reels at scale, staggered depth
   ============================================================ */
.sc-proof {
  background: var(--bg-elev);
}
.proof-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}
.proof-head .lede {
  max-width: 64ch;
}
.proof-claims {
  display: grid;
  gap: 26px;
  margin-top: clamp(46px, 7vh, 86px);
  grid-template-columns: repeat(3, 1fr);
}
.claim {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.claim .label {
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}
.claim h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 25px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.claim p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--dim);
}

/* ---------- Cinematic reel showcase ----------
   The track runs the full viewport width; the active reel scales
   forward while its neighbours recede in scale and brightness. Depth
   uses transform + filter only, so the whole thing composites on the
   GPU. */
.showcase {
  margin-top: clamp(56px, 9vh, 110px);
}
.showcase-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto clamp(26px, 4vh, 44px);
  padding: 0 var(--pad);
}
.showcase-head .label {
  color: var(--accent);
  margin: 0;
}
.showcase-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sc-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-lit);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 17px;
  transition:
    background var(--t-base),
    border-color var(--t-base),
    transform var(--t-base) var(--e-lux);
}
.sc-btn i {
  font-style: normal;
}
.sc-btn:hover {
  background: rgb(var(--rgb-primary) / 0.3);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.sc-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  transform: none;
  background: transparent;
}
.sc-count {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--dim);
  font-variant-numeric: lining-nums tabular-nums;
}
.sc-count b {
  color: var(--accent);
  font-weight: 600;
}

/* Full viewport width, so the rail reaches both edges. */
.stagewrap {
  position: relative;
  padding: 10px 0 clamp(20px, 3vh, 34px);
}

/* ---- Slick structural CSS (layout mechanics only) ----
   slick-theme.css is deliberately not loaded: it brings its own arrows,
   dots and font icons. Only the mechanics Slick requires are reproduced
   here — do not substitute the theme stylesheet. */
.reeltrack.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y; /* page keeps the vertical scroll */
  -webkit-user-select: none;
  user-select: none;
}
.reeltrack .slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.reeltrack .slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.reeltrack .slick-track:before,
.reeltrack .slick-track:after {
  display: table;
  content: "";
}
.reeltrack .slick-track:after {
  clear: both;
}
.reeltrack .slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
  outline: 0;
}
.reeltrack.slick-initialized .slick-slide {
  display: block;
}
.reeltrack .slick-slide img {
  display: block;
}

/* ---- Reel presentation inside Slick ----
   Slick's centerPadding supplies the flanking space, so the gap between
   reels comes from padding on the slide, not a flex gap. */
.reeltrack .slick-slide {
  padding: 0 clamp(7px, 1vw, 15px);
  box-sizing: border-box;
}
.reeltrack .reel {
  position: relative;
  margin: 0;
  transition: filter var(--t-cine) var(--e-lux);
}
.reeltrack .reel video {
  -webkit-user-drag: none;
}
/* Neighbours recede; the centred reel comes forward. In centerMode
   .slick-current is always the slide on the centre line. */
.reeltrack .slick-slide .reel {
  filter: saturate(0.35) brightness(0.5);
}
.reeltrack .slick-current .reel {
  filter: none;
}
.reeltrack .slick-slide .reel-frame {
  transform: scale(0.86);
}
.reeltrack .slick-current .reel-frame {
  transform: scale(1);
  border-color: var(--line-lit);
  box-shadow: 0 40px 120px rgb(var(--rgb-primary) / 0.34);
}
.reeltrack .slick-slide figcaption {
  opacity: 0;
}
.reeltrack .slick-current figcaption {
  opacity: 1;
}
/* Depth transitions are suspended while dragging so the reels track the
   pointer 1:1 instead of easing behind it. */
.reeltrack.is-dragging .reel,
.reeltrack.is-dragging .reel-frame {
  transition: none;
}
/* Edge fades: the rail bleeds off both sides, and these make that read
   as framing rather than a hard clip. */
.stagewrap:before,
.stagewrap:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 7vw, 130px);
  z-index: 3;
  pointer-events: none;
}
.stagewrap:before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.stagewrap:after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}
.reel-frame {
  position: relative;
  aspect-ratio: 9/16;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  transform-origin: center;
  transition:
    transform var(--t-cine) var(--e-lux),
    border-color var(--t-base),
    box-shadow var(--t-cine);
}
.reeltrack .reel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Depth state is driven by Slick's .slick-current above. Any later rule
   keyed on a custom active class overrides it by source order. */
.reeltrack .reel figcaption {
  margin-top: 18px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  gap: 12px;
  opacity: 0;
  transition: opacity var(--t-base);
}
.reeltrack .reel figcaption b {
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.showcase-note {
  text-align: center;
  margin: clamp(20px, 3vh, 36px) 0 0;
  color: var(--muted);
}

.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(50px, 8vh, 96px);
  align-items: center;
}
.reel {
  position: relative;
  margin: 0;
  aspect-ratio: 9/16;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  transition:
    transform var(--t-cine) var(--e-lux),
    border-color var(--t-base);
}
/* Centre reel forward, outer reels back — depth without 3D. */
.reel:nth-child(2) {
  transform: scale(1.07);
  z-index: 2;
}
.reel:hover {
  border-color: var(--line-lit);
}
.reel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}
.reel:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(10 6 20 / 0.5), transparent 44%);
}
.reel-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid rgb(var(--rgb-accent) / 0.5);
  background: rgb(10 6 20 / 0.45);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition:
    background var(--t-base),
    border-color var(--t-base),
    opacity var(--t-base);
}
.reel-play span {
  width: 0;
  height: 0;
  border-left: 14px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.reel-play:hover {
  background: rgb(var(--rgb-primary) / 0.55);
  border-color: var(--accent);
}
.reel.is-playing .reel-play {
  opacity: 0;
  pointer-events: none;
}
.reels-note {
  margin: 22px 0 0;
  text-align: center;
}

/* ============================================================
   VI. ANATOMY — the blueprint
   A drafting surface: the schematic draws itself, twelve fields
   annotate it from both flanks, the principles close the scene.
   Height is 100svh; ScrollTrigger owns the pin distance.
   ============================================================ */
.sc-anatomy {
  height: 100svh;
}
/* ScrollTrigger pins the section itself, so .stage must NOT also be
   sticky — it would stick inside its own pinned parent and ride up
   under the previous scene. Same override as .sc-problem and .sc-shift.

   `safe center` rather than plain `center`: plain centring splits any
   overflow between top and bottom and the clip shears the headline off
   the top. `safe` centres while the content fits, then falls back to
   start. */
.anatomy-stage {
  position: relative;
  background: var(--bg);
  align-content: safe center;
  overflow: hidden;
}
.sc-anatomy .stage {
  position: relative;
}
/* Drafting grid, behind everything. Authored at opacity 0; the entry
   timeline fades it up. */
.bp-grid {
  position: absolute;
  inset: -10%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--rgb-primary) / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--rgb-primary) / 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(
    ellipse 62% 58% at 50% 46%,
    #000 30%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 62% 58% at 50% 46%,
    #000 30%,
    transparent 100%
  );
}
/* The scene is a fixed 100svh and the stage clips, so this column must
   never exceed it. Everything below is sized in vh so it compresses to
   fit rather than spilling. */
.anatomy-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(12px, 2.4vh, 26px) var(--pad);
}
.anatomy-head {
  max-width: none;
  text-align: center;
}
.anatomy-head .h-scene {
  margin-top: clamp(8px, 1.6vh, 18px);
}
.anatomy-lede {
  margin: clamp(10px, 1.8vh, 22px) auto 0;
  max-width: 62ch;
}

/* ---- The schematic + its annotations -------------------------- */
/* Three columns: odd fields | figure | even fields. The figure is the
   fixed centre, so the leader lines always meet it. */
.bp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 2.4vw, 44px);
  margin-top: clamp(14px, 2.6vh, 48px);
}
.bp-figure {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: clamp(150px, 19vh, 280px);
  justify-self: center;
}
.bp-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* Construction guides read as pencil: dashed, dimmer than the subject. */
.bp-guide path,
.bp-guide circle {
  stroke: rgb(var(--rgb-primary) / 0.26);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
}
.bp-line path {
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Drafting stamp under the figure. */
.bp-stamp {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  border: 1px solid var(--line);
  padding: 5px 12px;
  opacity: 0;
}
.bp-stamp b {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
}
.bp-stamp i {
  font-style: normal;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Both flanks are a single <ol> so reading order stays correct;
   nth-child places odds left and evens right. */
.bp-fields {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bp-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(2px, 0.5vh, 7px) 0;
  opacity: 0;
}
/* Odd → left column, right-aligned so the text runs toward the figure. */
.bp-field:nth-child(odd) {
  grid-column: 1;
  flex-direction: row-reverse;
  text-align: right;
}
.bp-field:nth-child(even) {
  grid-column: 3;
}
.bp-field:nth-child(1) {
  grid-row: 1;
}
.bp-field:nth-child(3) {
  grid-row: 2;
}
.bp-field:nth-child(5) {
  grid-row: 3;
}
.bp-field:nth-child(7) {
  grid-row: 4;
}
.bp-field:nth-child(9) {
  grid-row: 5;
}
.bp-field:nth-child(11) {
  grid-row: 6;
}
.bp-field:nth-child(2) {
  grid-row: 1;
}
.bp-field:nth-child(4) {
  grid-row: 2;
}
.bp-field:nth-child(6) {
  grid-row: 3;
}
.bp-field:nth-child(8) {
  grid-row: 4;
}
.bp-field:nth-child(10) {
  grid-row: 5;
}
.bp-field:nth-child(12) {
  grid-row: 6;
}
/* The figure spans all six rows in the centre column. */
.bp-figure {
  grid-row: 1 / span 6;
}
/* Leader line: the hairline tying each label to the drawing. */
.bp-lead {
  flex: 1 1 auto;
  height: 1px;
  min-width: 12px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--rgb-primary) / 0.42)
  );
  transform-origin: right center;
}
.bp-field:nth-child(odd) .bp-lead {
  background: linear-gradient(
    270deg,
    transparent,
    rgb(var(--rgb-primary) / 0.42)
  );
  transform-origin: left center;
}
.bp-mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
}
.bp-mark svg {
  width: 17px;
  height: 17px;
}
.bp-mark svg :is(path, circle) {
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bp-txt {
  flex: 0 0 auto;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.bp-txt b {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
  margin-right: 6px;
}
/* The shared .principles margin is sized for a standalone section and
   overflows a fixed-height stage; this tightens it. */
.bp-principles {
  margin-top: clamp(16px, 3vh, 56px);
}
.bp-principles .principle p {
  font-size: 13px;
  line-height: 1.6;
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(60px, 9vh, 110px);
}
.principle {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.principle strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 12px;
}
.principle p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--dim);
}

/* ============================================================
   VII. ENGINE — diagonal, deliberately asymmetric
   ============================================================ */
.sc-engine {
  background: var(--bg);
  overflow: hidden;
}
.engine-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 90px);
  align-items: center;
}
.engine-head {
  grid-column: 1/-1;
  max-width: none;
  margin-bottom: clamp(20px, 4vh, 50px);
}
.engine-copy .h-scene {
  margin-top: 20px;
}
.engine-lede {
  margin-top: 26px;
}
.pillars {
  display: grid;
  gap: 16px;
  margin-top: 36px;
}
.pillar {
  border-left: 1px solid var(--line-lit);
  padding: 4px 0 4px 22px;
}
.pillar strong {
  display: block;
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.pillar p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--muted);
}
.engine-visual {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: rotate(-8deg);
}
.engine-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow:
    0 0 100px rgb(var(--rgb-primary) / 0.16),
    inset 0 0 100px rgb(var(--rgb-primary) / 0.1);
}
.engine-ring.e2 {
  inset: 14%;
  border-color: rgb(var(--rgb-primary) / 0.22);
}
.engine-ring.e3 {
  inset: 30%;
  border-style: dashed;
  border-color: rgb(var(--rgb-primary) / 0.26);
}
.engine-mid {
  position: relative;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  transform: rotate(8deg);
}
.engine-mid i {
  font-style: normal;
  color: var(--accent);
  display: block;
}
.enode {
  position: absolute;
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--accent);
  border: 1px solid var(--line-lit);
  padding: 11px 15px;
  background: var(--bg);
  transform: rotate(8deg);
}
.enode.n1 {
  top: 8%;
  left: 16%;
}
.enode.n2 {
  top: 20%;
  right: 4%;
}
.enode.n3 {
  bottom: 16%;
  left: 6%;
}
.enode.n4 {
  bottom: 6%;
  right: 18%;
}

/* ============================================================
   VIII. FUNNEL — vertical descent
   ============================================================ */
.sc-funnel {
  background: var(--bg-elev);
}
.funnel-head {
  max-width: none;
}
.funnel-head .h-scene {
  margin-top: 20px;
}
.descent {
  position: relative;
  margin-top: clamp(50px, 8vh, 96px);
  display: grid;
  gap: 0;
}
/* A real element, not a pseudo: GSAP can only animate a real node. It
   scales from the top as the section scrolls. */
.descent-line {
  position: absolute;
  left: 38px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(var(--primary), rgb(var(--rgb-primary) / 0.1));
  transform-origin: top center;
}
.step {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: clamp(20px, 3vw, 52px);
  align-items: start;
  padding: clamp(22px, 3.4vh, 40px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.step:last-child {
  border-bottom: 0;
}
.step-n {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1px solid var(--line-lit);
  background: var(--bg-elev);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
  position: relative;
  z-index: 2;
  transition:
    background var(--t-base),
    box-shadow var(--t-base);
}
.step:hover .step-n {
  background: rgb(var(--rgb-primary) / 0.2);
  box-shadow: 0 0 44px rgb(var(--rgb-primary) / 0.32);
}
.step-body {
  display: grid;
  grid-template-columns: minmax(0, 16ch) 1fr;
  gap: clamp(14px, 2.6vw, 44px);
  align-items: baseline;
  padding-top: 16px;
}
.step h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 29px);
  letter-spacing: -0.02em;
  margin: 0;
}
.step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--dim);
}

/* ============================================================
   IX. PROCESS + X. TIMELINE — editorial rows
   ============================================================ */
.sc-process {
  background: var(--bg);
}
.process-head {
  max-width: none;
}
.process-head .h-scene {
  margin-top: 20px;
}
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 40px);
  margin-top: clamp(50px, 8vh, 96px);
}
.phase {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.phase-n {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
  line-height: 1;
  display: block;
}
.phase h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 25px);
  letter-spacing: -0.02em;
  margin: 18px 0 12px;
}
.phase p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--dim);
}

.sc-timeline {
  background: var(--bg-elev);
}
.timeline-head {
  max-width: none;
}
.timeline-head .h-scene {
  margin-top: 20px;
}
.months {
  margin-top: clamp(50px, 8vh, 96px);
  border-top: 1px solid var(--line);
}
.month {
  display: grid;
  grid-template-columns: auto minmax(0, 13ch) minmax(0, 20ch) 1fr;
  gap: clamp(16px, 3vw, 54px);
  align-items: baseline;
  padding: clamp(22px, 3vh, 34px) 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t-base);
}
.month:hover {
  background: rgb(var(--rgb-primary) / 0.06);
}
.month-n {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}
.month-when {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.month h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: -0.02em;
  margin: 0;
}
.month p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--dim);
}

/* ============================================================
   XI. METRICS — asymmetric cells
   ============================================================ */
.sc-metrics {
  background: var(--bg);
}
.metrics-head {
  max-width: none;
}
.metrics-head .h-scene {
  margin-top: 20px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin-top: clamp(50px, 8vh, 96px);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.metric {
  background: var(--bg);
  padding: clamp(22px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  min-height: clamp(160px, 22vh, 220px);
  grid-column: span 2;
}
/* First two run wider so the grid never reads as a uniform table. */
.metric:nth-child(1),
.metric:nth-child(2) {
  grid-column: span 3;
}
.metric-n {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.metric strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 31px);
  letter-spacing: -0.025em;
  display: block;
}
.metric span {
  font-size: 13px;
  color: var(--dim);
  display: block;
  margin-top: 8px;
}

/* ============================================================
   XII. WHY — offset rows
   ============================================================ */
.sc-why {
  background: var(--bg-elev);
}
.why-head {
  max-width: none;
}
.why-head .h-scene {
  margin-top: 20px;
}
.reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 64px) clamp(30px, 5vw, 90px);
  margin-top: clamp(50px, 8vh, 96px);
}
.reason {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
/* Offset the second column so the grid never reads as a table. */
.reason:nth-child(even) {
  transform: translateY(clamp(20px, 4vh, 54px));
}
.reason-n {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.reason h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 26px);
  letter-spacing: -0.02em;
  margin: 16px 0 12px;
}
.reason p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--dim);
}

/* ============================================================
   XIII. FAQ — oversized type, full-width rules, no boxes
   ============================================================ */
.sc-faq {
  background: var(--bg);
}
.faq-head {
  max-width: none;
}
.faq-head .h-scene {
  margin-top: 20px;
}
.faq-list {
  margin-top: clamp(46px, 7vh, 86px);
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: clamp(24px, 3.4vh, 38px) 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 31px);
  letter-spacing: -0.025em;
  transition: color var(--t-fast);
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary:hover {
  color: var(--accent);
}
.faq-list summary i {
  font-style: normal;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  transition: transform var(--t-base) var(--e-glide);
}
.faq-list details[open] summary i {
  transform: rotate(45deg);
}
.faq-list p {
  margin: 0;
  padding: 0 0 clamp(26px, 3.4vh, 38px);
  max-width: 74ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}

/* ============================================================
   XIV. CTA — type at maximum scale, near-empty frame
   ============================================================ */
.sc-cta {
  position: relative;
  background: var(--bg-deep);
  /* Last section on the page, so its bottom padding is the only
     clearance under the fixed .action-bar. */
  padding: clamp(120px, 18vh, 220px) var(--pad) clamp(96px, 11vh, 130px);
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgb(var(--rgb-primary) / 0.18);
  background: radial-gradient(
    circle,
    rgb(var(--rgb-primary) / 0.26),
    transparent 58%
  );
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
/* .kicker is inline flow, so text-align centres it. */
.cta-inner .kicker {
  text-align: center;
}
.cta-inner .h-display {
  margin: 26px auto 0;
}
.cta-lede {
  margin: 34px auto 0;
  max-width: 58ch;
  text-align: center;
}
.ask {
  position: relative;
  overflow: hidden;
  max-width: 620px;
  margin: clamp(34px, 5vh, 56px) auto;
  border: 1px solid var(--line-lit);
  background: rgb(var(--rgb-primary) / 0.12);
  padding: 26px;
  text-align: left;
}
.ask span {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: #f7cbe8;
  text-transform: uppercase;
}
.ask strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.015em;
  margin-top: 12px;
}
.cta-sub {
  margin: 22px auto 0;
  max-width: 56ch;
  font-size: 13px;
  line-height: 1.75;
  color: var(--dim);
}
/* This footer sits inside .sc-cta, so clearance under the fixed
   .action-bar comes from that section's bottom padding, not from here. */
.site-footer {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: clamp(60px, 10vh, 110px) auto 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.site-footer img {
  height: 24px;
  opacity: 0.72;
}
.site-footer a,
.site-footer span {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer a:hover {
  color: var(--accent);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .site-nav {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  .header-loc {
    display: none;
  }
  /* The switcher stays visible when the nav collapses: a language
     choice buried in a menu is one most visitors never find. Sized to a
     full 44px target beside the burger. */
  .site-header .lang-switch {
    min-height: 44px;
    min-width: 44px;
    /* Pushes switcher + burger to the trailing edge, brand to the
       leading one. Logical property, so RTL mirrors it without an
       override. */
    margin-inline-start: auto;
    margin-inline-end: 4px;
  }
}
@media (max-width: 600px) {
  /* Keeps brand, switcher and burger on one line without squeezing the
     wordmark. */
  .site-header {
    gap: 10px;
  }
  .site-header .lang-switch {
    min-width: 40px;
    padding: 0 8px;
    font-size: 9.5px;
    margin-inline-end: 0;
  }
}
@media (max-width: 1024px) {
  .shift-top,
  .proof-head,
  .engine-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .engine-visual {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric,
  .metric:nth-child(1),
  .metric:nth-child(2) {
    grid-column: span 1;
  }
}
@media (max-width: 860px) {
  .chapter {
    display: none;
  }
  .sectors .inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .sectors p {
    grid-column: 1/-1;
  }
  .mech,
  .principles,
  .phases,
  .proof-claims {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .panels {
    grid-template-columns: 1fr;
  }
  .reasons {
    grid-template-columns: 1fr;
  }
  .reason:nth-child(even) {
    transform: none;
  }
  .reels {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
  .reel:nth-child(2) {
    transform: none;
  }
  .month {
    grid-template-columns: auto 1fr;
    gap: 12px 20px;
  }
  .month p {
    grid-column: 1/-1;
  }
  /* Three columns won't fit: the figure moves above and the twelve
     callouts unwind into two plain columns beneath it. */
  .bp {
    grid-template-columns: 1fr 1fr;
    gap: 4px clamp(18px, 4vw, 36px);
  }
  .bp-figure {
    grid-column: 1/-1;
    grid-row: 1;
    width: clamp(180px, 30vw, 240px);
    margin-bottom: 46px;
  }
  .bp-field,
  .bp-field:nth-child(odd),
  .bp-field:nth-child(even) {
    grid-column: auto;
    grid-row: auto;
    flex-direction: row;
    text-align: left;
  }
  /* The leader line has nothing to point at once the figure moves. */
  .bp-lead {
    display: none;
  }
  .bp-mark {
    width: 30px;
    height: 30px;
  }
  .bp-mark svg {
    width: 15px;
    height: 15px;
  }
  .step-body {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 10px;
  }
  .step {
    grid-template-columns: 58px 1fr;
    gap: 20px;
  }
  .step-n {
    width: 58px;
    height: 58px;
    font-size: 16px;
  }
  .descent-line {
    left: 28px;
  }
}
@media (max-width: 600px) {
  .site-header {
    height: 74px;
  }
  /* Sticky scenes fight mobile browser UI chrome, so the tall parents
     collapse to normal flow. */
  .sc-hero,
  .sc-problem,
  .sc-shift,
  .sc-anatomy {
    height: auto;
  }
  .stage {
    position: relative;
    height: auto;
    min-height: 100svh;
    padding: 110px 0 70px;
  }
  /* The hero is the one stage held to the fold; other scenes may run
     past it. Capping height alone clips the type, so the .stage and
     .hero-content padding is removed with it.

     No min-height floor: an unconditional one makes the hero taller
     than short viewports, which the max-height block below handles. */
  .sc-hero .stage {
    min-height: 0;
    height: 100svh;
    padding: 92px 0 24px;
    /* Flex, not the global grid: in a grid, align-self:center on the
       content and margin-top:auto on the foot compete for one track and
       the foot lands mid-stage. */
    display: flex;
    flex-direction: column;
  }
  /* The stage is no longer a fixed-height grid here, so the track
     unwinds into a vertical stack. */
  .problem-stage {
    grid-template-rows: none;
    padding: 0;
  }
  .htrack {
    flex-direction: column;
    padding-top: 40px;
    gap: 14px;
    transform: none !important;
  }
  .loss,
  .loss-kicker {
    flex: 1 1 auto;
    width: 100%;
  }
  .loss {
    max-height: none;
    margin: 0;
    padding: 26px;
  }
  .loss-icon {
    margin: 22px 0;
  }
  .hero-title {
    max-width: none;
  }
  /* The stage above owns the vertical space; padding here as well
     overflows the fold. Horizontal padding stays. */
  .hero-content {
    padding-top: 0;
    padding-bottom: 0;
    /* The stage is a flex column here, so align-self:center from the
       base rule acts on the cross axis and shrinks this to content
       width. Stretch instead, and absorb the free height with the auto
       margins. */
    align-self: stretch;
    margin-top: auto;
    margin-bottom: auto;
  }
  .hero-foot {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    /* In normal flow at this width: a fixed margin would add page
       height, auto pins it to the base of the stage. */
    margin-top: auto;
    padding: 0 var(--pad);
  }
  /* The hero needs ~600px of height to seat headline, lede, buttons and
     disclaimer; below that a hard 100svh cannot fit them. Type tightens
     first, then the stage is allowed past the fold — a hero that
     scrolls a little beats one whose CTA sits under the cue. */
  @media (max-height: 620px) {
    .sc-hero .stage {
      height: auto;
      min-height: 100svh;
      padding: 84px 0 20px;
    }
    .hero-title {
      font-size: clamp(29px, 8.4vw, 40px);
    }
    .hero-kicker {
      margin-bottom: 12px;
    }
    .hero-tail {
      margin-top: 18px;
    }
    .hero-cta {
      margin-top: 16px;
    }
    .hero-micro {
      margin-top: 12px;
    }
    .hero-foot {
      margin-top: 26px;
    }
  }
  .anatomy-stage,
  .shift-stage {
    align-content: start;
  }
  /* No pin at this width, so the blueprint timeline never runs and its
     opacity:0 authoring state would never be cleared. */
  .bp {
    grid-template-columns: 1fr;
  }
  .bp-figure {
    margin-bottom: 52px;
  }
  .bp-field {
    opacity: 1;
    border-bottom: 1px solid var(--line-soft);
  }
  .bp-grid {
    opacity: 1;
  }
  .bp-stamp {
    opacity: 1;
  }
  /* No pin at this width, so the iris never animates. */
  .iris {
    display: none;
  }
  .compare-row {
    min-width: 560px;
  }
  .site-footer {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Reduced motion: a complete, static page ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .scene {
    height: auto !important;
  }
  .stage {
    position: relative;
    height: auto;
    min-height: 0;
    padding: clamp(90px, 12vh, 150px) 0;
  }
  .problem-stage {
    grid-template-rows: none;
    padding: 0;
  }
  .htrack {
    flex-wrap: wrap;
    transform: none !important;
    padding-top: 40px;
  }
  .loss {
    max-height: none;
    margin: 0;
  }
  /* Authored at opacity 0 for the blueprint timeline, which never runs
     here. */
  .bp-field,
  .bp-stamp,
  .bp-grid {
    opacity: 1;
  }
  .iris {
    display: none;
  }
  .split-line {
    transform: none !important;
    opacity: 1 !important;
  }
  .scroll-progress {
    display: none;
  }
}