/* ============================================================
   JETTERFLY · the integrated intelligence platform
   for private aviation — owners, brokers, operators.
   ------------------------------------------------------------
   Light canvas (warm parchment) with dark contrast sections.
   Type: Fraunces (display, upright), Instrument Sans (body),
   JetBrains Mono (chips). Butterfly = ORBIT only. JF = parent.
============================================================ */

:root {
  /* Violet sky canvas — Sin-City cinematic */
  --bg: #1a1230;        /* deep indigo-violet, primary canvas */
  --bg-2: #221842;      /* slightly lighter sibling */
  --bg-3: #2d2056;      /* mid violet for raised surfaces */

  /* Darkest sections (the "after-dark" tone) */
  --bg-dark: #0c0820;
  --bg-dark-2: #150e2e;

  /* Ink on violet */
  --ink: #f4eef9;
  --ink-2: #b9a8d4;
  --ink-3: #7a6b94;
  --ink-4: #4a4068;

  /* Ink on darkest sections (same scale — everything's dark now) */
  --inked: #f4eef9;
  --inked-2: #b9a8d4;
  --inked-3: #7a6b94;

  /* Lines */
  --line: rgba(244, 238, 249, 0.10);
  --line-2: rgba(244, 238, 249, 0.18);
  --line-d: rgba(244, 238, 249, 0.08);
  --line-d-2: rgba(244, 238, 249, 0.16);

  /* Accent — violet/lavender with rare gold horizon */
  --coral: #c9a3f0;     /* legacy alias, now lavender */
  --amber: #f4c14e;     /* sunset gold (rare warm accent) */
  --honey: #ffe9a0;     /* horizon highlight */
  --violet: #8b5fbf;
  --lavender: #c9a3f0;
  --light-lav: #d9bfff;
  --burn: #ff8e3c;      /* deepest horizon burn */

  /* Cool-to-warm gradient — like the sunset horizon */
  --grad: linear-gradient(135deg, #d9bfff 0%, #8b5fbf 50%, #f4c14e 100%);
  /* Pure cool variant for non-sunset moments */
  --grad-cool: linear-gradient(135deg, #d9bfff 0%, #8b5fbf 100%);

  --maxw: 1320px;
  --pad-x: clamp(20px, 4vw, 56px);

  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--bg);
  overflow-x: hidden;
  position: relative;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

em, .italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 360;
  letter-spacing: -.005em;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
}

/* ============================================================
   SECTION SCAFFOLD — light & dark variants
============================================================ */
.sec {
  position: relative;
  padding: clamp(80px, 10vw, 140px) var(--pad-x);
  background: var(--bg);
  color: var(--ink);
}
.sec--alt { background: var(--bg-2); }
.sec--dark {
  background: var(--bg-dark);
  color: var(--inked);
}
.sec--dark .sec__chip { color: var(--amber); }
.sec__inner { max-width: var(--maxw); margin: 0 auto; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(244, 238, 249, 0.04);
}
.sec--dark .chip {
  color: var(--amber);
  border-color: var(--line-d-2);
  background: rgba(244,193,78,.06);
}
.chip__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255,170,58,.18);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,170,58,0); } }

/* ============================================================
   NAV
============================================================ */
/* Liquid-glass nav.
   The "thickness" feel comes from layering: a strong backdrop-filter,
   a subtle top→bottom light gradient (light catching the top edge of
   the slab), inset highlight on the top edge, inset shadow on the
   bottom edge, and a soft outer drop shadow once stuck. */
/* Outer shell: fixed full-width, only provides safe-area padding. The
   actual glass pill lives inside .nav__inner so it can be sized down. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 16px var(--pad-x);
  background: transparent;
  pointer-events: none;
  transition: padding .35s var(--ease);
}

/* Default state: full-width flex row, transparent, items push to edges. */
.nav__inner {
  position: relative;
  /* Sit ABOVE the mega-menu panel (z-40) so the pill stays floating on top
     of the full-bleed mega background instead of being covered by it. */
  z-index: 60;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6px 6px 6px 0;
  border-radius: 999px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  gap: 28px;
  transition:
    max-width .65s var(--ease),
    padding .55s var(--ease),
    background .55s var(--ease),
    backdrop-filter .55s var(--ease),
    -webkit-backdrop-filter .55s var(--ease),
    box-shadow .6s var(--ease);
}

/* Top→bottom sheen + bottom hairline only render once the pill is glass */
.nav__inner::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(244, 238, 249, 0.10) 0%,
    rgba(244, 238, 249, 0.025) 35%,
    transparent 65%,
    rgba(0, 0, 0, 0.10) 100%
  );
  opacity: 0;
  transition: opacity .55s var(--ease);
}

/* Scrolled state: pill shrinks, fills with glass */
.nav.is-stuck .nav__inner {
  /* Width hugs content snugly — viewport-relative cap so it never blows out */
  max-width: 800px;
  padding: 8px 8px 8px 22px;
  background: rgba(14, 9, 34, 0.42);
  backdrop-filter: blur(28px) saturate(190%) brightness(1.12);
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.12);
  box-shadow:
    inset 0 1px 0 0 rgba(244, 238, 249, 0.18),
    inset 0 2px 0 0 rgba(244, 238, 249, 0.04),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.25),
    0 14px 36px -10px rgba(0, 0, 0, 0.55),
    0 4px 12px -4px rgba(0, 0, 0, 0.30);
}
.nav.is-stuck .nav__inner::before { opacity: 1; }

/* Children sit above the gradient overlay */
.nav__brand,
.nav__links,
.nav__cta {
  position: relative;
  z-index: 1;
}
.nav__brand {
  position: relative;
  flex: none;
  display: flex; align-items: center; gap: 14px;
  color: var(--ink);
}
.nav__mark {
  width: auto;
  max-width: none;        /* don't let global img{max-width:100%} cap it */
  flex: none;
  display: block;
  transition: opacity .45s var(--ease);
}
/* Initial state: the full Jetterfly wordmark lockup sits in normal flow
   and defines the brand's width. */
.nav__mark--full {
  position: relative;
  height: 34px;
  opacity: 1;
}
/* The compact emblem waits as a hidden overlay pinned to the same left
   edge. Fixed width/height (matching the emblem's 210:166 ratio) so it
   can never be horizontally squished by its container. */
.nav__mark--emblem {
  position: absolute;
  left: 0; top: 50%;
  width: 38px; height: 30px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
/* Minimized (pill): the wordmark drops out of flow and fades; the emblem
   takes its place IN flow, so the brand now reserves only the emblem's
   narrow width — which keeps the pill content from overflowing. */
.nav.is-stuck .nav__mark--full {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.nav.is-stuck .nav__mark--emblem {
  position: relative;
  left: auto; top: auto;
  transform: none;
  opacity: 1;
}
.nav__links {
  display: flex;
  gap: 28px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.nav__links a {
  position: relative;
  padding: 6px 0;
  transition: color .25s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--amber);
  transition: right .35s var(--ease);
}
.nav__links a:hover::after { right: 0; }
.nav__cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(244, 238, 249, 0.22);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease);
}
.nav__cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--amber);
  transform: translateX(-101%);
  transition: transform .45s var(--ease);
  z-index: 0;
}
.nav__cta-text, .nav__cta-arrow {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.nav__cta-arrow { transition: transform .35s var(--ease); }
.nav__cta:hover {
  color: var(--bg-dark);
  border-color: var(--amber);
  transform: translateY(-1px);
}
.nav__cta:hover::before { transform: translateX(0); }
.nav__cta:hover .nav__cta-arrow { transform: translateX(3px); }
@media (max-width: 880px) { .nav__links { display: none; } }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  white-space: nowrap;
  font-family: var(--sans);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .35s var(--ease), border-color .25s var(--ease);
  border: 1px solid transparent;
}
.btn span { transition: transform .35s var(--ease); display: inline-block; }
.btn:hover span { transform: translateX(4px); }

.btn--primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 14px 40px -16px rgba(0,0,0,.5);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -20px rgba(244,193,78,.4); background: var(--amber); }
.btn--ghost {
  background: rgba(255,255,255,.04);
  border-color: var(--line-2);
  color: var(--ink);
}
.btn--ghost:hover { background: rgba(255,255,255,.10); border-color: var(--ink); }

/* dark variants */
.sec--dark .btn--primary {
  background: var(--grad); color: #1a0f06;
  box-shadow: 0 14px 40px -16px rgba(255,170,58,.55);
}
.sec--dark .btn--ghost {
  border-color: var(--line-d-2); color: var(--inked); background: rgba(255,255,255,.03);
}
.sec--dark .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: var(--inked); }

/* ============================================================
   HERO — light, confident, restrained
============================================================ */
.hero {
  position: relative;
  padding: 160px var(--pad-x) 80px;
  background:
    url("assets/jet-sunset.jpg") center 65% / cover no-repeat,
    #1a1230;
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Legibility overlay — darken left side where the text lives, let the sunset jet
   read fully on the right. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(
      100deg,
      rgba(12, 8, 32, 0.88) 0%,
      rgba(26, 18, 48, 0.72) 35%,
      rgba(26, 18, 48, 0.35) 60%,
      rgba(26, 18, 48, 0.15) 85%,
      rgba(26, 18, 48, 0.05) 100%
    ),
    linear-gradient(180deg, rgba(12,8,32,.4) 0%, transparent 25%);
  pointer-events: none;
}
/* Long bottom fade into the dark color the next section starts on,
   so the transition between hero and manifesto reads as a single dissolve
   instead of a color jump. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(12, 8, 32, 0.35) 35%,
    rgba(12, 8, 32, 0.75) 65%,
    var(--bg-dark) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.hero__grid { display: none; }
.hero__inner { position: relative; z-index: 2; }

.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}
.hero__top {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.hero__meta {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Editorial dateline — replaces the pill chip in the hero.
   Magazine-style: a short hairline rule, then mono caps with separators. */
.hero__dateline {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 56px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.hero__dateline-rule {
  width: 48px; height: 1px;
  background: var(--amber);
  display: inline-block;
  flex: 0 0 auto;
}
.hero__dateline-text {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hero__dateline-sep {
  color: var(--ink-4);
  margin: 0 4px;
  font-weight: 400;
}

.hero__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 460;
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: 1.0;
  letter-spacing: -.035em;
  margin: 0 0 26px;
  max-width: 14ch;
  color: var(--ink);
  text-shadow: 0 6px 40px rgba(0,0,0,.4);
}
.hero__title br { display: block; }

/* Cycle word — crossfades in place. No mask, no overflow-clip, so the
   baseline matches "for" exactly and ascenders/descenders render
   without any padding hacks. */
.hero__cycle-mask {
  display: inline-block;
}
.hero__cycle {
  display: inline-block;
  will-change: opacity;
}
.hero__title em {
  color: var(--amber);
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
}

.hero__sub {
  margin: 0 0 44px;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40ch;
  font-weight: 400;
}
.hero__sub strong { color: var(--ink); font-weight: 500; }

.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 72px;
}

.hero__partners {
  margin-top: auto;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.hero__partners-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
  text-align: center;
}
.hero__partners-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 3.6vw, 46px);
  flex-wrap: wrap;
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 460;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--ink-3);
  letter-spacing: -.01em;
  opacity: .78;
}
.hero__partners-track span { white-space: nowrap; }
.hero__partners-track span:nth-child(odd) {
  font-style: italic;
  color: var(--ink-3);
}

/* ============================================================
   AUDIENCE — three pillars
============================================================ */
.aud { padding: clamp(80px, 9vw, 130px) var(--pad-x); background: var(--bg-2); }
.aud__head {
  max-width: var(--maxw);
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: end;
}
.aud__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 450;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 14px 0 0;
}
.aud__intro {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}
.aud__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.aud__card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
  gap: 18px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  position: relative;
  overflow: hidden;
}
.aud__card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,170,58,.45);
  box-shadow: 0 30px 60px -30px rgba(26,22,18,.18);
}
.aud__card-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .15em;
}
.aud__card h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 80;
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.05;
}
.aud__card p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.aud__card ul {
  list-style: none; margin: 0; padding: 0;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: grid; gap: 8px;
}
.aud__card li {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
  display: flex; align-items: center; gap: 10px;
}
.aud__card li::before {
  content: "→";
  color: var(--amber);
}
@media (max-width: 880px) {
  .aud__head { grid-template-columns: 1fr; }
  .aud__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRACTICES — Jetterfly's three pillars
============================================================ */
/* ============================================================
   PLATFORM — 6-cell bento (Black Book CRM + .express system)
============================================================ */
.platform {
  padding: clamp(80px, 10vw, 140px) var(--pad-x);
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.platform__head {
  max-width: var(--maxw);
  margin: 0 auto clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 880px) {
  .platform__head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(28px, 6vw, 80px);
    align-items: end;
  }
}
.platform__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: clamp(15px, 1.4vw, 20px);
  color: var(--ink-2);
}
.platform__eyebrow em { color: var(--ink); }
.platform__eyebrow-rule {
  width: 46px;
  height: 1px;
  background: var(--line-2);
  flex: none;
}
.platform__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 450;
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--ink);
}
.platform__intro {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
}
.platform__intro strong { color: var(--ink); font-weight: 600; }

/* Logo lockup as the section header (replaces the text title) */
.platform__logo {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 36px rgba(0, 0, 0, 0.4));
}

.platform__bento {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(168px, 1fr);
  gap: 16px;
}

.bento {
  --y-hover: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 28px 26px;
  overflow: hidden;
  transform: translateY(var(--y-hover));
  transition:
    transform .4s var(--ease),
    border-color .4s var(--ease),
    background .4s var(--ease),
    box-shadow .4s var(--ease);
}
.bento:hover {
  --y-hover: -4px;
  border-color: rgba(244, 193, 78, 0.32);
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(244, 193, 78, 0.12), transparent 65%),
    var(--bg-3);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

/* Explicit bento placement (4 cols × 3 rows) */
.bento--hero      { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento--data      { grid-column: 3 / 4; grid-row: 1 / 2; }
.bento--contacts  { grid-column: 4 / 5; grid-row: 1 / 2; }
.bento--deal      { grid-column: 3 / 5; grid-row: 2 / 3; }
.bento--marketing { grid-column: 1 / 3; grid-row: 3 / 4; }
.bento--assets    { grid-column: 3 / 5; grid-row: 3 / 4; }

/* The hero cell carries the sunset-glow treatment */
.bento--hero {
  background:
    radial-gradient(ellipse 95% 75% at 12% 0%, rgba(201, 163, 240, 0.16), transparent 58%),
    radial-gradient(ellipse 85% 65% at 100% 100%, rgba(244, 193, 78, 0.13), transparent 55%),
    var(--bg-2);
  padding: 38px 38px 32px;
}
.bento--hero:hover {
  background:
    radial-gradient(ellipse 95% 75% at 12% 0%, rgba(201, 163, 240, 0.22), transparent 58%),
    radial-gradient(ellipse 85% 65% at 100% 100%, rgba(244, 193, 78, 0.18), transparent 55%),
    var(--bg-3);
}

.bento__icon {
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  display: block;
  color: rgba(217, 191, 255, 0.38);
  transition:
    color .4s var(--ease),
    filter .4s var(--ease),
    transform .55s var(--ease);
}
.bento:hover .bento__icon {
  color: var(--amber);
  filter:
    drop-shadow(0 0 12px rgba(244, 193, 78, 0.35))
    drop-shadow(0 0 28px rgba(244, 193, 78, 0.18));
  transform: translateY(-2px);
}
.bento--hero .bento__icon { width: 44px; height: 44px; margin-bottom: 22px; }

.bento__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 14px;
}
.bento h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 80;
  font-weight: 500;
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0 0 11px;
  color: var(--ink);
}
.bento p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.bento--hero h3 {
  font-size: clamp(27px, 2.9vw, 40px);
  line-height: 1.02;
  margin-bottom: 16px;
}
.bento--hero p {
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.6;
  max-width: 44ch;
}

.bento__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.bento__tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(244, 193, 78, 0.7);
  flex: none;
}

/* Tablet — collapse to 2 columns, hero + wide cells span full width */
@media (max-width: 980px) {
  .platform__bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(160px, auto); }
  .bento--hero      { grid-column: 1 / 3; grid-row: auto; }
  .bento--data      { grid-column: 1 / 2; grid-row: auto; }
  .bento--contacts  { grid-column: 2 / 3; grid-row: auto; }
  .bento--deal      { grid-column: 1 / 3; grid-row: auto; }
  .bento--marketing { grid-column: 1 / 3; grid-row: auto; }
  .bento--assets    { grid-column: 1 / 3; grid-row: auto; }
}
/* Mobile — single column stack */
@media (max-width: 600px) {
  .platform__bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento,
  .bento--hero,
  .bento--data,
  .bento--contacts,
  .bento--deal,
  .bento--marketing,
  .bento--assets {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.practices {
  padding: clamp(80px, 10vw, 140px) var(--pad-x);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.practices__head {
  max-width: var(--maxw);
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 880px) {
  .practices__head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(28px, 6vw, 80px);
    align-items: end;
  }
}
.practices__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 450;
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--ink);
}
.practices__intro {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}
.practices__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 880px) {
  .practices__grid { grid-template-columns: 1fr; }
}
.practice {
  --y-offset: 0px;
  --y-hover: 0px;
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 32px 32px;
  /* Single composed transform — GSAP doesn't touch this directly anymore
     (it animates opacity only for the entrance), so the staircase offset
     and hover lift always compose cleanly. */
  transform: translateY(calc(var(--y-offset) + var(--y-hover)));
  transition:
    transform .4s var(--ease),
    border-color .4s var(--ease),
    background .4s var(--ease),
    box-shadow .4s var(--ease);
}
/* Vertical staircase — each card offset further down. Same gap. */
.practice:nth-child(2) { --y-offset: 56px; }
.practice:nth-child(3) { --y-offset: 112px; }
/* Hover lift uses a separate variable so it composes with the staircase. */
.practice:hover {
  --y-hover: -4px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(244, 193, 78, 0.16), transparent 65%),
    var(--bg-3);
  border-color: rgba(244, 193, 78, 0.35);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
}
.practice__icon {
  width: 38px;
  height: 38px;
  margin-bottom: 20px;
  display: block;
  /* All icons default to the dim, muted-lavender state */
  color: rgba(217, 191, 255, 0.32);
  filter: none;
  transition:
    color .4s var(--ease),
    filter .4s var(--ease),
    transform .55s var(--ease);
}
/* On hover, the icon lights up to the lit-amber state with double-glow */
.practice:hover .practice__icon {
  color: var(--amber);
  filter:
    drop-shadow(0 0 12px rgba(244, 193, 78, 0.35))
    drop-shadow(0 0 28px rgba(244, 193, 78, 0.20));
  transform: translateY(-2px);
}

.practice__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--amber);
  margin-bottom: 22px;
}
.practice h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 80;
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--ink);
}
.practice p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 22px;
}
.practice ul {
  list-style: none; margin: 0; padding: 0;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: grid; gap: 8px;
}
.practice li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 10px;
}
.practice li::before {
  content: "→"; color: var(--amber);
}

/* ============================================================
   MANIFESTO — dark, scroll-synced reveal
============================================================ */
.manifesto {
  position: relative;
  padding: 25vh var(--pad-x) 28vh;
  background: var(--bg-dark);
  color: var(--inked);
  overflow: hidden;
  isolation: isolate;
}
/* Full-bleed broker-tablet background image — section 2's visual canvas */
.manifesto__bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.manifesto__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
  filter: saturate(.9) contrast(1.05) brightness(.85);
}
/* Dark overlay for legibility — strong on the left where the text lives.
   The vertical gradient starts almost solid dark at the very top to match
   the hero's fade-out target, then gradually reveals the broker-tablet
   image as you scroll into the section. */
.manifesto__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(95deg,
      rgba(12, 8, 32, 0.94) 0%,
      rgba(12, 8, 32, 0.86) 35%,
      rgba(12, 8, 32, 0.55) 65%,
      rgba(12, 8, 32, 0.30) 100%
    ),
    linear-gradient(180deg,
      var(--bg-dark) 0%,
      rgba(12, 8, 32, 0.78) 12%,
      rgba(12, 8, 32, 0.30) 25%,
      transparent 50%,
      transparent 75%,
      rgba(12, 8, 32, 0.55) 100%
    );
}
.manifesto__rule {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto 14vh;
  display: flex;
  align-items: center;
  gap: 22px;
}
.manifesto__rule > span:first-child {
  flex: 0 0 auto;
  width: 56px;
  height: 1px;
  background: var(--inked-3);
}
.manifesto__rule > span:nth-child(2) {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--inked-2);
  font-weight: 400;
  letter-spacing: -.005em;
}
.manifesto__rule > span:nth-child(2) em {
  color: var(--inked);
}

.manifesto__layout {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (min-width: 1100px) {
  .manifesto__layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  }
}
.manifesto__inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
}
.manifesto__text {
  max-width: 26ch;
}
.manifesto__figure {
  margin: 0;
  position: sticky;
  top: 18vh;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-d-2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
  isolation: isolate;
}
.manifesto__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.04);
}
.manifesto__figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12, 8, 32, 0.88) 100%);
  pointer-events: none;
}
.manifesto__figure figcaption {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  z-index: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.manifesto__figure-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--amber);
}
.manifesto__figure-meta {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--inked);
  letter-spacing: -.01em;
}
.manifesto__text {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(26px, 3.6vw, 56px);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 400;
  color: var(--inked);
  margin: 0;
}
.manifesto__text em {
  color: var(--amber);
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
}
/* Manifesto paragraph renders as static text — no word-spans, no
   scroll-tied fading. Kept these targeted rules empty/removed so the
   text inherits its normal Fraunces styling from .manifesto__text. */
.manifesto__sig {
  display: flex; align-items: center; gap: 18px;
  margin: 80px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--inked-3);
}
.manifesto__sig-line { width: 64px; height: 1px; background: var(--inked-3); display: inline-block; }

/* ============================================================
   CINEMA — scroll-tied full-bleed image reveal
   Broker-tablet image opens from a small box on the right
   (matching the manifesto figure position) into the full viewport.
============================================================ */
.cinema {
  position: relative;
  /* Shorter runway: just enough for entry + brief hold + exit.
     No long zoomed-in hold — once full-bleed, user scrolls past. */
  height: 160vh;
  background: var(--bg-dark);
}
.cinema__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-dark);
}
.cinema__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
  will-change: clip-path, transform;
  /* Starting state — small rectangle on the right. Animated to inset(0)
     on scroll. No initial scale — keeps the scale ramp monotonic later. */
  clip-path: inset(28% 8% 30% 58% round 16px);
}
.cinema__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 28% 70%, rgba(12,8,32,.65), transparent 70%),
    linear-gradient(180deg, rgba(12,8,32,.55) 0%, transparent 28%, transparent 60%, rgba(12,8,32,.85) 100%);
}
.cinema__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(60px, 12vh, 130px);
  z-index: 2;
  padding: 0 var(--pad-x);
  opacity: 0;
  will-change: opacity, transform;
}
.cinema__content-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.cinema__content-inner .cinema__sub { max-width: 56ch; }
.cinema__chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 22px;
}
.cinema__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 450;
  font-size: clamp(40px, 5.6vw, 84px);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--inked);
  margin: 0 0 18px;
  text-shadow: 0 6px 40px rgba(0,0,0,.4);
}
.cinema__title em {
  color: var(--amber);
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
}
.cinema__sub {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--inked-2);
  max-width: 52ch;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   INTEGRATIONS — built on your stack
============================================================ */
.intg {
  padding: clamp(80px, 9vw, 130px) var(--pad-x);
  background: var(--bg-2);
  position: relative;
  border-bottom: 1px solid var(--line);
}
.intg__head {
  max-width: var(--maxw); margin: 0 auto 56px;
  text-align: center;
}
.intg__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 450;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0 0 16px;
}
.intg__sub {
  margin: 0 auto;
  max-width: 60ch;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.55;
}
.intg__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.intg__cell {
  background: var(--bg-2);
  padding: 30px 22px;
  min-height: 120px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  text-align: center;
  font-family: var(--serif);
  font-variation-settings: "opsz" 80;
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 18px);
  letter-spacing: -.01em;
  color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.intg__cell:hover { background: var(--bg-3); color: var(--amber); }
.intg__cell span {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .15em;
  color: var(--ink-3); text-transform: uppercase;
  font-weight: 400;
}
.intg__grid {
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 880px) { .intg__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   REVEAL — ORBIT
============================================================ */
/* Static 100vh section. No sticky, no scroll tail. ORBIT lockup
   centered; animations fire once on enter. Zero scroll-sync. */
.reveal {
  position: relative;
  min-height: 100vh;
  background:
    url("assets/jet-ascend.jpg") center center / cover no-repeat,
    var(--bg-dark);
  overflow: hidden;
}
.reveal__sticky {
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
}
.reveal__bg {
  position: absolute; inset: 0;
  background:
    /* Strong central darken so the ORBIT lockup reads clearly */
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(12, 8, 32, 0.78) 0%, rgba(12, 8, 32, 0.5) 50%, rgba(12, 8, 32, 0.2) 80%, transparent 100%),
    /* Edge darkening / vignette */
    radial-gradient(ellipse 110% 90% at 50% 50%, transparent 0%, transparent 40%, rgba(12, 8, 32, 0.65) 90%),
    /* Warm lavender + gold ambient */
    radial-gradient(circle at 50% 50%, rgba(201,163,240,.15), transparent 65%);
}
.reveal__center { position: relative; text-align: center; padding: 0 var(--pad-x); }
.reveal__eyebrow {
  font-family: var(--mono);
  font-style: normal;
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--amber);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.reveal__eyebrow em {
  font-family: var(--mono);
  font-style: normal;
  font-variation-settings: normal;
}
/* V1.5 badge — sibling to the gradient <span>s so it doesn't inherit
   text-fill-color: transparent. Sits at the top-right of the ORBIT
   lockup. */
.reveal__version {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(10px, .9vw, 13px);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--amber);
  padding: 4px 9px;
  border: 1px solid rgba(244, 193, 78, 0.45);
  border-radius: 999px;
  white-space: nowrap;
  margin-top: .3em;
  align-self: flex-start;
  background: rgba(244, 193, 78, 0.08);
  text-shadow: none;
}
.reveal__logo {
  position: relative;
  display: inline-flex; align-items: flex-start; justify-content: center;
  gap: clamp(6px, .7vw, 10px);
  margin-bottom: 32px;
}
.reveal__butterfly {
  position: absolute;
  width: clamp(280px, 36vw, 540px);
  z-index: 0;
  /* Desaturate the orange/yellow gradient → white silhouette tinted lavender */
  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 0 60px rgba(217, 191, 255, 0.65))
    drop-shadow(0 0 120px rgba(244, 193, 78, 0.25));
  opacity: .92;
  will-change: transform;
}
.reveal__name {
  position: relative;
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(72px, 14vw, 220px);
  letter-spacing: .04em;
  font-weight: 500;
  line-height: 1;
  z-index: 1;
  display: flex; gap: .04em;
  color: #fff;
  text-shadow: 0 6px 40px rgba(0,0,0,.55);
}
.reveal__name span {
  display: inline-block;
  will-change: transform, opacity;
  background: linear-gradient(180deg, #ffffff 0%, #d9bfff 55%, #f4c14e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reveal__tag {
  font-family: var(--serif); font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--inked-2);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -.01em;
  max-width: 32ch; margin-inline: auto;
  font-weight: 400;
}
.reveal__orbit-lines { position: absolute; inset: -10%; pointer-events: none; }
.reveal__orbit-lines > div {
  position: absolute; inset: 0;
  border: 1px solid rgba(201,163,240,.10);
  border-radius: 50%;
  animation: orbit-spin 90s linear infinite;
  transform-origin: center;
  will-change: transform;
}
.reveal__orbit-lines > div:nth-child(2) {
  inset: 8%;
  animation-duration: 70s;
  animation-direction: reverse;
}
.reveal__orbit-lines > div:nth-child(3) {
  inset: 18%;
  border-color: rgba(244,193,78,.08);
  animation-duration: 110s;
}
@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   FEATURES — six ORBIT modules (light, horizontal scroll)
============================================================ */
.feats {
  position: relative;
  background: var(--bg);
  padding: 120px 0 150px;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.feats__wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); }
.feats__head {
  margin-bottom: 56px; max-width: 800px;
  display: flex; flex-direction: column; gap: 14px;
}
.feats__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 450;
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 1; letter-spacing: -.035em;
  margin: 0;
}
.feats__sub {
  margin: 0; max-width: 56ch;
  font-size: 16px; color: var(--ink-2); line-height: 1.55;
}
.feats__track {
  display: flex; gap: 20px;
  padding-right: var(--pad-x);
  will-change: transform;
}
.feats__card {
  flex: 0 0 380px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  min-height: 460px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.feats__card:hover {
  border-color: rgba(217,191,255,.35);
  background: var(--bg-3);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.4);
}
.feats__num {
  font-family: var(--mono); font-size: 11px;
  color: var(--amber); letter-spacing: .15em;
  margin-bottom: 28px;
}
.feats__card h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 80;
  font-size: 28px; letter-spacing: -.02em;
  font-weight: 500; margin: 0 0 12px;
  color: var(--ink);
}
.feats__card p {
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
  margin: 0 0 24px;
}
.feats__card ul {
  list-style: none; margin: 0; padding: 0;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.feats__card ul li {
  font-size: 13px; color: var(--ink-2);
  padding: 6px 0;
  display: flex; align-items: center; gap: 10px;
}
.feats__card ul li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--grad);
}
@media (max-width: 880px) {
  .feats__card { flex: 0 0 280px; padding: 24px; min-height: 380px; }
}

/* ============================================================
   OUTCOMES — dark, stats
============================================================ */
.out {
  background: var(--bg-dark);
  color: var(--inked);
  padding: clamp(80px, 10vw, 130px) var(--pad-x);
  position: relative;
  overflow: hidden;
}
.out::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 85% 20%, rgba(201,163,240,.10), transparent 65%),
    radial-gradient(ellipse 40% 30% at 10% 90%, rgba(244,193,78,.06), transparent 70%);
  pointer-events: none;
}
.out__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}
.out__head { max-width: 720px; margin-bottom: 64px; }
.out__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 450;
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 0;
  max-width: 16ch;
}
.out__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 60px);
}
.out__stat {
  border-top: 1px solid var(--line-d-2);
  padding-top: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.out__stat-num {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-size: clamp(56px, 7vw, 108px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.04em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.out__stat-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.out__stat-desc {
  font-size: 14px;
  color: var(--inked-2);
  line-height: 1.55;
  max-width: 38ch;
}
@media (max-width: 880px) { .out__grid { grid-template-columns: 1fr; } }

/* ============================================================
   PRICING
============================================================ */
.pricing { background: var(--bg); padding: clamp(80px, 10vw, 140px) var(--pad-x); border-top: 1px solid var(--line); }
.pricing__head { max-width: var(--maxw); margin: 0 auto 56px; text-align: center; }
.pricing__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 450;
  font-size: clamp(40px, 4.8vw, 72px);
  margin: 0; line-height: 1;
  letter-spacing: -.035em;
}
.pricing__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.plan:hover {
  border-color: rgba(217,191,255,.4); transform: translateY(-4px);
  background: var(--bg-3);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
}
.plan--featured {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(244,193,78,.18), transparent 70%),
    var(--bg-3);
  border-color: rgba(244,193,78,.4);
}
.plan__pill {
  position: absolute; top: -12px; left: 36px;
  font-family: var(--mono); font-size: 10px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  letter-spacing: .15em; text-transform: uppercase;
}
.plan--featured .plan__pill { background: var(--amber); color: var(--bg-dark); }
.plan h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 80;
  font-size: 26px; letter-spacing: -.02em;
  margin: 0 0 6px; font-weight: 500;
}
.plan header p { color: var(--ink-3); font-size: 13px; margin: 0; }
.plan__price {
  margin: 24px 0;
  font-family: var(--mono);
  font-size: 12px; color: var(--ink-3);
}
.plan__price span {
  font-size: 52px; line-height: 1;
  font-family: var(--serif); font-weight: 450;
  font-variation-settings: "opsz" 144;
  background: var(--grad-cool);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 6px; letter-spacing: -.02em;
}
.plan ul {
  list-style: none; margin: 0 0 24px; padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  flex: 1;
}
.plan ul li {
  padding: 8px 0;
  font-size: 13.5px; color: var(--ink-2);
  display: flex; gap: 10px; align-items: center;
}
.plan ul li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad); flex: 0 0 6px;
}
@media (max-width: 880px) { .pricing__grid { grid-template-columns: 1fr; } }

/* ============================================================
   CTA — final (dark, butterfly bg)
============================================================ */
.cta {
  position: relative;
  padding: clamp(120px, 14vw, 180px) var(--pad-x);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 40% at 50% 95%, rgba(244,193,78,.20), transparent 60%),
    radial-gradient(circle at 50% 25%, rgba(201,163,240,.16), transparent 60%),
    var(--bg-dark);
  color: var(--inked);
  border-top: 1px solid var(--line);
}
/* Same horizon glow as the hero — repeats the brand motif */
.cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%;
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%, transparent 0, transparent 35%, var(--bg-dark) 80%),
    linear-gradient(180deg, transparent, var(--bg-dark));
  z-index: 0;
  pointer-events: none;
}
.cta__bg {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 0;
  opacity: .06;
  pointer-events: none;
}
.cta__bg img {
  width: min(80vw, 900px);
  filter: brightness(0) invert(1) blur(2px);
}
.cta__inner {
  position: relative; z-index: 1;
  max-width: 820px; margin: 0 auto; text-align: center;
}
.cta__chip {
  font-family: var(--mono); font-size: 11px; color: var(--amber);
  letter-spacing: .3em; text-transform: uppercase;
  display: inline-block; margin-bottom: 24px;
}
.cta h2 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-size: clamp(40px, 5.6vw, 80px);
  letter-spacing: -.035em;
  font-weight: 450;
  line-height: 1.02; margin: 0 0 22px;
}
.cta h2 em {
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
  color: var(--amber);
}
.cta p { color: var(--inked-2); font-size: 17px; margin: 0 0 36px; }
.cta__form {
  display: flex; gap: 8px;
  max-width: 480px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}
.cta__form input {
  flex: 1 1 240px;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-d-2);
  color: var(--inked); font-size: 14px;
  outline: none;
  font-family: var(--sans);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.cta__form input::placeholder { color: var(--inked-3); }
.cta__form input:focus { border-color: var(--amber); background: rgba(255,255,255,.10); }
.cta__form button { border: 0; }
.cta__meta {
  display: flex; justify-content: center; gap: 28px;
  flex-wrap: wrap;
  margin-top: 40px;
  font-family: var(--mono); font-size: 11px; color: var(--inked-3);
  letter-spacing: .15em;
}

/* ============================================================
   FOOTER
============================================================ */
.foot { background: var(--bg-dark); padding: 80px var(--pad-x) 36px; border-top: 1px solid var(--line); }
.foot__top {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.foot__brand img { height: 44px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: .9; }
.foot__brand p { color: var(--ink-2); font-size: 14px; max-width: 38ch; line-height: 1.6; margin: 0; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.foot__cols h5 {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: .15em; text-transform: uppercase;
  margin: 0 0 18px;
}
.foot__cols a {
  display: block; padding: 6px 0;
  font-size: 13px; color: var(--ink-2);
  transition: color .25s var(--ease);
}
.foot__cols a:hover { color: var(--ink); }
.foot__bottom {
  max-width: var(--maxw); margin: 0 auto;
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  flex-wrap: wrap; gap: 12px;
}
@media (max-width: 880px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ORBISCOPE — sticky iPad with scroll-synced screen content.
   Single 100vh sticky stage holds head + iPad + tabs all
   visible together. As user scrolls, panels swap inside the
   iPad's screen and the active tab + caption update with it. */
.orbiscope {
  position: relative;
  background: var(--bg-dark);
  /* 100vh sticky + 100vh swap runway, no dead space */
  height: 200vh;
  overflow: hidden;
}
.orbiscope__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.5vh, 32px);
  padding: clamp(70px, 9vh, 100px) var(--pad-x) clamp(40px, 6vh, 64px);
  text-align: center;
}

/* Compact head — stays inside sticky so it's always co-visible with iPad */
.orbiscope__head {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.orbiscope__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 450;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--ink);
}
.orbiscope__lede {
  margin: 0;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
}

/* Stage wraps just the iPad device */
.orbiscope__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

/* iPad — sized to fit available stage height with aspect ratio preserved */
.orbiscope__device {
  position: relative;
  width: auto;
  max-width: min(85vw, 760px);
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  aspect-ratio: 1200 / 767;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}
/* iPad PNG sits BEHIND the screen panel. The panel is precisely sized
   to match the iPad's white screen area, so the panel visually replaces
   that white area. The iPad's bezels and hands remain visible around
   the panel — gives the "real device" frame feel. */
.orbiscope__ipad {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
/* Screen panel positioned over the iPad's white screen area.
   Measurements calibrated against the 1200×767 PNG: the white screen
   sits roughly from (12%, 6%) to (88%, 75%) of the image. */
.orbiscope__screen {
  position: absolute;
  top: 7%;
  left: 13%;
  right: 13%;
  bottom: 26%;
  z-index: 5;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(180deg, #0f0a22 0%, #1a1230 100%);
}
.orbiscope__panel {
  position: absolute;
  inset: 0;
  padding: clamp(18px, 2.4vw, 32px) clamp(22px, 2.8vw, 38px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  opacity: 0;
  transform: scale(.98);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events: none;
  color: var(--ink);
}
.orbiscope__panel.is-active {
  opacity: 1;
  transform: scale(1);
}
.orbiscope__panel-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono);
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(244,238,249,.06);
}
.orbiscope__panel-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.18);
}

/* Panel 01 — Research: comp table + line chart */
.orbiscope__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: clamp(12px, 1.1vw, 16px);
  color: var(--inked-2);
}
.orbiscope__table td {
  padding: clamp(8px, 1vw, 14px) 0;
  border-bottom: 1px dashed rgba(244,238,249,.08);
}
.orbiscope__table td:first-child { color: var(--ink); font-weight: 500; }
.orbiscope__table td b {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 80;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--amber);
}
.orbiscope__table td.up { color: #4ade80; }
.orbiscope__table td.down { color: #f87171; }
.orbiscope__chart {
  width: 100%;
  height: clamp(40px, 5vw, 70px);
  margin-top: auto;
  overflow: visible;
}
.orbiscope__chart-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.orbiscope__chart-fill {
  opacity: 0;
  transition: opacity .8s var(--ease) .6s;
}
.orbiscope__panel.is-active .orbiscope__chart-line { stroke-dashoffset: 0; }
.orbiscope__panel.is-active .orbiscope__chart-fill { opacity: 1; }

/* Panel 02 — Marketing: stat tiles + bar chart */
.orbiscope__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4px, .8vw, 12px);
}
.orbiscope__stat-mini {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: clamp(6px, .8vw, 12px);
  background: rgba(244,238,249,.03);
  border-radius: 8px;
}
.orbiscope__stat-mini b {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 450;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.orbiscope__stat-mini span {
  font-family: var(--mono);
  font-size: clamp(10px, .9vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inked-3);
  margin-top: 6px;
}
.orbiscope__bars {
  display: flex; flex-direction: column;
  gap: clamp(4px, .6vw, 8px);
  margin-top: auto;
}
.orbiscope__bar {
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 96px) 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  font-family: var(--mono);
  font-size: clamp(11px, 1.05vw, 14px);
  color: var(--inked-2);
}
.orbiscope__bar span { color: var(--ink); }
.orbiscope__bar em {
  font-style: normal;
  color: var(--amber);
  font-size: clamp(11px, 1.05vw, 14px);
}
.orbiscope__bar i {
  display: block;
  height: clamp(6px, .7vw, 10px);
  border-radius: 99px;
  background: rgba(244,238,249,.05);
  position: relative;
  overflow: hidden;
}
.orbiscope__bar i::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 0%);
  background: var(--grad);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--ease);
}
.orbiscope__panel.is-active .orbiscope__bar i::after { transform: scaleX(1); }
/* Stagger bar fills by index */
.orbiscope__panel.is-active .orbiscope__bar:nth-child(2) i::after { transition-delay: .08s; }
.orbiscope__panel.is-active .orbiscope__bar:nth-child(3) i::after { transition-delay: .16s; }
.orbiscope__panel.is-active .orbiscope__bar:nth-child(4) i::after { transition-delay: .24s; }
.orbiscope__panel.is-active .orbiscope__bar:nth-child(5) i::after { transition-delay: .32s; }

/* Panel 03 — Operations: timeline + ring */
.orbiscope__timeline {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: clamp(4px, .55vw, 8px);
  flex: 1;
}
.orbiscope__timeline li {
  display: grid;
  grid-template-columns: clamp(28px, 3vw, 36px) 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  font-family: var(--mono);
  font-size: clamp(11px, 1.05vw, 14px);
  color: var(--inked-3);
  padding: clamp(6px, .8vw, 10px) 0;
}
.orbiscope__t-num {
  width: clamp(26px, 2.8vw, 34px);
  height: clamp(26px, 2.8vw, 34px);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: clamp(10px, .9vw, 12px);
  border: 1px solid rgba(244,238,249,.12);
  color: var(--inked-3);
}
.orbiscope__t-label { color: var(--ink); font-family: var(--sans); letter-spacing: -.005em; font-size: clamp(13px, 1.25vw, 17px); }
.orbiscope__t-meta { color: var(--inked-3); font-size: clamp(10px, .95vw, 13px); }
.orbiscope__timeline li.is-done .orbiscope__t-num { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.4); color: #4ade80; }
.orbiscope__timeline li.is-done .orbiscope__t-meta { color: #4ade80; }
.orbiscope__timeline li.is-current .orbiscope__t-num {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--bg-dark);
  box-shadow: 0 0 0 3px rgba(244,193,78,.20);
}
.orbiscope__timeline li.is-current .orbiscope__t-meta { color: var(--amber); }
.orbiscope__ring {
  position: absolute;
  right: clamp(20px, 2.4vw, 32px);
  bottom: clamp(20px, 2.4vw, 32px);
  width: clamp(80px, 9vw, 120px);
  height: clamp(80px, 9vw, 120px);
  display: grid; place-items: center;
  text-align: center;
}
.orbiscope__ring svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.orbiscope__ring-arc {
  stroke-dasharray: 125.6;
  stroke-dashoffset: 125.6;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.orbiscope__panel.is-active .orbiscope__ring-arc { stroke-dashoffset: 35; }
.orbiscope__ring b {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 450;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
  color: var(--amber);
  position: relative; z-index: 1;
}
.orbiscope__ring b i {
  font-style: normal;
  font-size: clamp(11px, 1.1vw, 15px);
}
.orbiscope__ring span {
  position: absolute;
  bottom: -22px;
  font-family: var(--mono);
  font-size: clamp(9px, .85vw, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inked-3);
  white-space: nowrap;
}

/* Tabs + caption below the iPad — same row, centered */
.orbiscope__captions {
  position: relative;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.8vh, 22px);
  flex-shrink: 0;
}
.orbiscope__tabs {
  display: flex;
  gap: 8px;
}
.orbiscope__tab {
  width: clamp(34px, 3.4vw, 42px);
  height: clamp(34px, 3.4vw, 42px);
  border-radius: 50%;
  background: rgba(244, 238, 249, 0.04);
  border: 1px solid var(--line-d-2);
  color: var(--inked-3);
  font-family: var(--mono);
  font-size: clamp(10px, .9vw, 12px);
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .35s var(--ease), background .35s var(--ease),
              border-color .35s var(--ease);
}
.orbiscope__tab:hover { color: var(--ink); border-color: rgba(244, 238, 249, 0.3); }
.orbiscope__tab.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--bg-dark);
  font-weight: 500;
}
.orbiscope__caption {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 12px);
  width: 100%;
  max-width: 56ch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.orbiscope__caption.is-active {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.orbiscope__step {
  font-family: var(--mono);
  font-size: clamp(10px, .9vw, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
.orbiscope__caption p {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  color: var(--inked-2);
}

/* Spacer below the tabs so absolutely-positioned captions have room */
.orbiscope__captions::after {
  content: "";
  height: clamp(56px, 7vh, 80px);
  display: block;
}

/* Mobile: same vertical layout, slightly compressed */
@media (max-width: 720px) {
  .orbiscope { height: 180vh; }
  .orbiscope__sticky {
    padding-top: 80px;
    gap: 14px;
  }
  .orbiscope__title { font-size: clamp(26px, 7vw, 34px); }
  .orbiscope__lede { font-size: 13px; }
  .orbiscope__device { max-width: 90vw; }
}

/* ============================================================
   PERFORMANCE — GPU compositor hints
   (content-visibility was removed — it broke native lazy-loading
   detection when combined with Lenis smooth scroll, leaving
   bottom-of-page images stuck.)
============================================================ */
.cinema__bg,
.manifesto__bg img,
.hero,
.reveal__sticky {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ============================================================
   MOBILE OVERHAUL (≤720px)
   Desktop intact. On phone widths: bump paddings, scale headlines,
   center utility elements (eyebrows, CTAs, section heads) while
   keeping long paragraphs left-aligned for readability.
============================================================ */
@media (max-width: 720px) {
  :root {
    /* More breathing room from the edges */
    --pad-x: clamp(24px, 6.5vw, 32px);
  }

  /* ---- NAV ---- */
  .nav { padding: 14px var(--pad-x); }
  /* On mobile the pill stays full-width — no shrink-to-content. */
  .nav__inner,
  .nav.is-stuck .nav__inner {
    max-width: 100%;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
    gap: 12px;
  }
  .nav.is-stuck .nav__inner::before { opacity: 0; }
  /* Stuck on mobile → a solid full-width bar so the header stays legible
     over scrolled content (it was transparent + nearly invisible before). */
  .nav.is-stuck {
    background: rgba(12, 8, 26, 0.88);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid rgba(244, 238, 249, 0.10);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.7);
  }
  .nav__brand { gap: 10px; }
  .nav__mark { height: 22px; }
  /* No pill on mobile — keep the full wordmark in flow, hide the emblem swap. */
  .nav__mark--emblem { display: none; }
  .nav.is-stuck .nav__mark--full {
    position: relative;
    left: auto; top: auto;
    transform: none;
    opacity: 1;
  }
  .nav__cta { padding: 8px 14px; font-size: 12px; }

  /* ---- HERO ---- */
  .hero {
    padding: 124px var(--pad-x) 64px;
    min-height: 100vh;
    text-align: center;
  }
  .hero__inner { text-align: center; }

  /* Dateline centered with the hairline above */
  .hero__dateline {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
    font-size: 10.5px;
    letter-spacing: .22em;
  }
  .hero__dateline-text {
    justify-content: center;
    text-align: center;
  }

  /* Title — slightly smaller, centered, breathing line-height */
  .hero__title {
    font-size: clamp(40px, 11vw, 56px);
    line-height: 1.02;
    margin: 0 auto 26px;
    max-width: 16ch;
  }
  .hero__title br { display: none; }
  .hero__title em { display: inline; }
  /* Cycling mask still works but uses center alignment */
  .hero__cycle-mask {
    /* Reset JS-set minWidth on mobile — let it size to content */
    min-width: 0 !important;
  }

  .hero__sub {
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0 auto 32px;
    max-width: 50ch;
    text-align: center;
  }

  .hero__ctas {
    justify-content: center;
    gap: 10px;
    margin-bottom: 56px;
  }
  .hero__ctas .btn { padding: 12px 18px; font-size: 13px; }

  .hero__partners {
    padding-top: 22px;
    text-align: center;
  }
  .hero__partners-label {
    margin-bottom: 14px;
    font-size: 9.5px;
    letter-spacing: .28em;
  }
  .hero__partners-track {
    justify-content: center;
    gap: 18px 22px;
    font-size: 14px;
  }

  /* ---- MANIFESTO ---- */
  .manifesto {
    padding: 14vh var(--pad-x) 16vh;
  }
  .manifesto__rule {
    margin: 0 auto 8vh;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  .manifesto__rule > span:nth-child(2) {
    font-size: 14px;
    text-align: center;
  }
  .manifesto__text {
    font-size: clamp(22px, 5.6vw, 30px);
    line-height: 1.25;
    max-width: none; /* let it use full container at mobile */
  }
  .manifesto__sig {
    margin-top: 56px;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .manifesto__sig-line { width: 36px; }

  /* ---- PRACTICES ---- */
  .practices {
    padding: 80px var(--pad-x) 80px;
  }
  .practices__head {
    text-align: center;
    margin-bottom: 40px;
  }
  .practices__head > * { margin-inline: auto; }
  .practices__title {
    font-size: clamp(34px, 8.5vw, 44px);
    max-width: 14ch;
  }
  .practices__intro {
    font-size: 15px;
    max-width: 46ch;
    margin-inline: auto;
  }
  .practices__grid { gap: 14px; }
  .practice {
    padding: 28px 24px;
    /* Cards already stack on mobile — no staircase offset */
    --y-offset: 0px !important;
  }
  .practice__icon {
    margin-left: auto;
    margin-right: auto;
  }
  .practice__num {
    text-align: center;
    margin-bottom: 18px;
  }
  .practice h3 {
    font-size: 24px;
    text-align: center;
  }
  .practice p {
    font-size: 14.5px;
    text-align: center;
  }
  .practice ul {
    padding-top: 16px;
  }
  .practice li {
    justify-content: center;
  }

  /* ---- CINEMA ---- */
  .cinema { height: 200vh; }
  .cinema__content {
    bottom: clamp(36px, 8vh, 80px);
    text-align: center;
  }
  .cinema__chip {
    font-size: 10px;
    letter-spacing: .24em;
    margin-bottom: 18px;
  }
  .cinema__title {
    font-size: clamp(34px, 8.5vw, 44px);
    margin: 0 auto 14px;
    max-width: 14ch;
  }
  .cinema__sub {
    font-size: 14.5px;
    margin-inline: auto;
    max-width: 42ch;
  }

  /* ---- INTEGRATIONS ---- */
  .intg {
    padding: 80px var(--pad-x);
  }
  .intg__head { margin-bottom: 36px; }
  .intg__title {
    font-size: clamp(32px, 8vw, 42px);
  }
  .intg__sub {
    font-size: 14.5px;
  }
  .intg__cell {
    padding: 22px 14px;
    min-height: 92px;
    font-size: 14px;
  }
  .intg__cell span {
    font-size: 9.5px;
    letter-spacing: .12em;
  }

  /* ---- ORBIT REVEAL ---- */
  .reveal__name {
    font-size: clamp(64px, 17vw, 88px);
    letter-spacing: .06em;
  }
  .reveal__eyebrow {
    font-size: 13px;
    margin-bottom: 22px;
  }
  .reveal__tag {
    font-size: 16px;
    line-height: 1.35;
    padding: 0 var(--pad-x);
    max-width: 32ch;
  }

  /* ---- OUTCOMES ---- */
  .out {
    padding: 80px var(--pad-x);
    text-align: center;
  }
  .out__head { text-align: center; margin-bottom: 44px; }
  .out__title {
    font-size: clamp(32px, 8vw, 42px);
    max-width: 16ch;
    margin-inline: auto;
  }
  .out__grid { gap: 36px; }
  .out__stat {
    align-items: center;
    text-align: center;
  }
  .out__stat-num {
    font-size: clamp(56px, 16vw, 88px);
  }
  .out__stat-desc {
    margin-inline: auto;
    max-width: 36ch;
  }

  /* ---- PRICING ---- */
  .pricing { padding: 80px var(--pad-x); }
  .pricing__head { margin-bottom: 40px; }
  .pricing__title {
    font-size: clamp(32px, 8vw, 42px);
  }
  .plan { padding: 28px 24px; }
  .plan__price span { font-size: 44px; }

  /* ---- CTA ---- */
  .cta {
    padding: 100px var(--pad-x);
  }
  .cta h2 {
    font-size: clamp(34px, 9vw, 48px);
  }
  .cta p { font-size: 15px; }
  .cta__meta {
    gap: 14px;
    font-size: 10px;
    letter-spacing: .12em;
  }

  /* ---- FOOTER ---- */
  .foot { padding: 56px var(--pad-x) 28px; }
  .foot__top {
    gap: 40px;
    padding-bottom: 40px;
  }
  .foot__cols { gap: 24px; }
  .foot__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 10px;
    letter-spacing: .12em;
  }
}

/* Even-smaller phones (≤380px) — slight tighten */
@media (max-width: 380px) {
  .hero__title { font-size: 38px; }
  .hero__partners-track { font-size: 13px; gap: 14px 18px; }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  /* manifesto reveal is no longer active — no override needed */
}