/* ============================================================
   CALA Paradise Valley — cinematic investor experience
   Warm industrial-coastal: terracotta · rattan · flame · sand ·
   Mediterranean blue. Day→night arc. Glassmorphism + editorial type.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* warm coastal-desert palette (no cold sci-fi) */
  --sand:      #F2E7D2;
  --sand-2:    #E7D6B6;
  --cream:     #FBF4E6;
  --ink:       #20160E;   /* warm near-black */
  --ink-2:     #2C2016;
  --ink-soft:  rgba(40,28,18,0.66);
  --terra:     #C2622E;
  --terra-deep:#9A4520;
  --clay:      #B2542F;
  --gold:      #E0A24B;
  --ochre:     #D98A3D;
  --ember:     #2A140C;
  --ember-2:   #170B06;
  --med-blue:  #2F6E7C;   /* sun-tinted Mediterranean */
  --med-blue-d:#244F59;

  /* glass */
  --glass-bg:     rgba(255,247,235,0.10);
  --glass-bg-2:   rgba(255,247,235,0.16);
  --glass-brd:    rgba(255,247,235,0.30);
  --glass-ink-bg: rgba(28,18,12,0.34);
  --glass-blur:   blur(18px) saturate(1.25);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "Jost", system-ui, sans-serif;

  --maxw: 1320px;
  --gut: clamp(22px, 5.2vw, 96px);
  --ease: cubic-bezier(.19,.8,.22,1);

  /* walk-through caption rhythm (tweakable) */
  --hp-num-size: 13px;
  --hp-num-gap: 14px;
  --hp-num-track: 0.26em;
  --hp-cap-gap: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Lenis owns scrolling; do NOT also use native smooth */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-sans);
  color: var(--cream);
  background: #1d130c; /* base behind the sky canvas */
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

/* ---------- Fixed sky + ambient layers ---------- */
#sky-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -3; display: block;
}
#sky-fallback {
  position: fixed; inset: 0; z-index: -4;
  background:
    radial-gradient(130% 100% at 50% 16%, #4a3a38 0%, #8a5430 44%, #b5652a 68%, #3a1a0e 100%);
}
/* warm vignette + grain on top of everything */
.atmos {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
}
.atmos::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,10,5,0.42) 0%, transparent 22%, transparent 80%, rgba(20,10,5,0.36) 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 48%, rgba(20,10,5,0.5) 100%);
}
.atmos::after {
  content: ""; position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: clamp(11px,0.85vw,13px);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 0.98; letter-spacing: -0.012em; }
.lede { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.5; color: rgba(255,247,235,0.86); }
a { color: inherit; text-decoration: none; }
.serif-em { font-style: italic; }

/* split-word reveal primitives — vertical mask only. Horizontal padding gives
   glyph breathing room (no shaved letters); NO negative horizontal margin, so
   inter-word spaces are preserved. Only the bottom is compensated vertically. */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.02em 0.06em 0.2em; margin: 0 0 -0.2em 0; }
.split .wi { display: inline-block; will-change: transform; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 980px; margin: 0 auto; padding-inline: var(--gut); }
section { position: relative; z-index: 1; }
.bay { padding-block: clamp(96px, 17vh, 220px); }
.text-shadow { text-shadow: 0 2px 40px rgba(20,10,5,0.5), 0 1px 3px rgba(20,10,5,0.4); }

/* ---------- On-sky text protection ----------
   A soft, blurred dark glow sits behind text that floats directly on the
   sky, guaranteeing cream-on-sky contrast while reading as cinematic depth
   rather than a panel. Text wrappers are lifted above it. */
.statement, .head, .dishes-copy { position: relative; }
.statement::before, .dishes-copy::before {
  content: ""; position: absolute; inset: -8% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(72% 82% at 30% 42%, rgba(14,8,4,0.62), rgba(14,8,4,0.30) 46%, transparent 72%);
  filter: blur(30px);
}
.head::before {
  content: ""; position: absolute; inset: -50% -8% -70% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(66% 120% at 22% 50%, rgba(14,8,4,0.52), transparent 74%);
  filter: blur(26px);
}
.statement > *, .dishes-copy > *, .head > * { position: relative; z-index: 1; }
.lede, .head .note, .kicker .k { text-shadow: 0 1px 18px rgba(16,9,4,0.55); }

/* ---------- Glass ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 30px 70px -40px rgba(20,10,5,0.7);
  border-radius: 18px;
}
.glass-ink {
  background: var(--glass-ink-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,247,235,0.16);
}

/* ---------- Film-cut clip reveals (driven by GSAP; safe if JS fails) ---------- */
.cut { will-change: clip-path; }

/* ---------- Reveal (gated by .js so content is safe if JS fails) ---------- */
.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(34px); filter: blur(8px); }
.js .reveal.in { opacity: 1; transform: none; filter: blur(0); }
.js .reveal.d1 { transition-delay: .08s; }
.js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1!important; transform:none!important; filter:none!important; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gut);
  transition: padding .4s var(--ease), background .4s var(--ease);
}
.nav.solid {
  background: linear-gradient(to bottom, rgba(20,10,5,0.5), transparent);
  padding-block: 12px;
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand .mark { font-family: var(--font-display); font-size: clamp(24px,2vw,32px); letter-spacing: 0.16em; color: var(--cream); }
.brand .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,247,235,0.7); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 12px; letter-spacing: 0.06em; opacity: 0.82; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-cta {
  font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em;
  padding: 10px 18px; border-radius: 100px; cursor: pointer;
  background: var(--cream); color: var(--ink); border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s;
}
.nav-cta:hover { transform: translateY(-1px); background: #fff; }
@media (max-width: 900px){ .nav-links { display: none; } }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
#scene-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1s ease; }
#scene-hero.ready { opacity: 1; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; z-index: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(20,10,5,0.72) 0%, rgba(20,10,5,0.12) 42%, transparent 66%); }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) clamp(48px,9vh,120px); }
.hero h1 { font-size: clamp(52px, 9vw, 150px); max-width: 15ch; text-wrap: balance; }
.hero h1 .serif-em { color: var(--gold); }
.hero__sub { margin-top: 26px; max-width: 44ch; font-size: clamp(16px,1.5vw,21px); color: rgba(255,247,235,0.9); }
.hero__eyebrow { margin-bottom: 24px; }
.scrollcue { position: absolute; right: var(--gut); bottom: clamp(48px,9vh,120px); z-index: 2;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,247,235,0.72); display: flex; gap: 10px; align-items: center; writing-mode: vertical-rl; }
.scrollcue .bar { width: 1px; height: 50px; background: linear-gradient(var(--gold), transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0%,100%{ transform: scaleY(.3); opacity:.4 } 50%{ transform: scaleY(1); opacity:1 } }

/* ---------- Statement / editorial ---------- */
.statement h2 { font-size: clamp(38px, 6.4vw, 104px); text-wrap: balance; }
.statement h2 .serif-em { color: var(--gold); }
.statement .lede { margin-top: clamp(26px,4vh,48px); max-width: 56ch; }
.kicker-row { display: flex; flex-wrap: wrap; gap: clamp(20px,4vw,70px); margin-top: clamp(40px,6vh,80px); }
.kicker .v { font-family: var(--font-display); font-size: clamp(40px,5.4vw,88px); line-height: 0.9; }
.kicker .v .u { font-family: var(--font-sans); font-size: 0.3em; font-weight: 600; vertical-align: super; color: var(--gold); margin-left: 4px; }
.kicker .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,247,235,0.74); margin-top: 14px; max-width: 22ch; }

/* ---------- Section heading ---------- */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: clamp(36px,5vh,64px); }
.head h2 { font-size: clamp(34px,5.4vw,82px); }
.head h2 .serif-em { color: var(--gold); }
.head .note { max-width: 40ch; color: rgba(255,247,235,0.82); font-size: 15px; }

/* ---------- Come-alive (day↔night drag) ---------- */
.alive-wrap { width: 100%; }
.alive-stage { position: relative; width: 100%; aspect-ratio: 16/9.1; border-radius: 20px; overflow: hidden; cursor: ew-resize; touch-action: pan-y;
  box-shadow: 0 50px 110px -55px rgba(0,0,0,0.85); background: #14110d; }
.alive-stage.grabbing { cursor: grabbing; }
#alive-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; z-index: 2; }
#alive-canvas.ready { opacity: 1; }
.alive-fallback { position: absolute; inset: 0; z-index: 1; }
.alive-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#alive-live-img { clip-path: inset(0 100% 0 0); will-change: clip-path; }
.alive-handle { position: absolute; top: 0; bottom: 0; left: 0%; width: 2px; background: rgba(255,247,235,0.92); transform: translateX(-50%); z-index: 4; pointer-events: none;
  box-shadow: 0 0 26px rgba(224,162,75,0.8), 0 0 4px rgba(255,255,255,0.9); }
.alive-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px;
  border: 1.5px solid rgba(255,247,235,0.92); background: rgba(20,14,10,0.3); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); box-shadow: 0 8px 30px -8px rgba(0,0,0,0.6); }
.alive-labels { position: absolute; inset: auto 0 18px 0; display: flex; justify-content: space-between; padding: 0 clamp(16px,3vw,30px); z-index: 4; pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.alive-labels span { background: rgba(20,14,10,0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 7px 13px; border-radius: 100px; }
.al-left { color: var(--sand); } .al-right { color: var(--gold); }
.alive-hint { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  background: rgba(20,14,10,0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 8px 16px; border-radius: 100px;
  transition: opacity .4s, transform .4s; animation: hintpulse 2.6s ease-in-out infinite; }
.alive-hint.hide { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; }
@keyframes hintpulse { 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
@media (max-width: 700px){ .alive-stage { aspect-ratio: 4/5; } }

/* ---------- Editorial gallery ---------- */
.gal { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(12px,1.4vw,20px); }
.gal figure { position: relative; overflow: hidden; border-radius: 16px; }
.gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease), filter .8s ease; }
.gal figure:hover img { transform: scale(1.05); filter: saturate(1.08) brightness(1.05); }
.gal figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream); background: rgba(20,14,10,0.4); backdrop-filter: blur(6px); padding: 6px 11px; border-radius: 100px; }
.gal .tall { grid-column: span 5; aspect-ratio: 3/4; }
.gal .wide { grid-column: span 7; aspect-ratio: 7/5.1; }
.gal .third { grid-column: span 4; aspect-ratio: 4/4.4; }
@media (max-width: 760px){ .gal .tall,.gal .wide,.gal .third{ grid-column: span 12; aspect-ratio: 16/10; } }

/* ---------- Full-bleed cinematic band ---------- */
.band { position: relative; height: 92vh; overflow: hidden; border-radius: 0; }
.band img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.band .band-cap { position: absolute; left: var(--gut); bottom: clamp(40px,7vh,90px); z-index: 2; max-width: 30ch; }
.band .band-cap h3 { font-size: clamp(30px,4.6vw,66px); }

/* ---------- Materials (macro placeholders) ---------- */
.materials { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(10px,1.2vw,16px); }
.materials .mat { aspect-ratio: 1; border-radius: 14px; overflow: hidden; position: relative; }
.materials .mat image-slot { width: 100%; height: 100%; display: block; }
.materials .mat span { position: absolute; left: 12px; bottom: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); z-index: 2; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
@media (max-width: 700px){ .materials { grid-template-columns: repeat(2,1fr); } }

/* ---------- 3D floorplan ---------- */
.plan3d-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.plan3d-stage { position: relative; aspect-ratio: 1/0.82; border-radius: 20px; overflow: hidden; }
#floorplan-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plan3d-info .eyebrow { color: var(--gold); }
.plan3d-info h3 { font-size: clamp(28px,3.4vw,46px); margin: 12px 0 8px; }
.plan3d-specs { margin-top: 22px; }
.plan3d-specs .row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,247,235,0.14); }
.plan3d-specs .l { font-size: 13px; color: rgba(255,247,235,0.7); }
.plan3d-specs .r { font-family: var(--font-display); font-size: 22px; }
.plan3d-zones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.zone-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; border-radius: 100px; cursor: pointer;
  border: 1px solid rgba(255,247,235,0.22); color: rgba(255,247,235,0.82); transition: all .25s var(--ease); background: rgba(255,247,235,0.04); }
.zone-chip:hover, .zone-chip.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
@media (max-width: 880px){ .plan3d-layout { grid-template-columns: 1fr; } }

/* ---------- Floating dishes ---------- */
.dishes { position: relative; }
.dishes-stage { position: relative; height: 86vh; }
#dishes-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dishes-copy { position: absolute; inset: 0; display: flex; align-items: center; z-index: 2; pointer-events: none; }
.dishes-copy .wrap { width: 100%; }
.dishes-copy h2 { font-size: clamp(36px,5.6vw,92px); max-width: 16ch; }
.dishes-copy .note { max-width: 38ch; margin-top: 20px; color: rgba(255,247,235,0.84); }

/* ---------- Investment thesis ---------- */
.thesis .lede { max-width: 60ch; }
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(12px,1.4vw,18px); margin-top: clamp(40px,6vh,72px); }
.metric { padding: clamp(22px,2.6vw,34px); border-radius: 18px; }
.metric .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,247,235,0.66); }
.metric .v { font-family: var(--font-display); font-size: clamp(40px,4.6vw,68px); line-height: 1; margin-top: 14px; }
.metric .v .u { font-family: var(--font-sans); font-size: 0.3em; font-weight: 600; vertical-align: super; color: var(--gold); margin-left: 3px; }
.metric .s { font-size: 12.5px; color: rgba(255,247,235,0.6); margin-top: 10px; line-height: 1.5; }
@media (max-width: 900px){ .metrics { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .metrics { grid-template-columns: 1fr; } }

.thesis-points { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.6vw,40px); margin-top: clamp(44px,6vh,80px); }
.tp { } .tp .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--gold); }
.tp h4 { font-family: var(--font-display); font-size: clamp(22px,2.2vw,32px); margin: 12px 0 10px; line-height: 1.05; }
.tp p { font-size: 14.5px; color: rgba(255,247,235,0.74); line-height: 1.6; }
@media (max-width: 820px){ .thesis-points { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Operator / track record ---------- */
.metric-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: clamp(34px,5vh,60px) 0 18px; }
.portfolio { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(12px,1.4vw,18px); margin-top: clamp(28px,4vh,50px); }
.pcard { padding: clamp(20px,2vw,28px); border-radius: 18px; display: flex; flex-direction: column; gap: 8px; min-height: 190px; }
.pcard .ptype { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,247,235,0.6); }
.pcard .pname { font-family: var(--font-display); font-size: clamp(24px,2.3vw,34px); line-height: 1; }
.pcard .pdesc { font-size: 13px; color: rgba(255,247,235,0.7); line-height: 1.5; }
.pcard .ptag { margin-top: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.pcard.is-cala { border-color: rgba(224,162,75,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 30px 70px -40px rgba(224,162,75,0.35); }
@media (max-width: 860px){ .portfolio { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .portfolio { grid-template-columns: 1fr; } }

/* team / the collective — highlighted people */
.collective-intro { max-width: 70ch; margin-top: 14px; font-size: clamp(16px,1.5vw,20px); line-height: 1.62; color: rgba(255,247,235,0.84); }
.collective-intro strong { color: var(--cream); font-weight: 600; }

.avatar { width: 86px; height: 86px; font-size: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 22%, rgba(224,162,75,0.6), rgba(154,69,32,0.55) 68%, rgba(42,20,12,0.65));
  border: 1px solid rgba(255,247,235,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 18px 40px -24px rgba(20,10,5,0.7);
  font-family: var(--font-display); font-weight: 500; color: var(--cream); letter-spacing: 0.03em; }
.avatar[data-mono]::before { content: attr(data-mono); }
.avatar.sm { width: 54px; height: 54px; font-size: 18px; }

.founders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.6vw,22px); margin-top: clamp(22px,3vh,34px); }
.founder { display: flex; gap: clamp(16px,1.7vw,26px); align-items: center; padding: clamp(20px,2.1vw,32px); border-radius: 18px;
  border-color: rgba(224,162,75,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 30px 70px -40px rgba(224,162,75,0.34); }
.founder .frole { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.founder .fn { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px,2.4vw,38px); line-height: 0.98; margin: 7px 0 11px; }
.founder .fnote { font-size: 13.5px; line-height: 1.55; color: rgba(255,247,235,0.74); max-width: 38ch; }
@media (max-width: 820px){ .founders { grid-template-columns: 1fr; } }

.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.4vw,18px); margin-top: clamp(20px,3vh,34px); }
.tm { display: flex; align-items: center; gap: 15px; padding: 15px 18px; border-radius: 14px; }
.tm .tn { font-family: var(--font-display); font-size: clamp(20px,1.8vw,27px); line-height: 1; }
.tm .tr { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 7px; }
.team-tag { font-family: var(--font-display); font-style: italic; font-size: clamp(20px,2.4vw,32px); color: var(--cream); margin-top: clamp(34px,5vh,58px); max-width: 26ch; }
@media (max-width: 820px){ .team-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .team-grid { grid-template-columns: 1fr; } }

/* awards */
.awards { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(10px,1.2vw,16px); margin-top: clamp(26px,3.6vh,44px); }
.award { padding: 18px 20px; border-radius: 14px; display: flex; flex-direction: column; gap: 6px; }
.award .aw { font-family: var(--font-display); font-size: clamp(17px,1.5vw,21px); line-height: 1.1; }
.award .as { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,247,235,0.58); }
@media (max-width: 900px){ .awards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .awards { grid-template-columns: 1fr; } }

/* use of funds total */
.funds-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,247,235,0.16); }
.funds-total .ft-l { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,247,235,0.72); }
.funds-total .ft-l small { display: block; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 12px; color: rgba(255,247,235,0.5); margin-top: 6px; }
.funds-total .ft-v { font-family: var(--font-display); font-size: clamp(38px,4.4vw,64px); line-height: 1; }
.waterfall { margin-top: clamp(26px,3.6vh,42px); font-size: 14.5px; line-height: 1.6; color: rgba(255,247,235,0.78); max-width: 64ch; }
.waterfall strong { color: var(--cream); font-weight: 600; }

/* ---------- The ask / form ---------- */
.ask { text-align: center; }
.ask h2 { font-size: clamp(44px,7.4vw,118px); max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.ask h2 .serif-em { color: var(--gold); }
.ask .lede { max-width: 52ch; margin: 26px auto 0; }
.form { max-width: 620px; margin: clamp(44px,6vh,72px) auto 0; padding: clamp(26px,3vw,42px); text-align: left; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,247,235,0.7); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--cream);
  background: rgba(255,247,235,0.06); border: 1px solid rgba(255,247,235,0.22); border-radius: 12px;
  padding: 13px 15px; transition: border-color .2s, background .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,247,235,0.1); }
.field select option { color: #111; }
.form .btn-primary { width: 100%; margin-top: 8px; }
.form-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: rgba(255,247,235,0.5); margin-top: 14px; text-align: center; }
.form-done { text-align: center; padding: 40px 20px; }
.form-done h3 { font-size: clamp(28px,3.4vw,44px); }
.form-done p { color: rgba(255,247,235,0.78); margin-top: 12px; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-sans); font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: 100px; cursor: pointer; border: 1px solid transparent; transition: transform .22s var(--ease), background .22s, color .22s, box-shadow .22s; display: inline-flex; align-items: center; gap: 10px; }
.btn-primary { background: linear-gradient(180deg, var(--gold), var(--ochre)); color: var(--ink); box-shadow: 0 16px 40px -16px rgba(224,162,75,0.7); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -16px rgba(224,162,75,0.85); }
.btn-ghost { background: rgba(255,247,235,0.06); color: var(--cream); border-color: rgba(255,247,235,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,247,235,0.16); transform: translateY(-2px); }

/* ---------- Floating glass CTA bar ---------- */
.actionbar {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); z-index: 70;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 22px; border-radius: 100px;
  background: var(--glass-ink-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,247,235,0.22); box-shadow: 0 24px 60px -28px rgba(0,0,0,0.8);
  transition: transform .6s var(--ease), opacity .4s; opacity: 0;
}
.actionbar.show { transform: translate(-50%, 0); opacity: 1; }
.actionbar .ab-label { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--cream); padding-right: 6px; }
.actionbar .btn { padding: 11px 20px; font-size: 13.5px; }
@media (max-width: 620px){ .actionbar .ab-label { display: none; } .actionbar { padding: 10px; gap: 8px; left: 12px; right: 12px; transform: translateY(140%); width: auto; } .actionbar.show{ transform: translateY(0);} .actionbar .btn{ flex:1; justify-content:center; } }

/* ---------- Footer ---------- */
.footer { padding: 70px var(--gut) 50px; border-top: 1px solid rgba(255,247,235,0.12); }
.footer .f-inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 26px; }
.footer .mark { font-family: var(--font-display); font-size: 40px; letter-spacing: 0.14em; }
.footer .disc { max-width: 64ch; font-size: 11px; line-height: 1.6; color: rgba(255,247,235,0.42); margin-top: 28px; }
.footer a { color: rgba(255,247,235,0.7); font-size: 13px; }

/* ---------- scroll progress hairline ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--terra)); pointer-events: none; }

image-slot { background: rgba(255,247,235,0.05); border-radius: 12px; }

/* ============================================================
   v7 — image-backed portfolio cards, material tiles,
   designed data set pieces (revenue ramp + breakpoint)
   ============================================================ */

/* ---------- Portfolio cards (image / concept-tone) ---------- */
.pcard { position: relative; overflow: hidden; padding: 0; min-height: clamp(260px, 26vw, 320px); display: flex; }
.pcard .pmedia { position: absolute; inset: 0; z-index: 0; background: #1a120b; }
.pcard.has-photo .pmedia { background-image: var(--pimg); background-size: cover; background-position: 50% 38%; transform: scale(1.001); transition: transform 1.2s var(--ease), filter .8s ease; }
.pcard.has-photo:hover .pmedia { transform: scale(1.06); filter: saturate(1.06) brightness(1.04); }
.pcard.has-photo .pmedia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,8,4,0.95) 8%, rgba(13,8,4,0.55) 46%, rgba(13,8,4,0.10) 88%); }
.pcard .pmedia[data-mono]::before { content: attr(data-mono); position: absolute; right: -4%; bottom: -24%; font-family: var(--font-display); font-weight: 500; font-size: 270px; line-height: 1; color: rgba(255,247,235,0.07); pointer-events: none; }
.pcard.tone-tyf .pmedia  { background: radial-gradient(125% 110% at 82% 0%, #2c5159 0%, #1a2e33 46%, #0f0b09 100%); }
.pcard.tone-spur .pmedia { background: radial-gradient(125% 115% at 80% 2%, #c2622e 0%, #6e2f17 44%, #160b06 100%); }
.pcard.tone-kuza .pmedia { background: radial-gradient(125% 115% at 82% 0%, #3c2233 0%, #241019 46%, #0f0a0c 100%); }
.pcard[class*="tone-"] .pmedia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,5,3,0.66), transparent 58%); }
.pcard .pbody { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; padding: clamp(20px,2vw,28px); width: 100%; }
.pcard .pdesc { max-width: 30ch; }

/* ---------- Material tiles (real photo crops + tonal wash) ---------- */
.materials .mat img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.materials .mat:hover img { transform: scale(1.07); }
.materials .mat::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(11,6,3,0.62), transparent 52%); }
.materials .mat::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; }
.materials .mat.tone-terra::after  { background: linear-gradient(155deg, rgba(194,98,46,0.55), rgba(154,69,32,0.22)); }
.materials .mat.tone-rattan::after { background: linear-gradient(155deg, rgba(224,162,75,0.5), rgba(178,84,47,0.18)); }
.materials .mat.tone-flame::after  { background: linear-gradient(155deg, rgba(217,138,61,0.45), rgba(42,20,12,0.30)); }
.materials .mat.tone-glass::after  { background: linear-gradient(155deg, rgba(224,162,75,0.55), rgba(47,110,124,0.22)); }

/* ---------- Deal at a glance (revenue ramp panel) ---------- */
.dealglance { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(22px,3vw,52px); padding: clamp(24px,3vw,42px); margin-top: clamp(34px,5vh,60px); align-items: stretch; }
.dealglance .dg-chart .eyebrow { color: var(--gold); }
.dealglance .dg-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px,2.8vw,42px); margin-top: 10px; line-height: 1.02; letter-spacing: -0.01em; }
.dealglance .dg-h .serif-em { color: var(--gold); }
.chart-holder { margin-top: clamp(18px,2.4vh,26px); }
.chart-holder svg { width: 100%; height: auto; display: block; overflow: visible; }
.dg-stats { display: flex; flex-direction: column; gap: clamp(13px,1.9vh,20px); justify-content: center; border-left: 1px solid rgba(255,247,235,0.14); padding-left: clamp(20px,2.4vw,40px); }
.dg-stat .dgv { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px,3.4vw,54px); line-height: 0.96; }
.dg-stat .dgk { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,247,235,0.62); margin-top: 7px; max-width: 24ch; }
@media (max-width: 900px){ .dealglance { grid-template-columns: 1fr; } .dg-stats { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,247,235,0.14); padding-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } }

/* ---------- $8M breakpoint visual ---------- */
.breakpoint { display: grid; grid-template-columns: 0.95fr 1.25fr; gap: clamp(22px,3vw,52px); align-items: center; padding: clamp(24px,3vw,42px); margin-top: clamp(18px,2.6vh,30px); }
.breakpoint .bp-head .eyebrow { color: var(--gold); }
.breakpoint .bp-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px,2.6vw,40px); margin: 10px 0 14px; line-height: 1.04; letter-spacing: -0.01em; }
.breakpoint .bp-h .serif-em { color: var(--gold); }
.breakpoint .note { max-width: 44ch; color: rgba(255,247,235,0.8); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 820px){ .breakpoint { grid-template-columns: 1fr; } }

/* shared chart text styling */
.c-axis { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; fill: rgba(255,247,235,0.55); text-transform: uppercase; }
.c-val  { font-family: var(--font-display); fill: var(--cream); }
.c-flag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Asymmetry block (downside protected / upside uncapped) ---------- */
.asym { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.6vw,22px); margin-top: clamp(30px,4.5vh,56px); }
.asym-col { padding: clamp(24px,2.6vw,38px); border-radius: 18px; }
.asym-col.gold { border-color: rgba(224,162,75,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 30px 70px -40px rgba(224,162,75,0.34); }
.ac-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.ac-tag.ac-tag-cool { color: var(--sand-2); }
.ac-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.ac-list li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.5; color: rgba(255,247,235,0.82); }
.ac-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 700; }
.asym-col.gold .ac-list li::before { color: var(--gold); }
.asym-col:not(.gold) .ac-list li::before { color: var(--sand-2); }
.ac-list li strong { color: var(--cream); font-weight: 600; }
@media (max-width: 820px){ .asym { grid-template-columns: 1fr; } }

/* ---------- Ask confidence row ---------- */
.ask-assure { display: flex; justify-content: center; gap: clamp(26px,5vw,72px); margin: clamp(28px,4vh,46px) auto 0; flex-wrap: wrap; }
.ask-assure .aa { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ask-assure .aav { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px,4vw,58px); color: var(--gold); line-height: 1; }
.ask-assure .aak { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,247,235,0.66); }

/* ============================================================
   v10 — interactive financials + readability pass
   ============================================================ */

/* ---------- readability: lift caption contrast/size ---------- */
.metric .k { color: rgba(255,247,235,0.82); font-size: 12px; }
.metric .s { color: rgba(255,247,235,0.76); font-size: 13.5px; }
.metric-label { font-size: 12px; }
.tp p { color: rgba(255,247,235,0.82); font-size: 15px; }
.head .note { color: rgba(255,247,235,0.86); font-size: 15.5px; }
.waterfall { color: rgba(255,247,235,0.84); font-size: 15px; }

/* ---------- investment calculator ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,3vw,54px); padding: clamp(24px,3vw,42px); margin-top: clamp(20px,3vh,34px); align-items: center; }
.calc-amount { font-family: var(--font-display); font-weight: 500; font-size: clamp(46px,5.2vw,76px); line-height: 1; color: var(--cream); }
.calc-amount .ca-pre { color: var(--gold); margin-right: 3px; }
.calc-units { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-top: 13px; }
.calc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 100px; margin: 22px 0 11px; cursor: pointer;
  background: linear-gradient(90deg, var(--gold) var(--pct,15%), rgba(255,247,235,0.18) var(--pct,15%)); }
.calc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cream); border: 3px solid var(--gold); box-shadow: 0 6px 18px -6px rgba(0,0,0,0.65); cursor: grab; }
.calc-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--cream); border: 3px solid var(--gold); cursor: grab; }
.calc-slider:active::-webkit-slider-thumb { cursor: grabbing; }
.calc-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,247,235,0.58); }
.calc-foot { font-size: 12px; color: rgba(255,247,235,0.58); margin-top: 16px; line-height: 1.5; max-width: 46ch; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.8vw,24px); }
.co { padding: 14px 2px 4px; border-top: 1px solid rgba(255,247,235,0.16); }
.cov { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px,3.2vw,46px); line-height: 1; color: var(--cream); transition: color .2s; }
#out-cash, #out-mult { color: var(--gold); }
.cok { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,247,235,0.68); margin-top: 9px; }
@media (max-width: 820px){ .calc { grid-template-columns: 1fr; } }

/* ---------- use-of-funds interactive bar ---------- */
.fundsbar { padding: clamp(22px,2.6vw,38px); border-radius: 18px; margin-top: clamp(22px,3vh,38px); }
.fb-track { display: flex; gap: 4px; height: 66px; }
.fb-seg { position: relative; border-radius: 8px; min-width: 36px; display: flex; align-items: center; justify-content: center; cursor: default;
  transition: opacity .3s var(--ease), filter .3s var(--ease); }
.fb-seg.dim { opacity: 0.32; }
.fb-seg.hot { filter: brightness(1.12); }
.fb-pct { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.45); }
.fb-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; margin-top: 24px; }
.fb-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "sw name amt" "sw sub sub"; column-gap: 12px; align-items: center; padding: 9px 11px; border-radius: 10px; transition: background .25s; cursor: default; }
.fb-row.hot { background: rgba(255,247,235,0.06); }
.fb-sw { grid-area: sw; width: 15px; height: 15px; border-radius: 4px; }
.fb-name { grid-area: name; font-family: var(--font-display); font-size: 20px; }
.fb-amt { grid-area: amt; justify-self: end; font-family: var(--font-display); font-size: 20px; color: var(--gold); }
.fb-sub { grid-area: sub; font-size: 12.5px; color: rgba(255,247,235,0.64); margin-top: 2px; }
@media (max-width: 680px){ .fb-legend { grid-template-columns: 1fr; } .fb-track { height: 54px; } }

/* ---------- revenue-ramp interactive points ---------- */
.rpt .rval { font-size: 13px; fill: var(--cream); opacity: 0.9; transition: opacity .2s, font-size .2s; }
.rpt .rdot { transition: r .2s var(--ease), filter .2s; }
.rpt .rhit { cursor: pointer; }
.rpt.on .rdot { r: 7.5; filter: drop-shadow(0 0 10px rgba(224,162,75,0.95)); }
.rpt.on .rval { opacity: 1; font-size: 15.5px; }

/* ============================================================
   v11 — pinned horizontal walk-through set piece
   ============================================================ */
.hscroll { position: relative; }
.hscroll-track { display: flex; align-items: center; gap: clamp(18px,2.4vw,44px); padding: 0 clamp(22px,7vw,150px); overflow-x: auto; scrollbar-width: none; }
.hscroll-track::-webkit-scrollbar { display: none; }
.hscroll.pinned { height: 100vh; overflow: hidden; }
.hscroll.pinned .hscroll-track { height: 100vh; overflow: visible; will-change: transform; }

.hpanel { position: relative; flex: 0 0 auto; }
.hscroll-intro { flex: 0 0 min(82vw, 540px); align-self: center; display: flex; flex-direction: column; justify-content: center; padding-block: 60px; }
.hscroll-intro .eyebrow { color: var(--gold); }
.hscroll-intro h2 { font-size: clamp(40px,5vw,88px); margin-top: 16px; line-height: 0.98; }
.hscroll-intro h2 .serif-em { color: var(--gold); }
.hscroll-intro .note { margin-top: 18px; max-width: 34ch; color: rgba(255,247,235,0.84); font-size: 15px; }

article.hpanel { width: clamp(300px, 50vh, 600px); height: clamp(380px, 78vh, 820px); border-radius: 18px; overflow: hidden; box-shadow: 0 50px 110px -55px rgba(0,0,0,0.85); }
.hp-media { position: absolute; inset: 0; overflow: hidden; }
.hp-media img { position: absolute; inset: -6% -14%; width: 128%; height: 112%; object-fit: cover; will-change: transform; }
article.hpanel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(12,7,4,0.88) 3%, rgba(12,7,4,0.2) 42%, transparent 70%); }
.hp-cap { position: absolute; left: clamp(20px,2vw,32px); right: 20px; bottom: clamp(22px,3vh,36px); z-index: 2; display: flex; flex-direction: column; }
.hp-num { font-family: var(--font-mono); font-size: var(--hp-num-size); letter-spacing: var(--hp-num-track); color: var(--gold); display: block; margin-bottom: var(--hp-num-gap); }
.hp-cap h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px,2.6vw,42px); line-height: 1; margin: 0 0 var(--hp-cap-gap); }
.hp-cap p { font-size: 14px; color: rgba(255,247,235,0.84); max-width: 30ch; line-height: 1.5; margin: 0; }

.hscroll-rail { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(280px, 50vw); height: 3px; border-radius: 100px; background: rgba(255,247,235,0.18); z-index: 5; pointer-events: none; }
.hsr-fill { display: block; height: 100%; width: 0%; border-radius: 100px; background: linear-gradient(90deg, var(--gold), var(--terra)); }
.hscroll:not(.pinned) .hscroll-rail { display: none; }

/* ============================================================
   v12 — deeper portfolio storytelling + confidentiality gate
   ============================================================ */

/* ---------- Enriched portfolio (2-up, room for real copy) ---------- */
.portfolio { grid-template-columns: repeat(2, 1fr); }
.pcard { min-height: clamp(300px, 32vw, 396px); }
.pcard .pdesc { max-width: 38ch; margin-top: 2px; }
.pcard .pvibe { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.pcard .pvibe span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,247,235,0.82); border: 1px solid rgba(255,247,235,0.24);
  background: rgba(255,247,235,0.05); padding: 5px 11px; border-radius: 100px;
}
.pcard .ptag { margin-top: 16px; }
@media (max-width: 760px){ .portfolio { grid-template-columns: 1fr; } }

/* ---------- Confidential / forward-looking gate ---------- */
.confgate {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: rgba(12,7,4,0.74);
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  opacity: 1; transition: opacity .6s var(--ease);
}
.confgate.hide { opacity: 0; pointer-events: none; }
.confgate-card { max-width: 560px; width: 100%; padding: clamp(28px, 4vw, 46px); text-align: left; }
.confgate-card .eyebrow { color: var(--gold); }
.confgate-card h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.02; margin: 14px 0 18px; }
.confgate-card h3 .serif-em { color: var(--gold); }
.confgate-card .cg-body { font-size: 13.5px; line-height: 1.64; color: rgba(255,247,235,0.82); margin-bottom: 26px; }
.confgate-card .btn { width: 100%; justify-content: center; }

/* ============================================================
   v13 — fix section-head collision (heading vs. note overlap)
   ============================================================ */
/* The split-word reveal let the un-capped <h2> overflow its flex
   row, so the description wrapped on top of the heading's 2nd line.
   A 2-column grid keeps heading and note in separate tracks — they
   can never overlap, at any width. (display:block heads opt out.) */
.head:not([style*="block"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40ch);
  align-items: end;
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 18px;
}
.head:not([style*="block"]) h2 { min-width: 0; }
.head:not([style*="block"]) .note { align-self: end; max-width: none; }
@media (max-width: 820px){
  .head:not([style*="block"]) { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Invest: questionnaire next-step entry ---------- */
.ask-next { display: flex; align-items: center; gap: 18px; max-width: 620px; margin: clamp(34px,5vh,52px) auto 0; }
.ask-next .an-rule { flex: 1; height: 1px; background: rgba(255,247,235,0.2); }
.ask-next .an-or { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,247,235,0.6); }
.ask-next-copy { max-width: 560px; margin: 18px auto 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: rgba(255,247,235,0.74); }
.ask-next-btn { display: inline-flex; margin-top: 22px; }

/* ---------- Invest: how-to-invest process strip ---------- */
.invest-path { max-width: 960px; margin: clamp(40px,6vh,66px) auto 0; }
.ipath-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.ipath { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 0; padding: 0; text-align: left; }
@media (max-width: 760px){ .ipath { grid-template-columns: 1fr; } }
.istep { display: flex; gap: 14px; padding: 20px; border: 1px solid rgba(255,247,235,0.16); border-radius: 14px; background: rgba(255,247,235,0.03); }
.istep .in { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: rgba(255,247,235,0.46); flex: 0 0 auto; padding-top: 3px; }
.istep .ib { display: flex; flex-direction: column; gap: 7px; }
.istep .it { font-family: var(--font-display); font-size: 19px; color: var(--cream); line-height: 1.12; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.istep .id { font-size: 12.5px; line-height: 1.5; color: rgba(255,247,235,0.6); }
.istep.active { border-color: var(--gold); background: rgba(224,162,75,0.09); box-shadow: 0 18px 50px -28px rgba(224,162,75,0.7); }
.istep.active .in, .istep.done .in { color: var(--gold); }
.ireq { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: linear-gradient(180deg,var(--gold),var(--ochre)); padding: 4px 9px; border-radius: 100px; }

/* ---------- Invest: primary questionnaire CTA ---------- */
.ask-cta { max-width: 620px; margin: clamp(26px,4vh,42px) auto 0; padding: clamp(26px,3vw,38px); text-align: center; }
.ask-cta .eyebrow { color: var(--gold); }
.ask-cta h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px,3vw,38px); margin: 12px 0; line-height: 1.02; }
.ask-cta p { font-size: 14.5px; line-height: 1.6; color: rgba(255,247,235,0.76); max-width: 48ch; margin: 0 auto 22px; }
.ask-cta .btn-primary { display: inline-flex; }