/* Homepage opening only. The existing pages, navigation destinations and forms are unchanged. */
.home-refined .header{background:#060707;border-bottom:0}
.home-refined .header .nav-wrap{height:80px;width:calc(100% - 96px);max-width:1600px}
.home-refined .header .brand-full{position:relative;width:310px;height:76px;overflow:hidden;flex-shrink:0}
.home-refined .header .brand-full img{position:absolute;width:348px;max-width:none;height:auto;left:-24px;top:-18px;filter:brightness(1.4)}
.home-refined .menu-toggle,.home-refined .menu-toggle:hover,.home-refined .menu-toggle[aria-expanded="true"]{display:flex;width:50px;height:50px;padding:0;align-items:center;justify-content:center;border:0;border-radius:0;background:transparent;box-shadow:none;color:#eee}
.home-refined .menu-toggle .menu-icon{position:relative;display:block;width:32px;height:20px}
.home-refined .menu-icon i{position:absolute;right:0;height:2px;background:currentColor;border-radius:0;width:32px;transform-origin:center;transition:transform .2s}
.home-refined .menu-icon i:nth-child(1){top:3px}
.home-refined .menu-icon i:nth-child(2){display:none}
.home-refined .menu-icon i:nth-child(3){top:16px;width:32px}
.home-refined .menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.home-refined .menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.home-refined #main-nav{display:none;position:absolute;top:100%;right:0;left:auto;width:min(460px,100%);padding:28px 36px;background:#101111;border:1px solid #343636;flex-direction:column;align-items:stretch;gap:24px;font-size:15px;max-height:calc(100dvh - 81px);overflow:auto}
.home-refined #main-nav.open{display:flex}
.home-refined #main-nav .products-submenu{position:static;margin-top:16px;width:100%;box-shadow:none}
.home-refined .hero-phones{--phone-gutter:max(48px,calc((100vw - 1600px)/2));display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;isolation:isolate;height:calc(100svh - 81px);min-height:0;padding:32px var(--phone-gutter) max(32px,env(safe-area-inset-bottom,0px));overflow:hidden;background:#070808}
.hero-phones:before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(ellipse at 77% 46%,#45484870 0,#1b1e1e7a 33%,#080909 71%),linear-gradient(150deg,#070808 32%,#232626 56%,#070808 84%)}
.hero-phones:after{content:"";position:absolute;z-index:-1;inset:22% -20% -10%;background-image:url('/assets/homepage/dark-texture.svg');background-size:370px 370px;opacity:.32;transform:rotate(-22deg);mask-image:linear-gradient(transparent,#000 24%,#000 70%,transparent)}
.hero-phones .phone-hero-title{position:relative;z-index:4;pointer-events:none}
.hero-phones h1{margin:0;font:800 clamp(46px,5.6vw,94px)/1.02 Arial,Helvetica,sans-serif;letter-spacing:-.065em;color:#f7f7f7}
.hero-phones h1 span{color:#dedede}
.hero-phones h1{white-space:nowrap;text-transform:none}
.stationary-phones{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none;perspective:1600px}
.phone-frame{position:absolute;width:min(21vw,calc((100svh - 180px)/2.65),335px);aspect-ratio:71.6/147.6;margin:0;padding:0;border:2px solid #8b9090;border-radius:46px;background:linear-gradient(105deg,#535858 0,#050606 3%,#181b1b 5%,#030404 10%,#030404 91%,#686d6d 96%,#050606 98%);box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px #252929,inset 1px 0 0 5px #939a9a,5px 7px 0 #202424,8px 12px 0 #020303,10px 14px 0 #424747,13px 20px 4px #000,25px 32px 44px #000d;transform-origin:center;animation:none!important;transition:none!important}
.phone-frame:before{content:"";position:absolute;top:9px;left:calc(50% - 33px);width:66px;height:7px;border-radius:20px;background:#020303;box-shadow:inset 0 1px 3px #151b1b;z-index:4}
.phone-frame:after{content:"";position:absolute;top:9px;left:calc(50% + 43px);width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#1b3c50,#030505 75%);box-shadow:0 0 0 2px #020303;z-index:4}
.phone-spec{left:53%;top:7%;transform:rotate(15deg) rotateY(-7deg);z-index:2}
.phone-auto{left:75%;top:24%;transform:rotate(4deg) rotateY(-7deg);z-index:3}
.phone-screen{display:block;position:absolute;left:5%;top:50%;transform:translateY(-50%);width:90%;aspect-ratio:393/852;overflow:hidden;background:#030303;border-radius:27px;isolation:isolate;box-shadow:0 0 0 1px #000}
.phone-poster,.phone-video{display:block;position:absolute;inset:0;width:100%;height:auto;aspect-ratio:500/930;max-width:none;object-fit:contain;pointer-events:none}
.phone-poster{z-index:1;opacity:0;height:100%;aspect-ratio:393/852;object-fit:contain;object-position:center}
.hero-phones[data-still="true"] .phone-poster{opacity:1}.phone-video{z-index:2;opacity:0}.phone-video.is-playing{opacity:1}
.hero-phones .phone-hero-bottom{position:relative;z-index:5;max-width:580px}
.hero-phones .phone-hero-bottom p{font:500 clamp(20px,2.25vw,28px)/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.03em;color:#e8e8e6;margin:0 0 27px;white-space:nowrap}
.hero-phones .phone-hero-actions{display:flex;gap:12px}
.hero-phones .phone-hero-actions .button{min-height:58px;flex:1;gap:18px;padding:16px 22px;border-radius:8px;font-size:15px;letter-spacing:-.035em;white-space:nowrap;justify-content:space-between}
.hero-phones .phone-hero-actions .primary{background:#f8f8f7;color:#111;border:1px solid #fff}
.hero-phones .phone-hero-actions .slide-outline{background:#05060675;border:1.5px solid #d7d7d7;color:#f3f3f3}
.hero-phones .phone-hero-actions .button:hover{background:#ddd;color:#111}
.hero-phones[data-motion="paused"] .phone-video,.hero-phones[data-motion="stopped"] .phone-video{opacity:0}
@media(min-width:1650px){.phone-spec{left:53%;top:7%}.phone-auto{left:75%;top:24%}}
/* On narrow screens, reserve real rows for the headline and calls to action.
   Container-sized phones can only occupy the flexible middle row. */
@media(max-width:1100px){
 .home-refined .hero-phones{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;row-gap:12px;padding-top:12px;padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
 .hero-phones .phone-hero-title{grid-row:1}
 .hero-phones h1{font-size:clamp(46px,7.1vw,72px);line-height:1.02}
 .hero-phones .stationary-phones{position:relative;grid-row:2;inset:auto;width:100%;height:100%;min-height:0;container-type:size;overflow:visible;transform:none;perspective:1600px}
 .hero-phones .phone-frame{width:min(40cqw,37cqh);max-width:285px;padding:0;border-radius:36px}
 .hero-phones .phone-spec{left:calc(50% - min(40cqw,37cqh));top:6%}
 .hero-phones .phone-auto{left:50%;top:17%}
 .hero-phones .phone-hero-bottom{grid-row:3;max-width:580px;width:100%;justify-self:start}
 .hero-phones .phone-hero-bottom p{font-size:27px;margin-bottom:16px}
 .hero-phones .phone-hero-actions .button{font-size:13px;padding:14px 16px;min-height:54px}
}
@media(max-width:680px){
 .home-refined .header .nav-wrap{height:60px;width:calc(100% - 38px)}
 .home-refined .header .brand-full{width:176px;height:48px}
 .home-refined .header .brand-full img{width:199px;left:-14px;top:-8px}
 .home-refined .menu-toggle{width:44px;height:44px}
 .home-refined .menu-toggle .menu-icon{width:25px;height:17px}
 .home-refined .menu-icon i{width:25px;height:1.5px}
 .home-refined .menu-icon i:nth-child(1){top:3px}.home-refined .menu-icon i:nth-child(3){top:13px;width:25px}
 .home-refined .menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(1){transform:translateY(5px) rotate(45deg)}
 .home-refined .menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
 .home-refined #main-nav{max-height:calc(100dvh - 61px);padding:25px 22px}
 .home-refined .hero-phones{--phone-gutter:19px;height:calc(100svh - 61px);min-height:0;row-gap:10px;padding:8px max(19px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(19px,env(safe-area-inset-left,0px))}
 .hero-phones h1{font-size:clamp(32px,11vw,70px);line-height:1.02;letter-spacing:-.055em}
 .hero-phones:before{background:linear-gradient(180deg,#070808 0%,transparent 23%,transparent 73%,#050606 98%),radial-gradient(ellipse at 56% 47%,#424747 0,#242828 27%,#111414 51%,#050606 76%)}
 .hero-phones:after{inset:24% -35% 4%;background-size:255px 255px;opacity:.34;mask-image:linear-gradient(transparent,#000 18%,#000 78%,transparent)}
 .hero-phones .phone-frame{width:min(40cqw,37cqh);padding:0;border-width:1.5px;border-radius:25px;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #222727,inset 1px 0 0 3px #9da3a3,3px 4px 0 #252a2a,4px 7px 0 #020303,5px 8px 0 #3e4343,7px 12px 3px #000,15px 22px 30px #000d}
 .phone-frame:before{top:6px;left:calc(50% - 17px);width:34px;height:4px}
 .phone-frame:after{top:6px;left:calc(50% + 22px);width:4px;height:4px;box-shadow:0 0 0 1px #020303}
 .phone-screen{border-radius:17px}
 .hero-phones .phone-hero-bottom{max-width:none}
 .hero-phones .phone-hero-bottom p{font-size:clamp(14px,4.4vw,27px);line-height:1.19;letter-spacing:-.025em;margin-bottom:14px}
 .hero-phones .phone-hero-actions{gap:9px}
 .hero-phones .phone-hero-actions .button{font-size:clamp(13px,3.2vw,17px);min-height:48px;gap:7px;padding:12px 12px;border-radius:7px}
 .hero-phones .phone-hero-actions .line-arrow{width:20px;height:20px}
}
@media(max-width:360px){.hero-phones h1{font-size:11vw}.hero-phones .phone-hero-actions .button{font-size:13px;padding-inline:9px;gap:5px}}
@media(prefers-reduced-motion:reduce){.phone-poster{opacity:1}.phone-frame{animation:none!important;transition:none!important}}
@media(forced-colors:active){.phone-frame{border:2px solid CanvasText}.hero-phones .phone-hero-actions .button{border:1px solid ButtonText}}
/* The live document is the first visible screen; old posters are only still-mode fallbacks.
   Reserve its exact viewport before scripts run; scaling never changes the document layout. */
.phone-live-frame{position:absolute;inset:0;display:block;width:393px;height:852px;max-width:none;border:0;transform-origin:top left;z-index:3;opacity:0;pointer-events:none;background:#030303}
.phone-live-frame.is-live{opacity:1}
.phone-preview-label{position:absolute;left:50%;top:calc(100% + 14px);width:180%;transform:translateX(-50%);text-align:center;white-space:nowrap;color:#b8bdbc;font:500 9px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.01em}


/* Stationary masks reserve each phrase's final width while the text rises inside.
   Only transforms and opacity animate; the completed line stays centered and still.
   Readable by default, with an immediate final state for reduced motion or no JS. */
.hero-phones .phone-hero-bottom .phone-hero-tagline{text-align:center}
.phone-hero-tagline .tagline-phrase{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.phone-hero-tagline .tagline-reveal{display:inline-block}
.phone-hero-tagline .tagline-payoff{color:#f7f7f7;font-weight:600}
.phone-hero-tagline .tagline-underline{position:relative;display:inline-block}
.phone-hero-tagline .tagline-underline:after{content:"";position:absolute;left:0;right:0;bottom:.015em;height:1px;background:#bfc5c8;opacity:.8;transform-origin:left center}
@media(prefers-reduced-motion:no-preference){
 .phone-hero-tagline .tagline-reveal{animation:phoneTaglineRise .75s cubic-bezier(.22,1,.36,1) both}
 .phone-hero-tagline .tagline-payoff .tagline-reveal{animation-delay:1.07s}
 .phone-hero-tagline .tagline-underline:after{animation:phoneTaglineUnderline .7s cubic-bezier(.22,1,.36,1) 1.9s both}
}
@keyframes phoneTaglineRise{from{opacity:0;transform:translateY(.85em)}to{opacity:1;transform:translateY(0)}}
@keyframes phoneTaglineUnderline{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Failure-only fallback. Normal startup keeps the established live-first paint. */
html[data-hero-motion-failed="true"] .hero-phones .phone-poster,
.hero-phones .phone-frame.has-failed-frame .phone-poster{opacity:1;object-fit:contain}
html[data-hero-motion-failed="true"] .hero-phones .phone-live-frame,
.hero-phones .phone-frame.has-failed-frame .phone-live-frame{opacity:0}