/* Full-bleed model campaigns. Layout is sized to the screen, not the product cutout. */
:root{--page-gutter:max(5vw,calc((100vw - 1400px)/2));--header-height:82px}
.header{height:var(--header-height);padding-inline:var(--page-gutter);gap:44px}
.header .brand{width:145px}
.header nav{gap:clamp(18px,2.3vw,36px);font-size:15px}
.header .contact-button{font-size:14px;min-height:46px}
.section,footer{padding-inline:var(--page-gutter)}
.hero-carousel{height:min(820px,calc(100svh - var(--header-height)));min-height:510px;background:#e9edec}
.hero-slide{inset:0;visibility:visible;opacity:0;pointer-events:none;transition:opacity 1.2s ease-in-out;isolation:isolate}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.slide-background{inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-slide:after{z-index:0;background:linear-gradient(90deg,#f6f8f5e8 0%,#f6f8f59c 29%,#f6f8f520 48%,transparent 68%)}
.hero-slide:before{content:'';position:absolute;z-index:1;right:8%;bottom:5%;width:47%;height:14%;background:radial-gradient(ellipse at center,rgba(20,25,22,.28),rgba(20,25,22,0) 72%);filter:blur(16px);pointer-events:none}
.slide-copy,.is-lifestyle .slide-copy{left:var(--page-gutter);top:50%;transform:translateY(-50%);width:38%;max-width:570px}
.is-active .slide-copy{animation:none}
.slide-copy .eyebrow{font-size:14px;letter-spacing:3px;margin-bottom:21px;font-weight:500}
.slide-copy h2,.is-lifestyle .slide-copy h2{font-size:clamp(48px,5.4vw,84px);font-weight:300;line-height:1.02;letter-spacing:-2.8px;max-width:100%;text-wrap:balance}
.slide-tagline{font-size:clamp(19px,1.8vw,27px);line-height:1.4;max-width:360px;margin:23px 0 30px}
.slide-copy .button{min-width:205px;min-height:50px;font-size:15px;padding:14px 26px}
.slide-product,.is-active .slide-product{left:auto;right:6%;bottom:8%;width:47%;height:75%;object-fit:contain;object-position:center bottom;transform:none;transition:none;filter:drop-shadow(0 13px 8px #15202140)}
[data-story=agila] .slide-product{width:51%;right:3%;height:75%}
[data-story=stareer-5] .slide-product{width:46%;right:7%;height:74%}
[data-story=stareer-3] .slide-product{width:44%;right:8%;height:72%}
[data-story=stareer-neo] .slide-product{width:42%;right:9%;height:70%}
[data-story=magical-3-pro] .slide-product{width:42%;right:9%;height:70%}
[data-story=leader] .slide-product{width:46%;right:7%;height:73%}
[data-story=velora] .slide-product{width:46%;right:7%;height:73%}
[data-story=zyper-1] .slide-product{width:43%;right:8%;height:71%}
[data-story=ledo-3] .slide-product{width:39%;right:10%;height:66%}
.is-human-scene .slide-background{object-position:center 56%;height:100%;bottom:auto;filter:saturate(.94) contrast(1.02) brightness(.98)}
.is-lifestyle .slide-background{object-position:center 52%;filter:saturate(.98) sepia(.06) hue-rotate(350deg) brightness(1.02)}
.is-human-scene .slide-product{filter:drop-shadow(0 18px 12px rgba(9,19,18,.34)) drop-shadow(0 2px 1px rgba(9,19,18,.18))}
.is-human-scene:after{background:linear-gradient(90deg,rgba(246,248,245,.96) 0%,rgba(246,248,245,.8) 26%,rgba(246,248,245,.18) 49%,transparent 69%)}
.is-human-scene.is-night:after{background:linear-gradient(90deg,rgba(5,14,22,.88) 0%,rgba(5,14,22,.64) 31%,rgba(5,14,22,.14) 63%,transparent 80%)}
.is-night{color:#fff;background:#101b22}
.is-night:after{background:linear-gradient(90deg,#08131cef,#08131ca8 32%,#08131c20 60%,transparent)}
.collection{padding-block:74px 64px}
.collection h2{font-size:clamp(30px,3.1vw,48px);margin-bottom:27px}
.models{gap:48px;max-width:1400px;margin:auto}
.model-image{height:clamp(240px,23vw,350px)}
.model h3{font-size:26px}
.model p{font-size:16px;line-height:1.6}
.model .text-link{font-size:16px;margin-top:16px}
.all-models{margin-block:25px 15px;font-size:16px}
.range-note{font-size:13px}
.lithium-section{padding-block:90px 75px}
.lithium-top{grid-template-columns:1fr 1fr;gap:7%;min-width:0}
.lithium-copy h2{font-size:clamp(40px,4vw,62px)}
.technology-grid p{font-size:16px}
.benefits-section{padding-block:90px;gap:8%}
.benefits-visual h2{font-size:clamp(32px,3.1vw,48px)}
.benefits-visual>img{height:360px;max-width:510px}
.about-section{padding-block:90px;gap:7%}
.about-image{height:520px}
.about-copy h2{font-size:clamp(36px,3.5vw,54px)}
.ownership{grid-template-columns:1.1fr 1fr;gap:4%;padding-block:70px}
.ownership h2{font-size:clamp(26px,2.3vw,36px);white-space:normal;line-height:1.15}
.support-section{padding-left:8%}
.store-layout{grid-template-columns:1fr 1fr;height:330px;min-height:330px;gap:20px}
.store-visual{height:330px;padding-top:70px;background:#f1f4ee}
.store-visual img{width:94%;height:75%;object-fit:contain;left:3%;bottom:0;transform:none}
.store-visual>span{font-size:18px;top:22px;left:20px}
.store-copy .button{white-space:normal;font-size:14px;padding:12px 15px}
.support-visual{height:225px;background:#f3efea}
.support-visual img{position:static;width:100%;height:100%;object-fit:contain;transform:none}
footer{padding-block:45px;gap:40px}
@media(min-width:1800px){.hero-carousel{max-height:900px;height:calc(100svh - var(--header-height))}.slide-copy{max-width:570px}.slide-product,.is-active .slide-product{right:max(6%,calc((100vw - 1550px)/2));width:44%}}
@media(min-width:761px) and (max-width:1050px){
 :root{--page-gutter:4vw;--header-height:74px}
 .header{gap:22px}.header .brand{width:115px}.header nav{gap:16px;font-size:13px}.header .contact-button{font-size:12px;padding:10px}
 .slide-copy,.is-lifestyle .slide-copy{width:40%}.slide-copy h2,.is-lifestyle .slide-copy h2{font-size:52px}.slide-product,.is-active .slide-product{right:3%;width:52%;height:69%}
 .models{gap:25px}.model h3{font-size:23px}.model p{font-size:14px}
 .ownership{grid-template-columns:1fr 1fr;gap:30px}.store-layout{grid-template-columns:1fr;height:auto;min-height:330px}.store-visual{display:none}.support-section{padding-left:30px}.store-copy{gap:30px}
 .lithium-copy h2{font-size:39px}.technology-grid{gap:25px}.technology-grid h4{font-size:19px}.about-image{height:470px}
}
@media(max-width:760px){
 :root{--page-gutter:6%;--header-height:68px}
 .header{padding-inline:5%;gap:0}.header .brand{width:126px}.header nav{font-size:15px;gap:0}.header .contact-button{font-size:14px}
 .hero-carousel{height:calc(100svh - 68px);min-height:620px;max-height:800px}
 .hero-slide{inset:0}
 .slide-copy,.is-lifestyle .slide-copy{top:34px;left:6%;width:88%;max-width:none;transform:none}
 .slide-copy .eyebrow{font-size:12px;letter-spacing:2px;margin-bottom:14px}
 .slide-copy h2,.is-lifestyle .slide-copy h2{font-size:clamp(40px,11.5vw,58px);letter-spacing:-1.7px;max-width:350px;text-wrap:initial}
 .slide-tagline{font-size:19px;line-height:1.35;max-width:285px;margin:15px 0 21px}
 .slide-copy .button{font-size:14px;min-width:190px;min-height:46px;padding:12px 20px}
 .slide-background{object-position:65% bottom}
 .hero-slide:after{background:linear-gradient(180deg,#f6f8f5f7 0%,#f6f8f5eb 30%,#f6f8f555 49%,transparent 70%)}
 .slide-product,.is-active .slide-product,[data-story=agila] .slide-product{left:5%;right:auto;width:90%;height:48%;bottom:5%;object-position:center bottom}
 .is-lifestyle .slide-background{inset:auto 0 0;height:58%;object-position:65% center}
 .is-lifestyle{background:#f4f1e8}.is-lifestyle:after{display:block;background:linear-gradient(180deg,#f4f1e8 35%,#f4f1e800 53%)}
 .hero-slide:before{right:5%;bottom:4%;width:90%;height:13%;filter:blur(13px)}
 .is-night:after{background:linear-gradient(180deg,#08131cf7,#08131cdb 30%,#08131c30 63%,transparent)}
 .collection{padding-block:44px 36px}.collection h2{font-size:30px}.models{gap:25px}.model-image{height:320px}.model h3{font-size:24px}.model p{font-size:15px}.range-note{font-size:12px}
 .lithium-section{padding-block:48px 40px}.lithium-top{grid-template-columns:1fr;gap:36px}.lithium-copy h2{font-size:40px}.technology-grid p{font-size:14px}
 .benefits-section{padding-block:48px 40px;gap:25px}.benefits-visual h2{font-size:33px}.benefits-visual>img{height:300px}
 .about-section{padding-block:48px;gap:30px}.about-copy h2{font-size:36px}.about-image{height:380px}
 .ownership{grid-template-columns:1fr;gap:35px;padding-block:40px}.ownership h2{font-size:30px}.support-section{padding:32px 0 0}.store-layout{grid-template-columns:1fr 1fr;height:325px;gap:18px}.store-visual{height:325px}.store-visual>span{font-size:16px;left:14px}.store-copy .button{font-size:13px;padding:12px 10px}.support-visual{height:250px}
 footer{padding-block:35px;gap:28px 15px}
}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}.slide-copy{animation:none}}

/* Desktop navigation menus open on hover and keyboard focus. */
.nav-dropdown{position:relative;display:flex;align-items:center;height:100%}
.nav-dropdown>a{display:flex;align-items:center;height:100%;white-space:nowrap}
.nav-dropdown>a::before{content:'';width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-left:8px;order:2;opacity:.65;transition:transform .2s}
.nav-dropdown:hover>a::before,.nav-dropdown:focus-within>a::before{transform:rotate(225deg) translate(-1px,-1px)}
.nav-menu{position:absolute;left:-16px;top:calc(100% + 1px);min-width:190px;padding:10px 0;background:#fff;border:1px solid var(--line);box-shadow:0 16px 35px #1520151c;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s;z-index:20}
.nav-dropdown:hover .nav-menu,.nav-dropdown:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-menu a{display:block;padding:11px 17px;font-size:14px;white-space:nowrap}
.nav-menu a:hover,.nav-menu a:focus-visible{background:#f0faeb;color:#2e741b}
@media(max-width:760px){.nav-dropdown{display:block;height:auto}.nav-dropdown>a{height:auto;padding:14px 0}.nav-dropdown>a::before{margin-left:auto}.nav-menu{position:static;display:none;box-shadow:none;border:0;border-left:2px solid var(--green);padding:0 0 5px 10px;transform:none;opacity:1;visibility:visible;pointer-events:auto;background:#fbfdf9}.nav-dropdown:hover .nav-menu,.nav-dropdown:focus-within .nav-menu{display:block}.nav-menu a{padding:10px 12px;font-size:14px}}

/* Official OFERO campaign photography and reference-inspired scroll motion. */
.hero-carousel{height:clamp(510px,45vw,760px);min-height:0}
.slide-scene{position:absolute;inset:0;display:block}
.slide-scene img{width:100%;height:100%;object-fit:cover;object-position:var(--scene-position,center)}
.hero-slide.is-official:before{display:none}
.hero-slide.is-official:after{background:linear-gradient(90deg,rgba(244,246,243,.78),rgba(244,246,243,.35) 34%,transparent 58%)}
.hero-slide.is-official.is-night:after{background:linear-gradient(90deg,rgba(7,15,13,.82),rgba(7,15,13,.42) 33%,transparent 60%)}
.hero-slide[data-story=stareer-5]:after{background:linear-gradient(90deg,#e0e9ecb8,transparent 53%)}
.slide-copy{z-index:2}
.slide-copy h2{font-size:clamp(48px,5vw,80px)}
.slide-caption{position:absolute;right:3%;bottom:20px;font-size:11px;z-index:2;background:#ffffffbd;padding:6px 10px;color:#26302a}
.hero-slide{transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}
.is-active .slide-copy>.eyebrow,.is-active .slide-copy>h2,.is-active .slide-copy>.slide-tagline,.is-active .slide-copy>.button{animation:campaign-copy-in .95s cubic-bezier(.2,.65,.3,1) both}
.is-active .slide-copy>h2{animation-delay:.08s}.is-active .slide-copy>.slide-tagline{animation-delay:.14s}.is-active .slide-copy>.button{animation-delay:.2s}
@keyframes campaign-copy-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
[data-reveal].reveal-ready{opacity:0;translate:0 -24px;transition:opacity 1.65s cubic-bezier(.16,1,.3,1),translate 1.65s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
[data-reveal=left].reveal-ready{translate:-36px 0}
[data-reveal].is-revealed{opacity:1;translate:0 0}
.product-dialog{width:calc(100% - 48px);max-width:1600px;max-height:94dvh;overscroll-behavior:contain}
.product-dialog #dialog-content{padding:0}
.product-dialog .dialog-top{z-index:5;padding:12px 4%;box-shadow:0 1px 12px #12251908}
.product-campaign{position:relative;isolation:isolate;height:clamp(500px,47vw,740px);overflow:hidden;background:#e9eeeb}
.campaign-background{position:absolute;inset:0;z-index:-2}
.campaign-background img{width:100%;height:100%;object-fit:cover;object-position:center}
.product-campaign:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f5f8f3c9,transparent 62%);z-index:-1}
.campaign-dark{color:white;background:#111619}.campaign-dark:after{background:linear-gradient(90deg,#0b1012db,transparent 67%)}
.campaign-copy{position:absolute;left:6%;top:50%;transform:translateY(-50%);width:42%;z-index:2}
.campaign-copy h2{font-size:clamp(48px,5.8vw,84px);line-height:1.05;letter-spacing:-2px;text-wrap:balance}
.campaign-copy>p:not(.eyebrow){font-size:clamp(19px,2vw,28px);margin:22px 0 30px;line-height:1.3}
.campaign-product{position:absolute;width:48%;height:82%;object-fit:contain;right:4%;bottom:0;filter:drop-shadow(0 18px 12px #513c382e)}
.campaign-caption{position:absolute;bottom:18px;right:3%;max-width:55%;background:#ffffffd4;color:#30352d;padding:6px 10px;font-size:11px;z-index:2}
.product-campaign[data-product=stareer-5] .campaign-background img{object-position:center 46%}
.product-campaign[data-product=stareer-3] .campaign-background img{object-position:65% center}
.product-campaign[data-product=stareer-3]:after{background:linear-gradient(90deg,#05090eee,transparent 75%)}
.product-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:40px 6%;background:#f3f5f1;border-bottom:1px solid var(--line)}
.product-facts>div{display:flex;flex-direction:column;gap:10px;padding-right:20px}
.product-facts span{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#646d61}
.product-facts strong{font-weight:400;font-size:clamp(18px,2.15vw,32px);line-height:1.2}
.product-overview{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;padding:65px 6%}
.product-overview h3,.product-specifications h3,.product-next h3{font-size:clamp(30px,3.5vw,50px);line-height:1.12;font-weight:300;letter-spacing:-1px}
.product-overview p:not(.eyebrow){max-width:480px;color:var(--muted);margin-top:23px;font-size:17px}
.product-overview>img{width:100%;height:470px;object-fit:contain}
.product-overview .prices{display:flex;flex-wrap:wrap;gap:25px;margin:28px 0}
.product-overview .price{display:flex;flex-direction:column;gap:8px;background:none;padding:0;border:0}
.product-overview .price strong{font-size:29px;font-weight:400}.product-overview .price>span{font-size:13px;color:var(--muted)}
.product-specifications{padding:65px 6%;background:#f5f6f3}
.product-specifications .specs{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;margin-top:35px}
.product-specifications .specs>div{padding:22px 0;background:none;border-bottom:1px solid #dce0d7}
.product-specifications .specs dt{font-size:13px;color:var(--muted);margin-bottom:9px}.product-specifications .specs dd{font-size:18px;font-weight:400;margin:0}
.product-specifications .dialog-note{margin-top:32px;max-width:950px;line-height:1.6}
.product-next{padding:50px 6%;display:flex;align-items:center;justify-content:space-between;gap:25px}
@media(max-width:760px){
 .hero-carousel{height:calc(100svh - 68px);min-height:650px;max-height:830px}
 .hero-slide.is-official .slide-scene{top:30%;height:70%;bottom:auto}
 .hero-slide.is-official .slide-scene img{object-position:var(--scene-position,center)}
 .hero-slide.is-official{background:#e0e9ec}
 .hero-slide.is-official:after{background:linear-gradient(180deg,#e0e9ec 24%,#e0e9ecef 34%,transparent 58%)}
 .hero-slide.is-official.is-night{background:#101a17}
 .hero-slide.is-official.is-night:after{background:linear-gradient(180deg,#101a17 24%,#101a17ed 35%,transparent 60%)}
 .hero-slide[data-story=stareer-3]{background:#111416}
 .hero-slide[data-story=stareer-3]:after{background:linear-gradient(180deg,#111416 24%,#111416eb 35%,transparent 58%)}
 .hero-slide[data-story=agila],.hero-slide[data-story=leader]{background:#e2edf1}
 .hero-slide[data-story=agila]:after,.hero-slide[data-story=leader]:after{background:linear-gradient(180deg,#e2edf1 24%,#e2edf1e8 34%,transparent 54%)}
 .hero-slide[data-story=agila] .slide-scene,.hero-slide[data-story=leader] .slide-scene{top:21%;height:79%}
 .hero-slide[data-story=agila] .slide-scene img,.hero-slide[data-story=leader] .slide-scene img{object-position:center bottom}
 .hero-slide[data-story=zyper-1]{background:#ecebe6}.hero-slide[data-story=zyper-1]:after{background:linear-gradient(180deg,#ecebe6 24%,#ecebe6eb 34%,transparent 57%)}
 .hero-slide[data-story=ledo-3]{background:#ffb8d1}.hero-slide[data-story=ledo-3]:after{background:linear-gradient(180deg,#ffb8d1 28%,#ffb8d180 52%,transparent 80%)}
 .slide-copy h2{font-size:clamp(42px,11.5vw,58px)}
 .slide-caption{font-size:10px;bottom:12px}
 .product-dialog{width:100%;height:100dvh;max-height:100dvh;max-width:none;margin:0}
 .product-dialog .dialog-top{padding:10px 5%}
 .product-campaign{height:730px;max-height:calc(100svh - 60px);min-height:630px;background:#e7edee}
 .campaign-copy{top:35px;transform:none;width:88%;left:6%}
 .campaign-copy h2{font-size:46px;letter-spacing:-1.5px}
 .campaign-copy>p:not(.eyebrow){font-size:21px;margin:16px 0 23px}
 .campaign-background{top:20%;height:80%;bottom:auto}
 .campaign-background img{object-position:center bottom}
 .product-campaign:after{background:linear-gradient(180deg,#e7edee 24%,#e7edeee8 33%,transparent 62%)}
 .campaign-dark{background:#101619}.campaign-dark:after,.product-campaign[data-product=stareer-3]:after{background:linear-gradient(180deg,#101619 24%,#101619df 34%,transparent 65%)}
 .product-campaign[data-product=stareer-3] .campaign-background{top:33%;height:67%}
 .product-campaign[data-product=stareer-5] .campaign-background img{object-position:center bottom}
 .product-campaign[data-product=magical-3-pro]{background:#eeecdf}.product-campaign[data-product=magical-3-pro]:after{background:linear-gradient(180deg,#eeecdf 27%,#eeecdfc4 36%,transparent 65%)}
 .product-campaign[data-product=ledo-3]{background:#ffb8d1}.product-campaign[data-product=ledo-3]:after{background:linear-gradient(180deg,#ffb8d1 28%,#ffb8d180 52%,transparent 80%)}
 .campaign-product{width:94%;height:53%;right:3%;bottom:3%}
 .campaign-caption{max-width:88%;right:6%;bottom:12px;font-size:10px}
 .product-facts{padding:28px 6%;gap:12px}.product-facts>div{padding:0;gap:9px}.product-facts span{font-size:9px;letter-spacing:.9px}.product-facts strong{font-size:17px}
 .product-overview{grid-template-columns:1fr;padding:45px 6%;gap:10px}.product-overview>img{height:330px;grid-row:1}.product-overview p:not(.eyebrow){font-size:16px}
 .product-specifications{padding:45px 6%}.product-specifications .specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.product-specifications .specs dd{font-size:16px;overflow-wrap:anywhere}
 .product-next{padding:40px 6%;flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
 .hero-slide{transition:none}.is-active .slide-copy>*{animation:none!important}
 [data-reveal].reveal-ready{opacity:1;translate:none;transition:none}
}
@media(max-width:760px){
 .hero-slide[data-story=zyper-1] .slide-scene img{object-position:54% center}
 .product-campaign[data-product=zyper-1] .campaign-background img{object-position:54% center}
 .hero-slide[data-story=stareer-neo],.hero-slide[data-story=velora]{background:#eeecdf}
 .hero-slide[data-story=stareer-neo]:after,.hero-slide[data-story=velora]:after{background:linear-gradient(180deg,#eeecdf 27%,#eeecdfc4 36%,transparent 65%)}
}
