/* ==========================================================================
   LET'S BUILD / homepage
   Tokens first. Everything below reads from them.
   ========================================================================== */
:root{
  --black:#070708; --ink:#0d0d0f; --panel:#131316; --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.06);
  --white:#f4f2ee; --soft:#a5a6ab; --mute:#6d6e74;
  --gold:#cfac6b; --gold-hi:#fbebc8; --silver:#b9bec4; --steel:#7d848c;
  --red:#e10600; --red-deep:#9b0000;
  --f-display:"Archivo","Arial Narrow","DejaVu Sans Condensed",system-ui,sans-serif;
  --f-text:"Archivo",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(20px,4vw,64px);
  --nav-h:72px;
  --vh:1vh;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--white);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-text);font-size:17px;line-height:1.55;overflow-x:clip;background:var(--black);-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--white);color:#000;padding:10px 14px;font-weight:700}
.skip:focus{top:12px}

/* type */
.giant,.h-xl,.h-lg,.h-md{font-family:var(--f-display);font-weight:900;font-stretch:68%;text-transform:uppercase;line-height:.88;letter-spacing:-.012em}
.giant{font-size:clamp(64px,15.5vw,300px)}
.h-xl{font-size:clamp(52px,10.5vw,190px)}
.h-lg{font-size:clamp(44px,7.6vw,132px)}
.h-md{font-size:clamp(32px,4.6vw,76px);line-height:.94}
.gold{color:var(--gold)} .red{color:var(--red)} .silver{color:var(--silver)}
.outline{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.mono b{color:var(--gold);font-weight:500}
.lead{font-size:clamp(17px,1.5vw,22px);color:var(--soft);max-width:46ch}
.lead strong{color:var(--white);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:8px 8px;margin-top:22px}
.tags li{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--silver);border:1px solid var(--line);padding:7px 11px;background:rgba(7,7,8,.55)}
.note{font-size:13px;color:var(--mute);max-width:60ch;margin-top:18px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 26px;font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:16px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:transform .35s var(--ease),background-color .25s,color .25s,border-color .25s}
.btn .ar{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(6px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#ff1a12}
.btn-line{border:1px solid rgba(255,255,255,.35);color:var(--white)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{height:44px;padding:0 18px;font-size:14px}

/* blueprint furniture */
.grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:calc(100%/12) 100%,calc(100%/12) 100%;background-size:100% 120px,calc(100%/12) 100%;mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 85%)}
.corner{position:absolute;width:22px;height:22px;border:1px solid var(--gold);opacity:.7;pointer-events:none}
.corner.tl{left:var(--gut);top:calc(var(--nav-h) + 18px);border-right:0;border-bottom:0}
.corner.tr{right:var(--gut);top:calc(var(--nav-h) + 18px);border-left:0;border-bottom:0}
.corner.bl{left:var(--gut);bottom:26px;border-right:0;border-top:0}
.corner.br{right:var(--gut);bottom:26px;border-left:0;border-top:0}
.coord{position:absolute;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;pointer-events:none}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);transition:background-color .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(7,7,8,.72);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;height:100%}
.brand img:first-child{height:42px;width:auto}
.brand img:last-child{height:17px;width:auto}
.nav-links{display:flex;gap:clamp(16px,2.4vw,38px)}
.nav-links a{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);padding:10px 0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--white)} .nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;gap:10px;align-items:center}
.call{position:relative;display:inline-grid;align-items:center;height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.35);font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:14px;letter-spacing:.08em;text-transform:uppercase;overflow:hidden;transition:border-color .3s,min-width .4s var(--ease);min-width:118px;text-align:center}
.call span{grid-area:1/1;transition:transform .4s var(--ease),opacity .3s;white-space:nowrap}
.call .num{transform:translateY(120%);opacity:0;color:var(--gold);letter-spacing:.04em}
.call:hover,.call:focus-visible{border-color:var(--gold);min-width:150px}
.call:hover .lbl,.call:focus-visible .lbl{transform:translateY(-120%);opacity:0}
.call:hover .num,.call:focus-visible .num{transform:none;opacity:1}
.burger{display:none;width:44px;height:44px;position:relative}
.burger i{position:absolute;left:10px;right:10px;height:2px;background:var(--white);transition:transform .3s var(--ease),top .3s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:26px}
.burger[aria-expanded=true] i:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){top:21px;transform:rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:99;background:rgba(7,7,8,.97);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--gut);visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.sheet.open{visibility:visible;opacity:1}
.sheet a{font-family:var(--f-display);font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(40px,11vw,72px);line-height:1.02}
.sheet a:hover{color:var(--gold)}
.sheet .mono{margin-top:28px}

/* mobile sticky bar */
.mbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:98;display:none;grid-template-columns:1fr 1.6fr;height:52px;border:1px solid var(--line);background:rgba(7,7,8,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateY(140%);transition:transform .5s var(--ease)}
.mbar.show{transform:none}
.mbar a{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-display);font-weight:800;font-stretch:80%;letter-spacing:.08em;text-transform:uppercase;font-size:15px}
.mbar a+a{background:var(--red)}

/* ==========================================================================
   ENGINE: acts and pins
   ========================================================================== */
.act{position:relative;height:calc(var(--span,300) * var(--vh))}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.act-flow{position:relative;padding:clamp(90px,14vh,180px) var(--gut)}
.wrap{max-width:1500px;margin:0 auto}

/* step stacks: one reveal per scroll */
.js .step{opacity:0;visibility:hidden;transform:translateY(34px);transition:opacity .55s var(--ease),transform .7s var(--ease),visibility 0s .55s}
.js .step.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .08s,transform .8s var(--ease) .08s,visibility 0s}
.js .step.is-past{transform:translateY(-34px)}
.stack{display:grid}.stack>*{grid-area:1/1}

/* enter reveals for flowing sections */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.js .rv.in{opacity:1;transform:none}

/* scrub media */
.media{position:absolute;inset:0}
.media video,.media img,.media picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scrim-b{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(7,7,8,.92),rgba(7,7,8,.55) 45%,transparent);pointer-events:none}
.scrim-l{position:absolute;inset:0 auto 0 0;width:min(62%,900px);background:linear-gradient(to right,rgba(7,7,8,.9),rgba(7,7,8,.6) 55%,transparent);pointer-events:none}

/* ==========================================================================
   01 HERO
   ========================================================================== */
#hero{--span:300}
#hero .pin{background:#05060a}
.hero-layer{position:absolute;inset:-3% -3%;will-change:transform}
.hero-layer img,.hero-layer video{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero-bg{transform:scale(calc(1.02 + var(--p,0) * .05))}
.hero-fg{z-index:3;transform:scale(calc(1.02 + var(--p,0) * .05));opacity:var(--fg,1)}
.hero-type{position:absolute;z-index:2;left:0;right:0;top:calc(var(--nav-h) + 3vh);text-align:center;opacity:var(--type,1);transform:translate3d(calc(var(--tx,0) * 1vw),calc(var(--ty,0) * 1vh),0);will-change:transform}
.hero-type h1{font-family:var(--f-display);font-weight:900;font-stretch:66%;text-transform:uppercase;line-height:.84;letter-spacing:-.015em;color:var(--white)}
.hero-type .l1,.hero-type .l2{width:max-content;margin:0 auto;white-space:nowrap}
.hero-type .l1{display:block;font-size:clamp(84px,21.5vw,430px);transform:translateX(calc(var(--p,0) * -14vw))}
.hero-type .l2{display:block;font-size:clamp(40px,10.2vw,206px);color:var(--gold);transform:translateX(calc(var(--p,0) * 16vw))}
.hero-haze{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(60% 40% at 50% 100%,rgba(207,172,107,.12),transparent 70%),linear-gradient(to top,rgba(7,7,8,.88),transparent 42%)}
.hero-copy{position:absolute;z-index:5;left:var(--gut);right:var(--gut);bottom:clamp(28px,6vh,70px);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;opacity:var(--copy,1);transform:translateY(calc((1 - var(--copy,1)) * 30px))}
.hero-copy p{font-size:clamp(17px,1.55vw,23px);max-width:34ch;color:var(--white)}
.hero-copy .mono{margin-top:14px;color:var(--silver)}
.hero-stage{position:absolute;z-index:5;left:var(--gut);bottom:clamp(28px,6vh,70px);opacity:var(--stage,0);max-width:min(720px,90%)}
.hero-stage .mono{margin-bottom:14px}

/* ==========================================================================
   02 LAND (kinetic type)
   ========================================================================== */
#land{--span:420;background:var(--black)}
#land .pin{display:grid;place-items:center;padding:0 var(--gut)}
#land .stack{width:100%;text-align:center}
#land .scope{position:absolute;left:var(--gut);bottom:34px;display:flex;flex-wrap:wrap;gap:6px 18px;max-width:70%}
#land .scope li{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);transition:color .4s}
#land .scope li.on{color:var(--gold)}
#land .scope li::before{content:"+ "}
#land .dim{position:absolute;right:var(--gut);top:calc(var(--nav-h) + 40px);bottom:40px;width:1px;background:var(--line)}
#land .dim::after{content:"";position:absolute;left:-3px;width:7px;height:7px;background:var(--red);top:calc(var(--p,0) * 100%);transform:translateY(-50%)}

/* ==========================================================================
   03 BUILD STORY (peak)
   ========================================================================== */
#build{--span:900}
#build .hud{position:absolute;z-index:3;inset:0;padding:calc(var(--nav-h) + 26px) var(--gut) 34px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;gap:20px}
#build .title{grid-column:1/-1}
#build .title .h-lg{text-shadow:0 2px 40px rgba(0,0,0,.5)}
#build .stages{align-self:end;max-width:560px}
#build .stage .n{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--gold);display:block;margin-bottom:10px}
#build .stage h3{font-family:var(--f-display);font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(44px,6.4vw,112px);line-height:.9}
#build .rail{align-self:end;display:flex;flex-direction:column;gap:7px;text-align:right}
#build .rail li{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);transition:color .3s}
#build .rail li.on{color:var(--white)}
#build .rail li.on::after{content:"";display:inline-block;width:26px;height:1px;background:var(--red);vertical-align:middle;margin-left:10px}
#build .bar{position:absolute;z-index:3;left:0;bottom:0;height:3px;width:100%;background:var(--red);transform-origin:left;transform:scaleX(var(--p,0))}

/* ==========================================================================
   04 X-RAY systems (signature)
   ========================================================================== */
#xray{--span:480;background:radial-gradient(80% 60% at 70% 50%,#121317,var(--black) 70%)}
#xray .pin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:4vw;padding:var(--nav-h) var(--gut) 0}
#xray .copy .mono{margin-bottom:16px}
#xray svg{width:100%;height:auto;max-height:78vh;overflow:visible}
.xr-struct{stroke:var(--steel);stroke-width:2;fill:none}
.xr-fill{fill:#0e0f12;stroke:var(--steel);stroke-width:2}
.xr-ground{stroke:var(--mute);stroke-width:1;stroke-dasharray:3 6}
.xr g[data-sys]{opacity:.0;transition:opacity .6s}
.xr g[data-sys].on{opacity:1}
.xr g[data-sys].was{opacity:.22}
.xr .draw{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.xr g.on .draw,.xr g.was .draw{stroke-dashoffset:0}
.xr .glass{fill:rgba(185,190,196,.16);stroke:var(--gold);stroke-width:2.5;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s var(--ease)}
.xr g.on .glass,.xr g.was .glass{transform:none}
.xr .node{opacity:0;transition:opacity .4s 1s}
.xr g.on .node,.xr g.was .node{opacity:1}
.xr .dimtxt{font-family:var(--f-mono);font-size:11px;fill:var(--mute);letter-spacing:.12em}
.no-js .xr g[data-sys],.rm .xr g[data-sys]{opacity:1}.no-js .xr .draw,.rm .xr .draw{stroke-dashoffset:0}.no-js .xr .glass,.rm .xr .glass{transform:none}

/* ==========================================================================
   05 INTERIOR (horizontal)
   ========================================================================== */
#interior{--span:420;background:var(--ink)}
#interior .pin{display:flex;flex-direction:column;justify-content:center}
#interior .track{display:flex;gap:6vw;padding:0 var(--gut);width:max-content;transform:translate3d(calc(var(--x,0) * -1px),0,0);will-change:transform}
#interior .panel{flex:none;width:min(78vw,760px)}
#interior .panel.wide{width:min(92vw,1180px)}
#interior .panel .mono{margin-bottom:18px}
#interior .panel h3{margin-bottom:22px}
#interior .ruler{position:absolute;left:0;right:0;bottom:44px;height:18px;background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 24px);background-position:calc(var(--x,0) * -1px) 0}
#interior .ruler::after{content:"";position:absolute;left:0;bottom:-8px;height:2px;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0))}

/* ==========================================================================
   06 OUTDOORS / POOLS (aperture reveal)
   ========================================================================== */
#outdoor{--span:380}
#outdoor .media{clip-path:inset(calc((1 - var(--open,0)) * 34%) calc((1 - var(--open,0)) * 30%));transform:scale(calc(1.18 - var(--p,0) * .16))}
#outdoor .pin{display:grid;place-items:center;background:var(--black)}
#outdoor .intro{position:absolute;z-index:3;inset:0;display:grid;place-items:center;text-align:center;padding:0 var(--gut);opacity:calc(1 - var(--open,0) * 1.6)}
#outdoor .words{position:relative;z-index:3;text-align:center;text-shadow:0 4px 60px rgba(0,0,0,.55)}
#outdoor .veil{position:absolute;inset:0;z-index:2;background:rgba(7,7,8,.34)}
.ext{background:var(--black)}
.ext .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6vw;align-items:start}
.ext .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ext h3{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;font-weight:500;margin-bottom:6px}

/* ==========================================================================
   07 PROCUREMENT
   ========================================================================== */
#sourcing{--span:520;background:linear-gradient(180deg,var(--black),#0c0c0e)}
#sourcing .pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:center;padding:var(--nav-h) var(--gut) 0}
#sourcing .cats li{font-family:var(--f-display);font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(34px,5.2vw,92px);line-height:.98;color:rgba(255,255,255,.16);transition:color .45s,transform .6s var(--ease)}
#sourcing .cats li.on{color:var(--white);transform:translateX(18px)}
#sourcing .cats li.on::before{content:"";position:absolute;margin-left:-18px;margin-top:.42em;width:8px;height:8px;background:var(--red)}
#sourcing .head{margin-bottom:28px}
.inv{border:1px solid var(--line);background:rgba(255,255,255,.025);padding:26px;position:relative}
.inv-top{display:flex;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.inv-flow{display:flex;align-items:center;gap:10px;margin:18px 0 8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.inv-flow b{color:var(--gold);font-weight:500}.inv-flow i{flex:1;height:1px;background:linear-gradient(90deg,var(--gold),var(--red))}
.inv-rows{min-height:250px}
.inv-rows li{display:grid;grid-template-columns:1fr auto;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:16px}
.inv-rows li span:last-child{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.inv-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.inv-foot span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line);color:var(--silver)}
#sourcing .final{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;background:var(--black);padding:0 var(--gut);opacity:0;visibility:hidden;transition:opacity .7s,visibility 0s .7s}
#sourcing .final.is-active{opacity:1;visibility:visible;transition:opacity .7s,visibility 0s}

/* ==========================================================================
   08 TRANSPARENCY / DAILY / REPORT
   ========================================================================== */
.see{background:#0c0c0e;border-top:1px solid var(--line)}
.see .two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:56px;border:1px solid var(--line)}
.see .two>div{background:#0c0c0e;padding:clamp(24px,3vw,48px)}
.see .two h3{font-family:var(--f-mono);font-weight:500;font-size:13px;letter-spacing:.16em;color:var(--gold);margin-bottom:12px}
.daily{background:var(--black)}
.daily .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;align-items:start}
.chain{position:relative;padding-left:34px}
.chain::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--line)}
.chain::after{content:"";position:absolute;left:6px;top:8px;width:1px;height:calc((100% - 16px) * var(--p,0));background:var(--red)}
.chain li{position:relative;font-family:var(--f-display);font-weight:900;font-stretch:68%;font-size:clamp(34px,4vw,64px);line-height:1.12;text-transform:uppercase;color:rgba(255,255,255,.22);transition:color .4s}
.chain li.on{color:var(--white)}
.chain li::before{content:"";position:absolute;left:-32px;top:.42em;width:9px;height:9px;border:1px solid var(--mute);background:var(--black);transition:background .3s,border-color .3s}
.chain li.on::before{background:var(--red);border-color:var(--red)}
.report-sec{background:linear-gradient(180deg,var(--black),#0d0d10)}
.report-sec .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:6vw;align-items:center}
.report{border:1px solid var(--line);background:#111114;box-shadow:0 40px 120px rgba(0,0,0,.6);padding:26px;max-width:520px;width:100%;justify-self:end}
.report header{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:18px;border-bottom:1px solid var(--line)}
.report .wk{font-family:var(--f-display);font-weight:900;font-stretch:68%;font-size:64px;line-height:.85}
.report ul li{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:17px}
.report .st{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line)}
.st.done{color:var(--gold);border-color:rgba(207,172,107,.4)}.st.prog{color:#fff;background:var(--red);border-color:var(--red)}.st.next{color:var(--silver)}
.report .prog-bar{height:3px;background:var(--line);margin-top:-1px;position:relative}
.report .prog-bar::after{content:"";position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(.55)}
.report footer{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.report footer div{border:1px solid var(--line);padding:14px}
.report footer b{display:block;font-family:var(--f-display);font-weight:900;font-stretch:68%;font-size:38px;line-height:1}

/* ==========================================================================
   09 BLISSFUL
   ========================================================================== */
#blissful{--span:520}
#blissful .shot{position:absolute;inset:0;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
#blissful .shot img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2.4s var(--ease)}
#blissful .shot.is-active,#blissful .shot.is-past{clip-path:inset(0)}
#blissful .shot.is-active img{transform:scale(1.02)}
#blissful .shot.zoom img{object-position:40% 70%;transform:scale(1.7)}
#blissful .shot.zoom.is-active img{transform:scale(1.5)}
#blissful .meta{position:absolute;z-index:3;left:var(--gut);top:calc(var(--nav-h) + 28px);display:flex;gap:26px}
#blissful .chapters{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(34px,7vh,80px)}
#blissful .end{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:0 var(--gut);background:rgba(7,7,8,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s .8s}
#blissful .end.is-active{opacity:1;visibility:visible;transition:opacity .8s,visibility 0s}
#blissful .end .lead{margin:22px auto 30px}
#blissful .end .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   10 THREE SYSTEMS
   ========================================================================== */
#systems-intro{background:var(--black);text-align:center}
#systems{--span:600;background:var(--black)}
#systems .pin{display:grid;grid-template-columns:minmax(0,1fr) min(88vh,50vw);align-items:center;gap:4vw;padding:var(--nav-h) 0 0 var(--gut)}
#systems .vids{position:relative;height:100%;background:#000}
#systems .vids .v{position:absolute;inset:0;opacity:0;transition:opacity .7s}
#systems .vids .v.is-active{opacity:1}
#systems .vids video,#systems .vids img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#systems .vids::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--black),transparent 22%);pointer-events:none}
#systems .sys .mono{margin-bottom:16px}
#systems .sys h3{margin-bottom:18px}
#systems .sys .btn{margin-top:26px}
#systems .idx{position:absolute;left:var(--gut);bottom:34px;display:flex;gap:22px}
#systems .idx li{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;padding-top:10px;border-top:2px solid var(--line);min-width:110px;transition:color .3s,border-color .3s}
#systems .idx li.on{color:var(--white);border-color:var(--red)}

/* ==========================================================================
   11 WALL SYSTEM (CSS 3D)
   ========================================================================== */
#wall{--span:560;background:radial-gradient(70% 60% at 35% 55%,#15161a,var(--black) 75%)}
#wall .pin{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:3vw;padding:var(--nav-h) var(--gut) 0}
.wall-stage{position:relative;height:min(70vh,640px);perspective:1800px;perspective-origin:50% 40%}
.wall3d{position:absolute;left:12%;bottom:12%;width:min(34vw,460px);height:min(50vh,470px);transform-style:preserve-3d;transform:rotateX(-14deg) rotateY(-38deg)}
.layer{position:absolute;left:0;bottom:0;width:calc(100% - var(--i) * 9%);height:calc(100% - var(--i) * 8%);transform-style:preserve-3d;transform:translateZ(calc(var(--z) * 1px + 260px));opacity:0;transition:transform 1s var(--ease),opacity .5s}
.layer.is-active,.layer.is-past{transform:translateZ(calc(var(--z) * 1px));opacity:1}
.layer .f,.layer .s,.layer .t{position:absolute;background:var(--tex);background-size:var(--ts,auto)}
.layer .f{inset:0;transform:translateZ(calc(var(--t) * 1px));box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.layer .s{top:0;bottom:0;right:0;width:calc(var(--t) * 1px);transform-origin:100% 50%;transform:rotateY(90deg);filter:brightness(.62)}
.layer .t{left:0;right:0;top:0;height:calc(var(--t) * 1px);transform-origin:50% 0;transform:rotateX(90deg) translateY(calc(var(--t) * -1px));filter:brightness(1.18)}
.layer.is-active .f{box-shadow:inset 0 0 0 2px var(--gold)}
.wall-list{counter-reset:w}
.wall-list li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2);color:rgba(255,255,255,.28);transition:color .4s;font-size:clamp(15px,1.25vw,19px)}
.wall-list li::before{counter-increment:w;content:"0" counter(w);font-family:var(--f-mono);font-size:12px;color:inherit;padding-top:3px}
.wall-list li.on{color:var(--white)} .wall-list li.cur{color:var(--gold)}

/* ==========================================================================
   12 ROOFS
   ========================================================================== */
#roofs{--span:340;background:var(--ink)}
#roofs .pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:4vw;padding:var(--nav-h) var(--gut) 0}
#roofs svg{width:100%;height:auto;max-height:70vh;overflow:visible}
#roofs .types{margin:26px 0 8px;min-height:1.1em}
#roofs .rf-body{fill:none;stroke:var(--steel);stroke-width:2}
#roofs .rf-roof{fill:rgba(207,172,107,.08);stroke:var(--gold);stroke-width:3;stroke-linejoin:round}
#roofs .rf-ridge{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:4 5;fill:none}

/* ==========================================================================
   13 RENO / COMMERCIAL / METHOD / SPEED
   ========================================================================== */
.reno{background:var(--black)}
.reno .wrap,.comm .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:6vw;align-items:end}
.reno .h-xl span{display:block}
.comm{background:#0c0c0e;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.method{background:var(--black)}
.method .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6vw}
.method .sticky{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start}
.moves li{display:grid;grid-template-columns:70px 1fr;align-items:baseline;gap:18px;padding:3.2vh 0;border-bottom:1px solid var(--line-2);opacity:.2;transition:opacity .45s}
.moves li.on{opacity:1}
.moves .n{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;color:var(--gold)}
.moves .w{font-family:var(--f-display);font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(48px,7vw,120px);line-height:.9}
.moves p{grid-column:2;color:var(--soft);max-width:44ch;margin-top:8px}
.moves li.key .w{color:var(--gold)}
.speed{background:var(--red);color:#fff;text-align:left}
.speed .lead{color:rgba(255,255,255,.86);max-width:none}
.speed .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;align-items:end}
.speed .tags li{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.speed .mono{color:rgba(255,255,255,.8)}

/* ==========================================================================
   14 FAQ / FORM
   ========================================================================== */
.faq{background:var(--black)}
.faq .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:6vw}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:20px;align-items:center;padding:24px 0;font-size:clamp(18px,1.6vw,24px);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--gold);font-size:24px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--soft);padding:0 44px 26px 0;max-width:70ch}
.formsec{background:#0c0c0e;border-top:1px solid var(--line)}
.formsec .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6vw}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0}
.chips span{display:block;padding:11px 15px;border:1px solid var(--line);font-size:15px;transition:border-color .2s,background .2s,color .2s}
.chips input:checked+span{border-color:var(--gold);color:var(--gold);background:rgba(207,172,107,.08)}
.chips input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fields label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.fields input,.fields select{width:100%;margin-top:7px;height:50px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);color:var(--white);font:inherit;font-size:17px;border-radius:0}
.fields select option{background:#111;color:#fff}
.fields input:focus,.fields select:focus{outline:0;border-bottom-color:var(--gold)}
.formsec .btn{margin-top:30px}
fieldset{border:0}legend{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:12px}

/* ==========================================================================
   15 FINAL / FOOTER
   ========================================================================== */
#final{--span:300;background:#030304}
#final .pin{display:grid;place-items:center;text-align:center;padding:0 var(--gut)}
#final .closer .lead{margin:34px auto 10px;text-align:center}
#final .tel{font-family:var(--f-display);font-weight:900;font-stretch:72%;font-size:clamp(30px,3.4vw,52px);color:var(--gold);letter-spacing:.02em}
#final .tel:hover{color:var(--white)}
#final .btn{height:68px;padding:0 40px;font-size:20px;margin-top:34px}
.footer{background:#030304;border-top:1px solid var(--line);padding:clamp(60px,9vh,110px) var(--gut) 120px}
.footer .big{font-family:var(--f-display);font-weight:900;font-stretch:66%;text-transform:uppercase;font-size:clamp(70px,19.5vw,400px);line-height:.8;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;margin:0 0 clamp(40px,7vh,90px) 0}
.footer .big i{font-style:normal;color:var(--red)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.fgrid img{width:150px;height:auto;margin-bottom:18px}
.fgrid h4{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
.fgrid li{margin-bottom:9px;color:var(--soft)} .fgrid a:hover{color:var(--white)}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:60px;padding-top:22px;border-top:1px solid var(--line)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1020px){
  .nav-links{display:none}.burger{display:block}
}
@media (max-width:820px){
  :root{--nav-h:62px}
  body{font-size:16px}
  .nav-cta .call,.nav-cta .btn{display:none}
  .mbar{display:grid}
  .brand img:first-child{height:36px}.brand img:last-child{height:14px}
  .corner,.coord{display:none}
  .hero-layer img,.hero-layer video{object-position:50% 50%}
  .hero-type{top:calc(var(--nav-h) + 5vh)}
  .hero-type .l1{font-size:25.5vw}.hero-type .l2{font-size:12.1vw}
  .hero-copy{flex-direction:column;align-items:flex-start;gap:18px;bottom:84px}
  .hero-stage{bottom:84px}
  #hero{--span:280}#land{--span:440}#build{--span:820}#xray{--span:520}#interior{--span:460}#sourcing{--span:560}#blissful{--span:540}#systems{--span:620}#wall{--span:640}
  #build .hud{grid-template-columns:1fr;padding-bottom:96px}
  #build .rail{display:none}
  #xray .pin,#sourcing .pin,#wall .pin,#roofs .pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:14px;padding-top:calc(var(--nav-h) + 14px);padding-bottom:84px}
  #xray .viz{order:-1}#xray svg{max-height:40vh}
  #xray .tags li:nth-child(n+7),#systems .tags li:nth-child(n+6){display:none}
  #sourcing .cats li{font-size:8.4vw}#sourcing .head{margin-bottom:10px}
  #sourcing .head .lead{display:none}
  .inv{padding:16px}.inv-rows{min-height:0}.inv-rows li{padding:7px 0;font-size:14px}.inv-rows li:nth-child(n+6){display:none}.inv-foot{display:none}
  #systems .pin{grid-template-columns:1fr;grid-template-rows:42vh 1fr;padding:var(--nav-h) 0 0;gap:0}
  #systems .vids{order:-1}#systems .vids::after{background:linear-gradient(0deg,var(--black),transparent 30%)}
  #systems .texts{padding:16px var(--gut) 0}#systems .idx{display:none}
  #systems .sys .lead{font-size:15px}
  .wall-stage{height:38vh;order:-1}.wall3d{left:16%;bottom:6%;width:56vw;height:30vh}
  .wall-list li{padding:5px 0;font-size:14px}
  #wall .copy .lead,#wall .copy .note{display:none}
  #roofs .viz{order:-1}#roofs svg{max-height:34vh}
  .ext .wrap,.daily .wrap,.report-sec .wrap,.reno .wrap,.comm .wrap,.method .wrap,.speed .wrap,.faq .wrap,.formsec .wrap{grid-template-columns:1fr;gap:40px}
  .see .two,.ext .cols,.fields{grid-template-columns:1fr}
  .method .sticky{position:static}
  .report{justify-self:stretch}
  .moves li{grid-template-columns:44px 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  #land .scope{max-width:100%;bottom:84px}
  #blissful .chapters{bottom:90px}
  #final .btn{height:60px;font-size:17px;padding:0 26px}
}

/* ==========================================================================
   REDUCED MOTION / NO JS: a plain, complete, readable page
   ========================================================================== */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation:none!important}}
.rm .act,.no-js .act{height:auto}
.rm .pin,.no-js .pin{position:relative;height:auto;min-height:0;overflow:visible;padding-top:90px;padding-bottom:90px}
.rm .step,.no-js .step{opacity:1;visibility:visible;transform:none;margin-bottom:34px}
.rm .stack,.no-js .stack{display:block}
.rm .media,.no-js .media{position:relative;height:60vh;clip-path:none!important;transform:none!important}
.rm #hero .pin,.no-js #hero .pin{height:100svh;padding:0}
.rm .hero-stage,.no-js .hero-stage{display:none}
.rm #build .hud,.no-js #build .hud{position:relative;display:block;padding:40px var(--gut)}
.rm #interior .track,.no-js #interior .track{flex-direction:column;width:auto;transform:none}
.rm #interior .panel,.no-js #interior .panel{width:auto}
.rm #outdoor .intro,.no-js #outdoor .intro{position:relative;opacity:1;padding:60px var(--gut)}
.rm #outdoor .veil,.no-js #outdoor .veil{display:none}
.rm #sourcing .final,.rm #blissful .end,.no-js #sourcing .final,.no-js #blissful .end{position:relative;opacity:1;visibility:visible;padding:70px var(--gut)}
.rm #blissful .shot,.no-js #blissful .shot{position:relative;clip-path:none;height:56vh;margin-bottom:12px}
.rm #blissful .meta,.rm #blissful .chapters,.no-js #blissful .meta,.no-js #blissful .chapters{position:relative;inset:auto;padding:30px 0}
.rm #systems .vids,.no-js #systems .vids{height:60vh}.rm #systems .vids .v:first-child,.no-js #systems .vids .v:first-child{opacity:1}
.rm .layer,.no-js .layer{opacity:1;transform:translateZ(calc(var(--z) * 1px))}
.rm .wall-list li,.rm .chain li,.rm .moves li,.rm #sourcing .cats li,.no-js .wall-list li,.no-js .chain li,.no-js .moves li,.no-js #sourcing .cats li{color:var(--white);opacity:1}
.rm .rv,.no-js .rv{opacity:1;transform:none}
.rm #systems .idx,.rm #land .dim,.rm #build .bar,.rm #build .rail{display:none}

/* step overrides for elements that animate their own way */
#blissful .shots{position:absolute;inset:0}
.js #blissful .shot{opacity:1;visibility:visible;transform:none;transition:clip-path 1.1s var(--ease)}
.js .wall3d .layer{visibility:visible;opacity:0;transform:translateZ(calc(var(--z) * 1px + 260px));transition:transform 1s var(--ease),opacity .5s}
.js .wall3d .layer.is-active,.js .wall3d .layer.is-past{opacity:1;transform:translateZ(calc(var(--z) * 1px))}
.rm .wall3d .layer{opacity:1;transform:translateZ(calc(var(--z) * 1px))}
#systems .vids .v.on{opacity:1}

html{overflow-x:clip}
ol{list-style:none}
.stack{align-items:center}
#build .stages.stack,#xray .copy.stack{align-items:end}
#xray .copy.stack{align-items:center}
#land .plot{position:absolute;inset:12% 6%;width:88%;height:76%;opacity:.5}
#land .pl{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:1;vector-effect:non-scaling-stroke}
#land .pl.a{stroke-dashoffset:calc(1 - var(--p,0) * 5)}
#land .pl.b{stroke:var(--silver);stroke-dashoffset:calc(1.28 - var(--p,0) * 1.3)}
#land .plot text{font-family:var(--f-mono);font-size:11px;fill:var(--mute);letter-spacing:.14em}
#build .media video,#build .media img{filter:grayscale(var(--plan,0)) brightness(calc(1 - var(--plan,0) * .5)) contrast(calc(1 + var(--plan,0) * .25))}
#build .plan-grid{opacity:var(--plan,0);mask-image:none;background-size:100% 80px,calc(100%/16) 100%;background-image:linear-gradient(rgba(207,172,107,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(207,172,107,.16) 1px,transparent 1px)}
#build .title .h-lg{opacity:var(--title,1);transform:translateY(calc((1 - var(--title,1)) * -20px))}
.rm #land .pl{stroke-dashoffset:0}
.stack{grid-template-columns:minmax(0,1fr)}
#interior .track{align-items:center}
#interior .panel{position:relative;padding-left:34px;border-left:1px solid var(--line)}
#interior .panel.wide{border-left:0;padding-left:0}
#interior .panel[data-n]::before{content:attr(data-n);position:absolute;right:0;top:-.62em;font-family:var(--f-display);font-weight:900;font-stretch:66%;font-size:clamp(160px,24vw,420px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(207,172,107,.22);z-index:-1;pointer-events:none}
#outdoor .media img{object-position:50% 78%}
.xr-struct,.xr-fill{stroke:#9aa1a9;stroke-width:2.5}
.xr g[data-sys].was{opacity:.32}

#xray .pin,#sourcing .pin,#wall .pin,#roofs .pin,#systems .pin{align-content:center}
#systems .pin{align-content:stretch}
#sourcing .head .h-md{font-size:clamp(28px,3.4vw,56px)}
#sourcing .head .lead{font-size:clamp(15px,1.15vw,18px);max-width:52ch}
#sourcing .cats li{font-size:clamp(30px,4.1vw,70px)}
#blissful .chapters{transition:opacity .5s}#blissful.ended .chapters{opacity:0}
.layer{width:calc(100% - var(--i) * 6.5%);height:calc(100% - var(--i) * 6%)}
.wall3d{width:min(36vw,500px);height:min(54vh,500px)}

@media (max-width:820px){
  .hero-type .l1{font-size:inherit;width:auto}
  .hero-type .l1 span{display:block;width:max-content;margin:0 auto;font-size:38vw;line-height:.84}
  .hero-type .l2{margin-top:.12em}
  #systems .sys .btn{display:none}
  .wall-stage{height:34vh}
  .wall3d{left:22%;bottom:6%;width:300px;height:340px;transform-origin:0 100%;transform:scale(.6) rotateX(-14deg) rotateY(-38deg)}
}

@media (max-width:820px){
  #hero .pin{background:#16202f}
  .hero-layer{inset:19% -3% -3% -3%}
  .hero-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%);mask-image:linear-gradient(to bottom,transparent 0,#000 24%)}
  .hero-type{top:calc(var(--nav-h) + 2vh)}
}

/* ---- v2: legibility and call button ---- */
:root{--mute:#9a9ba1;--soft:#b6b7bc}
body{color:var(--white)}
.faq summary,.report ul li,.inv-rows li,.fields input,.fields select,.chips span,.moves .w,.chain li.on{color:var(--white)}
.note{color:#a2a3a9;font-size:14px}
#sourcing .cats li{color:rgba(255,255,255,.42)}
.wall-list li{color:rgba(255,255,255,.55)}
.chain li{color:rgba(255,255,255,.45)}
.moves li{opacity:.5}
#build .rail li{color:rgba(255,255,255,.62)}
#land .scope li{color:#8d8e94}
.inv-rows li span:last-child{color:#a9aab0}
.tags li{color:#d3d6da;border-color:rgba(255,255,255,.22)}
.call{border-color:var(--gold);color:var(--gold);transition:border-color .3s,background-color .3s,color .3s,min-width .4s var(--ease)}
.call .num{color:inherit}
.call:hover,.call:focus-visible{background:var(--red);border-color:var(--red);color:#fff}
.mbar a:first-child{color:var(--gold)}
#final .tel:hover{color:var(--red)}
.fgrid a[href^="tel"]{color:var(--gold)}.fgrid a[href^="tel"]:hover{color:var(--red)}
.report .wk{font-size:46px;white-space:nowrap}
#build .pin::before{content:"";position:absolute;inset:0 0 auto 0;height:34%;z-index:2;background:linear-gradient(to bottom,rgba(7,7,8,.72),transparent);pointer-events:none}
#build .title .mono{color:#e6e2d8}
@media (max-width:820px){#systems .sys .h-lg{font-size:9.2vw}#systems .sys .lead{font-size:14px;margin-top:10px}#systems .sys h3{margin-bottom:10px}}

/* ---- 01b Ce ne face diferiți ---- */
.diff{background:linear-gradient(180deg,#070708,#0d0d10);border-bottom:1px solid var(--line)}
.diff-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;align-items:end}
.folder{border:1px solid var(--line);background:#111114;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.folder header{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.folder header p:last-child{margin-left:auto}
.folder .dots{display:flex;gap:6px}.folder .dots i{width:9px;height:9px;border-radius:50%;background:#3a3b40}.folder .dots i:first-child{background:var(--red)}.folder .dots i:nth-child(2){background:var(--gold)}
.folder li{display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line-2);font-weight:600;font-size:17px;color:var(--white)}
.folder li:last-child{border-bottom:0}
.folder li em{grid-column:2;font-style:normal;font-weight:400;font-size:14px;color:var(--soft)}
.folder .ic{grid-row:1/3;width:30px;height:22px;background:var(--gold);clip-path:polygon(0 12%,38% 12%,48% 0,100% 0,100% 100%,0 100%);opacity:.9}
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(50px,8vh,100px)}
.promises li{background:#0b0b0d;padding:clamp(22px,2.6vw,40px)}
.promises .n{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--gold)}
.promises h3{font-family:var(--f-display);font-weight:800;font-stretch:78%;text-transform:uppercase;font-size:clamp(21px,1.9vw,30px);line-height:1.05;margin:14px 0 12px;color:var(--white)}
.promises p{color:var(--soft);font-size:16px}
.guarantee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:end;background:var(--gold);color:#0b0b0d;padding:clamp(26px,3.4vw,56px);margin-top:1px}
.guarantee .mono{color:#0b0b0d;margin-bottom:12px}
.guarantee p{font-size:clamp(17px,1.4vw,21px);max-width:48ch}
.btn-dark{background:#0b0b0d;color:#fff;margin-top:22px}.btn-dark:hover{background:var(--red)}
@media (max-width:820px){.diff-top,.guarantee{grid-template-columns:1fr;gap:34px}.promises{grid-template-columns:1fr}}
.guarantee .h-md{font-size:clamp(30px,4.2vw,70px);max-width:none}
.guarantee .mono{font-size:12px}

/* ---- Blissful facts + solutions ---- */
#blissful .facts{position:absolute;z-index:3;right:var(--gut);bottom:clamp(34px,7vh,80px);width:min(340px,30vw);background:rgba(7,7,8,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-top:2px solid var(--gold);padding:20px 22px;transition:opacity .5s}
#blissful.ended .facts{opacity:0}
.facts dl{margin:14px 0 4px}
.facts dl div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.facts dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.facts dd{font-weight:600;font-size:16px;color:var(--white)}
.facts .big dd{font-family:var(--f-display);font-weight:900;font-stretch:68%;font-size:44px;line-height:1;color:var(--gold);text-transform:uppercase}
.facts ul{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:15px;color:var(--white)}
.facts ul b{color:var(--gold);font-size:18px}
.facts .fnote{margin-top:12px;font-size:13px;color:var(--soft);line-height:1.4}
#blissful .chapters{right:calc(var(--gut) + min(360px,32vw))}
.solutions{background:#0c0c0e;border-bottom:1px solid var(--line)}
.solutions .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:6vw;align-items:end}
@media (max-width:820px){
  #blissful .facts{left:var(--gut);right:var(--gut);bottom:auto;top:calc(var(--nav-h) + 58px);width:auto;padding:12px 14px}
  .facts dl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:8px 0 0}
  .facts dl div{display:block;border:0;padding:0}
  .facts dd{font-size:13px}.facts .big dd{font-size:22px}
  .facts ul{margin-top:8px;font-size:13px}.facts ul b{font-size:14px}
  .facts .fnote{display:none}
  #blissful .chapters{right:var(--gut)}
  .solutions .wrap{grid-template-columns:1fr;gap:34px}
}
.rm #blissful .facts,.no-js #blissful .facts{position:relative;inset:auto;width:auto;margin:20px 0}

/* ---- hero v3: "Your Future Home" sits IN FRONT of the machine, on the dark ground, always readable ---- */
.hero-copy .l2{font-family:var(--f-display);font-weight:900;font-stretch:66%;text-transform:uppercase;line-height:.86;letter-spacing:-.012em;color:var(--gold);font-size:clamp(44px,8.4vw,170px);max-width:none;white-space:nowrap;margin-bottom:.22em;text-shadow:0 2px 0 rgba(0,0,0,.35),0 10px 50px rgba(0,0,0,.75)}
.hero-copy{align-items:flex-end}
.hero-haze{background:radial-gradient(60% 40% at 50% 100%,rgba(207,172,107,.10),transparent 70%),linear-gradient(to top,rgba(7,7,8,.94),rgba(7,7,8,.6) 26%,transparent 56%)}
#blissful .pin::before{content:"";position:absolute;inset:0 0 auto 0;height:30%;z-index:2;background:linear-gradient(to bottom,rgba(7,7,8,.7),transparent);pointer-events:none}
#blissful .meta .mono{color:#e6e2d8}
@media (max-width:820px){
  .hero-copy .l2{font-size:13.4vw;white-space:normal;margin-bottom:.2em}
  #blissful .meta{display:none}
  #blissful .facts{top:calc(var(--nav-h) + 14px)}
}

@media (min-width:821px){.hero-copy{display:block;position:absolute}.hero-copy .btn{position:absolute;right:0;bottom:0}}
@media (max-width:820px){.hero-copy{align-items:flex-start}}
.nav-links{gap:clamp(14px,2vw,32px)}

/* ---- language switch ---- */
.lang{display:inline-flex;height:44px;border:1px solid rgba(255,255,255,.28)}
.lang a{display:grid;place-items:center;min-width:42px;padding:0 10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--silver);transition:background-color .25s,color .25s}
.lang a:hover{color:var(--white)}
.lang a.on{background:var(--white);color:#0b0b0d;font-weight:500}
@media (max-width:820px){.lang{height:38px}.lang a{min-width:38px;padding:0 8px}}
.facts .big dd{white-space:nowrap;font-size:38px}
@media (max-width:820px){.facts .big dd{font-size:18px}}