/* CreatorsForge · forge.css · relaunch design system (2026-10)
Brand law: brand/brand_context.md. Motion grammar: motion-kit/MOTION-LANGUAGE.md.
Only transform and opacity animate. One ember glow per screen. Text on ember is forge-dark. */
@font-face { font-family: 'Space Grotesk'; src: url(../assets/fonts/Space-Grotesk.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(../assets/fonts/DM-Sans.woff2) format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(../assets/fonts/JetBrains-Mono.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
:root {
--cf-forge: #1A1916;
--cf-charcoal: #2C2924;
--cf-ember: #E8762C;
--cf-bronze: #C4873A;
--cf-warm-grey: #9E9890;
--cf-ash: #6B6660;
--cf-offwhite: #F5F0E8;
--cf-hot: #FFC37A;
--cf-white-hot: #FFF4DE;
--bg: var(--cf-forge);
--surface: #25221E;
--surface-2: #322E28;
--ink: var(--cf-offwhite);
--ink-2: #D9D2C6;
--muted: var(--cf-warm-grey);
--line: rgba(245, 240, 232, 0.09);
--line-2: rgba(245, 240, 232, 0.16);
--accent: var(--cf-ember);
--accent-rgb: 232, 118, 44;
--font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
--font-ui: 'DM Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--wrap: 1240px;
--gutter: clamp(16px, 4vw, 40px);
--sec: clamp(96px, 13vh, 168px);
--r: 20px;
--r-lg: 30px;
--nav-h: 64px;
--shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75), 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line);
--warm: 0 40px 90px -40px rgba(var(--accent-rgb), 0.38);
--out: cubic-bezier(0.16, 1, 0.3, 1);
--in: cubic-bezier(0.64, 0, 0.78, 0);
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (max-width: 767px) { :root { --nav-h: 56px; } }
/* ── base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.65 var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
:focus-visible { outline: 2px solid var(--cf-hot); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(var(--accent-rgb), 0.35); color: var(--cf-white-hot); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 16px; border-radius: 10px; background: var(--cf-ember); color: var(--cf-forge); font-weight: 600; transform: translateY(-160%); }
.skip:focus { transform: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sec { position: relative; padding-block: var(--sec); }
.sec--tight { padding-block: calc(var(--sec) * 0.6); }
/* ── type ─────────────────────────────────────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 0.7em; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cf-bronze); }
.eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; opacity: 0.75; }
.display { font: 700 clamp(2.9rem, 7.6vw, 6.5rem)/0.95 var(--font-display); letter-spacing: -0.042em; text-wrap: balance; }
.h2 { font: 700 clamp(2.3rem, 5.6vw, 4.75rem)/0.98 var(--font-display); letter-spacing: -0.038em; text-wrap: balance; }
.h3 { font: 600 clamp(1.3rem, 2.1vw, 1.7rem)/1.15 var(--font-display); letter-spacing: -0.02em; }
.lede { font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 38ch; }
.copy { color: var(--ink-2); max-width: 56ch; }
.mono { font-family: var(--font-mono); }
.label { font: 500 0.72rem/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.example { font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-ash); }
/* heat: the accent word goes grey → white-hot → ember (G1). Without JS or motion it's just ember. */
.heat { color: var(--cf-ember); }
.js .heat { color: #7A746C; }
.js .heat.lit { color: var(--cf-ember); animation: heat 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes heat {
0% { color: #7A746C; text-shadow: 0 0 0 rgba(255, 195, 122, 0); }
42% { color: var(--cf-white-hot); text-shadow: 0 0 26px rgba(255, 195, 122, 0.85), 0 0 2px rgba(255, 244, 222, 0.9); }
100% { color: var(--cf-ember); text-shadow: 0 0 0 rgba(255, 195, 122, 0); }
}
/* reading register (G7): 12 px rise + fade, content never waits */
.js [data-reveal] { opacity: 0; transform: translateY(12px); }
.js [data-reveal].in { opacity: 1; transform: none; transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); }
/* ── buttons (G6) ─────────────────────────────────────── */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 52px; padding: 0 1.55em; border: 0; border-radius: 999px; font: 600 1rem/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: transform 0.28s var(--spring); -webkit-tap-highlight-color: transparent; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn--ember { background: var(--cf-ember); color: var(--cf-forge); box-shadow: 0 16px 40px -14px rgba(var(--accent-rgb), 0.7), inset 0 1px 0 rgba(255, 244, 222, 0.4); }
.btn--ember::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 25%, rgba(255, 244, 222, 0.6) 50%, transparent 75%); transform: translateX(-130%); transition: transform 0.8s var(--out); }
.btn--ember:hover::after, .btn--ember:focus-visible::after { transform: translateX(130%); }
.btn--ghost { background: rgba(44, 41, 36, 0.35); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.65); }
.btn--sm { min-height: 44px; padding: 0 1.15em; font-size: 0.92rem; }
.btn .arr { transition: transform 0.28s var(--spring); }
.btn:hover .arr { transform: translateX(3px); }
.btn.strike { animation: strike 0.32s steps(1, end); }
@keyframes strike { 0% { filter: brightness(1.6); } 30% { filter: none; } }
/* ── chips ─────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 0.55em; min-height: 34px; padding: 0 0.9em; border-radius: 999px; background: rgba(44, 41, 36, 0.55); box-shadow: inset 0 0 0 1px var(--line); font: 500 0.78rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-2); }
.chip b { color: var(--cf-hot); font-weight: 600; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--cf-ember); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9); }
/* ── nav ───────────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); }
.nav::before { content: ''; position: absolute; inset: 0; background: rgba(26, 25, 22, 0.97); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity 0.35s ease; }
.nav.scrolled::before { opacity: 1; }
.nav .wrap { position: relative; height: 100%; display: flex; align-items: center; gap: 24px; }
.nav__logo { display: block; flex: none; }
.nav__logo img { height: 24px; width: auto; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a { position: relative; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 0.95rem; color: var(--ink-2); transition: color 0.2s ease; }
.nav__links a:hover, .nav__links a[aria-current='page'] { color: var(--ink); }
.nav__links a[aria-current='page']::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--cf-ember); }
.nav .btn { flex: none; }
@media (max-width: 767px) {
.nav__links { position: fixed; top: var(--nav-h); left: 0; right: 0; margin: 0; padding: 6px var(--gutter); gap: 2px; overflow-x: auto; scrollbar-width: none; background: rgba(26, 25, 22, 0.97); border-bottom: 1px solid var(--line); transform: translateY(-110%); transition: transform 0.35s var(--out); }
.nav.scrolled .nav__links, .nav.rail .nav__links { transform: none; }
.nav__links a { white-space: nowrap; font-size: 0.88rem; padding: 8px 12px; }
.nav .btn { margin-left: auto; }
}
/* heat bar (G2, phones) + forge-temperature readout (G2, desktop) */
.heatbar { position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 49; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cf-ash), var(--cf-ember) 60%, var(--cf-hot)); pointer-events: none; }
.temp { position: fixed; left: var(--gutter); bottom: 22px; z-index: 40; display: none; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(26, 25, 22, 0.9); box-shadow: inset 0 0 0 1px var(--line); font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.temp.on { opacity: 1; }
.temp__deg { color: var(--cf-hot); min-width: 5.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.temp__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-ember); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9); }
@media (min-width: 1024px) { .temp { display: inline-flex; } .heatbar { display: none; } }
/* ── surfaces ──────────────────────────────────────────── */
.panel { position: relative; border-radius: var(--r); background: linear-gradient(180deg, rgba(50, 46, 40, 0.55), rgba(37, 34, 30, 0.55)); box-shadow: var(--shadow); }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; background-image: url("data:image/svg+xml;utf8,"); }
.glow { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.32), rgba(var(--accent-rgb), 0) 68%); }
.sparkle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--cf-hot); box-shadow: 0 0 10px 2px rgba(var(--accent-rgb), 0.8); pointer-events: none; }
/* ── hero ──────────────────────────────────────────────── */
.hero { position: relative; overflow: clip; padding-top: calc(var(--nav-h) + clamp(28px, 7vh, 88px)); padding-bottom: clamp(56px, 10vh, 120px); }
.hero .glow { width: 1100px; height: 1100px; left: 50%; top: -260px; margin-left: -300px; }
.hero__grid { position: relative; display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
.hero__copy > * + * { margin-top: 22px; }
.hero .display { margin-top: 18px; }
.hero .lede { margin-top: 24px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .chips { margin-top: 30px; }
.odo { display: inline-flex; align-items: baseline; gap: 0.6em; font: 500 clamp(0.8rem, 1.1vw, 0.95rem)/1 var(--font-mono); letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.odo__num { color: var(--ink); font-variant-numeric: tabular-nums; }
.odo__zero { display: inline-block; color: var(--cf-hot); font-weight: 700; }
.odo__zero.slam { animation: slam 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes slam { 0% { transform: scale(2.4); opacity: 0; } 35% { transform: scale(0.94); opacity: 1; } 60% { transform: scale(1.03); } 100% { transform: none; } }
.shake { animation: shake 0.42s steps(12, end); }
@keyframes shake { 0% { transform: translate(0, 0); } 10% { transform: translate(-5px, 3px); } 20% { transform: translate(4px, -4px); } 30% { transform: translate(-3px, 2px); } 45% { transform: translate(2px, -2px); } 60% { transform: translate(-1px, 1px); } 100% { transform: none; } }
.vsl { position: relative; justify-self: end; width: 100%; max-width: 560px; }
.vsl__frame { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16 / 9; background: #141210; box-shadow: var(--shadow), var(--warm); }
.vsl__frame video, .vsl__frame img { width: 100%; height: 100%; object-fit: cover; }
/* centred with margins, not a transform: .btn:hover/:active set their own transform, which wiped a
translateX(-50%) and made the button jump sideways under the cursor (Duy, 2026-10-01) */
.vsl__tap { position: absolute; left: 0; right: 0; bottom: 18px; width: max-content; margin: 0 auto; }
.vsl__cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.vsl__soon { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center; padding: 24px; background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.18), rgba(26, 25, 22, 0) 65%); }
.vsl__soon .play { width: 74px; height: 74px; margin: 0 auto; border-radius: 50%; display: grid; place-content: center; background: var(--cf-ember); color: var(--cf-forge); box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0.16); }
@media (max-width: 1023px) {
.hero__grid { grid-template-columns: 1fr; }
.vsl { justify-self: stretch; max-width: 420px; margin-inline: auto; }
.vsl__frame { aspect-ratio: 9 / 14; max-height: 72svh; }
}
/* ── pinned scroll sections ────────────────────────────── */
.pin { position: relative; }
.pin__stage { position: sticky; top: 0; height: 100svh; overflow: clip; display: flex; align-items: center; padding-top: var(--nav-h); }
/* demand (01 · Discover) */
.demand { height: 230svh; }
.demand__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.demand__copy > * + * { margin-top: 20px; }
.phone { position: relative; width: min(330px, 78vw, calc((100svh - var(--nav-h) - 56px) * 9 / 18.5)); aspect-ratio: 9 / 18.5; margin-inline: auto; border-radius: 46px; background: #151311; box-shadow: 0 0 0 9px #24211D, 0 0 0 10px rgba(245, 240, 232, 0.1), 0 60px 110px -40px rgba(0, 0, 0, 0.9); overflow: hidden; transform-origin: 50% 60%; will-change: transform; }
.phone::before { content: ''; position: absolute; top: 12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #0E0D0B; z-index: 3; }
.phone__head { position: absolute; top: 52px; left: 18px; right: 18px; display: flex; align-items: center; gap: 10px; }
.phone__av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--cf-bronze), var(--cf-ember)); }
.phone__name { font-weight: 600; font-size: 0.9rem; }
.phone__sub { font-size: 0.72rem; color: var(--muted); }
.phone__feed { position: absolute; left: 14px; right: 14px; top: 104px; bottom: 16px; }
.bub { position: absolute; left: 0; max-width: 86%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #2A2723; color: var(--ink); font-size: 0.86rem; line-height: 1.35; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.7); will-change: transform, opacity; }
.bub small { display: block; margin-bottom: 3px; font: 500 0.62rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-bronze); }
.asked { position: absolute; left: 50%; top: 50%; width: 86%; padding: 18px 18px 16px; border-radius: 20px; background: #FFF4DE; color: var(--cf-forge); box-shadow: 0 30px 60px -20px rgba(var(--accent-rgb), 0.55); transform: translate(-50%, -50%) scale(0.6); opacity: 0; will-change: transform, opacity; }
.asked .label { color: #8E3510; }
.asked__q { margin-top: 8px; font: 700 1.2rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.asked__n { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; font: 600 0.8rem/1 var(--font-mono); color: #8E3510; }
.asked__n b { font: 700 2rem/1 var(--font-display); color: var(--cf-forge); font-variant-numeric: tabular-nums; }
.tagline-ill { margin-top: 12px; }
/* the gap */
.gap__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.exit { padding: 26px 26px 28px; }
.exit h3 { margin-top: 14px; }
.exit p { margin-top: 10px; color: var(--ink-2); }
.draft { margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: #1F1D1A; box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9rem; color: var(--muted); }
.draft__title { position: relative; display: inline-block; color: var(--ink-2); font-weight: 600; }
.draft__strike { position: absolute; left: -4px; right: -4px; top: 55%; height: 3px; border-radius: 3px; background: var(--cf-ember); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8); transform-origin: 0 50%; transform: scaleX(0); }
.meter { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 14px; background: #1F1D1A; box-shadow: inset 0 0 0 1px var(--line); }
.meter__amt { font: 700 1.6rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.meter__stamp { font: 700 0.7rem/1 var(--font-mono); letter-spacing: 0.12em; color: var(--cf-ember); padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--cf-ember); transform: rotate(-6deg) scale(0); opacity: 0; }
.third { margin-top: 48px; text-align: center; }
/* the operator story (pinned live film) */
.story { height: var(--story-h, 620svh); }
.story__grid { display: grid; grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.story__rail { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 4px; }
.story__rail li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font: 500 0.78rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cf-ash); transition: color 0.3s ease; }
.story__rail li b { display: grid; place-content: center; min-width: 34px; height: 24px; border-radius: 999px; font-weight: 600; background: rgba(245, 240, 232, 0.05); color: var(--muted); }
.story__rail li.on { color: var(--ink); }
.story__rail li.on b { background: var(--cf-ember); color: var(--cf-forge); }
.story__rail li.done b { color: var(--cf-hot); }
.story__now { margin-top: 26px; min-height: 5.4em; }
.story__now .h3 { color: var(--ink); }
.story__now p { margin-top: 8px; color: var(--ink-2); }
.film { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: var(--cf-forge); box-shadow: var(--shadow), var(--warm); }
.film__bar { position: absolute; left: 18px; right: 18px; bottom: -16px; height: 3px; border-radius: 3px; background: rgba(245, 240, 232, 0.08); overflow: hidden; }
.film__bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cf-bronze), var(--cf-ember), var(--cf-hot)); }
.story__mobilehead, .story__mobilecopy { display: none; }
@media (max-width: 1023px) {
.story__grid { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
.story__side { display: none; }
.story__mobilehead, .story__mobilecopy { display: block; width: 100%; text-align: center; }
.story__mobilehead .chip { margin-top: 10px; }
.film { aspect-ratio: 9 / 16; width: min(100%, calc((100svh - 250px) * 9 / 16)); border-radius: 26px; }
.story__mobilecopy { min-height: 3.4em; color: var(--ink-2); font-size: 0.95rem; max-width: 34ch; margin-inline: auto; }
}
/* pattern break: the pill wall */
.wall { position: relative; height: 170svh; }
.wall__stage { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; place-items: center; perspective: 1400px; }
.wall__plane { position: absolute; inset: -25% -30%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 14px 12px; transform: rotateX(28deg) rotateZ(-9deg); transform-origin: 50% 50%; will-change: transform; }
.pill { position: relative; padding: 14px 22px; border-radius: 999px; background: #211F1B; box-shadow: inset 0 0 0 1px var(--line); font: 600 clamp(0.75rem, 1.2vw, 0.95rem)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #6F6961; white-space: nowrap; }
.pill::after { content: attr(data-t); position: absolute; inset: 0; display: grid; place-content: center; border-radius: inherit; background: var(--cf-ember); color: var(--cf-forge); opacity: var(--k, 0); }
.wall__title { position: relative; z-index: 2; text-align: center; padding: 26px 34px; border-radius: 26px; background: rgba(26, 25, 22, 0.86); box-shadow: var(--shadow); }
/* you create / we operate */
.ops { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px; margin-top: 48px; }
.ops__col { padding: 26px; }
.ops__col ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.ops__col li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #1F1D1A; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; will-change: transform, opacity; }
.ops__col li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cf-ash); }
.ops__col--ours li::before { background: var(--cf-ember); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9); }
.ops__col--ours { box-shadow: var(--shadow), var(--warm); }
.anvil { height: 14px; margin-top: 20px; border-radius: 6px 6px 14px 14px; background: linear-gradient(180deg, #3A352E, #22201C); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7); }
/* formats */
.formats__picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.formats__picker button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(44, 41, 36, 0.55); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 500 0.85rem/1 var(--font-ui); cursor: pointer; transition: transform 0.25s var(--spring); }
.formats__picker button:hover { transform: translateY(-2px); }
.formats__picker button[aria-pressed='true'] { background: var(--cf-ember); color: var(--cf-forge); box-shadow: none; }
.formats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.fmt { padding: 26px; opacity: 0.55; transform: scale(0.97); transition: opacity 0.4s ease, transform 0.5s var(--spring); }
.fmt.on { opacity: 1; transform: none; box-shadow: var(--shadow), var(--warm); }
.fmt svg { width: 56px; height: 56px; color: var(--cf-bronze); }
.fmt.on svg { color: var(--cf-ember); }
.fmt h3 { margin-top: 18px; }
.fmt p { margin-top: 8px; color: var(--ink-2); font-size: 0.95rem; }
.fmt .label { margin-top: 16px; display: block; }
/* spec plates */
.plates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.plate { position: relative; padding: 24px 22px 22px; border-radius: 18px; background: linear-gradient(160deg, #3A352E, #23201C 60%); box-shadow: inset 0 1px 0 rgba(255, 244, 222, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 22px 40px -22px rgba(0, 0, 0, 0.8); }
.plate::before, .plate::after { content: ''; position: absolute; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #171512; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12); }
.plate::before { left: 12px; } .plate::after { right: 12px; }
.plate .plate__big { margin-top: 0; font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--cf-white-hot); }
.plate p { margin-top: 10px; color: var(--ink-2); font-size: 0.92rem; }
/* lineage */
.lineage { position: relative; }
.lineage__row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.8fr); gap: 16px; margin-top: 52px; align-items: stretch; }
.lineage__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.teacher { position: relative; z-index: 1; padding: 18px 18px 22px; }
.teacher img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; filter: sepia(0.35) saturate(0.9) contrast(1.02); }
.teacher__n { margin-top: 14px; }
.teacher h3 { margin-top: 6px; font-size: 1.25rem; }
.teacher p { margin-top: 6px; color: var(--ink-2); font-size: 0.92rem; }
.forgemark { position: relative; z-index: 1; display: grid; place-content: center; gap: 14px; padding: 22px; text-align: center; border-radius: var(--r); background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.2), rgba(26, 25, 22, 0) 70%); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35); }
.forgemark img { width: 150px; margin-inline: auto; }
.cert { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin-top: 56px; }
.cert__card { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #F5F0E8; box-shadow: var(--shadow); cursor: zoom-in; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.4s var(--out); }
.cert__card img { width: 100%; height: auto; }
.cert__card:hover { --rx: 3deg; --ry: -5deg; }
.fine { margin-top: 14px; font-size: 0.8rem; color: var(--muted); }
/* the call */
.call { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.agenda-wrap { position: relative; margin-top: 34px; }
.agenda { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 4px; }
.agenda-wrap::before { content: ''; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: rgba(245, 240, 232, 0.08); }
.agenda__fill { position: absolute; z-index: 0; left: 15px; top: 16px; width: 2px; height: calc(100% - 32px); background: linear-gradient(180deg, var(--cf-hot), var(--cf-ember)); transform-origin: 50% 0; transform: scaleY(0); }
.agenda li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; padding: 10px 0; }
.agenda li i { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-content: center; background: #24211D; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 0.72rem/1 var(--font-mono); font-style: normal; color: var(--muted); transition: background 0.3s ease, color 0.3s ease; }
.agenda li.on i { background: var(--cf-ember); color: var(--cf-forge); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.6); }
.agenda li b { display: block; font: 600 1.05rem/1.3 var(--font-display); }
.agenda li span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.92rem; }
.insights { padding: 22px; }
.insights__row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-2); }
.insights__row b { font: 600 1rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.insights__q { margin-top: 14px; padding: 14px; border-radius: 12px; background: #FFF4DE; color: var(--cf-forge); font-weight: 600; }
/* the promise seal */
.promise { text-align: center; }
.seal { position: relative; width: clamp(180px, 22vw, 240px); aspect-ratio: 1; margin: 38px auto 0; }
.seal svg { width: 100%; height: 100%; }
.seal.stamp { animation: stamp 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes stamp { 0% { transform: scale(1.9) rotate(-14deg); opacity: 0; } 40% { transform: scale(0.94) rotate(-4deg); opacity: 1; } 65% { transform: scale(1.03) rotate(-5deg); } 100% { transform: rotate(-5deg); } }
.typed { margin-top: 26px; font: 500 clamp(0.85rem, 1.3vw, 1rem)/1.5 var(--font-mono); color: var(--ink-2); min-height: 1.5em; }
.typed .caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--cf-ember); }
/* FAQ */
.faq { display: grid; gap: 10px; max-width: 880px; margin: 44px auto 0; }
.faq details { border-radius: 16px; background: rgba(37, 34, 30, 0.6); box-shadow: inset 0 0 0 1px var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 18px 22px; cursor: pointer; font: 600 1.05rem/1.35 var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 28px; height: 28px; display: grid; place-content: center; border-radius: 50%; background: rgba(245, 240, 232, 0.06); color: var(--cf-hot); font: 500 1.1rem/1 var(--font-mono); transition: transform 0.3s var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.4); }
.faq .ans { padding: 0 22px 20px; color: var(--ink-2); max-width: 70ch; }
/* close */
.close { position: relative; text-align: center; overflow: clip; }
.close .glow { width: 900px; height: 900px; left: 50%; top: 50%; margin: -450px 0 0 -450px; }
.close__tag { position: relative; display: inline-block; }
.squiggle { position: absolute; left: 4%; right: 4%; bottom: -0.28em; width: 92%; height: 0.4em; overflow: visible; }
.squiggle path { fill: none; stroke: var(--cf-ember); stroke-width: 5; stroke-linecap: round; }
.close__logo { width: min(340px, 70vw); margin: 56px auto 0; opacity: 0; transform: scale(0.94); }
.close__logo.on { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.8s var(--spring); }
.slots { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
.slot { width: 58px; height: 22px; border-radius: 8px; background: #171512; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--line); }
.slot.full { background: linear-gradient(180deg, var(--cf-hot), var(--cf-ember)); box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55); }
.close .btn { margin-top: 34px; }
.sparks-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* sticky mobile CTA bar */
.ctabar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 45; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(26, 25, 22, 0.97); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--line-2); transform: translateY(140%); transition: transform 0.45s var(--out); }
.ctabar.on { transform: none; }
.ctabar__slots { font: 500 0.72rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.ctabar__slots b { color: var(--cf-hot); }
@media (max-width: 767px) { .ctabar { display: flex; } }
/* footer */
.foot { padding: 64px 0 120px; border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.foot__logo img { height: 26px; width: auto; }
.foot__tag { margin-top: 14px; color: var(--muted); max-width: 30ch; }
.foot nav { display: grid; gap: 8px; align-content: start; }
.foot nav a { color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.foot nav a:hover { color: var(--ink); }
.foot__legal { margin-top: 44px; display: grid; gap: 10px; font-size: 0.8rem; color: var(--muted); max-width: 90ch; }
.foot__legal a { color: var(--ink-2); }
/* section heads */
.head { max-width: 760px; }
.head--c { margin-inline: auto; text-align: center; }
.head .h2 { margin-top: 18px; }
.head .lede, .head .copy { margin-top: 18px; }
.head--c .lede, .head--c .copy { margin-inline: auto; }
/* lightbox */
dialog.lightbox { padding: 0; border: 0; border-radius: 18px; background: transparent; max-width: min(1100px, 94vw); }
dialog.lightbox::backdrop { background: rgba(14, 13, 11, 0.9); }
dialog.lightbox img { width: 100%; height: auto; border-radius: 18px; }
dialog.lightbox form { position: absolute; top: 10px; right: 10px; }
.spark-dot { position: fixed; left: 0; top: 0; z-index: 91; width: 4px; height: 4px; border-radius: 50%; background: var(--cf-hot); box-shadow: 0 0 8px 2px rgba(var(--accent-rgb), 0.85); pointer-events: none; }
/* responsive */
@media (max-width: 1023px) {
.demand__grid, .call, .cert { grid-template-columns: 1fr; }
.demand__copy { text-align: center; }
.demand__copy .lede { margin-inline: auto; }
.plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lineage__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.forgemark { grid-column: 1 / -1; }
.foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
.gap__grid, .ops, .formats__grid { grid-template-columns: 1fr; }
.lineage__row { grid-template-columns: 1fr; }
.teacher { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 14px; }
.teacher img { grid-row: span 3; align-self: start; width: 96px; height: 96px; }
.teacher__n, .teacher h3, .teacher p { margin: 0; }
.demand { height: 210svh; }
.phone { width: min(300px, 76vw, calc((100svh - var(--nav-h) - 180px) * 9 / 18.5)); }
.foot__grid { grid-template-columns: 1fr; }
}
/* page transitions (G3): a molten wipe between pages where supported */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.45s var(--in) both; }
::view-transition-new(root) { animation: vt-in 0.5s var(--out) both; }
@keyframes vt-out { to { opacity: 0.35; transform: scale(0.985); } }
@keyframes vt-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* reduced motion: final states, no pinning, no autoplay */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
.js [data-reveal] { opacity: 1; transform: none; }
.js .heat { color: var(--cf-ember); }
.demand, .story, .wall { height: auto; }
.pin__stage, .wall__stage { position: relative; height: auto; min-height: 0; padding-block: var(--sec); }
.asked { opacity: 1; transform: translate(-50%, -50%); }
.bub { display: none; }
.draft__strike { transform: none; }
.meter__stamp { transform: rotate(-6deg); opacity: 1; }
.pill::after { opacity: 0; }
.agenda__fill { transform: none; }
.close__logo { opacity: 1; transform: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* hero odometer: hidden until its moment runs (a failsafe shows it after 2.5 s regardless) */
.js .odo { visibility: hidden; animation: odo-failsafe 0s 2.5s forwards; }
.js .odo.run { visibility: visible; animation: none; }
@keyframes odo-failsafe { to { visibility: visible; } }
/* lineage: cards light as the molten line reaches them */
.teacher, .forgemark { transition: box-shadow 0.5s ease; }
.teacher.lit { box-shadow: var(--shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.5), 0 24px 60px -30px rgba(var(--accent-rgb), 0.5); }
.teacher img { transition: filter 0.6s ease; }
.teacher.lit img { filter: sepia(0.15) saturate(1) contrast(1.04); }
.forgemark.lit { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.8), 0 0 60px -10px rgba(var(--accent-rgb), 0.45); }
/* the operator story on shorter desktop screens: keep the side column inside the pinned viewport */
.story__side .h2 { font-size: clamp(2rem, 3.8vw, 3.6rem); }
@media (min-width: 1024px) and (max-height: 820px) {
.story__side .h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.story__rail { margin-top: 16px; gap: 0; }
.story__rail li { padding: 6px 10px; }
.story__now { margin-top: 14px; min-height: 4.6em; }
}
@media (min-width: 1024px) and (max-height: 640px) { .story__rail { display: none; } }
/* ── /apply ─────────────────────────────────────────────── */
.apply-hero { padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 72px)); padding-bottom: clamp(40px, 7vh, 80px); }
.apply__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.apply__copy > * + * { margin-top: 18px; }
.apply__points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.apply__points li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: var(--ink-2); }
.apply__points li b { color: var(--ink); font-weight: 600; }
.apply__points svg { width: 22px; height: 22px; margin-top: 2px; color: var(--cf-ember); }
.bring { margin-top: 26px; padding: 18px 20px; }
.bring ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); }
.bring li + li { margin-top: 4px; }
.calbox { position: relative; min-height: 640px; padding: 10px; border-radius: var(--r-lg); background: #1F1D1A; box-shadow: var(--shadow), var(--warm); overflow: hidden; }
.calbox [data-cal] { width: 100%; min-height: 620px; }
.calbox__load { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; color: var(--muted); pointer-events: none; }
.calbox [data-cal]:not(:empty) + .calbox__load { display: none; }
.calbox__fallback { position: absolute; inset: auto 16px 16px 16px; padding: 16px; border-radius: 14px; background: #25221E; text-align: center; }
.booked { min-height: 620px; display: grid; place-content: center; gap: 16px; padding: 40px 28px; text-align: center; }
.booked__mark { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; display: grid; place-content: center; background: var(--cf-ember); color: var(--cf-forge); box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0.16), 0 0 60px rgba(var(--accent-rgb), 0.4); }
.booked ol { text-align: left; max-width: 34ch; margin: 8px auto 0; padding-left: 20px; color: var(--ink-2); }
.booked ol li + li { margin-top: 6px; }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; counter-reset: s; }
.steps4 li { list-style: none; position: relative; padding: 22px 20px; }
.steps4 li::before { counter-increment: s; content: '0' counter(s); display: block; font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.12em; color: var(--cf-hot); }
.steps4 li h3 { margin-top: 12px; font-size: 1.15rem; }
.steps4 li p { margin-top: 6px; color: var(--ink-2); font-size: 0.92rem; }
@media (max-width: 1023px) { .apply__grid { grid-template-columns: 1fr; } .steps4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .steps4 { grid-template-columns: 1fr; } .calbox { min-height: 560px; padding: 4px; } }
/* ── /how-it-works ──────────────────────────────────────── */
.page-hero { position: relative; overflow: clip; padding-top: calc(var(--nav-h) + clamp(32px, 7vh, 88px)); padding-bottom: clamp(48px, 8vh, 96px); }
.page-hero .glow { width: 1000px; height: 1000px; left: 50%; top: -420px; margin-left: -500px; }
.page-hero .display { margin-top: 18px; max-width: 14ch; }
.page-hero .lede { margin-top: 22px; }
.doors { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 48px; }
.door { position: relative; display: block; min-height: 150px; padding: 16px 14px; border-radius: 16px 16px 8px 8px; overflow: hidden; text-decoration: none; background: linear-gradient(180deg, #35302A, #1F1C19); box-shadow: inset 0 1px 0 rgba(255, 244, 222, 0.1), 0 20px 40px -24px rgba(0, 0, 0, 0.8); }
.door::before { content: ''; position: absolute; left: 14px; right: 14px; bottom: 16px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--cf-ember), var(--cf-hot)); box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.8); opacity: 0.55; transition: opacity 0.3s ease, transform 0.4s var(--spring); }
.door:hover::before, .door:focus-visible::before { opacity: 1; transform: scaleY(2.4); }
.door b { display: block; font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; color: var(--cf-hot); }
.door span { display: block; margin-top: 10px; font: 600 1.02rem/1.2 var(--font-display); color: var(--ink); }
.door:hover { transform: translateY(-3px); }
.door { transition: transform 0.3s var(--spring); }
.chap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4.5vw, 72px); align-items: center; }
.chap--flip .chap__media { order: -1; }
.chap .h2 { margin-top: 16px; font-size: clamp(2rem, 4.4vw, 3.6rem); }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 26px; color: var(--ink-2); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 12px; height: 2px; border-radius: 2px; background: var(--cf-ember); }
.loop { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: var(--cf-forge); box-shadow: var(--shadow); }
.loop--hot { box-shadow: var(--shadow), var(--warm); }
.strip14 { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; margin-top: 22px; }
.strip14 i { height: 28px; border-radius: 6px; background: #2A2723; box-shadow: inset 0 0 0 1px var(--line); }
.strip14 i.w { background: rgba(196, 135, 58, 0.45); }
.strip14 i.v { background: rgba(232, 118, 44, 0.55); }
.strip14 i.c { background: linear-gradient(180deg, var(--cf-hot), var(--cf-ember)); }
.strip14__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
@media (max-width: 1023px) {
.doors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chap { grid-template-columns: 1fr; }
.chap--flip .chap__media { order: 0; }
}
@media (max-width: 767px) {
.doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door { min-height: 104px; }
}
/* ── /about ─────────────────────────────────────────────── */
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.reelcard { position: relative; width: min(100%, 340px); margin-inline: auto; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #141210; box-shadow: var(--shadow), var(--warm); }
.reelcard video { width: 100%; height: 100%; object-fit: cover; }
.reelcard .label { position: absolute; left: 14px; bottom: 12px; color: var(--ink-2); }
.founder { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), 0.22), rgba(26, 25, 22, 0) 60%), #221F1B; box-shadow: var(--shadow); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__mono { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; }
.portrait__mono b { font: 700 4.5rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--cf-white-hot); }
.founder__story > * + * { margin-top: 18px; }
.founder__story p { color: var(--ink-2); max-width: 58ch; }
.founder__story .sig { font: 600 1rem/1 var(--font-display); color: var(--ink); }
.decade { margin-top: 26px; }
.decade__bar { position: relative; height: 6px; border-radius: 6px; background: rgba(245, 240, 232, 0.07); overflow: hidden; }
.decade__bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cf-bronze), var(--cf-ember), var(--cf-hot)); }
.decade__labels { display: flex; justify-content: space-between; margin-top: 8px; }
.shaped { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.shaped div { padding: 16px 18px; border-radius: 14px; background: #1F1D1A; box-shadow: inset 0 0 0 1px var(--line); }
.shaped b { display: block; font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-hot); }
.shaped span { display: block; margin-top: 8px; color: var(--ink-2); font-size: 0.92rem; }
.gates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
.gate { position: relative; padding: 24px 20px 22px; overflow: hidden; }
.gate__door { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #3A352E, #23201C); box-shadow: inset 0 0 0 1px var(--line-2); transform-origin: 50% 0; will-change: transform; }
.gate__n { font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; color: var(--cf-hot); }
.gate h3 { margin-top: 12px; font-size: 1.15rem; }
.gate p { margin-top: 6px; color: var(--ink-2); font-size: 0.92rem; }
@media (max-width: 1023px) { .about-hero__grid, .founder { grid-template-columns: 1fr; } .gates { grid-template-columns: 1fr 1fr; } .shaped { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .gates { grid-template-columns: 1fr; } }
/* ── 404 ────────────────────────────────────────────────── */
.cold { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 40px) var(--gutter) 80px; }
.anvil-cold { width: min(320px, 70vw); margin: 0 auto 30px; }
.anvil-cold .heatfill { fill: #3A352E; transition: fill 0.8s ease; }
.anvil-cold .heatglow { opacity: 0; transition: opacity 0.8s ease; }
.cold:has(.btn:hover) .anvil-cold .heatfill, .cold:has(.btn:focus-visible) .anvil-cold .heatfill { fill: var(--cf-ember); }
.cold:has(.btn:hover) .anvil-cold .heatglow, .cold:has(.btn:focus-visible) .anvil-cold .heatglow { opacity: 1; }
/* ── /watch + VSL player ────────────────────────────────── */
.theatre { padding-top: calc(var(--nav-h) + clamp(24px, 5vh, 56px)); padding-bottom: 40px; }
.theatre .vsl { max-width: 1100px; margin: 26px auto 0; justify-self: stretch; }
.theatre .vsl__frame { aspect-ratio: 16 / 9; }
.chapters12 { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-width: 1100px; margin: 22px auto 0; }
.chapters12 button { display: grid; gap: 6px; text-align: left; min-height: 56px; padding: 12px 14px; border: 0; border-radius: 12px; background: rgba(37, 34, 30, 0.6); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 500 0.86rem/1.25 var(--font-ui); cursor: pointer; transition: transform 0.25s var(--spring); }
.chapters12 button b { font: 600 0.68rem/1 var(--font-mono); letter-spacing: 0.1em; color: var(--cf-hot); }
.chapters12 button:hover { transform: translateY(-2px); }
.chapters12 button.on { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.6); color: var(--ink); }
.vsl__cta { position: absolute; right: 16px; top: 16px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.4s ease, transform 0.5s var(--spring); }
.vsl.offer .vsl__cta { opacity: 1; transform: none; pointer-events: auto; }
.btn.hot { animation: hotcta 1.6s ease-in-out 2; }
@keyframes hotcta { 0%, 100% { box-shadow: 0 16px 40px -14px rgba(var(--accent-rgb), 0.7); } 50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.25), 0 16px 50px -8px rgba(var(--accent-rgb), 0.95); } }
.vsl video::cue { background: rgba(26, 25, 22, 0.85); color: #F5F0E8; font-family: 'DM Sans', system-ui, sans-serif; }
.ai-credit { margin-top: 10px; text-align: center; }
/* operator story v2 (Duy, 2026-09-30): loops while on screen, chapters jump, no scroll-jacking */
.story { height: auto; }
.story .story__grid { grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr); align-items: center; }
.story__rail li { padding: 0; }
.story__rail li > a, .story__rail li > button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.2s ease, transform 0.25s var(--spring); }
.story__rail li > a:hover, .story__rail li > button:hover { background: rgba(245, 240, 232, 0.05); transform: translateX(3px); }
.film__ctrl { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.film__pause { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-content: center; background: rgba(44, 41, 36, 0.85); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); cursor: pointer; transition: transform 0.25s var(--spring); }
.film__pause:hover { transform: scale(1.06); }
.film__ctrl .film__bar { position: relative; left: auto; right: auto; bottom: auto; flex: 1; height: 3px; }
.film__ctrl .label { flex: none; min-width: 9ch; text-align: right; color: var(--ink-2); }
@media (max-width: 1023px) {
.story .story__grid { grid-template-columns: 1fr; gap: 18px; }
.story__side { display: block; text-align: center; }
.story__side .eyebrow { justify-content: center; }
.story__rail { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 20px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); }
.story__rail li > a, .story__rail li > button { white-space: nowrap; min-height: 40px; padding: 6px 12px; border-radius: 999px; background: rgba(44, 41, 36, 0.55); box-shadow: inset 0 0 0 1px var(--line); }
.story__rail li.on > * { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.6); }
.story__now { display: none; }
.story__media { width: 100%; }
.story .film { width: min(100%, calc((100svh - 230px) * 9 / 16)); margin-inline: auto; }
.film__ctrl { width: min(100%, calc((100svh - 230px) * 9 / 16)); margin-inline: auto; }
.story__mobilecopy { display: block; margin-top: 12px; text-align: center; }
}
/* Demand and the pill wall are time-based now (no pinning): they play when they arrive */
.demand { height: auto; }
.wall { height: auto; }
.wall__stage { position: relative; height: min(86svh, 760px); }
/* "your call is with Duy" */
.who { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--ink-2); font-size: 0.95rem; }
.who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cf-forge), 0 0 0 3px rgba(var(--accent-rgb), 0.55); }
.who b { color: var(--ink); font-weight: 600; }
.who--sm { margin-top: 0; gap: 8px; }
.who--sm img { width: 28px; height: 28px; }
/* grid blowout guard: a nowrap chip row must never widen its column past the viewport */
.story .story__grid > * { min-width: 0; }
@media (max-width: 1023px) { .story .story__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) { .story .story__grid { justify-items: stretch; } }
.apply-hero { position: relative; overflow: clip; }
/* legal pages (/terms, /privacy): clean reading layout */
.legal { max-width: 72ch; }
.legal h2 { font: 600 1.35rem/1.25 var(--font-display); margin-top: 40px; }
.legal p, .legal li { color: var(--ink-2); margin-top: 12px; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--cf-hot); }
/* footer v2 (Duy, 2026-09-30): icon links, disclaimer panel, full-width copyright bar */
.foot { padding: 64px 0 0; }
.foot__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.foot__nav { display: grid; gap: 8px; align-content: start; }
.foot__nav a { color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.foot__nav a:hover { color: var(--ink); }
.foot__social { list-style: none; margin: 20px 0 0; padding: 0; display: flex; gap: 10px; }
.foot__social a { display: grid; place-content: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink-2); background: rgba(44, 41, 36, 0.55); box-shadow: inset 0 0 0 1px var(--line); transition: color 0.2s ease, transform 0.25s var(--spring), box-shadow 0.2s ease; }
.foot__social a:hover, .foot__social a:focus-visible { color: var(--cf-hot); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.55); transform: translateY(-2px); }
.foot__social svg { width: 20px; height: 20px; }
.foot__disclaimer { display: flex; gap: 12px; align-items: flex-start; margin: 44px 0 0; padding: 16px 18px; border-radius: 14px; background: rgba(37, 34, 30, 0.5); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.82rem; line-height: 1.55; color: var(--muted); }
.foot__disclaimer svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--cf-bronze); }
.foot__bar { margin-top: 40px; border-top: 1px solid var(--line); }
.foot__bar-in { padding-block: 22px; font-size: 0.82rem; color: var(--muted); }
.foot__bar-in p { margin: 0; max-width: none; }
.foot__bar a { color: var(--ink-2); }
@media (max-width: 1023px) { .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 767px) { .foot__bar-in { padding-bottom: 96px; } }
/* apply v2 (Duy, 2026-09-30): the calendar gets the full width so Cal.com shows month + times side by side and stops dominating the page */
.apply-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: 28px; }
.apply-head .h2 { margin-top: 14px; }
.apply-head__points { margin: 0; }
.apply-hero .calbox { max-width: 1120px; margin-inline: auto; min-height: 0; padding: 8px; }
.apply-hero .calbox [data-cal] { min-height: 500px; }
.apply-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.apply-strip .bring { margin-top: 0; }
.apply-slots .slots { justify-content: flex-start; margin-top: 12px; }
@media (max-width: 1023px) { .apply-head, .apply-strip { grid-template-columns: 1fr; } .apply-head { align-items: start; } .apply-hero .calbox [data-cal] { min-height: 560px; } }
/* bug guard: .booked sets display:grid, which overrode the [hidden] attribute, so the "You're in" state showed under the calendar before anyone booked. booking.js clears hidden on bookingSuccessful. */
.booked[hidden] { display: none; }
/* ---- round 2 fixes (integration) ---- */
/* phones: the hidden link rail now waits fully above the viewport, so it no longer covers the logo at the top of the page. It slides in once scrolled, and keyboard focus brings it in too. */
@media (max-width: 767px) {
.nav__links { transform: translateY(calc(-100% - var(--nav-h) - 2px)); }
.nav__links:focus-within { transform: none; }
}
/* desktop: the temperature readout fades out while the footer is on screen (site.js adds .off), so it never sits on the copyright line */
.temp.off { opacity: 0; }
/* ---- opt-in film sound (js/forge/narrate.js) ----
Films are silent loops; "Play with sound" swaps in the narrated cut with captions. */
.film-sound { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: rgba(44, 41, 36, 0.88); box-shadow: inset 0 0 0 1px rgba(232, 118, 44, 0.5); color: var(--ink); font: 600 14px/1 var(--font-ui); letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; transition: transform 0.25s var(--spring), box-shadow 0.2s, background-color 0.2s; }
.film-sound svg { flex: none; color: var(--cf-ember); }
.film-sound small { font: 500 12px/1 var(--font-mono); color: var(--ink-2); }
.film-sound:hover { transform: scale(1.04); box-shadow: inset 0 0 0 1px var(--cf-ember); }
.film-sound:active { transform: scale(0.97); }
.film-sound:focus-visible { outline: 2px solid var(--cf-ember); outline-offset: 3px; }
.film-sound.on { background: var(--cf-ember); color: var(--cf-forge); box-shadow: none; }
.film-sound.on svg { color: var(--cf-forge); }
.film-sound[hidden] { display: none; }
.film__ctrl .film-sound { flex: none; }
.chap__media { position: relative; }
.film-sound--over { position: absolute; right: 14px; bottom: 14px; z-index: 3; }
.mk-narrated { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; }
.narrating > .mk-stage { visibility: hidden; }
.film-cc { position: absolute; left: 0; right: 0; bottom: 4.5%; z-index: 2; width: fit-content; max-width: 86%; margin: 0 auto; padding: 6px 12px; border-radius: 8px; background: rgba(26, 25, 22, 0.84); color: var(--ink); font: 600 clamp(13px, 1.5vw, 17px)/1.35 var(--font-ui); text-align: center; text-wrap: balance; opacity: 0; transition: opacity 0.12s; pointer-events: none; }
.film-cc.on { opacity: 1; }
@media (max-width: 1023px) {
.film__ctrl .film-sound small { display: none; }
.film__ctrl .film-sound { padding: 0 14px 0 12px; }
/* the film shows its own chapter chip on phones; give the progress bar the room */
.film__ctrl .label { display: none; }
}
/* phones: the chapter pill sits under the film, so it never covers the captions */
@media (max-width: 767px) {
.film-sound--over { position: static; margin-top: 12px; }
}
/* while a narrated film plays: the AI-voice credit, top-left inside the frame */
.film-ai { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 10px; border-radius: 999px; background: rgba(26, 25, 22, 0.8); color: var(--ink-2); font-size: 11px; pointer-events: none; }
/* the about reel: its sound pill sits bottom-right, opposite the "Intro · 12 s" label */
.film-sound--reel { position: absolute; right: 12px; bottom: 10px; z-index: 2; height: 38px; padding: 0 14px 0 12px; font-size: 13px; }
/* the VSL card: "Muted preview · captions on" until the full film plays */
/* above the film, so it never sits on the picture; keeps its space once the full film plays */
.vsl__lbl { display: block; margin: 0 0 10px 2px; color: var(--ink-2); }
.vsl.playing .vsl__lbl { visibility: hidden; }
.vsl__tap { z-index: 2; gap: 10px; }
/* the hero counter sits on its own line under the eyebrow (both are inline boxes, so they ran together) */
.hero__copy .odo { display: flex; flex-wrap: wrap; row-gap: 8px; width: fit-content; }
.hero__copy .odo .example { white-space: nowrap; }
@media (max-width: 520px) { .hero__copy .odo .example { flex-basis: 100%; } }
/* ---- accessibility fixes before launch (inspector audit, 2026-10-01) ---- */
/* the footer logo's focus ring paints (an inline link around a block image painted nothing) */
.foot__logo { display: inline-block; }
/* phones: the CTA bar leaves the tab order while it's off screen, and focus never lands under the
fixed header + link rail or behind the bar */
.ctabar { visibility: hidden; transition: transform 0.45s var(--out), visibility 0s 0.45s; }
.ctabar.on { visibility: visible; transition-delay: 0s; }
@media (max-width: 767px) { html { scroll-padding-top: calc(var(--nav-h) + 68px); scroll-padding-bottom: 96px; } }
/* the film's focus ring shows inside its frame (the frame clips overflow) */
.vsl__frame video:focus-visible { outline: 2px solid var(--cf-hot); outline-offset: -4px; }
/* AA contrast: example tags and the story's inactive steps */
.example { color: var(--muted); }
.story__rail li { color: var(--muted); }
/* reduced motion: no dead film controls (the poster and the screen-reader step list carry the story) */
@media (prefers-reduced-motion: reduce) { .film__ctrl, .story__rail, .story__mobilecopy { display: none; } }
/* ---- the film's fallback (vsl.js, 2026-10-01): a message and a retry where iOS drew a dead player ---- */
.vsl__fail { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; background: rgba(20, 18, 16, 0.94); }
.vsl__fail[hidden] { display: none; }
.vsl__fail-t { margin: 0; max-width: 22ch; font: 600 1.15rem/1.3 var(--font-display); color: var(--ink); text-wrap: balance; }
.vsl__fail-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vsl__fail-c { margin: 0; color: var(--ink-2); }
.vsl__fail-c:empty { display: none; }
/* iPhone captions (vsl.js): drawn over the film from the VTT, because a