/* ============================================================
   FRONTLINE WEB DESIGNS - v6 "Broadcast"
   Demo stylesheet. Parallel to styles.css, nothing here is live.

   Register borrowed from pxpush.com: a clean modernist layout with a fake
   analog display stacked on top. TECHNIQUE only. The grain is an inline
   feTurbulence data URI and the vignette is two radial gradients, so no asset
   of theirs is used, and none of their licensed faces (Graphik, SemiSqueezed,
   PPNeueMontrealMono) is referenced.

   Three things they do that are NOT copied, deliberately:
     - body{font-size:1.7vw} uncapped. A WCAG 1.4.4 resize-text risk; clamp() here.
     - zero prefers-reduced-motion rules anywhere. Four animations run regardless.
     - no mobile mitigation beyond theirs; the compositing cost is real and the
       grain/blur are cut down under 600px, which is mandatory not optional.
   ============================================================ */

:root{
  /* surfaces */
  --bg:        #1A1A1A;   /* page */
  --bg-2:      #111111;   /* deeper band */
  --bg-3:      #232323;   /* raised */

  /* text. Verified against the sRGB formula on --bg:
     --ink 8.96:1 . --ink-dim 4.71:1 . --ember 5.61:1 . --rec 12.7:1 */
  --ink:       #BABABA;   /* body, the primary colour. Not white: ~9:1 softens a dark page */
  --ink-hi:    #E9E9E9;   /* headings */
  /* MEASURED, not derived: the overlay stack paints OVER the text and costs
     ~20% of contrast, so a token has to clear AA on the COMPOSITED render, not
     in the stylesheet. #8A8A8A computes 5.04:1 here and measured 4.00:1 with
     the stack on, i.e. below AA. Raised until the rendered pixels passed. */
  --ink-dim:   #A5A5A5;   /* secondary. 7.07:1 CSS, ~5.6:1 composited */

  /* one saturated accent, and it is Tanner's own ember, which only ever
     passed AA on a DARK surface. Here it finally does. */
  --ember:     #FF5A36;
  --ember-deep:#C6350F;   /* solid fill under white text: 5.9:1 */
  --rec:       #3CFF7B;   /* the live dot, decor only */
  --rec-glow:  rgba(60,255,123,.25);

  --border:      1px solid hsla(0,0%,100%,.7);
  --border-fade: 1px solid hsla(0,0%,100%,.5);

  --columns: 20;          /* a finer grid is what lets off-centre reads as deliberate */
  --nav-h:   72px;

  --display: "Oswald", "Arial Narrow", sans-serif;   /* the condensed face, for shouting */
  --ui:      "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --pad-sm: 3rem;
  --pad-md: 7rem;
  --pad-lg: 10rem;

  --ease:   cubic-bezier(.16,1,.3,1);
  --t-fast: .16s ease;
  --t:      .34s var(--ease);
}
@media (max-width:1024px){
  :root{ --pad-sm:2.25rem; --pad-md:4rem; --pad-lg:4rem; }
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
  scroll-snap-type:y proximity;
}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--ink);
  background:var(--bg);
  /* clamp, not vw. Theirs is 1.7vw uncapped, which is ~43px on a 2560 monitor. */
  font-size:clamp(15px,1.02vw,18px);
  font-weight:400;
  line-height:1.45;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* height:auto is load-bearing, not tidiness. Every <img> here carries width/height
   ATTRIBUTES (correctly, for CLS), and with only `width:100%` in CSS the height
   attribute wins as the used height: the founder photo rendered 1250px tall at
   EVERY viewport, from 320 to 1440, which is what pushed the hero CTA below the
   fold on five devices. Measured, not guessed. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink-hi);
  margin:0;
}
h1{font-size:clamp(3rem,8.6vw,8.5rem);line-height:.86;letter-spacing:-.035em}
h2{font-size:clamp(2.3rem,5.6vw,5rem);letter-spacing:-.03em}
h3{font-size:clamp(1.2rem,1.9vw,1.75rem);line-height:1.05}
::selection{background:var(--ember);color:#fff}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* the monospace voice: labels, numbers, small print */
.mono{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

/* ============================================================
   THE ANALOG DISPLAY
   Five fixed, pointer-events:none layers above all content.
   Content underneath is untouched, so it works over any section.
   ============================================================ */

/* 1. grain. The motion STEPS between positions rather than easing:
      smooth reads as digital video, stepped reads as film. Easing this
      kills the whole effect. Oversized + offset so the jitter never
      drags a visible edge into frame. */
.grain{
  position:fixed;top:-10rem;left:-10rem;
  width:calc(100% + 20rem);height:calc(100% + 20rem);
  z-index:100;pointer-events:none;
  opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-jump .5s steps(1) infinite;
}
@keyframes grain-jump{
  0%{transform:translate3d(0,9rem,0)}      10%{transform:translate3d(-1rem,-4rem,0)}
  20%{transform:translate3d(-8rem,2rem,0)} 30%{transform:translate3d(9rem,-9rem,0)}
  40%{transform:translate3d(-2rem,7rem,0)} 50%{transform:translate3d(-9rem,-4rem,0)}
  60%{transform:translate3d(2rem,6rem,0)}  70%{transform:translate3d(7rem,-8rem,0)}
  80%{transform:translate3d(-9rem,1rem,0)} 90%{transform:translate3d(6rem,-5rem,0)}
  100%{transform:translate3d(-7rem,0,0)}
}

/* 2 + 3. fixed CRT ruling, and one bright bar sweeping the screen */
.scanlines{
  position:fixed;inset:0;z-index:22;pointer-events:none;overflow:hidden;opacity:.25;
}
.scanlines::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.3) 51%);
  background-size:100% .4vw;
}
.scanlines::before{
  content:"";position:absolute;left:0;width:100%;
  height:clamp(2px,.1vw,3px);
  background:rgba(0,0,0,.7);
  opacity:.8;will-change:transform;
  animation:sweep 8s linear infinite;
}
@keyframes sweep{
  from{transform:translate3d(0,110vh,0)}
  to  {transform:translate3d(0,-200vh,0)}
}

/* 4. gloom: a whole-screen blur at low opacity */
.gloom{position:fixed;inset:0;z-index:23;pointer-events:none;overflow:hidden}
.gloom::before{
  content:"";position:absolute;inset:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:.15;
}

/* 5. vignette, from two radial gradients rather than a bitmap */
.vignette{
  position:fixed;inset:0;z-index:101;pointer-events:none;
  transform:scale(1.02);
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(0,0,0,.55) 100%),
    radial-gradient(100% 140% at 50% 50%, transparent 60%, rgba(0,0,0,.35) 100%);
}

/* mix-blend-mode plus a fixed viewport-wide backdrop-filter is expensive.
   Cutting these on small screens is a requirement, not a nicety. */
@media (max-width:600px){
  .grain{display:none}
  .gloom::before{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:.2}
  .scanlines::after{background-size:100% .4vh}
}

/* They ship none of this. Four infinite animations otherwise run regardless
   of the OS setting, which is exactly the accessibility hole to not copy. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  .grain{opacity:.16}
  .scanlines::before{display:none}
}

/* ---------- Skip link ---------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ember-deep);color:#fff;padding:12px 18px;font-weight:600}
.skip:focus{left:16px}

/* ---------- Layout ---------- */
.container,.wrap{width:100%;max-width:none;margin-inline:auto;padding-inline:3vw}
.section{padding:var(--pad-md) 0;position:relative}

/* their layout primitive: a third and a two-thirds, split at the same gutter */
.layout{display:flex;flex-wrap:wrap;justify-content:space-between;padding-inline:3vw;gap:1.5rem 0}
.layout__third{width:31%}
.layout__second{width:66%}
@media (max-width:820px){
  .layout__third,.layout__second{width:100%}
}

/* ---------- Full-screen parts ----------
   proximity, NOT mandatory: under mandatory the browser must come to rest ON a
   snap point, so the 420vh Teardown scrub between two panels becomes a region
   it refuses to stop inside and the centrepiece is unreachable.
   scroll-snap-stop:always is what gives "one scroll, one part". */
.snap{
  min-height:calc(100svh - var(--nav-h));
  display:grid;align-content:center;
  scroll-snap-align:start;scroll-snap-stop:always;
}
/* snapping traps people when a panel outgrows the screen, which is what a short
   viewport, a zoomed page or a large-text setting all produce */
@media (max-height:720px){
  html{scroll-snap-type:none}
  .snap{min-height:0}
}

/* ---------- Section number, their editorial tell ---------- */
.label{
  display:block;font-family:var(--mono);font-size:.76rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink-dim);
  margin-bottom:1.6rem;
}
.label .n{color:var(--ember)}

.lead{font-size:clamp(1.1rem,1.7vw,1.6rem);line-height:1.25;max-width:46ch;color:var(--ink)}
/* the indented lead with a leading arrow */
.lead--indent{position:relative;padding-left:3.2rem}
.lead--indent::before{content:"\2192";position:absolute;left:0;top:0;opacity:.5;color:var(--ember)}

/* ---------- Marquee ticker ---------- */
.marquee{
  overflow:hidden;white-space:nowrap;
  border-top:var(--border-fade);border-bottom:var(--border-fade);
  padding:.9rem 0;
}
.marquee__track{display:inline-flex;will-change:transform;animation:roll 34s linear infinite}
.marquee__item{
  display:inline-flex;align-items:center;flex:0 0 auto;
  font-family:var(--display);font-size:clamp(1.6rem,3.4vw,3.2rem);
  text-transform:uppercase;letter-spacing:-.02em;color:var(--ink-hi);line-height:1;
}
.marquee__sym{color:var(--ember);padding:0 1.6rem;font-family:Arial,Helvetica,sans-serif;font-size:.5em}
@keyframes roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none} }

/* ---------- Buttons: full-width bordered rows ---------- */
.buttons{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0}
.btn{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.01em;
  text-transform:uppercase;color:var(--ink);
  padding:1.05rem 0;border-bottom:var(--border);width:100%;
  position:relative;transition:color var(--t-fast),padding var(--t-fast);
}
.btn:first-child{border-top:var(--border)}
.btn .arrow{font-size:1.15em;line-height:1}
.btn:hover{color:var(--ember);padding-inline:.9rem}
.btn--half{width:48.5%}
@media (max-width:700px){ .btn--half{width:100%} }
/* the one filled control on the page */
.btn--fill{
  background:var(--ember-deep);color:#fff;border:1px solid var(--ember-deep);
  padding-inline:1.4rem;justify-content:center;gap:.7rem;width:auto;
}
.btn--fill:hover{background:var(--ember);border-color:var(--ember);color:#111;padding-inline:1.4rem}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:21;mix-blend-mode:normal}
.header::after{
  content:"";position:absolute;left:3vw;right:3vw;bottom:0;height:1px;
  background:hsla(0,0%,100%,.14);opacity:0;transition:opacity var(--t-fast);
}
.header.scrolled::after{opacity:1}
.header.scrolled{background:rgba(26,26,26,.82);backdrop-filter:blur(8px)}
.nav{display:flex;align-items:center;gap:1.4rem;height:var(--nav-h);padding-inline:3vw}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.brand img{width:34px;height:34px}
.brand-name{display:flex;flex-direction:column;line-height:1}
.bn-1{font-family:var(--display);font-size:1.2rem;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink-hi)}
.bn-2{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-top:.22rem}

.nav-links{display:flex;align-items:center;gap:.2rem}
.nav-links a,.nav-group-btn{
  font-family:var(--display);font-size:.98rem;text-transform:uppercase;
  letter-spacing:.01em;color:var(--ink);padding:.35rem .7rem;transition:color var(--t-fast);
}
.nav-links > a:not(.btn):hover,.nav-group-btn:hover{color:var(--ember)}
/* `.nav-links a` (0,2,0) outranks `.btn--fill` (0,1,0), so the filled nav button
   inherited --ink and measured 2.76:1 on the live DOM. White is 5.36:1. */
.nav-links a.btn--fill,.mobile-menu a.btn--fill{color:#fff}
.nav-links a.btn--fill:hover,.mobile-menu a.btn--fill:hover{color:#111}
.nav-group{position:relative}
.nav-group-btn{display:inline-flex;align-items:center;gap:.3rem}
.nav-chevron{width:12px;height:12px;transition:transform var(--t-fast)}
.nav-group.open .nav-chevron{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:238px;
  background:var(--bg-2);border:1px solid hsla(0,0%,100%,.16);
  padding:.4rem 0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.nav-group.open .nav-dropdown{opacity:1;visibility:visible;transform:none}
.nav-dropdown a{display:block;padding:.6rem 1.2rem;font-family:var(--ui);font-size:.86rem;text-transform:none;letter-spacing:0}
.nav-dropdown a:hover{background:var(--bg-3);color:var(--ember)}

/* the live dot */
.rec{
  color:var(--rec);font-size:.7rem;margin-left:.5rem;
  filter:drop-shadow(0 0 .18em var(--rec-glow));
  text-shadow:0 0 .15em var(--rec-glow),0 0 .5em var(--rec-glow),0 0 .25em var(--rec-glow);
  animation:blink 2.4s steps(1) infinite;
}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .rec{animation:none} }

.nav-toggle{display:none;padding:.5rem;color:var(--ink-hi);min-width:44px;min-height:44px}
.nav-toggle svg{width:26px;height:26px}
.nav-toggle .ic-close{display:none}
.nav-toggle[aria-expanded="true"] .ic-open{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}
.mobile-menu{display:none;background:var(--bg-2);border-top:1px solid hsla(0,0%,100%,.14);padding:1rem 3vw 2rem}
.mobile-menu.open{display:block}
.mobile-menu > a,.mob-group-btn{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  padding:.9rem 0;border-bottom:1px solid hsla(0,0%,100%,.14);
  font-family:var(--display);font-size:1.15rem;text-transform:uppercase;color:var(--ink-hi);text-align:left;
}
.mob-dropdown{display:none;padding:.3rem 0 .7rem .9rem}
.mob-group.open .mob-dropdown{display:block}
.mob-dropdown a{display:block;padding:.55rem 0;font-size:.9rem;color:var(--ink-dim)}
.mobile-menu .btn--fill{margin-top:1.4rem;width:100%}
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-toggle{display:block}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:calc(var(--nav-h) + 3.5rem);padding-bottom:2.5rem}
.hero-grid{padding-inline:3vw;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:clamp(2rem,4vw,4.5rem);align-items:end}
.hero h1 .l2{display:block;color:var(--ember)}
.hero-stamp{font-family:var(--mono);font-size:.76rem;color:var(--ink-dim);text-transform:uppercase;margin-bottom:1.8rem}
.hero-lede{margin-top:1.9rem;font-size:clamp(1rem,1.25vw,1.24rem);line-height:1.45;max-width:52ch}
.hero-lede b{color:var(--ink-hi);font-weight:600}
.hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2.4rem;border-top:var(--border-fade)}
.hero-facts span{display:block;padding:.95rem 1.2rem 0 0;font-family:var(--mono);font-size:.76rem;line-height:1.4;color:var(--ink-dim)}
.hero-facts span + span{border-left:var(--border-fade);padding-left:1.2rem}
.hero-facts b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:500;text-transform:uppercase;color:var(--ink-hi);margin-bottom:.3rem;letter-spacing:-.01em}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem;max-width:520px}
.hero-photo{margin:0}
.hero-photo .frame{border:1px solid hsla(0,0%,100%,.18);padding:7px;background:var(--bg-2)}
.hero-photo img{width:100%;filter:grayscale(.35) contrast(1.05)}
.hero-photo figcaption{margin-top:.85rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);line-height:1.5}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{max-width:320px}
  .hero-facts{grid-template-columns:1fr;border-top:0}
  .hero-facts span{padding:.85rem 0;border-top:var(--border-fade)}
  .hero-facts span + span{border-left:0;padding-left:0}
}
@media (max-width:480px){
  .hero{padding-top:calc(var(--nav-h) + 1.6rem)}
  .hero-lede{margin-top:1.2rem}
  .hero-facts{margin-top:1.5rem}
  .hero-actions{margin-top:1.6rem}
}

/* SHORT VIEWPORTS. Measured: the hero CTA sat 587px below the fold on a
   1366x768 laptop, 398px on phone landscape, 331px on 320x568. Every hero
   breakpoint above keys on WIDTH, so a short-but-wide screen gets the full
   desktop type scale with no vertical room. Branch on HEIGHT instead.
   These blocks come AFTER the width blocks on purpose: media queries add no
   specificity, so source order is what lets them win. */
@media (max-height:860px){
  h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
  .hero{padding-top:calc(var(--nav-h) + 1rem);padding-bottom:1.2rem}
  .hero-grid{align-items:center;gap:1.5rem}
  .hero-stamp{margin-bottom:.9rem}
  .hero-lede{margin-top:1rem;font-size:.95rem;line-height:1.4}
  .hero-facts{margin-top:1.1rem}
  .hero-facts span{padding-top:.55rem}
  .hero-facts b{font-size:1.05rem;margin-bottom:.15rem}
  .hero-actions{margin-top:1.1rem;gap:.5rem}
}
@media (max-height:700px){
  h1{font-size:clamp(1.85rem,3.6vw,2.6rem)}
  .hero{padding-top:calc(var(--nav-h) + .5rem);padding-bottom:.8rem}
  .hero-stamp{margin-bottom:.6rem;font-size:.68rem}
  .hero-lede{margin-top:.8rem;font-size:.88rem;max-width:62ch}
  .hero-facts{margin-top:.8rem}
  .hero-facts b{font-size:.95rem}
  .hero-actions{margin-top:.8rem}
  .hero-actions .btn{padding:.72rem 0;font-size:.76rem}
}
/* phone landscape has ~318px of usable height. Reclaim the WIDTH it does have
   by going back to two columns rather than stacking. */
@media (max-height:540px) and (orientation:landscape){
  .hero-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr);align-items:center}
  .hero-photo{max-width:190px}
  .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--border-fade)}
  .hero-facts span{padding:.5rem .8rem 0 0;border-top:0}
  .hero-facts span + span{border-left:var(--border-fade);padding-left:.8rem}
  .hero-stamp{display:none}          /* decorative version stamp only, no content lost */
  .hero-lede{font-size:.82rem;max-width:52ch}
}

/* ============================================================
   THE TEARDOWN - unchanged mechanic, restyled onto the dark base
   ============================================================ */
.td{padding-top:var(--pad-md)}
.td-intro{padding-inline:3vw;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:2rem;align-items:end;padding-bottom:var(--pad-sm)}
.td-intro .lead{margin-top:1.2rem}
.td-live{font-family:var(--mono);font-size:.8rem;line-height:1.8;color:var(--ink-dim);text-transform:uppercase}
.td-live a,.td-live .soon{color:var(--ember);border-bottom:1px solid rgba(255,90,54,.4)}
@media (max-width:820px){ .td-intro{grid-template-columns:1fr} }

.td-track{position:relative;height:420vh}
.td-stage{
  position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);
  gap:clamp(1.25rem,2.5vw,2.5rem);align-items:center;padding:1.5rem 3vw 2.5rem;
}
.td-frame{position:relative;width:100%;aspect-ratio:16/10;border:1px solid hsla(0,0%,100%,.18);background:var(--bg-2);perspective:1400px}
.td-truth{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.js .td-truth{opacity:0}
.td-bands{position:absolute;inset:0;transform-style:preserve-3d}
.td-band{
  position:absolute;left:0;width:100%;height:calc(100% / 6);
  background-repeat:no-repeat;background-size:100% 600%;   /* 6 slices of one flat screenshot */
  background-position:0 calc(var(--i) * 20%);
  top:calc(var(--i) * 100% / 6);
  will-change:transform,opacity,filter;backface-visibility:hidden;
}
.td-bands--old .td-band{background-image:var(--shot-old)}
.td-bands--new .td-band{background-image:var(--shot-new);opacity:0}
.td-wire{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,90,54,.34) 0 1px, transparent 1px calc(100% / 6)),
    repeating-linear-gradient(to right,  rgba(255,90,54,.20) 0 1px, transparent 1px 9%);
}
.td-caption{position:absolute;left:0;right:0;bottom:-2.5rem;font-family:var(--mono);font-size:.78rem;color:var(--ink-dim);line-height:1.4}
.td-caption .n{color:var(--ember);margin-right:.7rem}
.td-notes{display:grid;gap:0;border-top:var(--border-fade)}
.td-notes li{padding:1rem 0;border-bottom:var(--border-fade);font-size:.86rem;line-height:1.4;color:var(--ink)}
.td-notes b{display:block;font-family:var(--mono);font-size:.72rem;font-weight:400;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.4rem}
.td-notes--fault b{color:var(--ember)}
.td-notes--fix b{color:var(--rec)}
.js .td-notes--fix{position:absolute;inset:0;opacity:0;pointer-events:none}
.td-aside{position:relative}
@media (max-width:900px){
  .td-track{height:340vh}
  .td-stage{grid-template-columns:1fr;align-content:center;gap:1.25rem}
  .td-notes li{padding:.7rem 0;font-size:.78rem}
  .td-caption{bottom:-3.4rem;font-size:.72rem}
}
.td-claim{
  padding:var(--pad-sm) 3vw var(--pad-md);
  font-family:var(--display);font-size:clamp(1.9rem,4.4vw,3.8rem);line-height:1;
  text-transform:uppercase;letter-spacing:-.03em;color:var(--ink-hi);max-width:22ch;
}
.td-claim .em{color:var(--ember)}
.td-claim .after{display:block;margin-top:2rem;max-width:420px}

/* static path: same story, no scrub */
.td-static{display:none;gap:2rem;grid-template-columns:1fr 1fr}
.nomotion .td-track{display:none}
.nomotion .td-static{display:grid;padding:0 3vw var(--pad-sm)}
.nomotion .td-static figure{margin:0}
.nomotion .td-static img{width:100%;border:1px solid hsla(0,0%,100%,.18)}
.nomotion .td-static .td-notes{margin-top:1rem}
.nomotion .td-static figcaption{margin-bottom:.7rem;font-family:var(--mono);font-size:.78rem;color:var(--ink-dim);line-height:1.4}
.nomotion .td-static figcaption .n{color:var(--ember);margin-right:.6rem}
@media (prefers-reduced-motion:reduce){
  .td-track{display:none}
  .td-static{display:grid;padding:0 3vw var(--pad-sm)}
}
@media (max-width:820px){ .nomotion .td-static{grid-template-columns:1fr} }

/* ---------- Services ---------- */
.svc-rows{border-top:var(--border)}
.svc-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 2rem;padding:1.9rem 0;border-bottom:var(--border-fade)}
.svc-item > *{transition:transform var(--t)}
a.svc-item:hover > *{transform:translateX(.8rem)}
a.svc-item:hover h3{color:var(--ember)}
.svc-item h3{transition:color var(--t-fast),transform var(--t)}
.svc-item .price{font-family:var(--mono);font-size:.82rem;color:var(--ember);white-space:nowrap;padding-top:.35rem}
.svc-item p{grid-column:1/-1;max-width:64ch;font-size:.92rem;margin-top:.3rem;color:var(--ink-dim)}
.svc-item .links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.2rem;max-width:560px}
@media (max-width:900px){
  .svc-item{grid-template-columns:1fr}
  .svc-item .price{white-space:normal;padding-top:0}
}

/* ---------- Work ---------- */
.work-grid{padding-inline:3vw;margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.work-shot{overflow:hidden;border:1px solid hsla(0,0%,100%,.18)}
.work img{width:100%;filter:grayscale(.5);transition:transform .7s var(--ease),filter .5s var(--ease)}
.work:hover img{transform:scale(1.035);filter:grayscale(0)}
.work-body{padding-top:.95rem}
.work-body h3{font-size:1.2rem}
.work-body p{margin-top:.4rem;font-size:.84rem;max-width:34ch;color:var(--ink-dim)}
.work-note{padding-inline:3vw;margin-top:2rem;font-family:var(--mono);font-size:.76rem;color:var(--ink-dim)}
.work-note a{color:var(--ember)}
.work-cta{padding-inline:3vw;margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;max-width:640px}
@media (max-width:900px){ .work-grid{grid-template-columns:1fr;gap:2.2rem} }

/* ---------- Proof ---------- */
.proof{padding-inline:3vw}
.proof-quote{
  margin:1.8rem 0 0;font-family:var(--display);font-size:clamp(1.9rem,4.6vw,4rem);
  line-height:1;text-transform:uppercase;letter-spacing:-.03em;color:var(--ink-hi);max-width:20ch;
}
.proof-by{margin-top:1.8rem;font-family:var(--mono);font-size:.78rem;padding-top:1.2rem;border-top:var(--border-fade);color:var(--ink-dim)}
.proof-by .who{color:var(--ink-hi)}
.proof-links{display:flex;flex-wrap:wrap;gap:0;margin-top:1.4rem;max-width:560px}

/* ---------- About ---------- */
.about-grid{padding-inline:3vw;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.75rem,4vw,4rem);align-items:center}
.about-photo{margin:0}
.about-photo .frame{border:1px solid hsla(0,0%,100%,.18);padding:7px}
.about-photo img{filter:grayscale(1) contrast(1.1)}
.about-photo figcaption{margin-top:.85rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);line-height:1.5}
.about-vals{margin-top:1.9rem;border-top:var(--border-fade)}
.about-vals li{padding:1rem 0;border-bottom:var(--border-fade);font-size:.9rem;color:var(--ink-dim)}
.about-vals b{color:var(--ink-hi);font-weight:600}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr} }

/* ---------- Pledge ---------- */
.pledge-grid{padding-inline:3vw;margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--border)}
.pledge{padding:2rem 1.8rem 0 0}
.pledge + .pledge{border-left:var(--border-fade);padding-left:1.8rem}
.pledge h3{font-size:1.3rem}
.pledge p{margin-top:.8rem;font-size:.86rem;color:var(--ink-dim)}
@media (max-width:900px){
  .pledge-grid{grid-template-columns:1fr;border-top:0}
  .pledge{padding:1.6rem 0 0;border-top:var(--border-fade)}
  .pledge + .pledge{border-left:0;padding-left:0}
}

/* ---------- Closing ---------- */
.cta{background:var(--bg-2)}
.cta-grid{padding-inline:3vw;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);gap:clamp(1.75rem,4vw,4rem);align-items:start}
.cta h2{max-width:16ch}
.cta-grid > div > p{margin-top:1.4rem;max-width:52ch;font-size:.96rem;color:var(--ink-dim)}
.cta-actions{display:flex;flex-direction:column;gap:0;padding-top:.4rem}
.cta-alt{margin-top:1.4rem;font-family:var(--mono);font-size:.78rem;line-height:1.7;color:var(--ink-dim)}
.cta-alt a{color:var(--ember)}
@media (max-width:900px){ .cta-grid{grid-template-columns:1fr} }

/* ---------- Footer, written as a registry entry ---------- */
.footer{background:var(--bg-2);padding-top:var(--pad-sm);position:relative}
.footer-mark{
  padding-inline:3vw;font-family:var(--display);font-size:clamp(3.5rem,17vw,15rem);
  line-height:.78;text-transform:uppercase;letter-spacing:-.045em;
  color:var(--ink-hi);opacity:.14;user-select:none;
}
.footer-top{padding:2.5rem 3vw var(--pad-sm);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2rem}
.registry{font-family:var(--mono);font-size:.78rem;line-height:1.95;color:var(--ink-dim);text-transform:uppercase}
.registry .co{color:var(--ink-hi)}
.footer-nav{display:flex;flex-wrap:wrap;gap:0 4%}
.footer-nav a{width:48%;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;color:var(--ink-dim);padding:.55rem 0;border-bottom:var(--border-fade);display:flex;justify-content:space-between}
.footer-nav a:hover{color:var(--ember)}
.footer-navlabel{width:100%;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;color:var(--ink-hi);padding:1.2rem 0 .3rem}
.footer-social{display:flex;gap:.7rem;margin-top:1.6rem}
.footer-social a{width:40px;height:40px;display:grid;place-items:center;border:1px solid hsla(0,0%,100%,.2);color:var(--ink-dim)}
.footer-social a:hover{color:var(--ember);border-color:var(--ember)}
.footer-social svg{width:18px;height:18px}
.footer-bottom{padding:1.6rem 3vw 0;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-family:var(--mono);font-size:.74rem;color:var(--ink-dim);text-transform:uppercase;border-top:var(--border-fade)}
/* #7C7C7C measured 3.09:1 composited, #9A9A9A 4.46:1. Legal text is still text,
   and at .74rem it is normal-size text, so the bar is 4.5 not 3. */
.footer-disclaimer{padding:1.4rem 3vw var(--pad-sm);font-size:.74rem;line-height:1.7;color:var(--ink-dim)}
.footer-disclaimer a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .footer-top{grid-template-columns:1fr}
  .footer-nav a{width:100%}
}

/* ---------- Mobile call bar ---------- */
.callbar{display:none}
@media (max-width:720px){
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid hsla(0,0%,100%,.2)}
  .callbar a{padding:1rem;text-align:center;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;background:var(--bg-2);color:var(--ink)}
  .callbar a.hot{background:var(--ember-deep);color:#fff}
  body{padding-bottom:56px}
}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(10px)}
.js .reveal.is-visible{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none} }