/* ============================================================
   WireCare x Agent. Eight-slide concept deck
   Agent editorial system: ivory / ink / Agent red
   WireCare accents: navy #083257, red #DB3127 (official logo colors)
   ============================================================ */

@font-face{font-family:'Neue';src:url('assets/fonts/PPNeueMontreal-Book.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue';src:url('assets/fonts/PPNeueMontreal-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Neue';src:url('assets/fonts/PPNeueMontreal-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#EFEEE9;
  --card:#F8F7F2;
  --ink:#0A0A09;
  --ink2:#3E3F3B;
  --mute:#6F706A;
  --line:rgba(10,10,9,.14);
  --strong:rgba(10,10,9,.34);
  --red:#F11F2D;
  --wcnavy:#083257;
  --wcred:#DB3127;
  --night:#070807;
  --ivory:#DBDAD2;
  --nline:rgba(219,218,210,.16);
  --nstrong:rgba(219,218,210,.36);
  --nmute:rgba(219,218,210,.62);
  --framec:rgba(10,10,9,.22);
  --ui:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1360px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Neue',ui-sans-serif,system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
b,strong{font-weight:700}

/* film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:94;pointer-events:none;opacity:.026;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- chrome: frame, progress, topbar, rail ---------------- */
.frame{position:fixed;inset:14px;border:1px solid var(--framec);z-index:96;pointer-events:none;transition:border-color .4s ease}
body.on-dark .frame{border-color:rgba(219,218,210,.26)}
.fc{position:absolute;width:14px;height:14px;border:0 solid var(--red)}
.fc.c1{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.fc.c2{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.fc.c3{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.fc.c4{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}

#progress{position:fixed;top:14px;left:14px;right:14px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;z-index:97;pointer-events:none}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  height:62px;padding:0 42px;
  transition:background .35s ease,box-shadow .35s ease;
}
body.scrolled .topbar{background:rgba(239,238,233,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
body.scrolled.on-dark .topbar{background:rgba(7,8,7,.88);box-shadow:0 1px 0 var(--nline)}
.tb-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.tb-agent{height:13px;width:auto}
.tb-agent-light{display:none}
body.on-dark .tb-agent-dark{display:none}
body.on-dark .tb-agent-light{display:block}
.tb-x{font-style:normal;font-size:10px;font-weight:700;color:var(--red);letter-spacing:.08em}
/* WireCare mark rides bare on both themes: navy original on paper, ivory knockout on night.
   No chip, no plate. .tb-wc-dark = dark ink for light slides, -light = ivory for dark slides. */
.tb-wc{height:12px;width:auto}
.tb-wc-light{display:none}
body.on-dark .tb-wc-dark{display:none}
body.on-dark .tb-wc-light{display:block}
.tb-right{display:flex;align-items:center;gap:22px}
.tb-stamp{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}
body.on-dark .tb-stamp{color:var(--nmute)}
.tb-stamp i{width:6px;height:6px;background:var(--red);border-radius:50%}
.tb-count{font-size:11px;font-weight:500;color:var(--mute);letter-spacing:.08em;display:flex;align-items:baseline;gap:5px}
.tb-count b{color:var(--ink);font-variant-numeric:tabular-nums}
body.on-dark .tb-count{color:var(--nmute)}
body.on-dark .tb-count b{color:var(--ivory)}
.tb-count em{font-style:normal}

.rail{position:fixed;left:34px;top:50%;transform:translateY(-50%);z-index:95;display:none;flex-direction:column;gap:13px}
@media (min-width:1500px){.rail{display:flex}}
.rail a{font-size:10px;font-weight:500;letter-spacing:.1em;color:var(--mute);text-decoration:none;position:relative;font-variant-numeric:tabular-nums;transition:color .25s}
.rail a:hover{color:var(--ink)}
.rail a.on{color:var(--red);font-weight:700}
body.on-dark .rail a{color:rgba(219,218,210,.45)}
body.on-dark .rail a:hover{color:var(--ivory)}
body.on-dark .rail a.on{color:var(--red)}
.rail a::after{content:attr(data-t);position:absolute;left:26px;top:50%;transform:translateY(-50%);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s;color:inherit}
.rail a:hover::after{opacity:.9}

/* ---------------- slides + shared head ---------------- */
.slide{position:relative;min-height:100svh;display:flex;flex-direction:column}
.slide.light{background:var(--paper);color:var(--ink)}
.slide.dark{background:var(--night);color:var(--ivory)}
.shell{width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(92px,11vh,132px) clamp(22px,3.6vw,56px) clamp(64px,8vh,96px);display:flex;flex-direction:column;flex:1;justify-content:center}

.s-head{margin-bottom:clamp(30px,4.4vh,52px)}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,2.6vh,28px)}
.eyebrow b{font-size:12px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}
.eyebrow span{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}
.dark .eyebrow span{color:var(--nmute)}
.eyebrow i{flex:1;height:1px;background:var(--line)}
.dark .eyebrow i{background:var(--nline)}
.head-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.72fr);gap:clamp(24px,4vw,72px);align-items:end}
h2{font-size:clamp(33px,3.5vw,58px);line-height:1.02;letter-spacing:-.016em;font-weight:700;text-wrap:balance}
.dek{font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:var(--mute);border-left:2px solid var(--red);padding-left:16px;max-width:44ch;text-wrap:pretty}
.dark .dek{color:var(--nmute)}
.house-presented{font-size:clamp(17px,1.4vw,23px);line-height:1.4;color:var(--wcnavy);font-weight:600;margin-top:10px}

.mlabel{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.mlabel::before{content:"";width:8px;height:8px;background:var(--red);flex:none}
.mlabel.wc::before{background:var(--wcnavy)}
.dark .mlabel{color:var(--ivory)}
.src-line{font-size:11.5px;letter-spacing:.06em;color:var(--mute);margin-top:14px}
.src-line a{color:var(--ink)}

.prop-chip{display:inline-block;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wcnavy);border:1px solid rgba(8,50,87,.4);padding:2px 7px;margin-left:8px;vertical-align:2px;border-radius:2px;background:rgba(8,50,87,.05)}

/* generic media caption */
.fig-cap{display:flex;gap:9px;align-items:baseline;margin-top:9px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.fig-cap b{font-weight:700;color:var(--ink)}
.fig-cap i{color:var(--red);font-style:normal}
.fig-cap span{color:var(--mute);font-weight:500}
.dark .fig-cap b{color:var(--ivory)}
.dark .fig-cap span{color:var(--nmute)}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------------- placeholder system ---------------- */
.ph{
  position:relative;aspect-ratio:var(--ar,16/9);
  border:1px solid var(--strong);
  background:
    repeating-linear-gradient(0deg,transparent 0 25px,rgba(10,10,9,.07) 25px 26px),
    repeating-linear-gradient(90deg,transparent 0 25px,rgba(10,10,9,.07) 25px 26px),
    var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:20px;overflow:hidden;
}
.ph::after{content:"";position:absolute;width:52px;height:52px;border:1px solid rgba(10,10,9,.22);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.ph b{font-size:12.5px;font-weight:700;letter-spacing:.02em;max-width:30ch;position:relative;z-index:2;background:var(--card);padding:2px 8px}
.ph small{font-size:9px;letter-spacing:.1em;color:var(--mute);font-family:var(--ui);position:relative;z-index:2;background:var(--card);padding:1px 7px;max-width:52ch}
.ph-tag{position:absolute;top:10px;left:10px;font-size:8.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);border:1px solid rgba(241,31,45,.5);padding:3px 8px;background:var(--card);z-index:2}
.pt{position:absolute;width:12px;height:12px;border:0 solid var(--red)}
.pt.tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.pt.br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.ph.on-dark{
  border-color:var(--nstrong);
  background:
    repeating-linear-gradient(0deg,transparent 0 25px,rgba(219,218,210,.07) 25px 26px),
    repeating-linear-gradient(90deg,transparent 0 25px,rgba(219,218,210,.07) 25px 26px),
    #0D0D0C;
  color:var(--ivory);
}
.ph.on-dark::after{border-color:rgba(219,218,210,.24)}
.ph.on-dark b{background:#0D0D0C}
.ph.on-dark small{color:var(--nmute);background:#0D0D0C}
.ph.on-dark .ph-tag{background:#0D0D0C}

/* live media slots: a real video element sits in front of each labeled placeholder.
   When its file exists the video loads, the slot flips to has-media, and the placeholder
   hides. Missing files keep the labeled placeholder. Wired in script.js. */
.media-slot{position:relative;min-width:0}
.media-slot .slot-video{display:none}
.media-slot.has-media .slot-video{display:block}
.media-slot.has-media > .ph{display:none}

/* bracketed data slots: swap in the verified value and remove the tk class to render at full stat scale */
.tk{display:inline-block;font-weight:700;letter-spacing:.08em;border:1.5px dashed var(--strong);padding:5px 9px;background:rgba(10,10,9,.03);line-height:1.35}
.dark .tk{border-color:var(--nstrong);background:rgba(219,218,210,.05)}
.dark .sfv-views b.tk{color:var(--nmute)}
.pdp-price b.tk{font-size:10.5px;letter-spacing:.08em;color:#26272b}
.cart-qty b.tk,.cart-total b.tk,.co-sum b.tk{font-size:9px;letter-spacing:.06em;color:#26272b;padding:3px 6px}
.route-row b.tk{font-size:9px;letter-spacing:.06em;color:var(--wcnavy);border-color:rgba(8,50,87,.5);padding:3px 6px}

/* ============================================================ 01 COVER */
.cover{justify-content:flex-end;overflow:hidden}
.cover-bg{position:absolute;inset:0;overflow:hidden}
.cover-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;filter:saturate(.92) contrast(1.05) brightness(.9)}
.cover-scrim{position:absolute;inset:0;background:linear-gradient(96deg,rgba(4,4,5,.9) 0%,rgba(4,4,5,.62) 40%,rgba(4,4,5,.3) 68%,rgba(4,4,5,.52) 100%),linear-gradient(0deg,rgba(4,4,5,.88) 0%,rgba(4,4,5,.28) 34%,rgba(4,4,5,.12) 55%,rgba(4,4,5,.4) 100%)}
.cover-shell{position:relative;z-index:2;justify-content:flex-end;padding-bottom:clamp(70px,11vh,124px)}
.cover-kicker{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(219,218,210,.72);margin-bottom:auto;padding-top:16px;flex-wrap:wrap}
.cover-kicker i{color:var(--red);font-style:normal}
.cover-lock{display:flex;align-items:center;gap:clamp(22px,2.2vw,38px);margin:clamp(44px,9vh,96px) 0 0;width:min(760px,72vw)}
.cl-agent{height:clamp(42px,5.4vw,78px);width:auto;max-width:48%}
.cl-x{font-size:clamp(17px,1.7vw,26px);font-weight:700;color:var(--red)}
/* Ivory knockout, no plate. The two marks sit directly on the cover art, optically
   matched: the WireCare wordmark is all-caps-height so it runs smaller than the
   Agent lockup's ascenders/descenders. */
.cl-wc{height:clamp(26px,3.1vw,44px);width:auto}
/* the cover art is real championship footage with a concept jersey composited on it,
   so the frame carries its own label */
.cover-claim{margin-top:clamp(24px,3.6vh,44px);font-size:clamp(24px,2.5vw,41px);font-weight:700;letter-spacing:-.016em;line-height:1.06;max-width:21ch;color:var(--ivory);text-wrap:balance}
.cover-claim::before{content:"";display:block;width:34px;height:2px;background:var(--red);margin-bottom:clamp(14px,2.2vh,24px)}
.cover-note{margin-top:clamp(14px,2vh,22px);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(219,218,210,.55)}

/* ============================================================ 02 AGENT: REACH + BRANDS (dark)
   One dominant red figure anchors the slide, two supporting figures pair on a rule
   beneath it, the plain-language explainer bottom-aligns the copy column, and the
   footage runs as a full-height cover hero on the right. */
/* the media column starts level with the headline so the top right is not dead space,
   and the explainer hangs under the video it describes instead of weighing down the stats */
.reach-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3.4vw,60px);align-items:start}
.reach-col{min-width:0;display:flex;flex-direction:column;min-height:0}
.reach .s-head{margin-bottom:clamp(18px,2.8vh,32px)}
.rc-field{display:flex;flex-direction:column;min-width:0}
.rc-lead{border-top:3px solid var(--red);padding-top:clamp(12px,2vh,20px)}
.rc-lead strong{
  display:block;
  font-size:clamp(64px,7vw,128px);
  line-height:.88;
  letter-spacing:-.03em;
  font-weight:700;
  color:var(--red);
  /* no tabular-nums: PP Neue renders gappy digits at display sizes */
}
.rc-lead span{display:block;margin-top:clamp(9px,1.5vh,15px);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory)}
.rc-lead small{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--nmute)}
.rc-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,34px);margin-top:clamp(16px,2.8vh,30px)}
.rc-metric{border-top:2px solid var(--nstrong);padding-top:clamp(9px,1.4vh,14px);min-width:0}
.rc-metric strong{display:block;font-size:clamp(27px,2.4vw,42px);line-height:.94;letter-spacing:-.02em;font-weight:700;color:var(--ivory)}
.rc-metric span{display:block;margin-top:8px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);line-height:1.5}
.rc-metric small{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--nmute)}
/* the reader may never have seen a setup tour, so the explainer defines one in plain
   language and states the WireCare consequence out loud. It pins to the column base
   so the copy column and the footage always end on the same line. */
.rc-explain{margin-top:clamp(12px,2vh,20px);border-top:1px solid var(--nline);padding-top:clamp(10px,1.6vh,16px)}
.rc-explain b{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--nmute)}
.rc-explain span{display:block;margin-top:7px;font-size:clamp(14px,1.15vw,16.5px);line-height:1.6;color:rgba(219,218,210,.9);max-width:58ch;text-wrap:pretty}
.rc-explain em{font-style:normal;font-weight:700;color:var(--ivory)}

.rc-hero{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
/* the media well absolute-fills whatever height the copy column sets, so the video
   can never drive the grid row (the replaced-element flex trap). Cover crop, biased
   toward the desk and monitor the explainer points at. */
.rc-media{position:relative;flex:none;aspect-ratio:16/9;max-height:clamp(240px,48vh,520px);border:1px solid var(--nline);background:#0B0B0A;overflow:hidden}
.rc-hero video,
.rc-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.reach .dek{font-size:clamp(14px,1.15vw,17px);color:rgba(219,218,210,.88)}
.rc-note{margin-top:clamp(9px,1.4vh,14px);font-size:10.5px;letter-spacing:.06em;color:var(--nmute)}
.rc-note a{color:var(--ivory)}
/* the three tours were a run-on line of middots. Broken out so each one is readable. */
.rc-break{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.rc-break li{display:flex;align-items:baseline;gap:9px}
.rc-break b{font-size:13.5px;font-weight:700;color:var(--ivory);min-width:44px}
.rc-break span{font-size:12.5px;color:var(--nmute);letter-spacing:.02em}
/* 03 has no dek: the stats and the explainer already say it, so the headline takes the width */
.reach .head-grid{display:block}
.reach h2{max-width:20ch}


/* brand band: the audience figures above are worth more next to the brands that
   already paid for them. Every mark is forced to flat ivory so six different
   source palettes read as one row on night. */
.reach-brands{margin-top:clamp(16px,2.4vh,28px);border-top:2px solid var(--nstrong);padding-top:clamp(11px,1.8vh,16px);display:flex;align-items:center;gap:16px clamp(20px,3vw,44px);flex-wrap:wrap}
.reach-brands .mlabel{flex:none}
.reach-brands .brand-rail{flex:1 1 auto;justify-content:space-between;max-width:880px}
.reach-brands .brand-rail img{filter:brightness(0) invert(1);opacity:.88}

@media (min-width:901px) and (max-height:940px){
  #s8 .shell{padding-top:70px;padding-bottom:16px}
  #s8 .s-head{margin-bottom:12px}
  .grow2-steps li{padding:clamp(7px,1.2vh,12px) 0}
  .grow2-steps p{font-size:12.5px;margin-top:3px}

  .igc-shot{max-height:clamp(110px,16vh,175px)}
  .igc-head{padding:8px 11px}
  .igc-cap{padding:4px 11px 9px}
  .igc-row{padding:8px 11px 2px}
  .igc-note{margin-top:8px;font-size:11.5px}

  .rc-lead{padding-top:10px}
  .rc-lead strong{font-size:clamp(52px,5.6vw,84px)}
  .rc-lead span{margin-top:9px}
  .rc-lead small{font-size:10.5px;margin-top:5px}
  .rc-pair{margin-top:clamp(12px,2vh,20px)}
  .rc-metric strong{font-size:clamp(24px,2vw,32px)}
  .rc-metric small{font-size:11.5px;margin-top:4px}
  .rc-media{max-height:clamp(230px,39vh,420px)}
}
@media (max-width:900px){
  .tour-plug{grid-template-columns:1fr 1fr}

  .sfv-k{margin-top:6px;min-width:0}

  .rc-pair{grid-template-columns:1fr;gap:20px}
  .grow2{grid-template-columns:1fr}
  .ev2{grid-template-columns:1fr}
  .cal{grid-template-columns:1fr 1fr}
  .grow2{grid-template-columns:1fr;gap:24px}
  .dex3{grid-template-columns:1fr}
  .gp-row{grid-template-columns:1fr;gap:16px}
  .reach-grid{grid-template-columns:minmax(0,1fr);gap:24px;flex:none}
  .rc-media{flex:none;max-height:none;aspect-ratio:16/9}
  .rc-explain{margin-top:22px}
  .rc-lead strong{font-size:clamp(54px,15vw,84px)}
  .rc-metric strong{font-size:clamp(28px,7.5vw,40px)}
}

/* ============================================================ 05 THE AGENT HOUSE
   The two real tours lead at full size and the numbers sit beside them. The concept
   room render moved to the thesis slide, so nothing here competes with the footage. */
.tag-strip{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:clamp(22px,3.4vh,36px)}
.tag-strip li{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px 12px 0;margin-right:20px;color:var(--ink2);position:relative}
.tag-strip li::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:var(--strong)}
.tag-strip li:last-child::after{display:none}
.dark .tag-strip{border-color:var(--nline)}
.dark .tag-strip li{color:rgba(219,218,210,.8)}
.dark .tag-strip li::after{background:var(--nstrong)}

/* the header and paddings run tighter on this slide so the footage gets the room */
#s5 .shell{padding-top:clamp(84px,9.4vh,110px);padding-bottom:clamp(30px,4.6vh,56px)}
#s5 .s-head{margin-bottom:clamp(20px,3vh,34px)}
#s5 .eyebrow{margin-bottom:clamp(14px,2vh,22px)}
/* the two tours ARE the slide: they run side by side at full scale, height-capped by
   --tour-h so they can never blow the viewport, width-capped at half the shell so they
   never break 16:9. The numbers moved into one full-width proof band underneath. */
.tours-row{--tour-h:clamp(240px,40vh,480px);display:flex;justify-content:center;gap:clamp(20px,2.6vw,40px)}
.tour{flex:0 1 calc(var(--tour-h)*16/9);max-width:calc(50% - clamp(10px,1.3vw,20px));min-width:0;display:flex;flex-direction:column}
.vp-media{position:relative}
.vp-media .ph{border-radius:6px}
/* LAYOUT TRAP guard: the well is a plain div with aspect-ratio (height follows width,
   width follows the flex basis above) and the video absolute-fills it. Never let the
   video's intrinsic height drive this row. */
.tour .vp-media{flex:none;width:100%;aspect-ratio:16/9;border-radius:6px;border:1px solid var(--strong);background:#0B0B0A;overflow:hidden}
.tour .vp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tour .vp-media .ph{width:100%;height:100%}
.vp-sound{position:absolute;right:12px;bottom:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(7,8,7,.74);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.vp-sound svg{width:16px;height:16px;display:block}
.vp-sound .son{display:none}
.vp-sound.on{background:var(--red);border-color:var(--red)}
.vp-sound.on .soff{display:none}
.vp-sound.on .son{display:block}
.tour-k{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
/* one ruled caption row per tour: big red views, then the title, then the YouTube chip */
.tour-cap{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,22px);margin-top:8px;border-top:2px solid var(--ink);padding-top:10px;flex-wrap:wrap}
.tour-v{display:flex;align-items:baseline;gap:9px;flex:none}
.tour-v b{font-size:clamp(30px,2.7vw,44px);line-height:1;letter-spacing:-.02em;color:var(--red)}
.tour-v span{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.tour-t{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:clamp(15px,1.25vw,17px);font-weight:700;letter-spacing:-.004em;line-height:1.3}
.vp-plat{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);border:1px solid var(--strong);padding:4px 9px;white-space:nowrap;flex:none;text-decoration:none}

/* the proof band: what the last house did on the left, how WireCare plugs in on the right */
.house-band{margin-top:clamp(14px,2.2vh,26px);border-top:2px solid var(--red);padding-top:clamp(12px,2vh,18px);text-align:center}
.house-band .mlabel{justify-content:center}
.tour-note{margin-top:clamp(12px,1.8vh,20px);font-size:13.5px;line-height:1.55;color:var(--mute);max-width:70ch;margin-left:auto;margin-right:auto}
.tour-plug{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,44px);margin-top:clamp(12px,1.8vh,18px)}
.tour-plug li{font-size:clamp(14px,1.15vw,16.5px);line-height:1.4;color:var(--ink2);border-top:2px solid var(--strong);padding-top:11px;text-wrap:pretty}
.tour-plug li:first-child{border-top-color:var(--red)}

/* ============================================================ 02 THE IDEA (dark)
   Render band on top, copy below on solid night. Layout rules live in the
   R11 block at the end of this file (source-order law). */
.thesis{overflow:hidden}
.thesis-shell{position:relative;justify-content:center}
.thesis h2{font-size:clamp(34px,4vw,66px);max-width:19ch;margin-top:clamp(12px,2vh,22px)}
.thesis-lead{margin-top:clamp(16px,2.4vh,26px);font-size:clamp(14px,1.25vw,19px);line-height:1.6;color:rgba(219,218,210,.92);max-width:60ch;text-wrap:pretty}
.thesis-tags{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,54px);margin-top:clamp(22px,3.4vh,40px);border-top:1px solid var(--nline);padding-top:clamp(13px,2vh,19px)}
.thesis-tags li{display:flex;align-items:baseline;gap:10px}
.thesis-tags b{font-size:10.5px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}
.thesis-tags span{font-size:clamp(12px,1.05vw,15px);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ivory)}

/* ============================================================ 05 THE CONTENT (dark) */
#s6 .shell{padding-top:clamp(76px,9.6vh,112px)}
#s6 .s-head{margin-bottom:clamp(14px,2.2vh,24px)}
#s6 .eyebrow{margin-bottom:clamp(12px,1.8vh,20px)}
#s6 h2{font-size:clamp(32px,3.1vw,50px)}

/* 05 is a visibility slide: one row, four proof clips plus the payoff. The clips are
   only proof that people watch; the WireCare corner is the idea, so the corner absorbs
   every pixel of row slack and reads at 3-4x the width of a clip. Clip widths derive
   from one shared height so the row can never blow the viewport. The wall adapts to
   three to six clips via --sfn (set in the wall's style attribute): when the clip
   count grows past what the rail can hold, the --sfn term shrinks each clip so the
   corner always keeps at least --corner-min of the row. Every clip cell carries the
   same fixed meta rhythm (views rule / two-line title slot / two-line tag stack) so
   the row bottoms stay flush no matter how the copy wraps. */
.sf-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:0 0 clamp(12px,2vh,18px)}
.sf-label{margin:0}
.sf-wall{--clip-h:clamp(200px,34vh,308px);--wall-gap:clamp(14px,1.6vw,24px);--corner-min:36%;display:flex;justify-content:flex-start;align-items:flex-start;gap:var(--wall-gap)}
.sfv{width:min(calc(var(--clip-h)*9/16),calc((100% - var(--corner-min) - var(--sfn)*var(--wall-gap))/var(--sfn)));min-width:0;display:flex;flex-direction:column;flex:none}
.sfv-corner{flex:1 1 auto;width:auto;min-width:var(--corner-min);border-left:1px solid var(--nline);padding-left:clamp(16px,2vw,32px)}
.sfv .media-slot{width:100%}
.sfv .ph{border-radius:6px}
.sfv video,.sfv .ph{height:var(--clip-h);width:100%;aspect-ratio:auto;object-fit:cover;border-radius:6px;border:1px solid var(--nline);background:#0B0B0A}
.sfv-views{display:flex;align-items:baseline;gap:8px;margin-top:10px;border-top:2px solid var(--nstrong);padding-top:9px}
.sfv-views b{font-size:clamp(19px,1.8vw,27px);line-height:1;letter-spacing:-.014em;color:var(--ivory)}
.sfv-views span{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--nmute)}
.sfv-k span{display:block;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nmute)}
.sfv-k{display:block;margin-top:6px;min-width:0}
.sfv-k a{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:var(--ivory);text-decoration:none}
/* tags always break the same way: platform on line one, red slash + format on line
   two, so all four cells bottom out at the same pixel */
/* the corner cell mirrors the clips' rhythm: media on top, ruled caption row below */
.sfv-corner .set-plate{display:flex;flex-direction:column;min-width:0}
.set-visual{position:relative;height:var(--clip-h);overflow:hidden;border-radius:6px;border:1px solid var(--nline);background:#0B0B0A}
.set-photo{width:100%;height:100%;object-fit:cover;object-position:40% 60%}
.set-brand{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:clamp(140px,32%,224px);padding:10px 16px;background:rgba(248,247,242,.94);border:1px solid rgba(255,255,255,.72);border-radius:3px;box-shadow:0 10px 28px rgba(0,0,0,.18),0 0 30px rgba(219,49,39,.16)}
.set-brand img{width:76%;height:auto}
.sfv-corner .fig-cap{margin-top:10px;border-top:2px solid var(--nstrong);padding-top:9px;font-size:10.5px}
.set-lead{margin-top:8px;font-size:clamp(14px,1.15vw,16px);line-height:1.55;color:rgba(219,218,210,.82);text-wrap:pretty;max-width:52ch}
/* monthly exposure runs as its own full-width band under the wall, the same move
   as the proof bands on 03, 07 and 08 */

.light .act-list li{color:var(--ink2);border-bottom-color:var(--line)}

/* ============================================================ 03 WHERE WIRECARE APPEARS
   Five places, five pictures. A single hero image beside a text list was the weakest
   composition in the deck; this slide's whole job is to show the spread. */
#s4 .shell{padding-top:clamp(78px,9.5vh,108px)}
#s4 .s-head{margin-bottom:clamp(18px,2.8vh,30px)}
#s4 h2{font-size:clamp(32px,3.1vw,50px)}
.places{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.9vw,32px);align-items:start}
.place{min-width:0;display:flex;flex-direction:column}
.place-img{overflow:hidden;border-radius:6px;border:1px solid var(--line);background:#121214}
.place-img{position:relative}
.place-img img{width:100%;height:clamp(160px,34vh,400px);object-fit:cover;display:block}
.place:nth-child(1) .place-img img{object-position:50% 50%}
.place:nth-child(2) .place-img img{object-position:44% 50%}
.place:nth-child(3) .place-img img{object-position:50% 40%}
/* the filming-corner photo carries no branding of its own, so the tile states it */
.place-brand{position:absolute;left:50%;top:24%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:62%;padding:7px 10px;background:rgba(248,247,242,.94);border:1px solid rgba(255,255,255,.72);border-radius:3px;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.place-brand img{width:82%;height:auto}
.place-k{display:flex;align-items:baseline;gap:9px;margin:12px 0 7px;border-top:2px solid var(--ink);padding-top:10px}
.place:nth-child(1) .place-k{border-top-color:var(--red)}
.place-k b{font-size:10px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}
.place-k span{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.place h3{font-size:clamp(15.5px,1.3vw,20px);line-height:1.18;letter-spacing:-.008em;text-wrap:pretty}
.place-c{margin-top:6px;font-size:13px;line-height:1.5;color:var(--mute);text-wrap:pretty}
/* titles reserve two lines so the supporting lines sit on one shared baseline across the row */
@media (min-width:901px){.place h3{min-height:2.4em}}

/* ============================================================ 07 FOLLOWER GROWTH
   The prize on the left at full size, the mechanic on the right, the case study
   full width underneath as the evidence for the whole slide. */
#s8 .shell{padding-top:clamp(78px,9.5vh,108px)}
#s8 .s-head{margin-bottom:clamp(12px,2vh,20px)}
#s8 h2{font-size:clamp(34px,3.4vw,54px)}
.grow2{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,.95fr) minmax(0,.78fr);gap:clamp(20px,2.6vw,44px);align-items:stretch}
.grow2-media{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
/* the prize fills its column: well takes the slack, the photo cover-crops (its own
   studio gray never has to match a CSS gray again) */
.grow2-well{flex:1 1 auto;position:relative;min-height:clamp(210px,30vh,380px);border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#B4B0B1}
.grow2-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.grow2-side{min-width:0}
.grow2-steps{margin-top:12px;border-top:2px solid var(--ink)}
.grow2-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:clamp(10px,1vw,16px);align-items:start;padding:clamp(11px,1.8vh,18px) 0;border-bottom:1px solid var(--line)}
.grow2-steps li:last-child{border-bottom:0}
.grow2-steps b{font-size:10.5px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums;padding-top:4px}
.grow2-steps h3{font-size:clamp(15px,1.3vw,20px);line-height:1.15;letter-spacing:-.008em}
.grow2-run{min-width:0;border-top:2px solid var(--wcnavy);padding-top:12px;display:flex;flex-direction:column}
.run-list{margin-top:10px;flex:1 1 auto;display:flex;flex-direction:column}
.run-list li{flex:1 1 auto;display:flex;align-items:center;font-size:14px;line-height:1.45;color:var(--ink2);padding:7px 0 7px 18px;border-bottom:1px solid var(--line);position:relative;text-wrap:pretty}
.run-list li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:9px;height:2px;background:var(--wcnavy)}
.grow2-steps p{font-size:14px;line-height:1.5;color:var(--mute);margin-top:5px;max-width:46ch;text-wrap:pretty}

/* the case study is the evidence for the whole slide, so it runs full width beneath */
.give-proof{margin-top:clamp(16px,2.6vh,30px);border-top:2px solid var(--ink);padding-top:clamp(11px,1.8vh,16px)}
.gp-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,3vw,56px);align-items:start;margin-top:11px}
.give-proof ul{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,40px)}
.give-proof li{border-top:2px solid var(--ink);padding-top:9px;min-width:0}
.give-proof li:first-child{border-top-color:var(--red)}
.give-proof b{display:block;font-size:clamp(24px,2.2vw,34px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.give-proof li:first-child b{color:var(--red)}
.give-proof span{display:block;margin-top:7px;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);line-height:1.5}
.give-src{font-size:13.5px;line-height:1.6;color:var(--mute);max-width:60ch;text-wrap:pretty;border-left:2px solid var(--line);padding-left:16px}
.give-src a{color:var(--ink);border-bottom:1px solid var(--line);text-decoration:none;white-space:nowrap}

/* ============================================================ 08 THE DEXTER MAKEOVER (dark)
   Real footage beside the concept: what Agent already has access to, and what the
   video turns it into. */
#s9 .shell{padding-top:clamp(78px,9.5vh,108px)}
#s9 .s-head{margin-bottom:clamp(18px,2.8vh,30px)}
#s9 h2{font-size:clamp(32px,3.1vw,50px)}
.dex3{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(22px,3.2vw,52px);align-items:stretch}
.dex3-media{min-width:0;display:flex;flex-direction:column;min-height:0}
/* the well fills whatever height the side column sets, so the footage and the list
   always end on the same line (replaced-element trap: video absolute-fills) */
.dex3-well{flex:1 1 auto;position:relative;min-height:clamp(240px,42vh,520px);border-radius:6px;border:1px solid var(--nline);background:#0B0B0A;overflow:hidden}
.dex3-well video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dex3-side{min-width:0;border-top:2px solid var(--red);padding-top:12px}
.dex3-lead{margin-top:11px;font-size:clamp(13px,1.1vw,16px);line-height:1.6;color:rgba(219,218,210,.9);text-wrap:pretty}
.dex3-out{margin-top:clamp(14px,2.2vh,22px);border-top:1px solid var(--nline)}
.dex3-out li{padding:clamp(8px,1.4vh,13px) 0;border-bottom:1px solid var(--nline)}
.dex3-out li:last-child{border-bottom:0}
.dex3-out b{display:block;font-size:clamp(13px,1.1vw,16px);letter-spacing:-.006em;color:var(--ivory)}
.dex3-out span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--nmute);text-wrap:pretty}

/* ============================================================ 07 SETUP KIT
   One fused product stage: the flat-lay was shot on near-black, so it sits contained
   on a panel of the same black and reads as full-bleed product art, with both
   purchase tiers set in ivory inside the same panel. No photo-in-a-box. */
#s7 .shell{padding-top:clamp(80px,9.2vh,100px);padding-bottom:clamp(22px,3vh,34px)}
#s7 .s-head{margin-bottom:clamp(14px,2.2vh,24px)}
#s7 h2{font-size:clamp(30px,2.9vw,46px)}
.kit7{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,52px);align-items:stretch;flex:1;min-height:0;
  background:#0B0B0B;border:1px solid var(--strong);border-radius:6px;overflow:hidden;
  padding:clamp(18px,2.8vh,32px) clamp(20px,2.6vw,42px);
  color:var(--ivory);
}
.kit7-hero{display:flex;flex-direction:column;min-width:0;min-height:0}
/* the well absolute-fills whatever height the tier column sets (so the photo can
   never drive the row); contain shows the whole kit and the inset shadow melts the
   photo edges into the panel */
.kit7-well{flex:1 1 auto;position:relative;min-height:clamp(240px,36vh,600px)}
.kit7-well img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 46%}
.kit7-well::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 56px 26px #0B0B0B;pointer-events:none}
.kit7 .fig-cap{margin-top:clamp(8px,1.4vh,14px)}
.kit7 .fig-cap b{color:var(--ivory)}
.kit7 .fig-cap span{color:var(--nmute)}
.kit7-tiers{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,26px);min-width:0}
.kit7-tier{border-top:2px solid var(--nstrong);padding-top:12px;min-width:0}
.kit7-tier.hot{border-top-color:var(--red)}
.kit7 .mlabel{color:var(--ivory)}
.kit7-tier h3{font-size:clamp(17px,1.45vw,23px);line-height:1.12;letter-spacing:-.012em;margin:8px 0 2px;color:var(--ivory)}
.kit7-list{margin-top:6px}
.kit7-list.two{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(14px,1.8vw,30px)}
.kit7-list li{font-size:14px;line-height:1.45;color:rgba(219,218,210,.85);padding:6px 0 6px 20px;border-bottom:1px solid var(--nline);position:relative}
.kit7-list li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:2px;background:var(--red)}
.kit7-list li:last-child{border-bottom:0}
.kit7-tier.hot .kit7-list li:first-child{font-weight:700;color:var(--ivory)}
/* the bundle names Agent gear the kit photo does not show, so it carries its own thumbs */
.kit7-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);margin:10px 0 4px}
.kit7-thumbs li{min-width:0}
.kit7-close{margin-top:clamp(12px,1.8vh,20px);border-top:2px solid var(--red);padding-top:12px;font-size:clamp(14px,1.15vw,16.5px);line-height:1.5;color:var(--ivory);text-wrap:pretty}
.kit7-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#121214;border:1px solid var(--nline);border-radius:4px}
.kit7-thumbs span{display:block;margin-top:6px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nmute)}

/* commerce proof: this audience already buys physical product from Agent */

[hidden]{display:none!important}

/* ============================================================ 10 LIVE EVENTS (dark)
   WireCare already exhibits. The slide argues Agent turns a booth into an event,
   and gives real published dates rather than a vague list of event names. */
/* slide 10 carries the close band as well as its own content, so it runs on a
   tighter base rhythm than the other slides at every viewport height */
#s10 > .shell{padding-top:clamp(80px,8.6vh,96px);padding-bottom:clamp(14px,2vh,22px)}
#s10 .s-head{margin-bottom:clamp(14px,2vh,24px)}
.ev2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,3.4vw,60px);align-items:stretch}
.ev2-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,32px);min-width:0;align-content:start}
.ev2-media video,.ev2-media img{width:100%;height:clamp(135px,17.5vh,205px);object-fit:cover;border-radius:6px;border:1px solid var(--nline)}
.ev2-side{min-width:0;border-top:2px solid var(--red);padding-top:12px;display:flex;flex-direction:column}
.ev2-brings{margin-top:10px}
.ev2-brings li{font-size:14px;line-height:1.45;color:rgba(219,218,210,.86);padding:7px 0 7px 18px;border-bottom:1px solid var(--nline);position:relative;text-wrap:pretty}
.ev2-brings li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:2px;background:var(--red)}
.ev2-brings li:last-child{border-bottom:0}
/* the DreamHack figure pins to the column base so it lands on the media baseline */
.ev2-stat{margin-top:auto;border-top:1px solid var(--nline);padding-top:clamp(10px,1.8vh,16px)}
.ev2-stat b{display:block;font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-.02em;color:var(--ivory)}
.ev2-stat span{display:block;margin-top:7px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--nmute);line-height:1.5}

.ev2-cal{margin-top:clamp(22px,3.4vh,44px);border-top:2px solid var(--nstrong);padding-top:clamp(12px,2vh,18px)}
.cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.4vw,42px);margin-top:clamp(12px,2vh,20px)}
.cal li{border-top:2px solid var(--nstrong);padding-top:10px;min-width:0}
.cal li:first-child{border-top-color:var(--red)}
.cal b{display:block;font-size:clamp(13px,1.1vw,16px);letter-spacing:-.006em;color:var(--ivory);line-height:1.2}
.cal span{display:block;margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nmute)}
.cal em{display:block;margin-top:7px;font-style:normal;font-size:12.5px;color:rgba(219,218,210,.8)}
.cal-note{margin-top:clamp(12px,2vh,18px);font-size:11.5px;letter-spacing:.04em;color:var(--nmute)}

/* ============================================================ the close band, carried by slide 08 */

.brand-rail{display:flex;align-items:center;gap:clamp(16px,2vw,30px);flex-wrap:wrap}
.brand-rail li{display:flex;align-items:center}
.brand-rail img{width:auto}
.bl-nike{height:64px;filter:brightness(0)}
.bl-coke{height:74px}
.bl-hulu{height:30px}
.bl-sixflags{height:30px}
.bl-familyguy{height:48px}
.bl-jarritos{height:56px}
.close-band{background:var(--night);color:var(--ivory);border-top:1px solid var(--nline)}
.close-shell{flex:initial;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(26px,4vw,72px);align-items:center;padding-top:clamp(24px,3.6vh,42px);padding-bottom:clamp(24px,3.6vh,42px)}
.close-left{min-width:0}
.close-lock{display:flex;align-items:center;gap:14px}
.close-lock .cl-agent{height:16px}
.close-lock .cl-wc{height:13px}
.close-line{font-size:clamp(24px,2.5vw,40px);font-weight:700;letter-spacing:-.015em;line-height:1.08;margin-top:14px;text-wrap:balance}
.close-foot{margin-top:14px;font-size:10.5px;letter-spacing:.06em;color:var(--nmute)}
.close-foot a{color:var(--ivory);text-decoration:none;border-bottom:1px solid rgba(219,218,210,.4)}
.next-steps{display:flex;flex-direction:column}
.next-steps li{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--nline)}
.next-steps li:first-child{border-top:2px solid rgba(219,218,210,.3)}
.next-steps b{font-size:10.5px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}
.next-steps span{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--ivory)}

/* ============================================================ short desktop viewports */
@media (min-width:901px) and (max-height:940px){
  #s3 .shell,#s4 .shell,#s8 .shell{padding-top:74px;padding-bottom:22px}
  #s7 .shell{padding-top:66px;padding-bottom:14px}
  #s3 .s-head{margin-bottom:12px}
  #s4 .s-head,#s8 .s-head,#s7 .s-head{margin-bottom:14px}
  #s3 .eyebrow{margin-bottom:10px}
  #s4 .eyebrow,#s8 .eyebrow,#s7 .eyebrow{margin-bottom:11px}
  #s4 h2,#s8 h2{font-size:clamp(29px,2.8vw,42px)}
  #s7 h2{font-size:clamp(26px,2.5vw,38px)}
  #s7 .s-head{margin-bottom:11px}
  .give-proof{margin-top:14px;padding-top:10px}
  .gp-row{margin-top:8px}
  .give-proof b{font-size:clamp(20px,1.9vw,27px)}
  .give-src{margin-top:8px;font-size:10.5px}
  .kit7{padding:clamp(12px,1.8vh,20px) clamp(16px,2vw,30px)}
  .kit7-tier h3{font-size:clamp(17px,1.5vw,22px);margin:6px 0 2px}
  .kit7-tiers{gap:clamp(9px,1.6vh,16px)}
  .kit7-thumbs{margin:6px 0 0}
  .kit7-thumbs img{aspect-ratio:16/9}
  .kit7-thumbs span{margin-top:4px}
  .kit7-tier{padding-top:7px}
  .kit7-well{min-height:clamp(170px,27vh,360px)}
  .kit7 .fig-cap{margin-top:8px}
  .kit7-list li{font-size:12px;padding:3.5px 0 3.5px 17px}
  .kit7-list li::before{top:10px}
  #s5 .shell{padding-top:66px;padding-bottom:10px}
  #s5 h2{font-size:clamp(29px,2.8vw,42px)}
  #s5 .s-head{margin-bottom:12px}
  #s5 .eyebrow{margin-bottom:10px}
  .tours-row{--tour-h:clamp(210px,36vh,460px)}
  .tour-k{margin-top:9px}
  .tour-cap{margin-top:6px;padding-top:8px}
  .tour-v b{font-size:clamp(27px,2.4vw,38px)}
  .house-band{margin-top:13px;padding-top:11px}
  .tour-plug{margin-top:7px}
  .tour-plug li{padding:6px 0 6px 20px}
  .tour-plug li::before{top:14px}
  .reach-brands{margin-top:11px;padding-top:10px}
  .rc-explain{padding-top:9px}
  .rc-explain span{font-size:12px;margin-top:5px}
  .rc-metric{padding-top:clamp(5px,0.9vh,10px)}
  .rc-metric small{font-size:11.5px}
  .rc-break{margin-top:5px;gap:2px}
  .rc-break b{font-size:11px;min-width:40px}
  .rc-break span{font-size:10px}
  .rc-pair{margin-top:clamp(9px,1.5vh,15px)}
  #s6 .shell{padding-top:74px;padding-bottom:24px}
  #s6 h2{font-size:clamp(30px,2.9vw,44px)}
  #s6 .s-head{margin-bottom:12px}
  #s6 .eyebrow{margin-bottom:12px}
  .sf-head{margin-bottom:10px}
  .sf-wall{--clip-h:clamp(190px,32vh,290px)}
  .sfv-views{margin-top:8px;padding-top:7px}
  .sfv-views b{font-size:clamp(16px,1.5vw,21px)}
  #s10 > .shell{padding-top:68px;padding-bottom:14px}
  #s10 .s-head{margin-bottom:10px}
  .ev2-cal{margin-top:10px;padding-top:9px}
  .cal{margin-top:7px}
  .cal em{margin-top:4px}
  .cal-note{margin-top:8px}
  .ev2-brings li{padding:4.5px 0 4.5px 17px}
  .ev2-brings li::before{top:12px}
  #s10 .eyebrow{margin-bottom:10px}
  #s10 h2{font-size:clamp(28px,2.7vw,42px)}
  .ev2-media video,.ev2-media img{height:clamp(105px,13.5vh,150px)}
  .ev2-brings li{padding:5px 0 5px 17px;font-size:12px}
  .ev2-brings li::before{top:12px}
  .ev2-stat{margin-top:10px;padding-top:10px}
  .ev2-stat b{font-size:clamp(24px,2.2vw,32px)}
  .ev2-cal{margin-top:12px;padding-top:10px}
  .cal{margin-top:8px}
  .cal em{margin-top:4px}
  .cal-note{margin-top:9px}
  .close-shell{padding-top:16px;padding-bottom:16px}
  .close-line{font-size:clamp(21px,2.1vw,30px);margin-top:10px}
  .close-foot{margin-top:10px}
  .next-steps li{padding:7px 0}
}

/* ============================================================ responsive */
@media (max-width:1180px){
  .sf-wall{--clip-h:clamp(170px,24vh,220px)}
  .kit7{grid-template-columns:minmax(0,1fr) minmax(280px,1fr)}
}
@media (max-width:900px){
  .tours-row{flex-direction:column;gap:26px}
  .tour{flex:none;width:100%;max-width:100%}
  .house-band{grid-template-columns:1fr;gap:24px}
  .tour-plug{grid-template-columns:1fr}
  .rc-pair{grid-template-columns:1fr;gap:20px}
  .grow2{grid-template-columns:1fr}
  .ev2{grid-template-columns:1fr}
  .cal{grid-template-columns:1fr 1fr}
  .grow2{grid-template-columns:1fr;gap:24px}
  .dex3{grid-template-columns:1fr}
  .gp-row{grid-template-columns:1fr;gap:16px}
  .give-proof ul{grid-template-columns:1fr 1fr}
  .kit7-list.two{grid-template-columns:1fr}
  .kit7{grid-template-columns:1fr;gap:22px;padding:16px}
  .kit7-well{flex:none;aspect-ratio:4/5;max-height:60vh;min-height:0}
  .reach-brands{gap:12px 22px}
  .head-grid{grid-template-columns:1fr;gap:16px;align-items:start}
  .dek{max-width:60ch}
  .sf-label-corner{display:none}
  .sf-wall{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .sfv{width:100%}
  .sfv-corner{width:100%;grid-column:1/-1;border-left:0;padding-left:0}
  .sfv-k{min-height:0}
  .sfv video,.sfv .ph{height:auto;aspect-ratio:9/16}
  .set-visual{height:auto;aspect-ratio:16/9}
  .grow-duo{grid-template-columns:1fr;gap:20px}
  .dex-copy{grid-column:1/-1}
  .close-shell{grid-template-columns:1fr;gap:20px}
  .cover h1{font-size:clamp(38px,9.4vw,72px)}
  .places{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .place:last-child{grid-column:1/-1}
  .place-img img{height:200px}
}
@media (max-width:760px){
  .shell{padding-top:96px}
  .topbar{padding:0 26px;height:56px}
  .tb-stamp{display:none}
  .pdp-body{grid-template-columns:1fr}
  .brand-rail{gap:18px 26px}
  .close-shell{gap:18px}
}
@media (max-width:480px){
  .cover h1{font-size:clamp(34px,10.5vw,48px)}
  .cover-lock{gap:12px}
  h2{font-size:clamp(29px,8vw,38px)}
  .brand-rail img{transform:scale(.86);transform-origin:left center}
}

/* click any product shot to see it full size without leaving the deck */
[data-zoom]{cursor:zoom-in}
[data-zoom]:hover{opacity:.88;transition:opacity .2s}
#lb{position:fixed;inset:0;z-index:200;background:rgba(4,4,5,.94);display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vw,72px)}
#lb[hidden]{display:none}
#lb img{max-width:100%;max-height:100%;object-fit:contain;border:1px solid rgba(219,218,210,.18);border-radius:6px}
#lb-x{position:absolute;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);width:44px;height:44px;border-radius:50%;border:1px solid rgba(219,218,210,.4);background:rgba(7,8,7,.7);color:var(--ivory);font-size:24px;line-height:1;cursor:pointer}

/* 08 collaborative post: rebuilt from the v2 mock, now three real accounts */
.ui{background:#fff;border:1px solid rgba(10,10,9,.12);border-radius:12px;box-shadow:0 14px 38px rgba(10,10,9,.08);font-family:var(--ui);color:#101012;overflow:hidden}
.av{width:30px;height:30px;border-radius:50%;border:1px solid rgba(10,10,9,.12);background:#fff;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.av img{width:70%;height:70%;object-fit:contain}
.av.ag-av{background:#0B0B0A}
.av.ag-av img{width:58%;height:58%}
.av.dx-av img{width:100%;height:100%;object-fit:cover}
.av-stack{display:inline-flex;flex:none}
.av-stack .av + .av{margin-left:-9px}
.igc-head{display:flex;align-items:center;gap:11px;padding:11px 13px}
.igc-id{min-width:0}
.igc-id b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.igc-id span{font-size:10.5px;color:#6b6d72}
.dots{margin-left:auto;font-weight:700;color:#6b6d72;font-style:normal}
.igc-shot{width:100%;aspect-ratio:4/3;border-top:1px solid rgba(10,10,9,.07);border-bottom:1px solid rgba(10,10,9,.07);background:#AFABAC;overflow:hidden}
.igc-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.igc-row{display:flex;gap:13px;padding:10px 13px 3px;align-items:center}
.igc-row .ii:last-child{margin-left:auto}
.ii{width:21px;height:21px;color:#26272b;display:inline-block}
.ii svg{width:100%;height:100%;display:block}
.igc-cap{font-size:12px;line-height:1.5;padding:5px 13px 12px;color:#26272b}
.igc-cap b{font-weight:600}
.igc-note{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--mute);text-wrap:pretty}

/* ============================================================
   slide 08 rebuild (keep LAST in file, source order beats the base rules
   and both short-desktop queries above):
   jersey hero left, RebaseGG case study right, deliverables band below. */

/* base, all widths: single column stack */
.grow2{grid-template-columns:1fr;align-items:stretch}
.grow2-media{max-height:none}
.grow2-well{min-height:clamp(240px,34vh,440px)}
.give-proof{margin-top:0;border-top:0;padding-top:0;display:flex;flex-direction:column;min-width:0}
.give-proof ul{grid-template-columns:1fr;gap:clamp(14px,2.4vh,26px);margin-top:clamp(14px,2.2vh,24px)}
.give-proof li{padding-top:clamp(10px,1.6vh,16px)}
.give-proof b{font-size:clamp(42px,4.4vw,74px);line-height:.95;letter-spacing:-.025em}
.give-proof span{font-size:11.5px;margin-top:9px}
.give-src{margin-top:clamp(14px,2.4vh,26px);font-size:clamp(14px,1.05vw,16px);line-height:1.65;max-width:52ch}
.grow2-band{margin-top:clamp(16px,2.8vh,30px);border-top:2px solid var(--ink);padding-top:clamp(12px,2vh,20px);display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,44px)}
.grow2-run{border-top:0;padding-top:0}
.igc-mini{margin-top:clamp(10px,1.8vh,16px)}
.igc-mini .igc-head{padding:10px 13px}
.igc-note{margin-top:clamp(9px,1.5vh,13px);font-size:13px}

/* desktop layout */
@media (min-width:901px){
  #s8 > .shell{padding-top:clamp(80px,8.6vh,98px);padding-bottom:clamp(20px,3vh,34px)}
  #s8 .s-head{margin-bottom:clamp(12px,2vh,20px)}
  .grow2{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
  .grow2-steps{margin-top:clamp(10px,1.8vh,16px);border-top:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,30px)}
  .grow2-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);border-bottom:0;border-top:2px solid var(--line);padding:clamp(9px,1.5vh,14px) 0 0}
  .grow2-steps li:first-child{border-top-color:var(--red)}
  .grow2-steps p{font-size:13px;line-height:1.5;margin-top:5px;max-width:none}
  .grow2-band{grid-template-columns:minmax(0,1.9fr) minmax(0,1.1fr)}
  .grow2-run{border-left:1px solid var(--line);padding-left:clamp(18px,2.2vw,36px)}
}

/* short desktop viewports */
@media (min-width:901px) and (max-height:940px){
  #s8 > .shell{padding-top:70px;padding-bottom:14px}
  #s8 .s-head{margin-bottom:10px}
  .grow2-well{min-height:clamp(200px,30vh,330px)}
  .give-proof ul{margin-top:10px;gap:12px}
  .give-proof li{padding-top:9px}
  .give-proof b{font-size:clamp(34px,3.6vw,52px)}
  .give-src{margin-top:12px;font-size:14px;line-height:1.55}
  .grow2-band{margin-top:14px;padding-top:11px}
  .grow2-steps{margin-top:9px}
  .grow2-steps li{padding-top:8px}
  .grow2-steps p{font-size:12.5px;margin-top:4px}
  .igc-mini{margin-top:9px}
  .igc-mini .igc-head{padding:8px 11px}
  .igc-note{margin-top:8px;font-size:12.5px}
}

/* ============================================================ 08 FOLLOWER GROWTH, three sections
   Jersey hero left, then three clearly separated blocks: the mechanic, the service,
   the proof. No years anywhere; the post link carries the date if he wants it. */
.grow3{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,2fr);gap:clamp(22px,3vw,52px);align-items:start}
.grow3-hero{position:relative;min-width:0}
.grow3-hero .grow2-well{position:relative;width:100%;height:clamp(230px,40vh,430px);overflow:hidden;border-radius:6px;border:1px solid var(--line);background:#AFABAC}
.grow3-hero .grow2-well img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.g3{min-width:0;border-top:2px solid var(--strong);padding-top:12px}
.g3:first-child{border-top-color:var(--red)}
.g3 .mlabel{margin-bottom:11px}
.g3-steps li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;padding:8px 0;border-bottom:1px solid var(--line)}
.g3-steps li:last-child{border-bottom:0}
.g3-steps b{font-size:10px;font-weight:700;color:var(--red);padding-top:2px}
.g3-steps span{font-size:13.5px;line-height:1.45;color:var(--ink2);text-wrap:pretty}
.g3-proof{border-top-color:var(--wcnavy)}
.g3-nums p{margin-bottom:12px}
.g3-nums b{display:block;font-size:clamp(30px,2.8vw,44px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.g3-nums p:first-child b{color:var(--red)}
.g3-nums span{display:block;margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);line-height:1.45}
@media (min-width:901px) and (max-height:940px){
  .grow3-hero .grow2-well{height:clamp(190px,30vh,300px)}
  .g3-steps li{padding:6px 0}
  .g3-nums b{font-size:clamp(26px,2.4vw,36px)}
  .g3-nums p{margin-bottom:9px}
}
@media (max-width:900px){
  .grow3{grid-template-columns:1fr}
}

/* the real post, rebuilt as a card so it sits in the deck's own system */
.xcard{display:block;text-decoration:none;color:#e7e9ea;background:#15181c;border:1px solid #2f3336;border-radius:12px;padding:12px 13px;font-family:var(--ui)}
.xc-head{display:flex;align-items:center;gap:9px}
.xc-head .av{width:30px;height:30px}
.xc-id b{display:block;font-size:12.5px;color:#e7e9ea}
.xc-id span{font-size:11.5px;color:#71767b}
.xc-body{margin-top:9px;font-size:12.5px;line-height:1.42;color:#e7e9ea}
.xc-body b{font-weight:700}
.xc-body em{font-style:normal;color:#1d9bf0}
.xc-stats{margin-top:10px;border-top:1px solid #2f3336;padding-top:9px;font-size:11.5px;color:#71767b}
.xc-stats b{color:#e7e9ea}
@media (min-width:901px) and (max-height:940px){
  .xc-body{font-size:11.5px;line-height:1.36;margin-top:7px}
  .xc-stats{margin-top:8px;padding-top:7px;font-size:11px}
  .xcard{padding:10px 11px}
}

/* R6: slide 03 brand rail in native brand color, Nike stays ivory */
#s3 .reach-brands .brand-rail img{filter:none;opacity:1}
#s3 .reach-brands .brand-rail .bl-nike{filter:none;opacity:.92}

/* R7: cover art restored. Lighter scrim so the WireCare sleeve branding stays visible,
   crop lowered so the jerseys read instead of the ceiling. */
.cover-bg img{object-position:50% 46%;filter:saturate(.95) contrast(1.04) brightness(1)}
.cover-scrim{background:linear-gradient(96deg,rgba(4,4,5,.88) 0%,rgba(4,4,5,.56) 40%,rgba(4,4,5,.14) 66%,rgba(4,4,5,.3) 100%),linear-gradient(0deg,rgba(4,4,5,.9) 0%,rgba(4,4,5,.22) 36%,rgba(4,4,5,.04) 58%,rgba(4,4,5,.38) 100%)}

/* R9: slide 04 tile 03 is a video of Dexter's setup, cut natively to the tile shape */
.place-img video{width:100%;height:clamp(160px,34vh,400px);object-fit:cover;display:block}

/* R10: slide 10 relayout. The two media figures are the visual anchor: 16:9
   aspect-ratio driven with a max-height guard (replaced-element trap: never let
   intrinsic height drive the row, never cover-crop 16:9 into a tall box). The
   media column widens, the figures roughly double, the side column keeps a
   readable width and its stat pins to the bottom of the row, and the old dead
   band under the figures is gone. Must stay at the END of styles.css so it wins
   the source-order fight with the short-viewport media queries above. */
@media (min-width:901px){
  .ev2{grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr);gap:clamp(26px,3.2vw,54px);align-items:stretch}
  .ev2-media{grid-template-columns:1fr 1fr;gap:clamp(14px,1.7vw,26px);align-content:center}
  .ev2-media video,.ev2-media img{height:auto;aspect-ratio:16/9;max-height:clamp(200px,34vh,340px);object-fit:cover}
  .ev2-media .fig-cap{margin-top:10px}
}



/* R11: slide 02 relayout. The room render becomes a text-free band across the
   top of the slide: the full frame from the neon sign down through the desk
   row stays visible (only the empty rug strip at the very bottom is cropped),
   centered, with the edges fading into the night background. All copy sits
   below on solid dark, and the three layers become three real columns.
   Replaced-element trap: the band height is a hard clamp, the img hangs off
   that height, never the other way. Appended last to win source order. */
.thesis{display:flex;flex-direction:column}
.thesis-band{flex:none;margin:66px 0 0}
.thesis-frame{height:clamp(200px,41vh,540px);display:flex;justify-content:center;overflow:hidden}
.thesis-shot{position:relative;flex:none;height:100%;overflow:hidden}
.thesis-shot img{height:122%;width:auto;max-width:none;filter:saturate(.98) brightness(.96)}
.thesis-shot::before,.thesis-shot::after{content:"";position:absolute;top:0;bottom:0;width:clamp(60px,8vw,130px);z-index:1;pointer-events:none}
.thesis-shot::before{left:0;background:linear-gradient(90deg,var(--night) 0%,rgba(7,8,7,0) 100%)}
.thesis-shot::after{right:0;background:linear-gradient(270deg,var(--night) 0%,rgba(7,8,7,0) 100%)}
.thesis-cap{max-width:var(--maxw);margin:8px auto 0;width:100%;padding:0 clamp(22px,3.6vw,56px)}
.thesis-shell{flex:1;padding-top:clamp(16px,2.6vh,34px);padding-bottom:clamp(28px,4.5vh,56px)}
.thesis h2{font-size:clamp(27px,2.7vw,46px);max-width:24ch;margin-top:clamp(10px,1.6vh,18px)}
.thesis .eyebrow{margin-bottom:0}
.thesis-lead{margin-top:clamp(12px,1.8vh,20px);font-size:clamp(14px,1.15vw,18px);max-width:72ch}
.thesis-tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,54px);margin-top:clamp(18px,3vh,36px);border-top:0;padding-top:0}
.thesis-tags li{display:block;border-top:2px solid var(--nstrong);padding-top:clamp(10px,1.6vh,16px)}
.thesis-tags li:first-child{border-top-color:var(--red)}
.thesis-tags b{display:block;font-size:12px}
.thesis-tags span{display:block;margin-top:7px;font-size:clamp(15px,1.35vw,20px);letter-spacing:.08em}
@media (max-width:900px){
  .thesis-band{margin-top:62px}
  .thesis-frame{height:auto;display:block}
  .thesis-shot{height:auto}
  .thesis-shot img{width:100%;height:auto}
  .thesis-shot::before,.thesis-shot::after{display:none}
  .thesis-tags{grid-template-columns:1fr;gap:14px}
}

/* R12: slide 10 calendar event names are links to the published event sites.
   Quiet treatment: ivory with a hairline underline that warms to red. */
.cal b a{color:inherit;text-decoration:none;border-bottom:1px solid var(--nstrong);padding-bottom:2px;transition:border-bottom-color .2s ease}
.cal b a:hover{border-bottom-color:var(--red)}

/* R13: slide 08 two-up relayout. Offer left (jersey + mechanic), proof right
   (the real post as the hero, figures beside it), socials band full width below,
   rhyming with slide 05's "How WireCare plugs in" band. APPENDED LAST so these
   win over the earlier base rules and both short-desktop queries. */
#s8 .grow3{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,3vw,56px);align-items:stretch}
.g3-offer{display:flex;flex-direction:column;min-width:0;gap:clamp(12px,2vh,18px)}
#s8 .grow3-hero .grow2-well{flex:none;min-height:0;height:clamp(210px,32vh,360px)}
.g3-proofrow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(18px,2.4vw,40px);align-items:center}
/* the well the real tweet screenshot drops into later; sized for the replica card or a portrait image */
.g3-tweetwell{min-width:0}
.g3-tweetwell .xcard{padding:clamp(14px,1.5vw,22px) clamp(16px,1.7vw,24px);border-radius:14px}
.g3-tweetwell .xc-head{gap:11px}
.g3-tweetwell .xc-head .av{width:clamp(34px,2.6vw,42px);height:clamp(34px,2.6vw,42px)}
.g3-tweetwell .xc-id b{font-size:clamp(14px,1.1vw,16.5px)}
.g3-tweetwell .xc-id span{font-size:clamp(12.5px,1vw,14px)}
.g3-tweetwell .xc-body{font-size:clamp(14px,1.15vw,17px);line-height:1.5;margin-top:12px}
.g3-tweetwell .xc-stats{font-size:clamp(12.5px,1vw,14px);margin-top:12px;padding-top:11px}
.g3-tweetwell > a > img,.g3-tweetwell > img{display:block;width:auto;height:auto;max-width:100%;max-height:clamp(300px,46vh,520px);margin:0 auto;border-radius:12px;border:1px solid var(--line)}
#s8 .g3-nums p{margin-bottom:clamp(14px,2.6vh,24px)}
#s8 .g3-nums p:last-child{margin-bottom:0}
#s8 .g3-nums b{font-size:clamp(38px,3.6vw,60px)}
#s8 .g3-nums span{font-size:clamp(11px,.9vw,12.5px);margin-top:8px;max-width:24ch}
#s8 .g3-steps span{font-size:clamp(13.5px,1.1vw,16px)}
#s8 .house-band{margin-top:clamp(14px,2.4vh,26px)}
@media (min-width:901px){
  #s8 .tour-plug{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:901px) and (max-height:940px){
  #s8 > .shell{padding-top:70px;padding-bottom:14px}
  #s8 .s-head{margin-bottom:10px}
  #s8 .grow3-hero .grow2-well{height:clamp(170px,26vh,270px)}
  .g3-offer{gap:10px}
  .g3-tweetwell .xcard{padding:12px 14px}
  .g3-tweetwell .xc-body{font-size:clamp(12.5px,1vw,14.5px);line-height:1.42;margin-top:9px}
  .g3-tweetwell .xc-stats{font-size:clamp(11.5px,.9vw,13px);margin-top:9px;padding-top:8px}
  #s8 .g3-nums p{margin-bottom:12px}
  #s8 .g3-nums b{font-size:clamp(30px,3vw,46px)}
  #s8 .house-band{margin-top:12px;padding-top:10px}
  #s8 .tour-plug{margin-top:7px}
  #s8 .tour-plug li{font-size:13px;padding-top:8px}
}
@media (max-width:900px){
  .g3-proofrow{grid-template-columns:1fr}
}

/* R14: slide 08. The signed Giants jersey is now the full garment, not a crop of the 97, so it
   letterboxes rather than cover-crops. The tweet card carries the real photo from the post. */
#s8 .grow3-hero .grow2-well{height:clamp(260px,42vh,430px)}
#s8 .grow3-hero .grow2-well img{object-fit:contain;object-position:50% 50%}
#s8 .g3-tweetwell .xcard img.xc-media{display:block;width:100%;height:clamp(110px,19vh,190px);max-height:none;object-fit:cover;object-position:50% 22%;border:1px solid rgba(255,255,255,.14);border-radius:10px;margin:10px 0 2px}

@media (min-width:901px) and (max-height:940px){
  #s8 .g3-tweetwell .xcard img.xc-media{height:clamp(92px,14vh,150px);margin:7px 0 2px}
}

/* R15: slide 02 is now a true two-up. Copy left, the concept render right at half the slide
   width. The image sizes from its own 4:3 through aspect-ratio, never height:100% or flex:1. */
#s2 .thesis-shell{justify-content:center}
.t2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,64px);align-items:center;width:100%}
.t2-copy,.t2-fig{min-width:0}
.t2-fig{margin:0}
.t2-shot img{display:block;width:100%;aspect-ratio:4/3;max-height:62vh;object-fit:cover;object-position:50% 46%;border:1px solid var(--nline);border-radius:6px}
.t2-fig .fig-cap{margin-top:clamp(8px,1.2vh,13px)}
@media (min-width:901px) and (max-height:940px){
  .t2{gap:clamp(20px,2.6vw,44px)}
  .t2-shot img{max-height:56vh}
}
@media (max-width:900px){ .t2{grid-template-columns:1fr;gap:20px} }

/* R16: slide 04 order is team / product / house / talent / content, so the per-tile framing
   moved with it. Position 03 is the house render, 05 is the video. */
#s4 .place:nth-child(1) .place-img img{object-position:50% 50%}
#s4 .place:nth-child(2) .place-img img{object-position:50% 50%}
#s4 .place:nth-child(3) .place-img img{object-position:44% 50%}
#s4 .place:nth-child(4) .place-img img{object-position:50% 50%}
/* slide 08 left column is the collaborative Instagram post again */
#s8 .igc{align-self:start}
#s8 .igc-shot{aspect-ratio:auto;height:clamp(200px,30vh,320px);background:#B0ACAD}
#s8 .igc-shot img{object-fit:contain;object-position:50% 50%}
#s8 .igc{max-width:100%;min-width:0}
#s8 .igc-head{min-width:0}
@media (max-width:900px){ #s8 .igc-id b{white-space:normal;overflow:visible;text-overflow:clip} }

/* R17: slide 08 socials read as a matched pair and both cards are clickable.
   The Instagram card is now an anchor (a.ui.igc -> Agent's real profile), so its
   inner blocks are spans and need explicit display. The card carries Instagram's
   engagement furniture (likes line naming accounts, comments line, relative
   timestamp) plus a Concept fig-cap because the post has not run. Appended last
   on purpose: earlier max-height media blocks would otherwise win. */
#s8 .g3 .mlabel{margin-bottom:clamp(10px,1.6vh,14px)}
#s8 .igfig{margin:0;min-width:0}
#s8 a.igc{display:block;color:#101012;text-decoration:none;max-width:clamp(320px,27vw,420px)}
#s8 .igc-shot,#s8 .igc-likes,#s8 .igc-cap,#s8 .igc-cmts,#s8 .igc-time{display:block}
#s8 .igc-id{display:block}
#s8 .igc-id b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
#s8 .igc-likes{font-size:11.5px;line-height:1.4;padding:6px 13px 0;color:#101012}
#s8 .igc-likes b{font-weight:600}
#s8 .igc-cap{padding:4px 13px 0}
#s8 .igc-cmts{font-size:11.5px;line-height:1.4;padding:3px 13px 0;color:#6b6d72}
#s8 .igc-time{font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px 12px;color:#8e9095}
#s8 .igfig .fig-cap{margin-top:clamp(8px,1.4vh,12px)}
#s8 .g3-steps{margin-top:clamp(8px,1.6vh,16px)}
/* matched pair: same top line (mlabel then card in both columns), comparable widths */
#s8 .g3-proofrow{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:start}
#s8 .igc-shot{height:clamp(140px,20vh,240px)}
#s8 .igc-shot img{max-height:none}
/* shared, quiet click affordance on both cards */
#s8 a.igc,#s8 .xcard{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#s8 a.igc:hover,#s8 a.igc:focus-visible{transform:translateY(-2px);box-shadow:0 18px 44px rgba(10,10,9,.16)}
#s8 .xcard:hover,#s8 .xcard:focus-visible{transform:translateY(-2px);box-shadow:0 18px 44px rgba(10,10,9,.22);border-color:#3f4448}
@media (min-width:901px) and (max-height:940px){
  #s8 .igc-shot{height:clamp(84px,11.5vh,160px)}
  #s8 .igc-likes,#s8 .igc-cmts{font-size:11px;padding-top:4px}
  #s8 .igc-cap{padding-top:3px}
  #s8 .igc-time{padding-bottom:10px}
  #s8 .g3-steps{margin-top:8px}
  #s8 .g3-steps li{padding:4px 0}
}
@media (max-width:900px){
  #s8 .grow3{grid-template-columns:1fr} /* the id-specific desktop split was beating the generic 900px stack rule */
  #s8 a.igc{max-width:100%}
  #s8 .g3-proofrow{grid-template-columns:1fr}
  #s8 .igc-shot{height:clamp(200px,30vh,320px)}
}