/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  color-scheme: light;

  /* paper + ink */
  --paper:#FBF3E4;
  --paper-2:#FFF9EF;
  --paper-3:#F3E7CE;
  --ink:#1F1B18;
  --ink-70:rgba(31,27,24,.70);
  --ink-45:rgba(31,27,24,.45);
  --ink-14:rgba(31,27,24,.14);

  /* retro-bright palette */
  --red:#EE3B33;
  --red-deep:#B92219;      /* white text safe (6.2:1) */
  --mustard:#FFB627;
  --mustard-deep:#D98B00;
  --teal:#14A19A;
  --teal-deep:#0A6560;     /* white text safe (5.9:1) */
  --pink:#FF5FA2;
  --blue:#2F6FED;
  --blue-deep:#1B4BB5;
  --cream-line:#E4D5B4;

  /* structure */
  --bw:4px;                /* border width */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:24px;
  --sh:6px 6px 0 var(--ink);
  --sh-lg:10px 10px 0 var(--ink);
  --sh-sm:4px 4px 0 var(--ink);

  /* spacing scale (density 6 / standard) */
  --s1:8px; --s2:12px; --s3:16px; --s4:24px;
  --s5:32px; --s6:48px; --s7:64px; --s8:96px;

  /* type */
  --f-display:"Anton","Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  --f-script:"Yellowtail","Brush Script MT",cursive;
  --f-body:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:160ms;
  --t-base:240ms;

  --star16:polygon(50% 0%,57.41% 12.73%,69.13% 3.81%,71.11% 18.4%,85.36% 14.64%,81.6% 28.89%,96.19% 30.87%,87.27% 42.59%,100% 50%,87.27% 57.41%,96.19% 69.13%,81.6% 71.11%,85.36% 85.36%,71.11% 81.6%,69.13% 96.19%,57.41% 87.27%,50% 100%,42.59% 87.27%,30.87% 96.19%,28.89% 81.6%,14.64% 85.36%,18.4% 71.11%,3.81% 69.13%,12.73% 57.41%,0% 50%,12.73% 42.59%,3.81% 30.87%,18.4% 28.89%,14.64% 14.64%,28.89% 18.4%,30.87% 3.81%,42.59% 12.73%);
  --star12:polygon(50% 0%,59.32% 15.23%,75% 6.7%,75.46% 24.54%,93.3% 25%,84.77% 40.68%,100% 50%,84.77% 59.32%,93.3% 75%,75.46% 75.46%,75% 93.3%,59.32% 84.77%,50% 100%,40.68% 84.77%,25% 93.3%,24.54% 75.46%,6.7% 75%,15.23% 59.32%,0% 50%,15.23% 40.68%,6.7% 25%,24.54% 24.54%,25% 6.7%,40.68% 15.23%);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{display:block;max-width:100%}
/* width/height attrs are there to reserve space (CLS); without height:auto the
   attribute height sticks as the used height and every image stretches. */
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.02;font-family:var(--f-display);font-weight:400;letter-spacing:.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}

/* newsprint grain over everything */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9000;
  pointer-events:none;
  opacity:.28;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(31,27,24,.16) 0 .5px, transparent .6px);
  background-size:3px 3px;
}

::selection{background:var(--mustard);color:var(--ink)}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--ink);color:var(--paper);padding:12px 18px;font-weight:700;
}
.skip:focus{left:8px;top:8px}

/* ============================================================
   3. LAYOUT
   ============================================================ */
.wrap{width:min(1200px,100% - 2*var(--s4));margin-inline:auto}
@media (max-width:600px){.wrap{width:calc(100% - 2*var(--s3))}}

section{position:relative;padding:var(--s8) 0}
@media (max-width:760px){section{padding:var(--s7) 0}}

.band--paper2{background:var(--paper-2)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--teal{background:var(--teal)}
.band--mustard{background:var(--mustard)}

/* zig-zag torn edge */
.zig{height:16px;width:100%;--zc:var(--paper)}
.zig--top{
  background:
    linear-gradient(-45deg, var(--zc) 12px, transparent 0) 0 0/24px 24px repeat-x,
    linear-gradient(45deg, var(--zc) 12px, transparent 0) 0 0/24px 24px repeat-x;
}
.zig--bottom{
  transform:scaleY(-1);
  background:
    linear-gradient(-45deg, var(--zc) 12px, transparent 0) 0 0/24px 24px repeat-x,
    linear-gradient(45deg, var(--zc) 12px, transparent 0) 0 0/24px 24px repeat-x;
}

/* ============================================================
   4. TYPE
   ============================================================ */
.display{font-family:var(--f-display);text-transform:uppercase;line-height:.92}
.script{font-family:var(--f-script);text-transform:none;font-weight:400;line-height:1.25}

.h-xxl{font-size:clamp(2.9rem,10.5vw,7.2rem);text-transform:uppercase}
.h-xl {font-size:clamp(2.3rem,6.4vw,4.4rem);text-transform:uppercase}
.h-lg {font-size:clamp(1.7rem,4vw,2.9rem);text-transform:uppercase}
.h-md {font-size:clamp(1.3rem,2.5vw,1.8rem)}
.h-sm {font-size:1.05rem;letter-spacing:.02em}

.lead{font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:62ch;color:var(--ink-70)}
.small{font-size:.86rem;line-height:1.55}
.tiny{font-size:.8rem;letter-spacing:.01em;font-weight:700}
.mono-num{font-variant-numeric:tabular-nums}

.underline-brush{position:relative;display:inline-block}
.underline-brush::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.16em;
  background:var(--red);border-radius:60% 40% 55% 45%/100% 100% 100% 100%;
  transform:rotate(-.8deg);
}
.hl{background:var(--mustard);padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* section heading block */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3) var(--s5);margin-bottom:var(--s6)}
.sec-head__kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--paper);
  padding:6px 14px;border-radius:999px;
  font-size:.8rem;letter-spacing:.02em;font-weight:700;
  transform:rotate(-1.5deg);
}
.sec-head__txt{flex:1 1 420px;min-width:0}
.sec-head__aside{flex:0 1 300px}

/* ============================================================
   5. BUTTONS / CHIPS / STICKERS
   ============================================================ */
.btn{
  --btn-bg:var(--mustard);
  --btn-fg:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:13px 24px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:var(--bw) solid var(--ink);
  border-radius:999px;
  font-weight:700;font-size:.98rem;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  box-shadow:var(--sh);
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out),background var(--t-fast) linear;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn svg{width:20px;height:20px;flex:none;transition:transform var(--t-base) var(--e-spring)}
.btn:hover svg{transform:translateX(3px) rotate(-8deg)}
.btn--red{--btn-bg:var(--red-deep);--btn-fg:#fff}
.btn--teal{--btn-bg:var(--teal-deep);--btn-fg:#fff}
.btn--pink{--btn-bg:var(--pink)}
.btn--paper{--btn-bg:var(--paper-2)}
.btn--sm{min-height:44px;padding:9px 18px;font-size:.82rem;box-shadow:var(--sh-sm)}
.btn--block{width:100%}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;min-height:36px;max-width:100%;
  background:var(--paper-2);
  border:2px solid var(--ink);border-radius:999px;
  font-size:.84rem;font-weight:600;white-space:normal;text-align:left;line-height:1.3;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform var(--t-fast) var(--e-out),background var(--t-fast) linear;
}
.chip svg{width:16px;height:16px;flex:none}
.chip:hover{transform:translate(-2px,-2px) rotate(-1.5deg);background:var(--mustard)}
.chip--mustard{background:var(--mustard)}
.chip--teal{background:#B7E8E4}
.chip--pink{background:#FFD3E5}
.chip--red{background:#FFCFCB}
.chip--blue{background:#CFE0FF}

.tag{
  display:inline-block;padding:4px 10px;
  border:2px solid var(--ink);border-radius:6px;
  font-size:.78rem;font-weight:700;letter-spacing:.01em;
  background:var(--paper-2);
}

/* sticker = burst badge. NOTE: never use % padding here — percentages resolve
   against the containing block, not the badge, which throws the text off-centre. */
.sticker{
  display:grid;place-items:center;
  background:var(--red);color:#fff;
  clip-path:var(--star16);
  aspect-ratio:1;
  padding:0;
  font-family:var(--f-display);text-transform:uppercase;
  line-height:1;
}
.sticker__in{
  display:block;width:62%;text-align:center;
  font-size:.72em;letter-spacing:.02em;
}
.sticker__in b{display:block;font-weight:400;font-size:2.3em;line-height:.92}
.sticker--mustard{background:var(--mustard);color:var(--ink)}
.sticker--teal{background:var(--teal);color:var(--ink)}
.sticker--pink{background:var(--pink);color:var(--ink)}
.sticker--12{clip-path:var(--star12)}

.card{
  background:var(--paper-2);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r-md);
  box-shadow:var(--sh);
  padding:var(--s4);
}
.card--tilt-l{transform:rotate(-1.2deg)}
.card--tilt-r{transform:rotate(1.2deg)}

.tape{
  position:absolute;width:96px;height:26px;
  background:rgba(255,182,39,.72);
  border:2px solid rgba(31,27,24,.35);
  box-shadow:0 2px 0 rgba(31,27,24,.12);
}

/* ============================================================
   6. MARQUEE
   ============================================================ */
.marquee{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--paper);
  border-block:var(--bw) solid var(--ink);
  padding:11px 0;
}
.marquee--red{background:var(--red);color:#fff}
.marquee--teal{background:var(--teal);color:var(--ink)}
.marquee__track{
  display:flex;width:max-content;
  animation:marq 26s linear infinite;
  will-change:transform;
}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee__track > span{
  display:inline-flex;align-items:center;gap:18px;
  padding-right:18px;white-space:nowrap;
  font-family:var(--f-display);font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;
}
.marquee__track b{font-weight:400}
.marquee__star{width:14px;height:14px;background:currentColor;clip-path:var(--star12);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ============================================================
   7. NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:800;
  background:var(--paper);
  border-bottom:var(--bw) solid var(--ink);
  padding-top:env(safe-area-inset-top);
}
.nav__in{display:flex;align-items:center;gap:var(--s3);min-height:66px}
.nav__logo{
  display:flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;font-weight:700;margin-right:auto;
}
@keyframes spin-slow{to{transform:rotate(360deg)}}
.nav__name{display:flex;flex-direction:column;line-height:1.05}
.nav__name b{font-family:var(--f-display);font-size:1.02rem;letter-spacing:.02em}
.nav__name span{font-size:.76rem;letter-spacing:.01em;color:var(--ink-70);font-weight:600}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__links a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;font-size:.83rem;font-weight:600;
  padding:9px 12px;border-radius:8px;
  transition:background var(--t-fast) linear,color var(--t-fast) linear;
}
.nav__links a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:8px;height:3px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--e-out);
}
.nav__links a:hover::after,.nav__links a[aria-current="true"]::after{transform:scaleX(1)}
.nav__cta{margin-left:var(--s2)}
.nav__burger{
  display:none;width:48px;height:48px;flex:none;
  align-items:center;justify-content:center;
  background:var(--mustard);border:3px solid var(--ink);border-radius:10px;
  box-shadow:var(--sh-sm);cursor:pointer;
}
.nav__burger:active{transform:translate(4px,4px);box-shadow:none}
.nav__burger svg{width:24px;height:24px}
.nav__panel{
  display:none;border-top:3px dashed var(--ink-14);
  padding:var(--s3) 0 var(--s4);
}
.nav__panel a{
  display:block;text-decoration:none;font-weight:600;
  padding:13px 8px;border-bottom:2px solid var(--ink-14);
}
.nav__panel a.btn{
  display:inline-flex;justify-content:center;
  border:var(--bw) solid var(--ink);padding:9px 18px;
}
.nav.is-open .nav__panel{display:block}
/* the nine links plus the CTA need ~990px; the container only clears that above
   ~1035px, so switch to the burger with headroom rather than letting it cram */
@media (max-width:1100px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:inline-flex}
}

/* ============================================================
   8. HERO
   ============================================================ */
.hero{padding:var(--s7) 0 0;position:relative;overflow:hidden}
.hero__grid{
  display:grid;gap:var(--s5);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:end;
}
.hero__copy{padding-bottom:var(--s6)}
/* Below this width the two columns can't stay top-level — the copy grows as it
   wraps while the figure shrinks with the column — so stack instead. */
@media (max-width:1200px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s4)}
  .hero{padding-top:var(--s5)}
  .hero__copy{padding-bottom:var(--s5)}
}
.hero__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:var(--s4)}
.hero__title{margin-bottom:var(--s2)}
.hero__title .l1{display:block;color:var(--ink)}
.hero__title .l2{display:block;color:var(--red)}
.hero__script{
  font-family:var(--f-script);
  font-size:clamp(1.7rem,4.4vw,3rem);
  color:var(--teal-deep);
  margin:-.12em 0 var(--s4);
  transform:rotate(-1.6deg);
  transform-origin:left;
}
.hero__blurb{margin-bottom:var(--s5);max-width:56ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin-top:var(--s5);padding-top:var(--s4);
  border-top:3px solid var(--ink);
}
.hero__meta div{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600}
.hero__meta svg{width:18px;height:18px;color:var(--red)}

/* cut-out figure on a sunburst.
   .shot is the grid cell; .shot__fig shrink-wraps the image so the rays and the
   badges size against the figure itself rather than the column — everything then
   stays in proportion at any width instead of jumping at a breakpoint. */
.shot{
  position:relative;align-self:end;justify-self:center;
  display:flex;align-items:flex-end;justify-content:center;
  width:100%;min-width:0;
}
.shot__fig{
  position:relative;
  width:100%;
  max-width:620px;
}
.shot__rays{
  position:absolute;left:50%;top:38%;
  width:152%;aspect-ratio:1;
  translate:-50% -50%;
  background:repeating-conic-gradient(from 0deg,var(--mustard) 0 7deg,transparent 7deg 14deg);
  -webkit-mask-image:radial-gradient(circle,#000 30%,rgba(0,0,0,.5) 52%,transparent 71%);
  mask-image:radial-gradient(circle,#000 30%,rgba(0,0,0,.5) 52%,transparent 71%);
  animation:spin-slow 60s linear infinite;
  z-index:0;
}
.shot__cut{
  position:relative;z-index:1;
  display:block;width:100%;height:auto;
  filter:drop-shadow(7px 9px 0 rgba(31,27,24,.16));
}
@media (max-width:1200px){
  .shot__fig{max-width:min(460px,84%)}
}
.shot__badge{
  position:absolute;z-index:2;
  width:31%;font-size:clamp(.8rem,2.4vw,1.25rem);
  right:-3%;bottom:15%;
  animation:bob-flat 5.5s ease-in-out infinite;
}
@keyframes bob-flat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.shot__tick{
  position:absolute;z-index:2;left:-5%;top:29%;
  background:var(--paper-2);border:var(--bw) solid var(--ink);border-radius:12px;
  box-shadow:var(--sh-sm);padding:10px 14px;transform:rotate(-4deg);
  animation:bob 6.5s ease-in-out infinite .6s;
}
.shot__tick b{font-family:var(--f-display);font-size:clamp(1rem,2.5vw,1.3rem);display:block;line-height:1}
.shot__tick i{font-style:normal;font-size:clamp(.58rem,1.4vw,.7rem);font-weight:600;color:var(--ink-70);white-space:nowrap}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(2deg)}}

/* ============================================================
   9. STATS
   ============================================================ */
.stats{
  display:grid;gap:0;
  grid-template-columns:repeat(5,1fr);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--sh);
  background:var(--paper-2);
}
.stat{padding:var(--s4) var(--s3);text-align:center;border-right:3px solid var(--ink)}
.stat:last-child{border-right:0}
.stat:nth-child(1){background:#FFCFCB}
.stat:nth-child(2){background:#FFE6B0}
.stat:nth-child(3){background:#B7E8E4}
.stat:nth-child(4){background:#FFD3E5}
.stat:nth-child(5){background:#CFE0FF}
.stat b{
  display:block;font-family:var(--f-display);
  font-size:clamp(1.9rem,4.2vw,3rem);line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat i{
  font-style:normal;display:block;margin-top:6px;
  font-size:.76rem;letter-spacing:.02em;font-weight:600;color:var(--ink-70);
}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:3px solid var(--ink)}
  .stat:nth-child(odd){border-right:3px solid var(--ink)}
  .stat:nth-child(even){border-right:0}
  .stat:last-child{grid-column:1 / -1;border-bottom:0;border-right:0}
}

/* ============================================================
   10. RETRO FRAMES — TV / PHONE / WALKIE / MONITOR
   ============================================================ */
.screen-media{position:absolute;inset:0;background:#0C0C12}
.screen-media img,.screen-media video{width:100%;height:100%;object-fit:cover;background:#000}
.screen-media video{cursor:pointer}
/* video/image only appears once its file is confirmed; otherwise placeholder stays */
.screen-media video:not(.is-ready),.screen-media img.auto-img:not(.is-ready){opacity:0;position:absolute;inset:0}

.slot{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  text-align:center;padding:14px;
  color:#F6EAD3;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.11) 0 1.1px, transparent 1.2px) 0 0/9px 9px,
    linear-gradient(155deg,#3A2A55 0%,#1B1B3A 45%,#0E1024 100%);
}
.slot__tag{
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  background:var(--mustard);color:var(--ink);padding:3px 8px;border-radius:4px;
}
.slot__name{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(.78rem,1.9vw,1.05rem);line-height:1.08;max-width:22ch;
}
.slot__hint{font-size:.62rem;letter-spacing:.05em;color:rgba(246,234,211,.78);max-width:26ch}
.slot--sm .slot__name{font-size:.72rem}
.slot--sm .slot__hint{display:none}

/* The scanline and glare overlay was removed on request — every screen now shows
   its content clean. `.scan` is kept as a hook because `setPlaying()` still uses
   it to find the frame and hide the stat pills while a video plays. */
.scan.is-playing .overlay-stats{display:none}

/* --- CRT TELEVISION (16:9) --- */
.tv{position:relative;padding-top:0}
/* Only the hero set wears rabbit ears. --ant-h drives both the stem length and the
   headroom above the cabinet, so the antenna always sits ON the box and stays
   inside .tv instead of floating over whatever is above it. */
.tv--antenna{
  --ant-h:clamp(64px,7.5vw,118px);
  --ant-pad:calc(var(--ant-h) * .79 + 20px);
  padding-top:var(--ant-pad);
}
.tv__ant{
  position:absolute;left:50%;top:calc(var(--ant-pad) + 4px);
  width:0;height:0;z-index:0;
}
.tv__ant i{
  position:absolute;bottom:0;left:0;margin-left:-3px;
  width:6px;height:var(--ant-h);
  background:var(--ink);border-radius:4px;transform-origin:bottom center;
}
.tv__ant i:nth-child(1){transform:rotate(-38deg)}
.tv__ant i:nth-child(2){transform:rotate(38deg)}
.tv__ant i::after{
  content:"";position:absolute;top:-11px;left:50%;translate:-50% 0;
  width:18px;height:18px;border-radius:50%;background:var(--red);border:3px solid var(--ink);
}
.tv--antenna:hover .tv__ant i:nth-child(1),.tv--antenna.is-in .tv__ant i:nth-child(1){animation:ant-l 2.6s var(--e-spring) infinite}
.tv--antenna:hover .tv__ant i:nth-child(2),.tv--antenna.is-in .tv__ant i:nth-child(2){animation:ant-r 2.6s var(--e-spring) infinite}
@keyframes ant-l{0%,100%{transform:rotate(-38deg)}50%{transform:rotate(-43deg)}}
@keyframes ant-r{0%,100%{transform:rotate(38deg)}50%{transform:rotate(43deg)}}

.tv__body{
  position:relative;z-index:1;
  background:var(--mustard);
  border:var(--bw) solid var(--ink);
  border-radius:26px;
  box-shadow:var(--sh-lg);
  padding:18px 18px 18px;
  display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:14px;
}
.tv--teal .tv__body{background:var(--teal)}
.tv--red .tv__body{background:var(--red)}
.tv--pink .tv__body{background:var(--pink)}
.tv--paper .tv__body{background:var(--paper-3)}
.tv__screen{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;
  border:var(--bw) solid var(--ink);
  border-radius:18px;
  background:#0C0C12;
  box-shadow:inset 0 0 34px rgba(0,0,0,.75);
}
.tv__panel{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:6px}
.tv__knob{
  width:34px;height:34px;border-radius:50%;
  background:var(--paper-2);border:3px solid var(--ink);
  box-shadow:inset -3px -3px 0 rgba(31,27,24,.18);
  position:relative;flex:none;
  transition:transform var(--t-base) var(--e-spring);
}
.tv__knob::after{content:"";position:absolute;left:50%;top:3px;width:3px;height:12px;background:var(--ink);translate:-50% 0;border-radius:2px}
.tv:hover .tv__knob{transform:rotate(140deg)}
.tv__grille{
  width:34px;height:52px;border-radius:6px;border:3px solid var(--ink);
  background:repeating-linear-gradient(to bottom,var(--ink) 0 3px,transparent 3px 7px);
  margin-top:auto;
}
.tv__led{
  width:11px;height:11px;border-radius:50%;background:#7CF29B;
  border:2px solid var(--ink);
  box-shadow:0 0 9px rgba(124,242,155,.9);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.tv__feet{display:flex;justify-content:space-between;padding:0 34px}
.tv__feet i{display:block;width:44px;height:14px;background:var(--ink);border-radius:0 0 8px 8px}
@media (max-width:520px){
  .tv__body{grid-template-columns:1fr;padding:14px}
  .tv__panel{flex-direction:row;align-items:center;justify-content:center;padding-top:2px}
  .tv__grille{width:64px;height:26px;margin:0;background:repeating-linear-gradient(to right,var(--ink) 0 3px,transparent 3px 7px)}
}

/* reels headline badge: fills the empty half of the header on wide screens,
   then drops onto the top-left corner of the first phone once the layout stacks */
/* The aside is a fixed-width flex track that must not shrink, and the star fills
   it and centres inside — so its distance from the right edge stays constant at
   every desktop width instead of sliding around as the header re-flows. */
.sec-head__aside--star{flex:0 0 clamp(240px,24%,300px)}
.reels-star{
  width:min(100%,280px);
  margin-inline:auto;
  font-size:clamp(1.5rem,1.9vw,2.15rem);
}
/* 820px is where .reel-hero stacks and the phone becomes centred — the star has to
   switch at the same width or it anchors to a phone that isn't there yet */
@media (max-width:820px){
  .sec-head__aside--star{
    flex:1 1 100%;width:100%;
    position:relative;z-index:4;
    margin-bottom:calc(-1 * clamp(84px,27vw,136px));
    margin-top:var(--s2);
  }
  /* the phone is centred at max 290px wide, so anchor the star to its left edge
     rather than to a percentage of the column */
  .reels-star{
    width:clamp(104px,29vw,132px);font-size:clamp(.95rem,3vw,1.2rem);
    margin-left:max(0px, calc(50% - 175px));
  }
}

/* Data & ops star: sits with the paragraph rather than dropping to the baseline,
   and stays beside the heading when the head wraps instead of taking a row of its
   own. .sec-head__txt has a 420px flex-basis, so it needs a smaller one here or
   the star is pushed onto its own line. */
#data .sec-head{align-items:center}
.data-star{width:190px;margin-left:auto;font-size:1.4rem}
@media (max-width:900px){
  #data .sec-head__txt{flex:1 1 260px}
  #data .sec-head__aside{flex:0 0 auto}
  .data-star{width:clamp(96px,17vw,140px);font-size:clamp(.82rem,2.1vw,1.15rem)}
}

/* the script line beside the skills heading */
.skills-script{
  font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.05;
  color:var(--red);transform:rotate(-2deg);
  text-align:right;margin-bottom:6px;
}
@media (max-width:900px){
  .skills-script{text-align:left;transform:rotate(-1.5deg);margin-top:var(--s2)}
}

#instagram .sec-head,
#kol .sec-head{align-items:center}

/* the slate ends on a row of sets with a marquee straight after, so a full
   96px section foot just reads as a hole */
.sec--tight-foot{padding-bottom:var(--s5)}

/* .tv--antenna already reserves headroom for the rabbit ears, so a full
   section-head gap on top of it left a visible hole above the set */
#youtube .sec-head{margin-bottom:var(--s3);align-items:center}

/* little round view-count sticker slapped on a TV corner */
.tv__sticker{
  position:absolute;z-index:4;
  top:-16px;right:-16px;
  width:clamp(78px,21%,116px);aspect-ratio:1;
  display:grid;place-items:center;
  background:var(--red);color:#fff;
  border:var(--bw) solid var(--ink);border-radius:50%;
  transform:rotate(-8deg);
  font-family:var(--f-display);
  font-size:clamp(.62rem,1.1vw,.82rem);
}
/* inner box keeps the type off the rim; % width resolves against the circle */
.tv__sticker span{display:block;width:76%;text-align:center;line-height:1.05}
.tv__sticker b{display:block;font-weight:400;font-size:1.95em;line-height:.92}
.tv--teal .tv__sticker{background:var(--mustard);color:var(--ink)}

/* screenshot screens: no scanlines, no power-on flicker, softer inner shadow */
.tv--plain .tv__screen{box-shadow:inset 0 0 14px rgba(0,0,0,.45)}
.tv--plain .tv__screen .screen-media{transform:none;opacity:1}

/* click-to-enlarge */
.zoom-btn{
  position:absolute;inset:0;z-index:6;
  border:0;padding:0;background:transparent;cursor:zoom-in;
  -webkit-appearance:none;appearance:none;
  display:block;
}
.zoom-btn:focus-visible{outline:3px solid var(--blue);outline-offset:-6px;border-radius:8px}
.zoom-btn__ico{
  position:absolute;right:10px;bottom:10px;
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;background:rgba(15,12,10,.78);color:#F6EAD3;
  border:2px solid rgba(246,234,211,.5);
  transition:transform var(--t-base) var(--e-spring),background var(--t-fast) linear;
}
.zoom-btn__ico svg{width:17px;height:17px}
.zoom-btn:hover .zoom-btn__ico{transform:scale(1.12);background:var(--red);border-color:var(--ink)}

.lightbox{
  position:fixed;inset:0;z-index:9500;
  display:none;place-items:center;
  /* extra headroom so a tall image never slides under the close button */
  padding:clamp(74px,9vw,92px) clamp(14px,4vw,48px) clamp(14px,4vw,48px);
  background:rgba(15,12,10,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.lightbox.is-open{display:grid}
/* the single track must be capped, or it grows to the image's natural height
   and everything measured against it overflows the screen */
.lightbox{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.lightbox__fig{
  /* grid, not flex: a percentage max-height on the image only resolves against
     a definite track. As a flex item the stage height stays indefinite and a
     tall portrait runs off the bottom of the screen. */
  margin:0;max-width:100%;height:100%;
  display:grid;grid-template-rows:minmax(0,1fr) auto auto;
  justify-items:center;gap:12px;
  animation:lb-in 220ms var(--e-out);
}
/* the stage takes the leftover height so the caption is never pushed off */
.lightbox__stage{
  position:relative;min-height:0;height:100%;max-width:100%;
  display:flex;align-items:center;justify-content:center;
}
@keyframes lb-in{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
.lightbox__img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  border:var(--bw) solid var(--ink);border-radius:12px;
  background:#0C0C12;box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.lightbox__close{
  position:absolute;top:clamp(10px,2.5vw,22px);right:clamp(10px,2.5vw,22px);
  width:52px;height:52px;display:grid;place-items:center;
  background:var(--mustard);color:var(--ink);
  border:var(--bw) solid var(--ink);border-radius:50%;
  box-shadow:var(--sh-sm);cursor:pointer;
  transition:transform var(--t-fast) var(--e-out);
}
.lightbox__close:hover{transform:rotate(90deg)}
.lightbox__close svg{width:22px;height:22px}
html.lb-open{overflow:hidden}
/* --- carousel arrows: only drawn when a post has more than one slide --- */
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;display:none;place-items:center;
  background:var(--mustard);color:var(--ink);
  border:var(--bw) solid var(--ink);border-radius:50%;
  box-shadow:var(--sh-sm);cursor:pointer;z-index:2;
  transition:transform var(--t-fast) var(--e-out),background var(--t-fast) linear;
}
.lightbox__stage.has-nav .lightbox__nav{display:grid}
.lightbox__nav--prev{left:10px}
.lightbox__nav--next{right:10px}
.lightbox__nav svg{width:22px;height:22px}
.lightbox__nav:hover{background:var(--pink);transform:translateY(-50%) scale(1.06)}
.lightbox__nav:active{transform:translateY(-50%) translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.lightbox__nav:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.lightbox__dots{display:flex;justify-content:center;flex:0 0 auto}
.lightbox__dots:empty{display:none}
.lightbox__dot{
  width:44px;height:44px;display:grid;place-items:center;
  background:transparent;border:0;padding:0;cursor:pointer;
}
.lightbox__dot::before{
  content:"";width:13px;height:13px;
  background:rgba(246,234,211,.35);
  border:2px solid rgba(246,234,211,.75);
  transition:background var(--t-fast) linear,transform var(--t-fast) var(--e-spring);
}
.lightbox__dot:hover::before{transform:scale(1.2)}
.lightbox__dot.is-on::before{background:var(--pink);border-color:#F6EAD3}
.lightbox__dot:focus-visible{outline:3px solid var(--blue);outline-offset:-6px}

/* --- caption card under the image --- */
.lightbox__cap{
  flex:0 0 auto;max-width:min(560px,100%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 20px;text-align:center;
  background:var(--paper);color:var(--ink);
  border:var(--bw) solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--sh);
}
.lightbox__cap-t{font-weight:700;font-size:1rem;line-height:1.25}
.lightbox__cap-s{font-size:.85rem;color:var(--ink-70);line-height:1.35}
.lightbox__ig{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:9px 18px;margin-top:2px;
  background:var(--pink);color:var(--ink);text-decoration:none;
  font-weight:700;font-size:.9rem;
  border:3px solid var(--ink);border-radius:999px;
  box-shadow:var(--sh-sm);
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out);
}
.lightbox__ig svg{width:17px;height:17px;flex:none}
.lightbox__ig:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.lightbox__ig:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.lightbox__ig:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .lightbox__nav,.lightbox__ig,.lightbox__dot::before{transition:none}
}

@media (prefers-reduced-motion:reduce){.lightbox__fig{animation:none}}

/* screen-on reveal */
.tv__screen .screen-media,.phone__screen .screen-media,.wt__screen .screen-media{
  transform:scaleY(.02);opacity:0;
  transition:transform 460ms var(--e-out),opacity 200ms linear;
}
.is-in .tv__screen .screen-media,.is-in .phone__screen .screen-media,.is-in .wt__screen .screen-media{
  transform:scaleY(1);opacity:1;
}

/* --- RETRO PHONE (9:16) --- */
.phone{position:relative;width:100%;max-width:290px;margin-inline:auto;padding-top:26px}
.phone__ant{
  position:absolute;top:0;right:20%;width:8px;height:44px;z-index:0;
  background:linear-gradient(to bottom,var(--ink) 0 60%,var(--ink) 100%);
  border-radius:5px 5px 0 0;
  transform-origin:bottom center;
}
.phone__ant::after{content:"";position:absolute;top:-9px;left:50%;translate:-50% 0;width:16px;height:16px;border-radius:50%;background:var(--mustard);border:3px solid var(--ink)}
.phone.is-in .phone__ant,.phone:hover .phone__ant{animation:wiggle 3.2s var(--e-spring) infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(6deg)}60%{transform:rotate(-5deg)}}
.phone__body{
  position:relative;z-index:1;
  background:var(--teal);
  border:var(--bw) solid var(--ink);
  border-radius:28px 28px 20px 20px;
  box-shadow:var(--sh-lg);
  padding:16px 14px 18px;
}
.phone--red .phone__body{background:var(--red)}
.phone--mustard .phone__body{background:var(--mustard)}
.phone--pink .phone__body{background:var(--pink)}
.phone--blue .phone__body{background:#7FA6F5}
.phone__grille{
  display:block;height:9px;width:56%;margin:0 auto 12px;border-radius:6px;border:2px solid var(--ink);
  background:repeating-linear-gradient(to right,var(--ink) 0 3px,transparent 3px 6px);
}
.phone__screen{
  position:relative;overflow:hidden;
  aspect-ratio:9/16;
  border:var(--bw) solid var(--ink);border-radius:10px;
  background:#0C0C12;box-shadow:inset 0 0 26px rgba(0,0,0,.72);
}
.phone__keys{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:12px}
.phone__keys i{height:11px;border-radius:3px;background:var(--paper-2);border:2px solid var(--ink)}
.phone__keys i:nth-child(2){background:var(--mustard)}
.phone__keys i:nth-child(5){background:var(--red)}

/* --- WALKIE TALKIE (small reels) --- */
.wt{position:relative;padding-top:30px}
.wt__ant{
  position:absolute;top:0;left:16%;width:7px;height:40px;background:var(--ink);
  border-radius:4px 4px 0 0;transform-origin:bottom center;z-index:0;
}
.wt__ant::after{content:"";position:absolute;top:-8px;left:50%;translate:-50% 0;width:14px;height:14px;border-radius:50%;background:var(--pink);border:3px solid var(--ink)}
.wt.is-in .wt__ant{animation:wiggle 4s var(--e-spring) infinite}
.wt__body{
  position:relative;z-index:1;
  background:var(--paper-3);
  border:var(--bw) solid var(--ink);border-radius:16px 16px 12px 12px;
  box-shadow:var(--sh);padding:12px 10px 14px;
  transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out);
}
.wt:hover .wt__body{transform:translate(-3px,-4px) rotate(-1.4deg);box-shadow:9px 10px 0 var(--ink)}
.wt--mustard .wt__body{background:var(--mustard)}
.wt--teal .wt__body{background:var(--teal)}
.wt--pink .wt__body{background:var(--pink)}
.wt--red .wt__body{background:var(--red)}
.wt--blue .wt__body{background:#9FBCF7}
.wt__screen{
  position:relative;overflow:hidden;aspect-ratio:9/16;
  border:3px solid var(--ink);border-radius:7px;background:#0C0C12;
  box-shadow:inset 0 0 20px rgba(0,0,0,.7);
}
.wt__ctrl{display:flex;align-items:center;gap:6px;margin-top:9px}
.wt__ctrl i{width:14px;height:14px;border-radius:50%;background:var(--paper-2);border:2px solid var(--ink);flex:none}
.wt__ctrl span{
  flex:1;height:12px;border-radius:3px;border:2px solid var(--ink);
  background:repeating-linear-gradient(to right,var(--ink) 0 2px,transparent 2px 5px);
}
.wt__cap{margin-top:9px;font-size:.68rem;font-weight:700;line-height:1.25}
.wt__cap b{font-family:var(--f-display);font-size:.95rem;display:block}
/* slate sets show the reel's title instead of a view count, so the display face
   needs to wrap rather than run off the side of the device */
.wt__cap--title b{font-size:.9rem;line-height:1.15;text-wrap:balance}
/* Post link under the device. Deliberately plain text, not a pill: eight coloured
   buttons under eight coloured devices would fight the videos, and the hero reels
   keep the solid pink CTA so the two tiers stay visually ranked.
   Added only when data-ig is present — no attribute, no dead anchor. */
.wt__ig{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:44px;padding:6px 4px;
  color:var(--ink-70);text-decoration:none;
  font-weight:700;font-size:clamp(.78rem,1.15vw,.92rem);letter-spacing:.01em;
  white-space:nowrap;
  transition:color var(--t-fast) linear;
}
.wt__ig span{border-bottom:2px solid transparent;transition:border-color var(--t-fast) linear}
.wt__ig:hover{color:var(--ink)}
.wt__ig:hover span{border-bottom-color:var(--red)}
.wt__ig svg{width:16px;height:16px;flex:none;transition:transform var(--t-base) var(--e-spring)}
.wt__ig:hover svg{transform:rotate(-8deg) scale(1.1)}
.wt__ig:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}

/* --- BEIGE CRT MONITOR (data screenshots) --- */
.crt{
  background:#E8DCC0;
  border:var(--bw) solid var(--ink);border-radius:18px;
  box-shadow:var(--sh);padding:14px 14px 10px;
}
.crt__bar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.crt__dots{display:flex;gap:5px}
.crt__dots i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);display:block}
.crt__dots i:nth-child(1){background:var(--red)}
.crt__dots i:nth-child(2){background:var(--mustard)}
.crt__dots i:nth-child(3){background:var(--teal)}
.crt__title{font-size:.8rem;font-weight:700;letter-spacing:.01em;color:var(--ink-70)}
.crt__screen{
  /* was overflow:auto with a 640px min-width on the image and a "scroll →" hint.
     The sheets now open full size in the lightbox, so they fit instead. */
  position:relative;overflow:hidden;
  border:3px solid var(--ink);border-radius:8px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
.crt__screen img{width:100%;height:auto;display:block}
.crt__foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:10px}
.crt__foot span{font-size:.66rem;color:var(--ink-70);font-weight:600}

/* ============================================================
   11. UTILITIES / REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 520ms var(--e-out),transform 520ms var(--e-out)}
.reveal.is-in{opacity:1;transform:none}

.grid{display:grid;gap:var(--s4)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.split-a{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split-b{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.split-c{grid-template-columns:minmax(0,1fr) minmax(0,.75fr)}
@media (max-width:900px){
  .split-a,.split-b,.split-c{grid-template-columns:1fr!important}
  /* once stacked there is no second column, so the 62ch cap just leaves a ragged
     gap on the right — let the paragraphs run the full measure instead */
  .split-a .lead,.split-b .lead,.split-c .lead{max-width:none}
}

.flex{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.mb-2{margin-bottom:var(--s2)}.mb-3{margin-bottom:var(--s3)}.mb-4{margin-bottom:var(--s4)}.mb-5{margin-bottom:var(--s5)}.mb-6{margin-bottom:var(--s6)}.mb-7{margin-bottom:var(--s7)}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   12. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .tv__screen .screen-media,.phone__screen .screen-media,.wt__screen .screen-media{transform:none;opacity:1}
}
html{scroll-behavior:smooth;scroll-padding-top:84px}

/* ============================================================
   13. COMPONENTS — timeline, meters, tools, boards, bubbles
   ============================================================ */

/* --- experience timeline --- */
.tl{position:relative;padding-left:var(--s6)}
.tl::before{
  content:"";position:absolute;left:19px;top:10px;bottom:10px;width:4px;
  background:repeating-linear-gradient(to bottom,var(--ink) 0 10px,transparent 10px 18px);
}
@media (max-width:640px){.tl{padding-left:var(--s5)}.tl::before{left:14px}}
.tl__item{position:relative;margin-bottom:var(--s5)}
.tl__item:last-child{margin-bottom:0}
.tl__dot{
  position:absolute;left:calc(-1 * var(--s6));top:6px;
  width:42px;height:42px;display:grid;place-items:center;
  background:var(--mustard);border:var(--bw) solid var(--ink);border-radius:50%;
  box-shadow:var(--sh-sm);
}
.tl__dot svg{width:20px;height:20px}
@media (max-width:640px){.tl__dot{left:calc(-1 * var(--s5));width:34px;height:34px}.tl__dot svg{width:16px;height:16px}}
.tl__item:nth-child(2) .tl__dot{background:var(--teal)}
.tl__item:nth-child(3) .tl__dot{background:var(--pink)}
.tl__item:nth-child(4) .tl__dot{background:#CFE0FF}

/* ticket-stub card */
.stub{
  position:relative;background:var(--paper-2);
  border:var(--bw) solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--sh);padding:var(--s4);
  transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out);
}
.stub:hover{transform:translateY(-4px);box-shadow:6px 10px 0 var(--ink)}
.stub__top{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:baseline;justify-content:space-between;margin-bottom:var(--s2)}
.stub__role{font-family:var(--f-display);font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.05}
.stub__co{font-weight:700;color:var(--red-deep);font-size:.95rem}
.stub__when{
  font-size:.78rem;font-weight:700;letter-spacing:.01em;
  background:var(--ink);color:var(--paper);padding:5px 12px;border-radius:999px;white-space:nowrap;
}
.stub__list li{position:relative;padding-left:26px;margin-bottom:11px;font-size:.93rem}
.stub__list li:last-child{margin-bottom:0}
.stub__list li::before{
  content:"";position:absolute;left:0;top:.46em;width:13px;height:13px;
  background:var(--red);clip-path:var(--star12);
}
.stub__perf{
  position:absolute;left:0;right:0;bottom:-4px;height:8px;
  background:radial-gradient(circle at 6px 4px, var(--paper) 4px, transparent 4.5px) 0 0/16px 8px repeat-x;
}

/* --- skill meters --- */
.meter{margin-bottom:var(--s4)}
.meter:last-child{margin-bottom:0}
.meter__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.meter__label{font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:9px}
.meter__label svg{width:18px;height:18px;color:var(--red-deep);flex:none}
.meter__val{font-family:var(--f-display);font-size:1.1rem;font-variant-numeric:tabular-nums}
.meter__track{
  height:22px;border:3px solid var(--ink);border-radius:999px;overflow:hidden;
  background:var(--paper-3);
}
.meter__fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:repeating-linear-gradient(115deg,var(--red) 0 12px,var(--mustard) 12px 24px);
  transition:width 1000ms var(--e-out);
}
.meter:nth-child(2) .meter__fill{background:repeating-linear-gradient(115deg,var(--teal) 0 12px,#7FE0DA 12px 24px)}
.meter:nth-child(3) .meter__fill{background:repeating-linear-gradient(115deg,var(--pink) 0 12px,#FFC2DC 12px 24px)}
.meter:nth-child(4) .meter__fill{background:repeating-linear-gradient(115deg,var(--blue) 0 12px,#9FBCF7 12px 24px)}
.meter:nth-child(5) .meter__fill{background:repeating-linear-gradient(115deg,var(--mustard-deep) 0 12px,var(--mustard) 12px 24px)}

/* --- tool tiles --- */
/* Skills section: the chip groups sit two-up, then the tools split into the two
   halves the section heading promises — content on one side, data on the other.
   Nine tools per side lands as a tidy 3x3 at every width down to the phone. */
.skill-chips{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5) var(--s6);margin-bottom:var(--s7);
}
.tool-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
/* Nine per side, so the grid stays at three columns at every width — four or two
   columns leave an orphan tile on the last row. Once the two halves stack, the
   grid is capped instead of widened, or three tiles would stretch to 300px each. */
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media (max-width:1000px){
  .tool-split{grid-template-columns:1fr;gap:var(--s7)}
  .tool-grid{max-width:620px}
}
@media (max-width:760px){
  .skill-chips{grid-template-columns:1fr;gap:var(--s5)}
}
@media (max-width:430px){
  .tool-grid{gap:var(--s2)}
  .tool{padding:var(--s2) 6px;gap:7px}
  .tool b{font-size:.72rem}
  .tool i{font-size:.62rem}
}

.tool{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:var(--s3) var(--s2);text-align:center;
  background:var(--paper-2);border:3px solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  transition:transform var(--t-base) var(--e-spring),box-shadow var(--t-base) var(--e-out),background var(--t-fast) linear;
}
.tool:hover{transform:translate(-3px,-4px) rotate(-2deg);box-shadow:7px 8px 0 var(--ink);background:var(--mustard)}
.tool__mark{
  width:52px;height:52px;flex:none;display:grid;place-items:center;
  border:3px solid var(--ink);border-radius:12px;
  font-family:var(--f-display);font-size:1.15rem;line-height:1;
  transition:transform var(--t-base) var(--e-spring);
}
.tool:hover .tool__mark{transform:rotate(9deg) scale(1.07)}
.tool__mark svg{width:26px;height:26px}
.tool b{font-size:.8rem;font-weight:700;line-height:1.2}
.tool i{font-style:normal;font-size:.7rem;color:var(--ink-70);font-weight:600}

/* Copywriting: one published caption per skill. Screenshots are Instagram's dark
   theme; .copy-shot matches their exact background (#0C0F14) so the padding baked
   into the shorter file of each pair is invisible and every row comes out level.
   Replacing a screenshot means re-padding it to its partner's height. */
.copy-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)}
/* two across from 1000px, where each shot still gets ~460px; below that it is
   one-up at full width rather than two columns too small to read */
@media (min-width:520px){
  .copy-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s6)}
}
/* one-up below 520px, but capped: full width these ran a whole screen tall */
@media (max-width:519px){
  .copy-shot{display:grid;place-items:center}
  .copy-shot img{width:auto;max-width:100%;max-height:56vh}
}
/* one colour for every category — six different tags read as decoration */
.copy-list .tag{margin-bottom:10px;background:var(--mustard)}
.copy-shot{
  position:relative;overflow:hidden;background:#0C0F14;
  border:3px solid var(--ink);border-radius:10px;
}
.copy-shot img{display:block;width:100%;height:auto}

/* three brand circles fill the column beside the grid board; each falls back to
   its initials until a logo file is dropped in */
.ig-side{display:flex;flex-direction:column}
.brand-marks{
  margin-top:var(--s4);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s3);flex:1;align-items:center;justify-content:center;
}
/* once the split stacks these get a full-width column to themselves and would
   blow up to ~270px each, so cap them */
@media (max-width:900px){
  .brand-marks{grid-template-columns:repeat(3,minmax(0,168px));margin-top:var(--s5)}
}
.brand-mark{
  position:relative;aspect-ratio:1;display:grid;place-items:center;
  background:var(--paper-2);border:var(--bw) solid var(--ink);border-radius:50%;
  box-shadow:var(--sh-sm);overflow:hidden;
  transition:transform var(--t-base) var(--e-spring);
}
.brand-mark:hover{transform:rotate(-5deg) scale(1.04)}
.brand-mark b{font-family:var(--f-display);font-size:1.5rem;line-height:1;color:var(--ink-70)}
/* the logo files carry their own white background, so they fill the disc rather
   than floating on the paper colour */
.brand-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.brand-mark.has-logo{background:#fff}
.brand-mark.has-logo b{display:none}
.brand-mark.has-logo img{opacity:1}

/* --- caption teardown + cadence map --- */
.cap-demo{
  background:var(--ink);color:#F6EAD3;
  border:3px solid var(--ink);border-radius:var(--r-md);
  padding:var(--s3);
}
.cap-demo__text{font-size:.95rem;line-height:1.5;margin-bottom:.7em}
.cap-demo__tags{font-size:.85rem;line-height:1.9;color:#9DB4FF;margin:0}
.cap-demo mark{background:transparent;color:inherit;padding:1px 3px;border-radius:4px}
.cap-demo mark.m1{background:rgba(255,182,39,.28);color:#FFD98A;box-shadow:inset 0 -2px 0 var(--mustard)}
.cap-demo mark.m2{background:rgba(255,95,162,.26);color:#FFB7D4;box-shadow:inset 0 -2px 0 var(--pink)}
.cap-demo mark.m3{background:rgba(238,59,51,.26);color:#FFAFA9;box-shadow:inset 0 -2px 0 var(--red)}
.cap-demo mark.m4{background:rgba(20,161,154,.30);color:#8BE3DD;box-shadow:inset 0 -2px 0 var(--teal)}

.cap-key{margin-top:var(--s3);display:grid;gap:11px}
.cap-key li{display:flex;gap:10px;font-size:.86rem;line-height:1.5}
.cap-key i{width:14px;height:14px;flex:none;margin-top:4px;border:2px solid var(--ink);border-radius:4px}
.cap-key .k1{background:var(--mustard)}
.cap-key .k2{background:var(--pink)}
.cap-key .k3{background:var(--red)}
.cap-key .k4{background:var(--teal)}

.cad-nums{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s4)}
.cad-nums b{display:block;font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.1rem);line-height:1;font-variant-numeric:tabular-nums}
.cad-nums i{font-style:normal;font-size:.76rem;font-weight:600;color:var(--ink-70)}

.weeks{display:grid;grid-template-columns:repeat(52,1fr);gap:2px}
.wk{display:block;aspect-ratio:1;border-radius:1.5px;background:var(--ink-14)}
.wk--y1{background:var(--red)}
.wk--y2{background:var(--mustard)}
.wk--y3{background:var(--teal)}
.weeks__key{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;
  font-size:.74rem;font-weight:600;
}
.weeks__key span{display:flex;align-items:center;gap:6px}
.weeks__key i{width:11px;height:11px;border:2px solid var(--ink);border-radius:3px}

/* --- polaroid / IG board --- */
.board{
  position:relative;background:var(--paper-3);
  border:var(--bw) solid var(--ink);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:var(--s5) var(--s4) var(--s4);
}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border:3px solid var(--ink);background:var(--ink);border-radius:8px;overflow:hidden}
.ig-cell{position:relative;aspect-ratio:1;overflow:hidden;background:#0C0C12}
.ig-cell .slot__name{font-size:.66rem}

.polaroid{
  background:var(--paper-2);border:3px solid var(--ink);border-radius:6px;
  box-shadow:var(--sh);padding:10px 10px 0;
  transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out);
}
.polaroid:hover{transform:translate(-3px,-4px) rotate(1.5deg);box-shadow:9px 10px 0 var(--ink)}
.polaroid__pic{position:relative;aspect-ratio:4/5;overflow:hidden;border:2px solid var(--ink);background:#0C0C12}
.polaroid__cap{padding:11px 4px 14px;font-family:var(--f-script);font-size:1.05rem;line-height:1.2;text-align:center}

/* On a phone the global .g-4 rule drops to a single column, which makes one post
   fill the whole screen — twelve of those is a very long scroll for something
   meant to be skimmed. Two up keeps the grid readable as a grid. */
@media (max-width:640px){
  .ig-posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .ig-posts .polaroid{padding:7px 7px 0;border-width:2px}
  .ig-posts .polaroid__pic{border-width:1px}
  .ig-posts .polaroid__cap{padding:8px 2px 10px;font-size:.88rem}
}
@media (max-width:400px){
  .ig-posts{gap:var(--s2)}
  .ig-posts .polaroid__cap{font-size:.8rem}
}

/* --- KOL case card + metric bars --- */
.case{
  display:flex;flex-direction:column;
  background:var(--paper-2);border:var(--bw) solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--sh);overflow:hidden;height:100%;
}
.case__head{padding:var(--s3);border-bottom:3px solid var(--ink);display:flex;align-items:center;gap:12px}
.case__logo{
  position:relative;overflow:hidden;
  width:64px;height:64px;flex:none;display:grid;place-items:center;
  border:3px solid var(--ink);border-radius:50%;
  font-family:var(--f-display);font-size:1rem;background:var(--mustard);
}
/* The logo files carry 24% white padding so the disc mask never clips a wordmark
   at 172px. At this size a little of that is reclaimed for legibility, but only a
   little: at 1.3 the wordmark ran into the ring. */
.case__logo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);opacity:0;
}
.case__logo.has-logo{background:#fff}
.case__logo.has-logo b{display:none}
.case__logo.has-logo img{opacity:1}
.case--2 .case__logo{background:var(--teal)}
.case--3 .case__logo{background:var(--pink)}
.case__head b{display:block;font-family:var(--f-display);font-size:1.12rem;line-height:1.1}
.case__head span{font-size:.78rem;font-weight:600;color:var(--ink-70)}
/* the blurbs differ in length; let the paragraph eat the slack so the three
   bars sit on the same baseline across all three cards */
.case__body > p{margin-bottom:auto}
.case__media{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:3px solid var(--ink);background:#0C0C12}
.case__body{padding:var(--s3);flex:1;display:flex;flex-direction:column;gap:var(--s2)}
.bar{font-size:.78rem}
.bar__top{display:flex;justify-content:space-between;font-weight:700;margin-bottom:5px}
.bar__track{height:14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-3);overflow:hidden}
.bar__fill{display:block;height:100%;width:0;background:var(--red);transition:width 900ms var(--e-out)}
.bar:nth-of-type(2) .bar__fill{background:var(--teal)}
.bar:nth-of-type(3) .bar__fill{background:var(--mustard-deep)}

/* --- speech bubble --- */
.bubble{
  position:relative;background:var(--paper-2);
  border:var(--bw) solid var(--ink);border-radius:22px;
  box-shadow:var(--sh);padding:var(--s4);
}
.bubble::after{
  content:"";position:absolute;left:36px;bottom:-19px;
  width:26px;height:22px;background:var(--paper-2);
  border-right:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);
  transform:skewX(-22deg);
  border-radius:0 0 6px 0;
}
.bubble--mustard,.bubble--mustard::after{background:var(--mustard)}
.bubble--teal,.bubble--teal::after{background:#B7E8E4}
.bubble--pink,.bubble--pink::after{background:#FFD3E5}
.quote-who{display:flex;align-items:center;gap:12px;margin-top:var(--s4);padding-left:var(--s3)}
.quote-who i{width:44px;height:44px;flex:none;border-radius:50%;border:3px solid var(--ink);background:var(--mustard);display:grid;place-items:center;font-style:normal;font-family:var(--f-display);font-size:1rem}
.quote-who b{display:block;font-size:.9rem}
.quote-who span{font-size:.74rem;color:var(--ink-70);font-weight:600}

/* --- contact form --- */
.form{display:grid;gap:var(--s3)}
.field label{display:block;font-size:.88rem;font-weight:700;letter-spacing:.01em;margin-bottom:7px}
.field input,.field textarea{
  width:100%;font:inherit;font-size:16px;
  padding:13px 15px;min-height:52px;
  background:var(--paper-2);color:var(--ink);
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:inset 3px 3px 0 rgba(31,27,24,.08);
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-45)}
.field__help{font-size:.74rem;color:var(--ink-70);margin-top:6px}

/* --- footer --- */
.foot{
  background:var(--paper-3);color:var(--ink);
  border-top:var(--bw) solid var(--ink);
  padding:var(--s6) 0 calc(var(--s5) + env(safe-area-inset-bottom));
}
.foot a{color:inherit;text-decoration:none}
/* 44px minimum tap target. The anchor stays inline-flex so the hover underline
   tracks the word rather than the whole column, and ::before widens the hit area
   past the text so short labels like "Skills" clear 44px horizontally too. */
.foot ul a{display:inline-flex;align-items:center;min-height:44px;position:relative}
.foot ul a::before{content:"";position:absolute;top:0;bottom:0;left:-10px;right:-10px}
.foot ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:3px;
  background:var(--red);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--e-out);
}
.foot ul a:hover::after{transform:scaleX(1)}
.foot__grid{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between;align-items:flex-start}
.foot__soc{display:flex;gap:10px;flex-wrap:wrap}
.foot__soc a{
  width:48px;height:48px;display:grid;place-items:center;
  background:var(--paper-2);
  border:3px solid var(--ink);border-radius:12px;
  box-shadow:var(--sh-sm);
  transition:transform var(--t-base) var(--e-spring),background var(--t-fast) linear;
}
.foot__soc a:hover{background:var(--mustard);transform:translate(-2px,-4px) rotate(-6deg)}
.foot__soc a:active{transform:translate(4px,4px);box-shadow:none}
.foot__soc svg{width:22px;height:22px}
.foot__bot{margin-top:var(--s5);padding-top:var(--s4);border-top:3px dashed var(--ink-14);display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;font-size:.82rem;color:var(--ink-70)}

/* --- misc small --- */
.metric-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--paper);
  padding:6px 13px;border-radius:999px;
  font-size:.76rem;font-weight:700;letter-spacing:.05em;
}
.metric-pill svg{width:15px;height:15px;color:var(--mustard)}
.overlay-stats{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:5;
  display:flex;flex-wrap:wrap;gap:6px;
}
.overlay-stats .metric-pill{background:rgba(15,12,10,.82);backdrop-filter:blur(3px)}
.note{
  border-left:6px solid var(--red);background:var(--paper-3);
  padding:var(--s3);border-radius:0 10px 10px 0;font-size:.88rem;
}
.flag{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border:2px solid var(--ink);border-radius:999px;
  background:var(--paper-2);font-size:.78rem;font-weight:700;letter-spacing:.06em;
  box-shadow:3px 3px 0 var(--ink);
}
.flag i{font-style:normal;font-size:1.2rem;line-height:1;flex:none}

/* ============================================================
   15. TOOL LOGO TILES  (drop official SVGs into assets/logos/)
   ============================================================ */
.tool__logo{
  width:58px;height:58px;flex:none;position:relative;
  display:grid;place-items:center;
  border:3px solid var(--ink);border-radius:14px;
  background:var(--paper-2);overflow:hidden;
  transition:transform var(--t-base) var(--e-spring);
}
.tool:hover .tool__logo{transform:rotate(7deg) scale(1.06)}
.tool__logo img{width:34px;height:34px;object-fit:contain}
.tool__logo.has-logo img{width:52px;height:52px}
.tool__logo b{font-family:var(--f-display);font-size:1.1rem;line-height:1}
.tool__logo img{position:absolute;inset:0;margin:auto;opacity:0}
/* A real logo sits bare: the card already carries an ink border, and a second
   frame around every mark made the row read as a sheet of stickers. The border
   is kept but made transparent rather than removed, so a logo tile and a
   monogram tile occupy exactly the same 58px box and the labels beneath them
   stay on one baseline. The mark then fills the 52px the frame used to enclose. */
.tool__logo.has-logo{
  border-color:transparent;border-radius:0;
  background:transparent!important;
}
.tool__logo.has-logo b{display:none}
.tool__logo.has-logo img{opacity:1}

/* ============================================================
   16. SECTION-LEVEL FIXES
   ============================================================ */
/* the script line now sits at the head of the About right-hand column rather
   than in a section aside, so it needs its own spacing */
.about-script{
  font-size:1.55rem;color:var(--teal-deep);
  transform:rotate(-2deg);transform-origin:left center;
  margin:0 0 var(--s4) 6px;
}
.about-photo{max-width:420px}
@media (max-width:900px){.about-photo{max-width:330px;margin-inline:auto}}

.reel-group{
  display:grid;gap:var(--s5);align-items:center;margin-bottom:var(--s7);
  /* One size for every slate device, on purpose smaller than the hero phone's
     246px screen. The slate is supporting evidence; it must never out-scale the
     two lead reels above it. */
  --wt-w:255px;
}
.reel-group:last-child{margin-bottom:0}
.reel-group__pair{display:grid;gap:var(--s3)}
.reel-group__intro{max-width:74ch}

/* The wrap is min(1200px, 100% - 48px), so at 1220px the container is 1172px:
   797px of devices + a 32px gap leaves the copy 343px, which is the narrowest
   readable measure for a heading plus a paragraph. Below this, everything stacks.
   Do not lower it — at 1130px the copy column collapses to 253px. */
@media (min-width:1220px){
  .reel-group{grid-template-columns:minmax(0,1fr) auto}
  .reel-group__pair{grid-template-columns:repeat(2,var(--wt-w))}
  .reel-group__pair--row{grid-template-columns:repeat(3,var(--wt-w))}
  .reel-group__intro{max-width:none}
  /* devices to the left of the copy instead of the right */
  .reel-group--devices-left{grid-template-columns:auto minmax(0,1fr)}
  .reel-group--devices-left .reel-group__pair{order:-1}
}

/* Stacked: copy first regardless of which side the devices take when there is
   room beside it, and the devices hold their size instead of stretching. */
@media (max-width:1219px){
  .reel-group__pair{grid-template-columns:repeat(2,minmax(0,var(--wt-w)));justify-content:center}
  .reel-group__pair--row{grid-template-columns:repeat(3,minmax(0,var(--wt-w)))}
}
@media (max-width:860px){
  .reel-group__pair--row{grid-template-columns:repeat(2,minmax(0,var(--wt-w)))}
}
@media (max-width:430px){
  .reel-group__pair,.reel-group__pair--row{grid-template-columns:minmax(0,var(--wt-w))}
}

.ctas-row{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center}
.ctas-row .btn{max-width:100%}
.ctas-row .btn span{overflow-wrap:anywhere}

/* facade for hosted video: poster + play button, iframe only on click.
   A YouTube iframe pulls ~1MB of script; 20 of them would sink the page. */
.screen-media[data-youtube] .slot,.screen-media[data-link] .slot{cursor:pointer}
.play{
  position:absolute;inset:0;z-index:5;
  display:grid;place-items:center;
  border:0;padding:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.play__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.play__btn{
  position:relative;z-index:1;
  width:clamp(48px,18%,74px);aspect-ratio:1;
  display:grid;place-items:center;
  background:var(--red);color:#fff;
  border:var(--bw) solid var(--ink);border-radius:50%;
  box-shadow:var(--sh-sm);
  transition:transform var(--t-base) var(--e-spring),background var(--t-fast) linear;
}
.play:hover .play__btn{transform:scale(1.09);background:var(--mustard);color:var(--ink)}
.play:active .play__btn{transform:scale(.96)}
.play__btn svg{width:42%;height:42%}
.play__label{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:1;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;
  color:#F6EAD3;text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.screen-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.vid-hint{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.72rem;font-weight:600;color:var(--ink-70);
}
.vid-hint svg{width:15px;height:15px;color:var(--red)}

/* reel hero layout */
/* device, comment panel, copy. Stretch so the phone and the panel end up exactly
   the same height instead of one floating short next to the other. */
.reel-hero{display:grid;gap:var(--s5);align-items:stretch;grid-template-columns:1fr}
.reel-hero > .reel-copy{align-self:center}
@media (min-width:821px){
  /* tablet: phone + panel share the top row, copy takes a full-width row below */
  .reel-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .reel-hero > .reel-copy{grid-column:1 / -1}
}
@media (min-width:821px) and (max-width:1099px){
  /* the copy row is wider than its text wants to be, so the CTA moves into the
     space on the right instead of leaving it blank */
  .reel-copy{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,250px);
    column-gap:var(--s5);align-items:start;
  }
  .reel-copy > *{grid-column:1}
  .reel-copy .lead{max-width:none}
  .reel-copy > .btn{
    grid-column:2;grid-row:1 / span 4;align-self:center;justify-self:stretch;
    min-height:66px;font-size:1rem;
  }
}
@media (min-width:1100px){
  .reel-hero{grid-template-columns:minmax(0,300px) minmax(0,300px) minmax(0,1fr)}
  .reel-hero > .reel-copy{grid-column:auto}
  /* second reel mirrors on desktop: copy left, panel middle, phone right */
  .reel-hero--alt{grid-template-columns:minmax(0,1fr) minmax(0,300px) minmax(0,300px)}
  .reel-hero--alt > .reel-copy{order:1}
  .reel-hero--alt > .cmt-panel{order:2}
  .reel-hero--alt > .phone{order:3}
}

/* instagram comment panel, cropped to the comments themselves */
.cmt-panel{
  align-self:start;
  display:flex;flex-direction:column;
  background:var(--ink);
  border:var(--bw) solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--sh);overflow:hidden;
  max-width:290px;margin-inline:auto;width:100%;
}
.cmt-panel__bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:var(--paper-3);color:var(--ink);
  border-bottom:3px solid var(--ink);
}
.cmt-panel__bar svg{width:16px;height:16px;flex:none}
.cmt-panel__bar b{font-size:.76rem;font-weight:700}
.cmt-panel__shot{position:relative;display:block;background:#0C0C12}
.cmt-panel__shot img{width:100%;height:auto;display:block}
.cmt-panel__ph{
  aspect-ratio:760/1105;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;
  color:#F6EAD3;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.09) 0 1.1px, transparent 1.2px) 0 0/9px 9px,
             linear-gradient(155deg,#3A2A55,#0E1024);
}
.cmt-panel__ph b{font-family:var(--f-display);font-size:1rem}
.cmt-panel__ph span{font-size:.72rem;color:rgba(246,234,211,.78);line-height:1.45}
.cmt-panel__foot{
  padding:8px 12px;background:var(--paper-3);color:var(--ink-70);
  border-top:3px solid var(--ink);font-size:.74rem;font-weight:600;
}

@media (max-width:900px){#kolWall{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:470px){#kolWall{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

@media (max-width:1000px){#toolGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:620px){#toolGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:400px){#toolGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}