/* ==========================================================================
   THE MONARCH — The Epitome of Serene Living
   Brand palette & typography derived from the official project brochure.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand — sampled from the brochure artwork */
  --espresso-900:#1E1006;
  --espresso-800:#241407;
  --espresso:#37200D;        /* brochure background brown */
  --espresso-700:#4A2E15;
  --espresso-600:#5E3D1F;

  --gold:#C4A46B;            /* brochure gold */
  --gold-soft:#D8BE8E;
  --gold-deep:#A8874C;

  --sand:#E7DAC4;
  --cream:#F7F2E9;
  --ivory:#FCFAF6;
  --paper:#FFFFFF;

  --ink:#2B2018;
  --ink-soft:#5C4C3D;
  --muted:#8A7863;
  --line:rgba(55,32,13,.14);
  --line-gold:rgba(196,164,107,.32);

  /* Type */
  --display:"Playfair Display",'Times New Roman',serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;

  /* Rhythm */
  --pad-x:clamp(20px,5vw,72px);
  --sec-y:clamp(72px,10vw,152px);
  --maxw:1320px;
  --nav-h:82px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:1.05s;
}

/* ---------- 2. Reset ---------- */
*,*::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(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.75;font-weight:300;
  letter-spacing:.008em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.14;margin:0;letter-spacing:-.005em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
::selection{background:var(--gold);color:var(--espresso-900)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- 3. Layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--narrow{max-width:900px}
.wrap--wide{max-width:1560px}
.section{padding-block:var(--sec-y)}
.section--tight{padding-block:clamp(56px,7vw,104px)}
.bg-dark{background:var(--espresso);color:var(--sand)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:var(--gold-soft)}
.bg-deep{background:var(--espresso-900);color:var(--sand)}
.bg-cream{background:var(--cream)}
.bg-sand{background:var(--sand)}

/* Eyebrow */
.eyebrow{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;font-weight:400;
  color:var(--gold-deep);margin:0 0 22px;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.bg-dark .eyebrow,.bg-deep .eyebrow{color:var(--gold)}
.eyebrow--center{justify-content:center}

/* Headings */
.h-xl{font-size:clamp(2.4rem,6.2vw,4.6rem)}
.h-lg{font-size:clamp(2rem,4.6vw,3.4rem)}
.h-md{font-size:clamp(1.6rem,3vw,2.4rem)}
.h-sm{font-size:clamp(1.25rem,2vw,1.6rem)}
.lede{font-size:clamp(1.02rem,1.35vw,1.17rem);color:var(--ink-soft);max-width:62ch;line-height:1.85}
.bg-dark .lede,.bg-deep .lede{color:rgba(231,218,196,.82)}
.rule{width:56px;height:1px;background:var(--gold);margin:28px 0}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .rule{margin-inline:auto}
.center .lede{margin-inline:auto}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:15px 32px;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  border:1px solid var(--gold);color:var(--espresso);background:transparent;
  position:relative;overflow:hidden;transition:color .55s var(--ease),border-color .55s var(--ease);
}
.btn::after{content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease);z-index:-1}
.btn>*{position:relative;z-index:1}
.btn:hover{color:var(--espresso-900)}
.btn:hover::after{transform:scaleX(1);transform-origin:left}
.btn--solid{background:var(--gold);color:var(--espresso-900);border-color:var(--gold)}
.btn--solid::after{background:var(--espresso)}
.btn--solid:hover{color:var(--gold-soft);border-color:var(--espresso)}
.btn--light{color:var(--sand);border-color:var(--line-gold)}
.btn--light:hover{color:var(--espresso-900);border-color:var(--gold)}
.btn--sm{padding:12px 24px;font-size:10.5px}

.link-arrow{
  display:inline-flex;align-items:center;gap:11px;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-deep);padding-bottom:5px;
  border-bottom:1px solid var(--line-gold);transition:.45s var(--ease);
}
.link-arrow svg{transition:transform .45s var(--ease)}
.link-arrow:hover{color:var(--espresso);border-color:var(--gold)}
.link-arrow:hover svg{transform:translateX(6px)}
.bg-dark .link-arrow,.bg-deep .link-arrow{color:var(--gold)}
.bg-dark .link-arrow:hover,.bg-deep .link-arrow:hover{color:var(--gold-soft)}

/* ---------- 5. Header / Navigation ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .55s var(--ease),height .45s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(24,13,5,.86) 0%,rgba(24,13,5,.62) 55%,rgba(24,13,5,.18) 88%,rgba(24,13,5,0) 100%);
  height:calc(100% + 34px);
  opacity:1;transition:opacity .5s var(--ease);
}
.site-header.is-solid,.site-header.is-inner{
  background:var(--espresso-900);border-bottom-color:rgba(196,164,107,.2);
  box-shadow:0 12px 40px -28px rgba(0,0,0,.9);
}
.site-header.is-solid{height:70px}
.site-header.is-solid::before,.site-header.is-inner::before{opacity:0}

.nav{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:34px;width:auto;transition:height .45s var(--ease);
  filter:drop-shadow(0 2px 10px rgba(20,11,4,.55))}
.site-header.is-solid .brand img,.site-header.is-inner .brand img{height:29px;filter:none}
.site-header.is-solid .brand img{height:29px}

.nav-links{display:flex;align-items:center;gap:clamp(16px,1.9vw,30px);list-style:none;margin:0;padding:0}
.nav-links a{
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--sand);
  position:relative;padding:8px 0;transition:color .4s var(--ease),text-shadow .4s var(--ease);white-space:nowrap;
  text-shadow:0 1px 10px rgba(20,11,4,.6);
}
.site-header.is-solid .nav-links a,.site-header.is-inner .nav-links a{text-shadow:none}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav-links a:hover{color:var(--gold-soft)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]{color:var(--gold)}
.nav-cta{flex:none}

.burger{display:none;width:44px;height:44px;background:none;border:0;padding:0;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1px;background:var(--sand);transition:.4s var(--ease)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:29px}
.burger[aria-expanded="true"] span:nth-child(1){top:23px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:23px;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:110;background:var(--espresso-900);
  padding:calc(var(--nav-h) + 28px) var(--pad-x) 44px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateY(-100%);visibility:hidden;transition:transform .7s var(--ease),visibility .7s;
  overflow-y:auto;
}
.drawer.is-open{transform:translateY(0);visibility:visible}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li{border-bottom:1px solid rgba(196,164,107,.16)}
.drawer a{display:block;padding:17px 0;font-family:var(--display);font-size:1.5rem;color:var(--sand)}
.drawer a:hover,.drawer a[aria-current="page"]{color:var(--gold)}
.drawer-foot{margin-top:36px;font-size:13px;color:rgba(231,218,196,.62);line-height:2}
.drawer-foot a{display:inline;font-family:var(--sans);font-size:13px;padding:0}

@media (max-width:1080px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
}
body.nav-open{overflow:hidden}

/* ---------- 6. Hero video ---------- */
/* The film sits flush to the top of the page; the navigation floats over it. */
.hero{
  position:relative;width:100%;height:clamp(560px,88vh,960px);
  margin-top:0;background:var(--espresso-900);overflow:hidden;
}
.hero video,.hero .hero-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}
.hero .hero-poster{z-index:0}
.hero video{z-index:1}
.hero__mobile{display:none}
@media (max-width:760px){
  .hero{height:clamp(480px,80vh,760px)}
  .hero__desktop{display:none}
  .hero__mobile{display:block}
}
/* scroll hint sits BELOW the video, never over it */
.scroll-hint{
  background:var(--espresso-900);color:var(--gold);display:flex;align-items:center;
  justify-content:center;gap:14px;padding:16px 20px;
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
}
.scroll-hint i{display:block;width:1px;height:16px;background:var(--gold);animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-7px);opacity:0}40%{opacity:1}100%{transform:translateY(7px);opacity:0}}

/* Inner page banner */
.page-head{
  margin-top:var(--nav-h);background:var(--espresso);color:var(--sand);
  padding-block:clamp(52px,7vw,92px);position:relative;overflow:hidden;
}
.page-head::after{content:"";position:absolute;left:var(--pad-x);bottom:0;width:56px;height:1px;background:var(--gold)}
.page-head h1{color:var(--gold-soft);font-size:clamp(2.1rem,5vw,3.6rem);margin-bottom:14px}
.page-head p{color:rgba(231,218,196,.78);max-width:60ch;margin:0}
.crumbs{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(196,164,107,.75);margin-bottom:20px}
.crumbs a:hover{color:var(--gold)}

/* ---------- 7. Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.12s}
.reveal[data-d="2"]{transition-delay:.24s}
.reveal[data-d="3"]{transition-delay:.36s}
.reveal[data-d="4"]{transition-delay:.48s}
.img-reveal{overflow:hidden;position:relative}
.img-reveal img{clip-path:inset(0 0 100% 0);transform:scale(1.08);
  transition:clip-path 1.5s var(--ease),transform 1.9s var(--ease)}
.img-reveal.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.img-reveal img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

/* ---------- 8. Editorial blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,84px);align-items:center}
.split--offset{grid-template-columns:1.05fr .95fr}
.split__media{position:relative}
.split__media img{width:100%;height:100%;object-fit:cover}
.split--rev .split__media{order:2}
.frame{position:relative}
.frame::after{content:"";position:absolute;inset:14px;border:1px solid var(--line-gold);pointer-events:none}
.stack-imgs{position:relative;padding-bottom:16%}
.stack-imgs .a{width:78%}
.stack-imgs .b{position:absolute;right:0;bottom:0;width:52%;border:8px solid var(--ivory)}
.bg-dark .stack-imgs .b,.bg-deep .stack-imgs .b{border-color:var(--espresso)}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:34px}
  .split--rev .split__media{order:0}
  .stack-imgs{padding-bottom:12%}
}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-gold);border:1px solid var(--line-gold)}
.stats div{background:var(--espresso);padding:34px 26px;text-align:center}
.bg-cream .stats div,.bg-sand .stats div{background:var(--cream)}
.stats b{display:block;font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.9rem);color:var(--gold);font-weight:400;line-height:1}
.bg-cream .stats b{color:var(--espresso)}
.stats span{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.bg-dark .stats span{color:rgba(231,218,196,.7)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- 9. Cards ---------- */
.grid{display:grid;gap:clamp(18px,2.2vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;
  transition:box-shadow .6s var(--ease),transform .6s var(--ease),border-color .6s var(--ease)}
.card:hover{box-shadow:0 30px 60px -42px rgba(55,32,13,.55);border-color:var(--line-gold);transform:translateY(-4px)}
.card__media{overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.card__body h3{font-size:1.35rem}
.card__body p{font-size:14.5px;color:var(--ink-soft);margin:0}
/* cards keep their light-ground colours even inside dark sections */
.bg-dark .card h3,.bg-deep .card h3{color:var(--espresso)}
.bg-dark .card p,.bg-deep .card p{color:var(--ink-soft)}
.bg-dark .card .link-arrow,.bg-deep .card .link-arrow{color:var(--gold-deep)}
.bg-dark .card .link-arrow:hover,.bg-deep .card .link-arrow:hover{color:var(--espresso)}
.bg-dark .card .res-specs li,.bg-deep .card .res-specs li{color:var(--ink-soft);border-color:var(--line)}
.bg-dark .card .res-specs b,.bg-deep .card .res-specs b{color:var(--ink)}
.card__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);border-top:1px solid var(--line);padding-top:14px;margin-top:auto}

/* Residence card */
.res-card .card__media{aspect-ratio:16/11}
.res-tag{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep)}
.res-specs{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.res-specs li{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;
  padding-bottom:9px;border-bottom:1px dashed var(--line);color:var(--ink-soft)}
.res-specs b{font-weight:400;color:var(--ink);font-family:var(--display);font-size:15.5px}

/* Amenity tile */
/* The amenity renders are all 3:2 landscape (900x600 thumbnails). A portrait
   3/4 tile threw away half the width of every one of them, which is why they
   read as "cut from the sides". 4/3 trims about 5% from each edge instead. */
.tile{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--espresso-800);display:block}
.tile img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1.6s var(--ease);opacity:.94}
.tile:hover img{transform:scale(1.07)}
.tile__cap{
  position:absolute;inset:auto 0 0 0;padding:60px 24px 26px;color:var(--cream);
  background:linear-gradient(to top,rgba(24,13,5,.96) 0%,rgba(24,13,5,.82) 34%,rgba(24,13,5,.34) 68%,rgba(24,13,5,0) 100%);
}
.tile__cap h3{font-size:1.22rem;color:var(--gold-soft);margin-bottom:6px}
.tile__cap p{font-size:13px;margin:0;color:rgba(247,242,233,.8);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s var(--ease)}
.tile:hover .tile__cap p,.tile:focus-visible .tile__cap p{max-height:120px;opacity:1}
.tile--wide{aspect-ratio:16/10}

/* Feature list */
.feature-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.feature-list li{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.bg-dark .feature-list li{border-color:rgba(196,164,107,.18)}
.feature-list i{flex:none;width:7px;height:7px;margin-top:10px;border:1px solid var(--gold);transform:rotate(45deg)}
.feature-list h4{font-size:1.05rem;margin-bottom:3px}
.feature-list p{font-size:14px;color:var(--ink-soft);margin:0}
.bg-dark .feature-list p{color:rgba(231,218,196,.72)}

/* ---------- 10. Gallery ---------- */
.gal-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.gal-filters button{
  background:none;border:1px solid var(--line);padding:10px 20px;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:.45s var(--ease);
}
.gal-filters button:hover{color:var(--espresso);border-color:var(--gold)}
.gal-filters button.is-active{background:var(--espresso);border-color:var(--espresso);color:var(--gold)}
.masonry{columns:3;column-gap:clamp(12px,1.6vw,22px)}
@media (max-width:980px){.masonry{columns:2}}
@media (max-width:560px){.masonry{columns:1}}
.masonry figure{break-inside:avoid;margin:0 0 clamp(12px,1.6vw,22px);position:relative;overflow:hidden;cursor:zoom-in;background:var(--sand)}
.masonry img{width:100%;height:auto;transition:transform 1.4s var(--ease),filter .6s var(--ease)}
.masonry figure:hover img{transform:scale(1.045)}
.masonry figcaption{
  position:absolute;inset:auto 0 0 0;padding:36px 20px 18px;color:var(--cream);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(to top,rgba(30,16,6,.86),transparent);
}
.masonry figure:hover figcaption{opacity:1}
.masonry figure.hide{display:none}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(20,11,4,.97);display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,60px)}
.lb.is-open{display:flex}
.lb img{max-width:100%;max-height:82vh;object-fit:contain;box-shadow:0 40px 90px -40px #000}
.lb__cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:var(--gold-soft);
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
.lb__btn{position:absolute;background:none;border:1px solid var(--line-gold);color:var(--gold);
  width:50px;height:50px;display:flex;align-items:center;justify-content:center;transition:.4s var(--ease)}
.lb__btn:hover{background:var(--gold);color:var(--espresso-900);border-color:var(--gold)}
.lb__close{top:22px;right:22px}
.lb__prev{left:clamp(10px,2vw,32px);top:50%;transform:translateY(-50%)}
.lb__next{right:clamp(10px,2vw,32px);top:50%;transform:translateY(-50%)}

/* ---------- 11. Floor plans ---------- */
.plan-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.plan-card{background:var(--paper);border:1px solid var(--line);padding:clamp(18px,2.4vw,30px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,44px);align-items:center}
@media (max-width:860px){.plan-card{grid-template-columns:1fr}}
.plan-card__img{background:var(--paper);border:1px solid var(--line);padding:12px;cursor:zoom-in;position:relative}
.plan-card__img img{width:100%;height:auto}
.plan-card__img::after{
  content:"⤢";position:absolute;right:14px;bottom:12px;width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;background:var(--espresso);color:var(--gold);font-size:14px;
  opacity:0;transition:opacity .4s var(--ease)}
.plan-card__img:hover::after{opacity:1}
.spec-table{width:100%;border-collapse:collapse;margin:22px 0 26px}
.spec-table th,.spec-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:14px}
.spec-table th{font-weight:400;color:var(--muted);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.spec-table td:last-child{text-align:right;font-family:var(--display);font-size:16px}

/* Specifications */
.spec-block{border-top:1px solid var(--line-gold);padding-top:26px}
.spec-block h3{font-size:1.35rem;color:var(--gold-soft);margin-bottom:16px}
.spec-block ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.spec-block li{position:relative;padding-left:22px;font-size:14.5px;color:rgba(231,218,196,.84);line-height:1.7}
.spec-block li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;
  border:1px solid var(--gold);transform:rotate(45deg)}

/* ---------- 12. Location ---------- */
.map-shell{border:1px solid var(--line-gold);background:var(--paper);padding:clamp(10px,1.6vw,18px)}
.map-shell img{width:100%;height:auto;cursor:zoom-in}
.map-embed{width:100%;aspect-ratio:16/9;border:0;display:block;filter:saturate(.82) contrast(1.02)}
.loc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
@media (max-width:900px){.loc-cols{grid-template-columns:1fr}}
.loc-list{list-style:none;margin:0;padding:0}
.loc-list li{padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-soft);
  display:flex;gap:12px;align-items:flex-start}
.bg-dark .loc-list li{border-color:rgba(196,164,107,.18);color:rgba(231,218,196,.82)}
.loc-list li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;background:var(--gold);transform:rotate(45deg)}
.note{font-size:12.5px;color:var(--muted);font-style:italic;line-height:1.7}
.bg-dark .note{color:rgba(231,218,196,.55)}

/* ---------- 13. Forms ---------- */
.form{display:grid;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}
.field{position:relative;display:flex;flex-direction:column;gap:8px}
.field label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.bg-dark .field label,.bg-deep .field label{color:rgba(196,164,107,.85)}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:11px 2px;font:inherit;font-size:15px;color:var(--ink);transition:border-color .4s var(--ease)}
.bg-dark .field input,.bg-dark .field select,.bg-dark .field textarea,
.bg-deep .field input,.bg-deep .field select,.bg-deep .field textarea{
  color:var(--cream);border-bottom-color:rgba(196,164,107,.28)}
.cta-band .field input,.cta-band .field textarea,
.bg-deep .field input,.bg-deep .field textarea{background-color:rgba(30,16,6,.8);padding-left:10px}
.cta-band .field select,.bg-deep .field select{padding-left:7px}
/* Native <select> popups take their ground from the control's own
   background-color; a transparent control falls back to white and the cream
   option text disappears. Give the control the section's own colour (so the
   closed field still reads as transparent) and colour the options explicitly. */
.field select{color-scheme:light;background-color:var(--ivory)}
.field select option{background-color:var(--ivory);color:var(--ink)}
.bg-cream .field select,.bg-cream .field select option{background-color:var(--cream)}
.bg-sand .field select,.bg-sand .field select option{background-color:var(--sand)}
.bg-dark .field select,.bg-dark .field select option{
  color-scheme:dark;background-color:var(--espresso);color:var(--cream)}
.bg-deep .field select,.bg-deep .field select option,
.cta-band .field select,.cta-band .field select option{
  color-scheme:dark;background-color:var(--espresso-900);color:var(--cream)}
.bg-dark .field select option:checked,.bg-deep .field select option:checked,
.cta-band .field select option:checked{background-color:var(--gold);color:var(--espresso-900)}
.field textarea{resize:vertical;min-height:96px}
/* Anything wired to the lightbox invites a click. The gallery figures already
   carry this; these rules extend it to the amenity tiles and the large images
   on the Amenities page. */
[data-lb]{cursor:zoom-in}
.tile[data-lb]:focus-visible,.card__media[data-lb]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}
.card__media[data-lb]{overflow:hidden}
.card__media[data-lb] img{transition:transform 1.2s var(--ease)}
.card__media[data-lb]:hover img{transform:scale(1.04)}
.split__media[data-lb],.stack-imgs img[data-lb]{position:relative}
.split__media[data-lb]::after{
  content:"";position:absolute;right:14px;bottom:14px;width:34px;height:34px;
  border:1px solid rgba(247,242,233,.75);border-radius:50%;
  background:rgba(30,16,6,.42) center/13px 13px no-repeat;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F2E9' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.split__media[data-lb]:hover::after{opacity:1}

/* Honeypot — off-screen for people and screen readers, still filled by bots. */
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field .err{font-size:12px;color:#B4553E;min-height:0;display:none}
.bg-dark .field .err,.bg-deep .field .err{color:#E0A08C}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-bottom-color:#B4553E}
.field.invalid .err{display:block}
.form-note{font-size:12px;color:var(--muted);line-height:1.7}
.bg-dark .form-note{color:rgba(231,218,196,.6)}
.form-status{padding:16px 20px;border:1px solid var(--gold);color:var(--gold-soft);font-size:14px;display:none}
.form-status.show{display:block}

/* Contact info list */
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.contact-list li{display:flex;gap:16px;align-items:flex-start}
.contact-list svg{flex:none;width:19px;height:19px;stroke:var(--gold);margin-top:4px}
.contact-list span{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.bg-dark .contact-list span{color:rgba(196,164,107,.8)}
.contact-list a,.contact-list p{font-size:15.5px;color:inherit;margin:0}
.contact-list a:hover{color:var(--gold)}

/* WhatsApp float */
.wa{
  position:fixed;right:18px;bottom:18px;z-index:90;width:54px;height:54px;border-radius:50%;
  background:#1FA855;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6);transition:transform .4s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:27px;height:27px;fill:currentColor}

/* ---------- 14. CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--espresso-900)}
.cta-band__bg{position:absolute;inset:0;opacity:.34}
.cta-band__bg img{width:100%;height:100%;object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(30,16,6,.94) 0%,rgba(30,16,6,.78) 45%,rgba(30,16,6,.6) 100%)}
.cta-band .wrap{position:relative;z-index:1}

/* ---------- 15. Footer ---------- */
.site-footer{background:var(--espresso-900);color:rgba(231,218,196,.72);font-size:14px}
.site-footer a:hover{color:var(--gold)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,56px);
  padding-block:clamp(52px,7vw,88px);border-bottom:1px solid rgba(196,164,107,.16)}
@media (max-width:980px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.foot-top{grid-template-columns:1fr}}
.foot-logo{height:36px;width:auto;margin-bottom:22px}
.foot-h{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 20px;font-family:var(--sans)}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-list a{font-size:14px}
.rera-box{border:1px solid rgba(196,164,107,.28);padding:16px 18px;margin-top:20px;font-size:12.5px;line-height:1.8}
.rera-box b{display:block;margin-bottom:7px;color:var(--gold-soft);font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;font-size:10.5px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center;
  padding-block:26px;font-size:12.5px;color:rgba(231,218,196,.5)}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:22px}
.socials{display:flex;gap:12px;margin-top:22px}
.socials a{width:38px;height:38px;border:1px solid rgba(196,164,107,.3);display:flex;align-items:center;
  justify-content:center;transition:.45s var(--ease)}
.socials a:hover{background:var(--gold);border-color:var(--gold)}
.socials a{color:var(--gold)}
.socials a:hover{color:var(--espresso-900)}
.socials svg{width:17px;height:17px}

/* ---------- Developers ---------- */
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px)}
@media (max-width:860px){.dev-grid{grid-template-columns:1fr}}
.dev-card{
  border:1px solid var(--line-gold);padding:clamp(26px,3.4vw,44px);
  display:flex;flex-direction:column;gap:15px;background:rgba(196,164,107,.045);
  transition:border-color .6s var(--ease),background .6s var(--ease);
}
.dev-card:hover{border-color:rgba(196,164,107,.55);background:rgba(196,164,107,.075)}
.dev-card__logo{min-height:132px;display:flex;align-items:center;margin-bottom:4px}
.dev-card__logo img{max-height:132px;width:auto}
.dev-card p{font-size:14.5px;color:rgba(231,218,196,.82);line-height:1.85;margin:0}
.dev-card .dev-card__tag{
  font-family:var(--display);font-size:clamp(1.2rem,2vw,1.5rem);
  color:var(--gold-soft);line-height:1.28;margin:0;
}
.dev-card .dev-card__sign{
  margin-top:auto;padding-top:20px;border-top:1px solid rgba(196,164,107,.22);
  font-family:var(--display);font-style:italic;font-size:16px;color:var(--gold);line-height:1.55;
}
/* Typographic lockup, used until a logo file is supplied */
.wordmark{display:block;line-height:1}
.wordmark b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.7rem,2.7vw,2.2rem);color:var(--gold-soft);letter-spacing:.015em;
}
.wordmark i{
  display:block;margin-top:10px;font-style:normal;font-size:10.5px;
  letter-spacing:.44em;text-transform:uppercase;color:var(--gold-deep);
}
.disclaimer{padding-block:22px;border-top:1px solid rgba(196,164,107,.12);font-size:11.5px;
  color:rgba(231,218,196,.42);line-height:1.85}

/* ---------- 16. Misc ---------- */
.placeholder{border:1px dashed var(--gold-deep);background:rgba(196,164,107,.07);padding:16px 20px;
  font-size:13px;color:var(--ink-soft);line-height:1.75}
.bg-dark .placeholder{color:rgba(231,218,196,.72)}
.placeholder b{font-weight:400;color:var(--gold-deep);letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;display:block;margin-bottom:5px}
.bg-dark .placeholder b{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.prose h2{margin:44px 0 14px;font-size:1.6rem}
.prose h3{margin:30px 0 10px;font-size:1.2rem}
.prose ul{padding-left:20px;margin:0 0 1.2em}
.prose li{margin-bottom:8px}