/* Concept: Jim's identity (right-aligned sidebar + main column, slate teal, Barlow in his existing styles)
   framing three motion moments: a drifting reel of real screens, stacked full-bleed case panels, and
   pinned horizontal galleries inside each case study. Gold is reserved and unused. */
:root{
  --bg:#295566; --band:#244a59; --deep:#1D3F4C; --ink:#295566;
  --fg:#FFFFFF; --blue:#BFDDE8; --gold:#CFC873; --line:rgba(191,221,232,.22);
  --font:"Barlow","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  --wrap:1228px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--bg)}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
h1,h2,h3,p,dl,dd,blockquote{margin:0}
h1,h2,h3{font-weight:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}

/* ---- Jim's type styles (live site) ---- */
.t-name{font-size:38px;font-weight:500;line-height:1.3;color:var(--blue);white-space:nowrap}
.t-title{font-size:18px;font-weight:500;line-height:1.6;text-transform:uppercase}
.t-side{font-size:16px;font-weight:400;line-height:1.6;color:var(--blue)}
.t-sidelbl{font-size:18px;font-weight:500;line-height:1.6;color:var(--blue);text-transform:uppercase}
.t-page{font-size:38px;font-weight:600;line-height:1.3}
.t-intro{font-size:18px;font-weight:300;line-height:1.6}
.t-section{font-size:20px;font-weight:500;line-height:1.6;color:var(--blue);text-transform:uppercase}
.t-eyebrow{font-size:14px;font-weight:300;line-height:1.6;color:var(--blue);text-transform:uppercase}
.t-label{font-size:18px;font-weight:400;line-height:1.6}
.t-project{font-size:24px;font-weight:300;line-height:1.25}
.t-cs{font-size:38px;font-weight:300;line-height:1.3;color:var(--blue)}
.t-h2{font-size:32px;font-weight:300;line-height:1.3}
.t-step{font-size:24px;font-weight:400;line-height:1.3;color:var(--blue)}
.t-body{font-size:16px;font-weight:300;line-height:25.6px}
.t-quote{font-size:18px;font-weight:400;font-style:italic;line-height:28.7px;color:var(--gold)}
.t-cite{font-size:14px;font-weight:300;font-style:italic;line-height:22px;color:var(--gold);margin-top:6px}
.t-caption{font-size:13px;font-weight:400;font-style:italic;line-height:21px;color:var(--blue)}
.valbox{display:inline-grid;place-items:center;background:var(--blue);color:var(--ink);font-weight:800;font-size:22px;line-height:1;min-width:88px;height:50px;padding:0 8px;border-radius:2px;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:12px;font-weight:500;line-height:1.5;text-transform:uppercase;border:1px solid rgba(255,255,255,.75);border-radius:3px;padding:2px 7px}

/* ---- motion primitives ---- */
.play .ld{animation:rise 1s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms + 80ms)}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
[data-reveal]{transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
[data-reveal].pre{opacity:0;transform:translateY(46px)}
[data-reveal].pre.in{opacity:1;transform:none}

/* ---- identity block ---- */
.id{padding-block:42px 40px}
.idgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px}
.side{text-align:right;display:grid;align-content:start}
.side .t-title,.main .t-intro{margin-top:18px}
.side .t-sidelbl{margin-top:22px}
.icons{display:flex;flex-direction:column;align-items:flex-end;gap:14px;margin-top:22px}
.ico{position:relative;display:block;width:36px;height:36px}
.ico img{display:block;width:36px;height:36px;transition:transform .25s var(--ease)}
.ico:hover img,.ico:focus-visible img{transform:scale(1.08)}
.ico::after{content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);opacity:0;pointer-events:none;white-space:nowrap;background:var(--blue);color:var(--ink);font-size:14px;font-weight:500;line-height:1;padding:7px 10px;border-radius:3px;transition:opacity .2s,transform .2s var(--ease)}
.ico:hover::after,.ico:focus-visible::after{opacity:1;transform:translate(0,-50%)}
.main{min-width:0}
.main>.t-intro{max-width:760px}
.blk{margin-top:44px}
.blk>.t-section{margin-bottom:16px}
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 28px;align-items:center}
.logos img{display:block;height:var(--h);width:auto;max-width:100%;object-fit:contain;object-position:left center;opacity:.95}
.metrics{display:grid;gap:14px}
.metric{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.metric .txt{display:grid}

/* ---- reel ---- */
.reel{position:relative;height:300px;overflow:hidden;background:var(--band);--rh:200px}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,var(--band),transparent 8%,transparent 92%,var(--band))}
.plane{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%)}
.mcol{width:var(--cw,210px);flex:none;height:100%;overflow:visible}
.mtrack{display:flex;flex-direction:column;gap:12px;will-change:transform}
.rrow{display:flex;gap:12px;width:max-content;height:100%}
.rrow img{filter:grayscale(1);opacity:.5;transition:filter .45s var(--ease),opacity .45s var(--ease);}
.rrow img.lit,.still .rrow img:hover{filter:none;opacity:1}
.rrow img{width:100%;height:auto;border-radius:6px;background:#fff;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);display:block}

/* ---- case panels ---- */
.cs{padding-top:40px}
.cs-head{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;margin-bottom:28px}
.cs-slot{height:100vh;position:relative}
.cs-slot:last-child{height:auto;padding-bottom:6vh}
.cs-panel{position:sticky;top:max(5vh,24px);height:min(86vh,760px);min-height:540px;border-radius:22px;overflow:hidden;
  background:var(--c);
  display:grid;grid-template-rows:minmax(0,1fr) auto;transform-origin:50% 0;will-change:transform;text-decoration:none;color:#fff;box-shadow:5px 5px 0 rgba(0,0,0,.2)}
.cs-panel .shade{position:absolute;inset:0;background:#0b1a20;opacity:0;pointer-events:none;z-index:4}
.cs-info{position:relative;z-index:2;padding:clamp(24px,3.4vw,40px);display:grid;align-content:space-between;gap:28px}
.cs-panel .cs-vis{grid-row:1}
.cs-panel .cs-info{grid-row:2;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:end;gap:32px;padding-top:0}
.cs-panel .cs-vis img:nth-child(1){width:50%;left:5%;top:9%}
.cs-panel .cs-vis img:nth-child(2){width:42%;right:4%;left:auto;top:21%}
.cs-panel .cs-vis img:nth-child(3){width:46%;left:28%;top:40%}
.cs-info .top{display:grid;gap:16px}
.cs-info .num{font-size:14px;font-weight:300;letter-spacing:0;color:rgba(255,255,255,.75)}
.cs-info .brand{height:52px;width:auto;max-width:260px;object-fit:contain;object-position:left center;display:block}
.cs-info .t-intro{max-width:44ch}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.28)}
.stats div{display:grid;gap:6px;align-content:start}
.stats .n{font-size:38px;font-weight:600;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.stats .l{font-size:14px;font-weight:400;line-height:1.45;color:rgba(255,255,255,.88)}
.go{display:inline-flex;gap:8px;align-items:center;font-size:16px;font-weight:500}
.go u{text-decoration:none;background:linear-gradient(#fff,#fff) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease);padding-bottom:2px}
.go b{font-weight:500;transition:transform .35s var(--ease)}
.cs-panel:hover .go u,.next:hover .go u{background-size:100% 1px}
.cs-panel:hover .go b,.next:hover .go b{transform:translateX(5px)}
.cs-vis{position:relative;z-index:1;perspective:1400px}
.cs-vis .tilt{position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);transform-style:preserve-3d}
.cs-vis img{position:absolute;border-radius:8px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.14),5px 5px 0 rgba(0,0,0,.2);object-fit:cover;object-position:left top;will-change:transform}
.cs-vis img:nth-child(1){width:62%;aspect-ratio:16/10;left:4%;top:12%}
.cs-vis img:nth-child(2){width:54%;aspect-ratio:16/10;right:-6%;top:44%}
.cs-vis img:nth-child(3){width:58%;aspect-ratio:16/10;left:18%;top:60%}

/* ---- more projects index ---- */
.mp{padding-block:88px 40px}
.mp-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px}
.mp-side{text-align:right}
.mp-side p{margin-top:10px}
.idx{border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line)}
.row-h{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:20px;align-items:center;padding:22px 4px;background:none;border:0;cursor:pointer;text-align:left;transition:padding .35s var(--ease)}
.row-h{position:relative}
.row-h::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:6px;background:var(--gold);transform:scaleY(0);transform-origin:50% 50%;transition:transform .35s var(--ease)}
.row:not(.open) .row-h:hover,.row:not(.open) .row-h:focus-visible{padding-left:28px}
.row:not(.open) .row-h:hover::before,.row:not(.open) .row-h:focus-visible::before{transform:scaleY(1)}
.row-h .nm{display:grid;gap:2px}
.row-h .nm .t-eyebrow{text-transform:none;font-size:15px}
.row-h .chips span{border-color:rgba(191,221,232,.55);color:var(--blue)}
.row-h .chips{transition:opacity .3s}
.row.open .row-h .chips{opacity:0;visibility:hidden}
.row-h .pm{position:relative;width:20px;height:20px}
.row-h .pm::before,.row-h .pm::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--blue);transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.row-h .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.row.open .row-h .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.row-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.row.open .row-b{grid-template-rows:1fr}
.row-b>div{overflow:hidden}
.row-in{display:grid;gap:14px;padding:14px;margin:2px 0 28px;background:var(--band);border:1px solid var(--line);border-radius:16px}
.pcard{background:var(--c);border-radius:10px;padding:18px 22px;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.25fr);gap:28px;align-items:start;color:#fff}
.pcard>img{max-height:56px;max-width:170px;width:auto;height:auto;align-self:start}
.pcard>div{display:grid;gap:4px;align-content:start}
.pcard dt{font-size:14px;font-weight:500;text-transform:uppercase}
.pcard dd{font-size:15px;font-weight:300;line-height:1.5}
.pcard .chips{margin-top:4px}
.pcard a{font-size:16px;font-weight:500;text-decoration:none;margin-top:8px;justify-self:start}
.pcard a:hover{text-decoration:underline}
.srows{display:grid;gap:12px}
.srow{display:flex;gap:12px;align-items:flex-start}
.shot{flex-basis:0;min-width:0;padding:0;border:0;background:var(--band);border-radius:8px;overflow:hidden;cursor:zoom-in;box-shadow:0 0 0 1px rgba(0,0,0,.14),5px 5px 0 rgba(0,0,0,.2);opacity:0;transform:translateY(30px) scale(.98);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
.row.open .shot{opacity:1;transform:none}
.shot img{display:block;width:100%;height:auto;transition:transform .5s var(--ease)}
.shot:hover img{transform:scale(1.03)}
.shot.bare{background:none;box-shadow:none;border-radius:0;overflow:visible}
.shot.bare img{filter:drop-shadow(5px 5px 0 rgba(0,0,0,.2))}

footer{border-top:1px solid var(--line);padding-block:40px 64px;margin-top:64px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--blue);text-decoration:none}

/* ---- case study view ---- */
.cbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--band)}
.cbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:22px}
.cbar .home img{width:107px;height:26px;display:block}
.cbar .ic{display:flex;gap:14px}
.cbar .ico,.cbar .ico img{width:30px;height:30px}
.cbar .ico::after{right:auto;left:50%;top:calc(100% + 8px);transform:translate(-50%,-4px)}
.cbar .ico:hover::after,.cbar .ico:focus-visible::after{transform:translate(-50%,0)}
.chero{position:relative;margin-top:28px;height:min(64vh,620px);min-height:420px;border-radius:22px;overflow:hidden;
  background:var(--c)}
.chero .brand{position:absolute;left:clamp(28px,4vw,56px);top:clamp(28px,4vw,52px);height:60px;width:auto;max-width:300px;z-index:3}
.chero .cs-vis{position:absolute;inset:0;left:28%}
.chead{padding-block:52px 0}
.cbrand{display:block;height:57px;width:auto;max-width:320px;object-fit:contain;object-position:left center}
.facts{text-align:right;display:grid;align-content:start}
.facts .t-sidelbl{margin-top:16px}
.facts .t-sidelbl:first-of-type{margin-top:18px}
.facts .first{color:var(--fg)}
/* two-column: MY ROLE lines up with the testimonial (or intro) beside it, which sits below the 57px client logo */
.facts .t-sidelbl.first{margin-top:29.6px}
.cmain{display:grid;gap:22px;min-width:0}
.cmain .t-label{font-size:16px}
.cmain .metrics{margin-top:6px}
.cmain .metric .valbox{min-width:70px;height:48px;font-size:18px}
.sec{max-width:800px;display:grid;gap:18px}
.prose{display:grid;gap:22px}

.hstep{position:relative}
.hpin{position:sticky;top:var(--barh,70px);height:calc(100vh - var(--barh,70px));display:flex;align-items:center;overflow:hidden}
.hpin>.wrap{width:100%}
.hcol{display:grid;gap:22px;min-width:0}
.hgrid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr);gap:48px;align-items:center;width:100%}
.htext{display:grid;gap:14px}
.hcount{display:flex;gap:10px;align-items:center;margin-top:6px}
.hbar{flex:1;max-width:200px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.hbar span{display:block;height:100%;width:0;background:var(--fg)}
.hcount b{font-size:14px;font-weight:500;color:var(--blue);font-variant-numeric:tabular-nums}
.hview{overflow:hidden;margin-right:calc(-1 * max(24px,(100vw - var(--wrap)) / 2 + 24px));padding-block:6px 4px}
.htrack{display:flex;gap:32px;width:max-content;will-change:transform;padding-right:30vw}
.hslide{display:grid;gap:12px;margin:0}
.hslide button{padding:0;border:0;background:#fff;border-radius:8px;overflow:hidden;cursor:zoom-in;box-shadow:0 0 0 1px rgba(0,0,0,.14),5px 5px 0 rgba(0,0,0,.2)}
.hslide img{display:block;height:var(--sh,min(48vh,420px));width:auto}
.hslide figcaption{max-width:56ch}
/* pinned galleries share one caption line that follows the slide in view; swipe galleries keep per-slide captions */
.hcap{margin:-8px 0 0}
html:not(.static) .hslide figcaption{display:none}
.static .hcap{display:none}
@media (min-width:1200px){.hcap,.vid figcaption{white-space:nowrap}}
.scrolly{position:relative}
.sbox{height:var(--sh,min(48vh,420px));aspect-ratio:9/16;overflow-y:auto;overscroll-behavior:contain;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.14),5px 5px 0 rgba(0,0,0,.2);scrollbar-width:thin;scrollbar-color:rgba(41,85,102,.45) transparent}
.sbox img{display:block;width:100%;height:auto}
.sbox:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.shint{position:absolute;left:50%;bottom:12px;transform:translate(-50%,4px);background:rgba(41,85,102,.92);color:#fff;font-size:12px;font-weight:500;padding:4px 10px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.scrolly:hover .shint{opacity:1;transform:translate(-50%,0)}
.scrolly:has(.sbox:not([data-top])) .shint{opacity:0}
.static .sbox{height:min(48vh,300px)}
.vstep{padding-block:48px 24px}
.vid{margin:0;display:grid;gap:12px}
.vbox{background:#000;display:flex;justify-content:center;padding:18px 0;box-shadow:5px 5px 0 rgba(0,0,0,.2)}
.vbox video{display:block;width:442px;max-width:100%;height:auto;aspect-ratio:442/889;background:#000}
.hslide button{position:relative}
.cyc img{transition:opacity .5s var(--ease)}
.cyc img:not(:first-child){position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.cyc img:not(.on){opacity:0}
.cdots{position:absolute;left:12px;bottom:10px;display:flex;gap:5px;z-index:2}
.cdots i{width:18px;height:3px;border-radius:2px;background:rgba(41,85,102,.25);transition:background .3s}
.cdots i.on{background:#295566}

.next{box-shadow:5px 5px 0 rgba(0,0,0,.2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border-radius:22px;overflow:hidden;min-height:340px;text-decoration:none;color:#fff;
  background:var(--c)}
.next .cs-info{align-content:center}
.next .cs-vis img:nth-child(1){top:10%}
.next .cs-vis img:nth-child(3){top:52%}
.cs-vis .tilt img.d1,.cs-vis .tilt img.d2,.cs-vis .tilt img.d3,.cs-vis .tilt img.s1,.cs-vis .tilt img.s2,.cs-vis .tilt img.s3,.cs-vis .tilt img.u1,.cs-vis .tilt img.u2,.cs-vis .tilt img.u3,.cs-vis .tilt img.ph{aspect-ratio:auto;height:auto;object-fit:contain}
.cs-vis .tilt img.d1{width:46%;left:4%;right:auto;top:6%}
.cs-vis .tilt img.d2{width:46%;right:4%;left:auto;top:12%}
.cs-vis .tilt img.d3{width:48%;left:26%;right:auto;top:30%;z-index:2}
/* square-ish screens: smaller so the front one clears the text below */
.cs-vis .tilt img.s1{width:35%;left:7%;right:auto;top:6%}
.cs-vis .tilt img.s2{width:31%;right:7%;left:auto;top:9%}
.cs-vis .tilt img.s3{width:37%;left:31%;right:auto;top:18%;z-index:2}
.cs-vis .tilt img.u1{width:42%;left:4%;right:auto;top:6%}
.cs-vis .tilt img.u2{width:42%;right:4%;left:auto;top:12%}
.cs-vis .tilt img.u3{width:42%;left:29%;right:auto;top:15%;z-index:2}
/* device shots with their own bezel and transparent corners: shadow follows the device outline */
.cs-vis .tilt img.t1,.cs-vis .tilt img.t2,.cs-vis .tilt img.t3{aspect-ratio:auto;height:auto;object-fit:contain;background:none;border-radius:0;box-shadow:none;filter:drop-shadow(5px 5px 0 rgba(0,0,0,.2))}
.cs-vis .tilt img.t1{width:28%;left:12%;right:auto;top:6%}
.cs-vis .tilt img.t2{width:28%;right:12%;left:auto;top:10%}
.cs-vis .tilt img.t3{width:31%;left:34.5%;right:auto;top:8%;z-index:2}
.cs-vis .tilt img.ph{width:17%;left:41%;right:auto;top:12%;border-radius:14px;z-index:2}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(14,30,36,.95);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.lb[hidden],[data-view][hidden]{display:none}
.lb figure{margin:0;display:grid;gap:12px;justify-items:center}
.lb img{max-width:min(94vw,1500px);max-height:84vh;background:#fff;border-radius:8px}
.lb button{position:absolute;top:max(18px,env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));background:var(--blue);color:var(--ink);border:0;border-radius:999px;padding:7px 14px;font-weight:500;cursor:pointer}

/* ---- responsive ---- */
@media (max-width:920px){
  .idgrid,.cs-head,.mp-grid{grid-template-columns:1fr;gap:18px}
  .side,.mp-side,.facts{text-align:left}
  /* case study header on phones: client logo + testimonial first, then Case Study facts, then intro and metrics */
  .chead .idgrid{display:flex;flex-direction:column;gap:22px}
  .chead .cmain{display:contents}
  .chead .cbrand{order:1}
  .chead .cmain>blockquote{order:2}
  .chead .facts{order:3;margin-top:6px}
  .facts .t-sidelbl.first{margin-top:16px}
  .chead .cmain>:not(.cbrand):not(blockquote){order:4}
  .side .x{display:none}
  .icons{flex-direction:row;justify-content:flex-start;align-items:center}
  .ico::after{right:auto;left:50%;top:calc(100% + 8px);transform:translate(-50%,-4px)}
  .ico:hover::after{transform:translate(-50%,0)}
  .cs-panel{grid-template-rows:auto auto;height:auto;min-height:0}
  .cs-panel .cs-vis{height:clamp(220px,56vw,340px)}
  .cs-slot{height:auto;margin-bottom:24px}
  .cs-panel{position:relative;top:0}
  .cs-panel .cs-info{grid-template-columns:1fr;gap:20px}
  .pcard{grid-template-columns:1fr;gap:14px}
  .pcard>img{align-self:start}
  .stats .n{font-size:30px}
  .hgrid{grid-template-columns:1fr;gap:20px}
  .next{grid-template-columns:1fr}
  .next .cs-vis{min-height:240px}
  .chero .cs-vis{left:0;top:30%}
}
@media (max-width:560px){
  .t-name,.t-page,.t-cs{font-size:32px}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .row-h{grid-template-columns:minmax(0,1fr) 28px}
  .row-h .chips{display:none}
  .reel{height:240px}
  .reel{--cw:160px}
}
/* static fallback: reduced motion, or narrow screens for the pinned galleries */
.static .hstep{height:auto!important}
.static .hpin{position:static;height:auto;padding-block:32px}
.static .hview{overflow-x:auto;scroll-snap-type:x mandatory;margin-right:0}
.static .htrack{transform:none!important;padding-right:0}
.static .hslide{scroll-snap-align:start}
.static .hslide img{height:min(48vh,300px)}
.still .cs-slot{height:auto;margin-bottom:28px}
.still .cs-panel{position:relative;top:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}