/* Avion Point — site.css
   Tokens, base type and layout (three-zone editorial grid, square media, pill buttons), then the
   components page by page. responsive.css holds the tablet and phone overrides. */

/* The logo's typeface. The wordmark is Barlow Condensed 400 with about 0.07em tracking, so display,
   nav and buttons are Barlow Condensed and body copy is Barlow. Both OFL, self-hosted, latin subset. */
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-400-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
/* Size-matched fallbacks, so text set before the web fonts arrive takes the same width and line
   height and nothing reflows on swap. Width ratios measured in Chrome with canvas measureText over
   the site's real text (headings and links for the condensed faces, body copy for Barlow): Barlow Condensed 300-400 vs Arial Narrow 78.9%, 500 vs Arial Narrow 80.6% (vs
   Arial 64.7% / 66.1% where Arial Narrow is not installed); Barlow 400 vs Arial 95.8%, 500 vs Arial
   96.5%, italic vs Arial Italic 93.5%. Barlow's ascent and descent are 1.0 and 0.2 em with no line
   gap; each override is that value divided by the size-adjust. */
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial Narrow"), local("ArialNarrow"); font-weight: 300 400; size-adjust: 78.9%; ascent-override: 126.7%; descent-override: 25.3%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial Narrow"), local("ArialNarrow"); font-weight: 500 700; size-adjust: 80.6%; ascent-override: 124.1%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback Arial"; src: local("Arial"), local("ArialMT"); font-weight: 300 400; size-adjust: 64.7%; ascent-override: 154.6%; descent-override: 30.9%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback Arial"; src: local("Arial"), local("ArialMT"); font-weight: 500 700; size-adjust: 66.1%; ascent-override: 151.3%; descent-override: 30.3%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; font-style: normal; size-adjust: 95.8%; ascent-override: 104.4%; descent-override: 20.9%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 500 700; font-style: normal; size-adjust: 96.5%; ascent-override: 103.6%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; src: local("Arial Italic"), local("Arial-ItalicMT"); font-style: italic; size-adjust: 93.5%; ascent-override: 107%; descent-override: 21.4%; line-gap-override: 0%; }

:root {
  --ground: #F5F4F0;
  --surface: #E9E8E2;
  --raised: #FFFFFF;
  --ink: #1C2229;
  --muted: #5A6470;
  --slate: #445569;
  --panel: #2E3B4A;
  --on-panel-muted: #CDD3DA;
  --accent: #A34B15;
  --accent-hover: #8A3E10;
  --mark: #E07525;
  --line: #D5D4CC;
  --field-line: #8A8981; /* input borders: 3.5:1 on white, 3.3:1 on the ground (WCAG 1.4.11) */
  --line-panel: rgba(255, 255, 255, 0.22);

  --cond: "Barlow Condensed", "Barlow Condensed Fallback", "Barlow Condensed Fallback Arial", "Arial Narrow", sans-serif;
  --sans: "Barlow", "Barlow Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale, fluid from 390 to 1440 px (value at 1440 / 390). */
  --fs-display: clamp(48px, 30.2px + 4.57vw, 96px);    /* 96 / 48 */
  --fs-h2: clamp(34px, 27.3px + 1.71vw, 52px);         /* 52 / 34 */
  --fs-h3: clamp(26px, 22.3px + 0.95vw, 36px);         /* 36 / 26 */
  --fs-h4: clamp(22px, 21.3px + 0.19vw, 24px);         /* 24 / 22 */
  --fs-h5: clamp(18px, 17.3px + 0.19vw, 20px);        /* 20 / 18 */
  --fs-figure: clamp(60px, 46.6px + 3.43vw, 96px);     /* 96 / 60 */
  --fs-sub: clamp(16px, 15.3px + 0.19vw, 18px);       /* 18 / 16 */
  --fs-lead: clamp(18px, 16.9px + 0.29vw, 21px);      /* 21 / 18 */
  --fs-body: clamp(16px, 15.6px + 0.1vw, 17px);       /* 17 / 16 */
  --fs-small: 14px;
  --fs-caption: 14px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 40px; --s8: 48px; --s9: 64px; --s10: 96px;
  --section: 96px;
  --gutter: 48px;
  --header: 88px;
  --max: 1680px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--ground); color: var(--ink); font-variant-numeric: lining-nums; font-family: var(--sans); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; }
strong, b { font-weight: 500; }
img { display: block; max-width: 100%; height: auto; }
img.photo { outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; }
a { color: var(--slate); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
a:hover { color: var(--ink); }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }
.on-panel :focus-visible, .site-footer :focus-visible { outline-color: #FFFFFF; }
::selection { background: var(--surface); color: var(--ink); }
[hidden] { display: none !important; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s4); top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: var(--s3) var(--s4); text-decoration: none; transition: top 0.2s ease; }
.skip-link:focus { top: var(--s4); color: #fff; }

/* ---------- Type ---------- */
/* Condensed caps always take positive tracking. */
.display, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 { font-family: var(--cond); font-weight: 400; text-transform: uppercase; margin: 0; text-wrap: balance; font-variant-numeric: lining-nums; }
.display { font-size: var(--fs-display); line-height: 0.95; letter-spacing: 0.02em; }
.h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: 0.02em; }
.h3 { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: 0.03em; }
.h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.1; letter-spacing: 0.04em; }
.h5 { font-size: var(--fs-h5); font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; }
/* Plan sub-name (Amelia, Lindbergh): Barlow italic, sentence case, under the plan title. */
.subname { display: block; font-family: var(--sans); font-style: italic; font-weight: 400; font-size: var(--fs-sub); line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: var(--s2); }
.figure { font-family: var(--cond); font-size: var(--fs-figure); font-weight: 300; line-height: 0.9; letter-spacing: 0.01em; font-variant-numeric: lining-nums tabular-nums; }
.figure small { font-size: 0.2em; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 0.4em; }
.lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.5; }
.small { font-size: var(--fs-small); line-height: 1.4; }
.caption { font-size: var(--fs-caption); font-weight: 500; line-height: 1.4; color: var(--muted); }
.muted { color: var(--muted); }
.small.muted { font-weight: 500; }
.rent { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.note { font-style: italic; font-size: var(--fs-small); color: var(--muted); margin-top: var(--s2); }
.note a { color: inherit; }
/* One UI type for nav links, buttons, pills, tabs and chips: Barlow Condensed 500 caps,
   0.08em tracking. Each rule below sets only its size and colour. */
.pill, .text-link, .chip, .pv-tab, .jump a, .avail-rows .beds, .nb-recentre, .link-btn { font-family: var(--cond); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.z-left { grid-column: 1 / 4; }
.z-main { grid-column: 4 / 13; }
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section--surface { background: var(--surface); }
.section--surface + .section, .section + .section--surface { padding-top: var(--section); }
main { display: block; }

/* ---------- Buttons ---------- */
.pill { --pill-bg: transparent; --pill-fg: var(--slate); --pill-bd: var(--slate);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 calc(24px - 0.08em) 0 24px; border-radius: 999px;
  border: 1px solid var(--pill-bd); background: var(--pill-bg); color: var(--pill-fg); font-size: 15px;
  text-decoration: none; white-space: nowrap; cursor: pointer; position: relative;
  transition-property: background-color, color, border-color, transform; transition-duration: 0.2s; transition-timing-function: ease; }
.pill:hover { --pill-bg: var(--slate); --pill-fg: #fff; color: var(--pill-fg); }
.pill:active { transform: scale(0.97); }
.pill--accent { --pill-bg: var(--accent); --pill-fg: #fff; --pill-bd: var(--accent); }
.pill--accent:hover { --pill-bg: var(--accent-hover); --pill-bd: var(--accent-hover); --pill-fg: #fff; }
.pill--slate { --pill-bg: var(--slate); --pill-fg: #fff; --pill-bd: var(--slate); }
.pill--slate:hover { --pill-bg: var(--ink); --pill-bd: var(--ink); }
.pill--white { --pill-bg: #fff; --pill-fg: var(--panel); --pill-bd: #fff; }
.pill--white:hover { --pill-bg: var(--ground); --pill-fg: var(--ink); --pill-bd: var(--ground); }
.pill--ghost-light { --pill-fg: #fff; --pill-bd: rgba(255,255,255,0.7); }
.pill--ghost-light:hover { --pill-bg: #fff; --pill-fg: var(--panel); --pill-bd: #fff; }
.pill--block { width: 100%; }
.pill[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.pill[aria-busy="true"] { color: transparent; pointer-events: none; }
.pill[aria-busy="true"]::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--pill-fg); border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.text-link { font-size: 15px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 6px; color: var(--slate); }
.text-link:hover { text-decoration-color: currentColor; }

/* Chips (filters, categories, time slots) */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised);
  color: var(--ink); font-size: 14px; cursor: pointer; transition-property: background-color, color, border-color, transform; transition-duration: 0.2s; transition-timing-function: ease; position: relative; }
.chip::before { content: ""; position: absolute; inset: -4px 0; } /* 44px hit area */
.chip:hover { border-color: var(--slate); }
.chip:active { transform: scale(0.97); }
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip:has(input:focus-visible) { outline: 2px solid var(--slate); outline-offset: 3px; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }

/* ---------- Header ---------- */
/* One sticky bar on Aria at Idlewild's layout (88 px desktop, 72 tablet, 64 phone): Menu on the left,
   the logo centred, and the phone, Book a tour and Residents on the right. Every page link is in the
   menu panel. The bar slides up out of view on scroll down past 160 px and comes back on any scroll
   up (site-nav.js toggles .is-hidden); a hairline appears once the page scrolls. */
.site-header { position: sticky; top: 0; z-index: 60; height: var(--header); background: var(--ground); border-bottom: 1px solid transparent;
  transition: transform 0.25s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease; }
.site-header.is-hidden { transform: translateY(calc(-100% - 1px)); }
.site-header.nav-scrolled, .site-header:has(.menu-toggle[aria-expanded="true"]) { border-bottom-color: var(--line); }
.header-bar { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 40px; }
.header-side { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.header-side--end { justify-content: flex-end; gap: 26px; }
.brand { display: block; flex: none; padding-inline: 12px; }
.brand img { height: 52px; width: auto; outline: 0; }
.header-phone, .header-residents, .menu-toggle { font-family: var(--cond); font-weight: 500; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; }
.header-phone { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; min-width: 44px; justify-content: center; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; white-space: nowrap; }
.header-phone svg { width: 17px; height: 17px; flex: none; color: var(--slate); }
.header-phone:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; }
.site-header .header-tour { min-height: 42px; font-size: 14px; letter-spacing: 0.2em; padding: 0 calc(22px - 0.2em) 0 22px; }
.header-residents { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.header-residents:hover, .header-residents[aria-current="page"] { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 0.35em; }
/* While the menu is open the bar keeps only the logo and Close (the rest is inert behind the panel). */
.header-side--end > * { transition: opacity 0.25s ease; }
.site-header:has(.menu-toggle[aria-expanded="true"]) .header-side--end > * { opacity: 0; pointer-events: none; }
.menu-toggle { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; min-width: 44px; padding: 0 var(--s2) 0 2px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.menu-label { min-width: 4.2em; text-align: left; }
/* Two bars of unequal length (Idlewild's mark) that turn into an x while the menu is open. */
.menu-icon { position: relative; width: 24px; height: 9px; flex: none; }
.menu-icon > span { position: absolute; left: 0; height: 1.5px; background: currentColor; transition: transform 0.25s var(--ease-out), width 0.25s var(--ease-out); }
.menu-icon > span:first-child { top: 0; width: 24px; } .menu-icon > span:last-child { bottom: 0; width: 15px; }
.menu-toggle:hover .menu-icon > span:last-child { width: 24px; }
.menu-toggle[aria-expanded="true"] .menu-icon > span { width: 24px; }
.menu-toggle[aria-expanded="true"] .menu-icon > span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon > span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu-toggle:hover .menu-label { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }

/* The menu panel, one component at every width. It sits below the header bar, so the
   logo and Close stay in place; site-nav.js makes everything behind it inert while it is open. */
.site-menu { position: fixed; inset: var(--header) 0 0 0; z-index: 55; background: var(--ground); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.site-menu.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
/* A full-height photo on the left; on the right one numbered list of the main pages in light
   condensed caps, a quieter row beneath, and a three-column contact strip. */
.menu-inner { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.menu-photo { position: relative; overflow: hidden; background: var(--surface); }
.menu-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.site-menu.is-open .menu-photo img { transform: none; }
.menu-body { display: flex; flex-direction: column; gap: var(--s8); padding: clamp(40px, 6vh, 72px) var(--gutter) var(--s8) clamp(48px, 6vw, 112px); }
.menu-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-links li, .menu-more li { opacity: 0; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease; }
.site-menu.is-open .menu-links li, .site-menu.is-open .menu-more li { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s var(--ease-out); transition-delay: calc(80ms + var(--i, 0) * 40ms); }
.menu-links a { display: inline-flex; align-items: center; gap: 22px; padding-block: 4px; font-family: var(--cond); font-weight: 300; font-size: clamp(34px, 22px + 1.6vw, 50px); line-height: 1.1; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; transition: transform 0.35s var(--ease-out); }
.menu-num { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--muted); min-width: 2.2ch; font-variant-numeric: tabular-nums; transition: color 0.2s ease; }
.menu-text { position: relative; padding-bottom: 6px; }
.menu-text::after { content: ""; position: absolute; left: 0; right: 0.05em; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: center; transition: transform 0.25s var(--ease-out); }
.menu-links a:hover { transform: translateX(8px); }
.menu-links a:hover .menu-text::after { transform: scaleX(1); }
.menu-links a:hover .menu-num, .menu-links a[aria-current="page"] .menu-num { color: var(--mark); }
.menu-links a[aria-current="page"] .menu-text::after { transform: scaleX(1); background: var(--mark); }
.menu-more { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) 36px; margin: var(--s6) 0 0; padding: var(--s5) 0 0 calc(2.2ch + 22px); border-top: 1px solid var(--line); max-width: 560px; }
.menu-more a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--cond); font-weight: 500; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.menu-more a:hover, .menu-more a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 1px; }
.menu-more a[aria-current="page"] { text-decoration-color: var(--mark); }
.menu-contact { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) 32px; padding-top: var(--s6); border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.menu-contact p { margin: 0; }
.menu-contact a:not(.pill) { color: var(--ink); }
.menu-k { font-family: var(--cond); font-weight: 500; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2) !important; }
.menu-cta { display: flex; align-items: center; gap: var(--s5); }
.menu-cta .note { margin: 0; }
.menu-bar { display: none; }

/* ---------- Heroes ---------- */
/* The home hero is the photo. It fills the viewport under the header (100svh less
   the header, 560 to 960 px) with the h1, one line and two buttons over its lower left. A soft shade
   is confined to that corner, so the sky and the rest of the photo stay vivid; white text measures
   at least 4.5:1 on the worst 1% of pixels behind it (scripts/qa/hero-contrast.mjs). --hero-pos is
   the crop's focus point per breakpoint. */
.hero { position: relative; color: #fff; height: calc(100svh - var(--header)); min-height: 560px; max-height: 960px; overflow: hidden; background: var(--panel); display: flex; align-items: flex-end;
  --hero-pos: 50% 62%; --sky-pos: 50% 70%; --shade-a: 640px; --shade-b: 960px; --shade-h: 41%; }
/* The carousel (hero.js), after Idlewild's heroXL: stacked slides cross-fade over 1.6 s while the
   stack settles from a light zoom and then drifts slowly. The drift holds the scale fixed and moves
   on translate alone, so the layers are rasterised once. Reduced motion holds slide one. */
.hero-stack { position: absolute; inset: 0; transform: scale(1.06); animation: heroSettle 2.4s cubic-bezier(0.16, 1, 0.3, 1) both, heroDrift 34s 2.4s ease-in-out infinite; }
.hero.is-paused .hero-stack { animation-play-state: paused; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; outline: 0; }
.hero-slide { opacity: 0; transition: opacity 1.6s ease-in-out; }
.hero-slide.is-active { opacity: 1; }
@keyframes heroSettle { from { transform: scale(1.1); } to { transform: scale(1.06); } }
@keyframes heroDrift { 0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); } 50% { transform: scale(1.06) translate3d(-1.2%, -1%, 0); } }
/* Dots and the pause button sit at the lower right, clear of the text block. */
.hero-controls { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(40px, 6vh, 72px); display: flex; align-items: center; gap: 0; padding: 0 2px 0 6px; border-radius: 999px; background: rgba(16, 22, 29, 0.5); }
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) { .hero-controls { background: rgba(16, 22, 29, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } }
.hero-dots { display: flex; }
/* iOS-style page dots: small dots, and the current one stretches into a pill that fills white over
   the slide's hold time (--hold, set by hero.js). Paused, the current pill shows full. */
.hero-dot { position: relative; width: 24px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 0.45s var(--ease-out); }
.hero-dot[aria-current="true"] { width: 32px; }
.hero-dot::before, .hero-dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 999px;
  transition: width 0.45s var(--ease-out), margin-left 0.45s var(--ease-out), background-color 0.3s ease; }
.hero-dot::after { background: rgba(255, 255, 255, 0.45); }
.hero-dot::before { z-index: 1; background: #fff; clip-path: inset(0 100% 0 0 round 999px); }
.hero-dot[aria-current="true"]::before, .hero-dot[aria-current="true"]::after { width: 18px; margin-left: -9px; }
.hero-dot[aria-current="true"]::before { clip-path: inset(0 0 0 0 round 999px); }
.hero.is-ticking .hero-dot[aria-current="true"]::before { animation: heroDotFill var(--hold, 6s) linear both; }
.hero-dot:hover::after { background: rgba(255, 255, 255, 0.75); }
@keyframes heroDotFill { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
.hero-pause { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color 0.2s ease; }
.hero-pause:hover { background: rgba(255, 255, 255, 0.16); }
.hero-pause svg { width: 10px; height: 10px; }
.hero-pause .i-play, .hero-pause.is-play .i-pause { display: none; }
.hero-pause.is-play .i-play { display: inline; }
.hero :focus-visible { outline-color: #fff; }
.hero-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(16, 22, 29, 0.76) 0, rgba(16, 22, 29, 0.7) var(--shade-a), rgba(16, 22, 29, 0.36) calc((var(--shade-a) + var(--shade-b)) / 2), rgba(16, 22, 29, 0) var(--shade-b));
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 var(--shade-h), transparent calc(var(--shade-h) + 17%)); mask-image: linear-gradient(to top, #000 0, #000 var(--shade-h), transparent calc(var(--shade-h) + 17%)); }
.hero-copy { position: relative; z-index: 1; padding-bottom: clamp(40px, 6vh, 72px); }
.hero-h1 { font-family: var(--cond); font-weight: 400; font-size: min(var(--fs-display), calc(3.2vw + 18px)); line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.hero-h1 .line { display: block; width: fit-content; overflow: hidden; padding-bottom: 0.05em; }
/* Each line is set by hand, so a font swap cannot rewrap it and move the bottom-anchored block. */
@media (min-width: 761px) { .hero-h1 .line { white-space: nowrap; } }
.hero-h1 .line > span { display: block; }
.hero-lead { font-size: var(--fs-lead); line-height: 1.45; color: #fff; margin: var(--s4) 0 var(--s6); max-width: 22em; }
.hero-copy .actions { gap: var(--s3); }
.glass { grid-column: 9 / 13; background: rgba(245, 244, 240, 0.94); color: var(--ink); padding: var(--s5); }
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { .glass { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { .glass { background: var(--ground); } }
/* Rows linking to other plans (bedroom pages). */
.avail-rows { list-style: none; margin-bottom: var(--s4); }
.avail-rows a { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s4); align-items: baseline; min-height: 56px; padding-block: var(--s3); border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color 0.2s ease, padding 0.2s ease; }
.avail-rows li:last-child a { border-bottom: 1px solid var(--line); }
.avail-rows a:hover { background: var(--raised); padding-inline: var(--s2); }
.avail-rows .beds { font-size: 16px; }
.avail-rows .rent { font-size: 17px; font-weight: 400; }
.avail-rows .rent > span { font-weight: 500; font-size: 20px; }
.avail-rows .count { font-size: var(--fs-small); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; }
.other-all { margin: var(--s4) 0 0; }

/* Interior banners: the photo runs full-bleed with no scrim, so it stays vivid,
   and the h1 and lead sit in ink on the ground directly below it. */
.page-hero { background: var(--ground); color: var(--ink); }
.page-hero > img { display: block; width: 100%; height: 58svh; min-height: 380px; max-height: 640px; object-fit: cover; }
.page-hero .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding-top: var(--s7); }
.page-hero h1 { grid-column: 1 / 9; color: var(--ink); font-size: var(--fs-display); line-height: 0.95; }
.page-hero .lead { grid-column: 9 / 13; color: var(--ink); margin: 0 0 0.3em; }

.page-hero--plain .wrap { padding-top: var(--s10); }
.legal-head { padding-top: var(--s10); }
/* Legal titles take the display size on their own full-width row, and a long word ("Accessibility")
   breaks rather than overflows; the date sits in the left zone beside the body. */
.legal-h1 { grid-column: 1 / -1; overflow-wrap: break-word; margin-bottom: var(--s8); }
.legal-date { grid-column: 1 / 6; margin: 0; }
.legal-body { grid-column: 7 / 13; }
/* "This page moved" sits right on the 390 px line edge, where the fallback and Barlow would wrap it
   differently; it is set on two lines at every width (as it already is at 1440), so the swap cannot reflow it. */
#nf-title { max-width: 5.6em; }

/* ---------- Home sections ---------- */
/* Intro: the heading and the welcome copy beside a landscape photo of the same height. */
.intro .copy { grid-column: 1 / 6; align-self: center; padding-block: var(--s5); }
.intro .copy .h2 { margin-bottom: var(--s6); }
.intro .copy .lead { margin-bottom: var(--s5); }
.intro .photo-wide { grid-column: 7 / 13; width: 100%; height: 100%; min-height: 440px; aspect-ratio: auto; object-fit: cover; }

/* The featured plan viewer. Head row (title left, arrows and counter right), the
   tab row, then one stage split 5 / 7: the info panel and the render on white. The panels share one
   grid cell, so the stage keeps the tallest panel's height and nothing below it moves. */
.pv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s6); margin-bottom: var(--s7); }
.pv-heading .h2 { margin-bottom: var(--s4); }
.pv-heading .lead { margin: 0; color: var(--ink); }
.pv-nav { display: flex; align-items: center; gap: var(--s4); flex: none; }
.pv-count { margin: 0; font-family: var(--cond); font-weight: 500; font-size: 16px; letter-spacing: 0.08em; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 4.6em; text-align: center; }
.round-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--slate); background: transparent; color: var(--slate); display: grid; place-items: center; cursor: pointer;
  transition-property: background-color, color, transform; transition-duration: 0.2s; transition-timing-function: ease; }
.round-btn:hover { background: var(--slate); color: #fff; }
.round-btn:active { transform: scale(0.95); }
.round-btn svg { width: 18px; height: 18px; }
.pv-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: var(--s6); }
.pv-tab { position: relative; flex: 1 1 0; min-height: 52px; padding: 0 var(--s4); border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; text-align: left; white-space: nowrap;
  transition: color 0.2s ease; }
.pv-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); }
.pv-tab:hover { color: var(--ink); }
.pv-tab[aria-selected="true"] { color: var(--ink); }
.pv-tab[aria-selected="true"]::after { transform: scaleX(1); }
.pv-tab:focus-visible { outline-offset: -2px; }
.pv-section { overflow-x: clip; }
.pv-stage { display: grid; grid-template-columns: minmax(0, 1fr); touch-action: pan-y; --pv-dir: 1; }
.pv-panel { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch;
  opacity: 0; visibility: hidden; transform: translateX(calc(var(--pv-dir) * 24px)); transition: opacity 0.35s ease, transform 0.35s var(--ease-out), visibility 0s linear 0.35s; }
.pv-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.35s var(--ease-out); }
.pv-panel:focus-visible { outline-offset: 6px; }
.pv-info { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--s5); padding-block: var(--s5); align-self: center; }
.pv-name { font-size: var(--fs-h2); line-height: 1; letter-spacing: 0.02em; }
.pv-name .subname { margin-top: var(--s3); }
.pv-figs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s7); margin: 0; padding-block: var(--s5); border-block: 1px solid var(--line); }
.pv-figs > div { display: flex; flex-direction: column-reverse; gap: var(--s2); }
.pv-figs dt { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.pv-figs dd { margin: 0; font-family: var(--cond); font-weight: 300; font-size: clamp(42px, 32px + 1.7vw, 58px); line-height: 0.9; letter-spacing: 0.01em; font-variant-numeric: lining-nums tabular-nums; }
.pv-price { margin: 0; font-size: 20px; font-variant-numeric: lining-nums tabular-nums; }
.pv-price strong { font-weight: 500; font-size: 26px; }
.pv-avail { display: inline-block; margin-left: var(--s4); font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.pv-line { margin: 0; max-width: 40ch; }
.pv-media { grid-column: 6 / 13; background: var(--raised); aspect-ratio: 4 / 3; position: relative; }
.pv-media img { position: absolute; inset: var(--s6); width: calc(100% - 2 * var(--s6)); height: calc(100% - 2 * var(--s6)); object-fit: contain; outline: 0; }

/* Two-up photo layout: two photos side by side at one height, no overlap and no
   border. Used on home amenities, /amenities and the gallery chapter heads. */
.duo { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: minmax(0, 1fr); gap: var(--s4); aspect-ratio: 16 / 10; }
.duo > img, .duo > button { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.duo > button { display: block; padding: 0; border: 0; background: var(--surface); cursor: zoom-in; overflow: hidden; position: relative; }
.duo > button img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.duo > button:hover img { transform: scale(1.02); }
.amen .title { grid-column: 1 / 5; border-left: 1px solid var(--ink); padding-left: var(--s5); display: flex; flex-direction: column; gap: var(--s5); align-self: center; }
.amen .duo { grid-column: 6 / 13; }

.half-bleed { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; }
.half-bleed > img { width: 100%; height: 100%; object-fit: cover; }
.half-bleed .content { padding: var(--section) var(--gutter); max-width: 720px; display: flex; flex-direction: column; justify-content: center; gap: var(--s5); }
.place-list { list-style: none; }
.place-list li { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); border-top: 1px solid var(--line); }
.place-list li:last-child { border-bottom: 1px solid var(--line); }
.place-list .dist { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

/* The Book a tour band: the surface tone, a photo on the left and a white card with five fields and
   one primary button on the right. */
.tour-band { background: var(--surface); padding-block: var(--section); }
.tour-band-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; }
.tb-photo { grid-column: 1 / 6; position: relative; min-height: 420px; overflow: hidden; background: var(--line); }
.tb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tb-card { grid-column: 6 / 13; background: var(--raised); border: 1px solid var(--line); padding: var(--s8) var(--s8) var(--s7); display: flex; flex-direction: column; gap: var(--s5); }
.tb-lead { margin: 0; max-width: 52ch; }
.tb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); margin: var(--s2) 0 0; padding: var(--s5) 0; border-block: 1px solid var(--line); }
.tb-facts div { min-width: 0; }
.tb-facts dt { font-family: var(--cond); font-weight: 500; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); }
.tb-facts dd { margin: 0; color: var(--ink); }
.tb-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: auto; padding-top: var(--s2); }
.tb-submit p { margin: 0; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; align-content: start; }
.field-error:empty { display: none; }
.field label, .field .legend { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 8px; background: var(--raised); color: var(--ink); font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease; }
/* One fixed height for single-line controls, so a date input (taller by default in Chrome)
   lines up with the select and text fields beside it. */
input.input, select.input { height: 48px; line-height: 1.2; }
.input:hover { border-color: #A9A89F; }
.tb-card .input, .tour-panel .input, .contact-form .input { background-color: var(--ground); }
.tb-card .input:focus-visible, .tour-panel .input:focus-visible, .contact-form .input:focus-visible { background-color: var(--raised); }
.input:focus-visible { outline: 2px solid var(--slate); outline-offset: 1px; border-color: var(--slate); }
.input[aria-invalid="true"] { border-color: #B3261E; box-shadow: inset 3px 0 0 #B3261E; }
textarea.input { min-height: 120px; resize: vertical; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C2229' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s4); }
.form-grid .full { grid-column: 1 / -1; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--s3); }
.step-title { font-family: var(--cond); font-weight: 500; font-size: var(--fs-h5); letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s4); }
.field-error { font-size: var(--fs-small); color: #B3261E; }
.form-status { padding: var(--s4); border-left: 3px solid currentColor; font-size: var(--fs-body); }
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: #FFD7CF; background: rgba(0,0,0,0.15); }
.form-status[data-state="ok"] { color: #fff; background: rgba(255,255,255,0.08); }
.light-form .form-status[data-state="error"] { color: #8C1D18; background: #FBEAE8; }
.light-form .form-status[data-state="ok"] { color: var(--ink); background: var(--raised); }
.consent { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Plan sheet ---------- */
.plan-sheet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); background: var(--panel); }
.plan-sheet + .plan-sheet { margin-top: var(--s9); }
.ps-media { grid-column: 1 / 9; background: var(--raised); display: flex; flex-direction: column; min-width: 0; }
/* The stage is not a fixed 4:3 box. It grows to fill the media column, whose
   height is set by the panel, so the panel never has an empty block under its content; the min
   height keeps the plan large when the panel is short. */
.ps-stage { position: relative; flex: 1 1 auto; min-height: clamp(360px, 30vw, 480px); overflow: hidden; background: var(--raised); }
.ps-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; display: grid; place-items: center; }
.ps-view.is-active { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.ps-view img { width: 100%; height: 100%; object-fit: cover; }
.ps-view.is-plan img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; object-fit: contain; padding: var(--s5); outline: 0; }
.ps-view iframe { width: 100%; height: 100%; border: 0; }
.ps-view.is-tour > img { position: absolute; inset: 0; }
.ps-view .tour-start { position: relative; display: grid; justify-items: center; gap: var(--s3); text-align: center; padding: var(--s6) var(--s7); background: rgba(28, 34, 41, 0.9); color: #fff; max-width: 420px; }
.ps-view .tour-start .h5, .ps-view .tour-start p { margin: 0; color: #fff; }
.ps-caption { margin: 0; padding: var(--s2) var(--s4) 0; font-size: var(--fs-caption); line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.ps-caption.is-off { visibility: hidden; }
/* The thumbs split the strip's full width in equal columns
   (--n is the thumb count), so the strip always fits its column and never leaves an empty band. */
.ps-thumbs { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: var(--s2); padding: var(--s4); border-top: 1px solid var(--line); }
.ps-thumb { min-width: 0; aspect-ratio: 4 / 3; height: auto; padding: 0; border: 1px solid var(--line); background: var(--raised); cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; }
.ps-thumb img { width: 100%; height: 100%; object-fit: cover; outline: 0; }
.ps-thumb:hover { border-color: var(--slate); }
.ps-thumb:active { transform: scale(0.97); }
.ps-thumb[aria-selected="true"] { border: 2px solid var(--ink); }
/* A small badge names the plan and 3D-tour thumbs; it is a solid ink chip, so its
   text contrast does not depend on the photo under it. */
.ps-thumb .badge { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); background: rgba(28, 34, 41, 0.9); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.01em; text-align: left; text-wrap: balance; }
/* The panel runs title, figures, specs, actions, then the criteria note, top to bottom with even
   spacing and no pushed-down block. */
.ps-panel { grid-column: 9 / 13; color: #fff; padding: var(--s7); display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.ps-panel .h4 { color: #fff; }
.ps-panel .subname { color: var(--on-panel-muted); }
/* Plan specs: label and value rows on the panel, so the facts read as data, not a run-on line. */
.ps-specs { margin: 0; display: grid; }
.ps-specs > div { display: grid; grid-template-columns: minmax(96px, 2fr) 3fr; gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--line-panel); align-items: baseline; }
.ps-specs dt { color: var(--on-panel-muted); font-size: var(--fs-small); font-weight: 500; }
.ps-specs dd { margin: 0; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.ps-specs a { color: #fff; }
.ps-panel .note { color: var(--on-panel-muted); margin: 0; }
.ps-figures { padding-bottom: var(--s5); border-bottom: 1px solid var(--line-panel); margin-bottom: calc(var(--s5) * -1); }
.ps-figures .figure { color: #fff; }
.ps-figures .from { font-size: 20px; margin: var(--s3) 0 0; font-variant-numeric: lining-nums tabular-nums; }
.ps-figures .from strong { font-weight: 500; color: #fff; }
.ps-units { grid-column: 1 / -1; background: var(--ground); padding: var(--s7) 0 0; color: var(--ink); }
.ps-units-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.ps-units-head h3 { font-size: var(--fs-h5); font-weight: 500; letter-spacing: 0.06em; line-height: 1.2; }

/* Unit table and cards */
.unit-table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.unit-table caption { text-align: left; }
.unit-table th { text-align: left; font-weight: 500; font-size: var(--fs-small); color: var(--muted); padding: var(--s3) var(--s3); border-bottom: 1px solid var(--ink); white-space: nowrap; }
.unit-table td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.unit-table tbody tr { transition: background-color 0.2s ease; }
.unit-table tbody tr:hover { background: var(--raised); }
/* Rent and unit numbers in sans at medium weight with tabular figures, in
   ink; one quiet text action per unit; orange is kept for the single Apply button. */
.unit-table .rent-cell { font-family: var(--sans); font-size: 17px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.unit-table .unit-id { font-family: var(--sans); font-weight: 500; font-size: 16px; }
.unit-table .act { text-align: right; white-space: nowrap; width: 1%; }
.row-action { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); margin-right: calc(var(--s2) * -1); border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--slate); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px;
  transition-property: color, text-decoration-color; transition-duration: 0.2s; transition-timing-function: ease; }
.row-action:hover { color: var(--ink); text-decoration-color: currentColor; }
.unit-cards { list-style: none; display: none; }
.unit-card { background: var(--raised); border: 1px solid var(--line); padding: var(--s3) 14px var(--s1); }
.unit-card + .unit-card { margin-top: var(--s2); }
.unit-card p { margin: 0; max-width: none; }
.unit-card .top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-variant-numeric: lining-nums tabular-nums; }
.unit-card .unit-id { font-weight: 500; font-size: 16px; }
.unit-card .rent { font-size: 17px; font-weight: 500; white-space: nowrap; }
.unit-card .meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.unit-card .meta > span { min-width: 0; }
.unit-card .meta .row-action { flex: none; }
.empty-state { padding: var(--s7); background: var(--surface); display: grid; gap: var(--s4); justify-items: start; }
.stamp { font-size: var(--fs-small); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.stamp[data-stale="true"]::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); margin-right: 8px; vertical-align: 1px; }

/* Dialogs (plan sheet, lightbox, tours) */
dialog { border: 0; padding: 0; max-width: none; max-height: none; color: inherit; background: transparent; }
dialog::backdrop { background: rgba(28, 34, 41, 0.55); }
.sheet-dialog { width: 100vw; height: 100dvh; margin: 0; inset: 0; background: var(--ground); overflow-y: auto; overscroll-behavior: contain; }
.sheet-dialog[open] { animation: sheetIn 0.35s var(--ease-out); }
@keyframes sheetIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
/* The first row's height comes from the panel or the stage minimum, whichever is taller, so the
   dialog panel has no empty block either. */
.sheet-dialog .plan-sheet { min-height: 100dvh; align-content: start; grid-template-rows: auto auto; }
/* The panel sets the row height and the stage grows to fill it (360 px at least), keeping the
   panel free of an empty block. */
.sheet-dialog .ps-stage { min-height: 360px; }
.sheet-dialog .ps-units { padding: var(--s7) var(--gutter) var(--s9); }
.dialog-close { position: absolute; top: var(--s4); right: var(--s4); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-panel); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color 0.2s ease, transform 0.2s ease; }
.dialog-close:hover { background: rgba(255,255,255,0.12); }
.dialog-close:active { transform: scale(0.95); }
.dialog-close svg { width: 16px; height: 16px; }
.ps-panel { position: relative; }
.sheet-bar { display: none; }

.lightbox { width: 100vw; height: 100dvh; margin: 0; background: rgba(20, 24, 29, 0.96); color: #fff; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; animation: fadeIn 0.25s ease; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: var(--s4) var(--gutter); }
.lb-count { font-variant-numeric: tabular-nums; color: var(--on-panel-muted); font-size: var(--fs-small); }
.lb-stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); padding-inline: var(--s4); min-height: 0; }
.lb-stage figure { margin: 0; height: 100%; display: grid; place-items: center; min-height: 0; }
.lb-stage img { max-height: calc(100dvh - 180px); width: auto; max-width: 100%; object-fit: contain; outline: 0; }
.lb-caption { padding: var(--s4) var(--gutter) var(--s6); color: var(--on-panel-muted); font-size: var(--fs-small); text-align: center; max-width: 80ch; margin-inline: auto; }
.lb-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-panel); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color 0.2s ease, transform 0.2s ease; }
.lb-btn:hover { background: rgba(255,255,255,0.12); }
.lb-btn:active { transform: scale(0.95); }
.lb-btn svg { width: 18px; height: 18px; }
.lightbox .dialog-close { position: static; }

.tour-dialog { width: min(1200px, 94vw); height: min(760px, 86dvh); margin: auto; background: var(--panel); }
.tour-dialog[open] { display: grid; grid-template-rows: auto 1fr; animation: fadeIn 0.25s ease; }
.tour-dialog .lb-top { color: #fff; }
.tour-dialog iframe { width: 100%; height: 100%; border: 0; }

/* The Book a tour dialog (book-tour.js), after Idlewild's two-step scheduler: pick a home, then a
   weekday, a time and your details. A light box on the ground colour; the action bar sticks to the
   foot of the box while it scrolls. Full screen on phones (responsive.css). */
.book-dialog { width: min(760px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); margin: auto; background: var(--ground); color: var(--ink); border: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; }
.book-dialog.is-in[open] { animation: bkIn 0.4s var(--ease-out); }
@keyframes bkIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.bk-body { padding: var(--s8) var(--s8) 0; }
.bk-close { position: absolute; top: var(--s3); right: var(--s3); z-index: 3; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); border: 0; background: none; color: var(--ink);
  font-family: var(--cond); font-weight: 500; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }
.bk-close svg { width: 14px; height: 14px; }
.bk-close:hover { text-decoration: underline; text-underline-offset: 0.35em; }
.bk-stage.bk-in-fwd { animation: bkFwd 0.4s var(--ease-out); }
.bk-stage.bk-in-back { animation: bkBack 0.4s var(--ease-out); }
@keyframes bkFwd { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes bkBack { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
.bk-eyebrow { font-family: var(--cond); font-weight: 500; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3); }
.bk-title { font-family: var(--cond); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 var(--s3); }
.bk-title:focus { outline: none; }
.bk-sub { color: var(--muted); margin: 0 0 var(--s5); }
.bk-label { font-family: var(--cond); font-weight: 500; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); padding: 0; }
.bk-notice { font-size: var(--fs-small); line-height: 1.5; background: var(--raised); border-left: 3px solid var(--mark); padding: var(--s3) var(--s4); margin: 0 0 var(--s5); max-width: none; }
.bk-loading { font-family: var(--cond); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: var(--s9) 0; text-align: center; max-width: none; }
.bk-filter { margin-bottom: var(--s3); }
.bk-plan-filter { font-size: var(--fs-small); color: var(--ink); margin: 0 0 var(--s2); }
.link-btn { border: 0; background: none; padding: 0; color: var(--slate); font-size: 14px; text-decoration: underline; text-underline-offset: 0.3em; cursor: pointer; min-height: 32px; }
.bk-listhead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); padding: var(--s3) 0 var(--s2); }
.bk-count { margin: 0; font-family: var(--cond); font-weight: 500; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.bk-list { max-height: min(360px, calc(100dvh - 520px)); min-height: 200px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.bk-home { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s5); align-items: baseline; padding: var(--s4) var(--s3); border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color 0.2s ease; }
.bk-home:hover { background: var(--raised); }
.bk-home:has(input:checked) { background: var(--raised); box-shadow: inset 3px 0 0 var(--mark); }
.bk-home:has(input:focus-visible) { outline: 2px solid var(--slate); outline-offset: -2px; }
.bk-home input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.bk-home-name { font-family: var(--cond); font-weight: 500; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; }
.bk-home-name span { font-family: var(--sans); font-weight: 400; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.bk-home-rent { font-size: 17px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-home-rent small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.bk-home-spec, .bk-home-when { font-size: 14px; color: var(--muted); }
.bk-home-when { text-align: right; white-space: nowrap; }
.bk-home--any .bk-home-spec { grid-column: 1 / -1; }
.bk-empty { font-size: var(--fs-small); color: var(--muted); padding: var(--s5) var(--s3); margin: 0; max-width: none; }
/* The action bar: what happens next on the left, the one primary button on the right. */
.bk-next { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin: var(--s6) calc(var(--s8) * -1) 0; padding: var(--s4) var(--s8) var(--s5);
  background: var(--ground); border-top: 1px solid var(--line); box-shadow: 0 -14px 24px -18px rgba(28, 34, 41, 0.25); }
.bk-next-text { margin: 0; min-height: 46px; display: flex; flex-direction: column; justify-content: center; font-size: 14px; line-height: 1.45; color: var(--muted); }
.bk-next-text strong { font-family: var(--cond); font-weight: 500; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.bk-go svg { transition: transform 0.25s var(--ease-out); }
.bk-go:not([disabled]):hover svg { transform: translateX(4px); }
.bk-chosen { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: var(--s4) 0; margin: var(--s4) 0 var(--s5); }
.bk-chosen p { margin: 0; }
.bk-chosen-name { font-family: var(--cond); font-weight: 500; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15; }
.bk-chosen-spec { font-size: 14px; color: var(--muted); margin-top: var(--s1) !important; }
.bk-group { margin-bottom: var(--s5); }
.bk-group > legend { float: left; width: 100%; }
.bk-group > legend + * { clear: both; }
.bk-group .field-error { display: block; margin-top: var(--s2); }
.bk-group .field-error:empty { display: none; }
/* Days: a Monday-to-Friday calendar of the next 14 weekdays. */
.bk-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bk-dh { font-family: var(--cond); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 2px; }
.bk-day { position: relative; display: grid; place-items: center; padding: 6px 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; min-height: 44px; }
.bk-day:hover { border-color: var(--slate); }
.bk-day:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-day:has(input:focus-visible) { outline: 2px solid var(--slate); outline-offset: 2px; }
.bk-day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.bk-dm { font-family: var(--cond); font-weight: 500; font-size: 16px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.bk-times { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.bk-times .chip { justify-content: center; padding: 0 6px; min-height: 40px; font-size: 14px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.bk-times .chip.is-off { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.bk-form .input { background-color: var(--raised); }
.bk-honest { font-size: var(--fs-small); color: var(--ink); margin: 0 0 var(--s2); max-width: none; }
.bk-form .consent { margin: 0; }
.bk-status { margin-top: var(--s4); padding: var(--s4); border-left: 3px solid currentColor; font-size: 15px; line-height: 1.5; }
.bk-status:empty { display: none; }
.bk-status:focus { outline: none; }
.bk-status[data-state="error"] { color: #8C1D18; background: #FBEAE8; }
.bk-status[data-state="fallback"] { color: var(--ink); background: var(--raised); border-left-color: var(--accent); display: grid; gap: var(--s3); justify-items: start; }
.bk-status[data-state="fallback"] strong { font-family: var(--cond); font-weight: 500; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; display: block; }
.bk-done { text-align: center; padding: var(--s6) 0 var(--s8); display: grid; justify-items: center; }
.bk-done p { margin: 0 auto var(--s3); max-width: 46ch; }
.bk-strong { font-family: var(--cond); font-weight: 500; font-size: 26px; letter-spacing: 0.04em; text-transform: uppercase; }
.bk-done-home { color: var(--muted); }
.bk-done .actions { justify-content: center; margin-top: var(--s4); }

/* ---------- Floor plans and availability ---------- */
/* A compact title band, then a sticky filter bar, then one section per plan: the render in a framed
   white box (300 px tall at 1440, never clipped) beside the plan's header row, and that plan's units
   directly under the header. At 1440 x 900 two plan header rows fit in one viewport. */
.fp-intro { padding-block: var(--s7) var(--s5); }
.fp-intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.fp-h1 { grid-column: 1 / 10; font-size: clamp(38px, 22px + 2.6vw, 60px); white-space: nowrap; line-height: 0.95; letter-spacing: 0.02em; }
.fp-intro .lead { grid-column: 10 / 13; margin: 0 0 0.1em; font-size: 18px; }
.fp-bar { position: sticky; top: var(--header); z-index: 40; background: var(--ground); border-block: 1px solid var(--line); transition: top 0.25s var(--ease-out); }
.site-header.is-hidden ~ main .fp-bar { top: 0; }
.fp-filters { display: flex; align-items: flex-end; gap: var(--s5); padding-block: var(--s2) var(--s3); }
.fp-filters .field { gap: 4px; }
.fp-filters #f-sort { min-width: 13.5em; }
.fp-filters .field > label, .fp-filters .legend { font-size: 13px; }
.fp-filters fieldset.field > legend { line-height: 1.6; }
.fp-beds .chip { min-height: 44px; min-width: 48px; justify-content: center; }
.fp-extra { display: flex; align-items: flex-end; gap: var(--s4); }
.fp-extra .field { width: 168px; }
.fp-extra .input { height: 44px; min-height: 44px; padding-block: 8px; }
.fp-toggle { display: none; }
.fp-count { margin: 0 0 0 auto; align-self: center; text-align: right; display: grid; gap: 2px; font-family: var(--cond); font-weight: 500; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fp-count .stamp { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 13px; }
.fp-list { padding-bottom: var(--section); }
.fp-plan { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 24px; row-gap: var(--s2); padding-block: 20px; border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header) + 96px); }
.fp-media { grid-column: 1 / 5; grid-row: 1 / 3; align-self: start; height: 296px; background: var(--raised); border: 1px solid var(--line); position: relative; }
.fp-media img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; outline: 0; }
.fp-head { grid-column: 5 / 13; padding-left: var(--s4); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4) var(--s6); flex-wrap: wrap; }
.fp-name .h3 { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; font-size: clamp(26px, 23px + 0.55vw, 32px); }
.fp-name .subname { display: inline; margin: 0; }
.fp-meta { margin: var(--s1) 0 0; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.fp-side { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.fp-price { margin: 0; display: grid; grid-template-columns: auto; justify-items: end; font-variant-numeric: lining-nums tabular-nums; line-height: 1.25; }
.fp-price strong { font-weight: 500; font-size: 22px; }
.fp-avail { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.fp-units { grid-column: 5 / 13; padding-left: var(--s4); min-width: 0; }
.fp-table th { padding-block: var(--s2); }
.fp-table td, .unit-table.fp-table tbody th { padding-block: 0; height: 44px; }
.fp-table .act { display: table-cell; }
.fp-table .act .row-action + .row-action { margin-left: var(--s4); }
.fp-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; border: 0; background: none; padding: 0; cursor: pointer; }
.fp-empty { margin: var(--s3) 0 0; padding: var(--s4) var(--s5); background: var(--surface); max-width: none; }
.fp-foot { margin-top: var(--s6); max-width: 90ch; }
.fp-foot + .fp-foot { margin-top: var(--s3); }
.link-btn { display: inline; padding: 0; border: 0; background: none; color: var(--slate); font-size: 15px; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; min-height: 0; }
.link-btn:hover { color: var(--ink); }
.unit-card .acts { display: inline-flex; gap: var(--s3); flex: none; }
/* Shared by the tour page's fieldsets: the legend takes the same gap as the other labels. */
fieldset.field > legend { float: left; width: 100%; margin: 0; line-height: 1.55; }
fieldset.field > legend + * { clear: both; }

/* ---------- Gallery ---------- */
.jump { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; padding-block: var(--s6); border-bottom: 1px solid var(--line); }
.jump a { font-size: 15px; color: var(--ink); text-decoration: none; padding-block: 10px; }
.jump a:hover { text-decoration: underline; text-underline-offset: 6px; }
.chapter { padding-block: var(--s10) 0; }
.chapter-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: var(--s8); }
.chapter-head .title { grid-column: 1 / 5; border-left: 1px solid var(--ink); padding-left: var(--s5); }
.chapter-head .title p { margin-top: var(--s4); color: var(--muted); }
.chapter-head .duo { grid-column: 6 / 13; }
.chapter-head.flip .title { grid-column: 9 / 13; grid-row: 1; }
.chapter-head.flip .duo { grid-column: 1 / 8; grid-row: 1; }
/* --cols is set per chapter so the grid divides its photos evenly. */
.thumb-grid { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s3); }
.thumb-grid button { display: block; width: 100%; padding: 0; border: 0; background: var(--surface); cursor: zoom-in; aspect-ratio: var(--ar, 1); overflow: hidden; position: relative; }
.thumb-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out), opacity 0.2s ease; }
.thumb-grid button:hover img { transform: scale(1.03); }
.thumb-grid button:active img { opacity: 0.85; }
.thumb-grid .tag, .duo .tag { position: absolute; left: 8px; bottom: 8px; background: rgba(245,244,240,0.92); color: var(--ink); font-size: 12px; padding: 2px 8px; }

/* ---------- Amenities ---------- */
.two-col { columns: 2; column-gap: var(--s6); list-style: none; }
.two-col li { break-inside: avoid; padding-block: var(--s3); border-top: 1px solid var(--line); }
.amen-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--s8); }
.amen-block .duo { grid-column: 1 / 8; }
.amen-block .list { grid-column: 9 / 13; align-self: center; }
.bleed-glass { position: relative; min-height: 860px; display: grid; align-items: center; }
.bleed-glass > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed-glass .wrap { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-block: var(--section); }
.bleed-glass .glass { grid-column: 7 / 13; padding: var(--s8); }
.bleed-glass .glass .two-col li { border-top-color: #C9C8BF; }

/* ---------- Definition list (pets) ---------- */
.deflist { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.deflist dt, .deflist dd { padding-block: var(--s4); border-top: 1px solid var(--line); margin: 0; }
.deflist dt { color: var(--muted); font-weight: 500; padding-right: var(--s6); }
.deflist dd { font-family: var(--cond); font-weight: 400; font-size: 28px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.deflist dt:last-of-type, .deflist dd:last-of-type { border-bottom: 1px solid var(--line); }
.text-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--s8); }
.text-block > .title { grid-column: 1 / 5; }
.text-block > .body { grid-column: 7 / 13; }

/* ---------- Neighborhood ---------- */
/* A full-viewport app under the header: the category rail (260 px), the list panel that slides open
   to 320 px for the chosen category, and the map filling the rest. */
.nb { display: grid; grid-template-columns: 260px var(--nb-list, 0px) minmax(0, 1fr); height: calc(100svh - var(--header)); min-height: 620px; max-height: 1100px; overflow: hidden;
  border-bottom: 1px solid var(--line); transition: grid-template-columns 0.6s var(--ease-out); }
.nb.is-open { --nb-list: 320px; }
.nb-rail { background: var(--ground); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; padding-block: var(--s6) var(--s5); }
.nb-intro { padding: 0 var(--s5) var(--s5); }
.nb-title { font-size: var(--fs-h4); font-weight: 500; letter-spacing: 0.04em; line-height: 1.1; }
.nb-sub { margin: var(--s3) 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); font-weight: 500; }
.nb-cats { display: grid; }
.nb-cat { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: var(--s3); width: 100%; min-height: 52px; padding: var(--s2) var(--s5); border: 0; border-left: 2px solid transparent;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-size: 16px; line-height: 1.25; transition: background-color 0.25s ease, border-color 0.25s ease; }
.nb-cat:hover { background: var(--surface); }
.nb-cat[aria-pressed="true"] { background: var(--surface); border-left-color: var(--mark); }
.nb-cat:focus-visible { outline-offset: -2px; }
.nb-ico { display: flex; color: var(--slate); }
.nb-ico svg { width: 20px; height: 20px; }
.nb-label { font-weight: 500; }
.nb-count { font-size: 14px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.nb-note { margin: auto 0 0; padding: var(--s4) var(--s5) 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.nb-list { background: var(--panel); color: #fff; overflow: hidden; min-width: 0; }
.nb-list > * { width: 320px; }
.nb.is-open .nb-list { overflow-y: auto; }
.nb-list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); padding: var(--s6) var(--s5) var(--s4); }
.nb-list-title { font-size: var(--fs-h4); font-weight: 500; letter-spacing: 0.04em; line-height: 1.1; color: #fff; }
.nb-close { flex: none; width: 44px; height: 44px; margin: -8px -10px 0 0; border: 1px solid var(--line-panel); border-radius: 50%; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color 0.2s ease; }
.nb-close:hover { background: rgba(255,255,255,0.12); }
.nb-close svg, .nb-card-close svg { width: 14px; height: 14px; }
.nb-list :focus-visible { outline-color: #fff; }
.nb-places { list-style: none; padding: 0 var(--s4) var(--s6); }
.js .nb-places:not(.is-current) { display: none; }
.nb-place { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--s3); width: 100%; min-height: 52px; padding: var(--s2) var(--s2); border: 0; border-bottom: 1px solid var(--line-panel);
  background: transparent; color: #fff; text-align: left; cursor: pointer; font-size: 15px; line-height: 1.35; transition: background-color 0.2s ease; }
.nb-place:hover, .nb-place.is-hot { background: rgba(255, 255, 255, 0.08); }
.nb-place[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); }
.nb-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color 0.2s ease, color 0.2s ease; }
.nb-place[aria-pressed="true"] .nb-num, .nb-place.is-hot .nb-num { background: #fff; color: var(--panel); }
.nb-dist { font-size: 14px; font-weight: 500; color: var(--on-panel-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb-map { position: relative; background: var(--surface); min-width: 0; }
.nb-canvas { position: absolute; inset: 0; }
.nb-badge { position: absolute; left: var(--s5); top: var(--s5); z-index: 2; display: grid; gap: 4px; padding: var(--s3) var(--s4); background: rgba(245, 244, 240, 0.95); border: 1px solid var(--line); pointer-events: none;
  box-shadow: 0 12px 32px -24px rgba(28, 34, 41, 0.5); }
.nb-badge-name { display: flex; align-items: center; gap: var(--s2); font-family: var(--cond); font-weight: 500; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); line-height: 1.1; }
.nb-badge-addr { font-family: var(--cond); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mark); flex: none; }
.nb-recentre { position: absolute; right: var(--s5); top: var(--s5); z-index: 2; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line); background: rgba(245, 244, 240, 0.95);
  color: var(--ink); font-size: 14px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.nb-recentre:hover { background: var(--slate); border-color: var(--slate); color: #fff; }
.nb-card { position: absolute; right: 64px; bottom: var(--s6); z-index: 3; width: min(320px, calc(100% - 96px)); padding: var(--s5); background: var(--raised); border: 1px solid var(--line); box-shadow: 0 22px 48px -28px rgba(28, 34, 41, 0.45);
  animation: cardIn 0.25s var(--ease-out); }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nb-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.nb-card-name { font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: 0; text-transform: none; text-wrap: balance; }
.nb-card-close { flex: none; width: 44px; height: 44px; margin: -12px -14px 0 0; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.nb-card-close:hover { background: var(--surface); color: var(--ink); }
.nb-card-meta { margin: var(--s2) 0 0; font-size: 14px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.nb-card-note { margin: var(--s2) 0 0; font-size: 15px; color: var(--muted); }
.nb-card-dir { margin-top: var(--s4); }
/* Pins: numbered ink dots matching the list. MapLibre sets the marker's transform, so state is
   drawn on size, colour and ring, never on transform. */
.nb-pin { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; border: 2px solid #fff; display: grid; place-items: center; font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1;
  box-shadow: 0 2px 8px rgba(28, 34, 41, 0.3); cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.25s ease, width 0.2s ease, height 0.2s ease, font-size 0.2s ease; }
.nb-pin.is-hot { background: var(--slate); box-shadow: 0 0 0 5px rgba(68, 85, 105, 0.25); }
.nb-pin.is-active { width: 34px; height: 34px; font-size: 14px; background: var(--accent); box-shadow: 0 0 0 6px rgba(224, 117, 37, 0.3), 0 4px 12px rgba(28, 34, 41, 0.35); }
.nb-home { width: 40px; height: 40px; border-radius: 50%; background: var(--mark); border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 10px 22px -8px rgba(28, 34, 41, 0.6); }
.nb-home span { font-family: var(--cond); font-weight: 500; font-size: 20px; line-height: 1; color: #fff; }
.map-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s6); text-align: center; color: var(--muted); }
.pin--home { width: 28px; height: 28px; border-radius: 50%; background: var(--mark); border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(28,34,41,0.25); }
.pin--home::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.maplibregl-ctrl-attrib { font-size: 11px; }
.maplibregl-canvas:focus-visible { outline: 2px solid var(--slate); outline-offset: -2px; }
.maplibregl-ctrl-group { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--line); }

/* ---------- Tour page ---------- */
/* The same light form styling as the Book a tour band, on the ground beside the photo. */
.tour-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.tour-layout .photo-side { grid-column: 1 / 7; position: relative; }
.tour-layout .photo-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.tour-panel { grid-column: 7 / 13; padding: var(--s9) var(--s9) var(--s10); display: grid; gap: var(--s7); align-content: start; }
.tour-form .step { display: grid; gap: var(--s5); padding-top: var(--s6); border-top: 1px solid var(--line); }
.tour-form .step + .step { margin-top: var(--s7); }
.tour-form .step > legend { float: left; width: 100%; margin: 0; }
.tour-form .step > legend + * { clear: both; }
.tour-form .form-status { margin-top: var(--s5); }
.tour-form > .pill { margin-top: var(--s6); }
.time-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
/* Tour time and bedroom chips are 44 px tall. */
.tour-form .chip { min-height: 44px; justify-content: center; }

/* ---------- Contact ---------- */
/* Each section head sits on its own content, both h2 at the same size. */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--s8); align-items: start; }
.contact-call { grid-column: 1 / 6; }
.contact-form { grid-column: 7 / 13; }
.contact-call .h3, .contact-form .h3 { margin-bottom: var(--s6); }
.contact-lines { display: grid; gap: var(--s3); }
.contact-lines a.h5 { color: var(--ink); text-decoration: none; }
.contact-lines a.h5:hover { text-decoration: underline; }
.map-static { height: 420px; background: var(--surface); position: relative; }

/* ---------- Footer ---------- */
/* The band above is light, so the dark footer needs no seam rule; the colour change is the
   separation. */
.site-footer { background: var(--panel); color: #fff; padding-block: var(--s10) var(--s6); font-size: 15px; }
.site-footer a { color: #fff; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 0.25em; }
.site-footer a:hover { text-decoration-color: #fff; color: #fff; }
.foot-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--s7); padding-bottom: var(--s8); }
.foot-brand { grid-column: 1 / 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5); padding-right: var(--s6); }
/* Powered by Kiara: the mark and wordmark are alpha masks filled with currentColor, so the lockup
   takes the Kiara orange mark and a white wordmark on the dark footer. */
.powered-by-kiara { --kiara-orange: #f26440; display: inline-flex; align-items: center; gap: 14px; align-self: stretch; min-height: 44px; margin-top: var(--s2); padding-top: var(--s5); border-top: 1px solid var(--line-panel); color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: opacity 0.2s ease; }
.powered-by-kiara:hover { opacity: 0.72; }
.pbk-label { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.pbk-lockup { display: inline-flex; align-items: center; gap: 8px; }
.pbk-mark, .pbk-wordmark { display: block; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }
.pbk-mark { width: 20px; height: 22px; color: var(--kiara-orange); -webkit-mask-image: url("/assets/brand/kiara-mark.png"); mask-image: url("/assets/brand/kiara-mark.png"); }
.pbk-wordmark { width: 79px; height: 19px; color: #fff; -webkit-mask-image: url("/assets/brand/kiara-wordmark.png"); mask-image: url("/assets/brand/kiara-wordmark.png"); }
.foot-logo { display: inline-block; }
.foot-logo img { width: 148px; height: auto; outline: 0; }
.foot-line { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--on-panel-muted); max-width: 34ch; }
.foot-col { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); min-width: 0; }
.foot-col[aria-labelledby="foot-contact"] { grid-column: span 3; }
.foot-head { font-family: var(--cond); font-weight: 500; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--on-panel-muted); margin-bottom: var(--s3); }
.foot-list { list-style: none; display: grid; gap: 2px; }
.foot-list a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; text-decoration: none; }
.foot-list a:hover { text-decoration: underline; }
.foot-list a[href^="mailto"] { overflow-wrap: anywhere; }
.foot-social svg { width: 16px; height: 16px; flex: none; }
.foot-address { font-style: normal; line-height: 1.6; margin-bottom: var(--s2); }
.foot-col > a { display: inline-flex; align-items: center; min-height: 36px; }
.foot-hours-text { margin: 0; line-height: 1.6; }
.muted-on-dark { color: var(--on-panel-muted); margin-bottom: var(--s2); }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line-panel); font-size: 14px; color: var(--on-panel-muted); }
.foot-legal p { margin: 0; }
.eho { display: inline-flex; align-items: center; gap: var(--s3); }
.eho svg { width: 30px; height: 30px; flex: none; }
.legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.legal-links a { display: inline-block; padding-block: 6px; }
.copyright { color: var(--on-panel-muted); margin-left: auto !important; }

/* ---------- Motion: load moment and scroll reveals ---------- */
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.js .hero-h1 .line > span { animation: rise 0.9s var(--ease-out) both; animation-delay: 0.15s; }
.js .hero-h1 .line + .line > span { animation-delay: 0.27s; }
.js .hero-lead, .js .hero-copy .actions { animation: fadeUp 0.6s ease both; animation-delay: 0.55s; }
.curtain { position: relative; }
.curtain.reveal::after { content: ""; position: absolute; inset: 0; background: var(--ground); transform-origin: right; transform: scaleX(1); transition: transform 0.9s var(--ease-out); z-index: 3; pointer-events: none; }
.curtain.reveal.is-in::after { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .hero-stack { transform: none; }
  .menu-links li, .menu-more li, .menu-photo img { transform: none !important; }
  .curtain.reveal::after { display: none; }
}
.half-bleed, .bleed-glass { padding-block: 0 !important; }
.contact-lines a.h5[href^="mailto"] { text-transform: none; }
.unit-table tbody th { color: var(--ink); border-bottom: 1px solid var(--line); padding: var(--s3); font-size: 16px; }
.unit-table tbody tr.is-target, .unit-card.is-target { background: var(--raised); box-shadow: inset 3px 0 0 var(--mark); }
a[href^="tel:"] { white-space: nowrap; }
/* The two 3D-tour buttons on /amenities stack at one shared width. */
.amen-block .list .actions { display: grid; grid-template-columns: max-content; justify-content: start; }