/* ==========================================================================
   Manchester City Yas Residences — Phase 2 — landing page styles
   (structure, layout and motion carried over unchanged from the Hudayriyat
   Golf Estates page; tokens below re-skin it to the MCYR campaign: deep
   navy, sky blue, white, with a restrained red only in the hero smoke)
   Structure follows enquiries.properties/communities/bristol/ (sticky nav,
   two-line italic-accent headings, numbered lifestyle carousel, divider-row
   stats/specs, arrow-marked links, scroll-reveal animation); brand direction
   (color, type) is Hudayriyat Golf Estates / Modon.
   ========================================================================== */

:root {
  --hge-green: #0b2a55; /* navy, between logo navy and buttons */
  --hge-green-dark: #00193a; /* logo navy */
  --hge-green-deeper: #000f24;
  --hge-cream: #e4eff9; /* pale sky */
  --hge-ivory: #f8fbfe; /* editorial white */
  --hge-text: #0e1530;
  --hge-muted: #56617d;
  --hge-border: rgba(28, 44, 91, 0.16);
  --hge-gold: #6caddf; /* logo sky blue */
  /* Deeper gold for text on light backgrounds (cream/ivory/white) — the
     base gold only clears ~3:1 there, short of the 4.5:1 text minimum. */
  --hge-gold-deep: #1f6aa5; /* deep sky, 4.5:1+ on white */
  --hge-white: #ffffff;

  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container-max: 1280px;
  --container-pad: clamp(20px, 5vw, 64px);
  --section-pad-y: clamp(56px, 9vw, 128px);
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 20px 60px -30px rgba(16, 27, 61, 0.4);
  --mcyr-red: #c8102e;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--hge-text);
  background: var(--hge-ivory);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  /* clip, not hidden — hidden turns body into a scroll container and
     silently breaks position:sticky (the header) in Chrome/Safari. */
  overflow-x: clip;
}

/* Thin, on-brand scrollbar instead of the browser's stark default bar. */
html { scrollbar-width: thin; scrollbar-color: var(--hge-green) var(--hge-cream); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--hge-cream); }
::-webkit-scrollbar-thumb { background: var(--hge-green); border-radius: 999px; border: 2px solid var(--hge-cream); }
::-webkit-scrollbar-thumb:hover { background: var(--hge-green-dark); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  margin: 0;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hge-green);
  color: var(--hge-ivory);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Double-ring focus indicator: the light inner ring is guaranteed to read
   against dark sections, the dark outer ring against light ones — a
   single accent color can't clear 3:1 non-text contrast on both. */
:focus-visible {
  outline: 2px solid var(--hge-ivory);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--hge-green-dark);
  border-radius: 2px;
}

.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.section-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hge-gold-deep);
  margin-bottom: 14px;
  display: block;
}

.section-head { max-width: 680px; margin-bottom: clamp(28px, 5vw, 48px); }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); }
.section-head p { margin-top: 16px; color: var(--hge-muted); font-size: 17px; max-width: 58ch; }
.section-head.center { max-width: 640px; margin-inline: auto; text-align: center; }
.section-head.light p { color: rgba(248, 251, 254, 0.72); }
.section-head.light .section-kicker { color: var(--hge-cream); }

/* Two-line heading, second line in italic gold — the recurring headline
   motif across every section (hero, lifestyle, residences, location, FAQ,
   final CTA). */
.heading-2l { font-size: clamp(28px, 4vw, 44px); }
.heading-2l span { display: block; }
.heading-2l .accent { font-style: normal; font-weight: 700; color: var(--hge-gold-deep); }
.section-head.light .heading-2l .accent,
.hero .heading-2l .accent,
.final-cta .heading-2l .accent { color: var(--hge-gold); }

.section--ivory { background: var(--hge-ivory); }
.section--cream { background: var(--hge-cream); }
.section--dark { background: var(--hge-green-dark); color: var(--hge-ivory); }
.section--dark .section-kicker { color: var(--hge-cream); }

.section { padding-block: var(--section-pad-y); }

/* Two dark sections back-to-back (no color break to signal a boundary)
   otherwise stack a full padding-bottom + padding-top into one oversized
   gap. Drop the follower's top padding and let the leader's bottom padding
   alone provide the breathing room. */
.section--dark + .section--dark { padding-top: 0; }

/* Arrow glyph used after nearly every link/CTA — a larger, thin diagonal
   mark (Bristol-reference style: oversized relative to the label, slides
   right on hover rather than the earlier small corner nudge). */
.arrow { display: inline-block; font-size: 1.6em; font-weight: 300; line-height: 1; transition: transform 0.25s var(--ease); }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 15px 28px;
  min-height: 52px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
/* Buttons that carry the arrow glyph push it to the far edge (Bristol's
   space-between layout); plain-label buttons (form submits) stay centered. */
.btn:has(.arrow) { justify-content: space-between; }
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--hge-green); color: var(--hge-ivory); }
.btn--primary:hover { background: var(--hge-green-dark); }

.btn--white { background: var(--hge-ivory); color: var(--hge-green-dark); }
.btn--white:hover { background: var(--hge-white); }

.btn--outline { background: transparent; border-color: rgba(248, 251, 254, 0.45); color: inherit; }
.btn--outline:hover { border-color: var(--hge-ivory); background: rgba(248,251,254,0.08); }

.btn--ghost { background: transparent; border-color: var(--hge-border); color: var(--hge-green-dark); }
.btn--ghost:hover { background: rgba(28,44,91,0.06); }

.btn--full { width: 100%; border-radius: 10px; }
.btn--sm { padding: 11px 20px; min-height: 43px; font-size: 10px; }

/* Plain text link with the arrow motif (e.g. "Talk to us ↗") — Bristol-style:
   wide gap pushing the arrow clear of the label, muted (not full-strength)
   underline so it reads lighter than a button. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 44, 91, 0.35);
  padding: 9px 0;
}
.section--dark .link-arrow { border-bottom-color: rgba(248, 251, 254, 0.35); }

/* ---------------------------------------------------------------------
   Placeholder visual slots (swap for real renders — see data-slot attr)
   ------------------------------------------------------------------- */
.ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(108,171,221,0.28), transparent 55%),
    linear-gradient(155deg, var(--hge-green) 0%, var(--hge-green-dark) 55%, var(--hge-green-deeper) 100%);
  color: rgba(248,251,254,0.5);
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(115deg, rgba(248,251,254,0.05) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(25deg, rgba(248,251,254,0.035) 0 1px, transparent 1px 26px);
}
.ph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  max-width: 120px;
  transform: translate(-50%, -50%);
  background: currentColor;
  opacity: 0.35;
  -webkit-mask: var(--ph-icon) center / contain no-repeat;
  mask: var(--ph-icon) center / contain no-repeat;
}
.ph--flag { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M5 21V4M5 4h13l-3 3.5L18 11H5'/%3E%3C/svg%3E"); }
.ph--arch { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M4 21V11a8 8 0 0 1 16 0v10'/%3E%3C/svg%3E"); }
.ph--wave { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M2 15c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2M2 19c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2'/%3E%3C/svg%3E"); }
.ph--map { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M9 20l-6-2V6l6 2 6-2 6 2v12l-6-2-6 2zM9 6v14M15 8v14'/%3E%3C/svg%3E"); }
.ph--home { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M3 11l9-8 9 8M5 10v10h14V10'/%3E%3C/svg%3E"); }
.ph--sun { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E"); }
.ph--leaf { --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M4 20c9 0 16-7 16-16-9 0-16 7-16 16zM4 20c0-5 2-9 6-12'/%3E%3C/svg%3E"); }
.ph.is-alt {
  background:
    radial-gradient(120% 140% at 85% 100%, rgba(108,171,221,0.24), transparent 55%),
    linear-gradient(315deg, var(--hge-green) 0%, var(--hge-green-dark) 55%, var(--hge-green-deeper) 100%);
}

/* ---------------------------------------------------------------------
   Scroll-reveal — JS adds .reveal just before observing, so a page with
   JS disabled or erroring never leaves content stuck invisible; elements
   already in view on load are revealed immediately (acts as the hero's
   entrance animation too). Reduced-motion users get the end state with
   near-zero transition duration via the global override above.
   ------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Parallax backgrounds — transform is applied via JS scroll handler;
   will-change hints the compositor, skipped entirely under reduced motion. */
.hero__bg, .final-cta__bg { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg, .final-cta__bg { transform: none !important; }
}

/* Hover polish on repeated card/row groups */
.lifestyle-slide, .spec-row, .connectivity-row, .payment-card {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.payment-card:hover { transform: translateY(-4px); border-color: rgba(248,251,254,0.34); }
.connectivity-row:hover, .spec-row:hover { background: rgba(28,44,91,0.03); }
.section--dark .connectivity-row:hover, .section--dark .spec-row:hover { background: rgba(248,251,254,0.04); }

/* Hover-zoom on every photo across the site: each "media" wrapper clips
   overflow, the .ph image inside scales up slightly on hover/focus. */
.lifestyle-slide__media .ph,
.residence-panel .ph,
.amenities__media .ph,
.overview__image .ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
/* cover, not contain: the floor-plan asset is a full photo+spec brochure
   page (16:9), so "contain" was letterboxing it with visible white bars
   inside the taller panel cell — cover crops the sides instead, which
   reads cleanly for a photo. */
/* contain, not cover: these are informative floor-plan diagrams (room
   legend + Ground/First layouts) — cover was cropping the legend column
   off the left edge. Light background fills the letterbox cleanly. */
.residence-panel .ph { object-fit: contain; background: var(--hge-ivory); }
.lifestyle-slide:hover .lifestyle-slide__media .ph,
.lifestyle-slide:focus-within .lifestyle-slide__media .ph { transform: scale(1.05); }
.residence-panel.is-active:hover .ph,
.residence-panel.is-active:focus-within .ph { transform: scale(1.02); }
.amenities__media:hover .ph,
.amenities__media:focus-within .ph { transform: scale(1.05); }
.overview__image:hover .ph,
.overview__image:focus-within .ph { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .payment-card:hover,
  .lifestyle-slide:hover .lifestyle-slide__media .ph,
  .residence-panel.is-active:hover .ph,
  .amenities__media:hover .ph,
  .overview__image:hover .ph {
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   Header nav — sits once right after the hero, then pins to the top of
   the viewport for the rest of the page so Enquire Now stays reachable
   while scrolling (replaces the separate floating pill button). Pinning
   is JS-driven (.is-pinned, see wireStickyHeader in script.js) rather
   than position:sticky, which has inconsistent containing-block behavior
   across some browsers/device-emulation setups. #headerSpacer holds the
   layout's place once the header switches to fixed.
   ------------------------------------------------------------------- */
.site-header {
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--hge-ivory);
  border-top: 2px solid var(--hge-green-dark);
  border-bottom: 1px solid var(--hge-border);
}
.site-header.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  box-shadow: 0 10px 28px -14px rgba(7, 14, 38, 0.3);
}
.site-header-spacer { display: none; height: var(--header-h); }
.site-header-spacer.is-active { display: block; }
.site-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__mark { line-height: 1.25; }
.site-header__mark .name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 19px; color: var(--hge-green-dark); }
.site-header__mark .sub { display: block; font-size: 10px; letter-spacing: 0.14em; color: var(--hge-muted); margin-top: 2px; }
.site-header__nav { display: none; align-items: center; gap: 32px; }
.site-header__nav a {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--hge-text);
  position: relative;
}
.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--hge-gold-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.site-header__nav a:hover::after { transform: scaleX(1); }
@media (min-width: 860px) {
  .site-header__nav { display: flex; }
}

/* ---------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: var(--hge-ivory);
  overflow: hidden;
}
/* Oversized + offset so the parallax transform (JS) has buffer room to
   shift within without exposing an edge at the top or bottom. */
.hero__bg { position: absolute; top: -10%; left: 0; right: 0; height: 120%; z-index: 0; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,14,38,0.55) 0%, rgba(7,14,38,0.35) 35%, rgba(7,14,38,0.82) 100%);
  transition: background 0.6s var(--ease);
}
/* "After dark" mood: same photo, a deeper scrim for a moodier read. */
.hero__bg.is-dark::after {
  background: linear-gradient(180deg, rgba(7,14,38,0.78) 0%, rgba(7,14,38,0.58) 35%, rgba(7,14,38,0.92) 100%);
}

/* Slow Ken Burns drift — real, pauseable motion rather than a static photo. */
@keyframes hero-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
.hero__bg img, .final-cta__bg img {
  animation: hero-kenburns 26s ease-in-out infinite alternate;
}
.hero__bg.is-paused img, .final-cta__bg.is-paused img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg img, .final-cta__bg img { animation: none; }
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* 150px clears the 96px .brand-mark (top:24px) at any width down to
     561px, where the mark is still full-size — the mark only shrinks to
     64px at the narrower 560px breakpoint, well inside this safe margin. */
  padding-block: 150px 64px;
  display: grid;
  gap: 48px;
}

/* Side-by-side desktop layout: headline left, form right, vertically
   centered — stacked/bottom-anchored below this breakpoint (mobile). */
@media (min-width: 960px) {
  .hero { align-items: center; }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) 440px;
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
    /* Fixed (not vh-scaled) top padding: guarantees clearance under the
       absolutely-positioned .brand-mark even when a short/wide viewport
       pulls this vertically-centered block upward. */
    padding-block: 150px 108px;
  }
  .hero__form-wrap { max-width: none; }
}
@media (min-width: 1200px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) 460px; }
}
.hero__eyebrow { color: var(--hge-gold); margin-bottom: 18px; }
.hero__title { font-size: clamp(40px, 5.4vw, 76px); max-width: 18ch; letter-spacing: 0.01em; }
.hero__title span { display: block; font-style: normal; font-weight: 700; }
/* Brighter than the base --hge-gold — the hero sits over a light sky photo
   where the standard gold reads too muted/low-contrast. */
.hero__title .accent { font-style: normal; color: #9fd0f5; }
.hero__subhead { margin-top: 20px; font-size: clamp(16px, 2vw, 19px); color: rgba(248,251,254,0.88); max-width: 46ch; }
/* Grid (not flex) so the divider-skipping rule below survives wrapping —
   a flex item's border-left stays attached to it regardless of which row
   it wraps to, which orphans dividers; grid lets us target columns by
   nth-child instead. Value renders above label (column-reverse) to match
   the reference layout — dt/dd order in the markup stays label-then-value
   for correct <dl> semantics. */
.hero__facts { margin-top: 28px; display: grid; grid-template-columns: repeat(3, auto); column-gap: 0; row-gap: 16px; }
.hero__facts div { display: flex; flex-direction: column-reverse; gap: 4px; padding-inline: 20px; border-left: 1px solid rgba(248,251,254,0.25); }
.hero__facts div:first-child { padding-left: 0; border-left: none; }
.hero__facts dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(248,251,254,0.6); }
.hero__facts dd { margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 26px; }

.hero__explore {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--hge-ivory);
  font-size: 13px;
  font-weight: 600;
}
.hero__explore-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(248,251,254,0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.hero__explore:hover .hero__explore-icon { background: rgba(248,251,254,0.12); transform: translateY(3px); }

.hero__form-wrap { width: 100%; max-width: 460px; }

/* Bottom utility bar — persistent explore cue + real daylight/golden-hour
   image toggle (two genuine photos of the course at different times of day,
   not a literal day/night pair since no night render exists). */
.hero__bottombar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  border-top: 1px solid rgba(248,251,254,0.18);
  display: none;
}
@media (min-width: 860px) {
  .hero__bottombar { display: block; }
}
.hero__bottombar-inner {
  padding-block: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.hero__bottombar-explore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(248,251,254,0.8);
}
.hero__bottombar-right { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; }
.hero__moodtoggle { display: flex; gap: 32px; }
.hero__moodtoggle button {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: rgba(248,251,254,0.5);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 0 6px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero__moodtoggle button.is-active { color: var(--hge-ivory); border-bottom-color: var(--hge-gold); }
.hero__moodtoggle button.is-active[data-mood="matchday"] { border-bottom-color: var(--mcyr-red); }
.hero__moodtoggle button:hover { color: var(--hge-ivory); }

.hero__pause {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(248,251,254,0.3);
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  color: rgba(248,251,254,0.75);
  font-size: 11px;
  letter-spacing: 0.04em;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.hero__pause:hover { color: var(--hge-ivory); border-color: rgba(248,251,254,0.55); }
.hero__pause-icon { font-size: 9px; }

.lead-form {
  background: rgba(16, 27, 61, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(248,251,254,0.22);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow-soft);
}
.lead-form__title { font-size: 28px; text-align: center; font-family: var(--font-display); }
.lead-form__disclaimer { margin-top: 10px; text-align: center; font-size: 12.5px; line-height: 1.5; color: rgba(248,251,254,0.68); }
.lead-form__disclaimer .hl { color: var(--hge-gold); font-weight: 600; }
.lead-form__subtitle { margin-top: 8px; text-align: center; font-size: 14px; color: rgba(248,251,254,0.72); }
.lead-form__fields { margin-top: 22px; display: grid; gap: 12px; }
.field { position: relative; }
.field input, .field select {
  width: 100%;
  appearance: none;
  background: rgba(248,251,254,0.08);
  border: 1px solid rgba(248,251,254,0.28);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 16px; /* 16px minimum avoids iOS Safari auto-zoom on focus */
  color: var(--hge-ivory);
  font-family: var(--font-body);
}
.field input::placeholder { color: rgba(248,251,254,0.55); }
.field input:focus, .field select:focus { border-color: var(--hge-cream); }
.field-error { display: none; margin-top: 6px; font-size: 12.5px; color: #ffb4a8; }
.field.is-invalid input, .field.is-invalid select { border-color: #ffb4a8; }
.field.is-invalid .field-error { display: block; }

.phone-row { display: grid; grid-template-columns: 108px 1fr; gap: 8px; }

/* Custom country-code dropdown — replaces a native <select> whose open
   option list is OS/browser-chrome and can't be restyled to match the
   form's dark glass fields. */
.country-select { position: relative; }
.country-select__btn {
  width: 100%;
  appearance: none;
  background: rgba(248,251,254,0.08);
  border: 1px solid rgba(248,251,254,0.28);
  border-radius: 10px;
  padding: 14px 10px;
  font-size: 15px;
  color: var(--hge-ivory);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s var(--ease);
}
.country-select__btn:focus, .country-select.is-open .country-select__btn { border-color: var(--hge-cream); }
.country-select__arrow { font-size: 10px; opacity: 0.7; transition: transform 0.2s var(--ease); }
.country-select.is-open .country-select__arrow { transform: rotate(180deg); }
.country-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: max(220px, 100%);
  max-height: 264px;
  overflow-y: auto;
  background: var(--hge-green-dark);
  border: 1px solid rgba(248,251,254,0.2);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  list-style: none;
  margin: 0;
  padding: 6px;
}
.country-select__list[hidden] { display: none; }
.country-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--hge-ivory);
  cursor: pointer;
  white-space: nowrap;
}
.country-select__option:hover, .country-select__option.is-active { background: rgba(248,251,254,0.1); }
.country-select__option .code { color: rgba(248,251,254,0.55); font-size: 12.5px; }
.country-select__label { display: flex; align-items: center; gap: 10px; }
.country-select__label .flag, .country-select__btn .flag { display: inline-block; width: 20px; height: 15px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.country-select__value { display: inline-flex; align-items: center; gap: 8px; }

.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 380px) { .name-row { grid-template-columns: 1fr; } }

.contact-mode { display: flex; gap: 18px; font-size: 13px; color: rgba(248,251,254,0.82); align-items: center; }
.contact-mode label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.lead-form__submit { margin-top: 16px; }

/* Same grid+gap as .lead-form__fields — .lead-form__more wraps everything
   after email in one div (so it can be hidden as a unit on mobile), which
   would otherwise collapse the gap between its own children. */
.lead-form__more { display: grid; gap: 12px; }

/* Progressive mobile form — collapsed to just email + Continue until a
   valid email is entered (wireProgressiveHeroForm in script.js), then
   reveals the rest. Desktop always shows the full form: .is-collapsed is
   only ever added by JS inside the max-width:560px match below. */
.lead-form__continue { display: none; margin-top: 16px; }
@media (max-width: 560px) {
  .lead-form.is-collapsed .lead-form__more,
  .lead-form.is-collapsed .lead-form__submit { display: none; }
  .lead-form.is-collapsed .lead-form__continue { display: inline-flex; }
}
.lead-form__consent { margin-top: 14px; font-size: 12px; line-height: 1.5; color: rgba(248,251,254,0.62); text-align: center; }
.lead-form__consent a { text-decoration: underline; color: rgba(248,251,254,0.85); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-state { display: none; align-items: center; gap: 10px; font-size: 14px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; }
.form-state.is-visible { display: flex; }
.form-state--success { background: rgba(180, 220, 200, 0.16); color: #d7f5e5; }
.form-state--error { background: rgba(255,150,130,0.16); color: #ffd7cb; line-height: 1.45; }

.btn[disabled] { opacity: 0.65; pointer-events: none; }

.permit-note {
  position: absolute;
  right: var(--container-pad);
  bottom: 18px;
  z-index: 2;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(248,251,254,0.5);
  max-width: 320px;
  text-align: right;
}

/* ---------------------------------------------------------------------
   Quick facts strip — plain divider-line columns (not colored tiles)
   ------------------------------------------------------------------- */
.stats-strip { background: var(--hge-ivory); border-bottom: 1px solid var(--hge-border); }
.stats-strip__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.stats-strip__item { padding: clamp(28px, 5vw, 44px) clamp(16px, 3vw, 28px); border-left: 1px solid var(--hge-border); }
.stats-strip__item:first-child { border-left: none; }
.stats-strip__value { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 3.2vw, 40px); color: var(--hge-green-dark); }
.stats-strip__label { display: block; margin-top: 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hge-muted); }

/* ---------------------------------------------------------------------
   Overview
   ------------------------------------------------------------------- */
/* align-items:stretch (desktop only — the ≤1024px rule below restores its
   own aspect-ratio for the stacked mobile layout) so the photo always
   matches the text column's actual height instead of a fixed 4:5 ratio
   that overshoots whenever the text+highlights content is shorter. */
/* minmax(0, Nfr), not bare Nfr — a bare fr track's minimum size defaults
   to "auto" (content-based), so a large intrinsic image can blow the
   track out past its intended width and push the page into horizontal
   scroll. minmax(0, …) removes that implicit floor. */
.overview__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 64px); align-items: stretch; }
.overview__text p + p { margin-top: 16px; }
.overview__text p { color: rgba(248,251,254,0.78); font-size: 17px; }
/* min-width:0 overrides the grid item's default min-width:auto — without
   it, the img.ph inside (width:100%, but percentage sizes don't count
   toward min-content) forces this track to the photo's natural pixel
   width, which was pushing the whole page into horizontal scroll on
   narrow viewports. Same fix applied to .amenities__media below. */
.overview__image { width: 100%; min-width: 0; border-radius: var(--radius-lg); min-height: 420px; overflow: hidden; }

.overview__highlights {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(248,251,254,0.16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
}
.overview-highlight { display: flex; gap: 14px; align-items: flex-start; }
.overview-highlight__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(248,251,254,0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hge-gold);
}
.overview-highlight__icon svg { width: 19px; height: 19px; }
.overview-highlight__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 17px; color: var(--hge-ivory); }
.overview-highlight__body { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: rgba(248,251,254,0.66); }

/* ---------------------------------------------------------------------
   Lifestyle — numbered carousel ("Around Hudayriyat Golf Estates")
   ------------------------------------------------------------------- */
.lifestyle__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.lifestyle__head p { color: rgba(248,251,254,0.72); font-size: 16px; }

.lifestyle-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}
.lifestyle-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.lifestyle-track::-webkit-scrollbar { display: none; }
.lifestyle-slide {
  flex: 0 0 auto;
  width: min(420px, 82vw);
}
.lifestyle-slide a, .lifestyle-slide button { pointer-events: auto; }
.lifestyle-track.is-dragging .lifestyle-slide { pointer-events: none; }
.lifestyle-slide__media { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; }
.lifestyle-slide__media .ph { width: 100%; height: 100%; }
.lifestyle-slide__num { margin-top: 18px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--hge-gold); letter-spacing: 0.14em; }
.lifestyle-slide h3 { margin-top: 10px; font-size: 21px; }
.lifestyle-slide p { margin-top: 8px; color: rgba(248,251,254,0.68); font-size: 14.5px; }

.lifestyle__controls { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; }
.lifestyle__counter { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: 0.08em; color: rgba(248,251,254,0.75); }
.lifestyle__nav-btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(248,251,254,0.35);
  background: transparent;
  color: var(--hge-ivory);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lifestyle__nav-btn:hover { background: rgba(248,251,254,0.1); border-color: rgba(248,251,254,0.6); }
.lifestyle__nav-btn[disabled] { opacity: 0.35; pointer-events: none; }
.lifestyle__nav { display: flex; gap: 10px; }
.lifestyle__talk { color: var(--hge-cream); }

/* ---------------------------------------------------------------------
   Residences — centered intro, tabs, spec-row panel (floor-plan style)
   ------------------------------------------------------------------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 40px; justify-content: center; flex-wrap: wrap; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 0 0 auto;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--hge-muted);
  padding: 10px 16px;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 600;
}
.tabs button.is-active { color: var(--hge-green-dark); border-bottom-color: var(--hge-gold-deep); }

.residence-panel { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--hge-border); border-radius: var(--radius-lg); overflow: hidden; }
.residence-panel.is-active { display: grid; }
.residence-panel .ph { aspect-ratio: auto; height: 100%; min-height: 320px; }
.residence-panel__content { padding: clamp(28px, 4vw, 44px); background: var(--hge-ivory); }
.residence-panel__type { font-size: 12px; letter-spacing: 0.14em; color: var(--hge-gold-deep); font-weight: 700; }
.residence-panel h3 { margin-top: 10px; font-size: clamp(24px, 3vw, 32px); }
.residence-panel__specs { margin-top: 24px; border-top: 1px solid var(--hge-border); }
.spec-row { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; border-bottom: 1px solid var(--hge-border); font-size: 15px; }
.spec-row__label { color: var(--hge-muted); }
.spec-row__value { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; }
.residence-panel ul { margin-top: 22px; display: grid; gap: 10px; }
.residence-panel li { padding-left: 22px; position: relative; color: var(--hge-muted); font-size: 15px; }
.residence-panel li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 1px; background: var(--hge-gold-deep); }
.residence-panel .btn { margin-top: 26px; }
.residences__disclaimer { margin-top: 28px; text-align: center; font-size: 12.5px; color: var(--hge-muted); max-width: 70ch; margin-inline: auto; }

/* ---------------------------------------------------------------------
   Amenities — large photo + categorized spec list
   ------------------------------------------------------------------- */
.amenities__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.amenities__media { width: 100%; min-width: 0; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; }
.amenities__list { padding-top: clamp(8px, 2vw, 24px); }
.amenities__intro { color: var(--hge-muted); font-size: 16px; max-width: 48ch; }
.amenity-cat { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hge-border); }
.amenity-cat:first-of-type { margin-top: 36px; }
.amenity-cat__label { font-size: 11.5px; letter-spacing: 0.14em; color: var(--hge-gold-deep); font-weight: 700; }
.amenity-cat__items { margin-top: 10px; font-size: 16px; color: var(--hge-text); line-height: 1.7; }

/* ---------------------------------------------------------------------
   Payment plan
   ------------------------------------------------------------------- */
.payment-grid { display: block; }
.payment-tabs { margin-bottom: 28px; }
.section--dark .tabs button { color: rgba(248,251,254,0.62); }
.section--dark .tabs button:hover { color: var(--hge-ivory); }
.section--dark .tabs button.is-active { color: var(--hge-ivory); border-bottom-color: var(--hge-gold); }
.payment-panel { display: none; }
.payment-panel.is-active { display: block; }
.payment-panel__meta { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 22px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(248,251,254,0.72); }
.payment-panel__split { font-family: var(--font-display); font-size: 30px; letter-spacing: 0.04em; color: var(--hge-gold); }
.payment-panel__note { margin-top: 18px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hge-gold); }
.payment-grid__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.payment-grid__cards[data-count="8"], .payment-grid__cards[data-count="7"] { grid-template-columns: repeat(4, 1fr); }
.payment-grid__cards[data-count="7"] .payment-card--handover { grid-column: span 2; }
.payment-card { background: rgba(248,251,254,0.05); border: 1px solid rgba(248,251,254,0.18); border-radius: var(--radius-md); padding: clamp(22px, 3vw, 30px) 18px; text-align: center; }
.payment-card--handover { background: var(--hge-gold); border-color: var(--hge-gold); color: var(--hge-green-deeper); }
.payment-card__pct { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 48px); line-height: 1.05; }
.payment-card__label { margin-top: 8px; font-size: 14px; font-weight: 600; }
.payment-card__timing { margin-top: 4px; font-size: 12.5px; opacity: 0.68; }
/* flex column (not text-align:center on block children) — the CTA button
   and "Talk to us" link are both inline-flex (needed for their own gap
   between label and arrow), so a plain text-align:center would let them
   sit side-by-side instead of stacking; this forces the stack and also
   means the link no longer needs an inline display:block override that
   was accidentally killing its own flex gap. */
.payment-plan__cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* ---------------------------------------------------------------------
   Location — divider-row travel times + styled map
   ------------------------------------------------------------------- */
.location__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.location__map { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: var(--hge-ivory); }
.location__map-caption { margin-top: 14px; font-size: 12px; letter-spacing: 0.1em; color: var(--hge-muted); display: flex; justify-content: space-between; align-items: center; text-decoration: none; transition: color 0.2s var(--ease); }
.location__map-caption:hover { color: var(--hge-green-dark); }
.connectivity-list { border-top: 1px solid var(--hge-border); margin-top: 24px; }
.connectivity-row { display: flex; align-items: baseline; gap: 18px; padding-block: 18px; border-bottom: 1px solid var(--hge-border); }
.connectivity-row__time { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--hge-green-dark); min-width: 110px; }
.connectivity-row__time span { font-size: 12px; font-family: var(--font-body); color: var(--hge-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-left: 4px; }
.connectivity-row__label { font-weight: 500; }
.connectivity-row__tag { margin-left: 0 !important; font-size: 11px !important; font-weight: 700; letter-spacing: 0.16em !important; color: var(--hge-gold-deep) !important; }

/* ---------------------------------------------------------------------
   Developer
   ------------------------------------------------------------------- */
.developer__grid { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.developer__mark { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.12em; font-size: clamp(36px, 5vw, 60px); color: var(--hge-green); }
.developer__grid p { color: var(--hge-muted); font-size: 16px; }
.developer__grid p + p { margin-top: 14px; }

/* ---------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------- */
.faq__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: end; margin-bottom: clamp(28px, 5vw, 48px); }
.faq-list { border-top: 1px solid var(--hge-border); }
.faq-item { border-bottom: 1px solid var(--hge-border); }
.faq-item__q {
  width: 100%; text-align: left; background: none; border: none;
  padding: 22px 4px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 18px; color: var(--hge-text);
}
.faq-item__icon { flex: none; width: 22px; height: 22px; position: relative; }
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; background: var(--hge-green); top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 14px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 14px; transition: transform 0.25s var(--ease); }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.faq-item__a p { padding: 0 4px 22px; color: var(--hge-muted); font-size: 15.5px; max-width: 62ch; }

/* ---------------------------------------------------------------------
   Final CTA banner
   ------------------------------------------------------------------- */
.final-cta { position: relative; min-height: 64vh; display: flex; align-items: center; color: var(--hge-ivory); overflow: hidden; }
.final-cta__bg { position: absolute; top: -10%; left: 0; right: 0; height: 120%; }
.final-cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,14,38,0.35), rgba(7,14,38,0.78)); }
.final-cta__inner { position: relative; z-index: 1; text-align: center; width: 100%; }
.final-cta h2 { margin-top: 14px; font-size: clamp(30px, 5vw, 52px); max-width: 18ch; margin-inline: auto; }
.final-cta p { margin-top: 14px; color: rgba(248,251,254,0.78); }
.final-cta .btn { margin-top: 30px; }

/* ---------------------------------------------------------------------
   Footer — minimal, matching the understated reference treatment
   ------------------------------------------------------------------- */
.footer { background: var(--hge-green-deeper); color: rgba(248,251,254,0.6); padding-block: 32px; font-size: 12.5px; text-align: center; }
.footer__compliance { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 11px; opacity: 0.75; }
.footer__links { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.footer__links a { text-decoration: none; opacity: 0.8; }
.footer__links a:hover { opacity: 1; color: var(--hge-ivory); }

/* ---------------------------------------------------------------------
   Sticky mobile CTA
   ------------------------------------------------------------------- */
/* Brand mark — sits in normal flow at the top of the hero's text column
   (not absolutely positioned), so it scrolls away with the hero, is never a
   floating overlay, and can never collide with the eyebrow/title below it at
   any viewport size — short/wide screens included. Recolored white via CSS
   filter (source file is a black mark on transparent) so it reads on any photo. */
/* Absolute within .hero (position:relative), top offset matching
   .float-enquire's top:24px exactly so the two sit on the same line. The
   hero text column below gets a fixed, non-centering-dependent padding-top
   (see .hero__inner media query) so it can never ride up into this mark. */
.brand-mark {
  position: absolute;
  top: 24px;
  left: var(--container-pad);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  transition: transform 0.25s var(--ease);
}
.brand-mark:hover { transform: translateY(-2px); }
.brand-mark img { display: block; height: 96px; width: auto; filter: brightness(0) invert(1); }
/* MCYR: text wordmark in the logo's slot until an approved logo file is
   supplied (never recreate the club or project logo by hand). */
.brand-mark__text { display: flex; flex-direction: column; gap: 6px; color: var(--hge-ivory); font-family: var(--font-display); text-transform: uppercase; line-height: 0.95; }
.brand-mark__text strong { font-weight: 700; font-size: 26px; letter-spacing: 0.06em; }
.brand-mark__text strong span { display: block; color: var(--hge-gold); }
.brand-mark__text strong span:first-child { color: var(--hge-ivory); }
.brand-mark__text small { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; color: rgba(248,251,254,0.75); }
/* Centered at mobile widths (the reference layout) instead of left-aligned;
   the hover transform is restated with the centering translateX included,
   otherwise a plain translateY on hover would re-left-align it. */
@media (max-width: 560px) {
  .brand-mark { top: 16px; left: 50%; transform: translateX(-50%); }
  .brand-mark:hover { transform: translateX(-50%) translateY(-2px); }
  .brand-mark img { height: 64px; }
  .brand-mark__text { align-items: center; text-align: center; }
  .brand-mark__text strong { font-size: 21px; }
  .brand-mark__text small { font-size: 9.5px; letter-spacing: 0.14em; }
}


/* ---------------------------------------------------------------------
   Enquiry modal
   ------------------------------------------------------------------- */
dialog.modal { border: none; padding: 0; border-radius: var(--radius-lg); max-width: 480px; width: 92vw; background: var(--hge-green-dark); color: var(--hge-ivory); }
dialog.modal::backdrop { background: rgba(7,14,38,0.82); }
.modal__inner { padding: clamp(26px, 4vw, 38px); position: relative; }
.modal__close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(248,251,254,0.3); background: transparent; color: var(--hge-ivory); font-size: 16px;
}
.modal h2 { font-size: 22px; padding-right: 40px; font-family: var(--font-display); }

/* ---------------------------------------------------------------------
   Visually hidden (screen-reader only)
   ------------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .overview__grid, .location__grid, .developer__grid, .amenities__grid { grid-template-columns: minmax(0, 1fr); }
  .overview__image, .amenities__media { order: -1; aspect-ratio: 16/9; }
  .lifestyle__head, .faq__head { grid-template-columns: 1fr; }
  .payment-grid__cards[data-count="8"], .payment-grid__cards[data-count="7"] { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  .stats-strip__inner { grid-template-columns: repeat(1, 1fr); }
  .stats-strip__item { border-left: none; border-top: 1px solid var(--hge-border); }
  .stats-strip__item:first-child { border-top: none; }
  .residence-panel { grid-template-columns: minmax(0, 1fr); }
  .residence-panel .ph { order: -1; min-height: 240px; }
  .payment-grid__cards, .payment-grid__cards[data-count="8"], .payment-grid__cards[data-count="7"] { grid-template-columns: repeat(2, 1fr); }
  .payment-grid__cards[data-count="3"] .payment-card--handover { grid-column: span 2; }
  .final-cta { min-height: 52vh; }
  .hero__facts dd { font-size: 19px; }
}

@media (max-width: 560px) {
  .payment-grid__cards[data-count="7"] .payment-card--handover { grid-column: auto; }
  .payment-grid__cards[data-count="7"] .payment-card--handover,
  .payment-grid__cards[data-count="3"] .payment-card--handover { grid-column: 1 / -1; }
  .phone-row { grid-template-columns: 90px 1fr; }
  .hero { min-height: 92vh; }
  .overview__highlights { grid-template-columns: 1fr; }
  /* Two columns instead of three: the 3rd fact wraps to its own row. Reset
     every divider, then add it back only on the 2nd (right) column, so a
     wrapped item never inherits a dangling border-left. */
  .hero__facts { grid-template-columns: repeat(2, 1fr); row-gap: 20px; column-gap: 16px; }
  .hero__facts div { border-left: none; padding-left: 0; }
  .hero__facts div:nth-child(2n) { border-left: 1px solid rgba(248,251,254,0.25); padding-left: 20px; }
}

@media (min-width: 1441px) {
  :root { --container-max: 1360px; }
}

/* ---------------------------------------------------------------------
   UX fixes (MCYR review)
   ------------------------------------------------------------------- */
/* Anchored sections and the form clear the pinned header when jumped to. */
section[id], #enquire { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Comfortable tap targets for text links. */
.link-arrow { min-height: 44px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; }
.location__map-caption { min-height: 44px; }

/* Final-balance tile: keep the timing line readable on sky blue. */
.payment-card--handover .payment-card__timing { opacity: 0.85; }

@media (max-width: 560px) {
  /* Header wordmark: drop the sub-line so the name and CTA fit on one row. */
  .site-header__mark .sub { display: none; }
  .site-header__mark .name { font-size: 16px; }
  .site-header .btn { padding: 12px 16px !important; gap: 12px; }
  /* Plan tabs scroll sideways in one row instead of wrapping into a stack. */
  .payment-tabs { flex-wrap: nowrap; justify-content: flex-start; margin-inline: calc(var(--container-pad) * -1); padding-inline: var(--container-pad); }
}
/* Closing banner sits on the bright waterfront atmosphere: a deeper scrim
   keeps the heading, intro and button at readable contrast. */
.final-cta__bg::after { background: linear-gradient(180deg, rgba(7,14,38,0.62), rgba(7,14,38,0.86)); }

/* Official logo, centred at the top of the hero at every width. The white
   wordmark variant is used on the dark hero; the crest keeps its colours. */
.brand-mark,
.brand-mark:hover { left: 50%; transform: translateX(-50%); }
.brand-mark { flex-direction: column; gap: 8px; top: 28px; }
.brand-mark:hover { transform: translateX(-50%) translateY(-2px); }
.brand-mark img.brand-mark__logo { height: 72px; width: auto; filter: none; }
.brand-mark__phase { font-size: 10.5px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--hge-gold); padding-left: 0.32em; }
@media (max-width: 560px) {
  .brand-mark { top: 18px; }
  .brand-mark img.brand-mark__logo { height: 50px; }
  .brand-mark__phase { font-size: 9.5px; }
}
/* Hero facts: top-align values when a neighbouring label wraps to two lines
   (column-reverse packs from the bottom by default). */
.hero__facts div { justify-content: flex-end; }

/* ---------------------------------------------------------------------
   Official brochure palette: the sky-blue band (#6caddf) with navy type and
   a thin champagne-gold rule above and below, as in the Phase 2 factsheet.
   ------------------------------------------------------------------- */
:root { --mcyr-sky: #6caddf; --mcyr-gold-rule: linear-gradient(90deg, #8a6a33 0%, #e8d7a8 50%, #8a6a33 100%); }
.section--sky { position: relative; background: var(--mcyr-sky); color: var(--hge-green-dark); }
.section--sky::before,
.section--sky::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--mcyr-gold-rule); }
.section--sky::before { top: 0; }
.section--sky::after { bottom: 0; }
.section--sky .section-kicker { color: var(--hge-white); }
.section--sky .heading-2l .accent { color: var(--hge-white); }
.section--sky .section-head p { color: var(--hge-green-dark); }
.section--sky .tabs button { color: rgba(0, 25, 58, 0.72); }
.section--sky .tabs button:hover { color: var(--hge-green-dark); }
.section--sky .tabs button.is-active { color: var(--hge-green-dark); border-bottom-color: var(--hge-green-dark); }
.section--sky .payment-panel__meta { color: var(--hge-green-dark); }
.section--sky .payment-panel__split { color: var(--hge-white); }
.section--sky .payment-panel__note { color: var(--hge-green-dark); }
.section--sky .payment-card { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.55); color: var(--hge-green-dark); }
.section--sky .payment-card:hover { border-color: var(--hge-white); }
.section--sky .payment-card__timing { opacity: 0.85; }
.section--sky .payment-card--handover { background: var(--hge-green-dark); border-color: var(--hge-green-dark); color: var(--hge-white); }
.section--sky .link-arrow { color: var(--hge-green-dark); border-bottom-color: rgba(0, 25, 58, 0.4); }
.section--sky .btn--white { background: var(--hge-white); color: var(--hge-green-dark); }

/* Gold rule under the stats strip and above the closing banner, echoing the
   brochure's section dividers. */
.stats-strip { position: relative; }
.stats-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--mcyr-gold-rule); }
.final-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: var(--mcyr-gold-rule); }

/* Floor plans are landscape drawings on white: show them whole. */
.residence-panel .ph { background: #ffffff; }

/* Hero over the bright official aerial: a stronger scrim, heaviest behind the
   text column and the logo, so small labels stay readable. */
.hero__bg::after {
  background:
    linear-gradient(90deg, rgba(0,15,36,0.72) 0%, rgba(0,15,36,0.42) 55%, rgba(0,15,36,0.22) 100%),
    linear-gradient(180deg, rgba(0,15,36,0.6) 0%, rgba(0,15,36,0.2) 30%, rgba(0,15,36,0.85) 100%);
}
.hero__facts dt { color: rgba(248,251,254,0.82); }
.brand-mark__phase { color: var(--hge-white); }

/* Stats keep their real units (ha, m²): no forced uppercase. */
.stats-strip__value { text-transform: none; }

/* Floor plans: a button that opens the lightbox; a full-width plan on phones. */
.residence-panel__plan { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #ffffff; cursor: zoom-in; }
.residence-panel__zoom { position: absolute; right: 14px; bottom: 14px; padding: 8px 12px; border-radius: 999px; background: var(--hge-green-dark); color: var(--hge-white); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; }
@media (max-width: 860px) {
  .residence-panel__plan { order: -1; height: auto; }
  .residence-panel__plan .ph { min-height: 0; height: auto; aspect-ratio: 1570 / 855; }
}

/* Lightbox (template markup, now wired to the floor plans). */
dialog.lightbox { border: 0; padding: 0; width: min(1200px, 96vw); max-width: none; background: #ffffff; border-radius: var(--radius-lg); overflow: hidden; }
dialog.lightbox::backdrop { background: rgba(0, 12, 30, 0.88); }
.lightbox__frame img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.lightbox__frame .ph { background: #ffffff; }
.lightbox__frame .ph::before, .lightbox__frame .ph::after { display: none; }
.lightbox__caption { padding: 14px 64px; text-align: center; font-size: 13px; font-weight: 600; color: var(--hge-green-dark); border-top: 1px solid var(--hge-border); }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: var(--hge-green-dark); color: var(--hge-white); font-size: 20px; line-height: 1;
}
.lightbox__close { top: 12px; right: 12px; font-size: 15px; }
.lightbox__prev { left: 12px; bottom: 6px; }
.lightbox__next { right: 12px; bottom: 6px; }

/* Four hero facts: one row on desktop, a 2 × 2 grid on phones (the
   existing ≤560px rule already handles the 2-column dividers). */
.hero__facts { grid-template-columns: repeat(4, auto); }
@media (max-width: 560px) { .hero__facts { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------------
   Refinement pass
   ------------------------------------------------------------------- */
/* Official colour logo in the sticky header, white logo in the footer. */
.site-header__mark--logo { display: inline-flex; align-items: center; }
.site-header__mark--logo img { display: block; height: 44px; width: auto; }
.footer__logo { display: block; height: 52px; width: auto; margin: 0 auto 6px; }
@media (max-width: 560px) {
  .site-header__mark--logo img { height: 36px; }
}

/* Closing banner: let the villa render show through. */
.final-cta__bg::after { background: linear-gradient(180deg, rgba(0,15,36,0.28) 0%, rgba(0,15,36,0.5) 45%, rgba(0,15,36,0.82) 100%); }
.final-cta h2, .final-cta p, .final-cta .eyebrow { text-shadow: 0 2px 18px rgba(0,15,36,0.55); }

/* Floor plans get the wider column on desktop. */
@media (min-width: 861px) {
  .residence-panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .residence-panel__plan .ph { min-height: 380px; }
}

/* Plan tabs on phones: fade the right edge so the row reads as scrollable. */
@media (max-width: 560px) {
  .payment-tabs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}

/* Floating WhatsApp button. */
.whatsapp-fab {
  position: fixed; z-index: 70;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 20px 0 16px; border-radius: 999px;
  background: #25d366; color: #0b2e1a; font-size: 14px; font-weight: 700;
  box-shadow: 0 14px 30px -12px rgba(0, 25, 58, 0.55);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.whatsapp-fab svg { width: 24px; height: 24px; }
.whatsapp-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(0, 25, 58, 0.6); }
@media (max-width: 560px) {
  .whatsapp-fab { padding: 0; width: 56px; height: 56px; justify-content: center; }
  .whatsapp-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Keep the footer's last links clear of the floating WhatsApp button. */
.footer { padding-bottom: 96px; }

/* ---------------------------------------------------------------------
   Gold text accents (from the brochure's champagne-gold rules)
   Light gold on navy, deep gold on white/pale sky (both ≥ 4.5:1).
   The sky-blue payment band keeps white/navy, where gold would not read.
   ------------------------------------------------------------------- */
:root { --hge-gold: #d9bd84; --hge-gold-deep: #7d5f27; }
.hero__title .accent { color: #e2c792; }
.section--dark .section-kicker,
.section-head.light .section-kicker,
.final-cta .eyebrow { color: var(--hge-gold); }
.section--dark .heading-2l .accent { color: var(--hge-gold); }
.brand-mark__phase { color: var(--hge-gold); }
.section--sky .section-kicker,
.section--sky .heading-2l .accent { color: var(--hge-white); }

/* Location: map / masterplan switch. */
.location-tabs { justify-content: flex-start; margin-bottom: 16px; }
.location__masterplan {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 790 / 883; border-radius: var(--radius-lg); overflow: hidden;
  background: #e9e7e1; cursor: zoom-in;
}
.location__masterplan img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.location__masterplan:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .location__masterplan:hover img { transform: none; } }

/* Daylight / After Dark hero. Daylight keeps the stronger left scrim for the
   text; After Dark is already dark, so its scrim is lighter to let the
   lights show. Preload the night image so the switch is instant. */
.hero__bg.is-dark::after {
  background:
    linear-gradient(90deg, rgba(0,10,28,0.62) 0%, rgba(0,10,28,0.28) 55%, rgba(0,10,28,0.1) 100%),
    linear-gradient(180deg, rgba(0,10,28,0.45) 0%, rgba(0,10,28,0.05) 30%, rgba(0,10,28,0.75) 100%);
}
.hero__moodtoggle button.is-active[data-mood="afterdark"] { border-bottom-color: var(--hge-gold); }
.whatsapp-fab { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s, box-shadow 0.25s var(--ease); }
.whatsapp-fab.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s, box-shadow 0.25s var(--ease); }
.whatsapp-fab.is-shown:hover { transform: translateY(-2px); }

/* Amenities collage: keep its 2 × 2 shape on tablets and phones instead of
   the template's 16:9 crop, which cut every tile in half. */
@media (max-width: 1024px) {
  .amenities__media { aspect-ratio: 716 / 892; max-width: 520px; width: 100%; margin-inline: auto; }
}

/* Residences: the panel shows the home's exterior render; "View floor plan"
   opens the official plan in the lightbox. */
.residence-panel__plan .ph--exterior { object-fit: cover; background: var(--hge-green-dark); }
@media (max-width: 860px) {
  .residence-panel__plan .ph.ph--exterior { aspect-ratio: 4 / 3; }
}
/* Amenities: single amphitheatre render in a square frame (sharper than 4:5
   from this source); square on smaller screens too. */
.amenities__media { aspect-ratio: 1 / 1; }
.amenities__media .ph { object-position: 40% 50%; }
@media (max-width: 1024px) {
  .amenities__media { aspect-ratio: 1 / 1; max-width: 560px; }
}

/* ---------------------------------------------------------------------
   Lead form: optional qualifying questions + required consent (PDPL)
   ------------------------------------------------------------------- */
.qualify-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 380px) { .qualify-row { grid-template-columns: 1fr; } }
.field select {
  cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f8fbfe' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
  font-size: 15px;
}
.field select:invalid, .field select option[value=""] { color: rgba(248, 251, 254, 0.55); }
.field select option { color: #00193a; background: #ffffff; }
.consent-field { margin-top: 2px; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.45; color: rgba(248, 251, 254, 0.82); cursor: pointer; text-align: left; }
.consent-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--hge-gold); cursor: pointer; }
.consent-field.is-invalid .consent-check { color: #ffd7cb; }

/* ---------------------------------------------------------------------
   Sticky action bar on phones (replaces the round WhatsApp button there)
   ------------------------------------------------------------------- */
.mobile-cta { display: none; }
@media (max-width: 560px) {
  .whatsapp-fab { display: none !important; }
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: 1fr auto; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 25, 58, 0.96); border-top: 1px solid rgba(217, 189, 132, 0.45);
    box-shadow: 0 -12px 30px -16px rgba(0, 12, 30, 0.6);
    transform: translateY(110%); transition: transform 0.3s var(--ease);
  }
  .mobile-cta.is-shown { transform: none; }
  .mobile-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .mobile-cta__register { background: var(--hge-gold); color: #00193a; }
  .mobile-cta__wa { padding: 0 16px; background: #25d366; color: #0b2e1a; }
  .mobile-cta__wa svg { width: 20px; height: 20px; }
  .footer { padding-bottom: 104px; }
}
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } }
/* Checkbox must not inherit the text-field styling. */
.field .consent-check input[type="checkbox"] {
  appearance: auto; -webkit-appearance: checkbox;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 3px; background: none;
}

/* Amenities: tighter list, and on desktop the photo stretches to the text
   column's height so both sides end level. */
.amenities__intro { margin-top: 10px; }
.amenity-cat { margin-top: 0; padding-block: 14px; display: grid; grid-template-columns: 170px 1fr; gap: 6px 18px; align-items: baseline; }
.amenity-cat:first-of-type { margin-top: 22px; }
.amenity-cat__items { margin-top: 0; font-size: 15px; line-height: 1.5; }
.amenities__list .link-arrow { margin-top: 18px !important; }
@media (min-width: 1025px) {
  .amenities__grid { align-items: stretch; }
  .amenities__media { aspect-ratio: auto; height: 100%; min-height: 0; }
  .amenities__list { padding-top: 0; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 560px) {
  .amenity-cat { grid-template-columns: 1fr; }
}
/* WhatsApp CTAs removed: the phone bar is a single full-width Register button. */
@media (max-width: 560px) { .mobile-cta { grid-template-columns: 1fr; } }
.footer { padding-bottom: 32px; }
@media (max-width: 560px) { .footer { padding-bottom: 96px; } }

/* ---------------------------------------------------------------------
   Hero bottom bar on tablets and phones: the same bar as on PC (Explore,
   01 Daylight / 02 After Dark, Pause motion). The template hid it below
   860px; here it sits at the foot of the hero, under the form.
   ------------------------------------------------------------------- */
@media (max-width: 859px) {
  .hero { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .hero__inner { padding-bottom: 36px; }
  .hero__bottombar { display: block; position: relative; left: auto; right: auto; bottom: auto; }
  .hero__bottombar-inner { padding-block: 18px 22px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__bottombar-right { width: 100%; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
  .hero__moodtoggle { gap: 22px; }
  .hero__moodtoggle button { min-height: 40px; }
}
@media (max-width: 380px) {
  .hero__moodtoggle { gap: 14px; }
  .hero__pause-label { display: none; }
}

/* =====================================================================
   Phone pass (≤560px): shorter page, less repetition, compact payment plan
   ===================================================================== */
@media (max-width: 560px) {
  /* 1. Tighter vertical rhythm */
  :root { --section-pad-y: 52px; }
  .section-head { margin-bottom: 24px; }
  .section-head p { font-size: 16px; }
  .overview__image { min-height: 0; aspect-ratio: 4 / 3; }
  .overview__text p { font-size: 16px; }
  .overview__highlights { margin-top: 24px; padding-top: 20px; gap: 18px; }
  .lifestyle__head { margin-bottom: 24px; gap: 12px; }
  .lifestyle__controls { margin-top: 20px; }
  .connectivity-row { padding-block: 12px; }
  .connectivity-row__time { font-size: 22px; min-width: 92px; }
  .residences__disclaimer { margin-top: 18px; }
  .faq__head { margin-bottom: 20px; }
  .faq-item__q { padding-block: 16px; font-size: 16px; }

  /* 2. One CTA path on phones: the sticky Register bar replaces the many
        "Talk to us" links (the bar is always one tap away). */
  .link-arrow[data-event="click_register_interest"] { display: none; }

  /* 3. Payment plan as a compact list: % | instalment + date */
  .payment-grid__cards,
  .payment-grid__cards[data-count="8"],
  .payment-grid__cards[data-count="7"],
  .payment-grid__cards[data-count="3"] { grid-template-columns: 1fr; gap: 8px; }
  .payment-card,
  .payment-grid__cards .payment-card--handover {
    grid-column: auto;
    display: grid; grid-template-columns: 76px 1fr; column-gap: 14px; align-items: center;
    padding: 12px 16px; text-align: left; border-radius: 12px;
  }
  .payment-card__pct { grid-row: 1 / span 2; font-size: 28px; }
  .payment-card__label { margin-top: 0; font-size: 14px; }
  .payment-card__timing { margin-top: 2px; }
  .payment-panel__meta { margin-bottom: 14px; }
  .payment-plan__cta { margin-top: 24px; }

  /* 4. Residence tabs in one swipeable row, like the payment tabs */
  #residenceTabs {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-bottom: 20px;
    margin-inline: calc(var(--container-pad) * -1); padding-inline: var(--container-pad);
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent);
  }
  #residenceTabs button { white-space: nowrap; }

  /* 5. Closing banner: clearer image, text anchored low */
  .final-cta { min-height: 0; padding-block: 120px 56px; align-items: flex-end; }
  .final-cta__bg::after { background: linear-gradient(180deg, rgba(0,15,36,0.05) 0%, rgba(0,15,36,0.35) 40%, rgba(0,15,36,0.9) 100%); }
  .final-cta__bg img { object-position: 50% 40%; }
  .final-cta h2 { font-size: 32px; }
}

/* =====================================================================
   Audit fixes (accessibility, legibility, tap targets)
   ===================================================================== */
/* Contrast: footer legal line ≥ 4.5:1; sky band accent in navy, not white */
.footer { color: rgba(248, 251, 254, 0.78); }
.footer__compliance { opacity: 1; }
.section--sky .section-kicker { color: #00193a; }
.section--sky .heading-2l span { color: #0b2a55; }
.section--sky .heading-2l .accent { color: #00193a; }

/* Minimum readable size for small labels (was 9.5–11px) */
.hero__facts dt, .stats-strip__label, .section-kicker, .eyebrow,
.residence-panel__type, .amenity-cat__label, .location__map-caption,
.hero__bottombar-explore, .hero__moodtoggle button, .payment-panel__meta,
.connectivity-row__time span { font-size: 12px; }
.brand-mark__phase { font-size: 11.5px; }
.hero__pause { font-size: 12px; }

/* Tap targets ≥ 44px */
.hero__moodtoggle button, .hero__pause, .hero__bottombar-explore { min-height: 44px; display: inline-flex; align-items: center; }
.hero__pause { padding-block: 0; }
.hero__explore { min-height: 44px; }
.site-header__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.consent-check { min-height: 44px; align-items: center; }

/* Keyboard focus on the scrollable carousel */
.lifestyle-track:focus-visible { outline-offset: 6px; }
.payment-tabs__label { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #00193a; margin-bottom: 6px; }
.section--sky .tabs button { font-size: 14px; }
@media (max-width: 560px) { .payment-tabs__label { text-align: left; } }
.btn, .link-arrow, .residence-panel__zoom { font-size: 12px; }

/* Location map: opens full size in the lightbox; wider column on PC. */
.location__map--zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.location__map--zoom img { transition: transform 0.6s var(--ease); }
.location__map--zoom:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .location__map--zoom:hover img { transform: none; } }
@media (min-width: 1025px) {
  .location__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
/* Lightbox: maps and masterplan use the full frame */
.lightbox__frame img { max-height: 82vh; }
/* Phones: wide maps and plans open tall and pan sideways instead of
   shrinking to fit the narrow screen. */
@media (max-width: 560px) {
  dialog.lightbox { width: 96vw; }
  .lightbox__frame { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .lightbox__frame img { height: 62vh; width: auto; max-width: none; max-height: none; }
  .lightbox__caption::after { content: " · Swipe to explore"; font-weight: 500; opacity: 0.7; }
}
/* Phone bottom bar removed: no reserved space under the footer. */
@media (max-width: 560px) { .footer { padding-bottom: 32px; } }
/* Lightbox panning on phones: the inner frame must not clip the image. */
@media (max-width: 560px) {
  .lightbox__frame .ph { overflow: visible; width: max-content; min-width: 100%; }
}

/* Overview: on PC the photo takes the text column's height (no empty space
   under the text); text is centred vertically beside it. */
@media (min-width: 1025px) {
  .overview__grid { align-items: stretch; }
  .overview__text { display: flex; flex-direction: column; justify-content: center; }
  .overview__image { position: relative; min-height: 460px; }
  .overview__image .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
}

/* Legal disclaimer */
.footer__legal { max-width: 980px; margin: 14px auto 0; font-size: 12px; line-height: 1.6; color: rgba(248, 251, 254, 0.72); text-align: center; text-wrap: pretty; }
@media (max-width: 560px) { .footer__legal { text-align: left; } }