/* Scroll-story case study layout (trionn-style) */
:root:has(.story-page){scroll-behavior:auto}
@media (min-width:901px){
  .story-page .cs-rail{height:calc(100vh - 116px);display:flex;flex-direction:column}
  /* only the body copy scrolls, so the bottom nav stays pinned like the reference */
  .story-page .cs-chapter-texts{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:8px}
  .story-page .cs-chapter-texts::-webkit-scrollbar{display:none}
}
.story-page .cs-meta{margin-top:18px}
.cs-hero-phone{display:flex;justify-content:center;padding:clamp(24px,4vw,56px) 0}
.cs-hero-phone video{width:min(440px,80vw);height:auto;display:block;border-radius:24px}
.cs-video-frame{background:#000;border-radius:16px;overflow:hidden;padding:clamp(6px,1vw,14px)}
.cs-video-frame img{width:100%;height:auto;display:block;border-radius:8px}
.cs-meta-row{display:flex;gap:24px;flex-wrap:wrap}
.cs-meta-row>div{margin-bottom:0}
.story-page .cs-meta-body{padding-top:16px}
.story-page .cs-meta-body>div{margin-bottom:16px}
.story-page .cs-meta .cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.story-page .cs-meta .cs-stats .stat,.story-page .cs-meta .cs-stats .stat .n,.story-page .cs-meta .cs-stats .stat .l{margin-bottom:0}
.story-page .cs-meta .cs-stats .stat .n{font-size:clamp(20px,1.6vw,26px);line-height:1.1}
.story-page .cs-meta .cs-stats .stat .l{max-width:none;margin-top:6px;font-size:11px;line-height:1.5}
.story-page .cs-rail{display:flex;flex-direction:column;gap:18px}
.cs-chapters{display:flex;gap:18px;border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap}
.cs-chapters button{background:none;border:none;padding:0;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3,#888);cursor:pointer;transition:color .3s;font-family:inherit}
.cs-chapters button.active{color:var(--ink)}
.cs-chapter-texts{display:grid;padding-bottom:12px;margin-top:-4px}
.cs-chapter-texts>[data-ch]{grid-area:1/1;margin:0;visibility:hidden;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.cs-chapter-texts>[data-ch].active{visibility:visible;opacity:1;transform:none}
.cs-chapter-texts > div > p + p{margin-top:15px}
/* tinted chapter panels in the stream */
.cs-chapter-group{background:color-mix(in oklab,var(--ink) 4%,transparent);border-radius:18px;overflow:hidden;margin-bottom:clamp(20px,3vh,40px);display:flex;flex-direction:column;gap:8px}
.cs-chapter-group .cs-media,.cs-chapter-group .cs-gallery{margin:0}
.cs-chapter-group .cs-media image-slot{width:100%;height:auto;aspect-ratio:16/10;display:block;overflow:hidden}
.cs-chapter-group .cs-gallery image-slot{height:auto}
.cs-chapter-group .cs-media figcaption,.cs-chapter-group .cs-gallery figcaption{padding:0 16px}
.cs-chapter-group .cs-media figcaption{padding-bottom:10px}
.cs-chapter-group .cs-tiles{padding:16px}
.cs-chapter-group .cs-gallery{padding:0 16px 10px}
.cs-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cs-tiles .tile{background:color-mix(in oklab,var(--ink) 6%,transparent);border-radius:12px;padding:clamp(16px,2vw,26px);display:flex;flex-direction:column;gap:10px;min-height:120px;justify-content:space-between}
.cs-tiles .n{font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.02em}
.cs-tiles .n small{font-size:.6em}
.cs-tiles .l{font-size:12.5px;color:var(--ink3,#888);line-height:1.45}
.cs-tiles.big .n{font-size:clamp(34px,4vw,54px)}
/* The duplicate sticky chapter bar is retired: above 900px the rail is sticky
   so its tabs are always on screen, and below 900px the rail sits directly
   above the copy it switches. One set of tabs at every width. */
.cs-chapterbar{display:none}
@media (max-width:960px){
  .cs-tiles{grid-template-columns:1fr 1fr}
  .cs-chapter-texts{min-height:0}
  .cs-chapter-texts>[data-ch]:not(.active){display:none}
  .cs-chapterbar button{background:none;border:none;padding:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3,#888);white-space:nowrap;font-family:inherit}
  .cs-chapterbar button.active{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.cs-chapter-texts>[data-ch]{transition:none;transform:none}}
/* LIFT design-system reel (1920x1476 stage, scaled to its container) */
.lift-reel{position:relative;width:100%;aspect-ratio:1920/1476;overflow:hidden;background:#0D0D0C}

/* LIFT cover — iPhone mockup (ported from iPhone Mockup.dc.html) with the
   onboarding recording playing inside the frame. Inside .lift-phone, 1em is
   exactly 1px of the source mockup, so every value below is the design's own. */
.lift-cover{position:relative;width:100%;aspect-ratio:1200/923;overflow:hidden;background:#0a0a0a;container-type:size;display:flex;align-items:center;justify-content:center}
.lift-cover .cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lift-cover .cover-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%)}
.lift-phone{position:relative;font-size:.72px;font-size:calc(78cqh / 718);width:344em;height:712em;border-radius:58em;padding:3em;
  background:linear-gradient(145deg,#6e6e73,#3a3a3c 35%,#4a4a4e 65%,#8e8e93);
  box-shadow:0 40em 90em rgba(0,0,0,.75),0 10em 30em rgba(0,0,0,.6)}
.lift-phone .rail{position:absolute;inset:0;border-radius:58em;box-shadow:inset 0 0 2em rgba(255,255,255,.4),inset 0 0 10em rgba(255,255,255,.08);pointer-events:none}
.lift-phone .btn{position:absolute;width:3em;border-radius:2em;background:#3a3a3c}
.lift-phone .btn.b1{left:-2.5em;top:150em;height:26em}
.lift-phone .btn.b2{left:-2.5em;top:195em;height:52em}
.lift-phone .btn.b3{left:-2.5em;top:258em;height:52em}
.lift-phone .btn.b4{right:-2.5em;top:210em;height:78em}
.lift-phone .bezel{position:relative;width:100%;height:100%;border-radius:55em;background:#000;padding:6em;box-sizing:border-box}
.lift-phone .screen{position:relative;width:100%;height:100%;border-radius:49em;overflow:hidden;background:#000}
.lift-phone .screen video,.lift-phone .screen img{width:100%;height:100%;object-fit:cover;display:block}
.lift-phone .island{position:absolute;top:11em;left:50%;transform:translateX(-50%);width:88em;height:26em;border-radius:18em;background:#000}
.lift-phone .home{position:absolute;bottom:8em;left:50%;transform:translateX(-50%);width:110em;height:4em;border-radius:3em;background:rgba(255,255,255,.85)}

/* ── rail, reference layout: back rule → title → summary → disciplines → tabs → copy → nav ── */
.story-page .cs-back{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:block;margin:0;padding-bottom:16px;border-bottom:1px solid var(--line)}
.story-page .cs-back:hover{color:var(--ink)}
.story-page .cs-rail h1{font-size:clamp(30px,3vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:0}
/* site link beside the title — underline draws in from the left like .svc on the
   homepage, and the arrow lifts via the global a:hover .ar rule */
.cs-title-row{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap}
.cs-title-row h1{margin:0}
.cs-site{position:relative;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding-bottom:4px}
.cs-site::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.cs-site:hover{color:var(--ink)}
.cs-site:hover::after{transform:scaleX(1)}
html[data-theme="light"] .cs-site:hover{color:var(--accent-light)}
html[data-theme="light"] .cs-site::after{background:var(--accent-light)}
.cs-summary{font-size:16.5px;line-height:1.55;color:var(--muted);max-width:42ch;margin:0;text-wrap:pretty}
.cs-disciplines{list-style:none;margin:0;padding:0}
.cs-disciplines li{font-size:14.5px;line-height:1.65;color:var(--muted)}
.cs-disciplines li::before{content:"\00b7";margin-right:8px;color:var(--muted)}
/* tabs: active is underlined, as in the reference */
.cs-chapters{gap:14px 15px;border-top:none;padding-top:0;margin-top:clamp(24px,4.5vh,52px)}
.cs-chapters button{position:relative;padding-bottom:5px;font-size:11px;letter-spacing:.1em}
.cs-chapters button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.cs-chapters button.active::after{transform:scaleX(1)}
.cs-chapters button:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px;color:var(--ink)}
/* body copy — the point of the change: readable */
.cs-chapter-texts p{font-size:16.5px;line-height:1.66;color:var(--ink2,var(--ink));max-width:52ch}
/* overview panel reuses the meta rows + stats */
.cs-ov p{font-size:15.5px;line-height:1.6;color:var(--ink2,var(--ink));margin:0 0 22px;max-width:52ch}
.cs-ov>div{margin-bottom:16px}
/* label/value styling used to come from .cs-meta; the panel needs its own now */
.cs-ov .k{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.cs-ov .v{display:block;font-size:14.5px;line-height:1.45;color:var(--ink)}
.cs-ov .cs-meta-row{display:flex;gap:24px;flex-wrap:wrap}
.cs-ov .cs-meta-row>div{margin-bottom:0}
.cs-ov .cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.cs-ov .cs-stats .stat .n{font-size:clamp(20px,1.6vw,26px);line-height:1.1}
.cs-ov .cs-stats .stat .l{max-width:none;margin-top:6px;font-size:11px;line-height:1.5}
.cs-rail-nav{display:flex;justify-content:space-between;gap:16px;align-items:center;
  border-top:1px solid var(--line);padding-top:16px;margin-top:4px;flex:none}
.cs-rail-nav a{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.cs-rail-nav a:hover{color:var(--ink)}
/* The rail stays pinned at every size. When its copy genuinely outgrows the
   box, casestudy-story.js sets .rail-overflows and the hidden scrollbar becomes
   visible, so the copy reads as scrollable rather than silently cut. */
/* Short viewports: buy the copy more room by tightening only the rail's fixed
   chrome (gaps, rules, list leading). Nothing here changes type size, and it is
   inert on tall screens where the copy already fits. */
@media (min-width:901px) and (max-height:900px){
  .story-page .cs-rail{gap:10px}
  .story-page .cs-back{padding-bottom:10px}
  .cs-chapters{margin-top:clamp(10px,1.6vh,24px)}
  .cs-disciplines li{line-height:1.5}
  .cs-rail-nav{padding-top:12px}
}

@media (min-width:901px){
  /* fade the boundary so overflow reads as "more below" rather than a slice
     through a line of type; it lifts once you have scrolled to the end */
  html.rail-overflows .story-page .cs-chapter-texts{
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent)}
  html.rail-overflows.rail-end .story-page .cs-chapter-texts{
    -webkit-mask-image:none;mask-image:none}
  html.rail-overflows .story-page .cs-chapter-texts{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  html.rail-overflows .story-page .cs-chapter-texts::-webkit-scrollbar{display:block;width:3px}
  html.rail-overflows .story-page .cs-chapter-texts::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  html.rail-overflows .story-page .cs-chapter-texts::-webkit-scrollbar-track{background:transparent}
}

@media (max-width:900px){
  .story-page .cs-rail{height:auto}
  .story-page .cs-chapter-texts{overflow:visible;flex:none}
  .cs-summary,.cs-chapter-texts p{max-width:none}
}

/* two-column pair — tall images side by side, edge to edge, no captions */
.cs-gallery--pair{grid-template-columns:1fr 1fr;gap:12px}
.cs-gallery--pair figure{margin:0}
.cs-gallery--pair image-slot,.cs-gallery--pair img{width:100%;aspect-ratio:2/3;height:auto;display:block;object-fit:cover}
.cs-gallery--pair .ph-slot{aspect-ratio:2/3}   /* keep the placeholder's own flex centring */
@media (max-width:640px){.cs-gallery--pair{grid-template-columns:1fr}}

/* Program Flow panel — same mockup on plain black, sized to the two-up column */
.lift-cover--flow{aspect-ratio:2/3;background:#000}
.lift-cover--flow .lift-phone{font-size:.62px;font-size:calc(92cqh / 718)}

/* a pre-composed shot (its own device render) fills the pair panel directly */
.cs-gallery--pair .lift-shot{width:100%;height:100%;aspect-ratio:2/3;object-fit:cover;object-position:48% center;display:block}
.cs-gallery--pair figure:has(.lift-shot){display:block}

/* outcome tiles, LIFT: electric lime from the brand palette, black text */
.cs-tiles--lime .tile{background:#C8FF28;color:#0D0D0C}
.cs-tiles--lime .n{color:#0D0D0C}
.cs-tiles--lime .n small{color:rgba(13,13,12,.62)}
.cs-tiles--lime .l{color:rgba(13,13,12,.72)}
/* iPrevail: tertiary tint behind the stats, numerals in the brand primary */
.cs-tiles--blue .tile{background:#E6F2F7;color:#1B1B1B}
.cs-tiles--blue .n{color:#00779E}
.cs-tiles--blue .n small{color:rgba(0,119,158,.62)}
.cs-tiles--blue .l{color:rgba(27,27,27,.78)}