/* =====================================================================
   RGs Pleiaddes — Landing Page
   Design system: Ink + Champagne Gold + Ivory
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --ink:#07090C;
  --ink-2:#0D1117;
  --ink-3:#141A22;
  --ink-4:#1D242E;

  --gold:#C8A96A;
  --gold-lt:#E7D3A1;
  --gold-dk:#9A7B3F;
  --gold-grad:linear-gradient(100deg,#9A7B3F 0%,#C8A96A 22%,#F0E0B4 48%,#C8A96A 72%,#9A7B3F 100%);

  --ivory:#F6F3EC;
  --ivory-2:#EDE8DD;
  --paper:#FBFAF7;

  --txt:#12161C;
  --txt-2:#4A525E;
  --txt-lt:#F4F1EA;
  --txt-lt-2:rgba(244,241,234,.60);

  --line:rgba(18,22,28,.10);
  --line-lt:rgba(244,241,234,.14);

  /* Single family site-wide. --ff-d is kept as the "display" hook so heading
     weights/tracking can be tuned separately from body copy. */
  --ff-d:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ff-b:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --r:4px;
  --r-lg:10px;
  --wrap:1280px;
  --pad:clamp(20px,5vw,72px);
  --sp:clamp(54px,5.6vw,92px);

  --e:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.65,0,.35,1);

  --hdr-h:104px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hdr-h);overflow-x:hidden}
body{
  font-family:var(--ff-b);font-weight:400;font-size:16px;line-height:1.7;
  color:var(--txt);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,iframe{display:block;max-width:100%}
img{height:auto;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold);color:#0b0b0b}

svg[class^="i-"],svg use{stroke-linecap:round;stroke-linejoin:round}
.hdr svg,.btn svg,.acard__ico,.conn svg,.ticks svg,.cta__link svg,.sticky svg,
.icobtn svg,.modal__x svg,.lb svg,
.fcard__note svg,.mapbox__pin svg,.gitem__z{
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{position:relative;padding-block:var(--sp)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}

/* ---------- TYPE ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-dk);margin-bottom:22px;
}
.eyebrow i{display:block;width:34px;height:1px;background:currentColor;opacity:.55}
.eyebrow--c{margin-bottom:16px}
.eyebrow--gold{color:var(--gold)}
.eyebrow--c{justify-content:center}
.eyebrow--c i{display:none}
.eyebrow--c::before,.eyebrow--c::after{content:"";width:28px;height:1px;background:currentColor;opacity:.5}

.h2{
  font-family:var(--ff-d);font-weight:300;
  font-size:clamp(24px,2.9vw,39px);line-height:1.2;letter-spacing:-.018em;
  margin-bottom:20px;
}
.h2 em{font-style:italic;background:var(--gold-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
.h2--c{text-align:center}
.h2--light{color:var(--txt-lt)}
@keyframes shine{to{background-position:200% center}}

.lead{font-size:clamp(15.5px,1.35vw,18.5px);color:var(--txt-2);max-width:60ch}
.lead--c{margin-inline:auto;text-align:center}
.lead--light{color:var(--txt-lt-2)}
.sec p+p{margin-top:16px}

.sechead{margin-bottom:clamp(30px,3.2vw,48px);text-align:center;display:flex;flex-direction:column;align-items:center}
.gold{color:var(--gold-dk)}
.sec--dark .gold{color:var(--gold)}

/* ---------- BUTTONS ---------- */
.btn{
  --bg:var(--gold-grad);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 34px;border-radius:var(--r);
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .5s var(--e),box-shadow .5s var(--e),color .35s;
}
.btn span{position:relative;z-index:2}
.btn__i{width:16px;height:16px;position:relative;z-index:2;transition:transform .45s var(--e)}
.btn:hover .btn__i{transform:translateX(5px)}
.btn::before{content:"";position:absolute;inset:0;background:var(--bg);background-size:220% auto;z-index:0;transition:background-position .7s var(--e)}
.btn:hover::before{background-position:100% center}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg)}
.btn:hover::after{animation:sweep .85s var(--e)}
@keyframes sweep{to{left:150%}}

.btn--gold{color:#15100A;box-shadow:0 10px 34px -14px rgba(200,169,106,.85)}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 20px 44px -16px rgba(200,169,106,.95)}

.btn--dark{--bg:linear-gradient(100deg,#12161C,#2A323E,#12161C);color:#fff}
.btn--dark:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}

.btn--ghost{color:var(--txt-lt);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.btn--ghost::before{--bg:rgba(255,255,255,.06)}
.btn--ghost:hover{color:#15100A;border-color:transparent}
.btn--ghost:hover::before{--bg:var(--gold-grad)}

.btn--line{color:var(--txt-lt);border:1px solid var(--line-lt)}
.btn--line::before{--bg:rgba(255,255,255,.05)}
.btn--line:hover{color:#15100A;border-color:transparent}
.btn--line:hover::before{--bg:var(--gold-grad)}

.btn--sm{padding:13px 24px;font-size:11px}
.btn--xs{padding:11px 20px;font-size:10px}
.btn--block{width:100%}

.icobtn{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-lt);color:var(--txt-lt);transition:.4s var(--e);
}
.icobtn svg{width:17px;height:17px}
.icobtn:hover{background:var(--gold);color:#15100A;border-color:var(--gold);transform:rotate(12deg)}
.hdr.is-solid .icobtn{border-color:var(--line);color:var(--txt)}
.hdr.is-solid .icobtn:hover{color:#15100A;border-color:var(--gold)}

/* =====================================================================
   PRELOADER
   ===================================================================== */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center;
  transition:opacity .7s var(--e),visibility .7s}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{text-align:center}
.preloader__mark{position:relative;width:112px;height:112px;margin:0 auto 26px;display:grid;place-items:center}
.preloader__p{font-family:var(--ff-d);font-weight:700;font-size:40px;color:var(--gold);line-height:1}
.preloader__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.preloader__ring circle{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:340;stroke-dashoffset:340;
  animation:ring 1.9s var(--e) infinite;opacity:.7}
@keyframes ring{50%{stroke-dashoffset:0;transform:rotate(0deg)}100%{stroke-dashoffset:-340;transform:rotate(0deg)}}
.preloader__name{font-family:var(--ff-d);font-weight:600;font-size:15px;letter-spacing:.42em;color:rgba(244,241,234,.8);margin-bottom:22px}
.preloader__name span{font-style:italic;color:var(--gold)}
.preloader__bar{width:190px;height:1px;background:rgba(255,255,255,.14);margin:0 auto;overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0;background:var(--gold-grad);animation:load 1.6s var(--e) forwards}
@keyframes load{to{width:100%}}

/* =====================================================================
   SCROLL PROGRESS BAR
   ===================================================================== */
.scrollbar{position:fixed;top:0;left:0;height:2px;width:0;z-index:9997;background:var(--gold-grad);box-shadow:0 0 14px rgba(200,169,106,.7)}

/* =====================================================================
   HEADER
   ===================================================================== */
/* Explicit property list — a bare `transition:.55s` animates `all`, which
   would tween backdrop-filter/transform toward `none` instead of clearing
   them, keeping the header a containing block for the whole 550ms. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:900;
  transition:transform .55s var(--e),background .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.hdr__wrap{max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad);height:var(--hdr-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;transition:.5s var(--e)}
.hdr::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,12,.72),transparent);
  opacity:1;transition:opacity .5s;pointer-events:none}
.hdr.is-solid{background:rgba(251,250,247,.86);backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--line);box-shadow:0 12px 40px -28px rgba(0,0,0,.5)}
.hdr.is-solid::before{opacity:0}
.hdr.is-solid .hdr__wrap{height:calc(var(--hdr-h) - 20px)}
.hdr.is-hide{transform:translateY(-104%)}

/* ---- BRAND PLATE ----
   The supplied logo is navy-on-white with no alpha channel, so it sits on a
   crisp white plate over the dark hero. On the scrolled (ivory) header the
   plate dissolves and the mark reads directly on the bar. ---------------- */
.brand{display:flex;align-items:center;flex:none;transition:opacity .4s}
.brand__plate{
  display:block;padding:9px 17px;border-radius:5px;background:#fff;
  box-shadow:0 16px 38px -20px rgba(0,0,0,.85),0 0 0 1px rgba(200,169,106,.28);
  transition:padding .5s var(--e),background .5s var(--e),box-shadow .5s var(--e),transform .5s var(--e);
}
.brand__plate img{display:block;width:auto;height:62px;transition:height .5s var(--e)}
.brand:hover .brand__plate{transform:translateY(-2px);box-shadow:0 20px 44px -20px rgba(0,0,0,.9),0 0 0 1px rgba(200,169,106,.6)}
.hdr.is-solid .brand__plate{padding:0;background:transparent;box-shadow:none}
.hdr.is-solid .brand__plate img{height:52px}
.hdr.is-solid .brand:hover .brand__plate{box-shadow:none}

.nav{display:flex;align-items:center;gap:clamp(16px,2vw,34px)}
.nav>a{position:relative;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-lt);
  opacity:.82;padding:6px 0;transition:.35s}
.nav>a em{display:none}
.hdr.is-solid .nav>a{color:var(--txt)}
.nav>a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .45s var(--e)}
.nav>a:hover,.nav>a.is-active{opacity:1}
.nav>a:hover::after,.nav>a.is-active::after{width:100%}
.nav__label,.nav__foot{display:none}

/* Mobile menu backdrop. Sits BELOW the header (z 900) so the panel — which
   lives inside the header — still paints above it. */
.navbd{position:fixed;inset:0;z-index:890;background:rgba(4,6,9,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--e),visibility .5s}
.navbd.is-on{opacity:1;visibility:visible}

/* CRITICAL: backdrop-filter and transform on .hdr each create a containing
   block, which makes the panel's position:fixed resolve against the ~80px-tall
   header instead of the viewport. Both are dropped while the menu is open —
   and `transition:none` makes that drop instant, because a mid-flight animated
   value still counts as a containing block. */
.hdr.is-menu{transition:none;background:transparent;box-shadow:none;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
.hdr.is-menu .hdr__wrap{transition:none}

.hdr__cta{display:flex;align-items:center;gap:12px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-lt);border-radius:50%;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:17px;height:1.4px;background:var(--txt-lt);transition:.4s var(--e)}
.hdr.is-solid .burger{border-color:var(--line)}
.hdr.is-solid .burger i{background:var(--txt)}
.burger.is-on i:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.burger.is-on i:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.is-on i:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:calc(var(--hdr-h) + 28px);padding-bottom:64px}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__img{position:absolute;inset:-6%;background-size:cover;background-position:center;
  animation:kb 26s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.18) translate3d(-1.6%,-1.6%,0)}}
.hero__veil{position:absolute;inset:0;
  background:
    linear-gradient(98deg,rgba(4,6,9,.96) 0%,rgba(5,7,10,.90) 30%,rgba(6,8,11,.58) 58%,rgba(4,6,9,.86) 100%),
    radial-gradient(130% 90% at 12% 108%,rgba(4,6,9,.96),transparent 62%),
    radial-gradient(90% 70% at 88% -10%,rgba(9,13,19,.85),transparent 65%);
}
/* warm light source — stops the right half reading as flat grey */
.hero__beam{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(48% 62% at 74% 34%,rgba(200,169,106,.20),transparent 68%),
    radial-gradient(34% 46% at 22% 78%,rgba(200,169,106,.10),transparent 70%);
  animation:beam 11s ease-in-out infinite alternate}
@keyframes beam{to{opacity:.6;transform:translate3d(-2%,1.5%,0) scale(1.06)}}
.hero__grain{position:absolute;inset:0;opacity:.055;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* seamless hand-off into the marquee strip */
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--ink))}

.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.28fr) minmax(370px,.78fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero__left{color:var(--txt-lt)}
.hero .eyebrow{color:var(--gold)}

.hero__title{
  font-family:var(--ff-d);font-weight:300;
  font-size:clamp(31px,3.7vw,52px);line-height:1.14;letter-spacing:-.022em;
  margin-bottom:24px;text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero__title em{font-style:italic;background:var(--gold-grad);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}

.hero__sub{font-size:clamp(15px,1.3vw,17.5px);color:rgba(244,241,234,.70);max-width:48ch;margin-bottom:30px}

/* ---- PRICE PLAQUE — the primary conversion hook ---- */
.hero__price{position:relative;display:inline-flex;align-items:stretch;gap:22px;flex-wrap:wrap;
  padding:15px 26px 15px 24px;margin-bottom:34px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(100deg,rgba(200,169,106,.16),rgba(200,169,106,.05) 55%,rgba(255,255,255,.03));
  border:1px solid rgba(200,169,106,.42);backdrop-filter:blur(12px);
  box-shadow:0 22px 50px -30px rgba(200,169,106,.5),inset 0 1px 0 rgba(255,255,255,.09)}
.hero__price::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-grad)}
.hero__price::after{content:"";position:absolute;top:0;left:-120%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);
  animation:priceSweep 5.5s var(--e) infinite}
@keyframes priceSweep{0%,72%{left:-120%}100%{left:160%}}
.hero__price-main{display:flex;flex-direction:column;justify-content:center;gap:3px}
.hero__price-k{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,241,234,.62)}
.hero__price-v{display:flex;align-items:baseline;gap:7px;font-family:var(--ff-d);font-weight:500;
  font-size:clamp(27px,2.9vw,38px);line-height:1.05;color:#F5E7C4;
  text-shadow:0 0 34px rgba(200,169,106,.45)}
.hero__price-v em{font-style:normal;font-size:.42em;letter-spacing:.06em;color:var(--gold);font-family:var(--ff-b);
  font-weight:400;text-transform:uppercase}
.hero__price-d{display:flex;flex-direction:column;justify-content:center;gap:4px;padding-left:22px;
  border-left:1px solid rgba(200,169,106,.30)}
.hero__price-d b{font-family:var(--ff-d);font-size:23px;font-weight:500;line-height:1;color:var(--txt-lt)}
.hero__price-d span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.55)}

.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}

/* ---- STAT RAIL ---- */
.hero__chips{display:flex;flex-wrap:wrap;gap:0;padding-top:26px;border-top:1px solid rgba(255,255,255,.13)}
.hero__chips li{padding:0 clamp(18px,2.2vw,32px);border-left:1px solid rgba(255,255,255,.11)}
.hero__chips li:first-child{padding-left:0;border-left:0}
.hero__chips b{display:block;font-family:var(--ff-d);font-size:clamp(19px,1.9vw,25px);line-height:1.1;
  letter-spacing:-.01em;color:var(--gold-lt);font-weight:600}
.hero__chips span{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,241,234,.5);margin-top:7px}

.hero__scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;color:rgba(244,241,234,.55)}
.hero__scroll i{display:block;width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--gold));position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:100%;height:14px;background:var(--gold-lt);animation:drop 1.8s var(--e) infinite}
@keyframes drop{0%{transform:translateY(-100%)}100%{transform:translateY(340%)}}
.hero__scroll span{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase}

/* ---------- HERO / GENERIC FORM CARD ---------- */
/* =====================================================================
   GLASSMORPHIC FORM CARD
   Orbs sit BEHIND the card so the card's backdrop-filter refracts them —
   that colour bleed is what separates real glass from a translucent box.
   ===================================================================== */
.hero__form,.cta__form,.modal__form{position:relative}

/* Orbs stay inside the card footprint so the colour reads as refraction
   through the glass, not as haze spilling onto the photograph. */
.orb{position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(46px)}
.orb--gold{width:46%;aspect-ratio:1;top:5%;right:5%;opacity:.62;
  background:radial-gradient(circle,rgba(219,186,116,.95),rgba(200,169,106,.22) 58%,transparent 74%);
  animation:orbA 14s ease-in-out infinite alternate}
.orb--cool{width:42%;aspect-ratio:1;bottom:6%;left:4%;opacity:.5;
  background:radial-gradient(circle,rgba(96,140,204,.75),rgba(60,96,150,.16) 58%,transparent 74%);
  animation:orbB 17s ease-in-out infinite alternate}
@keyframes orbA{to{transform:translate(-14%,20%) scale(1.12)}}
@keyframes orbB{to{transform:translate(16%,-16%) scale(1.14)}}

.fcard{
  position:relative;z-index:1;padding:clamp(26px,2.5vw,38px);border-radius:26px;isolation:isolate;
  background:linear-gradient(142deg,rgba(255,255,255,.18),rgba(255,255,255,.075) 44%,rgba(255,255,255,.035));
  -webkit-backdrop-filter:blur(54px) saturate(195%);
  backdrop-filter:blur(54px) saturate(195%);
  box-shadow:
    0 34px 78px -30px rgba(0,0,0,.85),
    0 4px 14px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.05);
}
/* Fallback: without backdrop-filter the card would be near-transparent and the
   photo behind it would fight the copy, so fall back to a solid dark pane. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fcard{background:linear-gradient(142deg,rgba(22,28,38,.93),rgba(9,12,17,.96))}
}
/* refracted light edge — bright top-left, gold bottom-right */
.fcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:5;
  background:linear-gradient(138deg,rgba(255,255,255,.62),rgba(255,255,255,.07) 32%,transparent 56%,rgba(200,169,106,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
}
/* specular sheen across the top of the pane */
.fcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:44%;pointer-events:none;z-index:0;border-radius:26px 26px 40% 40%;
  background:linear-gradient(180deg,rgba(255,255,255,.13),transparent);
}
.fcard>*{position:relative;z-index:2}

.fcard__head{margin-bottom:24px}
.fcard__tag{display:inline-flex;align-items:center;gap:9px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  padding:8px 15px;border-radius:100px;color:#F7EAC9;border:1px solid rgba(219,186,116,.55);
  background:rgba(200,169,106,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-bottom:16px}
.fcard__tag i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 0 rgba(200,169,106,.75);animation:blip 2s ease-out infinite}
@keyframes blip{70%{box-shadow:0 0 0 8px rgba(200,169,106,0)}100%{box-shadow:0 0 0 0 rgba(200,169,106,0)}}
.fcard__head h3{font-family:var(--ff-d);font-weight:600;font-size:clamp(20px,1.8vw,25px);line-height:1.26;color:#fff;letter-spacing:-.012em}
.fcard__head p{font-size:13.5px;color:rgba(255,255,255,.62);margin-top:9px}

.fcard__form{display:flex;flex-direction:column;gap:12px}

/* ---- glass fields ---- */
.field{position:relative}
.field input{
  width:100%;padding:23px 18px 10px;border-radius:15px;color:#fff;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:15px;font-weight:400;letter-spacing:.01em;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.20);
  transition:border-color .35s var(--e),background .35s var(--e),box-shadow .35s var(--e);
}
.field input:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.32)}
.field input:focus{
  outline:0;border-color:rgba(214,180,110,.9);background:rgba(255,255,255,.16);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.22),
             0 0 0 4px rgba(200,169,106,.18),0 12px 30px -16px rgba(200,169,106,.8);
}
.field input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px rgba(40,44,52,.92) inset}
.field label{position:absolute;left:19px;top:17px;font-size:14px;color:rgba(255,255,255,.6);
  pointer-events:none;transform-origin:left top;transition:.32s var(--e)}
.field input:focus+label,.field input:not(:placeholder-shown)+label{transform:translateY(-11px) scale(.7);color:#E7CE95}
.field__pre{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:12px;letter-spacing:.14em;
  color:rgba(255,255,255,.45);pointer-events:none}
.field input[type=tel]{padding-right:50px}

.fcard__note{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.5);margin-top:6px}
.fcard__note svg{width:14px;height:14px;flex:none;color:var(--gold-lt)}
.fcard .btn--gold,.modal__form .btn--gold{margin-top:8px;padding-block:20px;border-radius:15px;
  box-shadow:0 14px 38px -14px rgba(200,169,106,.9)}
.fcard .btn--gold:hover,.modal__form .btn--gold:hover{box-shadow:0 22px 50px -16px rgba(200,169,106,1)}

/* =====================================================================
   MARQUEE
   ===================================================================== */
.marquee{background:var(--ink);border-block:1px solid rgba(255,255,255,.07);overflow:hidden;padding:20px 0}
.marquee__track{display:flex;align-items:center;gap:34px;width:max-content;animation:march 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes march{to{transform:translateX(-50%)}}
.marquee span{font-family:var(--ff-d);font-size:clamp(14px,1.4vw,19px);font-weight:300;letter-spacing:.04em;color:rgba(244,241,234,.42);white-space:nowrap}
.marquee i{color:var(--gold);font-size:9px;font-style:normal}

/* =====================================================================
   OVERVIEW
   ===================================================================== */
.sec--overview{background:var(--paper)}
.ov__media{position:relative;padding-bottom:56px;padding-right:44px}
.pic{position:relative;overflow:hidden;border-radius:var(--r-lg)}
.pic img{width:100%;height:100%;transition:transform 1.3s var(--e)}
.pic:hover img{transform:scale(1.06)}
.pic--tall{aspect-ratio:4/5;box-shadow:0 50px 90px -55px rgba(0,0,0,.7)}
.pic--float{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:1/1;border:8px solid var(--paper);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.5)}
.ov__badge{position:absolute;left:-10px;top:36px;background:var(--ink);color:var(--txt-lt);
  padding:20px 26px;border-radius:var(--r);text-align:center;box-shadow:0 28px 60px -32px rgba(0,0,0,.8)}
.ov__badge b{display:block;font-family:var(--ff-d);font-size:30px;line-height:1.05;color:var(--gold);font-weight:700;letter-spacing:-.02em}
.ov__badge span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.55);margin-top:7px;line-height:1.6}

.stats{display:flex;flex-wrap:wrap;gap:14px 40px;margin:36px 0;padding-top:30px;border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--ff-d);font-size:clamp(24px,2.5vw,32px);line-height:1.1;color:var(--txt);font-weight:600}
.stat span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-2);margin-top:8px}

/* =====================================================================
   DARK SECTIONS
   ===================================================================== */
.sec--dark{background:var(--ink);color:var(--txt-lt)}
.sec--dark .lead{color:var(--txt-lt-2)}
.sec--dark .h2{color:var(--txt-lt)}
.sec--dark .eyebrow--c{color:var(--gold)}
.sec--dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 55% at 50% 0%,rgba(200,169,106,.09),transparent 70%)}
.sec--dark>*{position:relative;z-index:1}

/* ---------- OFFERING ---------- */
.unit{display:grid;grid-template-columns:1.05fr 1fr;gap:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-lt);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}
.unit__media{position:relative;min-height:440px;overflow:hidden}
.unit__media img{width:100%;height:100%;position:absolute;inset:0;transition:transform 1.4s var(--e)}
.unit:hover .unit__media img{transform:scale(1.07)}
.unit__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(7,9,12,.75))}
.unit__ribbon{position:absolute;top:22px;left:22px;z-index:2;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  padding:8px 15px;background:rgba(7,9,12,.72);border:1px solid rgba(200,169,106,.4);color:var(--gold-lt);border-radius:100px;backdrop-filter:blur(8px)}
.unit__body{padding:clamp(28px,3.4vw,52px)}
.unit__title{font-family:var(--ff-d);font-weight:400;font-size:clamp(22px,2.4vw,33px);line-height:1.2;margin-bottom:26px}
.unit__meta{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line-lt)}
.unit__meta small{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,241,234,.42);margin-bottom:6px}
.unit__meta b{font-family:var(--ff-d);font-size:17px;font-weight:600;letter-spacing:-.01em}
.ticks{display:flex;flex-direction:column;gap:13px;margin-bottom:32px}
.ticks li{display:flex;gap:13px;font-size:14.5px;color:rgba(244,241,234,.66);line-height:1.6}
.ticks svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--gold);stroke-width:2}
.unit__cta{display:flex;flex-wrap:wrap;gap:12px}

/* =====================================================================
   AMENITIES — BENTO
   ===================================================================== */
.sec--amen{background:var(--ivory)}

/* ---- featured amenities: strict 2×2, every card identical ---- */
.amen__feat{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
.acard{
  position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:var(--ink-2);box-shadow:0 26px 56px -34px rgba(0,0,0,.62);
  transition:transform .6s var(--e),box-shadow .6s var(--e);
}
/* slight desaturation + a firm scrim so bright daytime shots and dusk
   renders sit in the same tonal family across the grid */
.acard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.02);transition:transform 1.5s var(--e)}
.acard::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(7,9,12,.20) 0%,rgba(7,9,12,.30) 34%,rgba(7,9,12,.80) 72%,rgba(7,9,12,.96) 100%),
    linear-gradient(180deg,rgba(24,18,8,.16),transparent 55%);
  transition:opacity .6s}
.acard:hover{transform:translateY(-6px);box-shadow:0 40px 76px -34px rgba(0,0,0,.78)}
.acard:hover img{transform:scale(1.07)}
.acard__body{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(22px,2.4vw,32px);color:var(--txt-lt)}
.acard__ico{width:30px;height:30px;color:var(--gold-lt);stroke-width:1.2;margin-bottom:14px;
  transition:transform .6s var(--e)}
.acard:hover .acard__ico{transform:translateY(-3px) scale(1.08)}
.acard h3{font-family:var(--ff-d);font-weight:600;font-size:clamp(18px,1.75vw,24px);line-height:1.22;letter-spacing:-.012em}
.acard p{font-size:13.5px;color:rgba(244,241,234,.68);margin-top:9px;max-width:44ch}

/* ---- remaining six: uniform 3 × 2 grid ---- */
.amen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.amen__grid .acard{aspect-ratio:4/3}
.amen__grid .acard h3{font-size:clamp(16px,1.35vw,19px)}
.amen__grid .acard p{font-size:12.5px}
.amen__grid .acard__ico{width:26px;height:26px;margin-bottom:11px}

/* =====================================================================
   LOCATION
   ===================================================================== */
.conn{display:flex;flex-direction:column;gap:2px;margin-top:34px}
.conn li{display:flex;align-items:center;gap:18px;padding:16px 18px;border-radius:var(--r);
  border:1px solid transparent;transition:.45s var(--e)}
.conn li:hover{background:rgba(255,255,255,.045);border-color:rgba(200,169,106,.24);transform:translateX(7px)}
.conn svg{width:22px;height:22px;flex:none;color:var(--gold);stroke-width:1.2;transition:transform .5s var(--e)}
.conn li:hover svg{transform:scale(1.14) rotate(-6deg)}
.conn b{display:block;font-size:15px;font-weight:400;letter-spacing:.01em}
.conn span{display:block;font-size:12.5px;color:rgba(244,241,234,.45);margin-top:2px}

.loc__map{display:flex;flex-direction:column;gap:16px}
.mapbox{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-lt);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
.mapbox iframe{width:100%;height:clamp(330px,44vh,470px);border:0;filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg)}
.mapbox__pin{position:absolute;top:18px;left:18px;display:flex;align-items:center;gap:9px;padding:10px 16px;
  background:rgba(7,9,12,.86);border:1px solid rgba(200,169,106,.4);border-radius:100px;backdrop-filter:blur(10px)}
.mapbox__pin svg{width:15px;height:15px;color:var(--gold)}
.mapbox__pin span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-lt)}

/* =====================================================================
   WHY INVEST
   ===================================================================== */
.sec--why{background:var(--paper)}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wcard{position:relative;padding:38px 32px 34px;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);overflow:hidden;transition:.55s var(--e)}
.wcard::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--gold-grad);
  transform:scaleX(0);transform-origin:left;transition:transform .65s var(--e)}
.wcard:hover::before{transform:scaleX(1)}
.wcard:hover{transform:translateY(-8px);box-shadow:0 34px 60px -36px rgba(0,0,0,.32);border-color:rgba(200,169,106,.4)}
.wcard__n{font-family:var(--ff-d);font-weight:700;font-size:42px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(18,22,28,.16);
  display:block;margin-bottom:18px;transition:.55s var(--e)}
.wcard:hover .wcard__n{-webkit-text-stroke-color:var(--gold);transform:translateY(-3px)}
.wcard h3{font-family:var(--ff-d);font-weight:600;font-size:19px;line-height:1.3;margin-bottom:11px;letter-spacing:-.01em}
.wcard p{font-size:14.5px;color:var(--txt-2)}
.wcard--gold{background:var(--ink);border-color:transparent;color:var(--txt-lt)}
.wcard--gold p{color:rgba(244,241,234,.6)}
.wcard--gold .wcard__n{-webkit-text-stroke-color:rgba(200,169,106,.6)}
.wcard--gold h3{color:var(--gold-lt)}
.why__grid .wcard:nth-child(4){grid-column:span 2}

/* =====================================================================
   GALLERY
   ===================================================================== */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gitem{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3;border:1px solid var(--line-lt)}
.gitem img{width:100%;height:100%;transition:transform 1.3s var(--e),filter .6s}
.gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,9,12,.85));
  opacity:.75;transition:opacity .5s}
.gitem:hover img{transform:scale(1.09)}
.gitem:hover::after{opacity:1}
.gitem figcaption{position:absolute;left:22px;bottom:20px;z-index:2;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--txt-lt);transform:translateY(6px);opacity:.8;transition:.5s var(--e)}
.gitem:hover figcaption{transform:translateY(0);opacity:1}
.gitem__z{position:absolute;top:18px;right:18px;z-index:2;width:34px;height:34px;padding:8px;border-radius:50%;
  background:rgba(7,9,12,.6);border:1px solid rgba(255,255,255,.2);color:var(--gold-lt);
  opacity:0;transform:scale(.7);transition:.5s var(--e)}
.gitem:hover .gitem__z{opacity:1;transform:scale(1)}

/* =====================================================================
   PRICE
   ===================================================================== */
.sec--price{background:var(--ivory)}

/* ---- horizontal pricing card ---- */
.pcard{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.02fr);
  gap:clamp(28px,3.4vw,54px);align-items:start;
  padding:clamp(32px,3.6vw,56px);border-radius:28px;
  background:linear-gradient(158deg,#FEFCF6 0%,#FAF4E6 46%,#F5EBD6 100%);
  border:1px solid rgba(200,169,106,.42);
  box-shadow:0 44px 96px -50px rgba(88,68,26,.62),inset 0 1px 0 rgba(255,255,255,.9);
}
/* soft warm bloom, echoing the reference card's tinted corner */
.pcard::before{content:"";position:absolute;top:-18%;right:-8%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(200,169,106,.26),transparent 68%);filter:blur(30px);pointer-events:none}
.pcard>*{position:relative;z-index:1}

.pcard__badge{position:absolute;top:26px;right:28px;z-index:2;display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:100px;background:rgba(255,255,255,.8);border:1px solid rgba(200,169,106,.42);
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk)}
.pcard__badge i{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 0 rgba(200,169,106,.75);animation:blip 2s ease-out infinite}

.pcard__title{font-family:var(--ff-d);font-weight:600;font-size:clamp(21px,2vw,28px);line-height:1.22;letter-spacing:-.014em;
  margin-bottom:22px;padding-right:130px}

.pcard__price{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pcard__price b{font-family:var(--ff-d);font-weight:700;font-size:clamp(40px,4.5vw,60px);line-height:.98;
  letter-spacing:-.03em;color:var(--txt)}
.pcard__price span{display:flex;flex-direction:column;gap:3px;padding-bottom:7px}
.pcard__price em{font-style:normal;font-size:14px;letter-spacing:.03em;color:var(--gold-dk);font-weight:500}
.pcard__price small{font-size:13px;color:var(--txt-2)}

.pcard__desc{font-size:14.5px;line-height:1.72;color:var(--txt-2);max-width:44ch;margin-bottom:28px}

.pcard__cta{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:19px 42px;border-radius:100px;overflow:hidden;isolation:isolate;
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#15100A;
  box-shadow:0 16px 40px -16px rgba(200,169,106,.95);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.pcard__cta span{position:relative;z-index:2}
.pcard__cta::before{content:"";position:absolute;inset:0;z-index:0;background:var(--gold-grad);
  background-size:220% auto;transition:background-position .7s var(--e)}
.pcard__cta::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg)}
.pcard__cta:hover{transform:translateY(-3px);box-shadow:0 24px 52px -18px rgba(200,169,106,1)}
.pcard__cta:hover::before{background-position:100% center}
.pcard__cta:hover::after{animation:sweep .85s var(--e)}

.pcard__note{font-size:11.5px;line-height:1.7;color:var(--txt-2);opacity:.75;margin-top:18px;max-width:42ch}

/* dotted rule, matching the reference's dashed separator */
.pcard__rule{align-self:stretch;width:1px;background-image:linear-gradient(rgba(140,112,54,.5) 46%,transparent 0);
  background-size:1px 9px;background-repeat:repeat-y}

/* clears the badge sitting in the top-right corner */
.pcard__side{padding-top:44px}
.pcard__sh{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-dk);margin-bottom:22px}
.plist{display:grid;grid-template-columns:1fr 1fr;gap:17px 24px}
.plist li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.5;color:var(--txt)}
.plist i{flex:none;width:21px;height:21px;margin-top:1px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-grad);background-size:200% auto;box-shadow:0 4px 10px -4px rgba(154,123,63,.9)}
.plist svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   CTA
   ===================================================================== */
.sec--cta{position:relative;background:var(--ink);color:var(--txt-lt);overflow:hidden}
.cta__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;
  filter:grayscale(.35)}
.sec--cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,9,12,.96) 30%,rgba(7,9,12,.72))}
.sec--cta .wrap{position:relative;z-index:2}
.cta__links{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.cta__link{display:flex;align-items:center;gap:14px;padding:15px 22px;border-radius:var(--r);
  border:1px solid var(--line-lt);background:rgba(255,255,255,.04);transition:.45s var(--e)}
.cta__link:hover{border-color:rgba(200,169,106,.5);background:rgba(200,169,106,.09);transform:translateY(-3px)}
.cta__link svg{width:20px;height:20px;color:var(--gold);flex:none}
.cta__link small{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,241,234,.45)}
.cta__link b{display:block;font-size:15px;font-weight:400;margin-top:2px}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{background:var(--ink);color:var(--txt-lt);padding-top:clamp(60px,7vw,96px)}
.foot__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:56px}
.brand--lg .brand__plate{padding:12px 20px}
.brand--lg .brand__plate img{height:76px}
.foot__brand p{font-size:14px;color:rgba(244,241,234,.48);margin-top:24px;max-width:42ch}
.foot__col h4{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-weight:500}
.foot__col a{display:block;font-size:14px;color:rgba(244,241,234,.55);padding:6px 0;transition:.35s;width:fit-content}
.foot__col a:hover{color:var(--gold-lt);transform:translateX(5px)}
.foot__col .btn{margin-top:16px}
.foot__legal{border-top:1px solid rgba(255,255,255,.08);padding:26px 0 108px}
.foot__legal p{font-size:11.5px;line-height:1.85;color:rgba(244,241,234,.35)}
.foot__legal b{color:rgba(244,241,234,.55);font-weight:500}
.foot__cr{margin-top:12px;letter-spacing:.1em}

/* =====================================================================
   STICKY BAR / WHATSAPP
   ===================================================================== */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;
  background:rgba(6,8,11,.96);backdrop-filter:blur(18px);border-top:1px solid rgba(200,169,106,.24);
  padding:10px 12px;gap:10px;align-items:center;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.sticky a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 8px;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);color:rgba(244,241,234,.9)}
.sticky svg{width:17px;height:17px;color:var(--gold)}
.sticky span{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.sticky__cta{flex:1.25;padding:16px 10px;border-radius:var(--r);background:var(--gold-grad);background-size:200%;
  color:#15100A;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;animation:pulseg 2.6s infinite}
@keyframes pulseg{0%,100%{box-shadow:0 0 0 0 rgba(200,169,106,.5)}60%{box-shadow:0 0 0 12px rgba(200,169,106,0)}}

/* =====================================================================
   MODAL
   ===================================================================== */
.modal{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;transition:.45s var(--e)}
.modal.is-open{opacity:1;visibility:visible}
.modal__bd{position:absolute;inset:0;background:rgba(4,6,9,.82);backdrop-filter:blur(10px)}
.modal__box{position:relative;width:min(980px,100%);max-height:92vh;overflow:auto;border-radius:22px;
  display:grid;grid-template-columns:.82fr 1fr;background:var(--paper);border:1px solid rgba(200,169,106,.34);
  box-shadow:0 60px 130px -50px rgba(0,0,0,.9);transform:translateY(28px) scale(.97);transition:.55s var(--e)}
.modal.is-open .modal__box{transform:none}
.modal__x{position:absolute;top:16px;right:16px;z-index:6;width:40px;height:40px;display:grid;place-items:center;
  border-radius:50%;background:#fff;border:1px solid rgba(18,22,28,.13);color:var(--txt);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.35);transition:.4s var(--e)}
.modal__x svg{width:16px;height:16px;stroke-width:1.8}
.modal__x:hover{background:var(--gold);color:#15100A;border-color:var(--gold);transform:rotate(90deg)}

/* ---- left: image panel stays dark for contrast ---- */
.modal__art{position:relative;background-size:cover;background-position:center 38%;padding:34px 30px 36px;
  display:flex;align-items:flex-end}
.modal__art::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,9,12,.34) 0%,rgba(7,9,12,.72) 52%,rgba(7,9,12,.96) 100%)}
.modal__art-in{position:relative;color:var(--txt-lt);width:100%}
.modal__art-in h3{font-family:var(--ff-d);font-weight:600;font-size:23px;line-height:1.24;margin-bottom:18px;letter-spacing:-.012em}
.modal__art-in ul{display:flex;flex-direction:column;gap:9px}
.modal__art-in li{font-size:12.5px;color:rgba(244,241,234,.66);padding-left:16px;position:relative}
.modal__art-in li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.modal__price{margin-top:22px;padding-top:18px;border-top:1px solid rgba(200,169,106,.32)}
.modal__price small{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(244,241,234,.55);margin-bottom:5px}
.modal__price b{display:flex;align-items:baseline;gap:7px;font-family:var(--ff-d);font-weight:500;
  font-size:29px;line-height:1.06;color:#F5E7C4;text-shadow:0 0 28px rgba(200,169,106,.5)}
.modal__price em{font-style:normal;font-family:var(--ff-b);font-weight:400;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* ---- right: LIGHT form panel ---- */
.modal__form{position:relative;padding:clamp(30px,3.2vw,46px);overflow:hidden;
  background:linear-gradient(158deg,#FFFDF7 0%,#FBF5E7 55%,#F6EDDB 100%)}
.modal__form>.modal__head,.modal__form>form{position:relative;z-index:2}
/* warm blooms behind the light panel */
.modal__form .orb{filter:blur(58px)}
.modal__form .orb--gold{opacity:.34;background:radial-gradient(circle,rgba(219,186,116,.95),transparent 72%)}
.modal__form .orb--cool{opacity:.18;background:radial-gradient(circle,rgba(146,170,206,.85),transparent 72%)}

.modal__head{margin-bottom:26px;padding-right:52px}
.modal__step{display:inline-flex;align-items:center;gap:9px;font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dk);padding:7px 14px;border-radius:100px;
  background:rgba(200,169,106,.13);border:1px solid rgba(200,169,106,.38);margin-bottom:16px}
.modal__step i{width:6px;height:6px;border-radius:50%;background:var(--gold-dk);flex:none;
  box-shadow:0 0 0 0 rgba(154,123,63,.6);animation:blip 2s ease-out infinite}
.modal__head h3{font-family:var(--ff-d);font-weight:600;font-size:clamp(21px,1.95vw,26px);line-height:1.24;color:var(--txt);letter-spacing:-.014em}
.modal__head p{font-size:14px;color:var(--txt-2);margin-top:9px}

/* light fields — scoped so the dark hero/CTA glass forms are untouched */
.modal__form .field input{
  background:#fff;border:1px solid rgba(18,22,28,.14);color:var(--txt);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 3px rgba(18,22,28,.06);
}
.modal__form .field input:hover{background:#fff;border-color:rgba(200,169,106,.6)}
.modal__form .field input:focus{
  border-color:var(--gold-dk);background:#fff;
  box-shadow:inset 0 1px 3px rgba(18,22,28,.04),0 0 0 4px rgba(200,169,106,.17),0 10px 26px -16px rgba(154,123,63,.8);
}
.modal__form .field input:-webkit-autofill{-webkit-text-fill-color:var(--txt);-webkit-box-shadow:0 0 0 1000px #fff inset}
.modal__form .field label{color:rgba(18,22,28,.46)}
.modal__form .field input:focus+label,
.modal__form .field input:not(:placeholder-shown)+label{color:var(--gold-dk)}
.modal__form .field__pre{color:rgba(18,22,28,.42)}

/* trust row replaces the single privacy line */
.mtrust{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:18px}
.mtrust li{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.03em;color:var(--txt-2)}
.mtrust i{flex:none;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-grad);background-size:200% auto}
.mtrust svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.lb{position:fixed;inset:0;z-index:960;background:rgba(4,6,9,.95);display:grid;place-items:center;padding:60px 24px;
  opacity:0;visibility:hidden;transition:.4s var(--e)}
.lb.is-open{opacity:1;visibility:visible}
.lb img{max-width:min(1100px,92vw);max-height:80vh;border-radius:var(--r-lg);object-fit:contain;
  box-shadow:0 40px 100px -40px rgba(0,0,0,1);transform:scale(.95);transition:.5s var(--e)}
.lb.is-open img{transform:scale(1)}
.lb__x{position:absolute;top:20px;right:20px;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);color:var(--txt-lt);transition:.4s var(--e)}
.lb__x:hover{background:var(--gold);color:#15100A;transform:rotate(90deg)}
.lb__x svg{width:18px;height:18px}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.2);color:var(--txt-lt);transition:.4s var(--e)}
.lb__nav svg{width:20px;height:20px}
.lb__nav:hover{background:var(--gold);color:#15100A}
.lb__nav--p{left:20px}.lb__nav--p svg{transform:rotate(180deg)}
.lb__nav--n{right:20px}
.lb__cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(244,241,234,.6)}

/* =====================================================================
   REVEAL ANIMATIONS
   ===================================================================== */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .95s var(--e),transform .95s var(--e);will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}
.reveal[data-d="6"]{transition-delay:.54s}
.reveal[data-d="7"]{transition-delay:.63s}
.reveal[data-d="8"]{transition-delay:.72s}
.reveal[data-d="9"]{transition-delay:.81s}

/* split text */
.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w>i{display:inline-block;font-style:inherit;transform:translateY(110%) rotate(4deg);opacity:0;
  transition:transform 1.05s var(--e),opacity .8s var(--e)}
.split.is-in .w>i{transform:none;opacity:1}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1180px){
  .amen__grid{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .why__grid .wcard:nth-child(4){grid-column:auto}
  .why__grid .wcard:nth-child(5){grid-column:span 2}
  .foot__grid{grid-template-columns:1fr 1fr;gap:36px}
}

@media (max-width:1024px){
  :root{--hdr-h:92px}
  .brand__plate{padding:8px 14px}
  .brand__plate img{height:52px}
  .hdr.is-solid .brand__plate img{height:46px}
  .hero__inner{grid-template-columns:1fr;gap:38px}
  .hero{min-height:auto;padding-top:calc(var(--hdr-h) + 52px);padding-bottom:84px}
  .hero__form{max-width:520px}
  .hero__title{font-size:clamp(42px,7.4vw,72px)}
  .hero__scroll{display:none}
  .grid-2{grid-template-columns:1fr}
  .sec--overview .ov__media{order:2;margin-top:16px}
  .unit{grid-template-columns:1fr}
  .unit__media{min-height:320px}
  .unit__media::after{background:linear-gradient(180deg,transparent 50%,rgba(7,9,12,.6))}
  /* image panel becomes a compact banner rather than disappearing */
  .modal__box{grid-template-columns:1fr}
  .modal__art{min-height:172px;padding:22px 24px}
  .modal__art-in h3{font-size:24px;margin-bottom:0}
  .modal__art-in ul{display:none}
  .modal__price{margin-top:14px;padding-top:13px}
  .modal__price b{font-size:30px}
  .modal__head{padding-right:0}
}

@media (max-width:860px){
  .nav{
    position:fixed;top:0;right:0;bottom:0;width:min(360px,87vw);z-index:912;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(var(--hdr-h) + 14px) 28px calc(28px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(168deg,#FFFDF7 0%,#FBF6EA 56%,#F4EBD9 100%);
    border-left:1px solid rgba(200,169,106,.42);
    box-shadow:-46px 0 100px -44px rgba(58,44,18,.55);
    transform:translateX(102%);transition:transform .58s var(--e);
  }
  .nav::before{content:"";position:absolute;top:-12%;right:-28%;width:78%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(200,169,106,.30),transparent 68%);filter:blur(36px);pointer-events:none}
  .nav.is-open{transform:none}

  .nav__label{display:block;position:relative;font-size:9.5px;font-weight:500;letter-spacing:.32em;
    text-transform:uppercase;color:var(--gold-dk);padding-bottom:16px;margin-bottom:6px;
    border-bottom:1px solid rgba(200,169,106,.34)}

  .nav>a,.hdr.is-solid .nav>a{
    position:relative;display:flex;align-items:center;gap:15px;width:100%;opacity:1;
    font-family:var(--ff-d);font-size:18px;font-weight:600;letter-spacing:-.005em;text-transform:none;
    color:var(--txt);padding:17px 0;border-bottom:1px solid rgba(18,22,28,.10);
    transition:color .35s var(--e),padding-left .4s var(--e)}
  .nav>a em{display:block;flex:none;width:24px;font-family:var(--ff-b);font-style:normal;font-weight:500;
    font-size:10px;letter-spacing:.16em;color:var(--gold-dk);opacity:.75;transition:.35s}
  .nav>a::after{display:none}
  .nav>a:hover,.nav>a.is-active{color:var(--gold-dk);padding-left:7px}
  .nav>a:hover em,.nav>a.is-active em{opacity:1}

  .nav__foot{display:grid;gap:10px;margin-top:auto;padding-top:28px}
  .nav__foot .btn{width:100%}
  /* .btn--line is built for dark backgrounds — invert it for the light panel */
  .nav__foot .btn--line{color:var(--txt);border-color:rgba(18,22,28,.20)}
  .nav__foot .btn--line::before{--bg:rgba(18,22,28,.035)}
  .nav__foot .btn--line:hover{color:#15100A;border-color:transparent}

  /* burger sits on the light panel while open — flip it to dark */
  .burger{display:flex;z-index:920}
  .hdr.is-menu .burger{border-color:rgba(18,22,28,.20);background:rgba(255,255,255,.55)}
  .hdr.is-menu .burger i{background:var(--txt)}
  .hdr__cta .btn--gold{display:none}
  .gal{grid-template-columns:repeat(2,1fr)}
  .sticky{display:flex}
  /* pricing card stacks: dotted rule flips from vertical to horizontal */
  .pcard{grid-template-columns:1fr;gap:30px}
  .pcard__rule{width:100%;height:1px;background-image:linear-gradient(90deg,rgba(140,112,54,.5) 46%,transparent 0);
    background-size:9px 1px;background-repeat:repeat-x}
  .pcard__title{padding-right:0;margin-top:44px}
  .pcard__badge{top:24px;left:clamp(24px,4vw,40px);right:auto}
  .pcard__side{padding-top:0}
  .foot__legal{padding-bottom:96px}
}

@media (max-width:640px){
  :root{--r-lg:8px;--hdr-h:80px}
  .brand__plate{padding:7px 12px}
  .brand__plate img{height:44px}
  .hdr.is-solid .brand__plate img{height:40px}
  .brand--lg .brand__plate img{height:62px}
  .hero__chips li{padding:0 16px}
  .hero__price{gap:16px;padding:14px 20px}
  .hero__price-d{padding-left:16px}
  .ov__media{padding-right:0;padding-bottom:40px}
  .pic--float{width:46%;border-width:6px}
  .ov__badge{left:0;top:18px;padding:15px 18px}
  .ov__badge b{font-size:28px}
  .unit__meta{grid-template-columns:1fr 1fr;gap:16px}
  .amen__feat{grid-template-columns:1fr}
  .amen__grid{grid-template-columns:1fr}
  .acard{aspect-ratio:16/11}
  .pcard{border-radius:22px}
  .plist{grid-template-columns:1fr}
  .pcard__cta{width:100%}
  .why__grid{grid-template-columns:1fr}
  .why__grid .wcard:nth-child(5){grid-column:auto}
  .gal{grid-template-columns:1fr}
  .gal .gitem{aspect-ratio:4/3}
  .foot__grid{grid-template-columns:1fr;gap:32px}
  .hero__price{width:100%}
  .hero__actions .btn{width:100%}
  .unit__cta .btn{width:100%}
  .cta__links{flex-direction:column}
  .cta__link{width:100%}
  .lb__nav{width:42px;height:42px}
  .lb__nav--p{left:8px}.lb__nav--n{right:8px}
}

/* =====================================================================
   MOTION PREFERENCES / PRINT
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .split .w>i{transform:none;opacity:1}
}

/* SweetAlert tune */
.swal2-popup{font-family:var(--ff-b)!important;border-radius:10px!important}
.swal2-title{font-family:var(--ff-d)!important;font-weight:500!important}
.swal2-styled.swal2-confirm{background:var(--gold-grad)!important;color:#15100A!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;font-size:12px!important}