/* =========================================================
   REGALIA RESIDENCES — Brand skin
   19575 Collins Ave, 12 · Sunny Isles Beach, FL 33160
   Loaded AFTER site.css. Re-skins the Signature layout
   system with the Regalia brand: AWConqueror Std Didot
   (ALL-CAPS headers, tracking 0) + Jost (body + italic
   hairlines/CTAs), driftwood / salted-sand / pearl with a
   single copper "Golden Hour" accent. Espresso for dark
   grounds. Media radius 8px (soft).
   ========================================================= */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'AWConqueror Std Didot';
  src: url('../fonts/AWConquerorStdDidot-Light.otf') format('opentype');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  --display: 'AWConqueror Std Didot', 'Didot', 'Bodoni Moda', 'Bodoni 72', Georgia, serif;
  --body:    'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif;

  --type-body-l: 19px;
  --type-body-m: 17px;
  --type-body-s: 15px;
  --type-body-xs: 12px;

  --lh-display: 1.07;
  --lh-h5: 1.4;
  --lh-body: 1.62;
  --lh-tight: 1.0;

  /* Regalia palette */
  --driftwood:      #7A675D;
  --driftwood-deep: #5B4F47;
  --espresso:       #2A2521;
  --pearl:          #FBF9F5;
  --salted-sand:    #D8D0C7;
  --copper:         #A7755F;
  --copper-deep:    #6E4632;
  --champagne:      #F6E6CC;
  --grad-golden-hour: linear-gradient(105deg,#6E4632 0%,#A7755F 38%,#D6B099 68%,#F6E6CC 100%);

  /* Map the Signature semantic tokens onto Regalia */
  --shadow:     var(--espresso);
  --dune:       var(--driftwood);
  --stone:      var(--copper);
  --mist:       #D8D0C7;   /* Salted Sand — brand neutral surface (unified, was off-brand #F2EEE7) */
  --paper:      var(--pearl);

  --bg-base:    var(--pearl);
  --bg-soft:    #D8D0C7;   /* Salted Sand — brand neutral surface (unified, was off-brand #F2EEE7) */
  --bg-accent:  var(--espresso);
  --ink:        var(--driftwood);      /* headers + brand UI */
  --ink-soft:   rgba(42, 37, 33, 0.86);/* body copy — Espresso */
  --ink-muted:  rgba(42, 37, 33, 0.54);/* labels / meta — Espresso */
  --on-accent:  var(--pearl);
  --brand:      var(--driftwood);
  --accent:     var(--copper);
  --accent-text:var(--copper-deep);
  --rule:       #E2DBD1;   /* brand greige hairline — provided (was off-brand #DED5C9) */
  --rule-soft:  #E2DBD1;   /* brand greige hairline — provided (was off-brand #E9E2D7) */
  --rule-light: rgba(251, 249, 245, 0.22); /* translucent Pearl (was off-palette) */

  --surface: #FFFFFF;
  --media-radius: 8px;
}

/* ---------- TYPE BASE ----------
   Headers: Didot, ALL CAPS, tracking 0, upright (never italic — the
   supplied Didot ships one upright weight; faux-italic is banned).
   The italic "voice" lives in Jost Medium Italic (eyebrows / CTAs / subheads).
*/
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  font-synthesis: none;
  line-height: var(--lh-display);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
h1 em, h2 em, h3 em, h4 em { font-style: normal; }

h5, h6, .subhead {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-synthesis: none;
  line-height: var(--lh-h5);
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--ink-soft);
}

p {
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--type-body-m);
  line-height: var(--lh-body);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin: 0 0 1em;
  text-wrap: pretty;
}

/* Hairline / eyebrow — Jost Medium Italic, uppercase, copper */
.hairline,
.eyebrow {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-size: var(--type-body-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow--rule::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--grad-golden-hour);
  flex: 0 0 auto;
}

/* =========================================================
   DISPLAY TITLE OVERRIDES
   Flip every Cormorant-italic title to upright Didot caps.
   ========================================================= */
.editorial__title,
.feature__title,
.feature__title em,
.cta-card__title,
.details__price-value,
.details__stat-val,
.kpi__val,
.inquire__title,
.inquire__title em,
.inquire__card-title,
.inquire__card-title em,
.agent-card__name,
.team__head h2,
.neighborhood__head h2,
.gallery__head h2,
.floorplan__head h2,
.footer__col p.footer__brand-street,
.footer__col p.footer__agent-name,
.page-hero__title,
.page-hero__title em,
.closing__title {
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.07;
  color: var(--ink);
}

/* Numeric display values can sit a touch tighter */
.details__price-value,
.details__stat-val,
.kpi__val { letter-spacing: 0.01em; }

/* Titles / text on dark grounds stay pearl */
.footer__col p.footer__brand-street,
.footer__col p.footer__agent-name { color: var(--on-accent); }
.section--inverted h1, .section--inverted h2,
.section--inverted h3, .section--inverted h4 { color: var(--on-accent); }

/* Sentence-case Didot serif leads (intro + hero lede) */
.intro-prose__copy p:first-child,
.intro-prose__col p:first-child,
.hero__lede {
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
}
.iform__success em {
  font-family: var(--display);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* =========================================================
   ITALIC HAIRLINE / CTA voice (Jost Medium Italic)
   ========================================================= */
.nav__link,
.btn,
.iform__submit,
.details__eyebrow,
.inquire__eyebrow,
.cta-card__sub {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
}
.details__eyebrow,
.inquire__eyebrow { color: var(--accent-text); }

/* Upright Jost for dense functional labels (legibility) */
.kpi__label,
.details__stat-label,
.agent-card__role,
.feature__media__counter,
.gallery__counter,
.floorplan__zoom,
.lightbox__counter,
.footer__copyright,
.neighborhood__cat,
.iform__label,
.iform__choice span {
  font-family: var(--body);
  font-weight: 400;
  font-style: normal;
}

/* =========================================================
   NAV — brand-mark logo swap
   ========================================================= */
.nav__brand img { height: 66px; }
.nav.is-scrolled .nav__brand img { height: 51px; }
@media (max-width: 900px) {
  .nav__brand img { height: 46px; }
}

/* Copper underline on nav links */
.nav__link::after { background: var(--grad-golden-hour); height: 1px; }

/* =========================================================
   HERO — branded placeholder (photo dropped in later)
   ========================================================= */
.hero__bg--placeholder {
  background-color: var(--espresso);
  background-image:
    radial-gradient(62% 78% at 78% 38%, rgba(167,117,95,0.55) 0%, rgba(110,70,50,0.26) 38%, transparent 72%),
    url('../brand/lineart-golden.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center 58%;
  background-size: cover, 124% auto;
  animation: none;
  transform: none;
}
.hero__overlay--soft { background: linear-gradient(180deg, rgba(20,18,15,0.32) 0%, rgba(20,18,15,0.20) 45%, rgba(20,18,15,0.52) 100%); }
.hero__logo {
  width: clamp(260px, 34vw, 480px);
  filter: brightness(0) invert(1) drop-shadow(0 6px 30px rgba(0,0,0,0.45));
}
/* Hero headline (replaces the wordmark lockup) — white Didot, centered,
   sized to match the intro headline. Solid white (not foil) for full
   legibility over the photograph. */
.hero__title {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.08;
  font-size: clamp(34px, 4.2vw, 58px);
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-align: center;
  max-width: 24ch;
  text-wrap: balance;
  margin: 0;
  text-shadow: 0 2px 26px rgba(20, 18, 15, 0.55);
}
/* Hero CTA — white pill with brown (driftwood) text, centered under the
   headline. Inverts on hover for a tactile press. Uses .btn.btn--hero to
   outrank the later base .btn background/color rules. */
.btn.btn--hero {
  margin-top: 32px;
  background: #fff;
  color: var(--driftwood);
  border: 1px solid #fff;
  box-shadow: 0 8px 24px rgba(20, 18, 15, 0.22);
}
.btn.btn--hero:hover,
.btn.btn--hero:focus-visible {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
/* Hero content must never depend on the entrance animation to be visible
   (offscreen iframes / reduced-motion can freeze it). Show by default. */
.hero__location,
.hero__logo,
.hero__title,
.hero__lede {
  opacity: 1;
  transform: none;
  animation: none;
}
.hero__location { color: rgba(246,230,204,0.92); letter-spacing: 0.36em; }
.hero__ph-tag {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246,230,204,0.66);
}

/* =========================================================
   PHOTO PLACEHOLDER SYSTEM (swap background-image when photos land)
   ========================================================= */
.ph {
  position: relative;
  background-color: var(--salted-sand);
  background-image: url('../brand/lineart-golden.svg');
  background-repeat: no-repeat;
  background-position: center 64%;
  background-size: 150% auto;
  overflow: hidden;
}
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(216,208,199,0.30) 0%, rgba(157,137,114,0.18) 100%);
}
.ph__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}
.ph__label-mark {
  font-family: var(--body);
  font-weight: 500;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper-deep);
  opacity: 0.7;
}
.ph__label-name {
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.1;
  color: var(--driftwood-deep);
}
.ph__label-sub {
  font-family: var(--body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(58,52,46,0.5);
}

/* =========================================================
   EYEBROW placement above section heads
   ========================================================= */
.feature__head .eyebrow { justify-content: center; margin-bottom: 4px; }
.section-eyebrow { margin-bottom: 20px; }

/* =========================================================
   CLOSING / OFFERING statement (Residence)
   ========================================================= */
.closing {
  background: var(--bg-base);
  text-align: center;
}
.closing__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.closing__title {
  font-size: clamp(30px, 3.6vw, 52px);
  margin: 0;
}
.closing__copy {
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}
.closing__rule {
  width: 64px;
  height: 1px;
  background: var(--grad-golden-hour);
}

/* =========================================================
   PAGE HERO (Residence) — stacked, on pearl
   ========================================================= */
.page-hero {
  padding-top: clamp(140px, 20vh, 220px);
  padding-bottom: clamp(48px, 7vw, 88px);
  background: var(--bg-base);
}
.page-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
.page-hero__title {
  font-size: clamp(48px, 7vw, var(--type-h1));
  margin: 0;
}
.page-hero__lede {
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--type-body-m);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}
.page-hero__eyebrow { margin-bottom: 22px; }
@media (max-width: 900px) {
  .page-hero__inner { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  /* First section sits under the fixed nav. Use a deterministic offset
     (nav height + one standard section gap) instead of viewport-scaled
     padding, so the visible gap below the nav matches every other section.
     Nav (top state) ≈ 40 + 69 logo + 22 = 131px, plus the device safe area. */
  .page-hero {
    padding-top: calc(131px + env(safe-area-inset-top, 0px) + var(--section-y-mobile));
    padding-bottom: var(--section-y-mobile);
  }
}

/* =========================================================
   AMENITIES list (one blurb rendered as columns, not a photo)
   ========================================================= */
.amenities { background: var(--bg-soft); }
.amenities__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.amenities__head h2 { font-size: clamp(36px, 4.4vw, 60px); margin: 0; }
.amenities__list {
  max-width: 1000px;
  margin: 0 auto;
  columns: 2;
  column-gap: clamp(40px, 6vw, 96px);
  list-style: none;
  padding: 0;
}
.amenities__item {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--type-body-m);
  line-height: 1.45;
  color: var(--ink-soft);
}
.amenities__item-num {
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--copper-deep);
}
@media (max-width: 700px) {
  .amenities__list { columns: 1; }
}

/* =========================================================
   CTA card sub uses copper eyebrow
   ========================================================= */
.cta-card__sub { color: rgba(246,230,204,0.86); }

/* =========================================================
   SECTION DIVIDER (thin copper rule used sparingly)
   ========================================================= */
.copper-rule {
  width: 100%;
  height: 1px;
  background: var(--grad-golden-hour);
  opacity: 0.5;
  border: 0;
  margin: 0;
}

/* =========================================================
   FOOTER — brand mark
   ========================================================= */
.footer__signature { filter: none; opacity: 1; width: clamp(150px, 15vw, 198px); height: auto; }
.footer__brand-mark {
  height: clamp(56px, 7vw, 84px);
  width: auto;
  margin-bottom: 18px;
}

/* Reveal blocks must not stay invisible if transitions are frozen
   (offscreen iframe / reduced motion / print). Base state visible. */
.inquire__headline,
.inquire__card {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Constrained images open in the lightbox */
[data-lightbox-src] { cursor: zoom-in; }

/* =========================================================
   DESIGNER REVISIONS
   ========================================================= */

/* 1 · Nav — balanced: link groups anchored to both outer edges, wider gaps */
.nav__links { gap: 44px; }
.nav__links--left { justify-self: start; }
.nav__right { justify-self: end; justify-content: flex-end; gap: 44px; }

/* 2 · Hero location — legible over photography */
.hero__location {
  color: #fff;
  text-shadow: 0 1px 18px rgba(20, 18, 15, 0.6);
}
.hero__overlay--soft {
  background: linear-gradient(180deg, rgba(20,18,15,0.48) 0%, rgba(20,18,15,0.30) 42%, rgba(20,18,15,0.56) 100%);
}

/* 3 · Details strip — price + all stats are equidistant siblings edge-to-edge */
.details__stat { flex: 0 0 auto; }

/* 4 · Intro half-image — taller for impact */
.intro-prose__image { min-height: clamp(540px, 66vh, 780px); }

/* 6 · Neighborhood map — narrower, right-aligned under the lede column */
.neighborhood__grid {
  grid-template-columns: minmax(280px, 340px) minmax(0, 760px);
  justify-content: space-between;
}

/* 7 · Team — body copy on one side, agent card on the other */
.team__body {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  max-width: 1180px;
}
.team__copy { column-count: 1; column-rule: 0; }
.team__agents { grid-template-columns: 1fr; align-self: start; }

/* 8 · Overlines — remove the dash/rule element */
.eyebrow--rule::before { content: none; }

/* 9 · Footer — smaller address/name so each header sits on one line */
.footer__col p.footer__brand-street,
.footer__col p.footer__agent-name {
  font-size: 20px;
  margin-bottom: 12px;
  white-space: nowrap;
}
.footer__top { gap: clamp(24px, 3vw, 44px); }

/* Footer divider — a touch more breathing room above/below the rule (+20%) */
.footer__top { padding-bottom: 29px; }
.footer__bottom { padding-top: 24px; }

@media (max-width: 900px) {
  .team__body { grid-template-columns: 1fr; }
  .neighborhood__grid { grid-template-columns: 1fr; }
  .footer__col p.footer__brand-street,
  .footer__col p.footer__agent-name { white-space: normal; }
}

/* Selection + focus in brand copper */
::selection { background: var(--champagne); color: var(--espresso); }
:focus-visible { outline-color: var(--copper); }

/* =========================================================
   METALLIC GOLDEN HOUR — foil eyebrows + line-art motifs
   Per brand guide, Golden Hour is ALWAYS the metallic gradient.
   ========================================================= */
:root {
  /* Copper-range foil that stays legible as text on light grounds */
  --grad-foil-text: linear-gradient(100deg, #6E4632 0%, #A7755F 40%, #D6B099 50%, #A7755F 60%, #6E4632 100%);
}

/* Eyebrows, kickers and editorial numerals render in metallic foil */
.eyebrow,
.hairline,
.details__eyebrow,
.inquire__eyebrow,
.amenities__item-num,
.closing__copy + .closing__rule {
  background-image: var(--grad-foil-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Foil divider rules */
.closing__rule,
.copper-rule { background-image: var(--grad-golden-hour); }

/* Line-art motif — faint, bleeding off a corner (brand: 5–18% presence) */
/* Contact section — now sits on the SAME copper Golden Hour metallic as the
   Offering band on the residence page. Espresso fallback + scrim keep the
   pearl headline legible across the bright champagne zones. */
.inquire {
  position: relative;
  overflow: hidden;
  background-color: var(--espresso);
  background-image: url('../brand/offering-metallic.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--pearl);
}
.inquire::before { display: none; }
/* Scrim — darkens the near-white highlights so pearl type holds everywhere */
.inquire::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 28, 24, 0.52) 0%,
    rgba(34, 28, 24, 0.40) 48%,
    rgba(34, 28, 24, 0.56) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.inquire .container { position: relative; z-index: 1; }
/* Headline flips from copper foil to solid pearl so it reads on the metallic */
.inquire__title {
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--pearl);
  color: var(--pearl);
  animation: none;
  text-shadow: 0 2px 20px rgba(20, 18, 15, 0.40);
}

.closing { position: relative; overflow: hidden; }
.closing::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, 56%); height: 78%;
  background: url('../brand/mark-golden.svg') center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.closing .container { position: relative; z-index: 1; }

.team { position: relative; overflow: hidden; }
.team::before {
  content: '';
  position: absolute;
  top: -18%; left: -10%;
  width: 46%; height: 150%;
  background: url('../brand/lineart-golden.svg') top left / contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.team .container { position: relative; z-index: 1; }

/* Amenities sits on bg-soft — a quiet foil whisper in the far corner */
.amenities { position: relative; overflow: hidden; }
.amenities::before {
  content: '';
  position: absolute;
  bottom: -20%; right: -8%;
  width: 48%; height: 150%;
  background: url('../brand/lineart-golden.svg') bottom right / contain no-repeat;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}
.amenities .container { position: relative; z-index: 1; }

/* =========================================================
   FOLLOW-UP REVISIONS
   ========================================================= */

/* Carousel — smooth, slow crossfade (no transform/zoom conflict) */
.feature__media--carousel .feature__slide {
  transform: none !important;
  animation: none !important;
  transition: opacity 1700ms ease-in-out;
}

/* Intro — two-column: header + body + button beside the image.
   (First child is now the h2 title, so neither <p> is the display lead —
   both render as body copy, per request.) */
.intro-prose__title {
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
  margin: 0;
  max-width: 16ch;
}
.intro-prose__copy p { max-width: 50ch; }
/* Tour CTA hugs its copy instead of stretching the flex column */
.intro-prose__copy .btn { align-self: flex-start; }

/* =========================================================
   HOMEPAGE BALANCE PASS
   ========================================================= */

/* Details — unified row: label over value, everything aligned,
   price visually tied to its own label. */
.details__inner {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 56px);
}
.details__price,
.details__stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  padding: 0;
}
.details__price-value { font-size: clamp(36px, 3.4vw, 48px); }
/* Force uniform lining figures so every digit shares one baseline
   (the Didot face defaults to old-style figures — 6/8 ride high). */
.details__price-value,
.details__stat-val,
.kpi__val {
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
}
.details__eyebrow {
  font-family: var(--body);
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: none;
  -webkit-text-fill-color: currentColor;
}
@media (max-width: 900px) {
  .details__inner { flex-wrap: wrap; gap: 28px 40px; }
  .details__price { flex: 0 0 100%; }
}

/* Neighborhood — lede stacks beneath the headline, left-aligned */
.neighborhood__head {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 18px;
}
.neighborhood__lede {
  justify-self: start;
  text-align: left;
  /* Fixed width keeps the lede in the left rail, clear of the map's left
     edge (sidebar 380 + 56 gap = 436px), and makes it wrap identically at
     every desktop width so the header height — and the pull offset — stay
     constant. */
  max-width: 360px;
}
/* Map top aligns with the "Neighborhood" headline top, bottom unchanged.
   Pull the map up by the header band (height + its 56px margin) and add the
   same amount back to its height so the bottom edge stays put. Desktop only —
   the single-column mobile layout is untouched. */
@media (min-width: 901px) {
  .neighborhood__map {
    --nb-head-offset: 205px;
    margin-top: calc(-1 * var(--nb-head-offset));
    height: calc(clamp(480px, 60vh, 640px) + var(--nb-head-offset));
  }
}

/* Team — section kicker header restored; body copy narrower */
.team__kicker {
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(32px, 4.2vw, 54px);
  letter-spacing: 0.02em;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
/* SERHANT. Signature mark — 10% larger, Golden Hour foil (no dark filter) */
.team__lockup { height: clamp(44px, 4.4vw, 62px); filter: none; }
.team__copy p { max-width: 50ch; }
.team__agents { align-self: center; }

/* Agent card — vertical: portrait on top, details centered beneath */
.agent-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  max-width: 360px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.agent-card__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-position: center 20%;
}
.agent-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
}
.agent-card__contact { align-items: center; }

/* Team — two columns on web (body copy beside the agent card),
   single column stacked on mobile. */
.team__body {
  grid-template-columns: 1.05fr 0.95fr;
  max-width: 1180px;
  gap: clamp(40px, 5vw, 72px);
  align-items: stretch;
}
.team__copy { column-count: 1; }
.team__agents { align-self: stretch; }
.agent-card { max-width: 360px; height: 100%; margin: 0 auto; }
.agent-card__portrait { flex: 1 1 auto; aspect-ratio: auto; height: auto; min-height: 0; background-size: cover; background-position: center 9%; }
.agent-card__body { flex: 0 0 auto; padding: 10px 18px 14px; gap: 1px; }
.agent-card__contact { margin-top: 4px; gap: 1px; }
@media (max-width: 900px) {
  .team__body { grid-template-columns: 1fr; max-width: 640px; gap: clamp(32px, 4vw, 44px); align-items: center; }
  .team__agents { align-self: center; }
  .agent-card { height: auto; max-width: 360px; margin: 0 auto; }
  .agent-card__portrait { flex: none; aspect-ratio: 1 / 1; height: auto; background-position: center 8%; }
}

/* Buttons — fully rounded pill per brand guidelines */
.btn,
.iform__submit,
.iform__choices,
.iform__choice span {
  border-radius: 999px;
}
.iform__choices { padding: 4px; }

/* Inquire submit — tighter, hugging width matching the "Tour the Residence"
   button instead of a full-width bar. */
.iform__actions {
  justify-content: center;
}
.iform__submit {
  width: auto;
  align-self: center;
  padding: 16px 28px;
}

/* Buttons — filled (driftwood) by default on light grounds, outline on hover */
.btn {
  background: var(--ink);
  color: var(--bg-base);
  border-color: var(--ink);
}
.btn:hover,
.btn:focus-visible {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* =========================================================
   METALLIC PIZAZZ PASS
   Golden Hour was living only in tiny eyebrows + faint line-art.
   This broadens the foil to the marquee moments — display titles,
   the hero figures, dividers, and the primary CTAs — with a slow,
   motion-safe sheen so the metal catches the light.
   ========================================================= */

:root {
  /* Display-grade foil: tonal range for a struck-metal read, but every stop
     stays in legible copper — the lightest "sheen" band is capped at #C98A66
     so titles never wash out as the animation sweeps across. */
  --grad-foil-display: linear-gradient(
    100deg,
    #6E4632 0%,
    #A7755F 38%,
    #D6B099 50%,
    #A7755F 62%,
    #6E4632 100%
  );
}

@keyframes foilSheen {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Marquee display titles → metallic foil ---- */
.page-hero__title,
.feature__title,
.feature__title em,
.closing__title,
.team__kicker,
.amenities__head h2,
.neighborhood__head h2,
.gallery__head h2,
.floorplan__head h2,
.intro-prose__title {
  background-image: var(--grad-foil-display);
  background-size: 220% 100%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: foilSheen 9s ease-in-out infinite alternate;
}

/* ---- Hero figures → metallic foil ---- */
/* Homepage: the price is the single gleaming headline figure; secondary
   every figure in the strip gleams together (price + all stats). */
.details__price-value,
.details__stat-val {
  background-image: var(--grad-foil-display);
  background-size: 220% 100%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: foilSheen 9s ease-in-out infinite alternate;
}
/* Keep the small unit (SF) quiet/muted so the number leads */
.details__stat-val small {
  -webkit-text-fill-color: var(--ink-muted);
  color: var(--ink-muted);
  background: none;
}
/* Residence: the KPI numbers are the page's stat hero — let them gleam. */
.kpi__val {
  background-image: var(--grad-foil-display);
  background-size: 220% 100%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: foilSheen 9s ease-in-out infinite alternate;
}

/* Let the existing eyebrow/hairline foil come alive with the same sheen */
.eyebrow,
.hairline,
.amenities__item-num {
  background-size: 220% 100%;
  background-position: 50% 50%;
  animation: foilSheen 9s ease-in-out infinite alternate;
}

/* ---- Respect reduced-motion: keep the foil, drop the sweep ---- */
@media (prefers-reduced-motion: reduce) {
  .page-hero__title,
  .feature__title,
  .feature__title em,
  .closing__title,
  .team__kicker,
  .details__stat-val,
  .amenities__head h2,
  .neighborhood__head h2,
  .gallery__head h2,
  .floorplan__head h2,
  .intro-prose__title,
  .details__price-value,
  .kpi__val,
  .eyebrow,
  .hairline,
  .inquire__title,
  .amenities__item-num {
    animation: none;
  }
}

/* =========================================================
   OFFERING (Residence) — metallic Golden Hour background
   The closing band sits on the supplied copper graphic. The foil
   headline would disappear on copper, so type flips to pearl with a
   soft scrim taming the brightest champagne zones for legibility.
   ========================================================= */
.closing {
  background-color: var(--espresso);
  background-image: url('../brand/offering-metallic.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--pearl);
}
/* Scrim — darkens the near-white highlights so pearl type holds everywhere */
.closing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 28, 24, 0.52) 0%,
    rgba(34, 28, 24, 0.40) 48%,
    rgba(34, 28, 24, 0.56) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.closing .container { position: relative; z-index: 1; }

/* Headline → solid pearl (drop the copper foil + sheen on this ground) */
.closing__title {
  background: none;
  background-image: none;
  -webkit-text-fill-color: var(--pearl);
  color: var(--pearl);
  animation: none;
  text-shadow: 0 2px 20px rgba(20, 18, 15, 0.40);
}
.closing__copy {
  color: rgba(251, 249, 245, 0.95);
  text-shadow: 0 1px 14px rgba(20, 18, 15, 0.32);
}
.closing__rule { opacity: 0.95; }

/* Light CTA on the dark metallic ground */
.closing .btn {
  background: var(--pearl);
  color: var(--espresso);
  border-color: var(--pearl);
}
.closing .btn:hover,
.closing .btn:focus-visible {
  background: transparent;
  color: var(--pearl);
  border-color: var(--pearl);
}

/* The graphic now carries the metallic — hide the faint corner mark */
.closing::before { display: none; }

/* =========================================================
   MOBILE RESPONSIVE PASS
   The site has responsive breakpoints, but a number of fixed-pixel
   inline styles were applied during editing (nav-logo 208×106, the
   closing copy pinned to 600px, fixed agent-card dimensions, and
   45–50px display headings). Those win over the responsive CSS, so
   below we override them at phone/tablet widths. !important is used
   ONLY because these specifically target inline style attributes.
   ========================================================= */

/* ---- Tablet & down: size the nav logo (50% larger) & center it ---- */
@media (max-width: 900px) {
  .nav__brand img,
  .nav__logo--light,
  .nav__logo--dark {
    width: auto !important;
    height: 69px !important;
  }
  .nav.is-scrolled .nav__brand img,
  .nav.is-scrolled .nav__logo--light,
  .nav.is-scrolled .nav__logo--dark {
    height: 57px !important;
  }
  /* Center the logo in the bar; pin the burger to the right edge so the
     logo reads as the centerpiece. The nav is already position:fixed, which
     itself establishes the containing block for .nav__right below — do NOT
     set position:relative here or it breaks the fixed pin on mobile. */
  .nav__brand {
    grid-column: 1 / -1;
    justify-self: center !important;
  }
  .nav__right {
    position: absolute;
    top: 50%;
    right: var(--gutter);
    transform: translateY(-50%);
    justify-self: auto;
  }
}

/* ---- Phones: reflow the fixed-width pieces & scale display type ---- */
@media (max-width: 767px) {
  /* No element may force horizontal scroll */
  html, body { overflow-x: hidden; }

  /* Closing copy was pinned to 600px — far wider than a phone */
  .closing__copy {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Agent card: drop the fixed portrait/body dimensions so it reflows.
     The portrait photo is itself portrait (~4:5) — match the frame to it
     so the full headshot shows instead of a top/bottom crop. */
  .agent-card { max-width: 100% !important; }
  .agent-card__portrait {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    background-position: center 8% !important;
  }
  .agent-card__body { height: auto !important; }

  /* Team (mobile only): tighten the gap between the kicker and the
     SERHANT. Signature lockup so they read as one associated unit.
     Web keeps the original, looser 28px (set in site.css). */
  .team__head { gap: 12px; }
  .team__grid { gap: 30px; }

  /* Intro-prose must collapse to one column on phones. regalia.css's
     non-media .intro-prose__image min-height was overriding site.css's
     mobile reset, keeping the two-up layout wide — force it here. */
  .intro-prose { grid-template-columns: 1fr !important; }
  .intro-prose__image {
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
  }
  .intro-prose__copy p { max-width: 100% !important; }

  /* Display headings: hardcoded 45–50px is too large on a phone.
     Scale them down (overrides the inline font-size). */
  .hero__title        { font-size: 30px !important; }
  .page-hero__title   { font-size: 38px !important; }
  .intro-prose__title { font-size: 27px !important; }
  .feature__title     { font-size: 28px !important; }
  .closing__title     { font-size: 30px !important; }
  .inquire__title     { font-size: 28px !important; }
  .team__kicker       { font-size: 26px !important; }
  .amenities__head h2,
  .neighborhood__head h2 { font-size: 28px !important; }

  /* Keep the hero headline comfortably inside the gutters */
  .hero__title { max-width: 92vw; }
}

/* ---- Small phones: a touch tighter ---- */
@media (max-width: 420px) {
  .hero__title      { font-size: 26px !important; }
  .page-hero__title { font-size: 32px !important; }
}

/* ---- Stats band on mobile: match the residence KPI strip exactly —
   bordered 2-column grid, value on top, label below, same font sizes. ---- */
@media (max-width: 900px) {
  .details { padding: 0; border-bottom: 0; }
  .details__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    align-items: stretch;
    text-align: left;
  }
  /* Every cell: padded, with grid divider lines like .kpi */
  .details__price,
  .details__stat {
    padding: 32px 24px;
    border-bottom: 1px solid var(--rule);
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-end;
  }
  /* Value on top, label below (DOM order is label-first, so reverse) */
  .details__stat { flex-direction: column-reverse; }
  /* Price spans the full top row; keep eyebrow above its value */
  .details__price {
    grid-column: 1 / -1;
    flex-direction: column;
    gap: 12px;
  }
  /* Vertical divider: left-column stats get a right border.
     Children order: 1 price, 2 BR, 3 BA, 4 Interior, 5 Terrace, 6 Full Floor */
  .details__stat:nth-child(2),
  .details__stat:nth-child(4) { border-right: 1px solid var(--rule); }
  /* Full Floor spans full width as the final row, no bottom border */
  .details__stat:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }
  /* Match the KPI value + label type sizes */
  .details__stat-val { font-size: clamp(28px, 2.4vw, 36px); line-height: 1; }
  .details__price-value { font-size: clamp(32px, 8vw, 40px); line-height: 1; }
  .details__stat-label,
  .details__eyebrow { font-size: var(--type-body-xs); letter-spacing: 0.22em; }
}

/* =========================================================
   HAMBURGER + MOBILE MENU
   Burger hidden on desktop; shown ≤900px (where the inline nav
   links are already hidden). Inherits currentColor so it's white
   over the hero and dark when the nav is scrolled/stacked.
   ========================================================= */
.nav__burger {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: currentColor;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 300ms var(--ease), opacity 200ms var(--ease);
}

.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--espresso);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease), visibility 0s linear 360ms;
}
.nav-mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
/* Golden-hour hairline at the very top edge */
.nav-mobile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-golden-hour);
}
.nav-mobile__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--pearl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-mobile__close svg { width: 26px; height: 26px; }

.nav-mobile__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.nav-mobile__link {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 34px;
  line-height: 1.6;
  color: var(--pearl);
  text-decoration: none;
  background-image: var(--grad-foil-display);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 500ms var(--ease);
}
.nav-mobile__link:active,
.nav-mobile__link:focus-visible { background-position: 100% 50%; }

.nav-mobile__cta {
  margin-top: 28px;
  font-family: var(--body);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--espresso);
  background: var(--grad-golden-hour);
  padding: 16px 40px;
  border-radius: 999px;
}

/* Lock background scroll while the menu is open */
body.nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav__burger { display: flex; }
  /* The header Inquire button is duplicated inside the menu — hide it
     so the bar stays clean: logo + burger only. */
  .nav__right .btn { display: none; }
  .nav__right { gap: 8px; }
}
@media (min-width: 901px) {
  /* Never show the mobile menu on desktop, even if a stale class lingers */
  .nav-mobile { display: none; }
}