/* V12: one photographed business moment, with real local screen animation. */
/* The founder's sequence is dark opening → light visibility → dark rhythm. */
.chapters-section{background:#102027;color:#f4efe5}
.chapters-section .eyebrow{color:#c7b99e}.chapters-section h2 em{color:#c9b59a}
.chapters-section .experience-invitation,.chapters-section .experience-invitation span{color:#d3d8ce}
.chapter-navigation{background:#14272d;border-color:#52615f}.chapter-choice{color:#eee9dc;border-color:#52615f}.chapter-choice:hover{background:#263a3d}.chapter-choice[aria-current=step]{background:#ede9dd;color:#12252b}
.chapter-copy .eyebrow{color:#c2b498}.chapter-copy h3 em{color:#cbb195}.chapter-copy>p:not(.eyebrow):not(.scene-caption):not(.sr-only){color:#d0d7d1}.chapter-copy .scene-caption{color:#b2beb5}
.scene-play{background:#ece8dc;color:#14272d;border-color:#ece8dc}.scene-play:hover{background:#d5d9cd}
.chapter-progress{color:#d6ddd3}.progress-track{background:#465959}.progress-track i{background:#d7c1a3}.chapter-progress .chapter-motion{color:#e6e8dc;border-color:#667b72}
.business-scene:not(.hello-scene){background:radial-gradient(ellipse at 60% 50%,#e8e7db,#d2d8cb 85%);border-radius:5px;padding:15px}
.business-scene:not(.hello-scene) .scene-tag{left:15px;top:10px}.business-scene:not(.hello-scene) .scene-baseline{left:15px;right:15px;bottom:8px}
.cinematic-chapter{display:block;position:relative;padding:0;min-height:470px;background:#102027;overflow:hidden;isolation:isolate;border:1px solid #536057}
.cinematic-chapter .chapter-copy{position:absolute;z-index:3;left:4%;top:12%;width:30%;padding:0;pointer-events:none}
.cinematic-chapter .chapter-copy h3{font-size:clamp(34px,3.7vw,56px);color:#f4efe5;line-height:1.04}
.cinematic-chapter .chapter-copy .eyebrow{font-size:11px;color:#c9b89d;margin-bottom:20px;letter-spacing:.12em}
.cinematic-chapter .chapter-copy>p:not(.eyebrow):not(.scene-caption):not(.sr-only){font-size:16px;color:#d9d9ca;margin-top:24px;line-height:1.6}
.cinematic-chapter .scene-play{pointer-events:auto;background:transparent;border-color:#b7bbaa;color:#eeeadd;font-size:13px;margin-top:23px;min-height:43px;padding:10px 15px}
.cinematic-chapter .scene-play:hover{background:#f4efe51a}
.cinematic-chapter .scene-caption{font-size:11px;color:#c5c9ba;max-width:220px;line-height:1.5;margin-top:14px}
.cinematic-chapter .scene-caption br{display:block}
.hello-scene.business-scene{position:relative;width:100%;max-width:none;height:470px;margin:0;border-radius:0;background:#102027;isolation:auto}
.hello-world{position:absolute;right:0;top:0;height:100%;aspect-ratio:1.5;container-type:inline-size}
.hello-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hello-edge{position:absolute;inset:0;background:linear-gradient(90deg,#102027 0%,#102027 22%,rgba(16,32,39,.9) 30%,rgba(16,32,39,.18) 48%,transparent 60%);pointer-events:none}
.hello-screen{position:absolute;left:45.1%;top:14%;width:22.4%;height:68%;color:#f6f3e8;font-family:var(--sans);font-size:1.98cqw;line-height:1.4;padding:1.5cqw 1.1cqw;overflow:hidden;border-radius:2.1cqw;background:linear-gradient(145deg,#06132180,#09172320)}
.hello-screen-top{display:flex;justify-content:space-between;font-size:1.23cqw;color:#bcc8c8;line-height:1;letter-spacing:.04em}
.hello-contact{text-align:center;margin-top:1.6cqw;font-size:1.65cqw;line-height:1.35}
.hello-avatar{display:grid;place-items:center;margin:0 auto .65cqw;width:3.5cqw;height:3.5cqw;border-radius:50%;background:#d5c2a5;color:#172833;font-family:var(--serif);font-size:2cqw}
.hello-contact strong{display:block;font-weight:500}.hello-contact small{display:block;font-size:1.15cqw;color:#b6c0c0;margin-top:.3cqw}
.hello-day{font-size:1.05cqw;letter-spacing:.12em;text-align:center;color:#aebbbb;margin:1.6cqw 0 1.1cqw}
.hello-incoming{background:#e4e5dc;color:#182b31;border-radius:.2cqw 1.4cqw 1.4cqw 1.4cqw;padding:1.1cqw}
.hello-incoming small{display:block;font-size:1.05cqw;text-transform:uppercase;letter-spacing:.05em;color:#46605b;margin-bottom:.55cqw}
.hello-screen p{font:inherit;margin:0}.hello-incoming>span,.hello-reply>span{display:block;font-size:1.05cqw;margin-top:.6cqw;opacity:.75;text-align:right}
.hello-reply{background:#334e4b;color:#f5f2e6;margin:1.3cqw 0 0 1.9cqw;padding:1.1cqw;border-radius:1.4cqw .2cqw 1.4cqw 1.4cqw}
.hello-typing{position:absolute;right:1.3cqw;top:32cqw;display:flex;gap:.45cqw;opacity:0;padding:1.2cqw;background:#334e4b;border-radius:2cqw}
.hello-typing i{display:block;width:.55cqw;height:.55cqw;border-radius:50%;background:#ced8ca}
.hello-next{position:relative;border-top:1px solid #66766c;margin-top:1.7cqw;padding:1.4cqw 0 .3cqw;font-size:1.55cqw}
.hello-next strong{display:block;font-weight:500}.hello-next small{font-size:1.1cqw;color:#bdcabc}.hello-next-icon{float:right;font-size:2.3cqw;color:#dec2a0}
.hello-home{position:absolute;bottom:.9cqw;left:36%;width:28%;height:.3cqw;background:#bdc4c3;border-radius:1cqw}
.hello-light{position:absolute;left:44.7%;top:12%;width:24%;height:72%;box-shadow:0 0 40px 8px #e3c397;opacity:0;border-radius:4cqw;pointer-events:none}
.hello-scene[data-phase="1"] .hello-reply,.hello-scene[data-phase="1"] .hello-next,.hello-scene[data-phase="2"] .hello-next{visibility:hidden}
.hello-caption{position:absolute;left:48%;bottom:15px;color:#fff2dc;display:flex;align-items:center;gap:11px;font-size:13px;text-shadow:0 1px 8px #000}
.hello-caption-index{border:1px solid #d3c2a080;padding:5px;font-size:10px}
.hello-controls{position:relative;display:flex;gap:0;border-top:1px solid #667067;background:#12232a;padding:0 25px;z-index:3}
.hello-controls button{position:relative;flex:1;padding:15px 5px;background:none;border:0;color:#b6c4bb;font:400 12px/1.4 var(--sans);cursor:pointer;text-align:left}
.hello-controls button>span{font-size:10px;margin-right:10px;color:#b9a58a}
.hello-controls button[aria-current]{color:#fff3db}.hello-controls button[aria-current]:after{content:'';position:absolute;bottom:0;left:5px;right:25px;height:2px;background:#d8ba90}
.hello-controls button:hover{color:white}.hello-controls button:focus-visible,.cinematic-chapter .scene-play:focus-visible{outline:2px solid #e3c79b;outline-offset:-3px}
.hello-timeline{position:absolute;height:1px;background:#53645c;left:0;right:0;top:-1px}.hello-timeline i{display:block;height:100%;background:#dbc29e;transform-origin:left}
@media(min-width:1400px){.cinematic-chapter,.hello-scene.business-scene{min-height:520px}.hello-scene.business-scene{height:520px}}
@media(min-width:701px) and (max-height:850px){.hello-scene.business-scene{height:380px}.cinematic-chapter{min-height:380px}.cinematic-chapter .chapter-copy{top:8%;width:36%}.cinematic-chapter .chapter-copy h3{font-size:37px}.cinematic-chapter .chapter-copy>p:not(.eyebrow):not(.scene-caption):not(.sr-only){font-size:14px;margin-top:16px}.cinematic-chapter .scene-play{margin-top:15px}.cinematic-chapter .scene-caption{font-size:10px}.hello-controls button{padding:11px 5px}}
@media(max-width:900px) and (min-width:701px){.hello-world{right:-90px}.cinematic-chapter .chapter-copy{width:38%}.hello-edge{background:linear-gradient(90deg,#102027 2%,#102027 29%,#102027b0 42%,transparent 58%)}.hello-caption{left:54%}}
@media(max-width:700px){
 .cinematic-chapter{min-height:0;overflow:hidden}
 .cinematic-chapter .chapter-copy{position:relative;left:auto;top:auto;width:auto;padding:22px 20px 18px;pointer-events:auto}
 .cinematic-chapter .chapter-copy .eyebrow{font-size:10px;margin-bottom:9px}
 .cinematic-chapter .chapter-copy h3{font-size:32px;max-width:320px}
 .cinematic-chapter .chapter-copy h3 br{display:none}
 .cinematic-chapter .chapter-copy>p:not(.eyebrow):not(.scene-caption):not(.sr-only){font-size:14px;margin-top:12px;line-height:1.4;max-width:270px}
 .cinematic-chapter .chapter-copy>p br{display:none}
 .cinematic-chapter .scene-play{margin-top:12px;padding:7px 11px;min-height:36px;font-size:12px}
 .cinematic-chapter .scene-caption{font-size:10px;line-height:1.4;margin:10px 0 0;max-width:none}
 .hello-scene.business-scene{height:330px;overflow:hidden}
 .hello-world{height:360px;top:-12px;right:auto;left:calc(50% - 305px)}
 .hello-edge{background:linear-gradient(180deg,#102027 0%,transparent 12%,transparent 83%,#102027 100%)}
 .hello-caption{left:20px;bottom:10px;font-size:12px;gap:9px}
 .hello-caption-index{font-size:9px;padding:3px}
 .hello-controls{padding:0 10px}.hello-controls button{font-size:11px;padding:13px 3px}.hello-controls button>span{display:block;font-size:9px;margin:0 0 3px}.hello-controls button[aria-current]:after{left:3px;right:12px}
}
@media(prefers-reduced-motion:reduce){.hello-light,.hello-typing{display:none}}

/* Fit the complete narrative inside the photographed display. */
.hello-avatar{display:none}.hello-contact{margin-top:1.4cqw}.hello-edge{z-index:2}.hello-caption{z-index:3}.hello-controls{z-index:4}
.hello-contact small{display:none}.hello-day{margin:1cqw 0}.hello-next{padding-top:.8cqw;margin-top:1.1cqw}.hello-screen{font-size:1.85cqw}
.hello-world:after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#102027 0%,#102027a0 8%,transparent 29%);pointer-events:none}.hello-screen{z-index:3}.hello-edge{display:none}
@media(max-width:700px){.hello-world:after{background:linear-gradient(180deg,#102027 0%,transparent 12%,transparent 88%,#102027 100%)}.hello-edge{display:block}}

.business-scene:not(.hello-scene){color:var(--navy)}
@media(max-width:700px){
 .cinematic-chapter .chapter-copy{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:18px 20px}
 .cinematic-chapter .chapter-copy>*{grid-column:1/-1}
 .cinematic-chapter .chapter-copy .eyebrow{margin:0}
 .cinematic-chapter .chapter-copy h3{font-size:28px}
 .cinematic-chapter .chapter-copy>p:not(.eyebrow):not(.scene-caption):not(.sr-only){margin:0;font-size:13px;line-height:1.4}
 .cinematic-chapter .chapter-copy .scene-play{grid-column:1;margin:0;width:max-content;max-width:100%;font-size:11px;padding:6px 9px}
 .cinematic-chapter .chapter-copy .scene-caption{grid-column:2;margin:0;align-self:center;font-size:10px}
 .hello-scene.business-scene{height:300px}.hello-world{top:-28px}.hello-screen{font-size:2cqw}
}

/* Founder correction: mobile names describe distinct business needs. */
@media(max-width:700px){
 .chapter-navigation{grid-template-columns:repeat(5,148px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b4b8a5 #24373b;max-width:100%}
 .chapter-choice{padding:10px 13px;min-height:75px}
 .chapter-choice:after{font:500 14px/1.2 var(--sans);margin-top:7px;max-width:125px}
 .chapter-navigation::-webkit-scrollbar{height:3px}.chapter-navigation::-webkit-scrollbar-thumb{background:#a9b39f}
}

.chapter-navigation{position:relative}