/* Each slide has one immutable 1600 × 900 coordinate system. */
html{scroll-padding-top:0}body{overflow-x:hidden}main{max-width:none;margin:0}.canvas-slide{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#090e12;outline:none;box-shadow:inset 0 1px 0 #30414c;scroll-margin:0}.canvas-stage{position:absolute;width:1600px;height:900px;left:0;top:0;transform-origin:0 0;overflow:hidden}.slide-content{position:absolute;width:1440px;left:80px;top:60px;transform-origin:0 0}.canvas-stage .chapter,.canvas-stage .story{margin:0!important;padding:0!important;border:0!important}.canvas-stage .hero{width:1600px;height:900px;min-height:900px;padding:70px 80px}.canvas-stage .hero h1{font-size:84px}.canvas-stage .intro{padding:24px 0;margin-bottom:60px}.canvas-stage .story-heading{margin-bottom:22px}.canvas-stage .section-heading{margin-bottom:40px}.canvas-stage .sources{max-width:none;margin-top:30px}.canvas-stage footer{margin:40px 0 0;padding:24px 0}.canvas-page{position:absolute;bottom:22px;left:80px;right:80px;display:flex;justify-content:space-between;color:#78909f;font-size:11px;letter-spacing:1px}.chrome-shell{position:relative;width:100%;overflow:hidden}.chrome-canvas{position:absolute;top:0;left:0;width:1600px;transform-origin:0 0}.chapter-nav{position:static;overflow:visible}.prototype-window{width:1440px;height:610px;position:relative;overflow:hidden}.prototype-window iframe{position:absolute;left:320px;top:0;width:1600px!important;height:1220px!important;transform:scale(.5);transform-origin:0 0}.prototype-bar{padding:5px 22px}.canvas-stage .all-screens{margin-top:0}.canvas-stage .ds-band{padding:30px 0}.canvas-stage .hero-image-note{bottom:65px}.canvas-stage header{height:90px}.canvas-stage .hero.cover-hero{height:810px;min-height:810px;padding-top:45px}.canvas-slide:focus-visible{outline:2px solid #a3c7b3;outline-offset:-2px}
.canvas-slide{margin:0!important;padding:0!important;border:0!important}.canvas-stage .hero .hero-copy{max-width:650px}.canvas-stage .hero h1 span{white-space:nowrap}
.prototype-window{height:624px}.prototype-window iframe{left:400px;height:1560px!important;transform:scale(.4)}

/* Introductory narrative: background/problem, goals/framework, then flow. */
.compact-chapters{display:flex;flex-direction:column;gap:64px}
.canvas-stage .compact-chapters .intro{margin-bottom:36px;padding:20px 0}
.compact-chapters>.chapter+.chapter{position:relative}
.compact-chapters>.chapter+.chapter:before{content:'';position:absolute;top:-32px;left:0;right:0;height:1px;background:#30414c}
.canvas-stage .compact-chapters .section-heading{margin-bottom:28px}
.canvas-stage .compact-flow .flow{grid-template-columns:repeat(3,1fr)}
.canvas-stage .compact-flow .flow a{min-height:175px;padding:28px}
.canvas-stage .compact-flow .flow h3{font-size:21px;margin:14px 0 10px}
.canvas-stage .compact-flow .flow p,.canvas-stage .compact-flow .flow small{font-size:13px}
.canvas-stage .compact-flow .brief-branches{padding-top:28px;gap:70px}

/* Clear page-level hierarchy for the two introductory spreads. */
.compact-chapters{gap:46px}
.compact-chapters>.chapter+.chapter:before{top:-23px}
main .chapter-kicker{font-size:12px;line-height:1.5;letter-spacing:2px;color:var(--pw-running);margin:0 0 12px}
main .compact-chapters>.chapter:first-child .section-heading h2{font-size:46px;line-height:1.2;font-weight:400}
main .compact-chapters>.chapter+.chapter .section-heading h2{font-size:30px;line-height:1.3;font-weight:400}
.canvas-stage .compact-chapters .section-heading{margin-bottom:24px;grid-template-columns:1.25fr 1fr;align-items:center}
main .compact-chapters .section-heading p{font-size:14px;line-height:1.7;max-width:38em}
.canvas-stage .context-page .intro{border-top:0;border-bottom:0;background:#111c24;padding:20px 24px;margin-bottom:24px;gap:24px;grid-template-columns:1.7fr 1fr 1fr 1fr}
.context-page .intro p{font-size:16px;line-height:1.7}.context-page .intro small{font-size:11px}.context-page .intro b{font-size:13px}
.compact-chapters .brief-facts{border-top:0;padding-top:0;gap:32px}
.compact-chapters .brief-facts>div{border-left:2px solid #435965;padding-left:18px;gap:8px}
main .compact-chapters .brief-facts strong{font-size:23px;line-height:1.4;font-weight:450}
main .compact-chapters .brief-facts span{font-size:14px;line-height:1.65}
main .compact-chapters .smallnote{font-size:11px;color:#8da1ae;margin-top:20px}
.strategy-page .brief-facts{counter-reset:goal;gap:40px;padding:12px 0 8px}
.strategy-page .brief-facts>div{border-left:0;padding:0;counter-increment:goal}
.strategy-page .brief-facts>div:before{content:'0' counter(goal);font-size:13px;line-height:1.5;color:var(--pw-running);margin-bottom:0}
main .strategy-page .brief-facts strong{font-size:28px;font-weight:400}
.strategy-page .brief-modules{padding-top:22px;gap:0;border-top:1px solid #30414c}
.strategy-page .brief-modules>div{padding:0 24px;border-left:1px solid #30414c;gap:14px}
.strategy-page .brief-modules>div:first-child{padding-left:0;border:0}
main .strategy-page .brief-modules strong{font-size:22px;font-weight:400}
main .strategy-page .brief-modules span{font-size:14px;line-height:1.7}
.strategy-page .brief-modules .pw-icon{width:28px;height:28px;margin-bottom:0}
.canvas-stage .story-chapter-title{padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid #30414c;align-items:center}
main .story-chapter-title h2{font-size:40px;line-height:1.25}
main .story-opening .story-heading h3{font-size:25px}
main .story-opening .story-time{font-size:20px}
.canvas-stage #storyboard.story-chapter-title{margin:0 0 22px;padding:0 0 20px;border-top:0}

/* Pages 2–4 share the same top, title baseline and bottom boundary. */
.canvas-stage .slide-content.aligned-intro{top:140px!important;left:80px!important;transform:none!important;height:620px}
.aligned-intro .compact-chapters{height:620px;display:grid;grid-template-rows:340px 240px;gap:40px}
.aligned-intro .compact-chapters>.chapter{display:flex;flex-direction:column;min-height:0}
.aligned-intro .compact-chapters>.chapter+.chapter:before{top:-20px}
.aligned-intro .context-page .smallnote{margin-top:auto;margin-bottom:0}
.aligned-intro .strategy-page .brief-facts{margin-top:0;padding:0}
.aligned-intro .strategy-page .brief-modules{margin-top:0;padding-top:0;border-top:0}
.aligned-intro .compact-flow{height:620px;display:flex;flex-direction:column}
main .aligned-intro .compact-flow .section-heading h2{font-size:46px;line-height:1.2;font-weight:400}
.canvas-stage .aligned-intro .compact-flow .section-heading{align-items:center;margin-bottom:24px}
main .aligned-intro .compact-flow .section-heading p{font-size:14px;line-height:1.7}
.canvas-stage .aligned-intro .compact-flow .flow{flex:1;grid-template-rows:1fr 1fr}
.canvas-stage .aligned-intro .compact-flow .brief-branches{padding-top:24px;flex:none}

/* Personal style profile: light modern headings, quiet supporting type. */
.canvas-stage .slide-content.aligned-intro,
.canvas-stage .slide-content.aligned-upper{top:80px!important;left:80px!important;transform:none!important}
main .compact-chapters>.chapter:first-child .section-heading h2,
main .aligned-intro .compact-flow .section-heading h2{font-weight:300;letter-spacing:-.025em}
main .compact-chapters>.chapter+.chapter .section-heading h2{font-weight:350}
main .compact-chapters .brief-facts strong{font-weight:400}
main .strategy-page .brief-facts strong{font-size:26px;font-weight:350}
main .strategy-page .brief-modules strong{font-weight:350}
main .aligned-intro .compact-flow .flow h3{font-weight:400}
main .upper-editorial .section-heading h2{font-size:38px;line-height:1.35;font-weight:300;letter-spacing:-.02em}
main .upper-editorial .section-heading p{font-size:13px;line-height:1.8;font-weight:400}
main .upper-editorial .all-screens a{font-size:14px;line-height:1.7;font-weight:400}
main .upper-editorial .all-screens small{font-size:11px;font-weight:400}
main .upper-editorial .validation{font-size:13px;line-height:1.85;font-weight:400}
main .upper-editorial .validation th{font-weight:450}

/* Shared editorial spacing at the 1600 × 900 design size. */
:root{--editor-title:40px;--editor-title-line:52px;--editor-subtitle:22px;--editor-subtitle-line:32px;--editor-body:14px;--editor-body-line:24px;--space-label-title:12px;--space-title-content:24px;--space-subtitle-body:8px;--space-copy-art:24px;--editor-gutter:80px}
main .compact-chapters>.chapter:first-child .section-heading h2,
main .compact-chapters>.chapter+.chapter .section-heading h2,
main .aligned-intro .compact-flow .section-heading h2,
main .upper-editorial .section-heading h2,
main .story-chapter-title h2{font-size:var(--editor-title);line-height:var(--editor-title-line);font-weight:300;letter-spacing:-.02em}
main .chapter-kicker{margin-bottom:var(--space-label-title)}
.canvas-stage .compact-chapters .section-heading,
.canvas-stage .aligned-intro .compact-flow .section-heading,
.canvas-stage .upper-editorial .section-heading{margin-bottom:var(--space-title-content);column-gap:80px}
main .compact-chapters .brief-facts strong,
main .compact-chapters .brief-modules strong,
main .compact-flow .flow h3{font-size:var(--editor-subtitle);line-height:var(--editor-subtitle-line);font-weight:400}
main .compact-chapters .brief-facts span,
main .compact-chapters .brief-modules span,
main .compact-chapters .section-heading p,
main .compact-flow .section-heading p,
main .compact-flow .flow p,
main .upper-editorial .section-heading p{font-size:var(--editor-body);line-height:var(--editor-body-line);font-weight:400}
.compact-chapters .brief-facts>div,.strategy-page .brief-modules>div{gap:var(--space-subtitle-body)}
main .compact-flow .flow h3{margin-bottom:var(--space-subtitle-body)}
/* The six scenes share full-width content; fit devices, never shrink the page. */
.canvas-stage .slide-content.aligned-scene{left:80px!important;top:60px!important;width:1440px;transform:none!important}
.canvas-stage .aligned-scene .story-heading{margin-bottom:16px}
main .aligned-scene .story-heading h3{font-size:26px;line-height:36px;font-weight:350}
main .aligned-scene .story-copy>p,main .aligned-scene .story-copy dd{font-size:14px;line-height:24px}
main .aligned-scene .story-copy{padding:0 0 24px;row-gap:8px}
main .aligned-scene .story-copy dl{padding:0}
main .aligned-scene .story-copy .story-link{min-height:32px}
.canvas-stage #storyboard.story-chapter-title{padding:0 0 16px;margin:0 0 16px;column-gap:80px}
main .aligned-scene .scene-photo-art{height:536px!important;min-height:536px!important;padding:0!important}
main .aligned-scene .scene-photo-art .mini-device{position:absolute;right:44px;top:50%;margin:0!important;transform:translateY(-50%) scale(var(--device-fit,1));transform-origin:right center}
main .aligned-scene .relay{margin-top:16px}

/* Editorial sections use natural height; only scene posters retain 16:9. */
.editorial-slide .canvas-stage .slide-content{top:80px!important;left:80px!important;width:1440px;height:auto!important;transform:none!important}
.editorial-slide .compact-chapters{display:flex;height:auto;gap:56px}
.editorial-slide .compact-chapters>.chapter{display:block;min-height:0}
.editorial-slide .compact-chapters>.chapter+.chapter:before{top:-28px}
.editorial-slide .compact-chapters .smallnote{margin-top:20px;margin-bottom:0}
.editorial-slide .compact-flow{height:auto;display:block}
.editorial-slide .compact-flow .flow{grid-template-rows:auto auto}
.editorial-slide .compact-flow .flow a{min-height:160px!important}
.editorial-slide .strategy-page #flow .section-heading h2{font-size:40px;line-height:52px;font-weight:300}
.editorial-slide .editorial-group{display:flex;flex-direction:column;gap:56px}
.editorial-slide .editorial-group>.chapter+.chapter{position:relative}
.editorial-slide .editorial-group>.chapter+.chapter:before{content:'';position:absolute;top:-28px;left:0;right:0;height:1px;background:#30414c}
.editorial-slide #experience{margin:0!important;padding:0!important;border:0!important}
.editorial-slide .prototype-window{width:1438px}

/* Present the working prototype as part of the case page, with no outer frame. */
.canvas-stage .prototype-inline{position:relative;width:1440px;height:1260px;overflow:hidden;background:transparent;border:0;padding:0;margin:0}
.canvas-stage .prototype-inline iframe{display:block;position:absolute;top:0;left:0;width:1600px!important;height:1400px;border:0;background:#090e12;transform:scale(.9);transform-origin:0 0}
.prototype-caption{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 0 24px;color:var(--pw-muted);font-size:12px;line-height:20px}
.prototype-caption a{color:var(--pw-running);min-height:32px;display:inline-flex;align-items:center}
.editorial-slide #experience>.section-heading{margin-bottom:24px}

/* Every content page opens on the same 80 px top inset and type rhythm. */
.canvas-stage .slide-content.aligned-scene{top:80px!important}
main .slide-content .chapter-kicker{font-size:12px;line-height:18px;font-weight:400;letter-spacing:2px;margin:0 0 12px;color:var(--pw-running)}
main .slide-content .section-heading{align-items:start;column-gap:80px;margin-bottom:24px}
main .slide-content .section-heading h2{font-size:40px;line-height:52px;font-weight:300;letter-spacing:-.02em}
main .slide-content .section-heading>p{font-size:14px;line-height:24px;font-weight:400;padding-top:8px}
main .aligned-scene .story:not(.story-opening) .story-heading h3{font-size:40px;line-height:52px;font-weight:300;letter-spacing:-.02em}
main .aligned-scene .scene-photo-art{height:480px!important;min-height:480px!important}
main .aligned-scene .story-opening .story-heading h3{font-size:26px;line-height:36px;font-weight:350}
/* Reserve rules for comparison, navigation and UI structure; use space for narrative. */
.canvas-slide{box-shadow:none}
.editorial-slide .compact-chapters>.chapter+.chapter:before,
.editorial-slide .editorial-group>.chapter+.chapter:before{display:none}
.compact-chapters .brief-facts>div{border-left:0;padding-left:0}
.strategy-page .brief-modules>div{border-left:0}
.canvas-stage #storyboard.story-chapter-title{border-bottom:0}
main .aligned-scene .relay div{border-top:0}
main .ds-type>div,main .ds-components article{border-bottom:0}
main .ds-band:first-of-type{border-top:0}
main .all-screens a{border-bottom-color:#24333d}
main .ds-band{border-top-color:#24333d}
/* Reframed pages 2–3: a single thesis, distinct primary and supporting layers. */
.editorial-slide .compact-chapters.narrative-page{display:block}
main .narrative-heading h2{font-size:40px;line-height:52px;font-weight:300;letter-spacing:-.02em}
main .narrative-deck{margin-top:16px;font-size:16px;line-height:28px;color:#a8bbc7;max-width:64em}
.context-columns{display:grid;grid-template-columns:440px 1fr;gap:120px;margin-top:56px}
main .context-columns h3,main .journey-heading h3{font-size:18px;line-height:28px;font-weight:400;color:#a3c7b3}
main .context-statement{font-size:28px;line-height:42px;font-weight:300;margin-top:24px}
main .quiet-copy{font-size:14px;line-height:24px;color:#a8bbc7;margin-top:16px}
.actor-list{margin:28px 0 0;display:grid;gap:12px;font-size:14px;line-height:24px}
.actor-list>div{display:grid;grid-template-columns:64px 1fr;gap:16px}.actor-list dt{color:#edf3f5}.actor-list dd{margin:0;color:#a8bbc7}
main .narrative-note{font-size:12px;line-height:22px;color:#91a6b4;margin-top:24px;max-width:70em}
.question-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:30px}
.question-list li{display:grid;grid-template-columns:40px 1fr;gap:20px;align-items:start}
.question-list li>span{font-size:13px;line-height:38px;color:#a3c7b3}
main .question-list h4{font-size:28px;line-height:38px;font-weight:350;margin:0}
main .question-list p{font-size:16px;line-height:26px;color:#a8bbc7;margin-top:8px}
.journey-heading{display:flex;justify-content:space-between;align-items:center;margin-top:48px}
.journey-heading>p{font-size:13px;color:#a8bbc7}
.journey-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;margin-top:28px}
.phase-label{font-size:12px;line-height:20px;letter-spacing:1px;color:#91a6b4}
main .journey-phases h4{font-size:28px;line-height:40px;font-weight:350;margin:12px 0 0}
.phase-role{font-size:13px;color:#a3c7b3;line-height:22px;margin:8px 0 24px}
.journey-phases a{display:grid;grid-template-columns:66px 1fr 18px;align-items:center;gap:10px;min-height:52px;font-size:14px;line-height:22px}
.journey-phases a small{font-size:11px;color:#91a6b4;font-variant-numeric:tabular-nums}.journey-phases a b{font-weight:400;color:#a3c7b3}
.journey-phases a:hover{color:#a3c7b3}
.journey-exceptions{display:flex;gap:56px;margin-top:28px;font-size:12px;line-height:22px;color:#a8bbc7}
.journey-exceptions strong{color:#e6bd78;font-weight:400;margin-right:12px}
.system-roles{font-size:12px;line-height:22px;color:#91a6b4;margin-top:16px}
.proof-row{display:grid;grid-template-columns:180px repeat(3,1fr);gap:32px;margin-top:48px;background:#111c24;padding:24px 28px;align-items:start}
main .proof-row h3{font-size:16px;line-height:24px;font-weight:400;margin:0}
.proof-row strong{font-size:14px;line-height:24px;font-weight:400}.proof-row p{font-size:12px;line-height:22px;color:#a8bbc7;margin-top:8px}
/* Page 3: reserve white for the decision and action hierarchy. */
main .strategy-page.narrative-page .narrative-heading h2,
main .strategy-page.narrative-page .journey-phases h4,
main .strategy-page.narrative-page .journey-phases a>span{color:#edf3f5}
main .strategy-page.narrative-page .narrative-deck,
main .strategy-page.narrative-page .journey-heading>p,
main .strategy-page.narrative-page .journey-exceptions,
main .strategy-page.narrative-page .proof-row p{color:#94a6b2}
main .strategy-page.narrative-page .chapter-kicker,
main .strategy-page.narrative-page .journey-heading h3,
main .strategy-page.narrative-page .phase-role,
main .strategy-page.narrative-page .proof-row h3,
main .strategy-page.narrative-page .proof-row strong{color:#a8b8c2}
main .strategy-page.narrative-page .phase-label,
main .strategy-page.narrative-page .journey-phases a small,
main .strategy-page.narrative-page .system-roles,
main .strategy-page.narrative-page .narrative-note{color:#8297a5}
main .strategy-page.narrative-page .journey-phases a b{color:#839e91}
main .strategy-page.narrative-page .journey-exceptions strong{color:#b8a58a}
main .strategy-page.narrative-page .journey-phases a:hover>span{color:#a3c7b3}

/* Page 3 keeps the journey; measurement details remain in the validation chapter. */
.strategy-page.narrative-page .journey-phases{margin-top:48px}
.strategy-page.narrative-page .journey-phases h4+a{margin-top:24px}
.strategy-page.narrative-page .journey-exceptions{margin-top:32px}

/* The decorative cockpit screen is softer than the full interactive prototype. */
.hero-live-screen{filter:blur(.45px) contrast(.94);will-change:transform;backface-visibility:hidden;contain:paint}