/*
Theme Name: EONIKS
Theme URI: https://eoniks.com/
Author: Sergeev Digital
Description: Custom WordPress theme for EONIKS kinetic wall art.
Version: 2.1.7
Text Domain: eoniks
*/

/*
  Local production webfonts.
  These WOFF2 files are bundled with the theme so iOS/Safari, Android,
  Windows and macOS all use the same typography instead of system fallbacks.
*/
@font-face{
  font-family:'Tilda Sans';
  src:url('./fonts/TildaSans-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Tilda Sans';
  src:url('./fonts/TildaSans-Medium.woff2') format('woff2');
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:'Tilda Sans';
  src:url('./fonts/TildaSans-Semibold.woff2') format('woff2');
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
@font-face{
  font-family:'Myriad Pro';
  src:url('./fonts/MyriadPro-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Myriad Pro';
  src:url('./fonts/MyriadPro-Semibold.woff2') format('woff2');
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
@font-face{
  font-family:'Myriad Pro';
  src:url('./fonts/MyriadPro-Bold.woff2') format('woff2');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

/* Prevent Safari from synthesizing fake bold/italic faces. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-synthesis:none;
}

:root{--paper:#f2f2f2;--ink:#000;--accent:#fbc77b;--warm:#dcd3cc;--warm2:#dcd7d3;--text:#2e2e2d;--desktop-scale:1;--mobile-scale:1;--desktop-header-inverse:1;--desktop-header-pretop:73px;--desktop-shell-height:8348px;--footer-logo-left:60px;--footer-policy-left:382px;--footer-made-left:760px;--footer-download-left:1092px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:#000;font-family:'Tilda Sans',Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{display:block}
.site{position:relative;width:100%;min-height:100vh;overflow-x:hidden;background:var(--paper)}
.desktop-shell{position:relative;width:100%;height:var(--desktop-shell-height);overflow:hidden}
.desktop-canvas{position:absolute;top:0;left:50%;width:1440px;height:8348px;margin-left:-720px;transform:scale(var(--desktop-scale));transform-origin:top center;background:var(--paper);overflow:hidden}
.mobile-shell{display:none}
.d-section{position:absolute;left:0;width:1440px;overflow:hidden}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-transform:uppercase;font-family:'Myriad Pro',Arial,sans-serif;font-size:16px;font-weight:400;line-height:1;padding:16px 60px;min-height:53px;background:transparent;border:1px solid transparent}
.button--light-outline{border-color:#f2f2f2;color:#fff}
.button--light-solid{background:#f2f2f2;color:#000;padding-left:30px;padding-right:30px}
.button--dark-outline{border-color:#000;color:#000;padding-left:60px;padding-right:60px}
.button--black{background:#000;color:#fff;border-color:#000}

/* HERO 0..720 */
.hero{top:0;height:720px;background:#111}
.hero-slides,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;pointer-events:none;transition:opacity .35s ease}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-image{position:absolute;left:0;top:-41px;width:1440px;height:804px;object-fit:cover}
.hero-dim{position:absolute;inset:0;background:rgba(30,30,30,.2)}
.hero-bottom-gradient{position:absolute;left:0;bottom:0;width:1440px;height:170px;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.6) 75%,#000 100%);pointer-events:none}
.hero-content{position:absolute;color:#f2f2f2;z-index:3;height:240px}
.hero-content .eyebrow{position:absolute;left:0;top:0;font-family:'Comfortaa',sans-serif;font-size:12px;text-transform:uppercase;line-height:17px;letter-spacing:0}
.hero-content .eyebrow strong{font-size:15px;font-weight:700}
.hero-content h1{position:absolute;left:0;top:37px;font-size:40px;line-height:55px;font-weight:600;text-transform:uppercase;margin:0;letter-spacing:0}
.hero-content--1{left:60px;top:245px;width:427px}.hero-content--1 h1{width:409px}.hero-content--1 .button{position:absolute;left:0;top:177px}
.hero-content--2{left:858px;top:246px;width:517px}.hero-content--2 h1{width:517px}.hero-content--2 .button{position:absolute;left:0;top:177px}
.hero-content--3{left:130px;top:153px;width:632px}.hero-content--3 .button{position:absolute;left:0;top:122px}
.hero-content--4{left:367px;top:139px;width:427px}.hero-content--4 h1{width:379px}.hero-content--4 .button{position:absolute;left:0;top:177px}
.desktop-header{position:absolute;z-index:10;left:0;top:0;width:1440px;height:73px;background:rgba(0,0,0,.5);backdrop-filter:blur(1px)}
.desktop-logo{position:absolute;left:60px;top:12px;width:166px;height:49px}
.desktop-logo .logo-main{position:absolute;left:0;top:0;width:166px;height:31px}.desktop-logo .logo-tagline{position:absolute;left:12px;top:37.627px;width:142.521px;height:11.362px}
.desktop-nav{position:absolute;left:367px;top:0;height:73px;display:flex;align-items:flex-start;gap:29px;font-family:'Myriad Pro',Arial,sans-serif;font-size:16px;color:#f2f2f2;white-space:nowrap}
.desktop-nav a{position:relative;padding-top:27px;height:73px}
.desktop-nav a.is-active::after,.desktop-nav a:hover::after{content:"";position:absolute;left:0;bottom:21px;width:calc(100% - 2px);height:1px;background:var(--accent)}
.phone-desktop{position:absolute;left:1222px;top:0;width:158px;height:73px;font-family:'Myriad Pro',Arial,sans-serif;color:#f2f2f2}
.phone-trigger{position:absolute;left:0;top:0;width:158px;height:73px;border:0;background:transparent;color:#f2f2f2;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:0;font-size:16px;white-space:nowrap}
.phone-trigger img{width:24px;height:24px;transform:rotate(-90deg);margin-left:auto}
.contact-popover{position:absolute;left:auto;right:0;top:73px;width:250px;min-height:210px;padding:20px;background:rgba(0,0,0,.78);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:flex-start;gap:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease;z-index:20;font-family:'Myriad Pro',Arial,sans-serif;font-size:16px;line-height:22px;font-weight:400;font-style:normal;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.phone-desktop:hover .contact-popover,.phone-desktop:focus-within .contact-popover{opacity:1;visibility:visible;pointer-events:auto}
.contact-popover a{display:flex;align-items:center;width:100%;height:34px;line-height:22px;white-space:nowrap;font-family:'Myriad Pro',Arial,sans-serif;font-size:16px;font-weight:400;font-style:normal;font-synthesis:none}
.popover-callback{margin-top:6px;width:210px;height:46px;border:1px solid #f2f2f2;background:transparent;color:#f2f2f2;font-family:'Myriad Pro',Arial,sans-serif;font-size:16px;font-weight:400;font-style:normal;line-height:1;padding:0;font-synthesis:none;transition:background-color .28s ease,color .28s ease}.popover-callback:hover{background:#f2f2f2;color:#000}
.hero-progress-line{position:absolute;z-index:9;left:0;top:73px;height:3px;background:#f2f2f2;width:76px;transition:width .3s ease}
.hero-pagers{position:absolute;z-index:7;left:60px;top:674px;display:flex;gap:8px}
.hero-pagers button{position:relative;width:50px;height:5px;border:0;padding:0;background:#fff}
.hero-pagers button::after{content:"";position:absolute;left:0;top:0;width:0;height:5px;background:var(--accent);transition:width .2s}
.hero-pagers button.is-active::after{width:16px}
.hero-arrow{position:absolute;z-index:8;top:652px;width:48px;height:48px;border:1px solid #f2f2f2;color:white;background:transparent;font-family:Arial,sans-serif;font-size:30px;line-height:44px;padding:0;text-align:center}
.hero-arrow--prev{left:1268px}.hero-arrow--next{left:1332px;background:var(--accent);border-color:var(--accent);color:#000}
.hero-arrow span{display:block;transform:translateY(-1px)}

/* ABOUT */
.about{top:720px;height:804px;color:white}
.about-bg{object-fit:cover}.about::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);pointer-events:none}
.about-overlay-top{position:absolute;z-index:1;left:0;top:0;width:1440px;height:571px;background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.8) 25%,rgba(0,0,0,0) 100%)}
.about-overlay-bottom{position:absolute;z-index:1;left:0;bottom:0;width:1440px;height:69px;background:linear-gradient(to top,var(--paper) 0%,var(--paper) 27%,rgba(242,242,242,0) 100%)}
.about h2{position:absolute;z-index:2;left:284px;top:100px;width:873px;margin:0;font-size:32px;font-weight:600;line-height:38px;text-transform:uppercase}
.about-features{position:absolute;z-index:2;left:435px;top:204px;width:570px;display:flex;flex-direction:column;gap:44px}
.about-feature{display:flex;align-items:center;min-height:62px}.about-feature img{width:45px;height:45px;object-fit:cover;flex:none;margin-right:20px}.about-feature:first-child img{width:44px;height:44px}
.about-feature p{margin:0;font-family:'Tilda Sans',Arial,sans-serif;font-size:22px;font-weight:300;line-height:1.25;color:#fff}

/* INTERIORS 1524..2330 */
.interiors{top:1524px;height:820px;background:var(--paper)}
.section-kicker{position:absolute;left:60px;top:64px;width:1320px;text-align:center;font-family:'Comfortaa';font-size:14px;text-transform:uppercase}
.interiors h2{position:absolute;left:60px;top:100px;width:1320px;margin:0;text-align:center;font-size:32px;line-height:38px;font-weight:500}
.interiors-viewport{position:absolute;left:0;top:200px;width:1440px;height:570px;overflow:hidden}
.interiors-track{position:absolute;left:60px;top:0;height:515px;display:flex;gap:20px;transition:transform .35s ease}
.interior-card{width:427px;flex:none;text-align:center}.interior-card button{position:relative;width:427px;height:427px;border:0;padding:0;background:none;overflow:hidden}.interior-card button>img:first-child{width:100%;height:100%;object-fit:cover}.interior-card:nth-child(2){width:426px}.interior-card:nth-child(2) button{width:426px}.card-play{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);width:30px!important;height:30px!important;object-fit:contain!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 280ms ease,visibility 280ms ease,transform 280ms ease}.interior-card button{cursor:pointer}.interior-card button:hover .card-play,.interior-card button:focus-visible .card-play,.interior-card button:focus-within .card-play{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.card-sub{margin-top:17px;font-family:'Comfortaa';font-size:12px;text-transform:uppercase}.card-title{margin-top:18px;font-size:20px;font-weight:500;text-transform:uppercase}
.gallery-arrow{position:absolute;width:48px;height:48px;border:0;background:var(--accent);color:#000;font:30px/46px Arial;padding:0;text-align:center;z-index:4}.gallery-arrow--left{left:60px;top:392px}.gallery-arrow--right{left:1332px;top:392px}
.bar-dots{position:absolute;left:608px;top:766px;width:224px;height:5px;display:flex;gap:8px}.bar-dots button,.bar-dots span{position:relative;display:block;width:50px;height:5px;background:#fff;border:0;padding:0}.bar-dots .is-active::after,.bar-dots button.is-active::after{content:"";position:absolute;left:0;top:0;width:16px;height:5px;background:var(--accent)}

/* QUALITY */
.quality{top:2244px;height:1248px;background:var(--paper)}
.quality h2{position:absolute;z-index:3;left:60px;top:141px;width:1320px;text-align:center;margin:0;font-size:32px;font-weight:500;line-height:38px}
.quality-gradient{position:absolute;z-index:2;left:0;width:1440px;height:233px;pointer-events:none}.quality-gradient--top{top:0;background:linear-gradient(to bottom,rgba(233,222,220,0) 0%,#e8dedc 53%,#e9dedc 100%)}.quality-gradient--bottom{top:1015px;background:linear-gradient(to bottom,#e9dedc 0%,#e8dedc 47%,rgba(233,222,220,0) 100%)}
.quality-image{position:absolute;left:0;top:214px;width:1440px;height:801px;object-fit:cover}

/* MODELS */
.models{top:3259px;height:700px;background:transparent;z-index:5}
.models-kicker{position:absolute;left:60px;top:90px;width:1320px;text-align:center;font-family:'Myriad Pro';font-size:20px;text-transform:uppercase}
.models h2{position:absolute;left:60px;top:130px;width:1320px;margin:0;text-align:center;font-size:32px;font-weight:500;line-height:38px}
.model-grid{position:absolute;left:60px;top:230px;width:1320px;display:grid;grid-template-columns:315px 315px 315px 315px;gap:20px}
.model-card{text-align:center;overflow:visible}.model-card>img,.model-image-wrap{width:315px;height:315px;object-fit:cover}.model-image-wrap{position:relative;overflow:hidden}.model-image-wrap>img{width:100%;height:100%;object-fit:cover}.model-card h3{margin:17px 0 25px;font-size:20px;line-height:24px;font-weight:500;text-transform:uppercase}.model-card .button{width:315px;min-width:315px;max-width:315px;justify-content:center}.model-card:nth-child(2) .button{width:315px;min-width:315px;max-width:315px}.model-card:nth-child(4) .button{width:315px;min-width:315px;max-width:315px}.model-card .button--narrow{padding-left:50px;padding-right:50px;width:315px;min-width:315px;max-width:315px}
.mini-video-button{position:absolute;left:50%;transform:translateX(-50%);bottom:35px;background:var(--accent);color:#000;border:0;padding:12px 24px;font-family:'Myriad Pro';font-size:12px;text-transform:uppercase;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 280ms ease,visibility 280ms ease,transform 280ms ease}.model-image-wrap,.m-model-img{cursor:pointer}.model-image-wrap .mini-video-button,.m-model-img .mini-video-button{transform:translateX(-50%) translateY(8px)}@media (hover:hover) and (pointer:fine){.model-image-wrap:hover .mini-video-button,.model-image-wrap:focus-within .mini-video-button,.m-model-img:hover .mini-video-button,.m-model-img:focus-within .mini-video-button{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}}

/* BUYERS / BENEFITS */
.buyers{top:3868px;height:674px;background:var(--warm);z-index:2}.buyers-gradient{position:absolute;left:0;top:0;width:1440px;height:136px;background:linear-gradient(to bottom,var(--paper) 0%,var(--warm) 59%,var(--warm) 100%)}
.buyers-logo{position:absolute;left:60px;top:176px;width:203px;height:37.91px}.buyers-logo img{width:100%;height:100%;object-fit:contain}
.buyers h2{position:absolute;left:507px;top:171px;width:446px;margin:0;color:#322d29;font-size:20px;line-height:24px;font-weight:600;text-transform:uppercase}
.benefits-track{position:absolute;left:60px;top:275px;width:1320px;display:grid;grid-template-columns:repeat(5,253px);gap:14px}.benefit{width:253px}.benefit img{width:253px;height:209px;object-fit:cover}.benefit p{height:70px;margin:0;background:var(--warm2);padding:16px;font-size:16px;font-weight:500;line-height:19px;text-align:center;color:#090909}

/* VIDEO BAND */
.video-band{top:4482px;height:865px;background:#ddd}.video-poster{left:0;top:61px;width:1440px;height:804px}.video-grad{position:absolute;left:0;width:1440px;pointer-events:none}.video-grad--top{top:0;height:147px;background:linear-gradient(to bottom,var(--warm) 0%,var(--warm) 41%,rgba(242,242,242,0) 100%)}.video-grad--bottom{bottom:0;height:112px;background:linear-gradient(to top,var(--paper) 0%,var(--warm) 59%,rgba(242,242,242,0) 100%)}
.video-play{position:absolute;left:682px;top:425px;width:76px;height:76px;padding:0;border:0;background:transparent}.video-play img{width:100%;height:100%}

/* FAQ */
.faq{top:5347px;height:1017px;background:var(--paper);padding-top:100px}.faq h2{position:absolute;left:60px;top:100px;width:343px;margin:0;font-size:32px;line-height:38px;font-weight:500}.faq-list{position:absolute;left:60px;top:205px;width:1320px;display:flex;flex-direction:column;gap:24px}
.faq-item{background:#fff;min-height:90px;padding:0 30px}.faq-item[open]{min-height:128px}.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:90px;font-size:24px;font-weight:500}.faq-item summary::-webkit-details-marker{display:none}.faq-item p{margin:-9px 0 24px;font-size:16px;color:#2e2e2d}
/* Exact FAQ control from Figma nodes 54:257 / 54:289. */
.faq-toggle{width:45px;height:45px;background:#000;display:flex;align-items:center;justify-content:center;flex:0 0 45px;margin-left:24px}
.faq-toggle::before{content:"";display:block;width:20.455px;height:20.455px;background:url('https://www.figma.com/api/mcp/asset/24c96513-984c-4efc-a05b-3a4a31e716c1/d9100.svg') center/100% 100% no-repeat;transform:rotate(90deg);transform-origin:center;transition:transform 360ms var(--motion-ease)}
.faq-item[open] .faq-toggle::before,.m-faq details[open] .faq-toggle::before{transform:rotate(-90deg)}


/* LEAD */
.lead{top:6364px;height:630px;background:var(--paper)}.lead-copy{position:absolute;left:60px;top:101px;width:732px}.lead-copy h2{width:478px;margin:0;font-size:32px;line-height:38px;font-weight:500}.lead-copy h2 span{color:var(--accent);font-weight:600}.lead-copy>p{width:710px;margin:24px 0 24px;font-size:24px;line-height:29px;color:#2e2e2d}.lead-copy>p strong{font-weight:500}.lead-form{position:relative;width:732px;height:260px}.lead-form>input{position:absolute;top:0;width:356px;height:76px;border:1px solid #000;background:#f9f9f9;padding:0 29px;font-size:16px;color:#2e2e2d}.lead-form>input:first-child{left:0}.lead-form>input:nth-child(2){left:376px}.privacy-check{position:absolute;left:0;top:104px;width:640px;display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:19px;color:#2e2e2d}.privacy-check input{appearance:none;width:17px;height:17px;border:1px solid #a4a4a4;border-radius:5px;flex:none;margin:2px 0 0}.privacy-check input:checked{background:#000;box-shadow:inset 0 0 0 4px #fff}.lead-form .button{position:absolute;left:0;top:172px}.lead-visual{position:absolute;left:812px;top:50px;width:568px;height:544px;overflow:visible}
.lead-visual-spin{position:absolute;inset:0;border-radius:300px;overflow:hidden;animation:eoniksSketchSpin 36s linear infinite;transform-origin:50% 50%;will-change:transform}
.lead-visual-spin img{position:absolute;left:-39.56%;top:-.04%;width:182.41%;height:106.26%;max-width:none;object-fit:cover;pointer-events:none}

/* REVIEWS */
.reviews{top:6994px;height:851px;background:var(--paper)}.reviews h2{position:absolute;left:60px;top:37px;width:343px;margin:0;font-size:32px;font-weight:500}.reviews-viewport{position:absolute;left:0;top:137px;width:1440px;height:567px;overflow:hidden}.reviews-track{position:absolute;left:60px;top:0;display:flex;gap:20px;transition:transform .35s ease}.review-card{width:427px;height:567px;flex:none;background:#fff;padding:30px;position:relative}.review-head{display:flex;align-items:center;height:53px}.review-avatar{width:53px;height:53px;border-radius:50%;background:#eee;position:relative;display:flex;align-items:center;justify-content:center;color:#959595;font-size:20px;font-weight:600}.review-name{margin-left:16px;font-size:20px;font-weight:600}.review-text{position:absolute;left:30px;top:103px;margin:0;width:367px;height:190px;overflow:hidden;font-size:16px;line-height:normal;color:#2e2e2d}.review-more{border:0;background:none;color:#c7c7c7;font-weight:500;padding:0;font-size:16px;line-height:inherit;vertical-align:baseline}.review-images{position:absolute;left:30px;top:313px;bottom:auto;width:367px;display:grid;grid-template-columns:117px 117px 117px;grid-auto-rows:107px;gap:10px 8px}.review-images button{border:0;padding:0;background:none;overflow:hidden}.review-images button:nth-child(4){grid-column:1}.review-images img{width:100%;height:100%;object-fit:cover}.review-arrow{top:445px}.review-arrow--left{left:60px}.review-arrow--right{left:1332px}.review-dots{top:766px}

/* CONTACTS + FOOTER */
.contacts{top:7845px;height:503px;background:var(--paper);text-align:center}.contacts-logo{position:absolute;left:610px;top:40px;width:220px;height:41px;object-fit:contain}.contacts h2{position:absolute;left:558px;top:118px;width:323px;margin:0;font-size:24px;font-weight:500}.contact-line{position:relative;display:block;width:323px;left:558px;top:166px;margin-top:12px;font-size:16px;font-weight:500;color:#3b0908}.contact-line span{color:#000}.shops{position:absolute;top:268px;left:440px;width:560px;font-size:16px;font-weight:500;color:#3b0908}.shops a{text-decoration:underline}.contacts h3{position:absolute;left:558px;top:317px;width:323px;margin:0;font-size:24px;font-weight:500}.socials{position:absolute;left:609px;top:372px;width:221px;height:30px;display:flex;align-items:center;justify-content:space-between}.socials img{width:24px;height:24px;object-fit:contain}.socials a:nth-child(1) img{width:24px}.socials a:nth-child(2) img{width:20px;height:20px}.socials a:nth-child(3) img{width:28px;height:28px}.socials a:nth-child(6) img{width:21px;height:21px}
.desktop-footer{position:relative;left:0;top:auto;width:100%;height:73px;background:#000;color:#f2f2f2;backdrop-filter:blur(2px)}.footer-logo{position:absolute;left:60px;top:13px;width:166px;height:49px}.footer-logo .logo-main{width:166px;height:31px}.footer-logo .logo-tagline{position:absolute;left:12px;top:37.627px;width:142.521px;height:11.362px}.footer-policy{position:absolute;left:382px;top:28px;width:222px;text-decoration:underline;font-size:16px;font-weight:500}.made-by{position:absolute;left:760px;top:31px;width:177px;height:12.326px}.footer-download{position:absolute;left:1092px;top:11px;width:288px;border-color:#f2f2f2;color:#f2f2f2;padding-left:60px;padding-right:60px}

/* MODALS */
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center}.modal.is-open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8)}.image-modal-frame{position:relative;width:min(78.4vw,1129px);height:min(85.4vh,843px);z-index:2}.image-modal-frame>img#modalImage{width:100%;height:100%;object-fit:contain;background:#111}.video-modal-frame{position:relative;width:min(84.8vw,1221px);aspect-ratio:1221/687;z-index:2;background:#000}.video-placeholder{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;color:#333;font-size:24px}.modal-close{position:absolute;right:-48px;top:0;width:48px;height:48px;border:1px solid #f2f2f2;background:transparent;z-index:3;padding:10.5px}.modal-close img{width:100%;height:100%;object-fit:contain}.review-modal-frame{position:relative;z-index:2;width:427px;max-height:90vh;background:#fff;padding:30px;overflow:auto}.review-modal-close{right:-48px;color:#fff;font-size:28px}.review-modal-frame .review-images{position:static;margin-top:20px;width:367px}.review-modal-frame .review-text{position:static;width:367px;height:auto;overflow:visible;margin-top:20px}

/* MOBILE exact 320 */
/* Fullscreen header correction: keep the desktop header at the exact 73px Figma height
   even when the 1440px canvas is enlarged to fill a wider browser. */
@media (min-width:768px){
  .desktop-header{
    width:calc(1440px * var(--desktop-scale));
    height:73px;
    transform:scale(var(--desktop-header-inverse));
    transform-origin:top left;
  }
  .desktop-logo{left:calc(60px * var(--desktop-scale));top:12px;width:166px;height:49px}
  .desktop-nav{left:50%;top:0;transform:translateX(-50%);height:73px;font-size:16px;gap:29px}
  .desktop-nav a{height:73px;padding-top:27px}
  .phone-desktop{left:auto;right:calc(60px * var(--desktop-scale));top:0;width:158px;height:73px}
  .phone-trigger{width:158px;height:73px;font-size:16px}
  .hero-progress-line{top:var(--desktop-header-pretop);transform:scaleY(var(--desktop-header-inverse));transform-origin:top left}
}

/* Footer follows the scaled page content in normal document flow.
   Figma desktop: content ends at y=8348, footer is y=8348..8421 (73px). */
@media (min-width:768px){
  .desktop-footer{
    display:block;
    position:relative;
    top:auto;
    left:0;
    width:100%;
    height:73px;
    min-height:73px;
    transform:none;
    z-index:20;
    overflow:hidden;
    isolation:isolate;
    flex:none;
  }
  .footer-logo{left:var(--footer-logo-left);top:13px;width:166px;height:49px}
  .footer-logo .logo-main{width:166px;height:31px}
  .footer-logo .logo-tagline{left:12px;top:37.627px;width:142.521px;height:11.362px}
  .footer-policy{left:var(--footer-policy-left);top:28px;width:222px;font-size:16px}
  .made-by{left:var(--footer-made-left);top:31px;width:177px;height:12.326px}
  .footer-download{left:var(--footer-download-left);top:11px;width:288px;height:53px;min-height:53px;padding:16px 60px;font-size:16px}
}

@media (max-width:767px){
  .desktop-footer{display:none}
  .desktop-shell{display:none}.mobile-shell{display:block;position:relative;width:100%;height:calc(6558px * var(--mobile-scale));overflow:hidden}.mobile-canvas{position:absolute;left:50%;top:0;width:320px;height:6558px;margin-left:-160px;transform:scale(var(--mobile-scale));transform-origin:top center;background:var(--paper);overflow:hidden}.m-section{position:absolute;left:0;width:320px;overflow:hidden}.mobile-shell{}
  .m-hero{top:0;height:439px;background:#111}.m-hero-slide{position:absolute;inset:0;overflow:hidden}.m-hero-bg{position:absolute;left:-556px;top:0;width:1533px;height:439px;object-fit:cover;object-position:center}.m-left-grad{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 21%,rgba(0,0,0,0) 100%)}.m-bottom-grad{position:absolute;left:0;bottom:-2px;width:320px;height:151px;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 75%,#000 100%)}
  .mobile-header{position:absolute;z-index:20;left:0;top:0;width:320px;height:32px;background:rgba(0,0,0,.5);backdrop-filter:blur(1px)}.m-logo{position:absolute;left:10px;top:6px;width:68px;height:20px}.m-logo-main{position:absolute;left:0;top:0;width:68px;height:12.699px}.m-logo-tagline{position:absolute;left:4.916px;top:15.413px;width:58.382px;height:4.654px}.m-phone{position:absolute;left:127px;top:0;width:110px;height:32px;border:0;background:transparent;color:#f2f2f2;font-family:'Myriad Pro';font-size:12px;padding:0;white-space:nowrap;text-align:left}.m-phone img{position:absolute;right:0;top:9px;width:11px;height:11px;transform:rotate(-90deg)}.m-burger{position:absolute;left:288px;top:8px;width:22px;height:16px;border:0;background:none;padding:0}.m-burger span{position:absolute;left:0;width:22px;height:2px;background:#f2f2f2}.m-burger span:first-child{top:4px}.m-burger span:last-child{top:11px}.m-menu{position:absolute;left:0;top:33px;width:320px;height:198px;background:#000;padding:14px 10px;display:none;flex-direction:column;gap:0}.m-menu.is-open{display:flex}.m-menu a{font-family:'Myriad Pro';font-size:12px;color:#f2f2f2;height:24px;line-height:14px;padding-top:6px}.m-contact-popover{position:absolute;left:104px;top:33px;width:158px;height:144px;background:#000;padding:12px;display:none;flex-direction:column;z-index:4}.m-contact-popover.is-open{display:flex}.m-contact-popover a{font-family:'Myriad Pro';font-size:12px;color:#f2f2f2;height:22px}.m-contact-popover button{width:129px;height:32px;border:1px solid #f2f2f2;background:transparent;color:#f2f2f2;font-family:'Myriad Pro';font-size:12px}
  .m-top-progress{position:absolute;left:0;top:32px;width:76px;height:1px;background:#f2f2f2}.m-hero-copy{position:absolute;left:10px;top:72px;width:300px;color:#f2f2f2}.m-eyebrow{font-family:'Comfortaa';font-size:10px;text-transform:uppercase}.m-eyebrow strong{font-size:12px}.m-hero-copy h1{margin:15px 0 14px;font-size:24px;line-height:30px;text-transform:uppercase;font-weight:600;width:255px}.m-button-outline{height:43px;min-height:43px;padding:12px 24px;font-size:14px;border-color:#f2f2f2;color:#fff}.m-hero-arrow{position:absolute;top:341px;width:40px;height:40px;border:1px solid #f2f2f2;background:transparent;color:#fff;font:28px/38px Arial;padding:0}.m-hero-prev{left:10px}.m-hero-next{left:60px}.m-pagers{position:absolute;left:10px;top:397px;display:flex;gap:8px}.m-pagers span{position:relative;width:50px;height:2px;background:#fff}.m-pagers .is-active::after{content:"";position:absolute;left:0;top:0;width:16px;height:2px;background:var(--accent)}
  .m-about{top:439px;height:179px;color:#fff}.m-about-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.m-about::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2)}.m-about-topgrad{position:absolute;z-index:1;left:0;top:-2px;width:320px;height:82px;background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.8) 25%,transparent 100%)}.m-about h2{position:absolute;z-index:2;left:10px;top:0;width:221px;margin:0;font-size:16px;line-height:19px;font-weight:600;text-transform:uppercase}.m-about-fade{position:absolute;z-index:2;left:0;bottom:-2px;width:320px;height:22px;background:linear-gradient(to top,var(--paper) 0%,var(--paper) 27%,transparent 100%)}.m-about-features{position:absolute;left:0;top:618px;width:320px;height:218px;background:var(--paper);padding:0 10px}.m-about-feature{display:flex;align-items:center;height:66px}.m-about-feature img{width:32px;height:32px;object-fit:cover;margin-right:10px;flex:none}.m-about-feature p{margin:0;font-size:14px;line-height:18px;font-weight:300;color:#2e2e2d}.m-about-feature:nth-child(3){height:84px;align-items:flex-start;padding-top:5px}
  .m-interiors{top:854px;height:369px;background:var(--paper);z-index:2}.m-kicker{font-family:'Comfortaa';font-size:12px;text-transform:uppercase;text-align:center}.m-interiors>.m-kicker{position:absolute;left:10px;top:20px;width:300px}.m-interiors h2{position:absolute;left:0;top:49px;width:320px;margin:0;text-align:center;font-size:20px;line-height:24px;font-weight:500}.m-interior-row{position:absolute;left:10px;top:129px;width:max-content;display:flex;gap:14px;transition:transform 820ms var(--motion-ease)}.m-interior-row article{width:143px;text-align:center;flex:none}.m-interior-row button{position:relative;border:0;padding:0;width:143px;height:143px;background:none;overflow:hidden}.m-interior-row button>img:first-child{width:100%;height:100%;object-fit:cover}.m-interior-row article>div{margin-top:12px;font-family:'Myriad Pro';font-size:12px;text-transform:uppercase}.m-interior-row article>strong{display:block;margin-top:7px;font-size:12px;font-weight:500;text-transform:uppercase}.m-card-play{position:absolute!important;left:50%;top:50%;width:18px!important;height:18px!important;transform:translate(-50%,-50%) scale(.92);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 280ms ease,visibility 280ms ease,transform 280ms ease}.m-interior-row button:hover .m-card-play,.m-interior-row button:focus-visible .m-card-play,.m-interior-row button:focus-within .m-card-play{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.m-gallery-arrow{position:absolute;width:30px;height:30px;border:0;background:var(--accent);font:22px/29px Arial;padding:0}.m-gallery-left{left:10px;top:191px}.m-gallery-right{right:10px;top:191px}.m-bar-dots{position:absolute;left:48px;bottom:14px;display:flex;gap:8px}.m-bar-dots span{position:relative;width:50px;height:3px;background:#fff}.m-bar-dots span.is-active::after{content:"";position:absolute;left:0;top:0;width:16px;height:3px;background:var(--accent)}
  .m-quality{top:1194px;height:403px;background:var(--paper);z-index:1}.m-quality-top{position:absolute;left:0;top:0;width:320px;height:153px;background:linear-gradient(to bottom,rgba(233,222,220,0) 0%,#e8dedc 47%,#e9dedc 100%)}.m-quality h2{position:absolute;left:10px;top:77px;width:300px;margin:0;text-align:center;font-size:20px;line-height:24px;font-weight:500}.m-quality>img{position:absolute;left:-.5px;top:151px;width:321px;height:178px;object-fit:cover}.m-quality-bottom{position:absolute;left:0;top:328px;width:320px;height:75px;background:linear-gradient(to bottom,#e9dedc 0%,#e8dedc 47%,rgba(233,222,220,0) 100%)}
  .m-models{top:1577px;height:1776px;background:var(--paper);z-index:3}.m-models>.m-kicker{position:absolute;left:10px;top:7px;width:300px}.m-models h2{position:absolute;left:10px;top:36px;width:300px;margin:0;text-align:center;font-size:20px;line-height:24px;font-weight:500}.m-model-list{position:absolute;left:10px;top:126px;width:300px;display:flex;flex-direction:column;gap:14px}.m-model-list article{height:402px;text-align:center}.m-model-list article>img,.m-model-img{width:300px;height:300px;object-fit:cover}.m-model-img{position:relative}.m-model-img>img{width:100%;height:100%;object-fit:cover}.m-model-list h3{margin:14px 0 12px;font-size:16px;font-weight:500;line-height:19px}.m-model-btn{width:300px;height:51px;min-height:51px;padding:16px 30px;border-color:#000;color:#000;font-size:14px}.m-model-img .mini-video-button{bottom:22px}
  .m-buyers{top:3251px;height:523px;background:var(--warm);z-index:1}.m-buyers-bg{position:absolute;left:0;top:0;width:320px;height:106px;background:linear-gradient(to bottom,var(--paper) 0%,var(--warm) 59%,var(--warm) 100%)}.m-buyers-logo{position:absolute;left:10px;top:162px;width:79px;height:14.75px}.m-buyers h2{position:absolute;left:10px;top:193px;width:236px;margin:0;color:#322d29;font-size:12px;line-height:16px;font-weight:600;text-transform:uppercase}.m-benefit-scroll{position:absolute;left:10px;top:245px;width:300px;height:235px;display:flex;gap:15px;overflow:hidden}.m-benefit-scroll article{width:221px;flex:none}.m-benefit-scroll img{width:221px;height:183px;object-fit:cover}.m-benefit-scroll p{margin:0;height:52px;background:var(--warm2);padding:10px;font-size:12px;line-height:14px;font-weight:500}
  .m-video{top:3773px;height:193px}.m-video>img{top:14px;height:179px}.m-video-top{position:absolute;left:0;top:0;width:320px;height:33px;background:linear-gradient(to bottom,var(--warm),transparent)}.m-video-bottom{position:absolute;left:0;bottom:0;width:320px;height:25px;background:linear-gradient(to top,var(--paper),transparent)}.m-video-play{position:absolute;left:146px;top:89px;width:28px;height:28px;border:0;padding:0;background:transparent}.m-video-play img{width:100%;height:100%}
  .m-faq{top:3966px;height:720px;background:var(--paper);padding:0 10px}.m-faq h2{margin:39px 0 32px;font-size:20px;font-weight:500}.m-faq details{background:#fff;margin-bottom:16px;padding:0 10px}.m-faq details[open]{height:92px}.m-faq details:not([open]){height:54px}.m-faq summary{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;padding-top:10px;font-size:14px;line-height:17px;font-weight:500}.m-faq summary::-webkit-details-marker{display:none}
.m-faq summary .faq-toggle{width:25px;height:25px;flex:0 0 25px;margin-left:10px}
.m-faq summary .faq-toggle::before{width:11.364px;height:11.364px}
.m-faq p{margin:7px 0 0;width:211px;font-size:12px;line-height:14px;color:#2e2e2d}
  .m-lead{top:4686px;height:676px;background:var(--paper);padding:0 10px}.m-lead h2{margin:0;width:300px;font-size:20px;line-height:24px;font-weight:500}.m-lead h2 span{color:var(--accent);font-weight:600}.m-lead>p{margin:16px 0 16px;width:300px;font-size:14px;line-height:17px;color:#2e2e2d}.m-lead>input{display:block;width:300px;height:57px;border:1px solid #000;background:#f9f9f9;margin-bottom:10px;padding:0 19px;font-size:14px}.m-lead>label{display:flex;width:300px;font-size:12px;line-height:14px;color:#2e2e2d;margin-top:8px}.m-lead>label input{appearance:none;width:17px;height:17px;border:1px solid #a4a4a4;border-radius:5px;flex:none;margin:2px 12px 0 0}.m-lead-btn{width:300px;height:49px;min-height:49px;background:#000;color:#fff;font-size:14px;margin-top:18px}.m-lead h2,.m-lead>p,.m-lead>input,.m-lead>label,.m-lead-btn{position:relative;z-index:2}.m-lead-image{position:absolute;left:4px;top:356px;width:311px;height:298px;overflow:visible;z-index:1}
.m-lead-image-spin{position:absolute;inset:0;border-radius:300px;overflow:hidden;animation:eoniksSketchSpin 36s linear infinite;transform-origin:50% 50%;will-change:transform}
.m-lead-image-spin img{position:absolute;left:-39.56%;top:-.04%;width:182.41%;height:106.26%;max-width:none;object-fit:cover;pointer-events:none}
  .m-reviews{top:5362px;height:616px;background:var(--paper);padding:0 10px}.m-reviews h2{margin:0;padding-top:0;font-size:20px;font-weight:500}.m-review-card{position:absolute;left:10px;top:66px;width:300px;height:515px;background:#fff;padding:20px}.m-review-card .review-head{height:40px}.m-review-card .review-avatar{width:40px;height:40px;font-size:14px}.m-review-card .review-name{font-size:12px;margin-left:10px}.m-review-card .review-text{position:absolute;left:20px;top:80px;width:260px;height:154px;overflow:hidden;font-size:12px;line-height:normal;margin:0}.m-review-card .review-more{font-size:12px;line-height:inherit}.m-review-card .review-images{left:20px;top:254px;bottom:auto;width:260px;grid-template-columns:126px 126px;grid-auto-rows:115px;gap:11px 8px}.m-review-card .review-images button:nth-child(4){grid-column:2}.m-review-left{left:10px;top:329px}.m-review-right{right:10px;top:329px}.m-review-dots{bottom:0;top:auto}
  .m-contacts{top:5978px;height:360px;background:var(--paper);text-align:center}.m-contacts-logo{position:absolute;left:97px;top:72px;width:125px;height:23.34px}.m-contacts h2{position:absolute;left:10px;top:116px;width:300px;margin:0;font-size:20px;font-weight:500}.m-contacts>a,.m-contacts>div:not(.m-socials){position:relative;display:block;left:10px;top:157px;width:300px;margin-bottom:10px;font-size:14px;font-weight:500;color:#3b0908}.m-contacts>div span{color:#000}.m-contacts h3{position:absolute;left:10px;top:251px;width:300px;margin:0;font-size:20px;font-weight:500}.m-socials{position:absolute;left:68px;top:295px;width:184px;height:23px;display:flex;align-items:center;justify-content:space-between}.m-socials img{width:20px;height:20px;object-fit:contain}.m-socials img:nth-child(3){width:24px;height:23px}.m-socials img:nth-child(6){width:17px;height:18px}
  .m-footer{position:absolute;left:0;top:6338px;width:320px;height:220px;background:#000;color:#f2f2f2}.m-footer-logo{position:absolute;left:111px;top:20px;width:97px;height:29px}.m-footer-logo img:first-child{width:97px;height:18.114px}.m-footer-logo img:last-child{position:absolute;left:7px;top:21.987px;width:83.28px;height:6.639px}.m-policy{position:absolute;left:76px;top:79px;color:var(--accent);font-family:'Myriad Pro';font-size:12px;text-decoration:underline}.m-footer-download{position:absolute;left:10px;top:115px;width:300px;height:43px;min-height:43px;border-color:#f2f2f2;color:#f2f2f2;padding:12px 60px;font-size:14px}.m-made-by{position:absolute;left:72px;top:188px;width:177px;height:12.326px}
  .modal-close{right:0;top:-48px}.image-modal-frame{width:calc(100vw - 20px);height:calc(100vh - 100px)}.video-modal-frame{width:calc(100vw - 20px)}.review-modal-frame{width:300px;padding:20px}.review-modal-frame .review-text,.review-modal-frame .review-images{width:260px}.review-modal-close{right:0;top:-48px}
}

@media (min-width:768px) and (max-width:1439px){.desktop-canvas{}}
@media (min-width:1440px){.desktop-shell{height:var(--desktop-shell-height)}.desktop-canvas{transform:scale(var(--desktop-scale))}}

/* Anti-seam fix for fullscreen scaling: cover sub-pixel gaps between absolute sections */
.desktop-canvas,.d-section{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.interiors::before,.quality::before,.faq::before,.lead::before,.reviews::before,.contacts::before{
  content:"";position:absolute;left:0;top:-2px;width:100%;height:4px;background:var(--paper);z-index:50;pointer-events:none
}
.buyers::before{content:"";position:absolute;left:0;top:-2px;width:100%;height:4px;background:var(--paper);z-index:0;pointer-events:none}
.video-band::before{content:"";position:absolute;left:0;top:-2px;width:100%;height:4px;background:var(--warm);z-index:0;pointer-events:none}
.m-interiors::before,.m-quality::before,.m-models::before,.m-faq::before,.m-lead::before,.m-reviews::before,.m-contacts::before{
  content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--paper);z-index:50;pointer-events:none
}




/* FINAL FOOTER FIX — verified against Figma node 54:408.
   The black footer background always spans the entire browser viewport.
   Its height remains exactly 73px. Desktop item positions preserve the
   1440px Figma proportions while adapting horizontally to fullscreen. */
@media (min-width:768px){
  html,body,#site,.site{
    width:100% !important;
    max-width:none !important;
  }
  .desktop-footer{
    display:block !important;
    position:relative !important;
    left:50% !important;
    right:auto !important;
    width:100vw !important;
    min-width:100vw !important;
    max-width:none !important;
    height:73px !important;
    min-height:73px !important;
    margin:0 0 0 -50vw !important;
    padding:0 !important;
    transform:none !important;
    background:#000 !important;
    color:#f2f2f2 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  /* Exact Figma x positions at 1440px, responsive in fullscreen. */
  .desktop-footer .footer-logo{
    left:4.1666666667vw !important; /* 60 / 1440 */
    top:13px !important;
    width:166px !important;
    height:49px !important;
  }
  .desktop-footer .footer-policy{
    left:26.5277777778vw !important; /* 382 / 1440 */
    top:28px !important;
    width:222px !important;
    font-size:16px !important;
  }
  .desktop-footer .made-by{
    left:52.7777777778vw !important; /* 760 / 1440 */
    top:31px !important;
    width:177px !important;
    height:12.326px !important;
  }
  .desktop-footer .footer-download{
    left:auto !important;
    right:4.1666666667vw !important; /* Figma right margin: 60px */
    top:11px !important;
    width:288px !important;
    height:53px !important;
    min-height:53px !important;
    padding:16px 60px !important;
    font-size:16px !important;
  }
}



/* ==========================================================================
   PREMIUM MOTION — LAYOUT-SAFE
   Motion never overwrites transforms used by the pixel-perfect layout.
   Structural blocks keep their exact Figma coordinates at every frame.
   ========================================================================== */
:root{
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --motion-ease-soft:cubic-bezier(.16,1,.3,1);
  --motion-fast:420ms;
  --motion-medium:720ms;
  --motion-slow:1050ms;
}

/* Progressive enhancement. Geometry is untouched: opacity/clip only. */
.motion-enabled .motion-reveal{
  opacity:0;
  clip-path:inset(0 0 10% 0);
  transition:
    opacity var(--motion-medium) var(--motion-ease),
    clip-path var(--motion-medium) var(--motion-ease),
    filter var(--motion-medium) var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
}
.motion-enabled .motion-reveal--left{clip-path:inset(0 9% 0 0)}
.motion-enabled .motion-reveal--right{clip-path:inset(0 0 0 9%)}
.motion-enabled .motion-reveal--soft{filter:blur(1.5px)}
.motion-enabled .motion-reveal.is-revealed{
  opacity:1;
  clip-path:inset(0 0 0 0);
  filter:none;
}

/* Footer is the terminal 73px bar and must be visible immediately.
   It is intentionally excluded from IntersectionObserver reveals because the
   observer uses a negative bottom rootMargin, which can leave a short terminal
   element below the reveal threshold at maximum scroll. */
.motion-enabled .desktop-footer .motion-reveal,
.motion-enabled .desktop-footer .footer-logo,
.motion-enabled .desktop-footer .footer-policy,
.motion-enabled .desktop-footer .made-by,
.motion-enabled .desktop-footer .footer-download{
  opacity:1!important;
  clip-path:none!important;
  filter:none!important;
}

/* Hero motion is confined to the already clipped hero image layer. */
.motion-enabled .hero-slide{transition:opacity 1000ms var(--motion-ease-soft)}
.motion-enabled .hero-slide .hero-image{
  transform:scale(1.035);
  transform-origin:center;
  transition:transform 1700ms var(--motion-ease-soft),filter 900ms var(--motion-ease-soft);
  filter:saturate(.96) contrast(1.01);
  will-change:transform;
}
.motion-enabled .hero-slide.is-active .hero-image{transform:scale(1.002);filter:none}
.motion-enabled .hero-slide .hero-content .eyebrow,
.motion-enabled .hero-slide .hero-content h1,
.motion-enabled .hero-slide .hero-content .button{
  opacity:0;
  filter:blur(2px);
  transition:opacity 760ms var(--motion-ease),filter 760ms var(--motion-ease);
}
.motion-enabled.motion-ready .hero-slide.is-active .hero-content .eyebrow,
.motion-enabled.motion-ready .hero-slide.is-active .hero-content h1,
.motion-enabled.motion-ready .hero-slide.is-active .hero-content .button{opacity:1;filter:none}
.motion-enabled.motion-ready .hero-slide.is-active .hero-content .eyebrow{transition-delay:120ms}
.motion-enabled.motion-ready .hero-slide.is-active .hero-content h1{transition-delay:220ms}
.motion-enabled.motion-ready .hero-slide.is-active .hero-content .button{transition-delay:350ms}

/* Header entrance — opacity only so the exact 73px geometry never moves. */
.motion-enabled .desktop-header .desktop-logo,
.motion-enabled .desktop-header .desktop-nav a,
.motion-enabled .desktop-header .phone-desktop,
.motion-enabled .mobile-header .m-logo,
.motion-enabled .mobile-header .m-phone,
.motion-enabled .mobile-header .m-burger{opacity:0;transition:opacity 650ms var(--motion-ease)}
.motion-enabled.motion-ready .desktop-header .desktop-logo,
.motion-enabled.motion-ready .desktop-header .desktop-nav a,
.motion-enabled.motion-ready .desktop-header .phone-desktop,
.motion-enabled.motion-ready .mobile-header .m-logo,
.motion-enabled.motion-ready .mobile-header .m-phone,
.motion-enabled.motion-ready .mobile-header .m-burger{opacity:1}
.motion-enabled.motion-ready .desktop-header .desktop-logo{transition-delay:60ms}
.motion-enabled.motion-ready .desktop-header .desktop-nav a:nth-child(1){transition-delay:100ms}
.motion-enabled.motion-ready .desktop-header .desktop-nav a:nth-child(2){transition-delay:130ms}
.motion-enabled.motion-ready .desktop-header .desktop-nav a:nth-child(3){transition-delay:160ms}
.motion-enabled.motion-ready .desktop-header .desktop-nav a:nth-child(4){transition-delay:190ms}
.motion-enabled.motion-ready .desktop-header .desktop-nav a:nth-child(5){transition-delay:220ms}
.motion-enabled.motion-ready .desktop-header .desktop-nav a:nth-child(6){transition-delay:250ms}
.motion-enabled.motion-ready .desktop-header .desktop-nav a:nth-child(7){transition-delay:280ms}
.motion-enabled.motion-ready .desktop-header .phone-desktop{transition-delay:310ms}

/* High-end controls: fill/color only; no container translation. */
.button,.m-button-outline,.m-model-btn,.m-lead-btn{
  transition:color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),background-size 620ms var(--motion-ease),box-shadow var(--motion-fast) ease;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0 100%;
}
.button--light-outline,.m-button-outline{background-image:linear-gradient(90deg,#f2f2f2,#f2f2f2)}
.button--dark-outline,.m-model-btn{background-image:linear-gradient(90deg,#000,#000)}
.button--black,.m-lead-btn{background-image:linear-gradient(90deg,var(--accent),var(--accent))}
.button--light-solid{background-image:linear-gradient(90deg,var(--accent),var(--accent))}
@media (hover:hover) and (pointer:fine){
  .button--light-outline:hover,.m-button-outline:hover{background-size:100% 100%;color:#000;border-color:#f2f2f2}
  .button--dark-outline:hover,.m-model-btn:hover{background-size:100% 100%;color:#fff;border-color:#000}
  .button--black:hover,.m-lead-btn:hover{background-size:100% 100%;color:#000;border-color:var(--accent)}
  .button--light-solid:hover{background-size:100% 100%;color:#000;border-color:var(--accent)}
}

/* Slider CTA — directional premium fill.
   Hover: fill grows LEFT -> RIGHT.
   Mouse leave: the right edge retreats RIGHT -> LEFT.
   A pseudo-element owns the fill so the hero entrance transition cannot override it. */
.hero-content .button,
.m-hero-copy .button{
  background:transparent;
  background-image:none;
  color:#f2f2f2;
  border-color:#f2f2f2;
  overflow:hidden;
  isolation:isolate;
  z-index:1;
}
.hero-content .button::before,
.m-hero-copy .button::before{
  content:"";
  position:absolute;
  inset:0;
  background:#f2f2f2;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 620ms var(--motion-ease);
  z-index:-1;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .hero-content .button:hover,
  .m-hero-copy .button:hover{
    color:#000;
    border-color:#f2f2f2;
  }
  .hero-content .button:hover::before,
  .m-hero-copy .button:hover::before{
    transform:scaleX(1);
  }
}

/* Navigation underline keeps its original dimensions. */
.desktop-nav a::after{transform:scaleX(0);transform-origin:left center;transition:transform 500ms var(--motion-ease),background-color 300ms ease}
.desktop-nav a.is-active::after,.desktop-nav a:hover::after{transform:scaleX(1)}

/* Sliders: only the tracks move, exactly as in the base layout. */
.interiors-track,.reviews-track{transition:transform 820ms var(--motion-ease)!important}
.hero-top-progress,.m-top-progress{transition:width 850ms var(--motion-ease)}
.hero-pagers button::after,.bar-dots .is-active::after,.bar-dots button.is-active::after,.m-bar-dots .is-active::after,.m-pagers .is-active::after{transition:width 620ms var(--motion-ease)}
.hero-arrow,.gallery-arrow,.review-arrow,.m-hero-arrow,.m-gallery-arrow{transition:background-color 380ms var(--motion-ease),border-color 380ms var(--motion-ease),color 380ms var(--motion-ease),box-shadow 380ms ease}
@media (hover:hover) and (pointer:fine){
  .hero-arrow:hover,.gallery-arrow:hover,.review-arrow:hover,.m-hero-arrow:hover,.m-gallery-arrow:hover{box-shadow:0 10px 28px rgba(0,0,0,.12)}
  .hero-arrow--prev:hover{background:#f2f2f2;color:#000}
  .hero-arrow--next:hover,.gallery-arrow:hover,.review-arrow:hover,.m-gallery-arrow:hover{background:#000;border-color:#000;color:#fff}
}

/* Image hover is limited to containers that already clip overflow. */
.interior-card button>img:first-child,
.model-image-wrap>img,
.review-images button img{
  transition:transform 900ms var(--motion-ease),filter 650ms var(--motion-ease);
}
.model-card>img,.benefit img,.m-model-list article>img,.m-benefit-scroll img{
  transition:filter 650ms var(--motion-ease),opacity 650ms ease;
}
@media (hover:hover) and (pointer:fine){
  .interior-card button:hover>img:first-child,.model-image-wrap:hover>img,.review-images button:hover img{transform:scale(1.028);filter:saturate(1.035) contrast(1.012)}
  .model-card:hover>img,.benefit:hover img,.m-model-list article:hover>img,.m-benefit-scroll article:hover img{filter:saturate(1.035) contrast(1.012)}
}

/* Cards and FAQ gain depth without changing x/y coordinates. */
.review-card,.faq-item,.m-faq details{transition:box-shadow 520ms var(--motion-ease),background-color 420ms ease}
@media (hover:hover) and (pointer:fine){
  .review-card:hover{box-shadow:0 20px 50px rgba(35,24,18,.075)}
  .faq-item:hover,.m-faq details:hover{box-shadow:0 14px 34px rgba(35,24,18,.055)}
}
.faq-toggle{transition:background-color 380ms var(--motion-ease)}

/* Inputs. */
.lead-form>input,.m-lead>input{transition:border-color 320ms ease,box-shadow 420ms var(--motion-ease),background-color 320ms ease}
.lead-form>input:focus,.m-lead>input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(251,199,123,.28);background:#fff}

/* Links/socials. */
.footer-policy,.shops a,.contact-line,.m-contacts a,.socials a,.m-socials a{transition:opacity 300ms ease,color 300ms ease}
@media (hover:hover) and (pointer:fine){.footer-policy:hover,.shops a:hover,.contact-line:hover,.m-contacts a:hover,.socials a:hover,.m-socials a:hover{opacity:.64}}

/* Modal animation preserves the base display:none/display:flex behavior. */
.modal.is-open .modal-backdrop{animation:premiumBackdropIn 360ms ease both}
.modal.is-open .image-modal-frame,.modal.is-open .video-modal-frame,.modal.is-open .review-modal-frame{animation:premiumModalIn 560ms var(--motion-ease) both}
@keyframes premiumBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes premiumModalIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@keyframes eoniksSketchSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Mobile hero image source swap. */
.motion-enabled .m-hero-bg{transition:opacity 520ms var(--motion-ease),filter 700ms var(--motion-ease)}
.motion-enabled .m-hero-bg.motion-swap{opacity:.48;filter:blur(1px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .motion-reveal{opacity:1!important;clip-path:none!important;filter:none!important}
}

/* ==========================================================================
   Persistent header + section-aware navigation
   ========================================================================== */
.desktop-header,
.mobile-header{
  transition:
    background-color 380ms var(--motion-ease),
    backdrop-filter 380ms var(--motion-ease),
    -webkit-backdrop-filter 380ms var(--motion-ease),
    box-shadow 380ms var(--motion-ease);
}

.desktop-header.is-scrolled,
.mobile-header.is-scrolled{
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}

@media (min-width:768px){
  #site > .desktop-header{
    display:block;
    position:fixed!important;
    left:0!important;
    top:0!important;
    width:100vw!important;
    height:73px!important;
    transform:none!important;
    transform-origin:initial!important;
    margin:0!important;
    z-index:950;
  }

  #site > .mobile-header{display:none!important}

  #site > .desktop-header .desktop-logo{
    left:calc(60px * var(--desktop-scale));
  }

  #site > .desktop-header .desktop-nav{
    left:50%;
    transform:translateX(-50%);
  }

  #site > .desktop-header .phone-desktop{
    left:auto;
    right:calc(60px * var(--desktop-scale));
  }
}

@media (max-width:767px){
  #site > .desktop-header{display:none!important}

  #site > .mobile-header{
    display:block;
    position:fixed!important;
    left:50%!important;
    top:0!important;
    width:320px!important;
    height:32px!important;
    margin-left:-160px!important;
    transform:scale(var(--mobile-scale))!important;
    transform-origin:top center!important;
    z-index:950;
  }

  .m-menu a{
    position:relative;
    transition:color 260ms var(--motion-ease);
  }

  .m-menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:2px;
    width:0;
    height:1px;
    background:var(--accent);
    transition:width 360ms var(--motion-ease);
  }

  .m-menu a.is-active{
    color:var(--accent);
  }

  .m-menu a.is-active::after{
    width:34px;
  }
}


/* ==========================================================================
   Typography lock — exact Figma typography for interior/model captions.
   Prevents later motion/adaptive rules from changing these fonts.
   ========================================================================== */

/* DESKTOP / TABLET */
@media (min-width:768px){
  .interiors .section-kicker{
    font-family:'Comfortaa',sans-serif!important;
    font-size:14px!important;
    font-weight:400!important;
    font-style:normal!important;
    line-height:normal!important;
    letter-spacing:0!important;
    font-synthesis:none!important;
  }

  .models .models-kicker{
    font-family:'Myriad Pro',Arial,sans-serif!important;
    font-size:20px!important;
    font-weight:400!important;
    font-style:normal!important;
    line-height:normal!important;
    letter-spacing:0!important;
    font-synthesis:none!important;
  }

  .interiors .card-sub{
    font-family:'Comfortaa',sans-serif!important;
    font-size:12px!important;
    font-weight:400!important;
    font-style:normal!important;
    line-height:normal!important;
    letter-spacing:0!important;
    font-synthesis:none!important;
  }
}

/* MOBILE */
@media (max-width:767px){
  .m-interiors > .m-kicker,
  .m-models > .m-kicker{
    font-family:'Comfortaa',sans-serif!important;
    font-size:12px!important;
    font-weight:400!important;
    font-style:normal!important;
    line-height:normal!important;
    letter-spacing:0!important;
    font-synthesis:none!important;
  }

  .m-interior-row article > div{
    font-family:'Myriad Pro',Arial,sans-serif!important;
    font-size:12px!important;
    font-weight:400!important;
    font-style:normal!important;
    line-height:normal!important;
    letter-spacing:0!important;
    font-synthesis:none!important;
  }
}


/* ==========================================================================
   Tablet / 1024×768 header stabilization
   Keeps the fixed desktop header intact without overlaps on narrower widths.
   ========================================================================== */
@media (min-width:768px) and (max-width:1140px){
  #site > .desktop-header{
    height:64px!important;
  }

  #site > .desktop-header .desktop-logo{
    left:20px!important;
    top:11px!important;
    width:148px!important;
    height:42px!important;
  }

  #site > .desktop-header .desktop-logo .logo-main{
    width:148px!important;
    height:auto!important;
  }

  #site > .desktop-header .desktop-logo .logo-tagline{
    display:none!important;
  }

  #site > .desktop-header .desktop-nav{
    left:186px!important;
    right:148px!important;
    top:0!important;
    width:auto!important;
    transform:none!important;
    justify-content:center!important;
    gap:16px!important;
    height:64px!important;
    font-size:14px!important;
  }

  #site > .desktop-header .desktop-nav a{
    height:64px!important;
    padding-top:23px!important;
  }

  #site > .desktop-header .desktop-nav a.is-active::after,
  #site > .desktop-header .desktop-nav a:hover::after{
    bottom:17px!important;
  }

  #site > .desktop-header .phone-desktop{
    right:20px!important;
    left:auto!important;
    width:118px!important;
    height:64px!important;
  }

  #site > .desktop-header .phone-trigger{
    width:118px!important;
    height:64px!important;
    font-size:14px!important;
    gap:6px!important;
  }

  #site > .desktop-header .phone-trigger img{
    width:18px!important;
    height:18px!important;
  }

  #site > .desktop-header .contact-popover{
    top:64px!important;
  }

  #about,#interiors,#quality,#models,#buyers,#reviews,#contacts{
    scroll-margin-top:64px!important;
  }
}

/* A slightly tighter fallback for very narrow tablet landscape widths. */
@media (min-width:768px) and (max-width:980px){
  #site > .desktop-header .desktop-logo{
    width:136px!important;
  }

  #site > .desktop-header .desktop-logo .logo-main{
    width:136px!important;
  }

  #site > .desktop-header .desktop-nav{
    left:166px!important;
    right:132px!important;
    gap:12px!important;
    font-size:13px!important;
  }

  #site > .desktop-header .phone-desktop,
  #site > .desktop-header .phone-trigger{
    width:104px!important;
  }

  #site > .desktop-header .phone-trigger{
    font-size:13px!important;
  }
}


/* ==========================================================================
   Tablet header hotfix
   Fixes:
   1) phone block overflowing outside the viewport at 1024×768
   2) hero progress line sitting too low after the tablet header height change
   ========================================================================== */
@media (min-width:768px) and (max-width:1140px){
  #site > .desktop-header .desktop-nav{
    left:180px!important;
    right:170px!important;
    gap:14px!important;
  }

  #site > .desktop-header .phone-desktop{
    right:12px!important;
    width:142px!important;
    overflow:visible!important;
  }

  #site > .desktop-header .phone-trigger{
    width:142px!important;
    font-size:12px!important;
    gap:4px!important;
  }

  #site > .desktop-header .phone-trigger span{
    display:block;
    min-width:0;
    white-space:nowrap;
  }

  #site > .desktop-header .phone-trigger img{
    width:16px!important;
    height:16px!important;
    flex:none;
  }

  .hero-progress-line{
    top:calc(64px / var(--desktop-scale))!important;
  }
}

@media (min-width:768px) and (max-width:980px){
  #site > .desktop-header .desktop-nav{
    left:156px!important;
    right:152px!important;
    gap:10px!important;
    font-size:12px!important;
  }

  #site > .desktop-header .phone-desktop{
    right:10px!important;
    width:136px!important;
  }

  #site > .desktop-header .phone-trigger{
    width:136px!important;
    font-size:11px!important;
  }
}


/* ==========================================================================
   Phone icon alignment fix
   Keeps the chevron next to the phone number with an exact 8px gap.
   ========================================================================== */
@media (min-width:768px) and (max-width:1140px){
  #site > .desktop-header .phone-trigger{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }

  #site > .desktop-header .phone-trigger span{
    flex:none!important;
  }

  #site > .desktop-header .phone-trigger img{
    margin-left:0!important;
    position:static!important;
    width:16px!important;
    height:16px!important;
    flex:none!important;
  }
}

@media (min-width:768px) and (max-width:980px){
  #site > .desktop-header .phone-trigger{
    gap:8px!important;
  }
}


/* ==========================================================================
   Tablet footer stabilization — 1024×768 and nearby widths
   ========================================================================== */
@media (min-width:981px) and (max-width:1140px){
  .desktop-footer{
    left:0!important;
    right:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .desktop-footer .footer-logo{
    left:20px!important;
    top:13px!important;
    width:166px!important;
    height:49px!important;
  }

  .desktop-footer .footer-policy{
    left:263px!important;
    top:28px!important;
    width:222px!important;
    font-size:16px!important;
    white-space:nowrap!important;
  }

  .desktop-footer .made-by{
    left:505px!important;
    top:31px!important;
    width:177px!important;
    height:12.326px!important;
  }

  .desktop-footer .footer-download{
    left:auto!important;
    right:12px!important;
    top:11px!important;
    width:288px!important;
    height:53px!important;
    min-height:53px!important;
    padding:16px 36px!important;
    font-size:16px!important;
    white-space:nowrap!important;
  }
}

/* Compact tablet fallback below 981px — prevents any overlap. */
@media (min-width:768px) and (max-width:980px){
  .desktop-footer{
    left:0!important;
    right:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .desktop-footer .footer-logo{
    left:20px!important;
    top:16px!important;
    width:130px!important;
    height:40px!important;
  }

  .desktop-footer .footer-logo .logo-main{
    width:130px!important;
    height:auto!important;
  }

  .desktop-footer .footer-logo .logo-tagline{
    display:none!important;
  }

  .desktop-footer .footer-policy{
    left:185px!important;
    top:29px!important;
    width:185px!important;
    font-size:14px!important;
    white-space:nowrap!important;
  }

  .desktop-footer .made-by{
    left:390px!important;
    top:31px!important;
    width:145px!important;
    height:auto!important;
  }

  .desktop-footer .footer-download{
    left:auto!important;
    right:20px!important;
    top:13px!important;
    width:205px!important;
    height:47px!important;
    min-height:47px!important;
    padding:13px 20px!important;
    font-size:14px!important;
    white-space:nowrap!important;
  }
}


/* ==========================================================================
   Tablet footer — equal spacing between all 4 elements
   Keeps the approved outer offsets: 20px left / 12px right.
   ========================================================================== */
@media (min-width:981px) and (max-width:1140px){
  .desktop-footer{
    --footer-tablet-gap:calc((100% - 20px - 12px - 166px - 222px - 177px - 288px) / 3);
  }

  .desktop-footer .footer-logo{
    left:20px!important;
  }

  .desktop-footer .footer-policy{
    left:calc(20px + 166px + var(--footer-tablet-gap))!important;
  }

  .desktop-footer .made-by{
    left:calc(
      20px + 166px + var(--footer-tablet-gap) +
      222px + var(--footer-tablet-gap)
    )!important;
  }

  .desktop-footer .footer-download{
    left:auto!important;
    right:12px!important;
  }
}


/* ==========================================================================
   HERO SLIDER — autoplay / swipe / premium copy entrance
   ========================================================================== */

/* Horizontal swipe is allowed, while vertical page scrolling stays native. */
.hero,
.m-hero{
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}

/* Desktop + tablet copy motion. This only transforms text/CTA, never layout containers. */
.motion-enabled .hero-slide .hero-content .eyebrow,
.motion-enabled .hero-slide .hero-content h1,
.motion-enabled .hero-slide .hero-content .button{
  transform:translateY(12px);
  will-change:opacity,filter,transform;
  transition:
    opacity 760ms var(--motion-ease),
    filter 760ms var(--motion-ease),
    transform 900ms var(--motion-ease);
}

.motion-enabled.motion-ready .hero-slide.is-active .hero-content .eyebrow,
.motion-enabled.motion-ready .hero-slide.is-active .hero-content h1,
.motion-enabled.motion-ready .hero-slide.is-active .hero-content .button{
  transform:translateY(0);
}

/* Mobile copy replays on every slide change. */
.motion-enabled .m-hero-copy .m-eyebrow,
.motion-enabled .m-hero-copy h1,
.motion-enabled .m-hero-copy .button{
  opacity:0;
  filter:blur(2px);
  transform:translateY(12px);
  will-change:opacity,filter,transform;
  transition:
    opacity 720ms var(--motion-ease),
    filter 720ms var(--motion-ease),
    transform 880ms var(--motion-ease);
}

.motion-enabled.motion-ready .m-hero-copy.is-animated .m-eyebrow,
.motion-enabled.motion-ready .m-hero-copy.is-animated h1,
.motion-enabled.motion-ready .m-hero-copy.is-animated .button{
  opacity:1;
  filter:none;
  transform:translateY(0);
}

.motion-enabled.motion-ready .m-hero-copy.is-animated .m-eyebrow{transition-delay:100ms}
.motion-enabled.motion-ready .m-hero-copy.is-animated h1{transition-delay:210ms}
.motion-enabled.motion-ready .m-hero-copy.is-animated .button{transition-delay:340ms}

@media (prefers-reduced-motion:reduce){
  .motion-enabled .hero-slide .hero-content .eyebrow,
  .motion-enabled .hero-slide .hero-content h1,
  .motion-enabled .hero-slide .hero-content .button,
  .motion-enabled .m-hero-copy .m-eyebrow,
  .motion-enabled .m-hero-copy h1,
  .motion-enabled .m-hero-copy .button{
    opacity:1!important;
    filter:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   Mobile phone + contacts popover fix
   ========================================================================== */
@media (max-width:767px){
  #site > .mobile-header .m-phone{
    left:126px!important;
    top:0!important;
    width:144px!important;
    height:32px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:0!important;
    white-space:nowrap!important;
    text-align:left!important;
  }

  #site > .mobile-header .m-phone span{
    display:block!important;
    flex:none!important;
    white-space:nowrap!important;
    line-height:32px!important;
  }

  #site > .mobile-header .m-phone img{
    position:static!important;
    right:auto!important;
    top:auto!important;
    width:11px!important;
    height:11px!important;
    margin:0!important;
    flex:none!important;
    transform:rotate(-90deg)!important;
  }

  #site > .mobile-header .m-contact-popover{
    left:auto!important;
    right:10px!important;
    top:33px!important;
    width:210px!important;
    height:auto!important;
    min-height:174px!important;
    padding:14px!important;
    box-sizing:border-box!important;
    gap:0!important;
    align-items:stretch!important;
  }

  #site > .mobile-header .m-contact-popover a{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:27px!important;
    line-height:27px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    font-size:12px!important;
  }

  #site > .mobile-header .m-contact-popover button{
    width:100%!important;
    height:36px!important;
    min-height:36px!important;
    margin-top:8px!important;
    padding:0 10px!important;
    white-space:nowrap!important;
    font-size:12px!important;
  }
}


/* ==========================================================================
   ADAPTIVE SECTION COLOR TRANSITIONS — layer-safe restoration
   The Figma layout intentionally overlaps several sections. Some opaque
   adaptive section backgrounds were masking the gradients underneath.
   ========================================================================== */

/* Desktop + tablet: keep every designed transition layer visible and
   independent from fullscreen scaling / section stacking. */
@media (min-width:768px){
  .about-overlay-bottom,
  .quality-gradient,
  .buyers-gradient,
  .video-grad{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  .about-overlay-bottom{z-index:3!important}

  .quality-image{z-index:1}
  .quality-gradient{z-index:2!important}
  .quality h2{z-index:3!important}

  .buyers-gradient{z-index:1!important}
  .buyers-logo,
  .buyers h2,
  .benefits-track{z-index:2!important}

  .video-poster{z-index:1}
  .video-grad{z-index:2!important}
  .video-play{z-index:3!important}
}

/* Mobile:
   1. interiors overlaps the quality transition by ~29px;
   2. models overlaps the quality bottom transition by ~20px;
   3. models overlaps the buyers transition by ~102px.
   Transparent edge bands expose the intended Figma gradients beneath
   without moving any content or changing section dimensions. */
@media (max-width:767px){
  .m-about-fade,
  .m-quality-top,
  .m-quality-bottom,
  .m-buyers-bg,
  .m-video-top,
  .m-video-bottom{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  .m-about-fade{z-index:3!important}

  .m-interiors{
    background:
      linear-gradient(
        to bottom,
        var(--paper) 0,
        var(--paper) calc(100% - 30px),
        rgba(242,242,242,0) 100%
      )!important;
  }

  .m-quality>img{z-index:1!important}
  .m-quality-top,
  .m-quality-bottom{z-index:2!important}
  .m-quality h2{z-index:3!important}

  .m-models{
    background:
      linear-gradient(
        to bottom,
        rgba(242,242,242,0) 0,
        var(--paper) 20px,
        var(--paper) calc(100% - 106px),
        rgba(242,242,242,0) 100%
      )!important;
  }

  .m-buyers-bg{z-index:1!important}
  .m-buyers-logo,
  .m-buyers h2,
  .m-benefit-scroll{z-index:2!important}

  .m-video>img{z-index:1!important}
  .m-video-top,
  .m-video-bottom{z-index:2!important}
  .m-video-play{z-index:3!important}
}


/* ==========================================================================
   Mobile buyers benefits — infinite swipe carousel
   ========================================================================== */
@media (max-width:767px){
  .m-benefit-scroll{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    touch-action:pan-x pan-y!important;
  }

  .m-benefit-scroll::-webkit-scrollbar{
    display:none!important;
  }

  .m-benefit-scroll article{
    scroll-snap-align:start!important;
  }

  .m-benefit-scroll article.is-clone{
    pointer-events:none;
  }

  .m-benefit-scroll.is-recentering{
    scroll-snap-type:none!important;
    scroll-behavior:auto!important;
  }
}


/* ==========================================================================
   Model video CTA — always visible on mobile + tablet
   Desktop keeps the hover-only behavior.
   ========================================================================== */
@media (max-width:767px){
  .m-model-img .mini-video-button{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateX(-50%) translateY(0)!important;
  }
}

@media (min-width:768px) and (max-width:1140px){
  .model-image-wrap .mini-video-button{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateX(-50%) translateY(0)!important;
  }
}


/* ==========================================================================
   Reviews — seamless infinite carousel + inline review expansion
   ========================================================================== */

.reviews-track,
.m-reviews-track{
  will-change:transform;
}

.reviews-track.is-jumping,
.m-reviews-track.is-jumping{
  transition:none!important;
}

.review-copy-full{display:none}

.review-card .review-text,
.review-card .review-images,
.m-review-card .review-text,
.m-review-card .review-images{
  transition:
    height 460ms var(--motion-ease),
    top 460ms var(--motion-ease),
    grid-auto-rows 460ms var(--motion-ease);
}

/* Desktop/tablet expanded state: keep everything inside the existing card. */
.review-card.is-expanded .review-copy-short{display:none}
.review-card.is-expanded .review-copy-full{display:inline}
.review-card.is-expanded .review-text{
  height:245px;
  overflow:auto;
  scrollbar-width:thin;
}
.review-card.is-expanded .review-images{
  top:368px;
  grid-auto-rows:82px;
}

/* Mobile review carousel. */
@media (max-width:767px){
  .m-reviews-viewport{
    position:absolute;
    left:0;
    top:66px;
    width:320px;
    height:515px;
    overflow:hidden;
    touch-action:pan-y;
  }

  .m-reviews-track{
    position:absolute;
    left:10px;
    top:0;
    display:flex;
    gap:20px;
    transition:transform 620ms var(--motion-ease);
  }

  .m-review-card{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:300px!important;
    height:515px!important;
    flex:none;
  }

  .m-review-card.is-expanded .review-copy-short{display:none}
  .m-review-card.is-expanded .review-copy-full{display:inline}

  .m-review-card.is-expanded .review-text{
    height:235px!important;
    overflow:auto!important;
    scrollbar-width:thin;
  }

  .m-review-card.is-expanded .review-images{
    top:330px!important;
    grid-auto-rows:77px!important;
  }

  .m-review-dots{
    display:flex;
    justify-content:center;
    gap:8px;
  }

  .m-review-dots span{
    cursor:pointer;
  }
}

/* Tablet swipe area uses the desktop carousel geometry. */
@media (min-width:768px) and (max-width:1140px){
  .reviews-viewport{
    touch-action:pan-y;
  }
}


/* ==========================================================================
   Mobile reviews hotfix — visible "ещё" + centered 5 indicators
   ========================================================================== */
@media (max-width:767px){
  .m-review-card .review-text{
    padding-bottom:18px!important;
  }

  .m-review-card .review-more{
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    z-index:3!important;
    display:block!important;
    margin:0!important;
    padding:0 0 0 8px!important;
    background:#fff!important;
    color:#c7c7c7!important;
    white-space:nowrap!important;
  }

  .m-review-card.is-expanded .review-more{
    position:sticky!important;
    float:right!important;
    right:0!important;
    bottom:0!important;
    background:#fff!important;
    padding-left:8px!important;
  }

  .m-review-dots{
    left:50%!important;
    right:auto!important;
    bottom:14px!important;
    width:auto!important;
    transform:translateX(-50%)!important;
    justify-content:center!important;
    align-items:center!important;
    gap:8px!important;
    white-space:nowrap!important;
  }

  .m-review-dots span{
    width:42px!important;
    height:3px!important;
    flex:0 0 42px!important;
  }

  .m-review-dots span.is-active::after{
    width:14px!important;
    height:3px!important;
  }
}


/* ==========================================================================
   EONIKS logo rotor — only the golden emblem spins clockwise
   ========================================================================== */
.eoniks-inline-logo{
  display:block;
  overflow:visible;
}

.eoniks-inline-logo .eoniks-main-logo-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.eoniks-inline-logo .eoniks-logo-rotor{
  transform-box:fill-box;
  transform-origin:center;
  animation:eoniksLogoRotor 8s linear infinite;
  will-change:transform;
}

@keyframes eoniksLogoRotor{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Preserve exact existing logo geometry after replacing <img> with inline SVG. */
.desktop-logo .eoniks-inline-logo.logo-main{
  position:absolute;
  left:0;
  top:0;
  width:166px;
  height:31px;
}

.footer-logo .eoniks-inline-logo.logo-main{
  display:block;
  width:166px;
  height:31px;
}

.m-logo .eoniks-inline-logo.m-logo-main{
  position:absolute;
  left:0;
  top:0;
  width:68px;
  height:12.699px;
}

.m-footer-logo .m-footer-logo-main{
  position:absolute;
  left:0;
  top:0;
  width:97px;
  height:18.114px;
}

@media (min-width:768px) and (max-width:1140px){
  #site > .desktop-header .desktop-logo .eoniks-inline-logo.logo-main{
    width:100%!important;
    height:auto!important;
    aspect-ratio:68/13;
  }
}


/* ==========================================================================
   Buyers section logo rotor — all devices
   ========================================================================== */
.buyers-inline-logo{
  display:block;
  overflow:visible;
}

.buyers-dark-logo-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.buyers-dark-logo-svg .buyers-logo-rotor{
  transform-box:fill-box;
  transform-origin:center;
  animation:eoniksLogoRotor 8s linear infinite;
  will-change:transform;
}

.buyers-logo .buyers-inline-logo{
  width:100%;
  height:100%;
}

.m-buyers-logo.buyers-inline-logo{
  position:absolute;
  display:block;
  overflow:visible;
}


/* ==========================================================================
   Contacts section logo rotor — all devices
   ========================================================================== */
.contacts-inline-logo{
  display:block;
  overflow:visible;
}

.contacts-dark-logo-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.contacts-dark-logo-svg .contacts-logo-rotor{
  transform-box:fill-box;
  transform-origin:center;
  animation:eoniksLogoRotor 8s linear infinite;
  will-change:transform;
}

.contacts-logo.contacts-inline-logo{
  position:absolute;
}

.m-contacts-logo.contacts-inline-logo{
  position:absolute;
  display:block;
  overflow:visible;
}


/* ==========================================================================
   Contacts logo safe restore — full logo visible + separate rotating emblem
   ========================================================================== */
.contacts-logo-animated {
  display:block;
  overflow:visible;
}

.contacts-logo-animated > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.contacts-logo-animated .contacts-logo-rotor-overlay {
  position:absolute;
  left:16.4%;
  top:-10%;
  width:21.2%;
  aspect-ratio:1/1;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAPZSURBVGhD7ZpBTuMwFIZ/5g4jwQ4FiUmOMVK7m5Ga7hFLjoDgAK04QpeIPWVf7pFMJTLsQGLHBWYW5WWcP7bzkji0oPk2FKck/vyen12XvdfX1z/4xHzhhs/Gf8GPzqcX3BuiyDyufwEAfq/X5evH9RqHx8eV9x0efwMAfP/xs9IekmCCRZ5htVyWr7swmqQYp1Nu7kVvQRHrKmUjpGhnwSHEmBCinQSLPMNiPuPmwegj2rqKrpa3XrkoTripN/d3S6yWt9ysolUEV8tb3N9tCgkjYm1SVv4miuNKe5Hn1vtEcYKzi0tu9qIW9MmNJinwNtJNRHGCcbp5f1O0izzDQ5ZV7ttWUi14fnrCTQCAs4tLRHHivC70mUcg2Tb3Us1BV/6PJimiOHFex9t7rq5v1B1ysYn8FFfXN3zJiyqCtuiYo2i7LqnYlIZD0yhom3s8D1iQr/swd0DyexQnlcJzlCSdB6pRcDGf1SqaGT0egDbzw8RWUJjRJG0t2yjI0WEBU5CvdUXmdJOs5lmqIuOjyHOgxQM1jNMpxukUZxeX5RLEaBd/ryCnJt4ezkiFC43c1yfp21WhSZCx5f6mKFR3IqGR5cH1fJ9kRVATciZkajbhStlNJbb3vRZBMy15xGyRei85wZWy93f2j24VQVvVYsldwCVpoxQUe3PRBVBujHeNcTqtDT73HabgQ1YPLyNLwrbgecaDX+RZLU2tc5DnIY/UtuDPiZq+1QRhiSaP1LaI4ri2JHDfuO9WQU5FGSkO/3tzlGyiZaZqFCfeglMKyh/DkqYwPtjuAlztzaWKg2ONIBwVSfsRaCjMAeaC4xr8UpAnrC2KuwRH6t85T3Uz4owgHJ8FdwVtACqCXJHgSNVt4ROS7OOtY0WQ0xSK3fpQaCLESwL3HSwIRxSLPMP56UnjA0PCnbe18Ty0FcGaoG9dWcxnteo1BHzOI7CQhpogGnbr2qOCPtjkYJmDXDFtWAWhkDw/PRlE1DXfuz7LKQjjqEAjyqPbBb6PrWi0pfHYUCgU55Ywvojhct0Er7mRcXjsquSaY3y1oInIbl7XJ34Ux+XetikKrs6bZz22oqM9C+okGApbxwWJjus9WkHvHBRCzC8TiZqt4zDSvMjtU0IrhzYRXMxnZVnW3pwplP+4cHV940xdKOeeoBbkB44UX4TIXOWjBh9yX5dcm+ihjaDA1S40o0lqTUt0kEMXQXgm/pB0PVHoJIh3lIx6flPcWVAYUrRLSjK9BYVQon0jxgQTFGRT3FY2tJgQXJB5eX7Cy9MzN+Prwf7m5/4BXwrK4ILbRrVV+8j8BQT9mqJOcNU9AAAAAElFTkSuQmCC") center/contain no-repeat;
  transform-origin:center;
  animation:eoniksLogoRotor 8s linear infinite;
  will-change:transform;
  pointer-events:none;
}

.contacts-logo.contacts-logo-animated {
  position:absolute;
}

.m-contacts-logo.contacts-logo-animated {
  position:absolute;
}

.m-contacts-logo-animated > img {
  width:100%;
  height:100%;
}


.contacts-logo-animated{
  position:absolute;
  overflow:visible!important;
}

.contacts-logo-animated > img{
  position:relative;
  z-index:1;
}

.contacts-logo-animated .contacts-logo-rotor-overlay{
  z-index:2;
}


/* ==========================================================================
   Contacts logo — native internal rotor, no overlays
   ========================================================================== */
.contacts-logo-native{
  display:block;
  overflow:visible!important;
}

.contacts-logo-native .contacts-logo-svg-native{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.contacts-logo-native .contacts-logo-native-rotor{
  transform-box:fill-box;
  transform-origin:center;
  animation:eoniksLogoRotor 8s linear infinite;
  will-change:transform;
}

/* Disable legacy overlay implementation completely. */
.contacts-logo-rotor-overlay{
  display:none!important;
}


/* ==========================================================================
   Video instruction — real MP4 in the existing premium modal
   ========================================================================== */
.instruction-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:none;
  background:#000;
  object-fit:contain;
}

.video-modal-frame.is-instruction .instruction-video{
  display:block;
}

.video-modal-frame.is-instruction .video-placeholder{
  display:none;
}

.video-modal-frame.is-model-placeholder .instruction-video{
  display:none;
}

.video-modal-frame.is-model-placeholder .video-placeholder{
  display:flex;
}

@media (max-width:767px){
  .instruction-video{
    width:100%;
    height:100%;
  }
}


/* ==========================================================================
   Inline Video Instruction — self-contained autoplay
   ========================================================================== */
.video-instruction-section{
  overflow:hidden;
}

.video-instruction-inline{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  background:#000;
  z-index:1;
}

.video-instruction-section .video-grad,
.video-instruction-section .m-video-top,
.video-instruction-section .m-video-bottom{
  z-index:2!important;
  pointer-events:none!important;
}

.video-instruction-section .video-play,
.video-instruction-section .m-video-play{
  display:none!important;
}


/* ==========================================================================
   Video instruction restored to popup-only mode
   ========================================================================== */
.video-instruction-inline{
  display:none!important;
}

.video-band .video-play,
.m-video .m-video-play{
  display:flex!important;
}

.video-modal-frame.is-instruction .instruction-video{
  display:block!important;
}


/* ==========================================================================
   Desktop Video Instruction — Play follows the cursor
   Tablet/mobile remain unchanged.
   ========================================================================== */
@media (min-width:1141px) and (hover:hover) and (pointer:fine){
  .video-band{
    cursor:pointer;
  }

  .video-band .video-play{
    pointer-events:none;
    will-change:transform;
  }
}


/* ==========================================================================
   Mobile buyers heading — exactly two lines
   ========================================================================== */
@media (max-width:767px){
  .m-buyers h2{
    left:10px!important;
    width:300px!important;
    font-size:12px!important;
    line-height:16px!important;
  }
  .m-buyers h2 span{
    display:block;
    white-space:nowrap;
  }

  /* Mobile FAQ: all seven entries, answer height follows content. */
  .m-faq details,
  .m-faq details:not([open]),
  .m-faq details[open]{
    height:auto!important;
    min-height:54px;
  }
  .m-faq details[open]{
    padding-bottom:12px;
  }
  .m-faq summary{
    min-height:54px;
    padding-top:10px;
    padding-bottom:9px;
  }
  .m-faq details[open] summary{
    min-height:44px;
    padding-bottom:0;
  }
  .m-faq p{
    margin:7px 0 0;
    padding-bottom:4px;
  }

  /* Mobile interiors: infinite/seamless swipe track. */
  .m-interior-row{
    will-change:transform;
    touch-action:pan-y;
  }
  .m-interior-row.is-jumping{
    transition:none!important;
  }
  .m-interior-row .is-interior-clone{
    flex:none;
  }
  #mInteriorDots{
    left:19px;
  }
}


/* ==========================================================================
   EONIKS MOTION POLISH — all devices, appearance/layout preserved
   ========================================================================== */
:root{
  --motion-ease:cubic-bezier(.20,.72,.20,1);
  --motion-ease-soft:cubic-bezier(.16,.82,.24,1);
  --motion-snap:cubic-bezier(.22,.74,.20,1);
  --motion-fast:300ms;
  --motion-medium:680ms;
  --motion-slow:940ms;
}

/* Reveal animations: opacity is much cheaper and steadier than animating
   blur + large clip-path regions, especially on iOS/Android GPUs. */
.motion-enabled .motion-reveal,
.motion-enabled .motion-reveal--left,
.motion-enabled .motion-reveal--right,
.motion-enabled .motion-reveal--soft{
  opacity:0;
  clip-path:none!important;
  filter:none!important;
  transition:
    opacity var(--motion-medium) var(--motion-ease-soft)!important;
  transition-delay:var(--motion-delay,0ms)!important;
  will-change:opacity;
}

.motion-enabled .motion-reveal.is-revealed{
  opacity:1;
  clip-path:none!important;
  filter:none!important;
}

/* Infinite-loop clones must always be visually ready before a hidden loop
   recenter. They never participate in entrance staggering. */
.motion-enabled .is-clone,
.motion-enabled .is-review-clone,
.motion-enabled .is-interior-clone{
  opacity:1!important;
  clip-path:none!important;
  filter:none!important;
}

/* Hero: calm crossfade and lighter image processing. */
.motion-enabled .hero-slide{
  transition:opacity 780ms var(--motion-ease-soft)!important;
}
.motion-enabled .hero-slide .hero-image{
  transform:scale(1.022);
  transition:transform 1450ms var(--motion-ease-soft),filter 700ms var(--motion-ease-soft)!important;
}
.motion-enabled .hero-slide.is-active .hero-image{
  transform:scale(1.002);
}
.motion-enabled .hero-slide .hero-content .eyebrow,
.motion-enabled .hero-slide .hero-content h1,
.motion-enabled .hero-slide .hero-content .button{
  filter:none!important;
  transition:
    opacity 620ms var(--motion-ease-soft)!important;
}
.motion-enabled.motion-ready .hero-slide.is-active .hero-content .eyebrow{transition-delay:80ms!important}
.motion-enabled.motion-ready .hero-slide.is-active .hero-content h1{transition-delay:155ms!important}
.motion-enabled.motion-ready .hero-slide.is-active .hero-content .button{transition-delay:245ms!important}

/* Mobile hero copy retains its subtle vertical entrance, but without blur. */
.motion-enabled .m-hero-copy .m-eyebrow,
.motion-enabled .m-hero-copy h1,
.motion-enabled .m-hero-copy .button{
  filter:none!important;
  transform:translateY(8px);
  transition:
    opacity 600ms var(--motion-ease-soft),
    transform 720ms var(--motion-ease-soft)!important;
}
.motion-enabled.motion-ready .m-hero-copy.is-animated .m-eyebrow,
.motion-enabled.motion-ready .m-hero-copy.is-animated h1,
.motion-enabled.motion-ready .m-hero-copy.is-animated .button{
  transform:translateY(0);
}
.motion-enabled.motion-ready .m-hero-copy.is-animated .m-eyebrow{transition-delay:70ms!important}
.motion-enabled.motion-ready .m-hero-copy.is-animated h1{transition-delay:145ms!important}
.motion-enabled.motion-ready .m-hero-copy.is-animated .button{transition-delay:235ms!important}

.motion-enabled .m-hero-bg{
  transition:opacity 420ms var(--motion-ease-soft)!important;
  filter:none!important;
}
.motion-enabled .m-hero-bg.motion-swap{
  opacity:.34;
  filter:none!important;
}

/* Carousel snap: shorter and more natural than the old 820ms curve. */
.interiors-track,
.reviews-track{
  transition:transform 660ms var(--motion-snap)!important;
  backface-visibility:hidden;
}

@media (max-width:767px){
  .m-interior-row,
  .m-reviews-track{
    transition:transform 560ms var(--motion-snap)!important;
    backface-visibility:hidden;
  }

  .m-interiors,
  .m-reviews-viewport{
    touch-action:pan-y;
  }

  .m-benefit-scroll{
    overscroll-behavior-inline:contain;
    scroll-snap-stop:normal;
  }
}

@media (min-width:768px) and (max-width:1140px){
  .reviews-viewport{
    touch-action:pan-y;
  }
}

/* While the finger is moving the track must map 1:1 to the gesture.
   The transition returns only after release for the polished snap. */
.m-interior-row.is-dragging,
.reviews-track.is-dragging,
.m-reviews-track.is-dragging{
  transition:none!important;
  will-change:transform;
}

/* Loop recenter is strictly invisible. */
.m-interior-row.is-jumping,
.reviews-track.is-jumping,
.m-reviews-track.is-jumping{
  transition:none!important;
}

/* Progress indicators feel connected to the slide movement. */
.hero-top-progress,
.m-top-progress{
  transition:width 620ms var(--motion-snap)!important;
}
.hero-pagers button::after,
.bar-dots .is-active::after,
.bar-dots button.is-active::after,
.m-bar-dots .is-active::after,
.m-pagers .is-active::after{
  transition:width 440ms var(--motion-ease-soft)!important;
}

/* FAQ and modal motion: no geometry changes, only smoother temporal curves. */
.faq-toggle::before{
  transition:transform 420ms var(--motion-snap)!important;
}
.faq-item[open] p,
.m-faq details[open] p{
  animation:eoniksAnswerIn 420ms var(--motion-ease-soft) both;
}
@keyframes eoniksAnswerIn{
  from{opacity:0}
  to{opacity:1}
}

.modal.is-open .modal-backdrop{
  animation-duration:300ms!important;
}
.modal.is-open .image-modal-frame,
.modal.is-open .video-modal-frame,
.modal.is-open .review-modal-frame{
  animation-duration:480ms!important;
  animation-timing-function:var(--motion-ease-soft)!important;
}

/* Avoid leaving permanent GPU layers after entrance transitions. */
.motion-enabled .motion-reveal.is-revealed{
  will-change:auto;
}

@media (prefers-reduced-motion:reduce){
  .m-interior-row.is-dragging,
  .reviews-track.is-dragging,
  .m-reviews-track.is-dragging{
    transition:none!important;
  }
}

/* CMS v2: preserve original mobile social icon geometry after making icons clickable. */
.m-socials a{display:flex;align-items:center;justify-content:center;line-height:0}
.m-socials a:nth-child(1) img{width:20px;height:20px}
.m-socials a:nth-child(2) img{width:20px;height:20px}
.m-socials a:nth-child(3) img{width:24px;height:23px}
.m-socials a:nth-child(4) img{width:20px;height:20px}
.m-socials a:nth-child(5) img{width:20px;height:20px}
.m-socials a:nth-child(6) img{width:17px;height:18px}


/* ==========================================================================
   FIGMA TYPOGRAPHY — Comfortaa via Google Fonts
   ========================================================================== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-synthesis:none;
}
.hero-content .eyebrow,
.m-eyebrow,
.section-kicker,
.m-kicker,
.card-sub{
  font-family:'Comfortaa',sans-serif;
  font-style:normal;
  font-weight:400;
}
.hero-content .eyebrow strong,
.m-eyebrow strong{
  font-family:'Comfortaa',sans-serif;
  font-style:normal;
  font-weight:700;
}


/* ==========================================================================\n   EONIKS v2.1.0 — approved correction set\n   ========================================================================== */
html{scroll-behavior:smooth}

/* Hero: no loading strip / arrows; progress bars centered and fully filled. */
.hero-progress-line,.m-top-progress{display:none!important}
.hero-arrow,.m-hero-arrow{display:none!important}
.hero-pagers{left:50%!important;transform:translateX(-50%)!important}
.hero-pagers button.is-active::after{width:50px!important}
.bar-dots,.review-dots{left:50%!important;transform:translateX(-50%)!important}
.bar-dots .is-active::after,.bar-dots button.is-active::after{width:50px!important}
.m-pagers{left:50%!important;transform:translateX(-50%)!important}
.m-pagers .is-active::after{width:50px!important}
.m-bar-dots,.m-review-dots{left:50%!important;transform:translateX(-50%)!important}
.m-bar-dots span.is-active::after{width:50px!important}

/* Desktop contact menu is click-only. */
.phone-desktop:not(.is-open):hover .contact-popover,
.phone-desktop:not(.is-open):focus-within .contact-popover{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.phone-desktop.is-open .contact-popover{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.phone-desktop.is-open .phone-trigger img{transform:rotate(90deg)!important}

/* Interior cards: standard magnifier with plus. */
.interior-card .card-play,.m-interior-row .m-card-play{display:none!important}
.interior-card .image-open::before,
.m-interior-row .image-open::before{
  content:""!important;position:absolute!important;left:50%!important;top:50%!important;
  width:38px!important;height:38px!important;transform:translate(-50%,-50%)!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background:center/38px 38px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none'%3E%3Ccircle cx='16.5' cy='16.5' r='10.5' stroke='%23F2F2F2' stroke-width='2.2'/%3E%3Cpath d='M24.2 24.2L32 32' stroke='%23F2F2F2' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M16.5 11.5V21.5M11.5 16.5H21.5' stroke='%23F2F2F2' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  z-index:5!important;opacity:0;transition:opacity .25s ease!important
}
.interior-card .image-open::after,.m-interior-row .image-open::after{display:none!important;content:none!important}
.interior-card .image-open:hover::before,.interior-card .image-open:focus-visible::before,
.m-interior-row .image-open:hover::before,.m-interior-row .image-open:focus-visible::before{opacity:1!important}

/* Image lightbox navigation. */
.lightbox-nav{position:absolute;z-index:6;top:50%;width:48px;height:48px;transform:translateY(-50%);border:1px solid #f2f2f2;background:rgba(0,0,0,.35);color:#f2f2f2;font:32px/42px Arial,sans-serif;padding:0}
.lightbox-nav--prev{left:16px}.lightbox-nav--next{right:16px}

/* Standard close cross requested in corrections. */
.modal-close{background:transparent!important;padding:0!important}
.modal-close img{display:none!important}
.modal-close::before,.modal-close::after{content:"";position:absolute;left:12px;top:23px;width:24px;height:2px;background:#f2f2f2;border-radius:2px;transform-origin:center}
.modal-close::before{transform:rotate(45deg)}.modal-close::after{transform:rotate(-45deg)}

/* Fixed centered video play button; static sketch. */
.video-band .video-play{left:682px!important;top:425px!important;transform:none!important}
.m-video .m-video-play{left:146px!important;top:89px!important;transform:none!important}
.lead-visual-spin,.m-lead-image-spin{animation:none!important;transform:none!important;will-change:auto!important}

/* Keep raster/video output crisp on desktop compositing layers. */
.quality-image,.benefit img,.model-image-wrap>img,.interior-card button>img:first-child,.video-poster,
.m-quality>img,.m-benefit-scroll img,.m-model-img>img,.m-interior-row button>img:first-child{
  image-rendering:auto;filter:none!important;backface-visibility:hidden
}
#instructionVideo{filter:none!important;image-rendering:auto}

/* Google reCAPTCHA v2 checkbox: placed above submit button. */
.eoniks-captcha-slot{overflow:visible}
.lead-form .eoniks-captcha-slot{position:absolute;left:0;top:151px;width:205px;height:66px;z-index:4}
.eoniks-recaptcha{width:304px;min-height:78px;transform:scale(.68);transform-origin:left top}
.lead-form .button{top:228px!important}
.lead-form{height:290px!important}

/* Mobile consent is a real touch target. */
.m-lead>.m-privacy-check{position:relative!important;z-index:10!important;cursor:pointer!important;pointer-events:auto!important;touch-action:manipulation!important;user-select:none}
.m-lead>.m-privacy-check input{position:relative!important;z-index:11!important;pointer-events:auto!important;cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important;width:17px!important;height:17px!important;min-width:17px!important;border:1px solid #a4a4a4!important;border-radius:5px!important;background:#fff!important}
.m-lead>.m-privacy-check input:checked{background:#000!important;box-shadow:inset 0 0 0 4px #fff!important}
.m-lead>.m-privacy-check span{cursor:pointer!important;pointer-events:auto!important}
.m-lead>.eoniks-captcha-slot{position:relative!important;z-index:10!important;width:160px!important;height:52px!important;margin-top:8px!important;overflow:visible!important}
.m-lead>.eoniks-captcha-slot .eoniks-recaptcha{width:304px;min-height:78px;transform:scale(.52);transform-origin:left top}
.m-lead-btn{margin-top:10px!important}
.m-lead{height:706px!important}
.m-lead-image{top:386px!important}

/* Mobile hero crop/copy approved in preview. */
@media(max-width:767px){
  .m-hero-bg{object-position:center center!important}
  .m-hero-copy{left:10px!important;width:300px!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important}
  .m-hero-copy h1{width:300px!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
  .m-eyebrow{width:300px!important;text-align:center!important}
  .m-button-outline{align-self:center!important}
  .m-hero-line-nowrap{white-space:nowrap}
  .m-interior-row .image-open::before{opacity:1!important}
  .lightbox-nav{width:36px;height:36px;font-size:26px;line-height:30px}
  .lightbox-nav--prev{left:8px}.lightbox-nav--next{right:8px}
}

/* Privacy page: ordinary document flow, current header/footer unchanged. */
.eoniks-policy-page{background:var(--paper,#f2f2f2);color:#000;min-height:100vh}
.eoniks-policy-main{position:relative;width:100%;max-width:1440px;margin:0 auto;padding:88px 170px 72px;background:var(--paper,#f2f2f2)}
.eoniks-policy-inner{max-width:1100px}
.eoniks-policy-main h1{margin:0 0 30px;font-family:'Tilda Sans',Arial,sans-serif;font-size:32px;line-height:1.2;font-weight:600}
.eoniks-policy-main h2{margin:24px 0 10px;font-family:'Tilda Sans',Arial,sans-serif;font-size:20px;line-height:1.3;font-weight:500}
.eoniks-policy-main p,.eoniks-policy-main .policy-list{margin:0 0 10px;font-family:'Tilda Sans',Arial,sans-serif;font-size:16px;line-height:1.5;font-weight:400}
.eoniks-policy-main .policy-list{padding-left:22px}.eoniks-policy-main .policy-list li{margin:0 0 4px}
.eoniks-policy-page>.desktop-footer{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important}
.eoniks-policy-page>.m-footer{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important}
@media(min-width:768px) and (max-width:1140px){.eoniks-policy-main{padding:78px 40px 64px}}
@media(max-width:767px){
  .eoniks-policy-main{max-width:none;padding:58px 20px 42px}
  .eoniks-policy-main h1{font-size:20px;line-height:1.25;margin-bottom:22px}
  .eoniks-policy-main h2{font-size:16px;line-height:1.3;margin:20px 0 8px}
  .eoniks-policy-main p,.eoniks-policy-main .policy-list{font-size:12px;line-height:1.48;margin-bottom:9px}
  .eoniks-policy-main .policy-list{padding-left:17px}
  .eoniks-policy-page>.m-footer{display:block!important;position:relative!important;width:100vw!important;max-width:none!important;height:220px!important;left:50%!important;right:auto!important;margin-left:-50vw!important;margin-right:0!important;top:auto!important;bottom:auto!important;transform:none!important;background:#000!important;overflow:hidden!important}
  .eoniks-policy-page>.m-footer .m-footer-logo,.eoniks-policy-page>.m-footer .m-policy,.eoniks-policy-page>.m-footer .m-made-by{left:50%!important;transform:translateX(-50%)!important}
  .eoniks-policy-page>.m-footer .m-policy{white-space:nowrap!important}
  .eoniks-policy-page>.m-footer .m-footer-download{left:10px!important;width:calc(100vw - 20px)!important}
}


/* ==========================================================================
   v2.1.4 — adaptive image lightbox
   The modal frame follows the real aspect ratio of the current photo.
   JS writes pixel width/height after the image loads; CSS provides safe
   fallback behavior and smooth resizing between horizontal/vertical images.
   ========================================================================== */
.image-modal-frame{
  width:auto!important;
  height:auto!important;
  max-width:calc(100vw - 110px)!important;
  max-height:calc(100vh - 40px)!important;
  background:#111;
  transition:width .24s var(--motion-ease-soft),height .24s var(--motion-ease-soft);
}
#modalImage{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  background:#111;
}
@media(max-width:767px){
  .image-modal-frame{
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 116px)!important;
  }
  /* Keep the existing close button above the fitted photo. */
  #imageModal .modal-close{
    right:0!important;
    top:-48px!important;
  }
}
@supports not (height:100dvh){
  @media(max-width:767px){
    .image-modal-frame{max-height:calc(100vh - 116px)!important}
  }
}

.image-modal-frame.is-image-loading #modalImage{opacity:.001}
.image-modal-frame #modalImage{transition:opacity .14s ease}


/* ==========================================================================
   v2.1.5 — privacy footer, local country-house asset, hero focal points
   ========================================================================== */
/* Policy page is normal document flow. Force its footer to the viewport, not
   to the 1440px policy content box; this also prevents the cropped black bar. */
.eoniks-policy-page{width:100%!important;max-width:none!important;overflow-x:hidden!important}
.eoniks-policy-page .eoniks-policy-main{box-sizing:border-box!important}
@media(min-width:768px){
  .eoniks-policy-page>.desktop-footer{
    display:block!important;position:relative!important;left:0!important;right:auto!important;
    width:100%!important;min-width:100%!important;max-width:none!important;
    height:73px!important;min-height:73px!important;margin:0!important;transform:none!important;
    background:#000!important;overflow:hidden!important;box-sizing:border-box!important;
  }
}
@media(max-width:767px){
  .eoniks-policy-page>.m-footer{
    display:block!important;position:relative!important;left:0!important;right:auto!important;
    width:100%!important;max-width:none!important;height:220px!important;
    margin:0!important;transform:none!important;background:#000!important;overflow:hidden!important;
  }
  .eoniks-policy-page>.m-footer .m-footer-download{left:10px!important;width:calc(100% - 20px)!important}
}

/* Desktop hero: preserve cover composition but use a separate focal point for
   every source. These positions keep the wall panel in the visible crop. */
@media(min-width:768px){
  .hero-slide[data-slide="0"] .hero-image{object-position:50% 50%!important}
  .hero-slide[data-slide="1"] .hero-image{object-position:58% 50%!important}
  .hero-slide[data-slide="2"] .hero-image{object-position:62% 50%!important}
  .hero-slide[data-slide="3"] .hero-image{object-position:55% 50%!important}
}
/* Mobile hero uses the same four sources but needs tighter focal crops. */
@media(max-width:767px){
  .m-hero-bg{left:0!important;top:0!important;width:320px!important;height:439px!important;object-fit:cover!important}
  .m-hero-bg[data-hero-index="0"]{object-position:58% 50%!important}
  .m-hero-bg[data-hero-index="1"]{object-position:62% 50%!important}
  .m-hero-bg[data-hero-index="2"]{object-position:66% 50%!important}
  .m-hero-bg[data-hero-index="3"]{object-position:60% 50%!important}
}

/* v2.1.6 — interiors carousel loop correction only */
.interiors-track.is-jumping{transition:none!important}


/* v2.1.7 — targeted fixes: interiors image/dots/mobile loop + privacy footer */
@media (min-width:768px){
  .interiors .bar-dots{z-index:30!important;display:flex!important;visibility:visible!important;opacity:1!important;width:340px!important}
  .eoniks-policy-page>.m-footer{display:none!important}
}
@media (max-width:767px){
  .eoniks-policy-page>.desktop-footer{display:none!important}
}