/* One camera language, two useful stories. Text and controls remain real HTML. */
.cinematic{margin-top:70px;background:#25221e;color:#f7f5ef;position:relative}
.cinematic-stage{position:relative;height:calc(100svh - var(--header));min-height:570px;overflow:hidden;isolation:isolate}
.cinematic.is-scroll{height:280svh}
.cinematic.is-scroll .cinematic-stage{position:sticky;top:var(--header)}
.cinematic-media,.cinematic-shade{position:absolute;inset:0;z-index:-1}
.cinematic-media{background:#332d27}
.cinematic-media>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 50%}
.cinematic-media canvas,.cinematic-media video{opacity:0}
.cinematic-media.has-frames canvas,.cinematic-media.has-video video{opacity:1}
.cinematic-shade{background:linear-gradient(90deg,rgba(22,21,19,.94),rgba(22,21,19,.7) 29%,rgba(22,21,19,.18) 57%,transparent 80%),linear-gradient(0deg,rgba(22,21,19,.9),transparent 35%)}
.cinematic-copy{position:absolute;left:var(--gutter);top:20%;width:40%;max-width:580px}
.cinematic-copy h2{font-size:clamp(44px,4.6vw,74px);font-weight:450;line-height:1.1;letter-spacing:-.04em;min-height:2.2em;text-wrap:balance}
.cinematic-message>p{font-size:18px;line-height:1.6;max-width:32ch;min-height:4.8em;margin-top:25px;color:#ece4da}
.cinematic-link{display:inline-flex;align-items:center;gap:25px;min-height:48px;font-size:15px;border-bottom:1px solid #b4aa9b;margin-top:22px}
.cinematic-link .icon{width:18px}
.cinematic-bottom{position:absolute;bottom:96px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;gap:40px}
.cinematic-chapters{display:flex;gap:28px;max-width:880px;flex:1}
.cinematic-chapters button{position:relative;flex:1;display:flex;gap:14px;align-items:center;padding:21px 0 15px;min-height:62px;text-align:left;color:#d7cfc4;background:none;border-top:1px solid #a2958170;font-size:14px;line-height:1.5}
.cinematic-chapters button>span{font-size:12px;color:#dec69f}
.cinematic-chapters button>i{position:absolute;inset:-1px 0 auto;height:2px;background:#dec69f;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cinematic-chapters button[aria-pressed=true]{color:#fff}.cinematic-chapters button[aria-pressed=true]>i{transform:scaleX(1)}
.cinematic-toggle{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:100px;min-height:46px;padding:11px 18px;border-radius:100px;border:1px solid #b4aa9b;color:#fff;background:#17171566;font-size:13px}
.cinematic-toggle .icon{width:15px;height:15px}
.cinematic-scroll{position:absolute;left:var(--gutter);top:36px;display:flex;align-items:center;gap:18px;font-size:13px;color:#e3d5c0}
.cinematic-scroll .icon{width:17px;height:17px;transform:rotate(90deg)}
.cinematic-focus{position:absolute;left:65%;top:55%;display:flex;align-items:center;pointer-events:none;opacity:0;transition:opacity .55s ease;filter:drop-shadow(0 2px 8px #24190d60)}
.cinematic[data-chapter='1'] .cinematic-focus{opacity:1}
.cinematic-focus>span{width:50px;height:50px;border:1px solid #fff7e7;border-radius:50%;position:relative}
.cinematic-focus>span:after{content:'';position:absolute;inset:20px;background:#fff7e7;border-radius:50%}
.cinematic-focus>i{width:55px;height:1px;background:#fff7e7}
.cinematic-focus>p{font-size:13px;color:#fff;background:#211e19e8;padding:11px 15px;border-radius:3px}
.cinematic :is(a,button):focus-visible{outline:3px solid #e9c993;outline-offset:5px}

.prevention-cinema{background:#191b18;padding-top:100px}
.prevention-cinema .prevention-heading{align-items:end;gap:50px}
.prevention-cinema .prevention-heading h2{font-size:clamp(38px,3.5vw,58px);line-height:1.13}
.prevention-cinema .prevention-heading>p{font-size:17px;max-width:37ch;line-height:1.65;color:#cfd1c8}
.mapping-experience{display:grid;grid-template-columns:1.55fr 1fr;gap:0;margin-top:55px;border:1px solid #5a5b503d;border-radius:20px;overflow:hidden;background:#22241f}
.mapping-visual{position:relative;min-height:590px;background:#191916;overflow:hidden;isolation:isolate;--split:50%;scroll-margin-top:calc(var(--header) + 15px)}
.mapping-visual:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#171817ed,transparent 32%,transparent 80%,#17181744)}
.mapping-topline,.mapping-footnote{z-index:4}
.mapping-body,.mapping-comparison,.mapping-detail{position:absolute;inset:0;overflow:hidden}
.mapping-body{z-index:0}
.mapping-experience:not([data-step='0']) .mapping-hotspot{visibility:hidden}
.mapping-body>img,.mapping-body>video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.mapping-body>video{opacity:0}.mapping-body.has-video>video{opacity:1}
.mapping-body:after{display:none}
.mapping-topline{position:absolute;top:22px;left:25px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.mapping-topline>span{font-size:12px;color:#fff;background:#171817d9;padding:8px 11px;border-radius:3px;line-height:1.5}
#mapping-motion{width:44px;height:44px;background:#171817bb;color:white;border:1px solid #b8b6a9;border-radius:50%;display:grid;place-items:center;pointer-events:auto;flex-shrink:0}
#mapping-motion .icon{width:15px;height:15px}
.mapping-footnote{position:absolute;bottom:24px;left:25px;right:25px;display:flex;flex-direction:column;gap:7px;color:#f7f5ee;pointer-events:none}
.mapping-footnote>span{font-size:17px;line-height:1.4}.mapping-footnote small{font-size:11px;line-height:1.5;color:#dedbd1}
.mapping-experience .prevention-steps{padding:35px clamp(24px,3vw,48px);display:flex;flex-direction:column;justify-content:center}
.mapping-experience .step{gap:16px;padding:24px 0;border-top-color:#696b5d80}.mapping-experience .step:first-child{border-top:0}
.mapping-experience .step strong{font-size:clamp(23px,2.1vw,32px)}
.mapping-experience .step-content{font-size:16px;line-height:1.65;color:#d5d8cc;margin-top:15px}
.mapping-experience .step-number{color:#d7c29c}
.mapping-experience .prevention-steps>.button{font-size:14px;justify-content:space-between;gap:12px;padding:16px 21px;margin-top:24px}
.mapping-hotspot{position:absolute;left:60%;top:44%;z-index:1;display:flex;align-items:center;gap:0;color:white;background:none;min-height:52px}
.mapping-hotspot>span{width:42px;height:42px;border:1px solid #f9e8c6;border-radius:50%;display:grid;place-items:center;box-shadow:0 2px 12px #24191030;background:#52463022}
.mapping-hotspot>span:after{content:'';width:6px;height:6px;background:#f9e8c6;border-radius:50%}
.mapping-hotspot>i{height:1px;width:25px;background:#f9e8c6}
.mapping-hotspot>b{font-size:12px;font-weight:400;text-align:left;max-width:130px;padding:9px 12px;background:#171817e8;line-height:1.45;border-radius:3px}
.mapping-hotspot:hover>span{background:#cfaa6555}
.mapping-comparison{--split:50%;background:#9e7d59;animation:mapping-reveal .75s var(--ease)}
.comparison-photo{position:absolute;inset:0;overflow:hidden}
.comparison-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.comparison-after{clip-path:inset(0 0 0 var(--split))}
.mapping-comparison:after{display:none}
.comparison-labels{position:absolute;top:87px;left:25px;right:25px;display:flex;justify-content:space-between;pointer-events:none;gap:15px}
.comparison-labels span{font-size:12px;padding:8px 11px;background:#171817dd;color:white;border-radius:3px}
.comparison-line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff9e8;transform:translateX(-50%);z-index:2;pointer-events:none}
.comparison-line>span{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;display:grid;place-items:center;background:#f5f3ea;color:#25251e;border-radius:50%;box-shadow:0 4px 18px #26170c44}
.comparison-line svg{width:30px;fill:none;stroke:currentColor;stroke-width:1.5}
#skin-comparison{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3;margin:0;touch-action:pan-y}
.mapping-comparison:focus-within{outline:3px solid #f6d08d;outline-offset:-5px}
.comparison-hint{position:absolute;bottom:112px;left:0;right:0;text-align:center;font-size:12px;line-height:1.5;padding:10px 20px;z-index:2;color:white;pointer-events:none;text-shadow:0 2px 7px #000}
.mapping-detail{animation:mapping-reveal .75s var(--ease)}
.mapping-detail>img{width:100%;height:100%;object-fit:cover;transform:scale(1.4);transform-origin:55% 45%;transition:transform 1.1s var(--ease)}
.mapping-detail.is-zoomed>img{transform:scale(2.5)}
.mapping-detail:after{display:none}
.detail-focus{position:absolute;top:36%;left:39%;display:flex;align-items:center;pointer-events:none}
.detail-focus>span{height:110px;width:110px;flex-shrink:0;border:1px solid #fff4d5;border-radius:50%}
.detail-focus>i{height:1px;width:30px;background:#fff4d5;flex-shrink:0}
.detail-focus>p{font-size:13px;line-height:1.5;background:#171817e8;color:#fff;padding:10px 12px;border-radius:3px}
.detail-zoom{position:absolute;bottom:115px;left:25px;color:#fff;border:1px solid #e3cfad99;border-radius:100px;background:#171817c9;min-height:44px;padding:11px 17px;display:flex;align-items:center;gap:20px;font-size:13px;z-index:2}
.detail-zoom .icon{width:16px;height:16px}.detail-zoom[aria-pressed=true] .icon{transform:rotate(45deg)}
.prevention-cinema :is(button,a):focus-visible{outline:3px solid #e9c993;outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes mapping-reveal{from{clip-path:circle(5% at 62% 44%)}to{clip-path:circle(110% at 62% 44%)}}
html[data-hero=corporate] .cinematic-copy h2{font-weight:700}
html[data-hero=corporate] .mapping-experience{border-radius:26px;background:#252722}
html[data-hero=corporate] .mapping-experience .button{background:#b8eee0;color:#171817}
html[data-hero=corporate] .cinematic-link{color:#b8eee0;border-color:#8dcaba}
@media(max-width:1100px){.cinematic-copy{width:45%}.cinematic-copy h2{font-size:53px}.cinematic-message>p{font-size:17px}.cinematic-bottom{gap:20px}.cinematic-chapters{gap:18px}.cinematic-chapters button{font-size:12px;gap:9px}.cinematic-focus>i{width:25px}.mapping-experience{grid-template-columns:1.2fr 1fr}.mapping-visual{min-height:570px}.mapping-experience .prevention-steps{padding:25px}.mapping-hotspot{left:51%}.mapping-hotspot>b{max-width:100px}.mapping-topline{left:18px;right:18px}.mapping-footnote{left:18px;right:18px}.detail-focus{left:26%}.detail-focus>span{width:80px;height:80px}.detail-focus>i{width:20px}}
@media(max-width:900px){.cinematic-stage{height:680px;min-height:0}.cinematic-copy{top:22%;width:49%}.cinematic-copy h2{font-size:46px}.cinematic-message>p{font-size:16px}.cinematic-focus{left:60%;top:63%}.cinematic-focus>span{width:40px;height:40px}.cinematic-focus>span:after{inset:16px}.cinematic-chapters button{font-size:12px;display:block}.cinematic-chapters button>span{display:block;margin-bottom:4px}.cinematic-bottom{bottom:28px}.cinematic-toggle{min-width:44px;padding:13px}.cinematic-toggle>span{display:none}.mapping-experience{grid-template-columns:1fr}.mapping-visual{min-height:0;height:auto;aspect-ratio:1.6}.mapping-experience .prevention-steps{padding:12px 30px 32px}.mapping-experience .step-content{max-width:60ch}.mapping-experience .prevention-steps>.button{align-self:flex-start}.prevention-cinema .prevention-heading{display:block}.prevention-cinema .prevention-heading>p{margin-top:25px;max-width:54ch}.mapping-hotspot{left:60%}.mapping-hotspot>b{max-width:130px}.detail-focus{left:42%}.mapping-topline>span{font-size:11px}.mapping-footnote>span{font-size:16px}}
@media(max-width:600px){.cinematic{margin-top:40px}.cinematic-stage{height:auto;min-height:790px;display:flex;flex-direction:column;justify-content:flex-end}.cinematic-media{height:430px;bottom:auto}.cinematic-media>*{object-position:69% 50%}.cinematic-shade{background:linear-gradient(0deg,#25221e 0%,#25221e 43%,#25221e08 76%,#25221e11);z-index:-1}.cinematic-copy{position:relative;top:auto;left:auto;width:auto;max-width:none;margin:350px var(--gutter) 0}.cinematic-copy h2{font-size:43px;min-height:2.2em}.cinematic-message>p{font-size:16px;margin-top:20px;min-height:4.8em;max-width:34ch}.cinematic-link{font-size:14px;margin-top:10px}.cinematic-bottom{position:relative;left:auto;right:auto;bottom:auto;margin:28px var(--gutter) 35px;gap:12px}.cinematic-chapters{gap:12px}.cinematic-chapters button{font-size:11px;padding:13px 0 8px;line-height:1.4}.cinematic-chapters button>span{font-size:10px}.cinematic-toggle{margin-top:5px;width:44px;flex-shrink:0}.cinematic-scroll{top:22px;font-size:11px}.cinematic-focus{top:240px;left:48%}.cinematic-focus>span{width:34px;height:34px}.cinematic-focus>span:after{inset:14px}.cinematic-focus>i{width:19px}.cinematic-focus>p{font-size:11px;padding:8px;max-width:120px}.prevention-cinema{padding-top:65px}.prevention-cinema .prevention-heading h2{font-size:36px;line-height:1.14}.prevention-cinema .prevention-heading>p{font-size:16px;margin-top:23px}.mapping-experience{margin-top:32px;border-radius:15px}.mapping-visual{aspect-ratio:.93}.mapping-topline{top:17px;left:15px;right:15px}.mapping-topline>span{font-size:10px;padding:7px 9px}.mapping-footnote{left:17px;right:17px;bottom:20px}.mapping-footnote>span{font-size:15px}.mapping-footnote small{font-size:10px}.mapping-hotspot{top:43%;left:43%}.mapping-hotspot>span{width:35px;height:35px;flex-shrink:0}.mapping-hotspot>i{width:18px;flex-shrink:0}.mapping-hotspot>b{font-size:11px;max-width:97px}.mapping-experience .prevention-steps{padding:10px 21px 27px}.mapping-experience .step{padding:23px 0}.mapping-experience .step strong{font-size:25px}.mapping-experience .step-content{font-size:15px}.mapping-experience .prevention-steps>.button{font-size:13px;width:100%;padding:15px 17px;gap:10px}.comparison-labels{left:15px;right:15px;top:77px}.comparison-labels span{font-size:10px;padding:7px 9px}.comparison-hint{font-size:11px;bottom:101px}.comparison-line>span{width:46px;height:46px}.detail-focus{left:23%;top:38%}.detail-focus>span{width:62px;height:62px}.detail-focus>p{font-size:11px;padding:8px;max-width:120px}.detail-focus>i{width:18px}.detail-zoom{bottom:98px;left:17px;font-size:11px;gap:12px}html[data-hero=corporate] .mapping-experience{border-radius:20px}}
@media(prefers-reduced-motion:reduce){.cinematic.is-scroll{height:auto}.cinematic.is-scroll .cinematic-stage{position:relative;top:auto}.cinematic-focus,.cinematic-chapters i,.mapping-detail>img{transition:none}.mapping-detail,.mapping-comparison{animation:none}.cinematic-scroll{display:none}}

/* Stable text planes: no heading replacement or layout jump at chapter boundaries. */
.cinematic-messages{display:grid;isolation:isolate}
.cinematic-message{grid-area:1/1;opacity:0;transform:translateY(9px);transition:opacity .38s ease,transform .55s var(--ease);pointer-events:none}
.cinematic-message.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.cinematic-message:not(.is-active){user-select:none}
.cinematic-media canvas{will-change:opacity}
@media(min-width:901px) and (max-height:820px){.cinematic-copy{top:17%;width:43%}.cinematic-copy h2{font-size:clamp(42px,4vw,60px)}.cinematic-message>p{margin-top:18px;font-size:16px;min-height:3.2em}.cinematic-link{margin-top:16px}.cinematic-bottom{bottom:86px}}
@media(prefers-reduced-motion:reduce){.cinematic-message{transition:none;transform:none}}
