/* ============================================================
   ARENTHE HOLDINGS — visual system
   Palette per brand kit: primary black #0E0E0E, antique gold
   #C6A664, stone #5F6368, warm off-white #F6F3EE.
   Type: Fraunces (display serif) + Inter (body/UI), self-hosted.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin-opsz-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin-opsz-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --black: #0E0E0E;
  --black-warm: #14110C;
  --black-soft: #171410;
  --charcoal: #2A2A2A;
  --gold: #C6A664;
  --gold-light: #D4BC88;
  --gold-bright: #E2C78F;
  --gold-deep: #8B7340;
  --stone: #5F6368;
  --taupe: #B8B2A7;
  --paper: #F6F3EE;
  --paper-dim: #EDE7DD;
  --ink-on-paper: #221F1A;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

  --space-section: clamp(5rem, 12vh, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 62ch;

  /* Character rig tuning (% of the character box). Values computed by the
     asset pipeline from the approved keyframe geometry; the original-artwork
     fallback overrides them in JS. */
  --ball-x: -3.2%;
  --ball-y: 26.5%;
  --key-x: 79.1%;
  --key-y: 66.7%;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-padding-top: 5.5rem; }
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}
body {
  font-family: var(--font-body);
  font-weight: 380;
  background: var(--black);
  color: #F6F3EE;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: italic; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 540;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

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

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 300;
  padding: 0.6rem 1.1rem;
  background: var(--gold);
  color: var(--black);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 100px;
  transform: translateY(-300%);
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Scroll progress — a thin gold line "building" across the top */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 210;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.2rem, 3.5vw, 2.5rem);
  transition: background 0.4s var(--ease-out), padding 0.35s var(--ease-out),
              box-shadow 0.4s;
}
.nav.scrolled {
  background: rgba(14, 13, 11, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  box-shadow: 0 1px 0 rgba(198, 166, 100, 0.16), 0 12px 32px rgba(0, 0, 0, 0.35);
}
.nav-logo img { height: 34px; width: auto; }
.nav-logo { display: inline-flex; transition: opacity 0.25s; }
.nav-logo:hover { opacity: 0.85; }

.nav-links {
  display: flex;
  gap: clamp(1.1rem, 2.2vw, 2rem);
}
.nav-links a {
  position: relative;
  font-size: 0.75rem;
  font-weight: 520;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, 0.68);
  padding: 0.35rem 0;
  transition: color 0.25s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.35s var(--ease-out);
}
.nav-links a:hover, .nav-links a.is-active { color: #F6F3EE; }
.nav-links a:hover::after, .nav-links a.is-active::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.nav-right { display: flex; align-items: center; gap: 0.9rem; position: relative; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.3rem;
  background: transparent;
  border: 1px solid rgba(198, 166, 100, 0.55);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s var(--ease-out), color 0.3s, border-color 0.3s;
}
.nav-cta:hover, .nav-cta.is-active { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 46px; height: 46px;
  padding: 0 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle-line {
  display: block;
  height: 2px;
  background: #F6F3EE;
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-line:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(12, 11, 9, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
/* The hidden attribute must always win over the flex display above,
   otherwise an invisible overlay would swallow every click. */
.mobile-menu[hidden] { display: none; }
.mobile-menu.open { opacity: 1; }
.mobile-menu ul { text-align: center; display: grid; gap: 0.4rem; }
.mobile-menu a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 520;
  color: #F6F3EE;
  padding: 0.45rem 1.2rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), color 0.25s;
}
.mobile-menu.open a { opacity: 1; transform: translateY(0); }
.mobile-menu a:hover { color: var(--gold-light); }
.mobile-menu li:nth-child(1) a { transition-delay: 0.05s; }
.mobile-menu li:nth-child(2) a { transition-delay: 0.1s; }
.mobile-menu li:nth-child(3) a { transition-delay: 0.15s; }
.mobile-menu li:nth-child(4) a { transition-delay: 0.2s; }
.mobile-menu li:nth-child(5) a { transition-delay: 0.25s; }
.mobile-menu li:nth-child(6) a { transition-delay: 0.3s; }

/* ============================================================
   SHARED SECTION LANGUAGE
   ============================================================ */
section { position: relative; }
.section-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-section) var(--gutter);
}
.section-dark { background: var(--black); }
.section-paper { background: var(--paper); color: var(--ink-on-paper); }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.section-label::before {
  content: '';
  width: 22px; height: 1.5px;
  background: var(--gold);
}
.section-paper .section-label { color: var(--gold-deep); }
.section-paper .section-label::before { background: var(--gold-deep); }

.section-title {
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  margin-bottom: 1.2rem;
}
.section-lead {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 340;
  color: rgba(246, 243, 238, 0.72);
  max-width: var(--measure);
  line-height: 1.75;
}
.section-paper .section-lead { color: #55524B; }
.section-head { max-width: 780px; }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 100px;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out),
              background 0.3s, color 0.3s, border-color 0.3s;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary {
  background: var(--gold);
  color: #131008;
  box-shadow: 0 4px 20px rgba(198, 166, 100, 0.22);
}
.btn-primary::after {
  /* sheen sweep */
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease-out);
}
.btn-primary:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(198, 166, 100, 0.34);
}
.btn-primary:hover::after { left: 130%; }
.btn-ghost {
  background: transparent;
  color: #F6F3EE;
  border: 1px solid rgba(246, 243, 238, 0.28);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-2px);
}

.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ============================================================
   SCENE 1 · HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 74% 30%, rgba(198, 166, 100, 0.09) 0%, transparent 55%),
    linear-gradient(168deg, var(--black) 0%, var(--black-warm) 55%, #1B1610 100%);
  padding: 6.5rem var(--gutter) 8rem;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(198, 166, 100, 0.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(198, 166, 100, 0.05) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 0%, transparent 78%);
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 88%, rgba(198, 166, 100, 0.06) 0%, transparent 42%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1.5px;
  background: var(--gold);
}

.hero-title {
  font-size: clamp(2.9rem, 7.2vw, 5.6rem);
  font-weight: 560;
  color: #F6F3EE;
  max-width: 12ch;
  margin-bottom: 1.1rem;
}
.hero-title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
.hero-title .wi { display: inline-block; }

.hero-pron {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--gold-light);
  letter-spacing: 0.02em;
  margin-bottom: 1.4rem;
}
.hero-lead {
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  font-weight: 340;
  color: rgba(246, 243, 238, 0.75);
  max-width: 46ch;
  line-height: 1.75;
  margin-bottom: 2.2rem;
}

/* Character stage */
.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.baseline {
  position: absolute;
  left: 0; right: 0;
  bottom: 11vh;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(198, 166, 100, 0.55) 18%, rgba(198, 166, 100, 0.55) 82%, transparent 100%);
  transform-origin: 0 50%;
}
.char-rig {
  position: absolute;
  bottom: 11vh;
  left: 66%;
  width: clamp(170px, 24vh, 300px);
  will-change: transform;
}
.char-bob { position: relative; transform-origin: 50% 100%; }
.char-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.45));
}
.char-img--walk-a, .char-img--walk-b {
  position: absolute;
  inset: 0;
  opacity: 0;
}
/* Ground contact shadow (suppressed while the layered rig — which carries the
   original artwork's own shadow layer — is active) */
.char-bob.rig-on::after { content: none; }
.char-bob::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%;
  bottom: -2.2%;
  height: 5%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.5), transparent 70%);
  border-radius: 50%;
}

/* Ball on the raised fingertip */
.ball-anchor {
  position: absolute;
  left: var(--ball-x);
  top: var(--ball-y);
  width: 34%;
  aspect-ratio: 1;
}
.ball { position: absolute; inset: 0; transform-origin: 50% 50%; }
.ball svg { width: 100%; height: 100%; }
.spin-swirl {
  position: absolute;
  left: 50%; top: 50%;
  width: 190%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
}

/* Approved keyframes stack above the base drawing */
.kf {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Double-poof anchors for the composite exchange (% of the character box) */
.poof-anchor--finger { left: var(--pf-x, 26%); top: var(--pf-y, 14%); }
.poof-anchor--key    { left: var(--pk-x, 64%); top: var(--pk-y, 46%); }

/* Generated transparent clips sit over the base drawing.
   The clip's character occupies ~54% of its frame width while the keyframe
   stills fill ~88% of theirs, so the video canvas is oversized (164%) and
   centered to make the two characters render at the same on-page scale,
   with feet shared on the baseline. */
.char-video {
  position: absolute;
  width: 164%;
  left: -32%;
  bottom: 0;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  pointer-events: none;
}

/* House layer that lands on the fingertip after the trick */
.finger-house {
  position: absolute;
  left: 50%; top: 50%;
  width: 112%;
  height: auto;
  transform: translate(-50%, -55%);
  transform-origin: 50% 62%;
  opacity: 0;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}

/* Key-ring anchor: charm layers hang and swing from the ring */
.key-anchor {
  position: absolute;
  left: var(--key-x, 58%);
  top: var(--key-y, 46%);
  width: 30%;
  aspect-ratio: 1;
  pointer-events: none;
}
.key-swing {
  position: absolute;
  inset: 0;
  transform-origin: 50% 8%;   /* hangs from the ring */
}
.mini-house, .mini-ball {
  position: absolute;
  left: 50%;
  top: 12%;
  opacity: 0;                  /* layers appear only in the upgraded rig */
}
.mini-house {
  width: 56%;
  transform: translateX(-50%);
  transform-origin: 50% 0;
}
.mini-ball {
  width: 34%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  transform-origin: 50% 0;
}
.mini-ball svg { width: 100%; height: 100%; }

.poof--small span { width: 6px; height: 6px; }
.poof--small .poof-ring { left: -18px; top: -18px; width: 36px; height: 36px; }

/* Story-scene house: wrapper takes scroll-scrubbed offsets, inner element loops */
.house-wrap { position: absolute; inset: 0; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  z-index: 3;
}
.scroll-cue span {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, 0.45);
}
.scroll-line {
  width: 1.5px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ============================================================
   SCENE 2 · POSITIONING — numbered path
   ============================================================ */
.positioning {
  background: linear-gradient(180deg, var(--black) 0%, var(--black-soft) 100%);
}
.path-steps { position: relative; margin-top: 3.5rem; }
.path-track {
  position: absolute;
  top: 1.15rem;
  left: 0; right: 0;
  height: 2px;
  background: rgba(198, 166, 100, 0.14);
}
.path-track span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.step { position: relative; padding-top: 3.4rem; }
.step::before {
  content: '';
  position: absolute;
  top: 0.7rem;
  left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--black);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(198, 166, 100, 0.12);
}
.step-num {
  position: absolute;
  top: -0.6rem;
  right: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 166, 100, 0.34);
}
.step h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  color: var(--gold-light);
  margin-bottom: 0.6rem;
}
.step p {
  font-size: 0.95rem;
  color: rgba(246, 243, 238, 0.7);
  line-height: 1.7;
  max-width: 34ch;
}

/* ============================================================
   SCENE 3 · MEANING
   ============================================================ */
.meaning {
  background: linear-gradient(180deg, var(--black-soft) 0%, #191512 100%);
  overflow: hidden;
}
.ghost-word {
  position: absolute;
  top: 50%;
  right: -0.08em;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(10rem, 26vw, 24rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(198, 166, 100, 0.13);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.meaning-inner { position: relative; z-index: 1; }
.meaning-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: 2.4rem;
}
.meaning-lead { max-width: none; }
.meaning-note {
  margin-top: 1.7rem;
  padding: 1.2rem 1.45rem;
  background: rgba(198, 166, 100, 0.07);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  font-size: 0.97rem;
  color: rgba(246, 243, 238, 0.85);
  line-height: 1.7;
  max-width: 56ch;
}
.meaning-note strong { color: var(--gold-light); font-weight: 560; }
.meaning-panel {
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  border: 1px solid rgba(198, 166, 100, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(198, 166, 100, 0.06), transparent 60%),
    rgba(10, 9, 7, 0.5);
  position: relative;
}
.meaning-panel::before, .meaning-panel::after {
  /* blueprint corner ticks */
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--gold);
  border-style: solid;
}
.meaning-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.meaning-panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
.meaning-word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  color: var(--gold);
  line-height: 1.1;
}
.meaning-caption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, 0.5);
}

/* ============================================================
   SCENE 4 · TRANSFORMATION (sticky)
   ============================================================ */
.transform {
  /* Tall section = the scene's scroll distance; the pin is CSS-sticky and
     GSAP only scrubs the timeline across it. */
  height: 270vh;
  background: #191512;
}
.transform-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 60% 55% at 38% 58%, rgba(198, 166, 100, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, #191512 0%, var(--black-warm) 60%, var(--black) 100%);
}
.transform-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(198, 166, 100, 0.06) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(198, 166, 100, 0.06) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 38% 55%, #000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 75% at 38% 55%, #000 0%, transparent 80%);
}
.transform-spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 38% 40%, rgba(226, 199, 143, 0.08), transparent 45%);
}
.transform-stage { position: absolute; inset: 0; }
.baseline--transform { bottom: 9vh; }
.tchar-rig {
  position: absolute;
  bottom: 9vh;
  left: clamp(4%, 16vw, 26%);
  width: clamp(200px, 30vh, 360px);
}
.tchar-rig .char-img { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.5)); }
.ball-anchor--transform { width: 38%; }
.spin-swirl--big { width: 210%; }

.house {
  position: absolute;
  left: 50%; top: 50%;
  width: 118%;
  height: auto;
  transform: translate(-50%, -54%);
  transform-origin: 50% 60%;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.4));
}
.js .house { opacity: 0; }

/* Poof burst */
.poof {
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  pointer-events: none;
}
.poof span {
  position: absolute;
  left: -5px; top: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
}
.poof span:nth-child(3n) { background: var(--gold); width: 7px; height: 7px; }
.poof span:nth-child(4n) { background: #F6F3EE; width: 5px; height: 5px; }
.poof-ring {
  position: absolute;
  left: -30px; top: -30px;
  width: 60px; height: 60px;
  border: 2px solid rgba(226, 199, 143, 0.9);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.2);
}

.transform-copy {
  position: absolute;
  z-index: 4;
  right: clamp(4%, 8vw, 12%);
  top: 50%;
  transform: translateY(-50%);
  width: min(44%, 480px);
}
.tline {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 480;
  font-style: italic;
  line-height: 1.3;
  color: var(--gold-bright);
}
.js .tline { opacity: 0; transform: translateY(24px); }
.tline--handoff {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 380;
  color: rgba(246, 243, 238, 0.8);
  line-height: 1.7;
}

/* Reduced-motion / static composition for the transform scene:
   a calm centered figure with the house, quote lines stacked beneath.
   The same rules cover browsers where JS never ran. */
.transform.is-static, html:not(.js) .transform { height: auto; }
.transform.is-static .transform-pin,
html:not(.js) .transform .transform-pin {
  position: relative;
  height: auto;
  min-height: 0;
  padding: var(--space-section) var(--gutter);
  display: block;
}
.transform.is-static .transform-stage,
html:not(.js) .transform .transform-stage {
  position: static;
  display: flex;
  justify-content: center;
}
.transform.is-static .baseline,
html:not(.js) .transform .baseline { display: none; }
.transform.is-static .tchar-rig,
html:not(.js) .transform .tchar-rig {
  /* Stays position:relative so .ball-anchor keeps the rig as its containing block */
  position: relative;
  inset: auto;
  width: clamp(190px, 30vh, 320px);
}
.transform.is-static .tline,
html:not(.js) .transform .tline {
  position: static;
  opacity: 1;
  transform: none;
  margin-bottom: 1rem;
}
.transform.is-static .transform-copy,
html:not(.js) .transform .transform-copy {
  position: static;
  transform: none;
  width: auto;
  max-width: 620px;
  margin: 2.2rem auto 0;
  text-align: center;
}
.transform.is-static .ball, .transform.is-static .spin-swirl,
html:not(.js) .transform .ball, html:not(.js) .transform .spin-swirl { opacity: 0; }
.transform.is-static .house,
html:not(.js) .transform .house { opacity: 0; }

/* ============================================================
   SCENE 5 · FOCUS
   ============================================================ */
.focus { background: linear-gradient(180deg, var(--black) 0%, var(--black-soft) 100%); }
.focus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: 3rem;
}
.focus-item {
  position: relative;
  padding: 1.9rem 1.8rem 1.8rem;
  border: 1px solid rgba(198, 166, 100, 0.16);
  border-radius: 14px;
  background: rgba(38, 33, 26, 0.35);
  transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out),
              background 0.35s;
}
.focus-item:hover {
  border-color: rgba(198, 166, 100, 0.4);
  background: rgba(38, 33, 26, 0.55);
  transform: translateY(-4px);
}
.focus-item::before, .focus-item::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(198, 166, 100, 0.0);
  border-style: solid;
  transition: border-color 0.35s;
}
.focus-item::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; }
.focus-item::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 6px 0; }
.focus-item:hover::before, .focus-item:hover::after { border-color: var(--gold); }
.key-mark {
  width: 44px;
  color: var(--gold);
  margin-bottom: 0.9rem;
  opacity: 0.9;
}
.focus-item h3 {
  font-size: 1.35rem;
  color: var(--gold-light);
  margin-bottom: 0.55rem;
}
.focus-item p {
  font-size: 0.95rem;
  color: rgba(246, 243, 238, 0.72);
  line-height: 1.7;
}

/* ============================================================
   SCENE 6 · HOW WE WORK (paper)
   ============================================================ */
.how { border-top: 4px solid var(--gold); }
.how-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: 3rem;
  counter-reset: how;
}
.how-item { position: relative; padding-top: 1.6rem; }
.how-rule {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--gold-deep), rgba(139, 115, 64, 0.25));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.js .how-rule { transform: scaleX(0); }
.how-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 340;
  color: var(--gold-deep);
  line-height: 1;
  display: block;
  margin-bottom: 0.7rem;
}
.how-item h3 {
  font-size: 1.3rem;
  color: var(--ink-on-paper);
  margin-bottom: 0.45rem;
}
.how-item p {
  font-size: 0.92rem;
  color: #55524B;
  line-height: 1.65;
}

/* ============================================================
   SCENE 7 · MISSION & VISION (paper)
   ============================================================ */
.mission { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dim) 100%); }
.mv-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  margin-top: 2.8rem;
  align-items: stretch;
}
.mv-divider {
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}
.mv-block h3 {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 640;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1rem;
}
.mv-statement {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 460;
  line-height: 1.42;
  color: var(--ink-on-paper);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* ============================================================
   SCENE 8 · CTA
   ============================================================ */
.cta { overflow: hidden; }
.cta-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(198, 166, 100, 0.12) 0%, transparent 48%);
  pointer-events: none;
}
.cta-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  position: relative;
}
.cta-content { padding-bottom: 2.5rem; }
.cta-content .section-title { font-size: clamp(2.4rem, 5vw, 4rem); }
.cta-content .section-lead { margin-bottom: 2.2rem; }
.cta-figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 320px;
}
.cta-figure img {
  width: clamp(200px, 26vh, 320px);
  height: auto;
  filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.5));
  position: relative;
  z-index: 1;
}
.baseline--cta {
  bottom: 0;
  left: -8%;
  right: -8%;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--black);
  border-top: 1px solid rgba(198, 166, 100, 0.14);
  padding: 3.2rem var(--gutter) 1.6rem;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.25rem;
}
.footer-brand img { height: 36px; width: auto; margin-bottom: 0.9rem; opacity: 0.95; }
.footer-brand p {
  font-size: 0.86rem;
  color: rgba(246, 243, 238, 0.45);
  max-width: 240px;
  line-height: 1.6;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 640;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a {
  font-size: 0.86rem;
  color: rgba(246, 243, 238, 0.55);
  transition: color 0.25s;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  max-width: 1160px;
  margin: 2.4rem auto 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(246, 243, 238, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.74rem;
  color: rgba(246, 243, 238, 0.35);
}
.footer-bottom-links a {
  color: rgba(246, 243, 238, 0.42);
  margin-left: 1.25rem;
  transition: color 0.25s;
}
.footer-bottom-links a:hover { color: var(--gold-light); }

/* ============================================================
   LENDER CREDIBILITY / TRACK RECORD
   ============================================================ */
.hero-skip {
  position: absolute;
  right: var(--gutter);
  bottom: 1.8rem;
  z-index: 8;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(246, 243, 238, 0.22);
  border-radius: 999px;
  background: rgba(12, 11, 9, 0.66);
  color: rgba(246, 243, 238, 0.72);
  font: 600 0.68rem/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.hero-skip:hover, .hero-skip:focus-visible {
  color: var(--gold-bright);
  border-color: rgba(198, 166, 100, 0.7);
  background: rgba(20, 17, 12, 0.92);
}
.hero-skip[hidden] { display: none; }

.proof-bar {
  border-top: 1px solid rgba(198, 166, 100, 0.28);
  border-bottom: 1px solid rgba(198, 166, 100, 0.22);
  background: #0e0d0b;
}
.proof-bar-inner {
  width: min(1180px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.proof-bar-inner > div {
  min-height: 118px;
  padding: 1.6rem clamp(1rem, 2vw, 1.8rem);
  border-right: 1px solid rgba(198, 166, 100, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.proof-bar-inner > div:first-child { border-left: 1px solid rgba(198, 166, 100, 0.16); }
.proof-bar strong {
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 560;
  line-height: 1.1;
}
.proof-bar span {
  margin-top: 0.45rem;
  color: rgba(246, 243, 238, 0.58);
  font-size: 0.74rem;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.track-record { border-top: 1px solid rgba(198, 166, 100, 0.18); }
.track-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-top: 2.8rem;
}
.track-card {
  min-height: 270px;
  padding: clamp(1.5rem, 2.8vw, 2.2rem);
  border: 1px solid rgba(198, 166, 100, 0.2);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(198, 166, 100, 0.07), rgba(23, 20, 16, 0.25));
}
.track-kicker {
  display: block;
  margin-bottom: 1.15rem;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.track-card h3 { color: var(--gold-bright); font-size: 1.45rem; margin-bottom: 0.9rem; }
.track-card p { color: rgba(246, 243, 238, 0.7); line-height: 1.7; }
.track-foot {
  margin-top: 1.8rem;
  padding: 1.3rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid rgba(198, 166, 100, 0.18);
}
.track-foot p { max-width: 62ch; color: rgba(246, 243, 238, 0.68); line-height: 1.65; }
.track-foot .btn { flex: 0 0 auto; }

/* ============================================================
   SECONDARY PAGES (contact / privacy / lenders)
   ============================================================ */
.page-main {
  min-height: 60vh;
  padding: clamp(8rem, 16vh, 10.5rem) var(--gutter) var(--space-section);
  background:
    radial-gradient(ellipse 50% 35% at 80% 0%, rgba(198, 166, 100, 0.07) 0%, transparent 60%),
    var(--black);
}
.page-inner { max-width: 760px; margin: 0 auto; }
.page-title { font-size: clamp(2.3rem, 4.5vw, 3.4rem); margin-bottom: 1rem; }
.page-lead {
  font-size: 1.08rem;
  font-weight: 340;
  color: rgba(246, 243, 238, 0.72);
  line-height: 1.75;
  max-width: 52ch;
  margin-bottom: 2.6rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-bottom: 2.6rem;
}
.contact-card {
  position: relative;
  padding: 1.6rem 1.7rem;
  border: 1px solid rgba(198, 166, 100, 0.18);
  border-radius: 14px;
  background: rgba(38, 33, 26, 0.35);
}
.contact-card h2 {
  font-size: 1.2rem;
  color: var(--gold-light);
  margin-bottom: 0.45rem;
}
.contact-card p, .contact-card a { font-size: 0.95rem; color: rgba(246, 243, 238, 0.75); }
.contact-card a { color: var(--gold-light); transition: color 0.25s; }
.contact-card a:hover { color: var(--gold-bright); }

.contact-form {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(198, 166, 100, 0.16);
  border-radius: 16px;
  background: rgba(23, 20, 16, 0.6);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group { margin-bottom: 1.3rem; }
.contact-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 540;
  letter-spacing: 0.05em;
  color: rgba(246, 243, 238, 0.75);
  margin-bottom: 0.45rem;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background: rgba(12, 11, 9, 0.65);
  border: 1px solid rgba(198, 166, 100, 0.22);
  border-radius: 10px;
  color: #F6F3EE;
  font-family: inherit;
  font-size: 0.96rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 166, 100, 0.18);
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form .btn { border: none; cursor: pointer; font-family: inherit; }
.form-note { margin-top: 1rem; font-size: 0.8rem; color: rgba(246, 243, 238, 0.45); }
.form-note a { color: var(--gold-light); }
.field-optional { color: rgba(246, 243, 238, 0.42); font-weight: 400; }
.form-honeypot {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.lender-page { padding-bottom: 0; }
.lender-inner { max-width: 1100px; }
.lender-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 3rem 0 0;
  border: 1px solid rgba(198, 166, 100, 0.22);
  border-radius: 12px;
  overflow: hidden;
}
.lender-facts > div {
  min-height: 125px;
  padding: 1.5rem;
  border-right: 1px solid rgba(198, 166, 100, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lender-facts > div:last-child { border-right: 0; }
.lender-facts strong {
  color: var(--gold-bright);
  font: 560 clamp(1.55rem, 3vw, 2.15rem)/1.1 var(--font-display);
}
.lender-facts span {
  margin-top: 0.45rem;
  color: rgba(246, 243, 238, 0.58);
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lender-section {
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  border-bottom: 1px solid rgba(198, 166, 100, 0.18);
}
.lender-section-head { max-width: 760px; margin-bottom: 2.2rem; }
.lender-section h2, .lender-request h2 {
  color: var(--off-white);
  font: 520 clamp(2rem, 4vw, 3.2rem)/1.12 var(--font-display);
  margin-bottom: 1rem;
}
.lender-section-head > p:last-child,
.lender-columns p,
.lender-request-copy > p {
  color: rgba(246, 243, 238, 0.7);
  line-height: 1.75;
}
.lender-columns { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: clamp(2rem, 6vw, 5rem); }
.lender-columns > div p + p { margin-top: 1rem; }
.lender-note {
  padding: 1.6rem;
  border-left: 2px solid var(--gold);
  background: rgba(198, 166, 100, 0.06);
}
.lender-note strong { color: var(--gold-bright); font-family: var(--font-display); font-size: 1.25rem; }
.lender-note p { margin: 0.6rem 0 1rem; }
.lender-note span { color: rgba(246, 243, 238, 0.5); font-size: 0.78rem; line-height: 1.5; }
.readiness-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.readiness-grid article {
  min-height: 220px;
  padding: 1.7rem;
  border: 1px solid rgba(198, 166, 100, 0.18);
  border-radius: 12px;
  background: rgba(23, 20, 16, 0.42);
}
.readiness-grid article > span { color: var(--gold); font-size: 0.72rem; letter-spacing: 0.12em; }
.readiness-grid h3 { color: var(--gold-bright); font-size: 1.35rem; margin: 0.8rem 0 0.7rem; }
.readiness-grid p { color: rgba(246, 243, 238, 0.65); line-height: 1.65; }
.finance-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; list-style: none; }
.finance-list li {
  padding: 1rem 1rem 1rem 1.6rem;
  border-bottom: 1px solid rgba(198, 166, 100, 0.16);
  color: rgba(246, 243, 238, 0.78);
  position: relative;
}
.finance-list li::before { content: ''; position: absolute; left: 0; top: 1.55rem; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.lender-request {
  margin: 0 calc(-1 * var(--gutter));
  padding: clamp(4.5rem, 9vw, 7rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1.3fr);
  gap: clamp(2rem, 6vw, 5rem);
  background: linear-gradient(145deg, rgba(198, 166, 100, 0.09), rgba(12, 11, 9, 0.95));
}
.lender-contact { margin-top: 1.4rem; }
.lender-contact a { color: var(--gold-bright); }
.lender-form { align-self: start; }
.thank-page { min-height: 78vh; display: grid; align-items: center; }
.thank-panel { padding: 3rem 0; }

.policy h2 {
  font-size: 1.5rem;
  color: var(--gold-light);
  margin: 2.4rem 0 0.75rem;
}
.policy p, .policy li {
  font-size: 0.96rem;
  color: rgba(246, 243, 238, 0.78);
  margin-bottom: 0.9rem;
  line-height: 1.7;
}
.policy ul { margin: 0.5rem 0 1.25rem 1.25rem; list-style: disc; }
.policy li { margin-bottom: 0.4rem; }
.policy a { color: var(--gold-light); }
.policy a:hover { color: var(--gold-bright); }
.updated { font-size: 0.85rem; color: rgba(246, 243, 238, 0.5); margin-bottom: 2.4rem; }

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

/* ============================================================
   ANIMATION PRE-STATES (JS-gated via <html class="js">)
   Without JS, everything is fully visible.
   ============================================================ */
.js [data-hero] { opacity: 0; }
.js .hero-title .wi { transform: translateY(110%); }
.js [data-hero="baseline"] { opacity: 1; transform: scaleX(0); }
.js .char-rig { opacity: 0; }
.js #heroBall, .js #heroSwirl { opacity: 0; }
.js [data-reveal] { opacity: 0; transform: translateY(30px); }
.js .section-paper [data-reveal] { transform: translateY(24px); }

/* Failsafe: if the script fails after the .js gate was set, reveal everything */
@keyframes revealFailsafe { to { opacity: 1; transform: none; } }
html.js:not(.gsap-ready) [data-hero],
html.js:not(.gsap-ready) .hero-title .wi,
html.js:not(.gsap-ready) .char-rig,
html.js:not(.gsap-ready) #heroBall,
html.js:not(.gsap-ready) #heroSwirl,
html.js:not(.gsap-ready) [data-reveal] {
  animation: revealFailsafe 0s 3s forwards;
}

/* Reduced motion: show everything, disable ambience */
@media (prefers-reduced-motion: reduce) {
  .js [data-hero], .js .char-rig, .js [data-reveal] { opacity: 1; transform: none; }
  .js .hero-title .wi { transform: none; }
  .js [data-hero="baseline"] { transform: none; }
  .js #heroBall, .js #heroSwirl,
  .js .finger-house, .js .mini-house, .js .mini-ball { opacity: 0; }
  .scroll-line { animation: none; }
  .btn-primary::after { display: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .char-rig { left: 70%; }
}

@media (max-width: 960px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { min-height: 44px; padding: 0.6rem 1.4rem; }

  .hero {
    align-items: flex-start;
    padding-top: 7.5rem;
    padding-bottom: 42vh;
  }
  .hero-title { max-width: none; }
  .char-rig {
    left: auto;
    right: 8%;
    width: clamp(150px, 28vw, 200px);
    bottom: 9vh;
  }
  .baseline { bottom: 9vh; }

  .steps { grid-template-columns: 1fr; gap: 2.2rem; }
  .path-track { top: 0; left: 0.55rem; right: auto; width: 2px; height: 100%; }
  .path-track span { transform-origin: 50% 0; }
  .step { padding-top: 0; padding-left: 2.6rem; }
  .step::before { top: 0.5rem; left: 0; }
  .step-num { position: static; display: block; margin-bottom: 0.3rem; font-size: 2.6rem; }

  .meaning-grid { grid-template-columns: 1fr; }
  .ghost-word { font-size: 15rem; opacity: 0.7; }

  .transform { height: 230vh; }
  .tchar-rig { left: 6%; width: clamp(170px, 24vh, 240px); }
  .transform-copy {
    right: 5%;
    left: auto;
    top: auto;
    bottom: 12vh;
    transform: none;
    width: min(60%, 420px);
    text-align: right;
  }
  .transform.is-static .transform-copy,
html:not(.js) .transform .transform-copy { text-align: left; margin-left: 0; }

  .focus-grid { grid-template-columns: 1fr; }
  .how-row { grid-template-columns: 1fr 1fr; }

  .mv-grid { grid-template-columns: 1fr; }
  .mv-divider { width: 40%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

  .cta-grid { grid-template-columns: 1fr; align-items: start; }
  .cta-content { padding-bottom: 0; }
  .cta-figure { min-height: 260px; margin-top: 1rem; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links a { margin: 0 0.6rem; }
}

@media (max-width: 600px) {
  .how-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero { padding-bottom: 46vh; }
  .char-rig { right: 5%; width: clamp(140px, 36vw, 175px); }
  /* Diagonal composition: copy top-right, character bottom-left. */
  .transform-copy { width: 88%; right: 6%; top: 13vh; bottom: auto; }
  .tchar-rig { left: 2%; width: clamp(150px, 20vh, 200px); }
}

/* Short viewports: keep hero usable */
@media (max-height: 620px) {
  .hero { padding-top: 5.5rem; padding-bottom: 3rem; }
  .hero-lead { margin-bottom: 1.4rem; }
  .hero-title { font-size: clamp(2.4rem, 6vw, 4rem); }
  .char-rig { width: clamp(130px, 20vh, 190px); }
  .scroll-cue { display: none; }
}

/* ============================================================================
   Approved character system v5 (Gates A2 / B / C / D) — added at Gate E.
   The caricature is delivered as frames rendered from the layered rig; the
   flattened original artwork is no longer used anywhere on the page.
   ========================================================================== */
.char-frame {
  width: 100%;
  height: auto;
  display: block;
}
/* The hero scene frame is 2400 px wide with the character occupying 1836 of it,
   so it is scaled to 2400/1836 of the character box and pulled left by 300/1836.
   That lands the character on exactly the mark the layout already defined. */
#heroChar .char-frame {
  width: 130.719%;
  /* The global `img { max-width: 100% }` was clamping the 2400-wide scene back
     to the host width, rendering the character ~23% under the approved size.
     Released for this one image only — the id+class selector cannot reach the
     logo, content imagery, the CTA artwork or the scroll character, and the
     global rule is untouched. Width stays a percentage of the host, so every
     breakpoint below scales with it and the aspect ratio and transparent
     padding are preserved. */
  max-width: none;
  margin-left: -16.340%;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.45));
}
/* Reserve the stage before the first frame decodes: no layout shift, no flash. */
.char-rig { aspect-ratio: 1836 / 2376; }
.tchar-rig { aspect-ratio: 1836 / 2376; }
.char-rig.rig-on::after, .char-bob.rig-on::after { content: none; }
.tchar-rig .char-frame { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.5)); }

@media (prefers-reduced-motion: reduce) {
  .char-frame { transition: opacity .35s ease; }
}


/* Gate E R2 — the hero character must never be invisible.
   css line 1283 sets `.js .char-rig { opacity: 0 }` so that JS can animate the
   caricature in. The v5 system does not animate the host (the motion lives in
   the frames), and js/rig-site.js — which used to perform that reveal — is no
   longer loaded, so the gate was never released and the hero rendered blank.
   This keys off `.js` rather than the v5 class deliberately: the poster stays
   visible even if js/char-v5.js fails to load or throws. */
html.js .char-rig { opacity: 1; }

/* Reduced motion shows every beat at once, so they must not be stacked. */
@media (prefers-reduced-motion: reduce) {
  .transform-copy .tline {
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin-bottom: 0.7em;
  }
}

/* ============================================================================
   Gate E R3 — mobile hero framing.

   `.hero` is min-height:100dvh but carried padding-bottom:42–46vh, so its real
   height exceeded the viewport (987 px against 844, 995 against 800). The
   character is absolutely positioned `bottom` from THAT box, so it landed 67 px
   (390) and 123 px (320) below the fold. The fix reclaims the excess padding so
   the hero settles at exactly 100dvh — then `bottom` is measured from the
   viewport bottom and is deterministic. The character is reduced only slightly
   at the narrowest widths, and the gold baseline moves with it so he still
   stands on the line. Desktop (>960px) and the approved scroll story are
   untouched.
   ========================================================================== */
@media (max-width: 960px) {
  .hero { padding-bottom: 26vh; }
}

@media (max-width: 600px) {
  .hero { padding-top: 6rem; padding-bottom: 22vh; }
  .hero-title { font-size: clamp(2.2rem, 8vw, 3rem); }
  .hero-lead { margin-bottom: 1.1rem; }
  .char-rig { right: 4%; width: clamp(132px, 34vw, 168px); bottom: 7vh; }
  .baseline { bottom: 7vh; }
}

@media (max-width: 400px) {
  .hero { padding-top: 5.5rem; padding-bottom: 20vh; }
  .hero-title { font-size: clamp(2rem, 7.4vw, 2.6rem); }
  .hero-lead { margin-bottom: 0.9rem; }
  .char-rig { width: clamp(124px, 39vw, 148px); bottom: 6vh; }
  .baseline { bottom: 6vh; }
}

/* Final desktop hero scale. The character was visually secondary at the
   previous 24vh size. Increase only the desktop host by 25%; the transparent
   scene registration and aspect ratio remain unchanged, while tablet/mobile
   and the scroll-story character retain their approved dimensions. */
@media (min-width: 961px) {
  .char-rig { width: clamp(220px, 30vh, 360px); }
}

/* Launch-ready lender content. */
@media (max-width: 820px) {
  .proof-bar-inner, .lender-facts { grid-template-columns: 1fr 1fr; }
  .proof-bar-inner > div:nth-child(2), .lender-facts > div:nth-child(2) { border-right: 0; }
  .proof-bar-inner > div:nth-child(-n+2), .lender-facts > div:nth-child(-n+2) { border-bottom: 1px solid rgba(198, 166, 100, 0.16); }
  .track-grid { grid-template-columns: 1fr; }
  .track-card { min-height: 0; }
  .lender-columns, .lender-request { grid-template-columns: 1fr; }
  .lender-request { margin-inline: calc(-1 * var(--gutter)); }
}

@media (max-width: 700px) {
  .form-row, .readiness-grid, .finance-list { grid-template-columns: 1fr; }
  .track-foot { align-items: flex-start; flex-direction: column; }
  .hero-skip { right: 1rem; bottom: 1rem; }
}

@media (max-width: 600px) {
  .nav-right .nav-cta { display: none; }
  .proof-bar-inner { width: 100%; }
  .proof-bar-inner > div { min-height: 105px; }
  .lender-facts > div { min-height: 110px; padding: 1.2rem; }
  .lender-section { padding-block: 4rem; }
}