/* ==========================================================================
   THE XTHS — style.css — FINAL v19
   Brutalist magazine hero · VIBGYOR stripe trailer · conveyor belts ·
   TV deck (cassettes) · hub-less orbital footer · triangle curtain.
   All breakpoints merged here (responsive.css retired).
   v19: Garamond brand · footer © above links (.footer-links-wrap) ·
   wheel name pill without clipping · mobile pill icons · about photo
   reduced · fullscreen TV screen.
   ========================================================================== */

:root{
  --bg:#0A0A0F; --bg-2:#0E0E16; --bg-3:#12121C;
  --ink:#F4F4F7; --ink-dim:#A0A0B0; --ink-faint:#5B5B6B;
  --cyan:#00F0FF; --magenta:#FF2E88; --acid:#B6FF00; --violet:#7B2FBE;
  --line:rgba(244,244,247,.14); --line-soft:rgba(244,244,247,.07);
  --font-d:"Space Grotesk",ui-sans-serif,sans-serif;
  --font-serif:"Cormorant Garamond",Georgia,serif;
  --font-m:"JetBrains Mono",ui-monospace,monospace;
  --container:1280px; --gutter:clamp(1.25rem,4vw,3rem);
  --sec-pad:clamp(4.5rem,9vw,8.5rem);
  --rot-a:-1.4deg; --rot-b:1.1deg;
  --ease:cubic-bezier(.22,1,.36,1);
  --fs-hero:clamp(4rem,16.5vw,14.5rem);
  --fs-1:clamp(2.6rem,6.5vw,5.25rem);
  --fs-2:clamp(2rem,4.5vw,3.4rem);
  --fs-3:clamp(1.35rem,2.4vw,1.9rem);
  --fs-body:1.0625rem; --fs-meta:.8125rem;
  --vib1:#9D4EDD; --vib2:#5A4FF3; --vib3:#2D9CFF; --vib4:#3DDC84;
  --vib5:#FFD60A; --vib6:#FF8C1A; --vib7:#FF3B5C
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--ink);font-family:var(--font-d);font-size:var(--fs-body);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}
a,button,input,select,textarea,[role="button"]{touch-action:manipulation}
::selection{background:var(--magenta);color:var(--bg)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
main{display:block}

/* ---------- texture ---------- */
.grain{position:fixed;inset:-50%;z-index:2000;pointer-events:none;opacity:.055;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size:240px;animation:grain 9s steps(10) infinite}

/* ---------- layout / type ---------- */
.container{width:min(var(--container),100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:var(--sec-pad);position:relative}
.section--tight{padding-block:calc(var(--sec-pad)*.55)}
.section--alt{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.section-head{margin-bottom:clamp(2.5rem,6vw,4.25rem);max-width:60rem}
.section-head .lede{margin-top:1.25rem;color:var(--ink-dim);max-width:54ch}
.kicker{font-family:var(--font-m);font-size:var(--fs-meta);letter-spacing:.22em;text-transform:uppercase;
  color:var(--acid);display:flex;gap:1rem;align-items:center;margin-bottom:1.4rem}
.kicker::before{content:"";width:2.5rem;height:1px;background:var(--acid);flex:none}
.kicker span{color:var(--ink-faint)}
.display-1,.display-2,.display-3{font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.02em}
.display-1{font-size:var(--fs-hero)}
.display-2{font-size:var(--fs-1)}
.display-3{font-size:var(--fs-2)}
.outline{color:transparent;-webkit-text-stroke:1.5px var(--cyan);animation:vibStroke 18s linear infinite}
.outline--magenta{animation-delay:-9s}
.text-dim{color:var(--ink-dim)}
.text-cyan{color:var(--cyan)}
.mono-dim{font-family:var(--font-m);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.link{color:var(--cyan);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--cyan)}
.arr{display:inline-block;transition:transform .25s var(--ease)}
.skip-link{position:fixed;top:.75rem;left:.75rem;z-index:3000;background:var(--ink);color:var(--bg);
  padding:.6rem 1rem;font-family:var(--font-m);font-size:.72rem;transform:translateY(-300%)}
.skip-link:focus{transform:none}
.noscript-note{position:fixed;bottom:0;left:0;right:0;z-index:2500;background:var(--magenta);color:var(--bg);
  font-family:var(--font-m);font-size:.75rem;padding:.8rem 1rem;text-align:center}

/* ---------- buttons / tags ---------- */
.button{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--font-m);font-size:.8125rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:1.05rem 1.9rem;border:1px solid var(--ink);
  background:var(--ink);color:var(--bg);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s}
.button:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--cyan)}
.button:hover .arr{transform:translateX(4px)}
.button:active{transform:none;box-shadow:1px 1px 0 var(--cyan)}
.button--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.button--ghost:hover{border-color:var(--cyan);color:var(--ink);box-shadow:5px 5px 0 rgba(0,240,255,.3)}
.button--magenta:hover{box-shadow:5px 5px 0 var(--magenta)}
.button--sm{padding:.7rem 1.2rem;font-size:.72rem}
.button--drive{background:var(--acid);border-color:var(--acid);color:var(--bg)}
.button--drive:hover{box-shadow:5px 5px 0 var(--cyan)}
.tag{font-family:var(--font-m);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acid);border:1px solid rgba(182,255,0,.35);padding:.28rem .6rem;white-space:nowrap}
.tag-row{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}

/* ---------- header / nav / menu ---------- */
/* nav — permanent liquid-glass: gaussian blur + soft tint + top sheen.
   .is-scrolled only deepens it slightly on scroll. */
.site-header{position:fixed;inset:0 0 auto;z-index:1000;
  background:linear-gradient(180deg,rgba(18,18,28,.62),rgba(14,14,22,.48));
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 34px rgba(0,0,0,.35);
  transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.site-header.is-scrolled{background:linear-gradient(180deg,rgba(18,18,28,.82),rgba(14,14,22,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 44px rgba(0,0,0,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:.7rem;gap:1rem;
  padding-left:max(var(--gutter),env(safe-area-inset-left,0));padding-right:max(var(--gutter),env(safe-area-inset-right,0))}
/* brand — Garamond serif voice. Deliberately plain: logo + ONE text node.
   No flex gap, no <em>, no &nbsp; — that's the whole fix for "THE X THS". */
.brand{display:inline-flex;align-items:center;font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:1.55rem;letter-spacing:.01em;white-space:nowrap}
.brand__logo{height:40px;width:auto;object-fit:contain;margin-right:.65rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.nav__links{display:flex;gap:2.2rem;font-family:var(--font-m);font-size:.78rem;letter-spacing:.16em}
.nav__links a{color:var(--ink-dim);position:relative;padding-block:.3rem;transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__links a.is-active{color:var(--cyan)}
.nav__links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--cyan)}
.nav__right{display:flex;align-items:center;gap:1.1rem}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:2.5rem;height:2.5rem}
.burger span{width:1.5rem;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:950;background:var(--bg);display:flex;flex-direction:column;
  justify-content:center;gap:3rem;visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu.is-open{visibility:visible;opacity:1;transition:opacity .35s var(--ease)}
.menu__nav{display:grid;gap:.5rem}
.menu__link{display:flex;gap:1.1rem;align-items:baseline;font-size:clamp(2.2rem,9vw,4.25rem);font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;opacity:0;transform:translateY(26px);
  transition:transform .5s var(--ease),opacity .5s,color .2s}
.menu__link i{font-family:var(--font-m);font-style:normal;font-size:.8rem;color:var(--acid);letter-spacing:.1em}
.menu__link:hover{color:var(--magenta)}
.menu.is-open .menu__link{opacity:1;transform:none}
.menu.is-open .menu__link:nth-child(1){transition-delay:.05s}
.menu.is-open .menu__link:nth-child(2){transition-delay:.1s}
.menu.is-open .menu__link:nth-child(3){transition-delay:.15s}
.menu.is-open .menu__link:nth-child(4){transition-delay:.2s}
.menu.is-open .menu__link:nth-child(5){transition-delay:.25s}
.menu__foot{display:flex;gap:2rem;flex-wrap:wrap;font-family:var(--font-m);font-size:.72rem;letter-spacing:.15em}
.menu__foot a{color:var(--ink-dim);transition:color .2s}
.menu__foot a:hover{color:var(--cyan)}

/* ==========================================================================
   HERO — BRUTALIST MAGAZINE COVER
   ========================================================================== */
.hero{min-height:100svh;display:flex;align-items:stretch;position:relative;padding:7rem 0 2rem}
.hero__dots{position:absolute;top:7rem;right:0;width:34%;height:52%;z-index:0;
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  background-image:radial-gradient(rgba(244,244,247,.12) 1px,transparent 1.4px);
  background-size:9px 9px}
.hero .container{display:flex;flex-direction:column;position:relative;z-index:1}
.hero__bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding-bottom:.7rem}
.hero__bar sup{font-size:.55em;color:var(--acid)}
.hero__bar-mid{color:var(--ink-faint)}
.hero__rule{height:2px;background:var(--ink);margin-bottom:clamp(1.2rem,3vh,2.2rem)}

/* masthead — serif/grotesk collision; defacer bursts live inside, behind type */
.masthead{display:block;line-height:1;position:relative;isolation:isolate;cursor:crosshair}
.masthead__row{display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.6rem);width:fit-content}
.masthead__row--1{margin-left:clamp(1.5rem,7vw,7rem)}
.masthead__the{font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:clamp(3rem,9vw,7.5rem);line-height:.9}
.masthead__star{width:clamp(34px,5vw,60px);aspect-ratio:1;align-self:center;animation:spin 18s linear infinite}
.masthead__est{font-family:var(--font-m);font-size:.68rem;letter-spacing:.3em;line-height:1.5;
  border:1px solid var(--ink);padding:.5rem .7rem;rotate:4deg;align-self:center}
.masthead__row--2{
  display:block;width:fit-content;position:relative;
  font-size:clamp(5rem,20.5vw,18.5rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.035em;line-height:.8;margin-top:-.06em;
  margin-left:clamp(-.05em,-1vw,-1rem)}
.masthead__row--2::before,.masthead__row--2::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;z-index:-1}
.masthead__row--2::before{color:var(--cyan);animation:glitchA 5.4s steps(1,end) infinite}
.masthead__row--2::after{color:var(--magenta);animation:glitchB 5.4s steps(1,end) infinite}
.masthead__row--2:hover{color:transparent;-webkit-text-stroke:2px var(--ink);cursor:default}
.masthead__foot{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;
  border-top:2px solid var(--ink);margin-top:clamp(.8rem,2vh,1.4rem);padding-top:.8rem}
.masthead__foot-mid{font-family:var(--font-m);font-size:.62rem;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase}
.masthead__price{margin-left:auto;font-family:var(--font-m);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;color:var(--acid);border:1px solid rgba(182,255,0,.5);padding:.4rem .7rem}
.barcode{width:112px;height:34px;flex:none;position:relative;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px,var(--ink) 9px 10px,transparent 10px 14px,var(--ink) 14px 15px,transparent 15px 19px)}
.barcode::after{content:"8 90123 45678";position:absolute;top:100%;left:0;margin-top:2px;
  font-family:var(--font-m);font-size:.5rem;letter-spacing:.28em;color:var(--ink-faint)}

.issue-grid{display:grid;grid-template-columns:1fr minmax(320px,44%);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
  padding-block:clamp(1.4rem,3vh,2.4rem);border-bottom:1px solid var(--line);position:relative}
.issue-num{position:absolute;left:36%;top:-2%;z-index:0;pointer-events:none;
  font-weight:700;font-size:clamp(6rem,15vw,13rem);line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(244,244,247,.13);rotate:-3deg}
.coverlines{position:relative;z-index:1;display:flex;flex-direction:column}
.coverlines__head{padding-bottom:.55rem}
.cl-row{display:flex;align-items:baseline;gap:.9rem;padding:.68rem .4rem;min-height:44px;
  border-bottom:1px solid var(--line);font-size:clamp(.95rem,1.5vw,1.1rem);
  transition:background .12s steps(2,end),color .12s steps(2,end)}
.cl-row i{font-style:normal;font-family:var(--font-m);font-size:.66rem;letter-spacing:.14em;color:var(--acid)}
.cl-row b{font-weight:700;text-transform:uppercase;white-space:nowrap}
.cl-row u{flex:1;border-bottom:1px dotted rgba(244,244,247,.22);transform:translateY(-.3em);text-decoration:none}
.cl-row s{text-decoration:none;font-family:var(--font-m);font-size:.7rem;letter-spacing:.1em;color:var(--ink-dim);white-space:nowrap}
.cl-row:hover{background:var(--ink);color:var(--bg)}
.cl-row:hover i,.cl-row:hover s{color:var(--bg)}
.cl-row:hover u{border-color:rgba(10,10,15,.4)}
.hero__end{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1rem;font-family:var(--font-m);font-size:.64rem;letter-spacing:.2em;
  color:var(--ink-faint);text-transform:uppercase}
.hero__end a{color:var(--ink-dim);transition:color .15s}
.hero__end a:hover{color:var(--cyan)}

/* ==========================================================================
   TRAILER — cover star under a VIBGYOR hazard stripe
   ========================================================================== */
.trailer{position:relative;width:100%}
.stripe{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;
  width:104%;margin-left:-2%;rotate:-1.2deg;padding:.4rem 0;
  border:2px solid var(--bg);
  background-color:#FFD60A;animation:vibBG 11s linear infinite}
.stripe::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,rgba(10,10,15,.92) 0 9px,transparent 9px 20px)}
.stripe span{position:relative;font-family:var(--font-m);font-weight:700;font-size:.78rem;
  letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;
  background:var(--bg);padding:.18rem .85rem;animation:vibTXT 11s linear infinite}
.trailer__screen{position:relative;aspect-ratio:16/9;background:var(--bg-2);
  border:1px solid var(--ink);overflow:hidden;
  box-shadow:12px 12px 0 rgba(244,244,247,.14);
  transition:box-shadow .18s steps(3,end),transform .18s steps(3,end)}
.trailer:hover .trailer__screen{box-shadow:6px 6px 0 var(--acid);transform:translate(4px,4px)}
.trailer__stage{position:absolute;inset:0;z-index:1}
.trailer__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trailer__poster{position:absolute;inset:0;z-index:0;background:var(--bg-3)}
.trailer__poster img{width:100%;height:100%;object-fit:cover;opacity:.9}
.trailer__chip{position:absolute;z-index:3;font-family:var(--font-m);font-size:.62rem;
  letter-spacing:.2em;padding:.35rem .6rem;background:var(--bg);border:1px solid var(--ink);color:var(--ink)}
.trailer__chip--rec{top:.8rem;left:.8rem;display:flex;align-items:center;gap:.5rem}
.trailer__chip--rec i{width:.45rem;height:.45rem;border-radius:50%;background:var(--magenta);animation:blink 1.1s steps(2) infinite}
.trailer__chip--tc{bottom:.8rem;left:.8rem;color:var(--acid);border-color:rgba(182,255,0,.5)}
.trailer__note{display:none;position:absolute;inset:0;z-index:4;place-items:center;text-align:center;padding:1.5rem;
  background:rgba(10,10,15,.92);font-family:var(--font-m);font-size:.68rem;letter-spacing:.06em;color:var(--acid);line-height:1.9}
.trailer__note.is-on{display:grid}
.trailer__note code{color:var(--ink)}
.trailer__play{position:absolute;inset:0;margin:auto;z-index:3;width:72px;height:72px;border-radius:50%;
  background:var(--magenta);color:var(--bg);display:none;place-items:center;box-shadow:5px 5px 0 rgba(0,0,0,.7)}
@media (hover:none){.trailer__play{display:grid}}
.trailer__caption{display:flex;justify-content:space-between;gap:1rem;padding-top:.7rem;
  font-family:var(--font-m);font-size:.6rem;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase;flex-wrap:wrap}

/* ---------- statement ---------- */
.statement{padding-block:clamp(3.5rem,8vw,6.5rem)}
.statement__kicker{margin-bottom:1.5rem}
.statement__line{font-size:clamp(1.7rem,4.2vw,3.4rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.12;max-width:24ch}
.statement .w{display:inline-block;will-change:opacity}

/* ---------- conveyor belts ---------- */
.marquee-band{position:relative;padding-block:clamp(2.5rem,5vw,4rem)}
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2)}
.marquee--a{transform:rotate(var(--rot-a)) scale(1.04)}
.marquee--b{transform:rotate(var(--rot-b)) scale(1.04);margin-top:-.4rem}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__item{font-weight:700;text-transform:uppercase;font-size:clamp(1.3rem,2.8vw,2.05rem);
  letter-spacing:-.01em;padding:.85rem 1.7rem;white-space:nowrap}
.marquee__item--cyan{color:var(--cyan)}
.marquee__item--outline{color:transparent;-webkit-text-stroke:1px var(--ink-dim)}
.marquee__dot{color:var(--magenta);font-size:.72rem;animation:vib 12s linear infinite}
.belt-dash{height:2px;margin-block:.5rem;opacity:.4;
  background:repeating-linear-gradient(90deg,rgba(0,240,255,.75) 0 10px,transparent 10px 22px)}
.marquee--b .belt-dash{background:repeating-linear-gradient(90deg,rgba(255,46,136,.75) 0 10px,transparent 10px 22px)}
.belt-hint{text-align:center;margin-top:2rem}

/* ---------- work grid ---------- */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2.5rem,4vw,3.5rem) clamp(1.25rem,2.5vw,2rem)}
.span-7{grid-column:span 7}
.span-5{grid-column:span 5}
.project-card{display:block;position:relative}
.project-card__thumb{position:relative;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--bg-2)}
.project-card__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.88);
  transform:scale(1.03);transition:filter .5s var(--ease),transform .8s var(--ease)}
.project-card__tint{position:absolute;inset:0;background:var(--violet);mix-blend-mode:color;opacity:.45;transition:opacity .5s var(--ease)}
.project-card__thumb::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .3s;pointer-events:none}
.project-card:hover .project-card__thumb img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.07)}
.project-card:hover .project-card__tint{opacity:0}
.project-card:hover .project-card__thumb::after{border-color:rgba(0,240,255,.55)}
.project-card__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.project-card.is-video-hover .project-card__video{opacity:1}
.project-card__meta{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-top:1.1rem}
.project-card__meta h3{font-size:1.35rem;text-transform:uppercase;transition:color .25s}
.project-card:hover .project-card__meta h3{color:var(--cyan)}
.project-card__year{font-family:var(--font-m);font-size:.72rem;color:var(--ink-faint);padding-top:.35rem}
.filterbar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:3rem}
.filterbar button{font-family:var(--font-m);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);border:1px solid var(--line);padding:.55rem 1rem;transition:color .2s,border-color .2s,background .2s}
.filterbar button:hover{color:var(--ink);border-color:var(--ink-dim)}
.filterbar button.is-active{background:var(--acid);border-color:var(--acid);color:var(--bg);font-weight:700}
.drive-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;
  margin:2.5rem 0 3rem;padding:1.4rem 1.6rem;background:var(--bg-2);
  border:1px solid var(--ink);box-shadow:10px 10px 0 rgba(244,244,247,.12)}
.drive-cta__txt b{display:block;font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em}
.drive-cta__txt .mono-dim{display:block;margin-top:.35rem}
@media (max-width:640px){.drive-cta{flex-direction:column;align-items:flex-start}}

/* results heading under the filter bar */
.results-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:.85rem;margin-bottom:2.75rem}
.results-head .mono-dim{letter-spacing:.18em}

/* ---------- pricing ---------- */
.pricing-note{font-family:var(--font-m);font-size:.78rem;letter-spacing:.03em;color:var(--acid);
  border:1px dashed rgba(182,255,0,.4);padding:1rem 1.25rem;margin-bottom:3rem;max-width:70ch}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}
.pricing-card{position:relative;background:var(--bg-2);border:1px solid var(--line);padding:2.5rem 2rem;
  box-shadow:6px 6px 0 rgba(0,240,255,.14);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pricing-card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 rgba(0,240,255,.3)}
.pricing-card--featured{border-color:var(--magenta);box-shadow:8px 8px 0 var(--magenta);transform:translateY(-1.25rem)}
.pricing-card--featured:hover{transform:translateY(-1.25rem) translate(-4px,-4px);box-shadow:12px 12px 0 var(--magenta)}
.pricing-card__flag{position:absolute;top:-.85rem;left:1.75rem;font-family:var(--font-m);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;background:var(--magenta);color:var(--bg);padding:.3rem .7rem}
.pricing-card h3{font-size:1.6rem;text-transform:uppercase}
.pricing-card__tagline{color:var(--ink-dim);font-size:.95rem;margin-top:.5rem}
.pricing-card__price{font-family:var(--font-m);font-weight:700;font-size:2.5rem;color:var(--acid);
  margin-block:1.4rem;padding-block:1.25rem;border-block:1px solid var(--line-soft)}
.pricing-card__price span{font-size:.85rem;font-weight:400;color:var(--ink-faint);letter-spacing:.08em}
.pricing-card__usd{font-family:var(--font-m);font-size:.7rem;letter-spacing:.12em;color:var(--ink-dim);margin:-1rem 0 1.4rem}
.pricing-card ul{display:grid;gap:.6rem;margin-bottom:2rem}
.pricing-card li,.points li{position:relative;padding-left:1.35rem;color:var(--ink-dim);font-size:.93rem}
.pricing-card li::before,.points li::before{content:"▸";position:absolute;left:0;top:.1em;color:var(--cyan);font-size:.8rem}
.pricing-card li.more a{font-family:var(--font-m);font-size:.78rem}

/* ---------- service rows ---------- */
.service-row{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:start;
  padding-block:2.6rem;border-top:1px solid var(--line);transition:background .3s}
.service-row:last-child{border-bottom:1px solid var(--line)}
.service-row:hover{background:rgba(0,240,255,.03)}
.service-row__index{font-family:var(--font-m);font-size:.8rem;letter-spacing:.1em;color:var(--acid);padding-top:.55rem}
.service-row__body h3{font-size:clamp(1.45rem,3vw,2.1rem);text-transform:uppercase;transition:color .25s}
.service-row:hover .service-row__body h3{color:var(--cyan)}
.service-row__body p{color:var(--ink-dim);max-width:66ch;margin-top:.7rem}
.service-row__body .points{margin-top:1rem;display:grid;gap:.4rem}
.service-row__tail{margin-top:1rem !important}
.service-row__cta{padding-top:.5rem;white-space:nowrap}

/* ---------- testimonials ---------- */
.testimonials{columns:3;column-gap:2rem}
.testimonial{break-inside:avoid;margin-bottom:2rem;background:var(--bg-2);border:1px solid var(--line);
  padding:2rem;box-shadow:7px 7px 0 rgba(123,47,190,.3);transform:rotate(var(--tilt,-.6deg));transition:transform .3s var(--ease)}
.testimonial:nth-child(2n){--tilt:.8deg;box-shadow:7px 7px 0 rgba(0,240,255,.16)}
.testimonial:hover{transform:rotate(0) translateY(-4px)}
.testimonial blockquote::before{content:"\201C";display:block;font-size:3rem;line-height:1;color:var(--magenta);margin-bottom:.4rem}
.testimonial figcaption{margin-top:1.25rem;font-family:var(--font-m);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.testimonial figcaption b{color:var(--acid);font-weight:400}

/* ---------- about — compact portrait column ---------- */
.about-grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.about-photo{position:relative;transform:rotate(-.6deg);margin:0;max-width:320px;aspect-ratio:1/1;overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover;border:1px solid var(--line);
  filter:grayscale(1) contrast(1.1);transition:filter .3s}
.about-photo::after{content:"";position:absolute;inset:0;transform:translate(14px,14px);border:1px solid var(--magenta);z-index:-1}
.about-photo figcaption{margin-top:1.25rem}
.about-lede{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.5;margin-bottom:1.25rem}
.about-bio p+p{margin-top:1.1rem;color:var(--ink-dim)}
.about-sig{margin-top:1.75rem}
/* stats — interactive cards: cycling VIBGYOR borders, scanline sweep,
   glitch-on-hover numbers, lift. Numbers count up via [data-count]. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;
  margin-top:clamp(3rem,7vw,5rem)}
.stat{--sc:var(--cyan);position:relative;overflow:hidden;background:var(--bg-2);
  border:1px solid color-mix(in srgb,var(--sc) 45%,transparent);
  padding:1.9rem 1.5rem 1.6rem;cursor:default;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  animation:statBorder 9s linear infinite}
.stat:nth-child(2){--sc:#fc3189;animation-delay:-1.3s}
.stat:nth-child(3){--sc:#b4fd05;animation-delay:-2.6s}
.stat:nth-child(4){--sc:#9D4EDD;animation-delay:-3.9s}
@keyframes statBorder{
  0%,100%{border-color:color-mix(in srgb,var(--sc) 45%,transparent)}
  50%{border-color:var(--sc)}
}
/* scanline sweep across the card */
.stat::after{content:"";position:absolute;left:0;right:0;top:-40%;height:36%;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--sc) 14%,transparent),transparent);
  transition:top .6s var(--ease)}
.stat:hover{transform:translateY(-6px);box-shadow:8px 8px 0 color-mix(in srgb,var(--sc) 30%,transparent)}
.stat:hover::after{top:120%}
.stat b{display:block;font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:700;line-height:1.05;
  color:var(--sc);font-variant-numeric:tabular-nums}
.stat:hover b{animation:statGlitch .38s steps(2,end)}
@keyframes statGlitch{
  0%{transform:translate(0);text-shadow:none}
  25%{transform:translate(-3px,1px);text-shadow:3px 0 var(--cyan),-3px 0 var(--magenta)}
  50%{transform:translate(2px,-1px);text-shadow:-3px 0 var(--cyan),3px 0 var(--magenta)}
  75%{transform:translate(-1px,0);text-shadow:2px 0 var(--cyan)}
  100%{transform:translate(0);text-shadow:none}
}
.stat span{display:block;margin-top:.7rem;font-family:var(--font-m);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
@media (max-width:768px){
  .stats{grid-template-columns:1fr 1fr;gap:.9rem}
  .stat{padding:1.4rem 1.1rem 1.2rem}
}
.why{display:grid;grid-template-columns:auto 1fr 1.4fr;gap:2rem;align-items:baseline;
  border-top:1px solid var(--line);padding-block:2.5rem}
.why:last-of-type{border-bottom:1px solid var(--line)}
.why__num{font-family:var(--font-m);font-size:.8rem;color:var(--acid);letter-spacing:.1em}
.why h3{transition:color .25s}
.why:hover h3{color:var(--cyan)}
.why p{color:var(--ink-dim)}
.mono-h{font-family:var(--font-m);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acid);margin-bottom:1.1rem}
.tools{display:flex;flex-wrap:wrap;gap:.75rem}
.tools li{font-family:var(--font-m);font-size:.75rem;letter-spacing:.1em;border:1px solid var(--line);
  padding:.65rem 1.1rem;color:var(--ink-dim);cursor:default;transition:background .25s,color .25s,border-color .25s}
.tools li:hover{background:var(--cyan);border-color:var(--cyan);color:var(--bg)}

/* ---------- contact (laser button CSS lives in contact.html) ---------- */
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.info-list{margin-block:2rem}
.info-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.15rem;border-top:1px solid var(--line)}
.info-row:last-child{border-bottom:1px solid var(--line)}
.info-row>span:first-child{font-family:var(--font-m);font-size:.68rem;letter-spacing:.18em;color:var(--ink-faint)}
.info-row a{font-family:var(--font-m);font-size:.85rem;letter-spacing:.04em}
.copy-btn{font-family:var(--font-m);font-size:.62rem;letter-spacing:.14em;border:1px solid var(--line);
  padding:.35rem .6rem;color:var(--ink-dim);transition:color .2s,border-color .2s}
.copy-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.brief-tips{margin-top:2rem}
.form{display:grid;gap:1.5rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.field label{display:block;font-family:var(--font-m);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:.6rem}
.field label b{color:var(--magenta);font-weight:400}
.field input,.field select,.field textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);
  color:var(--ink);padding:.9rem 1rem;font-size:.95rem;border-radius:0;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);outline:none}
.field textarea{min-height:9rem;resize:vertical}
.select{position:relative;display:block}
.select::after{content:"▾";position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--acid);pointer-events:none;font-size:.8rem}
.select select{appearance:none;-webkit-appearance:none;padding-right:2.4rem}
.field__error{display:none;font-family:var(--font-m);font-size:.68rem;color:var(--magenta);margin-top:.45rem}
.field.has-error input,.field.has-error textarea{border-color:var(--magenta)}
.field.has-error .field__error{display:block}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.form-banner{display:none;border:1px solid var(--magenta);color:var(--magenta);
  font-family:var(--font-m);font-size:.78rem;padding:1rem;line-height:1.5}
.form-banner.is-visible{display:block}
.form-foot{font-family:var(--font-m);font-size:.68rem;letter-spacing:.1em;color:var(--ink-faint)}
.form-success{border:1px solid rgba(182,255,0,.5);box-shadow:8px 8px 0 rgba(182,255,0,.18);
  background:var(--bg-2);padding:clamp(2rem,5vw,3.5rem);outline:none}
.form-success .button{margin-top:1.75rem}
.form-success p.text-dim{max-width:48ch}

/* ==========================================================================
   FOOTER — CTA · brand/links (© above links) · hub-less orbital band
   ========================================================================== */
.site-footer{border-top:1px solid var(--line);padding-bottom:.85rem}
.footer-cta{display:block;padding-block:clamp(2.25rem,5vw,3.75rem);border-bottom:1px solid var(--line)}
.footer-cta .display-2{transition:color .25s}
.footer-cta:hover .display-2{color:var(--cyan)}
.footer-cta:hover .arr{transform:translateX(1rem)}
.footer-cta__sub{margin-top:1.25rem;max-width:44ch}
.footer-mid{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  padding-block:1.75rem;border-bottom:1px solid var(--line-soft)}
.footer-brand p.text-dim{max-width:36ch;margin-block:.75rem 1rem;font-size:.92rem}
.f-mail{font-family:var(--font-m);font-size:.78rem;letter-spacing:.08em;color:var(--ink-dim);transition:color .2s}
.f-mail:hover{color:var(--cyan)}
.footer-links-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:.9rem}
.footer-copy{font-family:var(--font-m);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.footer-links{display:flex;gap:1.75rem;flex-wrap:wrap}
.f-link{font-family:var(--font-m);font-size:.74rem;letter-spacing:.08em;color:var(--ink-dim);transition:color .2s}
.f-link:hover{color:var(--cyan)}

/* the wheel — hub-less orbital band. Full-bleed, ≤1in tall, shallow hill.
   The center is negative space by design. Arc + ticks + drifting particles.
   Name pill: symmetric padding, no negative margin over the text → first
   letters never clip. Past center, names flip to open leftward. */
.wheel{position:relative;width:100%;height:clamp(60px,7.5vw,88px);
  margin:.4rem 0 0;overflow:visible}
.wheel svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.w-arc{fill:none;stroke:rgba(244,244,247,.16);stroke-width:1;vector-effect:non-scaling-stroke}
/* drifting particles: dotted overlay, dashoffset animated = dots travel the orbit */
.w-orbit{fill:none;stroke:rgba(194, 255, 222, 0.5);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:.1 120;vector-effect:non-scaling-stroke;animation:arcFlow 14s linear infinite}
.w-tick{stroke:rgba(244,244,247,.14);stroke-width:1;vector-effect:non-scaling-stroke}
.wheel__node{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;text-decoration:none;
  will-change:transform,opacity}
.wheel__node:hover,.wheel__node:focus-visible{z-index:30}
.wheel__chip{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;
  background:var(--bg);border:1px solid var(--nc);color:var(--nc);
  font-family:var(--font-m);font-weight:700;font-size:.62rem;
  transition:transform .3s var(--ease),background .25s,color .25s,box-shadow .25s}
.wheel__chip img{width:22px;height:22px;object-fit:contain}
.wheel__name{height:34px;display:inline-flex;align-items:center;padding:0 .8rem;margin-left:-1px;
  border:1px solid color-mix(in srgb,var(--nc) 45%,transparent);border-left:0;
  background:rgba(10,10,15,.78);
  font-family:var(--font-m);font-weight:700;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.wheel__node:hover .wheel__chip,.wheel__node:focus-visible .wheel__chip{
  transform:scale(1.08);background:var(--nc);color:var(--bg);box-shadow:0 0 14px var(--nc)}
.wheel__node:hover .wheel__name,.wheel__node:focus-visible .wheel__name{
  background:var(--nc);border-color:var(--nc);color:var(--bg)}
/* handle tooltip — transform/opacity only: smooth, sits BELOW, no overlap */
.wheel__tip{position:absolute;top:calc(100% + 9px);left:50%;z-index:31;pointer-events:none;
  display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;
  transform:translate(-50%,6px);opacity:0;
  background:var(--bg);border:1px solid var(--nc);color:var(--ink);
  font-family:var(--font-m);font-weight:700;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.32rem .6rem;box-shadow:4px 4px 0 rgba(0,0,0,.55);
  transition:transform .3s var(--ease),opacity .25s}
.wheel__tip i{font-style:normal;color:var(--nc);font-weight:400}
.wheel__node:hover .wheel__tip,.wheel__node:focus-visible .wheel__tip,
.wheel__node:focus-within .wheel__tip{transform:translate(-50%,0);opacity:1}
/* mobile: wheel → centered pill row with real icons */
.wheel__mrow{display:none}
@media (max-width:720px){
  .wheel{display:none}
  .wheel__mrow{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;padding-block:.25rem 1rem}
  .wheel__mrow a{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);
    padding:.5rem .75rem;font-family:var(--font-m);font-size:.62rem;letter-spacing:.12em;
    color:var(--ink-dim);text-transform:uppercase;transition:color .15s,border-color .15s}
  .wheel__mrow a b{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--nc);
    color:var(--nc);font-size:.5rem;overflow:hidden}
  .wheel__mrow a img{width:14px;height:14px;object-fit:contain;display:block}
  .wheel__mrow a:hover{color:var(--ink);border-color:var(--nc)}
}

/* ---------- modal / theater / toast ---------- */
.modal{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;padding:1.25rem}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(6,6,10,.6);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.modal__panel{position:relative;width:min(960px,100%);padding:1.5rem;overflow:hidden;border-radius:20px;
  background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 45%,rgba(255,255,255,.08));
  backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28)}
.modal__close{position:absolute;top:.9rem;right:.9rem;z-index:5;width:2.4rem;height:2.4rem;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:var(--ink);
  display:grid;place-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .2s,background .2s}
.modal__close:hover{transform:scale(1.08);background:rgba(255,46,136,.35)}
.reel-stage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:10px}
.reel-stage video,.reel-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%,200%);z-index:2400;
  background:var(--ink);color:var(--bg);font-family:var(--font-m);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.85rem 1.4rem;transition:transform .4s var(--ease)}
.toast.is-visible{transform:translate(-50%,0)}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:2600;pointer-events:none;border-radius:50%;opacity:0}
.cursor-dot{width:6px;height:6px;background:var(--cyan);mix-blend-mode:difference}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(0,240,255,.6);display:grid;place-items:center;
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
.cursor-ring span{display:flex;align-items:center;gap:.35rem;font-family:var(--font-m);font-size:.58rem;
  letter-spacing:.22em;color:var(--bg);opacity:0;transition:opacity .2s}
.cursor-ring.is-link{width:56px;height:56px;border-color:var(--magenta)}
.cursor-ring.is-play{width:92px;height:92px;background:var(--acid);border-color:var(--acid)}
.cursor-ring.is-play span{opacity:1}
body.cursor-on,body.cursor-on a,body.cursor-on button,body.cursor-on select,body.cursor-on input,
body.cursor-on textarea,body.cursor-on label{cursor:none}

/* ---------- 404 ---------- */
.nf{min-height:82vh;display:flex;flex-direction:column;justify-content:center;padding-top:6rem}
.nf__copy{margin-top:1.5rem;max-width:42ch}
.nf__cta{display:flex;gap:1rem;margin-top:2.5rem;flex-wrap:wrap}

/* ---------- capabilities index ---------- */
.svc-index{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:3.25rem 1fr auto auto 2rem;gap:1.5rem;align-items:center;
  padding-block:1.45rem;border-bottom:1px solid var(--line);position:relative;min-height:44px}
.svc-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.svc-row:hover::after{transform:scaleX(1)}
.svc-row__num{font-family:var(--font-m);font-size:.72rem;letter-spacing:.12em;color:var(--acid)}
.svc-row__name{font-size:clamp(1.35rem,3.2vw,2.3rem);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  transition:color .25s,transform .35s var(--ease)}
.svc-row:hover .svc-row__name{color:var(--cyan);transform:translateX(10px)}
.svc-row--hot::after{background:var(--magenta)}
.svc-row--hot:hover .svc-row__name{color:var(--magenta)}
.svc-row--catch{border-bottom-style:dashed}
.svc-row--catch .svc-row__name{font-size:clamp(1.15rem,2.6vw,1.8rem)}
.svc-row--catch:hover .svc-row__name{color:var(--acid)}
.svc-row__meta{font-family:var(--font-m);font-size:.64rem;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase}
.svc-row__price{font-family:var(--font-m);font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--acid);white-space:nowrap}
.svc-row .arr{opacity:.35;transition:opacity .25s,transform .3s var(--ease)}
.svc-row:hover .arr{opacity:1;transform:translateX(6px);color:var(--cyan)}
.svc-float{position:fixed;top:0;left:0;z-index:900;width:min(300px,26vw);aspect-ratio:16/10;pointer-events:none;
  border:1px solid var(--ink);overflow:hidden;opacity:0;transition:opacity .25s;
  box-shadow:10px 10px 0 rgba(0,0,0,.6)}
.svc-float img{width:100%;height:100%;object-fit:cover}
.svc-float.is-on{opacity:1}

/* ---------- rate sheet / retainer ---------- */
.sheet{display:grid;gap:3.25rem}
.sheet__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:2px solid var(--ink);padding-bottom:.85rem}
.sheet__head h3{font-size:1.45rem;text-transform:uppercase}
.sheet__row{display:grid;grid-template-columns:9rem 1fr auto 2rem;gap:1.25rem;align-items:baseline;
  padding-block:1.15rem;border-bottom:1px solid var(--line-soft);transition:background .25s,padding-left .3s var(--ease)}
.sheet__row:hover{background:rgba(0,240,255,.04);padding-left:.7rem}
.sheet__tier{font-weight:700;text-transform:uppercase;font-size:1.05rem}
.sheet__tag{color:var(--ink-dim);font-size:.9rem}
.sheet__price{font-family:var(--font-m);font-weight:700;font-size:1.3rem;color:var(--acid);white-space:nowrap;
  display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.sheet__usd{font-style:normal;font-family:var(--font-m);font-size:.7rem;font-weight:400;letter-spacing:.08em;color:var(--ink-faint)}
.sheet__row .arr{opacity:.35;transition:opacity .25s}
.sheet__row:hover .arr{opacity:1;color:var(--cyan)}
.sheet__custom{display:grid;grid-template-columns:9rem 1fr auto 2rem;gap:1.25rem;align-items:baseline;
  border:1px dashed rgba(182,255,0,.4);padding:1.5rem;transition:background .25s}
.sheet__custom:hover{background:rgba(182,255,0,.04)}
.sheet__custom .sheet__tag{font-family:var(--font-m);font-size:.74rem;letter-spacing:.06em;line-height:1.9}
.sheet__retainer{display:grid;grid-template-columns:9rem 1fr auto 2rem;gap:1.25rem;
  align-items:baseline;background:var(--bg-2);border:1px solid rgba(123,47,190,.8);
  box-shadow:6px 6px 0 rgba(123,47,190,.35);padding:1.5rem;margin-top:.5rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sheet__retainer:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 rgba(123,47,190,.55)}
.sheet__retainer .sheet__tag{font-family:var(--font-m);font-size:.74rem;letter-spacing:.06em;line-height:1.9;color:var(--ink-dim)}
.retainer{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,4vw,3rem);background:var(--bg-2);
  border:1px solid var(--line);position:relative;padding:clamp(2rem,5vw,3.5rem);box-shadow:10px 10px 0 rgba(123,47,190,.4)}
.retainer::before{content:"";position:absolute;inset:0;transform:translate(-12px,-12px);
  border:1px dashed rgba(0,240,255,.5);z-index:-1;transition:transform .35s var(--ease)}
.retainer:hover::before{transform:translate(-8px,-8px)}
.retainer__side{border-left:1px solid var(--line);padding-left:clamp(1.5rem,3vw,3rem);
  display:flex;flex-direction:column;gap:1.1rem;justify-content:center}
.retainer__price{font-family:var(--font-m);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2rem,4.5vw,3.2rem);color:var(--acid)}
.retainer__points{margin-top:1.25rem}

/* ==========================================================================
   TV DECK — ticker · CRT chrome · cassette shelf · labeled transport
   ========================================================================== */
.ticker{border:1px solid var(--ink);background:var(--ink);color:var(--bg);overflow:hidden;margin-bottom:-1px}
.ticker__track{display:flex;width:max-content;animation:tick 16s linear infinite}
.ticker__half{padding:.42rem 0;font-family:var(--font-m);font-size:.62rem;font-weight:700;letter-spacing:.28em;white-space:nowrap}
.deck{display:grid;grid-template-columns:1.5fr .95fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
.tvwrap{position:relative;min-width:0}
.tv{border:1px solid var(--ink);background:#000;box-shadow:14px 14px 0 rgba(244,244,247,.12)}
.tv__top{display:flex;align-items:center;gap:.9rem;background:var(--bg-2);border-bottom:1px solid var(--ink);padding:.5rem .9rem}
.tv__plate{font-family:var(--font-m);font-size:.58rem;letter-spacing:.26em;color:var(--ink-faint)}
.tv__onair{font-family:var(--font-m);font-size:.54rem;letter-spacing:.22em;border:1px solid var(--line);padding:.22rem .5rem;color:var(--ink-faint);transition:color .3s,border-color .3s,box-shadow .3s}
.tv.is-playing .tv__onair{color:#fc3189;border-color:#fc3189;box-shadow:0 0 14px rgba(252,49,137,.55);animation:blink 1.6s steps(2) infinite}
.tv__knob{width:16px;height:16px;border-radius:50%;margin-left:auto;border:1px solid var(--ink);
  background:conic-gradient(#3a3a45 0 40deg,#15151d 40deg 360deg);position:relative;flex:none}
.tv__knob+.tv__knob{margin-left:0}
.tv__knob::after{content:"";position:absolute;left:50%;top:1px;width:2px;height:6px;background:var(--ink-dim);transform:translateX(-50%)}
.tv.is-playing .tv__knob{animation:spin 4s linear infinite}
.tv__grille{height:16px;border-top:1px solid var(--ink);
  background-image:radial-gradient(rgba(244,244,247,.28) 1px,transparent 1.4px);background-size:7px 7px}
.tv__screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3);cursor:pointer}
.tv__screen:fullscreen{aspect-ratio:auto;border:0}   /* enhancement: fills the display */
.tv__screen:-webkit-full-screen{aspect-ratio:auto;border:0}
.tv__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;filter:grayscale(.45) contrast(1.05)}
.tv__screen video,.tv__yt{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:cover}
.tv__scan{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.22) 3px 4px)}
.tv__static{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23s)'/%3E%3C/svg%3E")}
.tv__static.is-flash{animation:staticFlash .5s steps(5) forwards}
.tv__ch{position:absolute;top:.7rem;right:.8rem;z-index:5;pointer-events:none;opacity:0;
  font-family:var(--font-m);font-weight:700;font-size:clamp(1.05rem,2vw,1.5rem);letter-spacing:.1em;
  color:var(--acid);background:rgba(10,10,15,.72);border:1px solid rgba(182,255,0,.5);padding:.15rem .55rem}
.tv__ch.is-flash{animation:chIn 1.2s var(--ease) forwards}
.tv__facade{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:rgba(10,10,15,.42);border:0;cursor:pointer;transition:background .2s}
.tv__facade:hover{background:rgba(10,10,15,.22)}
.tv__facade.is-hidden{display:none !important} /* [hidden] loses to display:grid — class is authoritative */
.tv__playbtn{width:86px;height:86px;border-radius:50%;background:var(--acid);color:var(--bg);
  display:grid;place-items:center;box-shadow:6px 6px 0 rgba(0,0,0,.65);transition:transform .2s var(--ease)}
.tv__playbtn svg{margin-left:5px}
.tv__facade:hover .tv__playbtn{transform:scale(1.08)}
.tv__note{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:1.5rem;
  background:rgba(10,10,15,.92);font-family:var(--font-m);font-size:.66rem;letter-spacing:.08em;color:var(--acid);line-height:1.9}
.tv__bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;cursor:default;
  border-top:1px solid var(--ink);background:var(--bg-2);padding:.55rem .9rem}
.tv__osd{font-family:var(--font-m);font-size:.6rem;letter-spacing:.18em;color:var(--ink-faint);display:flex;align-items:center;gap:.5rem;text-transform:uppercase}
.tv__osd b{color:var(--acid);font-weight:400}
.tv__rec{color:var(--ink)}
.tv__rec i{width:.45rem;height:.45rem;border-radius:50%;background:var(--magenta);animation:blink 1.1s steps(2) infinite}
.tv__disk{margin-left:auto;width:28px;height:28px;border-radius:50%;flex:none;
  background:conic-gradient(from 0deg,#9D4EDD,#5A4FF3,#2D9CFF,#3DDC84,#FFD60A,#FF8C1A,#FF3B5C,#9D4EDD);
  box-shadow:inset 0 0 0 6px var(--bg-2),inset 0 0 0 7px rgba(244,244,247,.25);animation:spin 9s linear infinite}
.tv__disk.is-busy{animation-duration:.5s}
.tv__transport{border-top:1px solid var(--ink);background:var(--bg-2);padding:.7rem .9rem;display:grid;gap:.6rem;cursor:default}
.tt-row{display:flex;align-items:center;gap:.6rem;min-width:0}
.tt-time{font-family:var(--font-m);font-size:.64rem;letter-spacing:.08em;color:var(--ink-dim);white-space:nowrap}
.tbtn{display:grid;place-items:center;gap:2px;width:42px;height:40px;flex:none;border:1px solid var(--ink);
  background:var(--bg);color:var(--ink);transition:background .15s,color .15s,transform .1s}
.tbtn .tl{font-size:.42rem;letter-spacing:.12em;opacity:.6}
.tbtn:hover{background:var(--ink);color:var(--bg)}
.tbtn:active{transform:translate(1px,1px)}
.tbtn[disabled]{opacity:.3;pointer-events:none}
.tbtn.is-off{opacity:.3;pointer-events:none}
.tbtn--big{width:52px;height:44px;background:var(--acid);border-color:var(--acid);color:var(--bg)}
.tbtn--big:hover{background:var(--ink);border-color:var(--ink)}
.tbtn--txt{width:auto;padding:0 .65rem;font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em}
.seek,.vol{-webkit-appearance:none;appearance:none;height:22px;border:1px solid var(--ink);cursor:pointer;
  background:linear-gradient(90deg,var(--acid) var(--p,0%),rgba(244,244,247,.18) var(--p,0%))}
.seek{flex:1;min-width:100px}
.vol{width:88px;flex:none}
.seek::-webkit-slider-thumb,.vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:20px;
  background:var(--ink);border:2px solid var(--bg);box-shadow:2px 2px 0 rgba(0,0,0,.7);border-radius:0}
.seek::-moz-range-thumb,.vol::-moz-range-thumb{width:10px;height:18px;background:var(--ink);border:2px solid var(--bg);border-radius:0}
.seek::-moz-range-track,.vol::-moz-range-track{background:transparent}
.vu{display:inline-flex;gap:3px;align-items:flex-end;height:16px;margin-left:auto;flex:none}
.vu i{width:4px;height:100%;background:var(--acid);transform:scaleY(.25);transform-origin:bottom}
.vu.is-live i{animation:vuPulse .7s ease-in-out infinite}
.vu.is-live i:nth-child(2){animation-delay:.1s}.vu.is-live i:nth-child(3){animation-delay:.2s}
.vu.is-live i:nth-child(4){animation-delay:.05s}.vu.is-live i:nth-child(5){animation-delay:.15s}
.vu.is-off i{background:rgba(244,244,247,.25)}
.tv__stand{display:flex;justify-content:center;gap:clamp(80px,22%,230px);margin-top:-1px}
.tv__stand i{width:54px;height:24px;background:var(--bg-2);border:1px solid var(--ink);border-top:0}
.tv__stand i:first-child{transform:skewX(12deg)}
.tv__stand i:last-child{transform:skewX(-12deg)}

/* shelf — scroll-safe for any count; `backwards` fill keeps items visible
   whenever animations are off */
.shelfwrap{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.shelf{border:1px solid var(--ink);background:var(--bg-2);box-shadow:12px 12px 0 rgba(244,244,247,.1)}
.shelf__head{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 1rem;
  border-bottom:1px solid var(--ink);font-family:var(--font-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.shelf__list{display:flex;flex-direction:column;max-height:min(560px,62vh);overflow:auto;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ink-dim) transparent;padding-bottom:2px}
.shelf__list::-webkit-scrollbar{width:8px}
.shelf__list::-webkit-scrollbar-thumb{background:var(--ink-dim);border:2px solid var(--bg-2)}
.shelf__list::-webkit-scrollbar-track{background:transparent}
.shelf__case{position:relative;flex:0 0 auto;display:grid;grid-template-columns:clamp(110px,34%,150px) minmax(0,1fr);
  gap:1rem;align-items:center;width:100%;text-align:left;padding:.8rem;border:0;border-bottom:1px solid var(--line-soft);
  background:transparent;color:var(--ink);cursor:pointer;min-height:44px;
  animation:casIn .45s var(--ease) backwards;animation-delay:var(--d,0s);
  transition:background .15s,color .15s}
.shelf__case:hover{background:rgba(4,238,253,.05)}
.shelf__case.is-active{background:rgba(180,253,5,.05);box-shadow:inset 5px 0 0 var(--acid)}
.cassette{position:relative;display:block;padding:6px;background:linear-gradient(180deg,#17171f,#101018);
  border:1px solid var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.5);transform:rotate(var(--tilt,0deg));transition:transform .2s,border-color .2s}
.shelf__case:nth-child(odd) .cassette{--tilt:-1.3deg}
.shelf__case:nth-child(even) .cassette{--tilt:1.1deg}
.shelf__case:hover .cassette{transform:rotate(0)}
.shelf__case.is-active .cassette{border-color:var(--acid)}
.shelf__case:nth-child(4n+1) .cas__label{--lbl:#04eefd}
.shelf__case:nth-child(4n+2) .cas__label{--lbl:#fc3189}
.shelf__case:nth-child(4n+3) .cas__label{--lbl:#b4fd05}
.shelf__case:nth-child(4n)   .cas__label{--lbl:#9D4EDD}
.cas__label{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:5px;padding:3px 5px;
  border:1px solid var(--lbl,#04eefd);background:color-mix(in srgb,var(--lbl,#04eefd) 8%,transparent);
  font-family:var(--font-m);font-size:.5rem;letter-spacing:.14em;color:var(--lbl,#04eefd);text-transform:uppercase}
.cas__label b{color:var(--ink-faint);font-weight:400}
.cas__win{position:relative;display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:center;
  gap:24px;height:46px;padding:6px;overflow:hidden;background:#0A0A0F;border:1px solid var(--line)}
.cas__win::before{content:"";position:absolute;left:10px;right:10px;top:50%;height:7px;transform:translateY(-50%);background:#26262f}
.cas__win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.cas__spool{position:relative;width:30px;height:30px;border-radius:50%;z-index:1;border:1px solid var(--ink);
  background:radial-gradient(circle,#0A0A0F 0 26%,#1d1d26 27% 36%,transparent 37%),
  repeating-conic-gradient(#3d3d49 0 14deg,#101016 14deg 30deg)}
.shelf__case.is-playing .cas__spool{animation:spin 2.2s linear infinite}
.shelf__case.is-playing .cassette{border-color:#fc3189;box-shadow:4px 4px 0 rgba(252,49,137,.35)}
.shelf__info{display:grid;gap:.15rem;min-width:0}
.shelf__info i{font-style:normal;font-family:var(--font-m);font-size:.6rem;letter-spacing:.16em;color:var(--acid)}
.shelf__info b{font-weight:700;text-transform:uppercase;font-size:.95rem;line-height:1.2;word-break:break-word}
.shelf__sub{font-family:var(--font-m);font-size:.62rem;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelf__info em{font-style:normal;font-family:var(--font-m);font-size:.6rem;letter-spacing:.12em;color:var(--ink-faint)}
.shelf__case.is-active .shelf__info i{color:var(--acid)}
.shelf__prog{position:absolute;left:0;bottom:-1px;height:3px;width:var(--p,0%);z-index:1;pointer-events:none;
  background:var(--acid);transition:width .3s linear}
.disknext{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  border-top:2px solid var(--ink);padding-top:1.1rem;transition:color .2s}
.disknext b{font-size:1.3rem;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:.6rem}
.disknext:hover{color:var(--cyan)}
.disknext:hover .arr{transform:translateX(8px)}

/* §2 production notes */
.diskmeta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.diskstats{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
.diskstats span{font-family:var(--font-m);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);padding:.4rem .7rem;color:var(--ink-dim)}
.diskstats span:first-child{border-color:rgba(182,255,0,.5);color:var(--acid)}
.meta-list{display:grid;border-top:1px solid var(--line);margin-bottom:1.75rem}
.meta-list>div{display:flex;gap:1.25rem;padding:.8rem .2rem;border-bottom:1px solid var(--line-soft);font-family:var(--font-m);font-size:.72rem;letter-spacing:.08em}
.meta-list dt{color:var(--ink-faint);min-width:8rem;letter-spacing:.18em;text-transform:uppercase}
.disknote{color:var(--ink-dim);max-width:60ch}
.disknote+.disknote{margin-top:1.1rem}
.tl-shot{margin:0}
.tl-shot img{width:100%;border:1px solid var(--ink);box-shadow:12px 12px 0 rgba(244,244,247,.12);filter:grayscale(.6) contrast(1.05);transition:filter .3s}
.tl-shot:hover img{filter:none}
.tl-shot figcaption{margin-top:.9rem}
.tl-shot.is-missing img{display:none}
.tl-shot.is-missing::before{content:"TIMELINE SHOT SLOT — DROP A SCREENSHOT AT " attr(data-path);
  display:grid;place-items:center;min-height:220px;border:1px dashed rgba(182,255,0,.5);
  color:var(--acid);font-family:var(--font-m);font-size:.66rem;letter-spacing:.08em;text-align:center;padding:1.5rem;line-height:1.9}
.lb{margin:0}
.lb img{width:100%;max-height:70vh;object-fit:contain;background:#000;border:1px solid var(--line)}
.lb figcaption{margin-top:.9rem}
.tv__ytfail{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;
  gap:1rem;text-align:center;padding:1.5rem;background:rgba(10,10,15,.94)}
.tv__ytfail b{font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em}
.tv__ytfail .mono-dim{max-width:46ch;line-height:1.9}

/* ---------- profiler defacer (hero, masthead-bounded) ---------- */
.dfx-slice{position:absolute;inset:0;z-index:2;pointer-events:none;white-space:nowrap;will-change:transform,opacity}
.dfx-tag{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.45em;pointer-events:none;
  font-family:var(--font-m);font-size:.6rem;letter-spacing:.14em;padding:.28rem .55rem;
  border:1px solid currentColor;background:rgba(10,10,15,.85);white-space:nowrap}
.dfx-tag::before{content:"";width:5px;height:5px;background:currentColor;flex:none}
.dfx-frame{position:absolute;inset:-2% -1.5%;z-index:3;pointer-events:none}
.dfx-frame i{position:absolute;width:18px;height:18px;border:2px solid var(--acid)}
.dfx-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.dfx-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.dfx-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.dfx-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.dfx-scan{position:absolute;left:-2%;right:-2%;height:2px;z-index:3;pointer-events:none;
  background:var(--acid);box-shadow:0 0 14px rgba(182,255,0,.6)}

/* ==========================================================================
   PAGE-TRANSITION CURTAIN — solid ">" slides (#b4fd05 / #fc3189 / #04eefd)
   ========================================================================== */
.pt{position:fixed;inset:0;z-index:5000;pointer-events:auto}
.pt.is-done{display:none}
.pt__tri{position:absolute;top:0;left:0;height:100%;width:160vw;
  transform:translateX(-25vw);
  transition:transform .78s cubic-bezier(.85,0,.15,1);
  clip-path:polygon(0 0,85% 0,100% 50%,85% 100%,0 100%,15% 50%);
  backface-visibility:hidden;will-change:transform}
.pt--a{background:#b4fd05;z-index:1}
.pt--b{background:#fc3189;z-index:2}
.pt--c{background:#4117c0;z-index:3}
.pt.is-out .pt__tri{transform:translateX(165vw)}
.pt.is-out .pt--c{transition-delay:0s}
.pt.is-out .pt--b{transition-delay:.09s}
.pt.is-out .pt--a{transition-delay:.18s}
.pt.is-off .pt__tri{transition:none;transform:translateX(-190vw)}
.pt.is-cover .pt__tri{transform:translateX(-25vw)}
.pt.is-cover .pt--a{transition-delay:0s}
.pt.is-cover .pt--b{transition-delay:.08s}
.pt.is-cover .pt--c{transition-delay:.16s}
.pt__core{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pt.is-out .pt__core{opacity:0;transform:scale(.6)}
.pt__logo{display:grid;place-items:center} /* borderless by design — shadow only */
.pt__logo img{max-height:clamp(90px,16vh,150px);max-width:min(70vw,380px);object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.65)) drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.pt__logo.is-pop{animation:ptLogo .9s cubic-bezier(.34,1.56,.64,1) both}
.pt__word{display:none;font-weight:700;font-size:2.4rem;text-transform:uppercase;letter-spacing:-.02em;
  color:var(--ink);text-shadow:0 10px 30px rgba(0,0,0,.6)}
.pt__word em{font-style:normal;color:var(--acid)}
.pt__logo.is-text img{display:none}
.pt__logo.is-text .pt__word{display:block}

/* ---------- keyframes ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:0}}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-2%,2%)}
  40%{transform:translate(2%,-1%)} 60%{transform:translate(-1%,-2%)} 80%{transform:translate(1%,2%)}
}
@keyframes vib{
  0%,100%{color:#9D4EDD} 14%{color:#5A4FF3} 28%{color:#2D9CFF} 42%{color:#3DDC84}
  57%{color:#FFD60A} 71%{color:#FF8C1A} 85%{color:#FF3B5C}
}
@keyframes vibStroke{
  0%,100%{-webkit-text-stroke-color:#9D4EDD} 14%{-webkit-text-stroke-color:#5A4FF3}
  28%{-webkit-text-stroke-color:#2D9CFF} 42%{-webkit-text-stroke-color:#3DDC84}
  57%{-webkit-text-stroke-color:#FFD60A} 71%{-webkit-text-stroke-color:#FF8C1A}
  85%{-webkit-text-stroke-color:#FF3B5C}
}
@keyframes vibBG{
  0%,100%{background-color:#9D4EDD} 14%{background-color:#5A4FF3} 28%{background-color:#2D9CFF}
  42%{background-color:#3DDC84} 57%{background-color:#FFD60A} 71%{background-color:#FF8C1A}
  85%{background-color:#FF3B5C}
}
@keyframes vibTXT{
  0%,100%{color:#9D4EDD} 14%{color:#5A4FF3} 28%{color:#2D9CFF} 42%{color:#3DDC84}
  57%{color:#FFD60A} 71%{color:#FF8C1A} 85%{color:#FF3B5C}
}
@keyframes glitchA{
  0%,86%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
  87%{transform:translate(-.05em,.012em);clip-path:inset(6% 0 64% 0)}
  90%{transform:translate(.038em,-.014em);clip-path:inset(56% 0 8% 0)}
  93%{transform:translate(-.025em,.006em);clip-path:inset(28% 0 42% 0)}
  96%{transform:translate(.042em,-.008em);clip-path:inset(0 0 80% 0)}
}
@keyframes glitchB{
  0%,86%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
  88%{transform:translate(.05em,-.01em);clip-path:inset(62% 0 6% 0)}
  91%{transform:translate(-.036em,.012em);clip-path:inset(10% 0 60% 0)}
  94%{transform:translate(.028em,-.006em);clip-path:inset(40% 0 30% 0)}
  97%{transform:translate(-.044em,.01em);clip-path:inset(76% 0 2% 0)}
}
@keyframes ptLogo{
  0%{transform:scale(.55);opacity:0}
  45%{transform:scale(1.22);opacity:1}
  70%{transform:scale(1.16)}
  100%{transform:scale(1);opacity:1}
}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes staticFlash{0%{opacity:.9}20%{opacity:.25}40%{opacity:.7}60%{opacity:.15}80%{opacity:.5}100%{opacity:0}}
@keyframes chIn{0%{opacity:1;transform:translateY(-6px)}70%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vuPulse{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes arcFlow{to{stroke-dashoffset:-2404}}
@keyframes casIn{from{opacity:0;transform:translateX(16px)}}

/* ---------- responsive (all breakpoints, single source) ---------- */
@media (min-width:1920px){:root{--container:1440px}body{font-size:1.125rem}}
@media (min-width:2560px){:root{--container:1700px}body{font-size:1.25rem}
  .display-2{font-size:clamp(2.8rem,5vw,6rem)} .statement__line{font-size:clamp(2.2rem,3.4vw,4.6rem)}}
@media (max-width:1280px){.hero__dots{width:26%}}
@media (max-width:1024px){
  .span-7,.span-5{grid-column:span 6}
  .testimonials{columns:2}
  .pricing-grid{grid-template-columns:1fr;max-width:34rem}
  .pricing-card--featured,.pricing-card--featured:hover{transform:none}
  .pricing-card--featured:hover{transform:translate(-4px,-4px)}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .about-photo{max-width:280px}
  .why{grid-template-columns:auto 1fr}
  .why p{grid-column:2}
  .retainer{grid-template-columns:1fr}
  .retainer__side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:2rem}
  .issue-grid{display:flex;flex-direction:column}
  .issue-num{display:none}
  .trailer-col{order:-1}
  .hero__dots{display:none}
  .deck{grid-template-columns:1fr}
  .shelf__list{max-height:none}
  .diskmeta__grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav__links,.nav__right .button{display:none}
  .burger{display:flex}
  .svc-row__meta{display:none}
}
@media (max-height:760px) and (min-width:1025px){.shelf__list{max-height:420px}}
@media (max-width:768px){
  :root{--sec-pad:4.25rem}
  .hero__bar-mid{display:none}
  .masthead__row--1{margin-left:0}
  .masthead__the{font-size:clamp(2.8rem,14vw,4.5rem)}
  .masthead__row--2{font-size:clamp(4.2rem,24vw,9rem)}
  .masthead__est{display:none}
  .masthead__price{margin-left:0}
  .brand{font-size:1.3rem}
  .brand__logo{height:32px}
  .span-7,.span-5{grid-column:span 12}
  .testimonials{columns:1}
  .form__row{grid-template-columns:1fr}
  .stat{width:calc(50% - 1rem);border-right:0;padding-right:0}
  .service-row{grid-template-columns:auto 1fr}
  .service-row__cta{grid-column:2;padding-top:.25rem}
  .footer-mid{flex-direction:column;align-items:flex-start}
  .footer-links-wrap{align-items:flex-start}
}
@media (max-width:720px){
  .wheel{display:none}
  .wheel__mrow{display:flex}
}
@media (max-width:520px){
  .shelf__case{grid-template-columns:118px 1fr;gap:.7rem}
  .cassette{padding:5px}
  .cas__win{height:38px;gap:18px}
  .cas__spool{width:24px;height:24px}
  .tt-time{display:none}
  .vol{width:64px}
  .tbtn{width:38px;height:38px}
  .tbtn--big{width:46px;height:42px}
}
@media (max-width:375px){
  .button{width:100%;justify-content:center}
  .pricing-card{padding:2rem 1.4rem}
  .filterbar{gap:.4rem}
  .filterbar button{padding:.5rem .75rem}
  .svc-row__price{font-size:.66rem}
  .cl-row{gap:.6rem;font-size:.9rem}
}
@media (pointer:coarse){
  .cl-row,.svc-row,.shelf__case{min-height:44px}
  .tbtn{width:42px;height:38px}
  .tbtn--big{width:50px;height:42px}
  .wheel__chip{width:50px;height:50px}
}

/* ==========================================================================
   v21 — SERVICES ctOS HEADING (Watch-Dogs-2 register: sliced type, data
   strips, ticks, tape tags) + results-head + about-stats (added in v20).
   ========================================================================== */

/* data strip above the heading */
.svc-datarow{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--acid);
  background:var(--bg-2);padding:.55rem .9rem;margin-bottom:1.6rem;
  font-family:var(--font-m);font-size:.6rem;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}
.svc-datarow__load{position:relative;display:inline-block;width:130px;height:8px;overflow:hidden;
  background:rgba(244,244,247,.08)}
.svc-datarow__load i{position:absolute;inset:0;width:90%;background:var(--acid);opacity:.85;
  transition:width 1.2s var(--ease)}
.svc-cpu{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.svc-cpu b{width:3px;height:100%;background:var(--cyan);opacity:.7;transform:scaleY(.3);
  transform-origin:bottom;transition:transform .35s steps(3)}
.svc-datarow__cell--ok{color:var(--acid);border:1px solid rgba(182,255,0,.4);padding:.15rem .5rem}

/* the heading — oversized, two staggered lines */
.svc-hero{position:relative;margin:1.25rem auto 2.5rem;line-height:.92;max-width:fit-content;text-align:center}
.svc-hero__line{display:block}
.svc-slice{
  position:relative;display:inline-block;
    font-size:clamp(2.8rem,8.5vw,7rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.9}
.svc-splice{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--acid);
  animation:spliceFlicker 7s steps(1,end) infinite}
.svc-slice::before,.svc-slice::after{ /* RGB slices — same glitch engine as the masthead */
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;z-index:-1}
.svc-slice::before{color:var(--cyan);animation:glitchA 4.6s steps(1,end) infinite}
.svc-slice::after{color:var(--magenta);animation:glitchB 4.6s steps(1,end) infinite .35s}
.svc-slice::after{content:attr(data-text)}
@keyframes spliceFlicker{
  0%,92%,100%{opacity:1;-webkit-text-stroke-color:var(--acid)}
  93%{opacity:0}
  94%{opacity:1;-webkit-text-stroke-color:var(--magenta)}
  96%{opacity:0}
  97%{opacity:1;-webkit-text-stroke-color:var(--acid)}
}
/* ctOS scan sweep across the word */
.svc-hero__line{position:relative;overflow:hidden;padding:.1em 0}
.svc-hero__line::after{content:"";position:absolute;left:-4%;right:-4%;top:-30%;height:24%;
  background:linear-gradient(180deg,transparent,rgba(182,255,0,.16),transparent);
  animation:svcScan 5.2s linear infinite;pointer-events:none}
@keyframes svcScan{0%{top:-30%}70%,100%{top:130%}}

/* RATES — acid plate w/ barcode + currency chip, tilted */
.svc-hero__line2{display:block;margin-top:.2em}
.svc-rates{display:inline-flex;align-items:center;gap:1.1rem;rotate:-1.6deg;
  background:var(--acid);color:var(--bg);padding:.35rem 1.4rem .45rem .9rem;
  font-size:clamp(2.2rem,7vw,5.4rem);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  line-height:1;box-shadow:10px 10px 0 rgba(0,0,0,.55);
  clip-path:polygon(0 0,100% 0,97% 88%,2% 100%)}
.svc-barcode{width:44px;height:.62em;flex:none;background:
  repeating-linear-gradient(90deg,var(--bg) 0 3px,transparent 3px 6px,var(--bg) 6px 7px,transparent 7px 11px,var(--bg) 11px 12px,transparent 12px 16px)}
.svc-cur{font-style:normal;font-family:var(--font-m);font-weight:700;font-size:.22em;
  letter-spacing:.08em;border:2px solid var(--bg);padding:.3em .5em;line-height:1}

/* mono tape tags slapped around at angles */
.svc-tape{position:absolute;z-index:2;pointer-events:none;
  font-family:var(--font-m);font-weight:700;font-size:.62rem;letter-spacing:.18em;
  padding:.35rem .7rem;border:1px solid rgba(0,0,0,.4);box-shadow:4px 4px 0 rgba(0,0,0,.5);white-space:nowrap}
.svc-tape--a{top:-1.4rem;right:8%;background:var(--ink);color:var(--bg);rotate:-3deg}
.svc-tape--b{bottom:-.6rem;left:9%;background:var(--magenta);color:var(--bg);rotate:2deg}
.svc-tape--c{bottom:-2.6rem;right:18%;background:rgba(10,10,15,.85);color:var(--cyan);
  border-color:rgba(0,240,255,.5);rotate:-2deg;backdrop-filter:blur(4px)}
/* hover = one glitch burst on the whole lockup */
.svc-hero:hover .svc-slice::before{animation:glitchA .5s steps(1,end) 3}
.svc-hero:hover .svc-slice::after{animation:glitchB .5s steps(1,end) 3 .05s}

@media (max-width:768px){
  .svc-tape--c{display:none}
  .svc-tape--a{top:-1rem;right:0;rotate:-2deg}
  .svc-datarow{gap:.7rem;font-size:.52rem}
  .svc-datarow__cell:nth-child(3){display:none}
  .svc-rates{clip-path:none}
}

/* ctOS beacons — bright inverted arrows, per-arrow VIBGYOR hue cycle +
   pulse glow. Hue on the img, glow via the wrapper's drop-shadow (no
   filter-property collision between the two animations). */
.svc-hero{display:flex;align-items:stretch;justify-content:center;gap:clamp(1.2rem,3.5vw,3rem)}
.svc-hero__stack{display:flex;flex-direction:column;justify-content:center}
.svc-beacons{display:flex;flex-direction:column;justify-content:space-between;
  align-self:stretch;padding:.15em 0;
  font-size:var(--svc-arrow,88px)}
.svc-beacons i{display:grid;place-items:center;width:1em;height:1em;flex:none;position:relative;
  animation:beaconPulse 2.4s var(--ease) infinite}
.svc-beacons img{width:100%;height:100%;object-fit:contain;display:block;
  animation:beaconHue 8s linear infinite}
/* per-arrow hue phase (random-looking; neighbors never match) */
.svc-beacons--r i:nth-child(1){--hue:0deg}   .svc-beacons--r i:nth-child(1) img{animation-delay:0s}
.svc-beacons--r i:nth-child(2){--hue:105deg}.svc-beacons--r i:nth-child(2) img{animation-delay:-1.1s}
.svc-beacons--r i:nth-child(3){--hue:210deg}.svc-beacons--r i:nth-child(3) img{animation-delay:-2.2s}
.svc-beacons--l i:nth-child(1){--hue:52deg}  .svc-beacons--l i:nth-child(1) img{animation-delay:-1.7s}
.svc-beacons--l i:nth-child(2){--hue:157deg} .svc-beacons--l i:nth-child(2) img{animation-delay:-.6s}
.svc-beacons--l i:nth-child(3){--hue:262deg} .svc-beacons--l i:nth-child(3) img{animation-delay:-2.8s}
/* bright idle: inverted (light wireframe) + tinted, full VIBGYOR rotation.
   sepia first = grayscale-agnostic colorization; saturate pushes the hues. */
@keyframes beaconHue{
  0%  {filter:invert(1) brightness(1.05) sepia(1) saturate(5) hue-rotate(var(--hue,0deg))}
  100%{filter:invert(1) brightness(1.05) sepia(1) saturate(5) hue-rotate(calc(var(--hue,0deg) + 360deg))}
}
/* pulse: glow blooms on the wrapper (drop-shadow of the colored child
   works here because the img inside is already tinted) */
@keyframes beaconPulse{
  0%,55%,100%{transform:translateY(0);filter:drop-shadow(0 0 3px (#B6FF00))}
  12%{transform:translateY(4px);filter:drop-shadow(0 0 10px rgba(255,255,255,.65)) drop-shadow(0 0 28px rgba(255,255,255,.35))}
  30%{filter:drop-shadow(0 0 5px rgba(255,255,255,.3))}
}
/* drip tick under the lit arrow */
.svc-beacons i::after{content:"";position:absolute;left:50%;top:calc(100% + 2px);width:3px;height:0;
  transform:translateX(-50%);background:#fff;opacity:0;box-shadow:0 0 8px rgba(255,255,255,.7)}
.svc-beacons--r i:nth-child(1)::after{animation:beaconDrip 2.4s var(--ease) infinite}
.svc-beacons--r i:nth-child(2)::after{animation:beaconDrip 2.4s var(--ease) infinite .25s}
.svc-beacons--r i:nth-child(3)::after{animation:beaconDrip 2.4s var(--ease) infinite .5s}
.svc-beacons--l i:nth-child(1)::after{animation:beaconDrip 2.4s var(--ease) infinite -.8s}
.svc-beacons--l i:nth-child(2)::after{animation:beaconDrip 2.4s var(--ease) infinite -.55s}
.svc-beacons--l i:nth-child(3)::after{animation:beaconDrip 2.4s var(--ease) infinite -.3s}
@keyframes beaconDrip{
  0%,55%,100%{height:0;opacity:0}
  15%{height:12px;opacity:.85}
  40%{height:16px;opacity:0}
}
@media (max-width:768px){
  .svc-hero{gap:.9rem}
  .svc-beacons{font-size:clamp(44px,12vw,64px);padding:.1em 0}
}

/* results-head (work.html) — added v20, consolidated here */
.results-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:.85rem;margin-bottom:2.75rem}
.results-head .mono-dim{letter-spacing:.18em}

/* about stats (about.html) — added v20, consolidated here */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:clamp(3rem,7vw,5rem)}
.stat{--sc:var(--cyan);position:relative;overflow:hidden;background:var(--bg-2);
  border:1px solid color-mix(in srgb,var(--sc) 45%,transparent);
  padding:1.9rem 1.5rem 1.6rem;cursor:default;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  animation:statBorder 9s linear infinite}
.stat:nth-child(2){--sc:#fc3189;animation-delay:-1.3s}
.stat:nth-child(3){--sc:#b4fd05;animation-delay:-2.6s}
.stat:nth-child(4){--sc:#9D4EDD;animation-delay:-3.9s}
@keyframes statBorder{0%,100%{border-color:color-mix(in srgb,var(--sc) 45%,transparent)}50%{border-color:var(--sc)}}
.stat::after{content:"";position:absolute;left:0;right:0;top:-40%;height:36%;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--sc) 14%,transparent),transparent);
  transition:top .6s var(--ease)}
.stat:hover{transform:translateY(-6px);box-shadow:8px 8px 0 color-mix(in srgb,var(--sc) 30%,transparent)}
.stat:hover::after{top:120%}
.stat b{display:block;font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:700;line-height:1.05;
  color:var(--sc);font-variant-numeric:tabular-nums}
.stat:hover b{animation:statGlitch .38s steps(2,end)}
@keyframes statGlitch{
  0%{transform:translate(0);text-shadow:none}
  25%{transform:translate(-3px,1px);text-shadow:3px 0 var(--cyan),-3px 0 var(--magenta)}
  50%{transform:translate(2px,-1px);text-shadow:-3px 0 var(--cyan),3px 0 var(--magenta)}
  75%{transform:translate(-1px,0);text-shadow:2px 0 var(--cyan)}
  100%{transform:translate(0);text-shadow:none}
}
.stat span{display:block;margin-top:.7rem;font-family:var(--font-m);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
@media (max-width:768px){
  .stats{grid-template-columns:1fr 1fr;gap:.9rem}
  .stat{padding:1.4rem 1.1rem 1.2rem}
}

/* ==========================================================================
   v27 — MOBILE PERFORMANCE PASS (additive overrides; desktop untouched)
   ========================================================================== */

/* svh fallback for older mobile browsers */
.hero{min-height:100vh;min-height:100svh}

/* skip rendering far-below-fold sections until scrolled near — the single
   biggest mobile win. Layout is reserved so ScrollTrigger stays accurate. */
.section,.statement{content-visibility:auto;contain-intrinsic-size:auto 720px}

@media (max-width:768px){
  /* grain: freeze it — static noise at 1x area instead of an animated 4x layer */
  .grain{inset:0;animation:none;background-size:170px;opacity:.05}

  /* nav: lighter frosted glass (18px blur is GPU-pricey on phones) */
  .site-header{backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4)}

  /* masthead glitch: transform/opacity only — no clip-path repainting */
  .masthead__row--2::before{animation:glitchSoft 5.4s steps(1,end) infinite}
  .masthead__row--2::after{animation:glitchSoft 5.4s steps(1,end) infinite .35s}

  /* belts: straight on small screens — no oversized rotated layers,
     no edge clipping */
  .marquee--a,.marquee--b{transform:none}

  /* hazard stripe: slower color cycle = fewer repaints */
  .stripe{animation-duration:16s}
  .stripe span{animation-duration:16s}

  /* trailer: lighter idle shadow; no hover-shift on touch */
  .trailer__screen{box-shadow:6px 6px 0 rgba(244,244,247,.12)}
  .trailer:hover .trailer__screen{box-shadow:4px 4px 0 var(--acid);transform:none}

  /* respect the home-indicator area at the hero's bottom edge */
  .hero{padding-bottom:max(2rem,env(safe-area-inset-bottom))}
}
/* cheaper mobile glitch — same rhythm, zero clip-path */
@keyframes glitchSoft{
  0%,86%,100%{transform:translate(0,0);opacity:1}
  87%{transform:translate(-.045em,.012em);opacity:.7}
  90%{transform:translate(.04em,-.012em);opacity:1}
  93%{transform:translate(-.03em,.008em);opacity:.8}
  96%{transform:translate(.042em,-.006em);opacity:1}
}