/* ============================================================================
   Amorielli / Art de Vivre — main.css
   Carioca luxury, full-bleed cinematic. Jewel-tone with sun-warmed amber.
   ============================================================================ */

/* ----- Tokens ----- */
:root {
  /* Declare the site as light-themed so mobile browsers (esp. Android Chrome
     "Auto dark theme") don't algorithmically re-color it — that was darkening
     the bone nav-overlay text to invisible on dark-mode phones. */
  color-scheme: light;
  /* Color — 2026-06-10 restyle: 40% black / 40% white / 20% deep burgundy.
     Blacks are neutral (no navy cast); burgundy is reserved for the footer,
     one statement band per page, and small price/status/hover accents. */
  --c-ink:        #0b0c0e;   /* near-black, used for backgrounds & type */
  --c-ink-2:      #14161a;   /* charcoal panel (cards on dark) */
  --c-night:      #17191e;   /* lifted black (alt dark section) */
  --c-forest:     #101315;   /* deep neutral dark section */
  --c-claret:     #3a0f17;   /* deep burgundy — the reserved 20% accent */
  --c-bg-dark:    #0b0c0e;   /* near-black surface */
  --c-burg:       #4a1119;   /* burgundy mid — bands & gradients */
  --c-burg-soft:  #6b1f2c;   /* ADV logo burgundy — small accents & hovers */
  --c-sand:       #f3ead9;   /* sun-bleached calçadão */
  --c-bone:       #faf6ee;   /* primary surface */
  --c-cream:      #ece5d3;
  --c-gold:       #7d5f20;   /* AA bronze — gold TEXT on the light (white) page
                                base needs >=4.5:1; the dark sections re-brighten
                                this to the amber below. (WCAG fix 2026-07-05) */
  --c-gold-bright: #c69a4d;  /* the original Christ-at-dusk amber — for dark bg */
  --c-gold-soft:  #d9bb82;
  --c-rust:       #7d5f20;   /* was #a37c33 (~3.5:1 on white, failed AA) — same
                                AA bronze; flipped back to amber on dark sections.
                                Keeps every rust accent in the gold family. */
  --c-verde:      #133525;   /* Charlie's official ADV brand green (Logo-Art-de-Vivre-verde.svg) */
  --c-line:       rgba(250,246,238,0.14);
  --c-line-dark:  rgba(11,12,14,0.10);

  /* Type — Charlie 2026-05-26: Helvetica Neue site-wide (Light for body),
     no italics anywhere. All four tokens resolve to the same stack so any
     legacy rule that picks --f-serif/--f-display/--f-italic still renders
     in Helvetica Neue. */
  --f-serif:      "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  --f-display:    "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  --f-sans:       "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  --f-italic:     "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;

  /* Sizes */
  --s-label:      0.82rem;
  --s-base:       1.06rem;
  --s-lead:       clamp(1.06rem, 0.95rem + 0.55vw, 1.32rem);
  --s-h3:         clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  --s-h2:         clamp(2rem, 1.4rem + 2vw, 3.6rem);
  --s-h1:         clamp(3rem, 1.4rem + 7vw, 9.5rem);

  /* Layout */
  --container:    min(1320px, 92vw);
  --container-tight: min(960px, 92vw);
  --header-h:     136px;    /* utility row (36px) + main nav row (100px) — fatter to seat the stacked logo (mark above wordmark) */
  --header-util:  36px;
  --header-main:  100px;
  --header-inset: 0;

  /* Motion */
  --ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

/* Charlie 2026-05-26: zero italics site-wide. Overrides every inline
   font-style: italic; in this file plus journal.css / adv-map.css, plus
   any <em> / <i> / .it in template HTML. */
*, *::before, *::after { font-style: normal !important; }

/* Form controls don't inherit font by default — force Helvetica Neue
   on bare <button>/<input>/<select>/<textarea> so the to-top arrow,
   mobile menu trigger, etc. don't drop to Arial. */
button, input, select, textarea, optgroup,
.leaflet-container, .leaflet-control, .leaflet-control-zoom a {
  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;     /* 2026-06-01 re-skin: white page base (was near-black) */
  color: var(--c-ink);     /* dark default text now that the base is white */
  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  font-weight: 300;        /* Helvetica Neue Light by default */
  font-size: var(--s-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/* Skip-to-content link + global keyboard focus ring (a11y, 2026-07-05). */
.skip-link {
  position: absolute; left: 8px; top: -56px; z-index: 2147483001;
  background: var(--c-ink); color: #fff; padding: 10px 16px; border-radius: 4px;
  font-size: 0.9rem; font-weight: 400; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--c-gold-bright); outline-offset: 2px; }

/* Per-building rental-yield estimates disclaimer (2026-07-05). */
.yield-disclaimer { margin-top: 2rem; font-size: 0.85rem; line-height: 1.5; opacity: 0.6; max-width: 74ch; }

::selection { background: var(--c-gold); color: var(--c-bg-dark); }

/* Smooth scroll target (Lenis takes over) */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ----- Typography ----- */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--s-h2);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
}
.display .it,
.italic {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
}

h1, h2, h3 { margin: 0; }
p { margin: 0; }

.lead {
  font-size: var(--s-lead);
  line-height: 1.55;
  font-weight: 300;
  max-width: 56ch;
}
.prose { font-size: 1.05rem; line-height: 1.7; font-weight: 300; max-width: 60ch; opacity: 0.92; }

.eyebrow,
.label,
.ornament {
  font-family: var(--f-sans);
  font-size: var(--s-label);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 500;
  color: var(--c-gold);
}
.ornament::before { content: "—  "; opacity: 0.6; }

/* Hero eyebrow removed sitewide — the small gold "BUY"/section label read as a
   distraction (Dan 2026-06-16). Scoped to the page-hero so card/nav labels stay. */
.page-hero .label { display: none; }

.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.75rem; }
.mt-12 { margin-top: 3.5rem; }

/* ----- Backgrounds (section themes) -----
   2026-06-10 restyle: 40% black / 40% white / 20% deep burgundy.
   Dark utilities carry neutral near-blacks; .bg-claret is the ONE
   burgundy statement band a page may use; light utilities stay white. */
.bg-ink     { background: var(--c-ink); color: var(--c-bone); }
.bg-night   { background: var(--c-night); color: var(--c-bone); }
.bg-forest  { background: var(--c-forest); color: var(--c-bone); }
.bg-claret  { background: linear-gradient(140deg, #4a1119 0%, #2a080c 100%); color: var(--c-cream); }
.bg-bone    { background: #ffffff; color: var(--c-ink); }
.bg-sand    { background: #f7f4ef; color: var(--c-ink); }
.bg-bone .ornament, .bg-sand .ornament { color: var(--c-rust); }
/* WCAG AA (2026-07-05): both gold accents default to an AA bronze (see :root)
   because the page base is white. On dark surfaces flip them back to the bright
   amber, which has ample contrast there. */
.bg-ink, .bg-night, .bg-forest, .bg-claret,
.hero, .nav-overlay, .site-footer {
  --c-gold: var(--c-gold-bright);
  --c-rust: var(--c-gold-bright);
}
/* ...but the white newsletter band nested inside the dark footer stays bronze. */
.footer-newsletter { --c-gold: #7d5f20; --c-rust: #7d5f20; }
/* Accent spans in display headings inherit ink on light sections — large
   gold/colored headline fragments on white read promotional, not premium. */
.bg-bone .display .it, .bg-sand .display .it { color: inherit; }

/* Subtle grain on dark sections */
.bg-ink, .bg-night, .bg-forest, .bg-claret {
  position: relative;
}
.bg-ink::after, .bg-night::after, .bg-forest::after, .bg-claret::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  z-index: 0;
}
.bg-ink > *, .bg-night > *, .bg-forest > *, .bg-claret > * { position: relative; z-index: 1; }

/* ----- Layout ----- */
.container { width: var(--container); margin-inline: auto; }
.container-tight { width: var(--container-tight); margin-inline: auto; }
.container-wide { width: min(2400px, 94vw); margin-inline: auto; }

.section    { padding: clamp(5rem, 10vw, 9rem) 0; position: relative; }
.section-sm { padding: clamp(3rem, 6vw, 5rem) 0; position: relative; }

/* 2026-06-12 — tighter vertical rhythm on the homepage only. Same sections,
   less dead band between them (page was ~19.7k px tall at 1440w). */
.page-home .section    { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.page-home .section-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.page-home .chapter-split .text-stack {
  padding: clamp(5rem, 8vw, 8rem) clamp(2rem, 6vw, 6rem);
  gap: clamp(5rem, 9vw, 9rem);
}

/* ============================================================================
   HEADER — two rows, one shared band. Row 1: 8-language flag bar (full width).
   Row 2: gradient-transparent nav row — logo + tabs together, over hero video.
   ============================================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: var(--header-inset);
  right: var(--header-inset);
  z-index: 50;
  height: var(--header-h);
  pointer-events: none;
  transition: transform 0.4s var(--ease);
}
.site-header > * { pointer-events: auto; }
.header-stack { width: 100%; }

/* ----- Logo lockup — lives inside .header-tabs, sharing its band ----- */
.logo-tab {
  display: flex;
  flex-direction: column;   /* the three triangles sit ABOVE the wordmark */
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0 1.9rem 0 0.2rem;
  height: 100%;
  flex: 0 0 auto;
  color: var(--c-bone);
  text-decoration: none;
  z-index: 2;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55));

  /* Mark footprint — inline SVG (.tri). Aspect ratio matches the source
     SVG exactly (500 / 170.2 ≈ 2.94:1). Enlarged and seated above the
     "Art De Vivre" wordmark as the primary brand statement. */
  --tri-w: 8.2rem;
  --tri-h: 2.79rem;
}
.logo-tab .mark {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-family: var(--f-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--c-bone);
  letter-spacing: 0.04em;
}
/* Inline SVG of Charlie's authentic three-triangle mark (A▲ D▶ V▼),
   geometry copied verbatim from artdevivre.com.br/.../Logo-Art-de-Vivre-verde.svg.
   Rendered in bone white so the mark sits premium over the hero video. */
.logo-tab .mark .tri {
  display: inline-block;
  width: var(--tri-w);
  height: var(--tri-h);
  margin-right: 0.12rem;
  fill: var(--c-bone);
}
.logo-tab .word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  line-height: 1;
}
.logo-tab .word .name {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--c-bone);
  white-space: nowrap;
}
.logo-tab .word .creci {
  font-family: var(--f-sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.72;
  white-space: nowrap;
}

/* ----- Header stack (right column, 2 rows) ----- */
.header-stack {
  display: flex;
  flex-direction: column;
  height: var(--header-h);
}

/* Top utility row — flag bar, glass background */
.header-utility {
  height: var(--header-util);
  background: linear-gradient(180deg,
    rgba(11,12,14,0.92) 0%,
    rgba(11,12,14,0.75) 100%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(198,154,77,0.18);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 0 1.8rem;
  /* Lift the whole utility row above the nav row below it. The currency
     dropdown (.cur-menu) is nested here and overflows down INTO the nav band;
     without this the nav-row anchors (position:relative, z-auto) bubble into
     .site-header's stacking context and paint OVER the open menu — its text
     ("GUIDES", "JOURNAL") showed through the dropdown. backdrop-filter already
     makes this a stacking context; an explicit z-index just gives it a level
     above the nav anchors. */
  position: relative;
  z-index: 6;
}

/* Social / contact quick-links (left of utility row) */
.header-socials {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
.header-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--c-cream);
  opacity: 0.78;
  transition: opacity 0.22s var(--ease), color 0.22s var(--ease), transform 0.22s var(--ease);
}
.header-socials a:hover {
  opacity: 1;
  color: var(--c-gold);
  transform: translateY(-1px);
}
.header-socials svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Hero-corner socials — larger, gold, top-right above the video.
   10 icons (7 social + WA + email + phone) laid out as a 2-col grid so the
   column doesn't run off the bottom of the hero on shorter viewports. */
.hero-socials-stack {
  position: absolute;
  top: clamp(7.5rem, 11vw, 10rem); /* clear the two-row header */
  right: clamp(1rem, 3vw, 2.4rem);
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  pointer-events: auto;
}
.hero-socials-stack a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(18, 6, 8, 0.35);
  border: 1px solid rgba(198, 154, 77, 0.55);
  color: var(--c-gold);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease), color 0.22s var(--ease);
}
.hero-socials-stack a:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
  transform: translateY(-1px);
}
.hero-socials-stack svg {
  width: 24px;
  height: 24px;
  display: block;
}
@media (max-width: 720px) {
  .hero-socials-stack a { width: 40px; height: 40px; }
  .hero-socials-stack svg { width: 20px; height: 20px; }
  .hero-socials-stack { gap: 0.35rem; top: clamp(6.5rem, 18vw, 9rem); }
}

/* Currency switcher — US$ / R$ / € (sits to the right of socials,
   before the language switcher). Mirrors .lang-switch styling so the
   utility row stays visually balanced. */
/* Currency switcher — compact dropdown (trigger + popup listbox).
   Default USD; nicely framed so it reads as a real control, not 3 stray
   buttons. The popup floats below the trigger over the hero. */
.cur-switch {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 0.7rem;
  border-right: 1px solid rgba(198, 154, 77, 0.22);
}

/* The visible trigger pill */
.cur-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(11,12,14, 0.45);
  border: 1px solid rgba(198, 154, 77, 0.35);
  border-radius: 999px;
  color: var(--c-cream);
  padding: 0.32rem 0.6rem 0.32rem 0.7rem;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--f-sans);
  line-height: 1;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
}
.cur-trigger:hover,
.cur-switch.open .cur-trigger {
  background: rgba(11,12,14, 0.7);
  border-color: var(--c-gold);
}
.cur-trigger .sym {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-gold);
}
.cur-trigger .code {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.92;
}
.cur-trigger .caret {
  width: 0;
  height: 0;
  margin-left: 0.05rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--c-gold);
  transition: transform 0.22s var(--ease);
}
.cur-switch.open .cur-trigger .caret { transform: rotate(180deg); }

/* The dropdown panel */
.cur-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0.7rem;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  /* Fully opaque panel. Must NOT use backdrop-filter here: this menu is
     nested inside .header-utility, which already has its own backdrop-filter,
     and nested backdrop-filters fail to paint the child's background in
     Chromium — the panel renders see-through over the hero. A solid bg
     guarantees the dropdown reads as a real control on every browser. */
  background: #14161b;
  border: 1px solid rgba(198, 154, 77, 0.3);
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
  padding: 0.3rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s var(--ease);
  z-index: 60;
}
.cur-switch.open .cur-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cur-menu button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--c-cream);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  font-family: var(--f-sans);
  line-height: 1;
  text-align: left;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.cur-menu button:hover { background: rgba(198, 154, 77, 0.14); }
.cur-menu button .sym {
  font-size: 0.86rem;
  font-weight: 600;
  min-width: 1.9rem;
}
.cur-menu button .name {
  flex: 1;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.cur-menu button .code {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
.cur-menu button[aria-selected="true"] {
  background: rgba(198, 154, 77, 0.12);
}
.cur-menu button[aria-selected="true"] .sym,
.cur-menu button[aria-selected="true"] .name { color: var(--c-gold); }

/* Switcher pushes the lang block off the right edge */
.cur-switch + .lang-switch { margin-left: 0; }

/* Lang switcher — 8 prominent flag buttons (pinned right) */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}
.lang-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  border: 0;
  color: var(--c-cream);
  padding: 0.3rem 0.5rem;
  /* Taller tap target (was ~24px) — vertical only, so the tight 6-flag row
     still fits the phone width with no overflow. */
  min-height: 44px;
  cursor: pointer;
  font-family: var(--f-sans);
  line-height: 1;
  opacity: 0.7;
  border-bottom: 1px solid transparent;
  transition: opacity 0.22s var(--ease), border-color 0.22s var(--ease);
}
.lang-switch button .flag {
  font-size: 1.15rem;
  line-height: 1;
  filter: saturate(1.05) drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  display: inline-flex;
  align-items: center;
}
.lang-switch button .flag img {
  width: 20px;
  height: 15px;
  display: block;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.footer-flags button img {
  width: 22px;
  height: 16px;
  display: block;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.inline-flag {
  display: inline-block;
  width: 20px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 0.2rem;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.lang-stat img {
  display: inline-block;
  width: 20px;
  height: 15px;
  vertical-align: -2px;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.lang-switch button .code {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.92;
}
.lang-switch button:hover { opacity: 1; }
.lang-switch button[aria-pressed="true"] {
  opacity: 1;
  border-bottom-color: var(--c-gold);
}
.lang-switch button[aria-pressed="true"] .code { color: var(--c-gold); }

/* Main nav row — gradient transparent, video bleeds through */
.header-tabs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1.2rem 0 2rem;
  height: var(--header-main);
  /* Charlie's official ADV brand green (#133525) at 50% transparency. */
  background: rgba(11,12,14, 0.5);
}
/* Nav-row blur lives on a pseudo-element. Putting backdrop-filter on
   .header-tabs itself would make it the containing block for the
   absolutely-positioned .mega-menu, collapsing the panel to the tab
   strip instead of full-bleed. */
.header-tabs::before {
  content: "";
  position: absolute;
  top: var(--header-util);
  left: 0;
  right: 0;
  height: var(--header-main);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: -1;
}

.nav-tabs {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  flex: 1;
}
.nav-tabs > li > a {
  display: inline-flex;
  align-items: center;
  height: var(--header-main);
  padding: 0 0.7rem;
  font-family: var(--f-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-bone);
  position: relative;
  transition: color 0.25s var(--ease);
}
.nav-tabs > li > a::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem;
  bottom: 18px;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav-tabs > li > a:hover { color: var(--c-gold-soft); }
.nav-tabs > li > a:hover::after { transform: scaleX(1); }

/* Contact + Sell — pinned leftmost (see NAV order in build.py) and styled as
   a quiet gold-outline pill so they read as the two primary calls to action
   against the plain uppercase tabs. */
.nav-tabs > li.nav-emphasis > a {
  margin-right: 0.3rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(198,154,77,0.55);
  border-radius: 999px;
  color: var(--c-gold);
  height: auto;
}
.nav-tabs > li.nav-emphasis > a::after { display: none; }
.nav-tabs > li.nav-emphasis > a:hover {
  color: var(--c-ink);
  background: var(--c-gold);
  border-color: var(--c-gold);
}

/* Mobile menu trigger */
.menu-trigger {
  display: none;
  background: transparent;
  border: 0;
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0 1.5rem;
  min-height: 44px;
  cursor: pointer;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}
.menu-trigger .bars { width: 22px; height: 10px; position: relative; display: inline-block; }
.menu-trigger .bars::before,
.menu-trigger .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
}
.menu-trigger .bars::before { top: 0; }
.menu-trigger .bars::after { bottom: 0; }

@media (max-width: 1320px) {
  .nav-tabs { display: none; }
  .menu-trigger { display: inline-flex; }
}
/* The 6 language flags are wide; step the social row down as room shrinks. */
@media (max-width: 1100px) {
  .header-socials a:nth-child(n+3) { display: none; }   /* keep IG + WhatsApp */
}
@media (max-width: 900px) {
  .header-socials { display: none; }                    /* flags-only utility row */
}
@media (max-width: 720px) {
  .lang-switch button .code { display: none; }
  .lang-switch { gap: 0.05rem; }
  .lang-switch button { padding: 0.3rem 0.35rem; }
  .lang-switch button .flag { font-size: 1.05rem; }
  .cur-trigger .code { display: none; }
  .cur-switch { padding-right: 0.35rem; }
  .cur-trigger { padding: 0.3rem 0.4rem; }
  .logo-tab .word { display: none; }
  .logo-tab .mark { font-size: 1.6rem; }
}

/* ============================================================================
   MOBILE AUDIT FIXES (2026-05-31) — kill horizontal scroll on phones.
   ============================================================================ */

/* 1) Header fits a phone. The brand mark is a fixed-rem SVG footprint
   (--tri-w/--tri-h), so the earlier `.logo-tab .mark{font-size}` mobile
   override never shrank it — the 192px logo column starved the utility row
   and pushed the currency/language switchers and the Index trigger off the
   right edge. Shrink the mark, zero the side inset, and tighten the row. */
@media (max-width: 560px) {
  :root { --header-inset: 0; }
  .logo-tab { --tri-w: 3.4rem; --tri-h: 1.16rem; padding: 0 0.7rem; }
  .header-utility { gap: 0.35rem; padding: 0 0.55rem; }
  .cur-switch { padding-right: 0.3rem; }
  .cur-trigger { padding: 0.3rem 0.34rem; }
  .lang-switch { gap: 0; }
  .lang-switch button { padding: 0.3rem 0.2rem; }
  .lang-switch button .flag img { width: 18px; height: 13px; }
  .menu-trigger { padding: 0 0.7rem; }
}

/* 2) Reusable responsive grids. Inline `display:grid;grid-template-columns:
   repeat(N,1fr)` on contact/about/values never collapsed on mobile, and an
   unbreakable child (e.g. an email at 2rem) forced a track wider than the
   viewport. These classes collapse to a single column on phones. Keep any
   inline `gap` — only the column count moves here. */
.adv-grid-2, .adv-grid-3 { display: grid; gap: 2rem; }
.adv-grid-2 { grid-template-columns: repeat(2, 1fr); }
.adv-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .adv-grid-2, .adv-grid-3 { grid-template-columns: 1fr; }
}

/* 3) stat-strip column count is set inline (repeat(N,1fr)) per community,
   which overrode the responsive rule below. `!important` lets the stylesheet
   win so a 4-stat strip still drops to 2 columns on a phone. */
@media (max-width: 700px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 420px) {
  .stat-strip { grid-template-columns: 1fr !important; }
}

/* 4) Grid items default to min-width:auto, so an unbreakable child can blow a
   1fr track past the viewport (seen on the sell/contact intake-shell). Let the
   tracks shrink, and break long tokens (emails/URLs) instead of overflowing. */
.intake-shell > *, .intake-shell--wide > *,
.adv-grid-2 > *, .adv-grid-3 > * { min-width: 0; }
.prose, .intake-shell h2, .adv-grid-2 h2, .adv-grid-3 h2 { overflow-wrap: break-word; }

/* Price amount tokens — set by `price_amt()` in build.py. JS swaps the
   visible text to the value of the matching data-* attribute. */
.price-amt {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hide header on scroll-down, show on scroll-up */
.site-header.is-hidden { transform: translateY(-100%); }

/* ============================================================================
   PHONE HEADER (<=800px) — collapse the two-row header into ONE full-bleed
   bar: brand mark on the left, "Index" trigger on the right, edge to edge.
   The language flags + currency move into the menu (see .overlay-controls),
   so the bar stays clean and nothing floats in a dead left-hand column.
   ============================================================================ */
@media (max-width: 800px) {
  :root {
    --header-inset: 0;   /* bleed the bar to both screen edges */
    --header-h: 56px;    /* single bar; also tightens every top offset below it */
  }
  .site-header {
    height: var(--header-h);
    /* Solid glass so the whole bar reads as one band across the full width. */
    background: linear-gradient(180deg,
      rgba(11,12,14,0.94) 0%,
      rgba(11,12,14,0.82) 100%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(198,154,77,0.20);
  }
  /* Flags row is gone from the header — it lives in the menu now. */
  .header-utility { display: none; }
  .header-stack { height: var(--header-h); justify-content: center; }
  .header-tabs {
    height: var(--header-h);
    background: transparent;   /* let the site-header band show through */
    padding: 0;
  }
  .header-tabs::before { display: none; }
  /* Brand mark sits INSIDE the bar, inset from the left edge, vertically centred. */
  .logo-tab {
    height: var(--header-h);
    padding: 0 0 0 1.05rem;
    gap: 0;
    filter: drop-shadow(0 1px 5px rgba(0,0,0,0.45));
    --tri-w: 3.4rem;
    --tri-h: 1.16rem;
  }
  .logo-tab .word { display: none; }
  .menu-trigger { margin-left: auto; padding: 0 1.15rem; }
}

/* ============================================================================
   FULLSCREEN NAV OVERLAY (mobile + on demand)
   ============================================================================ */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--c-bg-dark);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.nav-overlay .curtain {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c-bg-dark) 0%, var(--c-night) 100%);
  z-index: 0;
}
/* The curtain is a *positioned* element (z-index:0), so it paints above any
   non-positioned (static) sibling — which is exactly what buried the menu:
   the bone words sat behind the opaque gradient while only the gold numbers
   bled through. Give the menu list and preview their own stacking context
   above the curtain so the words are always on top. */
.nav-overlay .nav-list-wrap {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  padding: 6rem 5vw;
}
.nav-overlay .preview { z-index: 1; }
.nav-overlay ul.giant {
  list-style: none; padding: 0; margin: 0;
}
.nav-overlay ul.giant li {
  border-top: 1px solid var(--c-line);
}
.nav-overlay ul.giant li:last-child { border-bottom: 1px solid var(--c-line); }

/* Row = the section label (navigates) + the number/caret toggle (expands). */
.nav-overlay .giant-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.nav-overlay .giant-link {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 1.05rem 0;
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 4.4rem);
  line-height: 1;
  color: var(--c-bone);
  transition: color 0.25s var(--ease), letter-spacing 0.3s var(--ease);
}
.nav-overlay .giant-link:hover {
  color: var(--c-gold);
  letter-spacing: 0.01em;
}
.nav-overlay .num {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--c-gold);
  opacity: 0.7;
}
/* Caret toggle — the number doubles as the reveal control. */
.nav-overlay .giant-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 0;
  padding: 1.05rem 0 1.05rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
  color: var(--c-gold);
}
.nav-overlay .giant-toggle .chev {
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
  opacity: 0.85;
}
.nav-overlay .giant-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.nav-overlay .giant-toggle[aria-expanded="true"] .num { opacity: 1; }

/* Sub-pages revealed under a section (Guides -> Buildings, Restaurants, …). */
.nav-overlay .giant-sub {
  display: flex;
  flex-direction: column;
  padding: 0 0 0.9rem;
}
.nav-overlay .giant-sub[hidden] { display: none; }
.nav-overlay .giant-sublink {
  display: block;
  padding: 0.5rem 0;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--c-cream);
  opacity: 0.82;
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-overlay .giant-sublink:hover { color: var(--c-gold); opacity: 1; }
.nav-overlay .preview {
  position: relative;
  overflow: hidden;
  background: var(--c-night);
}
.nav-overlay .preview img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  transform: scale(1.04);
}
.nav-overlay .preview img.active { opacity: 0.85; }
.nav-overlay .preview .label {
  position: absolute;
  bottom: 2rem; left: 2rem;
  color: var(--c-bone);
  z-index: 2;
}

.overlay-close {
  position: absolute;
  top: 1.8rem; right: 2rem;
  z-index: 5;
  background: transparent;
  border: 0; color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Boxed ADV logo — relocated off the hero into the menu, where a thin
   gold-edged frame reads premium against the dark overlay. */
.overlay-logo {
  position: absolute;
  top: 1.5rem; left: 2rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.4rem;
  text-decoration: none;
  border: 1px solid rgba(198,154,77,0.45);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  --tri-w: 5.2rem;
  --tri-h: 1.77rem;
}
.overlay-logo .mark { display: inline-flex; align-items: center; line-height: 1; }
.overlay-logo .tri {
  display: inline-block;
  width: var(--tri-w);
  height: var(--tri-h);
  fill: var(--c-bone);
}
.overlay-logo .word .name {
  font-family: var(--f-italic);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.015em;
  color: var(--c-bone);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .overlay-logo { top: 1.1rem; left: 1.1rem; padding: 0.6rem 0.9rem; gap: 0.6rem; }
  .overlay-logo .word { display: none; }
}

@media (max-width: 800px) {
  /* One column, scrollable, with the controls pinned as a footer strip. */
  .nav-overlay {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-overlay .curtain { position: fixed; }   /* always covers the viewport while scrolling */
  .nav-overlay .preview { display: none; }
  /* The desktop type scale (up to 4.4rem) reads as "blown up" on a phone.
     Dial it to a calm, premium index; zero side padding so the borders bleed
     edge-to-edge, text inset via the row padding. Top pad clears the logo/close
     bar; the list grows and the whole overlay scrolls when sections expand. */
  .nav-overlay .nav-list-wrap {
    flex: 1 0 auto;
    align-items: stretch;
    padding: 4.6rem 0 1.2rem;
  }
  .nav-overlay ul.giant { width: 100%; }
  .nav-overlay .giant-link {
    font-size: 1.55rem;
    padding: 0.9rem 0 0.9rem 1.5rem;
    letter-spacing: 0;
  }
  .nav-overlay .giant-toggle { padding: 0.9rem 1.5rem 0.9rem 0.9rem; }
  .nav-overlay .num { font-size: 0.6rem; letter-spacing: 0.28em; }
  .nav-overlay .giant-sub { padding: 0 1.5rem 0.9rem; }
  .nav-overlay .giant-sublink { font-size: 1rem; padding: 0.55rem 0; }

  /* Currency + language: hidden from the header, shown as the menu footer. */
  .header-utility .cur-switch { display: none; }
  .overlay-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
    margin-top: auto;
    padding: 1rem 1.5rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--c-line);
    background: rgba(0, 0, 0, 0.28);
  }
  .overlay-cur-switch {
    position: static;
    margin: 0;
    padding: 0;
    border-right: 0;
  }
  /* Footer sits at the bottom, so the dropdown opens UPWARD to stay on-screen. */
  .overlay-cur-switch .cur-menu {
    z-index: 10;
    top: auto;
    bottom: calc(100% + 0.45rem);
    left: 0;
    right: auto;
  }
  /* Language flags — compact, right-aligned, wrap if the row runs tight. */
  .overlay-lang {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.15rem;
    margin: 0;
  }
  .overlay-lang button { padding: 0.3rem 0.35rem; }
  .overlay-lang button .code { display: none; }
}
@media (max-width: 380px) {
  .nav-overlay .giant-link { font-size: 1.4rem; padding: 0.78rem 0 0.78rem 1.2rem; }
  .nav-overlay .giant-toggle { padding: 0.78rem 1.2rem 0.78rem 0.8rem; }
  .nav-overlay .giant-sub { padding: 0 1.2rem 0.8rem; }
}

/* .overlay-controls (currency + language) is a mobile-only menu footer. On
   desktop those controls live in the header, so hide the whole strip there. */
@media (min-width: 801px) {
  .overlay-controls { display: none; }
}

/* Hide the home-hero date-picker on mobile; rent page keeps .hero-search--xl */
@media (max-width: 860px) {
  .hero-search:not(.hero-search--xl) { display: none; }
}

/* ============================================================================
   HERO — full-bleed 1.85:1 video, gradient header bleeds over
   ============================================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* fit the *visible* phone screen so the hero CTA/search
                         box clears the browser chrome (100vh hid it below fold) */
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--c-bone);
}
.hero .bg-wrap {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero video, .hero img.fallback {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.hero .scrim {
  position: absolute; inset: 0;
  /* Burgundy wash removed per Charlie 2026-06-01 — video left natural.
     Only a neutral dark bottom vertical remains for headline legibility. */
  background:
    linear-gradient(180deg, rgba(8,8,10,0.0) 40%, rgba(8,8,10,0.5) 75%, rgba(6,6,8,0.88) 100%),
    linear-gradient(75deg, rgba(8,9,11,0.55) 0%, rgba(8,9,11,0.0) 55%);
  z-index: 1;
}
.hero .content {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin: 0 auto;
  padding: 0 0 clamp(4rem, 8vw, 7rem);
}
.hero-meta-row {
  display: flex; gap: 2rem; flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.hero-meta-row .label { color: var(--c-cream); opacity: 0.85; }

.hero-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.2rem + 4.2vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 18ch;
}
.hero-title .it {
  font-family: var(--f-italic);
  font-style: italic;
  /* 2026-06-10 restyle: accent spans inherit white over hero media —
     gold display-size text over bright video was unreadable. */
  color: inherit;
}
.hero-sub {
  margin-top: 1.2rem;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(0.85rem, 0.78rem + 0.25vw, 1rem);
  max-width: 44ch;
  line-height: 1.55;
  opacity: 0.9;
}

.hero-cta-row {
  margin-top: 2.2rem;
  display: flex; gap: 0.85rem; flex-wrap: wrap;
}
.hero-cta-row .btn {
  padding: 1.15rem 1.85rem;
  font-size: 0.82rem;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 1.6rem;
  left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.6rem;
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.7;
}
.hero-scroll-hint .l {
  width: 1px; height: 38px;
  background: linear-gradient(180deg, transparent, var(--c-bone));
  animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  background: transparent;
  border: 1px solid currentColor;
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
  cursor: pointer;
}
.btn .arr { display: inline-block; transition: transform 0.3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn:hover { background: var(--c-bone); color: var(--c-bg-dark); }
.btn.gold {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
}
.btn.gold:hover {
  background: var(--c-gold-soft);
  border-color: var(--c-gold-soft);
  color: var(--c-ink);
}
.btn.ghost-dark {
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn.ghost-dark:hover { background: var(--c-bg-dark); color: var(--c-bone); }

.link-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  /* Long inline links (e.g. a full URL in press copy) carry heavy letter-spacing
     and overflowed the phone by a sliver. Let them wrap / break instead. */
  flex-wrap: wrap;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.link-line:hover { color: var(--c-gold); }

/* ============================================================================
   MARQUEE
   ============================================================================ */
.marquee {
  overflow: hidden;
  background: var(--c-night);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 1.25rem 0;
}
.marquee-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: marquee 38s linear infinite;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(1.4rem, 0.9rem + 1.4vw, 2.2rem);
  color: var(--c-cream);
  white-space: nowrap;
}
.marquee-track .dot {
  color: var(--c-gold);
  font-family: var(--f-display);
  font-style: normal;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================================
   STORY (split text + image)
   ============================================================================ */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.story.reverse { direction: rtl; }
.story.reverse > * { direction: ltr; }

.story .figure {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.story .figure img {
  position: absolute; inset: -10% 0;
  width: 100%; height: 120%;
  object-fit: cover;
  will-change: transform;
}
.story .figure .grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,12,14,0.5) 100%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story.reverse { direction: ltr; }
  .story .figure { aspect-ratio: 4/5; max-height: 80vh; }
}

/* ============================================================================
   PINNED CHAPTER (parallax: image sticks while text scrolls past)
   ============================================================================ */
.chapter-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.chapter-split .sticky-visual {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.chapter-split .sticky-visual img {
  width: 100%; height: 110%;
  object-fit: cover;
  will-change: transform;
}
.chapter-split .text-stack {
  padding: clamp(6rem, 12vw, 12rem) clamp(2rem, 6vw, 6rem);
  display: flex; flex-direction: column; gap: clamp(6rem, 14vw, 14rem);
}
.chapter-split .text-stack .beat {
  max-width: 42ch;
}

@media (max-width: 900px) {
  .chapter-split { grid-template-columns: 1fr; }
  .chapter-split .sticky-visual { position: relative; height: 70vh; }
  .chapter-split .text-stack { gap: 3rem; padding: 4rem 2rem; }
}

/* ============================================================================
   HORIZONTAL REEL
   ============================================================================ */
.hscroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 2rem 0 3rem;
  -ms-overflow-style: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll-track {
  display: flex;
  gap: 1.2rem;
  padding: 0 5vw;
  width: max-content;
}
.hscroll-item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 28vw, 460px);
  aspect-ratio: 4/5;
  overflow: hidden;
}
.hscroll-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.hscroll-item:hover img { transform: scale(1.04); }
.hscroll-item .tag {
  position: absolute;
  bottom: 1rem; left: 1rem; right: 1rem;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-bone);
  z-index: 2;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.hscroll-item .grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,12,14,0.7) 100%);
  z-index: 1;
}

/* ============================================================================
   STAT STRIP
   ============================================================================ */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 2026-06-10 restyle: no cell boxes — one quiet gold hairline above and
     below the strip instead of a 4-cell bordered table. */
  gap: 0;
  background: transparent;
  border-top: 1px solid rgba(198,154,77,0.25);
  border-bottom: 1px solid rgba(198,154,77,0.25);
}
.stat-strip .stat {
  background: transparent;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  text-align: center;
}
.stat-strip .stat .val {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 4rem);
  color: var(--c-gold);
  line-height: 1;
}
.stat-strip .stat .lbl {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.8;
}

/* Language stat value: smaller and unwrappable so it stays one line */
.stat-strip .stat .val.lang-stat {
  font-size: clamp(1.3rem, 0.9rem + 1.4vw, 2.2rem);
  white-space: nowrap;
}

/* Light-section variant — stat strips on white sections need ink labels
   (cream labels were invisible on white) and a deeper gold for the values. */
.bg-bone .stat-strip .lbl,
.bg-sand .stat-strip .lbl { color: rgba(11,12,14,0.62); opacity: 1; }
.bg-bone .stat-strip .val,
.bg-sand .stat-strip .val { color: #7d5f20; }
.bg-bone .stat-strip,
.bg-sand .stat-strip {
  border-top-color: rgba(11,12,14,0.12);
  border-bottom-color: rgba(11,12,14,0.12);
}

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

/* ============================================================================
   SECTION SUB-NAV — pill bar under hero, sits flush above content
   ============================================================================ */
.section-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--c-bg-dark);
  border-bottom: 1px solid var(--c-line);
}
.section-nav .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav .container::-webkit-scrollbar { display: none; }
.section-nav-label {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
  white-space: nowrap;
  border-right: 1px solid var(--c-line);
  padding-right: 1.5rem;
}
.section-nav ul {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.section-nav ul li a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  font-family: var(--f-sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.75;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: opacity 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.section-nav ul li a:hover { opacity: 1; }
.section-nav ul li a[aria-current="page"] {
  opacity: 1;
  color: var(--c-gold);
  border-color: var(--c-gold);
}

/* ============================================================================
   INNER-PAGE HERO (smaller, for non-home pages)
   ============================================================================ */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--c-bone);
  padding-top: var(--header-h);
}
.page-hero .bg-wrap {
  position: absolute; inset: 0;
  z-index: 0;
}
.page-hero .bg-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.page-hero .scrim {
  position: absolute; inset: 0;
  /* 2026-06-10 restyle: neutral black scrim — burgundy wash muddied the
     hero photography; neutral keeps the images true and premium. */
  background: linear-gradient(180deg, rgba(8,9,11,0.45) 0%, rgba(8,9,11,0.0) 30%, rgba(5,6,8,0.85) 100%);
  z-index: 1;
}
.page-hero .content {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin: 0 auto;
  padding: 0 0 clamp(2.5rem, 5vw, 4.5rem);
}
.page-hero h1 {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 1.6rem + 4vw, 5.4rem);
  line-height: 1.02;
  margin: 0;
  max-width: 18ch;
}
.page-hero h1 .it { font-family: var(--f-italic); font-style: italic; color: inherit; }
.page-hero .sub {
  margin-top: 1.2rem;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(0.96rem, 0.84rem + 0.4vw, 1.18rem);
  max-width: 56ch;
  line-height: 1.55;
  opacity: 0.92;
}
.page-hero .hero-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  /* 2026-06-10 restyle: white pill, WhatsApp green kept to the glyph only */
  background: #ffffff;
  color: #0b0c0e;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.08rem);
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.page-hero .hero-wa svg { flex: none; }
.page-hero .hero-wa:hover {
  background: var(--c-bone);
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
}

/* Contact hero: WhatsApp pill + gold CTA boxes share one row */
.hero-cta-row--contact { align-items: center; }
.hero-cta-row--contact .hero-wa { margin-top: 0; }
.hero-cta-row--contact .btn.gold { border-radius: 999px; }

/* Rent hero: centered Rio photo with a soft white wash behind the search bar.
   `overflow: visible` lets the calendar popover spill outside the hero;
   the bg-wrap is clipped separately so the parallax image stays contained. */
.page-hero--rent {
  min-height: 72vh;
  align-items: center;
  overflow: visible;
}
.page-hero--rent .bg-wrap { overflow: hidden; }
/* Slow Ken Burns loop on the rent hero — keeps the Ipanema view alive. */
.page-hero--rent .bg-wrap .ken-burns {
  position: absolute; inset: 0;
  overflow: hidden;
}
.page-hero--rent .bg-wrap .ken-burns img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 52% 58%;
  animation: rent-hero-kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes rent-hero-kenburns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(-1.2%, -1.4%, 0); }
}
/* Cinematic dark scrim — darkens lightly behind the headline band and
   at the bottom where the booking bar sits, while keeping the Ipanema
   + Dois Irmãos view vivid through the middle. */
.page-hero--rent .scrim {
  background:
    radial-gradient(ellipse 70% 45% at 50% 38%,
      rgba(8,9,11, 0.55) 0%,
      rgba(8,9,11, 0) 70%),
    linear-gradient(180deg,
      rgba(8,9,11, 0.45) 0%,
      rgba(8,9,11, 0.10) 32%,
      rgba(8,9,11, 0.20) 60%,
      rgba(8,9,11, 0.70) 100%);
}
.page-hero--rent .content {
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--c-bone);
}
/* Editorial kicker: gold caps flanked by thin hairlines, no pill. */
.page-hero--rent .label {
  color: var(--c-gold);
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 500;
}
.page-hero--rent .label::before,
.page-hero--rent .label::after {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: rgba(198, 154, 77, 0.7);
}
/* Centered cinematic headline — white with layered dark text-shadow
   for crisp separation from the photo (sharp + soft, no halo blur). */
.page-hero--rent .page-hero--rent__h {
  font-size: clamp(2.2rem, 1.4rem + 2.8vw, 4rem);
  max-width: 22ch;
  margin: 0.85rem auto 0;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 2px 28px rgba(0, 0, 0, 0.45);
}
.page-hero--rent .page-hero--rent__h .it { color: inherit; }
.page-hero--rent .sub {
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.hero-search {
  margin-top: 1.8rem;
  max-width: 820px;
  background: rgba(11, 12, 14, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(250, 246, 238, 0.14);
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
}
.hero-search__note {
  margin-top: 0.95rem;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.84rem;
  line-height: 1.5;
  opacity: 0.9;
}
.hero-search__note a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------------------
   Home hero with the rent search bar — the search is the focus, so the
   surrounding copy is dialled down (Charlie 2026-06-01: rent in fewer clicks).
   ---------------------------------------------------------------------------- */
.hero--search .hero-title {
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.2rem);
  max-width: 22ch;
}
.hero--search .hero-sub {
  margin-top: 0.9rem;
  font-size: clamp(0.8rem, 0.76rem + 0.18vw, 0.94rem);
  max-width: 52ch;
  opacity: 0.82;
}
/* Home hero search — warm, customer-friendly light bar (Charlie 2026-06-01).
   Familiar booking-widget feel: bone surface, dark legible type, gold pill CTA. */
.hero--search .hero-search {
  max-width: 1000px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero--search .advsearch__row {
  background: var(--c-bone);
  border: 1px solid rgba(11, 12, 14, 0.06);
  border-radius: 999px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32);
  padding: 0.4rem;
}
.hero--search .advsearch__field {
  padding: 0.95rem 1.4rem;
  border-radius: 999px;
  color: var(--c-ink);
}
.hero--search .advsearch__field:hover,
.hero--search .advsearch__field[aria-expanded="true"] {
  background: rgba(198, 154, 77, 0.16);
}
.hero--search .advsearch__ico { color: var(--c-gold); }
.hero--search .advsearch__label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(11, 12, 14, 0.55);
}
.hero--search .advsearch__value {
  font-size: 1.2rem;
  color: var(--c-ink);
}
.hero--search .advsearch__divider {
  background: rgba(11, 12, 14, 0.1);
  margin: 0.85rem 0;
}
.hero--search .advsearch__submit {
  padding: 0 2.1rem;
  margin: 0;
  border-radius: 999px;
  font-size: 1.08rem;
  align-self: stretch;
}
.hero--search .hero-search__note {
  margin-top: 1.1rem;
  font-size: 0.98rem;
  opacity: 0.95;
}
.hero-cta-row--mini {
  margin-top: 1.25rem;
  gap: 1.6rem;
  align-items: center;
}
.hero-cta-row--mini .link-line { color: var(--c-bone); }
/* The home hero clips its overflow (video cover). The default popovers open
   downward and would be cut off, so anchor them to open UPWARD over the video. */
.hero--search .advsearch__pop {
  top: auto;
  bottom: calc(100% + 0.55rem);
}
.hero--search .advsearch__pop--cal {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* ----------------------------------------------------------------------------
   Hero search — bolder XL variant used on /rent.
   Custom premium search bar (replaces the Guesty embedded widget).
   Submits to advbookings.guestybookings.com with checkIn/checkOut/numberOfGuests.
   ---------------------------------------------------------------------------- */
.hero-search--xl {
  margin: 1.6rem auto 0;
  max-width: 1140px;
  padding: clamp(1rem, 1.5vw, 1.4rem);
  background: rgba(8,9,11, 0.82);
  border: 1px solid rgba(198, 154, 77, 0.6);
  border-radius: 6px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(198, 154, 77, 0.22) inset;
  position: relative;
  text-align: left;
}
.page-hero--rent .hero-search--xl .advsearch__field { padding: 1.05rem 1.25rem; }
.page-hero--rent .hero-search--xl .advsearch__value { font-size: 1.08rem; }
.page-hero--rent .hero-search--xl .advsearch__submit {
  padding: 0 1.9rem;
  margin: 0.55rem;
  font-size: 1.05rem;
}
/* Centered calendar popover that escapes the bar — no longer pinned to its left edge. */
.page-hero--rent .advsearch__pop--cal {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.page-hero--rent .hero-search__note { text-align: center; color: rgba(250, 246, 238, 0.85); }
.page-hero--rent .hero-search__note a { color: var(--c-gold); }
.hero-search--xl .hero-search__note {
  margin-top: 1.15rem;
  font-size: 0.88rem;
  opacity: 0.92;
}

/* ----- pill row ---------------------------------------------------------- */
.advsearch { position: relative; }
.advsearch__row {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(250, 246, 238, 0.04);
  border: 1px solid rgba(250, 246, 238, 0.14);
  border-radius: 4px;
  overflow: hidden;
}
.advsearch__field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-sans);
  color: var(--c-bone);
  transition: background 0.2s ease;
}
.advsearch__text {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
.advsearch__ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--c-gold);
}
.advsearch__field:hover,
.advsearch__field[aria-expanded="true"] {
  background: rgba(198, 154, 77, 0.08);
}
.advsearch__field:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: -2px;
}
.advsearch__label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.62);
  font-weight: 500;
}
.advsearch__value {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--c-bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.advsearch__divider {
  width: 1px;
  background: rgba(250, 246, 238, 0.12);
  margin: 0.7rem 0;
  flex: 0 0 1px;
}
.advsearch__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 1.6rem;
  margin: 0.45rem;
  background: var(--c-gold);
  color: #0b0c0e;
  border: 0;
  border-radius: 3px;
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(198, 154, 77, 0.32);
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.advsearch__submit:hover {
  background: #d9bb82;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(198, 154, 77, 0.45);
}
.advsearch__arrow { font-weight: 500; }

/* ----- popovers ---------------------------------------------------------- */
.advsearch__pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.55rem);
  left: 0;
  right: auto;
  background: #14161a;
  color: var(--c-bone);
  border: 1px solid rgba(198, 154, 77, 0.45);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  padding: 1rem;
  font-family: var(--f-sans);
}
.advsearch__pop--cal    { width: min(720px, calc(100vw - 2.5rem)); }
.advsearch__pop--guests { width: min(360px, calc(100vw - 2.5rem)); right: 0; left: auto; }

/* ----- calendar ---------------------------------------------------------- */
.advcal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.advcal__navbtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(250, 246, 238, 0.22);
  background: transparent;
  color: var(--c-bone);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.advcal__navbtn:hover { background: rgba(198, 154, 77, 0.12); border-color: var(--c-gold); }
.advcal__title {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.7);
}
.advcal__months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.advcal__monthtitle {
  text-align: center;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.55rem;
  color: var(--c-bone);
}
.advcal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(250, 246, 238, 0.5);
  text-align: center;
  text-transform: uppercase;
}
.advcal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.advcal__cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-family: var(--f-sans);
  color: var(--c-bone);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.advcal__cell--blank { pointer-events: none; }
.advcal__day:not(:disabled):hover {
  background: rgba(198, 154, 77, 0.18);
}
.advcal__day.is-past { color: rgba(250, 246, 238, 0.2); cursor: not-allowed; }
.advcal__day.is-between {
  background: rgba(198, 154, 77, 0.15);
  border-radius: 0;
}
.advcal__day.is-start,
.advcal__day.is-end {
  background: var(--c-gold);
  color: #0b0c0e;
  font-weight: 700;
}
.advcal__day.is-start { border-radius: 50% 0 0 50%; }
.advcal__day.is-end   { border-radius: 0 50% 50% 0; }
.advcal__day.is-start.is-end { border-radius: 50%; }
.advcal__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(250, 246, 238, 0.1);
}
.advcal__clear {
  background: transparent;
  border: 0;
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  opacity: 0.85;
}
.advcal__clear:hover { opacity: 1; color: var(--c-gold); }
.advcal__done {
  background: var(--c-gold);
  color: #0b0c0e;
  border: 0;
  border-radius: 3px;
  padding: 0.55rem 1.4rem;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.advcal__done:hover { background: #d9bb82; }

/* ----- guests ---------------------------------------------------------- */
.advguests__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(250, 246, 238, 0.08);
}
.advguests__row:last-of-type { border-bottom: 0; }
.advguests__name { font-size: 1rem; font-weight: 600; color: var(--c-bone); }
.advguests__hint { font-size: 0.78rem; color: rgba(250, 246, 238, 0.55); margin-top: 0.15rem; }
.advguests__step { display: inline-flex; align-items: center; gap: 0.85rem; }
.advguests__btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(250, 246, 238, 0.28);
  background: transparent;
  color: var(--c-bone);
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.advguests__btn:hover { border-color: var(--c-gold); background: rgba(198, 154, 77, 0.1); }
.advguests__count { min-width: 1.6ch; text-align: center; font-size: 1rem; font-weight: 600; }
.advguests__done {
  display: block;
  margin-left: auto;
  margin-top: 0.85rem;
  background: var(--c-gold);
  color: #0b0c0e;
  border: 0;
  border-radius: 3px;
  padding: 0.55rem 1.4rem;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.advguests__done:hover { background: #d9bb82; }

/* ----- responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  .advsearch__row {
    flex-wrap: wrap;
    background: transparent;
    border: 0;
    gap: 0.55rem;
  }
  .advsearch__field {
    flex: 1 1 calc(50% - 0.3rem);
    background: rgba(250, 246, 238, 0.04);
    border: 1px solid rgba(250, 246, 238, 0.14);
    border-radius: 4px;
  }
  .advsearch__field--guests { flex: 1 1 100%; }

  /* Homepage hero search — the desktop pill's 999px radius ballooned into a
     giant oval once the fields wrapped on mobile. Keep one readable solid
     card with a sane radius and full-width stacked fields (no truncation). */
  .hero--search .advsearch__row {
    background: var(--c-bone);
    border: 1px solid rgba(11, 12, 14, 0.06);
    border-radius: 18px;
    padding: 0.45rem;
    gap: 0;
  }
  .hero--search .advsearch__field {
    flex: 1 1 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(11, 12, 14, 0.08);
    border-radius: 0;
    padding: 0.85rem 1.1rem;
  }
  .hero--search .advsearch__field:last-of-type { border-bottom: 0; }
  .hero--search .advsearch__value { white-space: normal; }

  /* The scrim is transparent up top, so light hero text fell on bright sky and
     washed out on the taller mobile crop. Darken the top band for legibility. */
  .hero .scrim {
    background:
      linear-gradient(180deg, rgba(8,8,10,0.50) 0%, rgba(8,8,10,0.18) 30%, rgba(8,8,10,0.55) 66%, rgba(6,6,8,0.92) 100%);
  }

  .advsearch__divider { display: none; }
  .advsearch__submit {
    flex: 1 1 100%;
    margin: 0.25rem 0 0;
    padding: 0.95rem 1.2rem;
    justify-content: center;
  }
  /* MOBILE BOOKING SHEET — the popovers were absolutely anchored to the search
     bar and, on the home hero, forced to open UPWARD over the overflow-clipped
     video, so the calendar opened ~300px ABOVE the top of the screen and was
     unreachable. On phones, present them as a fixed bottom-sheet instead. The
     JS portals each popover to <body> so no transformed / overflow-clipped
     ancestor can trap it; the [data-advsearch-pop] attribute lifts specificity
     above the .hero--search / .page-hero--rent anchors that would otherwise win.
     Result: always fully on screen, scrollable, with a dimming scrim. */
  .advsearch__pop[data-advsearch-pop] {
    position: fixed;
    top: auto; bottom: 0; left: 0; right: 0;
    transform: none;
    width: 100%; max-width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(198, 154, 77, 0.45);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    padding: 0.55rem 1.15rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5), 0 0 0 100vmax rgba(0, 0, 0, 0.55);
  }
  /* Grab-handle affordance, pinned to the top of the sheet. */
  .advsearch__pop[data-advsearch-pop]::before {
    content: ""; display: block;
    width: 42px; height: 4px; margin: 0.35rem auto 0.7rem;
    border-radius: 2px; background: rgba(250, 246, 238, 0.32);
    position: sticky; top: 0;
  }
  .advcal__months { grid-template-columns: 1fr; gap: 1.4rem; }
  /* Roomier tap targets for thumbs. */
  .advcal__cell { font-size: 1rem; }
  .advcal__navbtn { width: 42px; height: 42px; }
  /* Keep Clear / Done reachable without hunting — pin the footer. */
  .advcal__foot {
    position: sticky; bottom: 0;
    margin-top: 0.85rem;
    background: #14161a;
  }
}

/* ============================================================================
   REVIEW CARDS (Google reviews — home highlight + /about/reviews archive)
   ============================================================================ */
.reviews-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
}
@media (max-width: 1100px) { .reviews-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .reviews-row { grid-template-columns: 1fr; } }

.review-card {
  background: var(--c-ink-2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: clamp(1.5rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.review-card .stars {
  color: var(--c-gold);
  letter-spacing: 0.15em;
  font-size: 1rem;
  line-height: 1;
}
.review-card .quote {
  font-family: var(--f-serif, Georgia, serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--c-bone);
  margin: 0;
  flex: 1;
}
.review-card .quote::before { content: "“"; color: var(--c-gold); margin-right: 0.1em; }
.review-card .quote::after  { content: "”"; color: var(--c-gold); margin-left: 0.1em; }

/* Card head — avatar + name/date row */
.review-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.review-avatar {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  font-family: var(--f-sans, system-ui, sans-serif);
  text-transform: uppercase;
  line-height: 1;
}
.review-id { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.review-card .name { font-weight: 600; font-size: 0.95rem; color: var(--c-bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-card .when { font-size: 0.8rem; color: rgba(255,255,255,0.55); letter-spacing: 0.02em; }
.review-card .g-mark {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* Home-page variant — clamp long quotes to keep cards visually balanced */
.review-card--clamp .quote {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* On the archive page, stack one per row in a wider, magazine-style column */
.reviews-archive { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (min-width: 900px) {
  .reviews-archive { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   LISTING GRID
   ============================================================================ */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}
@media (max-width: 1100px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .listing-grid { grid-template-columns: 1fr; } }

/* /buy page — bleed layout, blown-up 2-up cards on laptops, 3-up only on very wide desktops */
#buyGrid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 2.4vw, 2.8rem); }
@media (min-width: 2000px) { #buyGrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { #buyGrid { grid-template-columns: 1fr; } }

.listing {
  display: flex;
  flex-direction: column;
  background: var(--c-ink-2);
  color: var(--c-bone);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;   /* soft, Airbnb-style rounded card */
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.listing:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  border-color: rgba(198,154,77,0.35);
}
.listing .img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.listing .img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.listing:hover .img img { transform: scale(1.05); }
.listing .img .tag {
  position: absolute;
  top: 1rem; left: 1rem;
  background: rgba(11,12,14,0.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--c-bone);
  border: 1px solid rgba(250,246,238,0.20);
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.4rem 0.72rem;
  z-index: 2;
}
.listing .img .tag--sale {
  left: auto; right: 1rem;
  background: var(--c-gold);
  letter-spacing: 0.2em;
}
.listing .body {
  padding: 1.6rem 1.6rem 1.8rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.listing .neighborhood {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.listing h3 {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.85rem);
  line-height: 1.05;
  color: var(--c-bone);
}
.listing .specs {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.4rem;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.85;
}
.listing .specs span { white-space: nowrap; }
.listing .price {
  margin-top: 0.6rem;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--c-gold-soft);
}
.listing .more {
  margin-top: 1.1rem;
  align-self: flex-start;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-bone);
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 4px;
}

/* ---- Sold / leased track-record cards (non-clickable) ---- */
.listing.is-closed { cursor: default; }
.listing.is-closed:hover { transform: none; }
.listing.is-closed .img img {
  filter: grayscale(0.3) brightness(0.8);
  transition: filter 0.6s var(--ease), transform 1s var(--ease);
}
.listing.is-closed:hover .img img {
  transform: scale(1.04);
  filter: grayscale(0) brightness(0.92);
}
.listing .status-stamp {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--c-claret);
  color: var(--c-gold-soft);
  border: 1px solid var(--c-gold);
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.42rem 0.7rem;
  z-index: 2;
}

/* ============================================================================
   EXPERIENCES — curated collection (2026-06-14 restyle)
   Light, editorial cards on white / sand. Replaces the old SaaS filter widget
   (.xpsearch) and the dark .experience-card grid; burgundy is the only accent.
   ============================================================================ */
.xp-collection { padding-block: clamp(3.5rem, 7vw, 6rem); }
.xp-intro + .xp-collection { padding-top: 0; }

.xp-collection__head { max-width: 62ch; margin: 0 0 clamp(2.25rem, 4vw, 3.5rem); }
.xp-collection__head .prose { color: rgba(11,12,14,0.66); opacity: 1; }

.xp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3.4vw, 3.25rem) clamp(1.25rem, 2.2vw, 2.25rem);
}
@media (max-width: 1100px) { .xp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .xp-grid { grid-template-columns: 1fr; } }

.xp-card { display: flex; flex-direction: column; color: var(--c-ink); }
.xp-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ece7df;
  border-radius: 12px;   /* soft, Airbnb-style rounded image */
}
.xp-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.xp-card:hover .xp-card__img img { transform: scale(1.045); }
.xp-card__img::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(11,12,14,0.08);
  border-radius: 12px;
  pointer-events: none;
  transition: border-color 0.4s var(--ease);
}
.xp-card:hover .xp-card__img::after { border-color: rgba(74,17,25,0.32); }

.xp-card__body { padding: 1.15rem 0 0; display: flex; flex-direction: column; flex: 1; }
.xp-card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.18rem, 1.02rem + 0.5vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.xp-card__summary {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(11,12,14,0.68);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xp-card__meta {
  margin-top: 0.85rem;
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-sans);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(11,12,14,0.5);
}
.xp-card__meta .dot { opacity: 0.55; }
.xp-card__foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(11,12,14,0.12);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.xp-card__price {
  font-family: var(--f-display);
  font-size: 1.04rem;
  color: var(--c-burg-soft);
  white-space: nowrap;
}
.xp-card__cta {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}
.xp-card__cta .arr { display: inline-block; margin-left: 0.25em; transition: transform 0.4s var(--ease); }
.xp-card:hover .xp-card__cta { color: var(--c-burg-soft); }
.xp-card:hover .xp-card__cta .arr { transform: translateX(5px); }

/* Single-item collection → wide editorial feature row */
.xp-feature {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  color: var(--c-ink);
}
@media (max-width: 760px) { .xp-feature { grid-template-columns: 1fr; gap: 1.5rem; } }
.xp-feature__img {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #ece7df;
  border-radius: 12px;   /* soft, Airbnb-style rounded image */
}
.xp-feature__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.xp-feature:hover .xp-feature__img img { transform: scale(1.04); }
.xp-feature__img::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(11,12,14,0.08);
  border-radius: 12px;
  pointer-events: none;
  transition: border-color 0.4s var(--ease);
}
.xp-feature:hover .xp-feature__img::after { border-color: rgba(74,17,25,0.32); }
.xp-feature__body { max-width: 46ch; }
.xp-feature .xp-card__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); }
.xp-feature .xp-card__foot { margin-top: 1.25rem; }
.xp-card__summary--full { -webkit-line-clamp: unset; display: block; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .xp-card__img img, .xp-feature__img img,
  .xp-card__cta .arr,
  .xp-card__img::after, .xp-feature__img::after { transition: none !important; }
}

.sold-note {
  font-family: var(--f-sans);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--c-cream);
  opacity: 0.7;
}

/* ============================================================================
   PROPERTY DETAIL — price bar, feature list, gallery
   ============================================================================ */
.property-hero .content h1 {
  /* keep the address compact even on long titles */
  max-width: 22ch;
}

.property-price-bar {
  background: var(--c-bone);
  color: var(--c-ink);
  padding: clamp(2rem, 4vw, 3.4rem) 0;
  border-bottom: 1px solid rgba(11,12,14,0.08);
}
.property-price-bar .ornament {
  color: var(--c-gold);
}
.price-bar-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .price-bar-grid { grid-template-columns: 1fr; }
}
.pb-price {
  display: flex; flex-direction: column; gap: 0.35rem;
}
.pb-price .ornament {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.pb-price .price-main {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem);
  line-height: 1;
  color: var(--c-ink);
  margin-top: 0.5rem;
}
.pb-price .price-sub {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11,12,14,0.62);
}
.pb-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 600px) { .pb-specs { grid-template-columns: repeat(2, 1fr); } }
.pb-spec {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(11,12,14,0.12);
}
.pb-spec .val {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1.1rem + 1vw, 2.2rem);
  line-height: 1;
  color: var(--c-ink);
}
.pb-spec .lbl {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(11,12,14,0.62);
}

.property-features {
  background: var(--c-ink-2);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  border: 1px solid var(--c-line);
}
.property-features .ornament {
  color: var(--c-gold);
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.feature-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
.feature-list li {
  display: flex; align-items: flex-start; gap: 0.8rem;
  font-family: var(--f-sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--c-bone);
  opacity: 0.92;
}
.feature-list .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-gold);
  margin-top: 0.55rem;
  flex: 0 0 6px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--c-ink-2);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease), opacity 0.45s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }

/* Feature the first image as a 2x2 spotlight */
.gallery-grid .gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 900px) {
  .gallery-grid .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 560px) {
  .gallery-grid .gallery-item:first-child {
    grid-column: span 1;
  }
}

/* ============================================================================
   GUESTY EMBED (Rent page)
   ============================================================================ */
.guesty-frame {
  width: 100%;
  min-height: 720px;
  border: 0;
  background: var(--c-bone);
}

/* ============================================================================
   INTAKE FORM (Sell page)
   ============================================================================ */
.intake-shell {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .intake-shell { grid-template-columns: minmax(0, 1fr); } }
/* Form controls must never exceed their (now shrinkable) column — intrinsic
   <input>/<select> widths were forcing horizontal scroll on careers etc. */
.intake-form input, .intake-form select, .intake-form textarea { max-width: 100%; min-width: 0; }

.intake-form {
  background: var(--c-ink-2);
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--c-line);
}
.intake-form .field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.4rem; }
.intake-form label {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.intake-form input,
.intake-form select,
.intake-form textarea {
  background: var(--c-night);
  border: 1px solid var(--c-line);
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 0.98rem;
  padding: 0.85rem 1rem;
  border-radius: 0;
  transition: border-color 0.22s var(--ease);
}
.intake-form input:focus,
.intake-form select:focus,
.intake-form textarea:focus {
  outline: none;
  border-color: var(--c-gold);
}
.intake-form textarea { min-height: 120px; resize: vertical; }
.intake-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 600px) { .intake-form .row { grid-template-columns: minmax(0, 1fr); } }

.intake-form .intent-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.intake-form .intent-row label {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 0.4rem;
  padding: 1rem;
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: border-color 0.22s, background 0.22s;
}
.intake-form .intent-row label:hover { border-color: var(--c-gold-soft); }
.intake-form .intent-row input[type="radio"] { display: none; }
.intake-form .intent-row label .ttl {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--c-bone);
  letter-spacing: 0;
  text-transform: none;
}
.intake-form .intent-row label .sub {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.7;
}
.intake-form .intent-row input[type="radio"]:checked + .ttl,
.intake-form .intent-row label:has(input:checked) {
  border-color: var(--c-gold);
  background: rgba(198,154,77,0.06);
}
.intake-form .file-drop {
  border: 1px dashed var(--c-line);
  padding: 1.6rem;
  text-align: center;
  font-family: var(--f-sans);
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cream);
  cursor: pointer;
}
.intake-form .submit-row { margin-top: 1.4rem; }

/* Checkbox in intent-row (partner page service-area chips) */
.intake-form .intent-row input[type="checkbox"] { display: none; }
.intake-form .intent-row label:has(input[type="checkbox"]:checked) {
  border-color: var(--c-gold);
  background: rgba(198,154,77,0.06);
}

/* Wider chip variant — wraps freely instead of forcing 3 columns.
   Used on the partner page (9 categories, 9 service areas). */
.intake-form .intent-row--chips {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* The fixed 3-column intent-row (role picker on careers) overflowed the phone.
   Stack it on mobile; the chip variant keeps its own auto-fit wrap. */
@media (max-width: 600px) {
  .intake-form .intent-row:not(.intent-row--chips) { grid-template-columns: minmax(0, 1fr); }
}

/* Terms checkbox line */
.intake-form .check-line {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-family: var(--f-sans);
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-bone);
  line-height: 1.5;
  cursor: pointer;
}
.intake-form .check-line input[type="checkbox"] {
  display: inline-block;
  width: 18px; height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--c-gold);
}

/* Wider shell — partner page form holds more fields */
.intake-shell--wide {
  grid-template-columns: 1fr 1.8fr;
}
@media (max-width: 900px) { .intake-shell--wide { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   CAREERS — two-door lane switch + role cards
   ============================================================================ */
.lane-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
@media (max-width: 800px) { .lane-switch { grid-template-columns: 1fr; } }

.lane {
  display: block;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--c-line);
  text-decoration: none;
  color: var(--c-bone);
  background: var(--c-ink-2);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.lane:hover {
  border-color: var(--c-gold);
  background: rgba(198,154,77,0.05);
  transform: translateY(-2px);
}
.lane .lane-eyebrow {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.6rem;
}
.lane .lane-title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  margin: 0 0 0.6rem;
}
.lane .lane-sub {
  font-family: var(--f-sans);
  font-size: 0.96rem;
  color: var(--c-cream);
  opacity: 0.85;
  margin: 0 0 1rem;
  line-height: 1.5;
}
.lane .lane-cta {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.lane .lane-cta .arr { margin-left: 0.4rem; }

/* Hiring role cards */
.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
.role-card {
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--c-line);
  background: var(--c-ink-2);
}
.role-card h3 { margin: 0; }

/* ============================================================================
   PARTNER — services + rates matrix
   ============================================================================ */
.rate-matrix {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--c-line);
  padding: 0.8rem;
  background: var(--c-night);
}
.rate-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 0.5rem;
}
.rate-row--head {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 0.2rem 0.2rem 0.4rem;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 0.3rem;
}
.rate-row input {
  background: var(--c-ink-2);
  border: 1px solid var(--c-line);
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 0.9rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0;
  transition: border-color 0.22s var(--ease);
}
.rate-row input:focus { outline: none; border-color: var(--c-gold); }
@media (max-width: 700px) {
  .rate-row { grid-template-columns: 1fr; }
  .rate-row--head { display: none; }
}

/* ============================================================================
   FOOTER
   ============================================================================ */
/* ============================================================================
   SITE FOOTER — multinational-grade
   Newsletter band + brand block + 4 link cols + lang/social/direct row + legal
   ============================================================================ */
/* 2026-06-27: the footer read as one flat wall of burgundy with only
   faint hairlines between bands. Replaced with a tonal ladder — each band
   steps a shade darker so sections separate by *colour*, not just a line.
   Seams use a letterpress edge (dark line + faint highlight) that reads
   far better on deep burgundy than the translucent cream hairline did. */
:root {
  --foot-1:   #3a0f17;            /* newsletter + main grid — body tone   */
  --foot-2:   #320c13;            /* explore band — recessed one step      */
  --foot-3:   #2a0a10;            /* lang / social / direct — deeper        */
  --foot-4:   #210710;            /* legal strip — darkest anchor           */
  --foot-seam-hi: rgba(255,255,255,0.045);  /* faint top highlight         */
  --foot-seam-lo: rgba(0,0,0,0.30);         /* shadow line above a band     */
}
/* one reusable letterpress seam between stacked footer bands */
.footer-explore,
.footer-row,
.footer-legal-strip {
  border-top: 1px solid var(--foot-seam-lo);
  box-shadow: inset 0 1px 0 var(--foot-seam-hi);
}

.site-footer {
  background: var(--foot-1);   /* deep burgundy — the site-wide 20% anchor */
  color: var(--c-cream);
  border-top: 1px solid var(--c-line);
  position: relative;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Newsletter band ---- */
.footer-newsletter {
  background: #ffffff;            /* white band — breaks from the burgundy footer */
  color: var(--c-ink);
  border-bottom: 1px solid rgba(11,12,14,0.10);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  position: relative;
}
.footer-newsletter::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  opacity: 0.5;
}
.newsletter-inner {
  width: var(--container); margin-inline: auto;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.newsletter-copy .ornament { color: var(--c-rust); }
.newsletter-h {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.05;
  margin: 0.9rem 0 0.85rem;
  color: var(--c-ink);
  letter-spacing: 0.005em;
}
.newsletter-h .it { font-style: italic; color: inherit; }
.newsletter-copy p {
  font-size: 1rem; line-height: 1.55; color: var(--c-ink); opacity: 0.72; max-width: 44ch; margin: 0;
}
.newsletter-form {
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: stretch;
}
.newsletter-form input[type="email"] {
  background: #fff;
  border: 1px solid rgba(11,12,14,0.18);
  border-radius: 2px;
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 1rem;
  padding: 1rem 1.1rem;
  outline: none;
  transition: border-color .25s ease, background .25s ease;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(11,12,14,0.42); }
.newsletter-form input[type="email"]:focus {
  border-color: var(--c-gold);
  background: #fff;
}
.newsletter-form button {
  background: var(--c-gold);
  color: var(--c-ink);
  border: 0;
  padding: 0 1.4rem;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background .25s ease, transform .25s ease;
  border-radius: 2px;
}
.newsletter-form button:hover { background: var(--c-gold-soft); transform: translateY(-1px); }
.newsletter-form button .arr { font-size: 1rem; }
.newsletter-fine, .newsletter-thanks {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--c-ink);
  opacity: 0.6;
  margin: 0.4rem 0 0;
  line-height: 1.5;
}
.newsletter-fine a { color: var(--c-rust); border-bottom: 1px solid rgba(163,124,51,0.4); }
.newsletter-fine a:hover { border-bottom-color: var(--c-rust); }
.newsletter-thanks { color: var(--c-burg-soft); opacity: 0.95; }

/* ---- Main grid: brand block + 4 cols ---- */
.footer-main {
  background: var(--foot-1);
  padding: clamp(4rem, 7vw, 6rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}
.footer-main-inner {
  width: var(--container); margin-inline: auto;
  display: grid;
  grid-template-columns: 1.3fr 2.4fr;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.footer-brand { display: flex; flex-direction: column; gap: 1.1rem; }
.footer-wordmark {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 3.6vw, 3rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--c-bone);
  text-decoration: none;
  display: inline-block;
}
.footer-tagline {
  font-size: 0.98rem;
  line-height: 1.6;
  opacity: 0.78;
  max-width: 36ch;
  margin: 0;
}
.footer-address {
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.9rem;
  opacity: 0.78;
  margin-top: 0.4rem;
}
.footer-address a { color: var(--c-gold-soft); font-size: 0.82rem; letter-spacing: 0.06em; }
.footer-address a:hover { color: var(--c-gold); }
.footer-cta-row {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem;
}
.footer-cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.15rem;
  font-family: var(--f-sans);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  color: var(--c-bone);
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.footer-cta:hover {
  background: rgba(198,154,77,0.1);
  border-color: var(--c-gold);
  color: var(--c-bone);
}
.footer-cta .arr { font-size: 1rem; letter-spacing: 0; }
/* 2026-06-10 restyle: solid WhatsApp-green slab clashed with the burgundy
   footer — ghost button, brand green lives only in the glyph. */
.footer-cta-wa {
  background: transparent;
  border-color: rgba(250,246,238,0.35);
  color: var(--c-bone);
}
.footer-cta-wa:hover { background: rgba(250,246,238,0.08); border-color: var(--c-bone); color: var(--c-bone); }
.footer-cta-wa svg path { fill: #25d366; }
.footer-cta-wa svg { flex-shrink: 0; }
.footer-creci {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0.6rem 0 0;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.footer-cols h4 {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-gold);
  margin: 0 0 1.1rem 0;
}
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-cols a {
  color: var(--c-cream);
  text-decoration: none;
  opacity: 0.82;
  font-size: 0.92rem;
  transition: opacity .2s ease, color .2s ease, padding-left .25s ease;
  display: inline-block;
}
.footer-cols a:hover { opacity: 1; color: var(--c-gold-soft); padding-left: 4px; }

/* ---- Explore Rio band: Communities + Experiences + Journal ---- */
.footer-explore {
  background: var(--foot-2);
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}
.footer-explore-inner {
  width: var(--container); margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer-explore-group h4 {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-gold);
  margin: 0 0 1.1rem 0;
}
.footer-chip-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 0.45rem;
}
.footer-chip-list li { display: inline-flex; }
/* 2026-06-10 restyle: chips lose the bordered-box look — the wall of
   outlined pills read as a tag-cloud directory. Quiet text links now. */
.footer-chip-list a {
  display: inline-block;
  padding: 0.18rem 0.5rem 0.18rem 0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--c-cream);
  opacity: 0.72;
  text-decoration: none;
  border: 0;
  background: transparent;
  transition: color .2s ease, opacity .2s ease;
}
.footer-chip-list a:hover {
  opacity: 1;
  color: var(--c-gold-soft);
}
.footer-chip-list a.see-all {
  color: var(--c-gold);
  opacity: 1;
  letter-spacing: 0.08em;
}
.footer-chip-list a.see-all:hover {
  color: var(--c-gold-soft);
}

/* ---- Mid row: language + social + direct line ---- */
.footer-row {
  background: var(--foot-3);
  padding: 1.6rem 0;
}
.footer-row-inner {
  width: var(--container); margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.footer-row-label {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.9;
  margin-right: 1rem;
}
.footer-langs { display: flex; align-items: center; }
.footer-flags { display: flex; gap: 0.4rem; }
.footer-flags button {
  background: transparent; border: 1px solid transparent;
  font-size: 1.1rem; cursor: pointer; padding: 0.35rem 0.45rem;
  border-radius: 2px; line-height: 1;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.footer-flags button:hover { border-color: var(--c-gold); background: rgba(198,154,77,0.08); transform: translateY(-1px); }

.footer-socials {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.85rem;
}
.footer-socials .footer-row-label { text-align: center; }
.footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.footer-social-icons a {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(198,154,77,0.55);
  border-radius: 50%;
  color: var(--c-gold);
  background: rgba(255,255,255,0.02);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.footer-social-icons a svg { width: 26px; height: 26px; display: block; }
.footer-social-icons a:hover {
  background: var(--c-gold); border-color: var(--c-gold); color: var(--c-bg-dark);
  transform: translateY(-2px);
}
@media (max-width: 720px) {
  .footer-social-icons a { width: 48px; height: 48px; }
  .footer-social-icons a svg { width: 22px; height: 22px; }
  .footer-social-icons { gap: 0.55rem; }
}

.footer-direct { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.footer-direct-lines { display: flex; flex-direction: column; gap: 0.2rem; text-align: right; }
.footer-direct-lines a {
  font-family: var(--f-sans);
  font-size: 0.85rem;
  color: var(--c-cream);
  opacity: 0.85;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.footer-direct-lines a:hover { color: var(--c-gold-soft); opacity: 1; }

/* ---- Legal strip ---- */
.footer-legal-strip {
  padding: 1.4rem 0 1.6rem;
  background: var(--foot-4);
}
.footer-legal-inner {
  width: var(--container); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236,229,211,0.55);
}
.footer-copy { white-space: nowrap; }
.footer-legal-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-legal-nav a {
  color: rgba(236,229,211,0.7);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-legal-nav a:hover { color: var(--c-gold-soft); }
.cavmir-credit a {
  color: rgba(236,229,211,0.7);
  border-bottom: 1px solid rgba(236,229,211,0.3);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.cavmir-credit a:hover { color: var(--c-gold-soft); border-bottom-color: var(--c-gold); }

/* ---- Back-to-top button ---- */
.footer-to-top {
  position: absolute;
  top: -22px; right: clamp(1.5rem, 4vw, 3rem);
  width: 44px; height: 44px;
  background: var(--c-gold);
  color: var(--c-ink);
  border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: background .25s ease, transform .25s ease;
  z-index: 2;
}
.footer-to-top:hover { background: var(--c-gold-soft); transform: translateY(-3px); }
.footer-to-top .arr { line-height: 1; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .footer-main-inner { grid-template-columns: 1fr; gap: 3rem; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .footer-explore-inner { grid-template-columns: 1fr; gap: 2.4rem; }
  .footer-row-inner { grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; text-align: center; }
  .footer-direct { justify-content: center; }
  .footer-direct-lines { text-align: center; }
}
@media (max-width: 800px) {
  .newsletter-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .newsletter-form { grid-template-columns: 1fr; }
  .newsletter-form button { padding: 1rem 1.4rem; justify-content: center; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-legal-inner { flex-direction: column; align-items: flex-start; gap: 0.8rem; text-align: left; }
  .footer-copy { white-space: normal; }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-cta-row { flex-direction: column; align-items: stretch; }
  .footer-cta { justify-content: center; }
}

/* ============================================================================
   REVEAL
   ============================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================================
   PULL QUOTE
   ============================================================================ */
.pull-quote {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.8rem);
  line-height: 1.32;
  color: var(--c-cream);
  max-width: 30ch;
  margin: 0 auto;
}
.pull-quote::before { content: "“"; color: var(--c-gold); }
.pull-quote::after  { content: "”"; color: var(--c-gold); }

/* ============================================================================
   MAP / FEATURED COMMUNITY GRID
   ============================================================================ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
}
.tile-grid--bleed {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.tile-grid--bleed .tile { aspect-ratio: 4/5; }
@media (max-width: 800px) {
  .tile-grid--bleed .tile { aspect-ratio: 3/4; }
}
.tile {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--c-night);
  isolation: isolate;
  transition: box-shadow 0.5s var(--ease);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.05s var(--ease); }
/* Cinematic full-tile gradient: a soft top vignette for depth plus a smooth
   bottom ramp the caption sits on — so each image reads as a composed frame,
   not a raw thumbnail with a caption bar stuck on the bottom. */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,9,11,0.34) 0%, rgba(8,9,11,0) 27%),
    linear-gradient(0deg, rgba(6,7,9,0.94) 0%, rgba(7,8,10,0.66) 16%, rgba(8,9,11,0.26) 40%, rgba(8,9,11,0) 64%);
  transition: opacity 0.6s var(--ease);
}
/* Gentle, restrained grade on the bleed-grid tiles; comes to full life on hover. */
.tile-grid--bleed .tile img {
  filter: saturate(0.94) contrast(1.02);
  transition: transform 1.05s var(--ease), filter 0.7s var(--ease);
}
.tile:hover img,
.tile:focus-visible img { transform: scale(1.06); }
.tile-grid--bleed .tile:hover img,
.tile-grid--bleed .tile:focus-visible img { filter: saturate(1.06) contrast(1.03); }
/* Hover: a hairline gold ring crisps the tile and signals it is a link. */
.tile:hover,
.tile:focus-visible { box-shadow: inset 0 0 0 1px rgba(198,154,77,0.45); }
.tile .meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1.6rem 1.55rem;
  z-index: 2;
  transition: transform 0.55s var(--ease);
}
.tile:hover .meta,
.tile:focus-visible .meta { transform: translateY(-4px); }
.tile .meta .lbl {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.tile .meta h3 {
  position: relative;
  display: inline-block;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1rem + 1vw, 2.1rem);
  color: var(--c-bone);
  margin-top: 0.55rem;
  line-height: 1.05;
}
.tile .meta h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.5rem;
  width: 0; height: 1px;
  background: var(--c-gold);
  transition: width 0.55s var(--ease);
}
.tile:hover .meta h3::after,
.tile:focus-visible .meta h3::after { width: 2rem; }

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

/* Clean seam between the photographic hero and the first dark section, so the
   section header reads as a new movement rather than a second hero title. */
.communities-lede {
  border-top: 1px solid rgba(250, 246, 238, 0.08);
  padding-top: clamp(5.5rem, 11vw, 9.5rem);
}
.communities-lede .prose { color: rgba(250, 246, 238, 0.74); }

/* ============================================================================
   SERVICE BLOCKS (Buy / Rent / Sell)
   ============================================================================ */
.service-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
}
.service {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  display: block;
}
.service .bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.service .bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.service:hover .bg img { transform: scale(1.06); }
.service .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,12,14,0.25) 0%, rgba(11,12,14,0.85) 100%);
}
.service .inner {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2rem 2rem 2.2rem;
  color: var(--c-bone);
}
.service .num {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: auto;
  padding-top: 0.5rem;
}
.service h3 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 1.4vw, 3rem);
  line-height: 1;
  margin: 0 0 0.7rem;
}
.service p {
  font-size: 0.98rem;
  line-height: 1.55;
  font-weight: 300;
  opacity: 0.92;
  max-width: 38ch;
}
.service .cta {
  margin-top: 1.2rem;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.25s, border-color 0.25s;
}
.service:hover .cta { color: var(--c-bone); border-color: var(--c-bone); }

@media (max-width: 900px) {
  .service-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   COMMUNITY DETAIL — vitals, map, points of interest, tags
   ========================================================================== */

/* head-row: title left, supporting copy / link right */
.head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  flex-wrap: wrap;
}
.head-row .head-aside {
  max-width: 42ch;
  text-align: left;
  margin: 0;
  flex: 0 1 42ch;
}
.head-row .head-aside .prose { margin: 0; }
@media (max-width: 800px) {
  .head-row { align-items: flex-start; gap: 1.4rem; }
  .head-row .head-aside { flex: 1 1 100%; }
}

/* tag pills used under the About paragraphs to show "best for ..." */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}

/* Light-section variants — community pages now run these on white */
.bg-bone .tag-pill, .bg-sand .tag-pill {
  color: #8a6a2f;
  border-color: rgba(11,12,14,0.16);
  background: rgba(198,154,77,0.05);
}
.bg-bone .vitals-grid, .bg-sand .vitals-grid {
  background: var(--c-line-dark);
  border-color: var(--c-line-dark);
}
.bg-bone .vital, .bg-sand .vital { background: #fff; }
.bg-bone .vital-lbl, .bg-sand .vital-lbl { color: rgba(11,12,14,0.55); opacity: 1; }
.bg-bone .vital-val, .bg-sand .vital-val { color: var(--c-ink); }
.bg-bone .vital-note, .bg-sand .vital-note { color: rgba(11,12,14,0.6); opacity: 1; }
.bg-bone .poi-grid, .bg-sand .poi-grid {
  background: var(--c-line-dark);
  border-color: var(--c-line-dark);
}
.bg-bone .poi, .bg-sand .poi { background: #fff; }
.bg-bone .poi-name, .bg-sand .poi-name { color: var(--c-ink); }
.bg-bone .poi-meta, .bg-sand .poi-meta { color: rgba(11,12,14,0.58); }

/* shared icon defaults — inherits color from parent */
.ic { display: block; flex-shrink: 0; }

/* -------- Vitals grid (LoopNet-style icon stats) -------- */
.vitals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.vital {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.8rem 1.5rem;
  background: var(--c-bg-dark);
  min-height: 130px;
}
.vital-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(198,154,77,0.10);
  color: var(--c-gold);
  flex-shrink: 0;
}
.vital-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.vital-lbl {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.65;
}
.vital-val {
  font-family: var(--f-display);
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--c-bone);
  letter-spacing: -0.005em;
}
.vital-note {
  font-family: var(--f-sans);
  font-size: 0.82rem;
  color: var(--c-cream);
  opacity: 0.7;
  margin-top: 0.15rem;
}
@media (max-width: 1100px) { .vitals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  {
  .vitals-grid { grid-template-columns: 1fr; }
  .vital { padding: 1.3rem 1.1rem; min-height: 0; }
  .vital-val { font-size: 1.3rem; }
}

/* -------- Map -------- */
.map-frame {
  position: relative;
  width: 100%;
  border: 1px solid var(--c-line);
  background: var(--c-ink-2);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.9) contrast(1.05);
}
@media (max-width: 700px) { .map-frame { aspect-ratio: 4 / 5; } }

/* -------- Branded community map (Leaflet + Esri satellite) -------- */
.map-frame--branded {
  border-color: rgba(198, 154, 77, 0.22);
  box-shadow:
    0 1px 0 rgba(217, 187, 130, 0.06) inset,
    0 24px 60px -28px rgba(0, 0, 0, 0.65);
}
.adv-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--c-ink-2);
  cursor: default;
  z-index: 1;
  isolation: isolate;
  /* The map is a display, never a tool — let wheel / drag / touch events
     pass straight through to the page so vertical scroll always works. */
  pointer-events: none;
  touch-action: pan-y;
}
.adv-map .leaflet-control-container,
.adv-map .leaflet-control,
.adv-map .leaflet-bar {
  display: none !important;
}
.adv-map .leaflet-tile-pane {
  filter: saturate(0.82) contrast(1.06) brightness(0.92);
}
.adv-map-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    /* Bottom 15% — branded gold wash, high transparency, fades up into nothing. */
    linear-gradient(180deg,
      rgba(198, 154, 77, 0)    0%,
      rgba(198, 154, 77, 0)    85%,
      rgba(198, 154, 77, 0.16) 92%,
      rgba(244, 201, 58, 0.28) 100%),
    /* Edge falloff — keeps the centre crisp, darkens corners. */
    radial-gradient(120% 90% at 50% 50%,
      rgba(11, 12, 14, 0)   55%,
      rgba(11, 12, 14, 0.55) 100%),
    /* Top + bottom ink wash for legibility of overlays. */
    linear-gradient(180deg,
      rgba(11, 12, 14, 0.18) 0%,
      rgba(11, 12, 14, 0)    18%,
      rgba(11, 12, 14, 0)    72%,
      rgba(11, 12, 14, 0.55) 100%);
}
.adv-map-overlay {
  position: absolute;
  left: 1.4rem;
  bottom: 1.25rem;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}
.adv-map-overlay-mark {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
  opacity: 0.92;
}
.adv-map-overlay-name {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: var(--c-bone);
  letter-spacing: 0.005em;
}
.adv-map-overlay-coords {
  margin-top: 0.35rem;
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.72);
}
.adv-map-attrib {
  position: absolute;
  right: 0.8rem;
  bottom: 0.55rem;
  z-index: 5;
  pointer-events: none;
  font-family: var(--f-sans);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: rgba(250, 246, 238, 0.45);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.adv-map .leaflet-overlay-pane svg path {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
@media (max-width: 700px) {
  .adv-map-overlay { left: 1rem; bottom: 1rem; }
  .adv-map-overlay-coords { letter-spacing: 0.18em; }
}

/* -------- Map side-nav arrows (jump to adjacent community) -------- */
.adv-map-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0;
  background: rgba(11, 12, 14, 0.55);
  border: 1px solid rgba(244, 201, 58, 0.55);
  color: #facb4a;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3) inset,
    0 6px 20px -8px rgba(0, 0, 0, 0.7);
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}
.adv-map-nav--prev { left: 1rem; }
.adv-map-nav--next { right: 1rem; }

.adv-map-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-family: var(--f-display);
  font-size: 2.1rem;
  line-height: 1;
  color: #facb4a;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.adv-map-nav-label {
  max-width: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-bone);
  opacity: 0;
  transition:
    max-width 0.45s ease,
    padding 0.45s ease,
    opacity 0.3s ease 0.05s;
}

.adv-map-nav:hover,
.adv-map-nav:focus-visible {
  background: rgba(11, 12, 14, 0.78);
  border-color: #facb4a;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3) inset,
    0 0 24px -4px rgba(244, 201, 58, 0.45),
    0 8px 24px -8px rgba(0, 0, 0, 0.8);
  outline: none;
}
.adv-map-nav:hover .adv-map-nav-label,
.adv-map-nav:focus-visible .adv-map-nav-label {
  max-width: 220px;
  padding: 0 1.1rem 0 0.4rem;
  opacity: 1;
}
.adv-map-nav--next:hover .adv-map-nav-label,
.adv-map-nav--next:focus-visible .adv-map-nav-label {
  padding: 0 0.4rem 0 1.1rem;
}

@media (max-width: 700px) {
  .adv-map-nav { height: 44px; }
  .adv-map-nav-arrow { width: 44px; height: 44px; font-size: 1.7rem; }
  .adv-map-nav--prev { left: 0.6rem; }
  .adv-map-nav--next { right: 0.6rem; }
  .adv-map-nav-label { font-size: 0.62rem; letter-spacing: 0.14em; }
  .adv-map-nav:hover .adv-map-nav-label,
  .adv-map-nav:focus-visible .adv-map-nav-label { max-width: 140px; }
}

/* -------- Community portfolio billboard (single-card carousel) -------- */
.portfolio-stage {
  position: relative;
  margin-top: 3rem;
}
.portfolio-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.portfolio-track::-webkit-scrollbar { display: none; }

.portfolio-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  min-height: 460px;
  background: var(--c-ink-2);
  border: 1px solid var(--c-line);
  color: var(--c-bone);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.portfolio-card:hover {
  border-color: rgba(244, 201, 58, 0.55);
}
.portfolio-card-art {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.portfolio-card-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.portfolio-card:hover .portfolio-card-art img { transform: scale(1.04); }
.portfolio-card-tag {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-gold-soft);
  padding: 0.4rem 0.7rem;
}
.portfolio-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.4rem 2.6rem;
  gap: 0.9rem;
}
.portfolio-card-eyebrow {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.portfolio-card-title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  margin: 0;
}
.portfolio-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(250, 246, 238, 0.7);
  text-transform: uppercase;
}
.portfolio-card-price {
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--c-gold-soft);
  margin-top: 0.4rem;
}
.portfolio-card-cta {
  margin-top: 0.6rem;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-bone);
  border-bottom: 1px solid var(--c-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
  align-self: flex-start;
}

/* Coming-soon placeholder variant */
.portfolio-card--coming-soon .portfolio-card-art {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(244, 201, 58, 0.12), transparent 60%),
    linear-gradient(135deg, #17191e 0%, #0b0c0e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.portfolio-coming-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem;
  text-align: center;
}
.portfolio-coming-stamp svg {
  width: 64px;
  height: 64px;
  color: var(--c-gold);
  opacity: 0.85;
}
.portfolio-coming-stamp .ribbon {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
  border: 1px solid rgba(244, 201, 58, 0.4);
  padding: 0.4rem 0.9rem;
  margin-top: 0.4rem;
}

/* Side arrows on the carousel */
.portfolio-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(244, 201, 58, 0.55);
  background: rgba(11, 12, 14, 0.7);
  color: #facb4a;
  font-family: var(--f-display);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.portfolio-arrow:hover,
.portfolio-arrow:focus-visible {
  background: rgba(11, 12, 14, 0.9);
  border-color: #facb4a;
  outline: none;
  transform: translateY(-50%) scale(1.06);
}
.portfolio-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  transform: translateY(-50%);
}
.portfolio-arrow--prev { left: -22px; }
.portfolio-arrow--next { right: -22px; }

@media (max-width: 900px) {
  .portfolio-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .portfolio-card-art { aspect-ratio: 16 / 10; min-height: 0; }
  .portfolio-card-body { padding: 1.8rem 1.6rem 2.2rem; }
  .portfolio-arrow--prev { left: 6px; }
  .portfolio-arrow--next { right: 6px; }
}

/* -------- Points of interest grid -------- */
.poi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.poi {
  display: flex;
  gap: 0.95rem;
  align-items: center;
  padding: 1.3rem 1.4rem;
  background: var(--c-night);
}
.poi-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--c-gold-soft);
  flex-shrink: 0;
}
.poi-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.poi-name {
  font-family: var(--f-display);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--c-bone);
}
.poi-meta {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--c-cream);
  opacity: 0.7;
}
@media (max-width: 900px) { .poi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .poi-grid { grid-template-columns: 1fr; } }

/* -------- Empty-listings fallback (when no inventory mapped) -------- */
.empty-listings {
  border: 1px solid var(--c-line);
  padding: clamp(2rem, 4vw, 3.4rem);
  background: linear-gradient(180deg, rgba(198,154,77,0.04), transparent 60%);
}

/* ============================================================================
   MEGAMENU — drops from each nav tab on hover/focus.
   Built directly inside <li.has-mega> in header.html.
   ============================================================================ */
/* Full row height so every mega panel drops from the same baseline (the bottom
   of the nav row), even under the shorter emphasis pills. */
.nav-tabs > li {
  position: static;
  height: var(--header-main);
  display: flex;
  align-items: center;
}
/* Anchor each mega panel to its OWN tab so it drops directly beneath the tab
   being hovered — not into the header's top-left corner. */
.nav-tabs > li.has-mega { position: relative; }

.nav-tabs > li.has-mega > a { position: relative; }

/* Faint chevron under tabs that have a panel */
.nav-tabs > li.has-mega > a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 4px; height: 4px;
  margin-left: -2px;
  background: var(--c-gold);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  border-radius: 50%;
}
.nav-tabs > li.has-mega:hover > a::before,
.nav-tabs > li.has-mega:focus-within > a::before { opacity: 0.8; transform: translateY(0); }

.mega-menu {
  position: absolute;
  left: 0;
  right: auto;
  width: min(620px, 92vw);
  top: 100%;              /* directly beneath this tab, not the header corner */
  background: linear-gradient(180deg, rgba(11,12,14,0.96) 0%, rgba(11,12,14,0.93) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid rgba(198,154,77,0.22);
  border-top: 1px solid rgba(198,154,77,0.16);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.32s var(--ease),
              transform 0.32s var(--ease),
              visibility 0s linear 0.32s;
  z-index: 49;
  pointer-events: none;
}
.nav-tabs > li.has-mega:hover > .mega-menu,
.nav-tabs > li.has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.32s var(--ease),
              transform 0.32s var(--ease),
              visibility 0s;
  pointer-events: auto;
}

/* Right-half tabs: open the panel leftward (anchored to the tab's right edge)
   so a wide panel stays on-screen instead of overflowing the viewport. */
.nav-tabs > li.has-mega.mega-right > .mega-menu {
  left: auto;
  right: 0;
}

/* Bridge zone between tab and panel so hover does not drop */
.mega-menu::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}

/* Compact panel — left-aligned instead of full-bleed, roughly half the old
   footprint (no feature image, tighter padding) so it never swallows the
   screen and is easy to dismiss by moving off it. */
.mega-inner {
  width: 100%;
  max-width: 620px;
  margin: 0;
  padding: clamp(1.1rem, 1.6vw, 1.4rem) clamp(1.5rem, 3vw, 2.4rem) clamp(1.2rem, 1.6vw, 1.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.9rem, 1.2vw, 1.3rem);
}

.mega-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1rem, 1.6vw, 1.6rem);
}

.mega-col { min-width: 0; }

.mega-col-title {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(198,154,77,0.20);
}

.mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.05rem;
}
.mega-col ul a {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.55rem 0;
  font-family: var(--f-serif);
  color: var(--c-bone);
  border-bottom: 1px solid transparent;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.mega-col ul a:hover {
  color: var(--c-gold-soft);
  border-bottom-color: rgba(198,154,77,0.30);
  transform: translateX(2px);
}
.mega-col ul .lbl {
  font-size: 1.04rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.mega-col ul .note {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.55;
}

/* Link-hover signal in the columns */
.mega-col ul a:hover {
  color: var(--c-gold-soft);
  border-bottom-color: rgba(198,154,77,0.42);
  transform: none;
}

/* Suppress mega on touch / mobile - they get the overlay */
@media (hover: none), (max-width: 1180px) {
  .mega-menu { display: none !important; }
}

/* ============================================================================
   .btn.ghost - outline variant for secondary CTAs on dark sections
   ============================================================================ */
.btn.ghost {
  background: transparent;
  border-color: rgba(250,246,238,0.36);
  color: var(--c-bone);
}
.btn.ghost:hover {
  background: rgba(250,246,238,0.08);
  border-color: var(--c-gold);
  color: var(--c-gold-soft);
}

/* ============================================================================
   RESTAURANTS PAGE - card grid with image, bio, address, map, CTAs
   ============================================================================ */
.resto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 2.4vw, 2.2rem);
}
@media (max-width: 960px) {
  .resto-grid { grid-template-columns: 1fr; }
}

.resto-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(250,246,238,0.04) 0%, rgba(250,246,238,0.015) 100%);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.5s var(--ease);
}
.resto-card:hover {
  border-color: rgba(198,154,77,0.55);
  transform: translateY(-2px);
}

.resto-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-ink-2);
}
.resto-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.resto-card:hover .resto-img img { transform: scale(1.04); }

.resto-num,
.resto-price {
  position: absolute;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  background: rgba(11,12,14,0.78);
  color: var(--c-gold);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.resto-num   { top: 0.9rem; left: 0.9rem; }
.resto-price { top: 0.9rem; right: 0.9rem; letter-spacing: 0.18em; }

.resto-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.2rem, 2vw, 1.7rem);
}

.resto-head h3 {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1.05;
  margin: 0 0 0.35rem;
  color: var(--c-bone);
}
.resto-meta {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
  margin: 0;
}

.resto-bio {
  font-family: var(--f-serif);
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--c-cream);
  margin: 0;
}

.resto-charlie {
  margin: 0;
  padding: 0.85rem 1rem;
  background: rgba(198,154,77,0.06);
  border-left: 2px solid var(--c-gold);
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--c-bone);
  line-height: 1.45;
  font-size: 1rem;
}
.resto-charlie-tag {
  display: inline-block;
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-right: 0.35rem;
}

.resto-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0;
  padding: 0.6rem 0 0.2rem;
  border-top: 1px solid var(--c-line);
}
.resto-facts > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.75rem;
}
.resto-facts dt {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.55;
  padding-top: 2px;
}
.resto-facts dd {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 0.98rem;
  color: var(--c-bone);
}

.resto-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--c-ink-2);
  border: 1px solid var(--c-line);
  overflow: hidden;
  filter: saturate(0.85) contrast(1.05);
}
.resto-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.7);
}

.resto-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.4rem;
}
.resto-ctas .btn {
  padding: 0.78rem 1.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
}

/* ============================================================================
   BUILDING DETAIL PAGE
   ============================================================================ */

/* -------- Two-column: narrative + sticky stats sidebar -------- */
.building-split {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 1024px) {
  .building-split { grid-template-columns: 1fr; }
}

.building-narrative {
  min-width: 0;
}

.address-block {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--c-line);
  background: rgba(198, 154, 77, 0.04);
  max-width: 600px;
}
.address-block svg { color: var(--c-gold); margin-top: 2px; flex-shrink: 0; }
.address-block .address-lbl {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.65rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.25rem;
}
.address-block .address-val {
  font-family: var(--f-serif);
  font-size: 1.02rem;
  color: var(--c-bone);
  line-height: 1.45;
}

/* -------- Sticky stats sidebar -------- */
.building-vitals {
  position: sticky;
  top: 110px;
  background: var(--c-ink-2);
  border: 1px solid var(--c-line);
  padding: 1.8rem 1.6rem;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-line) transparent;
}
.building-vitals::-webkit-scrollbar { width: 6px; }
.building-vitals::-webkit-scrollbar-thumb { background: var(--c-line); }

.building-vitals-head {
  padding-bottom: 1rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--c-line);
}
.building-vitals-head .ornament {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: var(--c-gold);
}
.building-vitals-head h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 300;
  margin: 0.4rem 0 0;
  color: var(--c-bone);
}

.vitals-group {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--c-line);
}
.vitals-group:last-child { border-bottom: 0; padding-bottom: 0; }

.vitals-group-lbl {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
  margin-bottom: 0.7rem;
}

.vitals-group dl {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.vital-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.8rem;
  align-items: baseline;
}
.vital-row dt {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--c-cream);
  opacity: 0.6;
  font-weight: 300;
}
.vital-row dd {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 0.98rem;
  color: var(--c-bone);
  line-height: 1.35;
}
@media (max-width: 1024px) {
  .building-vitals { position: static; max-height: none; }
  .vital-row { grid-template-columns: 1fr; gap: 0.1rem; }
  .vital-row dt { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; }
}

/* -------- Sales comps table -------- */
.comps-table {
  border: 1px solid var(--c-line);
  background: rgba(198, 154, 77, 0.03);
  overflow-x: auto;
}
.comps-row {
  display: grid;
  grid-template-columns: 90px 1fr 100px 160px 110px 140px;
  gap: 1.2rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--c-line);
  align-items: center;
  min-width: 800px;
}
.comps-row:last-child { border-bottom: 0; }
.comps-row > span {
  font-family: var(--f-serif);
  font-size: 1.02rem;
  color: var(--c-bone);
}
.comps-row .num { font-variant-numeric: tabular-nums; }
.comps-row.comps-head {
  background: rgba(198, 154, 77, 0.06);
  border-bottom: 1px solid var(--c-gold-soft);
}
.comps-row.comps-head > span {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 400;
}

/* -------- Rental yield grid -------- */
.yield-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
@media (max-width: 900px) { .yield-grid { grid-template-columns: 1fr; } }

.yield-card {
  padding: 2rem 1.8rem;
  border: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(198,154,77,0.05), transparent 70%);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.yield-lbl {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.yield-val {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  color: var(--c-bone);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.yield-val .dim { color: var(--c-gold-soft); margin: 0 0.2rem; opacity: 0.7; }
.yield-note {
  font-family: var(--f-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--c-cream);
  opacity: 0.6;
}

/* -------- Notable residents -------- */
.residents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
@media (max-width: 800px) { .residents-grid { grid-template-columns: 1fr; } }

.resident {
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--c-line);
  background: rgba(255,255,255,0.015);
}
.resident-name {
  display: block;
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--c-gold-soft);
  margin-bottom: 0.6rem;
}
.resident-note {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-bone);
  opacity: 0.88;
}

/* -------- Similar buildings grid -------- */
.similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media (max-width: 900px) { .similar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .similar-grid { grid-template-columns: 1fr; } }

.similar-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--c-line);
  background: var(--c-ink-2);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease;
}
.similar-card:hover { transform: translateY(-3px); border-color: var(--c-gold-soft); }

.similar-card .img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.similar-card .img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.95);
  transition: transform .8s ease;
}
.similar-card:hover .img img { transform: scale(1.05); }

.similar-card .body { padding: 1.2rem 1.3rem 1.5rem; }
.similar-card .neighborhood {
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.similar-card h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 300;
  margin: 0.4rem 0 0.5rem;
  color: var(--c-bone);
  line-height: 1.15;
}
.similar-card p {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--c-cream);
  opacity: 0.78;
}

/* -------- Watchlist form (empty-state lead capture) -------- */
.building-watchlist {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 0.6rem;
  max-width: 800px;
}
@media (max-width: 800px) { .building-watchlist { grid-template-columns: minmax(0, 1fr); } }

.building-watchlist input {
  font-family: var(--f-sans);
  font-size: 0.9rem;
  padding: 0.95rem 1rem;
  background: var(--c-ink-2);
  border: 1px solid var(--c-line);
  color: var(--c-bone);
}
.building-watchlist input::placeholder { color: var(--c-cream); opacity: 0.45; }
.building-watchlist input:focus {
  outline: none;
  border-color: var(--c-gold);
  background: rgba(198,154,77,0.04);
}
.building-watchlist .btn { white-space: nowrap; }
/* Long "Add me to the <building> list" labels (this rule wins over the nowrap
   above by source order) wrap on phones instead of forcing a ~460px track. */
@media (max-width: 800px) { .building-watchlist .btn { white-space: normal; } }


/* ============================================================
   BUILDINGS DIRECTORY (/guides/buildings.html)
   – shorter hero, inline author chip, full-bleed 4-col grid
   – grouped by neighborhood
   ============================================================ */

/* Hero — 20% shorter than the standard .page-hero (62vh -> ~50vh) */
.page-hero--buildings { min-height: 50vh; }
.page-hero--buildings .content { padding-bottom: clamp(1.8rem, 3.6vw, 3rem); }
.page-hero--buildings h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.4rem); }
.page-hero--buildings .sub { margin-top: 0.9rem; }

/* Inline author chip embedded in the hero (replaces the standalone byline) */
.hero-author {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.4rem;
  padding: 0.55rem 1rem 0.55rem 0.55rem;
  background: rgba(11,12,14,0.45);
  border: 1px solid rgba(198,154,77,0.35);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-author__photo {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid rgba(250,246,238,0.25);
}
.hero-author__id { display: flex; flex-direction: column; line-height: 1.3; }
.hero-author__by {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.hero-author__name {
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--c-bone);
}
.hero-author__cred {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  color: rgba(250,246,238,0.7);
  letter-spacing: 0.01em;
}

/* Full-bleed wrapper — replaces .container constraint for the building grid */
.buildings-bleed {
  width: 100%;
  padding: 0 clamp(0.75rem, 1.5vw, 1.5rem);
  box-sizing: border-box;
}

.buildings-group + .buildings-group { margin-top: clamp(2.4rem, 4vw, 3.6rem); }

.buildings-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.25rem 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(198,154,77,0.22);
}
.buildings-group__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 0.9rem + 1.2vw, 2rem);
  font-weight: 300;
  color: var(--c-bone);
  margin: 0;
  letter-spacing: -0.005em;
}
.buildings-group__count {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
  white-space: nowrap;
}

/* 4-up grid (tightens to 3 / 2 / 1 as viewport shrinks) */
.buildings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.7rem, 1vw, 1.1rem);
}
@media (max-width: 1099px) { .buildings-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .buildings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .buildings-grid { grid-template-columns: 1fr; } }

.building-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--c-line);
  background: var(--c-ink-2);
  overflow: hidden;
  border-radius: 12px;   /* soft, Airbnb-style rounded card */
  transition: transform .35s ease, border-color .35s ease;
}
.building-card:hover { transform: translateY(-3px); border-color: var(--c-gold-soft); }

.building-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.building-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.95);
  transition: transform .8s ease;
}
.building-card:hover .building-card__img img { transform: scale(1.05); }

.building-card__body { padding: 0.9rem 1rem 1.1rem; }
.building-card__body h3 {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 0.9rem + 0.3vw, 1.25rem);
  font-weight: 300;
  margin: 0 0 0.35rem;
  color: var(--c-bone);
  line-height: 1.18;
}
.building-card__body p {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--c-cream);
  opacity: 0.78;
}

/* Neighborhood chip on each flat-grid card (replaces the group header
   that used to label runs of buildings by neighborhood) */
.building-card__hood {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 0.60rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.45rem;
}

/* ============================================================
   BUILDINGS TEASER — cross-page 3-card preview + link to the
   /guides/buildings.html directory. Used on home, buy, communities
   and map. Cards reuse .building-card (already styled for dark bg).
   ============================================================ */
.buildings-teaser__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.buildings-teaser__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.4vw, 1.4rem);
}
@media (max-width: 900px) { .buildings-teaser__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .buildings-teaser__grid { grid-template-columns: 1fr; } }

/* ============================================================
   BUILDINGS HERO — two-column layout: copy + square search card
   The hero height is unchanged; the search card sits to the right
   of the existing copy at desktop, stacks below it on narrow vw.
   ============================================================ */
.page-hero--buildings .content--with-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 360px);
  align-items: end;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.page-hero--buildings .hero-copy { min-width: 0; }

.bldg-search {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: clamp(1rem, 1.4vw, 1.4rem);
  box-sizing: border-box;
  background: rgba(11, 12, 14, 0.62);
  border: 1px solid rgba(198, 154, 77, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overflow: visible;
}
.bldg-search__label {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.bldg-search__field {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(250, 246, 238, 0.06);
  border: 1px solid rgba(250, 246, 238, 0.18);
  padding: 0.55rem 0.7rem;
}
.bldg-search__icon { color: rgba(250, 246, 238, 0.6); margin-right: 0.55rem; flex: none; }
.bldg-search__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 0.95rem;
  letter-spacing: 0.005em;
}
.bldg-search__input::placeholder { color: rgba(250, 246, 238, 0.5); }
.bldg-search__input:focus { outline: 0; }

.bldg-search__results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  background: rgba(11, 12, 14, 0.92);
  border: 1px solid rgba(198, 154, 77, 0.25);
}
.bldg-search__result a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  text-decoration: none;
  color: var(--c-bone);
  border-bottom: 1px solid rgba(250, 246, 238, 0.06);
  transition: background 0.2s ease;
}
.bldg-search__result a:hover { background: rgba(198, 154, 77, 0.12); }
.bldg-search__result-name {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 300;
}
.bldg-search__result-hood {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  white-space: nowrap;
}

.bldg-search__empty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.1rem;
}
.bldg-search__empty-line {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(250, 246, 238, 0.78);
}
.bldg-search__form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bldg-search__form input {
  background: rgba(250, 246, 238, 0.06);
  border: 1px solid rgba(250, 246, 238, 0.18);
  padding: 0.5rem 0.6rem;
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 0.85rem;
}
.bldg-search__form input::placeholder { color: rgba(250, 246, 238, 0.5); }
.bldg-search__form input:focus {
  outline: 0;
  border-color: var(--c-gold);
}
.bldg-search__form .btn { margin-top: 0.2rem; font-size: 0.85rem; padding: 0.55rem 0.9rem; }

/* Stack the search card below the copy on narrower viewports — it stays
   square but spans the full hero width once the two columns collapse. */
@media (max-width: 820px) {
  .page-hero--buildings .content--with-search {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .bldg-search {
    aspect-ratio: auto;
    max-width: 100%;
  }
}


/* ============================================================
   BANKING GUIDE — bank-card grid, byline, TOC, FAQ, .serif helper
   ============================================================ */
.serif { font-family: var(--f-serif); font-weight: 400; font-size: var(--s-h3); line-height: 1.2; }
.gold  { color: var(--c-gold); }

.guide-byline {
  max-width: 80ch;
}
.guide-byline .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--f-sans);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  opacity: 0.7;
  margin-bottom: 1.4rem;
}
.guide-byline .meta strong { color: var(--c-rust); }
.guide-byline .prose { color: var(--c-ink); opacity: 0.92; max-width: 80ch; }

/* --- Guide pages: widen the reading container on desktop -------------------
   The original 960px container felt cramped on long-form guide pages
   (visa, banking, insurance, museums). Bleeds wider on >=1100px screens
   so tables, bar charts and figures breathe; mobile is untouched because
   92vw is still the floor. The journal-toolkit page (buying-in-rio) uses
   .j-* primitives and is unaffected. */
@media (min-width: 1100px) {
  body.page-guides .container-tight { width: min(1240px, 92vw); }
}

/* --- Author: Charles Jonas byline + card (every guide) --- */
.author-byline {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font-family: var(--f-sans);
}
.author-byline__photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  flex: none;
  background: var(--c-cream);
  border: 1px solid var(--c-line-dark);
}
/* Branded ADV avatar — replaces Charlie's photo on every non-blog page.
   Three-triangle mark + "ADV" wordmark inside the circle. */
.author-byline__photo.author-byline__photo--brand,
.author-card__photo.author-card__photo--brand,
.hero-author__photo.hero-author__photo--brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
  background: var(--c-verde);
  border-color: rgba(255,255,255,0.18);
  overflow: hidden;
}
.adv-avatar__tri {
  width: 52%;
  height: auto;
  display: block;
}
.adv-avatar__tri polygon { fill: var(--c-gold); }
.adv-avatar__word {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--c-bone);
  line-height: 1;
}
.author-byline__photo--brand .adv-avatar__word { font-size: 0.62rem; }
.author-card__photo--brand   .adv-avatar__word { font-size: 0.92rem; margin-top: 0.1em; }
.hero-author__photo--brand   .adv-avatar__word { font-size: 0.5rem; }

/* Listing pages — branded broker avatar keeps the gold ring of the photo it replaces. */
.proplist-broker__photo--brand,
.proplist-enquire__photo--brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.16em;
  background: var(--c-verde);
  overflow: hidden;
}
.proplist-enquire__photo--brand {
  width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid rgba(198,154,77,0.55);
  box-shadow: 0 0 0 3px rgba(198,154,77,0.10);
  flex: 0 0 84px;
}
.proplist-broker__photo--brand .adv-avatar__word { font-size: 0.56rem; }
.proplist-enquire__photo--brand .adv-avatar__word { font-size: 0.8rem; margin-top: 0.08em; }

.author-byline__id { display: flex; flex-direction: column; line-height: 1.4; }
.author-byline__by {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
}
.author-byline__name {
  font-family: var(--f-display);
  font-size: 1.18rem;
  color: var(--c-ink);
}
.author-byline__cred { font-size: 0.78rem; color: var(--c-rust); letter-spacing: 0.01em; }
.author-byline__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  opacity: 0.6;
}
.author-byline__dot { opacity: 0.5; }

.bg-ink .author-byline__name,
.bg-night .author-byline__name,
.bg-forest .author-byline__name,
.bg-claret .author-byline__name { color: var(--c-bone); }
.bg-ink .author-byline__cred,
.bg-night .author-byline__cred,
.bg-forest .author-byline__cred,
.bg-claret .author-byline__cred { color: var(--c-gold-soft); }

.author-card {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 1.5rem;
  align-items: start;
  margin: 3.5rem 0 0;
  padding: 2.2rem 0;
  border-top: 1px solid var(--c-line-dark);
  border-bottom: 1px solid var(--c-line-dark);
  font-family: var(--f-sans);
}
.author-card__photo {
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  background: var(--c-cream);
  border: 1px solid var(--c-line-dark);
}
.author-card__name { font-family: var(--f-display); font-size: 1.4rem; color: var(--c-ink); }
.author-card__cred {
  font-size: 0.8rem;
  color: var(--c-rust);
  letter-spacing: 0.02em;
  margin-top: 0.2rem;
}
.author-card__bio {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(11,12,14,0.72);
  margin-top: 0.75rem;
  max-width: 64ch;
}
.author-card__bio a { color: var(--c-rust); border-bottom: 1px solid currentColor; }

.bg-ink .author-card__name,
.bg-night .author-card__name,
.bg-forest .author-card__name,
.bg-claret .author-card__name { color: var(--c-bone); }
.bg-ink .author-card__bio,
.bg-night .author-card__bio,
.bg-forest .author-card__bio,
.bg-claret .author-card__bio { color: rgba(250,246,238,0.75); }

/* Map page sits on a dark body — keep the byline legible there. */
.adv-explorer .author-byline__name { color: var(--c-bone); }
.adv-explorer .author-byline__cred { color: var(--c-gold-soft); }

@media (max-width: 560px) {
  .author-card { grid-template-columns: 76px 1fr; gap: 1.1rem; }
  .author-card__photo { width: 76px; height: 76px; }
  .author-byline__meta { margin-left: 0; width: 100%; }
}

.guide-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.4rem 2rem;
  counter-reset: toc;
  font-family: var(--f-sans);
}
.guide-toc li {
  counter-increment: toc;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--c-line-dark);
}
.guide-toc li::before {
  content: counter(toc, decimal-leading-zero) "  ";
  font-family: var(--f-display);
  color: var(--c-rust);
  margin-right: 0.6rem;
  font-size: 0.9rem;
}
.guide-toc a {
  color: var(--c-ink);
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.guide-toc a:hover { color: var(--c-rust); border-bottom-color: var(--c-rust); }

/* --- Bank card grid (Cavmir biz-card parity, ADV tokens) --- */
.bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
}
@media (max-width: 760px) {
  .bank-grid { grid-template-columns: 1fr; gap: 18px; }
}

.bank-card {
  background: #ffffff;
  border: 1px solid var(--c-line-dark);
  border-radius: 6px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  color: var(--c-ink);
  font-family: var(--f-sans);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  box-shadow: 0 1px 0 rgba(11,12,14,0.04);
}
.bank-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(11,12,14,0.10);
  border-color: rgba(198,154,77,0.35);
}

.bank-card__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.bank-card__logo {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: var(--c-bone);
  border: 1px solid var(--c-line-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bank-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.bank-card__title { flex: 1 1 auto; min-width: 0; }
.bank-card__title h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--c-ink);
  margin: 0 0 4px 0;
  letter-spacing: 0.005em;
}
.bank-card__pitch {
  margin: 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-ink);
  opacity: 0.72;
}

.bank-card__meta {
  margin: 0 0 16px 0;
  padding: 14px 0 10px 0;
  border-top: 1px solid var(--c-line-dark);
  border-bottom: 1px solid var(--c-line-dark);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bank-card__meta > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
}
.bank-card__meta dt {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-rust);
  font-weight: 500;
}
.bank-card__meta dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--c-ink);
  opacity: 0.85;
  line-height: 1.45;
}

.bank-card__features {
  margin: 0 0 18px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bank-card__features li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--c-ink);
  opacity: 0.86;
}
.bank-card__features li::before {
  content: "·";
  color: var(--c-gold);
  font-family: var(--f-display);
  position: absolute;
  left: 4px;
  top: -2px;
  font-size: 1.4rem;
  line-height: 1;
}

.bank-card__note {
  margin: 0 0 18px 0;
  padding: 12px 14px;
  background: var(--c-bone);
  border-left: 3px solid var(--c-gold);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--c-ink);
  font-family: var(--f-serif);
  font-style: italic;
}
.bank-card__note strong {
  color: var(--c-rust);
  font-style: normal;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bank-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 10px 18px;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
  align-self: flex-start;
}
.bank-card__cta:hover {
  background: var(--c-bg-dark);
  color: var(--c-bone);
}

@media (max-width: 540px) {
  .bank-card { padding: 22px 20px 20px; }
  .bank-card__logo { flex: 0 0 64px; width: 64px; height: 64px; }
  .bank-card__title h3 { font-size: 1.35rem; }
  .bank-card__meta > div { grid-template-columns: 100px 1fr; gap: 8px; }
}

/* --- FAQ details/summary --- */
.faq details {
  border-bottom: 1px solid var(--c-line-dark);
  padding: 0.4rem 0;
}
.faq details[open] { padding-bottom: 1rem; }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 0;
  font-family: var(--f-sans);
  font-size: 1rem;
  color: var(--c-ink);
  position: relative;
  padding-right: 2rem;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-size: 1.6rem;
  color: var(--c-gold);
  line-height: 1;
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary { color: var(--c-rust); }
.faq details[open] summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
.faq summary:hover { color: var(--c-rust); }
.faq summary strong { font-weight: 500; }
.faq details p {
  margin: 0.4rem 0 0 0;
  font-family: var(--f-serif);
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--c-ink);
  opacity: 0.88;
  max-width: 78ch;
}

/* ============================================================================
   MUSEUMS GUIDE — visual TOC, interactive cards, themed itineraries
   ============================================================================ */

/* ----- Visual TOC ----- */
.museums-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: none;
}
@media (max-width: 1100px) { .museums-toc { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .museums-toc { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 440px)  { .museums-toc { grid-template-columns: 1fr; } }

.museums-toc > li { margin: 0; }
.museums-toc a {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(11,12,14,0.08);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--c-ink);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s ease;
  height: 100%;
}
.museums-toc a:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(11,12,14,0.35);
  border-color: var(--c-gold);
}
.museums-toc .thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-cream);
}
.museums-toc .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.museums-toc a:hover .thumb img { transform: scale(1.06); }
.museums-toc .meta {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  position: relative;
}
.museums-toc .n {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  color: var(--c-gold);
  text-transform: uppercase;
}
.museums-toc .name {
  font-family: var(--f-serif);
  font-size: 1.06rem;
  line-height: 1.2;
  color: var(--c-ink);
  font-weight: 500;
}
.museums-toc .hood {
  font-family: var(--f-sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11,12,14,0.55);
  margin-top: 4px;
}

/* ----- Museum card layout ----- */
.museum-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.museum-card--alt { grid-template-columns: 1fr 1.15fr; }
.museum-card--alt .museum-gallery { order: 2; }
.museum-card--alt .museum-body    { order: 1; }
@media (max-width: 980px) {
  .museum-card,
  .museum-card--alt { grid-template-columns: 1fr; gap: 2.5rem; }
  .museum-card--alt .museum-gallery { order: 1; }
  .museum-card--alt .museum-body    { order: 2; }
}

/* ----- Gallery: frame + slides + caption ----- */
.museum-gallery .frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #000;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.museum-gallery .frame .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out), transform 6s var(--ease-out);
  transform: scale(1.0);
}
.museum-gallery .frame .slide.is-active {
  opacity: 1;
  transform: scale(1.04);
  z-index: 1;
}
.museum-gallery .frame .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px 14px 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  color: #fff;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.3;
  z-index: 2;
  pointer-events: none;
}
.museum-gallery .frame .caption span { display: inline-block; }

/* ----- Gallery: thumbnail strip ----- */
.museum-gallery .thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.museum-gallery .thumbs .thumb {
  appearance: none;
  background: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  position: relative;
  opacity: 0.55;
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.museum-gallery .thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.museum-gallery .thumbs .thumb:hover { opacity: 0.9; }
.museum-gallery .thumbs .thumb.is-active {
  opacity: 1;
  border-color: var(--c-gold);
  transform: translateY(-1px);
}
.museum-gallery .thumbs .thumb.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.18);
  pointer-events: none;
}

/* ----- Body content ----- */
.museum-body { padding-top: 4px; }
.museum-body .museum-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-color: rgba(255,255,255,0.14);
}
.bg-bone .museum-body .museum-meta { border-color: rgba(11,12,14,0.12); }
@media (max-width: 560px) {
  .museum-body .museum-meta { grid-template-columns: 1fr; gap: 12px; }
}
.museum-body .museum-meta > div { display: flex; flex-direction: column; gap: 4px; }
.museum-body .museum-meta dt {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 500;
}
.museum-body .museum-meta dd {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 400;
}

.museum-take {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.6;
  margin-top: 1.5rem;
  padding-left: 16px;
  border-left: 2px solid var(--c-gold);
  max-width: 62ch;
  opacity: 0.92;
}
.museum-take strong {
  font-style: normal;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 500;
  margin-right: 6px;
}

.museum-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(255,255,255,0.16);
}
.bg-bone .museum-cta { border-top-color: rgba(11,12,14,0.16); }
.museum-cta .link-line { font-size: 0.94rem; }

/* ----- Themed routes ----- */
.museum-routes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.route-card {
  position: relative;
  padding: 28px 32px 32px 88px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.route-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(198,154,77,0.45);
}
.route-num {
  position: absolute;
  left: 24px;
  top: 26px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  font-family: var(--f-display);
  font-size: 1.3rem;
  border-radius: 50%;
}
.route-card h3 { margin: 0 0 10px 0; font-size: 1.5rem; }
.route-list {
  font-family: var(--f-serif);
  font-size: 1.02rem;
  line-height: 1.7;
  opacity: 0.92;
  margin: 0;
}
.route-list strong {
  font-family: var(--f-sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--c-gold);
  margin-right: 4px;
}
.route-note {
  margin-top: 10px;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
@media (max-width: 620px) {
  .route-card { padding: 24px 22px 24px 22px; }
  .route-num  { position: static; margin-bottom: 14px; }
}

/* ============================================================================
   EXPERIENCE DETAIL + BOOKING CARD
   ============================================================================ */
.experience-detail {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 980px) {
  .experience-detail { grid-template-columns: 1fr; }
}

.experience-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 1.5rem 0;
}
.experience-meta dt {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.35rem;
}
.experience-meta dd {
  font-family: var(--f-sans);
  font-size: 0.98rem;
  color: var(--c-bone);
  margin: 0;
}

.experience-includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 1.6rem;
}
@media (max-width: 620px) {
  .experience-includes { grid-template-columns: 1fr; }
}
.experience-includes li {
  position: relative;
  padding-left: 1.2rem;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--c-cream);
  opacity: 0.92;
}
.experience-includes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6rem;
  width: 6px; height: 6px;
  background: var(--c-gold);
  border-radius: 50%;
}

/* Sticky booking card */
.experience-detail__book {
  position: sticky;
  top: 110px;
}
@media (max-width: 980px) {
  .experience-detail__book { position: static; top: auto; }
}
.experience-book-card {
  background: var(--c-ink-2);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 1.8rem 1.7rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.experience-book-card__price {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--c-gold-soft);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 0.8rem;
}
.experience-book-card__draft {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-gold-soft);
  padding: 0.6rem 0.8rem;
  border-radius: 2px;
}
.experience-book-card__charged-in {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--c-cream);
  opacity: 0.7;
  margin-top: -0.3rem;
}
.experience-book-card__label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-bone);
  opacity: 0.85;
}
.experience-book-card__label input,
.experience-book-card__label textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  border-radius: 2px;
}
.experience-book-card__label input:focus,
.experience-book-card__label textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  background: rgba(255,255,255,0.07);
}
.experience-book-card__label textarea {
  resize: vertical;
  min-height: 70px;
}
.experience-book-card__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 0.9rem 0;
  margin-top: 0.4rem;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-bone);
}
.experience-book-card__total strong {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-gold-soft);
}
.experience-book-card__cta {
  width: 100%;
  justify-content: center;
}
.experience-book-card__cta:disabled {
  opacity: 0.6;
  cursor: progress;
}
.experience-book-card__finePrint {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--c-cream);
  opacity: 0.7;
  margin: 0;
}
.experience-book-card__error {
  font-family: var(--f-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #ffd2d2;
  background: rgba(140, 30, 30, 0.45);
  border: 1px solid rgba(255, 90, 90, 0.5);
  padding: 0.7rem 0.8rem;
  border-radius: 2px;
}

/* ---------- Floating WhatsApp button (every page) ---------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: 900;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(11, 12, 14, 0.28), 0 2px 6px rgba(11, 12, 14, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.wa-float svg { width: 30px; height: 30px; display: block; }
.wa-float svg path { fill: #fff; }
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  animation: wa-pulse 2.6s ease-out infinite;
}
.wa-float:hover {
  background: #1ebe5b;
  transform: scale(1.06);
  box-shadow: 0 12px 30px rgba(11, 12, 14, 0.34), 0 3px 8px rgba(11, 12, 14, 0.24);
}
.wa-float:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 600px) {
  .wa-float { width: 52px; height: 52px; }
  .wa-float svg { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float:hover { transition: none; transform: none; }
  .wa-float::after { animation: none; }
}
@media print { .wa-float { display: none; } }

/* ============================================================================
   VISA / GUIDE VISUAL KIT  (vg-*)
   Boxes, stat bands, comparison table, bar chart, callouts, checklist,
   timeline, cost box, resource grid, inline spec pills.
   Designed for dark sections by default; light-bg overrides at the bottom.
   ============================================================================ */

/* ---- Stat band ---- */
.vg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
}
.vg-stat {
  background: var(--c-ink-2);
  padding: clamp(1.5rem, 3.4vw, 2.4rem) 1.1rem;
  text-align: center;
}
.vg-stat .v {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 1.3rem + 1.9vw, 3.1rem);
  line-height: 1;
  color: var(--c-gold);
}
.vg-stat .l {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.82;
  line-height: 1.4;
}

/* ---- Comparison table ---- */
.vg-table-wrap {
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.vg-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: var(--f-sans);
}
.vg-table thead th {
  background: var(--c-ink-2);
  color: var(--c-gold);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: left;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.vg-table tbody td {
  padding: 1.05rem 1.15rem;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-cream);
  font-size: 0.9rem;
  line-height: 1.5;
  vertical-align: top;
}
.vg-table tbody tr:last-child td { border-bottom: 0; }
.vg-table tbody tr { transition: background 0.2s var(--ease); }
.vg-table tbody tr:hover td { background: rgba(198, 154, 77, 0.06); }
.vg-table .route {
  color: var(--c-bone);
  font-family: var(--f-display);
  font-size: 1.12rem;
  line-height: 1.1;
}
.vg-table .route small {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.85;
}
.vg-table .thresh { color: var(--c-gold-soft); font-weight: 600; white-space: nowrap; }
.vg-scroll-hint {
  display: none;
  margin-top: 0.7rem;
  font-family: var(--f-sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.7;
}
@media (max-width: 760px) { .vg-scroll-hint { display: block; } }

/* ---- Horizontal bar chart ---- */
.vg-bars { display: flex; flex-direction: column; gap: 1.25rem; }
.vg-bar .top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-sans);
}
.vg-bar .name { color: var(--c-bone); font-size: 0.88rem; letter-spacing: 0.02em; }
.vg-bar .name small { color: var(--c-cream); opacity: 0.6; letter-spacing: 0.04em; }
.vg-bar .amt { color: var(--c-gold-soft); font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.vg-bar .track {
  margin-top: 0.5rem;
  height: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}
.vg-bar .fill {
  height: 100%;
  width: var(--w, 0%);
  border-radius: 8px;
  background: linear-gradient(90deg, var(--c-rust), var(--c-gold));
  transition: width 1.1s var(--ease-out);
}
[data-reveal]:not(.is-revealed) .vg-bar .fill { width: 0; }

/* ---- Callout boxes ---- */
.vg-callout {
  display: flex;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  margin-top: 1.6rem;
  border: 1px solid var(--c-line);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.vg-callout .ico { flex: 0 0 auto; font-size: 1.25rem; line-height: 1.5; }
.vg-callout .body { font-family: var(--f-sans); font-size: 0.92rem; line-height: 1.65; color: var(--c-cream); }
.vg-callout .body strong { color: var(--c-bone); }
.vg-callout .ttl {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}
.vg-callout--key  { border-left-color: var(--c-gold); background: rgba(198, 154, 77, 0.08); }
.vg-callout--key  .ttl { color: var(--c-gold); }
.vg-callout--warn { border-left-color: #d4722e; background: rgba(177, 87, 29, 0.12); }
.vg-callout--warn .ttl { color: #e89a5e; }
.vg-callout--tip  { border-left-color: #5d9b6b; background: rgba(80, 140, 90, 0.12); }
.vg-callout--tip  .ttl { color: #8fc79c; }

/* ---- Checklist / numbered cards ---- */
.vg-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.9rem;
}
.vg-check {
  display: flex;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.vg-check .num {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 1rem;
  background: rgba(198, 154, 77, 0.16);
  color: var(--c-gold);
}
.vg-check .txt { font-family: var(--f-sans); font-size: 0.9rem; line-height: 1.6; color: var(--c-cream); }
.vg-check .txt strong { display: block; margin-bottom: 0.2rem; color: var(--c-bone); font-weight: 600; }
.vg-checklist--warn .vg-check .num { background: rgba(177, 87, 29, 0.18); color: #e89a5e; }

/* ---- Process timeline ---- */
.vg-timeline { display: flex; flex-wrap: wrap; gap: 1.5rem 1.2rem; }
.vg-tl-step { flex: 1 1 170px; min-width: 150px; position: relative; }
.vg-tl-step::after {
  content: "";
  position: absolute;
  top: 21px; left: 54px; right: -1.2rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(198, 154, 77, 0.6), rgba(198, 154, 77, 0.05));
}
.vg-tl-step:last-child::after { display: none; }
.vg-tl-step .dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  background: var(--c-bg-dark);
  color: var(--c-gold);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
  position: relative; z-index: 1;
}
.vg-tl-step .when {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
}
.vg-tl-step .what { font-family: var(--f-sans); font-size: 0.88rem; line-height: 1.55; color: var(--c-cream); margin-top: 0.35rem; }
.vg-tl-step .what strong { color: var(--c-bone); }
@media (max-width: 700px) {
  .vg-tl-step { flex: 1 1 100%; }
  .vg-tl-step::after { display: none; }
}

/* ---- Cost breakdown box ---- */
.vg-cost {
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
  max-width: 540px;
}
.vg-cost .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.3rem;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-sans);
  font-size: 0.92rem;
}
.vg-cost .row:last-child { border-bottom: 0; }
.vg-cost .row .k { color: var(--c-cream); }
.vg-cost .row .v { color: var(--c-gold-soft); font-weight: 600; white-space: nowrap; }
.vg-cost .row.total { background: rgba(198, 154, 77, 0.09); }
.vg-cost .row.total .k { color: var(--c-bone); font-weight: 600; }
.vg-cost .row.total .v { color: var(--c-gold); }

/* ---- Resource link grid ---- */
.vg-resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.9rem;
}
.vg-resource {
  display: block;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--c-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.vg-resource:hover {
  border-color: var(--c-gold);
  background: rgba(198, 154, 77, 0.07);
  transform: translateY(-2px);
}
.vg-resource .rk {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.5rem;
}
.vg-resource .rt {
  font-family: var(--f-display);
  font-size: 1.18rem;
  color: var(--c-bone);
  line-height: 1.1;
}
.vg-resource .rt .arr { color: var(--c-gold); transition: transform 0.25s var(--ease); display: inline-block; }
.vg-resource:hover .rt .arr { transform: translateX(4px); }
.vg-resource .rd { font-family: var(--f-sans); font-size: 0.8rem; line-height: 1.5; color: var(--c-cream); opacity: 0.72; margin-top: 0.45rem; }

/* ---- Inline spec pills ---- */
.vg-spec { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.vg-spec span {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  padding: 0.38rem 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: 100px;
  color: var(--c-cream);
}
.vg-spec span strong { color: var(--c-gold-soft); font-weight: 600; }

/* ---- Section figure caption helper (reused look) ---- */
.vg-figcap {
  margin-top: 0.75rem;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.vg-figcap .src { display: block; margin-top: 0.25rem; font-style: normal; font-size: 0.78rem; opacity: 0.7; }

/* ---- Full-bleed image band ---- */
.vg-band {
  position: relative;
  height: clamp(280px, 46vw, 520px);
  overflow: hidden;
}
.vg-band img { position: absolute; inset: 0; width: 100%; height: 110%; object-fit: cover; will-change: transform; }
.vg-band .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3.5rem clamp(1.5rem, 5vw, 4rem) 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(11, 12, 14, 0.85));
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
  color: var(--c-bone);
}
.vg-band .cap .src { display: block; margin-top: 0.3rem; font-family: var(--f-sans); font-style: normal; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }

/* ---- Light-section overrides (bg-bone / bg-sand) ---- */
.bg-bone .vg-stats, .bg-sand .vg-stats { background: var(--c-line-dark); border-color: var(--c-line-dark); }
.bg-bone .vg-stat, .bg-sand .vg-stat { background: #fff; }
.bg-bone .vg-stat .v, .bg-sand .vg-stat .v { color: var(--c-rust); }
.bg-bone .vg-stat .l, .bg-sand .vg-stat .l { color: var(--c-ink); opacity: 0.7; }

.bg-bone .vg-callout, .bg-sand .vg-callout { border-color: var(--c-line-dark); background: #fff; }
.bg-bone .vg-callout .body, .bg-sand .vg-callout .body { color: var(--c-ink); opacity: 0.9; }
.bg-bone .vg-callout .body strong, .bg-sand .vg-callout .body strong { color: var(--c-ink); }
.bg-bone .vg-callout--key, .bg-sand .vg-callout--key { background: rgba(198, 154, 77, 0.1); border-left-color: var(--c-gold); }
.bg-bone .vg-callout--key .ttl, .bg-sand .vg-callout--key .ttl { color: var(--c-rust); }
.bg-bone .vg-callout--warn, .bg-sand .vg-callout--warn { background: rgba(177, 87, 29, 0.08); border-left-color: var(--c-rust); }
.bg-bone .vg-callout--warn .ttl, .bg-sand .vg-callout--warn .ttl { color: var(--c-rust); }
.bg-bone .vg-callout--tip, .bg-sand .vg-callout--tip { background: rgba(80, 140, 90, 0.1); border-left-color: #4f8c5a; }
.bg-bone .vg-callout--tip .ttl, .bg-sand .vg-callout--tip .ttl { color: #3d7a48; }

.bg-bone .vg-tl-step .dot, .bg-sand .vg-tl-step .dot { background: var(--c-bone); }
.bg-bone .vg-tl-step .what, .bg-sand .vg-tl-step .what { color: var(--c-ink); opacity: 0.85; }
.bg-bone .vg-tl-step .what strong, .bg-sand .vg-tl-step .what strong { color: var(--c-ink); }
.bg-bone .vg-tl-step .when, .bg-sand .vg-tl-step .when { color: var(--c-rust); }

.bg-bone .vg-figcap, .bg-sand .vg-figcap { color: #5b6271; }

/* ============================================================================
   PRIVATE / OFF-MARKET — "watermark lock" treatment for discreet listings
   A blurred, darkened backdrop sits behind a centred ADV mark + padlock, the
   way agencies present inventory the owner won't let them photograph publicly.
   Works inside any position:relative; overflow:hidden card-art container.
   ============================================================================ */

/* --- Card / portfolio thumbnail fill --- */
.locked-fill {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  /* 2026-06-10 restyle: deeper + desaturated so locked cards read as
     intentional charcoal discretion, not a grey-green smear. */
  filter: blur(16px) brightness(0.28) saturate(0.35);
  transform: scale(1.18);          /* hide the blurred edges */
}
.locked-fill::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(115% 90% at 50% 38%,
              rgba(198,154,77,0.10), rgba(11,12,14,0.72) 78%);
}
.locked-badge {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.5rem; text-align: center; padding: 1rem;
  color: var(--c-bone);
}
.locked-badge .locked-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 999px;
  border: 1px solid var(--c-gold);
  background: rgba(11,12,14,0.34);
  color: var(--c-gold-soft);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.locked-badge .locked-lock svg { width: 1.32rem; height: 1.32rem; }
.locked-badge .locked-word {
  font-family: var(--f-italic); font-style: italic; font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1;
  color: var(--c-bone); letter-spacing: 0.01em;
}
.locked-badge .locked-note {
  font-family: var(--f-sans);
  font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-gold-soft); opacity: 0.92;
}
/* keep code tags painted above the lock fill */
.listing .img.is-locked .tag,
.portfolio-card-art.is-locked .portfolio-card-tag { z-index: 2; }
.listing .img .tag--private {
  left: auto; right: 1rem;
  background: var(--c-claret);
  color: var(--c-gold-soft);
  border: 1px solid var(--c-gold);
  letter-spacing: 0.22em;
}

/* --- Property hero, locked variant --- */
.property-hero.is-locked .bg-wrap img {
  filter: blur(24px) brightness(0.4) saturate(0.82);
  transform: scale(1.2);
}
/* Centre the whole hero so the watermark + listing identity stack cleanly */
.property-hero.is-locked .content {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; margin-inline: auto;
}
.property-hero.is-locked .content h1 { max-width: 24ch; }
.property-hero.is-locked .content .sub { margin-inline: auto; }
.property-hero.is-locked .hero-cta-row { justify-content: center; }
.property-hero .locked-hero-mark {
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 0.7rem; margin-bottom: 1.6rem;
}
.property-hero .locked-hero-mark .ring {
  width: 5rem; height: 5rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-gold);
  background: rgba(11,12,14,0.32);
  color: var(--c-gold-soft);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.property-hero .locked-hero-mark .ring svg { width: 2.1rem; height: 2.1rem; }
.property-hero .locked-hero-mark .word {
  font-family: var(--f-italic); font-style: italic; font-weight: 600;
  font-size: 1.3rem; line-height: 1;
  color: var(--c-gold-soft); letter-spacing: 0.04em;
}
.property-hero .locked-hero-mark .note {
  font-family: var(--f-sans); font-size: 0.62rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-gold-soft);
  opacity: 0.85;
}

/* --- Private-listing notice (replaces the gallery section) --- */
.locked-notice .locked-medallion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; border-radius: 999px;
  border: 1px solid var(--c-gold);
  background: rgba(198,154,77,0.08);
  color: var(--c-gold-soft);
}
.locked-notice .locked-medallion svg { width: 1.9rem; height: 1.9rem; }

/* ============================================================================
   /buy.html — shorter hero, professional filter bar, empty-state card
   ============================================================================ */

/* Hero — reduced 25% from prior (was 34/38vh -> now ~25/29vh) */
.page-hero--buy {
  min-height: 25vh;
}
@media (min-width: 900px) {
  .page-hero--buy { min-height: 29vh; }
}
.page-hero--buy .content {
  padding-bottom: clamp(1.1rem, 2.2vw, 1.8rem);
}
.page-hero--buy h1 {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4.2rem);
}
.page-hero--buy .sub {
  margin-top: 0.7rem;
  max-width: 62ch;
}

/* Buy-head: stacked CTA links to the right of the title block */
.buy-head__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}
@media (max-width: 640px) {
  .buy-head__links { align-items: flex-start; gap: 0.5rem; }
}

.section--buy-listings { padding-top: clamp(2.4rem, 5vw, 4rem); }

.buy-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

/* ----- Filter bar — understated, sits on the dark listings section ----- */
.buy-filter {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(198,154,77,0.20);
  border-radius: 14px;
  box-shadow: none;
  padding: 0;
  margin-bottom: clamp(1.6rem, 2.6vw, 2.2rem);
}
.buy-filter__row {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr 1.1fr 0.8fr 1.1fr auto;
  gap: 0;
  align-items: stretch;
  padding: 0;
}
.buy-filter__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  position: relative;
  padding: 1rem 1.4rem;
  cursor: pointer;
  transition: background 0.25s ease;
}
.buy-filter__field + .buy-filter__field {
  box-shadow: -1px 0 0 0 rgba(198,154,77,0.18);
}
.buy-filter__field:hover {
  background: rgba(255,255,255,0.03);
}
.buy-filter__field:focus-within {
  background: rgba(198,154,77,0.08);
  z-index: 2;
}
.buy-filter__field label {
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(198,154,77,0.85);
  opacity: 1;
  cursor: pointer;
}
.buy-filter__field input,
.buy-filter__field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: auto;
  min-height: 1.5rem;
  padding: 0;
  background: transparent;
  color: var(--c-bone);
  border: 0;
  border-radius: 0;
  font-family: var(--f-sans);
  font-size: 0.98rem;
  font-weight: 300;
  letter-spacing: 0.005em;
  box-shadow: none;
  transition: color 0.25s ease;
  cursor: pointer;
}
.buy-filter__field input::placeholder {
  color: rgba(250,246,238,0.40);
  font-weight: 300;
  font-style: normal;
}
.buy-filter__field input:focus,
.buy-filter__field select:focus {
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--c-bone);
}
.buy-filter__field select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(250,246,238,0.6) 50%),
    linear-gradient(135deg, rgba(250,246,238,0.6) 50%, transparent 50%);
  background-position: calc(100% - 6px) 60%, calc(100% - 1px) 60%;
  background-size: 5px 6px, 5px 6px;
  background-repeat: no-repeat;
  padding-right: 1.1rem;
}
.buy-filter__field:focus-within select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-gold) 50%),
    linear-gradient(135deg, var(--c-gold) 50%, transparent 50%);
}
.buy-filter__field select option {
  background: var(--c-bg-dark);
  color: var(--c-bone);
}
.buy-filter__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem 0.5rem 0.5rem;
}
.bf-reset {
  height: 44px;
  width: 44px;
  padding: 0;
  background: transparent;
  color: var(--c-bone);
  border: 1px solid rgba(198,154,77,0.4);
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 0;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.bf-reset::before,
.bf-reset::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 1.5px;
  background: var(--c-bone);
  border-radius: 1px;
}
.bf-reset::before { transform: rotate(45deg); }
.bf-reset::after  { transform: rotate(-45deg); }
.bf-reset:hover {
  border-color: var(--c-gold);
  background: rgba(198,154,77,0.12);
  transform: rotate(90deg);
}

/* Light-section variant — buy-listings now sits on white (see bg-bone),
   the filter bar was styled bone-on-transparent for a dark band. */
.bg-bone .buy-filter, .bg-sand .buy-filter {
  background: rgba(11,12,14,0.02);
  border-color: rgba(11,12,14,0.14);
}
.bg-bone .buy-filter__field + .buy-filter__field,
.bg-sand .buy-filter__field + .buy-filter__field { box-shadow: -1px 0 0 0 rgba(11,12,14,0.10); }
.bg-bone .buy-filter__field:hover, .bg-sand .buy-filter__field:hover { background: rgba(11,12,14,0.025); }
.bg-bone .buy-filter__field label, .bg-sand .buy-filter__field label { color: #7d5f20; }
.bg-bone .buy-filter__field input, .bg-sand .buy-filter__field input,
.bg-bone .buy-filter__field select, .bg-sand .buy-filter__field select { color: var(--c-ink); }
.bg-bone .buy-filter__field input::placeholder, .bg-sand .buy-filter__field input::placeholder { color: rgba(11,12,14,0.38); }
.bg-bone .buy-filter__field input:focus, .bg-sand .buy-filter__field input:focus,
.bg-bone .buy-filter__field select:focus, .bg-sand .buy-filter__field select:focus { color: var(--c-ink); }
.bg-bone .buy-filter__field select, .bg-sand .buy-filter__field select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(11,12,14,0.55) 50%),
    linear-gradient(135deg, rgba(11,12,14,0.55) 50%, transparent 50%);
}
.bg-bone .buy-filter__field select option, .bg-sand .buy-filter__field select option { background: #fff; color: var(--c-ink); }
.bg-bone .bf-reset, .bg-sand .bf-reset { color: var(--c-ink); border-color: rgba(11,12,14,0.22); }
.bg-bone .bf-reset::before, .bg-bone .bf-reset::after,
.bg-sand .bf-reset::before, .bg-sand .bf-reset::after { background: var(--c-ink); }

.buy-filter__meta {
  margin-top: 1rem;
  padding: 0 clamp(0.5rem, 1.5vw, 1.4rem);
  border-top: 0;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  color: rgba(250,246,238,0.75);
  opacity: 1;
}
.bf-count {
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-gold);
}
.bf-sep { opacity: 0.4; }
.bf-hint { font-weight: 300; opacity: 0.85; }

/* "Sort by" control — pushed to the right of the meta row */
.bf-sort {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.bf-sort__label {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(250,246,238,0.55);
}
.bf-sort select {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--c-gold);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(198,154,77,0.4);
  padding: 0.1rem 1.4rem 0.25rem 0.1rem;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-gold) 50%),
                    linear-gradient(135deg, var(--c-gold) 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 0.2s var(--ease);
}
.bf-sort select:focus { outline: none; border-bottom-color: var(--c-gold); }
.bf-sort select option { background: var(--c-bg-dark); color: var(--c-bone); }
.bg-bone .buy-filter__meta, .bg-sand .buy-filter__meta { color: rgba(11,12,14,0.68); }
.bg-bone .bf-sort__label, .bg-sand .bf-sort__label { color: rgba(11,12,14,0.5); }
.bg-bone .bf-sort select option, .bg-sand .bf-sort select option { background: #fff; color: var(--c-ink); }
@media (max-width: 640px) {
  .bf-sort { margin-left: 0; width: 100%; justify-content: space-between; }
}

@media (max-width: 1100px) {
  .buy-filter__row { grid-template-columns: 1fr 1fr 1fr; }
  .buy-filter__field + .buy-filter__field {
    box-shadow: -1px 0 0 0 rgba(198,154,77,0.18);
  }
  .buy-filter__actions { padding: 0.75rem 1rem; grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 640px) {
  .buy-filter__row { grid-template-columns: 1fr 1fr; }
  .buy-filter__field + .buy-filter__field {
    box-shadow: -1px 0 0 0 rgba(198,154,77,0.18);
  }
  .buy-filter__field:nth-child(2n+1) + .buy-filter__field { box-shadow: -1px 0 0 0 rgba(198,154,77,0.18); }
  .buy-filter__field:nth-child(odd) { box-shadow: 0 -1px 0 0 rgba(198,154,77,0.18); }
}

/* Card hidden state for client-side filtering */
.listing.buy-card.is-hidden { display: none !important; }

/* ============================================================================
   /buy cards — price-led, gallery-style hierarchy (inspired by the
   Oppenheim Group's listings): the price leads big at the top, then the
   neighborhood + property name, then a clean slash-separated
   beds / baths / m² line. Scoped to .buy-card so the home, buildings and
   sold grids keep their original neighborhood-first order.
   ============================================================================ */
.buy-card .body {
  padding: 1.5rem 1.6rem 1.7rem;
  gap: 0.3rem;
}
/* Price — the dominant element, lifted to the top of the card body */
.buy-card .body .price {
  margin: 0 0 0.2rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.15rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--c-bone);
}
/* Neighborhood reads as the locale line just under the price */
.buy-card .body .neighborhood {
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  margin-top: 0.15rem;
}
/* Property name — quieter than the price, like an address line */
.buy-card .body h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.34rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--c-cream);
  opacity: 0.92;
}
/* Beds / baths / m² as one clean slash-separated line */
.buy-card .specs {
  gap: 0;
  margin-top: 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  opacity: 0.7;
}
.buy-card .specs span + span::before {
  content: "/";
  padding: 0 0.6rem;
  opacity: 0.4;
}
.buy-card .card-facts { margin: 0.55rem 0 0; }
.buy-card .more { margin-top: 1.15rem; }
/* "For sale" status badge — gold pill over the image, top-right */
.listing .img .tag--sale { font-weight: 500; }

/* ----- Empty state ----- */
.buy-empty {
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
}
.buy-empty[hidden] { display: none; }
.buy-empty__card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--c-ink-2);
  border: 1px solid rgba(198,154,77,0.32);
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);
}
.buy-empty__card h3 {
  margin-top: 0.7rem;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem);
  line-height: 1.15;
  color: var(--c-bone);
}
.buy-empty__card p {
  margin-top: 0.7rem;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--c-cream);
  opacity: 0.92;
}
.buy-empty__actions {
  margin-top: 1.4rem;
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================================
   PROPERTY DETAIL v2 — broker bar + sticky dossier rail + scrolling reel
   Scoped with the .proplist- prefix to coexist with the legacy classes.
   ============================================================================ */
.proplist-broker {
  background: linear-gradient(180deg, #0b0c0e 0%, #14161a 100%);
  border-bottom: 1px solid rgba(198,154,77,0.22);
  position: relative;
  z-index: 2;
}
.proplist-broker__row {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.1rem 0;
  flex-wrap: wrap;
}
.proplist-broker__id {
  display: flex; align-items: center; gap: 0.9rem;
  text-decoration: none; color: inherit;
  margin-right: auto;
}
.proplist-broker__photo {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(198,154,77,0.55);
  box-shadow: 0 0 0 3px rgba(198,154,77,0.10);
  flex: 0 0 56px;
}
.proplist-broker__txt { display: flex; flex-direction: column; gap: 0.12rem; }
.proplist-broker__kicker {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.proplist-broker__name {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--c-bone);
}
.proplist-broker__cred {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(236,229,211,0.66);
}
.proplist-broker__cta { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.btn--sm {
  padding: 0.55rem 0.95rem !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
}
.proplist-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: rgba(198,154,77,0.10);
  overflow: hidden;
}
.proplist-progress > span {
  display: block; width: 100%; height: 100%;
  background: var(--c-gold);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.12s linear;
}

/* ---- Atelier layout: sticky rail + reel -------------------------------- */
.proplist-atelier {
  background: var(--c-bg-dark);
  color: var(--c-bone);
  padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
  position: relative;
}
.proplist-atelier::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(198,154,77,0.06), transparent 55%),
    radial-gradient(circle at 82% 90%, rgba(14, 22, 38, 0.6), transparent 55%);
  pointer-events: none;
}
.proplist-atelier__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(368px, 437px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: flex-start;
}
@media (max-width: 980px) {
  .proplist-atelier__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* LEFT RAIL */
.proplist-rail {
  position: sticky;
  top: 96px;
  align-self: flex-start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(198,154,77,0.35) transparent;
}
.proplist-rail::-webkit-scrollbar { width: 6px; }
.proplist-rail::-webkit-scrollbar-thumb { background: rgba(198,154,77,0.35); border-radius: 3px; }
@media (max-width: 980px) {
  .proplist-rail { position: static; max-height: none; overflow: visible; }
}
.proplist-rail__inner {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(198,154,77,0.18);
  border-radius: 2px;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.proplist-rail__code {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.proplist-rail__title {
  font-family: var(--f-display);
  font-size: clamp(1.55rem, 1.1rem + 1.2vw, 2.2rem);
  line-height: 1.08;
  margin: 0;
  color: var(--c-bone);
}
.proplist-rail__sub {
  font-family: var(--f-sans);
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(236,229,211,0.78);
  margin: 0;
}
.proplist-rail__price {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(198,154,77,0.18);
  border-bottom: 1px solid rgba(198,154,77,0.18);
}
.proplist-rail__price .lbl {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(236,229,211,0.55);
}
.proplist-rail__price .big {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.3rem + 1vw, 2.3rem);
  line-height: 1;
  color: var(--c-bone);
  margin-top: 0.25rem;
}
.proplist-rail__price .sub,
.proplist-rail__price .also {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236,229,211,0.58);
}
.proplist-rail__price .also { color: var(--c-gold-soft); margin-top: 0.25rem; }

.proplist-rail__specs {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}
.proplist-rail__specs li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  padding: 0.55rem 0.2rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(198,154,77,0.12);
}
.proplist-rail__specs b {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--c-bone);
  line-height: 1;
}
.proplist-rail__specs span {
  font-family: var(--f-sans);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236,229,211,0.55);
}

/* =========================================================================
   Top-facts panel — Price/m², Airbnb pill, Estimated ROI on the property rail
   ========================================================================= */
.proplist-rail__facts {
  display: flex; flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(198,154,77,0.18);
  border-bottom: 1px solid rgba(198,154,77,0.18);
  margin: 0;
}
.rail-fact {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--c-bone);
}
.rail-fact__k {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236,229,211,0.55);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.rail-fact__v {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--c-bone);
  white-space: nowrap;
}
.rail-fact__v--roi {
  color: var(--c-gold-soft);
}
.rail-fact__yr {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236,229,211,0.45);
  margin-left: 0.2rem;
}
.rail-fact--pill { grid-template-columns: 1fr auto; }
.rail-fact--roi  { position: relative; grid-template-columns: 1fr auto; }
.rail-fact--pill .airbnb-rule,
.rail-fact--roi  .roi-open-calc {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  color: rgba(236,229,211,0.55);
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
}
.roi-open-calc {
  color: var(--c-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(198,154,77,0.35);
  align-self: flex-start;
  padding-bottom: 0.15rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.roi-open-calc:hover {
  color: var(--c-gold-soft);
  border-bottom-color: var(--c-gold-soft);
}
.roi-open-calc .arr { transition: transform 0.2s var(--ease); display: inline-block; }
.roi-open-calc:hover .arr { transform: translateX(3px); }

/* Tiny asterisk button — keyboard focus + hover reveals the ROI tooltip. */
.roi-ast {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-gold);
  font-family: var(--f-sans);
  font-size: 0.78rem;
  line-height: 1;
  padding: 0 0.05rem;
  margin-left: 0.1rem;
  transform: translateY(-1px);
}
.roi-ast:focus { outline: 1px solid var(--c-gold); outline-offset: 2px; }

.roi-tip {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0; right: 0;
  z-index: 30;
  background: var(--c-ink-2);
  border: 1px solid rgba(198,154,77,0.35);
  padding: 0.7rem 0.85rem;
  font-family: var(--f-sans);
  font-size: 0.66rem;
  line-height: 1.5;
  color: rgba(236,229,211,0.78);
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.roi-tip strong { color: var(--c-gold-soft); font-weight: 500; }
.roi-tip a {
  color: var(--c-gold);
  text-decoration: underline;
  text-decoration-color: rgba(198,154,77,0.5);
  text-underline-offset: 2px;
}
.roi-tip a:hover { color: var(--c-gold-soft); }
.rail-fact--roi:hover .roi-tip,
.rail-fact--roi:focus-within .roi-tip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* =========================================================================
   Airbnb pill — three states (yes / restricted / no)
   ========================================================================= */
.airbnb-pill {
  display: inline-flex; align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  font-family: var(--f-sans);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
.airbnb-pill--sm {
  font-size: 0.54rem;
  padding: 0.18rem 0.45rem;
  letter-spacing: 0.14em;
}
/* 2026-06-10 restyle: green/red pills on cards read as a clash —
   neutral chips, semantics carried by the label text itself. */
.airbnb-pill--yes        { color: rgba(236,229,211,0.85); background: rgba(250,246,238,0.07); }
.airbnb-pill--restricted { color: var(--c-gold); background: rgba(198,154,77,0.10); }
.airbnb-pill--no         { color: rgba(236,229,211,0.6); background: rgba(250,246,238,0.05); }
.airbnb-rule {
  /* short prose under the pill on the property rail */
  font-style: normal;
}

/* =========================================================================
   Card-facts row — used on every .listing card (buy / building / property)
   ========================================================================= */
.card-facts {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
  margin: 0.55rem 0 0.4rem;
}
.card-fact {
  font-family: var(--f-sans);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(11,12,14,0.6);
  border: 1px solid rgba(11,12,14,0.14);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
.card-fact--ppm { color: rgba(11,12,14,0.78); }
.card-fact--roi { color: var(--c-gold); border-color: rgba(198,154,77,0.5); }

/* On dark-bg sections (bg-ink / bg-night) the card body is on dark — invert */
.bg-ink .card-fact, .bg-night .card-fact {
  color: rgba(236,229,211,0.72);
  border-color: rgba(236,229,211,0.18);
}
.bg-ink .card-fact--ppm, .bg-night .card-fact--ppm { color: var(--c-bone); }
.bg-ink .card-fact--roi, .bg-night .card-fact--roi { color: var(--c-gold-soft); }

/* Chapter tabs */
.proplist-rail__chapters {
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(198,154,77,0.18);
  padding-top: 0.4rem;
}
.proplist-chap {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(236,229,211,0.65);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.7rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.proplist-chap::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.5;
  transition: width 0.25s var(--ease), opacity 0.2s var(--ease);
}
.proplist-chap:hover { color: var(--c-gold-soft); }
.proplist-chap[aria-current="true"] {
  color: var(--c-gold);
  border-left-color: var(--c-gold);
  background: rgba(198,154,77,0.06);
}
.proplist-chap[aria-current="true"]::before { width: 28px; opacity: 1; }

.proplist-rail__cta {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding-top: 0.4rem;
}
.proplist-rail__btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* RIGHT REEL */
.proplist-reel {
  display: flex; flex-direction: column;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  min-width: 0;
}

/* Cover photo with title plate */
.proplist-cover {
  position: relative;
  overflow: hidden;
  background: var(--c-ink-2);
  border: 1px solid rgba(198,154,77,0.18);
}
.proplist-cover__photo {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.proplist-cover__photo picture,
.proplist-cover__photo img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.proplist-cover__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7,9,15,0.85) 100%);
  pointer-events: none;
}
.proplist-cover__locked img {
  filter: blur(28px) brightness(0.55) saturate(0.7);
  transform: scale(1.1);
}
.proplist-cover__lockmark {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem;
  color: var(--c-gold);
  text-align: center;
}
.proplist-cover__lockmark svg { width: 2rem; height: 2rem; }
.proplist-cover__lockmark span:not(:has(svg)) {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.proplist-cover__plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  color: var(--c-bone);
  z-index: 1;
}
.proplist-cover__plate .kicker {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.proplist-cover__plate .display {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.6rem);
  line-height: 1;
  margin: 0.45rem 0 0.4rem;
  color: var(--c-bone);
}
.proplist-cover__plate .it {
  font-family: var(--f-italic);
  color: var(--c-gold);
}
.proplist-cover__plate .sub {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236,229,211,0.72);
  margin: 0;
}

/* Editorial cards */
.proplist-card {
  background: linear-gradient(180deg, rgba(20,22,26,0.5), rgba(11,12,14,0.55));
  border: 1px solid rgba(198,154,77,0.18);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 0.8rem;
}
.proplist-card .kicker {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.proplist-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 1rem + 1vw, 2rem);
  line-height: 1.12;
  margin: 0;
  color: var(--c-bone);
}
.proplist-card h3 .it { font-family: var(--f-italic); color: var(--c-gold-soft); }
.proplist-card .prose {
  font-family: var(--f-sans);
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(236,229,211,0.88);
  margin: 0;
}
.proplist-card--private { background: linear-gradient(180deg, rgba(58,15,23,0.50), rgba(11,12,14,0.55)); }
.proplist-card__cta {
  display: flex; gap: 0.65rem; flex-wrap: wrap;
  margin-top: 0.6rem;
}

/* Interspersed photo */
.proplist-photo {
  margin: 0;
  overflow: hidden;
  background: var(--c-ink-2);
  border: 1px solid rgba(198,154,77,0.14);
}
.proplist-photo picture,
.proplist-photo img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/10;
}
.proplist-photo--tall picture,
.proplist-photo--tall img { aspect-ratio: 4/5; }
@media (max-width: 720px) {
  .proplist-photo--tall picture,
  .proplist-photo--tall img { aspect-ratio: 4/5; }
}

/* Features panel */
.proplist-features {
  background: linear-gradient(180deg, #14161a, #0b0c0e);
  border: 1px solid rgba(198,154,77,0.22);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: start;
}
@media (max-width: 720px) {
  .proplist-features { grid-template-columns: 1fr; }
}
.proplist-features__head .kicker {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.proplist-features__head h3 {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 1rem + 1vw, 2rem);
  line-height: 1.1;
  margin: 0.5rem 0 0;
  color: var(--c-bone);
}
.proplist-features__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.2rem;
}
@media (max-width: 560px) {
  .proplist-features__list { grid-template-columns: 1fr; }
}
.proplist-features__list li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-family: var(--f-sans);
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(236,229,211,0.9);
  padding: 0.55rem 0;
  border-top: 1px solid rgba(198,154,77,0.12);
}
.proplist-features__list .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-gold);
  margin-top: 0.45rem;
  flex: 0 0 6px;
}

/* Gallery wall */
.proplist-wall { display: flex; flex-direction: column; gap: 1.4rem; }
.proplist-wall__head .kicker {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.proplist-wall__head h3 {
  font-family: var(--f-display);
  font-size: clamp(1.55rem, 1.1rem + 1.2vw, 2.2rem);
  margin: 0.4rem 0 0.45rem;
  color: var(--c-bone);
}
.proplist-wall__head h3 .it { font-family: var(--f-italic); color: var(--c-gold); }
.proplist-wall__head .prose {
  font-family: var(--f-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(236,229,211,0.75);
  margin: 0;
  max-width: 60ch;
}
.proplist-wall__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
@media (max-width: 720px) { .proplist-wall__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .proplist-wall__grid { grid-template-columns: 1fr; } }
.proplist-wall__item {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--c-ink-2);
  aspect-ratio: 4/3;
  border: 1px solid rgba(198,154,77,0.10);
}
.proplist-wall__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}
.proplist-wall__item:hover img { transform: scale(1.04); }

/* =========================================================================
   Top-of-page property gallery (lead mosaic) + full-screen lightbox
   ========================================================================= */
.proplist-gallery {
  background: var(--c-bg-dark);
  padding: clamp(1.2rem, 2.5vw, 2.2rem) 0 0;
  position: relative;
}
.proplist-gallery__mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.5rem;
  aspect-ratio: 16 / 7.4;
}
.pg-cell {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: var(--c-ink-2);
  border: 1px solid rgba(198,154,77,0.10);
  color: var(--c-bone);
}
.pg-cell--lead { grid-column: 1 / 3; grid-row: 1 / 3; }
.pg-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.pg-cell:hover img { transform: scale(1.05); }
.pg-cell:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -2px; }
.pg-cell__plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2; pointer-events: none;
  padding: clamp(1rem, 2.4vw, 1.9rem);
  text-align: left;
  display: flex; flex-direction: column; gap: 0.28rem;
  background: linear-gradient(180deg, transparent, rgba(7,9,15,0.82));
}
.pg-cell__plate .kicker {
  font-family: var(--f-sans);
  font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--c-gold);
}
.pg-cell__plate .display {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1.05rem + 1.7vw, 2.9rem);
  line-height: 1.02;
  color: var(--c-bone);
}
.pg-cell__plate .sub {
  font-family: var(--f-sans);
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(236,229,211,0.74);
}
.pg-cell__more {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem;
  background: rgba(7,9,15,0.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background 0.3s var(--ease);
}
.pg-cell:hover .pg-cell__more { background: rgba(7,9,15,0.62); }
.pg-cell__more b { font-family: var(--f-display); font-size: 1.7rem; line-height: 1; }
.pg-cell__more span {
  font-family: var(--f-sans);
  font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(236,229,211,0.85);
}
.proplist-gallery__bar {
  display: flex; justify-content: flex-end;
  padding: 0.85rem 0 0;
}
.pg-viewall {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-sans);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-bone);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(198,154,77,0.3);
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pg-viewall:hover { background: rgba(198,154,77,0.14); border-color: rgba(198,154,77,0.55); }
.pg-viewall svg { width: 17px; height: 17px; color: var(--c-gold); }
@media (max-width: 720px) {
  .proplist-gallery__mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    aspect-ratio: auto;
  }
  .pg-cell--lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .pg-cell:not(.pg-cell--lead) { aspect-ratio: 1 / 1; }
}

/* Lightbox */
.pg-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,12,0.95);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.pg-lightbox[hidden] { display: none; }
.pg-lightbox.is-open { opacity: 1; }
.pg-lb__stage {
  margin: 0;
  max-width: min(92vw, 1500px);
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
}
.pg-lb__img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  background: var(--c-ink-2);
}
.pg-lb__cap {
  display: flex; align-items: baseline; gap: 1.3rem;
  font-family: var(--f-sans);
  font-size: 0.76rem; letter-spacing: 0.06em;
  color: rgba(236,229,211,0.78);
  max-width: 92vw;
}
.pg-lb__count { white-space: nowrap; letter-spacing: 0.18em; }
.pg-lb__count b { color: var(--c-gold); }
.pg-lb__close {
  position: absolute; top: clamp(0.8rem, 2vw, 1.4rem); right: clamp(0.8rem, 2vw, 1.6rem);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(198,154,77,0.28);
  border-radius: 50%;
  color: var(--c-bone);
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.pg-lb__close:hover { background: rgba(198,154,77,0.2); }
.pg-lb__close svg { width: 18px; height: 18px; }
.pg-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(198,154,77,0.28);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pg-lb__nav:hover { background: rgba(198,154,77,0.2); border-color: rgba(198,154,77,0.6); }
.pg-lb__prev { left: clamp(0.6rem, 3vw, 2.4rem); }
.pg-lb__next { right: clamp(0.6rem, 3vw, 2.4rem); }
/* Triangular arrows */
.pg-tri { display: block; width: 0; height: 0; }
.pg-tri--left {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 14px solid var(--c-gold);
  margin-right: 4px;
}
.pg-tri--right {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 14px solid var(--c-gold);
  margin-left: 4px;
}
@media (max-width: 560px) {
  .pg-lb__nav { width: 46px; height: 46px; }
  .pg-lb__img { max-height: 74vh; }
}

/* Bottom enquire — broker re-introduced */
.proplist-enquire {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: linear-gradient(135deg, #14161a 0%, #0b0c0e 100%);
  border: 1px solid rgba(198,154,77,0.28);
}
@media (max-width: 780px) {
  .proplist-enquire { grid-template-columns: 1fr; }
}
.proplist-enquire__broker {
  display: flex; align-items: flex-start; gap: 1.1rem;
}
.proplist-enquire__broker img {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(198,154,77,0.55);
  box-shadow: 0 0 0 3px rgba(198,154,77,0.10);
  flex: 0 0 84px;
}
.proplist-enquire__broker .kicker {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.proplist-enquire__broker h3 {
  font-family: var(--f-display);
  font-size: clamp(1.55rem, 1.1rem + 1vw, 2.1rem);
  line-height: 1.1;
  margin: 0.45rem 0 0.55rem;
  color: var(--c-bone);
}
.proplist-enquire__broker h3 .it { font-family: var(--f-italic); color: var(--c-gold); }
.proplist-enquire__broker .prose {
  font-family: var(--f-sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(236,229,211,0.85);
  margin: 0;
}
.proplist-enquire__cta {
  display: flex; flex-direction: column; gap: 0.6rem;
  min-width: 220px;
}
@media (max-width: 780px) {
  .proplist-enquire__cta { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}
.proplist-enquire__cta .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ============================================================================
   HOMEPAGE — alternating light/dark sections (relevance.digital rhythm)
   Scoped to .page-home so other pages keep their dark-only look.
   ============================================================================ */

/* ============================================================================
   Premium for-sale cards on the light (bone/sand) homepage sections —
   editorial, price-led hierarchy inspired by the Oppenheim Group: cinematic
   image, hairline divider, the price as the anchor, quiet spec line.
   ============================================================================ */
.bg-bone .listing,
.bg-sand .listing {
  background: #fff;
  color: var(--c-ink);
  border-radius: 12px;   /* soft, Airbnb-style rounded card */
  box-shadow: 0 1px 2px rgba(11,12,14,0.04), 0 24px 50px -34px rgba(11,12,14,0.40);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.bg-bone .listing:hover,
.bg-sand .listing:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(11,12,14,0.05), 0 42px 72px -34px rgba(11,12,14,0.52);
}

/* Cinematic 3:2 image with a soft depth wash on hover */
.bg-bone .listing .img,
.bg-sand .listing .img { aspect-ratio: 3 / 2; }
.bg-bone .listing .img::after,
.bg-sand .listing .img::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(11,12,14,0.30), rgba(11,12,14,0) 42%);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.bg-bone .listing:hover .img::after,
.bg-sand .listing:hover .img::after { opacity: 1; }

/* Body: generous breathing room, reordered to price-led */
.bg-bone .listing .body,
.bg-sand .listing .body {
  padding: 1.75rem 1.75rem 1.85rem;
  gap: 0;
}
.bg-bone .listing .neighborhood,
.bg-sand .listing .neighborhood {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  color: #7d5f20;   /* gold, darkened to pass WCAG AA on white (2026-07-05) */
}
.bg-bone .listing h3,
.bg-sand .listing h3 {
  margin-top: 0.55rem;
  font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.08;
  letter-spacing: 0.002em;
  color: var(--c-ink);
}
/* Price — the anchor, lifted above the spec line with a hairline divider */
.bg-bone .listing .price,
.bg-sand .listing .price {
  order: 2;
  margin-top: 1.05rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(11,12,14,0.10);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem);
  line-height: 1;
  letter-spacing: 0.004em;
  color: var(--c-ink);
}
/* Specs — quiet, middot-separated, sit just under the price */
.bg-bone .listing .specs,
.bg-sand .listing .specs {
  order: 3;
  margin-top: 0.6rem;
  gap: 0;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--c-ink);
  opacity: 0.6;
}
.bg-bone .listing .specs span + span::before,
.bg-sand .listing .specs span + span::before {
  content: "·";
  padding: 0 0.55rem;
  opacity: 0.6;
}
/* "View property →" — refined link, underline warms on hover */
.bg-bone .listing .more,
.bg-sand .listing .more {
  order: 4;
  margin-top: 1.25rem;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: var(--c-ink);
  border-bottom: 1px solid rgba(198,154,77,0.45);
  transition: border-color 0.4s var(--ease);
}
.bg-bone .listing:hover .more,
.bg-sand .listing:hover .more {
  border-bottom-color: var(--c-gold);
}

/* Experience cards inherit the dark-section hover treatment — neutralize it
   on light sections: card stays white, hover accent goes burgundy (the
   sanctioned 20% accent) instead of pale gold. */
.bg-bone .listing.experience-card:hover,
.bg-sand .listing.experience-card:hover {
  background: #fff;
  box-shadow: 0 2px 4px rgba(11,12,14,0.05), 0 42px 72px -34px rgba(11,12,14,0.52);
}
.bg-bone .listing.experience-card:hover h3,
.bg-sand .listing.experience-card:hover h3,
.bg-bone .listing.experience-card:hover .more,
.bg-sand .listing.experience-card:hover .more {
  color: var(--c-burg-soft);
}
.bg-bone .listing.experience-card .experience-card__summary,
.bg-sand .listing.experience-card .experience-card__summary {
  color: var(--c-ink);
  opacity: 0.72;
}

/* Review card flips to paper */
.bg-bone .review-card,
.bg-sand .review-card {
  background: #fff;
  border-color: rgba(11,12,14,0.10);
  box-shadow: 0 1px 0 rgba(11,12,14,0.05), 0 18px 40px -30px rgba(11,12,14,0.18);
}
.bg-bone .review-card .quote,
.bg-sand .review-card .quote {
  color: var(--c-ink);
}
.bg-bone .review-card .name,
.bg-sand .review-card .name {
  color: var(--c-ink);
}
.bg-bone .review-card .when,
.bg-sand .review-card .when {
  color: rgba(11,12,14,0.55);
}
.bg-bone .review-card .g-mark,
.bg-sand .review-card .g-mark {
  color: rgba(11,12,14,0.45);
}

/* Outline button flips: dark ink instead of bone text */
.page-home .bg-bone .btn:not(.gold):not(.ghost-dark),
.page-home .bg-sand .btn:not(.gold):not(.ghost-dark) {
  color: var(--c-ink);
}
.page-home .bg-bone .btn:not(.gold):not(.ghost-dark):hover,
.page-home .bg-sand .btn:not(.gold):not(.ghost-dark):hover {
  background: var(--c-bg-dark);
  color: var(--c-bone);
}

/* link-line inherits color from parent, but its hover-gold needs darker
   warmth on bone so it doesn't go pale */
.page-home .bg-bone .link-line:hover,
.page-home .bg-sand .link-line:hover {
  color: var(--c-rust);
}

/* Prose + lead on light surfaces — drop the dark-bg opacity wash */
.page-home .bg-bone .prose,
.page-home .bg-sand .prose,
.page-home .bg-bone .lead,
.page-home .bg-sand .lead {
  color: var(--c-ink);
  opacity: 0.86;
}

/* Story-figure scrim was tuned for dark sections — soften to white wash */
.page-home .bg-bone .story .figure .grad,
.page-home .bg-sand .story .figure .grad {
  background: linear-gradient(180deg, transparent 55%, rgba(255,255,255,0.55) 100%);
}

/* Chapter-split on bone: sticky image gets a soft cream tint, beats get ink type */
.page-home .bg-bone.chapter-split,
.page-home .bg-sand.chapter-split {
  color: var(--c-ink);
}

/* The grain texture was carved for dark sections only; the ::after rule
   already excludes bg-bone/bg-sand, so light sections render clean. */

/* Tile grid separator lines invert on light bg */
.page-home .bg-bone .tile-grid,
.page-home .bg-sand .tile-grid {
  background: var(--c-line-dark);
}

/* =====================================================================
   HOME — extra parallax targets (hero video, service tiles, guide tiles,
   experience reel). The GSAP parallax in main.js translates the element
   by yPercent ±(strength*50). To keep the container's edges covered as
   the image translates, the img is sized 120% tall with -10% inset.
   Native CSS `transition: transform` on these elements would fight the
   per-frame GSAP transform, so it is reset here.
   ===================================================================== */
.page-home .hero .bg-wrap { overflow: hidden; }
.page-home .hero video[data-parallax] {
  height: 124%;
  top: -12%; bottom: -12%; left: 0; right: 0;
  will-change: transform;
}

.page-home .service .bg img[data-parallax],
.page-home .tile img[data-parallax],
.page-home .hscroll-item img[data-parallax] {
  position: absolute;
  top: -10%; left: 0; right: 0; bottom: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  transition: none;
  will-change: transform;
}

.page-home .service:hover .bg img[data-parallax],
.page-home .tile:hover img[data-parallax],
.page-home .hscroll-item:hover img[data-parallax] {
  transform: none;
}

/* ============================================================================
   ABOUT > MEDIA & PRESS
   Release card, press-kit grid, quick-facts table.
   ============================================================================ */

/* ---- Single press release "tear-sheet" card ---- */
.press-release {
  background: var(--c-ink-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: clamp(1.75rem, 3vw, 3rem);
  max-width: 880px;
  margin-inline: auto;
  position: relative;
}
.press-release::before {
  content: "";
  position: absolute;
  top: 0; left: clamp(1.75rem, 3vw, 3rem); right: clamp(1.75rem, 3vw, 3rem);
  height: 3px;
  background: var(--c-gold);
  border-radius: 0 0 2px 2px;
}

.press-release__head { margin-bottom: 2rem; }
.press-release__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.25rem;
}
.press-release__tag {
  color: var(--c-gold);
  font-weight: 600;
}
.press-release__dot { opacity: 0.4; }
.press-release__meta time { color: var(--c-bone); }

.press-release__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.18;
  margin: 0 0 1rem;
  color: var(--c-bone);
  letter-spacing: -0.005em;
}
.press-release__deck {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-width: 64ch;
}

.press-release__body { color: var(--c-bone); }
.press-release__body p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.1rem;
  color: rgba(255,255,255,0.86);
}
.press-release__body p strong { color: var(--c-bone); }

.press-release__sub {
  margin: 2rem 0 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 600;
}

.press-release__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.85rem;
}
.press-release__list li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
}
.press-release__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 1px;
  background: var(--c-gold);
}
.press-release__list li strong { color: var(--c-bone); }

.press-release__quote {
  border-left: 2px solid var(--c-gold);
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
}
.press-release__quote p {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  margin: 0 0 0.75rem;
  color: var(--c-bone);
}
.press-release__quote cite {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
}

.press-release__contact {
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--c-gold);
  padding: 1rem 1.25rem;
  border-radius: 0 4px 4px 0;
  margin: 0 0 1.5rem;
  line-height: 1.7;
}

.press-release__end {
  text-align: center;
  color: var(--c-gold);
  letter-spacing: 0.5em;
  font-size: 1.1rem;
  margin-top: 2rem;
  opacity: 0.55;
}

/* ---- Press-kit grid ---- */
.press-kit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}
@media (max-width: 1000px) { .press-kit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .press-kit-grid { grid-template-columns: 1fr; } }

.press-kit-card {
  background: var(--c-ink-2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: clamp(1.5rem, 2vw, 2rem);
}
.press-kit-card .num {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--c-gold);
  margin-bottom: 0.75rem;
}
.press-kit-card h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 0.6rem;
  color: var(--c-bone);
}
.press-kit-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

/* ---- Quick-facts table ---- */
.press-facts {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.press-fact {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) 2fr;
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: baseline;
}
@media (max-width: 640px) {
  .press-fact {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 1.1rem 0;
  }
}
.press-fact__k {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.press-fact__v {
  color: var(--c-bone);
  font-size: 1rem;
  line-height: 1.55;
}
.press-fact__v a { color: var(--c-bone); }

/* ============================================================================
   REEL STRIP — Instagram-mirrored portrait video tiles + click-to-expand modal
   Used on home.html ("From our Rio") and about.html ("Charlie in Rio").
   Single-reel inline variant used inside property dossiers.
   ============================================================================ */

.reel-strip__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.reel-strip__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .reel-strip__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .reel-strip__row { grid-template-columns: 1fr; }
}

/* About-page variant: 6 tiles in a horizontal scroll */
#about-reels .reel-strip__row {
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--c-gold) transparent;
  padding-bottom: 0.5rem;
}
#about-reels .reel-tile { scroll-snap-align: start; }
@media (max-width: 900px) {
  #about-reels .reel-strip__row {
    grid-template-columns: repeat(6, 70vw);
  }
}

.reel-tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--c-ink-2);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  text-align: left;
  color: var(--c-bone);
  font-family: var(--f-sans);
}
.reel-tile:hover,
.reel-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.5);
  outline: none;
}
.reel-tile:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}
.reel-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.reel-tile:hover img { transform: scale(1.04); }

.reel-tile__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 55%);
  z-index: 1;
  pointer-events: none;
}

.reel-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-bone);
  z-index: 2;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out);
  pointer-events: none;
}
.reel-tile__play svg { width: 28px; height: 28px; transform: translateX(2px); }
.reel-tile:hover .reel-tile__play {
  transform: scale(1.08);
  background: var(--c-gold);
  color: var(--c-ink);
}

.reel-tile__chip {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.88rem;
  color: var(--c-bone);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
  line-height: 1.3;
}

/* ----- Modal ----- */
.reel-modal {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--c-bone);
  max-width: min(420px, 92vw);
  width: min(420px, 92vw);
  max-height: 92vh;
}
.reel-modal::backdrop {
  background: rgba(5, 8, 12, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Fallback for browsers without native <dialog> */
.reel-modal[open],
.reel-modal.reel-modal--fallback {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.reel-modal.reel-modal--fallback {
  background: rgba(5, 8, 12, 0.96);
  padding: 1rem;
}

.reel-modal__close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: var(--c-bone);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.reel-modal__close:hover { background: var(--c-gold); color: var(--c-bg-dark); }
.reel-modal__close svg { width: 22px; height: 22px; }

.reel-modal__frame {
  aspect-ratio: 9 / 16;
  max-height: 78vh;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.reel-modal__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-modal__caption {
  margin-top: 1rem;
  text-align: center;
  padding: 0 0.25rem;
}
.reel-modal__copy {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.85rem 0;
  color: var(--c-bone);
}
.reel-modal__ig {
  font-family: var(--f-sans);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 2px;
}
.reel-modal__ig:hover { color: var(--c-gold-soft); border-color: var(--c-gold-soft); }

/* ----- Inline single-reel (property detail dossier) ----- */
.proplist-reel-inline { padding-block: 2rem; }
.reel-inline {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 1.75rem;
  align-items: start;
  margin-top: 1.25rem;
}
@media (max-width: 720px) {
  .reel-inline { grid-template-columns: 1fr; }
}
.reel-inline__player {
  aspect-ratio: 9 / 16;
  background: var(--c-bg-dark);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}
.reel-inline__player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reel-inline__copy {
  padding-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/* === Building history: historic photos interleaved through the text === */
.history-flow{ max-width: 78ch; }
.history-flow::after{ content:""; display:block; clear:both; }   /* contain floats */
.history-flow .prose{ margin-top: 1.4rem; }

/* Floated figures the body text wraps around; alternate sides. */
.history-inline{
  margin: 0.4rem 0 1.4rem;
  width: clamp(280px, 42%, 460px);
}
.history-inline picture{ display:block; }
.history-inline img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 4px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  filter: saturate(0.96) contrast(1.02);
}
/* clear:both so each photo starts below the previous float — prevents an
   opposing-float collision pinching a paragraph into a narrow gutter. Text
   still wraps the side of each individual image. */
.history-inline.is-right{ float: right; clear: both; margin-left: clamp(1.5rem, 3vw, 2.6rem); }
.history-inline.is-left { float: left;  clear: both; margin-right: clamp(1.5rem, 3vw, 2.6rem); }
.history-figcaption{
  margin-top: 0.7rem;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
  line-height: 1.4;
}
/* On narrow screens, stop floating — full-width stacked images. */
@media (max-width: 720px){
  .history-flow{ max-width: 100%; }
  .history-inline,
  .history-inline.is-right,
  .history-inline.is-left{
    float: none;
    width: 100%;
    margin: 1.6rem 0;
  }
}

/* __ADV_BLDG_GALLERY_CSS__ */
.bldg-gallery{display:grid;gap:1rem}
.bldg-shot{position:relative;margin:0;overflow:hidden;border-radius:14px;background:#0d0b08;border:1px solid rgba(212,175,116,.12)}
.bldg-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.bldg-shot:hover img{transform:scale(1.05)}
.bldg-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.1rem .85rem;font-size:.76rem;line-height:1.4;color:#f5f0e8;background:linear-gradient(to top,rgba(13,11,8,.9),rgba(13,11,8,0));opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.bldg-shot:hover figcaption{opacity:1;transform:none}
.bldg-gallery--1{grid-template-columns:1fr}.bldg-gallery--1 .bldg-shot{aspect-ratio:21/9}
.bldg-gallery--2{grid-template-columns:1fr 1fr}.bldg-gallery--2 .bldg-shot{aspect-ratio:4/3}
.bldg-gallery--3{grid-template-columns:1fr 1fr}.bldg-gallery--3 .bldg-shot{aspect-ratio:4/3}
.bldg-gallery--3 .bldg-shot:nth-child(1){grid-column:1 / -1;aspect-ratio:21/9}
.bldg-gallery--4{grid-template-columns:1fr 1fr}.bldg-gallery--4 .bldg-shot{aspect-ratio:4/3}
.bldg-gallery--many{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.bldg-gallery--many .bldg-shot{aspect-ratio:4/3}
@media(max-width:720px){.bldg-gallery--2,.bldg-gallery--3,.bldg-gallery--4{grid-template-columns:1fr}.bldg-gallery .bldg-shot{aspect-ratio:4/3}.bldg-gallery--3 .bldg-shot:nth-child(1){aspect-ratio:16/9}.bldg-shot figcaption{opacity:1;transform:none;padding-top:1.6rem}}

/* =========================================================================
   PD — Airbnb-format property page (2026-06-12).
   Title above the photos, 1+4 mosaic, two-column body with a sticky
   price/booking card. Light surface (the 40% white), black type, gold
   eyebrows, burgundy reserved for the enquire band + price accents.
   ========================================================================= */
.pd-head {
  background: var(--c-bone);
  padding: calc(var(--header-h) + clamp(1.6rem, 3vw, 2.6rem)) 0 clamp(1.1rem, 2vw, 1.6rem);
}
.pd-crumbs {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-sans);
  font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(11,12,14,0.5);
  margin-bottom: clamp(0.9rem, 2vw, 1.4rem);
}
.pd-crumbs a { transition: color 0.2s var(--ease); }
.pd-crumbs a:hover { color: var(--c-rust); }
.pd-crumbs [aria-current] { color: rgba(11,12,14,0.78); }
.pd-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--c-ink);
  margin: 0 0 0.8rem;
}
.pd-subrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap;
}
.pd-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  color: rgba(11,12,14,0.72);
}
.pd-dot { opacity: 0.45; }
.pd-loc {
  color: var(--c-ink);
  border-bottom: 1px solid rgba(11,12,14,0.28);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
a.pd-loc:hover { color: var(--c-rust); border-color: var(--c-rust); }
.pd-code {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-rust);
}
.pd-action-link {
  font-family: var(--f-sans);
  font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--c-ink);
  border-bottom: 1px solid rgba(11,12,14,0.3);
  padding-bottom: 0.15rem;
  white-space: nowrap;
}
.pd-action-link:hover { color: var(--c-rust); border-color: var(--c-rust); }
.pd-action-link .arr { display: inline-block; transition: transform 0.3s var(--ease); }
.pd-action-link:hover .arr { transform: translateX(4px); }

/* ---- Gallery mosaic ---- */
.pd-gallery { background: var(--c-bone); }
.pd-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.5rem;
  aspect-ratio: 16 / 7.4;
  border-radius: 18px;
  overflow: hidden;
}
.pd-mosaic .pg-cell { border: 0; background: var(--c-cream); }
.pd-viewall {
  position: absolute;
  right: clamp(0.7rem, 1.6vw, 1.2rem);
  bottom: clamp(0.7rem, 1.6vw, 1.2rem);
  z-index: 4;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-sans);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-ink);
  background: rgba(250,246,238,0.94);
  border: 1px solid rgba(11,12,14,0.35);
  border-radius: 10px;
  padding: 0.62rem 1.05rem;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.pd-viewall:hover { background: #ffffff; }
.pd-viewall svg { width: 15px; height: 15px; color: var(--c-rust); }

.pd-gallery--locked .pd-locked {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: 18px;
  overflow: hidden;
  background: var(--c-ink-2);
}
.pd-gallery--locked .pd-locked img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(26px) brightness(0.5) saturate(0.85);
  transform: scale(1.12);
}
.pd-locked__mark {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem;
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  text-align: center; padding: 0 1.4rem;
}
.pd-locked__mark svg { width: 30px; height: 30px; color: var(--c-gold); }

/* ---- Body grid ---- */
.pd-body {
  background: var(--c-bone);
  padding: clamp(2.2rem, 4.5vw, 3.6rem) 0 clamp(4rem, 7vw, 6rem);
}
.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(330px, 27vw, 400px);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.pd-main { display: flex; flex-direction: column; gap: clamp(2rem, 3.6vw, 3rem); }
.pd-block { border-top: 1px solid var(--c-line-dark); padding-top: clamp(1.8rem, 3.2vw, 2.6rem); }
.pd-main > .pd-block:first-child { border-top: 0; padding-top: 0; }
.pd-block .kicker {
  font-family: var(--f-sans);
  font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--c-rust);
}
.pd-h {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.05rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--c-ink);
  margin: 0.55rem 0 0.9rem;
}
.pd-main .prose { color: var(--c-ink); opacity: 0.88; max-width: 64ch; }
.pd-photo {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}
.pd-photo img { width: 100%; height: auto; }

.pd-features__list {
  list-style: none;
  margin: 0.4rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 2.2rem;
}
.pd-features__list li {
  display: flex; align-items: baseline; gap: 0.65rem;
  font-size: 0.96rem;
  color: rgba(11,12,14,0.85);
}
.pd-features__list .dot {
  flex: 0 0 6px; width: 6px; height: 6px;
  background: var(--c-rust);
  border-radius: 50%;
  transform: translateY(-2px);
}

/* ---- Quick-facts stat cards (left menu) — mirrors the booking-engine spec
   strip, restyled in ink/bronze on a white card instead of the teal theme. ---- */
.pd-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 0.5rem;
}
.pd-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0.16rem; text-align: center;
  padding: 0.82rem 0.5rem 0.7rem;
  background: #ffffff;
  border: 1px solid var(--c-line-dark);
  border-radius: 13px;
}
.pd-stat__ico { color: var(--c-rust); line-height: 0; margin-bottom: 0.12rem; }
.pd-stat__ico svg { width: 22px; height: 22px; display: block; }
.pd-stat__num {
  font-family: var(--f-sans);
  font-size: 1.3rem; font-weight: 500; line-height: 1;
  color: var(--c-ink);
  display: inline-flex; align-items: baseline; gap: 0.1em;
}
.pd-stat__unit { font-size: 0.6em; font-weight: 400; color: rgba(11,12,14,0.5); }
.pd-stat__lbl {
  font-family: var(--f-sans);
  font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(11,12,14,0.55);
}

/* ---- Checkmark feature list (replaces the bullet dot) ---- */
.pd-features__list--check li { align-items: flex-start; gap: 0.6rem; }
.pd-features__list--check .tick { flex: 0 0 auto; color: var(--c-rust); line-height: 0; margin-top: 1px; }
.pd-features__list--check .tick svg { width: 18px; height: 18px; display: block; }

/* Enquire — the page's one burgundy statement band. */
.pd-enquire {
  background: linear-gradient(135deg, var(--c-burg), #2a080c);
  border-top: 0 !important;
  border-radius: 18px;
  padding: clamp(1.6rem, 3.4vw, 2.6rem) !important;
  color: var(--c-bone);
}
.pd-enquire__broker { display: flex; gap: 1.3rem; align-items: flex-start; flex-wrap: wrap; }
.pd-enquire .kicker { color: var(--c-gold); }
.pd-enquire .pd-h { color: var(--c-bone); }
.pd-enquire .prose { color: rgba(250,246,238,0.85); opacity: 1; }
.pd-enquire__cta { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.4rem; }

.pd-avatar {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.16em;
  width: 84px; height: 84px; flex: 0 0 84px;
  border-radius: 50%;
  background: var(--c-verde);
  border: 1px solid rgba(198,154,77,0.55);
  box-shadow: 0 0 0 3px rgba(198,154,77,0.10);
  overflow: hidden;
}
.pd-avatar .adv-avatar__word { font-size: 0.8rem; margin-top: 0.08em; }
.pd-avatar--sm { width: 48px; height: 48px; flex: 0 0 48px; }
.pd-avatar--sm .adv-avatar__tri { width: 56%; }
.pd-avatar--sm .adv-avatar__word { font-size: 0.5rem; }

/* ---- Sticky price card ---- */
.pd-rail { position: relative; min-width: 0; }
.pd-card {
  position: sticky;
  top: calc(var(--header-h) + 1.1rem);
  background: #ffffff;
  border: 1px solid var(--c-line-dark);
  border-radius: 18px;
  padding: clamp(1.3rem, 2vw, 1.7rem);
  box-shadow: 0 14px 44px rgba(11,12,14,0.09);
  display: flex; flex-direction: column; gap: 1.05rem;
}
.pd-card__price { display: flex; flex-direction: column; gap: 0.3rem; }
.pd-card__price .lbl {
  font-family: var(--f-sans);
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-rust);
}
.pd-card__price .big {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 2.2vw, 2.1rem);
  line-height: 1.05;
  color: var(--c-ink);
}
.pd-card__price .per {
  font-family: var(--f-sans);
  font-size: 0.86rem;
  color: rgba(11,12,14,0.55);
}
.pd-card__price .also {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  color: var(--c-burg-soft);
}
.pd-card__line { margin: 0; font-size: 0.88rem; color: rgba(11,12,14,0.66); }
.pd-card__facts {
  display: flex; flex-direction: column; gap: 0.75rem;
  border-top: 1px solid var(--c-line-dark);
  border-bottom: 1px solid var(--c-line-dark);
  padding: 0.95rem 0;
}
.pd-fact {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8rem;
}
.pd-fact__k {
  font-family: var(--f-sans);
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(11,12,14,0.55);
}
.pd-fact__v {
  font-family: var(--f-sans);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.pd-fact__v--roi { color: var(--c-rust); }
.pd-fact__yr { font-size: 0.68rem; color: rgba(11,12,14,0.45); }
.pd-fact:hover .roi-tip,
.pd-fact:focus-within .roi-tip {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
/* Pills sit on white here — flip the dark-theme chip colors. */
.pd-card .airbnb-pill--yes        { color: rgba(11,12,14,0.78); background: rgba(11,12,14,0.05); }
.pd-card .airbnb-pill--restricted { color: var(--c-rust); background: rgba(163,124,51,0.10); }
.pd-card .airbnb-pill--no         { color: rgba(11,12,14,0.5); background: rgba(11,12,14,0.04); }
.pd-card__btn { width: 100%; justify-content: center; }
.pd-card .btn:not(.gold) { color: var(--c-ink); border-color: rgba(11,12,14,0.4); }
.pd-card .btn:not(.gold):hover { background: var(--c-ink); color: var(--c-bone); }
.pd-card__calc {
  align-self: center;
  font-family: var(--f-sans);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(11,12,14,0.6);
  border-bottom: 1px solid rgba(11,12,14,0.25);
  padding-bottom: 0.12rem;
}
.pd-card__calc:hover { color: var(--c-rust); border-color: var(--c-rust); }
.pd-card__broker {
  display: flex; align-items: center; gap: 0.85rem;
  border-top: 1px solid var(--c-line-dark);
  padding-top: 1.05rem;
}
.pd-card__broker-txt { display: flex; flex-direction: column; gap: 0.18rem; line-height: 1.25; }
.pd-card__broker-txt b { font-size: 0.94rem; font-weight: 500; color: var(--c-ink); }
.pd-card__broker-txt span { font-size: 0.68rem; letter-spacing: 0.06em; color: rgba(11,12,14,0.55); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .pd-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pd-rail { order: -1; }
  .pd-card { position: static; }
}
@media (max-width: 720px) {
  .pd-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    aspect-ratio: auto;
  }
  .pd-mosaic .pg-cell--lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .pd-mosaic .pg-cell:not(.pg-cell--lead) { aspect-ratio: 1 / 1; }
  .pd-features__list { grid-template-columns: 1fr; }
  .pd-subrow { flex-direction: column; gap: 0.7rem; }
}

/* ============================================================ */
/* PROPERTY SPLIT (2026-06-14) — fixed info menu (left) /        */
/* Airbnb image stack (right): 1 hero + 4 secondary, then grid. */
/* ============================================================ */
.pd-split-section {
  background: var(--c-bone);
  padding: calc(var(--header-h) + clamp(1.2rem, 2.6vw, 2.1rem)) 0 clamp(2.6rem, 5vw, 4.2rem);
}
.pd-split {
  display: grid;
  grid-template-columns: clamp(330px, 33vw, 430px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

/* ---- LEFT: the fixed property menu ---- */
.pd-info { position: relative; min-width: 0; }
.pd-info__panel {
  /* Sticky, but NOT internally scroll-clipped: the description and features
     flow naturally below the deal box so they're always visible. When the
     column is taller than the viewport it scrolls with the page; when it
     fits, the whole menu pins. (Replaces the old max-height/overflow box
     that buried the description below an internal fold.) */
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  display: flex; flex-direction: column; gap: clamp(1rem, 1.6vw, 1.35rem);
}
.pd-info .pd-crumbs { margin-bottom: 0; }
.pd-info .pd-title { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.15rem); margin: 0; }
.pd-info .pd-meta { font-size: 0.85rem; }

/* deal block — price, facts, CTA, broker on a white card */
.pd-info__deal {
  display: flex; flex-direction: column; gap: 1rem;
  background: #ffffff;
  border: 1px solid var(--c-line-dark);
  border-radius: 16px;
  padding: clamp(1.1rem, 1.7vw, 1.5rem);
  box-shadow: 0 10px 34px rgba(11,12,14,0.07);
}
.pd-card__fine { margin: 0; font-size: 0.74rem; line-height: 1.5; color: rgba(11,12,14,0.5); }
.pd-info__deal .airbnb-pill--yes        { color: rgba(11,12,14,0.78); background: rgba(11,12,14,0.05); }
.pd-info__deal .airbnb-pill--restricted { color: var(--c-rust); background: rgba(163,124,51,0.10); }
.pd-info__deal .airbnb-pill--no         { color: rgba(11,12,14,0.5); background: rgba(11,12,14,0.04); }
/* ---- Booking CTAs — premium, soft-rounded buttons (2026-06-18).
   The old flat, sharp-cornered, ultra-tracked amber block read as a
   cheap / "scam" CTA on the white card — worst full-width on mobile.
   Round them to the page's card language (16px cards / 13px stats),
   calm the letter-spacing, and give the gold button a quiet lift so it
   feels like a luxury "book now", not a 2000s download button. Shared
   with the burgundy enquire band below. ---- */
.pd-info__deal .btn,
.pd-enquire__cta .btn {
  border-radius: 12px;
  letter-spacing: 0.15em;
  font-size: 0.74rem;
  padding: 1.02rem 1.45rem;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              transform 0.2s var(--ease);
}
.pd-info__deal .btn.gold,
.pd-enquire__cta .btn.gold {
  box-shadow: 0 10px 24px rgba(163,124,51,0.26);
}
.pd-info__deal .btn.gold:hover,
.pd-enquire__cta .btn.gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(163,124,51,0.34);
}
/* Secondary (WhatsApp) on the white deal card — replace the harsh 0.4
   outline with a refined hairline + a whisper of fill so the two CTAs
   read as a considered pair, not a default form button. */
.pd-info__deal .btn:not(.gold) {
  color: var(--c-ink);
  border-color: rgba(11,12,14,0.16);
  background: rgba(11,12,14,0.02);
}
.pd-info__deal .btn:not(.gold):hover {
  background: var(--c-ink); color: var(--c-bone); border-color: var(--c-ink);
}

/* the read + features inside the menu */
.pd-info__read { display: flex; flex-direction: column; gap: 0.7rem; }
.pd-info__read .kicker,
.pd-info__features .kicker {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--c-rust);
}
.pd-info__features .kicker { margin-bottom: 0.6rem; }
.pd-info__read .prose {
  font-size: 0.92rem; line-height: 1.62;
  color: var(--c-ink); opacity: 0.85; margin: 0; max-width: none;
}
.pd-info__features .pd-features__list { grid-template-columns: 1fr; gap: 0.55rem; margin-top: 0; }
.pd-info__features .pd-features__list li { font-size: 0.9rem; }
.pd-info__hood { align-self: flex-start; font-size: 0.82rem; }

/* ---- Location: branded neighborhood map inside the left menu ---- */
.pd-info__location .kicker {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--c-rust);
  margin-bottom: 0.6rem;
}
/* Fit the community map frame into the narrow menu column: card-radius
   corners, a taller crop, and a scaled-down wordmark so the signature reads
   without swamping the small frame. */
.map-frame--pd {
  border-radius: 13px;
  aspect-ratio: 4 / 3;
}
.map-frame--pd .adv-map { border-radius: 13px; }
.map-frame--pd .adv-map-overlay { left: 1rem; bottom: 0.9rem; gap: 0.1rem; }
.map-frame--pd .adv-map-overlay-name { font-size: 1.35rem; }
.map-frame--pd .adv-map-overlay-coords {
  margin-top: 0.25rem; font-size: 0.58rem; letter-spacing: 0.16em;
}
.pd-info__location-note {
  margin: 0.55rem 0 0;
  font-family: var(--f-sans);
  font-size: 0.72rem; letter-spacing: 0.02em;
  color: rgba(11,12,14,0.5);
}

/* ===================================================================
   SHARE BAR (left menu) — Airbnb-style row near the title.
   =================================================================== */
.pd-share {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin: 0.2rem 0 1.3rem;
}
.pd-share__lbl {
  font-family: var(--f-sans);
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(11,12,14,0.5); margin-right: 0.25rem;
}
.pd-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  border: 1px solid var(--c-line-dark);
  background: #fff; color: var(--c-ink);
  cursor: pointer; text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
.pd-share__btn svg { width: 16px; height: 16px; display: block; }
.pd-share__btn:hover,
.pd-share__btn:focus-visible {
  border-color: var(--c-rust); color: var(--c-rust);
  transform: translateY(-1px); outline: none;
}
.pd-share__toast {
  font-family: var(--f-sans); font-size: 0.72rem;
  color: var(--c-rust); margin-left: 0.35rem;
}

/* ===================================================================
   ENQUIRE — B&W location map + ADV business card + inline brief.
   =================================================================== */
.pd-contact__map.map-frame {
  aspect-ratio: 24 / 9;
  border-color: rgba(11,12,14,0.14);
  background: #ececec;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
@media (max-width: 760px) { .pd-contact__map.map-frame { aspect-ratio: 4 / 3; } }

/* Desaturate the OSM raster to true black & white (overrides the satellite
   tint the shared .adv-map rule applies). */
.adv-map.adv-map--bw { background: #ececec; }
.adv-map.adv-map--bw .leaflet-tile-pane {
  filter: grayscale(1) contrast(1.03) brightness(1.02);
}
/* Dark overlays for the light plate (the base overlay is tuned for satellite). */
.adv-map-overlay--bw { text-shadow: none; }
.adv-map-overlay--bw .adv-map-overlay-mark { color: var(--c-burg); opacity: 0.85; }
.adv-map-overlay--bw .adv-map-overlay-name { color: var(--c-ink); }
.adv-map-attrib--bw { color: rgba(11,12,14,0.5); text-shadow: none; }

/* Centered "Request the exact address" — the map's one call to action. */
.pd-reqaddr {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  font-family: var(--f-sans);
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-bone);
  background: var(--c-burg);
  border: 0; border-radius: 4px;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
  transition: background 0.2s, transform 0.2s;
}
.pd-reqaddr:hover,
.pd-reqaddr:focus-visible {
  background: #2a080c; transform: translate(-50%, -52%); outline: none;
}

.pd-contact__grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(1.6rem, 3.4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .pd-contact__grid { grid-template-columns: minmax(0, 1fr); } }

/* ADV business card — a light "calling card" on the night band (mirrors the
   agency card competitors put beside the form). */
.pd-bizcard {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--c-bone);
  border: 1px solid rgba(198,154,77,0.30);
  border-radius: 14px;
  padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.6);
}
.pd-bizcard__mark { line-height: 0; margin-bottom: 0.9rem; }
.pd-bizcard__mark .adv-avatar__tri { width: 66px; height: auto; fill: var(--c-burg); display: block; }
.pd-bizcard__word {
  font-family: var(--f-display);
  font-size: 1.6rem; line-height: 1; color: var(--c-ink);
  letter-spacing: 0.01em;
}
.pd-bizcard__tag {
  font-family: var(--f-sans);
  font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--c-rust); margin-top: 0.5rem;
}
.pd-bizcard__rule {
  width: 46px; height: 1px; background: rgba(198,154,77,0.5);
  margin: 1.1rem 0;
}
.pd-bizcard__broker {
  margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.2rem;
}
.pd-bizcard__broker b { font-family: var(--f-sans); font-size: 0.98rem; color: var(--c-ink); }
.pd-bizcard__broker span { font-family: var(--f-sans); font-size: 0.76rem; color: rgba(11,12,14,0.6); }
.pd-bizcard__phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-sans); font-size: 0.98rem; font-weight: 500;
  color: var(--c-ink); text-decoration: none;
  border: 1px solid var(--c-line-dark); border-radius: 999px;
  padding: 0.6rem 1.15rem; margin-bottom: 1.2rem;
  transition: border-color 0.2s, color 0.2s;
}
.pd-bizcard__phone svg { width: 17px; height: 17px; }
.pd-bizcard__phone:hover { border-color: var(--c-rust); color: var(--c-rust); }
.pd-bizcard__cta { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
.pd-bizcard__cta .btn { width: 100%; border-radius: 10px; letter-spacing: 0.14em; }
.pd-bizcard__note {
  font-family: var(--f-sans); font-size: 0.68rem; letter-spacing: 0.02em;
  color: rgba(11,12,14,0.5); margin-top: 0.9rem;
}

/* Inline brief tweaks (reuses .intake-form dark styling). */
.pd-contact__form { border-radius: 14px; }
.pd-contact__form .field--title { max-width: 120px; }
.pd-consent {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-family: var(--f-sans); font-size: 0.82rem; line-height: 1.5;
  color: rgba(250,246,238,0.78); margin: 0.2rem 0 1.3rem; cursor: pointer;
}
.pd-consent input { margin-top: 0.2rem; accent-color: var(--c-gold); flex: 0 0 auto; }
.pd-consent a { color: var(--c-gold); text-underline-offset: 2px; }

/* ---- RIGHT: the Airbnb image stack ---- */
.pd-visual { min-width: 0; display: flex; flex-direction: column; gap: clamp(0.5rem, 0.9vw, 0.8rem); }
.pd-visual .pd-mosaic { aspect-ratio: 16 / 9.2; border-radius: 16px; }
/* flip-through carousel below the mosaic (replaces the old scrolling grid) */
.pd-carousel { position: relative; }
.pd-carousel__viewport { overflow: hidden; border-radius: 16px; }
.pd-carousel__track {
  display: flex;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pd-carousel__track::-webkit-scrollbar { display: none; }
.pd-carousel__slide { flex: 0 0 100%; scroll-snap-align: start; }
.pd-carousel__slide .pg-cell {
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  border: 0; border-radius: 16px;
}
.pd-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,12,14,0.42);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.pd-carousel__nav:hover { background: rgba(11,12,14,0.64); border-color: rgba(198,154,77,0.7); }
.pd-carousel__nav[disabled] { opacity: 0; pointer-events: none; }
.pd-carousel__prev { left: clamp(0.6rem, 1.4vw, 1rem); }
.pd-carousel__next { right: clamp(0.6rem, 1.4vw, 1rem); }
.pd-carousel__dots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem;
  margin-top: 0.85rem;
}
.pd-carousel__dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(11,12,14,0.2);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.pd-carousel__dot.is-active { background: var(--c-rust); transform: scale(1.3); }
.pd-visual .pd-locked {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-ink-2);
}
.pd-visual .pd-locked img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(26px) brightness(0.5) saturate(0.85);
  transform: scale(1.12);
}

/* full-width bands below the split */
.pd-belowsplit { background: var(--c-bone); padding: 0 0 clamp(2.2rem, 4.5vw, 3.6rem); }
.pd-belowsplit .pd-enquire { border-radius: 18px; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .pd-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .pd-info__panel { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .pd-visual { order: -1; }
}
@media (max-width: 720px) {
  .pd-visual .pd-mosaic { aspect-ratio: auto; }
}

/* ============================================================================
   MOBILE POLISH — 2026-06-18
   Phone-only refinements. Additive/override; appended last so it wins on
   equal specificity. Does not touch tablet/desktop layout.
   ============================================================================ */
@media (max-width: 560px) {
  /* Tighter vertical rhythm: desktop section padding (~64–80px/side) leaves
     big dead gaps and exaggerates the page length on a phone. */
  .section            { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .section-sm         { padding-top: 2.1rem;  padding-bottom: 2.1rem; }
  .page-home .section { padding-top: 3rem;    padding-bottom: 3rem; }
  .page-home .section-sm { padding-top: 1.9rem; padding-bottom: 1.9rem; }
}