/* Two linked stories: enter the skin portrait, then move through the evidence.
   The buffered film renderer stays intact; framing and card travel are bounded. */
.cinematic{background:var(--paper);color:#f7f5ef}
.cinematic-stage{overflow:visible}
.cinematic-frame{position:absolute;inset:0;isolation:isolate;overflow:hidden;background:#25221e;clip-path:inset(var(--film-y,20px) var(--film-x,48px) round var(--film-radius,32px))}
.cinematic.has-frame-scroll{height:320svh}
.cinematic.has-frame-scroll .cinematic-stage{position:sticky;top:var(--header);height:calc(100svh - var(--header));min-height:0}
.cinematic.is-journey-visible .cinematic-frame{will-change:clip-path}
.cinematic-copy{left:calc(var(--gutter) + 20px);width:39%;top:22%}
.cinematic-bottom{left:calc(var(--gutter) + 20px);right:calc(var(--gutter) + 20px);bottom:78px}
.cinematic-scroll{left:calc(var(--gutter) + 20px);top:42px}
.cinematic-notes{position:absolute;inset:0;pointer-events:none}
.cinematic-note{position:absolute;left:58%;top:48%;display:flex;align-items:center;max-width:37%;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .5s var(--ease)}
.cinematic-note.is-active{opacity:1;transform:none}
.cinematic-message,.cinematic-note{transition:opacity .12s ease,transform .4s var(--ease)}
.cinematic-message.is-active,.cinematic-note.is-active{transition:opacity .26s ease .12s,transform .5s var(--ease) .12s}
.note-point{height:35px;width:35px;flex-shrink:0;border:1px solid #f4dfb7;border-radius:50%;display:grid;place-items:center;background:#29251a26}
.note-point:after{content:'';width:5px;height:5px;border-radius:50%;background:#f4dfb7}
.cinematic-note>i{height:1px;width:35px;background:#f4dfb7;flex-shrink:0}
.cinematic-note>p{background:#24231fe8;color:#fff9ee;padding:14px 17px;border-radius:9px;line-height:1.45;box-shadow:0 6px 25px #17141026}
.cinematic-note strong{display:block;font-size:14px;font-weight:500}
.cinematic-note p>span{display:block;font-size:12px;color:#e2d6c2;margin-top:4px;max-width:24ch}

/* The images are independent layers, with the next one sliding over the last. */
.prevention.prevention-cinema{overflow:visible}
.mapping-experience.mapping-story{display:block;margin-top:52px;background:none;border:0;border-radius:0;overflow:visible}
.mapping-stage{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,100px);position:relative;padding:22px 0}
.mapping-story .mapping-visual{height:590px;min-height:0;background:transparent;overflow:visible;isolation:auto;aspect-ratio:auto}
.mapping-story .mapping-visual:after{display:none}
.mapping-story .mapping-panel{position:relative;height:590px;inset:auto;border-radius:22px;overflow:hidden;background:#292820;animation:none;transform-origin:50% 0;isolation:isolate}
.mapping-story .mapping-panel:after{display:block;content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(0deg,#151610ed,transparent 35%,transparent 78%,#15161055)}
.mapping-story .mapping-panel[data-map-panel='1']{z-index:2}
.mapping-story .mapping-panel[data-map-panel='2']{z-index:3}
.mapping-story .mapping-body{z-index:1}
.mapping-story .mapping-panel[inert]{pointer-events:none}
.mapping-story .mapping-hotspot{z-index:2;left:42%;top:43%}
.mapping-story .mapping-hotspot>b{max-width:110px}
.mapping-story .mapping-topline{top:22px;left:22px;right:22px}
.mapping-story .mapping-topline>span{max-width:70%;font-size:11px}
.mapping-story .mapping-footnote{bottom:23px;left:24px;right:24px;z-index:4}
.mapping-story .mapping-footnote>span{font-size:16px;max-width:31ch}
.mapping-story .mapping-footnote small{font-size:11px}
.mapping-story .comparison-labels{top:24px;left:22px;right:22px;z-index:2}
.mapping-story .comparison-hint{bottom:112px;z-index:3}
.mapping-story .comparison-line{z-index:2}
.mapping-story .detail-focus{left:28%;top:35%;z-index:2}
.mapping-story .detail-focus>span{width:85px;height:85px}
.mapping-story .detail-focus>i{width:24px}
.mapping-story .detail-focus>p{max-width:160px}
.mapping-story .detail-zoom{bottom:113px;z-index:2}
.mapping-editorial{align-self:center;padding:25px 0;min-width:0}
.mapping-tabs{display:flex;gap:clamp(16px,2vw,34px);border-bottom:1px solid #666b5d80;margin-bottom:42px}
.mapping-tabs button{position:relative;background:none;color:#bfc6b5;min-height:52px;padding:8px 0 17px;font-size:14px;white-space:nowrap}
.mapping-tabs button:after{content:'';position:absolute;bottom:-1px;height:2px;background:#d9bf8a;left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.mapping-tabs button[aria-pressed=true]{color:#fff8e9}
.mapping-tabs button[aria-pressed=true]:after{transform:scaleX(1)}
.mapping-text h3{font-size:clamp(36px,4vw,60px);line-height:1.12;color:#f8f7ef;font-weight:450}
.mapping-text>p{font-size:17px;line-height:1.7;max-width:38ch;margin-top:27px;color:#d2d7c8}
.mapping-editorial>.button{margin-top:32px;font-size:14px;min-height:52px;padding:15px 23px}
.mapping-scroll-hint{display:none;color:#b4bea8;font-size:12px;align-items:center;gap:12px;margin-top:26px}
.mapping-scroll-hint .icon{width:16px;height:16px;transform:rotate(90deg)}
.mapping-ready .mapping-visual{overflow:visible}
.mapping-ready .mapping-panel{position:absolute;inset:0;height:100%}
.mapping-ready .mapping-texts{display:grid}
.mapping-ready .mapping-text{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .26s ease,transform .4s var(--ease);pointer-events:none}
.mapping-ready .mapping-text.is-active{opacity:1;transform:none;pointer-events:auto}
.mapping-ready:not(.is-stack-scroll) .mapping-panel{visibility:hidden}
.mapping-ready:not(.is-stack-scroll) .mapping-panel.is-active{visibility:visible}
.mapping-ready.is-stack-scroll{height:300svh}
.mapping-ready.is-stack-scroll .mapping-stage{position:sticky;top:calc(var(--header) + 12px);height:calc(100svh - var(--header) - 36px);min-height:520px;overflow:clip;align-items:stretch}
.mapping-ready.is-stack-scroll .mapping-visual{height:100%}
.mapping-ready.is-stack-scroll .mapping-scroll-hint{display:flex}
.mapping-ready.is-stack-scroll.is-journey-visible .mapping-panel{will-change:transform}
html[data-hero=corporate] .mapping-text h3{font-weight:700}
html[data-hero=corporate] .mapping-experience.mapping-story{background:none;border-radius:0}
html[data-hero=corporate] .mapping-editorial>.button{background:#b8eee0;color:#171817;border-color:#b8eee0}

@media(max-width:1100px){
 .cinematic-copy{width:43%}.cinematic-note{left:60%;max-width:33%}.cinematic-note>i{width:20px}.cinematic-note>p{padding:12px}.cinematic-note strong{font-size:13px}.cinematic-note p>span{font-size:11px}
 .mapping-stage{gap:40px}.mapping-tabs{gap:20px}.mapping-tabs button{font-size:13px}.mapping-text h3{font-size:40px}.mapping-text>p{font-size:16px;line-height:1.65}.mapping-story .detail-focus{left:17%}
}
@media(max-width:900px){
 .mapping-stage{display:flex;flex-direction:column;gap:25px}
 .mapping-story .mapping-visual{height:430px;width:100%;max-width:none}
 .mapping-story .mapping-panel{height:430px}
 .mapping-editorial{padding:0;width:100%;align-self:auto}
 .mapping-tabs{margin-bottom:24px;gap:28px}
 .mapping-text h3{font-size:39px}.mapping-text>p{max-width:53ch}
 .mapping-story .mapping-hotspot{left:53%}
 .mapping-ready.is-stack-scroll .mapping-stage{height:calc(100svh - var(--header) - 130px);min-height:0;gap:21px;padding:20px 0 0}
 .mapping-ready.is-stack-scroll .mapping-visual{height:43%;min-height:230px;flex-shrink:0;clip-path:inset(-20px 0 0)}
 .mapping-ready.is-stack-scroll .mapping-panel{height:100%}
 .mapping-ready.is-stack-scroll .mapping-tabs{margin-bottom:18px}
 .mapping-ready.is-stack-scroll .mapping-tabs button{min-height:40px;padding-bottom:11px}
 .mapping-ready.is-stack-scroll .mapping-text h3{font-size:30px}
 .mapping-ready.is-stack-scroll .mapping-text h3 br{display:none}
 .mapping-ready.is-stack-scroll .mapping-text>p{font-size:15px;line-height:1.6;margin-top:15px;max-width:60ch}
 .mapping-ready.is-stack-scroll .mapping-editorial>.button{margin-top:19px;min-height:46px;padding:12px 19px;font-size:13px}
 .mapping-ready.is-stack-scroll .mapping-scroll-hint{display:none}
}
@media(max-width:600px){
 .cinematic{margin-top:40px}
 .cinematic-stage{height:780px;min-height:0;display:block}
 .cinematic-frame{--film-x:13px;--film-y:14px;--film-radius:24px}
 .cinematic.has-frame-scroll{height:185svh}
 .cinematic .cinematic-media{height:100%;bottom:0}
 .cinematic .cinematic-shade{background:linear-gradient(0deg,#211f1beb,rgba(28,27,23,.82) 38%,rgba(28,27,23,.08) 78%,rgba(28,27,23,.28))}
 .cinematic .cinematic-copy{position:absolute;margin:0;left:32px;right:32px;top:auto;bottom:228px;width:auto}
 .cinematic .cinematic-copy h2{font-size:36px;min-height:2.2em}
 .cinematic .cinematic-message>p{font-size:15px;line-height:1.6;margin-top:18px;min-height:4.8em;max-width:34ch}
 .cinematic .cinematic-link{font-size:13px;margin-top:9px;gap:15px}
 .cinematic .cinematic-bottom{position:absolute;margin:0;left:32px;right:32px;bottom:142px;gap:12px}
 .cinematic .cinematic-chapters{gap:12px}
 .cinematic .cinematic-chapters button{font-size:10px;line-height:1.5}
 .cinematic .cinematic-scroll{left:32px;top:35px;font-size:11px}
 .cinematic-note{top:23%;left:auto;right:30px;max-width:calc(100% - 64px)}
 .note-point{width:28px;height:28px}.cinematic-note>i{width:24px}.cinematic-note>p{padding:10px 12px}.cinematic-note strong{font-size:12px}.cinematic-note p>span{font-size:11px}
 .mapping-experience.mapping-story{margin-top:30px}
 .mapping-tabs{justify-content:space-between;gap:16px}.mapping-tabs button{font-size:13px}
 .mapping-story .mapping-panel{border-radius:17px}
 .mapping-story .mapping-visual{height:390px}
 .mapping-text h3{font-size:34px}.mapping-text>p{font-size:15px;margin-top:20px}
 .mapping-story .mapping-topline{top:14px;left:15px;right:15px}.mapping-story .mapping-topline>span{font-size:9px;max-width:none;padding:6px 8px}
 .mapping-story .mapping-footnote{bottom:17px;left:17px;right:17px}.mapping-story .mapping-footnote>span{font-size:13px}.mapping-story .mapping-footnote small{font-size:10px}
 .mapping-story .mapping-hotspot{left:39%;top:38%}.mapping-story .mapping-hotspot>b{font-size:10px;max-width:95px}
 .mapping-story .comparison-labels{top:15px;left:15px;right:15px}.mapping-story .comparison-labels span{font-size:10px}
 .mapping-story .comparison-hint{bottom:82px;font-size:10px}
 .mapping-story .detail-focus{left:19%;top:29%}.mapping-story .detail-focus>span{height:60px;width:60px}.mapping-story .detail-focus>i{width:18px}.mapping-story .detail-focus>p{font-size:10px;max-width:116px}
 .mapping-story .detail-zoom{left:17px;bottom:84px;font-size:11px;min-height:40px}
 .mapping-ready.is-stack-scroll .mapping-stage{height:calc(100svh - var(--header) - 142px);gap:18px;padding-top:20px}
 .mapping-ready.is-stack-scroll .mapping-visual{height:42%;min-height:220px}
 .mapping-ready.is-stack-scroll .mapping-text h3{font-size:28px;line-height:1.15}
 .mapping-ready.is-stack-scroll .mapping-text>p{font-size:14px;line-height:1.55;margin-top:13px}
 .mapping-ready.is-stack-scroll .mapping-tabs{margin-bottom:17px}
 .mapping-ready.is-stack-scroll .mapping-editorial>.button{margin-top:18px}
 .mapping-ready.is-stack-scroll .comparison-hint{display:none}
 .mapping-ready.is-stack-scroll .mapping-footnote>span{font-size:12px}
 .mapping-ready.is-stack-scroll .mapping-footnote small{font-size:9px}
 .mapping-ready.is-stack-scroll .detail-zoom{bottom:67px;min-height:36px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){
 .cinematic-frame{clip-path:inset(14px 14px round 22px);will-change:auto}
 .cinematic-note,.mapping-ready .mapping-text{transition:none;transform:none}
 .mapping-story .mapping-panel{will-change:auto}
}