/* Big Hills DR - site stylesheet.
   Port of the approved static build (bighillsdr/build/static/site.css). Layout, motion and
   component rules are unchanged; only the :root block was rewired so the starter's design
   tokens can override brand colour and type. Edit this file, not the compiled copy. */
:root{
  /* Brand values come from the starter token layer when the Design screen is used,
     and fall back to the approved static-site palette when a token is unset. */
  --ink:var(--cx-ink,#04182b);
  --navy:var(--cx-accent-2,#002f52);
  --navy-soft:#0d3757;
  --aqua:var(--cx-accent,#00b6c0);
  --aqua-ink:#00707a;   /* AA-safe aqua for small text on light ground */
  --aqua-bright:#00c6d1;
  --aqua-pale:#daffff;
  --sand:var(--cx-surface,#f4efe6);
  --paper:var(--cx-bg,#fffdfa);
  --gold:#c79a2e;
  --line:rgba(4,24,43,.14);
  --line-dark:rgba(255,255,255,.16);
  --shadow:0 40px 80px -40px rgba(4,24,43,.45);

  --display:var(--cx-font-display,"Fraunces",Georgia,serif);
  --sans:var(--cx-font-body,"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);

  --pad:clamp(20px,5vw,80px);
  --maxw:1560px;
  --r:2px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:clamp(16px,1.05vw,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--aqua);color:#fff}

h1,h2,h3,h4{
  font-family:var(--display);font-weight:400;font-optical-sizing:auto;
  line-height:.98;letter-spacing:-.022em;margin:0;
  font-variation-settings:"SOFT" 20,"WONK" 1;
}
.h-xxl{font-size:clamp(3.1rem,9.2vw,10.5rem)}
.h-xl{font-size:clamp(2.6rem,6.4vw,6.4rem)}
.h-l{font-size:clamp(2rem,4.1vw,4rem)}
.h-m{font-size:clamp(1.5rem,2.3vw,2.4rem)}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.12rem,1.55vw,1.5rem);line-height:1.5;font-weight:300;letter-spacing:-.01em}

.kicker{
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  display:inline-flex;align-items:center;gap:.7em;color:var(--aqua-ink);
}
.kicker::before{content:"";width:2.4em;height:1px;background:currentColor;opacity:.7}
.kicker--plain::before{display:none}
.num{font-family:var(--display);font-variant-numeric:tabular-nums}
.mono{font-feature-settings:"tnum";letter-spacing:.02em}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(72px,10vw,170px);position:relative}
.section--tight{padding-block:clamp(52px,6vw,96px)}
.dark{background:var(--ink);color:#f4f7f9}
.dark .kicker{color:var(--aqua-bright)}
.dark a{color:inherit}
.sand{background:var(--sand)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.dark .rule{background:var(--line-dark)}

/* ---------- grain + noise overlay ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;mix-blend-mode:multiply;
  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='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;padding-block:clamp(14px,1.6vw,22px);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),padding .4s var(--ease);
  color:#fff}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr.is-solid{background:rgba(4,24,43,.86);backdrop-filter:blur(14px) saturate(1.2);padding-block:10px}
.hdr.is-light:not(.is-solid){color:var(--ink)}
/* pages that open on paper instead of a photo hero: dark chrome, or the logo vanishes */
body.light-top .hdr:not(.is-solid){color:var(--ink)}
body.light-top .hdr:not(.is-solid) .btn--ghost{border-color:currentColor}
.brand{display:flex;align-items:center;gap:.6rem;color:inherit}
.brand__mark{height:clamp(28px,2.7vw,36px);width:auto;flex:none}
.brand__word{height:clamp(13px,1.2vw,16px);width:auto;flex:none;margin-top:.15em}
.brand span{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.65;
  align-self:flex-end;padding-bottom:.15em}
.hdr.is-solid .brand__mark{height:clamp(24px,2vw,28px)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,34px);font-size:.85rem;letter-spacing:.02em}
.nav a{position:relative;padding-block:6px;opacity:.86}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}
.hdr__bar{position:absolute;left:0;bottom:0;height:1px;background:var(--aqua);width:var(--sp,0%);transition:width .1s linear}
.burger{display:none;width:44px;height:44px;border:1px solid currentColor;background:none;color:inherit;border-radius:50%;
  align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger i{display:block;width:16px;height:1px;background:currentColor}

.btn{display:inline-flex;align-items:center;gap:.7em;padding:.95em 1.55em;border-radius:100px;
  font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;font-weight:400;
  background:var(--aqua);color:#fff;border:1px solid var(--aqua);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--ghost:hover{background:currentColor;color:var(--ink);border-color:currentColor}
.btn--lg{padding:1.15em 2.1em;font-size:.86rem}
.btn i{width:1em;height:1em;border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg) translateY(.05em);display:inline-block}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:clip;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;background:var(--navy)}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);
  animation:kb 24s var(--ease) forwards}
@keyframes kb{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,24,43,.72) 0%,rgba(4,24,43,.22) 34%,rgba(4,24,43,.55) 72%,rgba(4,24,43,.92) 100%)}
.hero .kicker{color:#fff;text-shadow:0 1px 12px rgba(4,24,43,.6)}
.hero h1,.hero__sub{text-shadow:0 2px 30px rgba(4,24,43,.35)}
.hero__in{width:100%;padding-bottom:clamp(28px,5vw,74px);padding-top:clamp(120px,18vh,220px)}
.hero h1{max-width:16ch}
.hero__sub{max-width:44ch;margin-top:clamp(18px,2vw,30px);opacity:.9}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,44px)}
.hero__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(14px,2vw,34px);
  margin-top:clamp(38px,5vw,72px);padding-top:26px;border-top:1px solid var(--line-dark)}
.hero__facts div span{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.62;margin-bottom:.5em}
.hero__facts div b{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.2vw,2.1rem);letter-spacing:-.02em}
.scrollcue{position:absolute;right:var(--pad);bottom:clamp(96px,11vw,130px);writing-mode:vertical-rl;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;opacity:.7;display:flex;align-items:center;gap:12px}
.scrollcue::after{content:"";width:1px;height:56px;background:currentColor;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:0 0}45%{transform:scaleY(1);transform-origin:0 0}
  55%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}

/* page hero (interior pages) */
.phero{position:relative;min-height:clamp(56vh,62vw,86vh);display:flex;align-items:flex-end;color:#fff;overflow:clip;isolation:isolate}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,24,43,.66) 0,rgba(4,24,43,.2) 40%,rgba(4,24,43,.85) 100%)}
.phero h1{clip-path:inset(0 0 106% 0);animation:heroIn .45s var(--ease) forwards}
.phero .crumbs,.phero .lead{animation:fadeUp .7s .2s var(--ease) both}
.phero__in{width:100%;padding-bottom:clamp(30px,4.5vw,68px);padding-top:clamp(130px,16vh,200px)}
.crumbs{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:1.2em}
.crumbs a:hover{color:var(--aqua-bright)}

/* ---------- reveal motion ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-img]{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
[data-reveal-img].in{clip-path:inset(0 0 0 0)}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
.stagger.in>*:nth-child(6){transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-img],.stagger>*{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero__media img{animation:none}
}

/* ---------- editorial blocks ---------- */
.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,90px);align-items:start}
.split--center{align-items:center}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3vw,56px)}
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,48px)}
.measure{max-width:62ch}
.figure{position:relative;overflow:hidden;background:var(--sand)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure figcaption{position:absolute;left:0;bottom:0;padding:14px 18px;background:rgba(4,24,43,.72);color:#fff;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.ratio-4x3{aspect-ratio:4/3}
.ratio-3x2{aspect-ratio:3/2}
.ratio-1x1{aspect-ratio:1/1}
.ratio-3x4{aspect-ratio:3/4}
.ratio-16x9{aspect-ratio:16/9}
.parallax{will-change:transform}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.dark .stats,.dark .stats>div{background:var(--line-dark)}
.stats>div{background:var(--paper);padding:clamp(24px,3vw,44px) clamp(18px,2vw,32px)}
.dark .stats>div{background:var(--ink)}
.stats b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4vw,3.6rem);letter-spacing:-.03em;line-height:1}
.stats span{display:block;margin-top:.7em;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;opacity:.62}

/* project cards (hub) */
.projects{display:grid;gap:clamp(18px,2vw,28px)}
.pcard{position:relative;display:grid;grid-template-columns:1fr;overflow:hidden;color:#fff;isolation:isolate}
.pcard__media{position:absolute;inset:0;z-index:0;background:var(--ink)}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pcard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(4,24,43,.94) 0%,rgba(4,24,43,.72) 34%,rgba(4,24,43,.28) 66%,rgba(4,24,43,.06) 100%)}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__idx,.pcard__in{position:relative;z-index:2}
.pcard__in{padding:clamp(28px,4.4vw,80px);min-height:clamp(420px,52vw,660px);display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.pcard__idx{position:absolute;top:clamp(20px,3vw,44px);right:clamp(20px,3vw,44px);font-family:var(--display);
  font-size:clamp(2rem,4vw,3.4rem);opacity:.32}
.pcard__meta{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,44px);padding-top:20px;border-top:1px solid var(--line-dark);font-size:.8rem}
.pcard__meta b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:400;margin-top:.25em}
.pcard__meta span{opacity:.6;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}

/* unit grid */
.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(18px,2vw,34px);align-items:start}
.ucard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease)}
.ucard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.ucard__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.ucard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ucard:hover .ucard__media img{transform:scale(1.06)}
.ucard__tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--ink);
  padding:.45em .9em;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.ucard__body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px;flex:1}
.ucard__body h3{font-size:clamp(1.35rem,1.9vw,1.75rem)}
.ucard__facts{display:flex;flex-wrap:wrap;gap:14px;font-size:.8rem;opacity:.74;margin-top:auto}
.ucard__facts span{display:inline-flex;gap:.4em;align-items:baseline}
.ucard__price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--line);font-family:var(--display);font-size:1.32rem}
.ucard__price em{font-style:normal;font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.55}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3vw,42px)}
.chip{border:1px solid var(--line);background:none;border-radius:100px;padding:.6em 1.25em;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;transition:.35s var(--ease)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip:hover{border-color:var(--ink)}

/* spec list */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.specs>div{background:var(--paper);padding:18px 20px}
.specs span{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:.55em}
.specs b{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:-.02em}
.featlist{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(20px,3vw,44px)}
.featlist li{break-inside:avoid;padding:.55em 0 .55em 1.35em;position:relative;border-bottom:1px solid var(--line);font-size:.95rem}
.featlist li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px;background:var(--aqua);border-radius:50%}
@media (max-width:640px){.featlist{columns:1}}

/* sticky buy rail */
.rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px;
  border:1px solid var(--line);padding:clamp(22px,2.6vw,34px);background:var(--paper)}
.rail__price{font-family:var(--display);font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1;letter-spacing:-.03em}
.rail__row{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:.55em 0;border-bottom:1px solid var(--line)}
.rail__row span{opacity:.6}
.rail .btn{justify-content:center}

/* payment timeline */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.dark .steps,.dark .steps>*{background:var(--line-dark)}
.steps>div{background:var(--paper);padding:clamp(22px,3vw,40px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px);align-items:start}
.dark .steps>div{background:var(--ink)}
.steps>div::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--display);
  font-size:clamp(1.6rem,2.6vw,2.4rem);opacity:.34;line-height:1}
.steps h3{margin-bottom:.5em;font-size:clamp(1.25rem,1.9vw,1.7rem)}
.steps p{margin:0;max-width:70ch;opacity:.82}

/* gallery rail */
.rail-scroll{display:flex;gap:clamp(12px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--pad);padding-bottom:14px;scrollbar-width:thin}
.rail-scroll>figure{flex:0 0 clamp(260px,38vw,620px);scroll-snap-align:center;margin:0}
.rail-scroll img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* gallery grid — fixed row rhythm so mixed spans never leave holes */
.gal{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(120px,11.5vw,190px);
  grid-auto-flow:dense;gap:clamp(10px,1.1vw,18px)}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--sand);
  grid-column:span 4;grid-row:span 2}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.gal .g-8{grid-column:span 8}
.gal .g-6{grid-column:span 6}
.gal .g-12{grid-column:span 12}
.gal .g-tall{grid-row:span 3}
@media (max-width:820px){.gal{grid-auto-rows:clamp(110px,26vw,180px)}
  .gal figure,.gal .g-8,.gal .g-6,.gal .g-12{grid-column:span 12;grid-row:span 2}}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line-dark);padding-block:clamp(14px,1.6vw,22px)}
.marquee__in{display:flex;gap:3rem;width:max-content;animation:mq 38s linear infinite;font-family:var(--display);
  font-size:clamp(1.6rem,3vw,2.8rem);opacity:.9;white-space:nowrap}
.marquee__in span{display:inline-flex;align-items:center;gap:3rem}
.marquee__in span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--aqua)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__in{animation:none}}

/* accordion */
.acc{border-top:1px solid var(--line)}
.dark .acc{border-color:var(--line-dark)}
.acc details{border-bottom:1px solid var(--line)}
.dark .acc details{border-color:var(--line-dark)}
.acc summary{list-style:none;cursor:pointer;padding:clamp(18px,2vw,26px) 44px clamp(18px,2vw,26px) 0;position:relative;
  font-family:var(--display);font-size:clamp(1.1rem,1.65vw,1.45rem);letter-spacing:-.015em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease)}
.acc details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.acc .acc__body{padding:0 clamp(20px,6vw,90px) clamp(20px,2.4vw,30px) 0;max-width:78ch;opacity:.84}

/* form */
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.field{position:relative;display:flex;flex-direction:column;gap:8px}
.field label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--line-dark);
  padding:.7em 0;border-radius:0;transition:border-color .4s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--aqua-bright)}
/* The select was left on the browser's own control - a boxed widget with a native arrow that
   ignored the underline the other fields use. Strip the appearance and draw the chevron here. */
.field select{appearance:none;-webkit-appearance:none;color:inherit;cursor:pointer;padding-right:1.6em}
.field select option{color:#04182b;background:#fffdfa}
.field:has(select)::after{content:"";position:absolute;right:.25em;bottom:1.05em;width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);
  opacity:.45;pointer-events:none;transition:opacity .3s var(--ease)}
.field:has(select:focus)::after{opacity:.9}
.form .hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.form__note{font-size:.78rem;opacity:.55;max-width:52ch}
.form__msg{font-size:.9rem;padding:.9em 1.1em;border:1px solid var(--aqua);display:none}
.form__msg.show{display:block}

/* footer */
.ftr{background:var(--ink);color:#e8eef2;padding-top:clamp(60px,7vw,110px)}
.ftr__logo{width:clamp(150px,13vw,196px);height:auto;display:block;margin-bottom:1.6em}
.ftr a:hover{color:var(--aqua-bright)}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(140px,1fr));gap:clamp(26px,3vw,54px)}
.ftr h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;opacity:.5;margin-bottom:1.4em;font-weight:400}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.75em;font-size:.92rem}
.ftr__wordwrap{overflow:hidden;margin-top:clamp(40px,6vw,90px)}
.ftr__word{font-family:var(--display);font-size:clamp(3rem,13vw,13rem);line-height:.8;letter-spacing:-.04em;
  opacity:.13;white-space:nowrap}
.ftr__legal{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:.76rem;opacity:.55;
  padding-block:26px;border-top:1px solid var(--line-dark);margin-top:clamp(30px,4vw,50px)}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}

/* floating whatsapp */
.wa{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:45;
  display:inline-flex;align-items:center;gap:.6em;background:var(--aqua);color:#fff;padding:.85em 1.25em;border-radius:100px;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 18px 40px -18px rgba(0,182,192,.9);
  transition:transform .4s var(--ease),background .4s var(--ease)}
.wa:hover{transform:translateY(-3px);background:var(--ink)}

@media (max-width:980px){
  .split{grid-template-columns:1fr}
  .rail{position:static}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){.scrollcue{display:none}}
@media (max-width:760px){
  .nav{display:none}
  .nav.is-open{display:flex;position:fixed;inset:0;background:var(--ink);color:#fff;flex-direction:column;
    align-items:flex-start;justify-content:center;gap:22px;padding:var(--pad);font-size:1.5rem;font-family:var(--display)}
  .nav.is-open a{opacity:1;padding-block:.15em}
  .burger{display:inline-flex}
  /* The open menu is fixed and covered the header, so the logo and the button that
     opens it disappeared and there was no visible way back. Lift the header row above
     the panel and turn the bars into a close mark. */
  .nav.is-open{z-index:1}
  .hdr .brand,.burger{position:relative;z-index:2}
  /* The panel is position:fixed, but a scrolled header carries backdrop-filter, and that
     makes the header the containing block for its fixed children: the open menu collapsed
     into the header strip (390x64), so the background only painted behind the header and
     the links spilled over the page. While the menu is open the blur buys nothing - the
     panel covers the screen anyway - so drop it and let the panel own the viewport again. */
  /* transition:none is not cosmetic. The header animates backdrop-filter over .5s, and
     during that animation the computed value is still a filter function, so the header
     stays the containing block: the panel sat at 64px tall for half a second after every
     tap and only then snapped to full height. Drop the blur in one frame. */
  body.nav-open .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;transition:none}
  /* И этого мало: снимать фильтр в момент открытия поздно. Пока Safari пересчитывает
     стиль, шапка ещё containing block, и панель на один кадр схлопывается в её полосу:
     фон красится только за шапкой, а пункты вываливаются поверх страницы и нечитаемы
     (видео 25.08). Поэтому на телефоне у шапки фильтра нет ВООБЩЕ - блюр здесь почти
     не виден, зато он единственная причина этого класса поломок. */
  .hdr,.hdr.is-solid{backdrop-filter:none;-webkit-backdrop-filter:none}
  .hdr.is-solid{background:rgba(4,24,43,.96)}
  .burger i{transition:transform .3s var(--ease),opacity .2s var(--ease)}
  .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .burger[aria-expanded="true"] i:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .hero__facts{grid-template-columns:1fr 1fr}
}

/* ============================================================
   PASS 2 — rhythm, scale drama, signature blocks
   ============================================================ */

/* --- statement: huge type over a full-bleed image --- */
.statement{position:relative;isolation:isolate;color:#fff;overflow:clip;
  min-height:clamp(520px,78vh,860px);display:flex;align-items:center}
.statement__media{position:absolute;inset:-8% 0;z-index:0}
.statement__media img{width:100%;height:100%;object-fit:cover}
.statement::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,24,43,.7),rgba(4,24,43,.55) 45%,rgba(4,24,43,.82))}
.statement .wrap{position:relative;z-index:2}
.statement q{quotes:none;display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,5.6vw,5.4rem);line-height:1.02;letter-spacing:-.028em;max-width:19ch;
  text-shadow:0 2px 40px rgba(4,24,43,.4)}
.statement q em{font-style:italic;color:var(--aqua-bright);text-shadow:0 2px 24px rgba(4,24,43,.85)}
.statement__foot{margin-top:clamp(22px,3vw,42px);display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,30px);
  align-items:center;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}

/* --- numbered editorial list --- */
.nlist{border-top:1px solid var(--line);counter-reset:n}
.dark .nlist{border-color:var(--line-dark)}
.nlist>div{counter-increment:n;display:grid;grid-template-columns:4ch minmax(0,.95fr) minmax(0,1.25fr);
  gap:clamp(14px,3vw,50px);align-items:start;padding:clamp(22px,3vw,42px) 0;border-bottom:1px solid var(--line);
  transition:background .5s var(--ease)}
.dark .nlist>div{border-color:var(--line-dark)}
.nlist>div::before{content:counter(n,decimal-leading-zero);font-family:var(--display);
  font-size:clamp(.95rem,1.3vw,1.15rem);opacity:.4;padding-top:.4em}
.nlist h3{font-size:clamp(1.35rem,2.2vw,2rem);letter-spacing:-.02em;max-width:18ch}
.nlist p{margin:0;opacity:.8;max-width:none;font-size:clamp(1rem,1.15vw,1.15rem)}
.nlist>div:hover{background:linear-gradient(90deg,rgba(0,182,192,.07),transparent 60%)}
@media (max-width:820px){
  .nlist>div{grid-template-columns:auto 1fr;gap:10px 16px;padding:22px 0}
  .nlist>div::before{grid-row:span 2;font-size:1rem}
  .nlist p{grid-column:2}
}

/* --- sticky stacked project cards (desktop only; the nth-child offsets must never
       apply to a relatively positioned card, or it shifts down over the next section) --- */
.stack{display:grid;gap:clamp(18px,2vw,28px)}
.stack>*{position:relative;top:auto}
@media (min-width:1024px){
  .stack>*{position:sticky;top:clamp(80px,12vh,120px)}
  .stack>*:nth-child(2){top:calc(clamp(80px,12vh,120px) + 26px)}
  .stack>*:nth-child(3){top:calc(clamp(80px,12vh,120px) + 52px)}
}

/* --- marquee band --- */
.band{background:var(--ink);color:#fff}
.band .marquee{border-block:0}
.band .marquee__in{opacity:.75}

/* --- mobile sticky buy bar --- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:46;display:none;
  align-items:center;justify-content:space-between;gap:12px;
  padding:12px clamp(14px,4vw,20px) calc(12px + env(safe-area-inset-bottom));
  background:rgba(4,24,43,.94);backdrop-filter:blur(12px);color:#fff;
  transform:translateY(110%);transition:transform .5s var(--ease)}
.mbar.in{transform:none}
.mbar b{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1}
.mbar span{display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:.35em}
.mbar .btn{padding:.8em 1.2em;font-size:.72rem}
@media (max-width:760px){
  .mbar{display:flex}
  body.has-mbar .wa{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* --- image band between text sections --- */
.imgband{position:relative;overflow:clip;height:clamp(300px,52vw,620px)}
.imgband img{width:100%;height:116%;object-fit:cover;position:absolute;inset:-8% 0}
.imgband figcaption{position:absolute;left:var(--pad);bottom:clamp(18px,3vw,34px);color:#fff;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 20px rgba(4,24,43,.8)}

/* --- pull quote inside long text --- */
.pull{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.12;
  letter-spacing:-.02em;margin:clamp(26px,3vw,44px) 0;padding-left:clamp(16px,2vw,28px);
  border-left:2px solid var(--aqua)}

/* --- stats: bigger, no ugly wraps --- */
.stats b{font-size:clamp(2.1rem,4vw,3.6rem);overflow-wrap:break-word;text-wrap:balance}
.stats>div{position:relative}
.stats>div::after{content:"";position:absolute;left:clamp(18px,2vw,32px);bottom:clamp(20px,2.4vw,36px);
  width:26px;height:2px;background:var(--aqua);opacity:0;transform:translateY(6px);
  transition:.6s var(--ease)}
.stats.in>div::after{opacity:1;transform:none}
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .stats b{font-size:clamp(1.45rem,6.4vw,2.1rem);line-height:1.05}
  .stats>div{padding:20px 16px}
}

/* --- rails: drag to scroll + edge fade --- */
.rail-wrap{position:relative}
.rail-scroll{cursor:grab;scroll-behavior:smooth}
.rail-scroll.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.rail-hint{display:flex;align-items:center;gap:.7em;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;opacity:.5;padding-inline:var(--pad);margin-bottom:14px}
.rail-hint::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3}

/* --- section heads with hairline --- */
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:clamp(26px,3.4vw,52px)}
.dark .shead{border-color:var(--line-dark)}
.shead small{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;opacity:.5;white-space:nowrap}

/* --- mobile typography drama --- */
@media (max-width:760px){
  .h-xxl{font-size:clamp(3rem,15vw,4.6rem);line-height:.94}
  .h-xl{font-size:clamp(2.6rem,12vw,3.6rem);line-height:.96}
  .h-l{font-size:clamp(2.2rem,9.5vw,3rem)}
  .h-m{font-size:clamp(1.5rem,6.4vw,2rem)}
  .lead{font-size:1.05rem}
  .section{padding-block:clamp(58px,14vw,96px)}
  .hdr{padding-block:10px}
  .hdr:not(.is-solid){background:linear-gradient(180deg,rgba(4,24,43,.75),transparent)}
  .specs{grid-template-columns:1fr 1fr}
  .steps>div{grid-template-columns:1fr;gap:6px}
  .steps>div::before{font-size:1.1rem}
}

/* --- pass 2b --- */
.hdr.is-solid{background:rgba(4,24,43,.94)}
@media (max-width:760px){body.has-mbar .wa{display:none}}

/* hero headline: masked line-in */
.hero h1{clip-path:inset(0 0 106% 0);animation:heroIn .45s var(--ease) forwards}
/* The standfirst is the LCP element on the home page: a .32s delay plus a .7s fade put
   the mark a second after first paint. Same entrance, shorter. */
.hero__sub,.hero .kicker{animation:fadeUp .4s .06s var(--ease) both}
.hero__cta{animation:fadeUp .7s .46s var(--ease) both}
@keyframes heroIn{to{clip-path:inset(0 0 -12% 0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero h1{clip-path:none;animation:none}
  .hero__sub,.hero .kicker,.hero__cta{animation:none}
}

/* featured unit card */
.units .ucard--wide{grid-column:span 2}
.units .ucard--wide .ucard__media{aspect-ratio:16/9}
.units .ucard--wide h3{font-size:clamp(1.7rem,2.8vw,2.4rem)}
@media (max-width:760px){.units .ucard--wide{grid-column:span 1}
  .units .ucard--wide .ucard__media{aspect-ratio:4/3}}

/* floor plan block */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(14px,2vw,26px)}
.plans figure{margin:0;background:#fff;border:1px solid var(--line);padding:clamp(12px,1.6vw,22px)}
.plans img{width:100%;height:auto;object-fit:contain}
.plans figcaption{margin-top:12px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55}

/* footer wordmark drifts */
.ftr__word{display:flex;gap:2rem;width:max-content;animation:mq 46s linear infinite}
@media (prefers-reduced-motion:reduce){.ftr__word{animation:none}}

/* --- pass 3: vertical rhythm --- */
.prose .prose__row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,4vw,80px);align-items:start;padding-block:clamp(26px,3vw,48px);
  border-top:1px solid var(--line)}
.prose .prose__row:first-child{border-top:0;padding-top:0}
.prose .prose__row:last-child{padding-bottom:0}
.prose .prose__row p:last-child{margin-bottom:0}
@media (max-width:900px){.prose .prose__row{grid-template-columns:1fr;gap:14px}}

/* neighbouring sections on the same ground should not double their padding */
.dark + .dark,.sand + .sand{padding-top:0}
.section:has(+ .imgband),.section--tight:has(+ .imgband){padding-bottom:clamp(48px,6vw,96px)}
.statement + .section,.statement + .section--tight,
.imgband + .section,.imgband + .section--tight{padding-top:clamp(48px,6vw,96px)}
.band + .statement{margin-top:0}

/* the tight variant has to actually read tighter on phones */
@media (max-width:760px){
  .section{padding-block:clamp(56px,13vw,86px)}
  .section--tight{padding-block:clamp(34px,8vw,56px)}
}

/* buying guide cost rows */
.costrow{padding:clamp(14px,1.6vw,20px) 0;border-bottom:1px solid var(--line)}
.costrow:first-child{border-top:1px solid var(--line)}
.costrow__head{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between}
.costrow__head span{font-size:.95rem}
.costrow__head b{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.35rem);
  letter-spacing:-.01em;text-align:right;min-width:0;overflow-wrap:break-word}
.costrow p{margin:.5em 0 0;opacity:.7;font-size:.9rem;max-width:60ch}
@media (max-width:600px){.costrow__head{flex-direction:column;align-items:flex-start}
  .costrow__head b{text-align:left}}

/* --- pass 4: stacking order + inner/outer spacing rule --- */

/* full-bleed bands always paint above the sticky project cards */
.band,.statement,.imgband{position:relative;z-index:3}
.stack{position:relative;z-index:1}
.stack > *{z-index:1}

/* inner spacing must stay smaller than the spacing between blocks */
.cols2,.cols3{gap:clamp(30px,3vw,56px) clamp(24px,3vw,48px)}
.cols2 > * > :last-child,.cols3 > * > :last-child{margin-bottom:0}
.cols2 .btn,.cols3 .btn{margin-top:clamp(16px,1.6vw,22px)}
@media (max-width:760px){
  .cols2,.cols3{gap:0}
  .cols2 > * + *,.cols3 > * + *{
    margin-top:clamp(34px,8vw,46px);padding-top:clamp(30px,7vw,40px);
    border-top:1px solid var(--line)}
  .dark .cols2 > * + *,.dark .cols3 > * + *{border-color:var(--line-dark)}
}

/* footer headings are labels, not document structure (kept out of the h-order) */
.ftr__h{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  opacity:.5;margin:0 0 1.4em;font-weight:400}

/* ============================================================
   PASS 5 — image-first, quicker motion
   ============================================================ */

/* images fade in over their own blurred preview instead of popping */
.img{opacity:0;transition:opacity .45s var(--ease)}
.img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.img{opacity:1}}
/* The hero photograph is the LCP element, and a fade-in delays that mark by the length
   of the transition - measured 1.9 s against a 1.4 s download on a throttled phone.
   Priority images paint immediately; everything further down still fades in. */
.img[fetchpriority="high"]{opacity:1;transition:none}

/* motion: shorter, snappier */
[data-reveal]{transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-reveal-img]{transition:clip-path .7s var(--ease)}
.stagger>*{transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stagger.in>*:nth-child(2){transition-delay:.05s}
.stagger.in>*:nth-child(3){transition-delay:.1s}
.stagger.in>*:nth-child(4){transition-delay:.15s}
.stagger.in>*:nth-child(5){transition-delay:.2s}
.stagger.in>*:nth-child(6){transition-delay:.25s}
.gal figure:hover img,.ucard:hover .ucard__media img,.pcard:hover .pcard__media img{transition-duration:.7s}
.hero__media img{animation:kb 16s var(--ease) forwards}

/* full-bleed mosaic wall */
.wall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,13vw,220px);gap:4px;
  background:var(--ink)}
.wall figure{margin:0;position:relative;overflow:hidden;grid-row:span 2}
.wall figure:nth-child(1){grid-column:span 2;grid-row:span 3}
.wall figure:nth-child(6){grid-column:span 2;grid-row:span 3}
.wall img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.wall figure:hover img{transform:scale(1.05)}
@media (max-width:820px){
  .wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(110px,26vw,190px)}
  .wall figure:nth-child(1),.wall figure:nth-child(6){grid-column:span 2;grid-row:span 2}
}

/* lightbox */
.gal figure,.wall figure,.plans figure{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:80;background:rgba(4,24,43,.96);display:none;
  align-items:center;justify-content:center;padding:clamp(12px,3vw,48px)}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;opacity:0;transform:scale(.985);
  transition:opacity .35s var(--ease),transform .45s var(--ease)}
.lb img.on{opacity:1;transform:none}
.lb__x,.lb__nav{position:absolute;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.lb__x:hover,.lb__nav:hover{background:var(--aqua);border-color:var(--aqua)}
.lb__x{top:clamp(12px,2vw,28px);right:clamp(12px,2vw,28px)}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav.prev{left:clamp(10px,2vw,28px)}
.lb__nav.next{right:clamp(10px,2vw,28px)}
.lb__count{position:absolute;bottom:clamp(12px,2vw,28px);left:50%;transform:translateX(-50%);
  color:#fff;font-size:.72rem;letter-spacing:.24em;opacity:.6}
@media (max-width:700px){.lb__nav{width:44px;height:44px}}

/* legal pages: narrower heading column, prose keeps the reading measure */
.split--legal{align-items:start}
@media (min-width:1024px){.split--legal{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.split--legal .measure p{opacity:.82;margin-bottom:1.1em}
.split--legal .measure p:last-child{margin-bottom:0}
.split--legal .kicker{font-variant-numeric:tabular-nums}

/* header language switcher (TranslatePress) */
.langsw{display:inline-flex;gap:.55em;align-items:center;font-size:.72rem;letter-spacing:.14em;
  padding-left:clamp(6px,1vw,14px);border-left:1px solid currentColor;opacity:.75}
.langsw a{opacity:.7}
.langsw a:hover{opacity:1}
.langsw a.is-on{opacity:1;font-weight:600}
@media (max-width:1024px){.langsw{border-left:0;padding-left:0}}

/* Reveal safety: the hidden state belongs to JavaScript. If the script never runs
   (blocked, slow, error), the copy must still be readable rather than invisible. */
html.no-js [data-reveal],
html.no-js [data-reveal-img],
html.no-js .stagger>*{opacity:1!important;transform:none!important;clip-path:none!important}

/* Touch targets and small type on phones.
   The audit found 15 px language links and 27 px footer links - fine with a mouse,
   not with a thumb - and 10.9 px spec labels. Grow the hit area with padding rather
   than the type, so the layout keeps its proportions. */
@media (max-width:760px){
  .langsw{gap:.15em}
  /* inline links ignore vertical padding for layout - make them boxes so the thumb
     gets a real 40px target */
  .langsw a{display:inline-flex;align-items:center;justify-content:center;
    min-height:40px;min-width:40px;padding-inline:.35em;font-size:.8rem}
  .ftr__grid a,.ftr__legal a{display:inline-block;padding-block:.42em}
  .ftr__h{font-size:.75rem}
  .specs span,.ucard__facts span,.shead small,.rail__rows span,.ucard__tag{font-size:.74rem}
  .mbar span,.mbar small{font-size:.72rem}
  .crumbs a,.rail__row a,.rail a{display:inline-block;padding-block:.35em}
  .btn,.chip{min-height:44px}
}

/* Cyrillic line breaking.
   The display scale was tuned on English: "Доминиканской" at the mobile hero size ran
   wider than a 390 px viewport and was cut off at the edge. One step down on the mobile
   scale fits the longest word in the copy (321 px against a 343 px column at 390 px);
   break-word is the guard for anything longer that gets written later. No hyphens:auto -
   the browser hyphenates words that already fit and the hero came out sliced four times. */
:lang(ru) .h-xxl,:lang(ru) .h-xl,:lang(ru) .h-l{overflow-wrap:break-word}

/* Section-head captions.
   `.shead small` is nowrap so the caption sits on the baseline of the heading on desktop.
   The WP build carries longer captions than the static one did ("Camino del Sol, Jardin
   Deportivo, Cabarete", and the Spanish and Russian translations of them), and nowrap made
   the page wider than the phone. Let them wrap below 760 px and stack the head. */
@media (max-width:760px){
  .shead{flex-wrap:wrap;gap:8px}
  .shead small{white-space:normal}
}
@media (max-width:760px){
  :lang(ru) .h-xxl{font-size:clamp(2.4rem,11vw,3.6rem)}
  :lang(ru) .h-xl{font-size:clamp(2.1rem,9vw,3rem)}
}

/* Site plan block (bhdr/siteplan): availability map with plot markers */
.vds-plan__intro{max-width:66ch;margin:.8em 0 clamp(26px,4vw,48px)}
.vds-plan__figure{margin:0;border-radius:2px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow)}
.vds-plan__map{position:relative;isolation:isolate}
.vds-plan__map>img{display:block;width:100%;height:auto}
.vds-plan__hotspot{position:absolute;z-index:2;left:var(--x);top:var(--y);width:clamp(28px,3.2vw,48px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #fff;background:transparent;box-shadow:0 0 0 3px currentColor,0 3px 16px rgba(20,28,35,.35);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.vds-plan__hotspot:hover,.vds-plan__hotspot:focus-visible{transform:translate(-50%,-50%) scale(1.16);box-shadow:0 0 0 4px currentColor,0 5px 22px rgba(20,28,35,.48);outline:none}
.vds-plan__hotspot--build{color:#e3bd50}
.vds-plan__hotspot--ready{color:#7db8d2}
.vds-plan__legend{display:flex;flex-wrap:wrap;gap:18px clamp(22px,4vw,48px);padding:20px clamp(18px,3vw,30px);background:var(--paper);border:1px solid var(--line);border-top:0}
.vds-plan__legend>span{display:grid;grid-template-columns:14px auto;column-gap:10px;align-items:center}
.vds-plan__legend i{grid-row:1/3;width:14px;height:14px;border-radius:2px}
.vds-plan__legend b{font-size:.82rem;font-weight:600}
.vds-plan__legend em{font-style:normal;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.58}
.vds-plan__swatch--sold{background:#e99580}
.vds-plan__swatch--build{background:#e3bd50}
.vds-plan__swatch--ready{background:#7db8d2}
.vds-plan__notice{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:22px;padding:18px clamp(20px,3vw,32px);background:var(--ink);color:#fff}
.vds-plan__notice a{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.vds-plan__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,22px);margin-top:28px}
.vds-plan__card{scroll-margin-top:110px;display:flex;flex-direction:column;min-height:190px;padding:clamp(20px,2.4vw,30px);background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 26px rgba(25,34,44,.05)}
.vds-plan__card>span{align-self:flex-start;padding:.5em .8em;font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.vds-plan__card--build>span{background:#f1d77d}
.vds-plan__card--ready>span{background:#9ccbe0}
.vds-plan__card h3{margin:.65em 0 .2em;font-size:clamp(1.55rem,2.2vw,2rem)}
.vds-plan__card p{font-size:.9rem;opacity:.7}
.vds-plan__card>a{margin-top:auto;padding-top:18px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.vds-plan__anchor{position:relative;top:-90px}
@media(max-width:900px){.vds-plan__cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.vds-plan__notice{align-items:flex-start;flex-direction:column}.vds-plan__cards{grid-template-columns:1fr}.vds-plan__legend{display:grid}.vds-plan__card{min-height:160px}}