/* ========================================================================== 
   File   : assets/css/style.css
   Author : Front-end template (reusable across projects)
   Notes  : All brand-level values are CSS custom properties in :root.
            Change the tokens below to re-skin the entire website.
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Design tokens
   02. Base & reset
   03. Typography helpers
   04. Buttons & links
   05. Header / navigation
   06. Hero
   07. Quick highlights
   08. Overview + At a glance
   09. Configuration & pricing
   10. Amenities
   11. Gallery + lightbox
   12. Master plan + floor plans
   13. Location & connectivity
   14. Why consider / advantages
   15. Developer
   16. RERA
   17. FAQ
   18. Enquiry / contact
   19. Footer
   20. Floating & sticky UI
   21. Modal + forms
   22. Motion & reveal
   23. Responsive refinements
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Brand colours ---------------------------------------------------- */
  --primary-color: #0c1a2b;          /* deep midnight navy   */
  --primary-dark: #071120;           /* darker navy          */
  --primary-soft: #16283d;           /* raised navy surface  */
  --secondary-color: #ffffff;
  --accent-color: #c6a15b;           /* champagne gold       */
  --accent-light: #e2c58c;
  --accent-dark: #816328;  /* was #a3803f (3.67:1, failed AA). 5.6 white / 5.1 ivory / 4.6 sand */

  /* --- Neutrals ---------------------------------------------------------- */
  --ivory: #f7f4ee;
  --sand: #efe9dd;
  --line: #e3ddd0;
  --line-dark: rgba(255, 255, 255, .14);

  --heading-color: #10192a;
  --body-color: #55606f;
  --body-muted: #606978;   /* was #8a93a1 (3.10:1, failed AA). 5.5 white / 5.1 ivory / 4.6 sand */
  --body-on-dark: rgba(255, 255, 255, .74);
  --muted-on-dark: rgba(255, 255, 255, .52);

  /* --- Typography -------------------------------------------------------- */
  /* One readable family throughout. Hierarchy comes from weight and size, not
     from weight alone. Manrope has lining numerals, so figures like
     "2.75 Acres" and "Rs 34 - 40 Cr" sit on one baseline - the old Garamond
     used old-style figures, which is what made the numbers look uneven. */
  /* Matches the reference site: Marcellus for display, Manrope for text.
     Marcellus has a single weight (400) - never ask it for bold, the browser
     will fake it. Manrope carries 400-700 and does the work that needs weight. */
  --font-display: "Marcellus", "Georgia", "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Figures. Marcellus has one weight and small numerals, which made every
     price and area the hardest thing on the page to read. Point this at a
     dedicated numeral face later if you want; nothing else needs touching. */
  --font-numeric: var(--font-body);

  /* Modular scale. Marcellus (display) sets small for its point size and
     Manrope (text) sets large, so the steps below are tuned to that pair.
     Original note: a geometric sans sets larger on the
     body and needs tighter tracking at display sizes than the old serif did.
     Each clamp goes min -> max with a viewport-linked middle, so a size is
     never locked and never overshoots.
        h1  32 -> 64px      h2  26 -> 40px      h3  19 -> 24px
        h4  17 -> 19px      lead 17px           body 16px                    */
  /* One text scale. Every size on the page is one of these steps - the
     page previously rendered 31 different sizes, most within a few tenths
     of each other. Floor is 11px; nothing smaller is legible on a phone. */
  --fs-3xs: .6875rem;   /* 11px - uppercase micro labels only */
  --fs-2xs: .75rem;     /* 12px - fine print, notes, footnotes */
  --fs-xs:  .8125rem;   /* 13px - buttons, chips, captions     */
  --fs-sm:  .875rem;    /* 14px - secondary text               */
  --fs-base: 1rem;      /* 16px - body                         */
  --fs-lg:  1.125rem;   /* 18px - card titles, small headings  */
  --fs-xl:  1.375rem;   /* 22px - stat values, large card text */
  /* Display numerals (highlight and developer stats are the same component
     in two places, and were running 34.6px vs 36.2px). */
  --fs-stat: clamp(1.6rem, 1.25rem + 1.1vw, 2.3rem);

  --fs-eyebrow: var(--fs-3xs);
  --fs-body: var(--fs-base);
  --fs-lead: 1.0625rem;
  --fs-h4: var(--fs-lg);   /* merged - it sat 1px from --fs-lg */
  --fs-h3: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  --fs-h2: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
  --fs-h1: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);

  --lh-tight: 1.08;
  --lh-heading: 1.22;
  --lh-body: 1.65;
  --ls-wide: .18em;
  --ls-mid: .1em;

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1240px;
  /* Must be >= half of the largest Bootstrap gutter used (g-5 = 48px), or the
     row's negative margin bleeds past the container edge. */
  --container-pad: 24px;
  /* --section-space: clamp(64px, 7.5vw, 118px); */
  --section-space: clamp(42px, 7.5vw, 56px);
  --section-space-sm: clamp(48px, 5vw, 78px);
  --gutter: clamp(24px, 3vw, 48px);

  /* --- Shape & depth ----------------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 6px 20px rgba(16, 25, 42, .06);
  --shadow-md: 0 18px 44px rgba(16, 25, 42, .1);
  --shadow-lg: 0 28px 70px rgba(7, 17, 32, .18);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .45s;

  /* --- Chrome ------------------------------------------------------------ */
  --header-h: 84px;
  --header-h-sm: 68px;
  --mobile-bar-h: 62px;
}


/* ==========================================================================
   02. BASE & RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--secondary-color);
  color: var(--body-color);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Reserve space for the mobile action bar so it never covers content. */
@media (max-width: 991.98px) {
  body { padding-bottom: var(--mobile-bar-h); }
}

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

/* <i> is italic by default in the UA stylesheet; these carry icons, not text. */
i[class^="bi-"], i[class*=" bi-"] { font-style: normal; }

a {
  color: var(--accent-dark);
  text-decoration: none;
  transition: color .3s var(--ease);
}
a:hover { color: var(--accent-color); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--heading-color);
  font-weight: 400;
  line-height: var(--lh-heading);
  margin: 0 0 .6em;
  /* Marcellus is a Roman serif with classical proportions - the negative
     tracking that suited the previous sans crowds it. */
  letter-spacing: 0;
}
h1, h2 { letter-spacing: .002em; }
/* Sizes must be set on the elements too - without these, Bootstrap's own
   h1-h6 sizing applied and produced five different H3 sizes on one page. */
h1 { font-size: var(--fs-h1); font-weight: 400; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); }

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

ul, ol { margin: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--line); opacity: 1; margin: 0; }

::selection { background: var(--accent-color); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  background: var(--primary-color);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 16px; color: #fff; }

/* Layout primitives ------------------------------------------------------- */
.container,
.container-lg { max-width: var(--container-max); padding-left: var(--container-pad); padding-right: var(--container-pad); }

.section { padding: var(--section-space) 0; position: relative; }
.section--tight { padding: var(--section-space) 0; }
.section--ivory { background: var(--ivory); }
.section--sand { background: var(--sand); }
.section--ink { background: var(--primary-color); color: var(--body-on-dark); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
/* ...but a light card sitting inside a dark section must not inherit that
   white, or its heading renders white-on-white. */
.section--ink :is(.form-card, .price-card, .developer-logo-card, .dev-stat,
                  .rera-panel, .amenity-tile, .floorplan-card, .masterplan-figure)
  :is(h1, h2, h3, h4, h5, h6) { color: var(--heading-color); }

/* A hairline that separates two same-colour sections. */
.section--hairline { border-top: 1px solid var(--line); }


/* ==========================================================================
   03. TYPOGRAPHY HELPERS
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 12px;
}
.eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--plain::before,
.eyebrow--plain::after { display: none; }
.section--ink .eyebrow { color: var(--accent-light); }

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: .5rem;
}
/* One highlight treatment for every section title. Half of them used
   .accent (gold) and half used <em> (grey, lighter weight), which read as
   two different components. Both now render identically and the gold flips
   light/dark with the section background. */
.section-title .accent,
.section-title em {
  font-style: normal;
  font-weight: inherit;
  color: var(--accent-dark);
}
.section--ink .section-title .accent,
.section--ink .section-title em,
.contact-section .section-title em { color: var(--accent-light); }

/* Bootstrap's .h1-.h6 utilities carry their own sizes, which sidestepped the
   scale above and produced four different H3 sizes on one page. */
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: -.012em;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
.h5 { font-size: var(--fs-base); }
.h6 { font-size: var(--fs-sm); }

.section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }

.rule {
  width: 68px;
  height: 2px;
  background: var(--accent-color);
  border: 0;
  margin: 22px 0 0;
}
.section-head--center .rule { margin-left: auto; margin-right: auto; }
/* Split-layout sections (overview, contact) carry the title in a text column
   rather than a centred .section-head. Same rule, left aligned, sitting under
   the title so the title component reads the same everywhere. */
.rule--left { margin: 18px 0 26px; }

/* Section prose. One size and one line-height everywhere - the page was
   running paragraphs at 17/28.05, 16/26.4, 14/23.1 and 14/21.7. */
.lead-text {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--body-color);
} 

.section--ink .lead-text { color: var(--body-on-dark); }

.muted { color: var(--body-muted); }
.text-gold { color: var(--accent-dark); }

/* Small uppercase label used inside cards and tables. */
.micro-label {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--body-muted);
  margin-bottom: 6px;
}
.section--ink .micro-label { color: var(--accent-light); }

/* Small print and eyebrows on a dark ground. .price-aside is a navy card that
   lives inside a light section, so it needs the same treatment as .section--ink
   even though it never gets that class. */
.section--ink .note,
.price-aside .note { color: var(--muted-on-dark); }
.price-aside .eyebrow,
.price-aside .micro-label { color: var(--accent-light); }

/* Cap the measure. Full-width prose was running to 186 characters a line,
   which is roughly twice a comfortable read. */
.note {
  /*max-width: 34rem; */     /* ~85 characters at this size */
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--body-muted);
}
.note.text-center,
.section-head--center .note { margin-left: auto; margin-right: auto; }


/* ==========================================================================
   04. BUTTONS & LINKS
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-color: var(--heading-color);
  --btn-border: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:focus-visible { outline-offset: 4px; }
.btn i { font-size: var(--fs-base); line-height: 0; }

.btn-gold {
  --btn-bg: var(--accent-color);
  --btn-color: #10192a;
  --btn-border: var(--accent-color);
}
.btn-gold:hover,
.btn-gold:focus-visible {
  /* --btn-bg: var(--accent-light);
  --btn-border: var(--accent-light); */
  
  background-color: white;
  border-color: #c6a15b;
  color: #725010;
}

.btn-ink {
  --btn-bg: var(--primary-color);
  --btn-color: #fff;
  --btn-border: var(--primary-color);
}
.btn-ink:hover { --btn-bg: var(--primary-soft); --btn-border: var(--primary-soft); color: #fff; }

.btn-outline-gold {
  --btn-color: var(--accent-dark);
  --btn-border: rgba(198, 161, 91, .55);
}
.btn-outline-gold:hover {
  --btn-bg: var(--accent-color);
  --btn-color: #10192a;
  --btn-border: var(--accent-color);
}

.btn-outline-light {
  --btn-color: #fff;
  --btn-border: rgba(255, 255, 255, .55);
}
.btn-outline-light:hover {
  /* --btn-bg: rgba(255, 255, 255, .1);
  --btn-border: #fff;
  color: #fff; */
  background-color: white;
  border-color: #c6a15b;
  color: #725010;
}

.btn-outline-ink {
  --btn-color: var(--heading-color);
  --btn-border: rgba(16, 25, 42, .25);
}
.btn-outline-ink:hover { --btn-bg: var(--primary-color); --btn-color: #fff; --btn-border: var(--primary-color); }

.btn-sm { min-height: 44px; padding: 11px 22px; font-size: var(--fs-2xs); }
.btn-block { width: 100%; }

/* Text link with an animated gold underline. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--accent-dark);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(198, 161, 91, .4);
}
.link-arrow i { transition: transform .35s var(--ease); }
.link-arrow:hover i { transform: translateX(5px); }


/* ==========================================================================
   05. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(7, 17, 32, .58), rgba(7, 17, 32, 0));
  transition: background .4s var(--ease), height .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-stuck {
  height: var(--header-h-sm);
  /* Solid fill rather than a backdrop-filter: a blurred fixed header is a
     known repaint cost on mobile Safari and adds nothing at 96% opacity. */
  background: #091422;
  box-shadow: 0 10px 34px rgba(7, 17, 32, .28);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: auto; width: 280px; transition: height .4s var(--ease);filter: invert(1) brightness(5.5); }
.site-header.is-stuck .brand img { height: 38px; }

.primary-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.primary-nav .nav-link {
  position: relative;
  padding: 10px 0;
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  transition: color .3s var(--ease);
}
.primary-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent-color);
  transition: width .35s var(--ease);
}
.primary-nav .nav-link:hover,
.primary-nav .nav-link.is-active { color: #fff; }
.primary-nav .nav-link:hover::after,
.primary-nav .nav-link.is-active::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: #fff;
  white-space: nowrap;
}
.header-phone i { color: var(--accent-color); }

.nav-toggle {
  width: 46px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--radius-xs);
  color: #fff;
  font-size: var(--fs-xl);
  cursor: pointer;
}

/* Off-canvas mobile navigation ------------------------------------------- */
.mobile-nav {
  background: var(--primary-color);
  color: #fff;
  width: min(340px, 86vw);
}
.mobile-nav .offcanvas-header { padding: 20px 24px; border-bottom: 1px solid var(--line-dark); }
.mobile-nav .btn-close { filter: invert(1) grayscale(1); opacity: .8; }
.mobile-nav .offcanvas-body { padding: 10px 24px 32px; display: flex; flex-direction: column; }
.mobile-nav .nav-link {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-dark);
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
}
.mobile-nav .nav-link.is-active { color: var(--accent-light); }
.mobile-nav .mobile-nav__foot { margin-top: 28px; display: grid; gap: 12px; }


/* ==========================================================================
   06. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: clamp(600px, 96vh, 940px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 24px) 0 clamp(72px, 10vh, 120px);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* The banner is a Bootstrap carousel, so the hero's full height has to be
   handed down every level of its markup. Bootstrap leaves .carousel-inner and
   .carousel-item at auto height, and <picture> is inline by default — break
   the chain anywhere and the img's height:100% falls back to auto, the image
   renders at its own 2.02:1 ratio, object-fit:cover stops doing anything, and
   a strip of bare hero shows below the banner. */
.hero__media .carousel,
.hero__media .carousel-inner,
.hero__media .carousel-item {
  width: 100%;
  height: 100%;
}
.hero__media picture {
  display: block;
  height: 100%;
}

/* Directional scrim: keeps the left-hand copy readable without flattening
   the whole image (reference sites over-darken; this stays lighter). */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 17, 32, .88) 0%, rgba(7, 17, 32, .62) 38%, rgba(7, 17, 32, .12) 72%, rgba(7, 17, 32, .38) 100%),
    linear-gradient(to top, rgba(7, 17, 32, .72) 0%, rgba(7, 17, 32, 0) 45%);
}

.hero__content { max-width: 760px; color: #fff; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 8px;
}
.hero__eyebrow::before {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--accent-color);
}

.hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 400;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: .002em;
}
.hero__title .hero__place {
  display: block;
  /* Was italic - faux-oblique with no italic face loaded. Reads as a
     sub-line through size, weight and colour instead. */
  font-size: .3em;
  font-style: normal;
  font-weight: 400;
  color: var(--accent-light);
  letter-spacing: .01em;
  margin-top: 12px;
}

.hero__tagline {
  font-size: clamp(.86rem, .8rem + .3vw, 1rem);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  margin: 20px 0 0;
}

/* Price block — the number buyers scan for, so it is the largest element in
   the hero after the project name itself. */
.hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(26px, 3.4vw, 24px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.hero__price-main .micro-label { color: var(--accent-light); margin-bottom: 4px; }
.hero__price-value {
  font-family: var(--font-numeric);
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}
.hero__price-value sup {
  font-size: .3em;
  top: -1.35em;
  margin-left: .06em;
  color: var(--accent-light);
}
.hero__price-facts {
  display: grid;
  gap: 12px;
  padding-right: clamp(20px, 1.5vw, 44px);
  border-right: 1px solid rgba(255, 255, 255, .2);
}
.hero__price-facts p { margin: 0; }
.hero__price-facts strong {
  display: block;
  font-family: var(--font-numeric);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.hero__price-facts span {
  font-size: var(--fs-3xs);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.hero__price-foot {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: var(--fs-2xs);
  line-height: 1.65;
  color: rgba(255, 255, 255, .58);
}
.hero__price-foot sup,
.hero__price-foot span[aria-hidden] { color: var(--accent-light); }

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 26px 0 0;
}
.hero__chips li {
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(4px);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: #fff;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* Location chip over the foot of the image — stacked mobile hero only. */
.hero__locale {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .01em;
}
.hero__locale i { color: var(--accent-color); font-size: var(--fs-base); }



/* ==========================================================================
   07. QUICK HIGHLIGHTS
   ========================================================================== */
.highlights { background: var(--primary-color); }
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line-dark);
}
.highlight-card {
  padding: clamp(24px, 2.4vw, 38px) clamp(14px, 1.6vw, 26px);
  text-align: center;
  border-right: 1px solid var(--line-dark);
  transition: background .4s var(--ease);
}
.highlight-card:last-child { border-right: 0; }
.highlight-card:hover { background: rgba(255, 255, 255, .04); }
.highlight-card i {
  font-size: var(--fs-h3);
  color: var(--accent-color);
  display: block;
  margin-bottom: 14px;
}
.highlight-card__value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 6px;
}
.highlight-card__value .unit { font-size: var(--fs-2xs); letter-spacing: .04em; }
.highlight-card__label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin: 0;
}


/* ==========================================================================
   08. OVERVIEW + AT A GLANCE
   ========================================================================== */
.overview-media { position: relative; padding: 0 0 clamp(48px, 7vw, 92px) 0; }
.overview-media__primary {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  width: 88%;
}
.overview-media__secondary {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 8px solid #fff;
  box-shadow: var(--shadow-md);
}
.overview-media img { width: 100%; height: 100%; object-fit: cover; }

.overview-btn-group { flex-wrap: none !important; }

.overview-contact {
  display: flex;
  align-items: center;
  gap: 16px;
  /*padding-left: 26px;*/
  /*border-left: 1px solid var(--line);*/
}
.overview-contact__icon {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--accent-color);
  font-size: var(--fs-lg);
}
.overview-contact__value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.2;
}

/* At-a-glance specification grid (ref: Trilogy "Project Overview") -------- */
.glance {
  border: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.glance__item {
  padding: clamp(20px, 2vw, 30px) clamp(20px, 2.2vw, 34px);
  border-bottom: 1px solid var(--line-dark);
  border-right: 1px solid var(--line-dark);
}
.glance__item:nth-child(2n) { border-right: 0; }
.glance__item:nth-last-child(-n+2) { border-bottom: 0; }
.glance__value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}


/* ==========================================================================
   09. CONFIGURATION & PRICING
   ========================================================================== */
.price-table-wrap {
  /*overflow-x: auto;*/
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.price-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  margin: 0;
}
.price-table thead th {
  background: var(--primary-color);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 18px 24px;
  text-align: left;
  white-space: nowrap;
}
.price-table tbody td {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr { transition: background .3s var(--ease); }
.price-table tbody tr:hover { background: var(--ivory); }
.price-table .config-name {
  font-family: var(--font-numeric);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--heading-color);
  display: block;
  line-height: 1.25;
}
.price-table .config-note { font-size: var(--fs-2xs); color: var(--body-muted); }
.price-table .price-value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--accent-dark);
}
.price-table td:last-child { text-align: right; white-space: nowrap; }

/* Eight configurations made this block run the height of the screen. Cap it
   at roughly five rows and let the rest scroll; the header row stays pinned
   so the columns are still labelled while scrolling. Tables with five rows
   or fewer never reach the cap, so no scrollbar appears. Below 768px the
   table is swapped for .price-cards, so this is desktop-only. */
@media (min-width: 768px) {
  .price-table-wrap {
    max-height: 500px;
    /*overflow-y: auto;*/
    /*overflow-x: auto;*/
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dark, #b08d57) rgba(0, 0, 0, .06);
  }
  .price-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
  .price-table-wrap::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); }
  .price-table-wrap::-webkit-scrollbar-thumb { background: var(--accent-dark, #b08d57); border-radius: 999px; }
  .price-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--primary-color, #8a6d3b); }
  .price-table thead th { position: sticky; top: 0; z-index: 2; }
}

/* Mobile card view of the same data (table is hidden below md). */
.price-cards { display: none; }
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 24px;
  margin-bottom: 16px;
}
.price-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.price-card__row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: var(--fs-sm); }
.price-card__row dt { color: var(--body-muted); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; }
.price-card__row dd { margin: 0; font-weight: 500; color: var(--heading-color); text-align: right; }

.price-aside {
  background: var(--primary-color);
  color: var(--body-on-dark);
  border-radius: var(--radius-sm);
  padding: clamp(28px, 3vw, 40px);
  height: 100%;
}
.price-aside__list { list-style: none; margin: 22px 0 0; }
.price-aside__list li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: var(--fs-sm);
}
.price-aside__list li:last-child { border-bottom: 0; }
.price-aside__list i { color: var(--accent-color); margin-top: 4px; flex: none; }


/* ==========================================================================
   10. AMENITIES
   ========================================================================== */
.amenity-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 42px;
  border: 0;
}
.amenity-nav .nav-link {
  padding: 11px 24px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  color: var(--body-color);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  transition: all .35s var(--ease);
}
.amenity-nav .nav-link:hover { border-color: var(--accent-color); color: var(--accent-dark); }
.amenity-nav .nav-link.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.amenity-grid {
  /*display: grid;*/
  /*grid-template-columns: repeat(5, 1fr);*/
  gap: 16px;
  
    display: flex;  
    justify-content: center;
}
.amenity-tile {
    width: 19%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 28px 16px 24px;
  text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.amenity-tile:hover {
  transform: translateY(-5px);
  border-color: rgba(198, 161, 91, .55);
  box-shadow: var(--shadow-sm);
}
.amenity-tile i {
  font-size: 1.55rem;
  color: var(--accent-dark);
  display: block;
  margin-bottom: 14px;
}
.amenity-tile span {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--heading-color);
  letter-spacing: .01em;
}

.amenity-banner {
  position: relative;
  margin-top: clamp(40px, 5vw, 68px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: none;
}
.amenity-banner img { width: 100%; height: clamp(240px, 32vw, 400px); object-fit: cover; }
.amenity-banner__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(24px, 4vw, 48px);
  background: linear-gradient(to top, rgba(7, 17, 32, .88), rgba(7, 17, 32, 0));
  color: #fff;
}
.amenity-banner__caption h3 { color: #fff; margin-bottom: 6px; }
.amenity-banner__caption p { color: rgba(255, 255, 255, .78); max-width: 620px; margin: 0; font-size: var(--fs-base); line-height: var(--lh-body); }


/* ==========================================================================
   11. GALLERY + LIGHTBOX
   ========================================================================== */
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 38px;
}
.gallery-filter button {
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--body-color);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  cursor: pointer;
  transition: all .35s var(--ease);
}
.gallery-filter button:hover { border-color: var(--accent-color); color: var(--accent-dark); }
.gallery-filter button.is-active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--sand);
  cursor: zoom-in;
  border: 0;
  padding: 0;
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
}
.gallery-item--tall { grid-row: span 2; aspect-ratio: 4 / 6.2; }
.gallery-item--wide { grid-column: span 2; aspect-ratio: 8 / 2.90; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item .gallery-caption {
  display: block;
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 18px 16px;
  background: linear-gradient(to top, rgba(7, 17, 32, .86), rgba(7, 17, 32, 0));
  color: #fff;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery-item:hover .gallery-caption,
.gallery-item:focus-visible .gallery-caption { opacity: 1; transform: none; }
.gallery-item::after {
  content: "\F4A5"; /* bootstrap-icons: zoom-in */
  font-family: "bootstrap-icons";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--primary-color);
  font-size: var(--fs-base);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gallery-item:hover::after,
.gallery-item:focus-visible::after { opacity: 1; transform: none; }
.gallery-item.is-hidden { display: none; }

/* Lightbox ---------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(5, 12, 22, .95);
}
.lightbox.is-open { display: flex; }
.lightbox__figure { margin: 0; max-width: 1100px; width: 100%; text-align: center; }
.lightbox__figure img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox__figure figcaption {
  margin-top: 16px;
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
}
.lightbox__btn {
  position: absolute;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.lightbox__close { top: clamp(14px, 3vw, 32px); right: clamp(14px, 3vw, 32px); }
.lightbox__prev { left: clamp(10px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(10px, 3vw, 34px); top: 50%; transform: translateY(-50%); }


/* ==========================================================================
   12. MASTER PLAN + FLOOR PLANS
   ========================================================================== */
.masterplan-figure {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  margin: 0;
}
.masterplan-figure img { width: 100%; height: auto; }
.masterplan-figure__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .92);
  color: var(--primary-color);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
}

/* Icon list beside the master plan (doc reference: master plan left /
   icon points right, replacing plain bullets). */
.plan-points { list-style: none; display: grid; gap: 4px; }
.plan-points li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.plan-points li:last-child { border-bottom: 0; }
.plan-points i {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--accent-dark);
  font-size: var(--fs-lg);
}
.plan-points strong { display: block; color: var(--heading-color); font-weight: 500; font-size: var(--fs-base); }
.plan-points span { font-size: var(--fs-xs); color: var(--body-muted); }

.plan-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; border: 0; }
.plan-nav .nav-link {
  padding: 12px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: #fff;
  color: var(--body-color);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
}
.plan-nav .nav-link.active { background: var(--accent-color); border-color: var(--accent-color); color: #10192a; }

.floorplan-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.floorplan-card:hover { box-shadow: var(--shadow-md); border-color: rgba(198, 161, 91, .5); }
.floorplan-card__media {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--ivory);
  overflow: hidden;
}
.floorplan-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px) saturate(.6);
  transform: scale(1.06);
}
/* Gated preview: the plan drawing is blurred, but every fact about the unit
   stays as readable HTML text below (never hidden behind the form). */
.floorplan-card__lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: rgba(12, 26, 43, .42);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .4s var(--ease);
}
.floorplan-card__lock i { font-size: var(--fs-h3); color: var(--accent-light); }
.floorplan-card__lock:hover { background: rgba(12, 26, 43, .6); }
.floorplan-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.floorplan-card__title { font-size: var(--fs-xl); margin: 0 0 2px; }
.floorplan-card__area { font-size: var(--fs-sm); color: var(--accent-dark); font-weight: 500; }
.floorplan-card__desc { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body-muted); margin: 8px 0 18px; }
.floorplan-card__body .btn { margin-top: auto; }


/* ==========================================================================
   13. LOCATION & CONNECTIVITY
   ========================================================================== */
.map-frame {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  height: 100%;
  min-height: 340px;
    pointer-events: none;
}
.map-frame img { width: 100%; height: 100%; object-fit: cover; }
.map-frame__address {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 18px 22px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--shadow-sm);
}
.map-frame__address p { margin: 0; font-size: var(--fs-sm); color: var(--heading-color); line-height: var(--lh-body); }

.connect-nav { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin-bottom: 26px; }
.connect-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  color: var(--body-color);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.connect-nav .nav-link.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.connect-nav .nav-link i { font-size: var(--fs-base); }

.connect-list {
  list-style: none;
  /* ~6 rows tall; taller lists scroll instead of stretching the column */
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dark, #b08d57) rgba(0, 0, 0, .06);
}
.connect-list::-webkit-scrollbar { width: 6px; }
.connect-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); border-radius: 999px; }
.connect-list::-webkit-scrollbar-thumb {
  background: var(--accent-dark, #b08d57);
  border-radius: 999px;
}
.connect-list::-webkit-scrollbar-thumb:hover { background: var(--primary-color, #8a6d3b); }

/* Mobile: the list already scrolls here, but touch browsers draw overlay
   scrollbars that fade out at rest — and iOS ignores ::-webkit-scrollbar
   altogether — so nothing signalled it. Tighten the cap to ~6 of the shorter
   mobile rows and paint scroll shadows: the sand-coloured covers scroll with
   the content (attachment: local) while the shadows stay pinned to the box
   (attachment: scroll), so a soft edge shows only while there is more list in
   that direction, and it clears itself at the top and bottom. Where a real
   scrollbar is supported it still rides on top of this. */
@media (max-width: 767.98px) {
  .connect-list {
    max-height: 294px;
    padding-right: 12px;
    background:
      linear-gradient(var(--sand) 30%, rgba(239, 233, 221, 0)) 0 0 / 100% 34px no-repeat local,
      linear-gradient(rgba(239, 233, 221, 0), var(--sand) 70%) 0 100% / 100% 34px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(16, 25, 42, .16), rgba(16, 25, 42, 0)) 0 0 / 100% 12px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(16, 25, 42, .16), rgba(16, 25, 42, 0)) 0 100% / 100% 12px no-repeat scroll;
  }
  .connect-list::-webkit-scrollbar { -webkit-appearance: none; width: 5px; }
  .brand img { height: auto; width: 220px; }
  .hero__price-value{
    font-size:30px;
  }
}

.connect-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.connect-list li:last-child { border-bottom: 0; }
.connect-list .place { font-size: var(--fs-base); color: var(--heading-color); }
.connect-list .distance {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--accent-dark);
  white-space: nowrap;
}


/* ==========================================================================
   14. WHY CONSIDER / ADVANTAGES
   ========================================================================== */
.advantage-card {
  position: relative;
  height: 100%;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.advantage-card:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(198, 161, 91, .45);
  transform: translateY(-4px);
}
.advantage-card__num {
  font-family: var(--font-numeric);
  font-size: 2.1rem;
  font-weight: 700;
  color: rgba(198, 161, 91, .55);
  line-height: 1;
  display: block;
  margin-bottom: 18px;
}
.advantage-card h3 { font-size: var(--fs-xl); color: #fff; margin-bottom: 10px; }
.advantage-card p { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body-on-dark); margin: 0; }


/* ==========================================================================
   15. DEVELOPER
   ========================================================================== */
.developer-logo-card {
  display: grid;
  place-items: center;
  padding: clamp(34px, 4vw, 56px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: 260px;
}
.developer-logo-card img { max-width: 240px; width: 100%; }

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  font-size: var(--fs-2xs);
  letter-spacing: .05em;
  color: var(--body-color);
}
.badge-chip i { color: var(--accent-dark); }

.dev-stat {
  padding: 26px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  height: 100%;
}
.dev-stat i { font-size: var(--fs-xl); color: var(--accent-dark); display: block; margin-bottom: 12px; }
.dev-stat__value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-stat);
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.1;
  margin: 0 0 6px;
}
.dev-stat__label { font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--body-muted); margin: 0; }


/* ==========================================================================
   16. RERA
   ========================================================================== */
.rera-panel {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(28px, 3.4vw, 48px);
}
.rera-list { list-style: none; display: grid; gap: 2px; }
.rera-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.rera-list li:last-child { border-bottom: 0; }
.rera-list dt,
.rera-list .key {
  min-width: 190px;
  color: var(--body-muted);
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rera-list .value { color: var(--heading-color); font-weight: 500; word-break: break-word; }

.rera-qr {
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--body-muted);
  font-size: var(--fs-3xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
}


/* ==========================================================================
   17. FAQ
   ========================================================================== */
.faq-accordion .accordion-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm) !important;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-accordion .accordion-button {
  padding: 22px 26px;
  background: #fff;
  color: var(--heading-color);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.4;
  box-shadow: none;
}
.faq-accordion .accordion-button:not(.collapsed) { background: var(--ivory); color: var(--heading-color); }
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-accordion .accordion-button::after {
  width: 1rem;
  height: 1rem;
  background-size: 1rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a3803f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
.faq-accordion .accordion-body {
  /*max-width: 40rem;*/
  padding: 0 26px 24px;
  background: var(--ivory);
  color: var(--body-color);
  font-size: var(--fs-base);
}


/* ==========================================================================
   18. ENQUIRY / CONTACT
   ========================================================================== */
.contact-section { position: relative; background: var(--primary-color); overflow: hidden; }
.contact-section__bg {
  position: absolute;
  inset: 0;
  opacity: .22;
}
.contact-section__bg img { width: 100%; height: 100%; object-fit: cover; }
.contact-section > .container { position: relative; z-index: 1; }

.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 26px; }
.btn-whatsapp {
  --btn-bg: #25d366;
  --btn-color: #06331a;
  --btn-border: #25d366;
}
.btn-whatsapp:hover { --btn-bg: #1fb857; --btn-border: #1fb857; color: #06331a; }

.contact-address {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--body-on-dark);
}
.contact-address i { color: var(--accent-color); font-size: var(--fs-lg); margin-top: 2px; }

.contact-disclaimer {
  max-width: 34rem;
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  line-height: 1.7;
  color: var(--muted-on-dark);
}

.form-card {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: clamp(28px, 3vw, 42px);
  box-shadow: var(--shadow-lg);
}
.form-card h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
.form-card__intro { font-size: var(--fs-sm); color: var(--body-muted); margin-bottom: 26px; }


/* ==========================================================================
   19. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--primary-dark);
  color: var(--body-on-dark);
  padding: clamp(56px, 6vw, 86px) 0 0;
  font-size: var(--fs-sm);
}
.site-footer h2, .site-footer h3 { color: #fff; }
.footer-brand img { height: 42px; width: auto; margin-bottom: 20px; filter: invert(1) brightness(5.5); }
.footer-title {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 20px;
}
.footer-links { list-style: none; display: grid; gap: 11px; }
.footer-links a { color: var(--body-on-dark); font-size: var(--fs-sm); }
.footer-links a:hover { color: var(--accent-light); }

.footer-rera {
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  color: var(--muted-on-dark);
}

/* HTML sitemap block (reference: "Explore Other Premium Projects"). Kept
   deliberately short — only genuinely related project links belong here. */
.sitemap-block { margin-top: clamp(40px, 5vw, 64px); padding-top: 36px; border-top: 1px solid var(--line-dark); }
.sitemap-group + .sitemap-group { margin-top: 26px; }
.sitemap-group__title {
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: 14px;
}
.sitemap-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.sitemap-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--body-on-dark);
  font-size: var(--fs-xs);
}
.sitemap-links a::before { content: "\203A"; color: var(--accent-color); }
.sitemap-links a:hover { color: var(--accent-light); }

.footer-disclaimer {
  /*max-width: 36rem;*/      /* legal text still wants a readable measure */
  margin-top: clamp(38px, 4vw, 58px);
  padding: 26px 0;
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-2xs);
  line-height: 1.75;
  color: var(--muted-on-dark);
}
.footer-bottom {
  padding: 20px 0 26px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-xs);
  color: var(--muted-on-dark);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-bottom a { color: var(--muted-on-dark); }
.footer-bottom a:hover { color: var(--accent-light); }


/* ==========================================================================
   20. FLOATING & STICKY UI
   ========================================================================== */
.float-actions {
  position: fixed;
  left: 18px;
  bottom: 24px;
  z-index: 1020;
  display: grid;
  gap: 10px;
}
.float-actions a {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: var(--fs-lg);
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease);
}
.float-actions a:hover { transform: translateY(-3px); color: #fff; }
.float-actions .float-wa { background: #25d366; color: #06331a; }
.float-actions .float-wa:hover { color: #06331a; }

.to-top {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 1020;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--primary-color);
  font-size: var(--fs-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .35s var(--ease);
  box-shadow: var(--shadow-sm);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* Mobile sticky action bar ------------------------------------------------ */
.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1025;
  display: none;
  height: var(--mobile-bar-h);
  background: var(--primary-color);
  border-top: 1px solid var(--line-dark);
}
.mobile-bar a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  font-size: var(--fs-3xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-right: 1px solid var(--line-dark);
}
.mobile-bar a:last-child { border-right: 0; }
.mobile-bar a i { font-size: var(--fs-lg); }
.mobile-bar .mobile-bar__cta { background: var(--accent-color); color: #10192a; }


/* ==========================================================================
   21. MODAL + FORMS
   ========================================================================== */
/* The modal is the single highest-value surface on the page, so it gets the
   full brand treatment: lit navy head, gold hairline, logo, and a measure
   narrow enough that the two-column fields read as a pair rather than as two
   stranded inputs. modal-lg's 800px was far too wide for six short fields. */
.enquiry-modal .modal-dialog { max-width: 620px; }

.enquiry-modal .modal-content {
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Short laptop windows were clipping the head off the top of a centred
     modal. Cap the card and let the form scroll inside it instead. */
  max-height: calc(100vh - 3.5rem);
}

/* A little more travel than Bootstrap's default drop, plus a settle. */
.enquiry-modal.fade .modal-dialog {
  transform: translateY(24px) scale(.97);
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.enquiry-modal.show .modal-dialog { transform: none; }

.enquiry-modal .modal-header {
  position: relative;
  display: block;
  border: 0;
  padding:24px 34px 24px;
  color: #fff;
  background:
    radial-gradient(125% 150% at 88% 0%,
      var(--primary-soft) 0%, var(--primary-color) 55%, var(--primary-dark) 100%);
}
.enquiry-modal .modal-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-color) 0%, rgba(198, 161, 91, 0) 72%);
}

.enquiry-modal__logo {
  display: block;
  width: 186px;
  height: auto;
  margin-bottom: 22px;
}

.enquiry-modal .modal-header .eyebrow { color: var(--accent-light); margin-bottom: 10px; }

.enquiry-modal .modal-title {
  color: #fff;
  font-size: var(--fs-h3);
  line-height: 1.25;
  /* initEnquiryContext swaps in CTA-specific headings ("Get the 4 BHK Sea
     Suite cost sheet"), so the title has to wrap cleanly and clear the
     close button rather than assume the default string. */
  max-width: 32ch;
  padding-right: 48px;
  margin: 0;
  text-wrap: balance;
}
/* Capped at 46ch the last line was orphaning a single word; balance splits the
   sentence evenly instead, and the cap stays as the fallback measure. */
.enquiry-modal .modal-header p.js-modal-intro {
  max-width: 46ch;
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--body-on-dark);
  text-wrap: balance;
}

/* Bootstrap's close is a 16px sprite with no visible target. Give it a real
   one — and paint the glyph white directly rather than inverting the button,
   because a filter would swallow the circle behind it too. */
.enquiry-modal .btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  opacity: 1;
  filter: none;
  background-color: rgba(255, 255, 255, .1);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 13px;
  transition: background-color .3s var(--ease);
}
/* Bootstrap's own :hover/:focus rules dim the button back to .75 and paint a
   blue ring, so both states have to be answered explicitly. */
.enquiry-modal .btn-close:hover,
.enquiry-modal .btn-close:focus,
.enquiry-modal .btn-close:focus-visible {
  opacity: 1;
  background-color: rgba(198, 161, 91, .85);
}
.enquiry-modal .btn-close:focus { box-shadow: none; }
.enquiry-modal .btn-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(198, 161, 91, .45);
}

/* Padding-bottom is short of the top because the empty .form-status row still
   carries a g-3 gutter underneath the button.
   The body scrolls only on windows too short to hold the form, and there the
   platform scrollbar lands as a heavy grey slab down the middle of the card.
   Keep the scrolling — wheel, touch, and tab-through all still work — and drop
   the chrome. Hiding it also hands back the ~15px of width it reserved. */
.enquiry-modal .modal-body {
  padding: 30px 34px 16px;
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge */
  /* Scroll shadows stand in for the hidden bar. The two `local` layers are
     white covers that ride with the content; the two `scroll` layers are fixed
     shadows underneath. At the top of the scroll range the cover hides the
     shadow, so each edge only darkens when there is more form past it. */
  background:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 26px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(16, 25, 42, .18), rgba(16, 25, 42, 0)) top / 100% 14px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(16, 25, 42, .18), rgba(16, 25, 42, 0)) bottom / 100% 14px no-repeat scroll,
    #fff;
}
.enquiry-modal .modal-body::-webkit-scrollbar { width: 0; height: 0; }

/* The status paragraph is empty until a submit, but its .col-12 still spends a
   g-3 gutter under the button. Reclaim it until there's something to say. */
.enquiry-modal .modal-body > .row > .col-12:has(> .form-status:empty) { display: none; }

/* Consent is a different kind of question from the fields above it — give it
   a rule and some air so nobody ticks it without seeing it. */
.enquiry-modal .form-check {
    /* margin-top: 6px; */
    padding-top: 20px;
    border-top: 1px solid var(--line);
    line-height: normal;
}
.enquiry-modal .btn-gold { height:44px; min-height: inherit; }

.enquiry-modal .modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 34px;
  background: var(--ivory);
  border-top: 1px solid var(--line);
}
.enquiry-modal .modal-footer > * { margin: 0; }
.enquiry-modal .modal-footer p { font-size: var(--fs-2xs); color: var(--body-muted); }
.enquiry-modal .modal-footer i { margin-right: 6px; color: var(--accent-dark); }
.enquiry-modal .modal-footer a { color: var(--accent-dark); font-weight: 600; white-space: nowrap; }

/* The white card needs a darker ground to sit on than Bootstrap's default. */
.modal-backdrop.show { opacity: .72; }

/* The head is fixed chrome above a scrolling form, so every pixel it spends is
   a pixel the Submit button loses. On a phone, and on any short window, drop
   the eyebrow and tighten the logo so the CTA stays above the fold. The title
   and intro stay — they carry the CTA-specific context. */
@media (max-width: 575.98px) {
  .enquiry-modal .modal-content { max-height: calc(100vh - 1rem); width: 95%; margin: auto;  }
  .enquiry-modal .modal-header { padding: 22px 22px 20px; }
  .enquiry-modal .modal-body { padding: 22px 22px 12px; }
  .enquiry-modal .modal-footer { padding: 13px 22px; }
  .enquiry-modal__logo { width: 132px; margin-bottom: 14px; }
  .enquiry-modal .modal-header .eyebrow { display: none; }
  .enquiry-modal .modal-title {padding-right: 30px;font-size:16px;}
  .enquiry-modal .modal-header p.js-modal-intro {margin-top: 8px;font-size: var(--fs-2xs);max-width: max-content;}
  .enquiry-modal .btn-close { top: 12px; right: 12px; width: 36px; height: 36px; }
  .form-label{display:none;}  
  /* .lead-text { mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); } */
   .ps-lg-4.is-revealed:has(.readmore.readmore--always.is-open) .lead-text {
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }
}

@media (max-height: 720px) {
  .enquiry-modal .modal-header { padding-top: 22px; padding-bottom: 20px; }
  .enquiry-modal__logo { width: 140px; margin-bottom: 12px; }
  .enquiry-modal .modal-header .eyebrow { display: none; }
  .enquiry-modal .modal-body { padding-top: 22px; }
}

/* Half-height laptop windows. The intro goes too — by this point the title is
   carrying the CTA context on its own and the button has to stay in view.
   Bootstrap's 1.75rem dialog margin is also too expensive here; trading it for
   .75rem buys back a full row of the form. */
@media (max-height: 620px) {
  .enquiry-modal .modal-dialog { --bs-modal-margin: .75rem; }
  .enquiry-modal .modal-content { max-height: calc(100vh - 1.5rem);}
  .enquiry-modal .modal-header { padding-top: 18px; padding-bottom: 16px; }
  .enquiry-modal__logo { width: 124px; margin-bottom: 8px; }
  .enquiry-modal .modal-header p.js-modal-intro { display: none; }
  .enquiry-modal .modal-body { padding-top: 16px; padding-bottom: 10px; }
  .enquiry-modal .modal-body .row { --bs-gutter-y: .75rem; }
  .enquiry-modal .form-check { padding-top: 12px; }
  .enquiry-modal .btn-gold { height: 38px; }
  .enquiry-modal .modal-footer { padding-top: 12px; padding-bottom: 12px; }
}

/* Landscape phones and heavily shrunk windows. Everything that is not a field
   or the button goes, because a clipped CTA costs more than a logo does. */
@media (max-height: 520px) {
  .enquiry-modal__logo { display: none; }
  .enquiry-modal .modal-header { padding-top: 16px; padding-bottom: 14px; }
  .enquiry-modal .modal-footer { display: none; }
  .enquiry-modal .form-label { margin-bottom: 5px; }
  .enquiry-modal .form-control,
  .enquiry-modal .form-select { height: 38px; padding-top: 10px; padding-bottom: 10px; }
}

.form-label {
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--body-muted);
  margin-bottom: 8px;
}
.form-control,
.form-select {
  height: 44px;
  /*padding: 13px 16px;*/
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background-color: var(--ivory);
  color: var(--heading-color);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  box-shadow: none;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.form-control::placeholder { color: #adb4be; }
.form-control:focus,
.form-select:focus {
  border-color: var(--accent-color);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(198, 161, 91, .16);
}
.form-control.is-invalid,
.form-select.is-invalid { border-color: #c0392b; background-image: none; }
.invalid-feedback { font-size: var(--fs-2xs); }

.form-consent { font-size: var(--fs-3xs); color: var(--body-muted); line-height: 1.3; }
.form-consent a { text-decoration: underline; }
.form-check-input:checked { background-color: var(--accent-dark); border-color: var(--accent-dark); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(198, 161, 91, .18); border-color: var(--accent-color); }

.form-status {
  display: none; 
  padding:8px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
}
.form-status.is-success { display: block; background: rgba(37, 160, 96, .1); color: #1c7c48; border: 1px solid rgba(37, 160, 96, .3); }
.form-status.is-error { display: block; background: rgba(192, 57, 43, .08); color: #a5342a; border: 1px solid rgba(192, 57, 43, .28); }
/* Shown while the lead is in flight to send_email.php. */
.form-status.is-busy { display: block; background: var(--sand); color: var(--body-color); border: 1px solid var(--line); }


/* ==========================================================================
   22. MOTION & REVEAL
   ========================================================================== */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.has-js [data-reveal].is-revealed { opacity: 1; transform: none; }
.has-js [data-reveal][data-reveal-delay="1"] { transition-delay: .1s; }
.has-js [data-reveal][data-reveal-delay="2"] { transition-delay: .2s; }
.has-js [data-reveal][data-reveal-delay="3"] { transition-delay: .3s; }
.has-js [data-reveal][data-reveal-delay="4"] { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .has-js [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   23. MOBILE CAROUSELS + READ MORE
   Both are mobile-only patterns. On desktop the grid and the full copy show
   as before, so nothing here affects the large-screen layout.
   ========================================================================== */

/* Read more --------------------------------------------------------------- */
.readmore__toggle {
  display: inline;
  align-items: center;
  gap: 8px;
  min-height: 44px;                /* touch target */
  margin-top: 0px;
  padding: 8px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(198, 161, 91, .5);
  color: var(--accent-dark);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  cursor: pointer;
}
.readmore__toggle::after {
  content: "\F282";                 /* bootstrap-icons chevron-down */
  font-family: "bootstrap-icons";
  font-size: var(--fs-xs);
  line-height: 0;
  transition: transform .3s var(--ease);
}
.readmore.is-open .readmore__toggle::after { transform: rotate(180deg); }

/* Light variant wherever the collapsible sits on a dark ground. */
.section--ink .readmore__toggle,
.site-footer .readmore__toggle {
  color: var(--accent-light);
  border-bottom-color: rgba(226, 197, 140, .45);
}

.footer-disclaimer .readmore:not(.is-open) .readmore__body{
    max-height: 3.5em;
    overflow: hidden;
    
}
/* Carousel ---------------------------------------------------------------- */
.carousel-dots {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.carousel-dots button {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 25, 42, .22);
  cursor: pointer;
  transition: background .3s var(--ease), width .3s var(--ease);
}
/* A 7px dot is too small to tap. Expand the hit area without changing what
   is drawn. Swiping remains the primary way to move the rail, so the dots
   are a convenience rather than the only route. */
.carousel-dots button::after {
  content: "";
  position: absolute;
  inset: -14px -6px;
}
.carousel-dots button.is-active { width: 20px; border-radius: 4px; background: var(--accent-dark); }
.section--ink .carousel-dots button { background: rgba(255, 255, 255, .28); }
.section--ink .carousel-dots button.is-active { background: var(--accent-color); }


/* Floor-plan slider ------------------------------------------------------
   The "All" tab lists every configuration, which stacked into several rows
   of cards and swallowed the viewport. From 768px up the rail scrolls
   sideways instead; the arrows are added by JS and only revealed when the
   rail actually overflows (i.e. more cards than fit in one view). Below
   768px the mobile carousel above already handles this rail. */
.plan-slider__arrow {
  display: none;
  position: absolute;
  top: 33%;
  z-index: 3;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--accent-dark);
  font-size: var(--fs-lg);
  line-height: 1;
  box-shadow: 0 6px 18px rgba(16, 25, 42, .14);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.plan-slider__arrow--prev { left: 6px; }
.plan-slider__arrow--next { right: 6px; }
.plan-slider__arrow:hover { background: var(--accent-dark); color: #fff; }
.plan-slider__arrow[disabled] { opacity: .35; cursor: default; }
.plan-slider__arrow[disabled]:hover { background: #fff; color: var(--accent-dark); }

@media (min-width: 768px) {
  .plan-slider { position: relative; }
  .plan-slider [data-carousel="plans"] {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 6px;          /* room for the card hover shadow */
  }
  .plan-slider [data-carousel="plans"]::-webkit-scrollbar { display: none; }
  .plan-slider [data-carousel="plans"] > [class*="col-"] { scroll-snap-align: start; }
  .plan-slider.has-slider .plan-slider__arrow { display: inline-flex; }
}


/* ==========================================================================
   24. INNER PAGES (privacy policy, terms)
   ========================================================================== */
.page-hero {
  background: var(--primary-color);
  color: var(--body-on-dark);
  padding: calc(var(--header-h) + clamp(48px, 6vw, 84px)) 0 clamp(48px, 6vw, 84px);
  text-align: center;
}
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem); margin-bottom: 12px; }
.page-hero p { color: var(--muted-on-dark); margin: 0; font-size: var(--fs-sm); }

.breadcrumb-bar {
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  font-size: var(--fs-xs);
  color: var(--body-muted);
}
.breadcrumb-bar ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.breadcrumb-bar li + li::before { content: "/"; margin-right: 8px; color: var(--line); }

.legal-content { max-width: 40rem; }   /* ~80 characters */
.legal-content h2 {
  font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem);
  margin-top: 2.4em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
}
.legal-content h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-content h3 { font-size: var(--fs-h4); margin-top: 1.8em; }
.legal-content ul { list-style: none; margin: 0 0 1.15rem; }
.legal-content ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
}
.legal-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 1px;
  background: var(--accent-color);
}
.legal-content .updated {
  display: inline-block;
  padding: 8px 18px;
  margin-bottom: 34px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--body-muted);
}

/* Inner pages without a hero: nothing dark sits under the header at the top
   of the page, so it starts solid and <main> clears it. */
.site-header--solid {
  background: #091422;
  box-shadow: 0 10px 34px rgba(7, 17, 32, .28);
}
.inner-main { padding-top: var(--header-h); }

.breadcrumb-bar [aria-current="page"] { color: var(--heading-color); }

/* Sidebar: a navy help card (same look as .price-aside), then the "on this
   page" links. The aside fills the column so the links can stay in view. */
.legal-aside { display: grid; gap: 24px; align-content: start; height: 100%; }
.legal-toc {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 24px 28px;
}
.legal-toc ol { list-style: none; }
.legal-toc a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--heading-color);
}
.legal-toc li:last-child a { border-bottom: 0; padding-bottom: 0; }
.legal-toc a:hover { color: var(--accent-dark); }
.legal-toc .is-sub a { padding-left: 16px; color: var(--body-color); }
.legal-toc .is-sub a:hover { color: var(--accent-dark); }

.legal-help {
  background: var(--primary-color);
  color: var(--body-on-dark);
  border-radius: var(--radius-sm);
  padding: clamp(28px, 3vw, 36px);
}
.legal-help .eyebrow { color: var(--accent-light); }
.legal-help__title { color: #fff; font-size: var(--fs-h3); }
.legal-help__actions { display: grid; gap: 12px; margin-top: 22px; }

/* Only the links stick - the whole sidebar is taller than many laptop screens. */
@media (min-width: 992px) and (min-height: 640px) {
  .legal-toc { position: sticky; top: calc(var(--header-h-sm) + 24px); }
}


/* ==========================================================================
   25. RESPONSIVE REFINEMENTS
   ========================================================================== */
@media (max-width: 1199.98px) {
  .amenity-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .highlight-grid { grid-template-columns: repeat(3, 1fr); }
  .highlight-card:nth-child(3n) { border-right: 0; }
  .highlight-card:nth-child(-n+3) { border-bottom: 1px solid var(--line-dark); }
}

@media (max-width: 991.98px) {
  :root { --header-h: 68px; --header-h-sm: 60px; }

  .primary-nav,
  .header-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn { display: none; }

  /* Solid header bar: below this width the hero sits on a flat ground, so a
     gradient header has nothing to blend into. */
  .site-header { background: #091422; }

  /* --- Stacked hero: image block first, copy beneath ---------------------
     Type over a photo reads well at desktop width. On a phone the safe text
     area collapses to almost nothing, the copy fights the image behind it,
     and contrast can only be rescued by darkening the photo into mud. So
     below 992px the image becomes its own block and the copy sits under it
     on solid ground. Desktop is untouched. */
  .hero {
    display: block;
    min-height: 0;
    padding: var(--header-h) 0 clamp(34px, 7vw, 52px);
    background: var(--primary-color);
  }
  .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;              /* undo the desktop -2, which would hide it here */
    aspect-ratio: 16 / 10;
  }
  /* Bias up: keeps the sun and the Sea Link in frame instead of dead water. */
  .hero__media img { object-position: 60% 42%; }
  /* Only a foot now — but dark enough to carry the location chip on its own,
     since the chip sits over whatever the crop happens to land on. */
  .hero__media::after {
    background: linear-gradient(to top,
      rgba(7, 17, 32, .94) 0%,
      rgba(7, 17, 32, .55) 18%,
      rgba(7, 17, 32, .1) 40%,
      rgba(7, 17, 32, 0) 62%);
  }
  .hero__locale {
    display: flex;
    position: absolute;
    left: var(--container-pad);
    right: var(--container-pad);
    bottom: 14px;
    /* The scrim is a ::after, i.e. the last child of .hero__media, so it
       paints over this chip unless the chip is lifted above it. */
    z-index: 2;
    text-shadow: 0 1px 3px rgba(7, 17, 32, .7);
  }

  /* With the copy on its own ground the eyebrow now wraps to two lines.
     Pin its rule to the first line rather than letting it float mid-block. */
  .hero__eyebrow { align-items: flex-start; }
  .hero__eyebrow::before { margin-top: .58em; flex: none; }
  .hero__content { max-width: none; padding-top: clamp(24px, 6vw, 36px); }
  
  /* The location chip on the image already states the address here, so the
     H1's sub-line would say it twice. Selector must match the base rule's
     specificity (.hero__title .hero__place), or it loses. */
  .hero__title .hero__place { display: none; }

  /* Price block stacks; the vertical rule becomes a horizontal one. */
  .hero__price { align-items: flex-start; gap: 4px; }
  .hero__price-facts {
    grid-template-columns: repeat(2, auto);
    gap: 10px 26px;
    width: 100%;
    padding-right: 0;
    padding-bottom: 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item--wide { grid-column: span 2; aspect-ratio: 8 / 4; }
  .gallery-item--tall { grid-row: span 1; aspect-ratio: 4 / 3; }

  .overview-media { padding-bottom: 0; }
  .overview-media__primary { width: 100%; }
  .overview-media__secondary { position: static; width: 100%; margin-top: 16px; border-width: 0; box-shadow: none; }
    .overview-contact { padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid var(--line); }

  .mobile-bar { display: flex; }
  .float-actions,
  .to-top { bottom: calc(var(--mobile-bar-h) + 16px); }

  .map-frame { min-height: 300px; }
}

@media (max-width: 767.98px) {
  .amenity-grid { grid-template-columns: repeat(3, 1fr); }
  .highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .highlight-card { border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
  .highlight-card:nth-child(2n) { border-right: 0; }
  .highlight-card:nth-last-child(-n+2) { border-bottom: 0; }

  .glance { grid-template-columns: 1fr; }
  .glance__item { border-right: 0; }
  .glance__item:last-child { border-bottom: 0; }
  .glance__item:nth-last-child(2) { border-bottom: 1px solid var(--line-dark); }

  /* Swap the pricing table for stacked cards — no horizontal scroll. */
  .price-table-wrap { display: none; }
  .price-cards { display: block; }

  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__btn { width: 42px; height: 42px; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575.98px) {
  .amenity-grid {grid-template-columns: repeat(2, 1fr);gap: 12px;display: grid;}
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item--wide,
  .gallery-item--tall { grid-column: span 1; grid-row: span 1; aspect-ratio: 4 / 3; }

  .hero__chips li { padding: 8px 15px; font-size: var(--fs-3xs); }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { width: 100%; }
  /* One column below 576px — two price facts side by side get too tight. */
  .hero__price-facts { grid-template-columns: 1fr; gap: 12px; }

  .btn { padding: 13px 22px; font-size: var(--fs-2xs); }
  .float-actions a { width: 44px; height: 44px; font-size: var(--fs-xl); }

  .price-table-wrap { border: 0; }
  .rera-qr { width: 140px; height: 140px; }
  .sitemap-links { gap: 8px 18px; }
  .form-control, .form-select{
         height:38px;
        padding: inherit;
  }
}

@media (max-width: 359.98px) {
  .amenity-grid { grid-template-columns: 1fr; }
  .highlight-grid { grid-template-columns: 1fr; }
  .highlight-card { border-right: 0; }
}


/* ==========================================================================
   26. MOBILE DENSITY PASS
   Phones were scrolling far too much: desktop-scale section padding, a
   single-column spec sheet, and two full-width stacked image blocks.
   Everything below is phone-only — desktop is untouched.
   Last block in the file, so it wins ties without !important.
   ========================================================================== */
@media (max-width: 767.98px) {

  /* --- global rhythm: one token change tightens every section ----------- */
  :root {
    --section-space: 24px;
    --section-space-sm: 32px;
  }
  .section-head { margin-bottom: 24px; }
  /* lead-text is already --fs-base globally */
  .rule { margin-top: 14px; margin-bottom: 32px; }

  /* --- hero: close the gap under the banner copy ----------------------- */
  .hero { padding-bottom: 16px; }
  .hero__content { padding-top: 8px; }
  .highlights { display: none;}
  /* Inline-block rule instead of a flex row: as flex items the label and the
     "· Pre-launch" text wrapped independently and left a hole mid-line. */
  .hero__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: var(--fs-3xs);
    letter-spacing: .13em;
  }
  .hero__eyebrow::before {
    display: inline-block;
    width: 26px;
    margin-right: 10px;
    vertical-align: middle;
  }

  .hero__title { margin-bottom: 0; }   /* --fs-h1 already lands at 32px here */
  .hero__tagline { margin-top: 10px; font-size: var(--fs-3xs); }
  .hero__price { margin-top: 18px; padding-top: 14px; }
  /* Markup has the facts before the price (fine side-by-side on desktop), but
     stacked on a phone that pushes the headline number down the page. Lead
     with the price here; desktop keeps the authored order. */
  .hero__price-main { order: -1; }
  .hero__price-facts { padding-top: 12px; gap: 10px; }
  .hero__chips { margin-top: 16px; }
  .hero__actions { margin-top: 18px; }
  .hero__price-foot { margin-top: 12px; font-size: var(--fs-3xs); }

  /* --- highlights: tighter cards --------------------------------------- */
  .highlight-card { padding: 16px 10px; }
  .highlight-card i { font-size: var(--fs-lg); margin-bottom: 7px; }
  .highlight-card__value { font-size: var(--fs-h3); margin-bottom: 2px; }
  .highlight-card__label { font-size: var(--fs-3xs); letter-spacing: .06em; }

  /* --- at a glance: two columns instead of twelve stacked rows ---------- */
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance__item {
    padding: 12px 13px;
    border-right: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
  }
  .glance__item:nth-child(2n) { border-right: 0; }
  .glance__item:nth-last-child(-n+2) { border-bottom: 0; }
  .glance__value { font-size: var(--fs-sm); line-height: 1.35; }
  .glance .micro-label { font-size: var(--fs-3xs); margin-bottom: 2px; letter-spacing: .08em; }

  /* --- amenities / plans / faq / contact: trim the padding -------------- */
  .amenity-nav { margin-bottom: 22px; gap: 8px; }
  .amenity-nav .nav-link { padding: 9px 16px; font-size: var(--fs-3xs); }
  .amenity-tile {padding: 18px 10px 16px;width: auto;}
  .amenity-tile i { font-size: var(--fs-xl); margin-bottom: 9px; }
  .amenity-tile span { font-size: var(--fs-2xs); }
  .amenity-banner { margin-top: 26px; }
  .amenity-banner img { height: 200px; }
  .amenity-banner__caption { padding: 18px; }
  .plan-nav { margin-bottom: 20px; }
  .floorplan-card__body { padding: 16px 18px 18px; }
  .price-card { padding: 18px; margin-bottom: 12px; }
  .price-aside { padding: 24px; }
  .faq-accordion .accordion-button { padding: 16px 18px; font-size: var(--fs-base); }
  .faq-accordion .accordion-body { padding: 0 18px 18px; font-size: var(--fs-sm); }
  .rera-panel { padding: 22px 18px; }
  .form-card { padding: 22px 20px; }
  .connect-list li { padding: 12px 0; }
  .plan-points li { padding: 11px 0; }
  .plan-points i { width: 36px; height: 36px; font-size: var(--fs-base); }

  /* --- the long tail: footer, RERA and developer were each ~2 screens --- */
  .site-footer { padding-top: 40px; font-size: var(--fs-sm); }
  .site-footer .row { --bs-gutter-y: 28px; }
  .footer-links { gap: 8px; }
  .footer-links a { font-size: var(--fs-xs); }
  .footer-title { margin-bottom: 10px;margin-top: 14px; }
  .footer-brand img { height: 44px; margin-bottom: 14px; }
  .sitemap-block { margin-top: 28px; padding-top: 24px; }
  .footer-disclaimer { margin-top: 24px; padding: 18px 0; font-size: var(--fs-2xs); }
  .footer-bottom { padding: 16px 0 20px; }

  .rera-list li { padding: 10px 0; }
  .rera-list .key { min-width: 0; }
  .rera-qr { width: 120px; height: 120px; }

  .developer-logo-card { min-height: 0; padding: 26px; }
  .developer-logo-card img { max-width: 200px; }
  .dev-stat { padding: 18px 12px; }
  .dev-stat i { font-size: var(--fs-lg); margin-bottom: 8px; }
  .dev-stat__value { font-size: var(--fs-h3); }
  .dev-stat__label { font-size: var(--fs-3xs); }
  .badge-chip { padding: 7px 14px; font-size: var(--fs-3xs); }

  /* --- read more --------------------------------------------------------
     Applied to the overview, the developer profile, the RERA notice and the
     footer disclaimer. Mobile only: the legal blocks stay open in full on
     desktop, where hiding a disclaimer behind a click would be the wrong
     call. Text is only visually clipped, never removed from the DOM. */
  /*.readmore__toggle { display: inline-flex; }*/
  .readmore:not(.is-open) .readmore__body {
    max-height: 13.5em;
    overflow: hidden;
    /* -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); */
  }
  /* Legal blocks are set smaller, so give them a shorter closed state. */
  .footer-disclaimer .readmore:not(.is-open) .readmore__body,
  .rera-panel .readmore:not(.is-open) .readmore__body { max-height: 9.5em; }
  .footer-disclaimer .readmore__toggle,
  .rera-panel .readmore__toggle { font-size: var(--fs-2xs); }

  /* --- gaps inside sections --------------------------------------------
     Bootstrap's g-5 gutter is 48px, which is desktop rhythm applied to a
     phone. This is the single biggest source of in-section dead space. */
  .row.g-5 { --bs-gutter-y: 0.5rem; --bs-gutter-x: 1.75rem; }
  .row.g-4 { --bs-gutter-y: 1rem; }
  main p { margin-bottom: .4rem; }

  .contact-actions { margin: 18px 0 16px; gap: 10px;flex-wrap: inherit; }
    .contact-actions .btn{ padding: 8px 10px; width: 50%;}
  .contact-address { font-size: var(--fs-sm);padding: 8px 0; }
  .contact-disclaimer { margin-top: 18px; padding: 14px 16px; }
  .form-card__intro { margin-bottom: 18px; }
  .price-aside__list { margin-top: 16px; }
  .price-aside__list li { padding: 10px 0; }
  .overview-contact { padding-top: 16px; width: 100%; }
  .badge-chip { margin-top: 0; }
  .amenity-banner__caption p { font-size: var(--fs-base); }
  #overview .btn.btn-gold { width: 100%;}
  .overview-btn-group { flex-wrap: wrap !important; }
  .overview-contact__value { font-size: var(--fs-xl); }


  .gallery-filter {margin-bottom: 18px;}

  /* --- carousels: swipe instead of stack -------------------------------
     Native scroll-snap, so it keeps momentum scrolling on iOS and stays
     keyboard- and screen-reader-reachable. Cards bleed to the screen edge
     so the next one peeks, which is what signals "swipe me". */
  [data-carousel] {
    display: flex;
    flex-wrap: nowrap;              /* Bootstrap .row defaults to wrap */
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--container-pad) * -1);
    padding: 0 var(--container-pad);
    scroll-padding-inline: var(--container-pad);
  }
  [data-carousel]::-webkit-scrollbar { display: none; }
  .carousel-dots { display: flex; }

  /* Bootstrap column slides (floor plans, project advantages). The gutter is
     replaced by the flex gap, so zero the column padding or they double up. */
  [data-carousel] > [class*="col-"] {
    flex: 0 0 85%;
    max-width: 85%;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-align: center;
  }
  #advantages [data-carousel] > [class*="col-"] { flex-basis: 88%; max-width: 88%; }
  .advantage-card { height: 100%; padding: 22px 20px; }
  .advantage-card__num { font-size: 1.7rem; margin-bottom: 12px; }
  .advantage-card h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
  .advantage-card p { font-size: var(--fs-base); }

  /* gallery slides */
  .gallery-item,
  .gallery-item--wide,
  .gallery-item--tall {
    flex: 0 0 82%;
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
  }
  .gallery-item .gallery-caption { opacity: 1; transform: none; }

  /* overview slides */
  .overview-media__primary,
  .overview-media__secondary {
    position: static;
    flex: 0 0 86%;
    width: auto;
    margin: 0;
    border: 0;
    box-shadow: none;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
  }
  .overview-media img { width: 100%; height: 100%; object-fit: cover; }
}

/* ==========================================================================
   27. PRICING NOTE ORDER (stacked layouts only)
   The disclaimer belongs under the price table on desktop, but the moment the
   columns stack it lands between the price cards and the "Buying details"
   card and splits them. Below 992px - exactly where col-lg-* stops being a
   column - it moves after that card instead.

   The note is nested inside .col-lg-8, so flex order cannot reach it from the
   row. display:contents drops the column box so its children become direct
   flex items of the row, and order can then place them. From 992px up the
   column box returns and the desktop layout is untouched.
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Without a column box the promoted children have no padding to offset the
     row's negative margin, so they would overhang it by half a gutter. */
  #price .row { --bs-gutter-x: 0; }
  #price .col-lg-8 { display: contents; }
  /* .row > * still matches the (box-less) column, not its children, so they
     never inherit Bootstrap's width:100% and would size to their content. */
  #price .col-lg-8 > * { flex: 0 0 auto; width: 100%; }
  #price .col-lg-4 { order: 2; }
  #price .note.mt-3 { order: 3; }
}

/* Overview copy: the last paragraph is collapsible on every screen size ----- */
.readmore--always .readmore__toggle { display: inline-flex; }
.readmore--always:not(.is-open) .readmore__body {
  max-height: 0;
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}