/* Invisible Banking rebuild: City Bank Next Chapter visual system. */
:root{--paper:#f4f0e8;--paper-light:#fcfaf6;--ink:#151515;--muted:#6d6964;--red:#d71920;--red-deep:#b30d15;--rule:rgba(21,21,21,.16);--card:rgba(255,255,255,.48);--slide-left:clamp(72px,10vw,170px);--slide-right:clamp(30px,6vw,100px)}
html,body{overflow:hidden;background:var(--paper)}
body{-webkit-font-smoothing:antialiased}
.app{height:100dvh;min-height:0;display:block;background:var(--paper)}
.topbar{position:fixed;z-index:35;inset:0 0 auto;height:64px;display:grid;grid-template-columns:1fr auto 1fr;padding:0 clamp(28px,6vw,100px);border-bottom:1px solid var(--rule);background:rgba(244,240,232,.91);backdrop-filter:blur(15px)}
.brand{font-size:13px;letter-spacing:.17em}.brand-rule{width:5px;height:25px}.brand small{display:none}
.presentation-title{text-align:center;text-transform:uppercase}.presentation-title strong{display:block;font-size:9px;letter-spacing:.16em}.presentation-title span{display:block;margin-top:3px;color:var(--muted);font-size:8px;letter-spacing:.11em}
.chapter-label{justify-self:end;color:var(--red);font-size:9px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.story-rail{position:fixed;z-index:36;left:22px;top:50%;display:flex;flex-direction:column;gap:13px;transform:translateY(-50%)}
.story-rail:before{content:"";position:absolute;z-index:-1;left:10px;top:11px;bottom:11px;width:1px;background:var(--rule)}
.story-rail button{width:120px;padding:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--muted);text-align:left;cursor:pointer}
.story-rail span{flex:none;width:21px;height:21px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%;background:var(--paper);font-size:7px;font-weight:800;transition:.2s ease}
.story-rail b{opacity:0;transform:translateX(-4px);font-size:8px;letter-spacing:.09em;text-transform:uppercase;transition:.2s ease}
.story-rail button:hover b,.story-rail button.is-active b{opacity:1;transform:none}.story-rail button.is-active span{border-color:var(--red);background:var(--red);color:white}
.stage{position:absolute;inset:0;padding:0;display:block;perspective:none;overflow:hidden}
.slide{width:100%;height:100dvh;max-height:none;aspect-ratio:auto;border:0;box-shadow:none;container-type:normal;overflow:hidden}
.slide.tone-paper,.slide.cover.tone-dark{background:var(--paper);color:var(--ink)}
.slide.tone-dark{background:var(--ink);color:#fff;box-shadow:none;border:0}.slide.tone-red{background:var(--red);color:#fff;box-shadow:none;border:0}
.slide::after,.signal-rail{display:none!important}
.slide-canvas,.cover .slide-canvas{height:100%;padding:clamp(91px,12vh,130px) var(--slide-right) clamp(102px,13vh,139px) var(--slide-left)}
.scene-header{max-width:100%}.eyebrow{gap:14px;font-size:10px;letter-spacing:.2em}.eyebrow::before{width:34px}
.title{max-width:1100px;margin:19px 0 0;font-size:clamp(39px,4.65vw,76px);line-height:.94;font-weight:800;letter-spacing:-.058em}
.subtitle{max-width:880px;margin:18px 0 0;font-size:clamp(14px,1.18vw,19px);line-height:1.4}
.scene-body{margin-top:clamp(22px,4vh,44px)}.scene-footer{font-size:9px;letter-spacing:.12em;padding-top:16px}
.controls{position:fixed;z-index:40;left:50%;bottom:max(19px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:7px;padding:7px;border:1px solid rgba(21,21,21,.12);border-radius:999px;background:rgba(255,255,255,.91);box-shadow:0 12px 40px rgba(0,0,0,.11);backdrop-filter:blur(16px);transform:translateX(-50%)}
.controls .nav,.controls .control{width:38px;min-width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);box-shadow:none;font-size:17px}
.controls .nav:hover,.controls .control:hover{background:var(--red);color:#fff;transform:none}
.controls .nav:disabled{opacity:.25;background:transparent;color:var(--ink)}
.controls .navgroup{gap:4px}.controls .counter{min-width:61px;font-size:10px;letter-spacing:.1em}
.controls .progress-group{width:215px;padding:0 7px;display:grid;gap:8px}.controls .progress{position:static;height:2px;background:var(--rule);border-radius:2px;overflow:hidden}.controls .progress span{background:var(--red)}
.slide-dots{display:flex;justify-content:center;gap:4px}.slide-dots button{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:rgba(21,21,21,.21);cursor:pointer}.slide-dots button.is-active{background:var(--red);transform:scale(1.45)}
.controls .motion-toggle{width:auto;min-width:0;padding:0 11px;border-left:1px solid var(--rule);border-radius:0;font-size:8px;letter-spacing:.08em;white-space:nowrap}.controls .motion-toggle:hover{border-radius:20px}
.controls .icon-control svg{width:17px;height:17px}
.key-hint{position:fixed;z-index:30;right:clamp(25px,6vw,100px);bottom:34px;color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.slide.tone-dark~.key-hint{color:#fff}
/* Motion is intentional and finite: no decorative perpetual loops. */
.slide,.slide *, .slide::before,.slide::after,.slide *::before,.slide *::after{animation:none!important}
::view-transition-old(root),::view-transition-new(root){animation:none!important}

/* 01 — one glowing hub, four smaller satellites, then the connections. */
.cover-grid{grid-template-columns:1.08fr .92fr;gap:2%}.cover-title{font-size:clamp(68px,9.6vw,156px);line-height:.77;color:var(--ink)}.cover-title span{color:var(--red)}.cover-copy{color:var(--muted);font-size:clamp(16px,1.4vw,22px)}
.cover-outcomes{margin-top:clamp(25px,3vw,42px)}.cover-outcome{border-color:var(--red)}.cover-outcome span{color:var(--muted)}.cover .scene-footer{border-color:var(--rule);color:var(--muted)}
.cover-orbit{width:min(39vw,500px);aspect-ratio:1}.cover-orbit .ring{inset:5%;border-color:rgba(215,25,32,.15)}.cover-orbit .ring:nth-child(2){inset:20%}.cover-orbit .ring:nth-child(3){inset:36%}
.cover-orbit .core{inset:36%;z-index:3;background:radial-gradient(circle at 35% 30%,#ff8587 0,#e62931 35%,#b50b13 100%);box-shadow:0 0 34px rgba(215,25,32,.42),0 0 90px rgba(215,25,32,.17)}
.cover-orbit .orbit-dot{z-index:3;background:var(--red);box-shadow:0 0 0 8px rgba(215,25,32,.11),0 0 25px rgba(215,25,32,.28)}
.cover-orbit .orbit-dot:nth-of-type(5){left:19%;top:19%;width:25px;transform:translate(-50%,-50%)}.cover-orbit .orbit-dot:nth-of-type(6){left:85%;top:25%;width:17px;right:auto;transform:translate(-50%,-50%)}.cover-orbit .orbit-dot:nth-of-type(7){left:80%;top:81%;width:30px;bottom:auto;transform:translate(-50%,-50%)}.cover-orbit .orbit-dot:nth-of-type(8){left:18%;top:78%;width:13px;bottom:auto;transform:translate(-50%,-50%)}
.orb-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.orb-links path{fill:none;stroke:var(--red);stroke-width:1.6;stroke-dasharray:320;stroke-dashoffset:320;opacity:.75}
body:not(.motion-paused):not(.tab-hidden) .cover-orbit .orb-links path{animation:draw-orb .72s ease-out forwards!important}.orb-links path:nth-child(1){animation-delay:.2s!important}.orb-links path:nth-child(2){animation-delay:.45s!important}.orb-links path:nth-child(3){animation-delay:.7s!important}.orb-links path:nth-child(4){animation-delay:.95s!important}
@keyframes draw-orb{to{stroke-dashoffset:0}}

/* 02 — simultaneous joins, followed by a shared colour state. */
.capability-scene{grid-template-columns:.7fr 1.3fr;gap:5%}.advantage-line{font-size:clamp(27px,2.8vw,46px)}.quiet{max-width:410px;font-size:15px;line-height:1.45}
.capability-field{min-height:270px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-content:center}.capability-field::before{display:none}
.capability{min-height:116px;padding:22px 11px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:20px;background:var(--card);font-size:clamp(12px,1.05vw,17px);line-height:1.1;box-shadow:0 12px 28px rgba(21,21,21,.035)}
.capability:nth-child(-n+3)::after{content:"";position:absolute;z-index:1;left:100%;top:50%;width:12px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left}
.capability-bridge{display:none}.capability-result{grid-column:1/-1;padding:13px 16px;border-left:3px solid var(--red);color:var(--muted);font-size:13px}
body:not(.motion-paused):not(.tab-hidden) .capability:nth-child(-n+3)::after{animation:connect-boxes .75s .25s ease-out forwards!important}
body:not(.motion-paused):not(.tab-hidden) .capability{animation:connected-box 1.8s ease-out forwards!important}
@keyframes connect-boxes{to{transform:scaleX(1)}}@keyframes connected-box{0%,57%{border-color:var(--rule);background:var(--card);color:var(--ink)}100%{border-color:var(--red);background:var(--red);color:white}}

/* 03 — distinct service cards and a clearly isolated shared capability. */
.overlap-scene{grid-template-columns:1fr .64fr 1fr;gap:12px;align-items:stretch}
.service-lane{position:relative;z-index:1;padding:26px;border:1px solid var(--rule);border-radius:24px;background:var(--card)}.service-lane::after{display:none}.service-lane h3{font-size:clamp(23px,2.2vw,34px)}.service-lane ul{font-size:clamp(12px,1vw,16px);line-height:1.75}.service-lane li{padding:4px 0}.service-lane .shared-feature{color:var(--red);font-weight:800}
.overlap-core{position:relative;z-index:3;width:calc(100% + 48px);min-height:235px;margin-inline:-24px;aspect-ratio:auto;display:flex;flex-direction:column;justify-content:center;gap:17px;padding:22px;border-radius:24px;background:var(--red);font-size:12px;letter-spacing:0;line-height:1.35;box-shadow:0 14px 38px rgba(215,25,32,.19)}.overlap-core b{font-size:10px;letter-spacing:.16em}.overlap-core span{font-size:clamp(16px,1.45vw,23px);font-weight:800;letter-spacing:-.04em}.overlap-core small{color:rgba(255,255,255,.78);font-size:11px;text-transform:none}
body:not(.motion-paused):not(.tab-hidden) .overlap-core{animation:shared-reveal .7s .65s ease-out both!important}
body:not(.motion-paused):not(.tab-hidden) .service-lane.left{animation:service-left .8s .2s ease-out both!important}
body:not(.motion-paused):not(.tab-hidden) .service-lane.right{animation:service-right .8s .2s ease-out both!important}
body:not(.motion-paused):not(.tab-hidden) .shared-feature{animation:feature-converge 1s .25s ease-out both!important}
@keyframes shared-reveal{from{opacity:.15;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes service-left{from{transform:translateX(-18px)}to{transform:translateX(10px)}}@keyframes service-right{from{transform:translateX(18px)}to{transform:translateX(-10px)}}@keyframes feature-converge{from{opacity:1}to{opacity:.45}}

/* 04 — stronger hierarchy, not more motion. */
.consequence-scene{grid-template-columns:1fr 60px 1fr;gap:12px}.consequence{min-height:290px;padding:27px;justify-content:flex-start;border:1px solid var(--rule);border-radius:24px;background:var(--card)}
.consequence-no{color:var(--red);font-size:10px;font-weight:800;letter-spacing:.15em}.consequence-word{margin-top:auto;font-size:clamp(50px,6.4vw,102px)}.consequence h3{margin:20px 0 6px;font-size:17px}.consequence p{max-width:400px;font-size:13px}.consequence-divider{height:auto;display:grid;place-items:center;background:none;color:var(--red);font-size:34px;font-weight:300}
.consequence-divider::after{display:none}

/* 05 — connected tablet cards originate behind the customer need. */
.ecosystem-scene{grid-template-columns:.58fr 1.42fr;gap:4%}.ecosystem-copy{font-size:clamp(27px,2.9vw,48px)}.ecosystem-map{min-height:340px}.ecosystem-map::before,.ecosystem-map::after{display:none}
.ecosystem-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.ecosystem-map svg path{fill:none;stroke:rgba(215,25,32,.55);stroke-width:1.4;stroke-dasharray:1250;stroke-dashoffset:1250}
.ecosystem-core{z-index:5;width:152px;height:152px;aspect-ratio:auto;border-radius:50%;box-shadow:0 10px 34px rgba(215,25,32,.25);font-size:20px}
.ecosystem-node{min-width:135px;min-height:57px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:18px;background:var(--paper-light);box-shadow:0 10px 30px rgba(21,21,21,.07);font-size:10px}
.ecosystem-node:nth-of-type(2){top:0;left:38%;--dx:0px;--dy:145px}.ecosystem-node:nth-of-type(3){top:41%;right:0;--dx:-210px;--dy:0px}.ecosystem-node:nth-of-type(4){bottom:0;left:38%;--dx:0px;--dy:-145px}.ecosystem-node:nth-of-type(5){top:41%;left:0;--dx:210px;--dy:0px}
body:not(.motion-paused):not(.tab-hidden) .ecosystem-map svg path{animation:ecosystem-draw 1.5s .5s ease-out forwards!important}
body:not(.motion-paused):not(.tab-hidden) .ecosystem-node{animation:tablet-emerge .9s ease-out both!important}.ecosystem-node:nth-of-type(2){animation-delay:.05s!important}.ecosystem-node:nth-of-type(3){animation-delay:.2s!important}.ecosystem-node:nth-of-type(4){animation-delay:.35s!important}.ecosystem-node:nth-of-type(5){animation-delay:.5s!important}
@keyframes ecosystem-draw{to{stroke-dashoffset:0}}@keyframes tablet-emerge{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.55)}to{opacity:1;transform:none}}

/* 06, 07, 10 — line pauses at each station and the station fills. */
.journey-scene{justify-content:center}.journey-track{gap:7px}.journey-track::before{top:17px;height:2px;background:var(--rule)}.journey-track::after{top:17px;width:0;height:2px;border-radius:0;background:var(--red)}
.journey-step{padding:54px 14px 14px 0}.journey-step::before{top:11px;z-index:2;width:14px;height:14px;background:var(--paper)}.journey-step h3{font-size:clamp(22px,2.1vw,34px)}.journey-step p{max-width:210px;font-size:clamp(12px,1vw,15px)}.journey-close{font-size:clamp(18px,1.6vw,26px)}
body:not(.motion-paused):not(.tab-hidden) .journey-track::after{animation:journey-stops 5.3s ease-in-out forwards!important}
body:not(.motion-paused):not(.tab-hidden) .journey-step::before,body:not(.motion-paused):not(.tab-hidden) .role-step::before{animation:station-fill 5.3s linear forwards!important}
.journey-step:nth-child(1)::before,.role-step:nth-child(1)::before{--station:0}.journey-step:nth-child(2)::before,.role-step:nth-child(2)::before{--station:1}.journey-step:nth-child(3)::before,.role-step:nth-child(3)::before{--station:2}.journey-step:nth-child(4)::before,.role-step:nth-child(4)::before{--station:3}
@keyframes journey-stops{0%,14%{width:0}22%,37%{width:33.333%}45%,60%{width:66.666%}68%,100%{width:100%}}
@keyframes station-fill{0%,14%{background:var(--paper);box-shadow:none}22%,100%{background:var(--red);box-shadow:0 0 0 5px rgba(215,25,32,.13)}}
/* Per-stop delays keep the fill in step with the paused line. */
.journey-step:nth-child(1)::before,.role-step:nth-child(1)::before{animation-delay:-.75s!important}.journey-step:nth-child(2)::before,.role-step:nth-child(2)::before{animation-delay:.35s!important}.journey-step:nth-child(3)::before,.role-step:nth-child(3)::before{animation-delay:1.65s!important}.journey-step:nth-child(4)::before,.role-step:nth-child(4)::before{animation-delay:2.95s!important}

/* 08 — relationship matrix. */
.network-scene{grid-template-columns:.38fr .62fr;gap:4%}.network-lead{font-size:clamp(25px,2.7vw,43px)}
.network-matrix{display:grid;grid-template-columns:1.05fr repeat(3,1fr);border:1px solid var(--rule);border-radius:22px;overflow:hidden;background:var(--paper-light);box-shadow:0 12px 32px rgba(21,21,21,.04)}
.network-matrix>div{min-height:61px;padding:14px 12px;display:flex;align-items:center;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:clamp(10px,.85vw,13px);line-height:1.25}.network-matrix>div:nth-child(4n){border-right:0}.network-matrix>div:nth-last-child(-n+4){border-bottom:0}
.network-matrix .matrix-head,.network-matrix .matrix-corner{background:var(--ink);color:white;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.network-matrix .matrix-corner{background:var(--red)}.network-matrix .matrix-rowhead{color:var(--red);font-weight:800}

/* 09 — a visible, animated gap and a readable label at all sizes. */
.gap-scene{grid-template-columns:1fr .56fr 1fr;gap:3%}.mandate-row{font-size:clamp(11px,.9vw,14px)}.mandate-row b{font-size:10px}
.gap-space{height:82%;min-height:230px;border:1px dashed rgba(215,25,32,.4);border-radius:22px;background:linear-gradient(90deg,rgba(215,25,32,.025),rgba(215,25,32,.11),rgba(215,25,32,.025));overflow:visible}
.gap-space::before{left:-6%;right:-6%;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;z-index:2}
.gap-space::after{content:"";position:absolute;inset:12px;border:1px solid rgba(215,25,32,.14);border-radius:16px}
.gap-bridge{position:absolute;z-index:1;inset:20% 14%;border:1px solid rgba(215,25,32,.32);border-radius:50%;opacity:0}
.gap-label{padding:14px 12px;border:1px solid rgba(215,25,32,.25);border-radius:14px;background:var(--paper-light);font-size:13px;line-height:1.3;box-shadow:0 12px 30px rgba(215,25,32,.11)}
.gap-callout{font-size:clamp(26px,2.55vw,42px)}.gap-callout span{font-size:clamp(12px,1vw,16px)}
body:not(.motion-paused):not(.tab-hidden) .gap-space::before{animation:gap-cross 1.5s .35s ease-out forwards!important}
body:not(.motion-paused):not(.tab-hidden) .gap-bridge{animation:gap-emphasis 1s .8s ease-out forwards!important}
@keyframes gap-cross{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}@keyframes gap-emphasis{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}

/* 10 — operational path and the two transformation domains. */
.role-scene{grid-template-columns:1.22fr .78fr;gap:5%}.role-process::before{top:24px;height:2px}.role-process::after{top:24px;left:4%;width:0;height:2px;border-radius:0}
.role-step{padding-top:57px}.role-step::before{top:18px;z-index:2;background:var(--paper)}.role-step b{font-size:clamp(18px,1.5vw,24px)}.role-step span{font-size:clamp(11px,.85vw,14px)}
body:not(.motion-paused):not(.tab-hidden) .role-process::after{animation:journey-stops 5.3s ease-in-out forwards!important}
.role-domains{gap:10px}.role-domain{min-height:122px;padding:15px;border:1px solid var(--rule);border-radius:18px;background:var(--card)}.role-domain b{font-size:10px}.role-domain p{font-size:clamp(11px,.88vw,14px)}
.domain-visual{position:relative;width:100%;height:23px;margin-bottom:10px}.domain-visual i{position:absolute;top:8px;width:16px;height:10px;border-radius:4px;background:var(--red)}.horizontal-visual i:nth-child(1){left:6%}.horizontal-visual i:nth-child(2){left:42%}.horizontal-visual i:nth-child(3){left:80%}.horizontal-visual em{position:absolute;left:7%;right:11%;top:13px;height:1px;background:var(--red)}
.ecosystem-visual i:nth-child(1){left:7%;top:1px}.ecosystem-visual i:nth-child(2){left:45%;top:13px}.ecosystem-visual i:nth-child(3){left:82%;top:1px}.ecosystem-visual em{position:absolute;left:10%;right:12%;top:12px;height:1px;background:var(--red);transform:skewY(8deg)}

/* 11 — explicit opportunity-explorer role, ownership intact. */
.boundary-list{border-top:0}.boundary-row{min-height:48px;padding:11px 0;font-size:clamp(10px,.9vw,14px)}.boundary-bridge::before,.boundary-bridge::after{display:none}.bridge-copy{width:255px;height:255px;aspect-ratio:auto;display:flex;flex-direction:column;gap:14px;justify-content:center;border-radius:50%;font-size:20px;line-height:1.2;box-shadow:0 0 0 18px rgba(215,25,32,.08)}.bridge-copy small{font-size:9px;letter-spacing:.15em}

/* 12 — a substantial, legible portfolio with no bobbing. */
.evidence-scene{height:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}.evidence-scene::before,.evidence-item::after{display:none}
.evidence-item{min-height:240px;height:auto;padding:23px 20px;border:1px solid var(--rule);border-radius:20px;background:var(--card)}.evidence-item b{font-size:9px}.evidence-item p{margin-top:21px;font-size:clamp(12px,1vw,16px);line-height:1.58;font-weight:650}

/* 13 — the shift travels across the divider and lands on a more systematic model. */
.shift-scene{height:clamp(265px,36vh,320px);grid-template-columns:1fr 90px 1fr;gap:2%}.shift-column{padding:18px;border:1px solid var(--rule);border-radius:22px;background:var(--card)}.shift-column.structured{border-color:rgba(215,25,32,.35);background:rgba(215,25,32,.045)}
.shift-column h3{display:flex;justify-content:space-between;gap:15px;font-size:11px}.shift-column h3 small{color:var(--muted);font-size:9px;letter-spacing:.05em;text-transform:none}.shift-oneliner{min-height:49px;margin:4px 0 9px;font-size:clamp(14px,1.25vw,20px);font-weight:750;line-height:1.2;letter-spacing:-.02em}
.shift-item{padding:8px 0;font-size:clamp(11px,.88vw,14px)}.shift-column.today .shift-item:nth-child(n){transform:none}
.shift-transform{height:auto}.shift-transform::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;background:var(--red)}.shift-transform span{width:66px;height:66px;aspect-ratio:auto;font-size:34px;transform:none;box-shadow:0 0 0 11px var(--paper)}.shift-transform small{position:absolute;top:calc(50% + 43px);color:var(--red);font-size:9px;font-weight:800;letter-spacing:.15em}
body:not(.motion-paused):not(.tab-hidden) .shift-transform span{animation:shift-across 1.1s .25s ease-out both!important}
@keyframes shift-across{from{transform:translateX(-52px);opacity:.3}to{transform:translateX(0);opacity:1}}

/* 14, 15, 16 — outcome, mandate statement, AI prospects bridge. */
.outcome-scene{gap:12px}.outcome{min-height:230px;padding:24px;border:1px solid var(--rule);border-radius:20px;background:var(--card)}.outcome+.outcome{padding-left:24px;border-left:1px solid var(--rule)}.outcome::after{display:none}.outcome p{font-size:clamp(12px,1vw,16px)}
.reveal .title{max-width:760px;font-size:clamp(28px,2.4vw,38px);opacity:.75}.reveal-scene{max-width:1100px}.reveal-quote{font-size:clamp(31px,3.6vw,57px);line-height:1.08}.reveal-close{font-size:clamp(17px,1.7vw,27px);opacity:.72}.reveal-word{opacity:.45}
.section-intro .title{max-width:1050px;font-size:clamp(47px,5.5vw,88px)}.section-intro .title .accent{color:#ff555a}.intro-scene{display:grid;grid-template-columns:.4fr 1fr;gap:5%;align-items:center}.intro-number{color:var(--red);font-size:clamp(150px,20vw,300px);font-weight:900;letter-spacing:-.13em;line-height:.75}.intro-scene p{max-width:600px;font-size:clamp(23px,2.5vw,40px);line-height:1.08;font-weight:750;letter-spacing:-.045em}.intro-path{display:flex;align-items:center;gap:12px;margin-top:27px;color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.intro-path i{flex:1;height:1px;background:var(--red)}

/* 17–20 — concise scenarios and benefits, expandable evidence. */
.prospects .title{font-size:clamp(35px,4vw,62px)}.prospects .scene-body{justify-content:center}.prospect-scene{height:clamp(260px,37vh,320px);flex:none;min-height:0;gap:16px}.prospect-card{min-height:0;padding:20px;border-radius:24px;background:var(--card)}.tone-dark .prospect-card{background:rgba(255,255,255,.07)}.prospect-card::before{display:none}.prospect-card:hover{transform:translateY(-2px)}
.prospect-card h3{margin:17px 0;font-size:clamp(23px,2vw,34px)}.prospect-card .prospect-story{display:grid;grid-template-columns:65px 1fr;gap:10px;align-items:start;margin:0 0 10px;color:var(--ink);font-size:clamp(11px,.96vw,15px);line-height:1.38}.tone-dark .prospect-card .prospect-story{color:#fff}.prospect-story b{color:var(--red);font-size:9px;letter-spacing:.12em;text-transform:uppercase}.tone-dark .prospect-story b{color:#ff7f83}.prospect-benefit{opacity:.8}.causal-flow{padding-top:12px}.flow-line i{animation:none!important}.explore{font-size:9px}.prospect-takeaway{font-size:clamp(13px,1.15vw,18px)}

/* 21 — role-led path to the future, with the original audience outcomes. */
.conclusion-scene{grid-template-columns:.8fr 1.2fr;gap:6%}.final-lockup h2{font-size:clamp(61px,7vw,113px)}.final-cycle{border-color:var(--rule-light)}.final-step{grid-template-columns:78px 1fr;padding:12px 0}.final-step::after{display:none}.final-step span{font-size:clamp(13px,1.08vw,17px)}.audience-row{gap:10px}.audience-row span{font-size:clamp(9px,.75vw,12px)}

.overlay{background:rgba(21,21,21,.96)}.thumb{border-radius:18px}.detail-shell{border-radius:24px}
@media(max-width:1100px){
 :root{--slide-left:clamp(34px,6vw,85px);--slide-right:clamp(28px,5vw,70px)}
 .story-rail,.key-hint{display:none}
 .title{font-size:clamp(36px,4.55vw,55px)}
 .cover-title{font-size:clamp(62px,9vw,104px)}
 .evidence-scene{grid-template-columns:repeat(2,1fr);gap:9px}.evidence-item{min-height:145px;padding:16px 18px}.evidence-item p{margin-top:10px;font-size:12px;line-height:1.45}
 .network-scene{grid-template-columns:.28fr .72fr;gap:3%}.network-lead{font-size:clamp(23px,2.5vw,30px)}
 .slide-canvas,.cover .slide-canvas{padding-top:clamp(86px,10vh,110px);padding-bottom:clamp(95px,11vh,120px)}
}
@media(max-width:700px){
 .topbar{height:55px;padding:0 18px;grid-template-columns:1fr auto}.presentation-title{display:none}.chapter-label{font-size:8px}
 .controls{gap:2px;bottom:10px;padding:5px}.controls .progress-group{width:100px}.controls .motion-toggle{display:none}.controls .nav,.controls .control{width:34px;min-width:34px;height:34px}.controls .counter{min-width:50px;font-size:8px}
 html,body{overflow:auto}.app{min-height:100dvh}.stage{position:relative;inset:auto;overflow:auto}.slide{height:auto;min-height:100dvh;max-height:none;overflow:visible}.slide-canvas,.cover .slide-canvas{height:auto;min-height:100dvh;padding:82px 22px 104px}
 .scene-body{flex:none;margin-top:28px}.scene-footer{margin-top:32px}.title{font-size:clamp(35px,8.5vw,54px)}.subtitle{font-size:14px}
 .cover-grid,.capability-scene,.ecosystem-scene,.network-scene,.role-scene,.boundary-scene,.conclusion-scene,.intro-scene{grid-template-columns:1fr;gap:25px}
 .cover-grid{align-content:start}.cover-title{font-size:clamp(63px,17vw,95px)}.cover-orbit{display:block;width:min(74vw,380px);margin:auto}.cover-outcomes{gap:7px}
 .capability-field{min-height:0;grid-template-columns:repeat(2,1fr)}.capability{min-height:75px}.capability:nth-child(-n+3)::after{display:none}
 .overlap-scene{grid-template-columns:1fr;gap:10px}.service-lane{padding:18px}.overlap-core{width:100%;min-height:120px;margin-inline:0}
 .consequence-scene{grid-template-columns:1fr;gap:8px}.consequence{min-height:185px}.consequence-divider{height:34px}.consequence-word{font-size:60px}
 .ecosystem-map{min-height:330px}.ecosystem-node{min-width:96px;font-size:8px}.ecosystem-core{width:125px;height:125px;font-size:17px}
 .journey-track{grid-template-columns:repeat(2,1fr);gap:9px}.journey-track::before,.journey-track::after{display:none}.journey-step{min-height:145px;padding:15px;border:1px solid var(--rule);border-radius:17px;background:var(--card)}.journey-step::before{display:none}.journey-step h3{font-size:24px}
 .network-matrix{overflow-x:auto;min-width:0}.network-matrix>div{min-height:65px;padding:9px 7px;font-size:10px}.network-matrix .matrix-head,.network-matrix .matrix-corner{font-size:8px}
 .gap-scene{grid-template-columns:1fr;gap:16px}.gap-space{height:145px;min-height:145px}.gap-callout{font-size:31px}
 .role-process{grid-template-columns:repeat(4,1fr)}.role-step{padding:45px 5px 0 0}.role-step b{font-size:15px}.role-step span{font-size:10px}
 .boundary-bridge{min-height:220px}.bridge-copy{width:190px;height:190px;font-size:16px}
 .evidence-scene{grid-template-columns:1fr 1fr}.evidence-item{min-height:200px}.evidence-item p{font-size:11px}
 .shift-scene{height:auto;grid-template-columns:1fr;gap:5px}.shift-column{padding:18px}.shift-transform{height:55px}.shift-transform span{width:45px;height:45px;font-size:23px}.shift-transform small{display:none}
 .outcome-scene{grid-template-columns:1fr}.outcome{min-height:0;padding:18px}.outcome+.outcome{padding-left:18px}
 .reveal-scene{margin-top:20px}.reveal-quote{font-size:clamp(31px,7vw,46px)}.reveal-word{display:none}
 .section-intro .title{font-size:clamp(43px,10vw,65px)}.intro-number{font-size:140px}.intro-scene p{font-size:26px}
 .prospect-scene{height:auto;grid-template-columns:1fr}.prospect-card{min-height:230px}.prospect-card h3{font-size:26px}.prospect-card .prospect-story{font-size:13px}
 .final-lockup h2{font-size:75px}.audience-row{grid-template-columns:1fr 1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.slide,.slide *, .slide::before,.slide::after,.slide *::before,.slide *::after{animation:none!important;transition-duration:.01ms!important}}