/* Datum — motion and interaction layer. Loaded after the page styles. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Nav: fixed, goes solid once the hero scrolls away */
.nav{position:fixed!important;transition:background .35s,backdrop-filter .35s}
.nav.on{background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.65,.2,1),transform .8s cubic-bezier(.2,.65,.2,1)}
.rv.in{opacity:1;transform:none}

/* Ken Burns on full-bleed images once they are in view */
.full picture img{transform:scale(1.06);transform-origin:50% 60%}
.full.kb picture img{animation:fi .6s ease-out both,kb 18s cubic-bezier(.2,.4,.2,1) both}
@keyframes kb{from{transform:scale(1.08) translateY(1.5%)}to{transform:scale(1) translateY(0)}}

/* Sticky spec layout on building pages */
.spec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.spec-img{position:sticky;top:0;height:100vh;margin:-120px 0;overflow:hidden;display:flex;align-items:flex-end}
.spec-img picture,.spec-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.spec-img .cap{position:relative;z-index:1;padding:40px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));width:100%;box-sizing:border-box}
.spec-body{display:flex;flex-direction:column}
.spec-body .g3{gap:32px}
.spec-body .num .v{font-size:28px}
@media (max-width:1100px){.spec-body .g3{grid-template-columns:1fr}}
@media (max-width:860px){.spec-grid{grid-template-columns:1fr;gap:48px}.spec-img{position:relative;height:420px;margin:0 -20px}.spec-img .cap{padding:20px}}

/* Configurator */
.cfg{display:flex;flex-direction:column;margin-top:96px}
.cfg-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14);cursor:pointer;user-select:none}
.cfg-row>div:first-child{display:flex;flex-direction:column;gap:2px}
.cfg-row>div:first-child>span:first-child{color:#FFFFFF;font-weight:400}
.cfg-row .t3{font-size:13px}
.cfg-row input{position:absolute;opacity:0;width:0;height:0}
.sw{flex:none;width:44px;height:24px;border:1px solid #FFFFFF;border-radius:12px;position:relative;transition:background .2s}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;transition:transform .2s,background .2s}
.cfg-row input:checked+.sw{background:#FFFFFF}
.cfg-row input:checked+.sw:after{transform:translateX(20px);background:#000000}
.cfg-row input:focus-visible+.sw{outline:1px solid #FFFFFF;outline-offset:3px}
.stp{display:flex;align-items:center;gap:0;border:1px solid #FFFFFF;height:40px}
.stp button{width:40px;height:100%;background:transparent;border:0;color:#FFFFFF;font:inherit;font-size:20px;cursor:pointer;transition:background .2s,color .2s}
.stp button:hover{background:#FFFFFF;color:#000000}
.stp button:disabled{opacity:.3;cursor:default;background:transparent;color:#FFFFFF}
.stp b{min-width:44px;text-align:center;font-weight:600;font-size:18px;color:#FFFFFF}
.cfg-tot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-top:40px}
.cfg-tot>div{display:flex;flex-direction:column;gap:8px}
.cfg-tot .price{font-size:64px}
@media (max-width:860px){.cfg-tot .price{font-size:48px}.cfg-tot .btn{width:100%}}

/* Home: price-it-yourself */
.calc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:72px;align-items:end}
.seg{display:flex;border:1px solid #FFFFFF;margin-bottom:48px}
.seg button{flex:1;height:48px;background:transparent;border:0;border-right:1px solid rgba(255,255,255,.35);color:#B5B5B5;font:inherit;font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.seg button:last-child{border-right:0}
.seg button:hover{color:#FFFFFF}
.seg button[aria-pressed="true"]{background:#FFFFFF;color:#000000}
.calc label{display:flex;justify-content:space-between;align-items:baseline;color:#FFFFFF;font-weight:400;margin-bottom:16px}
.calc label b{font-size:28px;font-weight:600;letter-spacing:-.02em}
input[type=range].rg{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:rgba(255,255,255,.35);outline:none;margin:16px 0}
input[type=range].rg::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#000000;border:1px solid #FFFFFF;cursor:pointer;transition:background .2s}
input[type=range].rg::-webkit-slider-thumb:hover{background:#FFFFFF}
input[type=range].rg::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#000000;border:1px solid #FFFFFF;cursor:pointer}
input[type=range].rg:focus-visible::-webkit-slider-thumb{outline:1px solid #FFFFFF;outline-offset:3px}
.calc-r{display:flex;flex-direction:column;gap:8px}
.calc-r .price{font-size:88px}
.calc-r .btn{margin-top:24px;align-self:flex-start}
@media (max-width:860px){.calc{grid-template-columns:1fr;gap:40px}.calc-r .price{font-size:56px}.calc-r .btn{align-self:stretch}}

/* Quote: configuration carried in */
.cfg-in{border:1px solid rgba(255,255,255,.25);padding:20px 24px;display:flex;flex-direction:column;gap:6px;margin-bottom:32px}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .full picture img,.full.kb picture img{animation:none;transform:none}
  .spec-img picture,.spec-img img{transform:none!important}
}