/* Roadmap Ascent composition, scoped to the three existing Pragmatic cases.
   The official Poppins / charcoal / orange tokens remain the source of truth. */
html main.phi-page>#cases{display:block;position:relative;padding-top:55px;padding-bottom:0;isolation:isolate;background:var(--deep);overflow:visible}
#cases .roadmap-sticky{position:relative;isolation:isolate;padding:0 0 34px}
#cases .roadmap-pixels{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.65;mask-image:linear-gradient(90deg,transparent 20%,#000 75%)}
#cases .section-head{display:flex;align-items:flex-end;flex-wrap:nowrap;justify-content:space-between;gap:55px;margin:0 0 34px}
#cases .section-head h2{font-size:55px;flex:0 1 62%;line-height:1.128;margin:0}
#cases .roadmap-intro{font-size:17px;line-height:1.618;max-width:34ch;flex:0 1 30%;margin:0}
#cases .roadmap-layout{display:grid;grid-template-columns:233px minmax(0,1fr);gap:55px;align-items:start}
#cases .roadmap-rail{position:relative;display:flex;flex-direction:column;gap:0;width:100%;max-width:none;flex:none;padding:0 55px 0 0;--active-case:0;--rail-step:144px}
#cases .roadmap-rail button{position:relative;display:grid;grid-template-columns:21px minmax(0,1fr);align-content:center;align-items:center;gap:8px 13px;width:100%;height:var(--rail-step);border:0;background:transparent;border-radius:13px;padding:21px 8px;opacity:.55;transition:opacity 233ms,color 233ms;box-shadow:none;color:#fff;text-align:left}
#cases .roadmap-rail button:hover,#cases .roadmap-rail button[aria-pressed=true]{opacity:1;background:transparent;color:#fff}
#cases .roadmap-rail button[aria-pressed=true] .roadmap-order{color:var(--accent)}
#cases .roadmap-rail .brand{width:100%;height:55px;object-fit:contain;object-position:left center;grid-column:2;grid-row:1;max-width:144px}
#cases .roadmap-rail [data-case="2"] .brand{filter:brightness(0) invert(1)!important}
#cases .roadmap-name{grid-column:2;font-size:13px;line-height:1.272;color:var(--muted)}
#cases .roadmap-order{font-size:13px;grid-row:1;color:var(--muted);font-variant-numeric:tabular-nums}
#cases .roadmap-line{position:absolute;top:0;bottom:55px;right:21px;width:1px;background:linear-gradient(transparent,#ff923344 15%,#ff923344 85%,transparent)}
#cases .roadmap-tick{position:absolute;right:-42px;top:50%;width:13px;height:1px;background:#ff923366}
#cases .roadmap-node{position:absolute;z-index:4;right:-6px;top:calc(72px - 27.5px);width:55px;height:55px;border:1px solid #ff9233aa;border-radius:50%;display:grid;place-items:center;background:#1e1626;box-shadow:0 0 21px #ff92334a,0 0 55px #ff92334a;transform:translateY(calc(var(--active-case) * var(--rail-step)));transition:transform 610ms cubic-bezier(.22,1,.36,1);pointer-events:none}
#cases .roadmap-node:before{content:"";position:absolute;inset:-13px;border-radius:50%;background:radial-gradient(#ff923344,transparent 70%);animation:roadmap-glow 2.584s ease-in-out infinite}
#cases .roadmap-node .ico{width:21px;height:21px}
#cases .roadmap-hint{font-size:13px;line-height:1.618;margin:21px 0 0;padding:0 8px;color:#b9aabe}
#cases #case-content{min-width:0;position:relative}
#cases .case-display{position:relative;display:grid;grid-template-columns:1fr 1.272fr;align-items:start;gap:34px;padding:21px 0;background:transparent;border:0;box-shadow:none;border-radius:0;--card-bg:transparent}
#cases .case-display>.lg-gas,#cases .case-display>.lg-sheen{display:none}
#cases .case-copy{min-width:0;position:relative;z-index:2}
#cases .case-brand-label{display:block;font-size:13px;margin-bottom:21px;letter-spacing:.13em;color:var(--accent-soft)}
#cases .case-copy h3{font-size:34px;line-height:1.128;margin:0 0 21px}
#cases .case-copy p,#cases .case-copy ul{font-size:17px;line-height:1.618;margin-top:0}
#cases .case-copy ul{padding-left:21px;margin-bottom:0}
#cases .case-copy li+li{margin-top:8px}
#cases .case-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:21px 0}
#cases .case-kpi>span{font-size:17px;line-height:1.272;color:var(--muted)}
#cases .roadmap-counter{display:flex;font-size:70px;line-height:1;letter-spacing:-.055em;color:var(--accent-soft);font-variant-numeric:tabular-nums;perspective:610px}
#cases .counter-cell{display:block;overflow:hidden;position:relative;color:inherit;font:inherit;letter-spacing:inherit}
#cases .counter-cell>span{display:block;font:inherit;color:inherit;animation:roadmap-digit 610ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--digit) * 55ms);transform-origin:50% 0}
#cases .case-gallery{display:flex;flex-direction:column;gap:13px;min-width:0;margin:0;align-self:center}
#cases .case-photo{display:block;max-height:none;width:100%;height:auto!important;aspect-ratio:3/2;object-fit:contain;background:#211827;border:1px solid #ffffff26;border-radius:13px}
#cases .case-thumbnails{display:grid;width:100%;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
#cases .case-thumbnails button{display:block;width:100%;height:auto;aspect-ratio:1;min-height:44px;padding:0!important;background:#211827;border-radius:8px;overflow:hidden;border:1px solid #ffffff26}
#cases .case-thumbnails button[aria-pressed=true]{border:2px solid var(--accent);box-shadow:0 0 13px #ff923344}
#cases .case-thumbnails img{display:block;width:100%;height:100%;object-fit:contain}
#cases .case-display{animation:roadmap-enter 610ms cubic-bezier(.22,1,.36,1) both}
#cases .case-pager{justify-content:flex-end;gap:13px;margin:13px 0 0;padding:0;font-size:13px}
#cases .case-pager .round{width:44px;height:44px;min-width:44px;min-height:44px}
#cases .source-note{margin:13px 0 0;padding:0;font-size:13px}
@keyframes roadmap-enter{from{opacity:0;transform:translateY(21px)}to{opacity:1;transform:translateY(0)}}
@keyframes roadmap-digit{from{transform:translateY(105%) rotateX(-55deg);opacity:0}to{transform:translateY(0) rotateX(0);opacity:1}}
@keyframes roadmap-glow{50%{opacity:.35;transform:scale(.89)}}
/* Scroll scene is capped at 161.8vh; presentation uses the existing isolated screen. */
@media(min-width:1101px) and (min-height:850px){body:not(.present) main.phi-page>#cases{height:161.8vh}body:not(.present) #cases .roadmap-sticky{position:sticky;top:calc(var(--bar) + 21px)}}
@media(max-width:1300px){#cases .roadmap-layout{grid-template-columns:178px minmax(0,1fr);gap:34px}#cases .roadmap-rail{padding-right:34px}#cases .roadmap-line{right:0}#cases .roadmap-node{right:-27px}#cases .roadmap-tick{right:-20px}#cases .case-copy h3{font-size:27px}#cases .case-copy p,#cases .case-copy ul{font-size:15px}#cases .section-head h2{font-size:43px}#cases .case-display{gap:21px}}
@media(min-width:761px) and (max-height:849px){#cases .section-head{margin-bottom:21px}#cases .section-head h2{font-size:43px}#cases .case-copy p,#cases .case-copy ul{font-size:13px;line-height:1.618}#cases .case-copy h3{font-size:27px;margin-bottom:13px}#cases .case-brand-label{margin-bottom:13px}#cases .roadmap-counter{font-size:55px}#cases .case-kpi{margin:13px 0}#cases .roadmap-rail{--rail-step:113px}#cases .roadmap-node{top:29px}#cases .case-display{padding:0}#cases .roadmap-hint{margin-top:13px}}
@media(max-width:760px){html main.phi-page>#cases{padding-top:34px!important;height:auto}#cases .roadmap-sticky{position:relative;padding-bottom:0}#cases .section-head{display:block;margin-bottom:21px}#cases .section-head h2{font-size:34px;line-height:1.128}#cases .roadmap-intro{font-size:17px;max-width:none;margin-top:21px}#cases .roadmap-layout{display:block}#cases .roadmap-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 0 34px;margin-bottom:21px}#cases .roadmap-rail button{display:flex;flex-direction:column;justify-content:center;gap:8px;height:113px;width:100%;padding:13px 5px}#cases .roadmap-rail .brand{height:34px;width:100%;max-width:113px;object-position:center}#cases .roadmap-name{font-size:13px;text-align:center}#cases .roadmap-order{display:none}#cases .roadmap-line{left:0;right:0;top:auto;bottom:8px;width:100%;height:1px}#cases .roadmap-node{top:auto;bottom:-13px;left:calc((100% - 16px) / 6 - 22px);right:auto;width:44px;height:44px;transform:translateX(calc(var(--active-case) * var(--mobile-step, 100px)))}#cases .roadmap-node .ico{transform:rotate(-90deg)}#cases .roadmap-hint,#cases .roadmap-tick{display:none}#cases .case-display{display:flex;flex-direction:column;gap:21px;padding:13px 0}#cases .case-copy h3{font-size:27px}#cases .case-copy p,#cases .case-copy ul{font-size:17px}#cases .case-brand-label{margin-bottom:13px}#cases .roadmap-counter{font-size:70px}#cases .case-gallery{width:100%;gap:13px}#cases .case-thumbnails{grid-template-columns:repeat(3,minmax(0,1fr))}#cases .case-thumbnails button{aspect-ratio:3/2;min-height:55px}#cases .case-pager{justify-content:space-between;margin-top:21px}#cases .roadmap-pixels{opacity:.4;mask-image:linear-gradient(90deg,transparent,#000)}}
body.paused #cases .roadmap-node:before{animation-play-state:paused}body.paused #cases .case-display,body.paused #cases .counter-cell>span{animation:none}body.paused #cases .roadmap-node{transition:none}
@media(prefers-reduced-motion:reduce){#cases .roadmap-node,#cases .roadmap-rail button{transition:none}#cases .case-display,#cases .counter-cell>span,#cases .roadmap-node:before{animation:none}}

#cases .roadmap-node .ico{transform:rotate(90deg)}#cases .roadmap-rail .brand{filter:brightness(0) invert(1)!important}@media(max-width:760px){#cases .roadmap-node .ico{transform:none}}

@media(min-width:1101px) and (min-height:850px){#cases .roadmap-sticky{min-height:calc(100svh - var(--bar) - 55px)}}

@media(min-width:1101px) and (min-height:850px){#cases .roadmap-sticky{height:calc(100svh - var(--bar) - 34px);min-height:0}}@media(min-width:1101px) and (max-width:1597px){#cases .section-head h2{font-size:43px}#cases .section-head{margin-bottom:21px}#cases .case-copy h3{font-size:27px}}

/* Authentic case films. One shared media geometry for all three brands. */
#cases .roadmap-layout{grid-template-columns:166px minmax(0,1fr);gap:34px}
#cases .roadmap-rail{padding-right:34px}
#cases .roadmap-line{right:0}
#cases .roadmap-node{right:-27px}
#cases .roadmap-tick{right:-20px}
#cases .roadmap-rail .brand{max-width:132px}
#cases .case-display{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:34px;padding:0;align-items:start;min-height:560px;animation-duration:377ms}
#cases .case-copy{padding:13px 0 0;align-self:start}
#cases .case-copy h3{font-size:30px;line-height:1.2;min-height:2.4em}
#cases .case-copy p,#cases .case-copy ul{font-size:15px;line-height:1.618}
#cases .case-copy p{min-height:7.9em;margin-bottom:0}
#cases .case-copy li+li{margin-top:13px}
#cases .case-kpi{margin:21px 0}
#cases .roadmap-counter{font-size:64px}
#cases .case-gallery{display:flex;flex-direction:column;align-self:start;gap:13px;max-height:none!important;width:100%}
#cases #case-film-stage{width:100%;min-width:0}
#cases .case-screen{position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;min-height:0;padding:0;border:1px solid #ff92334d;border-radius:17px;overflow:hidden;background:#211827;--card-bg:#211827}
#cases .case-screen>.case-film{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:16/9;border-radius:inherit}
#cases .case-screen>.case-film>video,#cases .case-screen>.case-film>img{width:100%;height:100%;object-fit:contain!important;transform:none!important}
#cases .case-screen>.lg-gas{z-index:-2;pointer-events:none}
#cases .case-film-meta{display:flex;align-items:center;justify-content:space-between;gap:21px;min-height:65px;padding:10px 0;color:#fff}
#cases .case-film-meta>div{min-width:0;display:flex;flex-direction:column;gap:5px}
#cases .case-film-meta strong{font-size:15px;font-weight:600;line-height:1.272;letter-spacing:0}
#cases .case-film-meta small{font-size:12px;font-weight:400;line-height:1.4;color:#cfc3d3;letter-spacing:0}
#cases .case-video-toggle{flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;border:1px solid #ff923366;border-radius:50%;color:white;background:#302039}
#cases .case-video-toggle .ico{width:18px;height:18px;margin:0}
#cases .case-thumbnails{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
#cases .case-thumbnails .case-clip{position:relative;isolation:isolate;display:block;aspect-ratio:auto;width:100%;height:76px;min-height:76px;padding:0!important;overflow:hidden;border-radius:13px;border:1px solid #ffffff3d;background:#211827;text-align:left;color:white;box-shadow:none}
#cases .case-thumbnails .case-clip[aria-pressed=true]{border:2px solid var(--accent);box-shadow:0 0 13px #ff923326}
#cases .case-clip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#cases .case-clip>.clip-shade{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;background:linear-gradient(0deg,#160f1dfc 0%,#160f1de6 40%,#160f1d11 90%)}
#cases .case-clip>.clip-label{position:absolute;left:13px;right:13px;bottom:13px;z-index:3;display:flex;align-items:flex-end;gap:8px;line-height:1.272;background:none;padding:0;border:0;border-radius:0;text-shadow:none}
#cases .clip-label strong{font-size:13px;font-weight:500;line-height:1.272;letter-spacing:0;color:#fff}
#cases .clip-label>.ico{width:15px;height:15px;min-width:15px;margin:0 0 1px}
#cases .case-clip>.lg-gas{z-index:2;opacity:.12}
#cases .case-clip:before,#cases .case-clip:after{opacity:.1}
#cases .case-bottom{display:flex;justify-content:space-between;align-items:center;gap:21px;padding:13px 0 0}
#cases .case-bottom>.source-note,#cases .case-bottom>.case-pager{margin:0;padding:0}
#cases .case-pager{flex-shrink:0}
#cases .case-pager>span{min-width:44px;white-space:nowrap;text-align:center}
#cases .roadmap-sticky{padding-bottom:0}
#cases .roadmap-rail button{grid-template-columns:1fr;padding:21px 8px;gap:0}
#cases .roadmap-rail .brand{grid-column:1;width:100%;max-width:none;object-position:center}
#cases .roadmap-order{display:none}
#cases .roadmap-name{display:none}
#cases .case-kpi>span{max-width:none;width:auto}
html main.phi-page>#cases{overflow-anchor:none}
@media(min-width:1101px) and (min-height:850px){#cases .roadmap-sticky{height:auto;min-height:calc(100svh - var(--bar) - 55px)}}
@media(min-width:761px) and (max-width:1100px){#cases .roadmap-layout{grid-template-columns:132px minmax(0,1fr);gap:34px}#cases .roadmap-rail{padding-right:21px}#cases .roadmap-rail button{grid-template-columns:1fr;gap:5px;padding:13px 0}#cases .roadmap-order{display:none}#cases .roadmap-rail .brand,#cases .roadmap-name{grid-column:1}#cases .case-display{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:21px}#cases .case-copy h3{font-size:25px}#cases .case-copy p,#cases .case-copy ul{font-size:13px}#cases .case-clip>.clip-label{left:8px;right:8px;bottom:13px}#cases .clip-label>.ico{display:none}}
@media(max-width:760px){
 html main.phi-page>#cases{padding-top:0!important}
 #cases .roadmap-layout{display:block}
 #cases .roadmap-rail{padding:0 0 34px;margin-top:0}
 #cases .roadmap-rail .brand{max-width:113px}
 #cases .roadmap-line{right:0;left:0}
 #cases .roadmap-node{right:auto}
 #cases .case-display{display:flex;gap:34px;padding:0}
 #cases .case-display{min-height:0}
 #cases .case-gallery{order:0;width:100%;gap:8px}
 #cases .case-copy{order:1;padding:0;width:100%}
 #cases .case-copy h3{font-size:27px;min-height:0;margin-bottom:21px}
 #cases .case-copy p,#cases .case-copy ul{font-size:17px;min-height:0}
 #cases .case-kpi{margin:21px 0}
 #cases .case-screen{border-radius:13px}
 #cases .case-film-meta{padding:13px 0;gap:13px;min-height:84px}
 #cases .case-film-meta strong{font-size:14px}
 #cases .case-film-meta small{font-size:12px;max-width:32ch}
 #cases .case-thumbnails{gap:8px}
 #cases .case-thumbnails .case-clip{min-height:100px;aspect-ratio:1;border-radius:8px}
 #cases .case-clip>.clip-label{left:10px;right:10px;bottom:13px}
 #cases .clip-label strong{font-size:12px;line-height:1.3}
 #cases .clip-label>.ico{display:none}
 #cases .case-bottom{flex-wrap:wrap;gap:21px;padding-top:34px}
 #cases .case-bottom>.case-pager{width:100%;justify-content:flex-end}
 #cases .roadmap-sticky{padding-bottom:0}
}

/* Glyph-safe reel: negative tracking must not reduce the clipping window.
   Optical bleed is proportional to font size, not the layout spacing scale. */
#cases .roadmap-counter{overflow:visible;letter-spacing:normal}
#cases .counter-cell{flex:0 0 auto;letter-spacing:normal;padding-inline:.0625em;margin-inline:-.0625em}
#cases .counter-cell>span{letter-spacing:normal}