/* ============================================================
   DENVER PEOPLE
   Design system: pure monochrome documentary editorial
   Ink #0A0A0A / Paper #F4F2EE / no accent color
   Inversion is the accent.
   ============================================================ */

:root{
  --ink:#0A0A0A;
  --smoke:#141414;
  --slate:#1E1E1E;
  --steel:#2C2C2C;
  --ash:#6E6E6E;
  --fog:#A8A8A8;
  --paper:#F4F2EE;
  --bone:#FFFFFF;

  --line-light:rgba(244,242,238,.14);
  --line-dark:rgba(10,10,10,.14);

  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --pad:clamp(1.25rem,5vw,4rem);
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none;margin:0;padding:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:fixed;top:-100px;left:1rem;z-index:200;background:var(--paper);color:var(--ink);
  padding:.75rem 1.25rem;border-radius:99px;font-size:.8rem;font-weight:700;transition:top .2s}
.skip-link:focus{top:1rem}

:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}

/* ---------- GRAIN ---------- */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- TYPE PRIMITIVES ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%}

.mono-label{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fog);margin:0;font-weight:500;
}
.mono-label.label-dark{color:var(--ash)}

.dot-pulse{
  display:inline-block;width:6px;height:6px;border-radius:99px;background:currentColor;
  margin-right:.5rem;vertical-align:middle;animation:pulse 2s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.7)}}

/* ---------- BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 1.9rem;border-radius:99px;overflow:hidden;isolation:isolate;
  font-size:.9rem;font-weight:700;letter-spacing:-.01em;line-height:1;
  border:1px solid transparent;cursor:pointer;
  transition:transform .45s var(--ease),border-color .45s var(--ease);
  will-change:transform;
}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.99)}
.btn-label{position:relative;z-index:2;transition:color .45s var(--ease);white-space:nowrap}
.btn-fill{position:absolute;inset:0;z-index:1;transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover .btn-fill{transform:translateY(0)}

/* solid: paper button on ink ground, inverts to outline on hover */
.btn-solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-solid .btn-fill{background:var(--ink)}
.btn-solid:hover .btn-label{color:var(--paper)}

/* solid-dark: ink button on paper ground */
.btn-solid-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid-dark .btn-fill{background:var(--paper)}
.btn-solid-dark:hover .btn-label{color:var(--ink)}

/* ghost: outline on ink */
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--line-light)}
.btn-ghost .btn-fill{background:var(--paper)}
.btn-ghost:hover{border-color:var(--paper)}
.btn-ghost:hover .btn-label{color:var(--ink)}

/* invert: small, used in nav + dark card */
.btn-invert{background:var(--paper);color:var(--ink);border-color:var(--paper);padding:.7rem 1.35rem;font-size:.8rem}
.btn-invert .btn-fill{background:var(--steel)}
.btn-invert:hover .btn-label{color:var(--paper)}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav-shell{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem var(--pad);
  display:flex;justify-content:center;pointer-events:none}
.nav-pill{
  pointer-events:auto;width:100%;max-width:var(--maxw);
  display:flex;align-items:center;gap:1.5rem;
  padding:.6rem .6rem .6rem 1.4rem;border-radius:99px;
  background:transparent;border:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease),padding .4s var(--ease);
}
.nav-shell.scrolled .nav-pill{
  background:rgba(10,10,10,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-color:var(--line-light);
}

/* logo-mark.png is white on transparent, so it drops onto any ground */
.nav-brand{display:flex;align-items:center;margin-right:auto;
  transition:transform .3s var(--ease)}
.nav-brand:hover{transform:translateY(-1px)}
.nav-brand img{width:clamp(80px,8vw,100px);height:auto}

.nav-links{display:flex;gap:1.9rem;align-items:center}
.nav-link{font-size:.86rem;font-weight:500;color:var(--fog);
  transition:color .3s var(--ease),transform .3s var(--ease)}
.nav-link:hover{color:var(--paper);transform:translateY(-1px)}

.menu-toggle{display:none;width:44px;height:44px;border-radius:99px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border:1px solid var(--line-light)}
.menu-toggle span{display:block;width:16px;height:1.5px;background:var(--paper);transition:transform .3s var(--ease)}

.mobile-menu{position:fixed;inset:0;z-index:150;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad)}
.mobile-menu[hidden]{display:none}
.mobile-menu ul{display:flex;flex-direction:column;gap:.4rem}
.mobile-menu a{font-size:clamp(2rem,9vw,3.2rem);font-weight:800;letter-spacing:-.04em;
  display:block;padding:.35rem 0;transition:opacity .3s var(--ease)}
.mobile-menu a:hover{opacity:.5}
.menu-close{position:absolute;top:1.75rem;right:var(--pad);
  font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}
.menu-foot{position:absolute;bottom:2rem;left:var(--pad)}

/* ============================================================
   HERO
   ============================================================ */
/* Centered title card. align-items is flex-start with auto block margins
   on the inner rather than align-items:center on purpose: auto margins
   collapse to zero when free space runs out, so tall content falls to the
   top edge instead of overflowing upward under the fixed navbar. The top
   padding then guarantees the wordmark always clears it. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-start;
  overflow:hidden;background:var(--ink);
  padding:clamp(8rem,15vh,11rem) 0 clamp(3rem,7vh,5rem)}
.hero-bg{position:absolute;inset:0;z-index:0}

/* key light pool, centered behind the wordmark and headline */
.hero-key{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:150%;height:135%;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.115),rgba(255,255,255,.035) 38%,transparent 66%)}
/* offset rim so the light is not perfectly symmetrical */
.hero-rim{position:absolute;right:-20%;top:-30%;width:75%;height:95%;
  background:radial-gradient(ellipse at 60% 45%,rgba(255,255,255,.05),transparent 60%)}
/* fine horizontal texture, reads as grain in a lit room */
.hero-lines{position:absolute;inset:0;opacity:.22;
  background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0 1px,transparent 1px 5px)}
/* grounds the composition so the copy sits on solid dark */
.hero-floor{position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35) 45%,transparent)}
/* edge falloff */
.hero-vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse at 46% 48%,transparent 32%,rgba(0,0,0,.5) 92%)}

.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin-inline:auto;margin-block:auto;padding-inline:var(--pad);
  text-align:center;display:flex;flex-direction:column;align-items:center}

/* The wordmark is the hero element. It scales on width and steps down on
   short viewports via the max-height queries further down. */
.hero-logo{width:clamp(260px,42vw,600px);height:auto;margin-bottom:2.1rem}

.hero-eyebrow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.55rem;margin-bottom:1.4rem;color:var(--fog)}
.hero-eyebrow .sep{opacity:.4}

/* NOTE: no ch unit here. The h1 inherits 16px, so a ch based max-width
   would resolve against 16px instead of the child spans' display sizes
   and crush the headline into a narrow column. Line breaks are manual. */
.hero-title{margin:0 0 1.6rem;max-width:min(100%,1000px)}
.hero-line-1{display:block;font-weight:600;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(1.15rem,2.3vw,1.6rem);color:var(--fog)}
.hero-line-2{display:block;font-weight:900;letter-spacing:-.055em;line-height:.93;
  color:var(--bone);font-size:clamp(2.4rem,6.2vw,5.2rem);margin-top:.2em}

.hero-sub{max-width:58ch;font-size:clamp(1rem,1.35vw,1.13rem);line-height:1.62;
  color:var(--fog);margin:0 auto 2.3rem}

.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}

.hero-scroll{position:absolute;right:var(--pad);bottom:clamp(3rem,7vh,6rem);z-index:2;
  display:flex;align-items:center;gap:.85rem;color:var(--ash)}
.scroll-rail{display:block;width:1px;height:64px;background:var(--line-light);position:relative;overflow:hidden}
.scroll-dot{position:absolute;top:0;left:0;width:1px;height:22px;background:var(--paper);
  animation:railrun 2.4s var(--ease) infinite}
@keyframes railrun{0%{transform:translateY(-24px)}100%{transform:translateY(66px)}}

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.section{position:relative;padding:clamp(5rem,11vw,9.5rem) 0}
.section-ink{background:var(--ink);color:var(--paper)}
.section-paper{background:var(--paper);color:var(--ink);
  border-radius:clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem) 0 0;margin-top:-1px}
.section-paper + .section-ink{border-radius:clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem) 0 0;margin-top:-1px;position:relative;z-index:1}

.section-head{margin-bottom:clamp(3rem,6vw,5rem)}
.section-title{font-size:clamp(2rem,5.2vw,4.1rem);font-weight:800;letter-spacing:-.045em;
  line-height:1.02;margin:1.25rem 0 0;max-width:20ch;color:var(--paper)}
.section-title.dark{color:var(--ink)}
.title-quiet{display:block;color:var(--ash);font-weight:500;letter-spacing:-.03em;
  font-size:.62em;margin-top:.4em}
.title-quiet.dark{color:var(--ash)}
.section-lede{max-width:52ch;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.62;
  color:var(--ash);margin:1.75rem 0 0}

/* ---------- PREMISE ---------- */
.statement{font-size:clamp(1.6rem,3.9vw,3.05rem);font-weight:700;letter-spacing:-.042em;
  line-height:1.08;max-width:22ch;margin:1.5rem 0 clamp(3.5rem,7vw,6rem);color:var(--ink)}

.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:start;padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line-dark)}
.contrast-line{font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:500;line-height:1.3;
  letter-spacing:-.025em;color:var(--ash);margin:.9rem 0 0}
.contrast-drama{font-weight:900;font-size:clamp(2.3rem,6.2vw,4.9rem);line-height:.92;
  letter-spacing:-.055em;color:var(--ink);margin:.6rem 0 0}

.premise-close{max-width:56ch;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.65;
  color:var(--ash);margin:clamp(3.5rem,7vw,6rem) 0 0}

/* ---------- TICKER ---------- */
.ticker-band{background:var(--paper);color:var(--ink);padding:0 0 clamp(3rem,6vw,5rem);overflow:hidden}
.ticker{display:flex;width:max-content;border-block:1px solid var(--line-dark);padding:1.1rem 0}
.ticker-track{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem;
  animation:tick 42s linear infinite;flex-shrink:0}
.ticker-track span{font-family:"JetBrains Mono",monospace;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.ticker-track .tick-sep{color:var(--ash);opacity:.5}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ============================================================
   PRODUCTION CARDS
   ============================================================ */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.card{background:var(--smoke);border:1px solid var(--line-light);border-radius:2rem;
  padding:1.25rem 1.25rem 2rem;transition:border-color .5s var(--ease),transform .5s var(--ease);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.card:hover{border-color:rgba(244,242,238,.3);transform:translateY(-3px)}
.card-stage{height:216px;border-radius:1.35rem;background:var(--ink);
  border:1px solid var(--line-light);overflow:hidden;position:relative;margin-bottom:1.6rem}
.card-title{font-size:1.32rem;font-weight:700;letter-spacing:-.035em;line-height:1.15;
  margin:0 0 .65rem;padding-inline:.35rem;color:var(--paper)}
.card-body{font-size:.94rem;line-height:1.58;color:var(--ash);margin:0;padding-inline:.35rem}

/* CARD 1: shuffler */
.shuffler{position:absolute;inset:0;display:grid;place-items:center}
.shot{position:absolute;width:74%;opacity:0;transform:translateY(16px) scale(.94)}
.shot-frame{position:relative;aspect-ratio:16/10;border:1px solid var(--line-light);
  border-radius:.5rem;background:var(--smoke);overflow:hidden;display:grid;place-items:end center}
.corner{position:absolute;width:9px;height:9px;border:1.5px solid var(--paper);opacity:.75}
.corner.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.corner.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.corner.bl{bottom:6px;left:6px;border-right:0;border-top:0}
.corner.br{bottom:6px;right:6px;border-left:0;border-top:0}
.shot-subject{background:var(--paper);opacity:.9;border-radius:99px 99px 0 0}
.shot-subject.wide{width:16%;height:38%}
.shot-subject.medium{width:30%;height:62%}
.shot-subject.close{width:54%;height:88%}
.shot-meta{display:flex;justify-content:space-between;margin-top:.6rem;
  font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.18em;color:var(--fog)}

/* CARD 2: question feed */
.feed{position:absolute;inset:0;padding:1rem;display:flex;flex-direction:column}
.feed-head{display:flex;align-items:center;gap:.4rem;font-family:"JetBrains Mono",monospace;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fog);
  padding-bottom:.8rem;border-bottom:1px solid var(--line-light)}
.feed-tc{margin-left:auto;color:var(--ash)}
.feed-body{flex:1;display:flex;align-items:center;gap:.15rem;padding-top:.8rem}
.feed-line{font-family:"JetBrains Mono",monospace;font-size:.95rem;line-height:1.5;
  color:var(--paper);margin:0;letter-spacing:-.01em}
.feed-caret{display:inline-block;width:8px;height:1.05rem;background:var(--paper);
  animation:caret 1.05s steps(1) infinite;flex-shrink:0}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}

/* CARD 3: edit timeline */
.timeline{position:absolute;inset:0;padding:1rem;display:flex;flex-direction:column;gap:.4rem}
.tl-ruler{display:flex;gap:0;height:12px;margin-left:26px;border-bottom:1px solid var(--line-light)}
.tl-ruler span{flex:1;border-left:1px solid var(--line-light)}
.tl-track{display:flex;align-items:center;gap:.5rem;height:22px}
.tl-name{font-family:"JetBrains Mono",monospace;font-size:.52rem;letter-spacing:.12em;
  color:var(--ash);width:20px;flex-shrink:0}
.tl-clips{position:relative;flex:1;height:100%;background:rgba(244,242,238,.05);border-radius:3px}
.tl-clips i{position:absolute;top:3px;bottom:3px;background:var(--fog);border-radius:2px;opacity:.55}
.tl-audio .tl-clips{background:rgba(244,242,238,.04)}
.tl-audio svg{width:100%;height:100%}
.tl-audio path{fill:none;stroke:var(--fog);stroke-width:1;opacity:.7}
.tl-playhead{position:absolute;top:1rem;bottom:3.2rem;left:26px;width:1px;background:var(--paper);
  box-shadow:0 0 8px rgba(244,242,238,.6)}
.tl-playhead::before{content:"";position:absolute;top:0;left:-4px;width:9px;height:6px;background:var(--paper);border-radius:1px}
.tl-commit{position:absolute;left:1rem;bottom:.9rem;font-family:"JetBrains Mono",monospace;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);
  border:1px solid var(--line-light);border-radius:99px;padding:.34rem .8rem;
  transition:background .25s var(--ease),color .25s var(--ease)}
.tl-commit.hit{background:var(--paper);color:var(--ink)}
.tl-cursor{position:absolute;width:17px;height:17px;fill:var(--paper);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.8));opacity:0;pointer-events:none}

/* ============================================================
   FORMAT SPEC
   ============================================================ */
.spec{margin:0;border-top:1px solid var(--line-dark)}
.spec-row{display:grid;grid-template-columns:minmax(140px,.9fr) 3fr;gap:clamp(1rem,4vw,3rem);
  padding:clamp(1.25rem,2.4vw,1.9rem) 0;border-bottom:1px solid var(--line-dark);
  transition:background .35s var(--ease)}
.spec-row:hover{background:rgba(10,10,10,.035)}
.spec dt{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);padding-top:.35rem}
.spec dd{margin:0;font-size:clamp(1.02rem,1.7vw,1.35rem);line-height:1.42;
  letter-spacing:-.025em;font-weight:500;color:var(--ink);max-width:44ch}
.spec-note{margin:clamp(2rem,4vw,3rem) 0 0;font-weight:800;
  font-size:clamp(1.2rem,2.2vw,1.75rem);color:var(--ink);letter-spacing:-.04em}

/* ============================================================
   PROCESS (sticky stack)
   ============================================================ */
.process{background:var(--ink);position:relative;z-index:2;
  border-radius:clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem) 0 0;margin-top:-1px}
.process-intro{padding:clamp(5rem,11vw,9.5rem) 0 clamp(2rem,5vw,4rem)}
.process-stack{position:relative}
.process-card{min-height:100svh;display:flex;align-items:center;
  background:var(--ink);border-top:1px solid var(--line-light);
  will-change:transform,filter,opacity}
.process-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);
  align-items:center;padding-block:clamp(3rem,8vw,6rem)}
.process-title{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:800;letter-spacing:-.05em;
  line-height:.95;margin:1rem 0 1.4rem;color:var(--paper)}
.process-body{font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.62;color:var(--ash);
  margin:0;max-width:42ch}
.process-art{display:grid;place-items:center;aspect-ratio:1;max-width:400px;width:100%;
  justify-self:center;border:1px solid var(--line-light);border-radius:2.5rem;
  background:var(--smoke);overflow:hidden;position:relative}

.art-rings{width:76%;height:76%}
.art-rings circle{fill:none;stroke:var(--paper);stroke-width:1;opacity:.28;
  transform-origin:center;animation:ringpulse 4s var(--ease) infinite}
.art-rings circle:nth-child(2){animation-delay:.35s}
.art-rings circle:nth-child(3){animation-delay:.7s}
.art-rings circle:nth-child(4){animation-delay:1.05s}
.art-rings .art-core{fill:var(--paper);stroke:none;opacity:1;animation:none}
@keyframes ringpulse{0%,100%{opacity:.12;transform:scale(.97)}50%{opacity:.5;transform:scale(1)}}

.art-scan{position:relative;width:100%;height:100%;overflow:hidden}
.scan-grid{position:absolute;inset:14%;display:grid;
  grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr;gap:6px}
.scan-grid i{background:var(--paper);opacity:.12;border-radius:1px;transition:opacity .4s var(--ease)}
.scan-line{position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,var(--paper),transparent);
  box-shadow:0 0 18px rgba(244,242,238,.5);animation:scan 3.6s var(--ease) infinite}
@keyframes scan{0%{top:8%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:92%;opacity:0}}

.art-wave{width:82%}
.art-wave path{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:trace 4.5s var(--ease) infinite}
@keyframes trace{0%{stroke-dashoffset:1200}55%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* ============================================================
   HOST
   ============================================================ */
.host-lede{max-width:54ch;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.55;
  letter-spacing:-.02em;color:var(--ash);margin:0 0 clamp(3rem,6vw,4.5rem)}
.cred-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-dark);border:1px solid var(--line-dark);border-radius:2rem;overflow:hidden}
.cred{background:var(--paper);padding:clamp(1.75rem,3.2vw,2.6rem);
  transition:background .4s var(--ease)}
.cred:hover{background:#EDEAE4}
.cred-num{margin-bottom:1.4rem}
.cred-title{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:700;letter-spacing:-.035em;
  line-height:1.14;margin:0 0 .6rem;color:var(--ink)}
.cred-body{font-size:.97rem;line-height:1.58;color:var(--ash);margin:0;max-width:38ch}

/* ============================================================
   EPISODES
   ============================================================ */
.slate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.slate{background:var(--smoke);border:1px solid var(--line-light);border-radius:2rem;
  padding:1.6rem 1.6rem 1.4rem;display:flex;flex-direction:column;min-height:280px;
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.slate:hover{border-color:rgba(244,242,238,.3);transform:translateY(-3px)}
.slate-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-bottom:1.25rem;border-bottom:1px solid var(--line-light);margin-bottom:1.5rem}
.slate-state{display:flex;align-items:center;color:var(--paper)}
.slate[data-state="queued"] .slate-state,
.slate[data-state="open"] .slate-state{color:var(--ash)}
.slate-title{font-size:clamp(1.45rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.04em;
  line-height:1.08;margin:0 0 .7rem;color:var(--paper)}
.slate-body{font-size:.95rem;line-height:1.55;color:var(--ash);margin:0 0 auto}
.slate-foot{display:flex;justify-content:space-between;padding-top:1.5rem;
  border-top:1px solid var(--line-light);margin-top:1.5rem}
.slate-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  padding-top:1.5rem;border-top:1px solid var(--line-light);
  font-size:.9rem;font-weight:700;color:var(--paper);transition:gap .3s var(--ease)}
.slate-link::after{content:"→";transition:transform .3s var(--ease)}
.slate-link:hover::after{transform:translateX(4px)}
.slate-cta{background:var(--paper);border-color:var(--paper)}
.slate-cta .slate-title,.slate-cta .slate-link{color:var(--ink)}
.slate-cta .slate-body{color:var(--ash)}
.slate-cta .slate-top,.slate-cta .slate-link{border-color:var(--line-dark)}
.slate-cta .slate-num,.slate-cta .slate-state{color:var(--ash)}
.episodes-note{margin-top:clamp(2rem,4vw,3rem);text-align:center;color:var(--ash)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1.25rem;align-items:start}
.side-col{display:grid;gap:1.25rem}

.form-card{background:var(--bone);border:1px solid var(--line-dark);border-radius:2rem;
  padding:clamp(1.75rem,3.2vw,2.75rem)}
.form-card-dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.form-title{font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:700;letter-spacing:-.04em;
  margin:0 0 .45rem;line-height:1.1}
.form-sub{font-size:.94rem;color:var(--ash);margin:0 0 1.85rem;line-height:1.5}
.form-sub.dark-sub{color:var(--fog)}

.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.45rem}
.field label{font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash)}
.field input,.field select,.field textarea{
  width:100%;padding:.9rem 1rem;border-radius:.85rem;
  border:1px solid var(--line-dark);background:transparent;color:inherit;
  font-family:inherit;font-size:.98rem;line-height:1.4;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.field textarea{resize:vertical;min-height:112px}
.field input::placeholder,.field textarea::placeholder{color:#B4B0A8}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);background:rgba(10,10,10,.02)}
.form-card-dark .field input,.form-card-dark .field select{border-color:var(--line-light)}
.form-card-dark .field input::placeholder{color:var(--ash)}
.form-card-dark .field input:focus{border-color:var(--paper);background:rgba(244,242,238,.04)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6E6E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.field-help{font-size:.8rem;color:var(--ash);margin:.1rem 0 0}
.field-conditional[hidden]{display:none}
.field-conditional{animation:fieldIn .35s var(--ease-out)}
@keyframes fieldIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-submit{width:100%;margin-top:.4rem}
.form-status{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.06em;
  margin:.2rem 0 0;min-height:1rem;color:var(--ash)}
.form-status[data-state="ok"]{color:var(--ink);font-weight:700}
.form-card-dark .form-status[data-state="ok"]{color:var(--paper)}

.info-card{background:transparent;border:1px solid var(--line-dark);border-radius:2rem;
  padding:clamp(1.6rem,3vw,2.25rem)}
.info-list{display:grid;gap:.9rem;margin-top:1.35rem}
.info-list li{font-size:.96rem;line-height:1.5;color:var(--ash);
  padding-left:1.35rem;position:relative}
.info-list li::before{content:"";position:absolute;left:0;top:.6em;
  width:6px;height:1px;background:var(--ash)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--paper);
  border-radius:clamp(2.5rem,5vw,4rem) clamp(2.5rem,5vw,4rem) 0 0;
  padding:clamp(3.5rem,7vw,6rem) 0 2rem;margin-top:-1px;position:relative;z-index:2}
.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);
  padding-bottom:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line-light)}
.footer-logo{width:clamp(200px,22vw,270px);height:auto}
.footer-tag{margin:1.5rem 0 0;font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.35;
  letter-spacing:-.03em;font-weight:500;color:var(--fog)}
.footer-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;
  justify-self:end;width:100%;max-width:420px}
.footer-col ul{margin-top:1.35rem;display:grid;gap:.75rem}
.footer-col a{font-size:.94rem;color:var(--fog);
  transition:color .3s var(--ease),transform .3s var(--ease);display:inline-block}
.footer-col a:hover{color:var(--paper);transform:translateY(-1px)}

.footer-bottom{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
  padding-top:2rem}
.footer-bottom .status{display:flex;align-items:center;color:var(--paper)}
.footer-bottom .mono-label:last-child{margin-left:auto;color:var(--ash)}

/* ============================================================
   REVEAL BASE STATE
   Scoped to .js-anim, which an inline head script adds only when
   motion is allowed, and which script.js removes if GSAP fails to
   load. Without that class the copy is visible by default, so a
   blocked CDN can never leave the page blank.
   ============================================================ */
.js-anim [data-anim],.js-anim [data-reveal]{opacity:0}
.no-motion [data-anim],.no-motion [data-reveal]{opacity:1}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .cards-grid,.slate-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr;text-align:left}
  .process-art{max-width:300px;order:-1}
  .cred-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-cols{justify-self:start;max-width:none}
  .card-stage{height:240px}
}

@media (max-width:860px){
  .nav-links,.nav-cta{display:none}
  .menu-toggle{display:flex}
  .nav-pill{padding:.55rem .55rem .55rem 1.2rem}
  .contrast-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-scroll{display:none}
  .spec-row{grid-template-columns:1fr;gap:.5rem}
  .spec dt{padding-top:0}
  .footer-bottom .mono-label:last-child{margin-left:0}
}

/* short viewports: laptops in a small window, or landscape phones.
   Step the wordmark and headline down so the stack always clears the
   navbar and still fits on one screen. */
@media (max-height:960px){
  .hero-logo{width:clamp(230px,33vw,450px);margin-bottom:1.7rem}
  .hero-line-2{font-size:clamp(2.2rem,5.2vw,4.2rem)}
}
@media (max-height:780px){
  .hero-logo{width:clamp(200px,27vw,360px);margin-bottom:1.3rem}
  .hero-eyebrow{margin-bottom:1rem}
  .hero-line-2{font-size:clamp(2rem,4.4vw,3.3rem)}
  .hero-title{margin-bottom:1.1rem}
  .hero-sub{margin-bottom:1.6rem}
}
@media (max-height:700px){
  .hero-logo{width:clamp(170px,21vw,280px);margin-bottom:.95rem}
  .hero-line-1{font-size:1.05rem}
  .hero-line-2{font-size:clamp(1.75rem,3.6vw,2.6rem)}
  .hero-sub{font-size:.95rem;margin-bottom:1.3rem}
  .hero-scroll{display:none}
}

@media (max-width:560px){
  .hero{min-height:92svh}
  .hero-logo{width:min(78vw,260px);margin-bottom:1.5rem}
  .contrast-line{margin-top:.65rem}
  .hero-eyebrow .sep,
  .hero-eyebrow{font-size:.6rem}
  .btn{padding:.95rem 1.5rem;font-size:.85rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .footer-cols{grid-template-columns:1fr}
  .process-card{min-height:auto;padding-block:3.5rem}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  [data-anim],[data-reveal]{opacity:1 !important;transform:none !important}
  .ticker-track,.scan-line,.art-wave path{animation:none}
  .art-wave path{stroke-dashoffset:0}
  .process-card{filter:none !important;opacity:1 !important;transform:none !important}
}