/* mobile-nav.css — the site's one mobile navigation surface.

   The dock and the "More" sheet used to live in page.css, which only
   index.html links, so the home page had a bottom nav and the other 39 pages
   had none: a reader who followed a dock link arrived somewhere with no way
   back but the browser's own button. This file is that component lifted out
   whole — same rules, same class names — and it is now linked on every page.
   page.css no longer carries a single .mobile-dock/.mobile-more rule; there is
   one implementation, not two. See app.js → assets/discover-v12/mobile-nav.js
   for the markup and the behaviour, which moved for the same reason.

   Tokens: assets/ds/01-tokens.css is linked before this file on every page,
   so --font-nav, --font-display and --unveil-gold resolve site-wide. The
   three-value "floor" that used to be declared here is gone — there is one
   declaration of each, in one file, and this component no longer has to know
   which namespace its host page speaks. */

/* This component must not depend on the host page's reset. Most pages set
   box-sizing:border-box globally; emaar-search-results.html and the booking
   pages link no such stylesheet, and there the item's 56px min-height was a
   CONTENT height — 16px of padding on top of it, a bar 74px tall against 58
   everywhere else. A shared component owns its own box model. */
.mobile-dock,
.mobile-dock *,
.mobile-dock *::before,
.mobile-dock *::after,
.mobile-more,
.mobile-more *,
.mobile-more *::before,
.mobile-more *::after {
  box-sizing: border-box;
}

/* ————— Merged from v7: mobile dock — thumb-reachable bottom navigation ————— */

.mobile-dock {
  --dock-reveal: 0;
  position: fixed;
  z-index: var(--z-dock);
  display: none;
  left: calc(1.15rem * (1 - var(--dock-reveal)));
  right: calc(1.15rem * (1 - var(--dock-reveal)));
  bottom: calc((1.15rem + env(safe-area-inset-bottom, 0px)) * (1 - var(--dock-reveal)));
  min-height: calc(2.7rem + (var(--dock-reveal) * 0.45rem));
  background: rgba(10, 10, 10, calc(0.32 + var(--dock-reveal) * 0.42));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, calc(0.32 - var(--dock-reveal) * 0.18));
  border-radius: calc(1.45rem * (1 - var(--dock-reveal)));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) * var(--dock-reveal));
  overflow: visible;
  transition: box-shadow 0.35s ease;
}

.mobile-dock__cue.search-cue,
.mobile-dock__cue.search-cue.is-visible {
  display: none !important;
}

body.is-filters-open .mobile-dock__cue.search-cue,
body.is-filters-open .mobile-dock__cue.search-cue.is-visible {
  opacity: 0;
}

.mobile-dock.is-search {
  padding: calc(0.28rem * (1 - var(--dock-reveal)));
  height: calc(2.75rem + (var(--dock-reveal) * 0.4rem));
}

.mobile-dock.is-search .mobile-dock__nav {
  position: absolute;
  inset: 0;
  height: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* The pill is emitted on the home page alone (see mobile-nav.js). An interior
   page never carries one, so its dock rests at --dock-reveal:1 — full width,
   square, nav showing — and never trades itself for a search bar. */
.mobile-dock__search {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: auto;
  padding: 0 0.7rem;
  border: 0;
  background: transparent;
  color: var(--p-brand-white);
  cursor: pointer;
  opacity: calc(1 - var(--dock-reveal) * 1.45);
  pointer-events: none;
}

.mobile-dock.is-search .mobile-dock__search {
  pointer-events: auto;
}

.mobile-dock__search-icon {
  flex: 0 0 auto;
  opacity: 0.95;
}

.mobile-dock__search-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--p-brand-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-dock__search-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-brand-white);
}

.mobile-dock__nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* This clip is load-bearing: at --dock-reveal 0 the row is 56px tall inside
     a bar that is not, and it is pushed 10px down besides, so without it the
     home page's dock spills its nav while trading out of the search pill. It
     also fixes where the selected cell's mark can live — see below. */
  overflow: hidden;
  opacity: calc((var(--dock-reveal) - 0.22) / 0.78);
  transform: translate3d(0, calc((1 - var(--dock-reveal)) * 10px), 0);
  pointer-events: none;
}

.mobile-dock:not(.is-search) .mobile-dock__nav {
  pointer-events: auto;
}

.mobile-dock__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 56px;
  padding: 0.5rem 0.25rem;
  color: rgba(var(--em-rgb-white), 0.66);
  font-family: var(--font-nav);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
}

.mobile-dock__item svg {
  width: 1.2rem;
  height: 1.2rem;
}

.mobile-dock__label {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

/* ————— The selected state: the cell is lit, and the mark is set into the rail —————
   No filled circle, no bright ground, no Material pill — the house draws a
   line. But a line has to be seen, and this one was not. It was a 1px gold
   hairline at top:0, which put it one pixel under the dock's OWN 1px white
   border: two hairlines a pixel apart read as a doubled edge, not as a mark.
   Under it sat rgba(metal,.17) falling to nothing by 72% — measured against
   the bar's rgba(10,10,10,.74) ground that is a ~4% lift, which is to say
   nothing at all. What was left carrying "you are here" was the gold icon,
   and colour alone is the one thing §7 says a selected state may never be.

   So the mark now sits AT top:-1px, in the border's own row, and owns it for
   the width of the marker: gold set into the metal of the rail, one edge
   instead of two. Under it the cell is LIT rather than tinted — a bloom at
   the top where the mark is, a second behind the icon so the light has a
   source. Both are radial and both reach transparent well inside the cell,
   so the cell can be lit without being boxed; a linear wash would end on a
   hard vertical edge at the cell boundary, and a box is the one thing this
   mark must not draw. The icon takes the gold and a little more size with
   it — the stroke thickens with the glyph, which is what makes it read at
   arm's length. The label comes up from 0.66 to full ink. Gold marks the
   line, never the word.

   Nothing travels. The mark DRAWS itself once, on arrival — see the keyframes
   below for why that has to be an animation and cannot be a transition. */
.mobile-dock__item {
  position: relative;
  isolation: isolate;
}

.mobile-dock__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Both radii are under 50% of the cell on purpose: an ellipse wider than
     half the cell still carries alpha when it meets the cell's own boundary,
     and that residual — 0.07 at the top corners, measured — is a hard step
     against the neighbour, which is to say a box. At 34% and 36% the light
     is at nothing a good 12px inside each edge, so the cell is lit and the
     cell is still not drawn. */
  background:
    /* the halo the icon sits in */
    radial-gradient(
      36% 30% at 50% 32%,
      rgba(var(--em-rgb-metal), 0.22) 0%,
      rgba(var(--em-rgb-metal), 0) 100%
    ),
    /* and the light falling from the mark in the rail */
    radial-gradient(
      34% 74% at 50% 0%,
      rgba(var(--em-rgb-metal), 0.34) 0%,
      rgba(var(--em-rgb-metal), 0.15) 38%,
      rgba(var(--em-rgb-metal), 0.05) 66%,
      rgba(var(--em-rgb-metal), 0) 100%
    );
  opacity: 0;
  transition: opacity var(--em-duration-slow) var(--em-ease-soft);
}

.mobile-dock__item::after {
  content: "";
  position: absolute;
  /* top:0 and 2px, and the two are related. The rail's own border row — the
     rgba(255,255,255,.14) hairline at the dock's top edge — is where this
     mark would ideally sit, inlaid, so the bar carries one edge instead of
     two. It cannot: .mobile-dock__nav clips at exactly this cell's top edge
     and a mark at top:-1px loses its first row to that clip. `overflow: clip`
     with `overflow-clip-margin: 2px` is the standard way to buy the row back
     and Chrome does not honour it here — measured, the clip stays on the
     boundary — and widening the clip by moving the nav is not worth
     destabilising the home page's dock trade for one pixel of a 14% white
     line. So the mark sits ON the cell's top edge and beats the hairline by
     weight instead of by position: 2px of gold at full strength against 1px
     at .14 is not a tie. */
  top: 0;
  left: 50%;
  width: 38px;
  height: 2px;
  margin-left: -19px;
  /* The ends go to nothing so the mark reads as light in the rail and not as
     a dash laid on top of it — and so neither end has to meet the white
     border at a visible join. */
  background: linear-gradient(
    90deg,
    rgba(var(--em-rgb-grey-light), 0) 0%,
    var(--unveil-gold, var(--p-metal-soft)) 15%,
    var(--unveil-gold, var(--p-metal-soft)) 85%,
    rgba(var(--em-rgb-grey-light), 0) 100%
  );
  opacity: 0;
  transform: scaleX(0.28);
  transition: opacity var(--em-duration-mid) var(--em-ease-soft),
    transform var(--em-duration-slow) var(--em-ease-exit);
}

.mobile-dock__item[aria-current] {
  color: var(--em-text-on-inverse);
}

.mobile-dock__item[aria-current] svg {
  width: 1.32rem;
  height: 1.32rem;
  color: var(--unveil-gold, var(--p-metal-soft));
}

.mobile-dock__item[aria-current]::before,
.mobile-dock__item[aria-current]::after {
  opacity: 1;
}

.mobile-dock__item[aria-current]::after {
  transform: none;
}

/* ————— The mark draws itself on arrival —————
   mobile-nav.js builds the dock and inserts it with aria-current ALREADY on
   the selected cell, so there is no state change for a transition to observe:
   the scaleX above never once ran on page load, and the mark was simply
   there, fully drawn, before the reader looked up. An animation fires on
   insertion, which is the only way this cell can announce itself — and
   announcing itself is the whole point of a selected state.

   fill-mode is BACKWARDS, not both. A forwards fill goes on overriding the
   cascade after the animation ends, and body.is-more-open below has to be
   able to take this cell's light away while the menu is up. Backwards covers
   the delay and then hands the element back to its own resting rules, which
   already hold exactly the values the animation ends on. */
@keyframes em-dock-mark {
  from {
    opacity: 0;
    transform: scaleX(0.2);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes em-dock-lit {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mobile-dock__item[aria-current]::after {
  animation: em-dock-mark var(--em-duration-slow) var(--em-ease-exit) 0.2s backwards;
}

.mobile-dock__item[aria-current]::before {
  animation: em-dock-lit var(--em-duration-slow) var(--em-ease-soft) 0.2s backwards;
}

.mobile-dock__item:active {
  color: var(--em-text-on-inverse);
}

/* While the menu is up, More is the place you are — and the page's own
   aria-current goes on telling the truth underneath it. */
body.is-more-open .mobile-dock__item[aria-current]:not(.mobile-dock__item--more) {
  color: rgba(var(--em-rgb-white), 0.66);
}

body.is-more-open .mobile-dock__item[aria-current]:not(.mobile-dock__item--more) svg {
  width: 1.2rem;
  height: 1.2rem;
  color: inherit;
}

body.is-more-open .mobile-dock__item[aria-current]:not(.mobile-dock__item--more)::before,
body.is-more-open .mobile-dock__item[aria-current]:not(.mobile-dock__item--more)::after {
  opacity: 0;
}

body.is-more-open .mobile-dock__item--more {
  color: var(--em-text-on-inverse);
}

body.is-more-open .mobile-dock__item--more svg {
  width: 1.32rem;
  height: 1.32rem;
  color: var(--unveil-gold, var(--p-metal-soft));
}

body.is-more-open .mobile-dock__item--more::before,
body.is-more-open .mobile-dock__item--more::after {
  opacity: 1;
}

body.is-more-open .mobile-dock__item--more::after {
  transform: none;
}

/* 320px: five uppercase labels across a 320px screen is 56px a cell, and
   COMMUNITIES is eleven characters. The row steps down rather than wrapping —
   a wrapped label would take the cell past the 56px touch height. */
@media (max-width: 359px) {
  /* Measured at 320: the cell is 64px, COMMUNITIES is the widest label, and
     this setting draws it at 54 — seven of slack for a fallback face. The
     default 0.58/0.07 draws it at 60 and leaves one. */
  .mobile-dock__label {
    font-size: 0.54rem;
    letter-spacing: 0.05em;
  }

  .mobile-dock__item {
    gap: 0.22rem;
    padding-inline: 0.1rem;
  }

  .mobile-dock__item svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  /* Repeated at the specificity of the rules above them: [aria-current] svg
     outranks .mobile-dock__item svg, and a media query adds nothing of its
     own. The mark comes in to 30px because the cell is 64 here, not 87. */
  .mobile-dock__item[aria-current] svg {
    width: 1.22rem;
    height: 1.22rem;
  }

  body.is-more-open .mobile-dock__item--more svg {
    width: 1.22rem;
    height: 1.22rem;
  }

  body.is-more-open .mobile-dock__item[aria-current]:not(.mobile-dock__item--more) svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .mobile-dock__item::after {
    width: 30px;
    margin-left: -15px;
  }
}

@media (max-width: 1023px) {
  .mobile-dock {
    display: block;
  }

  /* The bottom dock is the mobile search bar at rest, so the hero copy is hidden. */
  body.addr-search-page .hero-search-dock {
    display: none !important;
  }

  body.is-filters-open {
    overflow: hidden;
  }

  body.is-filters-open .mobile-dock {
    --dock-reveal: 0 !important;
    z-index: var(--z-modal);
  }

  body.is-filters-open .mobile-dock.is-search .mobile-dock__search {
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-dock,
  .mobile-dock__search,
  .mobile-dock__nav,
  .mobile-dock__item::before,
  .mobile-dock__item::after {
    transition: none;
  }

  /* The mark does not draw itself here; it is already drawn. Both selectors
     are repeated at the specificity of the rules they cancel, because a media
     query adds none of its own — and the resting rules these hand back to
     hold the same values the animation would have ended on, so cancelling
     the animation cannot leave the cell unmarked. */
  .mobile-dock__item[aria-current]::before,
  .mobile-dock__item[aria-current]::after {
    animation: none;
  }

  .mobile-dock__item[aria-current]::after {
    transform: none;
  }
}

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

/* Featured communities keep the v6 editorial flow: blocks scroll naturally
   with the page in alternating layouts — no sticky curtain stack. */

/* ————— The "More" menu — the whole site, on one screen —————
   A phone gets no footer (see the reserve rule at the foot of this file), so
   this is where everything the footer held now lives: the five destinations
   at display size, then the footer's own columns in the footer's own wording,
   the "Explore all of Emaar" directory, the contact lines, the newsletter,
   the social row and the legal foot. mobile-nav.js reads them out of the
   page's footer at boot rather than re-typing them here, so the two cannot
   drift apart. It is a full screen, not a tray: a half-height drawer with a
   scroll inside it reads as a settings sheet, and this is the brand's
   directory. ————— */

.mobile-dock__item--more {
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* ————— V12.3: the More sheet is the full-screen menu —————
   A half-height tray reads as a utility drawer, and 0.8rem nav sans reads as a
   settings list. The brand's directory deserves the whole screen and the
   page's own display face: destinations are set in Optima at display size —
   the face the folds are set in — so the menu is of a piece with the site it
   opens. Contact details keep the small nav face, because they are details,
   not destinations. The ground is ONE continuous field that falls to the
   footer's own #0f0e0c, so the footer node JS moves in below arrives on the
   same colour and there is no seam to explain. ————— */

.mobile-more {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);

  /* ————— The menu's two durations, stated once —————
     The sheet opens from the FOOT of the screen, because that is where its
     trigger is: More is the fifth cell of the dock, and on a ledge page it is
     the grid button at the same edge. A panel that fades in where it already
     was has no relationship to the thing that was tapped; one that rises out
     of the bar does, and that is the whole difference between this reading as
     a menu and as an overlay.

     Both values are house durations (01-tokens.css P.16). The exit is the
     shorter of the two on purpose: an arrival may take its time, a dismissal
     may not — a full-screen panel that takes half a second to get off the
     screen reads as reluctance.

     Nothing else in this component or in mobile-nav.js states these numbers.
     The stagger's reset derives from them, and the script reads --more-out
     back off this element to time its own un-render. A hide timer written as
     a second, separate number is precisely the defect that makes a close
     jerk: when the timer is the SHORTER of the two, display:none lands
     part-way through the slide and the panel snaps off the screen instead of
     leaving it. */
  --more-in: var(--em-duration-slow, 0.5s);    /* the sheet rising          */
  --more-out: var(--em-duration-mid, 0.35s);   /* …and leaving              */
  --more-gone: calc(var(--more-out) + 0.1s);   /* off the screen for good   */
}

.mobile-more__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.6);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity var(--more-out) var(--em-ease-panel);
}

.mobile-more__sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(
      124% 60% at 50% 0%,
      rgba(var(--em-rgb-metal), 0.1) 0%,
      rgba(var(--em-rgb-metal), 0) 64%
    ),
    linear-gradient(180deg, #14120f 0%, #100e0c 44%, var(--p-night-800) 100%);
  color: var(--em-text-on-inverse);
  /* A whole screen below itself. The sheet is never translucent — it is an
     opaque field that is either on the screen or below it, and fading it as
     well as moving it is what made the old open read as a dissolve. The
     backdrop is what the page is seen through while the sheet climbs. */
  transform: translateY(100%);
  transition: transform var(--more-out) var(--em-ease-panel);
}

/* Leaving takes --em-ease-panel, which sets off gently and accelerates away;
   arriving takes --em-ease-exit, which is most of the distance in the first
   third and then a long settle. A sheet that decelerates into place has
   weight; one that decelerates on the way out looks like it is being
   dragged. */
.mobile-more.is-open .mobile-more__backdrop {
  opacity: 1;
  transition: opacity var(--more-in) var(--em-ease-exit);
}

.mobile-more.is-open .mobile-more__sheet {
  transform: none;
  transition: transform var(--more-in) var(--em-ease-exit);
}

/* The bar floats on the field rather than sitting in a ruled box: a hairline
   under a full-screen menu is one line too many. */
.mobile-more__top {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.45rem 1.35rem;
  padding-top: calc(1.15rem + env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, #0b0a09 58%, rgba(11, 10, 9, 0) 100%);
}

/* The real wordmark, kerned by the rules the header's mark already carries. */
.mobile-more__brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
  font-size: 20px;
  line-height: 0;
  color: var(--em-text-on-inverse);
}

.mobile-more__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -0.55rem;
  /* Square, because the house language puts no radius on a control. */
  border: 1px solid rgba(var(--em-rgb-on-inverse), 0.2);
  border-radius: 0;
  background: transparent;
  color: var(--em-text-on-inverse);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.mobile-more__close:active {
  border-color: rgba(var(--em-rgb-on-inverse), 0.42);
  background: rgba(var(--em-rgb-on-inverse), 0.07);
}

/* The destinations own the first screen; the directory begins under the fold,
   found by scrolling rather than shown half-cropped at the bottom of a tray. */
.mobile-more__body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0.35rem 1.45rem 0;
  min-height: calc(100svh - 5.6rem - env(safe-area-inset-top, 0px));
}

.mobile-more__links {
  display: grid;
  border-top: 1px solid rgba(var(--em-rgb-on-inverse), 0.09);
}

.mobile-more__dest {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* The rows take the screen's air themselves — a tall list with a modest
     gap below it, rather than five tight lines and a void. */
  min-height: 4.1rem;
  padding: 0.55rem 0;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-size: clamp(1.45rem, 6.4vw, 2rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-align: left;
  color: rgba(var(--em-rgb-on-inverse), 0.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--em-rgb-on-inverse), 0.09);
  transition: color 0.3s ease, border-color 0.3s ease;
}

/* The page you are on is the one at full ink, and the rule under it turns
   light grey. The word itself never does — gold marks a line, not a heading. */
.mobile-more__dest[aria-current] {
  color: var(--em-text-on-inverse);
  border-bottom-color: rgba(var(--em-rgb-grey-light), 0.32);
}

.mobile-more__dest[aria-current] .mobile-more__chev {
  opacity: 1;
}

.mobile-more__label {
  display: block;
  min-width: 0;
}

/* Gold is the accent that marks the line, never the line itself. */
.mobile-more__chev {
  flex: none;
  width: 0.5rem;
  height: 0.75rem;
  color: var(--unveil-gold, var(--p-metal-soft));
  opacity: 0.6;
}

/* Closing takes 0.6s to fade, and an invisible full-screen panel must not
   swallow the tap that follows — Enquire opens from inside this menu. */
.mobile-more:not(.is-open) {
  pointer-events: none;
}

/* Each block arrives after the one above it, on one index counted in JS, so
   the order survives adding a section. The resting state is the VISIBLE one —
   nothing in this rule hides anything — so a menu whose open class never lands
   still reads.

   Closing, the blocks hold exactly what they are showing and leave WITH the
   sheet — one object, one movement. They snap back to their waiting state a
   tenth of a second after the sheet is off the screen, where the snap cannot
   be seen; that is what --more-gone is for, and it is why the duration here
   is 0s and the whole of the number is delay.

   Fading eleven blocks out of a panel that is still on the screen is what
   made the old close read as the menu emptying itself rather than leaving,
   and their 0.6s transform outlived the panel it was drawn on. */
.mobile-more:not(.is-open) [data-more-stagger] {
  opacity: 0;
  transform: translateY(0.7rem);
  transition: opacity 0s linear var(--more-gone),
    transform 0s linear var(--more-gone);
}

/* The cascade waits for the sheet. --em-ease-exit puts the panel through
   ~85% of its travel in the first 150ms, so 0.22s is the moment it settles:
   the blocks set themselves down ON a panel that has arrived, rather than
   animating past the reader while the ground beneath them is still moving. */
.mobile-more.is-open [data-more-stagger] {
  --more-step: calc(0.22s + var(--i, 0) * 0.042s);
  opacity: 1;
  transform: none;
  transition: opacity var(--em-duration-slow, 0.5s) var(--em-ease-exit) var(--more-step),
    transform var(--em-duration-slow, 0.5s) var(--em-ease-exit) var(--more-step);
}

/* ————— The footer's own columns, read in ————— */

.mobile-more__dir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  column-gap: 1.25rem;
  row-gap: 2.2rem;
  padding-top: 2.5rem;
}

.mobile-more__group {
  padding-top: 2.5rem;
}

.mobile-more__dir .mobile-more__group {
  padding-top: 0;
}

.mobile-more__stack {
  display: grid;
}

.mobile-more__row {
  display: flex;
  align-items: center;
  /* 44px, not 2.75rem: the interior pages run a 15px root and the home page
     16px, and a touch target is a measurement, not a type size. */
  min-height: 44px;
  font-family: var(--font-nav), "Segoe UI", system-ui, sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.012em;
  text-align: left;
  color: rgba(var(--em-rgb-on-inverse), 0.78);
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-more__row:active {
  color: var(--em-text-on-inverse);
}

/* ————— The whole directory, one tap from here as it is from the footer ————— */

.mobile-more__all {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  margin-top: 2.8rem;
  padding: 0 1.05rem;
  /* Square, because the house language puts no radius on a control. */
  border: 1px solid rgba(var(--em-rgb-on-inverse), 0.2);
  background: transparent;
  color: var(--em-text-on-inverse);
  font-family: var(--font-nav), "Segoe UI", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.mobile-more__all:active {
  border-color: rgba(var(--em-rgb-on-inverse), 0.5);
  background: rgba(var(--em-rgb-on-inverse), 0.07);
}

.mobile-more__all-arrow {
  flex: none;
  color: var(--unveil-gold, var(--p-metal-soft));
  font-size: 1rem;
  letter-spacing: 0;
}

/* ————— Newsletter. The menu's own form: site-footer.js bound the footer's
   node, and a clone of a bound control is a dead one. ————— */

.mobile-more__lede {
  margin: 0 0 0.9rem;
  max-width: 32ch;
  font-family: var(--font-nav), "Segoe UI", system-ui, sans-serif;
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(var(--em-rgb-on-inverse), 0.6);
}

.mobile-more__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid rgba(var(--em-rgb-on-inverse), 0.22);
  transition: border-color 0.3s ease;
}

.mobile-more__form:focus-within {
  border-bottom-color: var(--unveil-gold, var(--p-metal-soft));
}

.mobile-more__field {
  display: block;
  min-width: 0;
}

.mobile-more__field input {
  width: 100%;
  min-height: 48px;
  padding: 0 0.1rem;
  border: 0;
  background: transparent;
  color: var(--em-text-on-inverse);
  font-family: var(--font-nav), "Segoe UI", system-ui, sans-serif;
  /* 16px exactly: iOS zooms the page when a smaller field takes focus. */
  font-size: 16px;
  letter-spacing: 0.01em;
}

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

.mobile-more__field input:focus {
  outline: none;
}

.mobile-more__subscribe {
  min-height: 48px;
  padding: 0 0 0 1rem;
  border: 0;
  background: transparent;
  color: var(--unveil-gold, var(--p-metal-soft));
  font-family: var(--font-nav), "Segoe UI", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.mobile-more__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.mobile-more__thanks {
  margin: 0.9rem 0 0;
  font-family: var(--font-nav), "Segoe UI", system-ui, sans-serif;
  font-size: 0.86rem;
  color: var(--unveil-gold, var(--p-metal-soft));
}

/* ————— Follow ————— */

.mobile-more__social {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.62rem;
}

.mobile-more__social a {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: rgba(var(--em-rgb-on-inverse), 0.66);
  transition: color 0.3s ease;
}

.mobile-more__social a svg {
  width: 17px;
  height: 17px;
}

.mobile-more__social a:active {
  color: var(--em-text-on-inverse);
}

.mobile-more__eyebrow {
  margin: 0 0 0.7rem;
  font-family: var(--font-nav), "Segoe UI", system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral-on-inverse);
}

.mobile-more__util {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-nav), "Segoe UI", system-ui, sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.015em;
  color: rgba(var(--em-rgb-on-inverse), 0.78);
  text-decoration: none;
}

/* The menu ends where the footer used to: the copyright line and the legal
   row, carried over from it verbatim. */
.mobile-more__foot {
  flex: none;
  margin-top: 3rem;
  padding: 1.3rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(var(--em-rgb-on-inverse), 0.08);
}

.mobile-more__copy {
  margin: 0;
  font-family: var(--font-nav), system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--em-rgb-on-inverse), 0.45);
}

.mobile-more__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
}

.mobile-more__legal-item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-nav), system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 0.55, not the footer's 0.42: these are links, and 0.42 measures 3.8:1. */
  color: rgba(var(--em-rgb-on-inverse), 0.55);
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-more__legal-item:active {
  color: var(--em-text-on-inverse);
}

/* Every selector below is repeated at the specificity of the rule it is
   cancelling, because a media query adds none of its own. The sheet keeps its
   translateY(100%) waiting state — with no transition to cross it, the class
   lands and the panel is simply there — and mobile-nav.js reads the same
   preference to drop its hide timer to zero, so the un-render does not trail
   half a second behind a menu that has already gone. */
@media (prefers-reduced-motion: reduce) {
  .mobile-more__backdrop,
  .mobile-more.is-open .mobile-more__backdrop,
  .mobile-more__sheet,
  .mobile-more.is-open .mobile-more__sheet,
  .mobile-more:not(.is-open) [data-more-stagger],
  .mobile-more.is-open [data-more-stagger] {
    transition: none;
  }

  .mobile-more:not(.is-open) [data-more-stagger] {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 1024px) {
  .mobile-more {
    display: none;
  }
}
.mobile-more__brand .mark-glyph:nth-child(2) svg {
  margin-left: 0.0497em;
}

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

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

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

/* ————— Mobile dock: square edges, and the dock steps aside for the filters —————
   The house language has no radius on action controls, so the resting search
   widget is a rectangle. And once the refine sheet is open the widget is a
   duplicate of the actions already on screen, so it leaves rather than sitting
   under a full-screen panel. */

.mobile-dock {
  border-radius: 0;
}

@media (max-width: 1023px) {
  body.is-filters-open .mobile-dock {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  body.is-filters-open .mobile-dock.is-search .mobile-dock__search {
    pointer-events: none;
  }

  /* The site-search overlay is full-screen night above the dock. The dock
     owns its stand-downs, so the rule lives here; it states no duration.
     global-search.js adds the class once the overlay's own --gs-in has
     elapsed (read back off .gs) and removes it at the START of close, so the
     lifting curtain uncovers a dock already back in place. */
  body.is-site-search-open .mobile-dock {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}

/* ————— The triggers that are buttons keep the box their anchor had —————
   Moved here with the component; page.css's :where() reset listed these two
   selectors and page.css is no longer on 39 of the 40 pages. Wrapped in
   :where() so it carries no specificity and each element's own class rule
   still sets its face. */
button:where(
  .mobile-dock__item,
  .mobile-more__dest,
  .mobile-more__row,
  .mobile-more__all,
  .mobile-more__legal-item
) {
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}

/* ————— Two bottom bars is one bottom bar too many —————
   Seven pages carry .em-ledge, a sticky pair of page actions (View collections
   + Floor plans; Book Now + Floor plans). It is phone-only, and it sits at
   exactly the place the dock wants. Stacking them would put ~120px of chrome
   across the foot of a 430px screen, two bars in one treatment with nothing to
   say which to read first; hiding one behind the other's scroll state means
   the reader has to guess which gesture brings back the one they wanted.

   So on those pages there is no dock: the ledge takes a third control instead.
   The page's own actions keep their full width — they are why the reader came
   — and the menu is a narrow square beside them, opening the same sheet the
   dock's More button opens. One surface, one plate, and wayfinding never more
   than a thumb away. mobile-nav.js does the adopting.

   The same shape answers the general case: where a page owns the foot of the
   screen, the page's bar wins and the global nav rides inside it. */
/* The dock stands down only where a ledge has actually risen — the element
   alone is not the test; two shells ship one and never fill it. */
body.is-ledge-live .mobile-dock {
  display: none !important;
}

.em-ledge__more {
  flex: none !important;
  width: 46px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--em-rgb-on-inverse), 0.22);
  background: transparent;
  color: var(--em-text-on-inverse);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.em-ledge__more:hover,
.em-ledge__more[aria-expanded="true"] {
  border-color: var(--em-text-on-inverse);
  background: rgba(var(--em-rgb-on-inverse), 0.12);
}

/* The sheet is full-screen and the ledge is sticky at z-index 48; the sheet
   must cover it, not sit behind the bar that opened it. */
.mobile-more {
  z-index: var(--z-drawer);
}

/* ————— No footer on a phone —————
   A page footer is a desktop landmark. At 430px it is a five-column directory
   that takes a thousand pixels of scrolling to reach, sitting under a bottom
   bar that was already offering the same destinations — the reader arrives at
   the end of the page and finds the navigation they started with, printed
   small. Below 1024px the footer is not shown at all: mobile-nav.js reads its
   contents into the More menu at boot, so every destination it held is one tap
   away from anywhere on the page instead of a scroll away from the bottom of
   one.

   The NODE stays, emptied, because something has to end the page. The dock is
   position:fixed and reserves nothing, so without this the page's own last
   section would run under it and its final line would be unreadable. This is
   that reserve — not a collapsed footer: there is nothing left inside it to
   read, reach by keyboard, or hear. Keeping the element also keeps the home
   page's shutter intact, which counts sections and asks whether the last child
   is the footer. ————— */
@media (max-width: 1023px) {
  .site-footer[data-site-footer] {
    display: block;
    height: calc(3.3rem + env(safe-area-inset-bottom, 0px));
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
  }

  .site-footer[data-site-footer] > * {
    display: none !important;
  }
}