/* ==========================================================================
   CREATIVE STRATEGIST

   One page, one job: show a founder that the person who would own their
   creative has already run the whole lifecycle on his own offer, with his
   own money, and kept every asset on brand. So the page is built from the
   work itself. The hero is the ad library in three dimensions: the camera
   starts on one ad, close enough to read, and the scroll pulls back until
   the whole library is in view. Then the ads go where ads actually live,
   inside a phone and a laptop, with the copy that ran.

   Loaded after altitude.css and frameworks.css, and only by this page.
   The motion rule holds here too: nothing in this file hides content. The
   hero is CSS sticky and falls back to a flat wall with no WebGL, the rail
   is a swipeable row without GSAP, and every effect starts from a state
   that reads.
   ========================================================================== */

/* ---------- hero: the library, sticky, with captions scrolling over it ---- */
.csh{position:relative;isolation:isolate;background:var(--rock)}
.lib{position:sticky;top:0;z-index:0;height:100vh;height:100svh;overflow:hidden}
.lib__gl{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.lib__gl canvas{display:block;width:100%;height:100%}
.lib.has-webgl .lib__gl{opacity:1}

/* the flat wall is the fallback, and what shows until WebGL is ready */
.lib__flat{position:absolute;top:-8%;bottom:-8%;right:-4%;width:min(62vw,860px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,auto);grid-auto-flow:dense;gap:12px;
  transform:perspective(1600px) rotateY(-24deg) rotateX(9deg) rotateZ(-5deg);transform-origin:70% 50%;
  opacity:.55;transition:opacity .8s var(--ease),visibility 0s linear .8s}
.lib__flat img{width:100%;height:100%;object-fit:cover;border:1px solid var(--granite)}
.lib__flat img[height="480"]{grid-row:span 2}
.lib.has-webgl .lib__flat{opacity:0;visibility:hidden}

.lib::after{                                    /* keeps the words legible over the library */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,rgba(18,16,13,.96) 0%,rgba(18,16,13,.86) 36%,rgba(18,16,13,.5) 50%,rgba(18,16,13,.06) 64%,rgba(18,16,13,0) 100%),
    linear-gradient(0deg,rgba(18,16,13,.92) 0%,rgba(18,16,13,0) 24%),
    linear-gradient(180deg,rgba(18,16,13,.7) 0%,rgba(18,16,13,0) 16%);
}
.lib__read{position:absolute;right:calc(var(--pad) + 150px);bottom:24px;z-index:3;display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-2)}
.lib__read b{font-size:1.05rem;letter-spacing:.04em;color:var(--bone);font-variant-numeric:tabular-nums;min-width:2.4ch;text-align:right}
.lib:not(.has-webgl) .lib__read{display:none}
.lib__ctl{position:absolute;right:var(--pad);bottom:22px;z-index:3;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash-2);padding:8px 0;transition:color var(--d-micro) linear}
.lib__ctl:hover{color:var(--summit)}
.lib:not(.has-webgl) .lib__ctl{display:none}

.csh__caps{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh}
.csh__cap{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:96px 60px}
.csh__cap > .wrap > *{max-width:min(100%,640px)}
.csh__cap h1{font-size:clamp(2.1rem,4.3vw,3.7rem);max-width:17ch}
.csh__cap h2{font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;
  font-size:clamp(1.9rem,4vw,3.3rem);line-height:1.04;letter-spacing:-.018em;max-width:14ch;color:var(--bone)}
.csh__cap .lead{margin-top:24px}
.csh__n{display:flex;align-items:center;gap:12px;color:var(--summit);margin-bottom:22px}
.csh__n::before{content:"";width:34px;height:1px;background:var(--summit)}
.csh__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.csh__note{display:flex;align-items:center;gap:12px;color:var(--ash-2);margin-top:24px}
.csh__note::before{content:"";width:22px;height:1px;background:var(--granite-2);flex:0 0 22px}
.csh__cue{display:inline-flex;align-items:center;gap:10px;margin-top:38px;color:var(--ash);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase}
.csh__cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--summit),transparent);
  animation:cs-cue 2.2s var(--ease) infinite;transform-origin:top}
@keyframes cs-cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.csh [data-in]{animation:enter var(--d-enter) var(--spring-gentle) both;animation-delay:calc(var(--i,0) * 70ms)}

/* ---------- 01 · the stakes ------------------------------------------------ */
.stk{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,84px);align-items:center}
.stk__l{display:grid;gap:1px;background:var(--granite);border:1px solid var(--granite)}
.stk__l li{background:var(--rock);padding:clamp(20px,2.6vw,32px);transition:background var(--d-ui) var(--spring-gentle)}
.stk__l li:hover{background:var(--slate)}
.stk__l .data{display:block;color:var(--summit);font-size:.62rem;margin-bottom:10px}
.stk__l h3{font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;font-size:clamp(1.22rem,1.9vw,1.55rem);
  line-height:1.14;color:var(--bone);margin-bottom:10px}
.stk__l p{color:var(--ash);line-height:1.62}

/* the receipt: thermal paper, printed as it arrives */
.rcpt{position:relative;margin:0;justify-self:center;width:min(100%,360px);transform:rotate(-2.2deg)}
.rcpt::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:40px;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.7),transparent 72%);filter:blur(8px)}
.rcpt__paper{
  --zz:14px;
  --mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--zz) 51% repeat-x,
         conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--zz) 51% repeat-x;
  -webkit-mask:var(--mask);mask:var(--mask);
  background:linear-gradient(180deg,#F3EFE5 0%,#ECE7DB 100%);color:#1B1814;
  padding:36px 26px 34px;font-family:var(--mono);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.5}
.rcpt__h{text-align:center;font-weight:700;letter-spacing:.14em;padding-bottom:10px;border-bottom:1px dashed #9C9486}
.rcpt__s{text-align:center;color:#5A5247;font-size:.66rem;padding:8px 0 12px}
.rcpt__l div{display:flex;align-items:baseline;gap:8px;padding:5px 0}
.rcpt__l div::after{content:"";flex:1;order:1;border-bottom:1px dotted #A69E90;transform:translateY(-4px)}
.rcpt__l dt{order:0;flex:0 0 auto}
.rcpt__l dd{order:2;font-weight:700}
.rcpt__t{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding:12px 0;
  border-top:1px dashed #9C9486;border-bottom:1px dashed #9C9486;font-weight:700;font-size:.86rem;letter-spacing:.1em}
.rcpt__t b{color:#8A5A00}
.rcpt__f{margin-top:14px;text-align:center;font-size:.62rem;line-height:1.6;color:#5A5247;text-transform:none;letter-spacing:.04em}
.rcpt__bc{height:34px;margin:16px auto 0;width:78%;
  background:repeating-linear-gradient(90deg,#1B1814 0 2px,transparent 2px 4px,#1B1814 4px 5px,transparent 5px 8px,#1B1814 8px 11px,transparent 11px 13px)}

/* ---------- 02 · the case: the stage map ----------------------------------- */

.smap__dl{margin-top:20px;border-top:1px solid var(--granite)}
.smap__dl div{display:grid;grid-template-columns:11ch 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--granite)}
.smap__dl dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ash-2);padding-top:4px}
.smap__dl dd{color:var(--bone);font-size:.97rem;line-height:1.45}

/* ---------- 03 · the showroom ---------------------------------------------- */
.show__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:16px}
.show__modes{display:inline-flex;flex-wrap:wrap;gap:1px;background:var(--granite);border:1px solid var(--granite)}
.show__mode{padding:14px 18px 13px;background:var(--rock);border-top:2px solid transparent;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash);
  transition:background var(--d-ui) var(--spring-gentle),color var(--d-ui) linear,border-color var(--d-ui) linear}
.show__mode b{margin-left:8px;color:var(--ash-2);font-weight:700}
.show__mode:hover{color:var(--bone)}
.show__mode[aria-selected="true"]{background:var(--crag);color:var(--bone);border-top-color:var(--summit)}
.show__mode[aria-selected="true"] b{color:var(--summit)}
.show__hint{color:var(--ash-2);font-size:.62rem}


.show__stage{position:relative;margin-top:clamp(18px,2.6vw,34px);padding-bottom:clamp(8px,1.6vw,20px);
  perspective:2400px;perspective-origin:50% 20%}
.show__stage::before{content:"";position:absolute;left:10%;right:10%;bottom:-2%;height:30%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 60%,rgba(242,163,12,.1),transparent 70%)}

/* the laptop: space black, lid on a hinge so it can open on scroll */
.mac{position:relative;width:77%;transform-style:preserve-3d;will-change:transform}
.mac__lid{position:relative;transform-origin:50% 100%;transform-style:preserve-3d;will-change:transform}
.mac__face{position:relative;aspect-ratio:1.545/1;background:#060606;border-radius:3%/4.6%;
  box-shadow:0 0 0 1.5px #47474d,0 0 0 2.5px #19191c,0 0 0 3px #2c2c30;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mac__screen{position:absolute;top:3.1%;left:2.1%;right:2.1%;bottom:3.6%;border-radius:.5%/.8%;overflow:hidden;background:#000;container-type:inline-size}
.mac__cam{position:absolute;top:0;left:50%;z-index:3;transform:translateX(-50%);width:10.5%;height:5.4%;background:#060606;border-radius:0 0 12px 12px}
.mac__cam::after{content:"";position:absolute;left:50%;top:38%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#15171c;box-shadow:inset 0 0 0 1.5px #0c0d10}
.mac__back{position:absolute;inset:0;border-radius:3%/4.6%;background:linear-gradient(180deg,#303035 0%,#1f1f23 100%);
  box-shadow:inset 0 0 0 1.5px #3e3e44;transform:rotateX(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mac__back i{position:absolute;left:50%;top:50%;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#3a3a40 0%,#2a2a2f 70%)}
.mac__base{position:relative;width:117%;margin-left:-8.5%;height:0;padding-bottom:3.1%;
  background:linear-gradient(180deg,#6a6a70 0%,#3a3a3f 22%,#1f1f23 70%,#141417 100%);
  border-radius:1px 1px 44% 44% / 1px 1px 100% 100%;box-shadow:0 34px 50px -20px rgba(0,0,0,.9)}
.mac__base i{position:absolute;left:50%;top:0;width:15%;height:42%;transform:translateX(-50%);border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#141417,#2b2b30)}

/* the phone: titanium band, black bezel, dynamic island */
.phone{position:absolute;right:.5%;bottom:0;z-index:3;width:23%;aspect-ratio:9/19.5;padding:1.3%;border-radius:17.5%/8%;
  background:linear-gradient(135deg,#8a8a90 0%,#3b3b40 16%,#232327 50%,#35353a 84%,#8c8c92 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 50px 70px -28px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.55);
  transform-style:preserve-3d;will-change:transform}
.phone__frame{position:relative;height:100%;border-radius:16.4%/7.5%;background:#000;padding:3.4%;box-shadow:inset 0 0 0 1px #0a0a0a}
.phone__screen{position:relative;height:100%;border-radius:13.6%/6.2%;overflow:hidden;background:#000;container-type:inline-size;isolation:isolate}
.phone__island{position:absolute;top:1.55%;left:50%;z-index:30;width:31%;height:4%;transform:translateX(-50%);background:#000;border-radius:999px}
.phone__btn{position:absolute;width:1.3%;background:linear-gradient(90deg,#55555b,#2a2a2e);border-radius:2px}
.phone__btn--a{left:-1.1%;top:17%;height:3.8%}
.phone__btn--v1{left:-1.1%;top:24.5%;height:7%}
.phone__btn--v2{left:-1.1%;top:33%;height:7%}
.phone__btn--p{right:-1.1%;top:27%;height:11%}

/* inside the screens: an Instagram-style interface, drawn in system type */
.igd,.igm,.reel{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#F5F5F5;background:#000;letter-spacing:0;line-height:1.3;-webkit-font-smoothing:antialiased}
.igd svg,.igm svg,.reel svg{display:block;width:100%;height:100%}
.show[data-mode="static"] .reel,.show[data-mode="video"] .igm{display:none}

/* the post, shared by laptop and phone. It is its own container, so every
   size inside it is a share of the post's width, the way Instagram scales */
.igp{container-type:inline-size;background:#000}
.igp__h{display:flex;align-items:center;gap:2.8cqw;padding:2.6cqw 3.2cqw}
.igp__av{width:8.4cqw;height:8.4cqw;border-radius:50%;object-fit:cover;flex:0 0 auto}
.igp__who{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.22}
.igp__who b{font-weight:600;font-size:3.4cqw}
.igp__who span{font-size:3cqw;color:#A8A8A8}
.igp__more{width:5.4cqw;height:5.4cqw;color:#F5F5F5}
.igp__m{position:relative;overflow:hidden;background:#101010;aspect-ratio:var(--ar,1)}
.igp__m video,.igp__m > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.car{position:absolute;inset:0}
.car__t{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.car__t::-webkit-scrollbar{display:none}
.car__t img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always;user-select:none;-webkit-user-drag:none}
.car__c{position:absolute;top:3cqw;right:3cqw;padding:1cqw 2.4cqw;border-radius:99px;background:rgba(22,22,22,.78);
  font-size:2.9cqw;font-weight:600;color:#fff;pointer-events:none}
.car__b{position:absolute;top:50%;width:7.4cqw;height:7.4cqw;margin-top:-3.7cqw;padding:1.6cqw;border-radius:50%;
  background:rgba(250,250,250,.88);color:#121212;opacity:0;transition:opacity .2s linear,transform .2s var(--spring-stiff)}
.car__b--p{left:2.6cqw}.car__b--n{right:2.6cqw}
.igp__m:hover .car__b,.car__b:focus-visible{opacity:1}
.car__b:hover{transform:scale(1.08)}
.car__b[disabled]{opacity:0 !important;pointer-events:none}
.igp__snd{position:absolute;right:3cqw;bottom:3cqw;width:6.6cqw;height:6.6cqw;padding:1.5cqw;border-radius:50%;background:rgba(22,22,22,.78);color:#fff;pointer-events:none}
.igp__cta{display:flex;align-items:center;justify-content:space-between;padding:2.8cqw 3.2cqw;background:#121212;border-bottom:1px solid #262626;
  font-size:3.3cqw;font-weight:600;color:#F5F5F5}
.igp__cta i{width:4.4cqw;height:4.4cqw}
.igp__a{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:2.8cqw 3.2cqw 1.6cqw}
.igp__a > span{display:flex;gap:4cqw}
.igp__a > span:last-child{justify-content:flex-end}
.igp__a i{display:block;width:6.4cqw;height:6.4cqw}
.igp__dots{display:flex;gap:1.1cqw}
.igp__dots b{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#4A4A4A;transition:background .2s linear}
.igp__dots b.is-on{background:#0095F6}
.igp__cap{padding:0 3.2cqw;font-size:3.3cqw;line-height:1.4}
.igp__cap p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.igp__cap p b{font-weight:600;margin-right:1.2cqw}
.igp.is-open .igp__cap p{display:block;-webkit-line-clamp:unset}
.igp__cap button{padding:0;margin-top:.6cqw;color:#A8A8A8;font-size:3.3cqw}
.igp.is-open .igp__cap button{display:none}
.igp__time{padding:1.8cqw 3.2cqw 4cqw;font-size:2.6cqw;color:#A8A8A8;text-transform:uppercase;letter-spacing:.02em}

/* laptop: the desktop feed */
.igd{position:absolute;inset:0;display:grid;grid-template-columns:17.5% minmax(0,1fr) 25%;font-size:1.05cqw}
.igd__nav{display:flex;flex-direction:column;gap:.35cqw;padding:2.6cqw 1.1cqw;border-right:1px solid #262626}
.igd__logo{display:flex;align-items:center;gap:1cqw;padding:0 1cqw;margin-bottom:2cqw;font-weight:700;font-size:1.3cqw}
.igd__logo i{width:2.1cqw;height:2.1cqw}
.igd__nav span{display:flex;align-items:center;gap:1.3cqw;padding:.95cqw 1cqw;border-radius:.6cqw;font-size:1.12cqw}
.igd__nav span.is-on{font-weight:700}
.igd__nav span i{width:1.95cqw;height:1.95cqw;flex:0 0 auto}
.igd__nav .av{width:1.95cqw;height:1.95cqw;border-radius:50%;object-fit:cover}
.igd__feed{overflow-y:auto;scrollbar-width:none;padding:2.2cqw 0 4cqw;display:flex;flex-direction:column;align-items:center;overscroll-behavior:contain}
.igd__feed::-webkit-scrollbar{display:none}
.igd__stories{display:flex;gap:1.6cqw;width:40cqw;margin-bottom:2.4cqw}
.igd__stories i{flex:0 0 5.2cqw;height:5.2cqw;border-radius:50%;background:#262626;box-shadow:0 0 0 .22cqw #000,0 0 0 .42cqw #363636}
.igd__feed .igp{width:37cqw;flex:0 0 auto;border-bottom:1px solid #262626}
.igd__feed .igp__m{border-radius:.5cqw}
.igd__ghost{width:37cqw;flex:0 0 auto;margin-top:2cqw}
.igd__ghost i{display:block;height:2.6cqw;width:40%;border-radius:.4cqw;background:#1c1c1c;margin:0 0 1.4cqw 0}
.igd__ghost i:first-child{width:22%}
.igd__ghost b{display:block;aspect-ratio:1;border-radius:.5cqw;background:#121212}
.igd__side{padding:3.4cqw 2.6cqw 0 1.2cqw}
.igd__me{display:flex;align-items:center;gap:1.1cqw;margin-bottom:2.4cqw}
.igd__me img{width:3.9cqw;height:3.9cqw;border-radius:50%;object-fit:cover}
.igd__me p{display:flex;flex-direction:column;line-height:1.25;font-size:1.05cqw}
.igd__me p b{font-weight:600}
.igd__me p span{color:#A8A8A8}
.igd__sug{color:#A8A8A8;font-weight:600;font-size:1.05cqw;margin-bottom:1.6cqw}
.igd__row{display:flex;align-items:center;gap:1.1cqw;margin-bottom:1.5cqw}
.igd__row i{flex:0 0 3cqw;height:3cqw;border-radius:50%;background:#1f1f1f}
.igd__row span{flex:1;display:flex;flex-direction:column;gap:.5cqw}
.igd__row span b{display:block;height:.9cqw;width:70%;border-radius:.3cqw;background:#1f1f1f}
.igd__row span b + b{width:45%;background:#171717}

/* phone: the status bar, the mobile feed, the tab bar */
.sb{flex:0 0 auto;height:13cqw;display:flex;align-items:center;justify-content:space-between;padding:2.2cqw 7cqw 0 9.5cqw;
  font-weight:600;font-size:3.9cqw;position:relative;z-index:5}
.sb span{display:flex;gap:1.5cqw;align-items:center}
.sb i{display:block;height:3.4cqw}
.sb i.sig{width:5cqw}.sb i.wifi{width:4.6cqw}.sb i.bat{width:7cqw}
.igm{position:absolute;inset:0;display:flex;flex-direction:column}
.igm__top{flex:0 0 auto;height:11cqw;display:flex;align-items:center;justify-content:space-between;padding:0 4cqw}
.igm__top b{font-size:5.4cqw;font-weight:700;letter-spacing:-.01em}
.igm__top span{display:flex;gap:5cqw}
.igm__top i{width:6.4cqw;height:6.4cqw}
.igm__st{flex:0 0 auto;display:flex;gap:3.6cqw;padding:1.6cqw 4cqw 3cqw;overflow:hidden;border-bottom:1px solid #1a1a1a}
.igm__st i{flex:0 0 16.5cqw;height:16.5cqw;border-radius:50%;background:#232323;box-shadow:0 0 0 .8cqw #000,0 0 0 1.4cqw #3a3a3a}
.igm__st i:first-child{background:#232323 url("/assets/img/cs/av.webp") center/cover;box-shadow:0 0 0 .8cqw #000,0 0 0 1.4cqw #F2A30C}
.igm__feed{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.igm__feed::-webkit-scrollbar{display:none}
.tabbar{flex:0 0 auto;position:relative;height:19cqw;display:flex;justify-content:space-around;align-items:flex-start;padding:3cqw 3cqw 0;
  background:#000;border-top:1px solid #1d1d1d}
.tabbar i{width:6.6cqw;height:6.6cqw}
.tabbar img{width:6.6cqw;height:6.6cqw;border-radius:50%;object-fit:cover}
.tabbar::after{content:"";position:absolute;left:50%;bottom:2.2cqw;width:35cqw;height:1.3cqw;margin-left:-17.5cqw;border-radius:99px;background:#F5F5F5}

/* phone: Reels and Stories */
.reel{position:absolute;inset:0;display:flex;flex-direction:column}
.reel__v{position:relative;flex:1;min-height:0;overflow:hidden;background:#0d0d0d}
.reel__v video,.reel__v .reel__po{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__g{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.66),rgba(0,0,0,0))}
.reel__top{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:3cqw 4.4cqw;
  font-weight:700;font-size:5.4cqw;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.reel__top i{width:6.6cqw;height:6.6cqw}
.reel__side{position:absolute;right:2.8cqw;bottom:6cqw;z-index:4;display:flex;flex-direction:column;align-items:center;gap:5.4cqw}
.reel__side i{width:7.2cqw;height:7.2cqw;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.reel__side img{width:7cqw;height:7cqw;border-radius:1.6cqw;object-fit:cover;box-shadow:0 0 0 .5cqw #F5F5F5}
.reel__meta{position:absolute;left:3.8cqw;right:15cqw;bottom:4.6cqw;z-index:4}
.reel__who{display:flex;align-items:center;gap:2.2cqw;font-weight:600;font-size:3.6cqw}
.reel__who img{width:7.6cqw;height:7.6cqw;border-radius:50%;object-fit:cover}
.reel__who em{font-style:normal;font-weight:400;font-size:3cqw;opacity:.85}
.reel__cap{margin-top:2.2cqw;font-size:3.4cqw;line-height:1.36;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,.4)}
.reel__cta{margin-top:3cqw;display:flex;justify-content:space-between;align-items:center;padding:2.8cqw 3.4cqw;border-radius:2cqw;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:600;font-size:3.5cqw}
.reel__cta i{width:4.4cqw;height:4.4cqw}
.story{position:absolute;inset:0;z-index:4;display:none;pointer-events:none}
.story__bars{position:absolute;top:2.4cqw;left:2.6cqw;right:2.6cqw;display:flex;gap:1cqw}
.story__bars b{flex:1;height:.7cqw;border-radius:99px;background:rgba(255,255,255,.35);overflow:hidden}
.story__bars b i{display:block;height:100%;width:0;background:#fff}
.story__bars b.is-done i{width:100%}
.story__h{position:absolute;top:5.4cqw;left:3.4cqw;right:3.4cqw;display:flex;align-items:center;gap:2.2cqw;font-weight:600;font-size:3.5cqw;
  text-shadow:0 1px 3px rgba(0,0,0,.4)}
.story__h img{width:7.8cqw;height:7.8cqw;border-radius:50%;object-fit:cover}
.story__h em{font-style:normal;font-weight:400;font-size:3cqw;opacity:.85;flex:1}
.story__h i{width:6cqw;height:6cqw}
.story__cta{position:absolute;left:50%;bottom:6cqw;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1.2cqw}
.story__cta i{width:5cqw;height:5cqw;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.story__cta span{padding:2.4cqw 5cqw;border-radius:99px;background:#fff;color:#111;font-weight:600;font-size:3.5cqw;white-space:nowrap}
.story__rep{display:none;flex:1;min-height:0;align-items:center;gap:3cqw;padding:0 4cqw 7cqw}
.story__rep span{flex:1;height:10cqw;border:1px solid #3a3a3a;border-radius:99px;padding:0 4cqw;display:flex;align-items:center;font-size:3.4cqw;color:#A8A8A8}
.story__rep i{width:6.6cqw;height:6.6cqw}
.show[data-view="stories"] .reel__v{flex:0 0 auto;aspect-ratio:9/16;border-radius:3.4cqw}
.show[data-view="stories"] .reel__top,.show[data-view="stories"] .reel__side,.show[data-view="stories"] .reel__meta,
.show[data-view="stories"] .reel .tabbar,.show[data-view="stories"] .reel__g{display:none}
.show[data-view="stories"] .story{display:block}
.show[data-view="stories"] .story__rep{display:flex}

/* Meta's interface zones, drawn over the frame: no text may sit in them */
.zn{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .35s var(--ease)}
.show.is-zones .zn{opacity:1}
.zn b{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,rgba(242,84,43,.5) 0 5px,rgba(242,84,43,.18) 5px 10px);
  font:600 2.6cqw/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.zn .zn__t{top:0;height:14%}
.zn .zn__b{bottom:0;height:35%;align-items:flex-start;padding-top:5cqw}
.zn .zn__l,.zn .zn__r{top:14%;bottom:35%;width:6%;left:0;right:auto}
.zn .zn__r{left:auto;right:0}
.zn__ok{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);padding:1.4cqw 3cqw;border-radius:99px;background:rgba(18,16,13,.85);
  border:1px solid var(--summit);font:600 2.5cqw/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--summit);white-space:nowrap}

/* sound on: the full video from YouTube, inside the phone */
.yt{position:absolute;inset:0;z-index:8;background:#000}
.yt__m,.yt__m iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt__m iframe{pointer-events:none}
.yt__hit{position:absolute;inset:0;z-index:1;cursor:pointer}
.yt__x{position:absolute;bottom:5cqw;left:3.4cqw;z-index:2;display:flex;align-items:center;gap:1.6cqw;padding:1.8cqw 3cqw 1.8cqw 2.2cqw;border-radius:99px;
  background:rgba(18,16,13,.82);color:#fff;font:600 2.8cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.yt__x i{width:3.6cqw;height:3.6cqw}
.yt__bar{position:absolute;left:0;right:0;bottom:0;z-index:2;height:1.1cqw;background:rgba(255,255,255,.2)}
.yt__bar i{display:block;height:100%;width:0;background:var(--summit)}

.show__ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 16px;margin-top:clamp(16px,2vw,24px)}
.show[data-mode="static"] .show__ctl{display:none}
.seg{display:inline-flex;gap:1px;background:var(--granite);border:1px solid var(--granite)}
.seg button{padding:11px 16px;background:var(--rock);font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash);
  transition:background var(--d-ui) var(--spring-gentle),color var(--d-ui) linear,box-shadow var(--d-ui) linear}
.seg button:hover{color:var(--bone)}
.seg button[aria-pressed="true"]{background:var(--crag);color:var(--bone);box-shadow:inset 0 2px 0 var(--summit)}
.tgl{display:inline-flex;align-items:center;gap:10px;padding:10px 2px;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash);
  transition:color var(--d-ui) linear}
.tgl i{position:relative;width:30px;height:16px;border-radius:99px;background:var(--granite);transition:background var(--d-ui) var(--spring-gentle)}
.tgl i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--ash);transition:transform var(--d-ui) var(--spring-stiff),background var(--d-ui) linear}
.tgl:hover{color:var(--bone)}
.tgl[aria-pressed="true"]{color:var(--bone)}
.tgl[aria-pressed="true"] i{background:rgba(242,163,12,.3)}
.tgl[aria-pressed="true"] i::after{transform:translateX(14px);background:var(--summit)}
.show__sound{padding:12px 20px}
.show__sound[aria-pressed="true"]{background:var(--crag);color:var(--summit);box-shadow:inset 0 0 0 1px var(--summit)}

/* the brief beside every ad */
.adbrief{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:1px;background:var(--granite);border:1px solid var(--granite);margin-top:clamp(22px,3vw,36px)}
.adb__a{background:var(--slate);padding:clamp(20px,2.6vw,34px)}
.adb__b{background:var(--rock);padding:clamp(20px,2.6vw,34px);display:flex;flex-direction:column;min-width:0}
.adb__code{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--summit);margin-bottom:10px}
.adb__name{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 700;font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.1;color:var(--bone);margin-bottom:14px}
.adb__why{color:var(--ash);line-height:1.62;margin-bottom:18px;max-width:52ch}
.adb__dl{border-top:1px solid var(--granite)}
.adb__dl div{display:grid;grid-template-columns:10ch 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--granite)}
.adb__dl dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ash-2);padding-top:4px}
.adb__dl dd{color:var(--bone);font-size:.96rem;line-height:1.45}
.adb__dl a{color:var(--summit);border-bottom:1px solid rgba(242,163,12,.35)}
.adb__dl a:hover{border-color:var(--summit)}
.adb__lbl{color:var(--ash-2);margin-bottom:14px;display:flex;align-items:center;gap:10px;font-size:.62rem}
.adb__lbl::after{content:"";flex:1;height:1px;background:var(--granite)}
.adb__pt{flex:1;max-height:360px;overflow-y:auto;padding-right:12px;scrollbar-width:thin;scrollbar-color:var(--granite-2) transparent;
  -webkit-mask:linear-gradient(180deg,#000 88%,transparent);mask:linear-gradient(180deg,#000 88%,transparent);padding-bottom:30px}
.adb__pt p{color:var(--bone);font-size:.98rem;line-height:1.55;white-space:pre-line}
.adb__pt p + p{margin-top:.62em}

/* ---------- 04 · the lifecycle: five owners, or one ------------------------ */
.chain{border:1px solid var(--granite);background:var(--slate);padding:clamp(20px,3vw,38px)}
.chain__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 26px;margin-bottom:clamp(26px,3.4vw,42px)}
.chain__say{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);display:flex;align-items:baseline;gap:10px;max-width:46ch}
.chain__say b{font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;font-size:2.2rem;line-height:.8;letter-spacing:-.02em;color:var(--flare);
  font-variant-numeric:tabular-nums;transition:color .4s var(--ease)}
.chain[data-mode="one"] .chain__say b{color:var(--summit)}
.chain__row{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
.chain__row li{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.chain__row li[data-o="a"]{--c:#8E877A}.chain__row li[data-o="b"]{--c:#BDB4A4}.chain__row li[data-o="c"]{--c:#6E675B}
.chain__row li[data-o="d"]{--c:#A69D8C}.chain__row li[data-o="e"]{--c:#CFC8BA}
.chain__row li i{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--slate);border:2px solid var(--c);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--spring-wobbly)}
.chain__row li b{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);font-weight:500}
.chain__row li + li::before{content:"";position:absolute;top:7px;right:50%;width:100%;height:2px;background:var(--c);transition:background .5s var(--ease)}
.chain[data-mode="many"] .chain__row li.is-cut::before{background:repeating-linear-gradient(90deg,var(--flare) 0 6px,transparent 6px 12px)}
.chain__row li.is-cut::after{content:"\00D7";position:absolute;top:-3px;left:0;z-index:2;transform:translateX(-50%);padding:0 4px;background:var(--slate);
  font-family:var(--mono);font-size:.95rem;line-height:1;color:var(--flare);transition:opacity .35s var(--ease),transform .45s var(--spring-stiff)}
.chain[data-mode="one"] .chain__row li i{border-color:var(--summit);background:var(--summit);transform:scale(1.08)}
.chain[data-mode="one"] .chain__row li + li::before{background:var(--summit)}
.chain[data-mode="one"] .chain__row li.is-cut::after{opacity:0;transform:translateX(-50%) scale(.3)}
.chain__own{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin-top:20px}
.chain__own span{grid-column:var(--a)/var(--b);margin:0 6px;padding-top:10px;border-top:1px solid var(--granite-2);text-align:center;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2)}
.chain__own--one span{border-top-color:var(--summit);color:var(--summit)}
.chain[data-mode="many"] .chain__own--one,.chain[data-mode="one"] .chain__own--many{display:none}
.chain [data-mode="one"][aria-pressed="false"]{animation:cs-nudge 2.6s var(--ease) 1.2s 3}
@keyframes cs-nudge{0%,100%{color:var(--ash)}50%{color:var(--summit)}}

.rail8__lead{margin-top:clamp(40px,5vw,64px);margin-bottom:clamp(22px,3vw,34px);color:var(--ash);font-size:var(--fs-lead);line-height:1.5;max-width:60ch}
.rail8__lead b{color:var(--bone);font-weight:600}

/* the rail itself, the same machine as the blind spot page's five moves */
.rail5{position:relative}
.rail5__view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail5__view::-webkit-scrollbar{display:none}
.rail5.is-pinned .rail5__view{overflow:visible;scroll-snap-type:none}
.rail5__track{display:flex;gap:clamp(14px,1.6vw,22px);padding-inline:var(--pad);width:max-content}
.move{flex:0 0 min(86vw,560px);scroll-snap-align:center;border:1px solid var(--granite);background:var(--slate);
  padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;min-height:min(72vh,640px)}
.move__n{font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;font-size:clamp(2.8rem,5vw,4.2rem);line-height:.86;
  color:var(--granite-2);transition:color .5s var(--ease)}
.move.is-on .move__n,html:not(.has-gsap) .move__n,.rail5:not(.is-pinned) .move__n{color:var(--summit)}
.move h3{margin-top:10px;font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.1;color:var(--bone);max-width:20ch}
.rail5__bar{height:2px;background:var(--granite);margin:clamp(20px,2.4vw,30px) var(--pad) 0;overflow:hidden}
.rail5__bar i{display:block;height:100%;background:var(--summit);transform-origin:left center;transform:scaleX(.12)}
html:not(.has-gsap) .rail5__bar,.rail5:not(.is-pinned) .rail5__bar{display:none}
.rail5__hint{margin:14px var(--pad) 0;color:var(--ash-2);font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.rail5.is-pinned .rail5__hint{display:none}
.rail8{padding-bottom:4px}

.st__k{margin-top:14px;color:var(--summit);font-size:.62rem}
.st__fig{margin-top:18px;min-height:128px;border:1px solid var(--granite);background:var(--rock);padding:16px 18px;
  display:flex;flex-direction:column;justify-content:center;gap:10px}
.st__p{margin-top:18px;margin-bottom:18px;color:var(--ash);font-size:.97rem;line-height:1.6}
.st__you{margin-top:auto;padding-top:14px;border-top:1px solid var(--granite);color:var(--bone);font-size:.95rem;line-height:1.55}
.st__you b{display:block;margin-bottom:6px;font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--summit)}

.st__fig--idea{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.st__fig--idea .stnote{max-width:24ch;padding:12px 14px;background:var(--paper);color:var(--ink);transform:rotate(-2.5deg);
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 600;font-size:.98rem;line-height:1.3;box-shadow:0 10px 18px -8px rgba(0,0,0,.6)}
.st__fig--idea .sttags{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.st__fig--idea .sttags span{padding:5px 9px;border:1px solid var(--granite-2);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone)}
.st__fig--idea .sttags span:first-child{border-color:var(--summit);color:var(--summit)}
.st__fig--facts p{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone)}
.st__fig--facts p i{width:14px;height:14px;flex:0 0 14px;border:1px solid var(--summit);position:relative}
.st__fig--facts p i::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border-right:2px solid var(--summit);border-bottom:2px solid var(--summit);transform:rotate(40deg)}
.st__fig--facts p s{color:var(--flare);text-decoration-thickness:2px}
.st__fig--facts p b{color:var(--summit);font-weight:700}
.st__fig--script{gap:6px;border-left:2px solid var(--summit)}
.st__fig--script p{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--bone);line-height:1.5}
.st__fig--script .scr__t{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-2);margin-bottom:2px}
.st__fig--script .scr__h{margin-top:6px;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2)}
.st__fig--script .scr__h b{display:block;margin-top:3px;font-size:.72rem;letter-spacing:.02em;text-transform:none;color:var(--summit);font-weight:500}
.st__fig--board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;counter-reset:bd}
.st__fig--board img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--granite)}
.beat{position:relative;height:64px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--granite-2)}
.beat i{width:1px;height:14px;background:var(--granite-2)}
.beat i:nth-child(4n+1){height:26px;background:var(--ash-2)}
.beat__c{position:absolute;left:var(--x);top:0;transform:translateX(-50%);padding:3px 6px;border:1px solid var(--summit);
  font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--summit);background:var(--rock)}
.beat__c::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:22px;background:var(--summit)}
.beat__c.is-stop{border-color:var(--ash-2);color:var(--ash)}
.beat__c.is-stop::after{background:var(--ash-2)}
.beat__c.is-big{background:var(--summit);color:#100E0B}
.beat__k{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash-2)}
.beat__mute{color:var(--bone)}
.beat__mute::before{content:"";display:inline-block;width:11px;height:9px;margin-right:6px;vertical-align:-1px;background:var(--bone);
  clip-path:polygon(0 30%,35% 30%,70% 0,70% 100%,35% 70%,0 70%)}
.file{font-family:var(--mono);font-size:.7rem;line-height:2.1;color:var(--ash-2);word-break:break-all;padding-top:10px}
.file span{position:relative;color:var(--bone);border-bottom:2px solid var(--granite-2);padding-bottom:1px;cursor:help;transition:border-color .2s linear,color .2s linear}
.file span:nth-child(1){border-color:#F2A30C}.file span:nth-child(2){border-color:#BDB4A4}.file span:nth-child(3){border-color:#F2A30C}
.file span:hover{color:var(--summit)}
.file span::after{content:attr(data-l);position:absolute;left:50%;bottom:calc(100% + 2px);transform:translate(-50%,4px);white-space:nowrap;
  padding:3px 7px;background:var(--summit);color:#100E0B;font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;
  opacity:0;pointer-events:none;transition:opacity .2s linear,transform .25s var(--spring-stiff)}
.file span:hover::after{opacity:1;transform:translate(-50%,0)}
.plc{display:flex;flex-wrap:wrap;gap:6px}
.plc span{display:flex;align-items:baseline;gap:7px;padding:5px 9px;border:1px solid var(--granite-2);font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.plc b{color:var(--bone);font-weight:700}
.split{display:flex;gap:2px;height:30px}
.split span{flex:var(--w) 1 0;min-width:0;display:flex;align-items:center;padding:0 8px;background:var(--granite);
  font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);white-space:nowrap;overflow:hidden}
.split span.is-on{background:var(--summit);color:#100E0B;font-weight:700}
.split__k{display:flex;gap:2px}
.split__k span{flex:1;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash-2)}
.split__k span:first-child{flex:55 1 0}.split__k span:nth-child(2){flex:20 1 0}.split__k span:nth-child(3){flex:20 1 0}.split__k span:nth-child(4){flex:5 1 0;text-align:right;white-space:nowrap}
.split__k span.is-on{color:var(--summit)}
.cts__eq{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-family:var(--mono);font-size:.9rem;color:var(--ash-2)}
.cts__eq span{color:var(--bone);font-weight:700;font-size:1.05rem}
.cts__eq span.is-low{color:var(--flare)}
.cts__eq b{font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;font-size:2rem;line-height:1;color:var(--summit);margin-left:4px;letter-spacing:-.02em}
.cts__m{position:relative;height:10px;margin-top:10px;background:linear-gradient(90deg,rgba(242,84,43,.55) 0 40%,var(--granite-2) 40% 65%,rgba(242,163,12,.55) 65% 100%)}
.cts__m i{position:absolute;left:var(--x);top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--bone)}
.cts__m span{position:absolute;left:var(--x);top:14px;transform:translateX(-50%);font-family:var(--mono);font-size:.54rem;color:var(--ash-2)}
.cts__k{display:flex;justify-content:space-between;margin-top:20px;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash-2)}
.cts__k span:nth-child(2){color:var(--bone)}

/* ---------- 05 · one brand ------------------------------------------------- */
.pal{display:grid;gap:1px;background:var(--granite);border:1px solid var(--granite);margin-bottom:clamp(30px,4vw,54px)}
.pal__row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);background:var(--rock)}
.pal__n{padding:18px clamp(16px,2vw,26px);display:flex;flex-direction:column;justify-content:center;gap:4px;color:var(--ash);font-size:.93rem;line-height:1.4}
.pal__n b{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;text-transform:uppercase;font-size:1.02rem;letter-spacing:.02em;color:var(--bone)}
.pal__sw{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-height:92px;padding:14px 16px;background:var(--c);
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--bone);box-shadow:inset 1px 0 0 rgba(255,255,255,.04)}
.pal__sw i{font-style:normal;font-weight:500;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.pal__sw.is-lt{color:#12100D}
.pal__f{padding:14px clamp(16px,2vw,26px);background:var(--slate);color:var(--ash-2);font-size:.88rem;line-height:1.55}

.anat{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,4vw,64px);align-items:center;margin-bottom:clamp(40px,5vw,72px)}
.anat__fig{position:relative;margin:0;border:1px solid var(--granite)}
.anat__fig img{width:100%;height:auto;display:block;transition:filter .4s var(--ease)}
.anat__dot{position:absolute;left:var(--x);top:var(--y);z-index:2;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:1px solid var(--summit);background:rgba(18,16,13,.88);color:var(--summit);font-family:var(--mono);font-size:.7rem;font-weight:700;
  display:grid;place-items:center;transition:background var(--d-ui) var(--spring-gentle),color var(--d-ui) linear,transform var(--d-ui) var(--spring-wobbly)}
.anat__dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(242,163,12,.5);opacity:0;transform:scale(.7);transition:opacity .3s,transform .5s var(--spring-gentle)}
.anat__dot:hover,.anat__dot.is-on{background:var(--summit);color:#100E0B;transform:scale(1.1)}
.anat__dot.is-on::after{opacity:1;transform:scale(1);animation:cs-ring 1.8s var(--ease) infinite}
@keyframes cs-ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.anat__k{color:var(--summit);margin-bottom:14px;font-size:.64rem}
.anat__l{border-top:1px solid var(--granite)}
.anat__l li{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:13px 8px 13px 0;border-bottom:1px solid var(--granite);cursor:default;
  color:var(--ash);font-size:.97rem;line-height:1.55;transition:color var(--d-ui) linear,background var(--d-ui) var(--spring-gentle)}
.anat__l li i{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--ash-2);padding-top:3px;transition:color var(--d-ui) linear}
.anat__l li b{display:block;color:var(--bone);font-weight:600;margin-bottom:2px}
.anat__l li.is-on{color:var(--bone)}
.anat__l li.is-on i{color:var(--summit);font-weight:700}

.wall__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 26px;margin-bottom:16px}
.wall__say{color:var(--ash);font-size:1rem;line-height:1.55;max-width:70ch}
.wall{columns:9 96px;column-gap:8px}
.wall li{break-inside:avoid;margin-bottom:8px}
.wall img{width:100%;height:auto;display:block;border:1px solid var(--granite);transition:filter .7s var(--ease),transform .7s var(--spring-gentle)}
.wall.is-squint img{filter:blur(7px) saturate(1.15);transform:scale(.985)}

/* ---------- 06 · the seat -------------------------------------------------- */
.seat{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:1px;background:var(--granite);border:1px solid var(--granite)}
.seat__card{background:var(--slate);padding:clamp(24px,3.2vw,46px);box-shadow:inset 0 2px 0 var(--summit)}
.seat__k{color:var(--ash-2);margin-bottom:14px;font-size:.64rem}
.seat__n{font-family:var(--display);font-variation-settings:"wdth" 114,"wght" 800;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;color:var(--bone)}
.seat__p{margin-top:18px;font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;font-size:clamp(2.6rem,5.4vw,4.2rem);line-height:.92;
  letter-spacing:-.025em;color:var(--summit)}
.seat__p small{display:block;margin-top:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2);font-variation-settings:normal;font-weight:400}
.seat__d{margin-top:18px;color:var(--ash);font-size:1.05rem;line-height:1.6;max-width:52ch}
.seat__l{margin-top:22px;border-top:1px solid var(--granite)}
.seat__l li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--granite);color:var(--ash);font-size:.97rem;line-height:1.55}
.seat__l li::before{content:"";position:absolute;left:0;top:1.28em;width:9px;height:1px;background:var(--summit)}
.seat__l b{color:var(--bone);font-weight:600}
.seat__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.seat__f{margin-top:18px;color:var(--ash-2);font-size:.9rem;line-height:1.6;max-width:60ch}
.seat__arc{background:var(--rock);padding:clamp(24px,3.2vw,46px)}
.seat__t{color:var(--summit);margin-bottom:22px;font-size:.64rem}
.seat__arc li{position:relative;padding:0 0 26px 32px}
.seat__arc li:last-child{padding-bottom:0}
.seat__arc li::before{content:"";position:absolute;left:5px;top:12px;bottom:-4px;width:1px;background:var(--granite-2)}
.seat__arc li:last-child::before{display:none}
.seat__arc li::after{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;border:2px solid var(--granite-2);background:var(--rock);
  transition:border-color .45s var(--ease),background .45s var(--ease)}
.seat__arc li.is-lit::after,html:not(.has-gsap) .seat__arc li::after{border-color:var(--summit);background:var(--summit)}
.seat__arc li:last-child::after{border-radius:0;transform:rotate(45deg)}
.seat__arc .data{display:block;color:var(--ash-2);font-size:.6rem;margin-bottom:6px}
.seat__arc h3{font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 700;text-transform:uppercase;font-size:1.08rem;letter-spacing:.02em;color:var(--bone);margin-bottom:6px}
.has-gsap .seat__arc li:not(.is-lit) h3{color:var(--ash)}
.seat__arc p{color:var(--ash);font-size:.97rem;line-height:1.58}
.fit__col a{color:var(--bone);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--granite-2)}
.fit__col a:hover{text-decoration-color:var(--summit)}

/* ---------- proof ---------------------------------------------------------- */
.vwall--two{grid-template-columns:repeat(2,1fr)}

/* ---------- responsive ----------------------------------------------------- */
@media (max-width:1180px){
  .wall{columns:7 90px}
}
@media (max-width:960px){
  .lib::after{background:linear-gradient(0deg,rgba(18,16,13,.95) 0%,rgba(18,16,13,.84) 50%,rgba(18,16,13,.86) 100%)}
  .mac__base{width:106%;margin-left:-3%}
  .lib__flat{left:-10%;right:-10%;width:auto;opacity:.35;transform:perspective(1400px) rotateX(18deg) rotateZ(-6deg)}
  .lib__ctl{top:70px;bottom:auto}
  .stk,.anat,.seat,.adbrief{grid-template-columns:1fr}
  .stk .rcpt{margin-top:10px}
  .show__stage{display:flex;flex-direction:column-reverse;align-items:center;gap:30px;perspective:1800px}
  .mac{width:100%}
  .phone{position:relative;right:auto;bottom:auto;width:min(66vw,300px)}
  .show__ctl{justify-content:flex-start}
  .pal__row{grid-template-columns:1fr 1fr}
  .pal__n{grid-column:1/-1;padding-bottom:10px}
}
@media (max-width:720px){
  .chain__row{grid-template-columns:1fr;gap:20px;padding-left:2px}
  .chain__row li{flex-direction:row;justify-content:flex-start;gap:14px;text-align:left}
  .chain__row li + li::before{top:auto;right:auto;left:7px;bottom:calc(50% + 2px);width:2px;height:calc(100% + 20px)}
  .chain[data-mode="many"] .chain__row li.is-cut::before{background:repeating-linear-gradient(180deg,var(--flare) 0 5px,transparent 5px 10px)}
  .chain__row li.is-cut::after{left:8px;top:-17px}
  .chain__row li b{font-size:.62rem}
  .chain[data-mode="many"] .chain__row li b::after{content:" \00B7  " attr(data-w);color:var(--ash-2)}
  .chain__own{display:none !important}
  .wall{columns:5 70px}
}
@media (max-width:620px){
  .csh__cap{padding-block:88px 48px}
  .lib__read{display:none}
  .move{min-height:0}
  .vwall--two{grid-template-columns:1fr}
  .show__modes{display:flex;width:100%}
  .show__mode{flex:1 1 auto;padding:12px 12px 11px;font-size:.6rem}
  .st__fig--board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wall{columns:4 64px;column-gap:6px}
  .wall li{margin-bottom:6px}
  .rcpt{transform:rotate(-1.4deg)}
}
@media (prefers-reduced-motion:reduce){
  .csh__cue i,.anat__dot.is-on::after,.chain [data-mode="one"][aria-pressed="false"]{animation:none !important}
  .csh [data-in]{animation:none !important}
  .wall img,.anat__fig img{transition:none}
}

/* the stage tabs are as wide as each state's share of the output */
.smap .xp__tab{flex:var(--w,1) 1 0;min-width:0;white-space:nowrap}
@media (max-width:720px){ .smap .xp__tab{flex:0 0 auto;min-width:96px} }

/* ---------- the hero library can be clicked ------------------------------- */
@media (min-width:961px){
  .csh__caps{pointer-events:none}
  .csh__cap .wrap > *{pointer-events:auto}
}
.lib__tip{position:absolute;right:var(--pad);bottom:58px;z-index:3;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);pointer-events:none}
.lib__tip i{width:8px;height:8px;border-radius:50%;background:var(--summit);animation:cs-ping 2s var(--ease) infinite}
@keyframes cs-ping{0%{box-shadow:0 0 0 0 rgba(242,163,12,.55)}80%,100%{box-shadow:0 0 0 10px rgba(242,163,12,0)}}
.lib:not(.has-webgl) .lib__tip{display:none}

/* ---------- sliders: the stage map and the showroom picker ----------------- */
.sld{margin-top:clamp(24px,3vw,36px)}
.sld__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:16px}
.sld__t{color:var(--ash);font-size:.64rem}
.sld__nav{display:flex;align-items:center;gap:10px}
.sld__b{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--granite-2);color:var(--bone);font-size:1.05rem;
  transition:border-color var(--d-ui) linear,color var(--d-ui) linear,opacity var(--d-ui) linear}
.sld__b:hover{border-color:var(--summit);color:var(--summit)}
.sld__b[disabled]{opacity:.3;pointer-events:none}
.sld__n{min-width:6ch;text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ash);font-variant-numeric:tabular-nums}
.sld__v{display:flex;align-items:flex-start;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
  scrollbar-width:thin;scrollbar-color:var(--granite-2) transparent;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sld__s{flex:0 0 min(420px,78vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;padding:0;text-align:left}
.sld__s img{width:100%;height:auto;display:block;border:1px solid var(--granite);background:var(--crag);
  transition:border-color var(--d-ui) linear,transform .5s var(--spring-gentle)}
.sld__s:hover img,.sld__s:focus-visible img{border-color:var(--summit);transform:translateY(-3px)}
.sld__c{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--summit)}
.sld__c b{color:var(--bone);font-weight:500}
.sld__s.is-v{position:relative}
.sld__s.is-v::before{content:"";position:absolute;left:14px;top:14px;z-index:1;width:40px;height:40px;border-radius:50%;
  background:rgba(18,16,13,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23F2A30C'/%3E%3C/svg%3E") center/22px no-repeat;
  border:1px solid rgba(242,163,12,.7)}

/* the stage map: text and rules across the top, the ads underneath */
.smap__cue{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:16px;color:var(--ash);font-size:1.02rem;line-height:1.5}
.smap__cue b{color:var(--bone);font-weight:600}
.cue__dot{width:9px;height:9px;border-radius:50%;background:var(--summit);animation:cs-ping 2s var(--ease) infinite}
.smap__seen{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--summit)}
.smap .xp__tab{position:relative;padding:18px 18px 16px;font-size:.64rem}
.smap .xp__tab b{font-size:.62rem;margin-bottom:6px}
.smap .xp__tab .nm{display:block;font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 700;font-size:clamp(1.02rem,1.5vw,1.3rem);
  line-height:1.1;letter-spacing:0;text-transform:none;color:var(--ash);transition:color var(--d-ui) linear}
.smap .xp__tab:hover .nm,.smap .xp__tab[aria-selected="true"] .nm{color:var(--bone)}
.smap .xp__tab:not([aria-selected="true"]):not(.is-seen)::after{content:"";position:absolute;right:14px;top:16px;width:8px;height:8px;border-radius:50%;
  background:var(--summit);animation:cs-ping 2s var(--ease) infinite}
.smap__top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,4vw,64px);align-items:start}
.smap__top .smap__dl{margin-top:0}

/* the showroom picker: big enough to read every ad before you open it */
.sld--pick{margin-top:0}
.show__pick{padding-top:14px}
.pk{flex:0 0 min(500px,80vw)}
.pk__im{position:relative;display:block;border:1px solid var(--granite);background:var(--slate);transition:border-color var(--d-ui) linear,transform .45s var(--spring-gentle)}
.pk__im img{width:100%;height:auto;display:block;border:0;transform:none !important}
.pk:hover .pk__im{transform:translateY(-3px);border-color:var(--granite-2)}
.pk.is-car .pk__im{box-shadow:6px -6px 0 -1px var(--crag),6px -6px 0 0 var(--granite-2),12px -12px 0 -1px var(--slate),12px -12px 0 0 var(--granite)}
.pk__c{position:absolute;right:12px;bottom:12px;padding:5px 10px;border-radius:99px;background:rgba(18,16,13,.85);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone)}
.pk__n{display:flex;flex-direction:column;gap:4px;font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;font-size:1.15rem;line-height:1.15;color:var(--bone)}
.pk__n b{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ash-2)}
.pk__on{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash)}
.pk[aria-selected="true"] .pk__im{border-color:var(--summit);box-shadow:0 0 0 1px var(--summit)}
.pk[aria-selected="true"] .pk__n b,.pk[aria-selected="true"] .pk__on{color:var(--summit)}
.show__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:clamp(16px,2vw,24px)}
.show__row .show__ctl{margin-top:0}
.show__dev{display:none}

/* ---------- the lightbox: any ad, up close ---------------------------------- */
.lbx{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(56px,6vw,72px) clamp(56px,7vw,110px);
  background:rgba(10,9,7,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s var(--ease)}
.lbx[hidden]{display:none}
.lbx.is-open{opacity:1}
.lbx__f{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.lbx__f img{display:block;max-width:100%;max-height:calc(100vh - 190px);max-height:calc(100svh - 190px);width:auto;height:auto;
  border:1px solid var(--granite);box-shadow:0 40px 90px rgba(0,0,0,.65);transform:scale(.95);transition:transform .5s var(--spring-gentle),opacity .25s linear}
.lbx.is-open .lbx__f img{transform:none}
.lbx__f img.is-loading{opacity:.35}
.lbx__cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 20px;text-align:center;max-width:70ch}
.lbx__i{color:var(--summit);font-size:.64rem}
.lbx__cap p{color:var(--bone);font-size:1rem;line-height:1.5}
.lbx__x,.lbx__p,.lbx__n{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:13px;border:1px solid var(--granite-2);
  background:rgba(18,16,13,.7);color:var(--bone);transition:border-color var(--d-ui) linear,color var(--d-ui) linear}
.lbx__x:hover,.lbx__p:hover,.lbx__n:hover{border-color:var(--summit);color:var(--summit)}
.lbx__x svg,.lbx__p svg,.lbx__n svg{display:block;width:100%;height:100%}
.lbx__x{top:16px;right:16px}
.lbx__p{left:clamp(8px,2vw,28px);top:50%;margin-top:-24px}
.lbx__n{right:clamp(8px,2vw,28px);top:50%;margin-top:-24px}
html.is-lbx{overflow:hidden}
.wall li{cursor:zoom-in}
.wall li:focus-visible{outline:2px solid var(--summit);outline-offset:2px}
.wall li:hover img{border-color:var(--summit)}

/* ---------- proof: two vertical clips ----------------------------------------- */
.vwall--duo{grid-template-columns:repeat(2,minmax(0,340px))}

@media (max-width:960px){
  .smap__top{grid-template-columns:1fr}
  .lib__tip,.lib__flat{display:none}
  .show__dev{display:inline-flex;margin-top:20px}
  .show[data-dev="phone"] .mac,.show[data-dev="mac"] .phone{display:none}
}
@media (max-width:620px){
  .smap__seen{margin-left:0}
  .smap .xp__tab{padding:14px 14px 12px}
  .lbx{padding:64px 12px 24px}
  .lbx__p,.lbx__n{top:auto;bottom:18px;margin-top:0}
  .lbx__f img{max-height:calc(100svh - 220px)}
  .vwall--duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .lib__tip i,.cue__dot,.smap .xp__tab::after{animation:none !important}
}

/* in "this seat" mode the one handover left is a clean one, to the media buyer */
.chain[data-mode="one"] .chain__row li.is-mb i{background:var(--slate);border-style:dashed}
.chain[data-mode="one"] .chain__row li.is-mb::before,.chain[data-mode="one"] .chain__row li.is-mb + li::before{background:repeating-linear-gradient(90deg,var(--summit) 0 6px,transparent 6px 11px)}
.chain__own--one span.is-mb{border-top-style:dashed;color:var(--ash)}
@media (max-width:720px){
  .chain[data-mode="one"] .chain__row li.is-mb::before,.chain[data-mode="one"] .chain__row li.is-mb + li::before{background:repeating-linear-gradient(180deg,var(--summit) 0 5px,transparent 5px 10px)}
  .chain[data-mode="one"] .chain__row li.is-mb b::after{content:" B7  your media buyer, briefed";color:var(--ash-2)}
}

/* the slideshow button beside the arrows: two bars while it plays, a triangle when stopped */
.sld__pp i{position:relative;display:block;width:12px;height:14px}
.sld__pp i::before,.sld__pp i::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:currentColor}
.sld__pp i::before{left:1px}
.sld__pp i::after{right:1px}
.sld.is-paused .sld__pp i::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}
.sld.is-paused .sld__pp i::after{display:none}
.sld.is-paused .sld__pp{border-color:var(--summit);color:var(--summit)}

/* Reels: the frame is exactly 9:16, so the video is never cropped at the sides.
   Whatever height is left over sits in black above and below, as it does on a phone */
.reel__v{flex:0 0 auto;aspect-ratio:9/16;margin-block:auto}
.reel__v video,.reel__v .reel__po{object-fit:contain;background:#000}

/* ---------- phones: the contour flight instead of the library -------------
   The same terrain and route as the blind spot page, sitting behind the
   captions. On a wide screen it is never shown and its script never loads. */
.lib .ascent{display:none}
@media (max-width:960px){
  .lib__gl,.lib__read,.lib__ctl{display:none}
  .lib .ascent{display:block;position:absolute;inset:0;width:auto;max-width:none;aspect-ratio:auto;margin:0}
  .lib .ascent__gl{inset:0}
  .lib .ascent__labels{display:none}
  .lib .ascent__svg{inset:auto 4% 8% auto;width:min(60vw,420px);height:auto;opacity:.45}
  .lib .ascent__ctl{display:none}  /* scroll drives the flight, and reduced motion already holds it still */
  .lib::after{background:linear-gradient(0deg,rgba(18,16,13,.92) 0%,rgba(18,16,13,.66) 45%,rgba(18,16,13,.74) 100%)}
}

/* ---------- a forward button that glows until it has been used --------------- */
.sld__b.is-glow{border-color:var(--summit);background:var(--summit);color:#100E0B;animation:cs-glow 1.8s var(--ease) infinite}
@keyframes cs-glow{0%{box-shadow:0 0 0 0 rgba(242,163,12,.6)}70%{box-shadow:0 0 0 12px rgba(242,163,12,0)}100%{box-shadow:0 0 0 0 rgba(242,163,12,0)}}

/* ---------- phones: the showroom dock ----------------------------------------
   Statics or video, and back and forward through the ads, held under the
   header from the picker to the end of the mockup */
.show__dock{display:none}
@media (max-width:960px){
  .show__bar{display:none}
  .show__dock{position:sticky;top:var(--dock-top,67px);z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
    margin:0 calc(var(--pad) * -1) 18px;padding:10px var(--pad);background:rgba(18,16,13,.9);
    -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);border-bottom:1px solid var(--granite)}
  .show__dsound{display:none;flex:1 0 100%;justify-content:center;padding:12px 16px;font-size:.68rem}
  .show[data-mode="video"] .show__dsound{display:inline-flex}
  .show__dsound[aria-pressed="true"]{background:var(--crag);color:var(--summit);box-shadow:inset 0 0 0 1px var(--summit)}
  .show__ctl .show__sound{display:none}
  .show__dmodes button{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;font-size:.62rem}
  .show__dmodes svg{width:12px;height:12px;flex:0 0 12px}
  .show__dnav{display:flex;align-items:center;gap:8px}
  .show__dnav .sld__b{width:42px;height:42px}
  .show__dn{min-width:5.2ch;text-align:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--bone);font-variant-numeric:tabular-nums}
  .sld--pick .sld__nav{display:none}
  .show__row > .tlink{display:none}
}

/* ---------- the lifecycle rail: arrows above the cards when it swipes ------- */
.rail8__nav{display:none}
.rail8:not(.is-pinned) .rail8__nav{position:sticky;top:var(--dock-top,67px);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:16px;padding:10px var(--pad);background:rgba(18,16,13,.9);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  border-bottom:1px solid var(--granite)}
.rail8__hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--ash);font-size:.95rem;line-height:1.4}
.rail8__hint b{color:var(--bone);font-weight:600}
.rail8__n{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--summit)}
.rail8:not(.is-pinned) .rail5__hint{display:none}
@media (prefers-reduced-motion:reduce){ .sld__b.is-glow{animation:none} }