/* The world frames the page. Customer stories remain single, selectable scenes. */
:root{--muted:#59645e;--space-tight:8px;--space-item:16px;--space-copy:24px;--space-group:32px;--space-scene:48px;--space-inset:64px;--space-section:96px;--space-close:160px}
[data-theme=dark]{--muted:#bcc6c0}
[hidden]{display:none!important}
html{scrollbar-color:var(--line) var(--bg);scroll-padding-top:24px}
::selection{background:var(--blue);color:var(--bg)}
.world-hero{position:relative;isolation:isolate;height:max(720px,calc(100svh - 80px));overflow:hidden;background:#efede6;color:#242923}
.world-visual{position:absolute;inset:0;z-index:-1;overflow:hidden}
.world-visual img,.world-visual video{width:100%;height:calc(100% + 30px);object-fit:cover;object-position:center;transform:translateY(var(--world-drift,0px))}
.world-visual video{position:absolute;inset:0;opacity:0;transition:opacity 300ms ease-out}
.world-visual video.playing{opacity:1}
.world-copy{height:100%;display:flex;align-items:flex-start;position:relative}
.world-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#efede6ed 0%,#efede6dc 28%,#efede680 42%,#efede600 60%)}
.world-copy>div{max-width:48%;padding-block:clamp(64px,11svh,160px)}
.world-copy h1{font-size:clamp(40px,4vw,60px);line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
.world-copy h1 em{color:#0866d9}
.world-copy h1{margin:0}.world-copy p{font-size:18px;line-height:1.7;max-width:43ch;margin:var(--space-group) 0;color:#3c4840}.world-copy .primary{margin:0}
.world-copy .primary{background:#242923;color:#fff;border-color:#242923}
.world-copy .primary:hover{background:#0067e6;border-color:#0067e6}
/* A complete viewport is the narrative canvas, with its composition centred.
   Only the selected scene exists; no future beats are laid out as cards. */
.chapter .opening-stage,.chapter .case-stage{height:auto;min-height:min(100svh,960px);justify-content:center;gap:var(--space-group);padding-block:var(--space-inset)}
.opening-stage .scene-layout,.case-stage .scene-layout{flex:none;max-height:none;min-height:0}
.scene-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.case-layout{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.film{min-width:0;width:100%;align-self:center;aspect-ratio:4/3}
.story-topline{justify-content:center}
.narrative #intro-title{font-size:var(--type-display);line-height:1.12;letter-spacing:-.035em;white-space:pre-line;margin-bottom:24px}
.case-layout .narrative h3{letter-spacing:-.035em}
.narrative-text,.case-layout .narrative-text{max-width:54ch}
.beat-nav button,.intro-choices button,.inline-link,.primary,.navigation nav{font-size:16px}
.beat-nav button{min-height:44px}
.stage-bottom{margin-top:0}
.case-heading{justify-content:center;text-align:center;align-items:center}
.case-heading .eyebrow,#case-kind{display:none}
.case-heading h2{font-size:var(--type-section)}
.case-kind{font-size:14px;white-space:normal;max-width:140px}
.bridge{display:block;text-align:center;max-width:var(--page-width);padding-block:var(--space-section)}
.bridge-question{display:none}
.bridge h2{font-size:clamp(44px,5vw,72px);line-height:1.1;letter-spacing:-.035em;max-width:18ch;margin:0 auto var(--space-group);text-wrap:balance}
.bridge-copy{font-size:20px;line-height:1.7;max-width:62ch;margin-inline:auto}
.individual{padding-block:var(--space-section)}
.individual .eyebrow{display:none}
.individual h2,.offer-intro h2{letter-spacing:-.035em}
.offer-section{padding-block:var(--space-section)}

.knowledge{padding-block:var(--space-section)}.knowledge .section-heading{text-align:center;margin-bottom:var(--space-scene)}.knowledge h2{font-size:var(--type-section)}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.article-card{background:var(--wash);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-width:0}.article-card:first-child{grid-row:span 2}.article-card img{width:100%;aspect-ratio:16/10;object-fit:cover}.article-card:first-child img{aspect-ratio:1/1}.article-copy{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1}.article-copy h3{font-size:24px}.article-copy p{font-size:16px;line-height:1.6}.article-category{font-size:14px;color:var(--muted)}.article-card a{display:flex;flex-direction:column;flex:1}.article-card:hover h3{color:var(--blue)}

.site-footer{display:block;position:relative;isolation:isolate;padding:var(--space-close) 0 0;overflow:clip;background:#e8e4db;border-top:0;color:#242923;--muted:#59645e;--ink:#242923;--blue:#0866d9;--line:#cfcec5}
.footer-invitation{text-align:center;position:relative;z-index:1}
.footer-invitation h2{font-size:clamp(40px,4.5vw,64px);line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
.footer-invitation h2{margin:0}.footer-invitation p{font-size:18px;margin:var(--space-group) 0;color:var(--ink)}
.footer-invitation .primary{margin-top:0}
.footer-world{position:relative;width:100%;max-width:none;margin:calc(-1*var(--space-section)) 0 0;overflow:hidden;z-index:-1}
.footer-world img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center bottom;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent)}
.site-footer:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(#efede6 35%,#e8e4db 85%)}
.footer-panel{position:relative;width:100%;max-width:none;background:#faf9f4;border-radius:0;margin-top:calc(-1*var(--space-section));padding:var(--space-scene) var(--page-gutter);z-index:2}
.site-footer .logo-light-ground{display:block!important}.site-footer .logo-dark-ground{display:none!important}
.site-footer .primary{background:#242923;color:#fff;border-color:#242923}
.footer-main{width:100%;max-width:1024px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:var(--space-scene);padding:0}
.footer-brand p{font-size:15px;color:var(--muted);max-width:38ch;margin-top:var(--space-copy)}
.footer-main nav{display:flex;flex-direction:column;gap:var(--space-item);font-size:16px;align-items:flex-start;min-width:0}
.footer-bottom{width:100%;max-width:1024px;margin-inline:auto;font-size:13px;color:var(--muted);padding:var(--space-copy) 0 0;margin-top:var(--space-group);border-top:1px solid var(--line)}
@media(max-width:1100px) and (min-width:761px){.world-copy>div{max-width:45%}.world-copy h1{font-size:42px}.world-copy p{font-size:17px}.world-visual img,.world-visual video{object-position:60% center}.scene-layout,.case-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:760px){
 :root{--space-tight:8px;--space-item:12px;--space-copy:16px;--space-group:24px;--space-scene:32px;--space-inset:32px;--space-section:64px;--space-close:96px}
 .world-hero{height:auto;min-height:0;display:flex;flex-direction:column}
 .world-visual{position:relative;z-index:0;width:100%;height:290px;overflow:hidden}
 .world-visual img,.world-visual video{object-position:75% 70%;width:150%;max-width:none;margin-left:-50%;height:100%;transform:none}
 .world-copy{height:auto}.world-copy>div{max-width:none;padding-block:var(--space-group) var(--space-scene)}.world-hero:before{display:none}
 .world-copy h1{font-size:36px;max-width:19ch}.world-copy p{font-size:16px;line-height:1.65;margin:24px 0}
 .chapter .opening-stage,.chapter .case-stage{height:auto;min-height:100svh;gap:var(--space-group);padding-block:var(--space-inset);justify-content:center}
 .opening-stage .scene-layout,.case-stage .scene-layout{flex:none;gap:var(--space-group)}
 .narrative #intro-title{font-size:34px;line-height:1.14;margin-bottom:18px}
 .film,.opening .film,.case-film{aspect-ratio:16/9;width:100%;max-height:27svh}
 .intro-choices button{font-size:14px;padding:8px 10px}.beat-nav button{font-size:14px}.inline-link{font-size:15px}
 .case-heading{align-items:start;gap:16px;text-align:left}.case-heading h2{font-size:30px}.case-kind{font-size:12px;max-width:95px}
 .mobile-choice{gap:12px;font-size:14px}.mobile-choice select{font-size:16px}
 .bridge{padding-block:64px}.bridge h2{font-size:38px;max-width:15ch;margin-bottom:24px}.bridge-copy{font-size:18px}
 .individual,.offer-section,.knowledge{padding-block:var(--space-section)}
 .article-grid{grid-template-columns:minmax(0,1fr);gap:20px}.article-card:first-child{grid-row:auto}.article-card:first-child img{aspect-ratio:16/10}.article-copy{padding:20px}
 .site-footer{padding-top:var(--space-close)}.footer-invitation h2{font-size:38px}.footer-invitation p{font-size:16px;margin-block:20px}
 .footer-world{margin-top:0;width:150%;margin-left:-25%}.footer-world img{aspect-ratio:16/10}
 .footer-panel{margin-top:-20px;padding:var(--space-group)}.footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-group)}.footer-brand{grid-column:1 / -1}.footer-main nav{font-size:15px;gap:12px}.footer-bottom{font-size:12px;line-height:1.7}.footer-brand p{font-size:15px}
}
@media(max-width:380px){.narrative #intro-title{font-size:30px}.bridge h2,.world-copy h1,.footer-invitation h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){.chapter .opening-stage,.chapter .case-stage{height:auto!important;min-height:0;padding-block:32px}.world-visual video{display:none}.world-visual img{transform:none}}

/* Business selection is editorial navigation, not a form field. */
.mobile-choice{display:none}
.case-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;width:100%;padding:0 0 8px;border-bottom:1px solid var(--line)}
.case-choices button{flex:0 0 auto;min-height:44px;padding:10px 0;font-size:16px;line-height:1.45;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted)}
.case-choices button[aria-pressed=true]{background:none;color:var(--ink);border-color:var(--blue);font-weight:500}
.case-choices button:hover{color:var(--ink)}
/* Tall desktop windows need a taller composition, not a half-empty canvas. */
@media(min-width:1101px) and (max-aspect-ratio:6/5){.opening .film,.case-film{aspect-ratio:1/1;max-height:none}.film img,.film video{object-position:50% 50%}}
@media(max-width:760px){.case-choices{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:24px;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.case-choices button{font-size:15px}.case-heading{justify-content:flex-start}}
/* Scale the composition with large desktops instead of floating a 1240px module
   inside them. The cap on stage height also keeps section entrances connected. */
@media(min-width:1480px){
 :root{--page-width:1680px;--page-gutter:clamp(48px,5vw,112px);--type-display:clamp(58px,3.3vw,72px);--type-section:clamp(44px,2.7vw,56px);--type-story:clamp(42px,2.5vw,52px);--type-body:20px}
 .scene-layout,.case-layout{gap:5%}
 .narrative-text,.case-layout .narrative-text{max-width:45ch}
 .beat-nav button,.intro-choices button,.inline-link,.narrative>.inline-link,.case-choices button{font-size:18px}
 .scene-kind,.stage-bottom,.clues span{font-size:16px}

}
@media(min-width:1480px) and (min-height:1000px){
 .chapter .opening-stage,.chapter .case-stage{height:100svh}
 .opening .film,.case-film{height:min(calc(100svh - 320px),880px);aspect-ratio:auto;max-height:none}
}
.beat-copy{display:flow-root}
.beat-copy h2,.beat-copy h3,.narrative #intro-title{margin:0 0 var(--space-copy)}
.beat-copy .narrative-text{margin:0}
.beat-copy .clues{margin:var(--space-copy) 0 0;gap:var(--space-tight)}
.beat-copy .case-role{margin:var(--space-item) 0 0}
.beat-copy>:last-child{margin-bottom:0}
.chapter .case-stage{gap:var(--space-group)}
.case-stage .case-choices{margin-bottom:var(--space-item)}
.chapter .opening-stage{gap:var(--space-scene)}
.narrative .beat-nav{margin:var(--space-group) 0 var(--space-copy)}
.case-layout .narrative .beat-nav{margin:0 0 var(--space-copy)}
.narrative>.inline-link{margin:var(--space-copy) 0 0}
.scene-kind{margin-bottom:var(--space-item)}
.stage-bottom{padding-top:var(--space-copy)}
.individual-copy p{margin:0 0 var(--space-copy)}
.individual-copy p:last-child{margin:0}
.offer-intro{margin-bottom:var(--space-scene)}
.offers article{padding-top:var(--space-group)}
.offers h3{margin:var(--space-item) 0 var(--space-copy)}
.offers article>p:not(.offer-status){margin:0 0 var(--space-group)}
.offers .primary{margin:0}
.offer-status{margin:0}
/* Short native sticky holds give the two conclusions a reading beat. */
.reading-moment{position:relative}
.reading-moment{height:calc(var(--reading-height,480px) + var(--reading-top,120px) + var(--reading-travel,300px))!important}
.reading-moment .reading-stage{height:auto;min-height:0;top:var(--reading-top,120px);overflow:visible;align-content:center;padding-block:var(--space-inset)}
.reading-moment .bridge{display:flex;flex-direction:column;justify-content:center}
.reading-moment h2:after{content:'';display:block;width:120px;height:3px;margin-top:var(--space-copy);background:var(--blue);transform:scaleX(clamp(.12,calc(var(--sc-p,0)*2),1));transform-origin:left}
.reading-moment .bridge h2:after{margin-inline:auto;transform-origin:center}
.reading-moment .individual{align-items:center}
.offer-moment{background:var(--wash);border-radius:24px 24px 0 0}
.offer-moment .reading-stage{width:100%}
.site-footer{padding-top:0}
.closing-moment .closing-stage{isolation:isolate;height:auto;min-height:0;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--space-section) 0 0}
.closing-stage .footer-world{position:relative;inset:auto;order:1;flex:none;z-index:-1;width:100%;height:auto;margin:calc(-1*clamp(64px,8vw,160px)) 0 0}
.closing-stage .footer-world img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center bottom;mask-image:linear-gradient(to bottom,transparent,#000 18%)}
.closing-stage .footer-invitation{order:0;flex:none}
.closing-moment h2{font-size:clamp(52px,4.4vw,80px);line-height:1.12;margin:0}
.closing-moment h2:after{display:none}
.closing-lead,.closing-moment h2 em{display:block}
.closing-progress{display:block;width:120px;height:3px;margin:var(--space-item) auto;background:var(--blue);transform:scaleX(clamp(.12,calc(var(--sc-p,0)*2),1));transform-origin:center}
.closing-moment .primary{flex:none}
.closing-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-copy);margin-top:var(--space-group)}
.closing-action p{margin:0}
.closing-moment~.footer-panel{margin-top:calc(-1*var(--space-scene))}
@media(max-width:760px){
 .chapter .opening-stage,.chapter .case-stage{gap:var(--space-group)}.case-stage .case-choices{margin-bottom:var(--space-tight)}
 .site-footer{padding-top:var(--space-close)}.footer-world{margin-top:0}
 .reading-moment .reading-stage{min-height:0;top:var(--reading-top,48px);padding-block:var(--space-inset)}
 .reading-moment .individual{min-height:0;top:0;gap:var(--space-group)}
 .reading-moment:has(.individual){height:auto!important}
 .reading-moment .individual.sc-stage{position:relative}
 .offer-moment{height:auto!important}.offer-moment .reading-stage{position:relative;top:0}
 .closing-moment h2{font-size:44px}
 .closing-action{flex-direction:column;gap:var(--space-copy)}
 .site-footer{padding-top:0}
 .closing-moment .closing-stage{height:auto;min-height:0;padding-top:var(--space-section)}
 .closing-stage .footer-world{inset:auto;height:auto;width:150%;margin:-32px -25% 0}
 .closing-stage .footer-world img{mask-image:linear-gradient(to bottom,transparent,#000 18%)}
 .closing-moment~.footer-panel{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
 .reading-moment{height:auto!important}.reading-moment .reading-stage{position:relative;top:auto;min-height:0;padding-block:64px}
 .world-hero~section [data-sc-cue],.reading-moment [data-sc-cue],
 .reading-moment [data-sc-in],.reading-moment [data-sc-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
 .world-hero~section *,.site-footer *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .reading-moment h2:after{transform:none}
 .closing-progress{transform:none}
}

/* Static panels are the same content used by the interactive scene. */
[data-case-panel][hidden]{display:none!important}
.utilities #language{display:inline-flex;align-items:center;min-height:44px;padding:10px;font-size:15px}
.utilities #language+button{border-left:1px solid var(--line);font-size:23px;padding-left:23px}
@media(max-width:760px){
 .chapter.story-overflow[data-sc-act]{height:auto!important}
 .chapter.story-overflow [data-sc-stage]{position:relative!important;top:auto!important;min-height:0;justify-content:flex-start}
}
