/* ===== v2: black & gold, cinematic intro, stats, collage ===== */
:root:root:root{--bg:#0f0b09;--surface:#1a130f;--fg:#F1E8E1;--muted:#B4A398;--line:#33261d;--gold:#D4AF5F;--bar:#0f0b09;color-scheme:dark}
.bar{background:rgba(15,11,9,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hcta{box-shadow:0 0 0 0 rgba(212,175,95,.5);animation:glow 2.8s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(212,175,95,.0),0 6px 22px rgba(176,139,69,.25)}50%{box-shadow:0 0 0 7px rgba(212,175,95,.12),0 6px 26px rgba(176,139,69,.45)}}
.hero{background:radial-gradient(90% 60% at 50% 0%,#2a1b11 0%,#0f0b09 70%)}
.hero h1{background:linear-gradient(180deg,#fff 0%,#F0D58A 58%,#B08B45 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lat{font-family:var(--f-latin);letter-spacing:.42em;font-size:12.5px;color:var(--gold-bright);text-transform:uppercase;margin-bottom:12px;padding-inline-start:.42em}
/* story + stats */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.collage{position:relative;padding-bottom:18%}
.collage img{display:block;width:100%;height:auto;border-radius:20px;object-fit:cover;box-shadow:0 24px 60px rgba(0,0,0,.55);border:1px solid rgba(212,175,95,.25)}
.collage .a{aspect-ratio:4/3}
.collage .b{position:absolute;width:46%;aspect-ratio:3/4;inset-inline-end:-4%;bottom:0;border:3px solid var(--bg)}
.story h2{font-family:var(--f-hero);font-size:clamp(28px,4.6vw,44px);line-height:1.45;margin:6px 0 14px}
.story p{color:var(--muted);max-width:34em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.stat{text-align:center}
.stat b{display:block;font-family:var(--f-hero);font-size:clamp(30px,6vw,46px);line-height:1.2;color:var(--gold-bright);font-weight:700}
.stat span{font-size:13px;color:var(--muted)}
@media(max-width:800px){.story{grid-template-columns:1fr}}
/* service cards: full-bleed photo */
.svc a.card{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:18px;border:1px solid rgba(212,175,95,.22);transition:transform .35s,border-color .35s,box-shadow .35s}
.svc a.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.svc a.card .ph{position:absolute;inset:0;aspect-ratio:auto!important;border-radius:0!important}
.svc a.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.svc a.card:hover .ph img{transform:scale(1.06)}
.svc a.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,11,9,.15) 20%,rgba(15,11,9,.92) 100%);pointer-events:none}
.svc a.card .bd{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:18px}
.svc a.card h3{color:#fff;font-size:23px}
.svc a.card p{color:#d9cbbf;font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tier{font-family:var(--f-latin);letter-spacing:.34em;font-size:11px;color:var(--gold-bright);text-transform:uppercase}
.svc{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.hcta{animation:none}}
/* ===== intro v2 ===== */
#intro{position:fixed;inset:0;z-index:999;background:none;animation:none;perspective:none;overflow:hidden;display:block}
#intro .cur{position:absolute;top:0;bottom:0;width:50.2%;background:radial-gradient(120% 80% at 50% 40%,#241810 0%,#0b0806 75%);transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
#intro .cur.l{left:0}#intro .cur.r{right:0}
#intro.open .cur.l{transform:translateX(-101%)}#intro.open .cur.r{transform:translateX(101%)}
#intro .vl{position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(212,175,95,.55),transparent);transform:scaleY(0);transform-origin:50% 0;animation:vl 1.4s .1s ease-out forwards;z-index:2;transition:opacity .4s}
#intro.open .vl,#intro.open .stage{opacity:0}
@keyframes vl{to{transform:scaleY(1)}}
#intro .stage{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;transition:opacity .45s}
#intro .stage svg.tool{width:104px;height:104px;margin-bottom:10px;filter:drop-shadow(0 0 14px rgba(212,175,95,.3))}
#intro .tool path,#intro .tool rect{fill:none;stroke:#D4AF5F;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s .2s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
#intro .stage img{width:min(44vw,190px);height:auto;animation:fadeup 1s .5s ease-out both;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#intro .tg{font-family:var(--f-hero);color:#F3EAE2;font-size:17px;animation:fadeup 1s .9s ease-out both}
#intro .msg{height:22px;font-size:13px;color:#a99a8d;margin-top:14px;transition:opacity .25s}
#intro .bar2{width:min(52vw,210px);height:2px;background:rgba(212,175,95,.2);border-radius:2px;overflow:hidden}
#intro .bar2 i{display:block;height:100%;width:0;background:linear-gradient(270deg,#D4AF5F,#F0D58A);float:right}
#intro .pct{font-size:12px;color:#a99a8d;letter-spacing:.1em}
@media(prefers-reduced-motion:reduce){#intro{display:none}}

/* ===== v3 logo ===== */
.lk{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--gold);text-align:center}
.lk svg{width:clamp(130px,26vw,190px);height:auto;display:block}
.lk .ar{font-family:var(--f-hero);font-weight:700;font-size:clamp(50px,9vw,72px);line-height:1.1}
.lk .lat{font-family:var(--f-latin);letter-spacing:.5em;padding-inline-start:.5em;font-size:clamp(15px,3.4vw,20px);font-weight:600;color:var(--fg)}
.lk .sub{font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.hero .logo.lk{max-width:none;filter:none}
.flk{align-items:flex-start;gap:2px;margin-bottom:10px}
.flk svg{width:72px}.flk .ar{font-size:34px}.flk .lat{font-size:13px;padding-inline-start:0}
#intro .tool{width:112px;height:112px}
#intro .tool path{stroke-width:1.3}
#intro .lk.it{animation:fadeup 1s .6s ease-out both}
#intro .lk .ar{font-size:54px}
.hero .logo.lk{display:flex;flex-direction:column;align-items:center;width:100%;margin-inline:auto}
.hero .logo.lk svg{width:clamp(130px,26vw,190px)}
@media(max-width:800px){.hero .logo.lk{max-width:none;width:100%}}

/* QA fixes: no sideways scroll on tablets, header fits very small phones */
html{overflow-x:clip}
@media(min-width:600px){.collage .b{inset-inline-end:0}}
@media(max-width:360px){.bar .in{gap:8px}.hcta{padding:7px 10px;font-size:12px;gap:5px}.hcta .ic{width:15px;height:15px}.brand b{font-size:19px}.menu-btn{width:40px;height:40px}}

/* hero-story videos: big tour + small bedroom, tap goes to bedrooms */
.vids a{display:block;overflow:hidden;border-radius:20px;border:1px solid rgba(212,175,95,.25);box-shadow:0 24px 60px rgba(0,0,0,.55);background:#1a130f}
.vids video{display:block;width:100%;height:100%;object-fit:cover}
.vids .a{aspect-ratio:4/5}
.vids .b{position:absolute;width:40%;aspect-ratio:3/4;inset-inline-end:0;bottom:0;border:3px solid var(--bg);transition:transform .35s}
.vids .a,.vids .b{transition:transform .35s}
.vids a:hover{transform:translateY(-3px)}
.collage.vids{padding-bottom:16%}

/* back button */
.backbtn{position:fixed;right:14px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px 0 12px;border-radius:99px;border:1px solid rgba(212,175,95,.5);background:rgba(15,11,9,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--gold);font:600 14px var(--f-body,inherit);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.backbtn:active{transform:scale(.96)}
html{overscroll-behavior-x:auto}

/* WhatsApp on the left, back on the right */
.wa-fab{inset-inline-start:auto!important;right:auto!important;left:max(16px,env(safe-area-inset-left,0px))!important}
.backbtn{padding:0 12px 0 16px}
@media(min-width:900px){.backbtn{right:max(16px,env(safe-area-inset-right,0px))}}