/* generated from index.html by build-pages.mjs — do not edit */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0B1220;color:#F7F5F0;font-family:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#E8863A;text-decoration:none} a:hover{color:#F0A265}
img,svg{display:block;max-width:100%}
.d{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;letter-spacing:-0.02em;line-height:1}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1280px;margin:0 auto;padding:0 80px}
.eyebrow{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#8FB6DE;font-weight:500;display:flex;align-items:center;gap:10px}
.eyebrow svg{flex:0 0 auto}
.hexdot{width:10px;height:11px;flex:0 0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:100px;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:16px;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background .22s cubic-bezier(.16,1,.3,1),border-color .22s,color .22s,transform .22s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-1px)}
.btn-ember{background:#E8863A;color:#22160A;border-color:#E8863A} .btn-ember:hover{background:#F0A265;color:#22160A}
.btn-ghost{background:rgba(11,18,32,0.25);color:#F7F5F0;border-color:rgba(247,245,240,0.35);backdrop-filter:blur(6px)} .btn-ghost:hover{color:#F7F5F0;border-color:#F7F5F0}
.btn-ghost-dark{background:transparent;color:#0F2540;border-color:#C9C2B2} .btn-ghost-dark:hover{color:#0F2540;border-color:#0F2540}
.dataline{display:flex;flex-wrap:wrap;gap:12px 44px;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:15px;font-variant-numeric:tabular-nums}
.dataline b{color:#E8863A;font-weight:700} .dataline span{color:#8FB6DE;text-transform:uppercase;letter-spacing:0.08em;font-size:12px;margin-left:8px}
.dataline.on-paper b{color:#A3521B} .dataline.on-paper span{color:#5B6472}
.est{display:inline-block;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#A3521B;border:1px solid #E8C7AE;border-radius:2px;padding:2px 6px;margin-left:8px;vertical-align:middle;font-weight:500}
.est.dk{color:#E8863A;border-color:#5B3A1E}

/* ---------- header: transparent over the hero, solid once you scroll ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:76px;display:flex;align-items:center;transition:background .36s cubic-bezier(.16,1,.3,1),border-color .36s,backdrop-filter .36s;border-bottom:1px solid transparent}
.hdr.solid{background:rgba(11,18,32,0.86);backdrop-filter:blur(14px);border-bottom-color:#1E3556}
.hdr .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;gap:12px;color:#F7F5F0}
.nav{display:flex;align-items:center;gap:36px}
.nav a{color:#F7F5F0;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:6px;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:#E8863A;transition:right .28s cubic-bezier(.16,1,.3,1)}
.nav a:hover{color:#F7F5F0} .nav a:hover::after{right:0}
.hdr-right{display:flex;align-items:center;gap:22px}
.phone{color:#AFCBEA;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}

/* ---------- mega menu dropdowns ---------- */
.nav-item{position:static}
.nav-item > a{cursor:pointer}
.nav-item > a svg{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.nav-item.open > a{color:#F7F5F0} .nav-item.open > a::after{right:0} .nav-item.open > a svg{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:76px;background:#0B1220;border-top:1px solid #1E3556;border-bottom:1px solid #1E3556;box-shadow:0 40px 80px rgba(0,0,0,0.55);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .24s cubic-bezier(.16,1,.3,1),transform .24s cubic-bezier(.16,1,.3,1),visibility 0s linear .24s;pointer-events:none}
.nav-item.open .mega{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
.mega .wrap{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:clamp(20px,3.9vw,56px);padding-top:40px;padding-bottom:44px;align-items:start}
.mega h6{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#7CA2C7;font-weight:500;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #1E3556}
.mega ul{list-style:none;display:grid;gap:2px}
.mega li a{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;color:#F7F5F0;padding:8px 10px;margin:0 -10px;border-radius:4px;font-size:15px;font-weight:500;line-height:1.35;transition:background .18s}
.mega li a:hover{background:#0F2540;color:#F7F5F0}
.mega li a small{display:block;color:#7CA2C7;font-weight:400;font-size:13px;margin-top:2px}
.mega li a svg{margin-top:2px;flex:0 0 auto}
.mega .col{opacity:0;transform:translateY(10px);transition:opacity .36s cubic-bezier(.16,1,.3,1),transform .36s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 50ms)}
.nav-item.open .mega .col{opacity:1;transform:none}
.mega .feat{background:#0F2540;border:1px solid #1E3556;border-radius:4px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;min-height:260px;position:relative;overflow:hidden;color:#F7F5F0}
.mega .feat .k{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#E8863A;font-weight:500}
.mega .feat h3{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:26px;font-weight:500;letter-spacing:-0.02em;line-height:1.1;margin-top:12px;max-width:12em;color:#F7F5F0}
.mega .feat .go{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px;margin-top:22px;color:#E8863A}
.mega .feat .arr{position:absolute;right:-30px;top:-20px;width:240px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;transform:rotate(-12deg);opacity:0.5;pointer-events:none}
.mega .feat .arr i{display:block;aspect-ratio:1/1.6;background:linear-gradient(160deg,#1E3F6A,#0D2038);border:1px solid #2C5580;border-radius:2px}
.hdr.menu-open{background:#0B1220;border-bottom-color:#1E3556}
.mega-veil{position:fixed;inset:76px 0 0 0;background:rgba(11,18,32,0.55);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s;z-index:45;pointer-events:none}
.mega-veil.on{opacity:1;visibility:visible;transition-delay:0s}
@media (max-width: 699px){.mega,.mega-veil{display:none}}

/* ---------- mobile drawer ---------- */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:0;color:#F7F5F0;cursor:pointer;border-radius:50%}
.burger:hover{background:#0F2540}
.burger .x{display:none}
html.drawer-open .burger .x{display:block} html.drawer-open .burger .bars{display:none}
.phone-ico{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:#AFCBEA;border-radius:50%}
.drawer-veil{position:fixed;inset:0;background:rgba(5,9,15,0.6);opacity:0;visibility:hidden;transition:opacity .32s,visibility 0s linear .32s;z-index:58;backdrop-filter:blur(4px)}
html.drawer-open .drawer-veil{opacity:1;visibility:visible;transition-delay:0s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#0B1220;border-left:1px solid #1E3556;z-index:60;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .46s cubic-bezier(.16,1,.3,1);overflow-y:auto;-webkit-overflow-scrolling:touch}
html.drawer-open .drawer{transform:none}
html.drawer-open{overflow:hidden}
.drawer-head{height:76px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 24px;border-bottom:1px solid #1E3556}
.drawer-nav{padding:8px 24px 24px}
.dgroup{border-bottom:1px solid #1E3556}
.dgroup > button,.dgroup > a{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;padding:16px 0;background:transparent;border:0;color:#F7F5F0;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:24px;font-weight:500;letter-spacing:-0.02em;text-align:left;cursor:pointer}
.dgroup > button svg{transition:transform .28s cubic-bezier(.16,1,.3,1);flex:0 0 auto;color:#8FB6DE}
.dgroup.on > button svg{transform:rotate(180deg)}
.dgroup > a{color:#E8863A}
.dpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s cubic-bezier(.16,1,.3,1)}
.dgroup.on .dpanel{grid-template-rows:1fr}
.dpanel > div{overflow:hidden}
.dpanel h6{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#7CA2C7;font-weight:500;margin:6px 0 8px}
.dpanel ul{list-style:none;display:grid;gap:2px;margin-bottom:18px}
.dpanel li a{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;color:#F7F5F0;padding:10px 0;font-size:16px;font-weight:500;line-height:1.35;min-height:44px}
.dpanel li a small{display:block;color:#7CA2C7;font-weight:400;font-size:13px;margin-top:2px}
.dpanel li a svg{margin-top:2px}
.drawer-foot{margin-top:auto;padding:20px 24px 28px;border-top:1px solid #1E3556;display:grid;gap:12px}
.drawer-foot .row{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#AFCBEA;font-size:15px;font-weight:500}
html.js .drawer .dgroup,html.js .drawer .drawer-foot{opacity:0;transform:translateX(24px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 60ms + 120ms)}
html.js.drawer-open .drawer .dgroup,html.js.drawer-open .drawer .drawer-foot{opacity:1;transform:none}
@media (max-width: 1100px){.hdr-right{gap:12px} .hdr-right .btn,.hdr-right .lang{display:none !important} .phone-ico{display:flex} .nav{gap:22px}}
@media (max-width: 699px){.burger{display:flex} .hdr-right{gap:4px}}
@media (min-width: 700px){.drawer,.drawer-veil{display:none}}

.ln{display:block;overflow:hidden} .ln span{display:inline-block}
/* ---------- hero ---------- */
.hero-seq{background:#0B1220;position:relative;width:100%;z-index:1}
.hero{position:relative;width:100%;height:100vh;height:100svh;min-height:640px;padding-top:11.39vh;pointer-events:none;z-index:1}
.hero-title{position:relative;z-index:1;margin-left:4.86vw;width:90.28vw;padding-top:6.25vw;color:#F7F5F0}
.hero-title h1{font-size:8.19vw;font-weight:700;letter-spacing:-.055em;line-height:.83}
.hero-fixed{position:fixed;top:0;left:0;width:100%;height:100vh;height:100svh;display:flex;flex-direction:column;z-index:0;pointer-events:none}
.hero-fixed .pic{position:absolute;inset:0;z-index:0;transform-origin:50% 60%}
.hero-fixed .pic svg{width:100%;height:100%;display:block}
.edge-fade{position:absolute;left:0;right:0;top:calc(100svh - 125px);height:250px;width:100vw;background:linear-gradient(transparent,#0B1220 50%);z-index:1}
.hero-bottom{position:fixed;top:calc(100svh - 12.64vw);left:0;margin-left:4.86vw;width:90.28vw;height:12.64vw;display:flex;align-items:center;justify-content:space-between;z-index:2;pointer-events:none}
.hero-desc{color:#F7F5F0;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:1.53vw;font-weight:700;letter-spacing:-.015em;line-height:1.23;width:36.8vw}
.hero-arrow{width:4.17vw;min-width:32px;margin-top:-4.86vw;background:transparent;border:0;padding:0;cursor:pointer;pointer-events:auto;opacity:0;transition:opacity .6s ease 1.2s}
.hero.in .hero-arrow{opacity:1}
.hero-arrow svg{width:100%;height:auto;display:block;will-change:transform,opacity}
.hero-arrow:hover svg{animation:csArrow 1s cubic-bezier(.165,.84,.44,1) forwards}
.shot-brief{position:absolute;left:4.86vw;top:100px;z-index:2;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#7CA2C7;padding:8px 12px;border:1px dashed rgba(143,182,222,0.5);border-radius:2px;background:rgba(11,18,32,0.45)}
.after-hero{position:relative;z-index:2;background:#0B1220}
/* media motion in place of a hero video */
html.js .hero-fixed .pic{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07) translateY(-1.5%)}}
/* line-mask reveal timings on the hero */
html.js .hero-title .ln span,html.js .hero-desc .ln span{opacity:0;transform:translate3d(0,25%,0);transition:none}
html.js .hero-title.in .ln span,html.js .hero-desc.in .ln span{opacity:1;transform:none;transition:transform 1s cubic-bezier(.165,.84,.44,1) calc(.5s + var(--i,0) * .1s),opacity .2s ease calc(.5s + var(--i,0) * .1s)}
.hero-title .ln,.hero-desc .ln{overflow:visible}

/* photos */
.hero-fixed .pic img,.cs-img img,.cs-thumb .img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-fixed .pic img{object-position:50% 40%}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,18,32,.55) 0%,rgba(11,18,32,.15) 45%,rgba(11,18,32,.35) 100%)}
.hero-cover{position:absolute;inset:0;z-index:1;background:#0B1220;opacity:0;pointer-events:none;will-change:opacity}
.pres-product img{width:100%;height:auto;max-height:640px;object-fit:cover;border-radius:6.94vw 6.94vw 0 0;display:block}


@keyframes heroCover{0%{opacity:0}50%{opacity:.72}100%{opacity:1}}
@keyframes heroBottomOut{from{opacity:1}to{opacity:0}}
@supports (animation-timeline: scroll()){
  html.js .hero-bottom{animation:heroBottomOut linear both;animation-timeline:scroll(root);animation-range:0 60vh}
}
/* ---------- giant title in the fixed layer (rises on scroll, then stays as the backdrop) ---------- */
.hero-giant{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;transform:translateY(100vh);will-change:transform}
.hero-giant .d{font-size:11.5vw;font-weight:700;letter-spacing:-.05em;line-height:.95;text-align:center;white-space:nowrap;color:rgba(247,245,240,.12)}
@keyframes giantRise{from{transform:translateY(100vh)}to{transform:translateY(0)}}
@supports (animation-timeline: scroll()){ html.js .hero-giant{animation:giantRise linear both;animation-timeline:scroll(root);animation-range:0 120vh} }
.over-hero{position:relative;z-index:1}

/* ---------- fluid scale: 1rem = viewport width / 19.2 ---------- */
.over-hero,.hero-fixed{--srem:calc(100vw / 19.2);--sk-brand:#E8863A}
@media (max-width: 800px){ .over-hero,.hero-fixed{--srem:70px} }
@media (max-width: 550px){ .over-hero,.hero-fixed{--srem:calc(100vw / 7.5)} }
.over-hero .wal,.hero-fixed .wal{max-width:calc(var(--srem) * 17.2);width:100%;margin:0 auto}

/* ---------- page__intro (sizes copied: .16 / .48 / .72 / 8rem / 2.01rem) ---------- */
.page__intro{position:relative;z-index:1;overflow:hidden}
.page__intro::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:100%;max-width:calc(var(--srem) * 19.2);height:calc(var(--srem) * 5);background:radial-gradient(ellipse at 50% 0%,rgba(232,134,58,.28) 0%,rgba(44,111,187,.10) 40%,transparent 70%);pointer-events:none}
.page__intro .wal{padding-top:calc(var(--srem) * 2.01);padding-bottom:calc(var(--srem) * 2)}
.page__intro .info{position:relative;max-width:calc(var(--srem) * 12);margin:0 auto}
.sk-small-title{text-align:center;font-size:calc(var(--srem) * .16);line-height:calc(var(--srem) * .24);margin-bottom:calc(var(--srem) * .1);color:var(--sk-brand);text-transform:uppercase;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:500;letter-spacing:.04em}
.sk-section-title{font-size:calc(var(--srem) * .48);line-height:calc(var(--srem) * .72);font-weight:500;letter-spacing:-.01em;text-align:center;margin-top:calc(var(--srem) * .2);color:#F7F5F0}
.page__intro .context{max-width:calc(var(--srem) * 8);width:100%;margin:calc(var(--srem) * .24) auto 0;color:rgba(247,245,240,.8);font-size:calc(var(--srem) * .16);line-height:calc(var(--srem) * .24);text-align:center}
@media (max-width: 800px){
  .page__intro .wal{padding-top:calc(var(--srem) * 1.2);padding-bottom:calc(var(--srem) * 1.1)}
  .page__intro .info{max-width:100%}
  .page__intro .context{max-width:100%;font-size:calc(var(--srem) * .24);line-height:calc(var(--srem) * .36)}
  .sk-small-title{font-size:calc(var(--srem) * .24);line-height:calc(var(--srem) * .36)}
}
/* sk-animate-text: words start at 15% white, flash brand, settle white (their colorMap + stagger) */
.sk-animate-text ._w{display:inline-block;color:rgba(255,255,255,.15);will-change:color,transform}
.sk-animate-text.in ._w{animation:skWord .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(.25s + var(--i,0) * var(--stagger,.035s))}
@keyframes skWord{0%{color:rgba(255,255,255,.15)}50%{color:#E8863A}100%{color:#F7F5F0}}

/* ---------- page__scene (sizes copied: .2rem pads, 9.6rem height, .4/.48 title, .54rem button) ---------- */
.page__scene .wal{max-width:100%;padding:calc(var(--srem) * .2)}
.page__scene .-box{position:relative;width:100%;height:100%;border-radius:calc(var(--srem) * .2);overflow:hidden}
.page__scene .harness-block,.page__scene .enjoy-block{position:relative;width:100%;height:calc(var(--srem) * 9.6);z-index:2}
.page__scene .image-block{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:calc(var(--srem) * .2);overflow:hidden;will-change:transform;pointer-events:auto;z-index:-1;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.page__scene .slot-wrapper{width:100%;height:100%;will-change:transform;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.page__scene .img{position:relative;width:100%;height:100%;z-index:0}
.page__scene .img img,.page__scene .video-container img{width:100%;height:100%;object-fit:cover;display:block}
.page__scene .video-container{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1}
.page__scene .harness-block.active .video-container,.page__scene .enjoy-block.active .video-container{z-index:1}
.page__scene .info-block{display:flex;flex-direction:column;position:relative;pointer-events:none;width:50%;height:100%;padding:calc(var(--srem) * .6);color:#F7F5F0;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.page__scene .info-block .small-title{font-size:calc(var(--srem) * .16);line-height:calc(var(--srem) * .24);text-transform:uppercase;letter-spacing:.04em;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:500}
.page__scene .info-block .title{margin-top:calc(var(--srem) * .1);font-size:calc(var(--srem) * .4);line-height:calc(var(--srem) * .48);font-weight:500;letter-spacing:-.01em}
.page__scene .enjoy-block{position:absolute;left:0;top:0;z-index:3;width:100%;height:100%;pointer-events:none}
.page__scene .enjoy-block .info-block{margin-left:auto;text-align:right;align-items:flex-end}
.page__scene .btn-box{pointer-events:auto;position:absolute;left:0;bottom:calc(var(--srem) * .4);width:100%;text-align:center;z-index:1}
.page__scene .animate-btn{position:relative;display:inline-block}
.page__scene .rect-icon{position:absolute;left:50%;top:0;width:calc(var(--srem) * .54);height:calc(var(--srem) * .54);border-radius:calc(var(--srem) * .27);box-shadow:inset 0 0 calc(var(--srem) * .1) 0 rgba(232,134,58,.5);transform:translate(-50%,0) scale(.1);opacity:0;transition:transform .5s ease,opacity .5s ease,width .5s ease .3s}
.page__scene .active .rect-icon{transform:translate(-50%,0) scale(1);opacity:1;width:100%}
.sk-round-btn{--c-font:#F7F5F0;--c-background:rgba(255,255,255,.15);--min-width:calc(var(--srem) * 2);--height:calc(var(--srem) * .54);--padding:0 calc(var(--srem) * .71) 0 calc(var(--srem) * .28);--font-size:calc(var(--srem) * .16);--line-height:calc(var(--srem) * .24);--radius:calc(var(--srem) * .27);cursor:pointer;display:inline-block;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.page__scene .active .sk-round-btn{transform:scale(1);transition-delay:.3s}
.page__scene .active .animate-btn{animation:btnBounce 1.3s cubic-bezier(.34,1.56,.64,1)}
@keyframes btnBounce{0%{transform:translateY(0)}35%{transform:translateY(-40px)}100%{transform:translateY(0)}}
.sk-round-btn .btn-inner{display:inline-flex;position:relative;justify-content:center;align-items:center;min-width:var(--min-width);height:var(--height);padding:var(--padding);border-radius:var(--radius);background:var(--c-background);backdrop-filter:blur(8px);color:var(--c-font);font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:500}
.sk-round-btn .btn-text{font-size:var(--font-size);line-height:var(--line-height);color:var(--c-font);transition:.3s}
.sk-round-btn .btn-arrow{display:flex;position:absolute;top:calc(var(--srem) * .03);right:calc(var(--srem) * .03);width:calc(var(--srem) * .48);height:calc(var(--height) - var(--srem) * .06);border-radius:var(--radius);background:var(--sk-brand);transition:width .3s ease}
.sk-round-btn:hover .btn-arrow{width:calc(100% - var(--srem) * .06)}
.sk-round-btn .btn-arrow-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:transform .3s}
.sk-round-btn:hover .btn-arrow-inner{transform:rotate(90deg)}
.sk-round-btn .btn-arrow svg{width:calc(var(--srem) * .12);height:calc(var(--srem) * .12)}
@media (max-width: 800px){
  .page__scene .wal{padding:0 calc(var(--srem) * .3)}
  .page__scene .-box{height:auto;overflow:visible}
  .page__scene .harness-block,.page__scene .enjoy-block{position:relative;height:auto;padding:calc(var(--srem) * 4.95) 0 0;pointer-events:auto}
  .page__scene .enjoy-block{margin-top:calc(var(--srem) * .15)}
  .page__scene .image-block{top:calc(var(--srem) * .15);height:calc(var(--srem) * 4.8);transform:none !important}
  .page__scene .slot-wrapper{transform:none !important}
  .page__scene .video-container{z-index:1}
  .page__scene .info-block{width:100%;height:auto;padding:calc(var(--srem) * .3) 0 calc(var(--srem) * 1.4);transform:none !important;text-align:left;align-items:flex-start}
  .page__scene .info-block .small-title{font-size:calc(var(--srem) * .24);line-height:calc(var(--srem) * .36)}
  .page__scene .info-block .title{font-size:calc(var(--srem) * .48);line-height:calc(var(--srem) * .56)}
  .page__scene .btn-box{position:absolute;left:0;bottom:calc(var(--srem) * .3);padding:0 calc(var(--srem) * .3)}
  .page__scene .rect-icon{display:none}
  .sk-round-btn{--min-width:100%;--padding:0 calc(var(--srem) * .96) 0 calc(var(--srem) * .24);width:100%;transform:scale(1)}
  .hero-giant .d{font-size:14vw;white-space:normal}
}

/* ---------- hero reveal: photo fades out, intro pinned behind ---------- */
.hero-fixed .pic{z-index:2} .hero-veil{z-index:2}
.hero-giant{z-index:0;transform:none}
.hero-giant .d{color:rgba(247,245,240,.10)}
.intro-fixed{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;opacity:0;transform:translateY(40px)}
.intro-fixed .wal{padding-top:0 !important;padding-bottom:0 !important}
.intro-fixed .info{pointer-events:auto}
.intro-spacer{height:95vh;position:relative;z-index:0}
.over-hero{background:#0B1220}
@keyframes picFade{from{opacity:1}to{opacity:0}}
@keyframes giantIn{from{opacity:0}to{opacity:1}}
@keyframes introIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@supports (animation-timeline: scroll()){
  html.js .hero-fixed .pic img,html.js .hero-veil{animation:picFade linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  html.js .hero-giant{animation:giantIn linear both;animation-timeline:scroll(root);animation-range:20vh 100vh}
  html.js .intro-fixed{animation:introIn linear both;animation-timeline:scroll(root);animation-range:35vh 100vh}
}
html.no-js .intro-fixed,html:not(.js) .intro-fixed{opacity:1;transform:none}
/* bigger type for the intro (up from .16/.48/.16) */
.intro-fixed .sk-small-title{font-size:calc(var(--srem) * .2);line-height:calc(var(--srem) * .3);margin-bottom:calc(var(--srem) * .14)}
.intro-fixed .sk-section-title{font-size:calc(var(--srem) * .66);line-height:calc(var(--srem) * .78);margin-top:calc(var(--srem) * .2)}
.intro-fixed .context{max-width:calc(var(--srem) * 9.4);font-size:calc(var(--srem) * .2);line-height:calc(var(--srem) * .3);margin-top:calc(var(--srem) * .32)}
.intro-fixed .info{max-width:calc(var(--srem) * 13)}
/* scene: captions centered in each half, section gets its own top padding now that it leads the flow */
.page__scene{padding-top:calc(var(--srem) * .9)}
.page__scene .info-block{align-items:center;text-align:center;padding-top:calc(var(--srem) * .7)}
.page__scene .enjoy-block .info-block{text-align:center;align-items:center}
@media (max-width: 800px){
  .intro-fixed{position:relative;inset:auto;opacity:1;transform:none;animation:none !important;min-height:0;padding:calc(var(--srem) * 1.2) 0}
  .intro-spacer{display:none}
  .hero-fixed{height:auto;min-height:100svh}
  .intro-fixed .sk-section-title{font-size:calc(var(--srem) * .56);line-height:calc(var(--srem) * .68)}
  .intro-fixed .context{font-size:calc(var(--srem) * .24);line-height:calc(var(--srem) * .36)}
}

/* ---------- page__solution02: sizes on the fluid rem scale ---------- */
.page__solution02{--srem:calc(100vw / 19.2);--sk-brand:#E8863A;position:relative;z-index:1;height:380vh}
.page__solution02 .-container{position:sticky;top:0;width:100%;height:100vh;overflow:hidden;background:linear-gradient(to bottom,#05090F,#05090F,#0B1220)}
.page__solution02 .-container > .wal{position:relative;max-width:100%;height:100%;z-index:1}
.page__solution02 .-background .inner{max-width:calc(var(--srem) * 5.5);width:100%;height:calc(var(--srem) * 6.67);margin:calc(var(--srem) * 2.4) auto 0;position:relative}
.page__solution02 .-background .light{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 45%,rgba(232,134,58,.55) 0%,rgba(232,134,58,.22) 28%,rgba(44,111,187,.12) 50%,transparent 70%);opacity:0;transform:translate(0,70%) scale(3);will-change:transform,opacity;filter:blur(2px)}
.page__solution02 .-box{position:absolute;inset:0;padding:calc(var(--srem) * 1.4) 0 calc(var(--srem) * 1.2);height:100%;z-index:1}
.page__solution02 .text-box{position:relative;max-width:80%;margin:0 auto;font-size:calc(var(--srem) * .48);line-height:calc(var(--srem) * .72);font-weight:500;letter-spacing:-.01em;text-align:center;color:#F7F5F0;will-change:transform;z-index:2}
.page__solution02 .float-images{display:flex;position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;z-index:1}
.page__solution02 .card-box.-middle{position:absolute;left:0;top:0;width:100%;height:100%;padding:calc(var(--srem) * .1)}
.page__solution02 .card-box.-middle .inner{--progress:0;--baseRadius:calc(var(--srem) * .53);--translateX:0px;--translateY:0px;--scaleX:.2;--scaleY:.2;--finalScaleX:calc(var(--scaleX) + var(--progress) * (1 - var(--scaleX)));--finalScaleY:calc(var(--scaleY) + var(--progress) * (1 - var(--scaleY)));--finalTranslateX:calc(var(--translateX) * (1 - var(--progress)));--finalTranslateY:calc(var(--translateY) * (1 - var(--progress)));width:100%;height:100%;will-change:transform}
.page__solution02 .card-box.-middle .slot-wrapper{width:100%;height:100%;border-radius:calc(var(--baseRadius) * (1 - var(--progress)) + var(--srem) * .16 * var(--progress));overflow:hidden;transform:translate(var(--finalTranslateX),var(--finalTranslateY)) scale(var(--finalScaleX),var(--finalScaleY));transform-origin:center center;will-change:transform}
.page__solution02 .card-box.-middle .slot-wrapper .img{width:100%;height:100%;transform:scale(.2);border-radius:calc(var(--srem) * 1);overflow:hidden;will-change:transform}
.page__solution02 .card-box.-middle .slot-wrapper .img img{width:100%;height:100%;object-fit:cover;display:block}
.page__solution02 .float-slides{--progress:0;display:flex;align-items:flex-end;position:absolute;left:0;top:0;opacity:0;visibility:hidden;width:100%;height:100%;z-index:3;padding:calc(var(--srem) * .1);overflow:hidden}
.page__solution02 .float-slides .list{width:100%;height:100%}
.page__solution02 .float-slides ul{list-style:none;display:flex;flex-wrap:nowrap;height:100%;justify-content:center}
.page__solution02 .float-slides li .outer{display:inline-block;position:relative;aspect-ratio:1520/920;max-width:100%;height:calc(100vh - var(--srem) * .2);padding:calc(var(--srem) * .1)}
.page__solution02 .float-slides li .inner{position:relative;width:100%;height:100%;border-radius:calc(var(--srem) * .16);padding:calc(var(--srem) * .1);overflow:hidden;transform:translate(calc(var(--srem) * .32),0);will-change:transform}
.page__solution02 .float-slides li .inner .-background{position:absolute;inset:0}
.page__solution02 .float-slides li .inner .-background img{width:100%;height:100%;object-fit:cover;display:block}
.page__solution02 .float-slides .-count{display:inline-flex;position:absolute;right:calc(var(--srem) * .3);top:calc(var(--srem) * .3);padding:calc(var(--srem) * .05) calc(var(--srem) * .16);border-radius:calc(var(--srem) * .8);background:rgba(0,0,0,.2);backdrop-filter:blur(50px);z-index:1;font-size:calc(var(--srem) * .18);line-height:calc(var(--srem) * .27);color:rgba(255,255,255,.4);font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif}
.page__solution02 .float-slides .-count em{font-style:normal} .page__solution02 .float-slides .-count em.on{color:#fff}
.page__solution02 .float-slides .info{position:absolute;left:0;top:0;display:flex;flex-direction:column;width:100%;height:100%;padding:calc(var(--srem) * .4) calc(var(--srem) * .6);color:#F7F5F0;background:linear-gradient(180deg,rgba(5,9,15,.25),rgba(5,9,15,0) 35%,rgba(5,9,15,0) 60%,rgba(5,9,15,.55))}
.page__solution02 .top-info .name{font-size:calc(var(--srem) * .4);line-height:calc(var(--srem) * .48);font-weight:500;letter-spacing:-.01em}
.page__solution02 .top-info .sub-title{margin-top:calc(var(--srem) * .1);font-size:calc(var(--srem) * .16);line-height:calc(var(--srem) * .24);text-transform:uppercase;letter-spacing:.04em;color:var(--sk-brand);font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:500}
.page__solution02 .bottom-info{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;gap:calc(var(--srem) * .4)}
.page__solution02 .bottom-info .context{max-width:calc(var(--srem) * 5.4);width:100%;font-size:calc(var(--srem) * .16);line-height:calc(var(--srem) * .24);color:rgba(255,255,255,.8)}
.page__solution02 .bottom-info .btn-box{margin-top:auto}
.page__solution02 .sk-round-btn{transform:scale(1)}
@media (max-width: 800px){
  .page__solution02{--srem:70px;height:auto}
  .page__solution02 .-container{position:relative;height:auto;overflow:visible}
  .page__solution02 .-background{display:none}
  .page__solution02 .-box{position:relative;padding:calc(var(--srem) * 1.2) 0 0;height:auto}
  .page__solution02 .text-box{max-width:100%;margin-bottom:calc(var(--srem) * .64);padding:0 calc(var(--srem) * .3);transform:none !important}
  .page__solution02 .text-box br{display:none}
  .page__solution02 .float-images{display:none}
  .page__solution02 .float-slides{position:relative;opacity:1;visibility:visible;height:auto;padding:0 calc(var(--srem) * .3) calc(var(--srem) * 1)}
  .page__solution02 .float-slides ul{flex-wrap:wrap;height:auto}
  .page__solution02 .float-slides li{width:100%}
  .page__solution02 .float-slides li .outer{display:block;aspect-ratio:auto;height:auto;width:100%;padding:0}
  .page__solution02 .float-slides li .inner{transform:none !important;padding:0;overflow:visible}
  .page__solution02 .float-slides li .inner .-background{position:static;height:calc(var(--srem) * 4.17);border-radius:calc(var(--srem) * .24);overflow:hidden}
  .page__solution02 .float-slides .-count{display:none}
  .page__solution02 .float-slides .info{position:static;padding:calc(var(--srem) * .3) 0 0;background:none}
  .page__solution02 .top-info{display:flex;flex-direction:column-reverse}
  .page__solution02 .top-info .name{text-align:center}
  .page__solution02 .top-info .sub-title{margin:0 0 calc(var(--srem) * .2);text-align:center}
  .page__solution02 .bottom-info{flex-direction:column;align-items:stretch;margin-top:calc(var(--srem) * .24)}
  .page__solution02 .bottom-info .context{max-width:100%;text-align:center;font-size:calc(var(--srem) * .24);line-height:calc(var(--srem) * .36)}
  .page__solution02 .bottom-info .btn-box{margin-top:calc(var(--srem) * .48);text-align:center}
}
@media (max-width: 550px){ .page__solution02{--srem:calc(100vw / 7.5)} }

/* page__scene now sits before the footer as its own section */
.page__scene{--srem:calc(100vw / 19.2);--sk-brand:#E8863A;position:relative;background:#0B1220;padding:calc(var(--srem) * 1.2) 0 calc(var(--srem) * .6)}
@media (max-width: 800px){ .page__scene{--srem:70px} }
@media (max-width: 550px){ .page__scene{--srem:calc(100vw / 7.5)} }
.page__scene .info-block{align-items:center;text-align:center;padding-top:calc(var(--srem) * .7)}
.page__scene .enjoy-block .info-block{text-align:center;align-items:center}
/* solution02: the slide card matches the grown middle card exactly (no width step), and the house is never cropped at the bottom */
.page__solution02 .float-slides ul{justify-content:flex-start}
.page__solution02 .float-slides li{width:100%;height:100%}
.page__solution02 .float-slides li .outer{display:block;width:100%;height:100%;aspect-ratio:auto;padding:0}
.page__solution02 .float-slides li .inner{padding:0;border-radius:calc(var(--srem) * .16)}
.page__solution02 .float-slides li .inner .-background img,.page__solution02 .card-box.-middle .slot-wrapper .img img{object-position:50% 68%}
@media (max-width: 800px){
  .page__solution02 .float-slides li .inner .-background{height:auto;aspect-ratio:3760/1840}
}

/* ---------- v2x__future / charging__scene__section, sizes on the fluid rem scale ---------- */
.v2x__future{--srem:calc(100vw / 19.2);--sk-brand:#E8863A;position:relative;background:#0B1220;padding:calc(var(--srem) * 1.2) 0 calc(var(--srem) * 1.2)}
@media (max-width: 800px){ .v2x__future{--srem:70px} }
@media (max-width: 550px){ .v2x__future{--srem:calc(100vw / 7.5)} }
.v2x__future .wal{max-width:calc(var(--srem) * 17.2);width:100%;margin:0 auto}
.v2x__future .-head{text-align:center;max-width:calc(var(--srem) * 12);margin:0 auto calc(var(--srem) * .64)}
.v2x__future .-head .sk-section-title{margin-top:0}
.v2x__future .context-block{margin-top:calc(var(--srem) * .24);font-size:calc(var(--srem) * .16);line-height:calc(var(--srem) * .24);color:rgba(255,255,255,.8)}
.v2x__future .-head .btn-box{margin-top:calc(var(--srem) * .24)}
.sk-arrow-btn{--c-font:#F7F5F0;--font-size:calc(var(--srem) * .16);--line-height:calc(var(--srem) * .24);--arrow-size:calc(var(--srem) * .12);display:inline-block}
.sk-arrow-btn.c-brand{--c-font:var(--sk-brand)}
.sk-arrow-btn .btn-inner{cursor:pointer;display:inline-flex;position:relative;align-items:center;color:var(--c-font);font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:500}
.sk-arrow-btn .btn-text{font-size:var(--font-size);line-height:var(--line-height)}
.sk-arrow-btn .btn-arrow{display:flex;margin-left:calc(var(--srem) * .07)}
.sk-arrow-btn .btn-arrow svg{width:var(--arrow-size);height:var(--arrow-size)}
.sk-arrow-btn:hover .btn-arrow{animation:translateReturn .5s ease-out}
@keyframes translateReturn{0%{transform:translate(0,0)}50%{transform:translate(60%,-60%);opacity:0}51%{transform:translate(-60%,60%);opacity:0}100%{transform:translate(0,0);opacity:1}}
.charging__scene__section{height:calc(var(--srem) * 9.6);padding:0 calc(var(--srem) * .2);z-index:1;position:relative}
.charging__scene__section .wrapper_box{position:relative;height:100%;border-radius:calc(var(--srem) * .2);overflow:hidden;z-index:1;background:#05090F}
.charging__scene__section .-background{position:absolute;inset:0;opacity:0;z-index:0;transition:opacity .5s ease}
.charging__scene__section .-background.show{opacity:1;z-index:1}
.charging__scene__section .-background img{width:100%;height:100%;object-fit:cover;display:block}
.charging__scene__section .-background .card-list{position:absolute;inset:0;pointer-events:none}
.charging__scene__section .card_wrapper{position:absolute;z-index:3;height:0;width:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.charging__scene__section .-background.show .card_wrapper{opacity:1;transform:none}
.charging__scene__section .-background.show .card_wrapper:nth-child(2){transition-delay:.15s}
.charging__scene__section .card-box{flex-shrink:0;width:calc(var(--srem) * 2.01);padding:calc(var(--srem) * .13) calc(var(--srem) * .16) calc(var(--srem) * .15);background:rgba(36,42,54,.5);backdrop-filter:blur(50px);border-radius:calc(var(--srem) * .16);color:#F7F5F0}
.charging__scene__section .card-box .title{font-size:calc(var(--srem) * .18);line-height:calc(var(--srem) * .27);font-weight:500}
.charging__scene__section .card-box .text{margin-top:calc(var(--srem) * .05);font-size:calc(var(--srem) * .14);line-height:calc(var(--srem) * .21);color:rgba(255,255,255,.8)}
.charging__scene__section .function__description__nav__wrapper{position:absolute;z-index:2;left:50%;bottom:calc(var(--srem) * .4);transform:translateX(-50%)}
.function__description__nav__wrapper{box-shadow:inset 0 0 calc(var(--srem) * .1) 0 rgba(232,134,58,.5);padding:calc(var(--srem) * .03);border-radius:calc(var(--srem) * .27);width:max-content;height:calc(var(--srem) * .54);margin:0 auto;background:rgba(255,255,255,.15);backdrop-filter:blur(50px)}
.function__description-nav-inner{position:relative;height:100%}
.function__description-nav-list{height:100%;display:flex}
.function__description-nav-item{min-width:calc(var(--srem) * 1);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 calc(var(--srem) * .24);color:rgba(255,255,255,.4);font-size:calc(var(--srem) * .16);line-height:calc(var(--srem) * .24);transition:.3s;user-select:none;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:500}
.function__description-nav-item.active,.function__description-nav-item:hover{color:#fff}
.function__description-nav-color-backgroud{position:absolute;z-index:-1;top:50%;height:100%;width:calc(var(--srem) * 1);border-radius:calc(var(--srem) * .24);transform:translate(0,-50%);transition:.3s;background:var(--sk-brand)}
@media (max-width: 800px){
  .v2x__future .-head{max-width:100%;padding:0 calc(var(--srem) * .3)}
  .v2x__future .context-block{font-size:calc(var(--srem) * .24);line-height:calc(var(--srem) * .36)}
  .v2x__future .context-block br{display:none}
  .sk-arrow-btn{--font-size:calc(var(--srem) * .24);--line-height:calc(var(--srem) * .36);--arrow-size:calc(var(--srem) * .18)}
  .charging__scene__section{padding:0 calc(var(--srem) * .3);height:auto;display:flex;flex-direction:column-reverse}
  .charging__scene__section .wrapper_box{border-radius:calc(var(--srem) * .24);height:calc(var(--srem) * 9.6)}
  .charging__scene__section .function__description__nav__wrapper{position:static;transform:none;margin:calc(var(--srem) * .6) auto 0;padding:calc(var(--srem) * .04);border-radius:calc(var(--srem) * .9);height:calc(var(--srem) * .9)}
  .function__description-nav-item{min-width:calc(var(--srem) * 2.4);font-size:calc(var(--srem) * .24);line-height:calc(var(--srem) * .36);padding:0 calc(var(--srem) * .29)}
  .function__description-nav-color-backgroud{border-radius:calc(var(--srem) * .9)}
  .charging__scene__section .-background .card-list{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);inset:auto;width:calc(var(--srem) * 3);background:rgba(36,42,54,.5);border-radius:calc(var(--srem) * .16);backdrop-filter:blur(50px)}
  .charging__scene__section .card_wrapper{position:static;height:auto;width:auto;transform:none !important}
  .charging__scene__section .card-box{width:100%;background:transparent;backdrop-filter:none;padding:calc(var(--srem) * .2) calc(var(--srem) * .2) calc(var(--srem) * .24);position:relative}
  .charging__scene__section .card-box::before{content:"";position:absolute;bottom:0;left:calc(var(--srem) * .2);width:calc(100% - var(--srem) * .4);height:1px;background:rgba(255,255,255,.15)}
  .charging__scene__section .card_wrapper:last-child .card-box::before{display:none}
  .charging__scene__section .card-box .title{font-size:calc(var(--srem) * .26);line-height:calc(var(--srem) * .39)}
  .charging__scene__section .card-box .text{font-size:calc(var(--srem) * .22);line-height:calc(var(--srem) * .33)}
}

/* ---------- pinned system: house stays, steps scroll ---------- */
.system{position:relative;background:#F7F5F0;color:#0B1220}
.system .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start}
.system .pin{position:sticky;top:96px;height:calc(100vh - 120px);min-height:620px;display:flex;align-items:center}
.system .steps{padding:18vh 0 10vh}
.system .stepblk{min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;border-top:1px solid #D8D3C6}
.system .stepblk:first-child{border-top:none}
.system .stepblk .k{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:#A3521B;font-weight:500;font-variant-numeric:tabular-nums;transition:color .3s}
.system .stepblk h3{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:44px;font-weight:500;letter-spacing:-0.03em;line-height:1.02;margin-top:14px;color:#8B93A0;transition:color .4s cubic-bezier(.16,1,.3,1)}
.system .stepblk p{font-size:17px;color:#5B6472;margin-top:16px;max-width:30em;opacity:.55;transition:opacity .4s}
.system .stepblk .meta{margin-top:18px;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:14px;color:#5B6472;font-variant-numeric:tabular-nums}
.system .stepblk.on h3{color:#0B1220} .system .stepblk.on p{opacity:1}
/* photo house with hotspot callouts */
.system .pin .house{position:relative;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#0B1220;box-shadow:0 40px 80px -30px rgba(15,37,64,.45)}
.system .pin .house img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%;display:block}
.house-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,.15) 0%,rgba(11,18,32,0) 40%,rgba(11,18,32,.35) 100%)}
.house .glow{position:absolute;width:26%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(232,134,58,.55) 0%,rgba(232,134,58,.18) 40%,rgba(232,134,58,0) 70%);opacity:0;transition:opacity .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.house .co{position:absolute;display:flex;align-items:center;gap:10px;transform:translate(-50%,-50%);opacity:.55;transition:opacity .4s cubic-bezier(.16,1,.3,1)}
.house .co.flip{flex-direction:row-reverse}
.house .co .dot{width:14px;height:14px;border-radius:50%;background:#E8863A;box-shadow:0 0 0 3px rgba(247,245,240,.9);position:relative;flex:0 0 auto}
.house .co .dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(232,134,58,.6);opacity:0}
.house .co .pill{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:#0F2540;background:rgba(247,245,240,.92);border:1px solid rgba(15,37,64,.18);border-radius:100px;padding:6px 12px;white-space:nowrap;backdrop-filter:blur(6px);transition:background .3s,color .3s}
.house[data-active="1"] .co-1,.house[data-active="2"] .co-2,.house[data-active="3"] .co-3,.house[data-active="4"] .co-4{opacity:1}
.house[data-active="1"] .co-1 .pill,.house[data-active="2"] .co-2 .pill,.house[data-active="3"] .co-3 .pill,.house[data-active="4"] .co-4 .pill{background:#0F2540;color:#F7F5F0;border-color:#0F2540}
.house[data-active="1"] .co-1 .dot::after,.house[data-active="2"] .co-2 .dot::after,.house[data-active="3"] .co-3 .dot::after,.house[data-active="4"] .co-4 .dot::after{animation:pulse 1.8s cubic-bezier(.16,1,.3,1) infinite}
.house[data-active="1"] .g-1,.house[data-active="2"] .g-2,.house[data-active="3"] .g-3,.house[data-active="4"] .g-4{opacity:1}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
/* ---------- full-bleed band: apagón ---------- */
.band{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden}
.band .pic{position:absolute;inset:-10% 0;will-change:transform}
.band .pic svg{width:100%;height:100%}
.band .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,18,32,0.9) 0%,rgba(11,18,32,0.55) 50%,rgba(11,18,32,0.1) 100%)}
.band .wrap{position:relative;padding-top:120px;padding-bottom:120px}
.band h2{font-size:clamp(48px,5.6vw,84px);font-weight:500;letter-spacing:-0.035em;line-height:0.98;max-width:12em}
.band p{font-size:19px;color:#DCEBF9;max-width:30em;margin-top:28px}
.band .dataline{margin-top:36px}

/* ---------- soluciones: intro (cream) ---------- */
.cs-intro{background:#F7F5F0;color:#0B1220;height:100vh;min-height:720px;overflow:hidden;position:relative;padding-top:24vh;text-align:center}
.cs-lines{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.12;pointer-events:none}
.cs-intro-in{position:relative}
.cs-intro .line{display:block;width:100%;text-align:center;margin:0 auto;padding:0 3vw;font-size:min(20vh,9.2vw);font-weight:700;letter-spacing:-.055em;line-height:.92;color:#0F2540;opacity:0;transform:translate3d(0,25%,0);white-space:nowrap}
.cs-intro.in .line{opacity:1;transform:none;transition:transform 1.6s cubic-bezier(.165,.84,.44,1),opacity .3s ease}
.cs-intro.in .line:nth-child(2){transition-delay:.12s}
.cs-thumbs{list-style:none;display:flex;justify-content:center;gap:.9vw;margin-top:6.6vh;height:15.5vh}
.cs-thumb{width:13.3vh;cursor:pointer;opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .9s cubic-bezier(.165,.84,.44,1);transition-delay:calc(.35s + var(--i,0) * 70ms)}
.cs-intro.in .cs-thumb{opacity:1;transform:none}
.cs-thumb .mask{height:13.3vh;overflow:hidden;background:#EFEBE2;border-radius:2px}
.cs-thumb .img{height:100%;width:100%;transition:transform 1s cubic-bezier(.165,.84,.44,1)} .cs-thumb .img svg{width:100%;height:100%;display:block}
.cs-thumb:hover .img{transform:scale(1.1)}
.cs-thumb .n{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:max(1.33vh,12px);font-weight:700;letter-spacing:-.035em;margin-top:.6vh;color:#0F2540;text-align:left}
.cs-arrow{position:absolute;left:90.97vw;bottom:7.2vh;width:4.17vw;min-width:36px;background:transparent;border:0;cursor:pointer;padding:0}
.cs-arrow svg{width:100%;display:block;will-change:transform,opacity}
.cs-arrow:hover svg{animation:csArrow 1s cubic-bezier(.165,.84,.44,1) forwards}
@keyframes csArrow{0%{transform:translateY(0);opacity:1}45%{transform:translateY(120%);opacity:0}50%{transform:translateY(-120%);opacity:0}100%{transform:translateY(0);opacity:1}}

/* ---------- soluciones: sticky case studies ---------- */
.cs{background:#05090F;position:relative;width:100%;min-height:100vh;clip-path:inset(0 0 0 0)}
.cs-sticky{position:sticky;top:0;left:0;height:100vh;width:100%;overflow:hidden}
.cs-sticky::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:13.9vw;background:linear-gradient(0deg,rgba(5,9,15,.75),rgba(5,9,15,0));z-index:1;pointer-events:none}
.cs-list,.cs-item{position:absolute;top:0;left:0;width:100%;height:100%}
.cs-item{pointer-events:none;will-change:opacity}
.cs-item.isCurrent{pointer-events:all}
.cs-leave{height:100%;width:100%;overflow:hidden;will-change:transform;backface-visibility:hidden}
.cs-enter{height:100%;width:100%;overflow:hidden;border-radius:6.94vw 6.94vw 0 0;will-change:transform}
.cs-item:first-child .cs-enter{border-radius:0}
.cs-enter-rev,.cs-img{height:100%;width:100%;will-change:transform}
.cs-img{position:absolute;top:0;left:0} .cs-img svg{width:100%;height:100%;display:block}
.cs-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,15,.55) 0%,rgba(5,9,15,.15) 40%,rgba(5,9,15,0) 60%,rgba(5,9,15,.35) 100%);pointer-events:none}
.cs-infos{position:absolute;left:4.86vw;top:5.56vw;width:36.8vw;color:#0B1220;z-index:1}
.cs-infos.isWhite{color:#F7F5F0}
.cs-catch{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:4.72vw;font-weight:700;letter-spacing:-.05em;line-height:1.07;margin-bottom:2.08vw}
.cs-catch .lm{display:block;opacity:0;transform:translate3d(0,25%,0);transition:transform 0s .4s,opacity .3s ease 0s}
.cs-catch .lm:nth-child(2){transition:transform 0s .4s,opacity .3s ease .1s}
.cs-item.isCurrent .cs-catch .lm{opacity:1;transform:none;transition:transform .3s ease,opacity .3s ease;transition-delay:.2s}
.cs-item.isCurrent .cs-catch .lm:nth-child(2){transition-delay:.275s}
.cs-cta{display:inline-flex;align-items:center;gap:.6vw;color:inherit;opacity:0;transition:opacity .6s ease;will-change:opacity;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:1.53vw;letter-spacing:-.015em}
.cs-item.isCurrent .cs-cta{opacity:1;transition:opacity .6s ease .6s}
.cs-cta-arrow{width:1.18vw;min-width:14px;transition:transform .6s cubic-bezier(.165,.84,.44,1)}
.cs-cta:hover .cs-cta-arrow{transform:translateX(-.4vw)}
.cs-cta-label{position:relative}
.cs-cta-label::before{content:"";position:absolute;left:0;bottom:-.1vw;width:100%;height:.14vw;min-height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.38,.32,.36,.98)}
.cs-cta:hover .cs-cta-label::before{transform:scaleX(1);transform-origin:left;transition-delay:.1s}
.cs-chapters{position:absolute;left:4.86vw;bottom:3.2vw;width:82.6vw;display:flex;gap:.35vw;z-index:2;color:#F7F5F0;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:1.1vw}
.cs-chapter{flex-grow:1;cursor:pointer;position:relative;padding-bottom:2.08vw;display:flex;gap:.35vw;transition:flex-grow .9s cubic-bezier(.77,0,.175,1)}
.cs-chapter::before,.cs-chapter::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:.21vw;min-height:2px;background:rgba(247,245,240,.35)}
.cs-chapter::after{background:#E8863A;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.77,0,.175,1);will-change:transform}
.cs-chapter.isCurrent::after,.cs-chapter:hover::after{transform:none}
.cs-chapter.isCurrent{flex-grow:2}
.cs-chapter .ci,.cs-chapter .cl{opacity:.4;transition:opacity .9s cubic-bezier(.165,.84,.44,1)}
.cs-chapter.isCurrent .ci,.cs-chapter.isCurrent .cl{opacity:1}
@media (max-width: 699px){ .nav{display:none} }
@media (max-width: 1100px){
  .cs-intro{padding-top:20vh;min-height:0}
  .cs-intro .line{font-size:min(9vh,9.2vw)}
  .cs-thumbs{height:11.6vh;gap:1.6vw} .cs-thumb{width:9.4vh} .cs-thumb .mask{height:9.4vh}
  .cs-arrow{left:auto;right:28px;width:36px}
  .cs-infos{left:28px;top:auto;bottom:22vw;width:calc(100% - 56px)}
  .cs-catch{font-size:11.6vw;letter-spacing:-.055em;line-height:.97;margin-bottom:5.8vw}
  .cs-cta{font-size:4.2vw;gap:2vw} .cs-cta-arrow{width:3.7vw}
  .cs-chapters{left:28px;bottom:6vw;width:calc(100% - 56px);font-size:3.4vw;gap:1.4vw}
  .cs-chapter{padding-bottom:4.65vw} .cs-chapter .cl{display:none} .cs-chapter.isCurrent .cl{display:inline}
}

/* ---------- calculator preview ---------- */
.calc{background:#F7F5F0;color:#0B1220;padding:160px 0}
.calc .wrap{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.calc h2{font-size:64px;font-weight:500;letter-spacing:-0.035em;line-height:0.98;margin-top:20px;color:#0B1220}
.calc .lead{font-size:18px;color:#5B6472;margin-top:28px;max-width:32em}
.calc .filecard{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#FFFFFF;border:1px solid #D8D3C6;border-radius:4px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:10px 16px;border-radius:100px;border:1px solid #D8D3C6;color:#0F2540;font-size:14px;font-weight:500;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif}
.chip.on{border-color:#0F2540;background:#0F2540;color:#F7F5F0}
.chip.warm{border-color:#E8863A;background:#FCEADA;color:#A3521B}
.panelcard{background:#FFFFFF;border:1px solid #D8D3C6;border-radius:4px;padding:40px;box-shadow:0 40px 80px -40px rgba(15,37,64,0.25)}
.readout{display:grid;grid-template-columns:1fr auto;border-top:1px solid #D8D3C6}
.readout div{padding:16px 0;border-bottom:1px solid #D8D3C6;font-size:15px;color:#5B6472}
.readout div.v{text-align:right;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:18px;color:#0B1220;font-variant-numeric:tabular-nums}
.pv{display:grid;grid-template-columns:repeat(9,22px);gap:4px;margin:20px 0 32px}
.pv i{display:block;aspect-ratio:1/1.6;background:#E8863A;border-radius:2px}

/* ---------- how: oversized numerals ---------- */
.how{padding:180px 0 120px}
.how .head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:56px}
.how h2{font-size:72px;font-weight:500;letter-spacing:-0.035em;line-height:0.98;margin-top:18px}
.step{display:grid;grid-template-columns:220px 1fr;gap:40px;padding:52px 0;border-top:1px solid #1E3556;align-items:start}
.step:last-child{border-bottom:1px solid #1E3556}
.step .n{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:128px;font-weight:700;letter-spacing:-0.05em;line-height:0.85;color:#153A63;font-variant-numeric:tabular-nums}
.step h3{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:36px;font-weight:500;letter-spacing:-0.02em;line-height:1.1;margin-bottom:14px}
.step p{color:#AFCBEA;font-size:17px;max-width:62ch}

/* ---------- pricing ---------- */
.pricing{background:#F7F5F0;color:#0B1220;padding:160px 0}
.pricing .wrap{display:grid;grid-template-columns:0.85fr 1.35fr;gap:64px;align-items:start}
.pricing h2{font-size:64px;font-weight:500;letter-spacing:-0.035em;line-height:0.98;margin-top:20px}
.pricing .lead{font-size:18px;color:#5B6472;margin-top:28px;max-width:30em}
.table{background:#FFFFFF;border:1px solid #D8D3C6;border-radius:4px;padding:36px 40px}
.line{display:grid;grid-template-columns:1fr 120px 150px;gap:16px;padding:18px 0;border-bottom:1px solid #D8D3C6;font-size:16px;color:#0B1220;align-items:center}
.line .q{color:#5B6472;font-variant-numeric:tabular-nums;text-align:right;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif}
.line .p{text-align:right;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-weight:500;font-variant-numeric:tabular-nums;font-size:18px}
.line small{display:block;color:#5B6472;font-size:13px;margin-top:2px}

/* ---------- solutions ---------- */
.sol{padding:180px 0 120px}
.sol h2{font-size:56px;font-weight:500;letter-spacing:-0.03em;line-height:1;margin:18px 0 48px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tile{color:#F7F5F0;position:relative;height:600px;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:40px;background:#0F2540}
.tile .pic{position:absolute;inset:0;transition:transform .9s cubic-bezier(.16,1,.3,1)} .tile:hover .pic{transform:scale(1.04)}
.tile .pic svg{width:100%;height:100%}
.tile .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,0) 35%,rgba(11,18,32,0.92) 100%)}
.tile .txt{position:relative}
.tile h3{color:#F7F5F0;font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:40px;font-weight:500;letter-spacing:-0.02em;line-height:1.05;margin:14px 0 12px}
.tile p{color:#DCEBF9;font-size:16px;max-width:30em}
.tile .more{color:#E8863A;display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:500}

/* ---------- faq / cta / footer ---------- */
.faq{padding:60px 0 160px}
.faq .list{border-top:1px solid #1E3556;margin-top:32px}
.faq .row{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:32px 0;border-bottom:1px solid #1E3556}
.faq h4{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:24px;font-weight:500;letter-spacing:-0.01em;line-height:1.2}
.faq p{color:#AFCBEA;font-size:16px;max-width:60ch}
.cta{position:relative;padding:160px 0;border-top:1px solid #1E3556;overflow:hidden}
.cta .wrap{position:relative;display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:center}
.cta h2{font-size:clamp(64px,7vw,108px);white-space:nowrap;font-weight:700;letter-spacing:-0.04em;line-height:0.9;text-transform:uppercase}
.cta p{font-size:19px;color:#AFCBEA}
.gridbg{position:absolute;inset:0;background-image:linear-gradient(#153A63 1px,transparent 1px),linear-gradient(90deg,#153A63 1px,transparent 1px);background-size:64px 64px;opacity:.32;-webkit-mask-image:radial-gradient(ellipse at 20% 80%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 20% 80%,#000 0%,transparent 70%);pointer-events:none}
.foot{border-top:1px solid #1E3556;padding:72px 0 48px}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.foot a{color:#AFCBEA;font-size:15px} .foot a:hover{color:#F7F5F0}
.foot h5{font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#7CA2C7;font-weight:500;margin-bottom:18px}
.foot .links{display:grid;gap:10px}
.foot .base{display:flex;justify-content:space-between;margin-top:56px;padding-top:24px;border-top:1px solid #1E3556;font-size:13px;color:#7CA2C7}
@media (max-width: 699px){.foot .base{flex-direction:column;gap:8px}}
.wa{position:fixed;right:32px;bottom:32px;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(0,0,0,0.45);z-index:40;transition:transform .22s cubic-bezier(.34,1.56,.64,1)} .wa:hover{transform:scale(1.06)}

/* ---------- scroll choreography (progressive enhancement) ---------- */
html.js .rv{opacity:0;transform:translateY(28px);transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 70ms)}
html.js .rv.in{opacity:1;transform:none}
html.js .ln span{transform:translateY(112%);transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 110ms)}
html.js .in .ln span,html.js .ln.in span{transform:none}
@supports (animation-timeline: scroll()){
  html.js .band .pic{animation:parallax2 linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}
@keyframes parallax{to{transform:translateY(22%)}}
@keyframes parallax2{from{transform:translateY(-8%)}to{transform:translateY(8%)}}
@media (prefers-reduced-motion: reduce){
  html.js .rv,html.js .ln span,html.js .hero-fixed .pic,html.js .plx{opacity:1;transform:none;transition:none;animation:none}
  html.js .hero-bottom,html.js .hero-giant,html.js .intro-fixed,html.js .hero-fixed .pic img,html.js .hero-veil{animation:none;transform:none;opacity:1}
  .scrollcue i{animation:none}
}
@media (max-width: 1100px){
  .wrap{padding:0 28px}
  .phone{display:none}
  .hero-foot,.statement .sub,.system .wrap,.calc .wrap,.how .head,.pricing .wrap,.tiles,.faq .row,.cta .wrap,.foot .cols{grid-template-columns:minmax(0,1fr)}
  .calc .wrap .rv,.cta .wrap .rv{flex-wrap:wrap}
  .btn{white-space:normal}
  .system .pin{position:relative;top:0;height:auto;min-height:0}
  .hero-foot{grid-template-columns:minmax(0,1fr);gap:28px}
  .cta h2{white-space:normal;font-size:52px}
  .table,.panelcard{padding:24px}
  .line{grid-template-columns:minmax(0,1fr) auto;gap:12px} .line .q{display:none}
  .calc .panelcard .d.num{font-size:64px}
  .statement h2,.band h2{font-size:44px}
  .hero h1{font-size:56px}
  .hero-cta{justify-content:flex-start;flex-wrap:wrap}
  .hero .wrap{padding-bottom:40px}
  .system .stepblk{min-height:0}
  .strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .stat b{font-size:32px}
  .step{grid-template-columns:72px minmax(0,1fr);gap:16px} .step .n{font-size:56px} .step h3{font-size:26px;overflow-wrap:anywhere}
  .scrollcue,.shot-brief{display:none}
  .calc h2,.pricing h2,.how h2{font-size:40px}
  .tile{height:440px}
}