/* Corner Lot Studio — cornerlotstudio.com
   Palette: brand/brand.json (Hedge & Daylight) · Type: Satoshi (self-hosted)
   Layout language: daylight paper, hairlines, asymmetry, hedge as ink. */

@font-face { font-family: 'Satoshi'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../brand/fonts/Satoshi-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../brand/fonts/Satoshi-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../brand/fonts/Satoshi-Bold.woff2') format('woff2'); }

:root {
  /* Type — Satoshi only (brand). Exposed as a token so the listing pieces in
     work/*.html, which set font-family: var(--font-sans), inherit the brand face. */
  --font-sans: 'Satoshi', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --daylight: #fbfaf6;
  --hedge: #29483a;
  --hedge-deep: #1f3a2e;
  --sage: #c9d4c2;
  --ink: #1d211e;
  --ink-soft: #4a544d;
  --ink-faint: #6f7a72;
  --panel: #f1efe7;
  --line: #e3e0d4;
  --night: #101216;

  --space-xs: 8px; --space-sm: 12px; --space-md: 24px;
  --space-lg: 48px; --space-xl: 96px; --space-2xl: clamp(96px, 14vw, 180px);

  --text-xs: 0.6875rem;   /* 11 — labels */
  --text-sm: 0.8125rem;   /* 13 — captions, menu notes */
  --text-base: 1rem;      /* 16 — body */
  --text-md: 1.3125rem;   /* 21 — lede */
  --text-lg: clamp(1.75rem, 3.2vw, 2.625rem);   /* section titles */
  --text-xl: clamp(2.75rem, 7.2vw, 6.5rem);     /* hero statement */

  --butter: #EFE1A8;
  --butter-ink: #4D472C;
  --oat: #B3A88A;

  --track-label: 0.22em;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--daylight);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- paper grain (decorative, fixed, never interactive) ----------
   Intentionally paints OVER static in-flow content (a fixed z-index:0 box wins
   the stacking against non-positioned siblings) — that's what lets the multiply
   texture show. Do not "fix" the layering; header is z-index:50 and stays above. */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain { opacity: 0.4; } }

::selection { background: var(--butter); color: var(--ink); }

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--hedge); outline-offset: 3px; }

.container { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }

/* ---------- labels & shared type ---------- */
.label {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.label--hedge { color: var(--hedge); }
.tag-butter {
  background: var(--butter); color: var(--butter-ink);
  padding: 5px 10px;
}
.tag {
  display: inline-block;
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 5px 10px;
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md);
  border-top: 1px solid var(--line);
  padding-top: var(--space-sm);
  margin-bottom: clamp(32px, 5vw, 64px);
}
.section-head h2 {
  font-size: var(--text-lg); font-weight: 700; letter-spacing: 0.005em;
  margin: 0; text-wrap: balance;
}

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: var(--daylight);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding-block: 14px;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-lockup .mark { height: 20px; width: 20px; flex: none; }
.site-footer .lockup { display: flex; align-items: center; gap: 10px; }
.site-footer .lockup .mark { height: 22px; width: 22px; flex: none; }
.wordmark-text {
  font-weight: 700; font-size: 0.8125rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.wordmark-text--light { color: var(--daylight); font-size: 0.9375rem; }
.site-nav { display: flex; gap: clamp(14px, 2.4vw, 30px); align-items: center; }
.site-nav a {
  text-decoration: none; font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft);
  transition: color 0.25s var(--ease-out);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--hedge); }
.site-nav a.btn { color: var(--daylight); }
.site-nav a.btn:hover { color: var(--daylight); }
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  background: var(--hedge); color: var(--daylight);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 13px 24px; border: 1px solid var(--hedge);
  transition: background 0.25s var(--ease-out), transform 160ms var(--ease-out);
}
.btn:hover { background: var(--hedge-deep); }
.btn:active { transform: scale(0.97); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: none; border-bottom: 1px solid var(--ink); padding: 2px 0;
}
.btn--ghost:hover { background: transparent; color: var(--hedge); border-color: var(--hedge); }
/* mobile disclosure menu — hidden on desktop, shown when the inline links collapse.
   Native <details> so it works without the deferred JS and is keyboard-accessible. */
.nav-menu { display: none; position: relative; }
.nav-menu > summary {
  list-style: none; cursor: pointer;
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-soft);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { color: var(--hedge); }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + 15px);
  background: var(--daylight); border: 1px solid var(--line);
  box-shadow: 0 20px 44px rgba(29,33,30,0.14);
  display: flex; flex-direction: column; min-width: 190px; padding: 6px 0;
  transform-origin: top right;
}
.nav-menu[open] .nav-menu-panel { animation: panel-in 180ms var(--ease-out); }
@keyframes panel-in {
  from { opacity: 0; transform: scale(0.97) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.nav-menu-panel a {
  padding: 11px 20px; text-decoration: none;
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-soft); transition: color 0.2s var(--ease-out);
}
.nav-menu-panel a:hover { color: var(--hedge); background: var(--panel); }

@media (max-width: 720px) {
  .site-nav > a:not(.btn) { display: none; }
  .nav-menu { display: block; }
  .hide-sm { display: none; }
  .btn { padding: 11px 18px; }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(120px, 17vh, 200px); padding-bottom: clamp(48px, 7vw, 96px); }

/* kicker: hairline rule + hedge dot */
.hero .kicker {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--line); padding-top: 12px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.hero .kicker::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: var(--hedge); border-radius: 50%;
}

/* asymmetric two-column layout: statement + reel object */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px);
  gap: clamp(28px, 5vw, 72px); align-items: end;
}
.hero h1 {
  font-size: var(--text-xl); font-weight: 700; line-height: 1.0;
  letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0; max-width: 12ch;
}
.hero h1 .turn { color: var(--hedge); }
.hero .deck { margin-top: clamp(24px, 3.5vw, 44px); max-width: 44ch; }
.hero .lede { font-size: var(--text-md); line-height: 1.5; color: var(--ink-soft); margin: 0; }
.hero .lede strong { color: var(--ink); font-weight: 700; }
.hero .cta-row { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }

/* the reel as a real vertical object */
.hero-reel { justify-self: end; width: 100%; }
.hero-reel-frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  background: var(--night);
  box-shadow: 0 40px 80px -34px rgba(31, 58, 46, .45), 0 1px 0 rgba(255, 255, 255, .4);
}
.hero-reel-frame video { width: 100%; height: 100%; object-fit: cover; }
.hero-reel-frame .tag { position: absolute; top: 12px; left: 12px; z-index: 2; }
.hero-reel-cap {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 12px;
}

/* the live band spans full width beneath the grid */
.hero .live {
  margin-top: clamp(48px, 8vw, 96px);
  display: flex; gap: var(--space-md); flex-wrap: wrap;
  justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line); padding-top: var(--space-sm);
}

/* stack on narrow screens: statement first, reel below, capped */
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(28px, 8vw, 48px); }
  .hero-reel { justify-self: start; max-width: 300px; }
}

/* ---------- marquee ---------- */
.marquee {
  border-block: 1px solid var(--line);
  overflow: hidden; white-space: nowrap;
  padding-block: 16px; user-select: none;
}
.marquee .track { display: inline-flex; gap: 0; animation: marquee 36s linear infinite; will-change: transform; }
.marquee span {
  font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint);
  padding-right: 3.2em;
}
.marquee span b { color: var(--hedge); font-weight: 500; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- the promise ----------
   The differentiator, stated as a point of view rather than a claim about the
   method (see brand/voice.md: never describe the machinery). Carries weight
   through type, not colour — the editorial ground stays paper. */
.promise { padding-block: clamp(56px, 8vw, 110px); }
.promise-inner {
  border-top: 1px solid var(--line); padding-top: clamp(20px, 2.6vw, 34px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 88px); align-items: start;
}
.promise h2 {
  font-size: clamp(1.9rem, 3.8vw, 3.4rem); font-weight: 700;
  line-height: 1.04; letter-spacing: -0.02em;
  margin: 18px 0 0; max-width: 14ch; text-wrap: balance;
}
.promise-body p {
  margin: 0 0 1.1em; font-size: var(--text-md); line-height: 1.6;
  color: var(--ink-soft); max-width: 54ch;
}
.promise-body p:last-child { margin-bottom: 0; }
.promise-body p b { color: var(--ink); font-weight: 700; }
@media (max-width: 860px) { .promise-inner { grid-template-columns: 1fr; gap: var(--space-md); } }

/* ---------- work: studio surface (static baseline) ---------- */
.work { padding-block: clamp(56px, 8vw, 120px); position: relative; }
.work-intro { margin-bottom: clamp(40px, 6vw, 72px); }
.work-lede { font-size: var(--text-md); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; margin: var(--space-md) 0 0; }

.asset-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 8vw, 112px); }
.asset { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.asset:nth-child(even) { grid-template-columns: 0.75fr 1.25fr; }
.asset:nth-child(even) .asset-figure { order: 2; }
.asset-figure { display: flex; justify-content: center; }
.asset-figure img { width: 100%; max-width: 520px; height: auto; box-shadow: 0 40px 70px -38px rgba(31,58,46,.42); }

.asset-cap .asset-idx { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--hedge); }
.asset-cap .asset-line { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 14px 0; text-wrap: balance; }
.asset-cap .asset-price { display: inline-block; border: 1px solid rgba(31,58,46,.25); padding: 6px 12px; font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--hedge); }
.asset-open { display: inline-block; margin-top: 20px; margin-left: 12px; font-size: var(--text-sm); font-weight: 500; border-bottom: 1px solid var(--hedge); padding-bottom: 2px; text-decoration: none; }

/* reel hero object */
.reel-hero { width: 100%; max-width: 300px; aspect-ratio: 9/16; overflow: hidden; background: var(--night); box-shadow: 0 40px 80px -34px rgba(31,58,46,.45); }
.reel-hero video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

/* (the brand kit is no longer a mocked-up CSS card — it pages through the real
   5-page guidelines piece in work/brand-kit.html, like every other deliverable) */

.stage-rail { display: none; } /* populated + shown only in the animated layer (Task 5) */

@media (max-width: 720px) {
  .asset, .asset:nth-child(even) { grid-template-columns: 1fr; gap: clamp(16px, 5vw, 28px); }
  .asset:nth-child(even) .asset-figure { order: 0; }
  .asset-open { margin-left: 0; }
}

/* staging before/after comparison slider (clip-path, hardware-accelerated) —
   reused verbatim from the old bento; now lives inside .asset--staging.
   The figure is the sized, positioned box the absolute .ba fills. */
.asset--staging .asset-figure { position: relative; width: 100%; max-width: 520px; aspect-ratio: 3 / 2; margin-inline: auto; overflow: hidden; box-shadow: 0 40px 70px -38px rgba(31,58,46,.42); }

/* ---------- work: interactive paged pieces (brochure · CMA · Just Listed · Just Sold) ----------
   No pin, no scroll-jack — the pieces live in normal flow (see the static grid
   above) and the visitor pages through them by click / drag / arrow keys. One
   shared .pages component; the shape varies per piece via a modifier. */
.pages {
  position: relative; width: 100%; max-width: 460px; margin: 0 auto 52px;
  aspect-ratio: 816 / 1056; cursor: pointer; perspective: 2000px; touch-action: pan-y;
}
.page-sheet {
  position: absolute; inset: 0; background: var(--daylight);
  box-shadow: 0 40px 70px -38px rgba(31,58,46,.42);
  opacity: 0; transition: opacity .5s var(--ease-in-out);
}
/* only the current sheet is visible, so only its shadow shows (no stacked halo) */
.page-sheet.is-current { opacity: 1; z-index: 2; }
.page-sheet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pages-nav {
  position: absolute; left: 0; right: 0; bottom: -46px; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.pages-nav button {
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--daylight); color: var(--hedge); font-size: 17px; line-height: 1;
  cursor: pointer; transition: border-color .25s var(--ease-out);
}
.pages-nav button:hover { border-color: var(--hedge); }
.pages-nav button[aria-disabled="true"] { opacity: .3; cursor: default; }
.pages-count {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint); min-width: 52px; text-align: center;
}

/* per-piece page shapes (base .pages = CMA letter, 816/1056) */
.pages--square { aspect-ratio: 1 / 1; max-width: 460px; }
.pages--brochure { aspect-ratio: 700 / 906; max-width: 400px; }
/* the brochure's two print sheets are each two 8.5×11 panels; show one panel per
   page by scaling the sheet to 2× width and sliding to the left/right half. */
.pages--brochure .page-sheet {
  background-color: var(--daylight); background-size: 200% auto; background-repeat: no-repeat;
}
.ba { position: absolute; inset: 0; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* placeholder "before": desaturated until a real empty-room photo replaces it */
.ba-before { filter: saturate(0.1) brightness(1.05) contrast(0.92); }
.ba-after { clip-path: inset(0 calc(100% - var(--pos, 55%)) 0 0); }
.ba-tag {
  position: absolute; bottom: 14px; z-index: 2;
  font-size: 0.55rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(251,250,246,0.95); background: rgba(16,18,22,0.45); padding: 4px 8px;
  pointer-events: none;
}
.ba-tag--before { right: 14px; }
.ba-tag--after { left: 14px; }
.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 55%); z-index: 2;
  width: 2px; background: var(--daylight); transform: translateX(-1px);
  box-shadow: 0 0 12px rgba(0,0,0,0.35); pointer-events: none;
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--daylight); border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.ba-grip::before, .ba-grip::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 4px solid transparent;
}
.ba-grip::before { left: 7px; transform: translateY(-50%); border-right: 5px solid var(--hedge); }
.ba-grip::after { right: 7px; transform: translateY(-50%); border-left: 5px solid var(--hedge); }
.ba-range {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; appearance: none; -webkit-appearance: none;
  touch-action: pan-y;
}
.ba-range:focus-visible ~ .ba-line,
.ba:has(.ba-range:focus-visible) .ba-line { outline: 2px solid var(--hedge); outline-offset: 2px; }

/* ---------- rates ---------- */
.rates { padding-block: var(--space-xl) var(--space-2xl); }
.founding {
  display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: baseline; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--line);
  padding: 18px 22px; margin-bottom: var(--space-lg);
}
.founding p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); max-width: 60ch; }
.founding p b { color: var(--ink); }
/* One full-width menu, read in the order an agent actually works: the brand →
   win the pitch → launch the listing → close it loud. .menu-col unwraps with
   display:contents so its children flow into the single column in DOM order —
   which is already the journey — instead of stranding a half-empty column. */
.rates-lede {
  font-size: var(--text-md); line-height: 1.5; color: var(--ink-soft);
  max-width: 56ch; margin: var(--space-md) 0 clamp(32px, 4vw, 56px);
}
.rates-lede b { color: var(--ink); font-weight: 700; }
.menu-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.menu-col { display: contents; }
.menu-col h3 {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--hedge);
  margin: clamp(44px, 5vw, 68px) 0 12px;
}
.menu-grid > .menu-col:first-child h3:first-child { margin-top: 0; }
/* menu items are accordions: the row is a button; details expand on hover (desktop)
   or tap (everywhere). grid-template-rows transition = interruptible, unlike keyframes. */
.menu-item { border-top: 1px solid var(--line); }
.menu-item .row {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: none; border: none; padding: 16px 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.menu-item .name { font-weight: 700; font-size: 1.0625rem; white-space: nowrap; }
.menu-item .dots { flex: 1; border-bottom: 1px dotted var(--ink-faint); transform: translateY(-4px); opacity: 0.55; }
.menu-item .price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item .price .was { font-weight: 400; color: var(--oat); text-decoration: line-through; margin-right: 8px; font-size: 0.9em; }
.menu-item .ind {
  color: var(--hedge); font-weight: 400; font-size: 1.0625rem; line-height: 1;
  transition: transform 250ms var(--ease-out);
}
.menu-item.open .ind { transform: rotate(45deg); }
.menu-item .acc {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-out);
}
.menu-item.open .acc { grid-template-rows: 1fr; }
.menu-item .acc-in { overflow: hidden; min-height: 0; }
.menu-item .desc { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); max-width: 56ch; }
/* founding page: descs sit directly in the item (no accordion) and need breathing room */
.menu-item > .desc { margin: -6px 0 16px; }
.menu-item .deliv {
  list-style: none; margin: 10px 0 14px; padding: 0;
  font-size: var(--text-sm); color: var(--ink-soft); max-width: 56ch;
}
.menu-item .deliv li { padding: 4px 0 4px 18px; position: relative; }
.menu-item .deliv li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 10px; height: 1px; background: var(--hedge);
}
.menu-item .acc-in > .order-link { display: inline-block; margin-bottom: 18px; }
.menu-item .order-link {
  font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  color: var(--hedge); text-decoration: none; border-bottom: 1px solid var(--sage);
  white-space: nowrap;
}
.menu-item .order-link:hover { border-color: var(--hedge); }
/* the subscription — two retainer cards on paper, hedge as accent only */
/* The retainer sits on a deep hedge panel — the one anchored colour moment in
   Rates, so the menu above it reads as paper and this reads as the offer. */
.sub-band {
  margin-top: clamp(64px, 9vw, 112px);
  background: var(--hedge); color: var(--daylight);
  padding: clamp(28px, 4vw, 56px);
}
.sub-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  border-top: 1px solid rgba(251, 250, 246, 0.22);
  padding-top: 12px; margin-bottom: clamp(24px, 3.5vw, 40px);
}
.sub-head h3 {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--butter); margin: 0;
}
.sub-head .label { color: rgba(251, 250, 246, 0.62); }
.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
@media (max-width: 860px) { .sub-grid { grid-template-columns: 1fr; } }
.sub-card {
  background: transparent; border: 1px solid rgba(251, 250, 246, 0.22);
  padding: clamp(24px, 3.4vw, 44px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.sub-card--full { border-top: 4px solid var(--butter); }
.sub-card .label--hedge { color: var(--butter); }
.sub-price { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 10px; line-height: 1; }
.sub-price small { font-size: 0.4em; font-weight: 500; letter-spacing: 0.08em; color: rgba(251, 250, 246, 0.62); }
.sub-lede { margin: 14px 0 0; font-size: var(--text-base); color: rgba(251, 250, 246, 0.8); max-width: 40ch; }
.sub-list {
  list-style: none; margin: 20px 0 28px; padding: 0; width: 100%;
  font-size: var(--text-sm); color: rgba(251, 250, 246, 0.8);
}
.sub-list li { padding: 9px 0 9px 20px; position: relative; border-top: 1px solid rgba(251, 250, 246, 0.18); }
.sub-list li::before {
  content: ""; position: absolute; left: 0; top: calc(9px + 0.75em);
  width: 10px; height: 1px; background: var(--butter);
}
/* on hedge, the button inverts to butter so it still reads as the action */
.sub-card .btn {
  margin-top: auto;
  background: var(--butter); border-color: var(--butter); color: var(--ink);
}
.sub-card .btn:hover { background: var(--daylight); border-color: var(--daylight); }
.sub-band .fine { color: rgba(251, 250, 246, 0.6); margin-top: var(--space-md); }
.rates .fine { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--ink-faint); max-width: 72ch; }

/* ---------- thesis (the idea) ---------- */
.thesis { padding-block: clamp(72px, 10vw, 130px) var(--space-lg); }
.thesis h2 { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-md); max-width: 22ch; text-wrap: balance; }
.thesis .bio p { margin: 0 0 1em; color: var(--ink-soft); max-width: 58ch; }
.thesis .bio p b { color: var(--ink); }

/* ---------- studio ---------- */
.studio { background: var(--panel); border-block: 1px solid var(--line); padding-block: var(--space-2xl); }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
@media (max-width: 860px) { .studio-grid { grid-template-columns: 1fr; } }
.studio h2 { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-md); max-width: 18ch; text-wrap: balance; }
.studio .bio p { margin: 0 0 1em; color: var(--ink-soft); max-width: 58ch; }
.studio .bio p b { color: var(--ink); }
.principles { display: flex; flex-direction: column; gap: 0; }
.principle { border-top: 1px solid var(--line); padding-block: 18px; }
.principle .n { font-size: var(--text-xs); letter-spacing: var(--track-label); color: var(--hedge); font-weight: 500; text-transform: uppercase; }
.principle h3 { margin: 6px 0 4px; font-size: 1.0625rem; font-weight: 700; }
.principle p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); max-width: 44ch; }

/* ---------- faq ---------- */
/* Heading holds the left rail (sticky) while the answers run down the right —
   the list used to sit in the left two-thirds and strand a dead column. */
.faq {
  padding-block: var(--space-2xl);
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.55fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.faq .section-head {
  display: block; position: sticky; top: 116px;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.faq .section-head h2 { margin: 0 0 10px; }
.faq-list { max-width: none; }
@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; gap: var(--space-lg); }
  .faq .section-head { position: static; }
}
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md);
  padding-block: 20px; font-weight: 700; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ind { color: var(--hedge); font-weight: 400; transition: transform 0.3s var(--ease-out); }
.faq details[open] summary .ind { transform: rotate(45deg); }
.faq .a { padding: 0 0 22px; color: var(--ink-soft); max-width: 62ch; }
.faq details[open] .a { animation: acc-fade 250ms var(--ease-out); }
@keyframes acc-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.faq .a p { margin: 0 0 0.8em; } .faq .a p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--hedge); color: var(--daylight); padding-block: var(--space-xl) var(--space-lg); }
.site-footer .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.site-footer .lockup svg { height: 22px; width: auto; }
.site-footer .cols { display: flex; gap: clamp(32px, 6vw, 96px); flex-wrap: wrap; }
.site-footer h5 { font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sage); font-weight: 500; margin: 0 0 12px; }
.site-footer a { color: var(--daylight); text-decoration: none; font-size: var(--text-sm); }
.site-footer a:hover { color: var(--sage); }
.site-footer .col > div { margin-bottom: 8px; }
.site-footer .legal {
  border-top: 1px solid color-mix(in srgb, var(--sage) 30%, transparent);
  padding-top: 20px; display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between;
  font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--sage);
}
.site-footer .legal span:last-child { color: var(--butter); }

/* ---------- reveal defaults (JS enhances) ---------- */
[data-reveal] { opacity: 1; }
.js [data-reveal] { opacity: 0; transform: translateY(22px); }

/* Above-the-fold hero reveals with CSS only — it must NOT wait on the deferred
   animation library, or first paint of the headline stalls for seconds on slow
   connections. This runs the instant CSS is applied (the .js class is set inline
   before render), independent of GSAP. */
.js .hero [data-reveal] { animation: reveal-up 0.7s var(--ease-out) both; }
.js .hero .kicker[data-reveal]              { animation-delay: 0.05s; }
.js .hero h1 span[data-reveal]:nth-of-type(1) { animation-delay: 0.12s; }
.js .hero h1 span[data-reveal]:nth-of-type(2) { animation-delay: 0.18s; }
.js .hero h1 span[data-reveal]:nth-of-type(3) { animation-delay: 0.24s; }
.js .hero h1 span[data-reveal]:nth-of-type(4) { animation-delay: 0.30s; }
.js .hero .deck[data-reveal]                { animation-delay: 0.38s; }
.js .hero .hero-reel[data-reveal]           { animation-delay: 0.42s; }
.js .hero .live[data-reveal]                { animation-delay: 0.46s; }
@keyframes reveal-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .hero [data-reveal] { animation: none; opacity: 1; transform: none; }
  .marquee .track { animation: none; }
  html { scroll-behavior: auto; }
  .nav-menu[open] .nav-menu-panel { animation: none; }
  .faq details[open] .a { animation: acc-fade 200ms ease; } /* keep the fade, drop nothing jarring */
  .menu-item .acc { transition: none; }
  .menu-item .ind { transition: none; }
  .btn:active { transform: none; }
}