/* ==========================================================================
   WEALTHSTONE PRIVATE WEALTH MANAGEMENT — DESIGN SYSTEM
   Single source of truth for every page. Do not restyle primitives locally.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --navy-950: #060F1A;
  --navy-900: #0D2137;   /* primary brand navy */
  --navy-800: #12304C;
  --navy-700: #1B4265;
  --gold:      #C59E4B;
  --gold-300:  #DDC186;
  --gold-600:  #A88434;
  --ivory:     #F7F4EE;
  --ivory-2:   #EFEAE0;
  --white:     #FFFFFF;

  /* Text */
  --ink:       #16222E;
  --ink-2:     #44515E;
  --ink-3:     #6C7885;
  --paper-ink: #E8ECF1;   /* body text on navy */
  --paper-ink-2:#9FB0C0;  /* secondary text on navy */

  /* Semantics */
  --green: #1B7A4E;
  --red:   #8B1A1A;
  --hairline: rgba(13, 33, 55, 0.12);
  --hairline-dark: rgba(232, 236, 241, 0.14);
  --gold-hairline: rgba(197, 158, 75, 0.45);

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, "Helvetica Neue", sans-serif;

  /* Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --text-4xl: clamp(2.4rem, 1.6rem + 3.2vw, 4rem);
  --text-hero: clamp(2.6rem, 1.8rem + 3.8vw, 4.6rem);

  /* Layout */
  --container: 1180px;
  --container-wide: 1360px;
  --section-pad: clamp(4.5rem, 3rem + 5vw, 8rem);
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(13,33,55,.05), 0 12px 32px -12px rgba(13,33,55,.18);
  --shadow-card-hover: 0 2px 4px rgba(13,33,55,.06), 0 24px 48px -16px rgba(13,33,55,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: #060F1A; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 560; line-height: 1.12; color: var(--navy-900); margin: 0 0 .6em; letter-spacing: -0.015em; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-family: var(--font-body); font-weight: 620; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
a { color: var(--navy-800); text-decoration: none; }
strong { font-weight: 640; }
::selection { background: var(--gold-300); color: var(--navy-950); }

/* Dark sections invert type colors */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark p, .on-dark li { color: var(--paper-ink); }
.on-dark .muted { color: var(--paper-ink-2); }
.muted { color: var(--ink-3); }

/* ---------- Layout primitives ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-pad); }
.section--dark { background: linear-gradient(180deg, var(--navy-950), var(--navy-900)); }
.section--navy { background: var(--navy-900); }
.section--white { background: var(--white); }
.section--ivory2 { background: var(--ivory-2); }
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Section headers */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: var(--text-xs); font-weight: 640; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 1.1rem;
}
.on-dark .eyebrow { color: var(--gold-300); }
.eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.lede { font-size: var(--text-lg); color: var(--ink-2); }
.on-dark .lede { color: var(--paper-ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 620; letter-spacing: .04em;
  padding: .95rem 1.9rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: all .25s var(--ease); white-space: nowrap;
}
.btn--gold { background: var(--gold); color: var(--navy-950); }
.btn--gold:hover { background: var(--gold-300); transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(197,158,75,.55); }
.btn--navy { background: var(--navy-900); color: var(--white); }
.btn--navy:hover { background: var(--navy-800); transform: translateY(-1px); }
.btn--outline { border-color: var(--hairline); color: var(--navy-900); background: transparent; }
.btn--outline:hover { border-color: var(--gold); color: var(--gold-600); }
.on-dark .btn--outline { border-color: var(--hairline-dark); color: var(--white); }
.on-dark .btn--outline:hover { border-color: var(--gold); color: var(--gold-300); }
.btn--lg { padding: 1.15rem 2.4rem; font-size: var(--text-base); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.text-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 620; font-size: var(--text-sm); letter-spacing: .03em; color: var(--gold-600);
}
.text-link:hover .arrow { transform: translateX(3px); }
.text-link .arrow { transition: transform .25s var(--ease); }
.on-dark .text-link { color: var(--gold-300); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
  padding-block: 1.1rem;
}
/* The blur lives on a pseudo-element: backdrop-filter on .nav itself would trap the
   fixed mobile menu inside the bar and let it peek through after scrolling. */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s var(--ease);
  background: rgba(6,15,26,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav.is-scrolled::before, .nav--solid::before { opacity: 1; }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--hairline-dark); padding-block: .7rem; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav .container--wide { max-width: 1580px; }   /* matches the homepage hero edges */
.nav__brand { display: flex; flex-direction: row; align-items: center; gap: .65rem; line-height: 1; flex: none; margin-right: .75rem; }
.nav__brandtext { display: flex; flex-direction: column; }
.nav__emblem { height: 44px; width: auto; }
.nav__wordmark { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; letter-spacing: .07em; color: var(--white); }
.nav__wordmark em { font-style: normal; color: var(--gold); }
.nav__tagline { font-size: .57rem; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-ink-2); margin-top: .35rem; white-space: nowrap; }
/* Link sizes step down with the viewport so the bar never overflows (sizes solved against measured widths). */
.nav__links { display: flex; flex: none; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { font-size: 1rem; font-weight: 540; color: var(--paper-ink); letter-spacing: .015em; transition: color .2s; white-space: nowrap; }
.nav__links a:hover, .nav__links a.is-active { color: var(--gold-300); }
.nav__cta { margin-left: .5rem; }
.nav__cta .btn { padding: .9rem 1.5rem; font-size: .92rem; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px 0; transition: .3s var(--ease); }
@media (max-width: 1640px) { .nav__links { gap: 1.2rem; } .nav__links a:not(.btn) { font-size: .97rem; } }
@media (max-width: 1540px) { .nav__links { gap: 1.25rem; } .nav__cta-opt { display: none; } .nav__links a:not(.btn) { font-size: .93rem; } .nav__cta .btn { padding: .85rem 1.35rem; font-size: .9rem; } }
@media (max-width: 1440px) { .nav__links { gap: 1.2rem; } .nav__inner { gap: 1.1rem; } }
@media (max-width: 1430px) { .nav__links { gap: 1.1rem; } .nav__links a:not(.btn) { font-size: .9rem; } }
@media (max-width: 1392px) {
  .nav__links { gap: .95rem; }
  .nav__links a:not(.btn) { font-size: .85rem; }
  .nav__cta .btn { padding: .78rem 1.1rem; font-size: .84rem; }
  .nav__emblem { height: 40px; }
  .nav__wordmark { font-size: 1.12rem; }
  .nav__brand { margin-right: .25rem; }
}
@media (max-width: 1320px) {
  .nav__links { position: fixed; inset: 0; background: var(--navy-950); flex-direction: column; justify-content: center; gap: 1.6rem; transform: translateY(-100%); visibility: hidden; transition: transform .4s var(--ease), visibility 0s linear .4s; }
  .nav__links.is-open { transform: translateY(0); visibility: visible; transition: transform .4s var(--ease); }
  .nav__links a { font-size: var(--text-xl); }
  .nav__toggle { display: block; position: relative; z-index: 10; }
  .nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(197,158,75,.14), transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  padding-top: clamp(7.5rem, 5.5rem + 5vw, 10.5rem);
  padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
}
.page-hero h1 { font-size: var(--text-hero); }
.breadcrumb { font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--paper-ink-2); margin-bottom: 1.4rem; }
.breadcrumb a { color: var(--gold-300); }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 2.5vw, 2.4rem); box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--gold-hairline); }
.card--dark { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); border-color: var(--hairline-dark); }
.card--flat, .card--flat:hover { transform: none; box-shadow: none; }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(197,158,75,.16), rgba(197,158,75,.05));
  border: 1px solid var(--gold-hairline); color: var(--gold-600); margin-bottom: 1.4rem;
}
.card--dark .card__icon { color: var(--gold-300); }

/* Numbered / stat primitives */
.stat { display: flex; flex-direction: column; gap: .3rem; }
.stat__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 560; color: var(--navy-900); line-height: 1; }
.on-dark .stat__value { color: var(--gold-300); }
.stat__label { font-size: var(--text-sm); color: var(--ink-3); letter-spacing: .02em; }
.on-dark .stat__label { color: var(--paper-ink-2); }
.step-num { font-family: var(--font-display); font-size: 2.6rem; color: transparent; -webkit-text-stroke: 1px var(--gold); line-height: 1; margin-bottom: 1rem; }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.checklist li { display: flex; gap: .8rem; align-items: flex-start; }
.checklist li::before {
  content: "✓"; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem; font-weight: 700; margin-top: .15rem;
  background: rgba(197,158,75,.15); color: var(--gold-600); border: 1px solid var(--gold-hairline);
}
.on-dark .checklist li::before { color: var(--gold-300); }

/* ---------- Founder video block ----------
   Standard component: every major page welcomes the visitor with a message
   from Zak. Use .video-block inside a section near the top of the page. */
.video-block {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 880px) { .video-block { grid-template-columns: 1fr; } }
.video-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(600px 300px at 30% 20%, rgba(197,158,75,.22), transparent 60%),
    linear-gradient(150deg, var(--navy-800), var(--navy-950));
  border: 1px solid var(--gold-hairline);
  box-shadow: 0 30px 60px -20px rgba(6,15,26,.55);
  cursor: pointer;
}
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame__play {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 0;
}
.video-frame__play .play-btn {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(197,158,75,.92); color: var(--navy-950);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 0 0 0 rgba(197,158,75,.4);
}
.video-frame:hover .play-btn { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(197,158,75,.12); }
.video-frame__label {
  position: absolute; left: 1.4rem; bottom: 1.2rem;
  font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-ink-2);
}
.video-frame__duration {
  position: absolute; right: 1.4rem; bottom: 1.2rem;
  font-size: var(--text-xs); color: var(--paper-ink-2); letter-spacing: .1em;
}

/* ---------- Calculator / tool UI ---------- */
.tool-shell {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 880px) { .tool-shell { grid-template-columns: 1fr; } }
.tool-shell__inputs { padding: clamp(1.6rem, 3vw, 2.6rem); }
.tool-shell__results {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: linear-gradient(165deg, var(--navy-900), var(--navy-950));
}
.field { margin-bottom: 1.4rem; }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); font-weight: 620; color: var(--navy-900); margin-bottom: .55rem; }
.field label .field__value { font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold-600); font-weight: 560; }
.field input[type="text"], .field input[type="number"], .field select {
  width: 100%; padding: .85rem 1rem; font: inherit; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--ivory);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197,158,75,.18); }
.field input[type="range"] {
  width: 100%; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--gold) var(--fill, 50%), var(--ivory-2) var(--fill, 50%));
  outline: none;
}
.field input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy-900); border: 3px solid var(--gold); cursor: grab;
  transition: transform .15s var(--ease);
}
.field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.result-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .9rem; border-bottom: 1px solid var(--hairline-dark); }
.result-row:last-child { border-bottom: 0; }
.result-row__label { font-size: var(--text-sm); color: var(--paper-ink-2); }
.result-row__value { font-family: var(--font-display); font-size: var(--text-xl); color: var(--white); white-space: nowrap; }
.result-row--hero .result-row__value { font-size: var(--text-3xl); color: var(--gold-300); }
.result-note { font-size: var(--text-xs); color: var(--paper-ink-2); margin-top: 1.2rem; line-height: 1.6; }

/* ---------- Accordion (FAQ) ---------- */
.accordion { border-top: 1px solid var(--hairline); }
.accordion__item { border-bottom: 1px solid var(--hairline); }
.accordion__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 620 var(--text-lg) var(--font-body); color: var(--navy-900); padding: 1.35rem 0;
}
.accordion__trigger::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-600); transition: transform .3s var(--ease); flex: none; }
.accordion__item.is-open .accordion__trigger::after { transform: rotate(45deg); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.accordion__panel p { color: var(--ink-2); padding-bottom: 1.35rem; max-width: 70ch; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(800px 400px at 15% 120%, rgba(197,158,75,.18), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-950));
  border-radius: var(--radius-lg); padding: clamp(2.5rem, 5vw, 4.5rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
  border: 1px solid var(--hairline-dark);
}
.cta-band h2 { margin-bottom: .4rem; }
.cta-band .actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); padding: 4.5rem 0 2.5rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h5 { font: 640 var(--text-xs) var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); margin: 0 0 1.1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer a { color: var(--paper-ink-2); font-size: var(--text-sm); transition: color .2s; }
.footer a:hover { color: var(--gold-300); }
.footer__legal { border-top: 1px solid var(--hairline-dark); padding-top: 2rem; font-size: var(--text-xs); color: var(--paper-ink-2); line-height: 1.7; }

/* ---------- Reveal animations ---------- */
.reveal { transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal-hidden { opacity: 0; transform: translateY(30px); }
.reveal.no-anim { transition: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-hidden { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utilities ---------- */
.gold { color: var(--gold-600); }
.on-dark .gold { color: var(--gold-300); }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.divider-gold { width: 64px; height: 2px; background: var(--gold); border: 0; margin: 1.5rem 0; }

/* ==========================================================================
   MOTION SYSTEM (2026-07) — fluid, premium, reduced-motion safe
   ========================================================================== */



/* Reveal variants: content is visible at paint; JS hides below-fold only */
.reveal--left.reveal-hidden { transform: translateX(-36px); }
.reveal--right.reveal-hidden { transform: translateX(36px); }
.reveal--scale.reveal-hidden { transform: scale(.94) translateY(14px); }

/* Eyebrow rule draws in when its block reveals */
.eyebrow::before { transform-origin: left; transition: transform .8s var(--ease) .25s; }
.reveal-hidden .eyebrow::before { transform: scaleX(0); }

/* Gold button sheen sweep */
.btn--gold { position: relative; overflow: hidden; }
.btn--gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-20deg); transition: left .55s var(--ease); pointer-events: none;
}
.btn--gold:hover::after { left: 130%; }

/* Nav link underline grow */
.nav__links a { position: relative; }
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links a:not(.btn):hover::after, .nav__links a.is-active:not(.btn)::after { transform: scaleX(1); }

/* Cursor-tracking glow on cards over dark sections + command center */
.card--dark, .command, .protocol-panel, .tool-shell__results {
  position: relative;
}
.glow-track::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(197,158,75,.13), transparent 65%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.glow-track:hover::before { opacity: 1; }
.glow-track > * { position: relative; z-index: 1; }

/* Gentle float for hero visuals */
.float { animation: wsFloat 7s ease-in-out infinite; }
@keyframes wsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Video frame ambient drift */
.video-frame { background-size: 160% 160%; animation: wsDrift 14s ease-in-out infinite alternate; }
@keyframes wsDrift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* Marquee band */
.marquee { overflow: hidden; border-block: 1px solid var(--hairline-dark); padding-block: 1.05rem; background: var(--navy-950); }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: wsMarquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-size: var(--text-xs); font-weight: 620; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-ink-2); white-space: nowrap; }
.marquee__track span em { font-style: normal; color: var(--gold); margin-right: 3rem; }
@keyframes wsMarquee { to { transform: translateX(-50%); } }

/* Result value change pop */
@keyframes wsPop { 0% { transform: scale(1); } 35% { transform: scale(1.06); color: var(--gold-300); } 100% { transform: scale(1); } }
.value-pop { display: inline-block; animation: wsPop .45s var(--ease); }

/* Reading progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 100%; z-index: 200;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  transform-origin: left; transform: scaleX(0); pointer-events: none;
}

/* Reduced motion: kill everything */
@media (prefers-reduced-motion: reduce) {
  .float, .video-frame, .marquee__track, .value-pop { animation: none !important; }
  .reveal-hidden { opacity: 1; transform: none; transition: none; }
  .reveal-hidden .eyebrow::before { transform: scaleX(1); }
  .btn--gold::after { display: none; }
}

/* Phones: long button labels wrap instead of pushing the page wider than the screen. */
@media (max-width: 560px) {
  .btn { max-width: 100%; }
  .btn--lg { white-space: normal; text-align: center; justify-content: center; line-height: 1.3; }
}
@media (max-width: 880px) {
  /* Single-column layouts: slide up instead of sideways so hidden blocks never widen the page. */
  .reveal--left.reveal-hidden, .reveal--right.reveal-hidden { transform: translateY(24px); }
}

/* ---------- Lane pages: compact hero, video as the focal block (2026-09-27) ----------
   Goal: at common laptop sizes the visitor reads the hero, then sees the whole founder
   video and the copy beside it without scrolling. Stats that used to sit in the hero
   now open the next dark section (.hero-stats--lead). */
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.page-hero--compact { padding-top: clamp(7.75rem, 7.35rem + .9vw, 8.75rem); padding-bottom: clamp(1.4rem, 1.1rem + .5vw, 1.7rem); }
.page-hero--compact h1 { font-size: clamp(2rem, 1.35rem + 1.6vw, 2.75rem); max-width: 22ch; }
.page-hero--compact .breadcrumb { margin-bottom: .9rem; }
.page-hero--compact .lede { font-size: var(--text-base); line-height: 1.6; }
.page-hero--compact .hero-actions { margin-top: 1.25rem; }
.page-hero--compact .btn--lg { padding: .95rem 1.8rem; }

.section--video-lead { padding-block: clamp(1.1rem, .9rem + .5vw, 1.4rem) clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.section--video-lead .container { max-width: var(--container-wide); }
.section--video-lead .video-block { grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 3.5vw, 3.5rem); align-items: start; }
@media (max-width: 880px) { .section--video-lead .video-block { grid-template-columns: minmax(0, 1fr); } }
.section--video-lead .video-block h2 { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.3rem); }
.section--video-lead .video-block .eyebrow { margin-bottom: .7rem; }
.section--video-lead .video-block .lede { font-size: var(--text-base); line-height: 1.62; }
.section--video-lead .video-block p.muted { font-size: var(--text-sm); line-height: 1.6; }

.hero-stats.hero-stats--lead { margin-top: 0; padding-top: 0; border-top: 0; padding-bottom: clamp(2rem, 3vw, 2.75rem); margin-bottom: clamp(2.5rem, 4vw, 4rem); border-bottom: 1px solid var(--hairline-dark); }
.hero-stats--lead + p.muted { margin-top: -2.25rem !important; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
/* Compact hero layout: headline + buttons left, description right (wrappers flattened). */
.page-hero--compact .hero-grid { grid-template-columns: 1fr 1.12fr; grid-template-areas: "bc lede" "h1 lede" "act act"; column-gap: clamp(2rem, 5vw, 5rem); row-gap: 0; align-items: start; }
.page-hero--compact .hero-grid > div { display: contents; }
.page-hero--compact .breadcrumb { grid-area: bc; }
.page-hero--compact h1 { grid-area: h1; }
.page-hero--compact .lede { grid-area: lede; align-self: end; margin: 0; max-width: 66ch; }
.page-hero--compact .hero-actions { grid-area: act; margin-top: 1.1rem; }
@media (max-width: 960px) {
  .page-hero--compact .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bc" "h1" "lede" "act"; }
  .page-hero--compact .lede { margin-top: 1rem; }
}
.page-hero--compact .container { max-width: var(--container-wide); }