/* ==========================================================================
   Al Ghadeer Parks by Aldar — alghadeerparks.com
   Palette, type treatment and section rhythm taken from the Aldar brochure:
   Aldar tan #c6aa87, deep garden green #0e2923, off-white #f5f4f2.
   ========================================================================== */

:root {
  /* Aldar brand palette, sampled from aldar.com/properties/en/uae/al-ghadeer:
     tan #c6aa87, charcoal #2d2d2d, off-white #f5f4f2, grey #57585b. */

  /* Deep garden green anchors every dark section and photo scrim */
  --midnight: #0e2923;
  --midnight-2: #0a201b;
  --navy: #16382f;

  --sand: #f5f4f2;
  --sand-2: #ebe8e2;
  --sand-3: #ddd8ce;
  --paper: #ffffff;

  --ink: #2d2d2d;
  --ink-2: #43494f;
  --body: #57585b;
  --body-light: rgba(245, 244, 242, 0.74);

  /* The signature Aldar tan carries every accent on the page */
  --bronze: #c6aa87;
  --bronze-lt: #d8c3a4;
  --bronze-pale: #e8dcc9;
  --green: #5c7052;

  --line: rgba(45, 45, 45, 0.14);
  --line-light: rgba(245, 244, 242, 0.2);

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;

  --wrap: 1500px;
  --wrap-narrow: 980px;
  --gutter: clamp(22px, 5vw, 88px);
  --sec-y: clamp(76px, 10vw, 168px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15.5px, 1.06vw, 17.5px);
  line-height: 1.85;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  color: var(--ink);
  margin: 0;
  line-height: 1.14;
  letter-spacing: 0.01em;
}

.display-xl {
  font-size: clamp(2.45rem, 7.4vw, 6.4rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
}

.display-lg {
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
  line-height: 1.1;
}

.display-md {
  font-size: clamp(1.6rem, 2.7vw, 2.5rem);
  line-height: 1.16;
}

/* The brochure sets its headlines in wide-tracked capitals */
.tracked-caps {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 300;
}

.eyebrow {
  font-family: var(--sans);
  font-size: clamp(0.63rem, 0.78vw, 0.72rem);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-weight: 400;
  color: var(--bronze);
  margin: 0 0 clamp(20px, 2.4vw, 34px);
  display: block;
}

.eyebrow--light { color: var(--bronze-lt); }

.lede {
  font-size: clamp(1.02rem, 1.3vw, 1.22rem);
  line-height: 1.78;
  color: var(--ink-2);
  font-weight: 300;
}

.muted { color: var(--body); }

/* Hairline rule with a bronze seed, used between editorial blocks */
.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: clamp(34px, 4vw, 58px) 0;
  position: relative;
}
.rule::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 58px; height: 1px;
  background: var(--bronze);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sec-y); position: relative; }

.section--sand { background: var(--sand); }
.section--paper { background: var(--paper); }

/* Sand stock lifted from the brochure paper — a mirrored, tone-flattened tile
   so it repeats without a visible seam. Colour underneath in case it 404s. */
.section--texture {
  background-color: #ebe1cf;
  background-image: url("../assets/images/brand/sand-texture.jpg");
  background-repeat: repeat;
  background-size: 1100px auto;
  color: var(--body);
}

.section--dark {
  background: var(--midnight);
  color: var(--body-light);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--sand); }
.section--dark .lede { color: rgba(245, 244, 242, 0.82); }

/* Fine paper grain over the sand sections, mirroring the brochure stock */
.section--sand::before,
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
.section--dark::before { opacity: 0.32; }

.section > .wrap { position: relative; z-index: 1; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(38px, 5.5vw, 96px);
  align-items: center;
}

.grid-2--wide-left { grid-template-columns: 1.15fr 1fr; }
.grid-2--wide-right { grid-template-columns: 1fr 1.15fr; }

@media (max-width: 900px) {
  .grid-2,
  .grid-2--wide-left,
  .grid-2--wide-right { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  padding: 19px 40px;
  border: 1px solid var(--bronze);
  background: var(--bronze);
  color: #fff;
  cursor: pointer;
  transition: background .5s var(--ease), color .5s var(--ease),
              border-color .5s var(--ease), transform .5s var(--ease);
  text-align: center;
}

.btn:hover {
  background: transparent;
  color: var(--bronze);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(245, 244, 242, 0.42);
  color: var(--sand);
}
.btn--ghost:hover {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--ink);
}

.btn--block { width: 100%; }

/* Understated text link with a rule that draws in on hover */
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--bronze);
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(198, 170, 135, 0.4);
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.link-quiet:hover { border-color: var(--bronze); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  padding-block: clamp(16px, 1.9vw, 26px);
  transition: background .55s var(--ease), padding .55s var(--ease),
              box-shadow .55s var(--ease), border-color .55s var(--ease);
  border-bottom: 1px solid transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* The wordmark is the project's own white lettering, cropped from the Aldar
   logo artwork. "PARKS · BY ALDAR" is set beneath it in tracked caps, matching
   how the second line sits in the original lockup. */
.brand { display: flex; flex-direction: column; align-items: center; gap: 8px; line-height: 1; }

.brand__mark {
  height: clamp(15px, 1.6vw, 20px);
  width: auto;
  display: block;
}

/* "parks" is set live rather than baked into the artwork so it stays crisp at
   any size. text-indent offsets the trailing letter-space so it stays centred. */
.brand__line {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.5rem, 0.6vw, 0.58rem);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  color: var(--sand);
  transition: color .55s var(--ease);
}

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px); }

.nav a {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(245, 244, 242, 0.82);
  position: relative;
  padding-block: 6px;
  transition: color .45s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--bronze-lt);
  transition: width .55s var(--ease);
}
.nav a:hover::after { width: 100%; }

.header .btn { padding: 14px 28px; font-size: 0.65rem; }

/* Solid state once the hero is behind us */
/* Aldar runs a solid dark bar; this uses the community green for it, so the
   header, the dark sections and the footer all read as one surface. */
.header.is-stuck {
  background: rgba(14, 41, 35, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(198, 170, 135, 0.22);
  padding-block: clamp(11px, 1.3vw, 16px);
}
.header.is-stuck .nav a { color: rgba(245, 244, 242, 0.86); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 101;
}
.nav-toggle span {
  display: block;
  width: 25px; height: 1px;
  margin: 6px auto;
  background: var(--sand);
  transition: transform .45s var(--ease), opacity .3s var(--ease), background .45s var(--ease);
}
.header.is-stuck .nav-toggle span { background: var(--sand); }

@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .header .btn--header { display: none; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    background: var(--midnight);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--ease), visibility .5s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav a { font-size: 0.86rem; letter-spacing: 0.26em; color: var(--sand); }
  .header.is-stuck .nav a { color: var(--sand); }

  .nav-toggle.is-open span { background: var(--sand); }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Column flex + margin-top:auto on the inner block, rather than align-items:
   flex-end — when the copy is taller than the viewport (small phones, large
   text settings) auto resolves to 0 and the hero grows downward instead of
   pushing the headline up under the header. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--midnight);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  transform: scale(1.08);
  animation: heroDrift 24s var(--ease-slow) forwards;
}

@keyframes heroDrift { to { transform: scale(1); } }

/* Two-axis scrim: a left wedge carries the headline, a base wash carries the
   fact rail, and the right third stays open so the sunset still reads. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(14, 41, 35, 0.7) 0%, rgba(14, 41, 35, 0.4) 34%, rgba(14, 41, 35, 0.08) 66%, rgba(14, 41, 35, 0) 100%),
    linear-gradient(to top, rgba(14, 41, 35, 0.72) 0%, rgba(14, 41, 35, 0.22) 28%, rgba(14, 41, 35, 0) 56%, rgba(14, 41, 35, 0.16) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: auto;
  padding-bottom: clamp(52px, 7vw, 104px);
  padding-top: clamp(116px, 18vw, 200px);
}

.hero h1 {
  color: var(--sand);
  max-width: 17ch;
  text-shadow: 0 2px 40px rgba(14, 41, 35, 0.5);
}

.hero__sub {
  max-width: 46ch;
  margin: clamp(24px, 3vw, 36px) 0 clamp(34px, 4vw, 48px);
  color: rgba(245, 244, 242, 0.86);
  font-size: clamp(1rem, 1.22vw, 1.16rem);
  line-height: 1.8;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  width: 1px;
  height: 54px;
  background: linear-gradient(to bottom, transparent, rgba(245, 244, 242, 0.6));
  overflow: hidden;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bronze-lt);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 780px) { .scroll-cue { display: none; } }

/* --------------------------------------------------------------------------
   Star field for the midnight sections
   -------------------------------------------------------------------------- */

.starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 44% 14%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 58% 52%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 71% 28%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 84% 74%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 92% 34%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 8% 84%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 36% 90%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 64% 84%, rgba(255,255,255,.45), transparent);
  animation: twinkle 7s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.36; }
  to   { opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   Editorial figure
   -------------------------------------------------------------------------- */

.figure { position: relative; overflow: hidden; }

.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-slow);
}
.figure:hover img { transform: scale(1.045); }

/* Curtain reveal: a panel of the community green wipes left to right while the
   render settles out of an oversize crop. Uses .reveal purely as the scroll
   trigger, so its own fade is neutralised here and the wipe carries it. */
.figure--curtain.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.figure--curtain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--midnight);
  transform: translateX(0);
  transition: transform 1.5s var(--ease-slow);
}
.figure--curtain.is-in::before { transform: translateX(101%); }

.figure--curtain img {
  transform: scale(1.22);
  transition: transform 2.8s var(--ease-slow);
}
.figure--curtain.is-in img { transform: scale(1); }
.figure--curtain.is-in:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .figure--curtain::before { display: none; }
  .figure--curtain img,
  .figure--curtain.is-in img { transform: none; transition: none; }
}

.figure--tall { aspect-ratio: 4 / 5; }
.figure--wide { aspect-ratio: 16 / 10; }
.figure--pano { aspect-ratio: 21 / 9; }

.figure__caption {
  margin-top: 15px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bronze);
}

/* Bronze corner detail on feature figures */
.figure--framed::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(245, 244, 242, 0.28);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Split spread — the brochure's two-page layout: a deep gradient panel of
   centred copy on one side, a full-bleed render running to the edge on the
   other. No gutter between them.
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(540px, 78vh, 880px);
}

.split__panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(52px, 6vw, 104px) clamp(30px, 5vw, 92px);
  background:
    radial-gradient(128% 96% at 22% 12%, #1b4438 0%, #123027 42%, #0b1f1a 76%, #071512 100%);
}

.split__panel > * { position: relative; z-index: 1; }

.split__panel h2 {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--bronze);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(1.24rem, 2.15vw, 2rem);
  line-height: 1.52;
  max-width: 15ch;
  margin-bottom: clamp(30px, 3.6vw, 52px);
}

.split__panel p {
  color: rgba(245, 244, 242, 0.84);
  max-width: 47ch;
  margin: 0 0 1.5em;
  font-size: clamp(0.94rem, 1.1vw, 1.06rem);
  line-height: 1.85;
}
.split__panel p:last-child { margin-bottom: 0; }

.split__media { position: relative; overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Image first on the page, panel first in the source, so the reading order
   still starts with the words on narrow screens. */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 62vh; }
}

/* --------------------------------------------------------------------------
   Showcase — a full-bleed render left almost undarkened, used as a breath
   between sections. Only the base is graded, just enough to carry a caption.
   -------------------------------------------------------------------------- */

/* width:100% is load-bearing: with only aspect-ratio + max-height, a viewport
   wider than 2.1 × 88vh makes the box shrink its width to keep the ratio,
   leaving a gap down the right. Pinning the width lets the height clamp
   instead, and object-fit:cover absorbs the difference. */
.showcase {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 21 / 10;
  max-height: 88vh;
  background: var(--midnight);
}

.showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 3s var(--ease-slow);
}
.showcase.is-in img { transform: scale(1); }

/* Left-to-right curtain, matching the reveal on the overview render */
.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--midnight);
  transform: translateX(0);
  transition: transform 1.6s var(--ease-slow);
}
.showcase.is-in::before { transform: translateX(101%); }

.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(14, 41, 35, 0.78) 0%, rgba(14, 41, 35, 0.22) 18%, rgba(14, 41, 35, 0) 42%);
}

.showcase__caption {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: clamp(26px, 4vw, 58px);
  text-align: center;
  padding-inline: var(--gutter);
}

.showcase__caption span {
  display: block;
  font-size: clamp(0.68rem, 1.15vw, 0.95rem);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--sand);
  font-weight: 300;
}

.showcase.reveal { opacity: 1; transform: none; transition: none; }

/* Sits between two light sections, so the curtain wipes in the sand tone
   rather than flashing a dark block across the page. */
.showcase--light,
.showcase--light::before { background: var(--sand); }
.showcase--light { aspect-ratio: 16 / 9; }

/* The night render is a native 16:9, so matching the ratio and dropping the
   max-height cap means it shows whole — nothing cropped at any viewport. */
.showcase--night {
  aspect-ratio: 16 / 9;
  max-height: none;
}

/* Its own sky is already dark at the base, so the caption needs very little. */
.showcase--night::after {
  background: linear-gradient(to top, rgba(14, 41, 35, 0.5) 0%, rgba(14, 41, 35, 0.12) 16%, rgba(14, 41, 35, 0) 34%);
}

/* --------------------------------------------------------------------------
   Masterplan — centred intro, the aerial run full-bleed, supporting notes below
   -------------------------------------------------------------------------- */

.masterplan__intro {
  text-align: center;
  position: relative;
  z-index: 1;
}

.masterplan__intro .lede {
  margin: clamp(24px, 2.8vw, 34px) auto 0;
  max-width: 62ch;
}

/* Sits above .section--dark's grain overlay, and runs to the viewport edge
   because .section carries no inline padding of its own. */
.showcase--plan {
  position: relative;
  z-index: 1;
  aspect-ratio: 2 / 1;
  max-height: 76vh;
  margin-top: clamp(44px, 5.5vw, 84px);
}

.showcase--plan::after {
  background: linear-gradient(to top, rgba(14, 41, 35, 0.72) 0%, rgba(14, 41, 35, 0.12) 22%, rgba(14, 41, 35, 0) 44%);
}

.masterplan__notes {
  position: relative;
  z-index: 1;
  margin-top: clamp(44px, 5.5vw, 80px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 88px);
}

@media (max-width: 820px) { .masterplan__notes { grid-template-columns: 1fr; } }

.masterplan__lead {
  font-size: clamp(1.14rem, 1.62vw, 1.42rem);
  color: var(--ink);
  margin-bottom: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(198, 170, 135, 0.75);
}

/* On the sand stock the curtain and the section have to be the same colour,
   or the wipe reads as a dark block sliding across the page. */
.masterplan .showcase,
.masterplan .showcase::before { background: #ebe1cf; }

@media (max-width: 700px) { .showcase { aspect-ratio: 4 / 5; } }

@media (prefers-reduced-motion: reduce) {
  .showcase::before { display: none; }
  .showcase img, .showcase.is-in img { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Full-bleed band
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  min-height: clamp(360px, 56vw, 660px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.band__media { position: absolute; inset: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(14,41,35,.86) 0%, rgba(14,41,35,.6) 46%, rgba(14,41,35,.24) 100%);
}

.band__inner { position: relative; z-index: 2; }
.band h2 { color: var(--sand); max-width: 18ch; }
.band p { color: rgba(245, 244, 242, 0.84); max-width: 48ch; margin-top: 22px; }

/* --------------------------------------------------------------------------
   Stat strip
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.stat {
  background: var(--sand);
  padding: clamp(28px, 3.4vw, 46px) clamp(20px, 2.4vw, 34px);
  text-align: center;
}

.stat__num {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  color: var(--ink);
  line-height: 1;
  display: block;
}

.stat__label {
  margin-top: 12px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bronze);
}

@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   Residences
   -------------------------------------------------------------------------- */

.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}

@media (max-width: 940px) { .res-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.res-card {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.res-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px -30px rgba(20, 29, 41, 0.4);
}

.res-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.res-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-slow);
}
.res-card:hover .res-card__media img { transform: scale(1.06); }

.res-card__body { padding: clamp(26px, 2.8vw, 38px); flex: 1; display: flex; flex-direction: column; }

.res-card__type {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--bronze);
  margin-bottom: 14px;
}

.res-card h3 { font-size: clamp(1.4rem, 2vw, 1.78rem); margin-bottom: 16px; }

/* Closing call to action where the price matrix used to sit */
.res-cta {
  margin-top: clamp(46px, 5.5vw, 78px);
  padding-top: clamp(32px, 3.6vw, 48px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 48px);
}

.res-cta p {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(0.98rem, 1.2vw, 1.14rem);
  line-height: 1.75;
  color: var(--ink-2);
}

@media (max-width: 720px) {
  .res-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Price matrix */
.matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.matrix {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.matrix th,
.matrix td {
  padding: 19px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.matrix thead th {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bronze);
  border-bottom-color: var(--bronze);
}

.matrix tbody th {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 400;
  color: var(--ink);
}

.matrix tbody tr:hover td,
.matrix tbody tr:hover th { background: rgba(169, 133, 92, 0.055); }

.matrix .num { font-variant-numeric: tabular-nums; }

.table-note {
  margin-top: 18px;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   Gallery slider — one full-bleed render at a time, the way the brochure
   presents them. Track translates by whole viewport widths.
   -------------------------------------------------------------------------- */

.slider {
  position: relative;
  margin-top: clamp(38px, 4.5vw, 64px);
}

.slider__viewport { overflow: hidden; }

.slider__track {
  display: flex;
  transition: transform 1s var(--ease-slow);
  will-change: transform;
}

.slide {
  flex: 0 0 100%;
  margin: 0;
  /* width is load-bearing next to max-height — see .showcase */
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 86vh;
  overflow: hidden;
  background: var(--sand-2);
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 700px) { .slide { aspect-ratio: 4 / 3; } }

.slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: clamp(46px, 4vw, 60px);
  height: clamp(46px, 4vw, 60px);
  appearance: none;
  border: 1px solid rgba(245, 244, 242, 0.42);
  background: rgba(14, 41, 35, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--sand);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1;
  cursor: pointer;
  transition: background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.slider__nav:hover {
  background: var(--bronze);
  border-color: var(--bronze);
  color: #fff;
}

.slider__nav--prev { left: clamp(14px, 2.4vw, 40px); }
.slider__nav--next { right: clamp(14px, 2.4vw, 40px); }

.slider__meta {
  margin-top: clamp(20px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px 24px;
}

.slider__caption {
  font-size: clamp(0.66rem, 0.86vw, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ink);
}

.slider__count {
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  color: var(--bronze);
  font-variant-numeric: tabular-nums;
}

.slider__rail {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.slider__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--bronze);
  transition: width .8s var(--ease-slow);
}

@media (prefers-reduced-motion: reduce) {
  .slider__track, .slider__bar { transition: none; }
}

/* --------------------------------------------------------------------------
   Amenities
   -------------------------------------------------------------------------- */

.amenity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

@media (max-width: 940px) { .amenity-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .amenity-grid { grid-template-columns: 1fr; } }

.amenity {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.amenity img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.5s var(--ease-slow);
}
.amenity:hover img { transform: scale(1.07); }

.amenity::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,41,35,.82) 0%, rgba(14,41,35,.26) 46%, transparent 72%);
}

.amenity__label {
  position: absolute;
  left: clamp(20px, 2vw, 30px);
  right: clamp(20px, 2vw, 30px);
  bottom: clamp(20px, 2vw, 28px);
  z-index: 2;
}

.amenity__label h3 {
  color: var(--sand);
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 300;
}

.amenity__label p {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(245, 244, 242, 0.78);
}

/* Plain amenity list */
.amenity-list {
  columns: 3;
  column-gap: clamp(30px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 860px) { .amenity-list { columns: 2; } }
@media (max-width: 520px) { .amenity-list { columns: 1; } }

.amenity-list li {
  break-inside: avoid;
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--line-light);
  position: relative;
  font-size: 0.9rem;
}

.amenity-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 22px;
  width: 12px; height: 1px;
  background: var(--bronze);
}

/* --------------------------------------------------------------------------
   Location
   -------------------------------------------------------------------------- */

.times {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
}

.times li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line-light);
}

.times__place { font-size: 0.93rem; }

.times__min {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  color: var(--sand);
  white-space: nowrap;
}

.times__min span {
  font-family: var(--sans);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bronze-lt);
  margin-left: 7px;
}

/* --------------------------------------------------------------------------
   Location map — a wide diagram with fine labels. Full-bleed on desktop; on
   phones, scaling it to 375px renders the type at ~2px, so it scrolls
   sideways at a legible height instead.
   -------------------------------------------------------------------------- */

/* The whole map always shows, uncropped and unscaled-away. Because its labels
   get small on a phone, a "view full" control opens it in a pannable viewer —
   the artwork itself is never altered. */
.loc-map {
  position: relative;
  width: 100vw;
  max-width: 100%;
  margin-left: calc(50% - 50vw);
}

.loc-map__scroll img {
  width: 100%;
  height: auto;
  display: block;
}

.loc-map__expand {
  position: absolute;
  right: clamp(14px, 2.2vw, 28px);
  bottom: clamp(14px, 2.2vw, 28px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(245, 244, 242, 0.4);
  background: rgba(14, 41, 35, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--sand);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.loc-map__expand:hover {
  background: var(--bronze);
  border-color: var(--bronze);
  color: #fff;
}
.loc-map__expand svg { width: 14px; height: 14px; flex: 0 0 auto; }

@media (max-width: 560px) {
  .loc-map__expand { padding: 10px 14px; letter-spacing: 0.18em; }
}

/* Full-size map viewer */
.map-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 22, 18, 0.97);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.map-viewer[hidden] { display: none; }
.map-viewer.is-open { opacity: 1; }

/* Pannable in both axes — the map is rendered well above viewport width. */
.map-viewer__pane {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  place-items: center;
  padding: clamp(56px, 8vw, 88px) 0;
}

.map-viewer__pane img {
  max-width: none;
  width: auto;
  height: auto;
  min-width: 900px;
}

@media (min-width: 1100px) {
  .map-viewer__pane img { min-width: 0; max-width: 94vw; }
}

.map-viewer__close {
  position: absolute;
  top: clamp(14px, 2.4vw, 30px);
  right: clamp(14px, 2.4vw, 30px);
  z-index: 2;
  width: 46px; height: 46px;
  appearance: none;
  border: 1px solid rgba(245, 244, 242, 0.28);
  background: rgba(8, 22, 18, 0.8);
  color: var(--sand);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.map-viewer__close:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }

body.map-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .map-viewer { transition: none; }
}

/* --------------------------------------------------------------------------
   Payment timeline
   -------------------------------------------------------------------------- */

.plan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (max-width: 780px) { .plan { grid-template-columns: 1fr; } }

.plan__step {
  background: var(--paper);
  padding: clamp(30px, 3.4vw, 50px) clamp(24px, 2.6vw, 38px);
  position: relative;
}

.plan__pct {
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1;
  color: var(--bronze);
}

.plan__when {
  margin-top: 16px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--ink);
}

.plan__detail { margin: 12px 0 0; font-size: 0.86rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: clamp(22px, 2.4vw, 30px) 0;
  font-family: var(--display);
  font-size: clamp(1.06rem, 1.5vw, 1.32rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.4;
  transition: color .4s var(--ease);
}
.faq__q:hover { color: var(--bronze); }

.faq__icon {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  position: relative;
  margin-top: 7px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--bronze);
  transition: transform .5s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .6s var(--ease);
}
.faq__a > div { padding-bottom: clamp(24px, 2.6vw, 32px); max-width: 76ch; }
.faq__a p { margin: 0 0 14px; }
.faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Enquiry form
   -------------------------------------------------------------------------- */

.form-shell {
  background: var(--midnight-2);
  padding: clamp(32px, 4vw, 60px);
  border: 1px solid rgba(245, 244, 242, 0.14);
  position: relative;
  z-index: 1;
}

.field { margin-bottom: 22px; }

.field label {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bronze-lt);
  margin-bottom: 10px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: rgba(245, 244, 242, 0.05);
  border: 1px solid rgba(245, 244, 242, 0.2);
  color: var(--sand);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  padding: 15px 17px;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder { color: rgba(245, 244, 242, 0.36); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--bronze);
  background: rgba(245, 244, 242, 0.09);
}

.field select option { background: var(--midnight); color: var(--sand); }

.field textarea { resize: vertical; min-height: 108px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.consent {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin: 26px 0;
  font-size: 0.76rem;
  line-height: 1.65;
  color: rgba(245, 244, 242, 0.66);
}
.consent input {
  width: 16px; height: 16px;
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--bronze);
}

.form-status {
  margin-top: 18px;
  font-size: 0.84rem;
  min-height: 1.4em;
}
.form-status.is-ok { color: var(--bronze-lt); }
.form-status.is-err { color: #e0a09a; }

/* intl-tel-input, restyled for the dark shell */
.iti { width: 100%; }
.iti__country-list { background: var(--midnight); color: var(--sand); }
.iti__country.iti__highlight { background: rgba(169, 133, 92, 0.3); }
.iti__dial-code { color: rgba(245, 244, 242, 0.6); }
.iti--separate-dial-code .iti__selected-flag { background: rgba(245, 244, 242, 0.06); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--midnight);
  color: rgba(245, 244, 242, 0.62);
  padding-block: clamp(52px, 6vw, 84px) clamp(28px, 3vw, 40px);
  position: relative;
  overflow: hidden;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--line-light);
}

@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; } }

.footer h4 {
  color: var(--sand);
  font-family: var(--sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-weight: 400;
  margin-bottom: 20px;
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; font-size: 0.85rem; }
.footer a:hover { color: var(--bronze-lt); }

.brand--footer { align-items: flex-start; }
.brand--footer .brand__mark { height: clamp(20px, 2.4vw, 28px); }
.brand--footer .brand__line { font-size: 0.6rem; align-self: center; }

.footer__bottom {
  padding-top: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  justify-content: space-between;
  font-size: 0.72rem;
  color: rgba(245, 244, 242, 0.42);
}

.disclaimer {
  margin-top: 26px;
  font-size: 0.7rem;
  line-height: 1.7;
  color: rgba(245, 244, 242, 0.4);
  max-width: 92ch;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__media img { animation: none; transform: none; }
  .starfield, .scroll-cue::after { animation: none; }
  .figure img, .amenity img, .res-card { transition: none; }
}

.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;
}

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Mobile corrections (found on the live site, 375px)
   -------------------------------------------------------------------------- */

/* The header CTA is hidden below 1040px, which left the open menu with no way
   to convert. Surface it inside the menu instead. */
.nav__cta { display: none; }

@media (max-width: 1040px) {
  .nav__cta {
    display: inline-flex;
    margin-top: 26px;
    padding: 17px 38px;
  }
  .header.is-stuck .nav .nav__cta { color: #fff; }
}

/* On a narrow screen the hero copy sits over the brightest part of the render,
   so the desktop wedge alone leaves the eyebrow unreadable. Give the scrim more
   body and tighten the tracking so the line stops wrapping. */
@media (max-width: 700px) {
  .hero__media::after {
    background:
      linear-gradient(to top,
        rgba(14, 41, 35, 0.9) 0%,
        rgba(14, 41, 35, 0.66) 34%,
        rgba(14, 41, 35, 0.34) 62%,
        rgba(14, 41, 35, 0.4) 100%);
  }

  .hero .eyebrow {
    letter-spacing: 0.22em;
    font-size: 0.62rem;
  }
}

/* ============================================================
   AL GHADEER PARKS — official Aldar content blocks
   Hero tagline, key-facts strip, price table, four pillars.
   ============================================================ */

.hero__tagline {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.4vw, 2.3rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--bronze-lt);
  margin: 0.35em 0 0.9em;
}

/* ---- Key facts strip ---- */
.factstrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: clamp(44px, 5vw, 72px) 0 0;
}
.factstrip__item {
  background: var(--paper);
  padding: clamp(20px, 2.6vw, 34px) clamp(14px, 1.8vw, 22px);
  text-align: center;
}
.factstrip dt {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 0.7em;
}
.factstrip dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
  line-height: 1.15;
  color: var(--midnight);
}

/* ---- Starting price table ---- */
.pricetable {
  margin: clamp(34px, 4vw, 54px) auto 0;
  max-width: 760px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.pricetable__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(18px, 2.4vw, 30px);
  background: var(--midnight);
  color: var(--bronze-lt);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pricetable__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
}
.pricetable__row:first-of-type { border-top: 0; }
.pricetable__unit {
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--ink);
}
.pricetable__unit b {
  display: inline-block;
  min-width: 3.4em;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bronze);
}
.pricetable__amt {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--midnight);
  white-space: nowrap;
}
.pricetable__foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 5vw, 64px);
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
  background: var(--sand);
}
.pricetable__foot div { display: flex; flex-direction: column; gap: 6px; }
.pricetable__foot span {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body);
}
.pricetable__foot strong {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 400;
  color: var(--midnight);
}

/* ---- Four pillars ---- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
}
.pillar { display: flex; flex-direction: column; }

/* Renders come at different natural ratios and are never cropped, so let the
   grid absorb the difference: each card spans two shared rows, which keeps the
   eyebrow/heading baselines aligned across a row while every image stays whole. */
@supports (grid-template-rows: subgrid) {
  .pillar-grid { grid-template-rows: auto; }
  .pillar-grid > .pillar {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    align-content: start;
  }
  .pillar__media { align-self: start; }
}
.pillar__media { overflow: hidden; background: var(--sand-2); }
.pillar__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar:hover .pillar__media img { transform: scale(1.04); }
.pillar__body { padding: clamp(20px, 2.4vw, 30px) 0 0; }
.pillar__eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.8em;
}
.pillar__body h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--midnight);
  margin: 0 0 0.6em;
}
.pillar__body p { margin: 0; color: var(--body); }

@media (max-width: 900px) {
  .factstrip { grid-template-columns: repeat(2, 1fr); }
  .factstrip__item:last-child { grid-column: span 2; }
}
@media (max-width: 860px) {
  .pillar-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .factstrip { grid-template-columns: 1fr; }
  .factstrip__item:last-child { grid-column: auto; }
  .pricetable__row { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar:hover .pillar__media img { transform: none; }
}

/* ---- Showcase film (streamed direct from asset.aldar.com) ---- */
.filmsec { padding-bottom: 0; }
.film {
  position: relative;
  width: 100%;
  margin-top: clamp(10px, 2vw, 24px);
  background: var(--midnight-2);
  overflow: hidden;
}
.film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--midnight-2);
}
.film.is-portrait .film__video {
  aspect-ratio: 9 / 16;
  max-height: 80vh;
  object-fit: contain;
}
/* controls stay hidden until the viewer starts it */
.film:not(.is-playing) .film__video::-webkit-media-controls { display: none !important; }

.film__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(14,41,35,0.32) 0%, rgba(14,41,35,0.58) 100%);
  color: var(--sand);
  font-family: var(--sans);
  transition: background 0.5s ease, opacity 0.45s ease;
}
.film__play:hover { background: linear-gradient(180deg, rgba(14,41,35,0.22) 0%, rgba(14,41,35,0.48) 100%); }
.film__play svg {
  width: clamp(58px, 7vw, 84px);
  height: clamp(58px, 7vw, 84px);
  padding: clamp(14px, 1.6vw, 20px);
  fill: var(--midnight);
  background: var(--bronze);
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.film__play:hover svg { transform: scale(1.07); }
.film__play span {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.film__play em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.14em;
  opacity: 0.72;
}
.film.is-playing .film__play { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .film__play svg, .film__play { transition: none; }
  .film__play:hover svg { transform: none; }
}

/* ---- Floating CTA bar (mobile / tablet) ----
   Sits below the map viewer (200) and the enquiry popup (9999) so both cover it
   without any extra state handling. */
.mcta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px clamp(14px, 4vw, 20px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(14, 41, 35, 0.96);
  border-top: 1px solid rgba(198, 170, 135, 0.28);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22);
  transform: translateY(110%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@supports (backdrop-filter: blur(10px)) {
  .mcta { background: rgba(14, 41, 35, 0.88); backdrop-filter: blur(10px); }
}
.mcta.is-up { transform: translateY(0); }

.mcta__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mcta__label {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  white-space: nowrap;
}
.mcta__price {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--sand);
  white-space: nowrap;
}
.mcta__btn {
  flex: 0 0 auto;
  padding: 13px 20px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .mcta { display: flex; }
  /* keep the last of the footer clear of the bar */
  .footer { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  .mcta__price { font-size: 1.12rem; }
  .mcta__btn { padding: 12px 15px; font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mcta { transition: none; }
}

/* ---- intl-tel-input: country dropdown above the enquiry popup ----
   On mobile the library detaches the country list and appends it to <body> as
   .iti--container (position:fixed, z-index:1060). The enquiry popup sits at
   9999, so at the library's default the dropdown opens *behind* the popup —
   open, but invisible and unclickable. Lift it above the popup.
   Because the list is no longer inside #enquiryFormPopup once detached, the
   popup's own light styling stops applying, so restate it here. */
/* The library's stylesheet is linked after this one, so a bare .iti--container
   would lose the tie on specificity. body > wins it without !important. */
body > .iti--container {
  z-index: 10000;
}
.iti--container .iti__country-list {
  background: #ffffff;
  color: var(--midnight);
  border: 1px solid rgba(198, 170, 135, 0.5);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(10, 23, 20, 0.22);
  text-align: left;
  /* No max-height here: on mobile the library deliberately renders this as a
     fullscreen country picker, which is the better phone UX. Leave it alone. */
}
.iti--container .iti__country.iti__highlight,
.iti--container .iti__country:hover { background: rgba(198, 170, 135, 0.22); }
.iti--container .iti__dial-code { color: rgba(10, 23, 20, 0.55); }
.iti--container .iti__divider { border-bottom-color: rgba(198, 170, 135, 0.4); }