:root{
  --bg:#0b0d10;
  --bg-soft:#10141a;
  --bg-elev:#151a21;
  --glass:rgba(17,22,28,.72);
  --glass-2:rgba(20,26,33,.88);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(210,181,107,.24);
  --text:#eef2f6;
  --muted:#98a6b5;
  --gold:#d2b56b;
  --gold-2:#f1dfae;
  --shadow:0 22px 60px rgba(0,0,0,.42);
  --radius:22px;
  --container:min(1200px,calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top right, rgba(210,181,107,.10), transparent 18%), radial-gradient(circle at left 20%, rgba(86,114,143,.12), transparent 24%), linear-gradient(180deg,#0a0c0f 0%,#0c1014 36%,#0b0d10 100%);color:var(--text);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img,video{max-width:100%;display:block}
.container{width:var(--container);margin:auto}
.section{padding:88px 0;position:relative}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid{display:grid;gap:24px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.badge{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--line-strong);background:rgba(10,13,17,.58);border-radius:999px;color:var(--gold-2);font-size:11px;letter-spacing:.18em;text-transform:uppercase;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.badge:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-2));box-shadow:0 0 16px rgba(210,181,107,.65)}
.kicker{color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.20em;font-weight:700;margin-bottom:12px}
h1,h2,h3,h4{line-height:1.12;margin:0 0 14px;font-weight:650;letter-spacing:-.03em}
h1{font-size:clamp(34px,4vw,56px);max-width:13ch}
h2{font-size:clamp(28px,3.3vw,40px);max-width:18ch}
h3{font-size:22px}
p{margin:0 0 16px;color:var(--muted)}
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,11,15,.86) 0%,rgba(8,11,15,.58) 40%,rgba(8,11,15,.82) 100%);z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 10%, rgba(210,181,107,.12), transparent 28%), radial-gradient(circle at 20% 20%, rgba(255,255,255,.04), transparent 22%);z-index:0}
.hero-media,.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.hero .gridlines,.blueprint-overlay{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(210,181,107,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(210,181,107,.08) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 88%);opacity:.22}
.hero .content{position:relative;z-index:1;padding:124px 0 70px;display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:end}
.hero p.lead{font-size:16px;max-width:52ch;color:#c4d0db}
.page-hero{padding:122px 0 54px;min-height:42vh;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero .bg{position:absolute;inset:0;background:center/cover no-repeat;opacity:.42;transform:scale(1.03)}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,11,15,.90) 0%,rgba(8,11,15,.68) 40%,rgba(8,11,15,.86) 100%)}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-size:clamp(26px,3vw,38px);max-width:16ch;margin-bottom:10px}
.page-hero .lead{font-size:15px;max-width:56ch;color:#c0ccd7}
.crumbs{display:flex;gap:10px;align-items:center;color:#95a3b2;font-size:14px;flex-wrap:wrap;margin-bottom:14px}.crumbs span{opacity:.45}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));color:var(--text);font-weight:700;transition:.3s ease;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.btn:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 18px 36px rgba(0,0,0,.28)}
.btn.primary{background:linear-gradient(135deg,var(--gold),#b9943f);color:#0d1014;border-color:transparent;box-shadow:0 18px 34px rgba(210,181,107,.20)}
.btn.primary:hover{box-shadow:0 22px 40px rgba(210,181,107,.28)}
.glass,.card,.project-card,.timeline-card,.quote-box,.stats-card,.hero-panel,.map-box,.testimonial,.panel,.metric{background:linear-gradient(180deg,rgba(20,26,33,.90),rgba(14,19,25,.78));backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}
.panel,.stats-card,.hero-panel,.map-box,.metric,.testimonial{padding:24px}
.hero-panel h3{font-size:24px;max-width:14ch}.hero-panel p,.quote-box p{color:#a6b4c2}.hero-panel .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.hero-panel strong{display:block;font-size:28px;color:#fff}.hero-panel span{font-size:13px;color:var(--muted)}
.navbar{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(10,13,17,.54);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s ease}.navbar.scrolled{background:rgba(10,13,17,.84);border-bottom-color:var(--line);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.nav-inner{width:var(--container);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:16px 0}.brand-logo{height:44px;width:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.28))}
.nav-links{display:flex;gap:22px;align-items:center}.nav-links a{font-size:15px;color:#dbe5ee;opacity:.88;transition:.25s ease}.nav-links a:hover{opacity:1;color:#fff}.mobile-toggle{display:none;background:none;border:1px solid var(--line);padding:10px 14px;border-radius:12px;color:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}
.card,.project-card,.timeline-card,.blog-card{padding:18px;transition:.35s ease;position:relative;overflow:hidden}.card:hover,.project-card:hover,.timeline-card:hover,.blog-card:hover{transform:translateY(-8px);border-color:var(--line-strong);box-shadow:0 28px 55px rgba(0,0,0,.40)}
.card::before,.project-card::before,.timeline-card::before,.quote-box::before,.map-box::before,.hero-panel::before{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:radial-gradient(circle, rgba(210,181,107,.16), transparent 68%);pointer-events:none}
.card img,.project-card img,.detail-shot img,.split .media img{border-radius:18px;border:1px solid rgba(255,255,255,.05);margin-bottom:18px;width:100%;object-fit:cover}
.icon{width:54px;height:54px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));display:grid;place-items:center;font-size:24px;margin-bottom:16px;color:var(--gold);border:1px solid var(--line-strong)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.split .media{position:relative}.float-card{position:absolute;right:-18px;bottom:22px;padding:18px 20px;max-width:260px}
.list{display:grid;gap:10px;padding:0;margin:18px 0 0;list-style:none}.list li{display:flex;gap:12px;color:#c4cfda}.list li:before{content:"✓";color:var(--gold);font-weight:800}
.metric{text-align:center}.metric strong{display:block;font-size:42px;color:#fff}.metric span{font-size:14px;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.project-card .tag,.blog-card .tag{display:inline-block;padding:8px 12px;background:rgba(210,181,107,.10);border:1px solid var(--line-strong);border-radius:999px;font-size:12px;color:var(--gold-2);margin-bottom:14px}
.before-after{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/9;background:#151a21}.before-after .layer{position:absolute;inset:0;background-size:cover;background-position:center}.before-after .after{clip-path:inset(0 0 0 var(--ba-split))}.before-after .divider{position:absolute;top:0;bottom:0;left:var(--ba-split);width:3px;background:var(--gold);box-shadow:0 0 18px rgba(210,181,107,.7)}.before-after .handle{position:absolute;left:calc(var(--ba-split) - 25px);top:calc(50% - 25px);width:50px;height:50px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#111;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.35)}.before-after .label{position:absolute;top:18px;padding:10px 14px;border-radius:999px;background:rgba(10,13,17,.72);border:1px solid var(--line);font-weight:700;color:#fff;backdrop-filter:blur(12px)}.before-after .label.before{left:18px}.before-after .label.after{right:18px}
.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.timeline-card .step{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.quote-box{padding:34px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}.form{display:grid;gap:14px}.input{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:16px 18px;font:inherit;outline:none}.input::placeholder{color:#7f8b98}.input:focus{border-color:var(--line-strong);box-shadow:0 0 0 4px rgba(210,181,107,.08)}
.map-box{min-height:100%;padding:28px;background:linear-gradient(180deg,rgba(20,26,33,.94),rgba(14,19,25,.82))}.map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.map-tile{padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.portfolio-toolbar{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:center;margin-bottom:28px}.portfolio-filter{display:flex;gap:10px;flex-wrap:wrap}.chip{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#d8e1ea;border-radius:999px;padding:11px 16px;font:inherit;cursor:pointer;transition:.25s ease}.chip:hover,.chip.active{background:rgba(210,181,107,.12);border-color:var(--line-strong);color:#fff}.portfolio-count{color:#c2cfda}
.detail-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.detail-gallery.three-up{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-shot{overflow:hidden}.shot-copy{padding:16px 18px;display:grid;gap:6px}.shot-copy strong{color:#fff}.shot-copy span{color:var(--muted);font-size:14px}
.service-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}.service-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}.service-meta .metric{padding:18px}
.premium-service-card{position:relative;overflow:hidden}.service-badge{display:flex;align-items:center;gap:12px;margin-bottom:8px;color:#e5edf6}.service-badge .icon{width:42px;height:42px;font-size:18px;margin-bottom:0}.compact{gap:8px}.icon-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.icon-feature{padding:24px}
.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center}footer{padding:26px 0;border-top:1px solid var(--line);color:var(--muted);background:rgba(8,11,15,.74);backdrop-filter:blur(10px)}.footer-credit a{color:#fff}
.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:45;padding:14px 18px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#b9943f);color:#0c1014;font-weight:800;box-shadow:0 18px 34px rgba(210,181,107,.24)}
.loading-screen{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:radial-gradient(circle at top, rgba(210,181,107,.16), transparent 22%), radial-gradient(circle at left center, rgba(77,102,130,.14), transparent 24%), linear-gradient(180deg,#090b0e 0%,#0d1116 100%);transition:.55s ease}.loading-screen.hidden{opacity:0;visibility:hidden}.loading-screen:before,.loading-screen:after{content:'';position:absolute;inset:0;pointer-events:none}.loading-screen:before{background:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 88px), repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 88px);opacity:.28}.loading-screen:after{background:radial-gradient(circle, rgba(210,181,107,.18), transparent 56%);filter:blur(28px)}.loader-ornament{position:absolute;inset:50%;width:min(48vw,520px);height:min(48vw,520px);transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(210,181,107,.18);box-shadow:0 0 0 24px rgba(255,255,255,.02),0 0 0 56px rgba(210,181,107,.03);animation:ornamentPulse 3.2s ease-in-out infinite}.loader-box{position:relative;z-index:2;text-align:center}.loader-logo-wrap{width:148px;height:148px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.08), rgba(255,255,255,.02) 50%, rgba(210,181,107,.10) 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 70px rgba(0,0,0,.45), 0 0 0 10px rgba(255,255,255,.02);backdrop-filter:blur(12px)}.loader-logo{width:112px;height:auto;filter:drop-shadow(0 0 28px rgba(255,255,255,.1))}.loader-box h3{letter-spacing:.38em;font-weight:700;margin:0 0 8px;color:#fff}.loader-sub{color:#93a2b2;max-width:360px;margin:0 auto}.progress{width:260px;height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin:22px auto 0;border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 24px rgba(0,0,0,.24)}.progress span{display:block;height:100%;width:68%;background:linear-gradient(90deg,#88661f 0%, var(--gold) 45%, #f6e9c3 100%);position:relative;animation:progressMove 1.8s ease-in-out infinite alternate}.progress span:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 1.4s linear infinite}
.reveal{opacity:0;transform:translateY(26px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}
.is-hidden{display:none!important}
body.page-entering{overflow:hidden}.hero,.page-hero{will-change:transform,opacity;transform-origin:center top}body.page-entering .hero,body.page-entering .page-hero{animation:heroWaveRise 1.15s cubic-bezier(.2,.8,.18,1) both}body.page-entering .hero .content,body.page-entering .page-hero .container{animation:heroContentFloat 1.1s cubic-bezier(.2,.8,.2,1) both .08s}.hero-ripple-overlay{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;opacity:1;transition:opacity .45s ease}.hero-ripple-overlay.hidden{opacity:0}.hero-ripple-overlay::before,.hero-ripple-overlay::after{content:"";position:absolute;left:50%;top:24vh;transform:translate(-50%,-50%) scale(.02);border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(210,181,107,.16) 15%, rgba(210,181,107,.08) 34%, rgba(255,255,255,.03) 50%, rgba(255,255,255,0) 63%);mix-blend-mode:screen;filter:blur(2px);animation:rippleBurst 1.15s cubic-bezier(.16,.84,.22,1) forwards}.hero-ripple-overlay::after{width:28vmax;height:28vmax;border:1px solid rgba(255,255,255,.18);background:none;box-shadow:0 0 0 14px rgba(210,181,107,.08),0 0 0 30px rgba(255,255,255,.03);animation:waveRing 1.25s cubic-bezier(.16,.84,.22,1) forwards}.hero-ripple-overlay .wave-ring,.hero-ripple-overlay .wave-ring-2{position:absolute;left:50%;top:24vh;border-radius:50%;transform:translate(-50%,-50%) scale(.02);border:1px solid rgba(210,181,107,.18);box-shadow:0 0 0 12px rgba(255,255,255,.025);animation:waveRing 1.28s cubic-bezier(.16,.84,.22,1) forwards}.hero-ripple-overlay .wave-ring{width:22vmax;height:22vmax}.hero-ripple-overlay .wave-ring-2{width:36vmax;height:36vmax;animation-delay:.08s;opacity:.8}.hero-ripple-overlay .liquid-mask{position:absolute;inset:0;background:radial-gradient(circle at 50% 24vh, rgba(255,255,255,.10), rgba(210,181,107,.06) 10%, rgba(11,14,18,.24) 25%, rgba(11,14,18,.72) 48%, rgba(11,14,18,.96) 64%, rgba(11,14,18,1) 100%);animation:liquidReveal 1.18s cubic-bezier(.18,.88,.2,1) forwards}
@keyframes heroWaveRise{0%{opacity:.2;transform:translateY(42px) scale(1.03)}55%{opacity:1;transform:translateY(0) scale(1.012)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes heroContentFloat{0%{opacity:0;transform:translateY(38px)}100%{opacity:1;transform:none}}
@keyframes rippleBurst{0%{width:8vmax;height:8vmax;opacity:.0}18%{opacity:1}100%{width:180vmax;height:180vmax;opacity:0}}
@keyframes waveRing{0%{opacity:.8;transform:translate(-50%,-50%) scale(.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(7.8)}}
@keyframes liquidReveal{0%{clip-path:circle(0% at 50% 24vh);opacity:1}70%{clip-path:circle(52% at 50% 24vh);opacity:.95}100%{clip-path:circle(130% at 50% 24vh);opacity:0}}
@keyframes ornamentPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes progressMove{from{width:45%}to{width:85%}}
@media (max-width:980px){
  .hero .content,.split,.contact-grid,.service-hero-grid,.two,.three,.four,.project-grid,.blog-grid,.timeline,.footer-grid,.section-head,.portfolio-toolbar,.icon-feature-grid,.detail-gallery,.detail-gallery.three-up{grid-template-columns:1fr;display:grid}
  .hero{min-height:auto}.hero .content{padding:112px 0 56px}.hero-panel .mini,.service-meta,.map-grid{grid-template-columns:1fr}
  h1,.hero h1,.page-hero h1{max-width:100%}
  .nav-links{position:absolute;left:20px;right:20px;top:74px;padding:16px;border-radius:18px;background:rgba(10,13,17,.96);border:1px solid var(--line);display:none;flex-direction:column;align-items:flex-start;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}.mobile-toggle{display:inline-flex}
  .quote-box{flex-direction:column;align-items:flex-start}.float-card{position:static;margin-top:16px}.brand-logo{height:34px}.section{padding:74px 0}
}


.before-after-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.ba-card{padding:18px}
.ba-card h3{margin-top:16px}
.ba-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ba-meta span{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#c7d2dc;font-size:12px}
.service-proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.proof-card{padding:20px}
.proof-card .before-after{margin-top:16px;aspect-ratio:4/3}
.rich-copy{max-width:72ch}
.spec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.spec-item{padding:18px}
.spec-item strong{display:block;font-size:15px;color:#fff;margin-bottom:6px}
.project-story{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.project-checklist{display:grid;gap:12px;margin-top:18px}
.project-checklist div{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:#c7d2dc}
@media (max-width:980px){.before-after-grid,.service-proof-grid,.spec-grid,.project-story{grid-template-columns:1fr}}


/* v10 refinements */
.before-after .label{z-index:3;white-space:nowrap;min-width:88px;text-align:center;padding:10px 16px}
.before-after .label.after{right:14px}
.before-after .label.before{left:14px}
@media (max-width:640px){.before-after .label{font-size:12px;min-width:76px;padding:8px 12px}.before-after .label.after{right:10px}.before-after .label.before{left:10px}}
.loading-screen{background:radial-gradient(circle at 50% 30%, rgba(210,181,107,.10), transparent 20%),radial-gradient(circle at 18% 18%, rgba(125,151,180,.08), transparent 22%),linear-gradient(180deg,#0b0f13 0%,#10161d 52%,#0b0d10 100%)}
.loader-ornament{border-color:rgba(210,181,107,.14);box-shadow:0 0 0 24px rgba(255,255,255,.018),0 0 0 58px rgba(210,181,107,.025)}
.loader-logo-wrap{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.07);box-shadow:0 22px 58px rgba(0,0,0,.42), 0 0 0 10px rgba(255,255,255,.015)}
.loader-sub{color:#a6b4c2}
.progress{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.06)}
.progress span{background:linear-gradient(90deg,#7e6540 0%, #b99855 42%, #e3cf98 100%)}
.logo-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:30px}
.logo-chip{display:grid;place-items:center;min-height:78px;padding:16px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));color:#dbe5ef;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.logo-chip small{display:block;color:var(--muted);font-size:11px;letter-spacing:.14em;margin-top:4px}
.disclosure-note{margin-top:16px;color:#8f9baa;font-size:13px}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.review-card{padding:22px;position:relative}
.review-stars{color:var(--gold-2);letter-spacing:.22em;font-size:14px;margin-bottom:14px}
.review-source{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.rating-badge{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(210,181,107,.08);color:var(--gold-2);font-weight:700}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}
.form-success{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(210,181,107,.08);color:#efe6ca;display:none}
.form-success.show{display:block}
.inline-note{font-size:13px;color:#8e9aa7}
@media (max-width:980px){.logo-strip,.review-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.logo-strip,.review-grid{grid-template-columns:1fr}}


/* v12 mobile bottom nav + facade colors */
.mobile-bottom-nav{display:none}
@media (max-width:980px){
  body{padding-bottom:86px}
  .whatsapp-float{bottom:96px}
  .mobile-bottom-nav{position:fixed;left:12px;right:12px;bottom:10px;z-index:70;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px;background:rgba(10,13,17,.86);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.35);border-radius:24px}
  .mobile-bottom-nav a{display:grid;justify-items:center;gap:5px;padding:8px 4px;color:#dce4ec;text-decoration:none;font-size:11px;font-weight:700}
  .mobile-bottom-nav svg{width:22px;height:22px;stroke:var(--gold-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.96}
  .mobile-bottom-nav a.active{background:rgba(210,181,107,.12);border-radius:18px;color:#fff}
  .mobile-bottom-nav a.active svg{filter:drop-shadow(0 0 8px rgba(210,181,107,.22))}
}
.facade-home-link .media{position:relative}
.swatch-preview-row{display:flex;gap:10px;position:absolute;left:20px;right:20px;bottom:20px;justify-content:center;padding:12px 14px;border-radius:999px;background:rgba(10,13,17,.58);backdrop-filter:blur(12px);border:1px solid var(--line)}
.swatch-preview-row span{width:18px;height:18px;border-radius:50%;display:block;border:2px solid rgba(255,255,255,.65);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.facade-layout{align-items:start}
.facade-tool{padding:18px;border-radius:26px;overflow:hidden}
.facade-stage{padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(182,205,224,.14),rgba(240,236,227,.04) 46%,rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06)}
.villa-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 40px rgba(0,0,0,.18))}
.facade-controls{display:grid;gap:14px;padding:18px 6px 4px}
.facade-head{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#e8edf3}
.facade-head span,.swatch-caption{color:var(--muted);font-size:14px}
.swatch-row{display:flex;flex-wrap:wrap;gap:12px}
.swatch{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.74);background:var(--sw);box-shadow:0 14px 30px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.16);cursor:pointer;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.swatch:hover,.swatch.active{transform:translateY(-3px) scale(1.04);border-color:var(--gold-2);box-shadow:0 16px 34px rgba(0,0,0,.24),0 0 0 5px rgba(210,181,107,.12)}
#facade-main,#facade-accent,#facade-accent-2,#column-left,#column-right,#base-line{transition:fill .32s ease, opacity .32s ease}
@media (max-width:980px){.facade-tool{padding:14px}.swatch{width:40px;height:40px}.swatch-preview-row{left:12px;right:12px;bottom:12px}}


.villa-photo-stage{padding:14px;background:linear-gradient(180deg,rgba(182,205,224,.14),rgba(240,236,227,.04) 46%,rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06)}
.villa-photo-shell{position:relative;border-radius:22px;overflow:hidden;min-height:620px;background:#0f1419;box-shadow:0 28px 44px rgba(0,0,0,.22)}
.villa-photo{display:block;width:100%;height:100%;min-height:620px;object-fit:cover;object-position:center center;filter:saturate(1.02) contrast(1.01)}
.villa-photo-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wall-overlay-group{mix-blend-mode:multiply;transform-origin:center center;transition:transform .35s ease}
#photo-facade-main,#photo-facade-side,#photo-facade-trim{transition:fill .32s ease, opacity .32s ease, filter .32s ease}
.preview-badge{position:absolute;left:18px;top:18px;padding:12px 14px;border-radius:16px;display:grid;gap:4px;background:rgba(12,16,22,.56);border:1px solid rgba(255,255,255,.10);box-shadow:0 16px 36px rgba(0,0,0,.22)}
.preview-badge span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#d6dde6}
.preview-badge strong{font-size:14px;color:#fff}
.facade-link-card{margin-top:18px;padding:16px 18px;border-radius:18px}
.facade-link-card strong{display:block;color:#fff;margin:2px 0 8px}
.facade-link-card p{margin:0}
@media (max-width:980px){.villa-photo-shell,.villa-photo{min-height:480px}.preview-badge{left:14px;top:14px;padding:10px 12px}}
@media (max-width:640px){.villa-photo-shell,.villa-photo{min-height:380px}.preview-badge strong{font-size:13px}}


/* facade v14 image switch */

.villa-photo-shell{position:relative;overflow:hidden}
.facade-image-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(180deg,rgba(11,15,19,.74),rgba(11,15,19,.52));backdrop-filter:blur(4px);z-index:3;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease}
.facade-image-loader.show{opacity:1;visibility:visible}
.facade-loader-spinner{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.16);border-top-color:var(--gold);animation:facadeSpin .8s linear infinite}
.facade-image-loader span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#f4f0e7}
@keyframes facadeSpin{to{transform:rotate(360deg)}}
#facade-preview-image{transition:opacity .24s ease, transform .34s ease, filter .34s ease}
#facade-preview-image.is-switching{opacity:.42;transform:scale(1.015);filter:saturate(.96)}


.spec-item span{display:block;color:var(--muted);line-height:1.7}
.detail-gallery.three-up .detail-shot img{aspect-ratio:4/3;object-fit:cover;width:100%}


/* v26 contact + mobile drawer */
body.menu-open{overflow:hidden}
.nav-socials{display:flex;align-items:center;gap:10px;margin-left:10px}
.nav-socials a{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#eef2f6;font-size:13px;font-weight:600}
.nav-socials svg{width:16px;height:16px;stroke:var(--gold-2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.contact-info-stack{display:grid;gap:16px;margin-top:24px}
.contact-info-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:flex-start}
.contact-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;border:1px solid var(--line-strong);background:rgba(210,181,107,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.contact-icon svg{width:24px;height:24px;stroke:var(--gold-2);fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.text-link{color:#fff;font-weight:600}
.contact-form-wrap{padding:28px}
.contact-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.contact-form-lux{display:grid;gap:18px}
.form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-submit-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.map-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:stretch}
.quote-card-lux,.map-card{padding:28px}
.quote-points{list-style:none;padding:0;margin:20px 0 22px;display:grid;gap:12px}
.quote-points li{padding:14px 16px 14px 44px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:#d7e0e8;position:relative}
.quote-points li:before{content:"";position:absolute;left:16px;top:17px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-2));box-shadow:0 0 0 5px rgba(210,181,107,.10)}
.map-frame{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0c1014;min-height:420px}
.map-frame iframe{width:100%;height:100%;min-height:420px;border:0;display:block;filter:grayscale(.1) contrast(1.04)}
@media (max-width:980px){
  .nav-links{left:auto;right:0;top:0;bottom:0;width:min(370px,88vw);padding:90px 20px 24px;border-radius:28px 0 0 28px;background:rgba(10,13,17,.985);display:flex;transform:translateX(108%);transition:transform .34s ease, opacity .28s ease;opacity:0;z-index:80;align-items:stretch}
  .nav-links.open{display:flex;transform:translateX(0);opacity:1}
  .nav-links a{width:100%;padding:12px 4px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.05)}
  .nav-socials{margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr}
  .nav-socials a{justify-content:center;padding:12px 14px}
  .mobile-toggle{position:relative;z-index:90}
  .contact-form-wrap,.quote-card-lux,.map-card{padding:22px}
  .form-grid.two,.map-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .contact-info-card{grid-template-columns:1fr}
  .contact-icon{width:48px;height:48px}
  .contact-card-head,.contact-submit-row{flex-direction:column;align-items:flex-start}
  .map-frame,.map-frame iframe{min-height:340px}
}


/* v27 cleaner mobile drawer */
.menu-backdrop{position:fixed;inset:0;background:rgba(3,6,10,.58);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .28s ease, visibility .28s ease;z-index:78}
body.menu-open .menu-backdrop{opacity:1;visibility:visible}
.menu-close{display:none}
@media (max-width:980px){
  .nav-inner{position:relative}
  .nav-links{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(380px,86vw);height:100dvh;padding:84px 22px 28px;border-radius:28px 0 0 28px;border-left:1px solid rgba(255,255,255,.08);border-top:0;border-right:0;border-bottom:0;background:linear-gradient(180deg,rgba(10,13,17,.99),rgba(14,18,24,.985));box-shadow:-24px 0 60px rgba(0,0,0,.42);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;gap:0;align-items:stretch}
  .nav-links a{display:flex;align-items:center;min-height:54px;padding:14px 8px;font-size:16px;font-weight:600;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav-links a:last-of-type{border-bottom:1px solid rgba(255,255,255,.06)}
  .nav-links a:hover{padding-left:14px;background:rgba(255,255,255,.025)}
  .nav-socials{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .nav-socials a{min-height:50px;border-radius:16px;background:rgba(255,255,255,.04)}
  .mobile-toggle{min-width:52px;justify-content:center;padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.04)}
  .menu-close{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#fff;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.24)}
  .menu-close:hover{background:rgba(255,255,255,.08)}
}


/* v29 loader, mobile menu and before/after fixes */
.loading-screen{display:flex;align-items:center;justify-content:center;padding:24px}
.loader-box{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2;text-align:center;width:min(90vw,420px);margin:0 auto}
.loader-logo-wrap{position:relative;isolation:isolate}
.loader-logo-wrap::before,.loader-logo-wrap::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.loader-logo-wrap::before{width:178px;height:178px;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 18px rgba(255,255,255,.02)}
.loader-logo-wrap::after{width:236px;height:236px;border:1px solid rgba(210,181,107,.16);box-shadow:0 0 0 24px rgba(210,181,107,.03)}
.loader-ornament{left:50%;top:50%;inset:auto;width:min(58vw,360px);height:min(58vw,360px);transform:translate(-50%,-50%);z-index:1}

.before-after .label{display:inline-flex;align-items:center;justify-content:center;min-width:96px;max-width:none;padding:10px 18px;line-height:1.1}
.before-after .label.after{right:18px}
.before-after .label.before{left:18px}
@media (max-width:640px){
  .before-after .label{font-size:12px;min-width:82px;padding:8px 14px}
  .before-after .label.after{right:12px}
  .before-after .label.before{left:12px}
}

@media (max-width:980px){
  .nav-links{visibility:hidden;pointer-events:none;opacity:0;transform:translateX(108%)}
  .nav-links.open,body.menu-open .nav-links{visibility:visible;pointer-events:auto;opacity:1;transform:translateX(0);display:flex}
  .nav-links a{color:#f5f7fa!important;opacity:1!important;position:relative;z-index:2}
  .nav-links .nav-socials,.nav-links .menu-close{position:relative;z-index:2}
  .nav-links::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,17,.985),rgba(14,18,24,.985));border-radius:28px 0 0 28px;z-index:0}
}


/* v30 final mobile drawer + loader center fix */
@media (max-width:980px){
  .nav-links{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:0 !important;
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    width:min(380px,88vw) !important;
    height:100dvh !important;
    padding:84px 22px 28px !important;
    background:#0d1117 !important;
    background-image:linear-gradient(180deg,rgba(14,18,24,.995),rgba(10,13,17,.995)) !important;
    border-left:1px solid rgba(255,255,255,.08) !important;
    border-radius:28px 0 0 28px !important;
    box-shadow:-24px 0 60px rgba(0,0,0,.48) !important;
    isolation:isolate;
    z-index:85 !important;
    visibility:hidden;
    pointer-events:none;
    opacity:0;
    transform:translateX(108%);
    overflow-y:auto;
  }
  .nav-links::before{display:none !important}
  .nav-links.open, body.menu-open .nav-links{
    visibility:visible !important;
    pointer-events:auto !important;
    opacity:1 !important;
    transform:translateX(0) !important;
  }
  .nav-links > *{position:relative;z-index:2}
  .nav-links a{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:56px !important;
    padding:14px 8px !important;
    color:#f7f9fc !important;
    opacity:1 !important;
    font-size:16px !important;
    font-weight:600 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    text-shadow:0 1px 0 rgba(0,0,0,.22);
  }
  .nav-links a span{color:#f7f9fc !important; opacity:1 !important}
  .nav-socials{display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08)}
  .nav-socials a{justify-content:center !important; min-height:52px; background:rgba(255,255,255,.045) !important; border:1px solid rgba(255,255,255,.08) !important}
  .nav-socials svg{stroke:#f1dfae !important}
  .menu-close{z-index:3 !important}
  .menu-backdrop{z-index:82 !important; background:rgba(2,5,9,.72) !important; backdrop-filter:blur(8px) !important}
}

.loading-screen{
  display:grid !important;
  place-items:center !important;
}
.loader-box{
  position:relative !important;
  z-index:3 !important;
  width:min(90vw,420px) !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
.loader-logo-wrap{
  width:148px !important;
  height:148px !important;
  margin:0 auto 18px !important;
  display:grid !important;
  place-items:center !important;
}
.loader-logo-wrap::before,
.loader-logo-wrap::after{
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
}
.loader-ornament{
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  inset:auto !important;
  transform:translate(-50%,-50%) !important;
  width:min(58vw,360px) !important;
  height:min(58vw,360px) !important;
  animation:none !important;
}
.progress{margin-left:auto !important; margin-right:auto !important}


/* v31 strong menu + cleaner loader */
@media (max-width:980px){
  .menu-backdrop{
    z-index:120 !important;
    background:rgba(2,6,10,.52) !important;
    backdrop-filter:blur(7px) saturate(.9) !important;
  }
  .nav-links{
    z-index:130 !important;
    width:min(392px,88vw) !important;
    padding:88px 24px 30px !important;
    background:#0c1117 !important;
    background-image:linear-gradient(180deg,#111821 0%,#0b1016 100%) !important;
    border-left:1px solid rgba(255,255,255,.09) !important;
    border-radius:28px 0 0 28px !important;
    box-shadow:-30px 0 80px rgba(0,0,0,.56) !important;
    visibility:hidden !important;
    opacity:0 !important;
    transform:translateX(108%) !important;
    pointer-events:none !important;
  }
  .nav-links.open{
    visibility:visible !important;
    opacity:1 !important;
    transform:translateX(0) !important;
    pointer-events:auto !important;
  }
  .nav-links > a,
  .nav-links > .nav-socials,
  .nav-links > .menu-close{
    opacity:0;
    transform:translateX(24px);
    transition:transform .34s ease, opacity .28s ease, background .25s ease, padding-left .25s ease;
  }
  .nav-links.open > a,
  .nav-links.open > .nav-socials,
  .nav-links.open > .menu-close{
    opacity:1;
    transform:translateX(0);
  }
  .nav-links > a:nth-of-type(1){transition-delay:.05s}
  .nav-links > a:nth-of-type(2){transition-delay:.08s}
  .nav-links > a:nth-of-type(3){transition-delay:.11s}
  .nav-links > a:nth-of-type(4){transition-delay:.14s}
  .nav-links > a:nth-of-type(5){transition-delay:.17s}
  .nav-links > a:nth-of-type(6){transition-delay:.20s}
  .nav-links > a:nth-of-type(7){transition-delay:.23s}
  .nav-links > a:nth-of-type(8){transition-delay:.26s}
  .nav-links > .nav-socials{transition-delay:.30s}
  .nav-links > a{
    color:#ffffff !important;
    text-shadow:none !important;
    font-size:17px !important;
    font-weight:700 !important;
    letter-spacing:.01em;
    min-height:58px !important;
    padding:15px 10px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    border-radius:14px;
    margin-bottom:2px;
  }
  .nav-links > a:hover,
  .nav-links > a:focus-visible{
    background:rgba(255,255,255,.05) !important;
    padding-left:16px !important;
    outline:none;
  }
  .menu-close{
    display:inline-flex !important;
    z-index:131 !important;
    background:rgba(255,255,255,.05) !important;
  }
  .nav-socials{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    margin-top:18px !important;
    padding-top:18px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  .nav-socials a{
    color:#fff !important;
    min-height:54px !important;
    padding:12px 14px !important;
    background:rgba(255,255,255,.05) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:16px !important;
  }
  .nav-socials span{color:#fff !important; opacity:1 !important; display:inline !important}
  .nav-socials svg{stroke:#f1dfae !important}
  .mobile-toggle{
    position:relative;
    z-index:110 !important;
  }
}

.loading-screen{
  display:grid !important;
  place-items:center !important;
  overflow:hidden;
}
.loader-box{
  width:min(90vw,420px) !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.loader-logo-wrap{
  position:relative !important;
  width:152px !important;
  height:152px !important;
  margin:0 auto 20px !important;
  display:grid !important;
  place-items:center !important;
}
.loader-logo-wrap::before,
.loader-logo-wrap::after{
  content:"";
  position:absolute;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50%;
}
.loader-logo-wrap::before{
  width:176px;
  height:176px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 0 0 14px rgba(255,255,255,.025);
  animation:loaderRingSpin 7s linear infinite;
}
.loader-logo-wrap::after{
  width:228px;
  height:228px;
  border:1px solid rgba(210,181,107,.16);
  box-shadow:0 0 0 18px rgba(210,181,107,.035);
  animation:loaderRingSpinReverse 10s linear infinite;
}
.loader-ornament{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  inset:auto !important;
  transform:translate(-50%,-50%) !important;
  width:min(52vw,340px) !important;
  height:min(52vw,340px) !important;
  border-radius:50%;
  animation:loaderPulse 3.2s ease-in-out infinite !important;
}
.progress{margin:22px auto 0 !important}
@keyframes loaderPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.95}
  50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}
}
@keyframes loaderRingSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes loaderRingSpinReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}

/* MENU ICON FIX */
.menu-btn {
  width: 40px;
  height: 40px;
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1001;
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 2px;
  background: #fff;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.3s ease;
}

.menu-icon { top: 50%; }
.menu-icon::before { top: -8px; }
.menu-icon::after { top: 8px; }

.menu-btn.active .menu-icon {
  background: transparent;
}

.menu-btn.active .menu-icon::before {
  transform: translateX(-50%) rotate(45deg);
  top: 0;
}

.menu-btn.active .menu-icon::after {
  transform: translateX(-50%) rotate(-45deg);
  top: 0;
}


/* v34 mobile menu icon real fix */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.mobile-toggle{
  position:relative;
  display:none;
  align-items:center;
  justify-content:center;
  width:52px;
  min-width:52px;
  height:52px;
  padding:0 !important;
  font-size:0 !important;
  color:transparent !important;
  overflow:hidden;
}

.mobile-toggle .menu-icon,
.mobile-toggle .menu-icon::before,
.mobile-toggle .menu-icon::after{
  content:"";
  position:absolute;
  left:50%;
  width:22px;
  height:2px;
  background:#ffffff;
  border-radius:999px;
  transform:translateX(-50%);
  transition:transform .28s ease, top .28s ease, opacity .2s ease, background .2s ease;
}

.mobile-toggle .menu-icon{ top:50%; }
.mobile-toggle .menu-icon::before{ top:-7px; }
.mobile-toggle .menu-icon::after{ top:7px; }

.mobile-toggle.active .menu-icon{
  background:transparent;
}
.mobile-toggle.active .menu-icon::before{
  top:0;
  transform:translateX(-50%) rotate(45deg);
}
.mobile-toggle.active .menu-icon::after{
  top:0;
  transform:translateX(-50%) rotate(-45deg);
}

.menu-backdrop{
  background:rgba(3,6,10,.28) !important;
  backdrop-filter:none !important;
}

@media (max-width:980px){
  .mobile-toggle{
    display:inline-flex !important;
    z-index:120 !important;
  }
  .mobile-toggle span:not(.menu-icon):not(.sr-only){
    display:none !important;
  }
}


/* v35 mobile menu cleanup */
.menu-close{display:none !important}

@media (max-width:980px){
  .menu-backdrop{
    background:rgba(2,5,9,.42) !important;
    backdrop-filter:none !important;
    z-index:82 !important;
  }

  .mobile-toggle{
    position:relative;
    z-index:120 !important;
  }

  .nav-links{
    z-index:110 !important;
    padding:92px 20px 30px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    scrollbar-width:thin;
  }

  .nav-links.open{
    display:flex !important;
  }

  .nav-links > a{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    min-height:58px !important;
    padding:14px 8px !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
  }

  .nav-link-icon{
    width:20px;
    height:20px;
    flex:0 0 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#d8bd6a;
    opacity:.98;
  }

  .nav-link-icon svg{
    width:20px;
    height:20px;
    display:block;
  }

  .nav-link-text{
    display:inline-block;
    color:#f5f7fa !important;
    font-weight:600;
    line-height:1.2;
  }

  body.menu-open{
    overflow:hidden;
  }
}

@media (min-width:981px){
  .nav-link-icon{
    display:none !important;
  }
}


/* v36 mobile menu above bottom nav */
@media (max-width:980px){
  .nav-links{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:min(86vw, 380px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    z-index:9999 !important;
    padding:92px 20px 32px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .nav-links.open{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .menu-backdrop{
    z-index:9998 !important;
  }

  .mobile-toggle{
    z-index:10000 !important;
  }

  .mobile-bottom-nav,
  .bottom-nav,
  .app-bottom-nav,
  .mobile-tabbar,
  .mobile-nav{
    z-index:40 !important;
  }

  body.menu-open .mobile-bottom-nav,
  body.menu-open .bottom-nav,
  body.menu-open .app-bottom-nav,
  body.menu-open .mobile-tabbar,
  body.menu-open .mobile-nav{
    z-index:40 !important;
  }
}


/* v38 robust mobile menu fix */
@media (max-width:980px){
  .menu-backdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:10040 !important;
    background:rgba(2,5,9,.34) !important;
    backdrop-filter:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    transition:opacity .22s ease, visibility .22s ease !important;
  }
  body.menu-open .menu-backdrop{
    opacity:1 !important;
    visibility:visible !important;
  }

  .mobile-toggle{
    z-index:10060 !important;
  }

  .nav-links{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    bottom:0 !important;
    width:min(86vw,380px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    z-index:10050 !important;
    display:block !important;
    padding:92px 18px 130px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    background:linear-gradient(180deg,rgba(10,13,17,.99),rgba(14,18,24,.985)) !important;
    border-radius:28px 0 0 28px !important;
    transform:translateX(108%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .nav-links.open{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .nav-links > a{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    min-height:58px !important;
    padding:14px 8px !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    position:relative !important;
    z-index:10051 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  .nav-socials{
    display:grid !important;
    gap:10px !important;
    margin-top:18px !important;
    padding-bottom:12px !important;
  }

  .nav-socials a{
    position:relative !important;
    z-index:10051 !important;
  }

  body.menu-open{
    overflow:hidden !important;
    height:100dvh !important;
  }

  .mobile-bottom-nav,
  .bottom-nav,
  .app-bottom-nav,
  .mobile-tabbar,
  .mobile-nav{
    z-index:30 !important;
  }
}


/* v39 hard mobile menu fix */
@media (max-width:980px){
  .menu-backdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:9998 !important;
    background:rgba(5,8,12,.34) !important;
    backdrop-filter:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .2s ease !important;
  }
  body.menu-open .menu-backdrop{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .mobile-toggle{
    z-index:10001 !important;
  }

  .nav-links,
  .nav-links.open{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    bottom:0 !important;
    width:min(86vw,380px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    min-height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:96px 18px 130px !important;
    background:#0b1016 !important;
    border-left:1px solid rgba(255,255,255,.08) !important;
    border-radius:28px 0 0 28px !important;
    box-shadow:-24px 0 60px rgba(0,0,0,.42) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    scrollbar-width:thin !important;
    transform:translateX(108%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:9999 !important;
  }

  .nav-links.open,
  body.menu-open .nav-links{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .nav-links::before,
  .nav-links::after{
    content:none !important;
    display:none !important;
  }

  .nav-links > *,
  .nav-links a,
  .nav-links a *,
  .nav-socials,
  .nav-socials a{
    position:relative !important;
    z-index:10000 !important;
    pointer-events:auto !important;
  }

  .nav-links > a{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    min-height:58px !important;
    padding:14px 8px !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    color:#f5f7fa !important;
    text-decoration:none !important;
  }

  .nav-links .nav-link-text{
    color:#f5f7fa !important;
    opacity:1 !important;
  }

  .nav-socials{
    display:grid !important;
    gap:10px !important;
    margin-top:18px !important;
    padding-bottom:16px !important;
  }

  body.menu-open{
    overflow:hidden !important;
  }

  .mobile-bottom-nav,
  .bottom-nav,
  .app-bottom-nav,
  .mobile-tabbar,
  .mobile-nav{
    z-index:20 !important;
  }
}


/* v40 FINAL mobile burger fix */
@media (max-width:980px){
  .menu-backdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    background:rgba(4,8,14,.32) !important;
    backdrop-filter:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .18s ease !important;
  }
  body.menu-open .menu-backdrop{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .mobile-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:2147483600 !important;
  }

  .nav-links,
  .nav-links.open{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    bottom:0 !important;
    width:min(88vw,390px) !important;
    height:100svh !important;
    max-height:100svh !important;
    min-height:100svh !important;
    margin:0 !important;
    padding:92px 18px 140px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    background:#0b1016 !important;
    background-image:none !important;
    border:0 !important;
    border-left:1px solid rgba(255,255,255,.08) !important;
    border-radius:26px 0 0 26px !important;
    box-shadow:-18px 0 46px rgba(0,0,0,.42) !important;
    transform:translateX(110%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:2147483500 !important;
  }

  .nav-links.open{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .nav-links::before,
  .nav-links::after{
    display:none !important;
    content:none !important;
  }

  .nav-links > a{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    min-height:58px !important;
    padding:14px 8px !important;
    margin:0 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    color:#f5f7fa !important;
    text-decoration:none !important;
    position:relative !important;
    z-index:2147483550 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    opacity:1 !important;
  }

  .nav-links > a:last-of-type{
    margin-bottom:10px !important;
  }

  .nav-link-icon{
    width:20px !important;
    height:20px !important;
    flex:0 0 20px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#d8bd6a !important;
  }

  .nav-link-icon svg{
    width:20px !important;
    height:20px !important;
    display:block !important;
  }

  .nav-link-text{
    display:inline-block !important;
    color:#f5f7fa !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    opacity:1 !important;
  }

  .nav-socials{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:16px 0 0 !important;
    padding:0 0 12px !important;
    position:relative !important;
    z-index:2147483550 !important;
  }

  .nav-socials a{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    pointer-events:auto !important;
    position:relative !important;
    z-index:2147483550 !important;
  }

  body.menu-open{
    overflow:hidden !important;
  }
}


/* v41 final burger click + scroll fix */
.menu-backdrop{
  display:none !important;
}

@media (max-width:980px){
  .navbar .nav-inner{
    position:relative;
    z-index:2147483640 !important;
  }

  .mobile-toggle{
    z-index:2147483647 !important;
  }

  .navbar .nav-links{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    width:min(88vw,390px) !important;
    height:100vh !important;
    max-height:100vh !important;
    min-height:100vh !important;
    margin:0 !important;
    padding:92px 18px 40px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    background:#0b1016 !important;
    background-image:none !important;
    border:0 !important;
    border-left:1px solid rgba(255,255,255,.08) !important;
    border-radius:24px 0 0 24px !important;
    box-shadow:-18px 0 44px rgba(0,0,0,.42) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:auto !important;
    touch-action:pan-y !important;
    transform:translateX(110%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:2147483646 !important;
  }

  .navbar .nav-links.open{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .navbar .nav-links::before,
  .navbar .nav-links::after{
    display:none !important;
    content:none !important;
  }

  .navbar .nav-links > a{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    min-height:58px !important;
    padding:14px 8px !important;
    margin:0 !important;
    color:#f5f7fa !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    position:relative !important;
    z-index:2147483647 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
    opacity:1 !important;
  }

  .navbar .nav-links .nav-link-text,
  .navbar .nav-links .nav-link-icon{
    pointer-events:none !important;
  }

  .navbar .nav-socials{
    display:grid !important;
    gap:10px !important;
    margin-top:16px !important;
    padding-bottom:8px !important;
    position:relative !important;
    z-index:2147483647 !important;
  }

  .navbar .nav-socials a{
    pointer-events:auto !important;
  }

  body.menu-open{
    overflow:visible !important;
  }
}

/* v42 socials row */
.nav-socials{
  display:flex !important;
  gap:10px !important;
  margin-top:20px !important;
}

.nav-socials a{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:10px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,0.05) !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:14px !important;
}

.nav-socials a:hover{
  background:rgba(255,255,255,0.1) !important;
}


/* v43 before/after label visibility fix */
.ba-label,
.before-after-label,
.compare-label,
.slider-label,
.label-before,
.label-after{
  min-width: 120px !important;
  height: 54px !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  z-index: 5 !important;
}

.label-after,
.after-label,
.ba-label.after,
.compare-label.after,
.before-after-label.after{
  right: 18px !important;
  left: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.label-before,
.before-label,
.ba-label.before,
.compare-label.before,
.before-after-label.before{
  left: 18px !important;
  right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

@media (max-width: 768px){
  .ba-label,
  .before-after-label,
  .compare-label,
  .slider-label,
  .label-before,
  .label-after{
    min-width: 126px !important;
    height: 52px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  .label-after,
  .after-label,
  .ba-label.after,
  .compare-label.after,
  .before-after-label.after{
    right: 12px !important;
    transform: none !important;
  }

  .label-before,
  .before-label,
  .ba-label.before,
  .compare-label.before,
  .before-after-label.before{
    left: 12px !important;
    transform: none !important;
  }
}


/* v44 real fix for After label clipping */
.before-after .layer.before{
  clip-path:none !important;
}
.before-after .layer.after{
  clip-path:inset(0 0 0 52%) !important;
}

/* labels must never inherit layer clipping */
.before-after > .label,
.before-after > .label.before,
.before-after > .label.after,
.before-after > .label-before,
.before-after > .label-after{
  clip-path:none !important;
  -webkit-clip-path:none !important;
  z-index:6 !important;
  overflow:visible !important;
}

.before-after > .label.after,
.before-after > .label-after{
  right:18px !important;
  left:auto !important;
  min-width:120px !important;
  padding:10px 24px !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

.before-after > .label.before,
.before-after > .label-before{
  left:18px !important;
  right:auto !important;
  min-width:120px !important;
  padding:10px 24px !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

@media (max-width:768px){
  .before-after > .label.after,
  .before-after > .label-after{
    right:12px !important;
    min-width:124px !important;
    padding:10px 26px !important;
  }
  .before-after > .label.before,
  .before-after > .label-before{
    left:12px !important;
    min-width:124px !important;
    padding:10px 26px !important;
  }
}


/* v45 real before/after slider fix */
.before-after{
  --ba-split: 52%;
}
.before-after .layer.before{
  clip-path:none !important;
}
.before-after .layer.after{
  clip-path: inset(0 0 0 var(--ba-split)) !important;
  -webkit-clip-path: inset(0 0 0 var(--ba-split)) !important;
}
.before-after .divider{
  left: var(--ba-split) !important;
}
.before-after .handle{
  left: calc(var(--ba-split) - 25px) !important;
}