/* ── TOKENS ──────────────────────────────────────────── */
:root {
  --bg:      #1C1917;
  --surface: #2A2521;
  --s2:      #332E2A;
  --accent:  #D97757;
  --a10:     rgba(217,119,87,0.10);
  --a20:     rgba(217,119,87,0.20);
  --a40:     rgba(217,119,87,0.40);
  --text:    #F5F0EB;
  --muted:   rgba(245,240,235,0.50);
  --border:  rgba(245,240,235,0.07);
  --serif:   'Playfair Display', Georgia, serif;
  --sans:    'Inter', system-ui, sans-serif;
  --ease:    cubic-bezier(0.16,1,0.3,1);
}

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; } /* Lenis handles smooth scroll */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  cursor: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; object-fit: cover; }

/* ── GRAIN OVERLAY ───────────────────────────────────── */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%; height: 200%;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain 6s steps(8) infinite;
}
@keyframes grain {
  0%  { transform: translate(0,0); }
  12% { transform: translate(-3%,-4%); }
  25% { transform: translate(4%,2%); }
  37% { transform: translate(-2%,4%); }
  50% { transform: translate(3%,-2%); }
  62% { transform: translate(-4%,3%); }
  75% { transform: translate(2%,-4%); }
  87% { transform: translate(-3%,2%); }
}

/* ── SCROLL PROGRESS ─────────────────────────────────── */
#progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 8999;
  box-shadow: 0 0 10px var(--accent), 0 0 30px var(--a20);
  transition: width 0.05s linear;
}

/* ── PRELOADER ───────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  pointer-events: none;
}
.pre-wordmark {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.pre-char {
  font-family: var(--sans);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--text);
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  animation: charUp 0.6s var(--ease) forwards;
}
.pre-char.space { width: 0.6em; }
@keyframes charUp {
  to { transform: translateY(0); opacity: 1; }
}
.pre-tagline {
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  animation: fadeIn 0.6s ease 1.1s forwards;
}
.pre-line {
  width: 0;
  height: 1px;
  background: var(--accent);
  animation: lineGrow 0.8s var(--ease) 1.4s forwards;
  box-shadow: 0 0 8px var(--accent);
}
@keyframes lineGrow { to { width: 120px; } }
@keyframes fadeIn { to { opacity: 1; } }
/* Preloader exit */
#preloader.exit {
  animation: preExit 0.8s var(--ease) forwards;
}
@keyframes preExit {
  0%   { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 100% 0); }
}

/* ── CURSOR ──────────────────────────────────────────── */
#cursor {
  position: fixed;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9800;
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
  box-shadow: 0 0 12px 3px var(--a40), 0 0 40px 12px var(--a20);
  transition: width 0.2s var(--ease), height 0.2s var(--ease), opacity 0.3s, background 0.2s;
}
#cursor-ring {
  position: fixed;
  width: 52px; height: 52px;
  border: 1px solid rgba(217,119,87,0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9799;
  transform: translate(-50%,-50%);
  transition: width 0.5s var(--ease), height 0.5s var(--ease), border-color 0.4s, background 0.4s, opacity 0.3s;
}
body.cursor-hover #cursor { width: 5px; height: 5px; opacity: 0.6; }
body.cursor-hover #cursor-ring { width: 72px; height: 72px; border-color: rgba(217,119,87,0.55); background: rgba(217,119,87,0.04); }
body.cursor-click #cursor { width: 4px; height: 4px; }
body.cursor-click #cursor-ring { width: 88px; height: 88px; border-color: rgba(217,119,87,0.18); }

/* ── SPOTLIGHT ────────────────────────────────────────── */
#spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 1.2s;
  opacity: 0;
  background: radial-gradient(ellipse 420px 420px at 50% 50%, rgba(217,119,87,0.055) 0%, transparent 70%);
  will-change: background;
}

/* ── NAV ─────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 3rem;
  transition: background 0.5s, backdrop-filter 0.5s;
}
nav.scrolled {
  background: rgba(28,25,23,0.65);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  transition: color 0.3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* ── SOUND TOGGLE ────────────────────────────────────── */
#sound-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 500;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1rem;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
#sound-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--s2); }
#sound-btn.active { border-color: var(--accent); color: var(--accent); }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  background: var(--accent);
  color: #1C1917;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
  will-change: transform;
}
.btn-primary:hover {
  transform: scale(1.04);
  box-shadow: 0 0 40px rgba(217,119,87,0.55), 0 0 80px rgba(217,119,87,0.2);
}
.btn-ghost {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s;
}
.btn-ghost:hover { color: var(--text); }

/* ── HERO ────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 3rem 5.5rem;
  overflow: hidden;
}
/* LTX-2.3 video background */
#hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 2s ease;
}
#hero-video.ready { opacity: 1; }
/* CSS fallback */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 65% 35%, rgba(120,60,20,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 25% 75%, rgba(90,40,10,0.15) 0%, transparent 50%),
    radial-gradient(ellipse 90% 50% at 50% 90%, rgba(217,119,87,0.06) 0%, transparent 50%),
    linear-gradient(170deg, #0c0a08 0%, #181512 35%, #1C1917 70%, #201c19 100%);
}
canvas#particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, rgba(28,25,23,0.96) 0%, rgba(28,25,23,0.5) 45%, rgba(28,25,23,0.15) 100%),
    linear-gradient(to right, rgba(28,25,23,0.45) 0%, transparent 55%);
}
/* Huge bg number for depth */
.hero-bg-num {
  position: absolute;
  bottom: -3vw;
  right: -1vw;
  z-index: 1;
  font-family: var(--serif);
  font-size: 28vw;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,240,235,0.04);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 960px;
}
.hero-eyebrow {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0;
}
.hero-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(4.5rem, 10vw, 10rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  overflow: hidden;
  margin-bottom: 2rem;
}
.hero-line {
  display: block;
  overflow: hidden;
}
.hero-line span {
  display: block;
  transform: translateY(110%);
}
.hero-line-italic span { font-style: italic; font-weight: 400; }
.hero-line-bold span   { font-style: normal; font-weight: 900; color: var(--accent); }
.hero-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: var(--muted);
  font-weight: 300;
  line-height: 1.7;
  max-width: 460px;
  opacity: 0;
  transform: translateY(20px);
}
.hero-cta {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  opacity: 0;
  transform: translateY(20px);
}
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  right: 3rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
}
.scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollAnim 2.4s ease-in-out infinite;
}
@keyframes scrollAnim {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── STATS TICKER ────────────────────────────────────── */
#stats {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0;
}
.ticker-wrap {
  display: flex;
  flex-direction: column;
}
.ticker-row {
  display: flex;
  width: max-content;
  padding: 1rem 0;
}
.ticker-row.row-1 { animation: tickerL 30s linear infinite; }
.ticker-row.row-2 { animation: tickerR 24s linear infinite; opacity: 0.55; }
@keyframes tickerL { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes tickerR { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.t-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0 2.5rem;
  white-space: nowrap;
  border-right: 1px solid var(--border);
}
.t-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
}
.t-lbl {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── SHARED ──────────────────────────────────────────── */
.container { max-width: 1440px; margin: 0 auto; padding: 0 3.5rem; }
.s-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.s-tag::before { content: ''; width: 22px; height: 1px; background: var(--accent); }
.s-title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.5vw, 5.5rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.s-title em { font-style: italic; font-weight: 400; color: var(--muted); }

/* ── ABOUT ───────────────────────────────────────────── */
#about { padding: 9rem 0; border-top: 1px solid var(--border); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; align-items: start; }
.about-text {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.85;
  font-weight: 300;
  margin-bottom: 1.5rem;
}
.about-text strong { color: var(--text); font-weight: 600; }
.about-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--accent);
  padding: 1.25rem 0;
  border-top: 1px solid var(--a20);
  border-bottom: 1px solid var(--a20);
  margin-top: 2rem;
}
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem;
  transition: border-color 0.4s, transform 0.4s var(--ease);
  cursor: none;
}
.stat-card:hover { border-color: var(--a40); transform: translateY(-3px); }
.stat-n {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.stat-l {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}

/* ── SERVICES ────────────────────────────────────────── */
#services { padding: 9rem 0; }
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.85rem;
}
.bcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  padding: 2.75rem;
  position: relative;
  overflow: hidden;
  cursor: none;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color 0.4s;
  will-change: transform;
  transform-style: preserve-3d;
}
.bcard:nth-child(1) { grid-column: span 7; }
.bcard:nth-child(2) { grid-column: span 5; }
.bcard:nth-child(3) { grid-column: span 6; }
.bcard:nth-child(4) { grid-column: span 6; }
.bcard:nth-child(5) { grid-column: span 6; }
.bcard:hover { border-color: var(--a40); }
/* subtle bg gradients per card */
.bcard:nth-child(1) { background: linear-gradient(135deg, #2D2825 0%, #221E1A 100%); background-image: radial-gradient(ellipse 80% 60% at 85% 15%, rgba(217,119,87,0.09) 0%, transparent 55%), linear-gradient(135deg, #2D2825 0%, #221E1A 100%); }
.bcard:nth-child(2) { background: linear-gradient(210deg, #282420 0%, #221E1B 100%); background-image: radial-gradient(ellipse 60% 80% at 15% 85%, rgba(217,119,87,0.07) 0%, transparent 55%), linear-gradient(210deg, #282420 0%, #221E1B 100%); }
.bcard:nth-child(3) { background: linear-gradient(170deg, #2A2521 0%, #201D1A 100%); background-image: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(217,119,87,0.06) 0%, transparent 65%), linear-gradient(170deg, #2A2521 0%, #201D1A 100%); }
.bcard:nth-child(4) { background: linear-gradient(50deg, #2B2721 0%, #231F1C 100%); background-image: radial-gradient(ellipse 60% 70% at 80% 75%, rgba(217,119,87,0.08) 0%, transparent 55%), linear-gradient(50deg, #2B2721 0%, #231F1C 100%); }
.bcard:nth-child(5) { background: linear-gradient(320deg, #2A2521 0%, #222020 100%); background-image: radial-gradient(ellipse 70% 60% at 20% 20%, rgba(217,119,87,0.08) 0%, transparent 55%), linear-gradient(320deg, #2A2521 0%, #222020 100%); }
.bcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, var(--a10) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.5s;
}
.bcard:hover::after { opacity: 1; }
.bcard-icon {
  position: absolute;
  top: 2.5rem; right: 2.5rem;
  font-size: 1.8rem;
  opacity: 0.4;
  transition: opacity 0.4s, transform 0.4s var(--ease);
}
.bcard:hover .bcard-icon { opacity: 0.7; transform: scale(1.1) rotate(-5deg); }
.bcard-num {
  font-family: var(--serif);
  font-size: 0.65rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 0.7rem;
}
.bcard-title {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.bcard-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.65;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s var(--ease), opacity 0.4s;
}
.bcard:hover .bcard-desc { max-height: 100px; opacity: 1; }
@media (hover: none) { .bcard-desc { max-height: 100px; opacity: 1; } }

/* ── CASE STUDIES ────────────────────────────────────── */
#work { padding: 9rem 0 0; }
.work-header {
  padding: 0 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
}
.work-hint {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.work-hint::after { content: '→'; color: var(--accent); font-size: 1.1rem; }
.cases-track {
  display: flex;
  gap: 1rem;
  padding: 0 3.5rem 5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  cursor: grab;
}
.cases-track:active { cursor: grabbing; }
.cases-track::-webkit-scrollbar { display: none; }
.ccase {
  flex: 0 0 360px;
  height: 580px;
  border-radius: 1.1rem;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  cursor: none;
  will-change: transform;
  transform-style: preserve-3d;
}
.ccase-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: filter 0.5s;
  animation: kenBurns 14s ease-in-out infinite;
}
.ccase:hover .ccase-bg { animation-play-state: paused; filter: brightness(1.18); }
.ccase-expand {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  z-index: 5;
  width: 36px; height: 36px;
  border: 1px solid rgba(245,240,235,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  color: rgba(245,240,235,0.5);
  opacity: 0;
  transition: opacity 0.35s, border-color 0.35s, color 0.35s, transform 0.35s var(--ease);
  backdrop-filter: blur(8px);
  background: rgba(28,25,23,0.35);
}
.ccase:hover .ccase-expand { opacity: 1; border-color: var(--accent); color: var(--accent); transform: scale(1.1); }
@media (hover: none) { .ccase-expand { opacity: 0.55; } }
.ccase-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,25,23,0.97) 0%, rgba(28,25,23,0.55) 55%, rgba(28,25,23,0.12) 100%);
  transition: opacity 0.4s;
}
.ccase-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.25rem;
}
.ccase-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--a40);
  padding: 0.28rem 0.75rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}
.ccase-name {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 0.85rem;
}
.ccase-result {
  font-size: 0.8rem;
  color: rgba(245,240,235,0.65);
  line-height: 1.55;
  position: relative;
  padding-bottom: 0.85rem;
  transition: color 0.4s;
}
.ccase-result::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.5s var(--ease);
}
.ccase:hover .ccase-result { color: var(--text); }
.ccase:hover .ccase-result::after { width: 100%; }
/* fallback / flat card backgrounds — operating environments */
.e01 .ccase-bg { background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(217,119,87,0.30) 0%, transparent 65%), linear-gradient(135deg, #2a1a0f, #1a110a); }
.e02 .ccase-bg { background: radial-gradient(ellipse 60% 70% at 70% 30%, rgba(217,119,87,0.24) 0%, transparent 65%), linear-gradient(160deg, #221c18, #16110d); }
.e03 .ccase-bg { background: radial-gradient(ellipse 80% 50% at 50% 60%, rgba(217,119,87,0.26) 0%, transparent 65%), linear-gradient(200deg, #241a12, #150e0a); }
.e04 .ccase-bg { background: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(160,55,25,0.30) 0%, transparent 65%), linear-gradient(130deg, #1e1210, #130d09); }
.e05 .ccase-bg { background: radial-gradient(ellipse 60% 80% at 35% 55%, rgba(190,130,25,0.26) 0%, transparent 65%), linear-gradient(150deg, #1a1508, #12100a); }
.e06 .ccase-bg { background: radial-gradient(ellipse 60% 80% at 40% 60%, rgba(217,119,87,0.22) 0%, transparent 65%), linear-gradient(150deg, #1c1712, #12100a); }
.e07 .ccase-bg { background: radial-gradient(ellipse 80% 50% at 60% 55%, rgba(180,140,90,0.24) 0%, transparent 65%), linear-gradient(160deg, #1a1613, #100e0c); }
.e08 .ccase-bg { background: radial-gradient(ellipse 60% 70% at 70% 30%, rgba(40,65,130,0.28) 0%, transparent 65%), linear-gradient(160deg, #121a28, #0d1420); }
.e09 .ccase-bg { background: radial-gradient(ellipse 70% 60% at 75% 25%, rgba(180,180,190,0.20) 0%, transparent 65%), linear-gradient(130deg, #17161a, #0e0d10); }
.e10 .ccase-bg { background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(212,149,106,0.28) 0%, transparent 65%), linear-gradient(135deg, #241a10, #160f0a); }
.e11 .ccase-bg { background: radial-gradient(ellipse 80% 50% at 60% 55%, rgba(60,80,140,0.26) 0%, transparent 65%), linear-gradient(160deg, #0c0e1a, #080a14); }
.e12 .ccase-bg { background: radial-gradient(ellipse 70% 60% at 55% 40%, rgba(217,119,87,0.20) 0%, transparent 65%), linear-gradient(140deg, #1c1a17, #11100e); }
#cs-m-bg.cs-m-bg-flat {
  background:
    radial-gradient(ellipse 70% 60% at 40% 35%, rgba(217,119,87,0.24) 0%, transparent 65%),
    linear-gradient(150deg, #241d17, #16120e);
}

/* ── 10M MOMENT ──────────────────────────────────────── */
#moment {
  padding: 12rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80vh;
  position: relative;
  overflow: hidden;
}
#moment::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(217,119,87,0.07) 0%, transparent 70%);
  pointer-events: none;
}
/* massive ghost text behind the number */
.moment-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  font-family: var(--serif);
  font-size: 50vw;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217,119,87,0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}
.m-eye {
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.m-num {
  font-family: var(--serif);
  font-size: clamp(5rem, 17vw, 15rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 1;
  display: inline-block;
}
.m-line {
  display: block;
  width: 0;
  height: 3px;
  background: var(--accent);
  margin: 2rem auto 0;
  border-radius: 2px;
  box-shadow: 0 0 24px rgba(217,119,87,0.7);
  position: relative;
  z-index: 1;
}
.m-sub {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  color: var(--muted);
  margin-top: 2.25rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
.m-sub strong { color: var(--text); font-weight: 600; }

/* ── FOUNDERS ────────────────────────────────────────── */
#founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}
.founder-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4rem;
  overflow: hidden;
  cursor: none;
}
.fp-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  filter: grayscale(100%) contrast(1.15) brightness(0.5);
  transition: filter 0.6s, transform 0.6s var(--ease);
}
.founder-panel:hover .fp-bg {
  filter: grayscale(100%) contrast(1.15) brightness(0.65);
  transform: scale(1.03);
}
.fp-left .fp-bg {
  background: linear-gradient(155deg, #3e3430 0%, #2c2723 40%, #1e1a16 100%);
}
.fp-right .fp-bg {
  background: linear-gradient(205deg, #373028 0%, #2a2520 40%, #1c1915 100%);
}
.fp-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,25,23,0.93) 0%, rgba(28,25,23,0.35) 60%, rgba(28,25,23,0.1) 100%);
  z-index: 1;
}
/* Coral tint on hover */
.founder-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(217,119,87,0.0);
  transition: background 0.5s;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.founder-panel:hover::after { background: rgba(217,119,87,0.08); }
.fp-divider {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: var(--border);
  z-index: 5;
}
.fp-content { position: relative; z-index: 3; }
.fp-role {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.fp-name {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: 0.6rem;
}
.fp-school {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
  font-weight: 300;
}
.fp-bio {
  font-size: 0.88rem;
  color: rgba(245,240,235,0.6);
  line-height: 1.75;
  max-width: 340px;
  font-weight: 300;
}

/* ── CTA ─────────────────────────────────────────────── */
#cta {
  padding: 11rem 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.cta-orb-1, .cta-orb-2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cta-orb-1 {
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(217,119,87,0.1) 0%, rgba(217,119,87,0.03) 45%, transparent 70%);
  animation: orbPulse 5s ease-in-out infinite;
}
.cta-orb-2 {
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(217,119,87,0.14) 0%, transparent 65%);
  animation: orbPulse 3.5s ease-in-out infinite reverse;
}
@keyframes orbPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.85; }
  50% { transform: translate(-50%,-50%) scale(1.18); opacity: 1; }
}
.cta-inner { position: relative; z-index: 1; }
.cta-eye {
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
}
.cta-headline {
  font-family: var(--serif);
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 2.75rem;
}
.cta-headline strong {
  font-style: normal;
  font-weight: 900;
  color: var(--accent);
}
.cta-sub {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 3.5rem;
  font-weight: 300;
  letter-spacing: 0.08em;
}

/* ── FOOTER ──────────────────────────────────────────── */
footer {
  padding: 3rem 3.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ft-logo { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; }
.ft-tag  { font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--muted); }
.ft-r    { font-size: 0.68rem; color: var(--muted); text-align: right; line-height: 1.8; }
.ft-r a:hover { color: var(--accent); }

/* ── REVEAL STATES ───────────────────────────────────── */
.rev { opacity: 0; transform: translateY(36px) scale(0.97); }
.rev-l { opacity: 0; transform: translateX(-70px); }
.rev-r { opacity: 0; transform: translateX(70px); }

/* ── BCARD CANVAS ANIMATIONS ─────────────────────────── */
.bcard-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: block;
}
/* Lift text above canvas */
.bcard-icon,
.bcard-num,
.bcard-title,
.bcard-desc { position: relative; z-index: 1; }

/* ── HERO VISUAL (right side floating image) ─────────────── */
.hero-visual-wrap {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 48%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 115%;
  top: -8%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 2.2s ease;
  will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse 88% 80% at 80% 50%, black 15%, rgba(0,0,0,0.55) 48%, transparent 75%);
  mask-image: radial-gradient(ellipse 88% 80% at 80% 50%, black 15%, rgba(0,0,0,0.55) 48%, transparent 75%);
}
.hero-visual-img.vis { opacity: 0.52; }

/* ── FOUNDER CANVAS ──────────────────────────────────────── */
.founder-hover-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 960px) {
  nav { padding: 1.25rem 1.5rem; }
  .nav-links { gap: 1.5rem; }
  .container, .work-header, .cases-track { padding-left: 1.5rem; padding-right: 1.5rem; }
  .about-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .bento { grid-template-columns: 1fr; }
  .bcard:nth-child(n) { grid-column: span 1; }
  #founders { grid-template-columns: 1fr; }
  .founder-panel { min-height: 60vh; }
  #hero { padding: 0 1.5rem 4rem; }
  footer { flex-direction: column; gap: 1.5rem; text-align: center; }
  .work-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero-headline { font-size: clamp(3.5rem, 13vw, 6rem); }
  .hero-visual-wrap { width: 55%; opacity: 0.7; }
}
@media (max-width: 600px) {
  .hero-visual-wrap { display: none; }
  .m-num { font-size: clamp(1.8rem, 10vw, 5rem) !important; letter-spacing: -0.03em; }
  .moment-ghost { font-size: 80vw; }
  #moment { padding: 7rem 1.5rem; min-height: 60vh; }
  .stat-n { font-size: 2rem; }
}

/* ── KEN BURNS ────────────────────────────────────────── */
@keyframes kenBurns {
  0%   { transform: scale(1.06) translate(0,    0); }
  25%  { transform: scale(1.10) translate(-1.2%,  0.6%); }
  50%  { transform: scale(1.08) translate( 0.8%, -0.8%); }
  75%  { transform: scale(1.11) translate(-0.5%,  0.4%); }
  100% { transform: scale(1.06) translate(0,    0); }
}

/* ── CASE STUDY MODAL ─────────────────────────────────── */
#cs-modal {
  position: fixed; inset: 0;
  z-index: 7000;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: #0e0c0a;
  cursor: none;
}
#cs-modal.open { opacity: 1; pointer-events: all; }
#cs-m-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 1.6s cubic-bezier(0.16,1,0.3,1);
  filter: grayscale(10%) contrast(1.05) brightness(0.8);
}
#cs-modal.open #cs-m-bg { transform: scale(1); }
.cs-m-ov {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,  rgba(14,12,10,0.97) 0%, rgba(14,12,10,0.6) 48%, rgba(14,12,10,0.08) 100%),
    linear-gradient(to right, rgba(14,12,10,0.2) 0%, transparent 55%);
}
#cs-close {
  position: absolute; top: 1.8rem; right: 2rem;
  z-index: 10;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(28,25,23,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  transition: border-color 0.3s, color 0.3s, transform 0.45s var(--ease), background 0.3s;
}
#cs-close:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg) scale(1.12); }
@media (hover: none) { #cs-close { cursor: pointer; } }
.cs-m-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: clamp(1.8rem, 4vw, 4rem) clamp(1.8rem, 5vw, 4.5rem);
  z-index: 5;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.8s var(--ease) 0.3s, opacity 0.6s ease 0.3s;
}
#cs-modal.open .cs-m-body { transform: translateY(0); opacity: 1; }
.cs-m-tag-el {
  display: inline-flex;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--a40);
  padding: 0.3rem 0.9rem; border-radius: 100px;
  margin-bottom: 1.2rem;
}
.cs-m-name-el {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 8.5vw, 9rem);
  font-weight: 900; line-height: 0.88;
  letter-spacing: -0.025em; margin-bottom: 1.25rem;
  overflow: hidden;
}
.cs-m-name-el span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease) 0.45s;
}
#cs-modal.open .cs-m-name-el span { transform: translateY(0); }
.cs-m-result-el {
  font-size: clamp(0.88rem, 1.4vw, 1.05rem);
  color: rgba(245,240,235,0.62);
  max-width: 600px; line-height: 1.78; font-weight: 300;
  margin-bottom: 2rem;
}
.cs-m-meta { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.cs-m-stat-el {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 5rem);
  font-weight: 900; color: var(--accent); line-height: 1;
}
.cs-m-statl-el {
  font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
/* swipe hint on mobile */
.cs-m-swipe {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); padding: 1.2rem 0;
  display: none;
}
@media (hover: none) { .cs-m-swipe { display: block; } }

/* ── CURSOR TRAIL ─────────────────────────────────────── */
.c-trail {
  position: fixed; border-radius: 50%;
  background: var(--accent);
  pointer-events: none; z-index: 9797;
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
  opacity: 0; will-change: left, top;
}

/* ── TOUCH RIPPLE ─────────────────────────────────────── */
.t-ripple {
  position: fixed; border-radius: 50%;
  border: 1.5px solid var(--accent);
  pointer-events: none; z-index: 9700;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0.75;
  animation: rippleOut 0.7s var(--ease) forwards;
}
@keyframes rippleOut {
  to { transform: translate(-50%,-50%) scale(5); opacity: 0; }
}

/* ── MOBILE CASE STUDY ────────────────────────────────── */
@media (max-width: 600px) {
  .ccase { flex: 0 0 84vw; height: 510px; cursor: pointer; }
  #cs-close { cursor: pointer; }
  .ccase-expand { opacity: 0.5; }
  .cases-track { padding-left: 1.2rem; padding-right: 1.2rem; gap: 0.85rem; }
}

/* ── MOBILE NAV ───────────────────────────────────────── */
@media (max-width: 600px) {
  .nav-links { display: none; }
  nav { padding: 1.1rem 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-PAGE ADDITIONS — nav dropdowns, mobile nav, footer sitemap,
   inner hero, process, pricing, use-case sections, demos grid.
   ═══════════════════════════════════════════════════════════════ */

/* ── NAV LOGO AS LINK ─────────────────────────────────── */
a.nav-logo { display: inline-block; }

/* ── NAV DROPDOWNS (Services / Use Cases) ─────────────── */
.nav-drop { position: relative; }
.nav-drop-trigger {
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.nav-drop-trigger::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
  transition: transform 0.25s var(--ease);
}
.nav-drop.open .nav-drop-trigger::after,
.nav-drop:hover .nav-drop-trigger::after { transform: translateY(-4px) rotate(225deg); }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 240px;
  background: rgba(28,25,23,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.6rem;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: 20;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu {
  opacity: 1; pointer-events: all; transform: translate(-50%, 0);
}
.nav-drop-menu li a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: 0.5rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}
.nav-drop-menu li a:hover, .nav-drop-menu li a.active { background: var(--a10); color: var(--text); }
.nav-drop-menu li a::after { display: none; }

/* ── MOBILE NAV ────────────────────────────────────────── */
.nav-burger {
  display: none;
  position: relative;
  width: 34px; height: 34px;
  border: none;
  background: none;
  cursor: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 600;
}
.nav-burger span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: rgba(20,18,16,0.98);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: 6rem 3rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  overflow-y: auto;
}
.nav-mobile.open { opacity: 1; pointer-events: all; transform: none; }
.nav-mobile a {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 700;
  padding: 0.55rem 0;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.nav-mobile .nav-mobile-sub {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 1rem;
  margin: -0.2rem 0 0.2rem;
}
.nav-mobile .nav-mobile-sub a {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  border-bottom: none;
  padding: 0.4rem 0;
  color: var(--muted);
}
.nav-mobile-group-label {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.6rem;
}
body.nav-open { overflow: hidden; }

/* ── FOOTER SITEMAP ────────────────────────────────────── */
footer {
  flex-direction: column;
  align-items: stretch;
  gap: 2.5rem;
  padding: 4rem 3.5rem 2.5rem;
}
.ft-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
}
.ft-brand { display: flex; flex-direction: column; gap: 0.5rem; }
.ft-sitemap {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 2.5rem;
}
.ft-col { display: flex; flex-direction: column; gap: 0.65rem; }
.ft-col-title {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.ft-col a {
  font-size: 0.74rem;
  color: var(--muted);
  transition: color 0.25s;
}
.ft-col a:hover { color: var(--text); }
.ft-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.66rem;
  color: var(--muted);
}
.ft-bottom a { color: var(--muted); }
.ft-bottom a:hover { color: var(--accent); }
.ft-legal-links { display: flex; gap: 1.5rem; }

/* ── INNER-PAGE HERO ───────────────────────────────────── */
#hero.hero-inner {
  min-height: 62vh;
  padding: 0 3rem 4.5rem;
}
#hero.hero-inner .hero-headline { font-size: clamp(3.2rem, 7vw, 6.4rem); margin-bottom: 1.5rem; }
#hero.hero-inner .hero-sub { max-width: 620px; }
#hero.hero-inner .hero-bg-num { font-size: 22vw; }
#hero.hero-inner.hero-tight { min-height: 42vh; padding-bottom: 3rem; }

/* ── BREADCRUMB ────────────────────────────────────────── */
.crumb {
  position: relative;
  z-index: 3;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.crumb span { opacity: 0.4; }

/* ── GENERIC PAGE SECTION RHYTHM ───────────────────────── */
.sect { padding: 7rem 0; border-top: 1px solid var(--border); }
.sect-tight { padding: 5rem 0; }
.sect-lead {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.85;
  font-weight: 300;
  max-width: 760px;
  margin-top: 1.5rem;
}

/* ── CHECK LIST (tasks / coverage) ─────────────────────── */
.chk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 2.5rem;
  margin-top: 2.5rem;
}
.chk-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}
.chk-mark {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--a40);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem;
  margin-top: 0.15rem;
}
.chk-text { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }
.chk-text strong { color: var(--text); font-weight: 600; }

/* ── INTEGRATION CHIPS ─────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.chip {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.6rem 1.15rem;
  border-radius: 100px;
  transition: border-color 0.3s, color 0.3s;
}
.chip:hover { border-color: var(--a40); color: var(--accent); }

/* ── NUMBERED SCENARIO / STEP LIST ─────────────────────── */
.num-list { margin-top: 2.5rem; display: flex; flex-direction: column; }
.num-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}
.num-item:first-child { border-top: 1px solid var(--border); }
.num-item-n { font-family: var(--serif); font-size: 1.1rem; color: var(--accent); font-weight: 700; }
.num-item-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; }
.num-item-desc { font-size: 0.88rem; color: var(--muted); line-height: 1.7; max-width: 620px; }

/* ── PROCESS STEPS (6-step build process) ──────────────── */
.process-list { margin-top: 3rem; }
.p-step {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 2.5rem;
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.p-step:first-child { border-top: 1px solid var(--border); }
.p-step-n {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px var(--a40);
  line-height: 1;
}
.p-step-title { font-family: var(--serif); font-size: 1.85rem; font-weight: 700; margin-bottom: 0.85rem; }
.p-step-desc { font-size: 0.95rem; color: var(--muted); line-height: 1.75; max-width: 640px; }

/* ── PRICING / ENGAGEMENT TIERS ─────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3.5rem;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.4s, transform 0.4s var(--ease);
}
.price-card:hover { border-color: var(--a40); transform: translateY(-4px); }
.price-card.price-featured { border-color: var(--a40); background: linear-gradient(160deg, #2E2925 0%, #221E1A 100%); }
.price-tier-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.price-tier-name { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; }
.price-tier-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.65; }
.price-tier-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.price-tier-list li { font-size: 0.8rem; color: var(--muted); padding-left: 1.1rem; position: relative; }
.price-tier-list li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }

/* ── ENGAGEMENT MODEL STEPS (pricing page) ─────────────── */
.engage-flow { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }
.engage-node {
  flex: 1 1 150px;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 1.5rem 1.25rem;
  background: var(--surface);
}
.engage-node-n { font-family: var(--serif); font-size: 0.85rem; color: var(--accent); margin-bottom: 0.6rem; }
.engage-node-t { font-size: 0.85rem; font-weight: 600; line-height: 1.4; }

/* ── DEMOS — mode showcase grid ─────────────────────────── */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3.5rem;
}
.demo-card {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  cursor: none;
  border: 1px solid var(--border);
  transition: border-color 0.4s;
}
.demo-card:hover { border-color: var(--a40); }
.demo-card-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease), filter 0.5s;
}
.demo-card:hover .demo-card-bg { transform: scale(1.05); filter: brightness(1.15); }
.demo-card-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,25,23,0.95) 0%, rgba(28,25,23,0.55) 50%, rgba(28,25,23,0.15) 100%);
}
.demo-card-body { position: relative; z-index: 2; }
.demo-card-tag { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.85rem; }
.demo-card-title { font-family: var(--serif); font-size: 2.1rem; font-weight: 700; margin-bottom: 0.85rem; }
.demo-card-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.demo-card-list li {
  font-size: 0.68rem; color: rgba(245,240,235,0.75);
  border: 1px solid rgba(245,240,235,0.18);
  padding: 0.3rem 0.75rem; border-radius: 100px;
}
.demo-card-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); cursor: none;
}
.demo-card-cta:hover { color: var(--accent); }

/* ── LEGAL / PROSE PAGES (privacy, terms) ──────────────── */
.legal-content { padding: 5rem 0 8rem; max-width: 780px; margin: 0 auto; }
.legal-content h2 {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 700;
  margin: 3rem 0 1rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.85;
  font-weight: 300;
  margin-bottom: 1.1rem;
}
.legal-content ul { padding-left: 1.4rem; }
.legal-content strong { color: var(--text); font-weight: 600; }
.legal-updated { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 2rem; display: block; }

/* ── ABOUT / VISION PROSE BLOCKS ────────────────────────── */
.prose-block { max-width: 720px; }
.prose-block p { font-size: 1.02rem; color: var(--muted); line-height: 1.9; font-weight: 300; margin-bottom: 1.4rem; }
.prose-block strong { color: var(--text); font-weight: 600; }

/* ── RESPONSIVE — MULTI-PAGE ────────────────────────────── */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}
@media (max-width: 960px) {
  .ft-sitemap { grid-template-columns: repeat(2, 1fr); }
  .chk-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr; }
  .p-step, .num-item { grid-template-columns: 1fr; gap: 0.75rem; }
  #hero.hero-inner { min-height: 52vh; }
}
@media (max-width: 600px) {
  .ft-sitemap { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .ft-top { flex-direction: column; }
  .engage-flow { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   INFOGRAPHICS & MOTION GRAPHICS
   Visual replacements for long-form copy. Canvas-driven where the
   story is graphical (leak, clock); DOM+CSS where it must stay
   selectable and reflow cleanly (flow, cost, steps).
   ═══════════════════════════════════════════════════════════════ */

/* ── Split layout: visual beside a short line of copy ──────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}
.split-narrow { grid-template-columns: 0.85fr 1.15fr; }
.split-copy .s-title { margin-bottom: 1.25rem; }

/* ── Headline stat block ───────────────────────────────────── */
.viz-figure {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: var(--serif);
  font-weight: 900;
  color: var(--accent);
  line-height: 0.9;
  font-size: clamp(4rem, 13vw, 8.5rem);
  letter-spacing: -0.03em;
}
.viz-unit { font-size: 0.5em; }
.viz-cap {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 34ch;
  margin-top: 1.1rem;
}
.viz-cap strong { color: var(--text); font-weight: 600; }

/* ── Canvas viz shells ─────────────────────────────────────── */
.viz-canvas { display: block; width: 100%; }
.viz-leak-canvas  { height: 260px; }
.viz-clock-canvas { height: 340px; }

/* ── FLOW — animated call pipeline ─────────────────────────── */
.flow {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
  margin-top: 3rem;
  position: relative;
}
.flow::before {
  content: '';
  position: absolute;
  top: 11px; left: 6%; right: 6%;
  height: 1px;
  background: var(--border);
}
.flow::after {
  content: '';
  position: absolute;
  top: 11px; left: 6%;
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  box-shadow: 0 0 10px var(--a40);
  transition: width 2.2s var(--ease);
}
.flow.on::after { width: 88%; }
.flow-node {
  position: relative;
  padding-top: 2.4rem;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.flow.on .flow-node { opacity: 1; transform: none; }
.flow.on .flow-node:nth-child(1) { transition-delay: 0.05s; }
.flow.on .flow-node:nth-child(2) { transition-delay: 0.45s; }
.flow.on .flow-node:nth-child(3) { transition-delay: 0.85s; }
.flow.on .flow-node:nth-child(4) { transition-delay: 1.25s; }
.flow.on .flow-node:nth-child(5) { transition-delay: 1.65s; }
.flow-dot {
  position: absolute;
  top: 5px; left: 50%;
  width: 13px; height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--a40);
  transition: background 0.5s, box-shadow 0.5s, border-color 0.5s;
}
.flow.on .flow-node .flow-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--a10), 0 0 16px var(--a40); }
.flow-k {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.flow-v {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── COST — animated comparison bars ───────────────────────── */
.cost { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.75rem; }
.cost-row { display: flex; flex-direction: column; gap: 0.6rem; }
.cost-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.cost-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cost-val { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--muted); }
.cost-row-us .cost-label, .cost-row-us .cost-val { color: var(--accent); }
.cost-bar { height: 14px; border-radius: 100px; background: rgba(245,240,235,0.05); overflow: hidden; }
.cost-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  transition: width 1.5s var(--ease);
}
.cost.on .cost-fill { width: var(--w); }
.cost-fill-them { background: rgba(245,240,235,0.22); }
.cost-fill-us { background: linear-gradient(90deg, var(--accent), #E8996F); box-shadow: 0 0 20px var(--a40); }
.cost-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.4rem; }

/* ── STEPS — numbered rail with filling progress line ──────── */
.steps { position: relative; margin-top: 3rem; padding-left: 3.25rem; }
.steps::before {
  content: '';
  position: absolute;
  left: 11px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--border);
}
.steps::after {
  content: '';
  position: absolute;
  left: 11px; top: 8px;
  width: 1px; height: 0;
  background: linear-gradient(180deg, var(--accent), var(--a20));
  box-shadow: 0 0 10px var(--a40);
  transition: height 2.6s var(--ease);
}
.steps.on::after { height: calc(100% - 16px); }
.step { position: relative; padding: 0 0 2.5rem; opacity: 0; transform: translateY(14px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.step:last-child { padding-bottom: 0; }
.steps.on .step { opacity: 1; transform: none; }
.steps.on .step:nth-child(1) { transition-delay: 0.05s; }
.steps.on .step:nth-child(2) { transition-delay: 0.4s; }
.steps.on .step:nth-child(3) { transition-delay: 0.75s; }
.steps.on .step:nth-child(4) { transition-delay: 1.1s; }
.steps.on .step:nth-child(5) { transition-delay: 1.45s; }
.steps.on .step:nth-child(6) { transition-delay: 1.8s; }
.step::before {
  content: '';
  position: absolute;
  left: -3.25rem; top: 6px;
  width: 23px; height: 23px;
  margin-left: 0;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--a40);
  transition: background 0.5s, box-shadow 0.5s;
}
.steps.on .step::before { background: var(--accent); box-shadow: 0 0 0 5px var(--a10), 0 0 18px var(--a40); }
.step-n {
  position: absolute;
  left: -3.25rem; top: 6px;
  width: 23px; height: 23px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent);
  z-index: 2;
  transition: color 0.5s;
}
.steps.on .step-n { color: #1C1917; }
.step-t { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.4rem; line-height: 1.15; }
.step-d { font-size: 0.88rem; color: var(--muted); line-height: 1.65; max-width: 52ch; }

/* ── TAG GRID — industries / capabilities, no prose ────────── */
.tags { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 2.5rem; }
.tag {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.7rem 1.2rem;
  border-radius: 100px;
  transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.tag:hover { border-color: var(--a40); color: var(--accent); transform: translateY(-2px); }

/* ── FACT CARDS — one number, one line ─────────────────────── */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin-top: 3rem; }
.fact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  transition: border-color 0.4s, transform 0.4s var(--ease);
}
.fact:hover { border-color: var(--a40); transform: translateY(-3px); }
.fact-n { font-family: var(--serif); font-size: 2.4rem; font-weight: 900; color: var(--accent); line-height: 1; margin-bottom: 0.6rem; }
.fact-l { font-size: 0.82rem; color: var(--muted); line-height: 1.55; }

/* ── RESPONSIVE — infographics ─────────────────────────────── */
@media (max-width: 960px) {
  .split, .split-narrow { grid-template-columns: 1fr; gap: 2.5rem; }
  .facts { grid-template-columns: 1fr; }
  .viz-cap { max-width: none; }
  .viz-clock-canvas { height: 290px; }

  /* Flow becomes a vertical rail on narrow screens */
  .flow { grid-auto-flow: row; gap: 0; padding-left: 2.5rem; }
  .flow::before { top: 8px; bottom: 8px; left: 8px; right: auto; width: 1px; height: auto; }
  .flow::after { top: 8px; left: 8px; width: 1px; height: 0; background: linear-gradient(180deg, var(--accent), var(--a20)); transition: height 2.2s var(--ease); }
  .flow.on::after { width: 1px; height: calc(100% - 16px); }
  .flow-node { padding: 0 0 1.75rem; text-align: left; }
  .flow-node:last-child { padding-bottom: 0; }
  .flow-dot { top: 3px; left: -2.5rem; margin-left: 2px; }
  .flow-k { font-size: 1.05rem; }
  .flow-v { font-size: 0.8rem; }
}
@media (max-width: 600px) {
  .viz-leak-canvas { height: 200px; }
  .viz-clock-canvas { height: 250px; }
  .steps { padding-left: 2.75rem; }
  .step::before, .step-n { left: -2.75rem; }
  .step-t { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT FIXES
   ═══════════════════════════════════════════════════════════════ */

/* Never allow sideways scroll from decorative/absolute children. */
html { overflow-x: hidden; }
#cta, #stats, section { overflow-x: clip; }

/* Inner-page heroes must clear the fixed nav on short viewports. */
#hero.hero-inner { padding-top: 8rem; }
#hero.hero-inner .hero-content { width: 100%; }

@media (max-width: 960px) {
  #hero.hero-inner { padding: 7.5rem 1.5rem 3.5rem; min-height: 0; }
  #hero.hero-inner.hero-tight { padding-top: 7.5rem; min-height: 0; }
  #hero.hero-inner .hero-headline { font-size: clamp(2.6rem, 11vw, 4rem); }
  #hero.hero-inner .hero-bg-num { display: none; }
  .crumb { font-size: 0.58rem; letter-spacing: 0.1em; flex-wrap: wrap; }
  .hero-eyebrow { font-size: 0.58rem; letter-spacing: 0.2em; }
  .sect { padding: 4.5rem 0; }
  .sect-tight { padding: 3.5rem 0; }
  .s-title { font-size: clamp(2rem, 8.5vw, 3rem); }
  .sect-lead, .about-text { font-size: 0.95rem; }
  .hero-cta { flex-wrap: wrap; gap: 1.25rem; }
  .btn-primary { padding: 0.9rem 1.5rem; font-size: 0.64rem; letter-spacing: 0.14em; }
}
@media (max-width: 600px) {
  #hero.hero-inner { padding: 7rem 1.25rem 3rem; }
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }
  .legal-content h2 { font-size: 1.35rem; }
  .viz-figure { font-size: clamp(3.5rem, 22vw, 6rem); }
}

/* ── INDUSTRY RAIL — image-led cards, minimal copy ─────────── */
.ccase { cursor: grab; }
.ccase-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem;
  z-index: 2;
}
.ccase-label .ccase-name { margin-bottom: 0.4rem; }
.ccase-line { font-size: 0.8rem; color: rgba(245,240,235,0.62); line-height: 1.5; }
.ccase:hover .ccase-line { color: var(--text); }

@media (max-width: 960px) {
  .cases-track { padding: 0 1.5rem 3rem; gap: 0.75rem; }
  .ccase { flex: 0 0 min(300px, 76vw); height: 420px; }
  .ccase-label { padding: 1.5rem; }
  .ccase-name { font-size: 1.5rem; }
}

/* ── NAV CTA PILL ──────────────────────────────────────── */
.nav-links a.nav-cta {
  color: var(--accent);
  border: 1px solid var(--a40);
  border-radius: 100px;
  padding: 0.5rem 1.1rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta:hover, .nav-links a.nav-cta.active { background: var(--accent); color: #1C1917; border-color: var(--accent); }
@media (max-width: 1180px) { .nav-links { gap: 1.6rem; } }

/* Keep the sound toggle in its original bottom-right corner and shift the
   hero scroll cue clear of it, rather than stacking the two. */
.hero-scroll { right: 5.75rem; }
@media (max-width: 960px) {
  #sound-btn { right: 1.25rem; bottom: 1.25rem; width: 40px; height: 40px; }
  .hero-scroll { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BOOKING FUNNEL — /book (Typeform-style, one question at a time)
   ═══════════════════════════════════════════════════════════════ */
#quiz-app { padding-top: 8rem; padding-bottom: 5rem; min-height: 100vh; }
.qz-head { text-align: center; margin-bottom: 3rem; }
.qz-head .crumb { justify-content: center; }
.qz-head .hero-eyebrow { text-align: center; position: static; }
.qz-title { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; line-height: 1.1; margin-top: 1rem; }
.qz-title em { font-style: italic; font-weight: 400; color: var(--accent); }

.qz-wrap { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }

.qz-progress { height: 3px; background: var(--border); border-radius: 100px; overflow: hidden; }
.qz-progress-fill { display: block; height: 100%; width: 12.5%; background: var(--accent); box-shadow: 0 0 12px var(--a40); transition: width 0.5s var(--ease); }
.qz-progress-label { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: right; margin: 0.6rem 0 3rem; }

.qz-stage { position: relative; min-height: 320px; }
.qz-step { display: none; opacity: 0; transform: translateY(16px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.qz-step.qz-active { display: block; opacity: 1; transform: none; }

.qz-eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
.qz-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--accent); }
.qz-question { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; line-height: 1.25; margin-bottom: 2rem; max-width: 22ch; }

.qz-options { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.qz-option {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1rem 1.4rem;
  border-radius: 1rem;
  cursor: none;
  text-align: left;
  transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease), background 0.3s;
}
.qz-option:hover { border-color: var(--a40); color: var(--accent); transform: translateY(-2px); }
.qz-option.qz-selected { background: var(--accent); border-color: var(--accent); color: #1C1917; font-weight: 600; }
.qz-option.qz-shake { animation: qzShake 0.4s; }
@keyframes qzShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.qz-fields { display: flex; flex-direction: column; gap: 1rem; max-width: 460px; }
.qz-input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 1rem 1.25rem;
  cursor: text;
  transition: border-color 0.3s;
}
.qz-input::placeholder { color: var(--muted); }
.qz-input:focus { outline: none; border-color: var(--accent); }
.qz-textarea { min-height: 100px; resize: vertical; margin-top: 1.25rem; max-width: 460px; display: block; font-family: var(--sans); }

.qz-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin-bottom: 1.5rem; }
.qz-slots .qz-option { text-align: center; font-size: 0.78rem; padding: 0.85rem 0.6rem; }

.qz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.qz-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 2.5rem; }
.qz-back {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0.6rem 0;
  font: inherit;
}
.qz-next { margin-left: auto; }
.qz-next:disabled { opacity: 0.35; pointer-events: none; }
.qz-next.qz-shake { animation: qzShake 0.4s; }

.qz-panel { display: none; text-align: center; padding: 3rem 0; }
.qz-panel.qz-panel-active { display: block; }
.qz-done-check {
  width: 56px; height: 56px; margin: 0 auto 1.5rem;
  border-radius: 50%; border: 1px solid var(--a40);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1.4rem;
}
.qz-done .qz-question, .qz-error .qz-question { max-width: none; }
.qz-done-sub { color: var(--muted); font-size: 0.95rem; max-width: 46ch; margin: 0 auto; line-height: 1.6; }
.qz-done-sub a { color: var(--accent); }

@media (max-width: 600px) {
  #quiz-app { padding-top: 7rem; }
  .qz-slots { grid-template-columns: repeat(2, 1fr); }
  .qz-question { max-width: none; }
  .qz-nav { flex-wrap: wrap; gap: 1rem; }
}