/* ── fonts, hosted here: no third-party request, nothing blocked on a locked-down network ── */
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url(../assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url(../assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Martian Mono'; font-style:normal; font-weight:200 700; font-stretch:100%; font-display:swap;
  src:url(../assets/fonts/martian-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Martian Mono'; font-style:normal; font-weight:200 700; font-stretch:100%; font-display:swap;
  src:url(../assets/fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ══════════════════════════════════════════════════════════════
   TOAD — Mateo Johnson
   Dark base / acid green / editorial grid + gaming HUD detailing
   ══════════════════════════════════════════════════════════════ */

:root{
  --void:   #0B0C0A;
  --carbon: #121410;
  --panel:  #171A14;
  --line:   #262A21;
  --line-2: #363C2E;
  --bone:   #E9EAE3;
  --mute:   #7C836F;
  --acid:   #A9DC3B;   /* logo green */
  --signal: #D8FF3D;   /* hot HUD green */

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --rail: 3.25rem;
  --ease: cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--f-display);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--signal); color:#000; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.02em; line-height:.92; }

img{ max-width:100%; display:block; }

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}

/* ── ambient gradient (sits under the blueprint) ──────────────── */
.aurora{
  position:fixed; inset:-15%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 18%, rgba(169,220,59,.20), transparent 62%),
    radial-gradient(34% 42% at 82% 38%, rgba(96,214,120,.14), transparent 64%),
    radial-gradient(46% 40% at 55% 92%, rgba(169,220,59,.16), transparent 66%),
    radial-gradient(30% 34% at 92% 82%, rgba(216,255,61,.10), transparent 66%);
  /* no live blur: the gradients already fall away to nothing, and a blurred
     full-screen layer is the costliest thing on a weak graphics chip */
  opacity:0; transition:opacity 1.4s var(--ease);
}
.fx .aurora{ opacity:.55; animation:drift 34s ease-in-out infinite alternate; }
.lite .aurora{ animation:none; }
@keyframes drift{
  0%{   transform:translate3d(0,0,0) scale(1); }
  50%{  transform:translate3d(-3%,2%,0) scale(1.06); }
  100%{ transform:translate3d(2.5%,-2%,0) scale(1.03); }
}

/* ── scroll glow: a green light at the bottom edge pulling you down ── */
.scroll-glow{
  position:fixed; left:0; right:0; bottom:0; height:210px; z-index:30;
  pointer-events:none; opacity:1; transition:opacity .8s var(--ease);
}
.scroll-glow.at-end{ opacity:0; }
/* a flat green band across the whole bottom, fading smoothly up to nothing */
.scroll-glow span{
  position:absolute; inset:0; display:block;
  background:linear-gradient(to top,
    rgba(216,255,61,.30) 0%,
    rgba(169,220,59,.13) 32%,
    rgba(169,220,59,.04) 58%,
    transparent 100%);
  animation:scrollGlow 6.5s ease-in-out infinite;
}
.lite .scroll-glow span{ animation:none; opacity:.85; }
@keyframes scrollGlow{
  0%,100%{ opacity:.7; }
  50%{ opacity:1; }
}

/* ── blueprint field ──────────────────────────────────────────── */
.grid-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(169,220,59,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(169,220,59,.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(169,220,59,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(169,220,59,.11) 1px, transparent 1px);
  background-size:28px 28px, 28px 28px, 224px 224px, 224px 224px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 15%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 15%, transparent 78%);
  opacity:.9;
}

/* ── cursor trail (signature) ─────────────────────────────────── */
.cursor-trail{
  position:fixed; inset:0; z-index:90;
  width:100%; height:100%;
  pointer-events:none;
  display:none;                              /* switched on with .fx, once the device proves it keeps up */
}
.fx .cursor-trail{ display:block; }

/* ── side rails ───────────────────────────────────────────────── */
.rail{
  position:fixed; top:0; bottom:0; width:var(--rail); z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:1.5rem 0; pointer-events:none;
}
.rail--left{ left:0; border-right:1px solid var(--line); }
.rail--right{ right:0; border-left:1px solid var(--line); }
.rail__label,.rail__tick{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.22em;
  writing-mode:vertical-rl; text-transform:uppercase;
}
.rail__label{ color:var(--mute); }
.rail__tick{ color:var(--acid); }
.rail--right .rail__label,.rail--right .rail__tick{ transform:rotate(180deg); }

/* ── topbar ───────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:.9rem var(--pad);
  margin:0 var(--rail);
  border-bottom:1px solid var(--line);
  background:rgba(11,12,10,.92);
}
@media (min-width:601px){
  /* the live blur behind the bar only where the device has shown it keeps up */
  html.fx .topbar{ background:rgba(11,12,10,.78); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); }
}
.mark{ display:block; line-height:0; }
.mark__img{ height:30px; width:auto; }
.mark__type{
  font-size:1.65rem; line-height:1; font-weight:900; letter-spacing:-.06em;
  font-variation-settings:'wdth' 118,'wght' 900;
  color:var(--acid);
  -webkit-text-stroke:1.5px var(--acid);
  -webkit-text-fill-color:transparent;
  font-style:italic;
  padding-right:.1em;
}

.nav{ display:flex; align-items:center; gap:clamp(.75rem,2vw,2rem); }
.nav a{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); transition:color .2s;
  display:flex; align-items:baseline; gap:.45em;
}
.nav a i{ font-style:normal; font-size:8px; color:var(--line-2); transition:color .2s; }
.nav a:hover{ color:var(--bone); }
.nav a:hover i{ color:var(--acid); }
.nav__cta{
  border:1px solid var(--line-2); padding:.5em .9em; color:var(--acid)!important;
  transition:background .2s,color .2s,border-color .2s;
}
.nav__cta:hover{ background:var(--acid); color:#0B0C0A!important; border-color:var(--acid); }

/* hamburger — hidden on desktop, shown on mobile */
.nav-toggle{
  display:none; width:42px; height:42px; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:transparent; border:1px solid var(--line-2); cursor:pointer;
}
.nav-toggle span{
  display:block; width:20px; height:1.5px; background:var(--bone);
  transition:transform .3s var(--ease), opacity .25s var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.nav-toggle:hover{ border-color:var(--acid); }
.nav-toggle:hover span{ background:var(--acid); }

/* desktop: the panel wrapper is transparent to layout, head/foot hidden */
.nav__panel{ display:contents; }
.nav__head, .nav__foot, .nav__title, .nav__coord{ display:none; }

/* ── shared layout ────────────────────────────────────────────── */
main{ position:relative; z-index:10; margin:0 var(--rail); }

.band{ padding:clamp(3rem,5vw,4.75rem) var(--pad); border-bottom:1px solid var(--line); }
.band,.contact{ scroll-margin-top:4.5rem; }
.band--alt{ background:linear-gradient(180deg, rgba(23,26,20,.7), rgba(11,12,10,0)); }

/* optional photo behind a section's heading. It sits at the top of the section
   and dissolves downward into the page, so the heading and intro text read on
   top of it. Only sections that set a backdrop get any of this. */
.band--backdrop{ position:relative; }
.band__backdrop{
  position:absolute; left:0; right:0; top:0; z-index:0; pointer-events:none;
  height:clamp(260px, 44vh, 480px);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.7) 30%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.7) 30%, transparent 100%);
}
.band__backdrop img{ display:block; width:100%; height:100%; object-fit:cover; opacity:.24; }
.band__backdrop::after{                  /* a scrim on the text side so the heading stays crisp */
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,12,10,.9) 0%, rgba(11,12,10,.6) 50%, rgba(11,12,10,.25) 100%);
}
.band--backdrop > :not(.band__backdrop){ position:relative; z-index:1; }
@media (max-width:600px){
  .band__backdrop{ height:clamp(240px, 42vh, 380px); }
}

.head{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem clamp(1rem,3vw,2.5rem);
  align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem);
  padding-bottom:1.1rem; border-bottom:1px solid var(--line);
}
.head__num{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; color:var(--acid);
  padding-bottom:.4em;
}
.head__title{
  font-size:clamp(2.2rem,6.5vw,4.6rem);
  font-variation-settings:'wdth' 78,'wght' 800;
  text-transform:uppercase;
}
.head__note{
  grid-column:2; margin:0; max-width:46ch;
  font-size:.86rem; color:var(--mute); line-height:1.6;
}

/* ── 00 hero ──────────────────────────────────────────────────── */
.hero{
  position:relative;
  display:flex; flex-direction:column;
  border-bottom:1px solid var(--line);
}
/* optional looping film above the name. The film sits in its own band at the
   top of the hero and dissolves into the page along its lower edge, so the
   wordmark below it appears to rise out of the picture. */
.hero__stage{ position:relative; z-index:1; height:clamp(200px,40vh,470px); }
/* wider than a phone: the band grows with the screen's width so a wide monitor
   shows the reel at roughly 2.4:1 instead of a thin letterbox, but never takes
   more than about 54% of the window's height, so the name stays in view */
@media (min-width:601px){
  .hero__stage{ height:clamp(220px, min(42vw, 54vh), 720px); }
}
.hero__video{
  position:absolute; inset:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.55) 70%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.55) 70%, transparent 100%);
}
.hero__video video{ display:block; width:100%; height:100%; object-fit:cover; }
.hero__video::after{                     /* a light tint and edge vignette so it sits in the page's palette */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(11,12,10,.35) 0%, rgba(11,12,10,0) 26%),
    radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(11,12,10,.5) 100%);
}
/* the film finishes fading out, then a little air, then the name */
.hero--video .hero__inner{
  position:relative; z-index:2;
  margin-top:0;
  padding-top:clamp(.75rem,2.2vw,1.75rem);
}
.hero--video .ticker{ position:relative; z-index:2; }
.hero__vtoggle{
  position:absolute; z-index:3; right:var(--pad); bottom:clamp(2.5rem,9vw,5.5rem);
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line-2); background:rgba(11,12,10,.55); color:var(--bone);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.hero__vtoggle:hover, .hero__vtoggle:focus-visible{ border-color:var(--acid); color:var(--signal); outline:none; }
.hero__vtoggle i{                        /* two bars = pause */
  display:block; width:10px; height:12px;
  background:linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px);
}
.hero__vtoggle[aria-pressed="true"] i{   /* triangle = play */
  width:0; height:0; background:none; margin-left:2px;
  border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.hero__vtoggle[hidden]{ display:none; }

.hero__inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:clamp(.6rem,1.5vw,1.1rem);
  padding:clamp(2.25rem,6vh,4.5rem) var(--pad) clamp(1.75rem,3.5vh,2.75rem);
}
.pulse{ color:var(--acid); display:flex; align-items:center; gap:.6em; }
.pulse::before{
  content:''; width:6px; height:6px; background:var(--acid); border-radius:50%;
  animation:pulse 1.9s infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(169,220,59,.55); }
  70%{ opacity:.65; box-shadow:0 0 0 7px rgba(169,220,59,0); }
}

/* the big glitching wordmark: MATEO ⇄ TOAD */
.hero__name{
  margin:0; cursor:pointer; outline:none;
  font-size:clamp(5rem, 25vw, 24rem);
  line-height:.8; text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 900; letter-spacing:-.045em;
  /* the letters dissolve into the dark at the bottom */
  -webkit-mask-image:linear-gradient(to bottom, #000 68%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 68%, transparent 100%);
}
.hero__name span{
  display:inline-block; color:var(--bone);
  transition:color .55s var(--ease);
}
.hero__name span.is-toad{ color:var(--acid); }
.hero__name:focus-visible span{ color:var(--acid); }

/* TOAD stays an easter egg: no label, just a hover away */

.hero__role{
  margin:0;
  font-size:clamp(1.05rem, 3.1vw, 2.05rem);
  font-variation-settings:'wdth' 90,'wght' 700;
  text-transform:uppercase; letter-spacing:.01em; color:var(--bone);
}
.hero__plus{ color:var(--acid); }

.hero__statement{
  margin:0; max-width:62ch;
  font-size:clamp(.95rem,1.5vw,1.18rem); line-height:1.45; color:var(--mute);
}
.hero__statement em{ font-style:normal; color:var(--acid); }

.hero__acts{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
  margin-top:clamp(.4rem,1.4vw,1rem);
}

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:1em 1.6em; border:1px solid var(--line-2); color:var(--bone);
  transition:background .22s var(--ease), color .22s, border-color .22s, transform .22s var(--ease);
}
.btn::after{ content:'▸'; font-size:9px; color:var(--acid); transition:color .2s; }
.btn:hover{ border-color:var(--acid); transform:translateY(-2px); }
.btn--solid{ background:var(--acid); border-color:var(--acid); color:#0B0C0A; }
.btn--solid::after{ color:#0B0C0A; }
.btn--solid:hover{ background:var(--signal); border-color:var(--signal); }

.ticker{
  border-top:1px solid var(--line);
  margin:0 calc(var(--rail) * -1);            /* span full viewport, behind the rails */
  padding:1.4rem 0; overflow:hidden;
  background:rgba(169,220,59,.04);
  /* fade both ends so the scroll disappears softly under the side rails */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 clamp(3.5rem,6vw,7rem), #000 calc(100% - clamp(3.5rem,6vw,7rem)), transparent);
  mask-image:linear-gradient(to right, transparent, #000 clamp(3.5rem,6vw,7rem), #000 calc(100% - clamp(3.5rem,6vw,7rem)), transparent);
}
.ticker__run{
  display:flex; gap:2.8rem; width:max-content;
  animation:run 34s linear infinite;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.22em; color:var(--mute);
}
.ticker__run b{ color:var(--acid); font-weight:400; }
@keyframes run{ to{ transform:translateX(-50%); } }

/* ── 01 work ──────────────────────────────────────────────────── */
.work{
  display:grid; gap:clamp(.75rem,1.6vw,1.4rem);
  grid-template-columns:repeat(4,1fr);
}
.proj{ grid-column:span 2; }
.proj--wide{ grid-column:span 4; }

.proj__link{ display:block; }

.slot{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(169,220,59,.07), rgba(11,12,10,0) 55%),
    repeating-linear-gradient(0deg, rgba(169,220,59,.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(169,220,59,.07) 0 1px, transparent 1px 22px),
    var(--carbon);
  border:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.proj--wide .slot{ aspect-ratio:21/9; }
.slot__id{
  position:absolute; left:.9rem; bottom:.8rem;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; color:var(--line-2);
  transition:color .3s;
}
/* corner brackets */
.slot::before,.slot::after{
  content:''; position:absolute; width:22px; height:22px;
  border:1px solid var(--acid); opacity:0; transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.slot::before{ top:12px; left:12px; border-right:0; border-bottom:0; transform:translate(-6px,-6px); }
.slot::after{ bottom:12px; right:12px; border-left:0; border-top:0; transform:translate(6px,6px); }
.proj__link:hover .slot::before,
.proj__link:hover .slot::after,
.proj__link:focus-visible .slot::before,
.proj__link:focus-visible .slot::after{ opacity:1; transform:translate(0,0); }
.proj__link:hover .slot{ border-color:var(--line-2); }
.proj__link:hover .slot__id{ color:var(--acid); }

.proj__row{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.85rem .1rem 0; border-top:1px solid transparent;
}
.proj__i{ font-family:var(--f-mono); font-size:9px; color:var(--acid); letter-spacing:.14em; }
.proj__row h3{
  font-size:clamp(1rem,1.5vw,1.3rem); font-variation-settings:'wdth' 88,'wght' 700;
  text-transform:uppercase; flex:1;
}
.proj__tag{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.14em;
  color:var(--mute); text-transform:uppercase;
}

/* ── 02 dime — pipeline legend + launch cases ─────────────────── */
.pipeline{
  list-style:none; margin:0 0 clamp(2.5rem,5vw,3.5rem); padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .55rem;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase;
}
.pipeline li{ display:flex; align-items:center; gap:.55rem; }
.pipeline li span{
  position:relative; overflow:hidden;
  border:1px solid var(--line); padding:.5em .8em; color:var(--line-2);
  transition:border-color .45s var(--ease), color .45s var(--ease),
             background .45s var(--ease), box-shadow .45s var(--ease);
}
.pipeline li:not(:last-child)::after{
  content:'→'; color:var(--line); transition:color .45s var(--ease);
}

/* lit: this launch travelled through this stage */
.pipeline li.is-on span{
  border-color:var(--acid); color:var(--bone);
  background:rgba(169,220,59,.07);
  box-shadow:0 0 0 1px rgba(169,220,59,.18), 0 0 18px -4px rgba(169,220,59,.4);
}
.pipeline li.is-on + li.is-on::before{ content:none; }
.pipeline li.is-on::after{ color:var(--acid); }
/* a stage that just switched on flickers once, like a panel powering up */
.pipeline li.is-on span::after{
  content:''; position:absolute; inset:0;
  background:var(--acid); opacity:0;
  animation:stageOn .5s var(--ease) 1;
}
@keyframes stageOn{
  0%{ opacity:.34; } 22%{ opacity:0; } 40%{ opacity:.18; } 100%{ opacity:0; }
}

.launch{ padding:0; }

.launch__head{ margin-bottom:clamp(1.25rem,2.5vw,1.75rem); }
.launch__title h3{
  font-size:clamp(1.5rem,3.4vw,2.6rem); text-transform:uppercase;
  font-variation-settings:'wdth' 82,'wght' 800;
}
.launch__title p{
  margin:.35rem 0 0; font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.1em; color:var(--mute); text-transform:uppercase;
}

.launch__hero{ display:block; margin-bottom:clamp(.75rem,1.6vw,1.25rem); }
.launch__hero + .launch__herocap{ margin:calc(-1 * clamp(.75rem,1.6vw,1.25rem)) 0 clamp(.75rem,1.6vw,1.25rem); }   /* sits right under the film, then the same gap as between the tiles */

/* youtube facade — click the reticle to load the embed */
.ytembed{ cursor:pointer; }
.ytembed__thumb{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) brightness(.6) contrast(1.05);
  transition:filter .45s var(--ease), transform .55s var(--ease);
}
.ytembed:hover .ytembed__thumb,
.ytembed:focus-within .ytembed__thumb{ filter:grayscale(0) brightness(.82) contrast(1.03); transform:scale(1.02); }
.ytembed__play{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  border:0; cursor:pointer; color:var(--bone);
  background:linear-gradient(180deg, rgba(11,12,10,.22), rgba(11,12,10,.5));
  transition:background .3s var(--ease);
}
.ytembed:hover .ytembed__play{ background:linear-gradient(180deg, rgba(11,12,10,.12), rgba(11,12,10,.4)); }
.ytembed__ring{
  position:relative; width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(216,255,61,.55);
  transition:transform .4s var(--ease), border-color .3s;
}
.ytembed__ring::before{
  content:''; position:absolute; left:50%; top:50%;
  width:0; height:0; margin:-8px 0 0 -5px;
  border-left:14px solid var(--signal);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.ytembed__label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acid);
}
.ytembed:hover .ytembed__ring,
.ytembed__play:focus-visible .ytembed__ring{ transform:scale(1.12); border-color:var(--signal); }
.ytembed:hover{ border-color:var(--line-2); }
.ytembed:hover .slot__id{ color:var(--acid); }
.ytembed.is-playing{ cursor:default; }
.ytembed iframe, .ytembed__player{
  position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3;
}
.ytembed__player{ background:#000; object-fit:contain; }

/* flexible: 2, 3, or 4 assets all lay out cleanly, no fixed slot count */
.launch__assets{
  display:grid; gap:clamp(.75rem,1.6vw,1.25rem);
  grid-template-columns:repeat(auto-fit, minmax(min(150px,100%), 1fr));
}
/* A card with no film leads with one wide tile, then two side by side,
   so the tile that would have been hidden or orphaned on a phone stays. */
.launch__assets--lead{ grid-template-columns:repeat(2,1fr); }
/* a film-less card with four tiles is an even 2 x 2 */
.launch__assets--quad{ grid-template-columns:repeat(2,1fr); }
.launch__assets--lead .asset:nth-child(1){ grid-column:1 / -1; }
.launch__assets--lead .asset:nth-child(1) .slot{ aspect-ratio:16/9; }
.asset{ margin:0; }
.asset .slot{ aspect-ratio:4/3; }
.asset figcaption, .launch__herocap{
  padding:.7rem .1rem 0;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute);
}

/* doorway from a carousel card into its full case study: a green button, and its
   hit area is stretched over the whole card so the card itself is the link.
   The film's play button stays above it so the film still plays in place. */
.launch{ position:relative; }
.launch__more{
  margin-top:clamp(1.1rem,2.2vw,1.5rem);
}
.launch__more::before{ content:''; position:absolute; inset:0; z-index:1; }
.launch__more::after{ display:inline-block; transition:transform .25s var(--ease); }
.launch:hover .launch__more::after, .launch__more:hover::after{ transform:translateX(4px); }
.launch .ytembed, .launch .launch__film{ position:relative; z-index:2; }
.launch:hover .launch__more{ background:var(--signal); border-color:var(--signal); }

/* ── dime carousel (horizontal launches) ──────────────────────── */
.dime-controls{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.75rem 1rem; margin-bottom:clamp(1.25rem,2.5vw,1.75rem);
}
.dime-hint{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); transition:opacity .4s var(--ease);
}
.dime-hint b{ color:var(--acid); font-weight:400; display:inline-block; animation:nudge 1.5s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
.dime-controls.hint-hidden .dime-hint{ opacity:0; }

.dime-nav{ display:flex; align-items:center; gap:1rem; }
.dime-count{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:var(--mute); }
.dime-count b{ color:var(--acid); font-weight:400; }
.dime-arrow{
  width:38px; height:38px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-2); color:var(--bone);
  font-size:17px; line-height:1; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.dime-arrow:hover:not(:disabled){ border-color:var(--acid); color:var(--acid); }
.dime-arrow:disabled{ opacity:.28; cursor:default; }

.dime-track{
  display:flex; align-items:stretch; gap:clamp(1rem,2vw,1.6rem);
  overflow-x:auto; overflow-y:hidden;
  scroll-behavior:auto;
  padding:2rem 0;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.dime-track::-webkit-scrollbar{ display:none; }
.dime-track .launch{
  flex:0 0 min(72%, 760px);
  padding:clamp(1rem,2vw,1.6rem);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  transition:border-color .35s var(--ease), box-shadow .45s var(--ease);
  /* a column, so every card's button can sit on the same line at the bottom */
  display:flex; flex-direction:column;
}
.dime-track .launch > .launch__more{ margin-top:auto; align-self:flex-start; }
.dime-track .launch > .launch__assets{ margin-bottom:clamp(1.1rem,2.2vw,1.5rem); }
.dime-track .launch.is-active{
  border-color:rgba(169,220,59,.45);
  box-shadow:0 0 0 1px rgba(169,220,59,.22), 0 0 26px rgba(169,220,59,.16);
}
.dime-track .slot{ border-radius:10px; }
.dime-track.dragging{ cursor:grabbing; }

/* an uploaded image fills its slot; asset images are click-to-enlarge */
/* Anchor crops to the top. Campaign artwork puts the headline and product up
   there, so losing the bottom of a frame costs far less than losing the top. */
.slot > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 0%; z-index:0;
}
/* Frame on the artwork rather than the canvas. Measured against the Royal
   Blunts announcement: logos sit at 23%, the CANNARILLO name ends at 73%, so
   45% centres that block in the 4/3 tile and drops the sign-off below. */
.focus-mid .slot > img{ object-position:50% 45%; }
/* cursor-reactive media. `transform` is reserved for this: scroll drift owns
   `translate` and the entry reveal owns `scale`, so all three compose. */
.asset .slot > img,
.proj .slot > img,
.media__frame > img{
  cursor:zoom-in;
  transform:translate3d(var(--mx,0px), var(--my,0px), 0) scale(var(--hov,1));
  transition:transform .5s var(--ease);
}
.asset .slot:hover > img,
.proj .slot:hover > img,
.media__frame:hover > img{ --hov:1.06; }
/* the frame answers too, so it reads as an interface responding */
.media__frame, .asset .slot, .proj .slot{
  transition:border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.media__frame:hover, .asset .slot:hover, .proj .slot:hover{
  border-color:var(--acid);
  box-shadow:0 0 0 1px rgba(169,220,59,.16), 0 0 34px -12px rgba(169,220,59,.4);
}
/* the work grid hovers on the card itself, not a link wrapper */
.proj:hover .slot::before,
.proj:hover .slot::after{ opacity:1; transform:translate(0,0); }
.proj:hover .slot{ border-color:var(--line-2); }
.proj:hover .slot__id{ color:var(--acid); }
.asset .slot:has(img) .slot__id{
  background:linear-gradient(180deg, transparent, rgba(11,12,10,.75));
  padding:1.4rem .5rem .35rem; left:0; right:0; bottom:0;
}

/* ── lightbox (click-to-enlarge asset viewer) ─────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1.5rem,5vw,5rem);
  background:rgba(6,7,5,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .32s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.open{ opacity:1; }
.lightbox__stage{
  margin:0; display:flex; flex-direction:column; align-items:center;
  max-width:min(1200px,94vw); max-height:88vh;
}
.lightbox__img{
  max-width:100%; max-height:82vh; object-fit:contain;
  border:1px solid var(--line-2); border-radius:12px;
  box-shadow:0 0 0 1px rgba(169,220,59,.14), 0 40px 90px -25px rgba(0,0,0,.85);
  transform:scale(.92); opacity:0;
  user-select:none; -webkit-user-drag:none;
  transition:transform .34s var(--ease), opacity .18s var(--ease);
}
.lightbox.open .lightbox__img{ transform:scale(1); opacity:1; }
.lightbox__cap{
  margin-top:1rem; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute); text-align:center;
}
.lightbox__close,
.lightbox__nav{
  position:absolute; display:grid; place-items:center;
  background:rgba(11,12,10,.55); border:1px solid var(--line-2); color:var(--bone);
  cursor:pointer; z-index:2; transition:border-color .2s, color .2s, background .2s;
}
.lightbox__close{
  top:clamp(1rem,3vw,2.25rem); right:clamp(1rem,3vw,2.25rem);
  width:46px; height:46px; font-size:16px;
}
.lightbox__nav{
  top:50%; transform:translateY(-50%);
  width:52px; height:52px; font-size:24px; line-height:1;
}
.lightbox__nav--prev{ left:clamp(.75rem,3vw,2.5rem); }
.lightbox__nav--next{ right:clamp(.75rem,3vw,2.5rem); }
.lightbox__close:hover,
.lightbox__nav:hover{ border-color:var(--acid); color:var(--acid); }
.lightbox__nav[hidden]{ display:none; }
.lightbox__count{
  position:absolute; top:clamp(1rem,3vw,2.25rem); left:clamp(1rem,3vw,2.25rem);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--acid); z-index:2;
}
.lightbox__count[hidden]{ display:none; }

/* character row: portrait renders, or a tile that links out to the animation */
.media--char .media__frame{ aspect-ratio:3/4; }
.media--char .media__frame > img{ object-position:center top; }
.media__frame--link{
  display:grid; place-items:center; text-align:center; padding:1rem;
  background:linear-gradient(160deg,var(--panel),var(--carbon));
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone);
  transition:border-color .22s var(--ease), color .22s var(--ease);
}
.trio--chars{ --slide:23%; }           /* portrait tiles: more of them fit in view */
.media__frame--link span::before{ content:'▶'; display:block; margin-bottom:.7rem; font-size:14px; color:var(--acid); }
.media__frame--poster{ display:block; cursor:pointer; transition:border-color .22s var(--ease); }
.media__frame--poster > img{ display:block; width:100%; height:100%; object-fit:cover; filter:brightness(.82); transition:filter .3s var(--ease), transform .5s var(--ease); }
.media__frame--poster:hover{ border-color:var(--acid); }
.media__frame--poster:hover > img{ filter:brightness(1); transform:scale(1.03); }
.media--film .media__frame--poster{ aspect-ratio:16/9; }     /* an Instagram still sits in the same frame as the films beside it */
.media__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:.7em 1.1em; background:rgba(11,12,10,.62); border:1px solid var(--acid); color:var(--acid);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); white-space:nowrap;
}
.media__frame--link i{ font-style:normal; color:var(--acid); display:inline-block; transition:transform .25s var(--ease); }
a.media__frame--link:hover{ border-color:var(--acid); color:var(--acid); }
a.media__frame--link:hover i{ transform:translate(3px,-3px); }
.media__more{ width:100%; color:var(--bone); border-bottom:1px solid var(--line-2); align-self:flex-start; }
.media__more:hover{ color:var(--acid); border-color:var(--acid); }
.media__more i{ font-style:normal; color:var(--acid); }

/* film pop-up: a larger player over the page (see section 4c in main.js) */
.filmbox{
  position:fixed; inset:0; z-index:210;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,4rem);
  background:rgba(6,7,5,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s var(--ease);
}
.filmbox[hidden]{ display:none; }
.filmbox.open{ opacity:1; }
.filmbox__panel{ width:min(1180px,100%); }
.filmbox__stage{ position:relative; aspect-ratio:16/9; background:#000; border:1px solid var(--line-2); }
.filmbox__stage iframe, .filmbox__stage video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.filmbox__cap{
  display:flex; flex-wrap:wrap; gap:.3rem 1rem; margin:.9rem .1rem 0;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
}
.filmbox__cap b{ color:var(--acid); font-weight:400; }
/* an Instagram embed is a portrait player */
.filmbox--tall .filmbox__panel{ width:min(400px,100%); }
.filmbox--tall .filmbox__stage{ aspect-ratio:auto; height:min(76vh,720px); background:#fff; }
.filmbox__out{ color:var(--bone); border-bottom:1px solid var(--line-2); }
.filmbox__out:hover{ color:var(--acid); border-color:var(--acid); }
.filmbox__out[hidden]{ display:none; }
.filmbox__close{
  position:absolute; top:clamp(.75rem,2.5vw,2rem); right:clamp(.75rem,2.5vw,2rem);
  width:46px; height:46px; display:grid; place-items:center; font-size:16px;
  background:rgba(11,12,10,.55); border:1px solid var(--line-2); color:var(--bone); cursor:pointer;
  transition:border-color .2s, color .2s;
}
.filmbox__close:hover{ border-color:var(--acid); color:var(--acid); }

/* ── 03 freelance — work grid, offering list, route to price sheet ── */
#freelanceWork{ margin-bottom:clamp(2.25rem,4.5vw,3.5rem); }
.fl{
  display:grid; gap:clamp(1.5rem,3vw,2.75rem);
  grid-template-columns:1.55fr .95fr; align-items:start;
}
.fl__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.fl__list li{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.1rem;
  padding:clamp(1rem,2vw,1.4rem) .2rem;
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease);
}
.fl__list li:hover{ background:rgba(169,220,59,.035); }
.fl__n{
  grid-row:span 2; font-family:var(--f-mono); font-size:9px; letter-spacing:.16em;
  color:var(--acid); padding-top:.45em;
}
.fl__list h3{
  margin:0; font-size:clamp(1rem,1.5vw,1.22rem);
  font-variation-settings:'wdth' 88,'wght' 700; text-transform:uppercase;
}
.fl__list p{ margin:0; color:var(--mute); font-size:.9rem; max-width:46ch; }

.fl__cta{
  position:relative; padding:clamp(1.25rem,2.4vw,1.75rem);
  border:1px solid var(--line-2); background:var(--panel);
}
.fl__cta-label{
  display:block; margin-bottom:.9rem;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acid);
}
.fl__cta p{ margin:0 0 1.4rem; color:var(--mute); font-size:.9rem; }

/* condensed homepage version: the offering as a 2 x 2, then one button to the full page */
.fl__list--grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(1rem,2.2vw,2rem); }
.fl__list--grid li{ display:block; padding:clamp(.9rem,1.6vw,1.15rem) .2rem; }
.fl__list--grid h3{ margin-bottom:.35rem; }
.fl__list--grid p{ font-size:.85rem; }
/* image slider above the freelance list; an empty frame stands in until pictures are added */
.fl__slider{ margin:0 0 clamp(1.5rem,3vw,2.25rem); }
.fl__slider--empty{
  display:grid; place-items:center; width:100%; box-sizing:border-box; aspect-ratio:21/7; min-height:160px;
  border:1px dashed var(--line-2); color:var(--mute);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
}
/* the endless drift of freelance stills: one fixed height, natural widths, two copies side
   by side. It is a scrolling strip that drifts on its own (see section 3e in main.js), so
   a finger or a mouse can also slide it either way; it loops without a seam. */
.reel{
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  cursor:grab;
}
.reel::-webkit-scrollbar{ display:none; }
.reel.is-dragging{ cursor:grabbing; }
.reel.is-dragging *{ user-select:none; -webkit-user-drag:none; }
.reel__track{ display:flex; width:max-content; }
.reel__tile{
  position:relative; flex:0 0 auto; display:block; line-height:0;
  height:clamp(150px,19vw,250px); margin-right:clamp(.7rem,1.2vw,1rem);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--carbon);
  transition:border-color .25s var(--ease);
}
.reel__tile img{ display:block; height:100%; width:auto; filter:brightness(.9); transition:filter .35s var(--ease); -webkit-user-drag:none; }
.reel__tile:hover{ border-color:var(--acid); }
.reel__tile:hover img{ filter:brightness(1.05); }
.reel__cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem .8rem .6rem; line-height:1.35;
  display:flex; flex-wrap:wrap; gap:.15rem .6rem; align-items:baseline;
  background:linear-gradient(to top, rgba(8,9,7,.82), transparent);
  font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transition:opacity .3s var(--ease);
}
.reel__cap b{ color:var(--acid); font-weight:400; }
.reel__cap i{ font-style:normal; color:var(--bone); opacity:.8; }
.reel__tile:hover .reel__cap, .reel__tile:focus-visible .reel__cap{ opacity:1; }
.fl__go{ margin:clamp(1.5rem,3vw,2.25rem) 0 0; }
.fl__cta--wide{ max-width:44rem; }

/* ── expertise (list) ─────────────────────────────────────────── */
.caps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.caps li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:1rem clamp(1.75rem,5vw,5rem);
  padding:clamp(1.4rem,3vw,2.2rem) 0;
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.caps li:hover{ background:rgba(169,220,59,.035); }
.caps h3{
  font-size:clamp(1.35rem,2.6vw,2.1rem); text-transform:uppercase;
  font-variation-settings:'wdth' 84,'wght' 700;
}
.caps p{ margin:0; color:var(--mute); max-width:52ch; font-size:.92rem; }

.section-eyebrow{
  display:block;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acid);
  margin-bottom:1.1rem;
}

/* ── 03 studio ────────────────────────────────────────────────── */
.studio{
  display:grid; gap:clamp(1.75rem,3.5vw,3.25rem);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr) minmax(0,1fr);
  align-items:start;
}

/* portrait — duotone by default, full colour on hover */
.portrait{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:4/5; background:var(--carbon);
  border:1px solid var(--line);
}
.portrait img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter:grayscale(1) contrast(1.18) brightness(.94);
  transition:filter .55s var(--ease), transform .8s var(--ease);
}
.portrait__tint{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(168deg, var(--signal) 0%, var(--acid) 45%, #4d7a12 100%);
  mix-blend-mode:multiply;
  transition:opacity .55s var(--ease);
}
.portrait::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,12,10,0) 55%, rgba(11,12,10,.65));
  transition:opacity .55s var(--ease);
}
.portrait__brackets{ position:absolute; inset:12px; pointer-events:none; }
.portrait__brackets::before,
.portrait__brackets::after{
  content:''; position:absolute; width:16px; height:16px;
  border:1px solid var(--signal); opacity:0; transition:opacity .4s var(--ease);
}
.portrait__brackets::before{ top:0; left:0; border-right:0; border-bottom:0; }
.portrait__brackets::after{ bottom:0; right:0; border-left:0; border-top:0; }

.portrait figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.85rem 1rem;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
}
.portrait figcaption span{ color:var(--bone); }
.portrait figcaption i{ font-style:normal; color:var(--acid); }

.portrait:hover img,
.portrait:focus-within img{ filter:none; transform:scale(1.02); }
.portrait:hover .portrait__tint,
.portrait:focus-within .portrait__tint{ opacity:0; }
.portrait:hover::after,
.portrait:focus-within::after{ opacity:.55; }
.portrait:hover .portrait__brackets::before,
.portrait:hover .portrait__brackets::after{ opacity:1; }
.portrait:hover figcaption i{ color:var(--signal); }

/* no image yet */
.portrait--empty{
  background:
    repeating-linear-gradient(0deg, rgba(169,220,59,.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(169,220,59,.07) 0 1px, transparent 1px 22px),
    var(--carbon);
}
.portrait--empty .portrait__tint{ display:none; }
.portrait--empty figcaption span::before{ content:'assets/portrait.jpg · '; color:var(--mute); }
.studio__body p{ color:var(--mute); max-width:58ch; }
.lede{
  color:var(--bone)!important;
  font-size:clamp(1.15rem,2.1vw,1.6rem); line-height:1.32;
  font-variation-settings:'wdth' 100,'wght' 500;
  margin-top:0;
}
.toolkit{ border-top:1px solid var(--acid); padding-top:1rem; }
.toolkit__label{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--acid);
}
.toolkit ul{ list-style:none; margin:1.2rem 0 0; padding:0; }

/* toolkit as a character-sheet stat panel: tool, what it does, a level bar */
.toolkit--stats{
  position:relative; padding:1.1rem clamp(1rem,2vw,1.4rem) .6rem;
  border:1px solid var(--line-2); border-top:2px solid var(--acid);
  background:linear-gradient(180deg, rgba(169,220,59,.05), rgba(169,220,59,0) 40%), var(--panel);
}
.toolkit--stats::before, .toolkit--stats::after{            /* corner brackets */
  content:''; position:absolute; width:12px; height:12px; pointer-events:none;
  border:2px solid var(--acid);
}
.toolkit--stats::before{ right:-1px; bottom:-1px; border-top:0; border-left:0; }
.toolkit--stats::after{ left:-1px; bottom:-1px; border-top:0; border-right:0; }
.stat{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
  gap:.25rem clamp(.8rem,1.6vw,1.2rem);
  padding:.95rem 0; border-bottom:1px solid var(--line);
}
.stat:last-child{ border-bottom:0; }
.stat__idx{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--acid); }
.stat__main{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.stat__name{
  font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.05; text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 800; color:var(--bone);
}
.stat__note{
  font-style:normal; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone); opacity:.62;
}

/* ── at a glance: a small status button under the hero opens a see-through summary ── */
.glance-fab{
  position:fixed; z-index:70;
  right:calc(var(--rail) + .9rem); bottom:1.1rem;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem .95rem .7rem .85rem; cursor:pointer;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone);
  background:rgba(14,16,12,.72); border:1px solid var(--line-2); border-radius:12px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  opacity:1; transform:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.glance-fab i{ font-style:normal; color:var(--acid); }
.glance-fab:hover{ border-color:var(--acid); background:rgba(169,220,59,.1); }
.glance-fab__dot{
  width:7px; height:7px; border-radius:50%; background:var(--acid); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(169,220,59,.55); animation:pillPulse 2.2s ease-out infinite;
}
@keyframes pillPulse{ 70%{ box-shadow:0 0 0 7px rgba(169,220,59,0); } 100%{ box-shadow:0 0 0 0 rgba(169,220,59,0); } }
/* away: the work section has been reached; clear: it would sit on top of the drifting keyword strip */
.glance-fab.is-away, .glance-fab.is-clear{ opacity:0; transform:translateY(8px); pointer-events:none; }
html.intro .glance-fab{ visibility:hidden; }
.lite .glance-fab{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(14,16,12,.92); }
.lite .glance-fab__dot{ animation:none; }
@media (prefers-reduced-motion:reduce){ .glance-fab__dot{ animation:none; } }
@media (max-width:600px){
  .glance-fab{ right:.7rem; bottom:.8rem; padding:.6rem .8rem; font-size:9.5px; letter-spacing:.16em; }
}

.glancebox{
  position:fixed; inset:0; z-index:215; display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(6,7,5,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .28s var(--ease);
}
.glancebox[hidden]{ display:none; }
.glancebox.open{ opacity:1; }
.glancebox__panel{
  position:relative; width:min(760px,100%); max-height:90vh; overflow:auto;
  padding:clamp(1.4rem,3vw,2.2rem);
  background:rgba(18,20,16,.66); border:1px solid var(--line-2); border-top:2px solid var(--acid);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transform:translateY(10px); transition:transform .35s var(--ease);
}
.glancebox.open .glancebox__panel{ transform:none; }
.lite .glancebox, .lite .glancebox__panel{ -webkit-backdrop-filter:none; backdrop-filter:none; }
.lite .glancebox__panel{ background:rgba(18,20,16,.94); }
.glancebox__close{
  position:absolute; top:.75rem; right:.75rem; width:36px; height:36px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-2); color:var(--bone); cursor:pointer; font-size:13px;
}
.glancebox__close:hover{ border-color:var(--acid); color:var(--acid); }
.glancebox__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.5rem;
  padding:0 2.6rem .9rem 0; margin-bottom:1.2rem; border-bottom:1px solid var(--line);
}
.glancebox__label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--acid); }
.glancebox__status{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.glancebox__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem clamp(1.2rem,3vw,2rem); margin:0; }
.glancebox__grid dt{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--acid); margin-bottom:.4rem;
}
.glancebox__grid dd{ margin:0; color:var(--bone); opacity:.88; font-size:.98rem; line-height:1.4; }
.glancebox__note{
  margin:1.5rem 0 0; padding:.9rem 1rem .9rem 1.1rem;
  border-left:3px solid var(--acid); background:rgba(169,220,59,.07);
  color:var(--bone); font-size:1.05rem; line-height:1.45; max-width:none;
  font-variation-settings:'wdth' 100,'wght' 500;
}
.glancebox__acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.2rem; }
@media (max-width:560px){
  .glancebox__grid{ grid-template-columns:1fr; gap:.95rem; }
  .glancebox__grid dd{ font-size:.9rem; }
  .glancebox__note{ margin-top:1.1rem; padding:.75rem .85rem .75rem .9rem; font-size:.94rem; }
  .glancebox__acts{ margin-top:1rem; }
}

/* ── 04 rates ─────────────────────────────────────────────────── */
.rates{ display:grid; gap:clamp(.75rem,1.6vw,1.25rem); grid-template-columns:repeat(2,1fr); }
.rate{
  position:relative; padding:clamp(1.5rem,3vw,2.4rem);
  background:var(--panel); border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.rate::before{
  content:''; position:absolute; top:0; left:0; width:0; height:2px;
  background:var(--acid); transition:width .45s var(--ease);
}
.rate:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.rate:hover::before{ width:100%; }
.rate h3{
  color:var(--acid); font-size:clamp(1.15rem,2vw,1.55rem); text-transform:uppercase;
  font-variation-settings:'wdth' 80,'wght' 800;
}
.rate__price{
  margin:.9rem 0 0; font-size:clamp(1.2rem,2vw,1.5rem);
  font-variation-settings:'wdth' 100,'wght' 700; text-transform:uppercase;
  letter-spacing:-.01em;
}
.rate__price b{ font-size:1.35em; font-variation-settings:'wdth' 100,'wght' 800; }
.rate__price span{ font-family:var(--f-mono); font-size:.5em; color:var(--mute); letter-spacing:.12em; }
.rate__what{ margin:1rem 0 0; font-size:.95rem; }
.rate__fine{
  margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:9.5px; line-height:1.75;
  color:var(--mute); letter-spacing:.02em;
}

/* rates page header */
.sheet{
  padding:clamp(3.5rem,9vw,7rem) var(--pad) clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--line);
}
.backlink{
  display:inline-block; margin-bottom:clamp(2rem,5vw,3.5rem);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute); transition:color .2s;
}
.backlink:hover{ color:var(--acid); }
.sheet__title{
  font-size:clamp(2.6rem,9vw,7rem); text-transform:uppercase;
  font-variation-settings:'wdth' 78,'wght' 900; letter-spacing:-.035em;
}
.sheet__sub{
  margin:1.5rem 0 0; max-width:52ch; color:var(--mute);
  font-size:clamp(.95rem,1.6vw,1.1rem);
}
/* a way in for someone who wants to see finished work before reading the rates */
.sheet__work{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem;
  margin-top:clamp(1.4rem,3vw,2rem);
}
.sheet__work-note{ color:var(--mute); font-size:.92rem; max-width:40ch; }
.sheet__meta{
  display:flex; flex-wrap:wrap; gap:.5rem clamp(1rem,3vw,2.5rem);
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acid);
}
.rate__i{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.2em;
  color:var(--mute); display:block; margin-bottom:1rem;
}
/* good to know: the practical terms, readable; then the legal ones as quiet small print */
.terms{
  display:grid; gap:clamp(1.4rem,3vw,2.2rem) clamp(1.5rem,4vw,4rem);
  grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;
}
.term h3{
  margin:0 0 .6rem; font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acid); font-weight:400;
}
.term p{ margin:0 0 .8rem; color:var(--mute); font-size:.95rem; line-height:1.55; max-width:56ch; }
.term p:last-child{ margin-bottom:0; }
.term:nth-child(2){ grid-row:span 2; }                      /* revisions & scope is the long one */
.fineprint{
  margin-top:clamp(2rem,5vw,3.5rem); padding-top:1.1rem; border-top:1px solid var(--line);
}
.fineprint__label{
  display:block; margin-bottom:1rem; font-family:var(--f-mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mute); opacity:.75;
}
.fineprint__grid{
  display:grid; gap:1.1rem clamp(1.2rem,3vw,2.4rem); grid-template-columns:repeat(3,minmax(0,1fr));
}
.fineprint h4{
  margin:0 0 .35rem; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute); font-weight:400; opacity:.85;
}
.fineprint p{ margin:0; color:var(--mute); opacity:.72; font-size:.78rem; line-height:1.5; }
@media (max-width:900px){
  .terms{ grid-template-columns:1fr; }
  .term:nth-child(2){ grid-row:auto; }
  .fineprint__grid{ grid-template-columns:1fr; }
}
.rates__foot{
  margin:clamp(2rem,4vw,3rem) 0 0; padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute); text-align:center;
}

/* ── 05 contact ───────────────────────────────────────────────── */
.contact{
  position:relative; overflow:hidden;
  padding:clamp(5rem,12vw,10rem) var(--pad) clamp(6rem,13vw,11rem);
  text-align:center;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(169,220,59,.11), transparent 70%),
    var(--void);
}

/* watermark — one oversized tag behind the closing section, cropped by the
   section edge like the price-sheet flyer. Scales with the viewport. */
.watermark{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:-4%;
  width:min(96%, 1200px);
  aspect-ratio:978 / 596;
  transform:translateX(-50%);
  background:url('../assets/logo.webp') no-repeat center / 100% auto;
  opacity:.07;
}
.contact > *:not(.watermark){ position:relative; z-index:1; }
.contact__eyebrow{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acid);
}
.contact__title{
  margin:1.2rem 0 0; font-size:clamp(3rem,12vw,9rem); text-transform:uppercase;
  font-variation-settings:'wdth' 80,'wght' 900; letter-spacing:-.04em;
}
.contact__sub{
  margin:1.4rem auto 0; max-width:44ch; color:var(--mute); font-size:.95rem;
}
.contact__aside{
  margin:1.6rem 0 0;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}
.contact__aside a{ color:var(--acid); border-bottom:1px solid transparent; transition:border-color .2s; white-space:nowrap; }
@media (max-width:600px){
  /* the question on its own line, the link under it, so neither wraps awkwardly */
  .contact__aside{ display:flex; flex-direction:column; align-items:center; gap:.55rem; }
}
.contact__aside a:hover{ border-color:var(--acid); }

.contact__mail{
  display:inline-block; margin-top:2.4rem;
  font-size:clamp(.95rem,2.6vw,1.7rem);
  font-variation-settings:'wdth' 90,'wght' 600;
  color:var(--acid); border-bottom:1px solid var(--line-2);
  padding-bottom:.25em; transition:border-color .25s, color .25s;
  word-break:break-word;
}
.contact__mail:hover{ color:var(--signal); border-color:var(--signal); }
.contact__links{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem clamp(1rem,3vw,2.5rem); margin:3rem 0 0; padding:0;
}
.contact__links a{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute); transition:color .2s;
}
.contact__links a:hover{ color:var(--bone); }
.contact__status{
  display:flex; align-items:center; justify-content:center; margin-top:clamp(2.5rem,6vw,4rem);   /* its own line, never beside the email */
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  text-align:center; text-wrap:balance;
}


/* ── footer ───────────────────────────────────────────────────── */
.footer{
  position:relative; z-index:10; margin:0 var(--rail);
  display:flex; justify-content:space-between; align-items:flex-start; gap:1.2rem 1.5rem;
  padding:1.5rem var(--pad);
  border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}
/* the three lines stack, the middle one in between, on every screen; Connect sits level with them on the right */
.footer__text{ display:flex; flex-direction:column; gap:.7rem; flex:1 1 auto; min-width:0; }
.footer__mid{ color:var(--acid); }
.footer__connect{ display:flex; flex-direction:column; align-items:flex-end; gap:.65rem; margin-left:auto; }
.footer__connect-label{ font-size:9px; letter-spacing:.24em; }
.footer__connect-links{ display:flex; gap:.9rem; align-items:center; }
.footer__connect a{ color:var(--bone); transition:color .2s var(--ease), transform .25s var(--ease); display:inline-flex; }
.footer__connect a:hover{ color:var(--acid); transform:translateY(-2px); }

/* ── scroll reveal ────────────────────────────────────────────── */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in{ opacity:1; transform:none; }

/* section headings surface + glitch in — the content "digitizes upward" */
.head[data-reveal],
.section-eyebrow[data-reveal]{
  transform:translateY(42px); filter:blur(8px);
  transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
}
.head[data-reveal].in,
.section-eyebrow[data-reveal].in{ transform:none; filter:blur(0); }

/* ── case study pages ─────────────────────────────────────────── */
.case-hero{
  padding:clamp(4.5rem,9vh,7rem) var(--pad) clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid var(--line);
}
.case-hero__eyebrow{
  display:block; margin-bottom:1rem;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acid);
}
/* collaboration lockup, sized off the eyebrow rather than the headline */
.case-hero__lockup{
  display:block; width:min(100%, 620px); height:auto;
  margin:clamp(.4rem,1vw,.8rem) 0 clamp(1rem, 2.2vw, 1.6rem);
  filter:drop-shadow(0 0 22px rgba(255,190,60,.22));
}
.case-hero__title{
  margin:0 0 1rem;
  font-size:clamp(2.4rem,8vw,6rem); line-height:.92; text-transform:uppercase;
  font-variation-settings:'wdth' 88,'wght' 800; letter-spacing:-.03em;
}
.case-hero__sub{ margin:0; max-width:56ch; color:var(--mute); font-size:clamp(.98rem,1.5vw,1.15rem); line-height:1.5; }

.case-meta{
  display:grid; gap:clamp(.9rem,2vw,1.5rem);
  grid-template-columns:repeat(4,1fr);
  margin:clamp(2rem,4vw,3rem) 0 0; padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.case-meta dt{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--line-2); margin-bottom:.5rem;
}
.case-meta dd{ margin:0; font-size:.9rem; color:var(--bone); }

.case-film{ padding-top:clamp(2rem,4vw,3rem); }
.case-film .launch__hero{ max-width:1100px; margin-inline:auto; }

.case-cols{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:1.2fr 1fr; align-items:start;
}
.case-col__label{
  display:block; margin-bottom:1.1rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acid);
}
.case-col p{ margin:0 0 1rem; color:var(--mute); max-width:54ch; line-height:1.6; }
.case-col p:last-child{ margin-bottom:0; }
.case-list{ list-style:none; margin:0; padding:0; }
.case-list li{
  position:relative; padding:.55rem 0 .55rem 1.5rem;
  color:var(--mute); font-size:.92rem; border-bottom:1px solid var(--line);
}
.case-list li::before{
  content:'▸'; position:absolute; left:0; top:.55rem; color:var(--acid);
}

/* the pipeline walkthrough: one block per stage */
.stages{ list-style:none; margin:0; padding:0; }
.stage{
  padding:clamp(1.75rem,3.5vw,2.75rem) 0;
  border-top:1px solid var(--line);
}
.stage:first-child{ border-top:0; padding-top:0; }
.stage__mark{ display:flex; align-items:baseline; gap:1.1rem; margin-bottom:.7rem; }
.stage__n{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--acid);
}
.stage__mark h3{
  margin:0; font-size:clamp(1.15rem,2.2vw,1.6rem);
  font-variation-settings:'wdth' 88,'wght' 700; text-transform:uppercase;
}
.stage__note{
  margin:0 0 clamp(1.25rem,2.5vw,1.75rem); padding-left:calc(1.1rem + 2ch);
  color:var(--mute); max-width:62ch; font-size:.92rem; line-height:1.6;
}

/* ── reusable case-study layout system ───────────────────────────
   Shared by every project page. Rhythm comes from mixing these:
     .case-lede      readable-width intro copy
     .media          one figure (frame + mono caption)
     .media--cine    full-bleed-ish cinematic hero
     .duo / .trio / .quad    two-, three-, and four-up media rows
     .feature        asymmetric: one dominant + two stacked
     .board          flat production artwork on a neutral panel
     .chapter        full-width transition into a new campaign chapter
     .owned          condensed ownership list
   ────────────────────────────────────────────────────────────── */

.case-lede{
  max-width:62ch; margin:0 0 clamp(1.75rem,3.5vw,2.75rem);
  color:var(--mute); font-size:clamp(.98rem,1.4vw,1.1rem); line-height:1.65;
}
.case-lede + .case-lede{ margin-top:-.9rem; }
.case-lede strong{ color:var(--bone); font-weight:400; }

/* a single media figure */
.media{ margin:0; }
.media__frame{
  position:relative; overflow:hidden;
  border:1px solid var(--line); background:var(--carbon);
}
.media__frame > img,
.media__frame > video{
  display:block; width:100%; height:100%; object-fit:cover;
}
/* a looping clip sits on top of its still picture: the picture gives the frame its shape,
   and the clip fades in once it is actually playing */
.media__frame--loop > video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .35s var(--ease); background:transparent;
}
.media__frame--loop > video.is-live{ opacity:1; }
.media__frame--contain > img, .media__frame--contain > video{ object-fit:contain; background:var(--carbon); }
.media__frame--loop[data-popup]{ cursor:zoom-in; }
.media__cap{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:baseline;
  padding:.7rem .1rem 0;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute);
}
.media__cap b{ color:var(--acid); font-weight:400; }
.media--cine .media__frame{ aspect-ratio:16/9; }
.media--wide .media__frame{ aspect-ratio:21/9; }
.media--tall .media__frame{ aspect-ratio:4/5; }
.media--square .media__frame{ aspect-ratio:1/1; }

/* media rows */
.duo, .trio, .quad{ display:grid; gap:clamp(.85rem,1.8vw,1.4rem); }
/* grid children default to min-width:auto, which lets an aspect-ratio'd frame
   push its track wider than the container. Let them shrink. */
.duo > *, .trio > *, .quad > *, .feature > *, .feature__side > *{ min-width:0; }
.duo{ grid-template-columns:repeat(2,1fr); }
.trio{ grid-template-columns:repeat(3,1fr); }

/* "natural" shape: each picture keeps its own proportions (a tall sign stays tall) */
.trio--slide .media:not(.media--cine):not(.media--wide):not(.media--tall):not(.media--square):not(.media--char) .media__frame{ aspect-ratio:auto; }
.trio--slide .media:not(.media--cine):not(.media--wide):not(.media--tall):not(.media--square):not(.media--char) .media__frame > img{ position:static; width:100%; height:auto; }
.trio--slide{ align-items:flex-start; }

/* ── sliders: a row of pictures that slides sideways instead of sitting four across ──
   One large picture with the next peeking in, so a long row reads as a sequence with
   a clear start and end, not a wall. Same behaviour on every screen. */
.quad, .trio--slide{
  display:flex; gap:clamp(.7rem,1.4vw,1.1rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.quad::-webkit-scrollbar, .trio--slide::-webkit-scrollbar{ display:none; }
.quad > *, .trio--slide > *{ flex:0 0 var(--slide,36%); scroll-snap-align:start; min-width:0; }
.quad.is-dragging, .trio--slide.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.quad.is-dragging *, .trio--slide.is-dragging *{ user-select:none; -webkit-user-drag:none; }
.slider__bar{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-top:.9rem; }
.slider__bar[hidden]{ display:none; }
.quad__dots{ display:flex; justify-content:center; gap:.45rem; }
.quad__dots i{
  width:6px; height:6px; border-radius:50%;
  background:var(--line-2); transition:background .25s var(--ease), transform .25s var(--ease);
}
.quad__dots i.on{ background:var(--acid); transform:scale(1.25); }
.slider__btn{
  width:36px; height:36px; display:grid; place-items:center; font-size:15px; line-height:1;
  background:transparent; border:1px solid var(--line-2); color:var(--bone); cursor:pointer;
  transition:border-color .2s, color .2s, opacity .2s;
}
.slider__btn:hover:not(:disabled){ border-color:var(--acid); color:var(--acid); }
.slider__btn:disabled{ opacity:.35; cursor:default; }
.duo--offset{ grid-template-columns:1.35fr 1fr; align-items:start; }

/* asymmetric feature: one dominant image, two stacked beside it */
.feature{
  display:grid; gap:clamp(.85rem,1.8vw,1.4rem);
  grid-template-columns:1.6fr 1fr; align-items:stretch;
}
.feature__side{ display:grid; gap:clamp(.85rem,1.8vw,1.4rem); align-content:start; }
/* height drives this panel, so the inherited .slot ratio must not set width */
.feature__main .media__frame{ aspect-ratio:auto; height:100%; min-height:min(58vh,520px); }

/* stack spacing inside a section */
.stack > * + *{ margin-top:clamp(.85rem,1.8vw,1.4rem); }
.stack--loose > * + *{ margin-top:clamp(1.75rem,3.5vw,2.75rem); }

/* asset board: flat production artwork, never cropped */
.board .media__frame{
  display:grid; place-items:center;
  padding:clamp(1rem,2.5vw,2.25rem);
  aspect-ratio:16/10;
}
.board .media__frame > img{
  width:100%; height:100%; object-fit:contain;   /* dielines stay whole */
}
.board--light .media__frame{ background:#EDE6D8; border-color:rgba(0,0,0,.25); }
.board--dark  .media__frame{ background:#141613; border-color:var(--line-2); }
.board--tall .media__frame{ aspect-ratio:3/4; }

/* full-width chapter transition */
.chapter{
  position:relative; padding:clamp(4rem,9vw,7.5rem) var(--pad);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  background:
    repeating-linear-gradient(0deg, rgba(169,220,59,.03) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, rgba(23,26,20,.85), rgba(11,12,10,.4));
}
/* the expansion imagery sits behind the type, drifting at its own rate */
.chapter{ overflow:hidden; }
.chapter__bg{
  position:absolute; inset:-12% -5% -12% -5%; z-index:0;
  pointer-events:none;
}
.chapter__bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.2;
  mask-image:linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
}
/* scrim so the chapter copy stays readable over the imagery */
.chapter__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,12,10,.92) 0%, rgba(11,12,10,.72) 45%, rgba(11,12,10,.35) 100%);
}
.chapter__inner{ position:relative; z-index:1; }
.chapter__inner .scan{ max-width:460px; }

.chapter__eyebrow{
  display:block; margin-bottom:1.1rem;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--acid);
}
.chapter__title{
  margin:0 0 .6rem; font-size:clamp(2.1rem,7vw,5.25rem); line-height:.94;
  text-transform:uppercase; font-variation-settings:'wdth' 84,'wght' 800;
  letter-spacing:-.03em;
}
.chapter__credit{
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  font-family:var(--f-mono); font-size:clamp(10px,1.4vw,12px);
  letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
}
.chapter__body{ max-width:60ch; margin:0; color:var(--mute); line-height:1.65; }

/* condensed ownership list: stays short on desktop */
.owned{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 clamp(1.25rem,3vw,2.5rem);
  border-top:1px solid var(--line);
}
.owned li{
  display:flex; align-items:baseline; gap:.85rem;
  padding:.75rem .1rem; border-bottom:1px solid var(--line);
  color:var(--mute); font-size:.9rem;
}
.owned li::before{
  content:'▸'; color:var(--acid); font-size:.8em;
}

/* subsection header inside a larger section */
.sub{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin:0 0 .9rem; padding-bottom:.7rem; border-bottom:1px solid var(--line);
}
.sub h3{
  margin:0; font-family:var(--f-mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acid); font-weight:400;
}
.sub p{ margin:0; color:var(--mute); font-size:.88rem; max-width:52ch; }
/* one label column, so "Digital" and "Print & Retail" text starts on the same line */
@media (min-width:601px){
  .sub h3{ flex:0 0 auto; min-width:9.5rem; white-space:nowrap; }   /* a longer title grows to stay on one line */
}

/* prev / next at the foot of a case */
.case-next{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.case-next__link{
  display:block; padding:clamp(1.75rem,4vw,3rem) var(--pad);
  transition:background .3s var(--ease);
}
.case-next__link + .case-next__link{ border-left:1px solid var(--line); }
.case-next__link:hover{ background:rgba(169,220,59,.05); }
.case-next__label{
  display:block; margin-bottom:.7rem;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acid);
}
.case-next__title{
  display:block; font-size:clamp(1.2rem,2.6vw,1.9rem);
  font-variation-settings:'wdth' 88,'wght' 700; text-transform:uppercase; color:var(--bone);
  transition:color .25s;
}
.case-next__link:hover .case-next__title{ color:var(--acid); }
.case-next__link--alt .case-next__title{ color:var(--mute); }

/* ── motion primitives ──────────────────────────────────────────
   JS writes CSS variables only; everything here is transform/opacity
   so it stays on the compositor. See js/main.js §4c.
   ─────────────────────────────────────────────────────────────── */

/* media drifting inside its own crop. The image is grown by twice the
   travel and offset up by one travel, so it can move either way without
   ever exposing an edge. `top` is set once, never animated. */
/* NOTE: these use the independent `translate` / `scale` properties rather
   than `transform`, so scroll drift, entry scale, and the existing hover
   zoom (which owns `transform`) compose instead of overwriting each other
   and can carry different transitions. */
[data-parallax] .slot{ overflow:hidden; }
[data-parallax] .slot > img{
  /* +4px absorbs sub-pixel rounding on fractional frame heights, so the
     image edge can never pull inside the frame at full travel */
  height:calc(100% + (var(--par-travel, 24px) * 2) + 4px);
  top:calc((var(--par-travel, 24px) * -1) - 2px);
  translate:0 var(--par-y, 0px);   /* per frame, so never transitioned */
}
[data-parallax].in-view .slot > img{ will-change:translate; }
/* boards show flat artwork whole: never crop a dieline to make it drift */
[data-parallax].board .slot > img{ height:100%; top:0; translate:none; }

/* an element riding past the page at its own rate */
[data-rise]{ translate:0 var(--rise-y, 0px); }
[data-rise].in-view{ will-change:translate; }

/* settle from 1.03 to 1.00 on first entry */
[data-scale-in] .slot > img,
[data-scale-in] > img{
  scale:1.07;
  /* both, or this shorthand would drop the cursor-lean transition */
  transition:scale 1.4s var(--ease), transform .5s var(--ease);
}
[data-scale-in].is-settled .slot > img,
[data-scale-in].is-settled > img{ scale:1; }

/* ── the brief: context in a few seconds, then into the work ──── */
.brief{ padding-block:clamp(2.25rem,4vw,3.25rem); }
.brief .head{ margin-bottom:clamp(1rem,2vw,1.5rem); }
.brief .case-lede{
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
  max-width:64ch; font-size:clamp(1rem,1.5vw,1.18rem);
}
.brief__mobile-copy{ display:none; }
.brief__label{
  display:block; margin-bottom:.85rem;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acid);
}
/* responsibilities as readout chips, not full-width rows */
.chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.chips li{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone);
  border:1px solid var(--line-2); padding:.6em .85em;
  background:rgba(169,220,59,.05);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.chips li:hover{ border-color:var(--acid); color:var(--acid); }

/* case-study hero: label, title, intro arrive in sequence */
.case-hero__intro{ display:block; }

/* 3D development: pinned index beside the passes scrolling past it */
.devlab{
  display:grid; gap:clamp(1.5rem,3.5vw,3rem);
  grid-template-columns:minmax(180px, 240px) 1fr; align-items:start;
}
.devlab__label{
  display:block; margin-bottom:1.1rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acid);
}
.devlab__index{ list-style:none; margin:0; padding:0; }
.devlab__index li{
  display:flex; gap:.75rem; align-items:baseline;
  padding:.5rem 0;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--line-2);
  transition:color .4s var(--ease);
}
.devlab__index li i{ font-style:normal; color:var(--acid); opacity:.5; }
.devlab .scan{ margin-top:1.2rem; }
/* the second item of a pair sits lower, so the row reads as layered */
.devlab__drop{ margin-top:clamp(1.5rem,5vw,3.5rem); }

/* influencer box: the open reveal holds while components pass beside it */
.unbox{
  display:grid; gap:clamp(1rem,2.5vw,2rem);
  grid-template-columns:1.25fr .75fr; align-items:start;
}
.unbox__parts{ display:grid; gap:clamp(1rem,2.5vw,2rem); }

/* card hover: the frame responds, the media does not tilt or float */
.dime-track .launch{
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.dime-track .launch:hover{ border-color:var(--line-2); }
.dime-track .launch:hover .launch__title h3{ color:var(--bone); }
.launch__title h3{ transition:color .3s var(--ease); }

/* sticky column that holds while media scrolls beside it */
.sticky-col{
  position:sticky; top:clamp(5rem, 12vh, 8rem);
  align-self:start;
}

/* a progress line that fills as its section is read */
.scan{
  position:relative; height:1px; background:var(--line);
  margin:clamp(1.5rem,3vw,2.25rem) 0 0; overflow:hidden;
}
.scan::after{
  content:''; position:absolute; inset:0 auto 0 0; width:100%;
  background:linear-gradient(90deg, var(--acid), rgba(169,220,59,0));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.4s var(--ease);
}
.scan.in::after{ transform:scaleX(1); }

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width:900px){
  :root{ --rail:0px; }
  .rail{ display:none; }
  .work{ grid-template-columns:repeat(2,1fr); }
  .proj,.proj--wide{ grid-column:span 2; }
  .proj--wide .slot{ aspect-ratio:16/9; }
  .launch__assets{ grid-template-columns:repeat(2,1fr); }
  .dime-track .launch{ flex-basis:82%; }
  .caps li{ grid-template-columns:1fr; }
  .caps p{ grid-column:1; }
  .studio{ grid-template-columns:1fr; }
  .portrait{ max-width:320px; }
  .rates{ grid-template-columns:1fr; }
  .head{ grid-template-columns:1fr; }
  .fl{ grid-template-columns:1fr; }
  .case-cols{ grid-template-columns:1fr; }
  .case-meta{ grid-template-columns:repeat(2,1fr); }
  .head__num{ padding:0; }
  .head__note{ grid-column:1; }
  /* case-study system: unwind the asymmetric arrangements */
  .feature{ grid-template-columns:1fr; }
  .feature__main .media__frame{ min-height:0; height:auto; aspect-ratio:16/9; }
  .feature__side{ grid-template-columns:repeat(2,1fr); }
  .devlab{ grid-template-columns:1fr; }
  .devlab__drop{ margin-top:0; }
  .unbox{ grid-template-columns:1fr; }
  .unbox__parts{ grid-template-columns:repeat(3,1fr); }
  .duo--offset{ grid-template-columns:1fr; }
  .owned{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .brief__desktop-copy{ display:none; }
  .brief .brief__mobile-copy{ display:block; margin-top:0; }
  /* drop backdrop-filter so the fixed overlay anchors to the viewport, not the bar */
  .topbar{ padding:.75rem 1.1rem; -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(11,12,10,.92); }
  .mark{ position:relative; z-index:2; }
  .nav-toggle{ display:flex; position:relative; z-index:2; }

  /* dimmed backdrop — the page "pauses" behind the menu */
  .nav{
    position:fixed; inset:0; z-index:1;
    display:flex; align-items:center; justify-content:center; padding:1.5rem;
    background:rgba(6,7,5,.72); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
  }
  .nav.open{ opacity:1; visibility:visible; }

  /* the pause-menu panel */
  .nav__panel{
    display:flex; flex-direction:column; position:relative;
    width:min(330px, 100%); padding:1.15rem 1.15rem 1.2rem;
    border:1px solid var(--line-2);
    background:
      repeating-linear-gradient(0deg, rgba(169,220,59,.028) 0 2px, transparent 2px 4px),
      var(--panel);
    box-shadow:0 0 0 1px rgba(169,220,59,.08), 0 30px 70px -20px rgba(0,0,0,.85);
  }
  .nav.open .nav__panel{ animation:menuIn .42s var(--ease) both; }
  /* acid corner brackets */
  .nav__panel::before, .nav__panel::after{
    content:''; position:absolute; width:14px; height:14px; border:1px solid var(--acid);
  }
  .nav__panel::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
  .nav__panel::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

  .nav__head{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:.75rem; margin-bottom:.25rem; border-bottom:1px solid var(--line);
    font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  }
  .nav__title{ display:block; color:var(--acid); }
  .nav__coord{ display:block; color:var(--mute); }

  .nav a{
    display:flex; align-items:center; gap:.85em;
    padding:.8rem .15rem; border-bottom:1px solid var(--line);
    font-family:var(--f-display); font-size:1.05rem; letter-spacing:.04em;
    font-variation-settings:'wdth' 92,'wght' 600; text-transform:uppercase; color:var(--bone);
  }
  .nav a i{
    font-family:var(--f-mono); font-size:10px; letter-spacing:.05em; color:var(--acid);
    min-width:1.7em;
  }
  .nav a::after{
    content:'→'; margin-left:auto; color:var(--line-2); font-size:.85em;
    transition:color .2s var(--ease), transform .2s var(--ease);
  }
  .nav a:hover, .nav a:active{ color:var(--acid); }
  .nav a:hover::after, .nav a:active::after{ color:var(--acid); transform:translateX(4px); }

  .nav__cta{
    margin-top:1rem; justify-content:center; gap:.5em;
    border:1px solid var(--acid); color:var(--acid)!important;
    font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
    padding:.9em 1em; text-transform:uppercase;
  }
  .nav__cta::after{ content:none; }
  .nav__cta:hover, .nav__cta:active{ background:var(--acid); color:#0B0C0A!important; }

  .nav__foot{
    display:flex; justify-content:space-between; margin-top:.9rem;
    font-family:var(--f-mono); font-size:8px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--mute);
  }
  .nav__foot span{ display:block; }

  .hero__name{ letter-spacing:-.03em; }
  .scroll-glow{ height:115px; }

  /* three preview tiles leave an orphan on a phone, so show an even pair.
     The film above already carries the 3D render, so the packaging tile is
     the one to drop: launch assets and the expansion say something new. */
  .launch__assets{ grid-template-columns:repeat(2,1fr); }
  .launch__assets .asset:nth-child(1){ display:none; }
  /* a two-tile row is already even, so it keeps both */
  .launch__assets--pair .asset:nth-child(1),
  .launch__assets--quad .asset:nth-child(1),
  .launch__assets--lead .asset:nth-child(1){ display:block; }
  .hire__grid{ grid-template-columns:1fr; }
  .case-meta{ grid-template-columns:1fr; gap:1rem; }
  .case-next{ grid-template-columns:1fr; }
  .case-next__link + .case-next__link{ border-left:0; border-top:1px solid var(--line); }
  .stage__note{ padding-left:0; }
  /* case-study system: single column, artwork stays uncropped */
  .feature__side{ grid-template-columns:1fr; }
  .media--wide .media__frame{ aspect-ratio:16/9; }
  /* after --wide on purpose: flat artwork needs the extra height on a phone */
  .board .media__frame{ padding:.9rem; aspect-ratio:4/3; }

  /* a three-up row keeps its desktop shape on a phone: three across, smaller,
     tap to enlarge. Stacked, each image filled a whole screen and the next
     section was several swipes away. */
  .trio{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
  .trio .media--wide .media__frame,
  .trio .media--cine .media__frame{ aspect-ratio:4/5; }          /* a thin sliver at a third of the width */
  .trio .media--tall .media__frame{ aspect-ratio:4/5; }
  .trio .media--square .media__frame{ aspect-ratio:1/1; }
  .trio .board .media__frame{ padding:.3rem; }                   /* keep the dieline whole, less margin */
  .trio .media__cap{ font-size:8.5px; letter-spacing:.05em; padding-top:.4rem; gap:.1rem .35rem; }

  /* the same for a two-up row: two across like desktop (the wider-first
     "offset" pairs keep their proportions too) instead of two full-width stacks */
  .duo{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
  .duo--offset{ grid-template-columns:1.35fr 1fr; }
  .duo .media--wide .media__frame,
  .duo .media--cine .media__frame,
  .duo .media--square .media__frame{ aspect-ratio:1/1; }
  .duo .media--tall .media__frame{ aspect-ratio:4/5; }
  .duo .board .media__frame{ padding:.3rem; aspect-ratio:4/5; }  /* tall artwork stays whole beside a wide one */
  .duo .media__cap{ font-size:8.5px; letter-spacing:.05em; padding-top:.4rem; gap:.1rem .35rem; }

  /* sliders on a phone: run edge to edge, one large picture with the next peeking in;
     swipe instead of arrows. Pictures keep their normal shapes (the rules above). */
  .quad, .trio--slide{
    gap:.7rem;
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad); scroll-padding-inline:var(--pad);
  }
  .quad > *, .trio--slide > *{ flex-basis:76%; }
  .trio--slide .media--cine .media__frame{ aspect-ratio:16/9; }   /* keep wide pictures wide at this size */
  .trio--slide .media--wide .media__frame{ aspect-ratio:21/9; }
  .trio--slide .media__cap{ font-size:10px; letter-spacing:.08em; }
  .slider__btn{ display:none; }
  .slider__bar{ margin-top:.8rem; }

  /* the "Beyond the frame" list: same four rows, less air between them */
  #expertise .head{ margin-bottom:0; border-bottom:0; }          /* the list's own top rule is the divider */
  .caps li{ gap:.4rem; padding:1.05rem 0; }
  .caps h3{ font-size:1.15rem; }
  .caps p{ font-size:.85rem; line-height:1.5; }
  .chapter{ padding:clamp(2.75rem,12vw,4rem) var(--pad); }
  .sub{ gap:.35rem; }
  .fl__list--grid{ grid-template-columns:1fr; }
  .fl__go .btn{ width:100%; justify-content:center; }
  /* the global .92 line-height is for big display headings; a small label that
     wraps on a narrow phone needs room between its lines (phones only, so the
     desktop rows keep exactly the height they had) */
  .sub h3{ line-height:1.5; }

  /* motion on mobile: no pinning. Travel is halved in JS (sizeTravel), which
     also updates --par-travel, so the oversize below stays correct. */
  .sticky-col{ position:static; }
}

/* glitch-in for the pause menu */
@keyframes menuIn{
  0%{ opacity:0; transform:translateY(12px); clip-path:inset(0 0 12% 0); }
  50%{ opacity:1; clip-path:inset(0 0 0 0); }
  56%{ transform:translateX(-3px); }
  62%{ transform:translateX(3px); }
  68%{ transform:translateX(-1px); }
  100%{ opacity:1; transform:none; }
}

@media (hover:none){
  .cursor-trail{ display:none; }
  /* no hover to develop the portrait on touch, so show it in colour already */
  .portrait img{ filter:none; }
  .portrait__tint{ opacity:0; }
  .portrait figcaption i{ display:none; }
}

@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-reveal]{ opacity:1; transform:none; filter:none; }

  /* motion system off: nothing offset, nothing scaled, nothing pinned */
  [data-parallax] .slot > img,
  [data-scale-in] .slot > img,
  [data-scale-in] > img{
    height:100%!important; top:0!important;
    translate:none!important; scale:none!important;
  }
  [data-rise]{ translate:none!important; }
  /* no cursor lean, no hover zoom */
  .asset .slot > img, .proj .slot > img, .media__frame > img{ transform:none!important; }
  .sticky-col{ position:static!important; }
  .scan::after{ transform:scaleX(1); }
  [data-stagger] > *{ opacity:1!important; transform:none!important; }
}

/* ── ?perf diagnostic: switches to isolate what costs frames ── */
.perf-off-aurora .aurora{ display:none!important; }
.perf-off-trail .cursor-trail{ display:none!important; }
.perf-off-blur .topbar{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
.perf-off-glow .scroll-glow{ display:none!important; }

/* ── intro: a short dark veil while the page settles; the real MATEO sits above it ──
   Added to <html> by a tiny inline script on a first visit to the homepage. The
   veil lives inside <main> so the MATEO title (also inside it) can sit above it.
   The animations are a safety net: if the script never clears it, everything
   still comes back by itself after 4s. */
html.intro main::before{
  content:''; position:fixed; inset:0; z-index:250; background:#0B0C0A;
  transition:opacity var(--intro-fade,.24s) var(--ease);
  animation:introFailsafe .01s linear var(--intro-safe,4s) forwards;
}
html.intro main::after{
  content:''; position:fixed; z-index:255; left:var(--intro-x,-200px); top:var(--intro-y,-20px);
  width:clamp(110px,14vw,170px); height:2px;
  background:var(--acid); box-shadow:0 0 12px rgba(169,220,59,.55);
  transform-origin:left center; transform:scaleX(var(--intro-p,0));
  opacity:0; transition:opacity .2s var(--ease);
  animation:introFailsafe .01s linear var(--intro-safe,4s) forwards;
}
html.intro.intro--ready main::after{ opacity:1; }
html.intro.intro--out main::before, html.intro.intro--out main::after{ opacity:0; }
html.intro .hero__inner{ z-index:260; }                       /* lift the title's own stacking context above the veil... */
html.intro .hero__inner > :not(.hero__name){ visibility:hidden; }   /* ...and keep the rest of the hero behind it */
html.intro .hero__name{ pointer-events:none; }
/* the bars and rails wait behind the veil, then ease in */
.topbar, .rail, .scroll-glow{ transition:opacity .4s var(--ease); }
html.intro .topbar, html.intro .rail, html.intro .scroll-glow{ opacity:0; visibility:hidden; animation:introShow .01s linear var(--intro-safe,4s) forwards; }
@keyframes introFailsafe{ to{ opacity:0; visibility:hidden; } }
@keyframes introShow{ to{ opacity:1; visibility:visible; } }
html.intro .hero__inner > :not(.hero__name){ animation:introShow .01s linear var(--intro-safe,4s) forwards; }