/* A seven-chapter exterior study. Scroll controls the composition, never the page input. */
.product-story{height:100svh;position:relative;background:#123b32;color:#f4f5e9;isolation:isolate;scroll-margin-top:-100px;--journey:0}
.product-story.story-enhanced{height:650svh}
.story-stage{height:100svh;min-height:620px;position:sticky;top:0;overflow:clip;background:radial-gradient(ellipse at 66% 43%,#315748 0%,#1b4339 37%,#0e3029 100%)}
.story-stage:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 64% 60%,#8fc5c322,transparent 48%);opacity:.2;transition:opacity 1.4s;pointer-events:none}
[data-scene="2"] .story-stage:before,[data-scene="3"] .story-stage:before{opacity:1}
[data-scene="5"] .story-stage:before,[data-scene="6"] .story-stage:before{background:radial-gradient(ellipse at 66% 52%,#c4c8961c,transparent 55%);opacity:1}
.story-topline{position:absolute;left:5%;right:5%;top:34px;display:flex;align-items:center;justify-content:space-between;gap:30px;z-index:6}
.story-topline .eyebrow{color:#ccd7bd;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:1.7px}
.live-dot{width:5px;height:5px;background:#d7ebae;border-radius:100%;box-shadow:0 0 15px #d7ebae40;flex-shrink:0}
.story-skip{font-size:11px;color:#c2ceb6;display:flex;gap:12px;align-items:center;border-bottom:1px solid #829a6b;padding-bottom:3px;white-space:nowrap}
.story-grid{position:absolute;inset:0;background-image:linear-gradient(#abc99d05 1px,transparent 1px),linear-gradient(90deg,#abc99d05 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at 60% 70%,#000,transparent 70%);pointer-events:none;transform:translateY(calc(var(--journey) * -40px))}
.story-orbit{position:absolute;border:1px solid #adc6a514;border-radius:50%;pointer-events:none;width:800px;height:800px;right:-70px;top:calc(50% - 400px);transform:scale(calc(.9 + var(--journey) * .16))}
.story-orbit:after{content:'';position:absolute;width:5px;height:5px;border:1px solid #c5d8b555;border-radius:50%;left:17%;top:12%;box-shadow:0 0 18px #d7ebae22}
.orbit-two{width:620px;height:620px;right:20px;top:calc(50% - 310px);border-color:#adc6a50c;transform:scale(calc(1.03 - var(--journey) * .1)) rotate(calc(var(--journey) * 120deg))}
.story-giant{position:absolute;right:-.02em;top:50%;transform:translateY(-52%);font:clamp(320px,41vw,660px)/1 var(--serif);letter-spacing:-.06em;color:#b3c3a508;pointer-events:none;user-select:none}
.story-copy{position:absolute;top:48%;transform:translateY(-50%);left:6%;width:34%;max-width:480px;min-height:360px;z-index:4;pointer-events:none}
.story-panel{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transform:translateY(22px);filter:blur(3px);transition:opacity .5s,transform .65s,visibility .5s,filter .65s;pointer-events:none}
.story-panel.is-active{opacity:1;visibility:visible;transform:none;filter:none;pointer-events:auto}
.story-kicker{font-size:9px;font-weight:500;letter-spacing:1.65px;color:#adc399;display:block;margin-bottom:24px}
.story-panel h2{color:#f4f5e9;font-size:clamp(57px,5.9vw,91px);line-height:1.02;letter-spacing:-.035em;margin-bottom:25px;text-wrap:balance}
.story-panel h2 em{color:#b6c99f}
.story-panel p{font-size:14px;line-height:1.85;color:#b8c7b4;max-width:330px;text-wrap:pretty}
.scroll-cue{margin-top:30px;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:1.5px;color:#ccd9bf}
.scroll-mouse{position:relative;width:16px;height:24px;border:1px solid #c5d4b780;border-radius:10px;display:inline-block}
.scroll-mouse:after{content:'';position:absolute;top:5px;left:6px;height:4px;width:2px;background:#c5d4b7;border-radius:3px;animation:scroll-hint 2s ease-in-out infinite}
.story-detail{display:flex;align-items:center;gap:9px;margin-top:25px;font-size:11px;color:#cedabb}
.story-detail svg{width:17px;height:17px}
.story-panel .button{margin-top:25px;font-size:11px;min-height:47px;padding:14px 20px;gap:20px}
.story-cta-pair{display:flex;flex-wrap:wrap;align-items:center;gap:15px 22px;margin-top:25px}
.story-cta-pair .button{margin-top:0}
.story-business-link{display:inline-flex;align-items:center;gap:14px;border-bottom:1px solid #a7bd9b80;color:#e1e8d6;font-size:11px;padding:10px 0}
.story-business-link:hover{color:#fff;border-color:#e1e8d6}
.product-canvas{position:absolute;top:6%;bottom:13%;right:-2%;width:67%;z-index:2;touch-action:pan-y;cursor:grab}
.product-canvas:active{cursor:grabbing}
.product-canvas canvas{display:block;width:100%!important;height:100%!important;outline:none;touch-action:pan-y}
.story-fallback{position:absolute;height:76%;width:65%;top:12%;left:18%;object-fit:contain;filter:drop-shadow(0 30px 20px #061b2340);transition:opacity .3s}
.webgl-ready .story-fallback{opacity:0;pointer-events:none;visibility:hidden}
.story-model-label{position:absolute;right:7%;bottom:132px;display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:.7px;color:#a6bba0;z-index:4;pointer-events:none}
.story-model-label>span{width:4px;height:4px;border-radius:50%;background:#a6bba0;flex-shrink:0}
.story-interaction-hint{position:absolute;right:7%;top:100px;z-index:4;font-size:8px;letter-spacing:1px;color:#a8bc9d;pointer-events:none}
.story-interaction-hint b{font-weight:400;font-size:15px;margin-left:11px;vertical-align:-1px}
.story-annotations{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.story-annotation{position:absolute;top:0;left:0;opacity:0;transition:opacity .45s;pointer-events:none}
.story-annotation.is-visible{opacity:1}
.annotation-dot{position:absolute;width:6px;height:6px;border:1px solid #dbecd1;border-radius:50%;left:-3px;top:-3px;background:#bed8b14d;box-shadow:0 0 0 5px #b8d1b00c,0 0 20px #b8d1b03b}
.annotation-line{position:absolute;left:0;top:0;width:42px;height:1px;background:linear-gradient(90deg,#d5e7c88c,#d5e7c82a);transform-origin:left center;transform:rotate(-42deg)}
.story-annotation>span{position:absolute;left:32px;top:-42px;color:#dfebd5;font-size:10px;font-weight:400;letter-spacing:.3px;padding:5px 0;border-bottom:1px solid #b9d1ad38;white-space:nowrap;text-shadow:0 2px 8px #0d302c}
.story-annotation.label-left .annotation-line{transform:rotate(-138deg)}
.story-annotation.label-left>span{left:auto;right:32px;text-align:right}
.story-bottom{position:absolute;left:5%;right:5%;bottom:37px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #a7bb9726;padding-top:22px}
.story-controls{display:flex;gap:25px;align-items:center}
.story-controls button{display:flex;align-items:center;gap:8px;padding:6px 0;color:#9aad93;position:relative;transition:color .25s}
.story-controls button>span:first-child{font:24px/1 var(--serif);color:#6f8b71;transition:color .25s}
.story-controls button>span:last-child{font-size:10px;white-space:nowrap}
.story-controls button[aria-pressed=true]{color:#f0f4e4}
.story-controls button[aria-pressed=true]>span:first-child{color:#cfdfb6}
.story-controls button:after{content:'';position:absolute;bottom:-23px;left:0;right:100%;height:2px;background:#bfd4a6;transition:right .3s}
.story-controls button[aria-pressed=true]:after{right:0}
.story-playback{display:flex;align-items:center;gap:24px;flex-shrink:0}
#story-count{font-size:10px;font-variant-numeric:tabular-nums;color:#a0b497;letter-spacing:1.5px;white-space:nowrap}
#motion-toggle{font-size:10px;color:#bdcdb1;display:flex;align-items:center;gap:9px;padding:7px 0;white-space:nowrap}
.pause-symbol{font-size:14px;line-height:1;width:12px}
.story-controls button:focus-visible,#motion-toggle:focus-visible,.story-business-link:focus-visible{outline:2px solid #d3e4be;outline-offset:6px;border-radius:2px}
.story-progress-track{height:2px;width:100%;position:absolute;left:0;bottom:0;background:#acc39318;z-index:6}
#story-progress{height:100%;width:100%;display:block;transform-origin:left;transform:scaleX(0);background:#c8dbb1;will-change:transform}
.story-disclaimer{background:var(--paper);font-size:10px;line-height:1.7;color:#73816c;text-align:center;padding:18px 5%}
.story-disclaimer+.system{padding-top:75px}
.product-story.story-enhanced.is-reduced-motion{height:auto}
.is-reduced-motion .story-stage{position:relative;min-height:740px;height:90svh}
.is-reduced-motion .story-panel,.is-reduced-motion .story-annotation,.is-reduced-motion .story-stage:before{transition:none}
.is-reduced-motion .scroll-mouse:after{animation:none}
.product-story:focus-within .story-skip{color:#f2f5e8}
html[lang|=fr] .story-panel h2{font-size:clamp(52px,5.25vw,81px)}
@keyframes scroll-hint{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(7px);opacity:1}}
@media(max-width:1250px){.story-controls{gap:19px}.story-controls button{flex-direction:column;gap:7px}.story-controls button>span:last-child{font-size:10px}.story-controls button:after{bottom:-22px}.story-playback{gap:18px}.story-panel h2{font-size:66px}.story-copy{left:5%;width:36%;min-height:360px}.story-panel p{font-size:13px;max-width:300px}.story-model-label{font-size:7px;right:5%;bottom:143px}}
@media(max-width:1000px) and (min-width:801px){.story-controls{gap:14px}.story-controls button>span:last-child{font-size:9px}.story-playback #story-count{display:none}.motion-label{display:none}.story-panel h2{font-size:57px}html[lang|=fr] .story-panel h2{font-size:51px}.story-panel p{font-size:12px}.product-canvas{right:-4%;width:67%}.story-interaction-hint{font-size:7px}.story-kicker{font-size:8px}.story-cta-pair{gap:10px}.story-business-link{font-size:10px}.story-model-label{font-size:6px}.story-bottom{left:4%;right:4%}}
@media(max-width:800px){
 .product-story.story-enhanced{height:560svh}
 .story-stage{min-height:730px}
 .story-topline{top:25px;left:6%;right:6%;gap:20px}
 .story-topline .eyebrow{font-size:8px;letter-spacing:1px;gap:9px}
 .story-skip{font-size:10px;gap:8px}
 .story-copy{top:90px;left:6%;width:88%;max-width:none;transform:none;min-height:225px;text-align:center}
 .story-kicker{font-size:8px;letter-spacing:1.3px;margin-bottom:15px}
 .story-panel h2,html[lang|=fr] .story-panel h2{font-size:57px;margin-bottom:15px;line-height:1.02}
 .story-panel h2 br{display:none}
 .story-panel p{font-size:13px;max-width:400px;margin:auto;line-height:1.75}
 .scroll-cue{justify-content:center;margin-top:20px;font-size:8px}
 .scroll-mouse{width:12px;height:19px}.scroll-mouse:after{left:4px;top:4px}
 .story-detail{justify-content:center;margin-top:17px;font-size:10px}
 .story-panel .button{margin-top:18px;min-height:41px;padding:11px 16px;font-size:11px}
 .story-cta-pair{justify-content:center;gap:10px 20px;margin-top:18px}.story-cta-pair .button{margin-top:0}
 .story-business-link{font-size:11px;gap:10px}
 .product-canvas{top:290px;bottom:145px;width:100%;right:0}
 .story-giant{top:59%;right:5%;font-size:370px}
 .story-orbit{width:500px;height:500px;right:calc(50% - 250px);top:calc(60% - 250px)}
 .orbit-two{width:380px;height:380px;right:calc(50% - 190px);top:calc(60% - 190px)}
 .story-bottom{left:6%;right:6%;bottom:24px;padding-top:43px;gap:16px}
 .story-controls{gap:8px;flex:1;justify-content:space-between;position:relative}
 .story-controls button{position:static;flex-direction:column;gap:0;padding:0;min-width:27px;min-height:32px;justify-content:center}
 .story-controls button>span:first-child{display:grid;place-content:center;font-size:20px;width:30px;height:30px;border:1px solid #a6bf9a30;border-radius:50%;color:#98af90}
 .story-controls button[aria-pressed=true]>span:first-child{color:#eef2df;border-color:#c4d7ad99;background:#d2e7b810}
 .story-controls button>span:last-child{display:none;position:absolute;top:-29px;left:0;width:100%;font-size:12px;letter-spacing:.3px;text-align:center}
 .story-controls button[aria-pressed=true]>span:last-child{display:block}
 .story-controls button:after{display:none}
 .story-playback{padding-left:15px;border-left:1px solid #a7bb9726}
 .story-playback #story-count,.motion-label{display:none}
 #motion-toggle{width:32px;height:32px;justify-content:center;border:1px solid #a7bb9726;border-radius:50%;padding:0}
 .pause-symbol{font-size:14px}
 .story-model-label{right:6%;left:6%;justify-content:center;bottom:132px;font-size:7px;line-height:1.5;letter-spacing:.45px;text-align:center}
 .story-interaction-hint{display:none}
 .story-annotation>span{font-size:9px}
 .story-disclaimer{font-size:9px;padding:16px 8%}.story-disclaimer+.system{padding-top:45px}
 .is-reduced-motion .story-stage{height:850px;min-height:0}
 .story-fallback{height:100%;top:0;width:70%;left:15%}
}
@media(max-width:480px){
 .story-stage{min-height:740px}.story-topline{top:24px;gap:18px}.story-topline .eyebrow{font-size:7px;letter-spacing:.7px;max-width:52%}.story-skip{font-size:9px}
 .story-copy{top:80px;min-height:245px}
 .story-panel h2,html[lang|=fr] .story-panel h2{font-size:46px;margin-bottom:14px;max-width:350px;margin-inline:auto}
 .story-panel h2 br{display:block}
 .story-panel p{font-size:12px;max-width:310px;line-height:1.75}.story-kicker{font-size:7px;margin-bottom:13px}
 .scroll-cue{margin-top:16px;font-size:7px}.product-canvas{top:337px;bottom:141px}
 .story-panel .button{margin-top:15px}.story-cta-pair{margin-top:15px;gap:8px 17px}.story-cta-pair .button{margin-top:0}.story-business-link{font-size:10px}
 .story-detail{margin-top:14px;font-size:9px}.story-model-label{font-size:6.5px;bottom:126px}
 .story-bottom{bottom:23px;gap:10px;left:5%;right:5%}.story-controls{gap:5px}.story-controls button>span:first-child{font-size:19px;width:27px;height:27px}.story-controls button>span:last-child{font-size:11px}.story-playback{padding-left:10px}
 .story-disclaimer+.system{padding-top:32px}.is-reduced-motion .story-stage{height:825px}
 html[lang|=fr] .story-panel h2{font-size:42px}
}
@media(max-width:360px){.story-controls{gap:2px}.story-controls button{min-width:24px}.story-controls button>span:first-child{width:24px;height:24px;font-size:17px}.story-playback{padding-left:7px}.story-bottom{gap:7px}.story-panel h2,html[lang|=fr] .story-panel h2{font-size:39px}.story-panel p{font-size:11px}.story-cta-pair{gap:7px 14px}.story-cta-pair .button,.story-business-link{font-size:9px}}
@media(max-width:800px) and (max-height:760px){.story-stage{min-height:0}.story-copy{top:67px}.story-panel h2,html[lang|=fr] .story-panel h2{font-size:40px;margin-bottom:10px}.story-kicker{margin-bottom:9px}.story-panel p{font-size:11px;line-height:1.65}.story-panel .button{margin-top:12px;min-height:36px;padding:9px 15px}.story-cta-pair{margin-top:12px}.story-cta-pair .button{margin-top:0}.product-canvas{top:290px;bottom:126px}.story-model-label{bottom:112px}.story-bottom{bottom:19px;padding-top:38px}.scroll-cue{margin-top:12px}.story-controls button>span:last-child{top:-26px}}
@media(max-width:800px) and (max-height:620px){.story-topline{top:17px}.story-copy{top:51px}.story-panel h2,html[lang|=fr] .story-panel h2{font-size:33px}.story-panel p{font-size:10px;max-width:290px}.story-kicker{font-size:6px}.product-canvas{top:250px;bottom:117px}.story-model-label{bottom:101px;font-size:5.5px}.story-bottom{bottom:12px;padding-top:34px}.story-detail{margin-top:8px}.story-cta-pair{margin-top:9px}}
@media(prefers-reduced-motion:reduce){.product-story.story-enhanced{height:auto}.story-stage{position:relative;min-height:800px}.scroll-mouse:after{animation:none}.story-panel,.story-stage:before,.story-annotation{transition:none}}

/* Manrope display proportions keep every chapter readable beside the model. */
.story-panel h2{font-size:clamp(40px,4.25vw,65px);font-weight:600;line-height:1.1;letter-spacing:-.055em;margin-bottom:24px}
html[lang|=fr] .story-panel h2{font-size:clamp(37px,3.75vw,58px);line-height:1.12}
.story-panel h2 em{font-style:normal;font-weight:600;color:#c2d7a9}
.story-copy{top:47%;width:36%;max-width:530px;min-height:340px}
.story-panel p{font-size:13px;line-height:1.85;max-width:350px}
.story-kicker{font-weight:650;letter-spacing:.13em}
.story-giant{font-family:var(--display);font-weight:750;letter-spacing:-.08em;font-size:clamp(280px,34vw,560px);opacity:.6}
.story-controls button>span:first-child{font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:-.03em}
.story-controls button>span:last-child{font-size:10px;font-weight:500}
.story-controls{gap:22px}.story-panel .button{border-radius:8px}
@media(max-width:1200px) and (min-width:801px){.story-panel h2{font-size:46px}html[lang|=fr] .story-panel h2{font-size:41px}.story-controls{gap:14px}.story-controls button{gap:5px}.story-controls button>span:last-child{font-size:9px}.story-copy{width:38%;left:5%}.story-panel p{font-size:12px;max-width:300px}}
@media(max-width:800px){.story-copy{top:90px;left:7%;width:86%;max-width:none;min-height:220px;transform:none}.story-panel h2,html[lang|=fr] .story-panel h2{font-size:39px;line-height:1.12;max-width:520px;margin:0 auto 15px;letter-spacing:-.05em}.story-panel p{font-size:12px;max-width:400px}.story-controls button>span:first-child{font-size:12px;font-weight:550}.story-controls button>span:last-child{font-size:12px}.story-giant{font-size:300px}.story-panel .button{font-size:11px}.product-canvas{top:315px}}
@media(max-width:480px){.story-copy{top:80px;left:6%;width:88%;min-height:235px}.story-panel h2{font-size:35px;max-width:345px}html[lang|=fr] .story-panel h2{font-size:32px;max-width:335px}.story-panel p{font-size:11px;max-width:310px;line-height:1.8}.product-canvas{top:320px}.story-controls button>span:first-child{font-size:11px}.story-controls button>span:last-child{font-size:11px}.story-topline .eyebrow{font-size:6.5px}.story-panel .button{font-size:10px}.story-model-label{font-size:6px}}
@media(max-width:360px){.story-panel h2{font-size:30px}html[lang|=fr] .story-panel h2{font-size:28px}.story-copy{left:5%;width:90%}.story-panel p{font-size:10px;max-width:280px}.story-controls button>span:first-child{font-size:10px}.story-controls button>span:last-child{font-size:10px}}
@media(max-width:800px) and (max-height:760px){.story-copy{top:67px}.story-panel h2{font-size:32px;margin-bottom:12px}html[lang|=fr] .story-panel h2{font-size:29px;margin-bottom:12px}.story-panel p{font-size:10px;line-height:1.7}.product-canvas{top:285px}.story-kicker{margin-bottom:10px}}
@media(max-width:800px) and (max-height:620px){.story-copy{top:50px}.story-panel h2{font-size:27px}html[lang|=fr] .story-panel h2{font-size:25px}.story-panel p{font-size:9px}.product-canvas{top:255px}.story-detail{font-size:9px}}
@media(max-width:800px){.story-controls{gap:8px}}
@media(max-width:480px){.story-controls{gap:5px}}
@media(max-width:360px){.story-controls{gap:2px}}
.product-story.story-enhanced:not(.is-reduced-motion){height:740svh}.product-story[data-scene="4"] .story-giant{opacity:0}@media(max-width:800px){.product-story.story-enhanced:not(.is-reduced-motion){height:640svh}.story-controls{gap:3px}.story-controls button{min-width:23px}.story-controls button>span:first-child{width:24px;height:24px}.story-bottom{gap:6px}.story-playback{padding-left:5px}}@media(min-width:801px) and (max-width:1100px){.story-bottom{gap:8px}.story-controls{gap:10px}.story-controls button:not([aria-pressed=true])>span:last-child{display:none}}