/* Exclusive to html/index-discover-v12.html — do not share with other page versions. */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./fonts/playfair-display-400-sub.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/montserrat-400-sub.woff2") format("woff2");
}

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/cinzel-400-sub.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/inter-400-sub.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/source-sans-3.woff2") format("woff2");
}

/* Tokens — MOVED to assets/ds/01-tokens.css.

   The home page had its own palette under --font-* and --unveil-*, declared
   here, in a stylesheet only this page links. Both prefixes are now alias
   sets over the site's semantic tokens, so the film world and the paper world
   are two faces of one system rather than two systems.

   One value was consolidated in the move:
     --unveil-cream  #f5f5f0 → --em-text-on-inverse (#f5f2ec), which is the
     ink every other dark surface on the site already used. Three points
     apart, and the two met in the footer.

   --unveil-field stays here: it is this page's own photographic field, used
   nowhere else, and a token for one consumer is not a token. */
:root {
  --unveil-field: radial-gradient(
    ellipse 72% 58% at 50% 46%,
    var(--p-night-700) 0%,
    #080806 56%,
    var(--p-brand-black) 100%
  );
}

.site-header {
  color: var(--p-brand-white);
}

.site-header__bar {
  gap: 1.25rem;
}

.site-header__start {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 1.15rem;
}

.site-header__brand {
  font-family: var(--font-brand) !important;
  font-weight: 500 !important;
  font-size: clamp(1.2rem, 1.55vw, 1.5rem) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--p-brand-white);
}

.site-header__divider {
  display: none;
  width: 1px;
  height: 1.05rem;
  background: rgba(var(--em-rgb-white), 0.55);
  flex-shrink: 0;
}

.site-header__nav {
  display: none;
  align-items: center;
  gap: clamp(1rem, 1.7vw, 1.7rem);
}

.site-header__link {
  font-family: var(--font-nav) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--p-brand-white);
  opacity: 1;
  transition: opacity 0.25s ease;
}

.site-header__link:hover {
  opacity: 1;
}

.site-header__actions {
  gap: 0.95rem;
}

/* Glass pill per the Get-in-touch reference: frosted navy glass, soft white
   ring, wide-tracked type. Hover brightens the glass instead of filling. */
.site-header__cta {
  font-family: var(--font-nav) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--p-brand-white);
  border: 1px solid rgba(var(--em-rgb-white), 0.72);
  border-radius: 999px;
  background: rgba(var(--em-rgb-white), 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  min-height: 2.15rem;
  padding: 0.55rem 1.5rem;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.site-header__cta:hover {
  background: rgba(var(--em-rgb-white), 0.26);
  color: var(--p-brand-white);
  border-color: rgba(var(--em-rgb-white), 0.95);
}

.site-lang {
  position: relative;
}

.site-lang__btn {
  font-family: var(--font-nav) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--p-brand-white);
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.site-lang__panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 7.5rem;
  padding: 0.35rem 0;
  background: var(--em-bg-inverse);
  border: 1px solid rgba(var(--em-rgb-white), 0.16);
  z-index: var(--z-sticky);
}

.site-lang__opt {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  border: 0;
  background: none;
  color: var(--p-brand-white);
  font-family: var(--font-nav);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-lang__opt:hover,
.site-lang__opt[aria-selected="true"] {
  background: rgba(var(--em-rgb-white), 0.06);
}

.site-header button[aria-label="Menu"] {
  display: none !important;
}

@media (min-width: 1024px) {
  .site-header__nav {
    display: flex;
  }

  .site-header__divider {
    display: block;
  }

  .site-header button[aria-label="Menu"] {
    display: none;
  }
}

@media (min-width: 1280px) {
  .site-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.site-header__mobile {
  border-top: 1px solid rgba(var(--em-rgb-white), 0.12);
  background: rgba(0, 0, 0, 0.96);
  color: var(--em-text-on-inverse);
  padding: 1.15rem 1.25rem 1.4rem;
}

.site-header__mobile-list {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.site-header__mobile-list a {
  font-family: var(--font-nav);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--em-text-on-inverse);
  text-decoration: none;
}

/* Banner film fills the hero at native scale — no oversized layer crop. */
body.addr-search-page .hero-shutter__layer {
  inset: 0;
}

body.addr-search-page .hero-shutter__poster,
body.addr-search-page .hero-shutter__layer--video video {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
  transform: none;
}

/* Address-search variant: glass shell for the Address-style bar. */
body.addr-search-page .banner-search--address.banner-search--hero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

body.addr-search-page .banner-search--address.banner-search--hero {
  --search-inset: 0.4rem;
}

body.addr-search-page .banner-search--address.banner-search--hero .banner-search__grid {
  /* Smoky neutral glass per the reference: the scene reads through with only
     a light darkening — no color tint, gentle blur */
  position: relative;
  background: rgba(var(--em-rgb-night), 0.26) !important;
  border: 1px solid rgba(var(--em-rgb-white), 0.22) !important;
  border-radius: 999px !important;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  padding: var(--search-inset) !important;
  align-items: stretch;
}

/* Same inset on every side: first-field text starts at --search-inset, and the
   gold button sits the same distance from the top, bottom, and trailing edge.
   Base styles still add .7rem on fields — kill that so Community is not shoved in. */
body.addr-search-page .banner-search--hero .banner-search__field {
  padding-block: 0.18rem 0.14rem !important;
  padding-inline: 0.7rem !important;
}

body.addr-search-page .banner-search--hero .banner-search__field:first-of-type {
  padding-inline-start: 0 !important;
}

body.addr-search-page .banner-search--hero .banner-search__actions {
  align-items: stretch;
  padding: 0;
}

body.addr-search-page .banner-search--hero .banner-search__field select {
  padding-inline-start: 0 !important;
}

body.addr-search-page .banner-search--hero .banner-search__filter {
  width: 2.15rem;
  min-height: 0;
}

body.addr-search-page .banner-search--hero .banner-search__submit {
  align-self: stretch;
  height: auto;
  min-height: 0 !important;
  padding: 0 1.2rem;
  font-size: 10.5px;
}

/* Morph ring: clip-path clips the element border away, so an overlay draws the
   circle's edge — gold through the morph, turning white as it meets the header
   search icon. --morph-x / --morph-blend are set per-frame by the dock script. */
body.addr-search-page .banner-search--address.banner-search--hero .banner-search__grid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: var(--morph-x, 0px);
  z-index: 3;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, rgba(var(--em-rgb-white), 0.55) calc(var(--morph-blend, 0) * 100%), #bfa164);
  opacity: 0;
  pointer-events: none;
}

body.addr-search-page .hero-search-dock.is-dock-morphing .banner-search--address.banner-search--hero .banner-search__grid::after {
  opacity: 1;
}

body.addr-search-page .hero-search-dock.is-dock-morphing .banner-search--address.banner-search--hero .banner-search__grid {
  border-color: transparent !important;
}

body.addr-search-page .hero-search-dock.is-dock-stuck .banner-search--address .banner-search__grid {
  background: rgba(var(--em-rgb-night), 0.55) !important;
  border-color: rgba(var(--em-rgb-white), 0.18) !important;
  box-shadow: 0 14px 34px rgba(11, 10, 18, 0.28) !important;
}

@media (max-width: 899px) {
  body.addr-search-page .hero-search-dock {
    padding: 0 1.35rem;
    bottom: max(1.35rem, env(safe-area-inset-bottom, 0px));
  }

  body.addr-search-page .hero-search-dock__inner {
    width: 100%;
  }

  body.addr-search-page .banner-search--address.banner-search--hero .banner-search__grid {
    padding: 0.85rem 1.25rem !important;
    border-radius: 999px !important;
  }

  body.addr-search-page .site-search-panel__sheet {
    width: min(56rem, calc(100vw - 2.5rem));
    padding: 1.25rem 1.2rem 1.4rem;
  }
}

/* Unveil copy zooms through the center glow, then full-screen slides take over. */
body.addr-search-page .launch-scroll--flip {
  overflow: visible;
}

.launch-scroll--flip {
  --zoom: 0;
  --through: 0;
  --ax: 50%;
  --ay: 50%;
}

/* Intro pin-and-cover: the track is one viewport taller than the pin, and the
   panel stack (margin-top: -100svh below) is pulled up over that extra span.
   Net flow height is unchanged, but while the first slide rises the intro
   stays pinned underneath it — the wipe parallax (--wipe veil/stage drift)
   plays against a stationary intro instead of one scrolling away. */
.launch-flip-track {
  position: relative;
  height: calc(100svh + 100vh);
}

.launch-scroll {
  --unveil-ground: var(--p-brand-black);
  --unveil-ivory: var(--unveil-cream);
  --unveil-champagne: var(--unveil-gold);
  --unveil-beige: var(--unveil-muted);
  --unveil-heading: var(--unveil-cream);
  --unveil-bg: var(--unveil-field);
}

.launch-scroll__kicker,
.life-intro__kicker,
.dest-mosaic__kicker {
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.26em !important;
  /* EYEBROW · brand neutral on black, not gold. */
  color: var(--em-text-eyebrow-neutral-on-inverse) !important;
}

.launch-scroll__heading,
.life-intro__heading,
.dest-mosaic__heading {
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif !important;
  font-weight: 400 !important;
}

.launch-scroll__heading {
  font-size: clamp(28px, 3.6vw, 50px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.004em !important;
  text-transform: none !important;
  color: var(--unveil-cream) !important;
}

.launch-scroll__lede {
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif !important;
  font-size: clamp(14.5px, 1.15vw, 16.5px) !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
  letter-spacing: 0.004em !important;
  color: var(--p-brand-white) !important;
}

.life-intro__lede,
.dest-mosaic__lede {
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif !important;
}

.launch-scroll__rule,
.life-intro__rule,
.dest-mosaic__rule {
  background: var(--unveil-gold) !important;
}

.fold-cue {
  --cue-ink: rgba(var(--em-rgb-grey-light), 0.45);
  --cue-ink-lit: var(--unveil-cream);
  --cue-track: rgba(var(--em-rgb-grey-light), 0.1);
  --cue-track-lit: rgba(var(--em-rgb-grey-light), 0.21);
  --cue-trace: rgba(var(--em-rgb-grey-light), 0.62);
  --cue-ease: var(--em-ease-panel);
  margin: clamp(2.75rem, 6vh, 4.25rem) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.7rem, 1.5vh, 1rem);
  padding: 0.5rem 1.25rem 0;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.fold-cue__label {
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--cue-ink);
  transition: color 0.55s var(--cue-ease);
}

.fold-cue__track {
  position: relative;
  width: 1px;
  height: clamp(2.75rem, 5.5vh, 3.75rem);
  background: var(--cue-track);
  transform-origin: 50% 0%;
  transition:
    transform 0.6s var(--cue-ease),
    background-color 0.55s var(--cue-ease);
}

.fold-cue__trace {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--em-rgb-grey-light), 0) 0%,
    var(--cue-trace) 100%
  );
  transform: scaleY(0);
  transform-origin: 50% 0%;
  will-change: transform;
}

@media not all and (prefers-reduced-motion: reduce) {
  :is(
      .launch-scroll__intro,
      .life-intro,
      .dest-mosaic__intro
    ).is-inview
    .fold-cue__trace {
    animation: fold-cue-draw 3.9s var(--cue-ease) infinite;
  }
}

@keyframes fold-cue-draw {
  0% {
    transform: scaleY(0);
    transform-origin: 50% 0%;
  }
  44% {
    transform: scaleY(1);
    transform-origin: 50% 0%;
  }
  56% {
    transform: scaleY(1);
    transform-origin: 50% 100%;
  }
  94% {
    transform: scaleY(0);
    transform-origin: 50% 100%;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 50% 100%;
  }
}

.fold-cue:hover .fold-cue__label,
.fold-cue:focus-visible .fold-cue__label {
  color: var(--cue-ink-lit);
}

.fold-cue:hover .fold-cue__track,
.fold-cue:focus-visible .fold-cue__track {
  background: var(--cue-track-lit);
  transform: scaleY(1.12);
}

.fold-cue:focus-visible {
  outline: 1px solid rgba(var(--em-rgb-grey-light), 0.46);
  outline-offset: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .fold-cue__trace {
    animation: none;
    transform: scaleY(1);
  }

  .fold-cue__track {
    transition: none;
  }

  .fold-cue:hover .fold-cue__track,
  .fold-cue:focus-visible .fold-cue__track {
    transform: none;
  }
}

.launch-flip-pin {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100svh;
  overflow: hidden;
  background: var(--p-brand-black);
}

.launch-flip__under {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #0b0a12;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.launch-scroll--flip .launch-scroll__intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  height: 100%;
  padding: 0;
  background: transparent;
  opacity: 1;
  pointer-events: none;
}

.launch-flip__veil {
  position: absolute;
  inset: 0;
  background: var(--unveil-field);
  -webkit-mask-image: none;
  mask-image: none;
  transform: none;
}

.launch-flip__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: clamp(5.5rem, 12vh, 8rem) clamp(1.25rem, 5vw, 4rem);
  transform: none;
}

.launch-scroll--flip {
  --rise: 0;
}

.launch-scroll--flip .launch-scroll__kicker,
.launch-scroll--flip .launch-scroll__heading,
.launch-scroll--flip .launch-scroll__rule,
.launch-scroll--flip .launch-scroll__lede,
.launch-scroll--flip .launch-scroll__cue {
  /* 0.62 divisor: even the last-delayed element (0.32) reaches 1 by rise=1 */
  --local: clamp(0, calc((var(--rise, 0) - var(--delay, 0)) / 0.62), 1);
  opacity: var(--local);
  filter: blur(calc((1 - var(--local)) * 14px));
  transform: translate3d(0, calc((1 - var(--local)) * 13.5rem), 0);
  transition: none;
  will-change: transform, opacity, filter;
}

.launch-scroll--flip .launch-scroll__kicker { --delay: 0; }
.launch-scroll--flip .launch-scroll__heading { --delay: 0.08; }
.launch-scroll--flip .launch-scroll__rule { --delay: 0.16; }
.launch-scroll--flip .launch-scroll__lede { --delay: 0.24; }
.launch-scroll--flip .launch-scroll__cue { --delay: 0.32; }

.launch-scroll--flip.is-flipped .launch-scroll__intro-inner {
  visibility: hidden;
}

.launch-scroll--flip .launch-scroll__stack {
  margin-top: -100svh;
  position: relative;
  z-index: 3;
}

/* Full-panel wash makes the film look dull. Legibility lives on the copy
   ::before only, hugging the text block. */
.launch-scroll--cover .launch-scroll__scrim {
  display: none;
  background: none;
}

/* Plant the film. Sticky slide-over handles the wipe — no counter-drift. */
.launch-scroll.launch-scroll--cover .launch-scroll__visual {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  inset: auto 0 auto 0;
  width: 100%;
  height: 100%;
  transform: none !important;
  will-change: auto;
  backface-visibility: hidden;
}

.launch-scroll__visual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.launch-scroll.launch-scroll--cover .launch-scroll__panel .launch-scroll__visual img,
.launch-scroll.launch-scroll--cover .launch-scroll__panel.is-inview .launch-scroll__visual img,
.launch-scroll.launch-scroll--cover .launch-scroll__panel .launch-scroll__visual video,
.launch-scroll.launch-scroll--cover .launch-scroll__panel.is-inview .launch-scroll__visual video {
  opacity: 1;
  filter: none;
  transform: none !important;
  transition: none;
}

.launch-scroll--cover .launch-scroll__panel {
  --lock: 0px;
}

.launch-scroll--cover .launch-scroll__panel .launch-scroll__copy,
.launch-scroll--cover .launch-scroll__panel.is-inview .launch-scroll__copy,
.launch-flip__slide-copy .launch-scroll__copy {
  isolation: isolate;
  left: clamp(1.5rem, 4vw, 3.25rem);
  right: auto;
  width: max-content;
  max-width: min(22rem, 38vw);
  padding: 0.75rem 0.95rem 0.85rem 1rem;
  color: var(--p-brand-white);
  text-shadow: 0 1px 16px rgba(8, 7, 10, 0.55);
  transform: translate3d(0, -50%, 0);
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.launch-scroll.launch-scroll--cover .launch-scroll__frame::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--grad-end, min(20rem, 34vw));
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(8, 7, 10, 0.5) 0%,
    rgba(8, 7, 10, 0.28) 48%,
    rgba(8, 7, 10, 0.08) 78%,
    transparent 100%
  );
}

.launch-scroll--cover .launch-scroll__panel .launch-scroll__copy::before,
.launch-flip__slide-copy .launch-scroll__copy::before {
  content: none;
}

/* Launch slide copy: stacked index / type / title / community / from / underlined CTA */
.launch-scroll--cover .launch-scroll__index,
.launch-flip__slide-copy .launch-scroll__index,
.launch-scroll--cover .launch-scroll__type,
.launch-flip__slide-copy .launch-scroll__type {
  display: none;
}

.launch-scroll--cover .launch-scroll__name,
.launch-flip__slide-copy .launch-scroll__name {
  margin: 0;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-weight: 400;
  font-size: clamp(2.35rem, 4.6vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--p-brand-white);
}

.launch-scroll--cover .launch-scroll__place,
.launch-flip__slide-copy .launch-scroll__place {
  margin: 0.55rem 0 0;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--p-brand-white);
}

.launch-scroll--cover .launch-scroll__place::before,
.launch-flip__slide-copy .launch-scroll__place::before {
  content: "";
  display: block;
  width: 1.4rem;
  height: 1px;
  margin: 0 0 0.55rem;
  background: rgba(var(--em-rgb-grey-light), 0.5);
}

.launch-scroll--cover .launch-scroll__facts,
.launch-flip__slide-copy .launch-scroll__facts {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1.1rem 0 0;
  padding: 0;
}

.launch-scroll--cover .launch-scroll__facts > div,
.launch-flip__slide-copy .launch-scroll__facts > div {
  grid-column: auto;
}

.launch-scroll--cover .launch-scroll__facts dt,
.launch-flip__slide-copy .launch-scroll__facts dt {
  margin: 0 0 0.35rem;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--p-brand-white);
}

.launch-scroll--cover .launch-scroll__facts dd,
.launch-scroll--cover .launch-scroll__facts dd.launch-scroll__price,
.launch-flip__slide-copy .launch-scroll__facts dd,
.launch-flip__slide-copy .launch-scroll__facts dd.launch-scroll__price {
  margin: 0;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--p-brand-white);
}

.launch-scroll--cover .launch-scroll__cta,
.launch-flip__slide-copy .launch-scroll__cta {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: 1.1rem;
  padding: 0 0 0.28rem;
  border: 0;
  border-bottom: 1px solid var(--p-brand-white);
  background: none;
  color: var(--p-brand-white);
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.launch-scroll--cover .launch-scroll__cta:hover,
.launch-flip__slide-copy .launch-scroll__cta:hover {
  background: none;
  border-color: rgba(var(--em-rgb-white), 0.7);
  color: rgba(var(--em-rgb-white), 0.82);
}

.launch-scroll.launch-scroll--cover .launch-scroll__panel {
  --copy-rise: 0;
}

.launch-scroll.launch-scroll--cover .launch-scroll__panel .launch-scroll__copy > *,
.launch-scroll.launch-scroll--cover .launch-scroll__panel.is-inview .launch-scroll__copy > * {
  --copy-local: clamp(0, calc((var(--copy-rise, 0) - var(--copy-delay, 0)) / 0.55), 1);
  --copy-ease: calc(var(--copy-local) * var(--copy-local) * (3 - 2 * var(--copy-local)));
  opacity: var(--copy-ease);
  filter: blur(calc((1 - var(--copy-ease)) * 10px));
  transform: translate3d(0, calc((1 - var(--copy-ease)) * 2.75rem), 0);
  transition: none;
}

.launch-scroll.launch-scroll--cover .launch-scroll__type { --copy-delay: 0; }
.launch-scroll.launch-scroll--cover .launch-scroll__name { --copy-delay: 0.04; }
.launch-scroll.launch-scroll--cover .launch-scroll__place { --copy-delay: 0.12; }
.launch-scroll.launch-scroll--cover .launch-scroll__facts { --copy-delay: 0.2; }
.launch-scroll.launch-scroll--cover .launch-scroll__cta { --copy-delay: 0.3; }

@media (min-width: 800px) {
  .launch-scroll--cover .launch-scroll__facts,
  .launch-flip__slide-copy .launch-scroll__facts {
    display: flex;
    grid-template-columns: none;
  }

  .launch-scroll--cover .launch-scroll__facts > div:last-child,
  .launch-flip__slide-copy .launch-scroll__facts > div:last-child {
    grid-column: auto;
  }
}

@media (max-width: 899px) {
  .launch-scroll--cover .launch-scroll__panel .launch-scroll__copy,
  .launch-scroll--cover .launch-scroll__panel.is-inview .launch-scroll__copy,
  .launch-flip__slide-copy .launch-scroll__copy {
    top: auto !important;
    bottom: calc(6.15rem + env(safe-area-inset-bottom, 0px)) !important;
    left: 1.15rem;
    right: auto;
    width: max-content;
    max-width: calc(100% - 2.3rem);
    padding: 0;
    text-shadow: 0 1px 14px rgba(8, 7, 10, 0.55);
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .launch-scroll.launch-scroll--cover .launch-scroll__frame::after {
    top: auto;
    bottom: 0;
    height: 46%;
    width: 100%;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(8, 7, 10, 0.12) 38%,
      rgba(8, 7, 10, 0.38) 100%
    );
  }

  .launch-scroll--cover .launch-scroll__index,
  .launch-flip__slide-copy .launch-scroll__index {
    display: none;
  }

  .launch-scroll--cover .launch-scroll__type,
  .launch-flip__slide-copy .launch-scroll__type {
    display: block;
    margin: 0 0 0.45rem;
    font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--p-brand-white);
  }

  .launch-scroll--cover .launch-scroll__name,
  .launch-flip__slide-copy .launch-scroll__name {
    margin: 0;
    font-size: clamp(2.05rem, 9.5vw, 2.55rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .launch-scroll--cover .launch-scroll__place,
  .launch-flip__slide-copy .launch-scroll__place {
    margin: 0.7rem 0 0;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .launch-scroll--cover .launch-scroll__place::before,
  .launch-flip__slide-copy .launch-scroll__place::before {
    display: block;
    width: 2.15rem;
    height: 1px;
    margin: 0 0 0.7rem;
    background: rgba(var(--em-rgb-grey-light), 0.62);
  }

  .launch-scroll--cover .launch-scroll__facts,
  .launch-flip__slide-copy .launch-scroll__facts {
    margin: 1.05rem 0 0;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
  }

  .launch-scroll--cover .launch-scroll__facts dt,
  .launch-flip__slide-copy .launch-scroll__facts dt {
    display: block;
    margin: 0 0 0.28rem;
    font-size: 0.58rem;
    letter-spacing: 0.22em;
  }

  .launch-scroll--cover .launch-scroll__facts dd,
  .launch-scroll--cover .launch-scroll__facts dd.launch-scroll__price,
  .launch-flip__slide-copy .launch-scroll__facts dd,
  .launch-flip__slide-copy .launch-scroll__facts dd.launch-scroll__price {
    font-size: 1.02rem;
    font-weight: 500;
    white-space: nowrap;
  }

  .launch-scroll.launch-scroll--cover .launch-scroll__cta,
  .launch-scroll--cover .launch-flip__slide-copy .launch-scroll__cta {
    margin: 1.15rem 0 0;
    min-height: 0;
    padding: 0 0 0.28rem;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    white-space: nowrap;
  }

  html[dir="rtl"] .launch-scroll--cover .launch-scroll__panel .launch-scroll__copy,
  html[dir="rtl"] .launch-scroll--cover .launch-scroll__panel.is-inview .launch-scroll__copy,
  html[dir="rtl"] .launch-flip__slide-copy .launch-scroll__copy {
    left: auto;
    right: 1.15rem;
    align-items: flex-start;
  }

  .launch-scroll.launch-scroll--cover .launch-scroll__panel .launch-scroll__copy > *,
  .launch-scroll.launch-scroll--cover .launch-scroll__panel.is-inview .launch-scroll__copy > * {
    --copy-delay: 0;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

.launch-scroll--flip.is-flipped .launch-flip__slide-copy {
  visibility: hidden;
  opacity: 0 !important;
}

.launch-scroll--flip.is-flipped .launch-flip-pin {
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
}

.launch-flip__slide-copy {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.launch-flip__slide-copy .launch-scroll__copy {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3.25rem);
  right: auto;
  top: 50svh;
  bottom: auto;
  z-index: 4;
  width: max-content;
  max-width: min(22rem, 38vw);
  padding: 0.75rem 0.95rem 0.85rem 1rem;
  transform: translate3d(0, -50%, 0);
  opacity: 1;
  filter: none;
}

.launch-flip__slide-copy .launch-scroll__copy > * {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

.launch-scroll--flip.is-revealing .launch-flip-pin,
.launch-scroll--flip.is-flipped .launch-flip-pin {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .launch-scroll--flip {
    --zoom: 0;
    --through: 0;
    --rise: 1;
  }

  .launch-scroll.launch-scroll--cover .launch-scroll__panel {
    --copy-rise: 1;
  }

  .launch-scroll.launch-scroll--cover .launch-scroll__panel .launch-scroll__copy > *,
  .launch-scroll.launch-scroll--cover .launch-scroll__panel.is-inview .launch-scroll__copy > * {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .launch-flip-track {
    height: auto;
  }

  .launch-flip-pin {
    position: relative;
    height: auto;
  }

  .launch-flip__under,
  .launch-flip__veil {
    display: none;
  }

  .launch-scroll--flip .launch-scroll__intro {
    position: relative;
    height: auto;
    min-height: 100svh;
    padding: clamp(5.5rem, 12vh, 8rem) clamp(1.25rem, 5vw, 4rem);
    background: var(--unveil-bg, #12100e);
    opacity: 1;
  }

  .launch-scroll--flip .launch-scroll__stack {
    margin-top: 0;
  }

  .launch-scroll--flip .launch-scroll__intro.is-inview :is(
    .launch-scroll__kicker,
    .launch-scroll__heading,
    .launch-scroll__words,
    .launch-scroll__rule,
    .launch-scroll__lede,
    .launch-scroll__cue
  ) {
    opacity: 1;
  }
}

/* —— Legacy vision: cream stats scene after Featured Communities —— */
.legacy-vision {
  --lv-cream: var(--em-text-on-inverse);
  --lv-ink: #17161a;
  --lv-mute: #6b675f;
  --lv-line: rgba(23, 22, 26, 0.14);
  --lv-gold: var(--em-text-eyebrow-neutral);
  --lv-ease: var(--em-ease-exit);
  --enter: 0;
  position: relative;
  z-index: 4;
  background: var(--lv-cream);
  color: var(--lv-ink);
  scroll-margin-top: 4.5rem;
}

.legacy-vision__track {
  height: auto;
}

.legacy-vision__pin {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--lv-cream);
  padding: 6.5rem 0 11.5rem;
  box-sizing: border-box;
}

.legacy-vision__inner {
  width: min(72rem, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: 0;
  text-align: center;
}

.legacy-vision__heading {
  margin: 0;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-weight: 400;
  font-size: clamp(1.85rem, 4.4vw, 3.15rem);
  line-height: 1.15;
  /* Caps wanted the air; sentence case does not. This is .converse__heading's
     tracking, which is the same face at the same size. */
  letter-spacing: -0.02em;
  color: var(--lv-ink);
  text-wrap: balance;
}

.legacy-vision__lede {
  margin: 1.35rem auto 0;
  max-width: 38rem;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--lv-mute);
}

.legacy-vision__rule {
  width: 3.25rem;
  height: 1px;
  margin: 2.1rem auto 0;
  background: var(--lv-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s var(--lv-ease) 0.18s;
}

.legacy-vision.is-inview .legacy-vision__rule {
  transform: scaleX(1);
}

.legacy-vision [data-legacy-rise] {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  filter: blur(14px);
  transition:
    opacity 1.15s var(--lv-ease) calc(var(--i, 0) * 90ms),
    transform 1.15s var(--lv-ease) calc(var(--i, 0) * 90ms),
    filter 1.15s var(--lv-ease) calc(var(--i, 0) * 90ms);
}

.legacy-vision.is-inview [data-legacy-rise] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.legacy-vision__stats[data-legacy-rise],
.legacy-vision.is-inview .legacy-vision__stats[data-legacy-rise] {
  transform: none;
}

.legacy-vision__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.1rem 0;
  margin: 2.75rem auto 0;
  max-width: 64rem;
}

.legacy-vision__stat {
  position: relative;
  padding: 0 1.25rem;
  margin: 0;
}

.legacy-vision__stat dt {
  margin: 0;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-size: clamp(30px, 3.5vw, 62px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.008em;
  color: var(--lv-ink);
}

.legacy-vision__num {
  display: inline-grid;
  justify-items: center;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-kerning: none;
  white-space: nowrap;
}

.legacy-vision__num-ghost {
  visibility: hidden;
  white-space: nowrap;
}

.legacy-vision__num-live {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
}

.lv-digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

.lv-digit__window {
  display: block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}

.lv-digit.is-spinning .lv-digit__window {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--p-brand-black) 22%,
    var(--p-brand-black) 78%,
    transparent 100%
  );
}

.lv-digit__reel {
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform, filter;
  transform: translate3d(0, 0, 0);
}

.lv-digit.is-spinning .lv-digit__reel {
  filter: blur(0.18em);
}

.lv-digit__reel i {
  display: block;
  min-width: 0.58em;
  height: 1em;
  line-height: 1;
  font-style: normal;
  font-weight: inherit;
  text-align: center;
}

.lv-sep,
.lv-affix {
  display: inline-block;
  line-height: 1;
}

.lv-sep {
  padding: 0 0.04em;
}

.legacy-vision__stat dd {
  margin: 0.7rem 0 0;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lv-mute);
}

.legacy-vision__stat + .legacy-vision__stat::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 18%;
  left: 0;
  width: 1px;
  background: var(--lv-line);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.9s var(--lv-ease) 0.42s;
}

.legacy-vision.is-inview .legacy-vision__stat + .legacy-vision__stat::before {
  transform: scaleY(1);
}

.legacy-vision__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(2.4rem, 5vh, 3.25rem);
  min-height: 3rem;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--lv-ink);
  background: transparent;
  color: var(--lv-ink);
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.legacy-vision__cta:hover {
  background: rgba(128,128,128,.14);
}

@media (min-width: 768px) {
  .legacy-vision__stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 3.25rem;
  }

  .legacy-vision__stat {
    padding: 0 1.5rem;
  }

  .legacy-vision__stat:nth-child(2)::before {
    display: block;
  }
}

@media (max-width: 767px) {
  .legacy-vision {
    scroll-margin-top: 0;
  }

  .legacy-vision__track {
    height: 100svh;
    height: 100dvh;
  }

  .legacy-vision__pin {
    position: relative;
    min-height: 100svh;
    min-height: 100dvh;
    height: 100svh;
    height: 100dvh;
    clip-path: none;
    padding: 5.5rem 1.15rem 2.1rem;
  }

  .legacy-vision__inner {
    width: 100%;
  }

  .legacy-vision__heading {
    font-size: clamp(1.5rem, 7vw, 2.05rem);
    letter-spacing: -0.02em;
  }

  .legacy-vision__lede {
    margin-top: 1rem;
    max-width: 22.5rem;
    font-size: 0.92rem;
  }

  .legacy-vision__rule {
    margin-top: 1.45rem;
  }

  .legacy-vision__stats {
    gap: 1.55rem 0;
    margin-top: 1.75rem;
  }

  .legacy-vision__stat {
    padding: 0 0.85rem;
  }

  .legacy-vision__stat dt {
    font-size: clamp(1.2rem, 5.4vw, 1.7rem);
  }

  .legacy-vision__cta {
    margin-top: 1.75rem;
  }

  .legacy-vision__stat:nth-child(odd)::before {
    display: none;
  }
}

/* Title stays planted while the next scene slides over it. The stack
   itself covers the previous page section (last launch / last community). */
.cover-stack {
  position: relative;
  isolation: isolate;
}

.cover-stack > :first-child {
  position: sticky;
  top: 0;
  z-index: 1;
}

.cover-stack > :last-child {
  position: relative;
  z-index: 2;
}

/* Dark unveil-style intro before communities / destinations. */
.life-intro {
  --rise: 0;
  --li-ground: var(--p-brand-black);
  --li-ivory: var(--unveil-cream);
  --li-champagne: var(--unveil-gold);
  --li-beige: var(--unveil-muted);
  --li-heading: var(--unveil-cream);
  --li-ease: var(--em-ease-exit);
  --li-bg: var(--unveil-field);
  position: relative;
  z-index: 1;
  min-height: 100svh;
  height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  background-color: var(--p-brand-black);
  background: var(--li-bg);
  color: var(--li-ivory);
  padding: clamp(5.5rem, 12vh, 8rem) clamp(1.25rem, 5vw, 4rem);
  box-sizing: border-box;
  overflow: hidden;
}

.life-intro__inner {
  width: min(72rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.life-intro__kicker,
.life-intro__heading,
.life-intro__rule,
.life-intro__lede,
.life-intro__cue {
  --local: clamp(0, calc((var(--rise, 0) - var(--delay, 0)) / 0.62), 1);
  opacity: var(--local);
  filter: blur(calc((1 - var(--local)) * 14px));
  transform: translate3d(0, calc((1 - var(--local)) * 13.5rem), 0);
  transition: none;
  will-change: transform, opacity, filter;
}

.life-intro__kicker { --delay: 0; }
.life-intro__heading { --delay: 0.08; }
.life-intro__rule { --delay: 0.16; }
.life-intro__lede { --delay: 0.24; }
.life-intro__cue { --delay: 0.32; }

.life-intro__kicker {
  margin: 0 0 1.35rem;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--li-champagne);
}

.life-intro__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-weight: 400;
  font-size: clamp(1.85rem, 4.8vw, 3.75rem);
  line-height: 1.15;
  /* Matches .dest-mosaic__heading — same face, same 3.75rem ceiling. */
  letter-spacing: -0.015em;
  color: var(--li-heading);
  text-wrap: balance;
}

.life-intro__rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: 1.75rem;
  background: var(--li-champagne);
}

.life-intro__lede {
  margin: 1.5rem 0 0;
  width: min(40rem, 92%);
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: clamp(0.95rem, 1.35vw, 1.05rem);
  line-height: 1.85;
  color: var(--p-brand-white);
}

.cover-stack .comm-collage {
  padding-top: clamp(4.5rem, 10vw, 8rem);
}

.comm-collage__block:first-child .comm-collage__tile--b img {
  object-position: center top;
}

.comm-collage__block:nth-child(2) .comm-collage__tile--b img {
  object-position: center 56%;
}

.comm-collage__block:nth-child(3) .comm-collage__tile--a img {
  object-position: center 42%;
}

.comm-collage__block:nth-child(3) .comm-collage__tile--b img {
  object-position: 48% 72%;
}

.comm-collage__block:nth-child(3) .comm-collage__tile--c img {
  object-position: center 38%;
}

.comm-collage__caption {
  display: none;
}

[data-dest-cover] + .legacy-vision .legacy-vision__pin {
  padding-top: clamp(2.5rem, 6vw, 5rem);
}

/* Destination mosaic: title stays planted, then the scene slides over it.

   The brand film opens full screen and settles whole (DESIGN-STANDARDS §22:
   Brand Growth, 2026-10-01, then the user's ruling of 2026-10-02 that the
   opening frame fills the screen). Seated it is never cropped. Its slot is the film's own 16:9, so the
   collage is one band, side · film · side, exactly as tall as the film, and
   the two tiles in each side column share that height. Upright screens stack
   it instead: two tiles, the film at full width, two tiles. */
.dest-mosaic {
  --dm-gap: 0.42rem;
  /* The stage: the screen below the header bar, and above the phone dock
     below 1024. The grid is laid out inside it and the film opens on it, so
     neither ever runs under the bar. */
  --dm-top: calc(4.25rem + var(--dm-gap));
  --dm-foot: var(--dm-gap);
  /* The film column, counted in side columns. 4 gives the film two thirds of
     the band and makes each side tile 8:9 — close to the portrait masters. */
  --dm-film: 4;
  /* The film's opening frame: the whole screen below the bar, edge to edge
     (and above the phone dock below 1024). It covers it, but never at more
     than 1.25x its contained size, so at least 80% of the picture is always
     on screen — only a screen wider than ~2.2:1 shows black either side. */
  --dm-open-top: var(--em-header-height, 72px);
  --dm-open-foot: 0px;
  --dm-open-max: 1.25;
  --dm-ink: var(--p-brand-black);
  --li-ground: var(--p-brand-black);
  --li-ivory: var(--unveil-cream);
  --li-champagne: var(--unveil-gold);
  --li-beige: var(--unveil-muted);
  --li-heading: var(--unveil-cream);
  --li-ease: var(--em-ease-exit);
  --p: 0;
  --lock: 0px;
  /* Until app.js measures the slot: where it sits at 1440 x 900. */
  --slot-t: 24.3;
  --slot-l: 17.3;
  --slot-w: 65.4;
  --slot-h: 58.9;
  --slot-r: 10;
  position: relative;
  z-index: 2;
  background: var(--dm-ink);
  color: var(--em-text-on-inverse);
}

.dest-mosaic__track {
  position: relative;
  z-index: 2;
  height: calc(100svh + 110vh);
}

.dest-mosaic__pin {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 100svh;
  overflow: hidden;
  background: var(--dm-ink);
}

.dest-mosaic__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translate3d(0, var(--lock, 0px), 0);
  will-change: transform;
}

.dest-mosaic__grid {
  /* Width-led: the band spans the stage. Only a screen wider than the band
     itself (about 2.7:1) caps the film at the stage's height instead, and the
     band then centres with black either side. */
  --dm-film-w: min(
    (100% - 2 * var(--dm-gap)) * var(--dm-film) / (var(--dm-film) + 2),
    (100svh - var(--dm-top) - var(--dm-foot)) * 16 / 9
  );
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns:
    calc(var(--dm-film-w) / var(--dm-film))
    var(--dm-film-w)
    calc(var(--dm-film-w) / var(--dm-film));
  /* No row sizes: the slot's 16:9 sets the band's height, and the two tiles
     in each side column split it. Centred, so the rows never stretch. */
  grid-template-rows: auto auto;
  place-content: center;
  gap: var(--dm-gap);
  padding: var(--dm-top) var(--dm-gap) var(--dm-foot);
  box-sizing: border-box;
}

.dest-mosaic__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: #1a1916;
  /* The label is sized by its tile, not by the screen — see dm-tile below. */
  container: dm-tile / inline-size;
}

/* Out of flow, so a portrait master cannot push its row taller than the
   film: the tiles take their height from the band, never from the picture. */
.dest-mosaic__tile img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.08 - var(--p) * 0.08));
  filter: saturate(calc(0.82 + var(--p) * 0.18));
}

/* Focal points hold each subject in the 8:9 band tile and in the stacked
   tiles alike (0.8:1 on a tall phone, 1.2:1 on a short one): the Address
   Downtown spire and the Burj Khalifa's crown keep air above them. */
.dest-mosaic__tile--a { grid-column: 1; grid-row: 1; }
.dest-mosaic__tile--a img { object-position: center 15%; }
.dest-mosaic__tile--b { grid-column: 1; grid-row: 2; }
.dest-mosaic__tile--b img { object-position: center 62%; }
.dest-mosaic__slot    { grid-column: 2; grid-row: 1 / -1; aspect-ratio: 16 / 9; }
.dest-mosaic__tile--c { grid-column: 3; grid-row: 1; }
.dest-mosaic__tile--c img { object-position: center 8%; }
.dest-mosaic__tile--d { grid-column: 3; grid-row: 2; }
.dest-mosaic__tile--d img { object-position: center 72%; }

/* The four tile names are headings, not captions (review, 2026-10-01: the
   labels on the four side blocks were not prominent). They are set the way
   this page sets every name — Optima at 400, in the name's own case, like
   the community names above — and sized by their tile, not the screen: a
   band tile is ~330px wide at 2000, ~166px at 1024 and ~106px on a phone
   held on its side. 8.5cqi keeps "Emaar Entertainment" (8.9em in Optima,
   9.6em in Trebuchet) on one line inside the 7cqi insets; the floor is the
   caption step and the ceiling an H4, so on the smallest tiles a long name
   wraps to two lines rather than shrinking below 12px.

   The ground is the lockup veil, deepening to .64-.72 behind the words, so
   the ink holds at least 4.5:1 against the brightest 2% of the picture
   behind it (4.75 at worst, measured from 375 to 2000). The white skylight
   in the Malls tile is the case that sets it. */
.dest-mosaic__label {
  --dm-name: clamp(var(--em-text-caption), 8.5cqi, var(--em-text-h4));
  --dm-inset: clamp(0.6rem, 7cqi, 1.5rem);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: calc(var(--dm-name) * 3) var(--dm-inset) var(--dm-inset);
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-size: var(--dm-name);
  font-weight: var(--p-weight-regular);
  line-height: var(--p-lh-heading);
  letter-spacing: var(--p-ls-display);
  text-transform: none;
  text-wrap: balance;
  color: var(--em-text-on-inverse);
  text-shadow:
    0 1px 2px rgba(var(--em-rgb-veil), .4),
    0 0 1.1em rgba(var(--em-rgb-veil), .45);
  background: linear-gradient(
    180deg,
    rgba(var(--em-rgb-veil), 0) 0%,
    rgba(var(--em-rgb-veil), .36) 38%,
    rgba(var(--em-rgb-veil), .64) 70%,
    rgba(var(--em-rgb-veil), .72) 100%
  );
  opacity: calc(0.15 + var(--p) * 0.85);
  pointer-events: none;
}

.dest-mosaic__label::before {
  content: "";
  display: block;
  width: 1.25em;
  height: 1px;
  margin: 0 0 0.55em;
  background: var(--em-text-eyebrow-neutral-on-inverse);
}

/* The film's frame opens on the whole screen below the bar — flush, no gap —
   and settles on the slot (--p, 0 → 1; app.js measures the slot into
   --slot-*). Its ground is the stage's own black, so while it travels it
   reads as stage, not as a box. */
.dest-mosaic__video {
  position: absolute;
  z-index: 2;
  top: calc(var(--dm-open-top) + var(--p) * (var(--slot-t) * 1% - var(--dm-open-top)));
  left: calc(var(--p) * var(--slot-l) * 1%);
  width: calc(100% - var(--p) * (100% - var(--slot-w) * 1%));
  height: calc(
    100% - var(--dm-open-top) - var(--dm-open-foot)
    - var(--p) * (100% - var(--dm-open-top) - var(--dm-open-foot) - var(--slot-h) * 1%)
  );
  margin: 0;
  overflow: hidden;
  container-type: size;
  border-radius: 0;
  background: var(--dm-ink);
  will-change: top, left, width, height;
}

/* The <video> box is always the film's own 16:9 — so `contain` draws the
   picture whole inside it and nothing is ever zoomed — and the frame clips
   it. Opening, the box covers the frame (capped at --dm-open-max), so the
   film fills the screen; seated, the frame IS 16:9 and the box equals it, so
   the film is whole. Both terms meet at the slot, so the travel is
   continuous. (The 2026 film is full-frame 16:9 — the old 1.44 zoom was for
   the previous cut's burned-in bars and cropped this one to a quarter.) */
.dest-mosaic__video video {
  --dm-fit: 100cqh * 16 / 9;
  --dm-vw: max(
    min(100cqw, var(--dm-open-max) * var(--dm-fit)),
    min(var(--dm-fit), var(--dm-open-max) * 100cqw)
  );
  position: absolute;
  display: block;
  width: var(--dm-vw);
  max-width: none;   /* the reset's 100% would squeeze the box off 16:9 */
  height: calc(var(--dm-vw) * 9 / 16);
  left: calc((100cqw - var(--dm-vw)) / 2);
  top: calc((100cqh - var(--dm-vw) * 9 / 16) / 2);
  object-fit: contain;
}

.dest-mosaic__intro {
  --rise: 0;
  --li-ground: var(--p-brand-black);
  --li-ivory: var(--unveil-cream);
  --li-champagne: var(--unveil-gold);
  --li-beige: var(--unveil-muted);
  --li-heading: var(--unveil-cream);
  --li-ease: var(--em-ease-exit);
  --li-bg: var(--unveil-field);
  position: relative;
  z-index: 1;
  height: 100svh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background-color: var(--p-brand-black);
  background: var(--li-bg);
  color: var(--li-ivory);
}

.dest-mosaic__veil {
  display: none;
}

.dest-mosaic__copy {
  position: relative;
  z-index: 1;
  width: min(72rem, 100%);
  padding: clamp(5.5rem, 12vh, 8rem) clamp(1.25rem, 5vw, 4rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dest-mosaic__kicker,
.dest-mosaic__heading,
.dest-mosaic__rule,
.dest-mosaic__lede,
.dest-mosaic__cue {
  --local: clamp(0, calc((var(--rise, 0) - var(--delay, 0)) / 0.62), 1);
  opacity: var(--local);
  filter: blur(calc((1 - var(--local)) * 14px));
  transform: translate3d(0, calc((1 - var(--local)) * 13.5rem), 0);
  transition: none;
  will-change: transform, opacity, filter;
}

.dest-mosaic__kicker { --delay: 0; }
.dest-mosaic__heading { --delay: 0.08; }
.dest-mosaic__rule { --delay: 0.16; }
.dest-mosaic__lede { --delay: 0.24; }
.dest-mosaic__cue { --delay: 0.32; }

.dest-mosaic__kicker {
  margin: 0 0 1.35rem;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--li-champagne);
}

.dest-mosaic__heading {
  margin: 0;
  width: 100%;
  display: block;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 5.1vw, 3.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--li-heading);
}

.dest-mosaic__rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: 1.75rem;
  background: var(--li-champagne);
}

.dest-mosaic__lede {
  margin: 1.5rem 0 0;
  width: min(40rem, 92%);
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: clamp(0.95rem, 1.35vw, 1.05rem);
  line-height: 1.85;
  color: var(--p-brand-white);
}

/* The phone dock owns the foot of the screen below 1024, so the stage stops
   above it and every tile, label and the film's last row stay on screen. */
@media (max-width: 1023px) {
  .dest-mosaic {
    --dm-foot: calc(4.85rem + env(safe-area-inset-bottom, 0px));
    --dm-open-foot: var(--dm-foot);
  }
}

/* Upright screens — phones, and tablets held in portrait: 2 + film + 2. A
   side-by-side band would leave the film a third of the screen's width here;
   stacked, it takes the full width at 16:9 and the four tiles share the
   height left above and below it. */
@media (max-aspect-ratio: 9/10) {
  .dest-mosaic__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    place-content: normal;
  }

  .dest-mosaic__tile--a { grid-column: 1; grid-row: 1; }
  .dest-mosaic__tile--b { grid-column: 2; grid-row: 1; }
  .dest-mosaic__slot    { grid-column: 1 / -1; grid-row: 2; }
  .dest-mosaic__tile--c { grid-column: 1; grid-row: 3; }
  .dest-mosaic__tile--d { grid-column: 2; grid-row: 3; }

  /* Upright, covering the screen would keep a third of a 16:9 film, so the
     film stays whole here at every point: the box is contained, not cover. */
  .dest-mosaic__video video {
    --dm-vw: min(100cqw, var(--dm-fit));
  }
}

@media (max-width: 767px) {
  .dest-mosaic {
    --dm-gap: 0.28rem;
    --slot-r: 8;
  }

  .dest-mosaic__track {
    height: calc(100svh + 95vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dest-mosaic {
    --p: 1;
  }

  .cover-stack > :first-child {
    position: relative;
  }

  .dest-mosaic__track {
    height: auto;
  }

  .dest-mosaic__pin {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .dest-mosaic__scene {
    position: relative;
    height: 100svh;
  }

  .dest-mosaic__intro {
    --rise: 1;
    position: relative;
    height: auto;
    min-height: 100svh;
    opacity: 1;
  }

  .dest-mosaic__scene {
    transform: none;
  }

  .dest-mosaic__kicker,
  .dest-mosaic__heading,
  .dest-mosaic__rule,
  .dest-mosaic__lede,
  .dest-mosaic__cue,
  .dest-mosaic__intro.is-inview .dest-mosaic__kicker,
  .dest-mosaic__intro.is-inview .dest-mosaic__words,
  .dest-mosaic__intro.is-inview .dest-mosaic__rule,
  .dest-mosaic__intro.is-inview .dest-mosaic__lede,
  .dest-mosaic__intro.is-inview .dest-mosaic__heading,
  .dest-mosaic__intro.is-inview .dest-mosaic__cue {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .dest-mosaic__letter {
    transform: none;
    opacity: 1;
  }

  .dest-mosaic__tile img {
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .life-intro,
  .dest-mosaic__intro {
    --rise: 1;
  }

  .life-intro__kicker,
  .life-intro__heading,
  .life-intro__rule,
  .life-intro__lede,
  .life-intro__cue,
  .dest-mosaic__cue {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-vision {
    --enter: 1;
  }

  .legacy-vision__track {
    height: auto;
  }

  .legacy-vision__pin {
    position: relative;
    clip-path: none;
  }

  .legacy-vision [data-legacy-rise],
  .legacy-vision.is-inview [data-legacy-rise] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .lv-digit.is-spinning .lv-digit__window {
    mask-image: none;
  }

  .lv-digit.is-spinning .lv-digit__reel,
  .lv-digit__reel {
    filter: none;
    transition: none !important;
    transform: none !important;
  }

  .legacy-vision__rule,
  .legacy-vision__stat + .legacy-vision__stat::before {
    transform: none;
  }
}

/* Site footer — four-column utility bar matching the attached frame. */
.site-footer {
  --ft-line: rgba(var(--em-rgb-white), 0.1);
  --ft-gold: var(--unveil-gold);
  --ft-ink: var(--em-text-on-inverse);
  --ft-mute: rgba(var(--em-rgb-on-inverse), 0.42);
  --ft-p: 0;
  /* one footer black; §5 below is where it is declared */
  background: var(--p-night-800);
  color: var(--ft-ink);
  font-family: var(--font-nav), system-ui, sans-serif;
}

@media (min-width: 1024px) {
  .converse {
    position: relative;
    z-index: 3;
    min-height: 100svh;
    background: #0b0a12;
  }

  .converse__media {
    transform: translate3d(0, var(--shutter-lock, 0px), 0);
    will-change: transform;
  }

  .site-footer.is-shutter-pin {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, calc((1 - var(--ft-p, 0)) * 56px), 0);
    will-change: transform;
    /* The pin is sized by offsetHeight (whole px) and the footer by its real
       height (fractional), so at the foot of the page its top can land a
       sub-pixel below the section above and the cream page ground showed as
       a hairline. A 2px lip of the footer's own black tucks under that
       section (z-index 3) and closes the seam; it replaces the shutter's
       entry shadow, which a fixed layer behind the page never shows. */
    box-shadow: 0 -2px 0 var(--p-night-800);
  }

  .site-footer.is-shutter-pin.is-revealing {
    visibility: visible;
    pointer-events: auto;
  }
}

.site-footer__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ft-line);
}

.site-footer__col {
  padding: clamp(3.25rem, 6vw, 5.25rem) clamp(1.4rem, 2.4vw, 2.5rem) clamp(2.75rem, 5vw, 4.25rem);
  border-right: 1px solid var(--ft-line);
}

.site-footer__col:last-child {
  border-right: 0;
}

.site-footer__heading {
  margin: 0 0 1.65rem;
  font-family: var(--font-nav), system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--em-text-eyebrow-neutral-on-inverse); /* EYEBROW · brand neutral */
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list a,
.site-footer__list button {
  display: inline-block;
  padding: 0.28rem 0;
  color: var(--ft-ink);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.7;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-footer__list a:hover,
.site-footer__list button:hover {
  opacity: 0.62;
}

.site-footer__lede {
  margin: 0 0 1.7rem;
  max-width: 18rem;
  color: var(--p-brand-white);
  font-size: 0.98rem;
  line-height: 1.65;
}

.site-footer__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(var(--em-rgb-white), 0.88);
}

.site-footer__field {
  display: block;
  min-width: 0;
}

.site-footer__field input {
  width: 100%;
  padding: 0.15rem 0 0.2rem;
  border: 0;
  background: transparent;
  color: var(--ft-ink);
  font-family: inherit;
  font-size: 0.95rem;
  /* Resting only — see the twin of this rule in site-footer.css. A bare
     `outline: none` with nothing after it killed the global :focus-visible
     ring and put nothing back, which made this the only focusable element on
     the page with no visible focus state (WCAG 2.4.7). index.html does not
     load site-footer.css; this file carries its own copy of the whole footer,
     so the fix has to be made twice. */
  outline: none;
}

/* Keyboard only: a mouse user clicking into a text field does not need to be
   told where they clicked. Cream, because the footer is a night ground. */
.site-footer__field input:focus-visible {
  outline: 2px solid var(--ft-ink);
  outline-offset: 2px;
}

.site-footer__field input::placeholder {
  color: rgba(var(--em-rgb-on-inverse), 0.38);
}

.site-footer__submit {
  padding: 0 0 0.15rem;
  border: 0;
  background: none;
  color: var(--ft-ink);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-footer__submit:hover {
  opacity: 0.62;
}

.site-footer__thanks {
  margin: 0.85rem 0 0;
  color: var(--ft-gold);
  font-size: 0.82rem;
}

.site-footer.is-subscribed .site-footer__form {
  display: none;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid rgba(var(--em-rgb-white), 0.55);
  border-radius: 50%;
  color: var(--ft-ink);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.site-footer__social a:hover {
  opacity: 0.62;
}

.site-footer__social svg {
  width: 0.95rem;
  height: 0.95rem;
}

.site-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem clamp(1.4rem, 2.4vw, 2.5rem);
  border-top: 1px solid var(--ft-line);
}

.site-footer__explore-all {
  color: var(--ft-ink);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer__explore-all span {
  margin-left: 0.35rem;
}

.site-footer__explore-all:hover {
  opacity: 0.62;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1.15rem 1.5rem;
  color: var(--p-brand-white);
  font-size: 0.72rem;
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__legal a,
.site-footer__prefs,
.site-footer__replay {
  color: var(--ft-ink);
  font-size: 0.72rem;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.site-footer__legal a:hover,
.site-footer__prefs:hover,
.site-footer__replay:hover {
  opacity: 0.62;
}

.site-footer__replay {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ft-ink);
}

.site-footer__replay svg {
  width: 0.85rem;
  height: 0.85rem;
}

@media (max-width: 980px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__col:nth-child(2) {
    border-right: 0;
  }

  .site-footer__col:nth-child(1),
  .site-footer__col:nth-child(2) {
    border-bottom: 1px solid var(--ft-line);
  }

  .site-footer__bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__legal {
    justify-content: flex-start;
  }
}

/* ————— V8 refinements ————— */

/* Launch panels keep the v7 sticky cover: each slide pins while the next
   rises over it. Film and copy stay planted — no scroll-scrubbed drift. */

/* Painted fallback behind every film so nothing renders as an empty band. */
.launch-scroll__visual,
.launch-scroll__visual video {
  background: #101018;
}

.comm-collage__tile--video,
.comm-collage__tile--video video {
  background: #14131a;
}

/* Hero delivery line: proof, not mood. */
.hero-logo__sub {
  letter-spacing: 0.2em;
  font-size: clamp(0.78rem, 1.35vw, 1.05rem);
  color: var(--p-brand-white);
}

/* Four-field bar (Community / Type / Bedrooms / Price), then the filter+search
   actions. Bedrooms can't shrink below its content so "Any" never clips. */
@media (min-width: 900px) {
  .banner-search--hero .banner-search__grid {
    grid-template-columns: 1.4fr auto 1fr auto minmax(max-content, 0.85fr) auto 1.05fr auto auto;
  }
}

/* ————— 44px minimum tap targets ————— */
.comm-collage__ctrl {
  width: 2.75rem;
  height: var(--em-control-min);
}

.comm-collage__dot,
.launch-scroll__dot {
  position: relative;
}

.comm-collage__dot::after,
.launch-scroll__dot::after {
  content: "";
  position: absolute;
  inset: -1.1rem -1.2rem;
}

.site-lang__btn {
  min-height: var(--em-control-min);
  padding: 0.5rem 0.3rem;
}

.site-lang__opt {
  min-height: var(--em-control-min);
  padding: 0.6rem 0.85rem;
}

.site-header__cta {
  min-height: var(--em-control-min);
}

.site-header button[aria-label="Menu"] {
  display: none !important;
}

.site-header__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--em-control-min);
}

.site-header__mobile-list a {
  display: block;
  padding: 0.7rem 0;
}

.banner-search__filter {
  width: 2.75rem;
  min-height: var(--em-control-min);
}

.banner-search__compact {
  min-height: var(--em-control-min);
}

.site-search-panel__close {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: var(--em-control-min);
}

.launch-scroll--cover .launch-scroll__cta,
.launch-flip__slide-copy .launch-scroll__cta {
  min-height: var(--em-control-min);
  align-items: center;
}

.comm-collage__viewing,
.site-footer__explore-all {
  display: inline-flex;
  align-items: center;
  min-height: var(--em-control-min);
}

.site-footer__list a,
.site-footer__list button {
  padding: 0.55rem 0;
}

.site-footer__social a {
  width: 2.75rem;
  height: var(--em-control-min);
}

.site-footer__legal a,
.site-footer__prefs,
.site-footer__replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--em-control-min);
  min-width: 2.75rem;
}

.site-footer__submit {
  min-height: var(--em-control-min);
  padding: 0 0.25rem;
}

/* Remaining sub-44px targets: expand hit areas without moving the layout. */
.site-header__brand {
  position: relative;
}

.site-header__brand::after {
  content: "";
  position: absolute;
  inset: -8px -6px;
}

.site-lang__btn {
  min-width: 2.75rem;
}

.site-footer__form input[type="email"],
.site-footer__form input {
  min-height: var(--em-control-min);
}

@media (max-width: 640px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__col {
    border-right: 0;
    border-bottom: 1px solid var(--ft-line);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .site-footer__col:nth-child(2) {
    border-bottom: 1px solid var(--ft-line);
  }

  .site-footer__col:last-child {
    border-bottom: 0;
  }

  .site-footer__bar {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ————— Merged from v7: responsive integrity ————— */

html,
body {
  overflow-x: clip;
}

/* ————— Merged from v7: accessibility — skip link, focus, anchor offsets ————— */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-skip);
  padding: 0.85rem 1.35rem;
  background: #0b0b0b;
  color: var(--p-brand-white);
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(var(--em-rgb-white), 0.4);
  transform: translateY(-250%);
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--unveil-gold);
  outline-offset: 2px;
}

#main-content:focus {
  outline: none;
}

/* 4.25rem is 68px against a 72px bar, so every in-page jump landed under the
   header. Same correction as site-footer.css, which this file duplicates;
   the literal fallback is here because this stylesheet does not define
   --em-hdr and index.html loads nothing that does. */
section[id],
footer[data-site-footer] {
  scroll-margin-top: calc(var(--em-hdr, 72px) + 12px);
}

/* Tap target the v8 set does not cover. */
.banner-search__submit {
  display: inline-flex;
  align-items: center;
  min-height: var(--em-control-min);
}

/* ————— V12: signature film grade, display mark, scroll choreography, i18n ————— */

:root {
  --film-grade: var(--em-film-grade);
  --font-mark: "Emaar Inscription", var(--font-brand);
}

.mark-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mark-glyph {
  display: inline-flex;
  align-items: stretch;
  line-height: 0;
}

.mark-glyph svg,
.mark-num svg {
  display: block;
  height: 1em;
  width: auto;
  fill: currentColor;
  overflow: visible;
}

/* Official Emaar wordmark in the header — glyphs from the brand mark, not Inscription. */
.site-header__brand {
  display: inline-flex !important;
  align-items: flex-start;
  gap: 0;
  letter-spacing: 0 !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 0;
}

.site-header__brand .mark-glyph svg {
  height: 1em;
  width: auto;
}

.site-header__brand .mark-glyph:nth-child(2) svg {
  margin-left: 0.0497em;
}

.site-header__brand .mark-glyph:nth-child(3) svg {
  margin-left: 0.0184em;
}

.site-header__brand .mark-glyph:nth-child(4) svg {
  margin-left: 0.0156em;
}

.site-header__brand .mark-glyph:nth-child(5) svg {
  margin-left: 0.0288em;
}

.hero-logo__word {
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  gap: 0;
  align-items: flex-start;
}

.hero-logo__letter.mark-glyph svg {
  height: 1em;
  width: auto;
}

.hero-logo__letter:nth-child(2) svg {
  margin-left: 0.0497em;
}

.hero-logo__letter:nth-child(3) svg {
  margin-left: 0.0184em;
}

.hero-logo__letter:nth-child(4) svg {
  margin-left: 0.0156em;
}

.hero-logo__letter:nth-child(5) svg {
  margin-left: 0.0288em;
}

.hero-logo__sub {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em;
  letter-spacing: 0.2em;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-size: clamp(0.78rem, 1.35vw, 1.05rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--p-brand-white);
}

.hero-logo__count {
  display: inline;
  align-items: baseline;
  gap: 0;
  height: auto;
  letter-spacing: 0.2em;
  font-size: 1em;
  font-family: inherit;
  color: inherit;
}

.hero-logo__count .mark-glyph svg,
.hero-logo__count .mark-num svg {
  height: 1em;
}

.hero-logo__count .mark-punct {
  font-family: inherit;
  font-size: 1em;
  letter-spacing: 0;
  line-height: 1;
  transform: none;
  opacity: 1;
}

.hero-logo__sub-copy {
  font-size: 1em;
  letter-spacing: inherit;
  font-family: inherit;
}

.legacy-vision__num {
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
}

.launch-scroll__index {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  font-family: var(--font-mark);
  letter-spacing: 0.12em;
}

.launch-scroll__index .mark-num svg {
  height: 0.92em;
}

.launch-scroll__index .mark-punct {
  opacity: 0.55;
}

/* Signature grade removed from the six community films (3 launches + 3
   collage) and the collage stills — media now shows native, ungraded color. */
.launch-scroll__visual,
.comm-collage__tile--video {
  isolation: isolate;
}

.comm-collage__controls {
  z-index: 4;
}

/* Scroll-linked intro language: letter stagger + rule draw. */
[data-choreo] .choreo-word {
  display: inline-block;
  white-space: nowrap;
}

[data-choreo] .choreo-char {
  display: inline-block;
  --char-t: clamp(
    0,
    calc((var(--rise, var(--local, 0)) - 0.22 - (var(--i) * 0.016)) / 0.42),
    1
  );
  opacity: var(--char-t);
  transform: translate3d(0, calc((1 - var(--char-t)) * 0.55em), 0);
  will-change: transform, opacity;
}

.launch-scroll--flip .launch-scroll__heading[data-choreo] .choreo-char,
.life-intro__heading[data-choreo] .choreo-char,
.dest-mosaic__heading[data-choreo] .choreo-char {
  --char-t: clamp(
    0,
    calc((var(--local, 0) - 0.08 - (var(--i) * 0.014)) / 0.5),
    1
  );
}

.launch-scroll--flip .launch-scroll__rule,
.life-intro__rule,
.dest-mosaic__rule {
  transform-origin: center;
  transform: scaleX(clamp(0.12, var(--local, var(--rise, 0)), 1));
}

.legacy-vision__heading[data-choreo] .choreo-char,
.converse__heading[data-choreo] .choreo-char,
.more-launches__title[data-choreo] .choreo-char {
  --char-t: clamp(0, calc((var(--scene, 0) - (var(--i) * 0.018)) / 0.55), 1);
}

.launch-scroll__panel .launch-scroll__name,
.launch-scroll__panel .launch-scroll__index,
.launch-scroll__panel .launch-scroll__type {
  --in: var(--panel-in, 1);
  opacity: var(--in);
  transform: translate3d(0, calc((1 - var(--in)) * 0.8rem), 0);
  transition: opacity 0.7s var(--em-ease-card),
    transform 0.7s var(--em-ease-card);
}

@media (prefers-reduced-motion: reduce) {
  [data-choreo] .choreo-char,
  .launch-scroll--flip .launch-scroll__heading[data-choreo] .choreo-char,
  .life-intro__heading[data-choreo] .choreo-char,
  .dest-mosaic__heading[data-choreo] .choreo-char,
  .legacy-vision__heading[data-choreo] .choreo-char,
  .converse__heading[data-choreo] .choreo-char,
  .more-launches__title[data-choreo] .choreo-char {
    --char-t: 1;
    opacity: 1;
    transform: none;
  }

  .launch-scroll--flip .launch-scroll__rule,
  .life-intro__rule,
  .dest-mosaic__rule {
    transform: none;
  }

  .launch-scroll.launch-scroll--cover .launch-scroll__panel .launch-scroll__visual video,
  .comm-collage__tile--video video {
    filter: none !important;
  }
}

/* Real AR / RU pages */
html[lang="ar"] {
  --font-display: "Geeza Pro", "Noto Naskh Arabic", "Arabic Typesetting",
    "Traditional Arabic", "SF Arabic", serif;
  --font-editorial: "Geeza Pro", "Noto Naskh Arabic", "Arabic Typesetting",
    "Traditional Arabic", "SF Arabic", serif;
  --font-ui: "Geeza Pro", "Tahoma", "Segoe UI", sans-serif;
  --font-sans: "Tahoma", "Segoe UI", "Geeza Pro", sans-serif;
  --font-nav: "Tahoma", "Segoe UI", "Geeza Pro", sans-serif;
}

html[lang="ru"] {
  --font-display: Optima, "Optima Nova", "Times New Roman", Georgia, serif;
  --font-editorial: Optima, "Optima Nova", "Times New Roman", Georgia, serif;
  --font-brand: "Times New Roman", Georgia, serif;
}

html[lang="ar"] .hero-logo__sub {
  letter-spacing: 0.08em;
  font-size: 0.88rem;
  text-transform: none;
}

html[lang="ar"] .hero-logo__count {
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  letter-spacing: 0.16em;
}

html[lang="ar"] .hero-logo__sub-copy {
  letter-spacing: 0.06em;
  font-family: var(--font-editorial);
}

html[dir="rtl"] .site-header__brand,
html[dir="rtl"] .hero-logo__word,
html[dir="rtl"] .hero-logo__count,
html[dir="rtl"] .mark-glyph {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .launch-scroll--cover .launch-scroll__panel .launch-scroll__copy,
html[dir="rtl"] .launch-scroll--cover .launch-scroll__panel.is-inview .launch-scroll__copy {
  left: auto;
  right: clamp(1.5rem, 4vw, 3.25rem);
}

html[dir="rtl"] .comm-collage__explore svg,
html[dir="rtl"] .site-footer__explore-all span {
  transform: scaleX(-1);
}

html[dir="rtl"] .site-lang__chev {
  transform: scaleX(-1);
}

.site-lang__opt {
  text-decoration: none;
  color: inherit;
}

/* Header: frosted glass on Enquire. Search left this rule: it is the global
   site-search trigger now, and its rest/hover idiom is declared once, in
   global-search.css. The one exception is index-v2.html's pre-search button
   ([data-search-toggle], see §2): it keeps the glass hover it always had, at
   the deleted selector's specificity and in its place. */
.site-header__cta {
  background: rgba(var(--em-rgb-white), 0.16);
  border: 1px solid rgba(var(--em-rgb-white), 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(var(--em-rgb-white), 0.4);
}

.site-search-btn:where([data-search-toggle]):hover,
.site-header__cta:hover {
  background: rgba(var(--em-rgb-white), 0.26);
  border-color: rgba(var(--em-rgb-white), 0.95);
  color: var(--p-brand-white);
}

.site-header__cta {
  background: rgba(var(--em-rgb-white), 0.16);
  min-height: 2.35rem;
  height: 2.35rem;
  padding: 0 1.4rem;
}

html[lang="ar"] .site-lang__btn,
html[lang="ar"] .site-lang__code {
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--font-ui);
  font-size: 0.8rem;
}

/* Featured communities: Marassi-style Discover More */
.comm-collage__more {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: var(--em-control-min);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cc-ink, #17161a);
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.4s ease, gap 0.5s var(--em-ease-exit);
}

.comm-collage__more-line {
  display: inline-block;
  width: 2.75rem;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  transition: width 0.55s var(--em-ease-exit);
}

.comm-collage .comm-collage__more:hover,
.comm-collage .comm-collage__more:focus-visible {
  color: var(--cc-gold, #4d4d4f);
  gap: 1.375rem;
}

.comm-collage .comm-collage__more:hover .comm-collage__more-line,
.comm-collage .comm-collage__more:focus-visible .comm-collage__more-line {
  width: 4.125rem;
}

html[lang="ar"] .comm-collage__more {
  letter-spacing: 0.08em;
  text-transform: none;
  font-family: var(--font-ui);
  font-size: 0.78rem;
}

html[lang="ru"] .comm-collage__more {
  letter-spacing: 0.16em;
}

body,
.font-sans {
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display,
.converse__heading,
.comm-collage__title {
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif !important;
  font-weight: 400;
}

/* ==========================================================================
   Header · hero search · footer — the emaar-home2.html design language
   --------------------------------------------------------------------------
   Ported from EMAAR/emaar-home2.html (the .dc source), whose header, property
   search and footer are the reference for this page. Everything here is the
   source's own measure — 72px bar, 11px/.14em action type, the cream
   rgba(250,249,246,.94) state past the hero, the flat search bar on
   rgba(24,21,17,.42), the #ede1d1 Search block, the closing footer band.

   One deliberate departure: the source rounds its action buttons by 2px.
   Every rectangular control here is square instead — sharp corners, no
   radius. Round icon controls (the footer's social discs) keep their circle:
   a circle is not a corner, and the source treats those as a separate class
   of control.

   This block is appended last so it outranks the Tailwind build in
   styles.css and the earlier passes in this file on source order; where an
   earlier declaration carries !important it is matched, never out-specified
   by accident.
   ========================================================================== */

/* ————————————————————————————— 1 · Header shell ————————————————————————— */

.site-header {
  height: 72px;
  color: var(--p-brand-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  box-shadow: none;
  transition:
    background 0.6s ease,
    color 0.5s ease,
    border-color 0.6s ease,
    -webkit-backdrop-filter 0.6s ease,
    backdrop-filter 0.6s ease;
}

/* Full-bleed like the source: the bar is not a centred 90rem column. */
.site-header__bar {
  max-width: none;
  height: 72px;
  padding: 0 clamp(20px, 4vw, 64px);
  gap: clamp(14px, 2vw, 34px);
}

.site-header__start {
  gap: clamp(4px, 0.8vw, 14px);
}

/* The wordmark is set by font-size — the glyphs are 1em-tall <use> sprites. */
.site-header__brand {
  align-items: flex-start;
  font-size: 19px !important;
  letter-spacing: 0 !important;
  color: inherit;
}

.site-header__brand .mark-glyph:nth-child(2) svg {
  margin-left: 0.0497em;
}

.site-header__brand .mark-glyph:nth-child(4) svg {
  margin-left: 0.0156em;
}

.site-header__divider {
  width: 1px;
  height: 20px;
  background: currentColor;
  opacity: 0.5;
}

.site-header__nav {
  gap: clamp(12px, 1.7vw, 28px);
  margin-left: clamp(6px, 1vw, 18px);
}

/* Nav item: caps at 11.5px/.13em with the source's left-anchored underline
   sweep. Hovering the nav dims the rest of it, as in the source. */
.site-header__link {
  position: relative;
  min-height: 0;
  padding: 6px 1px 7px;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.13em !important;
  color: inherit;
  text-decoration: none;
  transition:
    opacity 0.45s ease,
    color 0.5s ease;
}

.site-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--em-ease-soft);
}

.site-header__nav:hover .site-header__link {
  opacity: 0.5;
}

.site-header__nav .site-header__link:hover,
.site-header__nav .site-header__link:focus-visible {
  opacity: 1;
}

.site-header__link:hover::after,
.site-header__link:focus-visible::after {
  transform: scaleX(1);
}

.site-header__actions {
  gap: clamp(10px, 1.3vw, 20px);
}

/* ————————————————— 2 · Header actions: Search / CTA / WhatsApp ————————————
   The source's Search is a bordered-underline word, not a ringed icon. It is
   the global site-search trigger, visible from the header's first paint and
   independent of scroll: body.is-search-icon no longer reveals it (that class
   still parks the hero dock, nothing else). */

/* legacy styles.css hides this control; neutralised here; idiom in
   global-search.css */
.site-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  height: auto;
  min-height: var(--em-control-min);
  padding: 9px 6px 8px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: inherit;
  font-family: var(--font-nav), "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition:
    color 0.5s ease,
    border-color 0.5s ease;
}

/* index-v2.html is out of the site-search work (CONTRACT §0.1) and still
   carries the pre-search control, `button.site-search-btn[data-search-toggle]`,
   which app.js wires to the hero's filter tray. It keeps its old gating here,
   exactly: hidden over the hero, revealed by body.is-search-icon, receding to
   .65 on hover; held with the bar in the intro (§4) and icon-only below 1200.
   Below are also the label hairline and the 1200–1499 icon-only band that
   instant-call.css drew for it before that file excluded Search.

   Every selector is the deleted one with the attribute added inside :where(),
   so each carries the specificity the deleted rule had and meets the cascade
   it always met. [data-search-toggle] is on no other page; index.html's
   trigger is [data-site-search] and none of this reaches it. */
.site-search-btn:where([data-search-toggle]) {
  position: relative;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.55s ease,
    color 0.5s ease,
    border-color 0.5s ease;
}

body.is-search-icon .site-search-btn:where([data-search-toggle]) {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

body.is-search-icon .site-search-btn:where([data-search-toggle]):hover {
  opacity: 0.65;
}

:where(.site-search-btn[data-search-toggle]) .site-search-btn__label {
  position: relative;
}

:where(.site-search-btn[data-search-toggle]) .site-search-btn__label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--em-e-soft);
}

.site-search-btn:where([data-search-toggle]):hover .site-search-btn__label::after,
.site-search-btn:where([data-search-toggle]):focus-visible .site-search-btn__label::after {
  transform: scaleX(1);
}

.site-search-btn svg {
  flex: none;
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 17px;
  min-height: var(--em-control-min);
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: inherit;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background 0.3s ease,
    color 0.5s ease,
    border-color 0.5s ease;
}

.site-header__cta:hover {
  background: rgba(128, 128, 128, 0.14);
  border-color: currentColor;
  color: inherit;
}

.site-header__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  min-height: var(--em-control-min);
  font-family: var(--font-nav), "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  transition:
    opacity 0.3s ease,
    color 0.5s ease;
}

.site-header__wa:hover {
  opacity: 0.65;
}

.site-header__wa svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* Language: the source's light listbox, squared off. */
.site-lang__btn {
  gap: 7px;
  padding: 9px 2px;
  min-height: var(--em-control-min);
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  color: inherit;
  transition: opacity 0.3s ease;
}

.site-lang__btn:hover {
  opacity: 0.65;
}

.site-lang__panel {
  top: calc(100% + 14px);
  min-width: 13.5rem;
  padding: 8px;
  background: var(--em-surface-primary);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.site-lang__opt {
  gap: 12px;
  justify-content: flex-start;
  padding: 0.65rem 0.65rem;
  min-height: var(--em-control-min);
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--em-text-primary);
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
}

.site-lang__opt:last-child {
  border-bottom: 0;
}

.site-lang__opt:hover,
.site-lang__opt[aria-selected="true"] {
  background: var(--em-surface-sunk);
}

.site-lang__mark {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--em-text-accent-on-inverse);
}

.site-lang__opt[aria-selected="true"] .site-lang__mark::after {
  content: "•";
}

/* ————————————————————— 3 · Header past the hero ——————————————————————————
   The source flips to a warm near-white plate with dark type the moment the
   hero's foot clears the bar. styles.css ships a dark-glass version of the
   same class; these rules carry equal specificity and come later, so they
   replace it rather than fight it. */

.site-header.site-header--solid {
  background: rgba(250, 249, 246, 0.94);
  color: var(--em-text-primary);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

.site-header.site-header--solid .site-header__brand,
.site-header.site-header--solid .site-header__link,
.site-header.site-header--solid .site-header__cta,
.site-header.site-header--solid .site-header__wa,
.site-header.site-header--solid .site-lang__btn,
.site-header.site-header--solid .site-search-btn {
  color: var(--em-text-primary);
}

.site-header.site-header--solid .site-search-btn {
  border-bottom-color: rgba(0, 0, 0, 0);
}

.site-header.site-header--solid .site-header__cta:hover {
  background: rgba(128, 128, 128, 0.14);
}

/* Below the source's full-header width the bar keeps the wordmark, the search
   glyph and the language picker; the mobile dock carries the rest. */
@media (max-width: 1199px) {
  .site-header__cta,
  .site-header__wa {
    display: none !important;
  }

  /* Search and the language switch are the only two actions left in the bar
     below 1200px, and the divider between them is gone with the CTA. Both are
     touch targets, so each carries its own 44px square and they are held
     apart by more than the desktop gap — 2px of padding put a 17px-wide icon
     10px from the flag, two live controls inside one thumb. */
  .site-header__actions {
    gap: 12px;
  }

  /* the Search label is not hidden here: global-search.css owns its ladder
     (labelled from 600, icon-only below) */
  .site-search-btn {
    min-width: 44px;
    justify-content: center;
    padding: 10px 0;
  }

  /* index-v2's pre-search button (§2) keeps its icon-only bar */
  :where(.site-search-btn[data-search-toggle]) .site-search-btn__label {
    display: none;
  }
}

/* …and its 1200–1499 icon-only band, moved here from instant-call.css. The
   band is that file's measured label ladder, not the site ladder; it is kept
   only so index-v2 renders as it did. */
@media (max-width: 1499px) and (min-width: 1200px) {
  :where(.site-search-btn[data-search-toggle]) .site-search-btn__label {
    display: none;
  }
}

/* ———————————————————— 4 · Hero property search ——————————————————————————
   A flat plate, not a pill: square corners, a hairline between every field,
   and the Search block flush to the bar's trailing edge at full bar height. */

body.addr-search-page .banner-search--address.banner-search--hero {
  --search-inset: 0rem;
}

body.addr-search-page .banner-search--address.banner-search--hero .banner-search__grid {
  /* A row, not a nine-track grid. The old template reserved tracks for the
     divider spans this bar draws as field borders instead, so four of its
     nine columns sat empty and left a dead tail past the Search block. */
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  background: rgba(24, 21, 17, 0.42) !important;
  border: 1px solid rgba(var(--em-rgb-on-inverse), 0.22) !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
  backdrop-filter: blur(22px) saturate(1.3) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42) !important;
  padding: 0 !important;
  overflow: visible;
  align-items: stretch;
  color: var(--em-text-on-inverse);
}

/* The morph ring belonged to the clip-and-fly animation, which this page no
   longer performs. */
body.addr-search-page .banner-search--address.banner-search--hero .banner-search__grid::after {
  content: none;
}

body.addr-search-page .banner-search--hero .banner-search__field {
  /* Four equal measures across the plate, so the actions land flush to the
     trailing edge instead of leaving a dead tail. */
  flex: 1 1 0;
  min-width: 0;
  /* A DEFINITE track, not an implicit one. The field is a grid, and an implicit
     column is sized to max-content — which for a <select> is the width of its
     widest OPTION, not of the value on show. "The Heights Country Club and
     Wellness" is 256px, so the Community cell claimed 256px inside a 183px
     measure: it spilled 37px each side, crossed its own hairline into Property
     Type, and pushed its label 16px outside the plate's left border. The other
     three cells, sized to their own short options and centred in the track,
     each started somewhere different — four labels on four different left
     edges. minmax(0, 1fr) makes the track the measure itself, which is what
     `max-width: 100%` on the select needs in order to mean anything, and puts
     every label on the field's own text edge. */
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding-block: 0 !important;
  padding-inline: 20px !important;
  min-height: 66px;
  border-left: 1px solid rgba(var(--em-rgb-on-inverse), 0.14);
  transition: background 0.35s ease;
}

body.addr-search-page .banner-search--hero .banner-search__field:hover {
  background: rgba(var(--em-rgb-on-inverse), 0.09);
}

body.addr-search-page .banner-search--hero .banner-search__field:first-of-type {
  padding-inline-start: 20px !important;
  border-left: 0;
  /* Community carries the longest values on the bar by a wide margin — a
     community name against a bedroom count — so it takes a proportionally
     larger share of the plate rather than an equal one. At this ratio the
     longest name in the list sets in full, and the three short fields still
     hold their own longest option and their own label with room to spare.

     The floor beneath it is max-content, not a pixel figure: paired with
     field-sizing above, a field's max-content is the value actually on show,
     so the cell can never be narrower than the name it is displaying — at any
     viewport, and for any name added to the list later. At rest, with "Any"
     selected, the floor is far below the share and does nothing. */
  flex-grow: 1.75;
  min-width: max-content;
}

/* The bar draws its own rules, so the spacer elements between fields go. */
body.addr-search-page .banner-search--hero .banner-search__divider {
  display: none;
}

body.addr-search-page .banner-search--address .banner-search__label {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(var(--em-rgb-sand), 0.66);
}

body.addr-search-page .banner-search--address .banner-search__field select {
  font-size: 14.5px;
  color: var(--em-text-on-inverse);
  padding-inline-start: 0 !important;
}

/* The reference sets the chevron immediately after the value, not against the
   far edge of the cell — so the control is sized to its text, not stretched.
   `max-content` on a <select> is the widest OPTION, though, not the value on
   show: it put Property Type's chevron at the width of "Townhouse" and
   Community's at the width of "The Heights Country Club and Wellness", so four
   cells all reading "Any" carried their chevrons at four different offsets.
   field-sizing: content is the property that actually means "as wide as the
   value", and it is what makes the four chevrons line up behind four equal
   values. Where it is unsupported the max-content width still applies — the
   pre-existing behaviour, now safely clamped by the definite track above. */
body.addr-search-page .banner-search--address.banner-search--hero .banner-search__field select {
  field-sizing: content;
  width: max-content;
  max-width: 100%;
  /* Should a name ever outrun even that measure, it must end in an ellipsis.
     A value cut mid-word reads as a broken control; a value that trails off
     reads as a value too long for the cell, which is what it is. */
  text-overflow: ellipsis;
}

body.addr-search-page .banner-search--hero .banner-search__actions {
  flex: 0 0 auto;
  margin-inline-start: auto;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

body.addr-search-page .banner-search--hero .banner-search__filter {
  width: auto;
  min-height: 66px;
  padding: 0 20px;
  border-left: 1px solid rgba(var(--em-rgb-on-inverse), 0.14);
  border-radius: 0;
  color: var(--em-text-on-inverse);
  opacity: 1;
  transition:
    background 0.35s ease,
    color 0.35s ease;
}

body.addr-search-page .banner-search--hero .banner-search__filter:hover,
body.addr-search-page .banner-search--hero .banner-search__filter[aria-expanded="true"] {
  background: rgba(var(--em-rgb-on-inverse), 0.12);
  color: var(--em-surface-filled);
}

/* The action plate, on the reference bar's rule and EMAAR's palette: at rest a
   lighter pane of the bar's own glass, seamed off with the metal as a hairline
   (S1 — the metal is an accent, never a fill), so the plate does not out-shout
   the film in the first fold; the brand's white once intent is shown. */
body.addr-search-page .banner-search--address .banner-search__submit {
  align-self: stretch;
  height: auto;
  min-height: 66px;
  padding: 0 34px;
  border: 0;
  border-left: 1px solid rgba(var(--em-rgb-metal), 0.45);
  border-radius: 0;
  background: rgba(var(--em-rgb-white), 0.12);
  color: var(--em-text-on-inverse);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  box-shadow: inset 0 1px 0 rgba(var(--em-rgb-white), 0.16);
  transition:
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

body.addr-search-page .banner-search--address .banner-search__submit:hover,
body.addr-search-page .banner-search--address .banner-search__submit:focus-visible {
  background: var(--em-white);
  color: var(--em-text-primary);
  border-left-color: var(--em-white);
  box-shadow: inset 0 1px 0 rgba(var(--em-rgb-white), 0.6);
  filter: none;
}

body.addr-search-page .banner-search--address .banner-search__submit:active {
  background: var(--em-bg-primary);
  color: var(--em-text-primary);
  border-left-color: var(--em-bg-primary);
}

/* Bar measure and the cue above it, both on the source's numbers. */
.hero-search-dock__inner,
.hero-search-dock.is-flying .hero-search-dock__inner {
  width: min(67.5rem, 100%);
}

.search-cue {
  gap: 14px;
  margin: 0 0 22px;
  font-size: 10.5px;
  letter-spacing: 0.34em;
  color: var(--em-surface-filled);
}

.search-cue::before,
.search-cue::after {
  width: clamp(20px, 3vw, 44px);
  background: rgba(var(--em-rgb-sand), 0.7);
}

/* The cue now rides up with the bar and fades on the source's curve, so the
   old "kill it the instant the dock goes fixed" rule has to yield. --cue-o
   and --cue-y are written per frame by the dock script. */
.hero-search-dock.is-flying .search-cue,
.hero-search-dock.is-dock-stuck .search-cue,
.hero-search-dock.is-dock-morphing .search-cue {
  opacity: var(--cue-o, 1) !important;
  visibility: visible !important;
  transform: translateY(var(--cue-y, 0px));
  transition: none;
}

/* The bar slides *under* the header on its way out, as it does in the source,
   where it belongs to the hero and the header sits above it. */
.hero-search-dock.is-flying {
  z-index: var(--z-sticky-bar);
}

/* ———————————————————————— 5 · Footer ————————————————————————————————————
   The source's closing band — wordmark, one line, two actions — above the
   existing link grid, on its warm near-black with the gold eyebrow. */

.site-footer {
  --ft-line: rgba(var(--em-rgb-on-inverse), 0.12);
  --ft-gold: var(--em-text-accent-on-inverse);
  --ft-ink: var(--em-text-on-inverse);
  --ft-mute: rgba(var(--em-rgb-on-inverse), 0.55);
  background: var(--p-night-800);
}

.site-footer__top {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(52px, 10vh, 170px) clamp(22px, 5vw, 88px) clamp(38px, 6vh, 96px);
  border-bottom: 1px solid rgba(var(--em-rgb-on-inverse), 0.14);
}

.site-footer__lockup {
  flex: 1 1 26rem;
  min-width: min(300px, 100%);
}

.site-footer__mark {
  display: flex;
  align-items: flex-start;
  margin: 0;
  font-size: clamp(28px, 3.6vw, 52px);
  color: var(--ft-ink);
}

.site-footer__mark .mark-glyph svg {
  height: 1em;
  width: auto;
  display: block;
}

.site-footer__mark .mark-glyph:nth-child(2) svg {
  margin-left: 0.0497em;
}

.site-footer__mark .mark-glyph:nth-child(3) svg {
  margin-left: 0.0184em;
}

.site-footer__mark .mark-glyph:nth-child(4) svg {
  margin-left: 0.0156em;
}

.site-footer__mark .mark-glyph:nth-child(5) svg {
  margin-left: 0.0288em;
}

.site-footer__line {
  margin: clamp(24px, 3vw, 40px) 0 0;
  max-width: 20em;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--p-brand-white);
  text-wrap: pretty;
}

.site-footer__acts {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.site-footer__act {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 17px 34px;
  border-radius: 0;
  font-family: var(--font-nav), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer__act--solid {
  background: var(--em-text-on-inverse);
  color: var(--p-night-800);
  border: 1px solid var(--em-text-on-inverse);
  transition: opacity 0.3s ease;
}

.site-footer__act--solid:hover {
  opacity: 0.85;
}

.site-footer__act--ghost {
  background: transparent;
  color: var(--ft-ink);
  border: 1px solid rgba(var(--em-rgb-on-inverse), 0.45);
  transition: background 0.3s ease;
}

.site-footer__act--ghost:hover {
  background: rgba(128, 128, 128, 0.14);
}

.site-footer__act svg {
  flex: none;
  width: 14px;
  height: 14px;
}

@media (max-width: 899px) {
  .site-footer__top {
    align-items: flex-start;
  }

  .site-footer__acts {
    width: 100%;
  }

  .site-footer__act {
    flex: 1 1 12rem;
    justify-content: center;
    padding: 15px 20px;
  }
}

/* The grid keeps its own rules but takes the source's eyebrow and link scale. */
.site-footer__heading {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--em-text-eyebrow-neutral-on-inverse); /* EYEBROW · brand neutral */
}

.site-footer__list a,
.site-footer__list button {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--em-rgb-on-inverse), 0.78);
  transition:
    transform 0.4s var(--em-ease-soft),
    color 0.3s ease,
    opacity 0.2s ease;
}

.site-footer__list a:hover,
.site-footer__list button:hover {
  opacity: 1;
  color: var(--ft-ink);
  transform: translateX(5px);
}

.site-footer__lede {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--p-brand-white);
}

/* ————————————————————— 6 · Square every action control ————————————————————
   The one change to the source's own language: its 2px radius goes to zero.
   Circles on icon-only discs are left alone. */

.site-footer__submit,
.site-search-panel__close,
.field-tray__done,
.converse__cta,
.banner-search__compact,
.banner-search__filter,
.banner-search__submit,
.site-header__cta,
.site-search-btn {
  border-radius: 0 !important;
}

/* ═══════════════════════ 7 · The footer, as the source builds it ═══════════
   emaar-home2.html's footer is three bands: the lockup band (already ported in
   §5), a flex row of link cells with a hairline between each, and a bar that
   floats the copyright off the CTA with an auto margin. V-12 shipped a fixed
   four-track grid and a legal group that swallowed the copyright, so this
   section replaces the grid's geometry and the bar's order.

   Every selector is prefixed with .site-footer so it ties — and, being later
   in the file, beats — the :nth-child and :last-child border rules in the
   980px and 640px blocks above. Source numbers are in px because the source
   is in px; V-12's rem scale would round them off.

   Two departures, both deliberate:
   · below 1024px the rows and discs keep V-12's 44px touch targets (the
     source uses the same 21px rows at every width);
   · the 2px radius is zero, per the brief. ————————————————————————————— */

/* ——— The link cells: a wrapping flex row, not a four-track grid ——— */
.site-footer .site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  border-top: 0;
  border-bottom: 1px solid rgba(var(--em-rgb-on-inverse), 0.14);
}

.site-footer .site-footer__col {
  box-sizing: border-box;
  flex: 1 1 230px;
  min-width: 150px;
  padding: clamp(26px, 5.2vw, 72px) clamp(20px, 4vw, 60px);
  border-right: 1px solid rgba(var(--em-rgb-on-inverse), 0.12);
  border-bottom: 0;
  border-left: 0;
  border-top: 0;
}

/* The cell is wider than its neighbours but shares their row, so it has to
   share their vertical padding too — a shallower top put its label 18px above
   the other three at 1440. */
.site-footer .site-footer__col--news {
  flex: 1 1 300px;
  min-width: 240px;
  padding: clamp(26px, 5.2vw, 72px) clamp(20px, 4vw, 60px);
  border-right: 0;
}

/* The source carries a FOLLOW cell that only ever shows on the narrow grid. */
.site-footer .site-footer__col--follow {
  display: none;
}

.site-footer .site-footer__heading {
  margin: 0 0 16px;
}

/* …and the same gap under the label, so the first line of the blurb starts on
   the row the link lists start on. */
.site-footer .site-footer__col--news .site-footer__heading {
  margin-bottom: 16px;
}

.site-footer .site-footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.site-footer .site-footer__list a,
.site-footer .site-footer__list button {
  padding: 0;
  line-height: 1.4;
}

/* ——— Newsletter: one rule, a hairline under it, the submit on the end ——— */
.site-footer .site-footer__lede {
  margin: 0;
  max-width: 24em;
}

.site-footer .site-footer__form {
  display: flex;
  align-items: center;
  gap: 0;
  grid-template-columns: none;
  margin-top: 20px;
  padding-bottom: 0;
  border-bottom: 1px solid rgba(var(--em-rgb-on-inverse), 0.35);
}

.site-footer .site-footer__field {
  flex: 1 1 0;
  min-width: 0;
}

.site-footer .site-footer__field input {
  padding: 11px 2px;
  font-size: 15px;
  min-height: 0;
}

.site-footer .site-footer__submit {
  flex: none;
  min-height: 0;
  padding: 11px 2px 11px 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
}

.site-footer .site-footer__social {
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.site-footer .site-footer__social a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(var(--em-rgb-on-inverse), 0.22);
  background: rgba(var(--em-rgb-on-inverse), 0.03);
  color: rgba(var(--em-rgb-on-inverse), 0.75);
  transition:
    transform 0.45s var(--em-ease-soft),
    background 0.45s var(--em-ease-soft),
    border-color 0.45s var(--em-ease-soft),
    color 0.3s ease,
    box-shadow 0.45s var(--em-ease-soft);
}

.site-footer .site-footer__social a:hover {
  opacity: 1;
  transform: translateY(-3px) scale(1.05);
  background: var(--em-text-on-inverse);
  border-color: var(--em-text-on-inverse);
  color: var(--p-night-800);
  box-shadow: 0 14px 28px -10px rgba(var(--em-rgb-on-inverse), 0.4);
}

.site-footer .site-footer__social svg {
  width: 15px;
  height: 15px;
}

/* ——— The closing bar ——— */
.site-footer .site-footer__bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 30px;
  padding-inline: clamp(22px, 5vw, 88px);
  border-top: 0;
}

.site-footer .site-footer__explore-all {
  position: relative;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.site-footer .site-footer__explore-all span {
  margin-left: 0;
}

/* The source draws the rule from the left and stops it short of the arrow. */
.site-footer .site-footer__explore-all::after {
  content: "";
  position: absolute;
  left: 0;
  right: 16px;
  top: calc(50% + 13.5px);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--em-ease-soft);
}

.site-footer .site-footer__explore-all:hover {
  opacity: 1;
}

.site-footer .site-footer__explore-all:hover::after,
.site-footer .site-footer__explore-all:focus-visible::after {
  transform: scaleX(1);
}

.site-footer .site-footer__copy {
  margin: 0 0 0 auto;
  font-size: 12.5px;
  color: var(--em-text-nontext);
}

.site-footer .site-footer__legal {
  justify-content: flex-start;
  gap: 16px 22px;
  font-size: 12.5px;
}

.site-footer .site-footer__legal a,
.site-footer .site-footer__prefs {
  font-size: 12.5px;
  color: rgba(var(--em-rgb-on-inverse), 0.6);
}

.site-footer .site-footer__legal a:hover,
.site-footer .site-footer__prefs:hover {
  color: var(--ft-ink);
  opacity: 1;
}

.site-footer .site-footer__replay {
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--em-text-nontext);
}

.site-footer .site-footer__replay:hover {
  color: var(--ft-ink);
  opacity: 1;
}

@media (min-width: 1024px) {
  .site-footer .site-footer__bar {
    padding-block: clamp(22px, 3.4vw, 44px);
  }
}

/* ——— Narrow: the source's two-up tile grid with its own FOLLOW cell ——— */
@media (max-width: 619px) {
  .site-footer .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer .site-footer__col {
    flex-basis: auto;
    min-width: 0;
    padding: 24px 18px;
    border-right: 0;
  }

  .site-footer .site-footer__col:nth-child(2n) {
    border-left: 1px solid rgba(var(--em-rgb-on-inverse), 0.12);
  }

  .site-footer .site-footer__col:nth-child(n + 3) {
    border-top: 1px solid rgba(var(--em-rgb-on-inverse), 0.12);
  }

  .site-footer .site-footer__col--follow {
    display: block;
  }

  .site-footer .site-footer__col--follow .site-footer__social {
    gap: 12px;
    margin-top: 0;
  }

  .site-footer .site-footer__col--news {
    grid-column: 1 / -1;
    padding: 26px 18px 30px;
    border-top: 1px solid rgba(var(--em-rgb-on-inverse), 0.12);
  }

  /* One social set is shown at a time, exactly as the source switches them. */
  .site-footer .site-footer__col--news .site-footer__social {
    display: none;
  }
}

/* ——— Touch widths keep V-12's 44px targets below 1024px ——— */
@media (max-width: 1023px) {
  .site-footer .site-footer__list {
    gap: 0;
  }

  .site-footer .site-footer__list a,
  .site-footer .site-footer__list button {
    padding-block: 0.72rem;
  }

  .site-footer .site-footer__social a,
  .site-footer .site-footer__col--follow .site-footer__social a {
    width: 44px;
    height: 44px;
  }

  .site-footer .site-footer__field input,
  .site-footer .site-footer__submit,
  .site-footer .site-footer__legal a,
  .site-footer .site-footer__prefs,
  .site-footer .site-footer__replay,
  .site-footer .site-footer__explore-all {
    min-height: var(--em-control-min);
  }

  .site-footer .site-footer__bar {
    padding-block: 26px;
    padding-bottom: 5.5rem;
  }
}

/* The bar's controls take the source's own height at pointer widths. The 44px
   touch targets stay below 1024px.
   WCAG 2.5.8's spacing exception covers the desktop case: the 22px gaps keep
   the 24px target circles clear of one another. */
@media (min-width: 1024px) {
  .site-footer .site-footer__explore-all,
  .site-footer .site-footer__legal a,
  .site-footer .site-footer__replay {
    min-height: 0;
    min-width: 0;
  }
}

/* V-12's inherited line-height ran the field two pixels tall against the
   source; 1.4 is the source's own normal at these sizes. */
.site-footer .site-footer__field input,
.site-footer .site-footer__submit {
  line-height: 1.4;
}

/* The source's discs are content-box, so their outer edge is 42px; V-12 boxes
   are border-box. Same painted circle, stated the way this page measures. */
.site-footer .site-footer__col--news .site-footer__social a {
  width: 42px;
  height: 42px;
}

/* The bar sets no line-height in the source — these are the faces' own. */
.site-footer .site-footer__explore-all,
.site-footer .site-footer__copy,
.site-footer .site-footer__legal,
.site-footer .site-footer__legal a,
.site-footer .site-footer__prefs,
.site-footer .site-footer__replay {
  line-height: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ported from emaar-home2.html — header mega menu, advanced-filter chips and
   the Get in Touch enquiry modal. page.css loads last, so these win over the
   corresponding base rules in search.css without editing them in place.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ————————————————— 1 · Header mega menu ————————————————————————————————
   Two panels under a fixed 4.25rem header. The scrim is a separate layer so
   the panel keeps its own backdrop-filter; both close on pointer-leave.

   The sheet is the night ground, on every page that carries this menu. The
   bar above it is NOT: it takes the light plate while a menu is down (see
   `.site-header.is-mega-open` further down this file). That pairing is the
   brief — a light bar over a black sheet — so the ink in here is set against
   #100f0d and the ink up there against the paper, and neither inherits from
   the other. Changing one does not change the other. */

.mega-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky-bar);
  pointer-events: none;
}

.mega-menu[hidden] {
  display: none;
}

.mega-menu__scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 4.25rem;
  bottom: 0;
  background: rgba(var(--em-rgb-veil), 0.42);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.mega-menu.is-open .mega-menu__scrim {
  opacity: 1;
}

.mega-menu__panel {
  position: absolute;
  top: 4.25rem;
  left: 0;
  right: 0;
  background: rgba(16, 15, 13, 0.93);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  backdrop-filter: blur(28px) saturate(1.25);
  color: var(--em-text-on-inverse);
  border-bottom: 1px solid rgba(var(--em-rgb-sand), 0.18);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-0.75rem);
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--em-ease-soft);
}

.mega-menu__panel[hidden] {
  display: none;
}

.mega-menu.is-open .mega-menu__panel {
  opacity: 1;
  transform: none;
}

.mega-menu__inner {
  max-width: 93.75rem;
  margin: 0 auto;
  padding: clamp(34px, 3.6vw, 50px) clamp(20px, 4vw, 64px) clamp(40px, 4.2vw, 58px);
}

.mega-menu__head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: clamp(24px, 2.6vw, 34px);
}

.mega-menu__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral-on-inverse); /* EYEBROW · brand neutral */
  white-space: nowrap;
}

.mega-menu__rule {
  flex: 1;
  height: 1px;
  background: rgba(var(--em-rgb-on-inverse), 0.16);
}

.mega-menu__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: rgba(var(--em-rgb-on-inverse), 0.55);
  white-space: nowrap;
}

.mega-menu__body {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(30px, 4vw, 84px);
}

.mega-menu__col {
  min-width: 11.25rem;
  flex-shrink: 1;
}

.mega-menu.is-open .mega-menu__col,
.mega-menu.is-open .mega-menu__feat {
  animation: megaItem 0.55s var(--em-ease-soft) both;
  animation-delay: calc(0.04s + var(--i, 0) * 0.06s);
}

@keyframes megaItem {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.mega-menu__col-label {
  margin: 0 0 1.25rem;
  font-family: var(--font-nav);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral-on-inverse); /* EYEBROW · brand neutral */
}

.mega-menu__links {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  align-items: flex-start;
}

.mega-menu__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.2;
  color: var(--em-text-on-inverse);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.4s var(--em-ease-soft),
    color 0.3s ease;
}

.mega-menu__link:hover {
  transform: translateX(6px);
  color: var(--p-brand-white);
}

.mega-menu__meta {
  font-size: 11px;
  color: rgba(var(--em-rgb-sand), 0.5);
  white-space: nowrap;
}

.mega-menu__feat {
  margin-left: auto;
  width: min(22.5rem, 100%);
  min-width: 12.5rem;
  flex-shrink: 1;
}

.mega-menu__feat-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #26241f;
}

.mega-menu__feat-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 1.6s var(--em-ease-image),
    filter 1.6s ease;
}

.mega-menu__feat:hover .mega-menu__feat-frame img {
  transform: scale(1.05);
  filter: brightness(1.06);
}

.mega-menu__feat-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.875rem;
  margin-top: 1rem;
}

.mega-menu__feat-kicker {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral-on-inverse); /* EYEBROW · brand neutral */
}

.mega-menu__feat-name {
  margin: 0.3125rem 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  color: var(--em-text-on-inverse);
}

.mega-menu__feat-meta {
  margin: 0.1875rem 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: rgba(var(--em-rgb-on-inverse), 0.6);
}

.mega-menu__feat-cta {
  flex: none;
  border: 0;
  border-bottom: 1px solid rgba(var(--em-rgb-on-inverse), 0.5);
  padding: 0 0 3px;
  background: transparent;
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--em-text-on-inverse);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.mega-menu__feat-cta:hover {
  border-color: var(--em-text-on-inverse);
}

/* The nav triggers are buttons now; keep the anchors' box exactly. */
.site-header__nav button.site-header__link {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-nav) !important;
  text-transform: uppercase;
}

.site-header__link[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.site-header__nav:hover .site-header__link[aria-expanded="true"] {
  opacity: 1;
}

@media (max-width: 1023.98px) {
  .mega-menu {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu__panel,
  .mega-menu__scrim {
    transition: none;
  }
  .mega-menu.is-open .mega-menu__col,
  .mega-menu.is-open .mega-menu__feat {
    animation: none;
  }
}

/* ————————————————— 2 · Advanced filters ————————————————————————————————
   Nothing here any more. The filter panel is one component — filters-panel.js
   for its markup and vocabulary, search.css for its palette and rhythm — and
   this page is one of its hosts, not its owner. Restyling it from here is what
   made the interior drawer gold while this page was cream: these pages load
   page.css and those pages do not. If a filter needs to change, change it in
   search.css, where every host reads it. */

/* ————————————————— 3 · Get in Touch modal ——————————————————————————————— */

.enquire {
  position: fixed;
  inset: 0;
  z-index: var(--z-popover);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.enquire[hidden] {
  display: none;
}

.enquire__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 7, 0.58);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: enqFade 0.35s ease both;
}

@keyframes enqFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.enquire__card {
  position: relative;
  width: min(33.75rem, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: var(--em-surface-dialog);
  border-radius: 2px;
  padding: clamp(28px, 4vw, 46px);
  color: var(--em-text-primary);
  animation: enqRise 0.45s var(--em-ease-soft) both;
}

@keyframes enqRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.enquire__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

.enquire__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--em-text-primary);
}

.enquire__sub {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: #7a6f5c;
}

.enquire__close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--em-rgb-ink), 0.2);
  border-radius: 50%;
  background: transparent;
  color: var(--em-text-primary);
  cursor: pointer;
  transition:
    border-color 0.35s ease,
    background 0.35s ease;
}

.enquire__close:hover {
  border-color: var(--em-text-primary);
  background: rgba(var(--em-rgb-ink), 0.06);
}

.enquire__form {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.enquire__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7a6f5c;
}

.enquire__input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(var(--em-rgb-ink), 0.22);
  border-radius: 2px;
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--em-text-primary);
  outline: none;
}

.enquire__input:focus {
  border-color: var(--em-text-primary);
}

.enquire__input[aria-invalid="true"] {
  border-color: var(--em-status-error);
}

.enquire__row {
  display: flex;
  gap: 10px;
}

.enquire__row .enquire__input {
  flex: 1;
  min-width: 0;
}

/* .enquire__cc is now the host for the shared EmaarUI.select (ui-select.css,
   ui-select.js) — DESIGN-STANDARDS.md §7. It supplies no box of its own;
   these overrides make the component's .sel__btn match this form's other
   fields (.22 resting border, plain focus border, no gold ring). */
.enquire__cc {
  font-family: var(--font-sans);
}

.enquire__cc.sel .sel__btn {
  border-color: rgba(var(--em-rgb-ink), 0.22);
  min-height: 0;
  padding: 13px 10px;
  font-size: 15px;
  color: var(--em-text-primary);
}

.enquire__cc.sel .sel__btn:hover {
  border-color: var(--em-text-primary);
}

.enquire__cc.sel .sel__btn:focus-visible,
.enquire__cc.sel.is-open .sel__btn {
  border-color: var(--em-text-primary);
  box-shadow: none;
}

.enquire__error {
  margin: 5px 0 0;
  min-height: 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  color: var(--em-status-error);
}

.enquire__check {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--em-text-secondary);
  cursor: pointer;
}

.enquire__check input {
  width: 16px;
  height: 16px;
  accent-color: var(--em-text-primary);
}

.enquire__legal {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--em-text-nontext);
}

.enquire__legal a {
  color: var(--em-text-secondary);
  text-decoration: underline;
}

.enquire__submit {
  width: 100%;
  border: 0;
  border-radius: 2px;
  background: var(--em-text-primary);
  color: var(--em-text-inverse);
  padding: 16px;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.enquire__submit:hover {
  background: var(--em-action-primary-hover);
}

.enquire__foot {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  text-align: center;
  color: var(--em-text-nontext);
}

.enquire__done {
  margin-top: 30px;
}

.enquire__done[hidden] {
  display: none;
}

.enquire__tick {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border: 1px solid var(--em-text-accent)  /* the card is paper */;
  border-radius: 50%;
  color: var(--em-text-accent)  /* the card is paper */;
}

.enquire__thanks {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--em-text-primary);
}

.enquire__done-lede {
  margin: 10px 0 0;
  max-width: 40em;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--em-text-body);
}

.enquire__steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.enquire__steps li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--em-text-primary);
}

.enquire__step-n {
  flex: none;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--em-text-accent)  /* the card is paper */;
}

.enquire__done .enquire__submit {
  margin-top: 30px;
}

/* Triggers that became buttons keep the box their anchor had. The reset is
   wrapped in :where() so it carries no specificity — each element's own
   class rule still sets its face, which a plain `button.x` would outrank. */
button:where(
    .site-header__cta,
    .site-header__wa,
    .site-footer__act,
    .launch-scroll__cta,
    .site-footer__list button
  ) {
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

button:where(
    .site-header__wa,
    .site-footer__list button
  ) {
  border: 0;
  background: transparent;
  padding: 0;
}

button:where(.launch-scroll__cta) {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .enquire__scrim,
  .enquire__card {
    animation: none;
  }
}

/* The eyebrows are sans in the source. This page's global h1–h6 rule sends
   every heading to the display face with !important, so this has to answer in
   kind — out-specifying it would still lose. */
/* The footer column labels are eyebrows, not display headings: same face, size,
   tracking and gold as every other kicker on the page, so they take the same
   caps. They are <p>s for exactly that reason — the "no full caps heading" rule
   is about the display type, and each nav column already carries its own
   aria-label, so nothing is lost by not spending an <h2> on a four-item list. */
.site-footer .site-footer__heading {
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

/* The source draws the FOLLOW cell's marks two pixels larger than the
   newsletter's. */
.site-footer .site-footer__col--follow .site-footer__social svg {
  width: 17px;
  height: 17px;
}

/* The full-screen "Explore all of Emaar" directory now lives in
   explore-all.css, loaded by every page — see explore-all.js. Only the
   footer CTA's own box stays here, because it is footer chrome. */


/* The footer CTA is a button now that it opens the directory, so it has to
   shed the user-agent button box the anchor never had. */
.site-footer button.site-footer__explore-all {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}


/* ==========================================================================
   PRIVACY  ·  the consent ledge, and the panel behind it
   --------------------------------------------------------------------------
   .privacy         the notice — a ledge on the foot carrying two answers
   .privacy-panel   the preferences dialog, opened from the notice or from
                    the legal line in the footer

   It is a ledge on the foot, not a barrier across the page. A scrim over the
   hero on arrival is the opposite of an invitation, and a decision taken
   from somebody who was not allowed to see what they were deciding about is
   not consent. The film keeps playing, the search still works, and the
   notice leaves when it is answered.

   Colour is the house palette and nothing else: ink #12100e for the plate,
   ivory #f5f2ec for the type, and gold only as the top rule and the eyebrow
   — never as a heading and never as a field.
   ========================================================================== */

.privacy {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-scrim);

  /* Ink glass. At 0.88 over the brightest frame of the hero film the plate
     still composites to #2e2d2b, which keeps the ivory copy at 8.1:1 and the
     gold rule at 4.4:1 — the two numbers this component has to hold, because
     it is the one surface on the page that lands over moving pictures. */
  background: rgba(18, 16, 14, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  backdrop-filter: blur(14px) saturate(1.06);

  /* One gold hair drawing the top edge, and nothing else. The same gold the
     footer wears directly beneath it, so on arrival the notice reads as the
     footer coming early rather than as a widget landing on the page. */
  border-top: 1px solid var(--em-text-accent-on-inverse);
  box-shadow: 0 -30px 64px -40px rgba(0, 0, 0, 0.66);

  /* It rises, and it rises slowly. This is the one element on the page that
     arrives uninvited, so it arrives at the pace of something offered. The
     script holds it until the intro has finished flying the mark into the
     header — a compliance band sliding up through that is the one thing that
     would cheapen it. */
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition:
    opacity 0.72s var(--em-ease-exit),
    transform 0.72s var(--em-ease-exit);
}

.privacy[hidden] {
  display: none;
}

.privacy.is-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Leaving is quicker than arriving, and it drops rather than rises: the
   answer has been given, and nobody should have to watch the
   acknowledgement. */
.privacy.is-out {
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity 0.3s var(--em-ease-card),
    transform 0.3s var(--em-ease-card);
}

/* A dialog, the More sheet or the search panel is up: the notice is behind a
   scrim and its answers cannot be reached, so it stands down rather than
   sitting under them collecting Tab stops. */
.privacy.is-behind {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.privacy__shell {
  width: 100%;
  max-width: 82.5rem;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3.25rem);
  padding-block: clamp(1.15rem, 2vw, 1.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}

/* ------------------------------------------------------------- the words */

/* Narrower than the page measure. Three lines of small type across 1320 is a
   paragraph nobody reads; two lines against the answers is a notice. */
.privacy__word {
  max-width: 44rem;
}

.privacy__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  /* EYEBROW · brand neutral — brand neutral, not champagne. */
  color: var(--em-text-eyebrow-neutral-on-inverse);
}

.privacy__copy {
  margin: 0.55rem 0 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(var(--em-rgb-on-inverse), 0.78);
}

.privacy__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 1.6em;
  margin: 0.7rem 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
}

/* Both are the same object to the reader — one is a link, one opens a dialog
   — so both are drawn the same way, and the button is reset to type rather
   than styled to look like a link. */
.privacy__quiet {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: rgba(var(--em-rgb-on-inverse), 0.78);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: rgba(var(--em-rgb-on-inverse), 0.32);
  transition:
    color 0.35s ease,
    text-decoration-color 0.35s ease;
}

.privacy__quiet:hover,
.privacy__quiet:focus-visible {
  color: var(--em-text-on-inverse);
  text-decoration-color: var(--p-metal-soft);
}

/* ----------------------------------------------------------- the answers */

.privacy__acts {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.privacy__act {
  min-height: var(--em-control-min);
  padding: 0 1.4rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}

/* The house primary inverts with its ground: ink on ivory pages, ivory on
   this one. Gold is not a field on this site and a gold button would be the
   first one. */
.privacy__act--solid {
  background: var(--em-text-on-inverse);
  color: #17161a;
}

.privacy__act--solid:hover {
  background: var(--p-brand-white);
}

.privacy__act--ghost {
  background: transparent;
  /* 0.46, not the 0.32 the quiet rules use: this is the boundary of a
     control and it has to clear 3:1 on the worst frame, which it does at
     3.9:1. */
  border-color: rgba(var(--em-rgb-on-inverse), 0.46);
  color: var(--em-text-on-inverse);
}

.privacy__act--ghost:hover {
  border-color: var(--em-text-on-inverse);
  background: rgba(128, 128, 128, 0.14);
}

.privacy__act:focus-visible,
.privacy__quiet:focus-visible {
  outline: 2px solid var(--p-metal-soft);
  outline-offset: 3px;
}

/* ==========================================================================
   The panel. It is the site's dialog carrying a different question — the
   same scrim, the same ivory card, the same 2px corner and the same close as
   Get in Touch. A second dialog drawn a second way would be two dialogs.
   ========================================================================== */

.privacy-panel {
  position: fixed;
  inset: 0;
  /* Above the More sheet (120): on a phone the way back lives in the legal
     line, and the legal line lives inside that sheet. */
  z-index: var(--z-drawer-top);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.privacy-panel[hidden] {
  display: none;
}

.privacy-panel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 7, 0.58);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: enqFade 0.35s ease both;
}

.privacy-panel__card {
  position: relative;
  width: min(33.75rem, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: clamp(28px, 4vw, 46px);
  border-radius: 2px;
  background: var(--em-surface-dialog);
  color: #17161a;
  animation: enqRise 0.45s var(--em-ease-soft) both;
}

/* The card takes focus when it opens so the dialog is announced from its
   heading, but it is a container and not a control: the ring belongs on the
   things inside it. */
.privacy-panel__card:focus {
  outline: none;
}

.privacy-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

/* Gold as a rule above the eyebrow, and the eyebrow itself in ink-soft. On
   ivory the brand gold is 3.2:1 — enough to draw a line with and not enough
   to set ten-pixel capitals in. */
.privacy-panel__rule {
  display: block;
  width: 34px;
  height: 1px;
  margin-bottom: 14px;
  background: var(--em-text-eyebrow-neutral);
}

.privacy-panel__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral); /* EYEBROW · brand neutral */
}

.privacy-panel__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.05;
}

.privacy-panel__sub {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: #7a6f5c;
}

.privacy-panel__close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--em-rgb-ink), 0.2);
  border-radius: 50%;
  background: transparent;
  color: #17161a;
  cursor: pointer;
  transition:
    border-color 0.35s ease,
    background 0.35s ease;
}

.privacy-panel__close:hover {
  border-color: #17161a;
  background: rgba(var(--em-rgb-ink), 0.06);
}

/* ------------------------------------------------------------- the rows */

.privacy-rows {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line, rgba(23, 22, 26, 0.12));
}

.privacy-rows__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 18px 0;
  border-bottom: 1px solid var(--line, rgba(23, 22, 26, 0.12));
}

.privacy-rows__name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.privacy-rows__note {
  margin: 6px 0 0;
  max-width: 24rem;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: #7a6f5c;
}

/* Essential is not a switch. A control that cannot move is a control that
   lies about being one, so the row says it in words and the two switches
   below it therefore both mean something. */
.privacy-rows__fixed {
  flex: none;
  margin: 2px 0 0;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #56525c;
}

/* ---------------------------------------------------------- the switches */

/* 46 x 26 drawn inside a 44 x 44 target — the split every other control on
   this page is built on. */
.privacy-switch {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.privacy-switch__track {
  position: relative;
  display: block;
  width: 46px;
  height: 26px;
  border: 1px solid rgba(23, 22, 26, 0.5);
  border-radius: 13px;
  background: transparent;
  transition:
    background 0.35s var(--em-ease-exit),
    border-color 0.35s ease;
}

.privacy-switch__thumb {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #56525c;
  transition:
    transform 0.35s var(--em-ease-exit),
    background 0.35s ease;
}

.privacy-switch[aria-checked="true"] .privacy-switch__track {
  background: #17161a;
  border-color: #17161a;
}

.privacy-switch[aria-checked="true"] .privacy-switch__thumb {
  background: var(--em-surface-dialog);
  transform: translateX(20px);
}

/* The whole composition mirrors on its own — the plate is inset with
   inset-inline, both shells are flex in logical order, and the answers change
   sides with the copy. One rule is needed, and it is the switch: translate is
   a physical axis and knows nothing about writing direction, so in Arabic the
   on-state would push the thumb off the track instead of across it. Same
   20px, and only the sign changes. */
html[dir="rtl"] .privacy-switch[aria-checked="true"] .privacy-switch__thumb {
  transform: translateX(-20px);
}

.privacy-switch:focus-visible .privacy-switch__track {
  outline: 2px solid var(--em-text-eyebrow-neutral);
  outline-offset: 3px;
}

/* ----------------------------------------------------------- the answers */

.privacy-panel__acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 26px;
}

.privacy-panel__act {
  min-height: var(--em-control-min);
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.privacy-panel__act--solid {
  background: #17161a;
  color: var(--em-text-inverse);
}

.privacy-panel__act--solid:hover {
  background: var(--em-action-primary-hover);
}

.privacy-panel__act--ghost {
  background: transparent;
  border-color: rgba(23, 22, 26, 0.32);
  color: #17161a;
}

.privacy-panel__act--ghost:hover {
  border-color: #17161a;
  background: rgba(128, 128, 128, 0.14);
}

.privacy-panel__act:focus-visible,
.privacy-panel__close:focus-visible {
  outline: 2px solid var(--em-text-eyebrow-neutral);
  outline-offset: 3px;
}

.privacy-panel__foot {
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--em-text-nontext);
}

.privacy-panel__foot a {
  color: inherit;
  text-underline-offset: 0.25em;
}

/* ==========================================================================
   The way back. A consent that cannot be withdrawn is not one, so the same
   dialog hangs off the legal line in the footer — which below 1024 is the
   line inside the More sheet, because the footer node moves there. It
   inherits that line, so this is only the reset.
   ========================================================================== */

.site-footer__prefs {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Responsive. Above 1024 it is a line of type with its answers beside it, on
   the footer's own measure. Below, it is a short paragraph with its answers
   under it — and it clears the dock rather than sitting over or behind it.
   ========================================================================== */

@media (max-width: 1023px) {
  /* The dock is the whole of the site's navigation on a phone and a notice
     does not get to take it away. The inset is the dock's own resting
     geometry — its 1.15rem lift, its 2.7rem body, the 0.45rem it grows by
     when it docks flush, and the safe area it carries — so the notice clears
     it in both of the dock's states rather than in one of them. */
  .privacy {
    inset-block-end: calc(
      3.85rem + env(safe-area-inset-bottom, 0px) + 0.95rem
    );
    border-bottom: 1px solid rgba(var(--em-rgb-on-inverse), 0.12);
  }

  .privacy__shell {
    display: block;
    padding-block: clamp(1.1rem, 4vw, 1.4rem);
  }

  .privacy__word {
    max-width: none;
  }

  .privacy__acts {
    margin-top: clamp(0.9rem, 3.4vw, 1.15rem);
  }
}

/* Under 560 the two answers go to full thumb width, two across. Between 560
   and 1023 they keep their own width on the leading edge instead: an even
   split at 1023 is a 460px ACCEPT ALL, which is not a more generous button
   but a ten-pixel label lost in a field. */
@media (max-width: 559px) {
  .privacy__copy {
    font-size: 12.5px;
  }

  .privacy__acts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .privacy__act {
    width: 100%;
    padding-inline: 0.5rem;
  }

  .privacy-panel__acts {
    grid-template-columns: 1fr;
  }
}

/* The rise is a motion device, so it is removed rather than shortened. */
@media (prefers-reduced-motion: reduce) {
  .privacy,
  .privacy.is-in,
  .privacy.is-out {
    transform: none;
    transition: opacity 0.16s linear;
  }

  .privacy-panel__scrim,
  .privacy-panel__card {
    animation: none;
  }

  .privacy-switch__track,
  .privacy-switch__thumb {
    transition: none;
  }
}


/* ——— Fold cue placement: the control belongs to the copy, not to the bottom
   edge ———
   The three intro folds are full-height grids that centred their copy block,
   so the cue floated with exactly as much air above the heading as below it
   and read as a footer instruction. The copy now sits in the upper middle:
   one flexible track above it, a larger one below, so the leftover height
   reads as the transition into the next section rather than as a gap the cue
   is stranded in. fr tracks rather than a fixed offset — on a short screen
   they collapse to nothing before the copy does. */
.life-intro,
.dest-mosaic__intro,
.launch-flip__stage {
  grid-template-rows: minmax(0, 0.62fr) auto minmax(0, 1.38fr);
}

.life-intro__inner,
.dest-mosaic__copy,
.launch-scroll__intro-inner {
  grid-row: 2;
}

/* Close enough to the paragraph to read as one gesture, never touching it.
   Tied to viewport height so a tall screen opens the gap and a laptop does
   not: the fold cue sits with the copy at every height. */
.fold-cue {
  margin-block-start: clamp(2.25rem, 4.6vh, 3.5rem);
}

/* Short viewports: buy the height back from the padding and the stem before
   anything has to clip. */
@media (max-height: 720px) {
  .life-intro,
  .launch-flip__stage {
    padding-block: clamp(3.25rem, 7vh, 5rem);
  }

  .dest-mosaic__copy {
    padding-block: clamp(3.25rem, 7vh, 5rem);
  }

  .fold-cue {
    margin-block-start: clamp(1.5rem, 3.2vh, 2.25rem);
  }

  .fold-cue__track {
    height: clamp(2rem, 4.6vh, 2.75rem);
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   THE OPENING  ·  one mark, then the bar, then the search
   ─────────────────────────────────────────────────────────────────────────
   The reference build (emaar-home2.html) gives the wordmark the whole screen:
   five letters drift out of the dark, gather, hold, and then the assembled
   mark flies to its seat in the bar. Three things were wrong here:

     1 · the bar's own crew (nav, CTA, WhatsApp, language) revealed at 60ms,
         a second and a half before the mark left the middle of the hero;
     2 · the header mark was switched on 320ms before the flown mark arrived,
         so two wordmarks of different sizes sat on screen at once;
     3 · the flown mark was destroyed 117ms before its flight ended.

   The mark is the only thing on screen until it moves. It then lands on its
   own seat and is exchanged for the header mark in a single frame.
   ═══════════════════════════════════════════════════════════════════════ */

/* ——— 1 · The mark fades in, whole ————————————————————————————————————————
   Brand Growth, 2026-10-01: no blur on the wordmark and no "consolidating
   character" effect — the five letters used to start scattered, enlarged and
   out of focus and were pulled into register one after another. The mark now
   simply fades up in place, all five letters together, on one curve. Nothing
   moves and nothing is blurred; only opacity changes. It is done by ~1.3s,
   well inside the 2350ms hold before the flight (app.js INTRO.exitSync). */

/* transform/filter: none answers styles.css, whose original letter rule
   still parks each glyph 14px low for its own rise. */
.hero-logo__letter {
  opacity: 0;
  transform: none;
  filter: none;
}

@keyframes hero-mark-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-logo.is-ready .hero-logo__letter {
  animation: hero-mark-fade 1.2s var(--ease-soft) both;
  animation-delay: 90ms;
}

/* The rule draws under a word that is still settling, and the line of type
   follows it — the mark builds downward, in one direction. */
.hero-logo.is-ready .hero-logo__rule {
  animation: logo-rule-in 0.9s var(--ease-soft) 0.9s both;
}

.hero-logo.is-ready .hero-logo__sub {
  animation: logo-sub-in 0.8s var(--ease-soft) 1.2s both;
}

/* Carried over from the original build's exit pair (styles.css), which this
   file's slower reveal timing shadows at equal specificity — `is-ready` and
   `is-sub-exit` are both two-class selectors, and this sheet loads last, so
   without an exit rule here the tagline held at its finished opacity until
   `logo.remove()` cut it away instead of fading. Both classes are present on
   `.hero-logo` at once during the flight, so this rule must out-rank the
   `is-ready` one above by source order alone — it stays below it. */
.hero-logo.is-sub-exit .hero-logo__sub {
  animation: logo-sub-out 1.2s var(--ease-soft) both;
}

.hero-logo.is-sub-exit .hero-logo__rule {
  animation: logo-rule-out 0.75s var(--ease-soft) both;
}

/* ——— 2 · The flight ——————————————————————————————————————————————————————
   The word is carried by an inline transform written from the measured
   distance between the two marks, so only the curve and the handover live
   here. A flown letter must hold still inside the word: its own emerge
   animation has to be off, not merely finished, or the letter keeps its
   filled end-state and fights the parent's transform on a repaint. */

.hero-logo__word.is-flying .hero-logo__letter {
  animation: none !important;
  opacity: 1;
  transform: none;
  filter: none;
}

/* ——— 3 · The handover ————————————————————————————————————————————————————
   The flown word lands on exactly the header mark's box at exactly its size,
   so the exchange is one frame with no crossfade. A crossfade would be worse
   than a cut: two registered copies of the same white mark at 50% each cover
   only 75% of the ink, and the wordmark would visibly dip as it seats. */

.site-header__brand.is-seated {
  opacity: 1;
  pointer-events: auto;
  animation: none !important;
  transform: none !important;
}

/* ——— 4 · The bar waits ———————————————————————————————————————————————————
   The reference build's staggered reveal is retired: it was keyed to the
   page's first paint instead of to the mark's departure. */

/* Keyed on `is-crew-in`, not on `is-ready`: page.css is shared with
   emaar-search-results.html, which has no opening and must keep the original
   staggered reveal. And no `!important` — page.css already out-ranks the
   retired reveal by source order, while an important `animation` would
   out-rank the replacement below, since both classes are on the bar at once.
   During the hold it is `is-intro`'s important opacity that wins, which an
   animation cannot beat. */
.site-header.is-crew-in .site-header__link,
.site-header.is-crew-in .site-header__cta,
.site-header.is-crew-in .site-header__actions {
  animation: none;
  opacity: 1;
}

/* `visibility`, not opacity alone. An invisible control is still a Tab stop
   and still takes a click, and the hold is now three seconds long — a reader
   who reaches for the keyboard while the mark is assembling would otherwise
   land on a button they cannot see. visibility keeps the layout, so the
   flight's measurement of the header mark's box is unaffected. */
.site-header.is-intro .site-header__link,
.site-header.is-intro .site-header__divider,
.site-header.is-intro .site-header__cta,
.site-header.is-intro .site-header__wa,
.site-header.is-intro .site-header__call,
.site-header.is-intro .site-lang,
.site-header.is-intro .site-search-btn:where([data-search-toggle]),
.site-header.is-intro .site-search-btn[data-site-search],
.site-header.is-intro button[aria-label="Menu"] {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-7px);
  animation: none !important;
}

/* The site-search trigger is held with the rest of the bar (above) and
   enters with the crew, in its place in the row (below) — it used to be
   exempt (D3), which left "Search" alone in an empty bar beside the
   assembling wordmark. Reversed 2026-10-02.

   Pages that share page.css but have no opening (emaar-search-results.html)
   never carry is-intro, so this older guard still covers them: there the
   trigger was the one header control that could be tabbed to and clicked
   at opacity 0: styles.css keeps .site-header at 0 until .is-ready,
   then runs header-in (.9s) while the actions row waits .32s and rises over
   .75s, so the trigger sits under 0.1 for ~0.46s after .is-ready lands.

   Its visibility now follows the bar instead: hidden until .is-ready, then
   held by a step-end keyframe for .46s — the moment the row crosses ~0.1
   (header-in .79 × header-item-in .14 × its own .82 rest, both curves
   --ease-soft) — and let go. Both clocks start on the same class, so the
   release is in step with the fade on any machine. It changes nothing a
   reader can see (the word is at ~0 opacity throughout the hold), it never
   waits for is-intro, and the wordmark's hold is untouched. Retune the .46s
   if styles.css's header-in / header-item-in timings ever change. */
.site-header:not(.is-ready) .site-search-btn[data-site-search] {
  visibility: hidden;
}

.site-header.is-ready .site-search-btn[data-site-search] {
  animation: hdr-search-hold 0.46s step-end backwards;
}

@keyframes hdr-search-hold {
  from {
    visibility: hidden;
  }
}

.site-header__brand.is-awaiting {
  visibility: hidden;
}

.site-header__brand.is-seated {
  visibility: visible;
}

/* `backwards`, never `both`: the reveal must let go of opacity when it ends,
   or it would out-rank the nav's own hover dim for the life of the page. */
@keyframes hdr-crew-in {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
}

@keyframes hdr-rule-in {
  from {
    opacity: 0;
    transform: scaleY(0.4);
  }
}

.site-header.is-crew-in .site-header__link,
.site-header.is-crew-in .site-header__cta,
.site-header.is-crew-in .site-header__wa,
.site-header.is-crew-in .site-header__call,
.site-header.is-crew-in .site-lang,
.site-header.is-crew-in .site-search-btn:where([data-search-toggle]),
.site-header.is-crew-in .site-search-btn[data-site-search],
.site-header.is-crew-in button[aria-label="Menu"] {
  animation: hdr-crew-in 0.78s var(--ease-soft) backwards;
}

.site-header.is-crew-in .site-header__link {
  animation-delay: calc(var(--i) * 70ms);
}

/* Search opens the actions row: after the last nav link (210ms), before the CTA */
.site-header.is-crew-in .site-search-btn[data-site-search] { animation-delay: 250ms; }
.site-header.is-crew-in .site-header__cta { animation-delay: 280ms; }
/* between the CTA and WhatsApp, which is where it sits in the bar */
.site-header.is-crew-in .site-header__call { animation-delay: 310ms; }
.site-header.is-crew-in .site-header__wa { animation-delay: 335ms; }
.site-header.is-crew-in .site-search-btn:where([data-search-toggle]) { animation-delay: 335ms; }
.site-header.is-crew-in .site-lang { animation-delay: 390ms; }
.site-header.is-crew-in button[aria-label="Menu"] { animation-delay: 280ms; }

/* The hairlines are struck, not faded — they belong to the mark that has just
   taken its seat, so the one beside it goes first. */
.site-header.is-crew-in .site-header__divider {
  animation: hdr-rule-in 0.62s var(--ease-soft) backwards;
  transform-origin: center;
}

/* The rule beside the mark belongs to the mark, so it is struck as the mark
   takes its seat — 560ms into the crew's reveal, which is 1180ms into the
   flight. Struck at 30ms it appeared beside an empty seat. */
.site-header.is-crew-in .site-header__start > .site-header__divider {
  animation-delay: 560ms;
}

.site-header.is-crew-in .site-header__actions > .site-header__divider {
  animation-delay: 370ms;
}

/* ——— 5 · Reduced motion ——————————————————————————————————————————————————
   No emergence, no flight, no stagger: the page arrives assembled. */

@media (prefers-reduced-motion: reduce) {
  .hero-logo__letter,
  .hero-logo.is-ready .hero-logo__letter {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }

  .site-header.is-intro .site-header__link,
  .site-header.is-intro .site-header__divider,
  .site-header.is-intro .site-header__cta,
  .site-header.is-intro .site-header__wa,
  .site-header.is-intro .site-lang,
  .site-header.is-intro .site-search-btn:where([data-search-toggle]),
  .site-header.is-intro .site-search-btn[data-site-search],
  .site-header.is-intro button[aria-label="Menu"] {
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .site-header__brand.is-awaiting {
    visibility: visible;
  }

  /* the bar is opaque from first paint here (styles.css), so the site-search
     trigger has nothing to wait for */
  .site-header:not(.is-ready) .site-search-btn[data-site-search],
  .site-header.is-ready .site-search-btn[data-site-search] {
    visibility: visible;
    animation: none;
  }

  /* index-v2's legacy label hairline (§2), as instant-call.css cancelled it */
  :where(.site-search-btn[data-search-toggle]) .site-search-btn__label::after {
    transition: none !important;
  }

  .site-header.is-crew-in .site-header__link,
  .site-header.is-crew-in .site-header__cta,
  .site-header.is-crew-in .site-header__wa,
  .site-header.is-crew-in .site-lang,
  .site-header.is-crew-in .site-search-btn:where([data-search-toggle]),
  .site-header.is-crew-in .site-search-btn[data-site-search],
  .site-header.is-crew-in .site-header__divider,
  .site-header.is-crew-in button[aria-label="Menu"] {
    animation: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   A DROPDOWN IS ONE PLATE, NOT TWO
   ─────────────────────────────────────────────────────────────────────────
   The panel is an opaque sheet hung under a transparent bar, so opening it
   left the top 72px showing whatever frame of the hero film happened to be
   under it — a torn strip of water above a flat black sheet. While a menu is
   down the bar takes the panel's own plate, and the seam between them is
   removed: the panel keeps the bottom edge, the bar keeps none.
   ═══════════════════════════════════════════════════════════════════════ */

/* The bar's own transition is the scrolled hand-over's 600ms. A menu opens in
   400ms, so on that clock the plate would still be at ~0.70 alpha when the
   panel is already solid — the same lighter strip, just briefer. While a menu
   is opening or closing the bar moves on the panel's clock instead; the class
   outlives the close so the plate does not linger dark over the hero. */
.site-header.is-mega-anim {
  transition:
    background 0.34s ease,
    color 0.34s ease,
    border-color 0.34s ease,
    -webkit-backdrop-filter 0.34s ease,
    backdrop-filter 0.34s ease;
}

.site-header.is-mega-open {
  background: rgba(250, 249, 246, 0.97);
  -webkit-backdrop-filter: blur(20px) saturate(1.06);
  backdrop-filter: blur(20px) saturate(1.06);
  color: var(--em-text-primary);
  border-bottom-color: rgba(0, 0, 0, 0);
  box-shadow: none;
}

/* This has to out-rank the scrolled bar's ink, which is why it is last: a
   menu opened after the reader has scrolled still reads as one dark plate. */
.site-header.is-mega-open .site-header__brand,
.site-header.is-mega-open .site-header__link,
.site-header.is-mega-open .site-header__cta,
.site-header.is-mega-open .site-header__wa,
.site-header.is-mega-open .site-lang__btn,
.site-header.is-mega-open .site-search-btn {
  color: var(--em-text-primary);
}

/* The CTA and the dividers are drawn for the film — a white rule over a
   white wash. Ink alone does not save them on the open menu's paper plate:
   the pill's own border and fill have to come back to ink too, or the
   button is a dark word floating in nothing. */
.site-header.is-mega-open .site-header__cta {
  border-color: rgba(17, 17, 18, 0.32);
  background: rgba(17, 17, 18, 0.04);
}

.site-header.is-mega-open .site-header__divider {
  background: rgba(17, 17, 18, 0.22);
}

.site-header.is-mega-open .site-search-btn {
  border-bottom-color: rgba(0, 0, 0, 0);
}

.site-header.is-mega-open .site-header__cta:hover,
.site-header.is-mega-open .site-header__cta:focus-visible {
  background: rgba(17, 17, 18, 0.07);
}

/* The panel hung from 4.25rem while the bar has been 72px since the header
   was rebuilt full-bleed, so its first 4px — and the top of its opening
   slide — were cut off behind the bar. */
.mega-menu__panel,
.mega-menu__scrim {
  top: 4.5rem;
}

/* ═════════════════════════════════════════════════════════════════════════
   THE CONSENT LEDGE AND THE HERO'S SEARCH BAR
   ─────────────────────────────────────────────────────────────────────────
   Both are full-bleed at the foot of the first screen, so the ledge covered
   the bar outright — 112px of overlap at 1440×900, with the page's primary
   action hidden behind a strip the reader is meant to dismiss. The bar rides
   up over the ledge while the question is open and settles back once it is
   answered. --consent-clear is the band the ledge actually occupies measured
   from the foot of the viewport, so this holds at every width, in every
   language, and on a narrow screen where the ledge already floats above the
   tab bar.

   :not(.is-flying) matters: once the reader scrolls, the bar is a fixed
   element with `bottom: auto` on its way into the header, and this selector
   is specific enough to have overruled that.
   ═══════════════════════════════════════════════════════════════════════ */

.hero-search-dock {
  transition: bottom 0.62s var(--em-ease-soft);
}

html[data-consent-pending] .hero-search-dock:not(.is-flying) {
  bottom: calc(var(--consent-clear, 0px) + 0.85rem);
}

@media (prefers-reduced-motion: reduce) {
  .hero-search-dock {
    transition: none;
  }
}


/* ——— The Latest from Emaar ———
   Press releases as one fluid rail rather than a grid: card widths follow the
   real aspect of each photograph (--ratio), so the row has an editorial
   rhythm instead of a template's even beat, and the last card runs off the
   right edge to say the rail continues. Drag, arrows, arrow keys and a
   trackpad all reach it; the hairline under it is the position, not a
   decoration.

   The ground matches the page's own paper exactly. Legacy Built on Vision
   above it is already #f7f4ee, and a band five points off that reads as a
   rendering seam rather than a new chapter — the opening rule and the air
   mark the change instead.

   The reveal runs off --scene, which initScrollChoreo paints on every
   [data-press] block, so the head, the rail and the controls each light as
   they arrive. */
.press-latest {
  --pl-paper: var(--em-text-on-inverse);
  --pl-ink: #17140f;   /* 16.7:1 on the paper */
  --pl-mute: #57503f;  /* 7.3:1 */
  /* The brand gold measures 1.7:1 on this ground and cannot carry a 10.5px
     eyebrow, so paper gets its own darker draw at 5.19:1. */
  --pl-gold: var(--em-text-eyebrow-neutral);
  --pl-line: rgba(23, 20, 15, 0.15);
  --pl-gutter: clamp(1.15rem, 5vw, 4.5rem);
  /* The card scales off the width, but the section is a whole fold now, so a
     short window has to be able to shrink it or the rail pushes the controls
     past the bottom. 38vh is above the height the width term asks for at
     16:10 and wider-than-tall windows, so it binds only on a short one and
     the desktop card keeps its measured 588x435. */
  --pl-media: clamp(13.5rem, min(24vw, 38vh), 21rem);
  /* Every card is the same block: one ratio for the whole rail, so the
     row reads as a set rather than as eight different shapes. */
  --pl-ratio: 1.75;
  /* How many lines the headline box reserves. The narrow card at the
     78vw cap needs a third line for a 77-character headline; every
     wider card fits the same copy in two. */
  --pl-lines: 2;
  --pl-ease: var(--em-ease-exit);
  position: relative;
  z-index: 3;
  background: var(--pl-paper);
  color: var(--pl-ink);
  /* One fold. The section owns a whole screen so the band below it is never
     in frame while the rail is being read, and the content sits centred in
     whatever height is left over. min-height, not height: on a short window
     the section grows past the fold rather than clipping the controls off
     the bottom. svh is the stable small viewport, so a mobile URL bar
     retracting does not restate the fold mid-scroll. */
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 9vh, 6.5rem) 0 clamp(2.5rem, 8vh, 5.5rem);
}

.press-latest__inner {
  width: min(86rem, 100%);
  margin: 0 auto;
  padding: 0 var(--pl-gutter);
  box-sizing: border-box;
}

/* One rise, delayed per element against its own block's --scene.
   The section is exactly one viewport now, so the rail only reaches --scene
   0.64 at the moment the fold is perfectly framed — the original 0.5 span
   with delays running to 0.42 left the arrows half-lit at rest. Halving the
   stagger and shortening the span keeps the same order and finishes it
   inside the fold. */
.press-latest__eyebrow,
.press-latest__say,
.press-latest__all,
.press-latest__progress,
.press-latest__arrows,
.more-launches__eyebrow,
.more-launches__say,
.more-launches__all,
.more-launches__progress,
.more-launches__arrows {
  --local: clamp(0, calc((var(--scene, 0) - var(--delay, 0) * 0.5) / 0.32), 1);
  opacity: var(--local);
  transform: translate3d(0, calc((1 - var(--local)) * 1.6rem), 0);
  filter: blur(calc((1 - var(--local)) * 8px));
  will-change: transform, opacity, filter;
}

/* The cards: a one-shot reveal off .press-latest__track.is-inview (painted by
   initPressRail's IntersectionObserver, not --scene — see app.js), so the
   cascade plays out in real time rather than being scrubbed by scroll speed.
   --delay already steps 0.06 per card for the old --scene formula above;
   ×1500ms keeps the same house 90ms-per-card stagger without touching the
   markup. Declared only inside the negative query, so prefers-reduced-motion
   simply has nothing to override and the cards render plain and in place. */
@media not all and (prefers-reduced-motion: reduce) {
  .press-latest__card,
  .more-launches__card {
    opacity: 0;
    transform: translateY(42px);
    filter: blur(16px);
    transition:
      opacity 1.05s var(--pl-ease) calc(var(--delay, 0) * 1500ms),
      transform 1.05s var(--pl-ease) calc(var(--delay, 0) * 1500ms),
      filter 1.05s var(--pl-ease) calc(var(--delay, 0) * 1500ms);
    will-change: opacity, transform, filter;
  }

  .press-latest__track.is-inview .press-latest__card,
  .more-launches__track.is-inview .more-launches__card {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.press-latest__title[data-choreo] .choreo-char {
  --char-t: clamp(0, calc((var(--scene, 0) - (var(--i) * 0.018)) / 0.55), 1);
}

.press-latest__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: end;
}

@media (min-width: 900px) {
  .press-latest__head { grid-template-columns: minmax(0, 1fr) auto; }
}

.press-latest__eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral); /* EYEBROW · brand neutral */
}

.press-latest__title {
  margin: 0;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--pl-ink);
  text-wrap: balance;
}

.press-latest__say {
  margin: 0.95rem 0 0;
  max-width: 31rem;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: clamp(0.88rem, 1.05vw, 0.95rem);
  line-height: 1.7;
  color: var(--pl-mute);
}

.press-latest__all {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: var(--em-control-min);
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pl-gold);
}

.press-latest__all span { transition: transform 0.5s var(--pl-ease); }

.press-latest__all:hover span,
.press-latest__all:focus-visible span { transform: translateX(5px); }

.press-latest__rule {
  display: block;
  height: 1px;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  background: rgba(23, 20, 15, 0.28);
  transform: scaleX(clamp(0.06, var(--scene, 0), 1));
  transform-origin: left center;
}

/* ——— The rail ——— */
.press-latest__rail {
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}

.press-latest__track,
.more-launches__track {
  display: flex;
  align-items: stretch;
  gap: clamp(0.85rem, 1.5vw, 1.5rem);
  margin: 0;
  /* The gutter is padding on the track, not a margin on the first card, so the
     first card lines up with the heading and the last one can still reach the
     end of its scroll. */
  padding: 0 var(--pl-gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--pl-gutter);
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
}

.press-latest__track::-webkit-scrollbar,
.more-launches__track::-webkit-scrollbar { display: none; }

/* Snapping fights a hand-driven scroll — it pulls back on every pointermove —
   so it is off for as long as the pointer owns the rail, and the browser
   settles to the nearest card on release. */
.press-latest__track.is-grabbing,
.more-launches__track.is-grabbing {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

/* Same reason while an arrow press is gliding: the tween lands exactly on a
   card, so snapping has nothing to correct and only fights the animation. */
.press-latest__track.is-seeking,
.more-launches__track.is-seeking { scroll-snap-type: none; }

.press-latest__track:focus-visible {
  outline: 1px solid var(--pl-gold);
  outline-offset: 4px;
}

.press-latest__card,
.more-launches__card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* One width for every card, taken from the media ratio above. The picture
     is cropped to the frame (object-fit: cover), so a portrait source loses
     its top and bottom rather than making a narrower card. */
  width: clamp(14.5rem, calc(var(--pl-media) * var(--pl-ratio)), 38rem);
  max-width: 78vw;
}

.press-latest__card > a,
.more-launches__card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  -webkit-user-drag: none;
}

.press-latest__card-media,
.more-launches__card-media {
  flex: none;
  /* The frame keeps its ratio at every width. Driving the height off
     --pl-media instead would hold that height while max-width: 78vw shrank
     the card on phones, and the 1.75 frame would drift to nearly square. */
  width: 100%;
  aspect-ratio: var(--pl-ratio);
  margin: 0;
  overflow: hidden;
}

.press-latest__card-media img,
.more-launches__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform 1.2s var(--pl-ease);
}

@media (hover: hover) {
  .press-latest__card > a:hover .press-latest__card-media img { transform: scale(1.04); }
  .more-launches__card > a:hover .more-launches__card-media img { transform: scale(1.04); }
}

.press-latest__card-body,
.more-launches__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 1.05rem;
}

.press-latest__meta {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pl-gold);
  font-variant-numeric: tabular-nums;
}

.press-latest__meta i { font-style: normal; opacity: 0.5; }

.press-latest__card-head {
  margin: 0.55rem 0 0;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.28;
  color: var(--pl-ink);
  text-wrap: pretty;
  /* Two lines, always: the copy is written to fit, and the clamp plus the
     matching min-height keep every card the same height even if a longer
     headline is pasted in later. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--pl-lines);
  line-clamp: var(--pl-lines);
  overflow: hidden;
  min-height: calc(var(--pl-lines) * 1.28em);
}

/* The hover mark is a rule that grows, not a colour change — gold stays an
   accent and never becomes a headline. */
.press-latest__card-body::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: 0.75rem;
  background: var(--pl-ink);
  transition: width 0.75s var(--pl-ease);
}

.press-latest__card > a:hover .press-latest__card-body::after,
.press-latest__card > a:focus-visible .press-latest__card-body::after { width: 3.2rem; }

/* ——— Position and arrows ——— */
/* The controls live inside the rail so they share its reveal — on their own
   scene they were still invisible while every card was up — and carry the
   inner column's width themselves now that they are outside it. */
.press-latest__controls,
.more-launches__controls {
  width: min(86rem, 100%);
  margin: clamp(1.6rem, 3.5vw, 2.6rem) auto 0;
  padding: 0 var(--pl-gutter);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.press-latest__progress {
  --delay: 0.34;
  position: relative;
  flex: 1;
  min-width: 0;
  height: 1px;
  background: rgba(23, 20, 15, 0.16);
}

.press-latest__progress span {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 22%;
  background: var(--pl-ink);
}

.press-latest__arrows,
.more-launches__arrows {
  --delay: 0.4;
  flex: none;
  display: flex;
  gap: 0.6rem;
}

/* Square, per the house rule for action controls. */
.press-latest__arrow {
  width: 2.75rem;
  height: var(--em-control-min);
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(23, 20, 15, 0.22);
  border-radius: 0;
  color: var(--pl-ink);
  cursor: pointer;
  transition:
    background-color 0.4s var(--pl-ease),
    border-color 0.4s var(--pl-ease),
    opacity 0.4s var(--pl-ease);
}

.press-latest__arrow:hover { background: rgba(23, 20, 15, 0.06); border-color: rgba(23, 20, 15, 0.42); }

.press-latest__arrow:disabled { opacity: 0.28; cursor: default; background: transparent; border-color: rgba(23, 20, 15, 0.22); }

.press-latest__arrow:focus-visible { outline: 1px solid var(--pl-gold); outline-offset: 4px; }

.press-latest a:focus-visible { outline: 1px solid var(--pl-gold); outline-offset: 6px; }

@media (max-width: 759px) {
  .press-latest__controls { gap: 1rem; }
  .press-latest__card-head { font-size: 1.02rem; }
}

/* A short landscape window — a laptop at 1280x640, a browser with three
   toolbars — cannot hold the fold at the desktop rhythm: the content alone
   measures 632px there. So below 820px of height the section spends less on
   air and lets the card drop under its usual floor, and the fold holds down
   to about 700px. Shorter than that the section grows past the screen rather
   than clipping the arrows, which is the safer failure. */
@media (max-height: 820px) and (min-width: 760px) {
  .press-latest {
    --pl-media: clamp(10rem, min(24vw, 34vh), 21rem);
    padding-block: clamp(1.5rem, 3.5vh, 3rem);
  }

  .press-latest__rule { margin-top: clamp(0.9rem, 2vh, 1.6rem); }
  .press-latest__rail { margin-top: clamp(1rem, 2.2vh, 1.8rem); }
  .press-latest__controls { margin-top: clamp(1rem, 2.2vh, 1.8rem); }
}

/* Measured: the card is 78vw-capped down here, and at 375px (293px card) and
   320px (250px card) a 77-character headline needs three lines. The switch is
   at 479 rather than at the 390px crossover so it has margin — an unused third
   line costs 21px, a clamp that tips truncates the headline. */
@media (max-width: 479px) {
  .press-latest { --pl-lines: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .press-latest__eyebrow,
  .press-latest__say,
  .press-latest__all,
  .press-latest__progress,
  .press-latest__arrows {
    --local: 1;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .press-latest__title[data-choreo] .choreo-char {
    --char-t: 1;
    opacity: 1;
    transform: none;
  }

  .press-latest__rule { transform: none; }

  .press-latest__card-media img,
  .press-latest__card-body::after,
  .press-latest__all span,
  .press-latest__arrow {
    transition: none;
  }
}

/* RTL: the rail runs the other way, so the arrows, the opening rule and the
   position hairline all take their edge from the inline start. */
html[dir="rtl"] .press-latest__all span,
html[dir="rtl"] .press-latest__arrow svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .press-latest__all:hover span,
html[dir="rtl"] .press-latest__all:focus-visible span {
  transform: scaleX(-1) translateX(5px);
}

html[dir="rtl"] .press-latest__rule { transform-origin: right center; }

html[dir="rtl"] .press-latest__progress span { left: auto; right: 0; }

/* ——— 4. A button inside a list of links is still a link ————————————————————
   Converting a trigger to a <button> keeps its box but not its type: the
   :where() reset hands it `font: inherit`, i.e. the body's 16px, so "Get in
   touch" and "Enquire" came out a size larger than the items beside them. The
   selectors that dress these lists now name the button too, rather than a
   second rule trying to restate them. ——————————————————————————————————— */

/* Marketing feedback: remove the heading→paragraph divider lines site-wide on the home page. */
.life-intro__rule,
.dest-mosaic__rule,
.launch-scroll__rule,
.legacy-vision__rule {
  display: none !important;
}

.comm-collage__name::after {
  display: none !important;
}

/* The divider above supplied the only space between the heading and the
   blurb (via its own margin); hiding it collapsed that gap to ~0. Restore
   the breathing room directly on the heading, across all three community
   panels (Dubai Creek Harbour, Dubai Hills Estate, The Oasis By Emaar). */
.comm-collage__name {
  margin-bottom: 1.1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MORE NEW LAUNCHES — the rail under the three-project showcase

   The showcase above puts three releases on film and stops. EMAAR publishes
   fourteen under Newly Launched, so eleven of them had no way onto this page.
   This is those eleven, and a way through to the rest.

   It is deliberately NOT a second component. Every mechanical rule the rail
   needs — the snapping track, the card box, the media frame, the controls row,
   both reveals — is the press rail's, and this block's selectors were added to
   those rules rather than copied out of them. What lives here is only what
   genuinely differs: the ground, the palette and the card's own three lines.

   The --pl-* custom properties are the RAIL's contract, not the press
   section's; the prefix is historical. A host block sets them and the shared
   mechanics read them, which is how one set of rules drives two rails with
   different measures on one page.

   Ground: var(--p-brand-black), the same token .launch-scroll above and
   .life-intro below both take — so the three read as one dark chapter and the
   rail is the bridge through it rather than a bright interruption in it.
   ═══════════════════════════════════════════════════════════════════════════ */

.more-launches {
  /* The rail's contract — see the note above. */
  --pl-gutter: clamp(1.15rem, 5vw, 4.5rem);
  --pl-media: clamp(13.5rem, min(24vw, 38vh), 21rem);
  /* 16:10, the house ratio for a property card — the launches landing page
     frames the same eleven photographs this way. The press rail's 1.75 is a
     press ratio; a property is shown in the property frame. */
  --pl-ratio: 1.6;
  --pl-ease: var(--em-ease-exit);
  --ml-line: rgba(var(--em-rgb-white), 0.18);
  --ml-line-strong: rgba(var(--em-rgb-white), 0.42);
  position: relative;
  z-index: 3;
  background: var(--p-brand-black);
  color: var(--em-text-on-inverse);
  /* One fold, matching every other band on this page. min-height, not height:
     a short window grows the section rather than clipping the arrows off the
     bottom, which is the safer failure. */
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 9vh, 6.5rem) 0 clamp(2.5rem, 8vh, 5.5rem);
}

.more-launches__inner {
  width: min(86rem, 100%);
  margin: 0 auto;
  padding: 0 var(--pl-gutter);
  box-sizing: border-box;
}

.more-launches__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: end;
}

@media (min-width: 1024px) {
  .more-launches__head { grid-template-columns: minmax(0, 1fr) auto; }
}

/* The kicker of the three sections around this one, to the letter. */
.more-launches__eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: var(--em-text-label);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral-on-inverse); /* EYEBROW · brand neutral */
}

.more-launches__title {
  margin: 0;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-weight: 400;
  font-size: var(--em-text-h2);
  line-height: 1.1;
  letter-spacing: 0.004em;
  color: var(--unveil-cream);
  text-wrap: balance;
}

.more-launches__say {
  margin: 0.95rem 0 0;
  max-width: 34rem;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: var(--em-text-body-lg);
  line-height: 1.7;
  color: var(--em-text-on-inverse-soft);
}

/* The section's one action. Same underline-on-hover language as the showcase's
   own CTA above it, which is this chapter's link treatment. */
.more-launches__all {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: var(--em-control-min);
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: var(--em-text-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--unveil-gold);
}

.more-launches__all span { transition: transform 0.5s var(--pl-ease); }

.more-launches__all:hover span,
.more-launches__all:focus-visible span { transform: translateX(5px); }

.more-launches__rule {
  display: block;
  height: 1px;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  background: var(--ml-line);
  transform: scaleX(clamp(0.06, var(--scene, 0), 1));
  transform-origin: left center;
}

.more-launches__rail { margin-top: clamp(1.8rem, 4vw, 2.8rem); }

.more-launches__track:focus-visible {
  outline: 1px solid var(--unveil-gold);
  outline-offset: 4px;
}

/* ——— The card's three lines: where, what, from how much ——— */

.more-launches__meta {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: var(--em-text-label-sm);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--unveil-gold);
}

.more-launches__card-head {
  margin: 0.55rem 0 0;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-weight: 400;
  /* The card head is the one line a reader picks the tile by, and it is set in
     the display face — so it takes the display scale's own card step, H4, not
     the 17px H5 that belongs to sans running text. */
  font-size: var(--em-text-h4);
  line-height: 1.22;
  color: var(--unveil-cream);
  text-wrap: pretty;
}

/* Price and availability, both counted from EMAAR's own published unit list.
   Two of the eleven publish neither, so the line is absent on those cards
   rather than empty — and the rule below is pushed to the foot of the card,
   which is what keeps every card in the row ending on the same line. */
.more-launches__fact {
  margin: 0.4rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.55em;
  flex-wrap: wrap;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: var(--em-text-body-sm);
  line-height: 1.4;
  color: var(--em-text-on-inverse-soft);
  font-variant-numeric: tabular-nums;
}

.more-launches__fact i { font-style: normal; opacity: 0.45; }

/* The hover mark is a rule that grows, not a colour change — the house
   treatment, and the reason no card needs a button of its own. */
.more-launches__card-body::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  /* auto pins the rule to the foot, so every card in the row ends on the same
     line whatever its body holds — two of the eleven publish no price and no
     unit count, and a rule floating mid-card would be the only thing a reader
     noticed about them. The gap is the last line's own margin below, because
     an auto margin collapses to nothing on a card whose body is already full
     and the rule would otherwise sit on the text. */
  margin-top: auto;
  background: var(--unveil-cream);
  transition: width 0.75s var(--pl-ease);
}

.more-launches__card-body > :last-child { margin-bottom: 0.75rem; }

.more-launches__card > a:hover .more-launches__card-body::after,
.more-launches__card > a:focus-visible .more-launches__card-body::after { width: 3.2rem; }

/* ——— Position and arrows ——— */

.more-launches__progress {
  --delay: 0.34;
  position: relative;
  flex: 1;
  min-width: 0;
  height: 1px;
  background: var(--ml-line);
}

.more-launches__progress span {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 22%;
  background: var(--unveil-cream);
}

/* Square, per the house rule for action controls. */
.more-launches__arrow {
  width: 2.75rem;
  height: var(--em-control-min);
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ml-line);
  border-radius: 0;
  color: var(--unveil-cream);
  cursor: pointer;
  transition:
    background-color 0.4s var(--pl-ease),
    border-color 0.4s var(--pl-ease),
    opacity 0.4s var(--pl-ease);
}

.more-launches__arrow:hover {
  background: rgba(var(--em-rgb-white), 0.08);
  border-color: var(--ml-line-strong);
}

.more-launches__arrow:disabled {
  opacity: 0.28;
  cursor: default;
  background: transparent;
  border-color: var(--ml-line);
}

.more-launches__arrow:focus-visible { outline: 1px solid var(--unveil-gold); outline-offset: 4px; }

.more-launches a:focus-visible { outline: 1px solid var(--unveil-gold); outline-offset: 6px; }

/* Phones: the head stacks, the CTA sits under the lede, and the card takes the
   same 78vw cap the shared rule already gives it. */
@media (max-width: 599px) {
  .more-launches__controls { gap: 1rem; }
}

/* A short landscape window cannot hold the fold at the desktop rhythm — the
   same measurement the press rail makes below, and the same answer: spend less
   on air and let the card drop under its usual floor. */
@media (max-height: 820px) and (min-width: 600px) {
  .more-launches {
    --pl-media: clamp(10rem, min(24vw, 34vh), 21rem);
    padding-block: clamp(1.5rem, 3.5vh, 3rem);
  }

  .more-launches__rule { margin-top: clamp(0.9rem, 2vh, 1.6rem); }
  .more-launches__rail { margin-top: clamp(1rem, 2.2vh, 1.8rem); }
  .more-launches__controls { margin-top: clamp(1rem, 2.2vh, 1.8rem); }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTENT APPEARS AS IT IS — Brand Growth direction, 2026-10-01
   "Remove fading/blur effects appearance from the content sections,
   headings, paragraphs, images, while scroll across website."

   The homepage carries its own scroll choreography (styles.css + the
   sections above, driven by app.js's --rise / --local / --scene /
   --copy-rise / --panel-in and .is-inview / .is-visible / .is-lead). Every
   one of those effects on CONTENT — opacity ramps, blur, the rise or
   settle that went with them, the per-character heading build — is turned
   off here, for every visitor. These are the same end states each
   section's own prefers-reduced-motion branch already paints, so this is
   not a new rendering: it is the reduced-motion rendering of the content,
   promoted to everyone.

   What is deliberately NOT here, and still moves:
     · the pinned scenes themselves (the stage pins, the flip, the mosaic
       opening, the collage's film settling into its slot) — layout, not a
       fade on content; the reduced-motion branches unpin those, this does not;
     · the slideshows (launch-stage, converse films) — a carousel cross-fade
       is how a slideshow changes slide, not an entrance;
     · the hero wordmark's fade (§ The opening, above) — the one sanctioned fade;
     · menus, panels, the privacy notice — interface, not content.

   One block, at the end of the last stylesheet the homepage loads, with each
   selector at the specificity of the rule it answers — so it wins by order,
   without !important. tools/motion/still-check.js holds it.
   ═══════════════════════════════════════════════════════════════════════ */

/* New launches — the flip intro and the cover panels */
.launch-scroll__kicker,
.launch-scroll__heading,
.launch-scroll__rule,
.launch-scroll__lede,
.launch-scroll__cue,
.launch-scroll--flip .launch-scroll__kicker,
.launch-scroll--flip .launch-scroll__heading,
.launch-scroll--flip .launch-scroll__rule,
.launch-scroll--flip .launch-scroll__lede,
.launch-scroll--flip .launch-scroll__cue,
.launch-scroll__copy > *,
.launch-scroll__panel.is-inview .launch-scroll__copy > *,
.launch-scroll.launch-scroll--cover .launch-scroll__panel .launch-scroll__copy > *,
.launch-scroll.launch-scroll--cover .launch-scroll__panel.is-inview .launch-scroll__copy > *,
.launch-scroll__visual img,
.launch-scroll__panel.is-inview .launch-scroll__visual img {
  opacity: 1;
  filter: none;
  transform: none;
}

.launch-scroll__panel .launch-scroll__name,
.launch-scroll__panel .launch-scroll__index,
.launch-scroll__panel .launch-scroll__type {
  opacity: 1;
  transform: none;
}

/* Headings built a character at a time */
[data-choreo] .choreo-char,
.launch-scroll--flip .launch-scroll__heading[data-choreo] .choreo-char,
.life-intro__heading[data-choreo] .choreo-char,
.dest-mosaic__heading[data-choreo] .choreo-char,
.legacy-vision__heading[data-choreo] .choreo-char,
.converse__heading[data-choreo] .choreo-char,
.more-launches__title[data-choreo] .choreo-char,
.press-latest__title[data-choreo] .choreo-char {
  --char-t: 1;
  opacity: 1;
  transform: none;
}

/* The life and destination intros */
.life-intro__kicker,
.life-intro__heading,
.life-intro__rule,
.life-intro__lede,
.life-intro__cue,
.dest-mosaic__kicker,
.dest-mosaic__heading,
.dest-mosaic__rule,
.dest-mosaic__lede,
.dest-mosaic__cue,
.dest-mosaic__intro.is-inview .dest-mosaic__kicker,
.dest-mosaic__intro.is-inview .dest-mosaic__words,
.dest-mosaic__intro.is-inview .dest-mosaic__rule,
.dest-mosaic__intro.is-inview .dest-mosaic__lede,
.dest-mosaic__intro.is-inview .dest-mosaic__heading,
.dest-mosaic__intro.is-inview .dest-mosaic__cue {
  opacity: 1;
  filter: none;
  transform: none;
}

.dest-mosaic__label { opacity: 1; }

/* Featured communities — the copy and the tiles */
.comm-collage__panel > *,
.comm-collage__block.is-inview .comm-collage__panel > *,
.comm-collage__grid.is-lead .comm-collage__tile img {
  opacity: 1;
  filter: none;
  transform: none;
}

/* A legacy built on vision — the words and the figures. The digit reels
   still count; they no longer smear while they do. */
.legacy-vision [data-legacy-rise],
.legacy-vision.is-inview [data-legacy-rise] {
  opacity: 1;
  filter: none;
  transform: none;
}

.lv-digit.is-spinning .lv-digit__reel { filter: none; }

/* Newly launched and the newsroom rail — the heads and the cards */
.press-latest__eyebrow,
.press-latest__say,
.press-latest__all,
.press-latest__progress,
.press-latest__arrows,
.more-launches__eyebrow,
.more-launches__say,
.more-launches__all,
.more-launches__progress,
.more-launches__arrows {
  --local: 1;
  opacity: 1;
  filter: none;
  transform: none;
}

.press-latest__card,
.more-launches__card,
.press-latest__track.is-inview .press-latest__card,
.more-launches__track.is-inview .more-launches__card {
  opacity: 1;
  filter: none;
  transform: none;
}

/* The conversation band, and anything else on the old .reveal contract */
.reveal,
.reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}