/* ==========================================================================
   Regency Business Park — Kolshet corridor, Thane West
   Static stylesheet. No build step, no preprocessor.

   THEME: deep navy + gold, matching the official Regency Group project design.
   The logo is a GOLD + WHITE wordmark on transparency, so every surface it sits
   on must be DARK. See "Logo legibility" at section 6 — this is the inverse of
   a light-header site, and the rule flipped when the artwork changed.
   --------------------------------------------------------------------------
   FIXED-ELEMENT COLLISION MAP  (read before adding ANY position:fixed thing)
   --------------------------------------------------------------------------
   Every fixed/sticky element keeps ONE side at EVERY breakpoint. A side that
   flips between desktop and mobile is what makes widgets collide, so nothing
   below changes side. The two floating buttons sit in OPPOSITE lanes.

     ELEMENT             POS      SIDE           OFFSETS              SIZE     Z
     .site-header        sticky   top            top:0                auto     1200
     .main-nav (drawer)  fixed    right (sheet)  inset:0 0 0 auto     min(86vw,340px) 1210*
     .nav-scrim          fixed    full           inset:0              100%     1150
     .float-call         fixed    LEFT lane      left:20  bottom:20   56x56    900
     .float-wa           fixed    RIGHT lane     right:20 bottom:20   56x56    900
     .skip-link          absolute top-left       left:0 top:0         auto     1400

   Horizontal clearance between the two floating buttons, worst case. At the
   narrowest supported viewport the buttons shrink to 50px:
     320px:  call occupies x 20..70, wa occupies x 250..300  -> 180px clear
     390px:  call occupies x 20..76, wa occupies x 314..370  -> 238px clear
   Clearance only grows with viewport width, so they can never meet. Both sit at
   bottom:20, so neither needs a vertical offset from the other.

   .skip-link shares the LEFT edge but is anchored to top:0 and is only visible
   while focused, so it never reaches the call button at the bottom.

   If you add a third floating item, give it its own lane or stack it in an
   existing one at bottom:88 (a 12px gap above a 56px button).

   * STACKING-CONTEXT TRAP — read before changing any z-index here.
     .main-nav is a DESCENDANT of .site-header. Because .site-header is
     positioned with a z-index, it creates a stacking context, so the drawer's
     1210 is resolved INSIDE that context and never competes with .nav-scrim
     at the document root. What actually decides whether the drawer paints
     above the scrim is .site-header's own z-index. It must therefore stay
     ABOVE .nav-scrim (1200 > 1150). Lowering .site-header alone would put the
     open drawer underneath the scrim and swallow every tap on it.

   NOTE: .site-header deliberately has NO backdrop-filter. backdrop-filter
   creates a containing block for position:fixed descendants, which would trap
   .main-nav inside the header box instead of letting it fill the viewport.
   (.banner-badge uses it safely — it contains no fixed children.)
   --------------------------------------------------------------------------
   CSS ORDERING RULE
   A modifier (.card--plain) is always declared IMMEDIATELY AFTER its base
   (.card). Equal specificity means source order decides, so a modifier placed
   before its base is silently reset. Watch shorthand-vs-longhand pairs:
   margin / margin-top, padding / padding-bottom, inset / top / bottom.
   --------------------------------------------------------------------------
   HEADING ALIGNMENT RULE
   Split sections (text beside an image/table) -> LEFT-aligned section head.
   Full-width sections (grids, galleries, lists, FAQ) -> CENTRED section head.
   Applied via .section-head vs .section-head--left. No inline styles anywhere.
   ========================================================================== */

/* ---------- 1. Tokens ----------
   LIGHT THEME with DARK CHROME.
   The page body is white/warm-ivory with gold accents. The header, footer and
   banner stay dark navy, because the logo is a GOLD + WHITE wordmark on
   transparency and would vanish on a light surface (see section 6).

   So the navy scale below is no longer the page background — it is the palette
   for the dark chrome only. Light surfaces have their own tokens. */
:root {
  /* Dark chrome: header, footer, banner, CTA band. */
  --navy-950: #050c20;
  --navy-900: #081334;
  --navy-850: #0a183f;
  --navy-800: #0e1f4c;
  --navy-700: #14295f;
  --navy-600: #1d3576;

  /* Gold. --gold is the brand value, sampled from the logo artwork.
     --gold-ink is the darkened variant for gold TEXT on light surfaces:
     #d0a040 on white is about 2.3:1 and fails contrast, #8a6420 clears 5:1. */
  --gold:       #d0a040;
  --gold-light: #e6c274;
  --gold-dark:  #a87c28;
  --gold-ink:   #8a6420;
  --gold-tint:  rgba(208, 160, 64, .12);
  --gold-line:  rgba(208, 160, 64, .34);

  /* Light page surfaces. */
  --bg:        #ffffff;
  --bg-alt:    #fdf9f1;
  --bg-sand:   #faf3e6;
  --bg-panel:  #ffffff;

  /* Ink on light surfaces. */
  --ink:      #0a183f;
  --ink-soft: #46536f;
  --ink-mute: #6d788f;

  --line:      #eae2d2;
  --line-soft: #f3ece0;

  /* Borders/ink used INSIDE the dark chrome. */
  --line-dark:      rgba(255, 255, 255, .10);
  --line-dark-soft: rgba(255, 255, 255, .06);
  --ink-on-dark:      #ffffff;
  --ink-on-dark-soft: #c3cde3;
  --ink-on-dark-mute: #8d9ab8;

  --wa: #25d366;

  --font-head: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Shadows are tuned for light surfaces — black at high alpha reads as dirt
     on white, so these are soft and warm-neutral. */
  --sh-sm: 0 1px 2px rgba(20, 26, 45, .05), 0 2px 8px rgba(20, 26, 45, .04);
  --sh:    0 4px 14px rgba(20, 26, 45, .07), 0 12px 30px rgba(20, 26, 45, .06);
  --sh-lg: 0 10px 26px rgba(20, 26, 45, .09), 0 26px 56px rgba(20, 26, 45, .10);
  --sh-gold: 0 8px 22px rgba(208, 160, 64, .34);

  --wrap: 1380px;
  --gut:  clamp(1rem, 4vw, 2.5rem);
  --sec:  clamp(3.5rem, 8vw, 6.5rem);

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

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky header height + breathing room, so anchor targets aren't hidden. */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  /* Stops iOS from flashing a grey box on every tap. */
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-soft);
  background: var(--bg);
}

/* The closed mobile drawer is a position:fixed sheet parked off the right edge
   with translateX(100%). Chromium counts that in scrollWidth, which produced a
   real 47px horizontal scroll at 320px. `clip` removes it WITHOUT the side
   effect `hidden` has: overflow:hidden on html/body forces the other axis to
   `auto` and kills position:sticky, which this build relies on for the header
   and the location map. `clip` leaves the y axis visible, so sticky survives. */
html, body { overflow-x: clip; }

img, svg, iframe, video { max-width: 100%; }
img { height: auto; display: block; border: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .55em;
  font-weight: 600;
  letter-spacing: .002em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 500; }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
h4 { font-size: 1.16rem; }
h5 { font-size: 1.06rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-ink); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold-dark); }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }
li { margin-bottom: .5rem; }

::selection { background: var(--gold); color: var(--navy-950); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ---------- 2b. Icons ----------
   Lucide glyphs are inlined as <svg class="icon"> at build time — no icon font,
   no CDN, no JS. They inherit `currentColor`, so an icon takes the colour of
   whatever it sits inside and follows the palette automatically.
   1em keeps every icon locked to its neighbouring text size. */
.icon {
  width: 1em; height: 1em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -.135em;
  stroke-width: 2;
}
.icon--lg { width: 1.35em; height: 1.35em; }

/* ---------- 3. Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 880px; }

.section { padding-block: var(--sec); background: var(--bg); }
.section--deep { background: var(--bg-sand); }
.section--alt  { background: var(--bg-alt); }
.section--flush-top { padding-top: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--navy-950);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
  z-index: 1400; font-weight: 700;
}
.skip-link:focus { left: 0; color: var(--navy-950); }

/* ---------- 4. Section heads ----------
   Base = CENTRED (full-width grid/gallery/list sections).
   Modifier declared immediately after the base per the ordering rule. */
.section-head { max-width: 860px; margin: 0 auto clamp(2.25rem, 5vw, 3.5rem); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); flex-shrink: 0; }

.section-head p { color: var(--ink-mute); font-size: 1.02rem; margin-bottom: 0; }
.section-head h2 { margin-bottom: .6rem; }

.rule {
  width: 64px; height: 2px; border: 0; border-radius: 2px;
  margin: 1.1rem auto 0;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.rule--left { margin-inline: 0; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--gold); color: var(--navy-950); box-shadow: var(--sh-gold); }
.btn--primary:hover { background: var(--gold-light); color: var(--navy-950); }

.btn--ghost { background: transparent; color: var(--gold-ink); border-color: var(--gold-line); }
.btn--ghost:hover { background: var(--gold); color: var(--navy-950); border-color: var(--gold); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline-light:hover { background: #fff; color: var(--navy-950); border-color: #fff; }

.btn--wa { background: var(--wa); color: #04331a; }
.btn--wa:hover { background: #1fbb59; color: #04331a; }

.btn--sm { padding: .68rem 1.2rem; font-size: .69rem; letter-spacing: .1em; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn-row--center { justify-content: center; }

/* ---------- 6. Header ----------
   LOGO LEGIBILITY: the wordmark is GOLD + WHITE on transparency, so the header
   must stay DARK. Do not lighten .site-header — the logo would vanish. This is
   the inverse of the previous light-header build; the rule flipped with the
   artwork. The footer is dark too, so it needs no plate there either. */
.site-header {
  position: sticky; top: 0; z-index: 1200;
  background: var(--navy-950);
  border-bottom: 1px solid var(--line-dark);
  transition: box-shadow .25s var(--ease);
  /* No backdrop-filter here — see collision map note. */
}
.site-header.is-stuck { box-shadow: 0 6px 26px rgba(0,0,0,.45); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  min-height: 78px;
}

/* Brand wordmark, set in type rather than an image.
   Mirrors the logo lockup: "REGENCY" in the display serif over "BUSINESS PARK"
   letterspaced small. It still needs a DARK surface — the wordmark is white and
   gold, so the header and footer must stay dark (see section 6). */
.brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }

.brand-lockup { display: inline-flex; flex-direction: column; line-height: 1; }
.brand-lockup--sm .brand-name   { font-size: 1.35rem; }
.brand-lockup--sm .brand-sub    { font-size: .5rem; letter-spacing: .3em; }
.brand-lockup--footer           { margin-bottom: 1.3rem; }

.brand-name {
  font-family: var(--font-head);
  font-size: 1.85rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  transition: color .2s var(--ease);
}
.brand-sub {
  font-family: var(--font-body);
  font-size: .56rem; font-weight: 700;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold);
  margin-top: .34rem;
  /* The trailing letter-space pushes the word off-centre; pull it back so the
     two lines optically align on the left edge. */
  margin-right: -.42em;
  transition: color .2s var(--ease);
}
.brand:hover .brand-name { color: var(--gold-light); }

.header-actions { display: flex; align-items: center; gap: .7rem; }
.header-phone {
  display: none; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 700; font-size: .86rem;
  color: #fff;
  white-space: nowrap;
}
.header-phone i { color: var(--gold); }
.header-phone:hover { color: var(--gold); }

/* Header enquiry CTA. Hidden on phones: below 640px the bar is only logo +
   hamburger, and the floating WhatsApp button already sits permanently on
   screen there, so this would be a duplicate of a control the user always has.
   Hiding it also stops the bar crowding at the narrowest widths. */
/* Header enquiry CTA. Sized up from .btn--sm — it is the one conversion
   control in the bar, so it should outweigh the nav links rather than match
   them. Declared after .btn--sm (section 5), so at equal specificity these
   values win, per the CSS ordering rule. The icon is bumped past 1em so the
   WhatsApp mark reads as a brand cue, not a bullet. */
.header-cta {
  display: inline-flex;
  /* padding: .85rem 1.55rem; */
  font-size: .8rem;
  letter-spacing: .12em;
  gap: .55rem;
}
.header-cta .icon { width: 1.45em; height: 1.45em; }

/* ---------- 7. Navigation + dropdown ----------
   DROPDOWN RULE: the submenu is opened/closed with max-height + opacity +
   visibility ONLY. `display` is never used to toggle it, in the base rule or
   in any media query. Every rule that opens it sets the SAME trio to the SAME
   values, so no two rules of equal specificity can fight over one property
   and source order can never flip it open. */
.main-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav-list li { margin: 0; }

.nav-list > li > a,
.nav-toggle-sub {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-body); font-size: .73rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-on-dark-soft);
  padding: .65rem .7rem;
  border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer;
  /* Two-word labels ("About Us", "Floor Plan") must not wrap in the bar. */
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav-list > li > a:hover,
.nav-toggle-sub:hover,
.nav-list > li > a[aria-current="page"] { color: var(--gold); }

.nav-toggle-sub i { font-size: .7em; transition: transform .25s var(--ease); }

.has-sub { position: relative; }

/* Submenu resting state — the single source of truth for "closed". */
.sub-menu {
  list-style: none; margin: 0; padding: .5rem;
  /* Right-anchored, not left-anchored. The Blog item sits near the right edge
     of the bar, and a left-anchored 292px panel extends past the viewport and
     creates horizontal scroll even while collapsed (max-height:0 kills the
     height, not the width). Measured: 46px overflow at 992-1199px. */
  position: absolute; top: calc(100% + 8px); right: 0; left: auto;
  min-width: 292px;
  background: var(--navy-850);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height .3s var(--ease), opacity .2s var(--ease), visibility .3s var(--ease);
}
.sub-menu li { margin: 0; }
.sub-menu a {
  display: block;
  font-size: .85rem; font-weight: 500; line-height: 1.5;
  letter-spacing: .01em; text-transform: none;
  color: var(--ink-on-dark-soft);
  padding: .6rem .8rem;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.sub-menu a:hover { color: var(--gold); background: var(--gold-tint); }

/* Desktop: hover-to-open. Sets the same trio, same values. */
@media (hover: hover) and (min-width: 992px) {
  .has-sub:hover > .sub-menu,
  .has-sub:focus-within > .sub-menu {
    max-height: 560px;
    opacity: 1;
    visibility: visible;
  }
  .has-sub:hover > .nav-toggle-sub i { transform: rotate(180deg); }
}

/* Any breakpoint: explicit open class (tap-to-toggle). Same trio, same values. */
.has-sub.is-open > .sub-menu {
  max-height: 560px;
  opacity: 1;
  visibility: visible;
}
.has-sub.is-open > .nav-toggle-sub i { transform: rotate(180deg); }

/* ---------- 8. Mobile drawer ---------- */
.hamburger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; color: var(--gold);
  border: 1px solid var(--gold-line); border-radius: var(--r-sm);
  font-size: 1.15rem; cursor: pointer;
}
.hamburger:hover { background: var(--gold); color: var(--navy-950); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 1150;
  background: rgba(3, 8, 22, .72);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

.drawer-head { display: none; }

@media (max-width: 991px) {
  .hamburger { display: inline-flex; }

  .main-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 1210;
    width: min(86vw, 340px);
    background: var(--navy-950);
    border-left: 1px solid var(--gold-line);
    box-shadow: -10px 0 44px rgba(0,0,0,.55);
    padding: 1.25rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .32s var(--ease);
    margin-left: 0;
  }
  .main-nav.is-open { transform: translateX(0); }

  .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 1rem; margin-bottom: .75rem;
    border-bottom: 1px solid var(--line-dark);
  }

  .drawer-close {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--gold);
    border: 1px solid var(--gold-line); border-radius: var(--r-sm);
    font-size: 1.05rem; cursor: pointer;
  }
  .drawer-close:hover { background: var(--gold); color: var(--navy-950); }

  .nav-list { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav-list > li > a,
  .nav-toggle-sub { width: 100%; justify-content: space-between; padding: .85rem .75rem; font-size: .78rem; }

  /* Submenu stays in normal flow on mobile, but the open/close mechanism is
     still max-height + opacity + visibility. `display` is not touched. */
  .sub-menu {
    position: static;
    min-width: 0;
    border: 0; box-shadow: none;
    background: var(--navy-900);
    border-radius: var(--r-sm);
    margin: .15rem 0 .35rem;
    padding: .25rem;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
  }
}

/* ---------- 9. Banner (hero) ---------- */
.banner {
  position: relative;
  min-height: clamp(480px, 64vh, 660px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--navy-950);
}
.banner-media { position: absolute; inset: 0; }
.banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }

/* Directional scrim: dark and opaque on the left where the lockup sits, clearer
   on the right so the building elevation still reads. Keeps one lockup
   dominant instead of stacking type on top of busy artwork. */
.banner-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,12,32,.95) 0%, rgba(5,12,32,.84) 34%, rgba(5,12,32,.44) 68%, rgba(5,12,32,.30) 100%),
    linear-gradient(0deg, rgba(5,12,32,.88) 0%, rgba(5,12,32,0) 48%);
}
.banner-inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5rem); }

.banner h1 { margin-bottom: .9rem; }
.banner h1 .l1 { display: block; color: #fff; }
.banner h1 .l2 { display: block; color: var(--gold); }

.banner-loc {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .93rem; color: var(--ink-on-dark-soft);
  margin-bottom: 1.7rem;
}
.banner-loc i { color: var(--gold); }

.banner-lede { max-width: 640px; color: var(--ink-on-dark-soft); font-size: .98rem; margin-bottom: 1.9rem; }

.banner-badges { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.banner-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .05em;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--gold-line);
  padding: .52rem .95rem; border-radius: var(--r-pill);
  backdrop-filter: blur(3px);
}
.banner-badge i { color: var(--gold); }

/* ---------- 11. Cards / grids ---------- */
.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card--pad-lg { padding: clamp(1.6rem, 3vw, 2.4rem); }
.card--plain  { background: transparent; }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--gold-line); }

.icon-badge {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold-tint); color: var(--gold-ink);
  border: 1px solid var(--gold-line);
  font-size: 1.1rem;
  margin-bottom: 1.1rem;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.icon-badge--solid { background: var(--gold); color: var(--navy-950); }
.card:hover .icon-badge { background: var(--gold); color: var(--navy-950); }

.feature-card h3 { margin-bottom: 0; font-size: 1.04rem; font-family: var(--font-body); font-weight: 600; letter-spacing: .01em; line-height: 1.45; }
.feature-card p { font-size: .92rem; color: var(--ink-mute); margin-bottom: 0; }

/* Amenity card: full-bleed photo, gradient overlay, content anchored
   bottom-left. The photo is the card here rather than a faint texture, so
   legibility is carried entirely by the gradient — near-transparent at the top
   where the image should read, near-solid navy at the bottom where the icon and
   label sit. Text never lands on unmanaged artwork.

   The photo is still DECORATION, never information: empty alt + aria-hidden,
   and the navy card colour sits underneath, so the card reads correctly if the
   image is blocked, fails, or has not lazy-loaded yet. */
.amenity {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start;
  text-align: left;
  gap: .7rem;
  height: 200px;
  background: var(--navy-800);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  border-radius: var(--r);
  padding: 1.15rem 1.15rem;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.amenity:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--gold-line); }

.amenity-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s var(--ease);
}
.amenity:hover .amenity-bg { transform: scale(1.09); }

/* Overlay: lets the image read up top, guarantees contrast down bottom. */
.amenity::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
      180deg,
      rgba(5,12,32,.22) 0%,
      rgba(5,12,32,.50) 34%,
      rgba(5,12,32,.86) 70%,
      rgba(5,12,32,.96) 100%);
  transition: background .3s var(--ease);
}
.amenity:hover::after {
  background: linear-gradient(
      180deg,
      rgba(5,12,32,.12) 0%,
      rgba(5,12,32,.40) 34%,
      rgba(5,12,32,.82) 70%,
      rgba(5,12,32,.96) 100%);
}

.amenity .icon-badge {
  margin-bottom: 0;
  width: 40px; height: 40px; font-size: .9rem;
  background: rgba(5,12,32,.55);
  border-color: var(--gold-line);
  backdrop-filter: blur(3px);
}
.amenity:hover .icon-badge { background: var(--gold); color: var(--navy-950); border-color: var(--gold); }

.amenity h3 {
  margin: 0; font-family: var(--font-body);
  font-size: .92rem; font-weight: 700; line-height: 1.3;
  letter-spacing: .01em; color: #fff;
  text-shadow: 0 1px 12px rgba(5,12,32,.9);
}

/* ---------- 12. Split section ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--media-first .split-media { order: -1; }
/* .split--flip: image sits LEFT on desktop but should fall BELOW the text once
   the columns stack, so the reader meets the copy first. Ordering only applies
   in the stacked state — see the 991px block. */

.split-media { position: relative; }
.split-media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); height:450px; object-fit: cover; object-position: center; }
.split-media::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-line);
  pointer-events: none;
}

/* Fact pills beside the overview copy */
.factrow { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .85rem; margin-top: 1.9rem; }
.fact {
  display: flex; align-items: center; gap: .85rem;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1rem 1.15rem;
}
.fact .icon { color: var(--gold-ink); width: 1.3em; height: 1.3em; flex-shrink: 0; }
.fact span { font-size: .76rem; color: var(--ink-mute); display: block; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.fact strong { font-size: .95rem; color: var(--ink); font-weight: 600; }

/* ---------- 13. Figures / plans / gallery ---------- */
/* Plan cards. The five source plans have very different aspect ratios
   (1.42 site map, 1.77 floor plan, 1.92 layouts), which made the grid ragged.
   Every image now sits in an identical 16:10 box.

   `contain`, not `cover`: cropping a floor plan would cut units off the edge.
   The letterboxing is invisible because the plans are drawn on white and the
   box is white, so each card reads as one uniform plan sheet.

   The figure is a flex column with the caption last, so cards in the same grid
   row stretch to equal height even when a caption wraps onto two lines. */
.figure {
  margin: 0;
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.figure:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--gold-line); }
.figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--bg);
  padding: .5rem;
}
.figure figcaption {
  margin-top: auto;
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); text-align: center;
  padding: .95rem 1rem;
  border-top: 1px solid var(--line-soft);
}

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; position: relative; border: 1px solid var(--line); transition: border-color .25s var(--ease); }
.gallery img {
  width: 100%; height: 260px; object-fit: cover;
  transition: transform .55s var(--ease);
}
.gallery figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,12,32,.45), transparent 55%);
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
.gallery figure:hover { border-color: var(--gold-line); }
.gallery figure:hover img { transform: scale(1.07); }
.gallery figure:hover::after { opacity: 1; }

/* ---------- 14. Price table ---------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-panel);
}
table.price { width: 100%; border-collapse: collapse; min-width: 660px; }
table.price th, table.price td { padding: 1.05rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.price thead th {
  background: var(--gold); color: var(--navy-950);
  font-family: var(--font-body); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 0;
}
table.price tbody tr:last-child td { border-bottom: 0; }
table.price tbody tr { transition: background-color .2s var(--ease); }
table.price tbody tr:hover { background: var(--gold-tint); }
table.price td { color: var(--ink-soft); font-size: .93rem; }
table.price td:first-child { font-weight: 600; color: var(--ink); }
.price-note { font-size: .87rem; color: var(--ink-mute); margin-top: 1.25rem; }


/* Stacked price table for narrow screens.
   A 660px min-width table forces sideways scrolling on every phone, so below
   640px each row becomes its own card and each cell is labelled from the
   data-label attribute that build.py writes. The <table> stays a real table in
   the markup — only its presentation changes — so it is still announced as
   tabular data and still readable on any device that ignores this rule. */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; border: 0; background: none; }

  table.price { min-width: 0; display: block; }
  table.price thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.price tbody { display: block; }

  table.price tbody tr {
    display: block;
    background: var(--navy-800);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .35rem 1.1rem .95rem;
    margin-bottom: .85rem;
  }
  table.price tbody tr:hover { background: var(--navy-800); }

  table.price tbody td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: right;
  }
  table.price tbody td::before {
    content: attr(data-label);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold);
    text-align: left;
  }
  table.price tbody td:last-child { border-bottom: 0; padding-bottom: .2rem; }
  table.price tbody td:last-child .btn { width: auto; }
}

/* ---------- 15. Location ---------- */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }

.conn-panel { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.75rem; box-shadow: var(--sh-sm); }
.conn-panel + .conn-panel { margin-top: 1.1rem; }
.conn-panel h3 { font-size: 1.45rem; margin-bottom: 1.1rem; color: var(--ink); }

.conn-list { list-style: none; margin: 0; padding: 0; }
.conn-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .72rem 0; border-bottom: 1px solid var(--line-soft);
  margin: 0;
}
.conn-list li:last-child { border-bottom: 0; }
.conn-list .place { display: flex; align-items: center; gap: .75rem; font-weight: 500; color: var(--ink); font-size: .91rem; }
.conn-list .place i { color: var(--gold); width: 20px; text-align: center; flex-shrink: 0; }
.conn-list .time {
  font-size: .72rem; font-weight: 700; white-space: nowrap;
  letter-spacing: .06em;
  color: var(--gold-ink); background: var(--gold-tint);
  border: 1px solid var(--gold-line);
  padding: .3rem .78rem; border-radius: var(--r-pill);
}


.chip-list { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; list-style: none; }
.chip-list li { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .83rem; font-weight: 500; color: var(--ink-soft);
  background: var(--bg-panel); border: 1px solid var(--line);
  padding: .58rem 1.05rem; border-radius: var(--r-pill);
  transition: border-color .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.chip i { color: var(--gold); }
.chip:hover { border-color: var(--gold); transform: translateY(-2px); color: var(--ink); }

/* ---------- 16. Ticks ---------- */
.tick-list { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.tick-list li { position: relative; padding-left: 2.15rem; margin-bottom: 1rem; }
.tick-list li::before {
  content: "";
  position: absolute; left: 0; top: .38rem;
  width: 22px; height: 22px; border-radius: 50%;
  background-color: var(--gold-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0a040' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  border: 1px solid var(--gold-line);
}
.tick-list strong { color: var(--ink); font-weight: 600; }

/* ---------- 17. FAQ ---------- */
.faq-list { max-width: 920px; margin-inline: auto; display: grid; gap: .7rem; }
.faq {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: border-color .25s var(--ease);
}
.faq[open] { border-color: var(--gold-line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  font-family: var(--font-body); font-size: .94rem; font-weight: 600; color: var(--ink);
  padding: 1.15rem 1.4rem;
  cursor: pointer; list-style: none;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-ink); }
.faq summary::after {
  content: "";
  width: 18px; height: 18px;
  flex-shrink: 0; margin-top: .3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0a040' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14' /%3E %3Cpath d='M12 5v14' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  transition: transform .25s var(--ease);
}
.faq[open] summary::after { content: "\f068"; transform: rotate(180deg); }
.faq-body { padding: 0 1.4rem 1.3rem; }
.faq-body p { color: var(--ink-soft); font-size: .93rem; margin: 0; }

/* ---------- 18. CTA band ---------- */
.cta-band {
  position: relative;
  background: linear-gradient(120deg, var(--navy-800) 0%, var(--navy-700) 58%, var(--navy-600) 100%);
  border: 1px solid var(--gold-line);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 5vw, 3.75rem);
  text-align: center;
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(680px 340px at 86% 0%, rgba(208,160,64,.22), transparent 62%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band h2 em { font-style: normal; color: var(--gold); }
.cta-band p { color: var(--ink-on-dark-soft); max-width: 660px; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.9rem; }

/* ---------- 19. Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; }
.post-card {
  display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--gold-line); }
.post-card .thumb { overflow: hidden; line-height: 0; display: block; }
.post-card .thumb img { width: 100%; height: 205px; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .thumb img { transform: scale(1.06); }
.post-card .body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 1.24rem; margin-bottom: .6rem; line-height: 1.3; }
.post-card h3 a { color: var(--ink); }
.post-card:hover h3 a { color: var(--gold-ink); }
.post-card p { font-size: .88rem; color: var(--ink-mute); margin-bottom: 1.1rem; }
.post-card .more {
  margin-top: auto; font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-ink);
  display: inline-flex; align-items: center; gap: .5rem;
}
.post-card .more i { transition: transform .2s var(--ease); }
.post-card:hover .more i { transform: translateX(4px); }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; font-size: .75rem; color: var(--ink-mute); margin-bottom: .75rem; letter-spacing: .04em; }
.post-meta span { display: inline-flex; align-items: center; gap: .42rem; }
.post-meta .icon { color: var(--gold-ink); }

/* Article page */
.page-hero {
  position: relative;
  background: linear-gradient(180deg, var(--bg-sand) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5.5vw, 4rem);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 380px at 88% 12%, rgba(208,160,64,.14), transparent 64%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }

.crumbs { font-size: .77rem; color: var(--ink-mute); margin-bottom: 1rem; letter-spacing: .04em; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "/"; color: var(--line); }

.article-hero-img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); border: 1px solid var(--line); margin-bottom: 2.4rem; }

.article { font-size: 1.01rem; color: var(--ink-soft); }
.article h2 { margin-top: 2.6rem; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.article h3 { margin-top: 2rem; font-size: 1.34rem; }
.article > h2:first-child, .article > h3:first-child { margin-top: 0; }
.article ul, .article ol { margin-bottom: 1.4rem; }
.article li { margin-bottom: .7rem; }
.article strong { color: var(--ink); font-weight: 600; }
.article a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-line); }
.article a:hover { text-decoration-color: var(--gold); }
.article .table-wrap { margin-bottom: 1.7rem; }
.article table { width: 100%; border-collapse: collapse; min-width: 580px; }
.article table th, .article table td { padding: .9rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
.article table thead th {
  background: var(--gold); color: var(--navy-950); border-bottom: 0;
  font-family: var(--font-body); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.article table tbody tr:last-child td { border-bottom: 0; }
.article table td { color: var(--ink-soft); }

.toc {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  padding: 1.4rem 1.7rem;
  margin-bottom: 2.2rem;
}
.toc h2 { font-family: var(--font-body); font-size: .74rem; margin: 0 0 .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.toc ul { margin: 0; padding-left: 1.1rem; }
.toc li { margin-bottom: .45rem; font-size: .91rem; }

.note {
  background: var(--bg-sand);
  border: 1px solid var(--gold-line);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  font-size: .92rem;
  margin-bottom: 1.7rem;
  color: var(--ink-soft);
}
.note strong { color: var(--ink); }

.related { border-top: 1px solid var(--line); margin-top: 3.2rem; padding-top: 2.2rem; }
.related h2 { font-size: 1.6rem; }
.related ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.related li { margin: 0; }
.related a { display: inline-flex; align-items: flex-start; gap: .6rem; font-weight: 500; font-size: .93rem; color: var(--ink-soft); }
.related a .icon { color: var(--gold-ink); width: .95em; height: .95em; margin-top: .42rem; flex-shrink: 0; }
.related a:hover { color: var(--gold-ink); }

/* ---------- 20. Footer ----------
   Dark field, so the gold/white logo reads directly — no plate required here.
   If this is ever lightened, the logo needs a dark plate instead. */
.site-footer { background: var(--navy-950); color: var(--ink-on-dark-mute); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--gold-line); }
.footer-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1.15fr; gap: clamp(1.75rem, 4vw, 3rem); }


.site-footer h2.footer-h {
  font-family: var(--font-body); color: var(--gold);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.site-footer p { font-size: .88rem; line-height: 1.8; color: var(--ink-on-dark-mute); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .62rem; line-height: 1.5; }
.site-footer a { color: var(--ink-on-dark-mute); font-size: .88rem; }
.site-footer a:hover { color: var(--gold); }

.footer-contact li { display: flex; align-items: flex-start; gap: .75rem; font-size: .88rem; }
.footer-contact i { color: var(--gold); margin-top: .38rem; width: 16px; text-align: center; flex-shrink: 0; }

.footer-legal { border-top: 1px solid var(--line-dark); margin-top: 3rem; padding-block: 2rem; }
.disclaimer-box { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
.disclaimer-box img { width: 104px; height: 104px; border-radius: var(--r-sm); background: #fff; padding: 6px; }
.disclaimer-box h2 {
  font-family: var(--font-body); color: var(--gold); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .2em; margin-bottom: .7rem;
}
.disclaimer-box p { font-size: .78rem; line-height: 1.75; color: #7e8aa6; margin-bottom: .7rem; }
.rera-line { font-size: .78rem; font-weight: 700; color: var(--gold); letter-spacing: .05em; }
.rera-line span { display: block; }


/* ---------- 21. Floating widgets ----------
   TWO LANES, and each button stays in its own lane at EVERY breakpoint:
     .float-call -> LEFT  lane, left:20px  bottom:20px
     .float-wa   -> RIGHT lane, right:20px bottom:20px
   The rule that matters is that a button never SWITCHES side between
   breakpoints — that is what makes widgets land on each other. Sitting in
   opposite lanes is fine and can never collide: at the narrowest supported
   viewport (320px) the two boxes are 50px wide at 20px insets, leaving
   320 - 20 - 50 - 50 - 20 = 180px of clear space between them.

   .float-btn deliberately sets NO horizontal offset. Each variant declares its
   own side, so there is no base `right` for a modifier to have to undo with
   `right: auto` — the shorthand-vs-longhand trap in the CSS ordering rule. */
.float-btn {
  position: fixed; z-index: 900;
  bottom: 20px;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.4rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.float-btn:hover { transform: scale(1.09); box-shadow: 0 12px 32px rgba(0,0,0,.55); }
.float-wa   { right: 20px; background: var(--wa); color: #04331a; }
.float-wa:hover { color: #04331a; }
.float-call { left: 20px; background: var(--gold); color: var(--navy-950); }
.float-call:hover { color: var(--navy-950); }

/* Pulse ring on both floating buttons. The ring is drawn on ::before at
   inset:0 and animated with transform only, so it never affects layout or the
   geometry recorded in the collision map. Each variant supplies its own colour;
   the call ring is offset half a cycle so the two do not pulse in lockstep. */
.float-btn::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid currentColor;
  pointer-events: none;
  animation: pulse 2.4s var(--ease) infinite;
}
.float-wa::before   { border-color: var(--wa); }
.float-call::before { border-color: var(--gold); animation-delay: 1.2s; }
@keyframes pulse {
  0%   { transform: scale(1);    opacity: .8; }
  100% { transform: scale(1.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .float-btn::before { animation: none; opacity: 0; } }

/* ---------- 22. Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- 23. Utilities (no inline styles anywhere) ---------- */
.u-center { text-align: center; }
.u-mt-0   { margin-top: 0; }
.u-mt-lg  { margin-top: 2.5rem; }
.u-mt-md  { margin-top: 1.5rem; }
.u-mb-0   { margin-bottom: 0; }
.u-mb-lg  { margin-bottom: 2.5rem; }
.u-mb-md  { margin-bottom: 1.5rem; }
.u-muted  { color: var(--ink-mute); }
.u-small  { font-size: .86rem; }
.u-gold   { color: var(--gold); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 24. Responsive ---------- */
/* The header only has room for the phone number on wide desktops. Below that
   it would push the nav past the viewport edge (measured: 32px overflow at
   1024px), so it is revealed with a min-width rule instead. Raised to 1280px
   once nav labels became nowrap, which widened the bar. */
@media (min-width: 1280px) {
  .header-phone { display: inline-flex; }
}

/* Crowded band: nav is still horizontal but the viewport is narrow. */
@media (min-width: 992px) and (max-width: 1279px) {
  .nav-list > li > a,
  .nav-toggle-sub { padding: .6rem .48rem; font-size: .68rem; letter-spacing: .1em; }
  .brand-name { font-size: 1.5rem; }
  .brand-sub { font-size: .48rem; letter-spacing: .34em; }
}

@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 991px) {
  html { scroll-padding-top: 86px; }
  .split, .loc-grid { grid-template-columns: 1fr; }
  .split--media-first .split-media { order: 0; }
  /* Applied from the stacking breakpoint, not 640px: the columns collapse at
     991px, so anything narrower would leave 641-991px stacked image-first. */
  .split--flip .split-media { order: 1; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .post-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .brand-name { font-size: 1.35rem; }
  .brand-sub { font-size: .45rem; letter-spacing: .3em; }
  .header-inner { min-height: 66px; }
  .header-cta { display: none; }
  /* Banner fact badges are hidden on phones: four pills wrap to three rows and
     push the CTAs below the fold. Nothing is lost — every one of these facts
     also appears in the Overview fact pills (MahaRERA, possession, office and
     retail sizes) and the RERA numbers repeat in the footer. */
  .banner-badges { display: none; }
  .banner { min-height: 0; }
  .banner-media img { object-position: center 58%; }
  /* Split-section images become short banners on phones. object-fit: cover is
     essential here — a bare height would squash the render, since the global
     `img { height: auto }` rule is what normally preserves the aspect ratio. */
  .split-media img { height: 200px; object-fit: cover; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  /* Declared after .grid--4 so it wins: 16 portrait tiles stacked one-up would
     make this section endless to scroll, so the amenity grid stays two-up. */
  .grid--tiles { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
  .grid--tiles .amenity { padding: .85rem .8rem; gap: .5rem; height: 175px; }
  .grid--tiles .amenity .icon-badge { width: 34px; height: 34px; font-size: .78rem; }
  .grid--tiles .amenity h3 { font-size: .78rem; line-height: 1.28; }
  .factrow { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery img { height: 230px; }
  .footer-grid { grid-template-columns: 1fr; }
  .disclaimer-box { grid-template-columns: 1fr; }
  .disclaimer-box img { width: 88px; height: 88px; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}
@media (max-width: 360px) {
  :root { --gut: .9rem; }
  .float-btn { width: 50px; height: 50px; font-size: 1.25rem; }
  /* Lane pitch holds: wa 20..70, call 88..138 — still an 18px gap. */
}

/* Landscape phones and other short viewports: the banner's min-height would
   otherwise fill more than the screen, pushing the CTAs out of reach. */
@media (max-height: 520px) and (orientation: landscape) {
  .banner { min-height: 0; }
  .banner-inner { padding-block: 2.25rem; }
  .banner h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
  .banner-badges { margin-bottom: 1.1rem; }
  .banner-lede { margin-bottom: 1.1rem; }
}

/* Very wide screens: keep the banner from becoming a thin letterbox strip. */
@media (min-width: 1800px) {
  .banner { min-height: 700px; }
}