/* ============================================================
   SparkPlug Content — v2 "stark typographic gallery"
   ============================================================ */

:root{
  --white:#ffffff;
  --ink:#000000;
  --charcoal:#171717;
  --granite:#5e5e5e;
  --mist:#d2d2d7;
  --wash:#fdf0e6;
  --copper:#D4752E;
  --copper-dark:#B65F1F;
  --link-copper:#E8924A;

  --shell:1200px;
  --gutter:24px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --section-gap:clamp(72px,9vw,120px);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  color-scheme:light;
}

body{
  margin:0;
  background:var(--white);
  color:var(--charcoal);
  font-family:"Satoshi","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a,button,.btn,.card,summary{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(212,117,46,0.12);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--copper);color:#fff}

:focus-visible{
  outline:2px solid var(--copper);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}

/* ─────────── Type scale ─────────── */

.display-xl{
  font-size:clamp(48px,9.2vw,120px);
  font-weight:700;
  line-height:0.9;
  letter-spacing:-0.058em;
  color:var(--ink);
}
.display{
  text-wrap:balance;
  font-size:clamp(42px,7.4vw,93px);
  font-weight:700;
  line-height:1.0;
  letter-spacing:-0.05em;
  color:var(--ink);
}
.heading{
  text-wrap:balance;
  font-size:clamp(32px,4.6vw,53px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-0.046em;
  color:var(--ink);
}
.subheading{
  font-size:clamp(17px,1.6vw,21px);
  font-weight:400;
  line-height:1.5;
  color:var(--granite);
}
.eyebrow{
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--granite);
  margin-bottom:18px;
}

/* ─────────── Buttons & links ─────────── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:46px;
  padding:0 26px;
  border-radius:9999px;
  font-size:15px;
  font-weight:500;
  letter-spacing:-0.01em;
  white-space:nowrap;
  transition:transform .4s var(--ease),background-color .3s var(--ease),
             color .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;
}
.btn--primary{background:var(--copper);color:#fff;border:1px solid var(--copper);position:relative;isolation:isolate}
.btn--primary:hover{background:var(--copper-dark);border-color:var(--copper-dark);transform:scale(1.03)}
/* sparkRotate ring - ported from the original SparkPlug site */
.btn--primary::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from 0deg,transparent,rgba(212,117,46,0.55),transparent,rgba(212,117,46,0.55),transparent);
  opacity:0;transition:opacity .35s var(--ease);
  animation:sparkRotate 3s linear infinite;
}
.btn--primary:hover::before{opacity:1}
.btn--ghost{background:var(--white);color:var(--charcoal);border:1px solid var(--charcoal)}
.btn--ghost:hover{transform:scale(1.03);background:var(--charcoal);color:#fff}
.btn:active{transform:scale(0.99)}
.btn--block{display:flex;width:100%;margin-top:auto}

.textlink{
  display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:500;color:var(--charcoal);
  transition:color .3s var(--ease);
}
.textlink span{transition:transform .4s var(--ease);display:inline-block}
.textlink:hover{color:var(--copper)}
.textlink:hover span{transform:translateX(4px)}
.textlink--copper{color:var(--link-copper)}
.textlink--copper:hover{color:var(--copper-dark)}

/* ─────────── Nav ─────────── */

.nav{
  position:sticky;top:0;z-index:100;
  background:var(--white);
  border:0;box-shadow:none;
  transition:box-shadow .4s var(--ease);
}
.nav.is-stuck{box-shadow:0 1px 0 var(--mist)}
.nav__inner{
  display:flex;align-items:center;gap:32px;
  height:72px;
}
.wordmark{
  font-size:20px;font-weight:700;letter-spacing:-0.04em;color:var(--ink);
  margin-right:auto;
}
.wordmark span{color:var(--copper)}
.wordmark--sm{font-size:16px;margin-right:0}

.nav__links{display:flex;gap:30px}
.nav__links a{
  font-size:15px;font-weight:400;color:var(--charcoal);
  position:relative;transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--copper);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{color:var(--copper)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__links a.is-active{color:var(--copper)}

.nav__toggle{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:6px}
.nav__toggle span{display:block;height:1.5px;background:var(--charcoal);transition:transform .4s var(--ease),opacity .3s}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.nav__mobile{
  display:none;flex-direction:column;gap:4px;
  padding:8px var(--gutter) 24px;
  border-top:1px solid var(--mist);
}
.nav__mobile a{padding:12px 0;font-size:17px;color:var(--charcoal)}
.nav__mobile .btn{margin-top:10px;align-self:flex-start;padding-inline:30px}

/* ─────────── Word-mask headline animation ─────────── */

[data-split]{overflow:visible}
.mask{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:0.14em;
  margin-bottom:-0.14em;
}
.mask__inner{
  display:inline-block;
  transform:translateY(115%);
  transition:transform 1s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:transform;
}
.is-in .mask__inner{transform:translateY(0)}

/* generic reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ─────────── Hero ─────────── */

.hero{
  padding-top:clamp(40px,5.5vw,76px);
  padding-bottom:clamp(48px,6.5vw,92px);
  position:relative;
  overflow-x:clip;
}
.hero__grid{
  display:grid;
  grid-template-columns:45fr 55fr;
  gap:clamp(36px,5vw,72px);
  align-items:center;
}
.badge{
  display:inline-block;
  border:1px solid var(--mist);
  border-radius:9999px;
  padding:7px 16px;
  font-size:13px;
  color:var(--granite);
  margin-bottom:clamp(24px,2.8vw,34px);
}
.hero__title{
  font-size:clamp(40px,4.9vw,74px);
  line-height:0.95;
  text-wrap:balance;
}
.hero__sub{
  text-wrap:pretty;
  margin:clamp(20px,2.4vw,30px) 0 0;
  max-width:46ch;
}
.hero__sub span{color:var(--copper)}
.hero__actions{
  display:flex;align-items:center;gap:26px;
  margin-top:clamp(26px,3vw,36px);
  flex-wrap:wrap;
}

/* ─────────── Ticker ─────────── */

.ticker{
  border-top:1px solid var(--mist);
  border-bottom:1px solid var(--mist);
  overflow:hidden;
  padding:22px 0;
  margin-top:clamp(20px,4vw,48px);
}
.ticker__track{
  display:flex;
  width:max-content;
  animation:marquee 42s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex;align-items:center;gap:22px;padding-right:22px}
.ticker__group span{
  font-size:clamp(15px,1.7vw,21px);
  font-weight:500;letter-spacing:-0.02em;color:var(--charcoal);
  white-space:nowrap;
}
.ticker__group i{color:var(--copper);font-style:normal;font-size:18px}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ─────────── Sections ─────────── */

.section{padding-block:var(--section-gap)}
.section__head{
  max-width:760px;
  margin-bottom:clamp(40px,4.6vw,64px);
}
.section__lede{
  text-wrap:pretty;
  margin-top:20px;
  font-size:clamp(16px,1.5vw,19px);
  color:var(--granite);
  max-width:56ch;
}

.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{
  background:var(--white);
  border:1px solid var(--charcoal);
  border-radius:8px;
  padding:20px;
  display:flex;flex-direction:column;
}

/* ─────────── Work ─────────── */

.work{transition:transform .6s var(--ease),border-color .4s var(--ease)}
.work:hover{transform:translateY(-4px)}
.work__preview{
  border-radius:22px;
  aspect-ratio:16/11;
  display:flex;align-items:flex-end;
  padding:18px;
  margin-bottom:18px;
  overflow:hidden;
  border:1px solid var(--mist);
}
.work__name{
  overflow-wrap:break-word;
  font-size:21px;font-weight:500;letter-spacing:-0.03em;color:var(--ink);
  line-height:1.25;
}
.work__desc{
  margin-top:8px;margin-bottom:18px;
  color:var(--granite);
}
.work .textlink{margin-top:auto;align-self:flex-start}

/* ─────────── Services ─────────── */

.svc__num{
  font-size:12px;font-weight:500;letter-spacing:0.1em;color:var(--copper);
  margin-bottom:34px;
}
.svc h3{
  font-size:19px;font-weight:500;letter-spacing:-0.025em;color:var(--ink);
  line-height:1.3;
}
.svc p{margin-top:8px;color:var(--granite)}

/* ─────────── Stats ─────────── */

.stats{background:var(--wash);padding-block:clamp(48px,6vw,72px)}
.stats__inner{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.stat{display:flex;flex-direction:column;gap:6px}
.stat__num{
  font-size:clamp(34px,4.4vw,53px);
  font-weight:700;line-height:1;letter-spacing:-0.046em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat__label{font-size:14px;color:var(--granite)}

/* ─────────── Pricing ─────────── */

.pricing .price{padding:24px;position:relative}
.price--featured{border-color:var(--copper);border-width:1px;background:var(--white)}
.price__tag{
  position:absolute;top:-11px;left:24px;
  background:var(--copper);color:#fff;
  font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  padding:4px 12px;border-radius:9999px;
}
.price__name{
  font-size:21px;font-weight:500;letter-spacing:-0.03em;color:var(--ink);
}
.price__amount{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:10px;padding-bottom:20px;margin-bottom:20px;
  border-bottom:1px solid var(--mist);
  font-size:clamp(32px,3.6vw,42px);font-weight:700;letter-spacing:-0.04em;color:var(--ink);
  line-height:1.05;
}
.price__amount span{font-size:14px;font-weight:400;letter-spacing:0;color:var(--granite)}
.price--featured .price__amount{color:var(--copper)}
.price__list{display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.price__list li{
  position:relative;padding-left:20px;color:var(--charcoal);
}
.price__list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--mist);
}
.price--featured .price__list li::before{background:var(--copper)}
.pricing__note{
  margin-top:24px;color:var(--granite);font-size:14px;
}

/* ─────────── CTA / contact ─────────── */

.cta{
  padding-block:clamp(80px,10vw,140px);
  border-top:1px solid var(--mist);
}
.cta__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.cta__title{max-width:14ch}
.cta__sub{margin-top:22px;max-width:52ch}
.cta__actions{margin-top:32px}

.contact{
  margin-top:clamp(48px,6vw,72px);
  display:flex;align-items:stretch;justify-content:center;gap:0;
  flex-wrap:wrap;
  border:1px solid var(--charcoal);
  border-radius:8px;
  overflow:hidden;
  max-width:900px;width:100%;
}
.contact__item{
  flex:1 1 220px;
  display:flex;flex-direction:column;gap:6px;
  padding:22px 24px;
  text-align:left;
  transition:background-color .35s var(--ease);
}
a.contact__item:hover{background:var(--wash)}
.contact__label{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--granite)}
.contact__value{overflow-wrap:break-word;font-size:19px;font-weight:500;letter-spacing:-0.025em;color:var(--ink)}
a.contact__item:hover .contact__value{color:var(--copper)}
.contact__rule{width:1px;background:var(--mist);align-self:stretch}

/* ─────────── Footer ─────────── */

.footer{
  border-top:1px solid var(--mist);
  padding-block:36px;
  background:var(--white);
}
.footer__inner{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.footer__links{display:flex;gap:22px;flex-wrap:wrap;margin-inline:auto}
.footer__links a{font-size:14px;color:var(--granite);transition:color .3s var(--ease)}
.footer__links a:hover{color:var(--copper)}
.footer__meta{font-size:13px;color:var(--granite)}

/* ─────────── Responsive ─────────── */

@media (max-width:1000px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .stats__inner{grid-template-columns:repeat(2,1fr);gap:32px 24px}
}

@media (max-width:760px){
  :root{--gutter:20px}
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .nav__mobile[data-open]{display:flex}
  .grid--3{grid-template-columns:1fr}
  .hero__title{max-width:100%}
  .br-desktop{display:none}
  .contact__rule{display:none}
  .contact__item{flex:1 1 100%;border-bottom:1px solid var(--mist)}
  .contact__item:last-child{border-bottom:0}
  .footer__inner{flex-direction:column;align-items:flex-start;gap:18px}
  .footer__links{margin-inline:0}
  .ticker__group span{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker__track,.spark-dot,.logo-spark .spark-flash,
  .hero__stage *,.btn--primary::before{
    animation:none!important;
  }
  .spark-dot{display:none}
  [data-reveal],.mask__inner{transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .mask__inner{transform:none}
  .btn:hover,.work:hover{transform:none}
}


/* ════════════════════════════════════════════════════════════
   SPARK MOTIF - ported from the original SparkPlug Content site
   (sparkTravel, sparkRotate, logoSpark1-3), retuned for a white
   canvas: smaller dots, softer glows, slower cycles.
   ════════════════════════════════════════════════════════════ */

@keyframes sparkRotate{to{transform:rotate(360deg)}}

@keyframes sparkTravel{
  0%{left:-8px;opacity:0}
  6%{opacity:1}
  94%{opacity:1}
  100%{left:100%;opacity:0}
}

/* Traveling spark along the client-ticker hairline */
.ticker{position:relative}
.spark-dot{
  position:absolute;top:-3px;left:-8px;
  width:6px;height:6px;border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 8px rgba(212,117,46,0.55),0 0 16px rgba(212,117,46,0.22);
  animation:sparkTravel 9s linear infinite;
  pointer-events:none;z-index:2;
}

/* Wordmark asterisk flicker - the plug firing */
.logo-spark{position:relative}
.logo-spark .spark-flash{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 6px rgba(212,117,46,0.75);
  opacity:0;pointer-events:none;
}
.logo-spark .spark-flash:nth-of-type(1){top:3px;right:-5px;animation:logoSpark1 3s ease-in-out infinite}
.logo-spark .spark-flash:nth-of-type(2){top:11px;right:-7px;animation:logoSpark2 4s ease-in-out infinite 1s}
.logo-spark .spark-flash:nth-of-type(3){top:-1px;right:2px;animation:logoSpark3 3.5s ease-in-out infinite .5s}

@keyframes logoSpark1{
  0%,85%,100%{opacity:0;transform:scale(0.5)}
  88%{opacity:1;transform:scale(1.2)}
  91%{opacity:0.3;transform:scale(0.8)}
  94%{opacity:0.8;transform:scale(1)}
}
@keyframes logoSpark2{
  0%,70%,100%{opacity:0;transform:scale(0.5)}
  73%{opacity:1;transform:scale(1.3)}
  76%{opacity:0}
  79%{opacity:0.7;transform:scale(1)}
}
@keyframes logoSpark3{
  0%,60%,100%{opacity:0;transform:scale(0.5)}
  63%{opacity:0.9;transform:scale(1.1)}
  66%{opacity:0.2}
  69%{opacity:0.8;transform:scale(1)}
}

/* ─── work cards: real screenshots instead of flat gradients ─── */

.work__preview{
  position:relative;
  padding:0;
  background:#f5f5f7;
  align-items:stretch;
}
.work__shot{
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
  border-radius:inherit;
  transition:transform 1.1s var(--ease);
}
.work:hover .work__shot{transform:scale(1.03)}

/* the hero loop runs ~40 animated nodes - park it when nobody is looking */
.hero__stage.is-idle *{animation-play-state:paused}

/* ════════════════════════════════════════════════════════════
   HERO LAPTOP — a photoreal silver unibody on which a black
   mini-site shuffles through eight design styles on a 44s clock.
   Base styles describe the FINISHED mini-site; the keyframes
   walk each element from hidden → built → shipped, so
   reduced-motion (animation:none) lands on the finished state
   for free. Timeline: 0-1.5s void + caret + violet sweep ·
   1.5-4s constellation ignites · 4-7s typography types in ·
   7-9.5s CTA + nav land · 9.5-11s click + Live · 11-12s reset.
   ════════════════════════════════════════════════════════════ */

.hero__stage{position:relative;min-width:0}

/* ── chassis: photoreal silver aluminum unibody ── */
.lap{position:relative;width:min(100%,640px);margin-inline:auto;z-index:1;perspective:1400px}
.lap__tilt{transform:rotateX(4deg);transform-origin:50% 62%}
.lap__lid{
  position:relative;
  background:linear-gradient(180deg,#f4f4f6 0%,#e8e8ea 22%,#dadade 70%,#c9c9cd 100%);
  border-radius:clamp(12px,2vw,18px) clamp(12px,2vw,18px) clamp(6px,1vw,9px) clamp(6px,1vw,9px);
  padding:clamp(2px,0.4vw,3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    inset 1px 0 0 rgba(255,255,255,0.35),
    inset -1px 0 0 rgba(255,255,255,0.35),
    0 2px 5px rgba(23,23,23,0.12);
}
.lap__bezel{
  position:relative;
  background:linear-gradient(180deg,#131316 0%,#0a0a0d 100%);
  border-radius:clamp(10px,1.7vw,15px) clamp(10px,1.7vw,15px) clamp(4px,0.7vw,7px) clamp(4px,0.7vw,7px);
  padding:clamp(7px,1.2vw,10px);
  padding-top:clamp(11px,1.9vw,16px);
  overflow:hidden;
}
.lap__cam{
  position:absolute;top:clamp(4px,0.7vw,6px);left:50%;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#3c4254 0%,#15171d 55%,#050507 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,0.05);
}
.lap__screen{
  position:relative;
  aspect-ratio:16/10;
  background:#000;
  border-radius:clamp(3px,0.6vw,5px);
  overflow:hidden;
  container-type:inline-size;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.045);
}
.lap__sheen{
  position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  background:linear-gradient(122deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.035) 26%,rgba(255,255,255,0) 43%);
}
.lap__hinge{
  width:92%;margin-inline:auto;
  height:clamp(5px,0.85vw,7px);
  background:linear-gradient(180deg,#9a9aa0 0%,#5c5c62 30%,#3f3f45 62%,#6d6d73 100%);
  border-radius:0 0 5px 5px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.5);
}
.lap__deck{
  width:114%;margin-left:-7%;
  height:clamp(11px,1.9vw,16px);
  background:
    repeating-linear-gradient(90deg,rgba(23,23,23,0.05) 0 1.5px,rgba(255,255,255,0) 1.5px 24px),
    linear-gradient(180deg,rgba(23,23,23,0.06) 0 28%,rgba(255,255,255,0) 28% 36%,rgba(23,23,23,0.05) 36% 62%,rgba(255,255,255,0) 62% 100%),
    linear-gradient(180deg,#eeeef0 0%,#e2e2e5 45%,#d3d3d7 100%);
  border-radius:4px 4px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95);
}
.lap__front{
  width:114%;margin-left:-7%;position:relative;
  height:clamp(6px,1.1vw,9px);
  background:linear-gradient(180deg,#d6d6da 0%,#bcbcc1 55%,#a8a8ae 100%);
  border-radius:2px 2px 12px 12px;
  box-shadow:0 10px 22px rgba(23,23,23,0.16);
}
.lap__front::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:13%;height:52%;
  background:linear-gradient(180deg,#9d9da3 0%,#c2c2c7 100%);
  border-radius:0 0 8px 8px;
}
.lap__shadow{
  position:absolute;left:50%;bottom:clamp(-30px,-2.6vw,-16px);transform:translateX(-50%);
  width:112%;height:clamp(20px,3.4vw,34px);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at center,rgba(23,23,23,0.30) 0%,rgba(23,23,23,0.12) 52%,rgba(23,23,23,0) 74%);
  filter:blur(5px);z-index:-1;
}

/* ── the stage: an 8-design shuffle on one 44s clock ──
   Each design panel builds in (~2.5s), holds (~2s), and cross-
   fades to the next (~0.8s). Panels 2-8 mirror the deck originals:
   real photography with Ken Burns drift + each design's signature
   motion. After design 8, a blinking caret on black (~1.3s) hands
   the loop back to design 1 invisibly. Base styles = design 1
   finished (reduced-motion fallback). */
.ms{position:absolute;inset:0;background:#000}
.ms-caret{
  position:absolute;top:7%;left:5%;z-index:8;
  width:max(1.5px,0.45cqw);height:5cqw;
  background:#fff;opacity:0;
  animation:ck 44s linear infinite;
}

/* shared mini-site anatomy */
.dsg{position:absolute;inset:0;opacity:0;overflow:hidden;font-family:"Inter","Satoshi",system-ui,sans-serif}
.dg-nav{position:absolute;left:4.5%;right:4.5%;top:5.5%;display:flex;align-items:center;justify-content:space-between;z-index:3}
.dg-wm{font-size:2.3cqw;font-weight:600;letter-spacing:-0.01em}
.dg-links{font-size:1.55cqw;font-weight:600;letter-spacing:0.14em}
.dg-hero{position:absolute;left:5.5%;top:22%;width:46%;display:flex;flex-direction:column;align-items:flex-start;z-index:2}
.dg-eyebrow{font-size:1.7cqw;font-weight:600;letter-spacing:0.18em}
.dg-h{margin-top:1.7cqw;line-height:1.08}
.dg-h .l{display:block;overflow:hidden}
.dg-h .l i{display:inline-block;font-style:normal;white-space:nowrap}
.dg-body{margin-top:1.9cqw;font-size:1.95cqw;font-weight:400;line-height:1.5}
.dg-btns{margin-top:2.3cqw;display:flex;gap:1.8cqw;align-items:center}
.dg-cta,.dg-ghost{padding:1.4cqw 3cqw;font-size:1.7cqw;font-weight:600;letter-spacing:0.02em}
.dg-media{position:absolute;right:5%;top:19%;width:42%;aspect-ratio:16/10;overflow:hidden;z-index:1}
.dg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kenB var(--kb,18s) ease-in-out infinite alternate}

/* 1 — BLACK VELVET (sparkplug) */
.dsg--velvet{opacity:1;background:#000}
.dsg--velvet .dg-hero{width:60%}
.dsg--velvet .dg-wm{color:#fff}
.dsg--velvet .dg-wm em{font-style:normal;font-weight:700;background:linear-gradient(135deg,#2ab595,#8052ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.dsg--velvet .dg-links{color:#9a9a9a}
.dsg--velvet .dg-eyebrow{color:#ffb829}
.dsg--velvet .dg-h{font-size:7cqw;font-weight:400;letter-spacing:-0.04em;color:#fff}
.dsg--velvet .dg-body{color:#9a9a9a;font-weight:200;font-size:2.1cqw}
.dsg--velvet .dg-cta{background:#8052ff;color:#fff;border-radius:24px}
.msD-halo{
  position:absolute;left:46%;top:14%;width:54%;height:80%;
  background:radial-gradient(ellipse 50% 50% at center,rgba(128,82,255,0.17) 0%,rgba(128,82,255,0.05) 46%,transparent 70%);
  animation:g1halo 44s var(--ease) infinite;
}
.msD-const{
  position:absolute;inset:0;width:100%;height:100%;
  transform-origin:72% 51%;
  animation:msDDrift 26s ease-in-out infinite;
}
.msD-const path{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke}
.msD-const .tw{animation:msDtw var(--t,4s) ease-in-out infinite;animation-delay:var(--d,0s)}
.msD-const .tw.amb{animation-name:msDtwAmb}
.msD-const .cV{stroke:#8052ff}
.msD-const .cA{stroke:#ffb829}
.msD-const .cT{stroke:#2ab595}
.msD-const .cM{stroke:#d357ff}
.msD-const .cB{stroke:#5a7bff}
.msD-const .fl{stroke:none}
.msD-const .fl.cV{fill:#8052ff}
.msD-const .fl.cA{fill:#ffb829}
.msD-const .fl.cT{fill:#2ab595}
.msD-const .fl.cM{fill:#d357ff}
.msD-const .fl.cB{fill:#5a7bff}
.msD-gl{filter:blur(2.6px)}
.msD-gl path{stroke-width:2.4;opacity:0.85}
.ig{transform-box:fill-box;transform-origin:center;animation-duration:44s;animation-timing-function:var(--ease);animation-iteration-count:infinite}
.ig-1{animation-name:g1i1}
.ig-2{animation-name:g1i2}
.ig-3{animation-name:g1i3}
.ig-4{animation-name:g1i4}
.ig-5{animation-name:g1i5}
.ig-a{animation-name:g1ia}
.ig-g{animation-name:g1ig}

/* 2 — SHOWROOM (AURELIO): black stage, roaming amber light, the car */
.dsg--showroom{background:#000}
.a2-stage{
  position:absolute;left:-30%;right:-30%;top:-14%;height:80%;z-index:0;
  background:radial-gradient(closest-side at 50% 50%,rgba(255,192,0,0.22) 0%,rgba(255,192,0,0.07) 40%,transparent 72%);
  animation:a2stage 5.5s ease-in-out infinite;
}
.dsg--showroom .dg-wm{color:#fff;font-family:"Barlow Condensed","Inter",sans-serif;font-weight:600;letter-spacing:0.3em;font-size:2.4cqw}
.dsg--showroom .dg-links{color:#7d7d7d;letter-spacing:0.2em}
.dsg--showroom .dg-eyebrow{color:#ffc000;letter-spacing:0.24em;font-weight:500;font-size:1.55cqw}
.dsg--showroom .dg-h{font-family:"Barlow Condensed","Inter",sans-serif;font-size:12.5cqw;font-weight:600;line-height:0.96;letter-spacing:0.02em;color:#fff;text-transform:uppercase}
.dsg--showroom .dg-body{color:#7d7d7d;font-size:1.6cqw;letter-spacing:0.16em}
.dsg--showroom .dg-cta{background:#ffc000;color:#141414;border-radius:0;font-weight:700;letter-spacing:0.18em;font-size:1.55cqw}
.dsg--showroom .dg-ghost{color:#fff;border:1px solid #494949;border-radius:0;letter-spacing:0.18em;font-size:1.55cqw}
.m2{border-radius:0;background:#181818}
.m2 .dg-img{animation:none;transform:scale(2) translate(30%,8%)}
.a2-sheen{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,0.18) 46%,transparent 58%);
  transform:translateX(-110%);
  animation:a2sheen 44s var(--ease) infinite;
}
.a2-pips{position:absolute;right:5%;top:65.5%;display:flex;gap:1.3cqw;z-index:2;animation:x2 44s var(--ease) infinite}
.a2-pips i{width:4cqw;height:1.5px;background:#494949}
.a2-pips i.is-on{background:#ffc000}
.a2-lbl{
  position:absolute;right:5%;top:70%;z-index:2;
  font-size:1.45cqw;letter-spacing:0.2em;color:#7d7d7d;
  animation:x2 44s var(--ease) infinite;
}

/* 3 — BIOLAB (CODON): lime scan over microscopy */
.dsg--biolab{background:#222f30}
.dsg--biolab .dg-wm{color:#f7f7f5;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:500;font-size:2cqw;letter-spacing:0.1em}
.dsg--biolab .dg-links{color:#c9cbbe;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:400}
.dsg--biolab .dg-eyebrow{color:#cef79e;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:400;letter-spacing:0.14em;font-size:1.55cqw}
.dsg--biolab .dg-h{font-size:7cqw;font-weight:400;letter-spacing:-0.035em;color:#f7f7f5}
.dsg--biolab .dg-body{color:#c9cbbe;font-size:1.85cqw}
.dsg--biolab .dg-cta{background:transparent;color:#cef79e;border:1px solid #cef79e;border-radius:6px;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:500;letter-spacing:0.12em;font-size:1.5cqw}
.m3{border-radius:1.6cqw;background:#0c1412}
.m3 .dg-img{filter:hue-rotate(95deg) saturate(1.05) brightness(0.95)}
.c3-scan{
  position:absolute;left:0;right:0;height:30%;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(206,247,158,0.55),transparent);
  mix-blend-mode:screen;
  animation:c3scan 4.4s cubic-bezier(0.5,0,0.5,1) infinite;
}
.c3-stats{
  position:absolute;left:5.5%;top:76%;width:46%;z-index:2;
  display:flex;gap:4cqw;padding-top:1.8cqw;
  border-top:1px solid rgba(201,203,190,0.18);
  animation:y3 44s var(--ease) infinite;
}
.c3-stats span{display:flex;flex-direction:column;font-size:1.45cqw;color:#c9cbbe}
.c3-stats b{font-size:3.4cqw;font-weight:600;line-height:1.15;color:#f7f7f5}

/* 4 — LITERARY (Fieldnote): serif page, night photograph */
.dsg--literary{background:#fefffc}
.dsg--literary .dg-nav{border-bottom:1px solid #dee2de;padding-bottom:1.4cqw}
.dsg--literary .dg-wm{color:#171717;font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:2.5cqw}
.dsg--literary .dg-wm i{font-style:normal;color:#41a0d8;font-size:1.6cqw;vertical-align:middle}
.dsg--literary .dg-links{color:#8b908b;font-weight:500;letter-spacing:0.06em}
.dsg--literary .dg-eyebrow{color:#8b908b;letter-spacing:0.22em;font-weight:500;font-size:1.45cqw}
.dsg--literary .dg-h{font-family:"Fraunces",Georgia,serif;font-size:7.2cqw;font-weight:400;letter-spacing:-0.01em;line-height:1.1;color:#171717}
.dsg--literary .dg-body{color:#646464;font-size:1.9cqw}
.dsg--literary .dg-cta{background:#171717;color:#fff;border-radius:9999px;font-weight:500}
.f4-rows{
  position:absolute;left:5.5%;top:80%;width:46%;z-index:2;
  display:flex;flex-direction:column;
  animation:y4 44s var(--ease) infinite;
}
.f4-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1.1cqw 0;border-top:1px solid #dee2de;
  font-family:"Fraunces",Georgia,serif;font-size:1.8cqw;color:#171717;
}
.f4-row b{font-family:"Inter",sans-serif;font-weight:400;font-size:1.4cqw;color:#8b908b}
.m4{border-radius:1.4cqw;border:1px solid #dee2de;background:#1b2440}
.f4-star{
  position:absolute;width:0.5cqw;height:0.5cqw;border-radius:50%;background:#fff;opacity:0.2;z-index:2;
  animation:f4tw 2.75s ease-in-out infinite;
}

/* 5 — CONTROL ROOM (Flagpost): violet glow, live toggles, code */
.dsg--control{background:#0e0e0e}
.f5-glow{
  position:absolute;left:-20%;top:0;width:90%;aspect-ratio:1;z-index:0;
  background:radial-gradient(circle,rgba(64,91,255,0.26) 0%,transparent 62%);
  animation:f5glow 5.5s ease-in-out infinite;
}
.dsg--control .dg-wm{color:#fff}
.dsg--control .dg-links{color:#a7a9ac}
.dsg--control .dg-eyebrow{color:#7084ff;letter-spacing:0.2em}
.dsg--control .dg-h{font-size:7.2cqw;font-weight:500;letter-spacing:-0.035em;color:#fff}
.dsg--control .dg-h em{font-style:normal;background:linear-gradient(179deg,#405bff,#7084ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.dsg--control .dg-body{color:#a7a9ac}
.f5-input{
  display:flex;align-items:center;gap:2.4cqw;
  background:#191919;border:1px solid rgba(255,255,255,0.1);border-radius:1.3cqw;
  padding:1cqw 1cqw 1cqw 2.2cqw;
  box-shadow:0 0 3.4cqw rgba(64,91,255,0.22);
  font-size:1.6cqw;color:#58595b;
}
.f5-input b{background:#405bff;color:#fff;border-radius:1cqw;padding:1cqw 1.9cqw;font-size:1.6cqw;font-weight:500}
.f5-panel{
  position:absolute;right:5%;top:17%;width:36%;z-index:2;
  background:#191919;border:1px solid rgba(255,255,255,0.08);border-radius:2cqw;
  padding:2.2cqw;display:flex;flex-direction:column;gap:1.9cqw;
  box-shadow:0 0 4cqw rgba(64,91,255,0.18);
  animation:m5 44s var(--ease) infinite;
}
.f5-row{display:flex;align-items:center;justify-content:space-between;gap:1cqw;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:1.55cqw;color:#a7a9ac}
.f5-tg{position:relative;width:4.6cqw;height:2.4cqw;border-radius:9999px;background:#414042;flex:0 0 auto;animation:f5track 5.5s steps(1,end) infinite}
.f5-tg > i{position:absolute;top:0.35cqw;left:0.35cqw;width:1.7cqw;height:1.7cqw;border-radius:50%;background:#fff;animation:f5knob 5.5s var(--ease) infinite}
.f5-tg--b,.f5-tg--b > i{animation-delay:1.8s}
.f5-tg--c,.f5-tg--c > i{animation-delay:3.6s}
.f5-code{
  position:absolute;right:5%;top:56%;width:36%;z-index:2;
  background:#141414;border:1px solid rgba(255,255,255,0.07);border-radius:1.6cqw;
  padding:1.9cqw;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:1.5cqw;line-height:1.7;color:#6d6e71;
  animation:x5 44s var(--ease) infinite;
}
.f5-code em{font-style:normal;color:#7084ff}
.f5-code i{font-style:normal;color:#7084ff;animation:f5caret 1.1s steps(2,jump-none) infinite}
.f5-logos{
  position:absolute;left:5.5%;top:83%;width:46%;z-index:2;
  display:flex;justify-content:space-between;
  padding-top:1.6cqw;border-top:1px solid rgba(255,255,255,0.09);
  animation:y5 44s var(--ease) infinite;
}
.f5-logos i{font-style:normal;font-size:1.5cqw;font-weight:700;color:#6d6e71;letter-spacing:0.08em}

/* 6 — PASTORAL (Meadowlark): green bar, farm photo, quilt, lime marquee */
.dsg--pastoral{background:#f1efdf}
.dsg--pastoral .dg-nav{left:0;right:0;top:0;height:12.5%;padding:0 4.5%;background:#07503f}
.dsg--pastoral .dg-wm{color:#f1efdf;font-family:"Fraunces",Georgia,serif;font-weight:500}
.dsg--pastoral .dg-links{color:rgba(241,239,223,0.78);font-weight:500;letter-spacing:0.05em}
.dsg--pastoral .dg-hero{top:24%}
.dsg--pastoral .dg-eyebrow{color:#07503f;letter-spacing:0.2em;font-size:1.45cqw}
.dsg--pastoral .dg-h{font-family:"Fraunces",Georgia,serif;font-size:6.6cqw;font-weight:400;line-height:1.06;color:#07503f}
.dsg--pastoral .dg-body{color:#6d6d6d}
.dsg--pastoral .dg-cta{background:#07503f;color:#f1efdf;border-radius:100px;padding:1.6cqw 3.4cqw}
.dsg--pastoral .dg-ghost{color:#07503f;border:1px solid #c9c7b4;border-radius:100px}
.m6{top:16%;border-radius:1.6cqw;background:#5c8a5a}
.m6-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(7,60,47,0.72) 100%)}
.m6-cap{
  position:absolute;left:7%;bottom:7%;z-index:2;display:flex;flex-direction:column;gap:0.5cqw;
  font-size:1.5cqw;color:rgba(241,239,223,0.85);
}
.m6-cap b{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:3.1cqw;color:#fff;line-height:1.1}
.m6-quilt{position:absolute;right:5%;top:63.5%;width:42%;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw;z-index:1}
.m6-quilt i{aspect-ratio:1/0.82;border-radius:1.2cqw;background:#b2cee7;display:flex;align-items:flex-end;padding:1.2cqw}
.m6-quilt i.q2{background:#f3c9a8}
.m6-quilt i.q3{background:#a8bf9a}
.m6-quilt span{font-size:1.4cqw;color:#07503f;font-weight:500}
.m6-quilt i:nth-child(1){animation:g6t1 44s var(--ease) infinite}
.m6-quilt i:nth-child(2){animation:g6t2 44s var(--ease) infinite}
.m6-quilt i:nth-child(3){animation:g6t3 44s var(--ease) infinite}
.m6-marq{position:absolute;left:0;right:0;bottom:0;overflow:hidden;background:#e8fe85;padding:1.2cqw 0;z-index:2;animation:y6 44s var(--ease) infinite}
.m6-mt{display:inline-block;white-space:nowrap;font-size:1.5cqw;letter-spacing:0.14em;font-weight:600;color:#07503f;animation:marqX 16s linear infinite}

/* 7 — AVIATION (SKYLARK): pale sky, jet photograph, clay card, route */
.dsg--aviation{background:#fff}
.dsg--aviation .dg-wm{color:#000d10;font-weight:700;letter-spacing:0.18em;font-size:2cqw}
.dsg--aviation .dg-links{color:#8e8e95;letter-spacing:0.16em}
.dsg--aviation .dg-hero{width:46%;top:19%}
.dsg--aviation .dg-eyebrow{color:#8e8e95;letter-spacing:0.24em;font-size:1.45cqw}
.dsg--aviation .dg-h{font-size:10.6cqw;font-weight:700;letter-spacing:-0.045em;line-height:0.94;color:#000d10}
.dsg--aviation .dg-body{color:#8e8e95;font-size:1.8cqw}
.dsg--aviation .dg-cta{background:#000d10;color:#fff;border-radius:9999px}
/* .s7-route is rebuilt as a real route map in Addendum 4. */
.m7{border-radius:0;background:#cfe0ea}
.s7-clay{
  position:absolute;right:5%;top:66%;width:42%;z-index:2;
  background:#bc7155;color:#fff;padding:2.2cqw;
  display:flex;flex-direction:column;gap:0.7cqw;
  animation:x7 44s var(--ease) infinite;
}
.s7-clay b{font-size:2.2cqw;font-weight:600}
.s7-clay span{font-size:1.5cqw;color:rgba(255,255,255,0.82);line-height:1.45}
.s7-clay u{text-decoration:none;font-size:1.4cqw;letter-spacing:0.16em;font-weight:700;margin-top:0.6cqw}

/* 8 — STICKER BOOK (RIPTIDE): inflated word, bobbing stickers, crowd */
.dsg--sticker{background:#dceeff}
.r8-logo{background:#000;color:#fff;border-radius:9999px;padding:0.9cqw 2.4cqw;font-size:1.8cqw;font-weight:700;letter-spacing:0.04em}
.dsg--sticker .dg-links{color:#000;font-weight:700}
.r8-plus{
  width:3.4cqw;height:3.4cqw;border-radius:50%;background:#fff;border:2px solid #000;
  display:flex;align-items:center;justify-content:center;font-size:2cqw;font-weight:700;color:#000;
}
.dsg--sticker .dg-hero{top:23%;width:50%}
.dsg--sticker .dg-eyebrow{color:#000;font-weight:800;letter-spacing:0.16em}
.dsg--sticker .dg-h{line-height:0.9}
.r8-word{
  font-size:11cqw;font-weight:800;letter-spacing:-0.04em;
  color:#4da2ff;-webkit-text-stroke:0.16cqw #000;
  animation:r8inflate 4.4s ease-in-out infinite;
}
.dsg--sticker .dg-body{color:#4a5a6a;font-weight:600;font-size:1.85cqw}
.dsg--sticker .dg-cta{background:#000;color:#fff;border-radius:1.6cqw;box-shadow:0.45cqw 0.45cqw 0 rgba(0,0,0,0.28)}
.m8{top:17%;border:2px solid #000;border-radius:2.2cqw;box-shadow:0.7cqw 0.7cqw 0 #000;background:#4da2ff}
.r8-qr{
  position:absolute;right:5%;top:64%;width:42%;z-index:2;
  display:flex;align-items:center;gap:1.8cqw;
  background:#5c4ade;border:2px solid #000;border-radius:2.2cqw;padding:1.8cqw;color:#fff;
  animation:x8 44s var(--ease) infinite;
}
.r8-qrbox{
  width:6.4cqw;aspect-ratio:1;border-radius:1cqw;flex:0 0 auto;
  background:conic-gradient(#000 25%,#fff 0 50%,#000 0 75%,#fff 0) 0 0/1.8cqw 1.8cqw,#fff;
}
.r8-qrt{display:flex;flex-direction:column;font-size:1.5cqw;line-height:1.4}
.r8-qrt b{font-size:1.9cqw}
.stw{position:absolute;z-index:4}
.stw--1{left:44%;top:14%;animation:g8s1 44s linear infinite}
.stw--2{left:50%;top:75%;animation:g8s2 44s linear infinite}
.stw--3{right:2.5%;top:11%;animation:g8s3 44s linear infinite}
.stw--4{right:44.5%;top:44%;animation:g8s4 44s linear infinite}
.stw--5{left:2%;top:66%;animation:g8s5 44s linear infinite}
.st{display:block;border:0.4cqw solid #000;animation:r8bob 5.5s ease-in-out infinite}
.st--1{width:4.4cqw;height:4.4cqw;background:#fb4903;border-radius:1.4cqw;--r:-14deg}
.st--2{width:3.6cqw;height:3.6cqw;background:#55db9c;border-radius:50%;--r:12deg;animation-delay:0.7s}
.st--3{width:4cqw;height:4cqw;background:#ffd731;border-radius:50%;--r:-9deg;animation-delay:1.4s}
.st--4{width:3.2cqw;height:3.2cqw;background:#e9ccff;border-radius:1.1cqw;--r:8deg;animation-delay:2.1s}
.st--5{width:3.4cqw;height:3.4cqw;background:#fff;border-radius:1.2cqw;--r:16deg;animation-delay:2.8s}
.r8-marq{position:absolute;left:0;right:0;bottom:0;overflow:hidden;background:#4da2ff;border-top:2px solid #000;padding:1.1cqw 0;z-index:3;animation:y8 44s var(--ease) infinite}
.r8-mt{display:inline-block;white-space:nowrap;font-size:1.5cqw;letter-spacing:0.14em;font-weight:800;color:#000;animation:marqX 14s linear infinite}

.dsg--velvet{animation:w1 44s var(--ease) infinite}
.dsg--velvet .dg-nav{animation:n1 44s var(--ease) infinite}
.dsg--velvet .dg-eyebrow{animation:e1 44s var(--ease) infinite}
.dsg--velvet .l1 i{animation:hA1 44s linear infinite}
.dsg--velvet .l2 i{animation:hB1 44s linear infinite}
.dsg--velvet .dg-body{animation:b1 44s var(--ease) infinite}
.dsg--velvet .dg-btns{animation:c1 44s var(--ease) infinite}
.dsg--showroom{animation:w2 44s var(--ease) infinite}
.dsg--showroom .dg-nav{animation:n2 44s var(--ease) infinite}
.dsg--showroom .dg-eyebrow{animation:e2 44s var(--ease) infinite}
.dsg--showroom .l1 i{animation:hA2 44s var(--ease) infinite}
.dsg--showroom .dg-body{animation:b2 44s var(--ease) infinite}
.dsg--showroom .dg-btns{animation:c2 44s var(--ease) infinite}
.dsg--showroom .dg-media{animation:m2 44s var(--ease) infinite}
.dsg--biolab{animation:w3 44s var(--ease) infinite}
.dsg--biolab .dg-nav{animation:n3 44s var(--ease) infinite}
.dsg--biolab .dg-eyebrow{animation:e3 44s var(--ease) infinite}
.dsg--biolab .l1 i{animation:hA3 44s linear infinite}
.dsg--biolab .l2 i{animation:hB3 44s linear infinite}
.dsg--biolab .dg-body{animation:b3 44s var(--ease) infinite}
.dsg--biolab .dg-btns{animation:c3 44s var(--ease) infinite}
.dsg--biolab .dg-media{animation:m3 44s var(--ease) infinite}
.dsg--literary{animation:w4 44s var(--ease) infinite}
.dsg--literary .dg-nav{animation:n4 44s var(--ease) infinite}
.dsg--literary .dg-eyebrow{animation:e4 44s var(--ease) infinite}
.dsg--literary .l1 i{animation:hA4 44s var(--ease) infinite}
.dsg--literary .l2 i{animation:hB4 44s var(--ease) infinite}
.dsg--literary .dg-body{animation:b4 44s var(--ease) infinite}
.dsg--literary .dg-btns{animation:c4 44s var(--ease) infinite}
.dsg--literary .dg-media{animation:m4 44s var(--ease) infinite}
.dsg--control{animation:w5 44s var(--ease) infinite}
.dsg--control .dg-nav{animation:n5 44s var(--ease) infinite}
.dsg--control .dg-eyebrow{animation:e5 44s var(--ease) infinite}
.dsg--control .l1 i{animation:hA5 44s linear infinite}
.dsg--control .l2 i{animation:hB5 44s linear infinite}
.dsg--control .dg-body{animation:b5 44s var(--ease) infinite}
.dsg--control .dg-btns{animation:c5 44s var(--ease) infinite}
.dsg--control .dg-media{animation:m5 44s var(--ease) infinite}
.dsg--pastoral{animation:w6 44s var(--ease) infinite}
.dsg--pastoral .dg-nav{animation:n6 44s var(--ease) infinite}
.dsg--pastoral .dg-eyebrow{animation:e6 44s var(--ease) infinite}
.dsg--pastoral .l1 i{animation:hA6 44s var(--ease) infinite}
.dsg--pastoral .l2 i{animation:hB6 44s var(--ease) infinite}
.dsg--pastoral .dg-body{animation:b6 44s var(--ease) infinite}
.dsg--pastoral .dg-btns{animation:c6 44s var(--ease) infinite}
.dsg--pastoral .dg-media{animation:m6 44s var(--ease) infinite}
.dsg--aviation{animation:w7 44s var(--ease) infinite}
.dsg--aviation .dg-nav{animation:n7 44s var(--ease) infinite}
.dsg--aviation .dg-eyebrow{animation:e7 44s var(--ease) infinite}
.dsg--aviation .l1 i{animation:hA7 44s var(--ease) infinite}
.dsg--aviation .l2 i{animation:hB7 44s var(--ease) infinite}
.dsg--aviation .dg-body{animation:b7 44s var(--ease) infinite}
.dsg--aviation .dg-btns{animation:c7 44s var(--ease) infinite}
.dsg--aviation .dg-media{animation:m7 44s var(--ease) infinite}
.dsg--sticker{animation:w8 44s var(--ease) infinite}
.dsg--sticker .dg-nav{animation:n8 44s var(--ease) infinite}
.dsg--sticker .dg-eyebrow{animation:e8 44s var(--ease) infinite}
.dsg--sticker .l1 i{animation:hA8 44s var(--ease) infinite}
.dsg--sticker .dg-body{animation:b8 44s var(--ease) infinite}
.dsg--sticker .dg-btns{animation:c8 44s var(--ease) infinite}
.dsg--sticker .dg-media{animation:m8 44s var(--ease) infinite}

/* ── floating work-in-progress fragments ── */
.float{position:absolute;z-index:2;pointer-events:none}
.float--code{top:-4%;left:-5%;transform:rotate(-2deg)}
.float--palette{bottom:-5%;left:6%;transform:rotate(1.5deg)}
.float--score{top:30%;right:-4%}
.float__par{will-change:transform}
.fcard{
  background:rgba(8,8,12,0.86);
  -webkit-backdrop-filter:blur(9px) saturate(1.15);
  backdrop-filter:blur(9px) saturate(1.15);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,0.22),0 0 22px rgba(128,82,255,0.10);
  animation:floatDrift 10s ease-in-out infinite;
}
.fcard__label{font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#9a9a9a}

.fcard--code{width:clamp(116px,9.6vw,150px);padding:10px 12px;display:flex;flex-direction:column;gap:6px;animation-duration:9s}
.fcard__dots{display:flex;gap:4px;margin-bottom:2px}
.fcard__dots i{width:5px;height:5px;border-radius:50%;background:#3a3a44}
.fline{
  display:block;height:4px;border-radius:2px;background:#33333d;
  transform:scaleX(1);transform-origin:left center;
  animation:flineType 7s var(--ease) infinite;
}
.fline--1{width:92%;background:#454550}
.fline--2{width:70%;background:#8052ff;animation-delay:0.4s}
.fline--3{width:82%;animation-delay:0.8s}
.fline--4{width:52%;background:#ffb829;animation-delay:1.2s}

.fcard--palette{padding:10px 12px;display:flex;flex-direction:column;gap:8px;animation-duration:12.5s}
.fcard__swatches{display:flex;gap:6px}
.fsw{width:16px;height:16px;border-radius:5px}
.fsw--1{background:#8052ff;animation:swPulse 4.2s ease-in-out infinite}
.fsw--2{background:#ffb829}
.fsw--3{background:#2ab595}
.fsw--4{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.30)}

.fcard--score{padding:10px 14px 9px;display:flex;flex-direction:column;align-items:center;gap:4px;animation-duration:11s}
.fring-wrap{position:relative;width:46px;height:46px}
.fring-wrap svg{width:100%;height:100%;display:block}
.fring-bg{fill:none;stroke:#2c2c36;stroke-width:3.4}
.fring{
  fill:none;stroke:#8052ff;stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:0;
  transform:rotate(-90deg);transform-origin:center;transform-box:fill-box;
  animation:ringFill 12s var(--ease) infinite;
}
.fscore{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;font-weight:700;letter-spacing:-0.02em;color:#fff;
  font-variant-numeric:tabular-nums;
  animation:fscoreIn 12s linear infinite;
}

/* ── the 12-second master timeline ── */

/* ── the 44-second shuffle timeline ── */
@keyframes w1{
  0%,10.91%{opacity:1}
  12.73%,100%{opacity:0}
}
@keyframes n1{
  0%,0.68%{opacity:0;transform:translateY(-0.8cqw)}
  1.48%,100%{opacity:1;transform:none}
}
@keyframes e1{
  0%,1.14%{opacity:0;transform:translateY(1cqw)}
  1.93%,100%{opacity:1;transform:none}
}
@keyframes hA1{
  0%,1.59%{clip-path:inset(-8% 102% -8% -2%);animation-timing-function:steps(10,end)}
  3.41%,100%{clip-path:inset(-8% -4% -8% -2%)}
}
@keyframes hB1{
  0%,3.41%{clip-path:inset(-8% 102% -8% -2%);animation-timing-function:steps(11,end)}
  4.77%,100%{clip-path:inset(-8% -4% -8% -2%)}
}
@keyframes b1{
  0%,3.86%{opacity:0;transform:translateY(1cqw)}
  4.66%,100%{opacity:1;transform:none}
}
@keyframes c1{
  0%,4.89%{opacity:0;transform:scale(0.94)}
  5.8%,100%{opacity:1;transform:scale(1)}
}
@keyframes w2{
  0%,12.05%{opacity:0}
  13.07%,22.95%{opacity:1}
  24.77%,100%{opacity:0}
}
@keyframes n2{
  0%,12.73%{opacity:0;transform:translateY(-0.8cqw)}
  13.52%,100%{opacity:1;transform:none}
}
@keyframes e2{
  0%,13.18%{opacity:0;transform:translateY(1cqw)}
  13.98%,100%{opacity:1;transform:none}
}
@keyframes hA2{
  0%,13.64%{opacity:0;transform:translateY(105%)}
  14.77%,100%{opacity:1;transform:none}
}
@keyframes hB2{
  0%,14.09%{opacity:0;transform:translateY(105%)}
  15.23%,100%{opacity:1;transform:none}
}
@keyframes b2{
  0%,15.91%{opacity:0;transform:translateY(1cqw)}
  16.7%,100%{opacity:1;transform:none}
}
@keyframes c2{
  0%,16.93%{opacity:0;transform:scale(0.94)}
  17.84%,100%{opacity:1;transform:scale(1)}
}
@keyframes m2{
  0%,14.55%{opacity:0;transform:scale(0.965)}
  16.02%,100%{opacity:1;transform:scale(1)}
}
@keyframes w3{
  0%,24.09%{opacity:0}
  25.11%,35%{opacity:1}
  36.82%,100%{opacity:0}
}
@keyframes n3{
  0%,24.77%{opacity:0;transform:translateY(-0.8cqw)}
  25.57%,100%{opacity:1;transform:none}
}
@keyframes e3{
  0%,25.23%{opacity:0;transform:translateY(1cqw)}
  26.02%,100%{opacity:1;transform:none}
}
@keyframes hA3{
  0%,25.68%{clip-path:inset(-8% 102% -8% -2%);animation-timing-function:steps(5,end)}
  27.5%,100%{clip-path:inset(-8% -4% -8% -2%)}
}
@keyframes hB3{
  0%,27.5%{clip-path:inset(-8% 102% -8% -2%);animation-timing-function:steps(10,end)}
  28.86%,100%{clip-path:inset(-8% -4% -8% -2%)}
}
@keyframes b3{
  0%,27.95%{opacity:0;transform:translateY(1cqw)}
  28.75%,100%{opacity:1;transform:none}
}
@keyframes c3{
  0%,28.98%{opacity:0;transform:scale(0.94)}
  29.89%,100%{opacity:1;transform:scale(1)}
}
@keyframes m3{
  0%,26.59%{opacity:0;transform:scale(0.965)}
  28.07%,100%{opacity:1;transform:scale(1)}
}
@keyframes w4{
  0%,36.14%{opacity:0}
  37.16%,47.05%{opacity:1}
  48.86%,100%{opacity:0}
}
@keyframes n4{
  0%,36.82%{opacity:0;transform:translateY(-0.8cqw)}
  37.61%,100%{opacity:1;transform:none}
}
@keyframes e4{
  0%,37.27%{opacity:0;transform:translateY(1cqw)}
  38.07%,100%{opacity:1;transform:none}
}
@keyframes hA4{
  0%,37.73%{opacity:0;transform:translateY(105%)}
  38.86%,100%{opacity:1;transform:none}
}
@keyframes hB4{
  0%,38.18%{opacity:0;transform:translateY(105%)}
  39.32%,100%{opacity:1;transform:none}
}
@keyframes b4{
  0%,40%{opacity:0;transform:translateY(1cqw)}
  40.8%,100%{opacity:1;transform:none}
}
@keyframes c4{
  0%,41.02%{opacity:0;transform:scale(0.94)}
  41.93%,100%{opacity:1;transform:scale(1)}
}
@keyframes m4{
  0%,38.64%{opacity:0;transform:scale(0.965)}
  40.11%,100%{opacity:1;transform:scale(1)}
}
@keyframes w5{
  0%,48.18%{opacity:0}
  49.2%,59.09%{opacity:1}
  60.91%,100%{opacity:0}
}
@keyframes n5{
  0%,48.86%{opacity:0;transform:translateY(-0.8cqw)}
  49.66%,100%{opacity:1;transform:none}
}
@keyframes e5{
  0%,49.32%{opacity:0;transform:translateY(1cqw)}
  50.11%,100%{opacity:1;transform:none}
}
@keyframes hA5{
  0%,49.77%{clip-path:inset(-8% 102% -8% -2%);animation-timing-function:steps(4,end)}
  51.59%,100%{clip-path:inset(-8% -4% -8% -2%)}
}
@keyframes hB5{
  0%,51.59%{clip-path:inset(-8% 102% -8% -2%);animation-timing-function:steps(10,end)}
  52.95%,100%{clip-path:inset(-8% -4% -8% -2%)}
}
@keyframes b5{
  0%,52.05%{opacity:0;transform:translateY(1cqw)}
  52.84%,100%{opacity:1;transform:none}
}
@keyframes c5{
  0%,53.07%{opacity:0;transform:scale(0.94)}
  53.98%,100%{opacity:1;transform:scale(1)}
}
@keyframes m5{
  0%,50.68%{opacity:0;transform:scale(0.965)}
  52.16%,100%{opacity:1;transform:scale(1)}
}
@keyframes w6{
  0%,60.23%{opacity:0}
  61.25%,71.14%{opacity:1}
  72.95%,100%{opacity:0}
}
@keyframes n6{
  0%,60.91%{opacity:0;transform:translateY(-0.8cqw)}
  61.7%,100%{opacity:1;transform:none}
}
@keyframes e6{
  0%,61.36%{opacity:0;transform:translateY(1cqw)}
  62.16%,100%{opacity:1;transform:none}
}
@keyframes hA6{
  0%,61.82%{opacity:0;transform:translateY(105%)}
  62.95%,100%{opacity:1;transform:none}
}
@keyframes hB6{
  0%,62.27%{opacity:0;transform:translateY(105%)}
  63.41%,100%{opacity:1;transform:none}
}
@keyframes b6{
  0%,64.09%{opacity:0;transform:translateY(1cqw)}
  64.89%,100%{opacity:1;transform:none}
}
@keyframes c6{
  0%,65.11%{opacity:0;transform:scale(0.94)}
  66.02%,100%{opacity:1;transform:scale(1)}
}
@keyframes m6{
  0%,62.73%{opacity:0;transform:scale(0.965)}
  64.2%,100%{opacity:1;transform:scale(1)}
}
@keyframes w7{
  0%,72.27%{opacity:0}
  73.3%,83.18%{opacity:1}
  85%,100%{opacity:0}
}
@keyframes n7{
  0%,72.95%{opacity:0;transform:translateY(-0.8cqw)}
  73.75%,100%{opacity:1;transform:none}
}
@keyframes e7{
  0%,73.41%{opacity:0;transform:translateY(1cqw)}
  74.2%,100%{opacity:1;transform:none}
}
@keyframes hA7{
  0%,73.86%{opacity:0;transform:translateY(105%)}
  75%,100%{opacity:1;transform:none}
}
@keyframes hB7{
  0%,74.32%{opacity:0;transform:translateY(105%)}
  75.45%,100%{opacity:1;transform:none}
}
@keyframes b7{
  0%,76.14%{opacity:0;transform:translateY(1cqw)}
  76.93%,100%{opacity:1;transform:none}
}
@keyframes c7{
  0%,77.16%{opacity:0;transform:scale(0.94)}
  78.07%,100%{opacity:1;transform:scale(1)}
}
@keyframes m7{
  0%,74.77%{opacity:0;transform:scale(0.965)}
  76.25%,100%{opacity:1;transform:scale(1)}
}
@keyframes w8{
  0%,84.32%{opacity:0}
  85.34%,95.23%{opacity:1}
  97.05%,100%{opacity:0}
}
@keyframes n8{
  0%,85%{opacity:0;transform:translateY(-0.8cqw)}
  85.8%,100%{opacity:1;transform:none}
}
@keyframes e8{
  0%,85.45%{opacity:0;transform:translateY(1cqw)}
  86.25%,100%{opacity:1;transform:none}
}
@keyframes hA8{
  0%,85.91%{opacity:0;transform:translateY(105%)}
  87.05%,100%{opacity:1;transform:none}
}
@keyframes hB8{
  0%,86.36%{opacity:0;transform:translateY(105%)}
  87.5%,100%{opacity:1;transform:none}
}
@keyframes b8{
  0%,88.18%{opacity:0;transform:translateY(1cqw)}
  88.98%,100%{opacity:1;transform:none}
}
@keyframes c8{
  0%,89.2%{opacity:0;transform:scale(0.94)}
  90.11%,100%{opacity:1;transform:scale(1)}
}
@keyframes m8{
  0%,86.82%{opacity:0;transform:scale(0.965)}
  88.3%,100%{opacity:1;transform:scale(1)}
}
@keyframes g1i1{
  0%,1.14%{opacity:0;transform:scale(0.92)}
  2.39%,100%{opacity:1;transform:scale(1)}
}
@keyframes g1i2{
  0%,1.93%{opacity:0;transform:scale(0.92)}
  3.18%,100%{opacity:1;transform:scale(1)}
}
@keyframes g1i3{
  0%,2.73%{opacity:0;transform:scale(0.92)}
  3.98%,100%{opacity:1;transform:scale(1)}
}
@keyframes g1i4{
  0%,3.52%{opacity:0;transform:scale(0.92)}
  4.77%,100%{opacity:1;transform:scale(1)}
}
@keyframes g1i5{
  0%,4.32%{opacity:0;transform:scale(0.92)}
  5.57%,100%{opacity:1;transform:scale(1)}
}
@keyframes g1ia{
  0%,1.36%{opacity:0}
  5.23%,100%{opacity:1}
}
@keyframes g1ig{
  0%,4.66%{opacity:0}
  5.91%,100%{opacity:1}
}
@keyframes g1halo{
  0%,3.86%{opacity:0}
  5.68%,100%{opacity:1}
}
@keyframes a2sheen{
  0%,16.36%{transform:translateX(-110%)}
  19.77%,100%{transform:translateX(110%)}
}
@keyframes x2{
  0%,16.36%{opacity:0;transform:translateY(1.2cqw)}
  17.5%,100%{opacity:1;transform:none}
}
@keyframes a2stage{
  0%,100%{transform:translateX(-14%) scale(1)}
  50%{transform:translateX(14%) scale(1.12)}
}
@keyframes y3{
  0%,28.41%{opacity:0;transform:translateY(1.2cqw)}
  29.66%,100%{opacity:1;transform:none}
}
@keyframes c3scan{
  0%{transform:translateY(-120%)}
  100%{transform:translateY(400%)}
}
@keyframes y4{
  0%,40.45%{opacity:0;transform:translateY(1.2cqw)}
  41.7%,100%{opacity:1;transform:none}
}
@keyframes f4tw{
  0%,100%{opacity:0.15;transform:scale(0.7)}
  50%{opacity:0.9;transform:scale(1)}
}
@keyframes x5{
  0%,51.82%{opacity:0;transform:translateY(1.2cqw)}
  53.18%,100%{opacity:1;transform:none}
}
@keyframes y5{
  0%,52.95%{opacity:0;transform:translateY(1.2cqw)}
  54.09%,100%{opacity:1;transform:none}
}
@keyframes f5glow{
  0%,100%{opacity:0.45;transform:scale(0.92)}
  50%{opacity:1;transform:scale(1.06)}
}
@keyframes f5track{
  0%,49%{background:#405bff}
  50%,100%{background:#414042}
}
@keyframes f5knob{
  0%,44%{transform:translateX(2.15cqw)}
  50%,94%{transform:translateX(0)}
  100%{transform:translateX(2.15cqw)}
}
@keyframes f5caret{
  0%{opacity:1}
  50%{opacity:0}
  100%{opacity:1}
}
@keyframes g6t1{
  0%,63.75%{opacity:0;transform:scale(0.85)}
  64.77%,100%{opacity:1;transform:scale(1)}
}
@keyframes g6t2{
  0%,64.32%{opacity:0;transform:scale(0.85)}
  65.34%,100%{opacity:1;transform:scale(1)}
}
@keyframes g6t3{
  0%,64.89%{opacity:0;transform:scale(0.85)}
  65.91%,100%{opacity:1;transform:scale(1)}
}
@keyframes y6{
  0%,65.34%{opacity:0;transform:translateY(100%)}
  66.48%,100%{opacity:1;transform:none}
}
@keyframes x7{
  0%,75.8%{opacity:0;transform:translateY(1.2cqw)}
  77.16%,100%{opacity:1;transform:none}
}
@keyframes y7{
  0%,77.61%{opacity:0;transform:translateY(1.2cqw)}
  78.64%,100%{opacity:1;transform:none}
}
@keyframes x8{
  0%,87.84%{opacity:0;transform:translateY(1.2cqw)}
  89.09%,100%{opacity:1;transform:none}
}
@keyframes y8{
  0%,89.55%{opacity:0;transform:translateY(100%)}
  90.68%,100%{opacity:1;transform:none}
}
@keyframes g8s1{
  0%,86.93%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
  87.95%,100%{opacity:1;transform:scale(1)}
}
@keyframes g8s2{
  0%,87.43%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
  88.45%,100%{opacity:1;transform:scale(1)}
}
@keyframes g8s3{
  0%,87.93%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
  88.95%,100%{opacity:1;transform:scale(1)}
}
@keyframes g8s4{
  0%,88.43%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
  89.45%,100%{opacity:1;transform:scale(1)}
}
@keyframes g8s5{
  0%,88.93%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
  89.95%,100%{opacity:1;transform:scale(1)}
}
@keyframes r8inflate{
  0%,100%{transform:scale(1) rotate(-0.5deg)}
  50%{transform:scale(1.04) rotate(0.5deg)}
}
@keyframes r8bob{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-14%) rotate(calc(var(--r,0deg) * -0.6))}
}
@keyframes marqX{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes kenB{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.12) translate(2%,-1.5%)}
}
@keyframes ck{
  0%,96.9%{opacity:0}
  97.05%,97.6%{opacity:1}
  97.7%,98.35%{opacity:0}
  98.4%,99%{opacity:1}
  99.05%,99.6%{opacity:0}
  99.7%,100%{opacity:1}
}
@keyframes msDtw{
  0%,100%{opacity:0.3}
  50%{opacity:1}
}
@keyframes msDtwAmb{
  0%,100%{opacity:0.12}
  50%{opacity:0.45}
}
@keyframes msDDrift{
  0%,100%{transform:rotate(0deg) translateY(0)}
  50%{transform:rotate(1.4deg) translateY(-1.2%)}
}

@keyframes ringFill{
  0%,30%{stroke-dashoffset:100;opacity:1}
  68%{stroke-dashoffset:0}
  94.5%{stroke-dashoffset:0;opacity:1}
  96.5%{opacity:0}
  97%{stroke-dashoffset:100;opacity:0}
  99%,100%{stroke-dashoffset:100;opacity:1}
}
@keyframes fscoreIn{
  0%,58%{opacity:0.3}
  64%,94.5%{opacity:1}
  97%,100%{opacity:0.3}
}
@keyframes flineType{
  0%{transform:scaleX(0);opacity:1}
  42%{transform:scaleX(1)}
  82%{transform:scaleX(1);opacity:1}
  92%{transform:scaleX(1);opacity:0}
  100%{transform:scaleX(0);opacity:0}
}
@keyframes swPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}
@keyframes floatDrift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* ── hero responsive ── */
@media (max-width:1080px){
  .float--code{left:-2%}
  .float--score{right:-2%}
}
@media (max-width:940px){
  .hero__grid{grid-template-columns:1fr;gap:clamp(40px,7vw,56px)}
  .hero__copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero__sub{margin-inline:auto}
  .hero__actions{justify-content:center}
  .hero__stage{width:100%;max-width:560px;margin-inline:auto}
  .float--code{top:-7%;left:-2%}
  .float--palette{left:2%;bottom:-6%}
}
@media (max-width:560px){
  .float--palette{display:none}
  .float--code{top:-10%;left:-3%}
  .fcard--code{width:104px;padding:8px 10px}
  .fring-wrap{width:38px;height:38px}
  .fcard--score{padding:8px 11px 7px}
}


/* ── deck-original signature motion, added to the shuffle panels ── */

/* aurelio: the headlamp flares once per pass */
.a2-lamp{
  position:absolute;left:47%;top:33%;width:16%;height:22%;z-index:2;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,247,214,0.9) 0%,rgba(255,236,160,0.35) 45%,transparent 72%);
  opacity:0.14;filter:blur(1px);
  animation:a2lamp 5.5s ease-in-out infinite;
}
@keyframes a2lamp{
  0%,62%{opacity:0.14}
  72%,82%{opacity:0.9}
  94%,100%{opacity:0.14}
}

/* codon: the specimen grid blinks under the bioluminescent scan */
.c3-grid{
  position:absolute;right:5%;top:65%;width:42%;z-index:2;overflow:hidden;
  display:grid;grid-template-columns:repeat(12,1fr);gap:1cqw;
  animation:x3 44s var(--ease) infinite;
}
.c3-grid > i{
  aspect-ratio:1;border-radius:50%;background:#4d5757;
  animation:c3blink 2.75s ease-in-out infinite;animation-delay:var(--d,0s);
}
@keyframes c3blink{0%,100%{background:#4d5757}50%{background:#6c7a72}}
.c3-gscan{
  position:absolute;left:0;right:0;height:55%;
  background:linear-gradient(180deg,transparent,rgba(206,247,158,0.4),transparent);
  mix-blend-mode:screen;
  animation:c3scan 4.4s cubic-bezier(0.5,0,0.5,1) infinite;
}
@keyframes x3{
  0%,27.95%{opacity:0;transform:translateY(1.2cqw)}
  29.32%,100%{opacity:1;transform:none}
}

/* fieldnote: the moon rises while the scene breathes toward dawn */
.f4-moon{
  position:absolute;left:69%;top:20%;width:9%;aspect-ratio:1;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 35%,#fffdf0,#e8e2c8);
  box-shadow:0 0 3cqw rgba(255,253,240,0.5);
  animation:f4moon 11s ease-in-out infinite alternate;
}
@keyframes f4moon{0%{top:56%;opacity:0.8}100%{top:12%;opacity:1}}
.m4 .dg-img{animation:kenB var(--kb,18s) ease-in-out infinite alternate,f4dawn 11s ease-in-out infinite alternate}
@keyframes f4dawn{0%{filter:brightness(1)}100%{filter:brightness(1.18)}}

/* meadow: the low sun swells softly over the field */
.m6-sun{
  position:absolute;left:40%;top:26%;width:30%;aspect-ratio:1;z-index:2;pointer-events:none;
  background:radial-gradient(circle at center,rgba(255,242,204,0.55) 0%,rgba(255,242,204,0.18) 45%,transparent 70%);
  animation:m6sun 5.5s ease-in-out infinite;
}
@keyframes m6sun{0%,100%{opacity:0.45;transform:scale(0.94)}50%{opacity:0.9;transform:scale(1.05)}}

/* skylark: the flight now runs on the JFK->ASE route map (Addendum 4);
   the old glyph that crossed the parked-jet photograph is gone. */


/* ── AURELIO deep pass: staggered letters, cycling pips, spec band ── */
.lt b{display:inline-block;font-style:normal;animation:hA2 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.06s)}
.a2-pips i{animation:a2pip 4.4s linear infinite;animation-delay:calc(var(--i)*1.1s)}
.a2-pips i:first-child{background:#ffc000}
@keyframes a2pip{0%,22%{background:#ffc000}26%,100%{background:#494949}}
.a2-band{
  position:absolute;left:0;right:0;bottom:0;z-index:3;overflow:hidden;
  background:#ffc000;padding:1.1cqw 0;
  animation:y2 44s var(--ease) infinite;
}
.a2-bt{
  display:inline-block;white-space:nowrap;
  font-family:"Barlow Condensed","Inter",sans-serif;
  font-size:1.7cqw;font-weight:600;letter-spacing:0.22em;color:#141414;
  animation:marqX 15s linear infinite;
}
@keyframes y2{
  0%,17.39%{opacity:0;transform:translateY(100%)}
  18.52%,100%{opacity:1;transform:none}
}
.m2 .dg-img{animation:a2kb 11s ease-in-out infinite alternate}
@keyframes a2kb{
  0%{transform:scale(2) translate(30%,8%)}
  100%{transform:scale(2.14) translate(26%,5%)}
}

.lt{white-space:nowrap}


/* ── CODON deep pass: PASS stamp, terminal readout, targeting reticle ── */
.c3-pass{
  display:inline-block;padding:0.35cqw 1.1cqw;
  border:1px solid #cef79e;border-radius:0.6cqw;
  font-size:1.35cqw;letter-spacing:0.16em;color:#cef79e;
  animation:c3pass 44s var(--ease) infinite;
}
@keyframes c3pass{
  0%,26.25%{opacity:0;transform:scale(1.7) rotate(-4deg)}
  26.82%,100%{opacity:1;transform:scale(1) rotate(0deg)}
}
.c3-term{
  margin-top:2cqw;display:flex;align-items:center;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:1.5cqw;color:#8fa398;letter-spacing:0.04em;
}
.c3-term .tt{font-style:normal;display:inline-block;white-space:nowrap;animation:c3type 44s linear infinite}
.c3-term .tc{font-style:normal;color:#cef79e;animation:c3tc 1.1s steps(2,jump-none) infinite}
@keyframes c3type{
  0%,29.09%{clip-path:inset(-10% 101% -10% -1%);animation-timing-function:steps(30,end)}
  31.14%,100%{clip-path:inset(-10% -1% -10% -1%)}
}
@keyframes c3tc{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
.c3-corners{
  position:absolute;inset:5%;z-index:2;opacity:0.85;pointer-events:none;
  background:
    linear-gradient(#cef79e,#cef79e) 0 0/9% 1.5px,
    linear-gradient(#cef79e,#cef79e) 0 0/1.5px 13%,
    linear-gradient(#cef79e,#cef79e) 100% 0/9% 1.5px,
    linear-gradient(#cef79e,#cef79e) 100% 0/1.5px 13%,
    linear-gradient(#cef79e,#cef79e) 0 100%/9% 1.5px,
    linear-gradient(#cef79e,#cef79e) 0 100%/1.5px 13%,
    linear-gradient(#cef79e,#cef79e) 100% 100%/9% 1.5px,
    linear-gradient(#cef79e,#cef79e) 100% 100%/1.5px 13%;
  background-repeat:no-repeat;
}
.c3-ret{position:absolute;z-index:2;background:rgba(206,247,158,0.4);pointer-events:none}
.c3-ret--h{left:4%;right:4%;height:1px;top:20%;animation:c3retH 5.5s ease-in-out infinite alternate}
.c3-ret--v{top:4%;bottom:4%;width:1px;left:30%;animation:c3retV 4.4s ease-in-out infinite alternate}
@keyframes c3retH{0%{top:12%}100%{top:86%}}
@keyframes c3retV{0%{left:8%}100%{left:90%}}


/* == FIELDNOTE deep pass == */
.dsg--literary .dg-h em{font-style:italic}
.dsg--literary .dg-nav{position:relative;border-bottom:none;padding-bottom:1.4cqw}
.dsg--literary .dg-nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#dee2de;
  transform-origin:left center;
  animation:f4rule 44s var(--ease) infinite;
}
@keyframes f4rule{
  0%,36.93%{transform:scaleX(0)}
  38.41%,100%{transform:scaleX(1)}
}
.f4-shoot{
  position:absolute;left:10%;top:18%;width:16%;height:1.5px;z-index:2;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9));
  transform:rotate(24deg);
  animation:f4shoot 11s linear infinite;
}
@keyframes f4shoot{
  0%,62%{opacity:0;transform:translate(0,0) rotate(24deg)}
  64%{opacity:0.9}
  70%{opacity:0;transform:translate(210%,95%) rotate(24deg)}
  100%{opacity:0}
}
.f4-row u{text-decoration:none;color:#41a0d8;display:inline-block;animation:f4nud 2.75s ease-in-out infinite}
@keyframes f4nud{0%,100%{transform:translateX(0)}50%{transform:translateX(0.5cqw)}}

/* == FLAGPOST deep pass == */
.f5-tabs{
  position:absolute;right:5%;top:11%;z-index:2;display:flex;gap:1cqw;
  animation:f5tabs 44s var(--ease) infinite;
}
.f5-tabs i{
  font-style:normal;font-size:1.45cqw;color:#a7a9ac;
  border:1px solid rgba(255,255,255,0.14);border-radius:9999px;padding:0.7cqw 1.9cqw;
}
.f5-tabs i.on{background:#fff;color:#0e0e0e;border-color:#fff}
@keyframes f5tabs{
  0%,51.25%{opacity:0;transform:translateY(-0.8cqw)}
  52.39%,100%{opacity:1;transform:none}
}
.f5-panel{top:19%}
.f5-chline{display:flex;flex-direction:column;gap:0.7cqw;padding-top:1.4cqw;border-top:1px solid rgba(255,255,255,0.08)}
.f5-chline svg{width:100%;height:4.6cqw;display:block}
.f5-chline path{
  fill:none;stroke:#5b74ff;stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke;
  animation:f5chart 44s var(--ease) infinite;
}
@keyframes f5chart{
  0%,53.64%{stroke-dashoffset:1}
  55.68%,100%{stroke-dashoffset:0}
}
.f5-chline b{font-family:ui-monospace,Consolas,monospace;font-size:1.3cqw;font-weight:400;color:#6d6e71;letter-spacing:0.06em}
.f5-code .cl{display:block;white-space:nowrap}
.f5-code .cl1{animation:f5cl1 44s linear infinite}
.f5-code .cl2{animation:f5cl2 44s linear infinite}
.f5-code .cl3{animation:f5cl3 44s linear infinite}
@keyframes f5cl1{0%,52.73%{clip-path:inset(-10% 101% -10% -1%);animation-timing-function:steps(18,end)}53.52%,100%{clip-path:inset(-10% -1% -10% -1%)}}
@keyframes f5cl2{0%,53.52%{clip-path:inset(-10% 101% -10% -1%);animation-timing-function:steps(26,end)}54.66%,100%{clip-path:inset(-10% -1% -10% -1%)}}
@keyframes f5cl3{0%,54.66%{clip-path:inset(-10% 101% -10% -1%);animation-timing-function:steps(3,end)}55%,100%{clip-path:inset(-10% -1% -10% -1%)}}
.ccar{animation:c3tc 1.1s steps(2,jump-none) infinite}
.f5-ic{
  width:1px;height:2cqw;background:#7084ff;margin-left:-1.6cqw;margin-right:auto;
  animation:c3tc 1.1s steps(2,jump-none) infinite;
}
.f5-logos i{animation:f5lg 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.14s)}
@keyframes f5lg{
  0%,53.07%{opacity:0;transform:translateY(0.9cqw)}
  54.09%,100%{opacity:1;transform:none}
}

/* == MEADOWLARK deep pass == */
.dsg--pastoral .dg-h em{font-style:italic}
.m6-quilt i{transform-origin:50% 100%}
.m6-stats{
  margin-top:2.2cqw;display:flex;gap:3.6cqw;width:100%;
  padding-top:1.6cqw;border-top:1px solid #dcd9c6;
  animation:m6st 44s var(--ease) infinite;
}
.m6-stats span{display:flex;flex-direction:column;font-size:1.4cqw;color:#6d6d6d}
.m6-stats b{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:3cqw;line-height:1.15;color:#07503f}
@keyframes m6st{
  0%,65.45%{opacity:0;transform:translateY(1cqw)}
  66.59%,100%{opacity:1;transform:none}
}

/* == SKYLARK deep pass == */
.dsg--aviation .dg-h em{color:#bc7155;font-style:normal}
.s7-sun{
  position:absolute;left:8%;top:12%;width:26%;aspect-ratio:1;z-index:1;pointer-events:none;
  background:radial-gradient(circle at center,rgba(255,240,205,0.5) 0%,rgba(255,240,205,0.15) 45%,transparent 70%);
  animation:m6sun 5.5s ease-in-out infinite;
}
.s7-wing{
  position:absolute;right:42.5%;top:50%;width:13%;aspect-ratio:4/3;z-index:3;overflow:hidden;
  border:0.5cqw solid #fff;box-shadow:0 0.8cqw 2.4cqw rgba(0,13,16,0.25);
  transform:rotate(-4deg);
  animation:s7wing 44s var(--ease) infinite;
}
.s7-wing img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes s7wing{
  0%,77.39%{opacity:0;transform:rotate(-4deg) scale(0.85)}
  78.52%,100%{opacity:1;transform:rotate(-4deg) scale(1)}
}
.s7-stats{
  position:absolute;right:5%;top:86.5%;width:42%;z-index:2;display:flex;gap:3.4cqw;
  animation:s7st 44s var(--ease) infinite;
}
.s7-stats span{display:flex;flex-direction:column;font-size:1.3cqw;color:#8e8e95;letter-spacing:0.08em}
.s7-stats b{font-size:2.6cqw;font-weight:700;line-height:1.15;color:#000d10;letter-spacing:-0.02em}
@keyframes s7st{
  0%,78.18%{opacity:0;transform:translateY(1cqw)}
  79.2%,100%{opacity:1;transform:none}
}

/* == RIPTIDE deep pass == */
.r8-sched{
  position:absolute;left:5.5%;top:72%;width:35%;z-index:2;
  background:#fff;border:2px solid #000;border-radius:2cqw;
  box-shadow:0.55cqw 0.55cqw 0 #000;padding:0.6cqw 1.8cqw;
  display:flex;flex-direction:column;
  animation:r8sc 44s var(--ease) infinite;
}
.r8-srow{
  display:flex;justify-content:space-between;align-items:center;
  padding:1cqw 0;font-size:1.5cqw;font-weight:600;color:#000;
}
.r8-srow + .r8-srow{border-top:2px solid #000}
.r8-srow b{font-weight:800}
@keyframes r8sc{
  0%,89.32%{opacity:0;transform:translateY(1.4cqw)}
  90.45%,100%{opacity:1;transform:none}
}
.r8-star{
  position:absolute;right:39%;top:12%;width:10.5%;aspect-ratio:1;z-index:4;
  display:grid;place-items:center;
  animation:r8starin 44s linear infinite;
}
.r8-star svg{position:absolute;inset:0;width:100%;height:100%;animation:r8spin 22s linear infinite}
.r8-star polygon{fill:#ffd731;stroke:#000;stroke-width:3}
.r8-star b{position:relative;font-size:1.55cqw;font-weight:800;line-height:1.05;color:#000;text-align:center}
@keyframes r8spin{to{transform:rotate(360deg)}}
@keyframes r8starin{
  0%,88.52%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
  89.43%,100%{opacity:1;transform:scale(1)}
}

/* == BLACK VELVET polish == */
.msD-halo{animation:g1halo 44s var(--ease) infinite,g1breathe 5.5s ease-in-out infinite}
@keyframes g1breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.dsg--velvet .dg-cta{animation:g1cta 5.5s ease-in-out infinite}
@keyframes g1cta{0%,100%{box-shadow:0 0 0 rgba(128,82,255,0)}50%{box-shadow:0 0 3cqw rgba(128,82,255,0.4)}}

.dsg--pastoral .dg-hero{top:23.5%}
.m6-stats{margin-top:1.5cqw;padding-top:1.2cqw}
.m6-stats b{font-size:2.7cqw}

.s7-stats{top:88.5%}

.c3-term{position:absolute;left:0;top:39.5cqw;margin:0;white-space:nowrap}

.c3-term{top:42.8cqw}


/* == density pass: fill the dead space of every panel == */

/* velvet: stats trio + pager dots */
.v1-stats{
  position:absolute;left:5.5%;top:74%;width:56%;z-index:2;display:flex;gap:4.5cqw;
  padding-top:1.8cqw;border-top:1px solid rgba(255,255,255,0.12);
  animation:v1st 44s var(--ease) infinite;
}
.v1-stats span{display:flex;flex-direction:column;font-size:1.4cqw;font-weight:200;color:#9a9a9a}
.v1-stats b{font-size:3.1cqw;font-weight:400;line-height:1.2;color:#fff;letter-spacing:-0.02em}
@keyframes v1st{
  0%,5.8%{opacity:0;transform:translateY(1cqw)}
  6.82%,100%{opacity:1;transform:none}
}
.v1-dots{
  position:absolute;left:5.5%;top:89%;z-index:2;display:flex;gap:1.4cqw;
  animation:v1st 44s var(--ease) infinite;
}
.v1-dots i{
  width:1cqw;height:1cqw;border-radius:50%;background:#3a3a3a;
  animation:v1dot 4.4s linear infinite;animation-delay:calc(var(--i)*1.1s);
}
.v1-dots i:first-child{background:#8052ff}
@keyframes v1dot{0%,22%{background:#8052ff}26%,100%{background:#3a3a3a}}

/* aurelio: model list rows */
.a2-models{
  position:absolute;left:5.5%;top:73%;width:38%;z-index:2;
  display:flex;flex-direction:column;
  font-family:"Barlow Condensed","Inter",sans-serif;
}
.a2-mrow{
  display:flex;align-items:center;
  padding:1.4cqw 0;border-top:1px solid rgba(255,255,255,0.14);
  font-size:2.2cqw;font-weight:600;letter-spacing:0.16em;color:#fff;text-transform:uppercase;
  animation:a2mr 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.18s);
}
.a2-mrow u{text-decoration:none;color:#ffc000;margin-left:auto;display:inline-block;animation:f4nud 2.75s ease-in-out infinite}
@keyframes a2mr{
  0%,17.73%{opacity:0;transform:translateX(-1.4cqw)}
  18.75%,100%{opacity:1;transform:none}
}

/* codon: publication row */
.c3-pub{
  position:absolute;right:5%;top:90.5%;width:42%;z-index:2;
  display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;
  padding-top:1.3cqw;border-top:1px solid rgba(201,203,190,0.18);
  font-size:1.4cqw;color:#c9cbbe;
  animation:c3pb 44s var(--ease) infinite;
}
.c3-pub b{font-family:ui-monospace,Consolas,monospace;font-weight:400;font-size:1.3cqw;color:#cef79e;white-space:nowrap}
@keyframes c3pb{
  0%,29.89%{opacity:0;transform:translateY(0.9cqw)}
  30.91%,100%{opacity:1;transform:none}
}

/* fieldnote: stats trio + folio footer */
.f4-stats{
  position:absolute;right:5%;top:64.5%;width:42%;z-index:2;display:flex;gap:4cqw;
  animation:f4st 44s var(--ease) infinite;
}
.f4-stats span{display:flex;flex-direction:column;font-size:1.35cqw;color:#8b908b}
.f4-stats b{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:3.4cqw;line-height:1.15;color:#171717}
@keyframes f4st{
  0%,41.7%{opacity:0;transform:translateY(1cqw)}
  42.73%,100%{opacity:1;transform:none}
}
.f4-foot{
  position:absolute;right:5%;top:87%;width:42%;z-index:2;
  display:flex;justify-content:space-between;
  padding-top:1.3cqw;border-top:1px solid #dee2de;
  font-size:1.25cqw;letter-spacing:0.2em;color:#8b908b;
  animation:f4ft 44s var(--ease) infinite;
}
.f4-foot b{font-weight:500;color:#41a0d8}
@keyframes f4ft{
  0%,42.61%{opacity:0}
  43.41%,100%{opacity:1}
}

/* flagpost: live status line */
.f5-status{
  position:absolute;right:5%;top:82%;width:36%;z-index:2;
  display:flex;align-items:center;gap:1.3cqw;
  font-family:ui-monospace,Consolas,monospace;font-size:1.45cqw;color:#a7a9ac;
  animation:f5su 44s var(--ease) infinite;
}
.f5-status i{
  width:1.3cqw;height:1.3cqw;border-radius:50%;background:#2fb344;flex:none;
  box-shadow:0 0 1.6cqw rgba(47,179,68,0.7);
  animation:f5pulse 2.75s ease-in-out infinite;
}
.f5-status b{margin-left:auto;font-weight:400;color:#6d6e71}
@keyframes f5pulse{0%,100%{opacity:0.6}50%{opacity:1}}
@keyframes f5su{
  0%,54.77%{opacity:0;transform:translateY(0.9cqw)}
  55.68%,100%{opacity:1;transform:none}
}

/* meadow: impact report link */
.m6-link{
  position:absolute;right:5%;top:86.5%;z-index:2;
  font-size:1.55cqw;font-weight:600;color:#07503f;letter-spacing:0.04em;
  border-bottom:1px solid #07503f;padding-bottom:0.3cqw;
  animation:m6lk 44s var(--ease) infinite;
}
.m6-link u{text-decoration:none;display:inline-block;animation:f4nud 2.75s ease-in-out infinite}
@keyframes m6lk{
  0%,66.7%{opacity:0;transform:translateY(0.8cqw)}
  67.61%,100%{opacity:1;transform:none}
}

/* skylark: next-leg ticker */
.s7-leg{
  position:absolute;left:5.5%;top:92.8%;z-index:2;
  display:flex;align-items:center;gap:1.2cqw;
  font-family:ui-monospace,Consolas,monospace;font-size:1.3cqw;letter-spacing:0.1em;color:#8e8e95;
  animation:s7lg 44s var(--ease) infinite;
}
.s7-leg i{
  width:1.1cqw;height:1.1cqw;border-radius:50%;background:#bc7155;flex:none;
  animation:f5pulse 2.75s ease-in-out infinite;
}
@keyframes s7lg{
  0%,78.98%{opacity:0}
  79.77%,100%{opacity:1}
}

/* riptide: artist lineup pills */
.r8-line{
  position:absolute;right:5%;top:81%;width:42%;z-index:3;display:flex;gap:1.4cqw;
}
.r8-line i{
  font-style:normal;font-size:1.5cqw;font-weight:800;color:#000;
  background:#fff;border:2px solid #000;border-radius:9999px;padding:0.8cqw 2cqw;
  box-shadow:0.35cqw 0.35cqw 0 #000;
  animation:r8li 44s linear infinite;animation-delay:calc(var(--i)*0.16s);
}
@keyframes r8li{
  0%,89.89%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
  90.8%,100%{opacity:1;transform:scale(1)}
}

.a2-models{top:69.5%}
.a2-mrow{padding:1.1cqw 0;font-size:2cqw}

.m6-link{top:84%;font-size:1.45cqw}


/* == floating cards: live metric, palette picker, score detail == */
@property --cn{syntax:"<integer>";initial-value:0;inherits:true}

.fcard{box-shadow:0 12px 28px rgba(0,0,0,0.26),0 0 26px rgba(128,82,255,0.16)}

.fcard--code{width:clamp(128px,10.4vw,164px)}
.fm-label{font-size:9px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#9a9a9a}
.fm-row{display:flex;align-items:center;gap:7px}
.fm-num{
  font-size:21px;font-weight:700;color:#fff;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  animation:fmCount 7s var(--ease) infinite;
}
.fm-num::after{counter-reset:cn var(--cn);content:"+" counter(cn)}
@keyframes fmCount{0%{--cn:19}38%,100%{--cn:27}}
.fm-badge{
  font-style:normal;font-size:9px;font-weight:700;color:#55db9c;
  background:rgba(85,219,156,0.12);border:1px solid rgba(85,219,156,0.4);
  border-radius:9999px;padding:2px 7px;
  animation:fmBadge 3.5s ease-in-out infinite;
}
@keyframes fmBadge{0%,100%{opacity:0.75}50%{opacity:1}}
.fm-spark{width:100%;height:24px;display:block}
.fm-area{fill:rgba(128,82,255,0.16);stroke:none;animation:fmArea 7s var(--ease) infinite}
@keyframes fmArea{0%{opacity:0}40%,100%{opacity:1}}
.fm-line{
  fill:none;stroke:#8052ff;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:0;
  animation:fmLine 7s var(--ease) infinite;
}
@keyframes fmLine{0%{stroke-dashoffset:1}38%,100%{stroke-dashoffset:0}}

.fsw{position:relative}
.fsw::after{
  content:"";position:absolute;inset:-3px;border:1.5px solid #fff;border-radius:7px;
  opacity:0;
  animation:fswRing 4.4s linear infinite;animation-delay:calc(var(--i)*1.1s);
}
.fsw--1::after{opacity:1}
@keyframes fswRing{0%,22%{opacity:1}26%,100%{opacity:0}}
.fhex{position:relative;display:block;height:12px;margin-top:2px}
.fhex b{
  position:absolute;left:0;top:0;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:9px;font-weight:600;letter-spacing:0.06em;color:#c7c9d1;
  opacity:0;
  animation:fswRing 4.4s linear infinite;animation-delay:calc(var(--i)*1.1s);
}
.fhex b:first-child{opacity:1}

.fperf{display:flex;gap:10px;width:100%;margin-top:2px}
.fperf > span{
  flex:1;display:flex;flex-direction:column;gap:3px;
  font-size:8px;font-weight:600;letter-spacing:0.1em;color:#9a9a9a;text-transform:uppercase;
}
.fperf i{display:block;height:3px;border-radius:2px;background:#2c2c36;overflow:hidden;position:relative}
.fperf i::after{
  content:"";position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(90deg,#8052ff,#7084ff);
  transform:scaleX(0);transform-origin:left center;
  animation:fperfFill 12s var(--ease) infinite;
}
.fperf > span:nth-child(2) i::after{animation-delay:0.5s}
@keyframes fperfFill{
  0%,30%{transform:scaleX(0)}
  62%,94.5%{transform:scaleX(1)}
  97%,100%{transform:scaleX(0)}
}

.fm-label{white-space:nowrap;font-size:8.5px}


/* ════════════════════════════════════════════════════════════
   HERO REALISM PASS — the eight .dsg slides inside .lap__screen
   Real free-license photography at laptop scale (public/deck/hero/,
   provenance in sources-hero.json + public/deck/MANIFEST.md), plus
   the layout fixes the larger canvas exposed. Every new element
   JOINS the existing 44s master cycle: it enters in its own slide's
   build window, after that slide's last existing element and before
   its hold ends, so the cycle length is unchanged. All new animation
   is transform/opacity, lives inside #heroStage (covered by the
   is-idle observer and the blanket prefers-reduced-motion kill), and
   no rule sets a base opacity:0 — so reduced motion lands on the
   finished state for free. Text that sits over an absolutely
   positioned photo carries position:relative;z-index (stacking trap).
   ════════════════════════════════════════════════════════════ */

/* ── 1 velvet: ground the constellation with a Selected Work row ──
   The three thumbnails are the studio's own client sites — the same
   photographs slides 2, 6 and 8 use, which is the point. */
.v1-stats{width:46%}
.v1-work{
  position:absolute;right:5%;top:68%;width:42%;z-index:3;
  display:flex;flex-direction:column;gap:1.2cqw;
  animation:v1wk 44s var(--ease) infinite;
}
.v1-work > b{font-size:1.15cqw;font-weight:500;letter-spacing:0.22em;color:#b9b9c4}
.v1-wrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}
.v1-wrow i{display:block;animation:v1wki 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.12s)}
.v1-wrow picture{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:0.7cqw;background:#111114}
.v1-wrow img{width:100%;height:100%;object-fit:cover;display:block;opacity:0.9}
.v1-wrow i:first-child img{filter:brightness(1.45) contrast(1.02)}
.v1-wrow em{
  position:relative;z-index:2;display:block;margin-top:0.8cqw;
  font-style:normal;font-size:1.1cqw;font-weight:500;letter-spacing:0.16em;color:#9a9a9a;
}
@keyframes v1wk{
  0%,6.93%{opacity:0;transform:translateY(1cqw)}
  7.95%,100%{opacity:1;transform:none}
}
@keyframes v1wki{
  0%,6.93%{transform:translateY(1.4cqw)}
  8.52%,100%{transform:none}
}

/* ── 2 showroom: a laptop-resolution car, plus material details ──
   dm-car.webp was 640x192 rendered at scale(2) — mush at this size.
   The replacement is a 1100px badge-free crop, so the Ken Burns can
   be a real drift instead of a 2x zoom into a small file. */
.m2 .dg-img{transform:scale(1.04);animation:a2kb 11s ease-in-out infinite alternate}
@keyframes a2kb{
  0%{transform:scale(1.04) translate(0,0)}
  100%{transform:scale(1.13) translate(-1.6%,-1.2%)}
}
.a2-det{
  position:absolute;right:5%;top:73.5%;width:42%;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw;
}
.a2-det i{display:block;animation:a2dt 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.14s)}
.a2-det picture{display:block;position:relative;aspect-ratio:16/5;overflow:hidden;background:#181818}
.a2-det i:first-child img{filter:contrast(1.06)}
.a2-det img{width:100%;height:100%;object-fit:cover;display:block}
.a2-det em{
  position:relative;z-index:2;display:block;margin-top:0.7cqw;
  font-style:normal;font-family:"Barlow Condensed","Inter",sans-serif;
  font-size:1.3cqw;font-weight:600;letter-spacing:0.22em;color:#7d7d7d;
}
@keyframes a2dt{
  0%,19.09%{opacity:0;transform:translateY(1cqw)}
  20.11%,100%{opacity:1;transform:none}
}

/* ── 3 biolab: the microscopy re-graded to lime, plus contributors ──
   hue-rotate(95deg) on this source landed on hot magenta — the one
   colour nowhere in codon's system. Same recipe the phone deck uses. */
.m3 .dg-img{filter:grayscale(1) sepia(1) hue-rotate(50deg) saturate(2.2) brightness(0.92)}
.c3-team{
  position:absolute;right:5%;top:76.5%;width:42%;z-index:2;
  display:flex;flex-direction:column;gap:1.2cqw;
  animation:c3tm 44s var(--ease) infinite;
}
.c3-team > b{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:1.2cqw;font-weight:400;letter-spacing:0.18em;color:#cef79e;
}
.c3-avs{display:flex;align-items:center;gap:1cqw}
.c3-avs i{
  display:block;width:4.6cqw;aspect-ratio:1;border-radius:50%;overflow:hidden;flex:none;
  box-shadow:0 0 0 1px rgba(206,247,158,0.35);
  animation:c3tmi 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.1s);
}
.c3-avs img{width:100%;height:100%;object-fit:cover;display:block}
.c3-avs em{position:relative;z-index:2;margin-left:0.7cqw;font-style:normal;font-size:1.3cqw;color:#c9cbbe}
@keyframes c3tm{
  0%,31.36%{opacity:0;transform:translateY(1cqw)}
  32.39%,100%{opacity:1;transform:none}
}
@keyframes c3tmi{
  0%,31.36%{transform:scale(0.55)}
  33.07%,100%{transform:scale(1)}
}

/* ── 4 literary: two more essays, with real night thumbnails ── */
.f4-stats{top:61.5%}
.f4-foot{top:92%}
.f4-ess{
  position:absolute;right:5%;top:72.5%;width:42%;z-index:2;
  display:flex;flex-direction:column;
  animation:f4es 44s var(--ease) infinite;
}
.f4-ess i{
  display:flex;align-items:center;gap:1.3cqw;
  padding:0.8cqw 0;border-top:1px solid #dee2de;
  animation:f4esi 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.12s);
}
.f4-ess u{
  display:block;width:6cqw;aspect-ratio:16/10;flex:none;
  overflow:hidden;border-radius:0.4cqw;text-decoration:none;background:#1b2440;
}
.f4-ess u img{width:100%;height:100%;object-fit:cover;display:block}
.f4-ess b{
  position:relative;z-index:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.5cqw;color:#171717;line-height:1.2;
}
.f4-ess em{
  position:relative;z-index:2;margin-left:auto;
  font-style:normal;font-size:1.2cqw;color:#8b908b;white-space:nowrap;
}
@keyframes f4es{
  0%,43.52%{opacity:0;transform:translateY(1cqw)}
  44.55%,100%{opacity:1;transform:none}
}
@keyframes f4esi{
  0%,43.52%{transform:translateX(-1cqw)}
  45.11%,100%{transform:none}
}

/* ── 5 control: un-overlap the panel and the code block, add the
   audit trail the third tab promises ──
   At laptop size the flag panel grew past 61% and the code block
   started at 55.6% — a real 5.8% collision that clipped the chart. */
.f5-tabs{top:11.6%}
.f5-panel{top:19.5%;padding:1.8cqw;gap:1.5cqw}
.f5-code{top:60.8%}
.f5-audit{
  position:absolute;right:5%;top:86.8%;width:36%;z-index:2;
  display:flex;flex-direction:column;gap:0.6cqw;
  animation:f5au 44s var(--ease) infinite;
}
.f5-audit i{
  display:flex;align-items:baseline;gap:0.8cqw;
  font-style:normal;font-family:ui-monospace,Consolas,monospace;
  font-size:1.15cqw;color:#6d6e71;
  animation:f5aui 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.11s);
}
.f5-audit em{font-style:normal;color:#7084ff}
.f5-audit b{margin-left:auto;font-weight:400;color:#4c4d50;font-variant-numeric:tabular-nums}
@keyframes f5au{
  0%,55.8%{opacity:0}
  56.82%,100%{opacity:1}
}
@keyframes f5aui{
  0%,55.8%{transform:translateY(0.7cqw)}
  57.39%,100%{transform:none}
}

/* ── 6 pastoral: the quilt becomes real crops under pastel scrims,
   and the stats stop running under the marquee ── */
.dsg--pastoral .dg-hero{top:20%}
.m6-quilt i{position:relative;overflow:hidden;padding:1cqw}
.m6-quilt .q-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.m6-quilt .q-scrim{position:absolute;inset:0;display:block;text-decoration:none}
.m6-quilt i:nth-child(1) .q-scrim{background:linear-gradient(180deg,rgba(178,206,231,0.30) 0%,rgba(178,206,231,0.74) 100%)}
.m6-quilt i:nth-child(2) .q-scrim{background:linear-gradient(180deg,rgba(243,201,168,0.30) 0%,rgba(243,201,168,0.76) 100%)}
.m6-quilt i:nth-child(3) .q-scrim{background:linear-gradient(180deg,rgba(168,191,154,0.30) 0%,rgba(168,191,154,0.76) 100%)}
.m6-quilt span{position:relative;z-index:2;font-size:1.35cqw;font-weight:600;color:#07503f}

/* ── 7 aviation: cool the hero toward parchment dawn, stop the wing
   sitting on the body copy, and give the page its destinations ──
   The next-empty-leg ticker moves to the top of the page (where a
   charter site would put it) and re-times to enter with the chrome,
   which frees the bottom-left for the stats. */
.m7 .dg-img{filter:saturate(0.5) brightness(1.08) contrast(1.02)}
.dsg--aviation .dg-hero{top:17.5%}
.s7-wing{right:34%;top:23%}
.s7-leg{top:12.2%}
@keyframes s7lg{
  0%,74.55%{opacity:0}
  75.34%,100%{opacity:1}
}
.s7-stats{left:5.5%;right:auto;width:46%;top:89.5%}
.s7-dest{
  position:absolute;right:5%;top:61.5%;width:42%;z-index:2;
  display:flex;flex-direction:column;gap:0.7cqw;
  animation:s7ds 44s var(--ease) infinite;
}
.s7-dest > b{font-size:1.2cqw;font-weight:700;letter-spacing:0.2em;color:#8e8e95}
.s7-drow{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw}
.s7-drow i{display:block;animation:s7dsi 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.12s)}
.s7-drow picture{display:block;position:relative;aspect-ratio:16/6.2;overflow:hidden;background:#cfe0ea}
.s7-drow img{width:100%;height:100%;object-fit:cover;display:block}
.s7-drow em{
  position:relative;z-index:2;display:block;margin-top:0.4cqw;
  font-style:normal;font-size:1.3cqw;font-weight:700;letter-spacing:0.1em;color:#000d10;
}
.s7-drow u{
  position:relative;z-index:2;display:block;text-decoration:none;
  font-size:1cqw;line-height:1.15;color:#8e8e95;letter-spacing:0.04em;
}
.s7-clay{
  top:81%;padding:1.3cqw;
  display:grid;grid-template-columns:34% 1fr;grid-template-rows:auto auto auto;
  column-gap:1.3cqw;row-gap:0.3cqw;align-items:start;
}
.s7-cph{
  grid-column:1;grid-row:1 / span 3;align-self:stretch;
  display:block;overflow:hidden;background:#a85f45;font-style:normal;
}
.s7-cph picture{display:block;width:100%;height:100%}
.s7-cph img{width:100%;height:100%;object-fit:cover;display:block}
.s7-clay b{grid-column:2;font-size:1.85cqw;line-height:1.15}
.s7-clay span{grid-column:2;font-size:1.2cqw;line-height:1.3}
.s7-clay u{grid-column:2;font-size:1.15cqw;margin-top:0.3cqw;align-self:end}
@keyframes s7ds{
  0%,79.89%{opacity:0;transform:translateY(1cqw)}
  80.91%,100%{opacity:1;transform:none}
}
@keyframes s7dsi{
  0%,79.89%{transform:translateY(1.2cqw)}
  81.48%,100%{transform:none}
}

/* ── 8 sticker: the line-up, over the stage photo, as on the phone ──
   The three placeholder pills become four canon acts on a real
   photograph; the names carry z-index so the absolute image cannot
   paint over them. */
.r8-qr{top:61.5%;padding:1cqw;gap:1.3cqw}
.r8-qrbox{width:3.6cqw}
.r8-qrt{font-size:1.3cqw}
.r8-qrt b{font-size:1.65cqw}
.r8-lineup{
  position:absolute;right:5%;top:74.2%;width:42%;z-index:3;
  overflow:hidden;background:#0d2a4a;
  border:2px solid #000;border-radius:1.6cqw;box-shadow:0.5cqw 0.5cqw 0 #000;
  padding:1.1cqw 1.4cqw;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1.3cqw;
  animation:r8lu 44s var(--ease) infinite;
}
.r8-luph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.r8-luscrim{
  position:absolute;inset:0;display:block;text-decoration:none;
  background:linear-gradient(180deg,rgba(13,42,74,0.40) 0%,rgba(13,42,74,0.80) 100%);
}
.r8-lineup em{
  position:relative;z-index:2;flex:0 0 100%;
  font-style:normal;font-size:1.1cqw;font-weight:800;letter-spacing:0.18em;
  color:#9fd0ff;margin-bottom:0.5cqw;
}
.r8-lineup b{
  position:relative;z-index:2;
  font-size:1.45cqw;font-weight:800;letter-spacing:-0.01em;color:#fff;line-height:1.25;
  animation:r8lui 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.09s);
}
.r8-lineup .r8-a1{color:#ffd731}
.r8-lineup .r8-a2{color:#55db9c}
@keyframes r8lu{
  0%,90.91%{opacity:0;transform:translateY(1.2cqw)}
  91.93%,100%{opacity:1;transform:none}
}
@keyframes r8lui{
  0%,90.91%{opacity:0}
  92.5%,100%{opacity:1}
}


/* ════════════════════════════════════════════════════════════
   FLOATING-CARD PALETTE SYNC — the three hero fragments recolour
   with the laptop's 8-design shuffle.

   Every colour below is lifted from that concept's own .dsg--*
   block earlier in this file (the swatch row literally is the
   design's palette). The cards JOIN the existing 44s master clock:
   one keyframe track, no timers, no rAF. Each crossfade is 1.60%
   of 44s = 0.70s, centred on that slide's own opacity fade-in
   (@keyframes w1..w8), so the cards and the screen hand over
   together — never a snap, never out of step.

   Gating comes free: .float lives inside #heroStage, so
   `.hero__stage.is-idle *` pauses it offscreen and
   `.hero__stage *{animation:none!important}` kills it under
   prefers-reduced-motion — which drops the cards onto the
   @property initial values (design 1, velvet) as a finished
   static palette.

   Only colour and border-radius change. Shapes, sizes, positions,
   content and every existing animation are untouched.
   ════════════════════════════════════════════════════════════ */

/* Registered so the colours INTERPOLATE. Unregistered custom
   properties animate discretely, which would hard-snap the
   palette — the one thing this pass exists to avoid. Initial
   values = design 1, so an unsupporting engine and the
   reduced-motion path both land on the same sane static state. */
@property --fc-surface{syntax:"<color>";initial-value:rgba(8,8,12,0.86);inherits:true}
@property --fc-border{syntax:"<color>";initial-value:rgba(255,255,255,0.14);inherits:true}
@property --fc-text{syntax:"<color>";initial-value:#ffffff;inherits:true}
@property --fc-muted{syntax:"<color>";initial-value:#ffb829;inherits:true}
@property --fc-a1{syntax:"<color>";initial-value:#8052ff;inherits:true}
@property --fc-a2{syntax:"<color>";initial-value:#ffb829;inherits:true}
@property --fc-a3{syntax:"<color>";initial-value:#2ab595;inherits:true}
@property --fc-a4{syntax:"<color>";initial-value:#0a0a0e;inherits:true}
@property --fc-pos{syntax:"<color>";initial-value:#2ab595;inherits:true}
@property --fc-track{syntax:"<color>";initial-value:#2c2c36;inherits:true}
@property --fc-ink{syntax:"<color>";initial-value:#ffffff;inherits:true}
@property --fc-glow{syntax:"<color>";initial-value:rgba(128,82,255,0.16);inherits:true}
@property --fc-radius{syntax:"<length>";initial-value:12px;inherits:true}

/* Hex captions are strings, so they step at the midpoint of the
   crossfade instead of interpolating — correct, since a hex code
   has no in-between state. */
.float{--fc-h1:"#8052FF"}
.float{--fc-h2:"#FFB829"}
.float{--fc-h3:"#2AB595"}
.float{--fc-h4:"#0A0A0E"}

/* ── the palette track, one per card, all three in lockstep ──
   Same duration and same start as .ms's `ck 44s`, and paused by
   the same is-idle toggle, so they cannot drift from the screen. */
.float{animation:fcPal 44s ease-in-out infinite}

@keyframes fcPal{
  0%,11.76%{
    --fc-surface:rgba(8,8,12,0.86);
    --fc-border:rgba(255,255,255,0.14);
    --fc-text:#ffffff;
    --fc-muted:#ffb829;
    --fc-a1:#8052ff;
    --fc-a2:#ffb829;
    --fc-a3:#2ab595;
    --fc-a4:#0a0a0e;
    --fc-pos:#2ab595;
    --fc-track:#2c2c36;
    --fc-ink:#ffffff;
    --fc-glow:rgba(128,82,255,0.16);
    --fc-radius:12px;
    --fc-h1:"#8052FF";
    --fc-h2:"#FFB829";
    --fc-h3:"#2AB595";
    --fc-h4:"#0A0A0E";
  }
  13.36%,23.8%{
    --fc-surface:rgba(0,0,0,0.90);
    --fc-border:rgba(73,73,73,0.90);
    --fc-text:#ffffff;
    --fc-muted:#8d8d8d;
    --fc-a1:#ffc000;
    --fc-a2:#ffffff;
    --fc-a3:#7d7d7d;
    --fc-a4:#141414;
    --fc-pos:#ffc000;
    --fc-track:#333333;
    --fc-ink:#ffffff;
    --fc-glow:rgba(255,192,0,0.14);
    --fc-radius:2px;
    --fc-h1:"#FFC000";
    --fc-h2:"#FFFFFF";
    --fc-h3:"#7D7D7D";
    --fc-h4:"#141414";
  }
  25.4%,35.85%{
    --fc-surface:rgba(34,47,48,0.92);
    --fc-border:rgba(206,247,158,0.28);
    --fc-text:#f7f7f5;
    --fc-muted:#c9cbbe;
    --fc-a1:#cef79e;
    --fc-a2:#f7f7f5;
    --fc-a3:#c9cbbe;
    --fc-a4:#222f30;
    --fc-pos:#cef79e;
    --fc-track:#3a4a49;
    --fc-ink:#f7f7f5;
    --fc-glow:rgba(206,247,158,0.14);
    --fc-radius:8px;
    --fc-h1:"#CEF79E";
    --fc-h2:"#F7F7F5";
    --fc-h3:"#C9CBBE";
    --fc-h4:"#222F30";
  }
  37.45%,47.89%{
    --fc-surface:rgba(254,255,252,0.95);
    --fc-border:rgba(23,23,23,0.18);
    --fc-text:#171717;
    --fc-muted:#646464;
    --fc-a1:#41a0d8;
    --fc-a2:#1b2440;
    --fc-a3:#8b908b;
    --fc-a4:#171717;
    --fc-pos:#2f7fae;
    --fc-track:#dee2de;
    --fc-ink:#171717;
    --fc-glow:rgba(65,160,216,0.16);
    --fc-radius:12px;
    --fc-h1:"#41A0D8";
    --fc-h2:"#1B2440";
    --fc-h3:"#8B908B";
    --fc-h4:"#171717";
  }
  49.49%,59.94%{
    --fc-surface:rgba(14,14,14,0.90);
    --fc-border:rgba(255,255,255,0.13);
    --fc-text:#ffffff;
    --fc-muted:#a7a9ac;
    --fc-a1:#7084ff;
    --fc-a2:#405bff;
    --fc-a3:#a7a9ac;
    --fc-a4:#191919;
    --fc-pos:#7084ff;
    --fc-track:#26262c;
    --fc-ink:#ffffff;
    --fc-glow:rgba(112,132,255,0.18);
    --fc-radius:10px;
    --fc-h1:"#7084FF";
    --fc-h2:"#405BFF";
    --fc-h3:"#A7A9AC";
    --fc-h4:"#191919";
  }
  61.54%,71.98%{
    --fc-surface:rgba(241,239,223,0.95);
    --fc-border:rgba(7,80,63,0.24);
    --fc-text:#07503f;
    --fc-muted:#5f5f5f;
    --fc-a1:#07503f;
    --fc-a2:#e8fe85;
    --fc-a3:#c9c7b4;
    --fc-a4:#6d6d6d;
    --fc-pos:#07503f;
    --fc-track:#dcd9c3;
    --fc-ink:#07503f;
    --fc-glow:rgba(7,80,63,0.14);
    --fc-radius:12px;
    --fc-h1:"#07503F";
    --fc-h2:"#E8FE85";
    --fc-h3:"#C9C7B4";
    --fc-h4:"#6D6D6D";
  }
  73.59%,84.03%{
    --fc-surface:rgba(228,238,244,0.95);
    --fc-border:rgba(0,13,16,0.22);
    --fc-text:#000d10;
    --fc-muted:#4a5860;
    --fc-a1:#bc7155;
    --fc-a2:#cfe0ea;
    --fc-a3:#8e8e95;
    --fc-a4:#000d10;
    --fc-pos:#a2553a;
    --fc-track:#b3c8d6;
    --fc-ink:#000d10;
    --fc-glow:rgba(188,113,85,0.16);
    --fc-radius:4px;
    --fc-h1:"#BC7155";
    --fc-h2:"#CFE0EA";
    --fc-h3:"#8E8E95";
    --fc-h4:"#000D10";
  }
  85.63%,96.4%{
    --fc-surface:rgba(220,238,255,0.95);
    --fc-border:rgba(0,0,0,0.90);
    --fc-text:#000000;
    --fc-muted:#4a5a6a;
    --fc-a1:#4da2ff;
    --fc-a2:#fb4903;
    --fc-a3:#ffd731;
    --fc-a4:#55db9c;
    --fc-pos:#1f7a4d;
    --fc-track:#9ec9ef;
    --fc-ink:#000000;
    --fc-glow:rgba(77,162,255,0.18);
    --fc-radius:14px;
    --fc-h1:"#4DA2FF";
    --fc-h2:"#FB4903";
    --fc-h3:"#FFD731";
    --fc-h4:"#55DB9C";
  }
  98.0%,100%{
    --fc-surface:rgba(8,8,12,0.86);
    --fc-border:rgba(255,255,255,0.14);
    --fc-text:#ffffff;
    --fc-muted:#ffb829;
    --fc-a1:#8052ff;
    --fc-a2:#ffb829;
    --fc-a3:#2ab595;
    --fc-a4:#0a0a0e;
    --fc-pos:#2ab595;
    --fc-track:#2c2c36;
    --fc-ink:#ffffff;
    --fc-glow:rgba(128,82,255,0.16);
    --fc-radius:12px;
    --fc-h1:"#8052FF";
    --fc-h2:"#FFB829";
    --fc-h3:"#2AB595";
    --fc-h4:"#0A0A0E";
  }
}

/* ── the cards consume the vars ── */
.fcard{
  background:var(--fc-surface);
  border:1px solid var(--fc-border);
  border-radius:var(--fc-radius);
  box-shadow:0 12px 28px rgba(0,0,0,0.26),0 0 26px var(--fc-glow);
}
.fcard__label,.fm-label,.fperf > span{color:var(--fc-muted)}

/* card 1 — new clients */
.fcard__dots i{background:var(--fc-track)}
.fm-num{color:var(--fc-text)}
.fm-badge{
  color:var(--fc-pos);
  background:color-mix(in srgb,var(--fc-pos) 14%,transparent);
  border-color:color-mix(in srgb,var(--fc-pos) 42%,transparent);
}
.fm-line{stroke:var(--fc-a1)}
.fm-area{fill:color-mix(in srgb,var(--fc-a1) 18%,transparent)}

/* card 2 — palette.
   The hairline .fsw--4 already carried is generalised to all four:
   across eight palettes any swatch can land close to its own card
   surface (aviation's sky, showroom's white), and without an edge
   it reads as a hole rather than a colour. */
.fsw{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc-ink) 26%,transparent)}
.fsw--1{background:var(--fc-a1)}
.fsw--2{background:var(--fc-a2)}
.fsw--3{background:var(--fc-a3)}
.fsw--4{background:var(--fc-a4);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc-ink) 30%,transparent)}
.fsw::after{border-color:var(--fc-ink)}
.fhex b{color:color-mix(in srgb,var(--fc-text) 88%,transparent)}
/* The hex captions ARE the swatches, so they have to follow the
   palette or the card contradicts itself. Swapped via ::after so
   the hard-coded HTML stays the no-CSS fallback. */
.fhex b{font-size:0}
.fhex b::after{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:9px;font-weight:600;letter-spacing:0.06em;
}
.fhex b:nth-child(1)::after{content:var(--fc-h1)}
.fhex b:nth-child(2)::after{content:var(--fc-h2)}
.fhex b:nth-child(3)::after{content:var(--fc-h3)}
.fhex b:nth-child(4)::after{content:var(--fc-h4)}

/* card 3 — performance */
.fring-bg{stroke:var(--fc-track)}
.fring{stroke:var(--fc-a1)}
.fscore{color:var(--fc-text)}
.fperf i{background:var(--fc-track)}
.fperf i::after{background:linear-gradient(90deg,var(--fc-a1),var(--fc-pos))}


/* ════════════════════════════════════════════════════════════
   ADDENDUM 4 — slides 7 (aviation · SKYLARK) and 8 (sticker ·
   RIPTIDE) rebuilt to the bar set by showroom, control and biolab.

   Nothing here touches the 44 s master cycle. Every new element
   enters inside its own slide's existing build window, all motion
   is transform/opacity, and everything lives inside #heroStage —
   so `.hero__stage.is-idle *` (pause offscreen) and the blanket
   `prefers-reduced-motion` kill already cover it. Canon (names,
   numbers, photographs) matches the matching phone in the deck.
   ════════════════════════════════════════════════════════════ */

/* ── 7 AVIATION · SKYLARK ─────────────────────────────────────
   The signature moves off the photograph and onto the itinerary:
   the jet flies the arc between the JFK and ASE markers and the
   clay contrail draws in behind it (a white wiper travelling in
   lockstep with the aircraft — transform only, no stroke-dash).
   The photograph gets the concept's dawn sky instead: a cool sun
   and three clouds drifting at three different speeds. */

.dsg--aviation .dg-h{font-size:10cqw}
.dsg--aviation .dg-body{margin-top:1.4cqw;font-size:1.75cqw}
.dsg--aviation .dg-btns{margin-top:2cqw}

/* hero photograph — a shallower crop frees the right column for the fleet */
.m7{top:16%;aspect-ratio:16/8.4}
.m7 .dg-img{filter:saturate(0.8) hue-rotate(-8deg) brightness(1.05) contrast(1.05)}

.s7-sun{
  left:auto;right:2%;top:2%;width:34%;
  background:radial-gradient(circle at center,rgba(255,253,246,0.46) 0%,rgba(226,238,248,0.18) 52%,transparent 78%);
}
.s7-cloud{
  position:absolute;width:24%;aspect-ratio:3/1;border-radius:9999px;z-index:2;
  background:rgba(255,255,255,0.74);filter:blur(0.4px);pointer-events:none;
  animation:s7cloud 30s linear infinite;
}
.s7-cloud::before,.s7-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.s7-cloud::before{width:44%;aspect-ratio:1;left:14%;top:-56%}
.s7-cloud::after{width:32%;aspect-ratio:1;right:18%;top:-32%}
.s7-cloud--1{top:13%;left:-28%}
.s7-cloud--2{top:30%;left:-52%;width:16%;opacity:0.8;animation-duration:39s;animation-delay:-14s}
.s7-cloud--3{top:6%;left:-74%;width:12%;opacity:0.62;animation-duration:50s;animation-delay:-31s}
@keyframes s7cloud{to{transform:translateX(80cqw)}}

.s7-wing{right:35%;top:20%;width:10.5%;border-width:0.45cqw}

/* the next-empty-leg ticker actually tickers: two legs on a 12 s roll */
.s7-leg{top:12.2%;align-items:center}
.s7-legw{display:block;overflow:hidden;height:1.9cqw}
.s7-legr{display:block;animation:s7legr 12s ease-in-out infinite}
.s7-legr b{display:block;height:1.9cqw;line-height:1.9cqw;font-weight:400;white-space:nowrap}
@keyframes s7legr{
  0%,30%{transform:translateY(0)}
  36%,63%{transform:translateY(-1.9cqw)}
  69%,100%{transform:translateY(-3.8cqw)}
}

/* the fleet — Light · Mid · Heavy, the phone's canon */
.s7-fleet{
  position:absolute;right:5%;top:53.2%;width:42%;z-index:2;
  display:flex;flex-direction:column;gap:0.65cqw;
  animation:s7fl 44s var(--ease) infinite;
}
.s7-fleet > b{font-size:1.15cqw;font-weight:700;letter-spacing:0.2em;color:#8e8e95}
.s7-frow{display:grid;grid-template-columns:repeat(3,1fr);gap:0.9cqw}
.s7-frow i{
  display:flex;flex-direction:column;gap:0.12cqw;font-style:normal;line-height:1.15;
  border-top:1px solid #ded9d6;padding-top:0.62cqw;
  animation:s7fli 44s var(--ease) infinite;animation-delay:calc(var(--i)*0.1s);
}
.s7-frow em{font-style:normal;font-size:1.3cqw;font-weight:700;letter-spacing:0.12em;color:#000d10}
.s7-frow u{text-decoration:none;font-size:1cqw;color:#8e8e95;letter-spacing:0.04em}
.s7-frow span{font-size:1cqw;font-weight:600;color:#bc7155;letter-spacing:0.04em;font-variant-numeric:tabular-nums}
@keyframes s7fl{
  0%,79.66%{opacity:0;transform:translateY(1cqw)}
  80.68%,100%{opacity:1;transform:none}
}
@keyframes s7fli{
  0%,79.66%{transform:translateY(0.9cqw)}
  81.25%,100%{transform:none}
}

/* destinations tighten so the fleet fits above them */
.s7-dest{top:66.9%;gap:0.5cqw}
.s7-dest > b{font-size:1.15cqw;line-height:1.15}
.s7-drow{gap:0.85cqw}
.s7-drow picture{aspect-ratio:16/4.9}
.s7-drow em{margin-top:0.35cqw;font-size:1.25cqw;line-height:1.15}
.s7-drow u{font-size:0.95cqw;line-height:1.15}
.s7-clay{top:82.2%}

/* ── the route map: JFK to ASE, flown ── */
.s7-route{
  position:absolute;left:5.5%;width:46%;top:78.4%;z-index:2;margin-top:0;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  column-gap:1.3cqw;row-gap:0.4cqw;align-items:end;
  font-size:1.45cqw;font-weight:700;letter-spacing:0.14em;color:#000d10;
  animation:y7 44s var(--ease) infinite;
}
.s7-rp{grid-row:1;font-style:normal;line-height:1;padding-bottom:0.15cqw}
.s7-arc{
  grid-row:1;grid-column:2;position:relative;display:block;
  height:5.4cqw;overflow:hidden;
}
.s7-arcsvg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.s7-wipe{
  position:absolute;inset:0;display:block;background:#fff;z-index:2;
  animation:s7wipe 44s linear infinite;
}
.s7-arc::before,.s7-arc::after{
  content:"";position:absolute;bottom:0.42cqw;width:1.1cqw;height:1.1cqw;
  border-radius:50%;background:#bc7155;z-index:3;
}
.s7-arc::before{left:0}
.s7-arc::after{right:0}
.s7-fly{
  position:absolute;left:0;right:0;bottom:0;height:4.2cqw;display:block;z-index:4;
  animation:s7flyx 44s linear infinite;
}
.s7-flyv{
  position:absolute;left:-2.1cqw;bottom:0;width:4.2cqw;height:4.2cqw;display:block;font-style:normal;
  animation:s7flyy 44s linear infinite;
}
.s7-flyi{
  position:absolute;inset:0;display:block;text-decoration:none;
  animation:s7flyr 44s linear infinite;
}
.s7-flyi::before{
  content:"";position:absolute;left:0;top:32%;width:100%;height:36%;background:#16202a;
  clip-path:polygon(100% 56%,72% 44%,26% 46%,8% 4%,16% 4%,24% 46%,0% 54%,10% 66%,50% 64%,40% 100%,32% 100%,46% 64%,92% 66%);
}
.s7-flyi::after{
  content:"";position:absolute;right:95%;top:47%;width:180%;height:6%;border-radius:9999px;
  background:linear-gradient(90deg,rgba(188,113,85,0) 0%,rgba(188,113,85,0.5) 100%);
}
.s7-rdur{
  grid-row:2;grid-column:1 / -1;font-style:normal;
  font-family:ui-monospace,Consolas,monospace;
  font-size:1.1cqw;font-weight:400;letter-spacing:0.12em;color:#8e8e95;
}
@keyframes s7flyx{0%,78.9%{transform:translateX(0)} 82.2%,100%{transform:translateX(100%)}}
@keyframes s7wipe{0%,78.9%{transform:translateX(0)} 82.2%,100%{transform:translateX(100%)}}
@keyframes s7flyy{
  0%,78.9%{transform:translateY(1.13cqw)}
  79.3125%{transform:translateY(0.28cqw)}
  79.725%{transform:translateY(-0.33cqw)}
  80.1375%{transform:translateY(-0.7cqw)}
  80.55%{transform:translateY(-0.82cqw)}
  80.9625%{transform:translateY(-0.7cqw)}
  81.375%{transform:translateY(-0.33cqw)}
  81.7875%{transform:translateY(0.28cqw)}
  82.2%,100%{transform:translateY(1.13cqw)}
}
@keyframes s7flyr{
  0%,78.9%{transform:rotate(-13deg)}
  79.9%{transform:rotate(-6deg)}
  80.55%{transform:rotate(0deg)}
  81.4%{transform:rotate(6deg)}
  82.2%{transform:rotate(11deg)}
  82.55%,100%{transform:rotate(0deg)}
}

.s7-stats{left:5.5%;right:auto;width:46%;top:91%}


/* ── 8 STICKER · RIPTIDE ──────────────────────────────────────
   The line-up is the page: seven canon acts at poster size over
   the stage photograph, in the left column where there was dead
   air. The schedule goes to the phone's four rows, the QR sticker
   gets its wiggle, two more sticker dots pop in, every dot gets a
   glyph, and the marquee gets enough repeats to fill the band —
   it held 541 px of text in a 571 px window, so the right half of
   the band ran empty for most of the loop. */

.dsg--sticker .dg-hero{top:19.5%;width:52%}
.dsg--sticker .dg-h{line-height:0.95}
.r8-word{font-size:12cqw;letter-spacing:-0.018em;-webkit-text-stroke:0.2cqw #000}
.dsg--sticker .dg-body{font-size:1.8cqw;margin-top:1.5cqw}
.dsg--sticker .dg-btns{margin-top:1.9cqw;align-items:center;gap:1.4cqw}
.dsg--sticker .dg-cta{padding:1.3cqw 2.6cqw;font-size:1.6cqw;box-shadow:0.45cqw 0.45cqw 0 #000}
.r8-pass{
  font-size:1.25cqw;font-weight:800;color:#000;letter-spacing:0.02em;white-space:nowrap;
  background:#ffd731;border:2px solid #000;border-radius:9999px;
  padding:0.85cqw 1.5cqw;box-shadow:0.3cqw 0.3cqw 0 #000;
}

.m8{top:15%;aspect-ratio:16/9}
.m8 .dg-img{filter:grayscale(1) contrast(1.06) brightness(1.08)}
.m8-scrim{
  position:absolute;inset:0;display:block;z-index:2;opacity:0.66;
  background:linear-gradient(165deg,#4da2ff 0%,#5c4ade 72%,#3a2fa8 100%);
  mix-blend-mode:multiply;
}
.r8-star{right:39%;top:9.5%;width:10%}

/* the set times, all four of them, as on the phone */
.r8-sched{
  left:auto;right:5%;top:54.4%;width:42%;
  border-radius:1.8cqw;box-shadow:0.5cqw 0.5cqw 0 #000;padding:0.25cqw 1.5cqw;
}
.r8-srow{padding:0.6cqw 0;font-size:1.35cqw;line-height:1.2;gap:0.8cqw}
.r8-srow b{margin-left:auto}
.r8-srow--live i{
  width:0.85cqw;height:0.85cqw;border-radius:50%;background:#55db9c;flex:none;
  animation:f5pulse 2.75s ease-in-out infinite;
}

/* the QR sticker, wiggling like the phone's */
.r8-qr{
  right:5%;top:77.4%;width:42%;display:block;
  background:none;border:0;border-radius:0;padding:0;
}
.r8-qrin{
  display:flex;align-items:center;gap:1.3cqw;color:#fff;
  background:#5c4ade;border:2px solid #000;border-radius:1.8cqw;
  box-shadow:0.5cqw 0.5cqw 0 #000;padding:0.78cqw 1.1cqw;
  animation:r8qrw 5s ease-in-out infinite;
}
@keyframes r8qrw{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}

/* THE LINE-UP — seven acts, poster size, over the stage photograph.
   The names carry z-index so the absolutely-positioned photo and
   its scrim cannot paint over them. */
.r8-lineup{
  left:5.5%;right:auto;top:63.6%;width:42.5%;
  border-radius:1.8cqw;box-shadow:0.5cqw 0.5cqw 0 #000;
  padding:1.35cqw;gap:0 1.1cqw;align-content:flex-start;
}
.r8-luscrim{background:linear-gradient(165deg,rgba(9,32,60,0.52) 0%,rgba(9,32,60,0.87) 100%)}
.r8-lineup em{font-size:1.1cqw;line-height:1.2;letter-spacing:0.2em;color:#9fd0ff;margin-bottom:0.45cqw}
.r8-lineup b{font-size:2.55cqw;line-height:1.1;letter-spacing:-0.025em}
.r8-lineup .r8-sm{
  font-size:1.65cqw;font-weight:700;line-height:1.25;letter-spacing:0.01em;color:#bcd6ee;
}
.r8-lineup .r8-a1{color:#ffd731}
.r8-lineup .r8-a2{color:#55db9c}
.r8-rot{transform:rotate(-1.8deg)}

/* sticker dots: seven, glyphed, none hanging off the canvas */
.st{position:relative;display:grid;place-items:center}
.st::after{position:relative;font-weight:900;line-height:1;color:#000}
.st--1::after{content:"\2605";color:#fff;font-size:2.2cqw}
.st--2::after{content:"~";color:#04321f;font-size:2.4cqw;margin-top:-0.35cqw}
.st--3::after{content:"\25CF";font-size:1.4cqw}
.st--4::after{content:"\25B2";font-size:1.5cqw}
.st--5::after{content:"+";font-size:2.4cqw}
.st--6{width:3.8cqw;height:3.8cqw;background:#4da2ff;border-radius:1.2cqw;--r:-11deg;animation-delay:3.5s}
.st--6::after{content:"\2605";color:#fff;font-size:2cqw}
.st--7{width:3cqw;height:3cqw;background:#fb4903;border-radius:50%;--r:14deg;animation-delay:4.2s}
.st--7::after{content:"\00D7";color:#fff;font-size:2.1cqw}
.stw--1{left:47%;top:11%;right:auto}
.stw--2{left:49.5%;top:56.5%;right:auto}
.stw--3{left:auto;right:3.5%;top:11.5%}
.stw--4{left:49.5%;top:41.5%;right:auto}
.stw--5{left:3%;top:58%;right:auto}
.stw--6{left:47.5%;top:79%;right:auto;animation:g8s6 44s linear infinite}
.stw--7{left:auto;right:2.5%;top:52.5%;animation:g8s7 44s linear infinite}
@keyframes g8s6{
  0%,90.43%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
  91.45%,100%{opacity:1;transform:scale(1)}
}
@keyframes g8s7{
  0%,90.93%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
  91.95%,100%{opacity:1;transform:scale(1)}
}

/* slide-8 build order, re-spaced around the new blocks */
@keyframes r8sc{
  0%,90.11%{opacity:0;transform:translateY(1.4cqw)}
  91.14%,100%{opacity:1;transform:none}
}
@keyframes x8{
  0%,91.36%{opacity:0;transform:translateY(1.2cqw)}
  92.39%,100%{opacity:1;transform:none}
}
@keyframes r8lu{
  0%,91.93%{opacity:0;transform:translateY(1.2cqw)}
  92.95%,100%{opacity:1;transform:none}
}
@keyframes r8lui{
  0%,92.61%{opacity:0}
  93.41%,100%{opacity:1}
}

/* the marquee band, now eight repeats wide, at a readable pace */
.r8-mt{animation:marqX 30s linear infinite}


/* reduced motion: the two new mechanisms have to land on their
   finished state, because the blanket kill removes the keyframes
   that would otherwise have moved them there. */
@media (prefers-reduced-motion:reduce){
  .s7-wipe{opacity:0}
  .s7-fly{transform:translateX(100%)}
  .s7-flyv{transform:translateY(1.13cqw)}
  .s7-legr{transform:translateY(0)}
}


/* ════════════════════════════════════════════════════════════
   MOBILE PASS — the eight .dsg slides at phone size
   ────────────────────────────────────────────────────────────
   The slides are sized in cqw against .lap__screen, so they
   scaled proportionally — and that was the bug: a 1.15cqw
   changelog row is 6.6px on a 571px laptop and 3.8px on a
   333px one, and a headline tuned to graze the 46% text column
   grazes it at every size (TEMPESTA ran straight into the car).
   Shrinking a desktop layout is not a mobile layout.

   So below ~460px of SCREEN width (a container query, not a
   viewport one — the laptop is what changes size, not the page)
   each slide is re-composed as a poster:

     · one column of type, sized up in relative terms so the
       smallest label is ~7px instead of ~4px;
     · the photograph promoted from a 42% side panel to either a
       full-bleed background behind a directional scrim or a
       full-width bottom band — whichever the concept wants;
     · every secondary row that cannot be read at this size
       (destination thumbs, changelogs, line-up grids, spec
       tiles, contributor avatars) dropped, leaving each slide
       its ONE signature element and its hero moment;
     · display headlines on clamp() so they fill the screen
       width without wrapping or bleeding off the edge.

   Nothing here touches the 44s master cycle: no keyframe
   timings change, every element that survives keeps its own
   build-in, and the signature motion (constellation drift,
   headlamp flare, lime scan, moon + shooting star, toggle
   flips, marquees, jet arc, sticker pops) all still plays.
   No rule sets a base opacity:0, so prefers-reduced-motion
   still lands on a finished slide.
   ════════════════════════════════════════════════════════════ */

@container (max-width:460px){

  /* ── shared anatomy ───────────────────────────────────────
     One column, wider gutters, and a type scale with a real
     legibility floor: nothing on a mobile slide is below 2cqw
     (about 6.7px at 333px of screen), where the desktop deck
     went down to 0.95cqw. */
  .dg-nav{left:5.5%;right:5.5%;top:4.4%}
  .dg-wm{font-size:3.1cqw}
  .dg-links{font-size:2cqw;letter-spacing:0.1em}
  .dg-hero{left:6%;width:60%}
  .dg-eyebrow{font-size:2.3cqw;letter-spacing:0.14em}
  .dg-h{margin-top:1.8cqw;line-height:1.04}
  .dg-body{margin-top:1.9cqw;font-size:2.35cqw;line-height:1.4}
  .dg-btns{margin-top:2.1cqw;gap:2cqw}
  .dg-cta,.dg-ghost{padding:1.7cqw 3.4cqw;font-size:2.3cqw}


  /* ── 1 velvet · the constellation keeps the right third ───
     The Selected Work strip and the pager dots go: at this size
     the thumbnails were 30px wide with 3.7px captions, and the
     SELECTED WORK label sat inside the star field. Without them
     the constellation gets a clean column of its own, and the
     stats trio moves down into the space they left. */
  .dsg--velvet .dg-hero{top:18%;width:52%}
  .dsg--velvet .dg-h{font-size:clamp(18px,8.1cqw,28px)}
  .dsg--velvet .dg-body{font-size:2.3cqw}
  .msD-const{left:5%;right:auto}
  .msD-halo{left:52%;top:12%;width:50%;height:74%}
  .v1-work,.v1-dots{display:none}
  .v1-stats{top:79.5%;width:52%;gap:3.4cqw;padding-top:1.6cqw}
  .v1-stats span{font-size:2cqw}
  .v1-stats b{font-size:4.4cqw}


  /* ── 2 showroom · the car becomes the stage ───────────────
     TEMPESTA is the slide. It gets the full width and the photo
     goes full-bleed behind a two-axis scrim (dark left for the
     type, dark bottom for the marquee), which is how a marque
     site shoots a hero anyway. The model list, the MODELS 01/04
     label and the two material thumbs are dropped; the roaming
     stage light, the sheen, the headlamp flare, the pips and
     the spec marquee — the signature five — all stay. */
  .dsg--showroom .dg-hero{top:19%;width:88%}
  .dsg--showroom .dg-eyebrow{font-size:2.2cqw;letter-spacing:0.2em}
  .dsg--showroom .dg-h{font-size:clamp(38px,18cqw,66px)}
  .dsg--showroom .dg-body{margin-top:1.6cqw;font-size:2.1cqw;letter-spacing:0.12em}
  .dsg--showroom .dg-cta,.dsg--showroom .dg-ghost{padding:1.6cqw 3cqw;font-size:2.1cqw;letter-spacing:0.14em}
  .dsg--showroom .m2{
    left:0;right:0;top:0;bottom:0;width:auto;height:auto;aspect-ratio:auto;z-index:0;
  }
  .dsg--showroom .m2 .dg-img{object-position:76% 44%}
  .dsg--showroom .m2::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(96deg,#000 8%,rgba(0,0,0,0.92) 34%,rgba(0,0,0,0.40) 66%,rgba(0,0,0,0.62) 100%),
      linear-gradient(180deg,rgba(0,0,0,0.62) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 58%,rgba(0,0,0,0.88) 100%);
  }
  .dsg--showroom .a2-lamp{left:60%;top:36%;width:22%;height:22%}
  .a2-lbl,.a2-models,.a2-det{display:none}
  .a2-pips{top:auto;bottom:11.5%;right:6%;gap:1.6cqw}
  .a2-pips i{width:5.2cqw;height:2px;background:rgba(255,255,255,0.42)}
  .a2-band{padding:1.4cqw 0}
  .a2-bt{font-size:2.3cqw;letter-spacing:0.16em}


  /* ── 3 biolab · the whole screen becomes the instrument ───
     The microscopy leaves its 42% panel and backs the entire
     slide at 30%, which lets the lime scan sweep the full
     screen instead of a thumbnail — the concept's signature,
     finally at signature size. The framing corners and the two
     reticle rules become the instrument's own chrome. The
     specimen dot grid, the contributor avatars and the
     publication row go; the typing terminal stays, because it
     is part of the hero block. */
  .dsg--biolab .dg-hero{top:15.5%;width:74%}
  .dsg--biolab .dg-eyebrow{font-size:2.15cqw}
  .dsg--biolab .dg-h{font-size:clamp(20px,9cqw,32px)}
  .dsg--biolab .dg-body{font-size:2.25cqw;width:94%}
  .dsg--biolab .dg-cta{padding:1.5cqw 3cqw;font-size:2.1cqw}
  .dsg--biolab .m3{
    left:0;right:0;top:0;bottom:0;width:auto;height:auto;aspect-ratio:auto;
    border-radius:0;background:#222f30;z-index:0;
  }
  .dsg--biolab .m3 .dg-img{opacity:0.2;object-position:50% 46%}
  .c3-corners{inset:3.5%}
  .c3-scan{height:20%}
  .c3-ret,.c3-grid,.c3-team,.c3-pub,.c3-stats{display:none}
  .c3-term{top:44.6cqw;font-size:2cqw}
  .c3-pass{font-size:2cqw}


  /* ── 4 literary · the night sky becomes the footer plate ──
     Fieldnote has to stay a cream page — a full-bleed photo
     would make it somebody else's magazine — so the night
     scene runs the full width as a bottom plate instead, moon
     and shooting star intact, and the serif headline gets the
     whole page above it. The four essay rows, the stats, the
     thumbnail list and the colophon are dropped: at 333px they
     were four competing 4px rows under a 26px headline. */
  .dsg--literary .dg-nav{position:absolute}
  .dsg--literary .dg-hero{top:13%;width:88%}
  .dsg--literary .dg-h{font-size:clamp(19px,8.4cqw,30px)}
  .dsg--literary .dg-body{width:78%;font-size:2.3cqw}
  .dsg--literary .dg-cta{padding:1.6cqw 3.4cqw;font-size:2.2cqw}
  .dsg--literary .m4{
    left:0;right:0;top:auto;bottom:0;width:auto;height:21%;aspect-ratio:auto;
    border:0;border-top:1px solid #dee2de;border-radius:0;
  }
  .dsg--literary .m4 .dg-img{object-position:50% 76%}
  .f4-moon{left:80%;top:12%;width:4.5%}
  .f4-star{width:0.8cqw;height:0.8cqw}
  .f4-rows,.f4-stats,.f4-ess,.f4-foot{display:none}


  /* ── 5 control · the flag panel is the only panel ─────────
     A dev console reads as a dev console because something is
     switching by itself, so the toggle panel keeps its column
     and everything else in the right rail — the code block, the
     status line, the audit trail, the tab pills that were
     sitting on top of the nav — is dropped. The rollout chart
     stays inside the panel: it is the toggle's consequence. */
  .dsg--control .dg-hero{top:17%;width:48%}
  .dsg--control .dg-h{font-size:clamp(20px,9.2cqw,32px)}
  .dsg--control .dg-body{font-size:2.25cqw}
  .f5-tabs,.f5-code,.f5-status,.f5-audit{display:none}
  .f5-logos{left:6%;top:87.5%;width:48%;padding-top:1.7cqw}
  .f5-logos i{font-size:2.1cqw}
  .f5-input{gap:1.6cqw;padding:1.1cqw 1.1cqw 1.1cqw 2cqw;border-radius:1.8cqw;font-size:2.1cqw}
  .f5-input b{padding:1.2cqw 2.2cqw;border-radius:1.4cqw;font-size:2.1cqw}
  .f5-panel{right:5.5%;top:17%;width:38%;padding:2.2cqw;gap:2cqw;border-radius:2.6cqw}
  .f5-row{gap:1.2cqw;font-size:2.2cqw}
  .f5-tg{width:6.4cqw;height:3.3cqw}
  .f5-tg > i{top:0.5cqw;left:0.5cqw;width:2.3cqw;height:2.3cqw;animation-name:f5knobM}
  .f5-chline{padding-top:1.8cqw;gap:1cqw}
  .f5-chline svg{height:7cqw}
  .f5-chline b{font-size:1.9cqw}
  .f5-glow{left:-26%;width:108%}


  /* ── 6 pastoral · sunrise behind the cream ────────────────
     The farm photograph fills everything under the green bar
     and a cream gradient holds the left 55% for the serif, so
     the type never sits on the field. The quilt, the caption
     card, the stats and the impact link go — the quilt tiles
     were 33px wide with 4.5px labels — and the lime marquee,
     the concept's loudest gesture, keeps the bottom band. */
  .dsg--pastoral .dg-hero{top:21%;width:60%}
  .dsg--pastoral .dg-eyebrow{font-size:2.2cqw}
  .dsg--pastoral .dg-h{font-size:clamp(18px,8cqw,28px)}
  .dsg--pastoral .dg-body{font-size:2.25cqw}
  .dsg--pastoral .dg-cta{padding:1.7cqw 3.2cqw;font-size:2.2cqw}
  .dsg--pastoral .dg-ghost{background:#f1efdf;padding:1.7cqw 3.2cqw;font-size:2.2cqw}
  .dsg--pastoral .m6{
    left:0;right:0;top:12.5%;bottom:0;width:auto;height:auto;aspect-ratio:auto;
    border-radius:0;z-index:0;
  }
  .dsg--pastoral .m6 .dg-img{object-position:72% 50%}
  .m6-scrim{
    background:linear-gradient(94deg,#f1efdf 30%,rgba(241,239,223,0.93) 56%,rgba(241,239,223,0.06) 86%);
  }
  .m6-sun{left:64%;top:12%;width:26%}
  .m6-cap,.m6-quilt,.m6-link,.m6-stats{display:none}
  .m6-marq{padding:1.5cqw 0}
  .m6-mt{font-size:2.3cqw}


  /* ── 7 aviation · the jet flies the whole width ───────────
     The photograph goes full-bleed behind a white scrim, and
     the route map — the arc, the two markers, the aircraft and
     the contrail wiper, this slide's signature motion — leaves
     the 46% column and runs the full width along the bottom,
     where it reads as an itinerary instead of a doodle. The
     fleet table, the destination thumbs, the clay card, the
     stats and the empty-leg ticker are dropped; the dawn sun
     and the three drifting clouds stay on the photo. */
  .dsg--aviation .dg-hero{top:16%;width:62%}
  .dsg--aviation .dg-h{font-size:clamp(22px,10cqw,36px)}
  .dsg--aviation .dg-body{margin-top:1.9cqw;font-size:2.25cqw}
  .dsg--aviation .dg-btns{margin-top:2.1cqw}
  .dsg--aviation .dg-cta{padding:1.7cqw 3.4cqw;font-size:2.2cqw}
  .dsg--aviation .m7{
    left:0;right:0;top:0;bottom:0;width:auto;height:auto;aspect-ratio:auto;z-index:0;
  }
  .dsg--aviation .m7 .dg-img{object-position:80% 44%}
  .dsg--aviation .m7::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(92deg,#fff 30%,rgba(255,255,255,0.96) 58%,rgba(255,255,255,0.62) 74%,rgba(255,255,255,0.06) 93%);
  }
  .s7-sun{left:auto;right:3%;top:3%;width:30%;z-index:2}
  .s7-cloud--1{top:9%}
  .s7-cloud--2{top:22%}
  .s7-cloud--3{top:4%}
  .s7-wing,.s7-fleet,.s7-dest,.s7-clay,.s7-stats,.s7-leg{display:none}
  .s7-route{left:6%;width:88%;top:83%;column-gap:1.6cqw;font-size:2.1cqw}
  .s7-arc{height:6.4cqw}
  .s7-arc::before,.s7-arc::after{bottom:0.5cqw;width:1.5cqw;height:1.5cqw}
  .s7-fly{height:5cqw}
  .s7-flyv{width:5cqw;height:5cqw;left:-2.5cqw}
  .s7-rdur{display:none}


  /* ── 8 sticker · one poster, seven stickers ───────────────
     RIPTIDE takes the full width, the crowd photograph becomes
     a band above the marquee, and the JUN 12-13 starburst comes
     off the nav links (where it was covering LINE-UP / STAGES)
     and down onto the photo, where a sticker belongs. The
     set-times card, the QR sticker and the line-up card go —
     three bordered cards stacked in a 143px column — but all
     seven sticker dots stay and are re-placed so none of them
     lands on type. */
  .dsg--sticker .dg-hero{top:16%;width:86%}
  .dsg--sticker .dg-eyebrow{font-size:2.2cqw}
  .r8-word{font-size:clamp(32px,15.5cqw,56px);-webkit-text-stroke:0.28cqw #000}
  .dsg--sticker .dg-body{margin-top:1.9cqw;font-size:2.2cqw}
  .dsg--sticker .dg-btns{margin-top:2.1cqw;gap:1.8cqw}
  .dsg--sticker .dg-cta{padding:1.6cqw 3cqw;font-size:2.3cqw;border-radius:2.2cqw;box-shadow:0.6cqw 0.6cqw 0 #000}
  .r8-pass{padding:1.2cqw 2.2cqw;font-size:1.9cqw;box-shadow:0.45cqw 0.45cqw 0 #000}
  .r8-logo{padding:1.2cqw 3cqw;font-size:2.4cqw}
  .dsg--sticker .dg-links{font-size:2cqw}
  .r8-plus{width:4.6cqw;height:4.6cqw;font-size:2.6cqw}
  .dsg--sticker .m8{
    left:0;right:0;top:auto;bottom:8.8%;width:auto;height:20%;aspect-ratio:auto;
    border:0;border-top:2px solid #000;border-radius:0;box-shadow:none;
  }
  .dsg--sticker .m8 .dg-img{object-position:50% 64%;filter:grayscale(1) contrast(1.06) brightness(1.34)}
  .dsg--sticker .m8-scrim{opacity:0.42}
  .r8-sched,.r8-qr,.r8-lineup{display:none}
  .r8-star{left:auto;right:4%;top:59%;width:16%}
  .r8-star b{font-size:2.3cqw}
  .r8-marq{padding:1.3cqw 0}
  .r8-mt{font-size:2.2cqw}
  .stw--1{left:88%;right:auto;top:17%}
  .stw--2{left:5%;right:auto;top:76%}
  .stw--3{left:auto;right:4%;top:33%}
  .stw--4{left:79%;right:auto;top:46%}
  .stw--5{left:38%;right:auto;top:77%}
  .stw--6{left:63%;right:auto;top:79%}
  .stw--7{left:21%;right:auto;top:74%}
}

/* the mobile toggle knob is a bigger knob on a bigger track, so it
   needs its own travel — same 5.5s clock, same steps, same delays */
@keyframes f5knobM{
  0%,44%{transform:translateX(3.1cqw)}
  50%,94%{transform:translateX(0)}
  100%{transform:translateX(3.1cqw)}
}

/* ── the chassis at phone size ──
   The deck and front lip are drawn 114% wide with a -7% pull so
   the base reads wider than the lid. At 360px that put both ends
   3px past the hero's clip edge — the laptop looked cropped. A
   shallower overhang keeps the same silhouette inside the gutter. */
@media (max-width:560px){
  .lap__deck,.lap__front{width:108%;margin-left:-4%}
  .lap__shadow{width:104%}
  /* The two work-in-progress cards are drawn at a fixed pixel size, so
     at phone width they covered a third of the screen they are meant to
     be floating beside - the code card sat on the AURELIO wordmark, the
     score card on the marquee. The laptop fills its stage at this width,
     so there is no room for a 100px card anywhere over the glass: they
     shed their third row, shrink, and dock in the 40px above the lid and
     the 48px below the base, touching the chassis and never the screen. */
  .fcard--code{width:94px;padding:5px 8px;gap:2px}
  .fcard--code .fm-spark{display:none}
  .fcard--code .fcard__dots{display:none}
  .fm-label{font-size:8px;line-height:1.25}
  .fm-row{line-height:1}
  .fm-num{font-size:17px;line-height:1}
  .fm-badge{font-size:8.5px;padding:2px 5px;line-height:1.2}
  /* parallax drifts each card up to 24px against the laptop as you
     scroll, so no static gap is safe on a 390px stage - park it on
     phones and the two docks below become deterministic. */
  .float__par{transform:none !important}
  .float--code{top:auto;bottom:-18%;left:-3%}
  .fcard--score{padding:6px 9px 5px;gap:2px}
  .fcard--score .fperf{display:none}
  .fring-wrap{width:32px;height:32px}
  .fscore{font-size:12px}
  .fcard__label{font-size:8px}
  .float--score{top:auto;bottom:-18%;right:-3%}
}

/* ─────────── Pricing: "Starting at" prefix + starting-point note ─────────── */
.price__pre{
  /* inherits the small granite treatment from `.price__amount span`;
     the negative right margin tightens it against the number */
  margin-right:-2px;
}
.pricing__note + .pricing__note{margin-top:8px}