/* ============================================================
   Mövenpick Hotel & Residences, Kvarner Bay — Trust Realty
   Quiet-luxury, gold-on-dark direct-response lander.
   Brand: champagne gold (#C8A86A) on near-black; Cormorant + Jost.
   ============================================================ */
:root{
  --ink:#0E0F12; --ink-2:#15171C; --char:#1D2026; --char-2:#23262D;
  --gold:#C8A86A; --gold-bright:#E7CE94; --gold-deep:#A8854A;
  --cream:#F6F1E8; --paper:#FBF8F2;
  --on-dark:#ECE7DD; --ink-soft:#2B2E34; --muted:#9E998D; --muted-2:#7C7A72;
  --line:rgba(200,168,106,.26); --line-soft:rgba(236,231,221,.12);
  --grad-gold:linear-gradient(135deg,#E7CE94,#C8A86A 55%,#A8854A);
  --maxw:1200px; --gut:clamp(20px,5vw,64px);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--ink);color:var(--on-dark);
  font-weight:300;line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:.005em;
}
body.modal-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:.002em}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- shared layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.eyebrow{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);display:inline-block}
.eyebrow.on-cream{color:var(--gold-deep)}
.rule{width:46px;height:1px;background:var(--grad-gold);margin:1.1rem 0;border:0}
.rule.center{margin-inline:auto}
.lead{font-size:1.12rem;color:var(--muted);font-weight:300;max-width:60ch}
.on-cream .lead,.sec-cream .lead{color:#5A574E}

/* gold gradient text */
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-weight:500;font-size:.86rem;letter-spacing:.04em;
  padding:1.05em 1.9em;border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,color .35s;
  text-transform:uppercase;line-height:1}
.btn-gold{background:var(--grad-gold);color:#221a0c;box-shadow:0 10px 30px -12px rgba(200,168,106,.6)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(200,168,106,.75)}
.btn-ghost{background:transparent;color:var(--on-dark);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright)}
.btn-lg{padding:1.2em 2.4em;font-size:.92rem}
.btn-block{width:100%}
.btn .arr{font-family:var(--serif);font-size:1.2em;line-height:0}

/* ---------- top bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);transition:background .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent}
.topbar.scrolled{background:rgba(14,15,18,.86);backdrop-filter:blur(14px);
  border-color:var(--line-soft);padding-block:12px}
.topbar .logo{height:34px;width:auto;transition:height .4s}
.topbar.scrolled .logo{height:30px}
.tb-right{display:flex;align-items:center;gap:18px}
.tb-agent{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
  max-width:200px;line-height:1.4;text-align:right}
.langtog{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.langtog button{font-family:var(--sans);background:transparent;color:var(--muted);border:0;
  cursor:pointer;font-size:.72rem;font-weight:500;letter-spacing:.08em;padding:.5em .75em;transition:.3s}
.langtog button.active{background:var(--gold);color:var(--ink)}
.tb-cta{display:none}
@media(min-width:880px){.tb-cta{display:inline-flex}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;align-items:flex-end;position:relative;
  padding:0 0 clamp(48px,9vh,110px);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;animation:slowzoom 22s var(--ease) forwards}
@keyframes slowzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,15,18,.55) 0%,rgba(14,15,18,.18) 32%,rgba(14,15,18,.42) 62%,rgba(14,15,18,.94) 100%)}
.hero .wrap{width:100%}
.hero__eyebrow{margin-bottom:1.4rem;animation:rise .9s var(--ease) both .1s}
.hero h1{font-size:clamp(2.7rem,6.4vw,5.6rem);font-weight:500;max-width:15ch;
  letter-spacing:-.01em;animation:rise 1s var(--ease) both .22s}
.hero h1 em{font-style:italic;color:var(--gold-bright)}
.hero__sub{margin-top:1.5rem;font-size:clamp(1.02rem,1.7vw,1.22rem);color:#D9D4C8;
  max-width:54ch;font-weight:300;animation:rise 1s var(--ease) both .36s}
.hero__cta{margin-top:2.3rem;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
  animation:rise 1s var(--ease) both .5s}
.playlink{display:inline-flex;align-items:center;gap:.7em;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark);cursor:pointer;background:none;border:0;font-family:var(--sans)}
.playlink .pl-ic{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:.35s}
.playlink:hover .pl-ic{border-color:var(--gold);background:rgba(200,168,106,.12)}
.playlink svg{width:13px;height:13px;fill:var(--gold)}
.hero__meta{margin-top:2.6rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);border-top:1px solid var(--line-soft);padding-top:1.3rem;max-width:46ch;
  animation:rise 1s var(--ease) both .64s;line-height:1.7}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);
  display:flex;flex-direction:column;align-items:center;gap:8px;animation:fade 2s var(--ease) both 1.2s}
.scrollcue span{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- stat band ---------- */
.stats{background:var(--ink-2);border-block:1px solid var(--line-soft)}
.stats .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);
  padding:0;max-width:none}
@media(min-width:760px){.stats .wrap{grid-template-columns:repeat(5,1fr)}}
.stat{background:var(--ink-2);padding:2.4rem 1.5rem;text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2rem,3.6vw,2.9rem);
  color:var(--gold-bright);font-weight:500;line-height:1}
.stat span{display:block;margin-top:.6rem;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- generic section paddings ---------- */
.sec{padding-block:clamp(72px,11vw,140px)}
.sec-cream{background:var(--cream);color:var(--ink-soft)}
.sec-cream h2,.sec-cream h3{color:#26241E}
.sec-dark2{background:var(--ink-2)}
.sec-head{max-width:64ch}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.5rem);margin-top:.4rem}
.sec-head .lead{margin-top:1.4rem}

/* intro editorial */
.intro .wrap{display:grid;gap:clamp(28px,5vw,72px);align-items:center}
@media(min-width:900px){.intro .wrap{grid-template-columns:1.05fr .95fr}}
.intro h2{font-size:clamp(2.2rem,4.6vw,3.7rem)}
.intro h2 em{font-style:italic;color:var(--gold-deep)}
.intro p{margin-top:1.3rem;color:#5A574E;max-width:52ch}
.intro__img{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:4/5}
.intro__img img{width:100%;height:100%;object-fit:cover}
.intro__tag{position:absolute;left:18px;bottom:18px;background:rgba(14,15,18,.74);
  backdrop-filter:blur(6px);color:var(--on-dark);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.6em 1em;border:1px solid var(--line)}

/* value cards */
.vcards{display:grid;gap:18px;margin-top:clamp(36px,5vw,60px)}
@media(min-width:680px){.vcards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.vcards{grid-template-columns:repeat(3,1fr)}}
.vcard{background:var(--char);border:1px solid var(--line-soft);border-radius:3px;
  padding:2.1rem 1.8rem;transition:.4s var(--ease)}
.vcard:hover{border-color:var(--line);transform:translateY(-4px);background:var(--char-2)}
.vcard .vc-ic{width:46px;height:46px;display:grid;place-items:center;margin-bottom:1.3rem;
  border:1px solid var(--line);border-radius:50%}
.vcard .vc-ic svg{width:21px;height:21px;stroke:var(--gold);fill:none;stroke-width:1.4}
.vcard h3{font-size:1.5rem;color:var(--on-dark)}
.vcard p{margin-top:.6rem;font-size:.96rem;color:var(--muted)}

/* editorial split rows (residences) */
.split{display:grid;gap:0;align-items:stretch}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.rev .split__txt{order:2}}
.split__img{position:relative;min-height:340px;overflow:hidden}
.split__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.split:hover .split__img img{transform:scale(1.05)}
.split__txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,90px) var(--gut)}
.split__txt h3{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.split__txt p{margin-top:1.1rem;color:var(--muted);max-width:46ch}
.split.on-cream .split__txt{background:var(--cream)}
.split.on-cream h3{color:#26241E}.split.on-cream p{color:#5A574E}

/* amenities gallery */
.amenwrap{margin-top:clamp(36px,5vw,60px)}
.amen{display:grid;gap:14px}
@media(min-width:640px){.amen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.amen{grid-template-columns:repeat(12,1fr);grid-auto-rows:200px}}
.atile{position:relative;overflow:hidden;border-radius:3px;min-height:220px}
@media(min-width:1000px){
  .atile{min-height:0}
  .a-lg{grid-column:span 6;grid-row:span 2}
  .a-md{grid-column:span 6}
  .a-sm{grid-column:span 4}
  .a-sm2{grid-column:span 4}
}
.atile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.atile:hover img{transform:scale(1.07)}
.atile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,15,18,.82))}
.atile__cap{position:absolute;left:18px;bottom:16px;right:18px;z-index:2}
.atile__cap b{display:block;font-family:var(--serif);font-size:1.45rem;color:var(--on-dark);font-weight:500}
.atile__cap span{font-size:.74rem;color:var(--muted);letter-spacing:.04em}

/* benefits (accor) */
.benefits .wrap{display:grid;gap:clamp(30px,5vw,70px);align-items:center}
@media(min-width:920px){.benefits .wrap{grid-template-columns:.9fr 1.1fr}}
.blist{display:grid;gap:2px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:3px;overflow:hidden}
.bitem{background:var(--ink);padding:1.5rem 1.6rem;display:flex;gap:1.1rem;align-items:flex-start}
.bitem .bn{font-family:var(--serif);font-size:1.5rem;color:var(--gold);line-height:1;min-width:1.4em}
.bitem b{font-weight:500;color:var(--on-dark);font-size:1.05rem}
.bitem p{font-size:.92rem;color:var(--muted);margin-top:.25rem}

/* pricing table */
.ptable{margin-top:clamp(34px,5vw,56px);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.prow{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:0;border-bottom:1px solid var(--line-soft)}
.prow:last-child{border-bottom:0}
.prow.head{background:var(--char)}
.prow.head div{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding:1.1rem 1.4rem}
.prow div{padding:1.4rem;font-size:.98rem}
.prow .pt-type{font-family:var(--serif);font-size:1.35rem;color:var(--on-dark)}
.prow .pt-size{color:var(--muted)}
.prow .pt-price{color:var(--gold-bright);font-weight:500;text-align:right}
@media(max-width:620px){.prow{grid-template-columns:1fr auto}.prow .pt-size{display:none}.prow.head .pt-size{display:none}}
.payplan{display:grid;gap:16px;margin-top:30px}
@media(min-width:680px){.payplan{grid-template-columns:repeat(3,1fr)}}
.pp{border:1px solid var(--line-soft);border-radius:3px;padding:1.6rem;background:var(--char)}
.pp b{font-family:var(--serif);font-size:2.1rem;color:var(--gold-bright);display:block}
.pp span{font-size:.86rem;color:var(--muted);display:block;margin-top:.3rem}
.note{margin-top:18px;font-size:.82rem;color:var(--muted-2)}

/* location */
.loc{position:relative;overflow:hidden}
.loc__bg{position:absolute;inset:0;z-index:-1}
.loc__bg img{width:100%;height:100%;object-fit:cover}
.loc__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,15,18,.95) 0%,rgba(14,15,18,.7) 45%,rgba(14,15,18,.25) 100%)}
.loc .panel{max-width:48ch}
.loctimes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:2rem;border-radius:3px;overflow:hidden}
.loctimes div{background:var(--ink);padding:1.2rem 1.3rem}
.loctimes b{font-family:var(--serif);color:var(--gold-bright);font-size:1.5rem;display:block}
.loctimes span{font-size:.78rem;color:var(--muted);letter-spacing:.04em}

/* proof / credibility */
.cred{text-align:center}
.credlogos{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,6vw,80px);
  margin-top:clamp(34px,5vw,56px);align-items:center}
.credlogos .cl{font-family:var(--serif);font-size:1.45rem;color:var(--muted);letter-spacing:.05em;
  opacity:.8;transition:.3s}
.credlogos .cl small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);margin-top:.3rem}
.credlogos .cl:hover{color:var(--gold);opacity:1}

/* big CTA band w/ inline form */
.ctaband{position:relative;overflow:hidden;background:var(--ink-2)}
.ctaband__bg{position:absolute;inset:0;z-index:0;opacity:.32}
.ctaband__bg img{width:100%;height:100%;object-fit:cover}
.ctaband__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(21,23,28,.6) 50%,var(--ink) 100%)}
.ctaband .wrap{position:relative;z-index:1;display:grid;gap:clamp(34px,5vw,64px);align-items:center}
@media(min-width:920px){.ctaband .wrap{grid-template-columns:1fr 1fr}}
.ctaband h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.ctaband h2 em{font-style:italic;color:var(--gold-bright)}
.ctaband .lead{margin-top:1.2rem}
.ctaband ul{margin-top:1.6rem;display:grid;gap:.7rem;list-style:none}
.ctaband li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem;color:#D9D4C8}
.ctaband li svg{width:18px;height:18px;fill:var(--gold);flex-shrink:0;margin-top:3px}

/* form card */
.formcard{background:var(--char);border:1px solid var(--line);border-radius:4px;
  padding:clamp(26px,4vw,40px);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.formcard h3{font-size:1.7rem;color:var(--on-dark)}
.formcard .fc-sub{font-size:.92rem;color:var(--muted);margin-top:.5rem;margin-bottom:1.6rem}
.field{margin-bottom:14px}
.field label{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.field input,.field select{width:100%;background:var(--ink);border:1px solid var(--line-soft);
  border-radius:2px;color:var(--on-dark);font-family:var(--sans);font-size:1rem;font-weight:300;
  padding:.95em 1.05em;transition:border-color .3s}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field input::placeholder{color:var(--muted-2)}
.consent{display:flex;gap:.65rem;align-items:flex-start;margin:6px 0 18px;font-size:.78rem;color:var(--muted)}
.consent input{margin-top:3px;accent-color:var(--gold);flex-shrink:0}
.consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.microc{font-size:.74rem;color:var(--muted-2);text-align:center;margin-top:12px}
.form-ok{text-align:center;padding:1.5rem 0}
.form-ok .ok-ic{width:58px;height:58px;border-radius:50%;border:1px solid var(--gold);
  display:grid;place-items:center;margin:0 auto 1.2rem}
.form-ok .ok-ic svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.6}
.form-ok h3{margin-bottom:.6rem}
.form-ok p{color:var(--muted);font-size:.96rem;max-width:34ch;margin-inline:auto}

/* FAQ */
.faq{max-width:820px;margin-inline:auto;margin-top:clamp(34px,5vw,52px)}
.qa{border-bottom:1px solid var(--line-soft)}
.qa button{width:100%;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;
  background:none;border:0;cursor:pointer;text-align:left;padding:1.5rem 0;
  font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.5rem);color:var(--on-dark);font-weight:500}
.qa .qa-ic{font-family:var(--sans);font-size:1.6rem;color:var(--gold);flex-shrink:0;transition:transform .4s;font-weight:300}
.qa.open .qa-ic{transform:rotate(45deg)}
.qa .qa-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.qa .qa-a p{padding-bottom:1.6rem;color:var(--muted);max-width:68ch;font-size:1rem}

/* footer */
.foot{background:#0A0B0D;border-top:1px solid var(--line-soft);padding-block:clamp(48px,7vw,80px);font-size:.86rem}
.foot .wrap{display:grid;gap:clamp(28px,5vw,60px)}
@media(min-width:820px){.foot .wrap{grid-template-columns:1.4fr 1fr 1fr}}
.foot .f-logo{height:38px;width:auto;margin-bottom:1.2rem}
.foot p{color:var(--muted);max-width:42ch}
.foot h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;font-weight:500}
.foot a.fl{display:block;color:var(--muted);margin-bottom:.6rem;transition:.3s}
.foot a.fl:hover{color:var(--gold-bright)}
.disclaimer{border-top:1px solid var(--line-soft);margin-top:clamp(34px,5vw,56px);
  padding-top:1.6rem;font-size:.7rem;color:var(--muted-2);line-height:1.7;max-width:none}
.disclaimer .wrap{display:block}

/* modal (lead) */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,9,11,.82);backdrop-filter:blur(8px)}
.modal.open{display:flex;animation:fade .3s var(--ease)}
.modal__card{background:var(--ink-2);border:1px solid var(--line);border-radius:5px;
  max-width:480px;width:100%;max-height:92svh;overflow:auto;position:relative;
  padding:clamp(28px,5vw,44px);animation:rise .45s var(--ease)}
.modal__close{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);
  font-size:1.8rem;cursor:pointer;line-height:1;transition:.3s}
.modal__close:hover{color:var(--gold)}
.modal .eyebrow{margin-bottom:.6rem}
.modal h3{font-size:1.9rem;margin-bottom:.4rem}

/* video lightbox */
.vbox{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,9,11,.94)}
.vbox.open{display:flex;animation:fade .3s var(--ease)}
.vbox__inner{width:min(1000px,94vw);aspect-ratio:16/9;position:relative;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#000}
.vbox iframe{width:100%;height:100%;border:0}
.vbox__close{position:absolute;top:-44px;right:0;background:none;border:0;color:var(--on-dark);
  font-size:1rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

/* sticky mobile cta */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:12px var(--gut);
  background:rgba(14,15,18,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .45s var(--ease)}
.stickycta.show{transform:none}
@media(min-width:880px){.stickycta{display:none}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   v3 enhancements — video hero, richer sections, fixed layouts
   ============================================================ */
/* video hero */
.hero__bg video{width:100%;height:100%;object-fit:cover}
.hero--video .hero__bg::after{background:linear-gradient(180deg,rgba(14,15,18,.62) 0%,rgba(14,15,18,.30) 30%,rgba(14,15,18,.40) 55%,rgba(14,15,18,.96) 100%)}
.hero--video .hero__scrim{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 12% 75%,rgba(14,15,18,.72) 0%,rgba(14,15,18,.25) 45%,transparent 70%)}

/* section background image layer (behind dark sections) */
.has-bg{position:relative;isolation:isolate}
.sec-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.sec-bg img{width:100%;height:100%;object-fit:cover;opacity:.30}
.sec-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(14,15,18,.80) 30%,rgba(14,15,18,.80) 70%,var(--ink) 100%)}
.sec-bg.dark2::after{background:linear-gradient(180deg,var(--ink-2) 0%,rgba(21,23,28,.82) 35%,rgba(21,23,28,.82) 65%,var(--ink-2) 100%)}

/* intro: stacked image cluster */
.intro__cluster{position:relative;aspect-ratio:4/5}
.intro__cluster .ic-main{position:absolute;inset:0 0 14% 12%;border-radius:3px;overflow:hidden}
.intro__cluster .ic-main img{width:100%;height:100%;object-fit:cover}
.intro__cluster .ic-inset{position:absolute;left:0;bottom:0;width:46%;aspect-ratio:4/3;
  border-radius:3px;overflow:hidden;border:5px solid var(--cream);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.intro__cluster .ic-inset img{width:100%;height:100%;object-fit:cover}
.intro__cluster .intro__tag{left:auto;right:14px;top:14px;bottom:auto}
@media(max-width:600px){.intro__cluster{aspect-ratio:1/1}.intro__cluster .ic-main{inset:0 0 18% 18%}}

/* residences — balanced gallery (v3) */
.resfeature{display:grid;gap:0;align-items:stretch;border:1px solid var(--line-soft);border-radius:4px;overflow:hidden;margin-top:clamp(34px,5vw,54px)}
@media(min-width:880px){.resfeature{grid-template-columns:1fr 1fr}}
.resfeature__txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,64px);background:var(--char)}
.resfeature__txt h3{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.resfeature__txt p{margin-top:1.1rem;color:var(--muted);max-width:44ch}
.resfeature__img{position:relative;min-height:360px;overflow:hidden}
.resfeature__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.resfeature:hover .resfeature__img img{transform:scale(1.06)}
.resgrid{display:grid;gap:14px;margin-top:14px}
@media(min-width:680px){.resgrid{grid-template-columns:repeat(3,1fr)}}
.rg{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/5}
.rg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.rg:hover img{transform:scale(1.07)}
.rg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(14,15,18,.8))}
.rg b{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--serif);font-size:1.3rem;color:var(--on-dark);font-weight:500}

/* amenities — balanced bento (v3) */
.bento{display:grid;gap:14px}
@media(min-width:760px){.bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:230px}
  .b-wide{grid-column:span 2}}
.btile{position:relative;overflow:hidden;border-radius:4px;min-height:230px}
.btile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.btile:hover img{transform:scale(1.07)}
.btile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(14,15,18,.84))}
.btile__cap{position:absolute;left:18px;bottom:16px;right:16px;z-index:2}
.btile__cap b{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--on-dark);font-weight:500}
.btile__cap span{font-size:.74rem;color:var(--muted);letter-spacing:.04em}

/* count-up keeps layout stable */
.stat b[data-count]{font-variant-numeric:tabular-nums}

/* ============================================================
   v4 — LIGHT / bright variant (body.theme-light). Same layout
   as v3, inverted to an ivory canvas with deep-gold accents.
   ============================================================ */
body.theme-light{
  background:#FFFFFF;
  --ink:#FFFFFF; --ink-2:#F5EFE5; --char:#FFFFFF; --char-2:#FBF7F0;
  --on-dark:#23262C; --ink-soft:#23262C; --muted:#6E6C64; --muted-2:#9C988C;
  --line:rgba(168,133,74,.40); --line-soft:rgba(30,30,34,.12);
  color:var(--on-dark);
}
/* bands → warm cream for rhythm against the white base */
.theme-light .sec-cream{background:#F5EFE5}
.theme-light .sec-dark2{background:#F5EFE5}
.theme-light .stats{background:#F5EFE5;border-color:rgba(30,30,34,.12)}
.theme-light .stats .wrap{background:rgba(30,30,34,.10)}
.theme-light .ctaband{background:#F5EFE5}
.theme-light .foot{background:#EFE8DB;border-color:rgba(30,30,34,.12)}
/* drop the dark photo washes behind sections — keep it bright */
.theme-light .sec-bg{display:none}
/* deepen gold where it sits on light (bright gold is low-contrast on cream) */
.theme-light .eyebrow{color:var(--gold-deep)}
.theme-light .stat b,
.theme-light .pp b,
.theme-light .prow .pt-price{color:var(--gold-deep)}
.theme-light .prow.head div{color:var(--gold-deep)}
.theme-light .credlogos .cl:hover{color:var(--gold-deep)}
.theme-light .bn{color:var(--gold-deep)}
/* cards / surfaces on light */
.theme-light .vcard{background:#FFFFFF;border-color:rgba(30,30,34,.12);box-shadow:0 18px 40px -30px rgba(40,30,10,.25)}
.theme-light .vcard:hover{background:#FBF7F0;border-color:var(--line)}
.theme-light .blist,.theme-light .blist .bitem{border-color:rgba(30,30,34,.10)}
.theme-light .resfeature{border-color:rgba(30,30,34,.12)}
.theme-light .formcard{box-shadow:0 40px 80px -45px rgba(40,30,10,.35)}
.theme-light .field input,.theme-light .field select{background:#FFFFFF;border-color:rgba(30,30,34,.18)}
/* text that sits over a photo must stay light regardless of theme */
.theme-light .hero h1{color:#FFFFFF}
.theme-light .hero__meta{color:rgba(255,255,255,.66);border-color:rgba(255,255,255,.22)}
.theme-light .playlink{color:#FFFFFF}
.theme-light .loc h2{color:#F6F1E8}
.theme-light .loc .lead{color:rgba(246,241,232,.86)}
.theme-light .loc .loctimes div{background:rgba(255,255,255,.96)}
.theme-light .loc .loctimes b{color:var(--gold-deep)}
.theme-light .ctaband li{color:#4A4843}
.theme-light .ctaband h2 em,.theme-light .intro h2 em{color:var(--gold-deep)}
/* chrome: light scrolled bar + light sticky cta */
.theme-light .topbar.scrolled{background:rgba(255,255,255,.92);border-color:rgba(30,30,34,.10)}
.theme-light .topbar.scrolled .langtog button{color:var(--muted)}
.theme-light .stickycta{background:rgba(255,255,255,.95);border-color:rgba(30,30,34,.12)}
.theme-light .langtog{border-color:var(--line)}
/* modal stays as a refined light card */
.theme-light .modal__card{background:#FFFFFF;border-color:var(--line)}

/* ---------- full-width cinematic image band (rich) ---------- */
.fullband{position:relative;min-height:76vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden}
.fullband__bg{position:absolute;inset:0;z-index:-1}
.fullband__bg img{width:100%;height:100%;object-fit:cover;animation:slowzoom 24s var(--ease) forwards}
.fullband__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,15,18,.55),rgba(14,15,18,.30) 50%,rgba(14,15,18,.72))}
.fullband .eyebrow{color:var(--gold-bright);margin-bottom:1.2rem}
.fullband h2{color:#FFF;font-size:clamp(2.1rem,5vw,4rem);max-width:20ch;line-height:1.08}
.fullband h2 em{color:var(--gold-bright);font-style:italic}

/* ---------- keep-dark: sections that stay dark even in the bright (light) variant ---------- */
.theme-light .keep-dark{
  --ink:#0E0F12; --ink-2:#15171C; --char:#1D2026; --char-2:#23262D;
  --on-dark:#ECE7DD; --muted:#9E998D; --muted-2:#7C7A72;
  --line:rgba(200,168,106,.26); --line-soft:rgba(236,231,221,.12);
  background:var(--ink-2); color:var(--on-dark);
}
.theme-light .keep-dark.sec-dark2{background:var(--ink-2)}
.theme-light .keep-dark .sec-bg{display:block}          /* show the background photo again */
.theme-light .keep-dark .eyebrow{color:var(--gold)}     /* bright gold reads on dark */
.theme-light .keep-dark h2,.theme-light .keep-dark h3{color:var(--on-dark)}
.theme-light .keep-dark .bn{color:var(--gold)}

/* ---------- Tlocrt / floor-plan browser ---------- */
.fp{display:grid;gap:28px;margin-top:clamp(34px,5vw,54px)}
@media(min-width:920px){.fp{grid-template-columns:.85fr 1.15fr;align-items:start}}
.fp__list{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.fprow{display:flex;align-items:center;gap:1.2rem;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--line-soft);padding:1.35rem .4rem;cursor:pointer;
  color:var(--on-dark);font-family:var(--sans);transition:padding .35s var(--ease),background .3s}
.fprow:hover{padding-left:.9rem}
.fprow__main{flex:1;min-width:0}
.fprow__main b{font-family:var(--serif);font-size:1.45rem;font-weight:500;color:var(--on-dark);display:block;line-height:1.1}
.fprow__main span{font-size:.84rem;color:var(--muted);letter-spacing:.02em}
.fprow__price{color:var(--gold-bright);font-weight:500;font-size:.95rem;white-space:nowrap}
.fprow__arr{font-family:var(--serif);color:var(--gold);font-size:1.35rem;opacity:.45;transition:.35s var(--ease)}
.fprow:hover .fprow__arr,.fprow.active .fprow__arr{opacity:1;transform:translateX(5px)}
.fprow.active .fprow__main b{color:var(--gold-bright)}
.fp__view{position:sticky;top:92px}
.fp__imgwrap{background:#fff;border:1px solid var(--line);border-radius:5px;padding:clamp(18px,3vw,30px);
  display:flex;align-items:center;justify-content:center;min-height:340px;box-shadow:0 30px 70px -45px rgba(0,0,0,.6)}
.fp__imgwrap img{max-width:100%;max-height:540px;width:auto;height:auto;transition:opacity .3s}
.fp__meta{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-top:1.3rem}
.fp__metatext b{font-family:var(--serif);font-size:1.5rem;color:var(--on-dark);font-weight:500;display:block;line-height:1.1}
.fp__metatext span{font-size:.86rem;color:var(--muted)}
.fp__features{display:grid;gap:14px;margin-top:clamp(30px,5vw,50px);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.fp__features{grid-template-columns:repeat(4,1fr)}}
.fpf{border:1px solid var(--line-soft);border-radius:3px;padding:1.25rem 1.35rem}
.fpf b{font-family:var(--serif);color:var(--gold-bright);font-size:1.35rem;display:block;font-weight:500;line-height:1.15}
.fpf span{font-size:.8rem;color:var(--muted);letter-spacing:.03em}
@media(max-width:919px){.fp__view{position:static}.fp{grid-template-columns:1fr}}
/* light-theme contrast for the gold bits */
.theme-light .fprow__price,.theme-light .fprow.active .fprow__main b,.theme-light .fpf b{color:var(--gold-deep)}
.theme-light .fprow__arr{color:var(--gold-deep)}

/* ---------- mobile fixes: fill the empty 5th stat cell + condense the popup ---------- */
@media(max-width:759px){
  /* 5 stats in a 2-col grid leaves an empty 6th cell — span the last one full width */
  .stats .stat:nth-child(5){grid-column:1 / -1}
}
@media(max-width:560px){
  /* condense the lead MODAL so it fits one screen (popup) */
  .modal{padding:10px}
  .modal__card{padding:22px 20px;max-height:94svh;border-radius:4px}
  .modal .eyebrow{margin-bottom:.4rem;font-size:.66rem}
  .modal h3{font-size:1.5rem;margin-bottom:.3rem}
  .modal .fc-sub{font-size:.84rem;margin:.3rem 0 1rem}
  .modal .field{margin-bottom:9px}
  .modal .field label{margin-bottom:.3rem;font-size:.64rem}
  .modal .field input,.modal .field select{padding:.74em .9em;font-size:.95rem}
  .modal .consent{margin:4px 0 12px;font-size:.74rem}
  .modal .btn-lg{padding:.95em 1.6em;font-size:.86rem}
  .modal .microc{margin-top:8px}
}

/* ---------- hero top-collision fix (short laptops + mobile) ----------
   Hero content is bottom-aligned; on short viewports its top slid under the
   fixed topbar. Reserve topbar height at the top so the eyebrow always clears
   it, and scale the hero down on short heights so it stays one clean screen. */
.hero{padding-top:clamp(94px,12vh,132px)}
@media(max-height:800px){
  .hero{padding-bottom:clamp(30px,6vh,64px)}
  .hero__eyebrow{margin-bottom:.8rem}
  .hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:18ch}
  .hero__sub{margin-top:1rem;font-size:1.02rem}
  .hero__cta{margin-top:1.4rem}
  .hero__meta{margin-top:1.3rem;padding-top:.9rem}
  .scrollcue{display:none}
}
/* declutter the mobile topbar so it doesn't crowd the hero eyebrow */
@media(max-width:760px){
  .tb-agent{display:none}
  .topbar{padding-block:14px}
}

/* ============================================================
   Multi-step lead form (auto-advance qualifier flow)
   Scoped to .lead-form--steps so v1/v2/v3 single-step forms are untouched.
   ============================================================ */
.lead-form--steps .lf-progress{height:2px;background:rgba(30,30,34,.10);border-radius:2px;overflow:hidden;margin-bottom:1.8rem}
.lead-form--steps .lfp-bar{display:block;height:100%;width:25%;background:var(--gold-deep);transition:width .45s var(--ease)}

.lead-form--steps .lf-step{display:none}
.lead-form--steps .lf-step.active{display:block;animation:lfStepIn .35s var(--ease) both}
@keyframes lfStepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.lead-form--steps .lf-q{font-family:var(--serif);font-weight:500;font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.25;color:var(--ink-soft);margin-bottom:1.3rem;letter-spacing:.003em;max-width:34ch}

.lead-form--steps .lf-choices{display:grid;gap:.65rem;margin-bottom:.4rem}
.lead-form--steps .lf-choice{
  width:100%;text-align:left;background:#FFFFFF;
  border:1px solid rgba(30,30,34,.16);border-radius:3px;
  padding:1.05rem 1.35rem;font-family:var(--sans);font-weight:400;
  font-size:1rem;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)
}
.lead-form--steps .lf-choice::after{
  content:"\2192";font-family:var(--serif);font-size:1.2rem;
  color:var(--muted-2);transition:.25s var(--ease);
  transform:translateX(-4px);opacity:.45;flex-shrink:0
}
.lead-form--steps .lf-choice:hover{border-color:var(--gold-deep);color:var(--ink-soft);background:#FBF7F0}
.lead-form--steps .lf-choice:hover::after{color:var(--gold-deep);transform:translateX(0);opacity:1}
.lead-form--steps .lf-choice:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.lead-form--steps .lf-choice.selected{border-color:var(--gold-deep);background:#FBF7F0;color:var(--ink-soft)}
.lead-form--steps .lf-choice.selected::after{color:var(--gold-deep);opacity:1;transform:translateX(0)}

.lead-form--steps .lf-back{
  background:transparent;border:0;font-family:var(--sans);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;padding:.6rem 0 0;
  margin-top:.8rem;transition:color .25s
}
.lead-form--steps .lf-back::before{content:"\2190  "}
.lead-form--steps .lf-back:hover{color:var(--gold-deep)}
.lead-form--steps .lf-back.hidden{visibility:hidden;pointer-events:none}

/* dark surface (modal in dark variants) — keep choices readable on dark */
.modal .lead-form--steps .lf-choice{background:rgba(255,255,255,.04);color:var(--on-dark);border-color:var(--line-soft)}
.modal .lead-form--steps .lf-choice:hover,
.modal .lead-form--steps .lf-choice.selected{background:rgba(200,168,106,.10);color:var(--on-dark);border-color:var(--gold)}
.modal .lead-form--steps .lf-q{color:var(--on-dark)}
.modal .lead-form--steps .lfp-bar{background:var(--gold)}

/* theme-light modal already has white card — let the light styles win there */
.theme-light .modal .lead-form--steps .lf-choice{background:#FFFFFF;color:var(--ink-soft);border-color:rgba(30,30,34,.16)}
.theme-light .modal .lead-form--steps .lf-choice:hover,
.theme-light .modal .lead-form--steps .lf-choice.selected{background:#FBF7F0;color:var(--ink-soft);border-color:var(--gold-deep)}
.theme-light .modal .lead-form--steps .lf-q{color:var(--ink-soft)}
.theme-light .modal .lead-form--steps .lfp-bar{background:var(--gold-deep)}

/* ============================================================
   Hero — 2-column layout (text left, lead form card right)
   Only active when .hero__cols is present (v4-only); other variants unchanged.
   ============================================================ */
.hero__cols{display:grid;gap:clamp(28px,4vw,52px);width:100%;align-items:end}
.hero__text{max-width:46ch}
@media(min-width:980px){
  .hero{align-items:center}
  .hero__cols{grid-template-columns:1.05fr .95fr;align-items:center}
}
@media(max-width:979px){
  .hero{align-items:flex-end;padding-top:clamp(100px,16vw,150px);padding-bottom:clamp(40px,8vw,80px)}
  .hero h1{font-size:clamp(2.1rem,8vw,3.2rem)}
  .hero__sub{font-size:1rem}
}

.hero__formcard{
  background:rgba(14,15,18,.62);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  backdrop-filter:blur(20px) saturate(125%);
  border:1px solid rgba(200,168,106,.32);
  border-radius:3px;
  padding:clamp(22px,2.4vw,30px);
  width:100%;
  max-width:540px;
  justify-self:end;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.55)
}
@media(max-width:979px){.hero__formcard{justify-self:stretch;max-width:none;margin-top:1.4rem}}

/* override .lead-form--steps light defaults inside hero card */
.hero__formcard .lf-progress{background:rgba(255,255,255,.12)}
.hero__formcard .lfp-bar{background:var(--gold-bright)}
.hero__formcard .lf-q{color:#FFFFFF;font-size:clamp(1.02rem,1.5vw,1.25rem);margin-bottom:1.05rem;max-width:30ch;letter-spacing:.002em}
.hero__formcard .fc-sub{color:rgba(255,255,255,.78);font-size:.92rem}
.hero__formcard .lf-choice{
  background:rgba(255,255,255,.06);color:#FFFFFF;
  border-color:rgba(255,255,255,.16);font-size:.96rem;padding:.95rem 1.15rem
}
.hero__formcard .lf-choice::after{color:rgba(255,255,255,.38)}
.hero__formcard .lf-choice:hover{background:rgba(200,168,106,.14);border-color:var(--gold);color:#FFFFFF}
.hero__formcard .lf-choice:hover::after{color:var(--gold-bright)}
.hero__formcard .lf-choice.selected{background:rgba(200,168,106,.18);border-color:var(--gold);color:#FFFFFF}
.hero__formcard .lf-choice.selected::after{color:var(--gold-bright)}
.hero__formcard .field label{color:rgba(255,255,255,.84);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.hero__formcard .field input{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:#FFFFFF;padding:.85rem 1rem;font-size:1rem;font-family:var(--sans);width:100%;border-radius:3px;transition:.25s}
.hero__formcard .field input::placeholder{color:rgba(255,255,255,.42)}
.hero__formcard .field input:focus{border-color:var(--gold);background:rgba(255,255,255,.16);outline:none}
.hero__formcard .field{margin-bottom:.8rem}
.hero__formcard .consent{color:rgba(255,255,255,.74);font-size:.82rem;display:flex;gap:.55rem;align-items:flex-start;margin:.6rem 0 1rem;line-height:1.45}
.hero__formcard .consent a{color:var(--gold-bright)}
.hero__formcard .consent input[type=checkbox]{margin-top:.18rem;accent-color:var(--gold);flex-shrink:0}
.hero__formcard .microc{color:rgba(255,255,255,.55);font-size:.74rem;margin-top:.7rem;text-align:center}
.hero__formcard .lf-back{color:rgba(255,255,255,.55)}
.hero__formcard .lf-back:hover{color:var(--gold-bright)}
.hero__formcard .btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.hero__formcard .btn-gold:hover{background:var(--gold-bright);border-color:var(--gold-bright)}

/* slightly compress the hero h1 in the 2-col layout so it doesn't crowd the form */
@media(min-width:980px){
  .hero h1{font-size:clamp(2.4rem,4.8vw,4.4rem);max-width:14ch}
  .hero__sub{max-width:46ch}
  .hero__meta{max-width:50ch}
}