/* ==========================================================================
   Sharon Valley Smart City (Zvishavane): public site stylesheet
   Light, photography-led, monochrome. Rounded photo panels with tabs cut
   into their edges, pill buttons with a white arrow disc, hairline rows.
   Sections:
     1. Tokens        2. Fonts         3. Base & browser surfaces
     4. Typography    5. Layout        6. Panels, tabs & navigation
     7. Pills & links 8. Section heads, labels & rows
     9. Cards, figures & placeholders  10. Content blocks
    11. Gallery & lightbox            12. Map & video
    13. Forms         14. Footer       15. Utilities & motion
    16. Premium: previews, page transitions, rows that open, WhatsApp,
        languages, sign-up, stand sheet
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --paper: #f6f6f4;
  --white: #ffffff;
  --stone: #ebebe7;
  --stone-2: #dedeD9;
  --line: #e4e4df;
  --ink: #111111;
  --ink-700: #3b3b38;
  --ink-500: #5f5f5b;

  --chip-available-bg: #dcefe7; --chip-available-fg: #176a55;
  --chip-limited-bg: #f6e3d6;   --chip-limited-fg: #8f421a;
  --chip-sold-bg: #e6e6e2;      --chip-sold-fg: #5f5f5b;
  --error: #a8271f;
  --error-bg: #f8e1df;

  --font-sans: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-italic: "Bodoni Moda", "Bodoni Moda Fallback", Georgia, "Times New Roman", serif;
  --font-display: "Gilda Display", "Gilda Display Fallback", Georgia, "Times New Roman", serif;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-statement: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
  --text-h2: clamp(2.75rem, 1.75rem + 3vw, 4.25rem);
  --text-h3: 1.25rem;
  --text-hero: clamp(3.25rem, 1.5rem + 9vw, 8.5rem);
  --leading-body: 1.55;
  --measure: 66ch;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem;
  --space-12: 6rem; --space-16: 8rem;

  --r-panel: 20px;
  --r-card: 14px;
  --r-input: 8px;
  --r-notch: 18px;
  --rule: 1px solid var(--line);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 160ms;
  --dur: 220ms;

  --container: 82rem;
  --gutter: 1rem;

  color-scheme: light;
}
@media (min-width: 40em) {
  :root { --gutter: 1.5rem; --r-panel: 28px; --r-notch: 24px; }
}

/* 2. Fonts ---------------------------------------------------------------- */
@font-face { font-family: "Onest"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/onest-400.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/onest-600.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/bodoni-moda-italic.woff2") format("woff2"); }
@font-face { font-family: "Gilda Display"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/gilda-display-400.woff2") format("woff2"); }

/* Metric-matched local fallbacks so the swap does not move the layout. */
@font-face { font-family: "Onest Fallback"; font-weight: 400; src: local("Arial"), local("Roboto"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 105.13%; ascent-override: 92.27%; descent-override: 29.01%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica-Bold"); size-adjust: 99.39%; ascent-override: 97.59%; descent-override: 30.69%; line-gap-override: 0%; }
@font-face { font-family: "Bodoni Moda Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"), local("Noto Serif Italic"), local("Times New Roman Italic"); size-adjust: 95.62%; ascent-override: 117.66%; descent-override: 41.83%; line-gap-override: 0%; }
@font-face { font-family: "Gilda Display Fallback"; src: local("Georgia"), local("Noto Serif"), local("Times New Roman"); size-adjust: 104%; ascent-override: 86%; descent-override: 27%; line-gap-override: 0%; }

/* 3. Base & browser surfaces --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--space-6); background: var(--paper); scrollbar-color: var(--ink-500) var(--paper); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  accent-color: var(--ink);
  caret-color: var(--ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; outline: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.on-photo :focus-visible, .on-photo:focus-visible { outline-color: var(--white); }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: var(--rule); margin: var(--space-8) 0; }
table { border-collapse: collapse; width: 100%; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* 4. Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h2); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: -0.01em; line-height: 1.3; }
h4 { font-size: var(--text-base); line-height: 1.4; }

/* Two-line display: a bold sans line over an italic Didone line. */
.headline { font-weight: 600; line-height: 0.95; letter-spacing: -0.035em; margin: 0; color: inherit; }
.headline em { display: block; font-family: var(--font-italic); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-size: 1.04em; line-height: 1; padding-bottom: 0.08em; }
.headline--hero { font-size: var(--text-hero); }
.headline--section { font-size: var(--text-h2); line-height: 1; }
.panel--photo .headline--section { font-size: clamp(3rem, 1.75rem + 3.5vw, 4.5rem); }
.headline--section em { font-size: 1.02em; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); transition: text-decoration-color var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: var(--ink); } }

.statement { font-size: var(--text-statement); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); font-weight: 400; max-width: 26ch; margin: 0; }
.lede { font-size: var(--text-lg); color: var(--ink-700); max-width: 44ch; }
.small { font-size: var(--text-sm); }
.muted { color: var(--ink-500); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* 5. Layout --------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-10); }
.section--tight { padding-block: var(--space-8); }
.section + .section { padding-top: 0; }
@media (min-width: 56em) { .section { padding-block: var(--space-12); } .section--tight { padding-block: var(--space-10); } }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 40em) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--split { grid-template-columns: 4fr 8fr; gap: var(--space-8); align-items: start; }
  .grid--split-rev { grid-template-columns: 8fr 4fr; gap: var(--space-8); align-items: start; }
}
.stack > * + * { margin-top: var(--space-4); }
.stack--loose > * + * { margin-top: var(--space-6); }
.rule-top { border-top: var(--rule); padding-top: var(--space-5); }
/* A ruled section keeps its inset even after another section (which drops top padding). */
.section.rule-top { padding-top: var(--space-6); }

/* 6. Panels, tabs & navigation -------------------------------------------- */
.skip-link { position: absolute; left: var(--space-4); top: -100%; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--paper); border-radius: 999px; text-decoration: none; }
.skip-link:focus { top: var(--space-2); }

/* A rounded photo panel that owns its own header tabs. */
.panel {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--stone);
  color: var(--ink);
  isolation: isolate;
}
.panel--photo { color: var(--white); }
.panel__media { position: absolute; inset: 0; z-index: 0; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; }
.panel__media .placeholder { width: 100%; height: 100%; border: 0; border-radius: 0; }
.panel--photo .panel__media::after {
  /* Scrim: keeps text on photographs at AA contrast; functional, not decorative. */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.42) 40%, rgba(0, 0, 0, 0.12) 68%, rgba(0, 0, 0, 0.08) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 38%);
}
.panel__body { position: relative; z-index: 1; padding: var(--space-4); min-height: inherit; display: flex; flex-direction: column; }
.on-photo, .on-photo .headline, .on-photo p, .on-photo h2 { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
/* Small text on a photograph gets a firmer shadow: the client's photographs are not known in advance. */
.on-photo p, .on-photo .wordmark, .wordmark.on-photo { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.on-photo .pill { text-shadow: none; }

/* Tabs: paper-coloured shapes cut into a panel edge, with concave fillets. */
.tab { --r: var(--r-notch); position: absolute; z-index: 3; background: var(--paper); color: var(--ink); }
.tab::before, .tab::after { content: ""; position: absolute; width: var(--r); height: var(--r); pointer-events: none; }
.tab--top { top: 0; left: 50%; transform: translateX(-50%); border-radius: 0 0 var(--r) var(--r); padding: var(--space-2) var(--space-3) var(--space-3); }
.tab--top::before { top: 0; right: 100%; background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--top::after { top: 0; left: 100%; background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--top-right { top: 0; right: 0; border-radius: 0 0 0 var(--r); padding: var(--space-2) 0 var(--space-3) var(--space-3); }
.tab--top-right::before { top: 0; right: 100%; background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--top-right::after { top: 100%; right: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--top-left { top: 0; left: 0; border-radius: 0 0 var(--r) 0; padding: var(--space-2) var(--space-3) var(--space-3) 0; }
.tab--top-left::before { top: 0; left: 100%; background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--top-left::after { top: 100%; left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--bottom { bottom: 0; left: 50%; transform: translateX(-50%); border-radius: var(--r) var(--r) 0 0; padding: var(--space-3) var(--space-4) var(--space-2); }
.tab--bottom::before { bottom: 0; right: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--bottom::after { bottom: 0; left: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--bottom-right { bottom: 0; right: 0; border-radius: var(--r) 0 0 0; padding: var(--space-3) 0 0 var(--space-3); }
.tab--bottom-right::before { bottom: 0; right: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--bottom-right::after { bottom: 100%; right: 0; background: radial-gradient(circle at 0 0, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--corner { --r: 14px; width: 3rem; height: 1.25rem; padding: 0; }
.tab--bottom.tab--corner { width: 9rem; height: 1.125rem; }
.tab--bottom-right.tab--corner, .tab--top-left.tab--corner { width: 4rem; }

/* Header inside a panel: wordmark, nav tab, enquire tab. */
.wordmark { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 4; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.02em; color: inherit; text-decoration: none; line-height: 1.05; padding: 0.5rem 0; max-width: 5.25rem; }
.wordmark small { display: none; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0; opacity: 0.85; margin-top: 3px; }
@media (max-width: 23.99em) { .wordmark { font-size: 0.75rem; max-width: 4rem; } .tab--top-right { padding-left: var(--space-2); } }
@media (min-width: 40em) { .wordmark { top: var(--space-5); left: var(--space-6); font-size: 1.125rem; max-width: none; white-space: nowrap; line-height: 1; padding: 0.5rem 0; } .wordmark small { display: block; } }

.nav-tab { display: flex; align-items: center; gap: var(--space-2); }
.tab--top { display: none; }
.tab--top-right { display: flex; align-items: center; gap: var(--space-2); }
.site-nav__list { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-5); }
.site-nav__list a { font-size: var(--text-sm); font-weight: 400; color: var(--ink); text-decoration: none; padding: var(--space-2) 0; position: relative; }
.site-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-out); }
.site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .site-nav__list a:hover::after { transform: scaleX(1); } }

.nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: var(--text-sm); }
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Mobile menu: a paper sheet dropped inside the panel. */
.site-menu { display: none; position: absolute; z-index: 5; top: 4rem; left: var(--space-4); right: var(--space-4); background: var(--paper); color: var(--ink); border-radius: var(--r-panel); padding: var(--space-3) var(--space-5) var(--space-5); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
.panel[data-open="true"] .site-menu { display: block; }
.site-menu ul { list-style: none; margin: 0; padding: 0; }
.site-menu a { display: block; padding: var(--space-3) 0; min-height: 3rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: var(--rule); }
.site-menu a[aria-current="page"] { display: flex; align-items: center; gap: var(--space-3); }
.site-menu a[aria-current="page"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
.site-menu a.pill { display: flex; margin-top: var(--space-4); width: 100%; justify-content: space-between; color: var(--white); border-bottom: 0; padding: 0.375rem 0.375rem 0.375rem 1.25rem; min-height: 3rem; }

@media (min-width: 64em) {
  .nav-toggle, .site-menu { display: none !important; }
  .site-nav__list { display: flex; }
  .tab--top { display: block; padding: var(--space-3) var(--space-8) var(--space-4); }
}

/* Home hero, after the pinned reference: a full-bleed photograph in an
   evening tone, links around a centred three-tier mark, a large upright
   serif headline, one line in capitals, one square outlined button, thin
   arrows. (Inner pages keep the tab header.) */
.hero-frame { padding: 0; }
.hero--quiet { display: flex; flex-direction: column; justify-content: flex-end; border-radius: 0; min-height: max(34rem, 100vh); min-height: max(34rem, 100svh); }
.hero--quiet.panel--photo .panel__media::after { content: none; }
.hero--quiet.panel--photo::after {
  /* Evening tone over every slide (the strip scrolls; the panel does not): an even
     wash, deeper at the foot for the headline and at the head for the links. */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 8, 12, 0.72) 0%, rgba(8, 8, 12, 0.3) 38%, rgba(8, 8, 12, 0) 62%), linear-gradient(to bottom, rgba(8, 8, 12, 0.62) 0%, rgba(8, 8, 12, 0.3) 14%, rgba(8, 8, 12, 0) 30%), rgba(8, 8, 12, 0.24);
}

.hero-bar { position: absolute; z-index: 4; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5); color: var(--ink); }
.panel--photo .hero-bar { color: var(--white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.hero-mark { display: inline-flex; flex-direction: column; gap: 0.3rem; color: inherit; text-decoration: none; text-transform: uppercase; line-height: 1.2; }
.hero-mark__name { font-size: 1rem; font-weight: 400; letter-spacing: 0.2em; }
.hero-mark__tier { font-size: 0.6875rem; letter-spacing: 0.3em; opacity: 0.9; }
.hero-mark__tier:first-child { display: none; }
.hero-bar__nav { display: flex; align-items: center; }
/* Below 80em the bar shows the mark and the Menu button; the links are in the menu sheet. */
.hero-bar__nav > .hero-bar__links { display: none; }
.hero-bar__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2.25rem; }
.hero-bar__links a, .lang-switch--hero summary { display: inline-block; position: relative; padding: 0.75rem 0; color: inherit; text-decoration: none; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-bar__phone { font-variant-numeric: tabular-nums lining-nums; }
.hero-bar__links a::after { content: ""; position: absolute; left: 0; right: 0.1em; bottom: 0.4rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hero-bar__links a:hover::after { transform: scaleX(1); } }
.hero-bar__menu { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.5rem 0.25rem; border: 0; background: transparent; color: inherit; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.hero-bar__menu .icon { width: 1.25rem; height: 1.25rem; }
.hero-bar__menu .nav-toggle__close { display: none; }
.hero-bar__menu[aria-expanded="true"] .nav-toggle__open { display: none; }
.hero-bar__menu[aria-expanded="true"] .nav-toggle__close { display: block; }
.hero-bar a:focus-visible, .hero-bar summary:focus-visible, .hero-bar__menu:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
@media (max-width: 39.99em) { .hero-mark__tier { letter-spacing: 0.22em; white-space: nowrap; } }
@media (max-width: 23.99em) { .hero-bar { padding-inline: var(--space-4); } .hero-mark__name { letter-spacing: 0.14em; } .hero-bar__menu > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hero-bar__menu { min-width: 2.75rem; justify-content: center; } }
.site-menu--hero { top: 5rem; text-shadow: none; }
/* An uploaded logo (Settings, General) takes the mark's place at about the same area:
   the stacked emblem and name need more height than the one-line letters. */
.hero-mark__logo { display: block; width: auto; height: 4rem; max-width: 40vw; object-fit: contain; object-position: left center; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
.hero--quiet:not(.panel--photo) .hero-mark__logo { filter: brightness(0); }
.hero-bar--logo + .site-menu--hero { top: 6.75rem; }
.site-menu__phone { margin: var(--space-4) 0 0; }
.site-menu__phone a { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; font-weight: 600; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
/* The hero keeps its Menu button up to 80em, past the inner pages' 64em switch. */
@media (min-width: 64em) and (max-width: 79.99em) { .panel[data-open="true"] .site-menu--hero { display: block !important; } }
@media (min-width: 80em) {
  .hero-bar { padding: 1.25rem 3rem; }
  /* The links gather either side of the mark: two equal outer columns keep it truly centred
     whatever the logo's width, and each list leans in towards it. */
  .hero-bar__nav { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(3rem, 4vw, 4.5rem); }
  .hero-bar__nav > .hero-bar__links { display: flex; }
  .hero-bar__links:first-child { justify-self: end; }
  .hero-bar__links--end { justify-self: start; }
  /* Three tiers: a small line over the name and one under it; the name sits on the line of the links. */
  .hero-mark { align-items: center; text-align: center; white-space: nowrap; }
  .hero-mark__tier:first-child { display: block; }
  /* Letter-spacing trails the last letter: pull it back so every tier sits truly centred. */
  .hero-mark__name { font-size: 1.3125rem; letter-spacing: 0.24em; margin-right: -0.24em; }
  .hero-mark__tier { font-size: 0.6875rem; letter-spacing: 0.34em; margin-right: -0.34em; }
  .hero-bar__links { gap: 2.5rem; }
  .hero-bar__tools { display: none; }
  .hero--quiet .site-menu { display: none !important; }
  .hero-mark__logo { height: 6rem; max-width: none; object-position: center; }
}
@media (min-width: 90em) { .hero-bar__links { gap: 3rem; } }
.lang-switch--hero { position: relative; }
.lang-switch--hero summary { list-style: none; cursor: pointer; }
.lang-switch--hero summary::-webkit-details-marker { display: none; }

.hero__content { position: relative; z-index: 2; display: grid; gap: var(--space-5); padding: 0 var(--space-5) 5rem; }
.hero__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.75rem, 0.5rem + 5.2vw, 6rem); line-height: 0.98; letter-spacing: -0.01em; color: inherit; text-wrap: balance; }
.hero__title em { display: block; font-style: normal; font-size: 1em; padding-bottom: 0.04em; }
.hero__line { margin: 0; max-width: 34ch; font-size: 0.875rem; line-height: 1.65; letter-spacing: 0.1em; text-transform: uppercase; }
.hero__cta { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.75rem 2rem; border: 1px solid currentColor; border-radius: 0; color: inherit; text-decoration: none; font-size: 0.8125rem; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.hero__cta:active { transform: scale(0.98); }
.hero__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .panel--photo .hero__cta:hover { background: var(--white); color: var(--ink); text-shadow: none; }
  .hero--quiet:not(.panel--photo) .hero__cta:hover { background: var(--ink); color: var(--white); }
}
@media (min-width: 56em) {
  /* Headline on its own rows; the line and the action share the row below. */
  .hero__content { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 3rem; row-gap: var(--space-6); padding: 0 3rem 5.5rem; }
  .hero__title { grid-column: 1 / -1; }
  .hero__cta { justify-self: end; }
}
@media (min-width: 90em) {
  /* Wide screens: the line and the action sit beside the headline's second line, as in the reference. */
  .hero__content { grid-template-columns: auto minmax(15rem, 1fr) auto; column-gap: clamp(2.5rem, 3.5vw, 4.5rem); padding-inline: 7vw; }
  .hero__title { grid-column: auto; }
  .hero__line { padding-bottom: 0.8rem; }
  .hero__cta { margin-bottom: 0.9rem; }
}

.hero__arrows { position: absolute; z-index: 3; bottom: 0.75rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1.75rem; color: var(--ink); }
.panel--photo .hero__arrows { color: var(--white); }
.hero__arrows[hidden] { display: none; }
.hero__arrows button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; color: inherit; opacity: 0.8; cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.hero__arrows button:active { transform: scale(0.94); }
.hero__arrows button:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; border-radius: 50%; }
.hero__arrows .icon { width: 1.375rem; height: 1.375rem; stroke-width: 1.25; }
@media (hover: hover) and (pointer: fine) { .hero__arrows button:hover { opacity: 1; } }

/* Hero slides (scroll-snap, only when more than one image) */
.hero__slides { position: absolute; inset: 0; z-index: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero__slides::-webkit-scrollbar { display: none; }
.hero__slides > * { flex: 0 0 100%; scroll-snap-align: start; position: relative; }
.hero__slides img { width: 100%; height: 100%; object-fit: cover; }
.dots { display: flex; gap: var(--space-2); align-items: center; margin: 0; padding: 0; list-style: none; }
.dots button { width: 1.25rem; height: 1.25rem; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: 0.3; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.dots button[aria-current="true"]::before { opacity: 1; transform: scale(1.35); }

/* Inner page head: a smaller panel with the same header tabs. */
.page-head { min-height: 0; }
.page-head .panel__body { justify-content: flex-end; padding: 6rem var(--space-4) var(--space-6); }
.page-head.panel--photo { min-height: min(56vh, 480px); }
.panel__slot { position: absolute; z-index: 2; top: 5rem; right: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); max-width: 20rem; padding: var(--space-2) var(--space-3); border: 1px dashed var(--stone-2); border-radius: var(--r-input); background: var(--paper); color: var(--ink-700); font-size: 0.8125rem; line-height: 1.35; margin: 0; }
.panel__slot .icon { width: 1.125rem; height: 1.125rem; color: var(--ink-500); }
@media (min-width: 56em) { .panel__slot { top: 6rem; right: var(--space-8); } }
@media (max-width: 55.99em) { .page-head--flat .panel__body { padding-top: 8.5rem; } }
.page-head .lede { margin-top: var(--space-4); color: inherit; }
.page-head--flat { background: var(--stone); color: var(--ink); }
@media (min-width: 56em) { .page-head .panel__body { padding: 7rem var(--space-8) var(--space-8); } .page-head--flat .panel__body { padding-top: 9rem; } }

/* Photo panel used mid-page (land use, CTA). */
.panel--feature { min-height: min(70vh, 640px); }
.panel--feature:not(.panel--photo) { min-height: 0; }
.panel--feature:not(.panel--photo) .panel__body { padding-top: var(--space-6); }
.panel__slot--flow { position: static; align-self: flex-start; margin: 0 0 var(--space-8); }
.panel--feature .panel__body { justify-content: flex-end; padding: var(--space-6) var(--space-4) 4.5rem; }
.feature__row { display: grid; gap: var(--space-5); align-items: end; }
.feature__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.feature__list li { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.feature__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.feature__list a { color: inherit; text-decoration: none; }
@media (min-width: 56em) {
  .panel--feature .panel__body { padding: var(--space-8) var(--space-8) 5rem; }
  .feature__row { grid-template-columns: 1.2fr 1fr auto; gap: var(--space-8); }
}

/* 7. Pills & links ---------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 3rem; padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pill__disc { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--white); color: var(--ink); flex: none; }
.pill__disc .icon { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease-out); }
.pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pill:hover .pill__disc .icon { transform: translateX(2px); } .pill:hover { background: var(--ink-700); } }
.pill--paper { background: var(--white); color: var(--ink); border-color: var(--line); }
.pill--paper .pill__disc { background: var(--ink); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .pill--paper:hover { background: var(--paper); } }
.pill--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.pill--ghost .pill__disc { background: var(--ink); color: var(--white); }
.pill--small { min-height: 2.5rem; padding: 0.25rem 0.25rem 0.25rem 1rem; font-size: var(--text-sm); }
.pill--small .pill__disc { width: 1.875rem; height: 1.875rem; }
.pill[disabled], .pill[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
@media (max-width: 39.99em) { .pill { white-space: normal; text-align: left; } }

.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; text-decoration: none; color: var(--ink); }
.link-arrow .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover .icon { transform: translateX(3px); } }
.on-photo .link-arrow { color: inherit; }

/* 8. Section heads, labels & rows ----------------------------------------- */
.label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink); margin: 0; }
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.label--muted { color: var(--ink-500); }

.section-head { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); align-items: end; }
.section-head p { max-width: 40ch; font-size: var(--text-sm); color: var(--ink-700); margin: 0; }
@media (min-width: 56em) { .section-head { grid-template-columns: 1fr 1fr auto; gap: var(--space-8); margin-bottom: var(--space-8); } }

.labelled { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 56em) { .labelled { grid-template-columns: 4fr 8fr; gap: var(--space-8); } }

/* Hairline rows: the stand types on the home page and the stands page. */
.rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.row { display: grid; gap: var(--space-2) var(--space-4); padding: var(--space-5) 0; border-bottom: var(--rule); align-items: center; }
.row__name { font-weight: 600; font-size: var(--text-lg); color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.row__name a { text-decoration: none; }
.row__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--ink-500); margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.row__meta strong { color: var(--ink); font-weight: 600; }
.row__summary { font-size: var(--text-sm); color: var(--ink-500); margin: var(--space-1) 0 0; max-width: 40ch; }
.row__action, .row > .chip { justify-self: start; }
@media (min-width: 56em) {
  .row { grid-template-columns: 1.4fr 1.6fr auto auto; gap: var(--space-6); }
  .row__action { justify-self: end; }
}

/* Case rows: text left, image right (investors / about on home). */
.case { display: grid; gap: var(--space-5); padding: var(--space-8) 0; border-top: var(--rule); align-items: center; }
.case__body h3 { font-size: 1.375rem; margin-bottom: var(--space-2); }
.case__body p { font-size: var(--text-sm); color: var(--ink-700); max-width: 44ch; }
.case__media { border-radius: var(--r-card); overflow: hidden; position: relative; background: var(--stone); }
.case__media img, .case__media .placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; border: 0; }
@media (min-width: 56em) { .case { grid-template-columns: 1fr 1fr; gap: var(--space-10); } }

/* 9. Cards, figures & placeholders ---------------------------------------- */
.cards { display: grid; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
@media (min-width: 40em) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: block; text-decoration: none; color: var(--ink); }
.card__media { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--stone); }
.card__media img, .card__media .placeholder { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 0; border-radius: 0; transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card:hover .card__media img { transform: scale(1.02); } }
.card .label { margin-top: var(--space-4); }
.card__title { font-weight: 400; font-size: var(--text-lg); margin: var(--space-1) 0 0; letter-spacing: -0.01em; }

.figure { margin: 0; }
.figure img, .figure .placeholder { width: 100%; object-fit: cover; border-radius: var(--r-card); }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.figure figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-500); }

.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); text-align: center; background: var(--stone); border: 1px dashed var(--stone-2); color: var(--ink-700); font-size: var(--text-sm); border-radius: var(--r-card); }
.placeholder .icon { width: 1.5rem; height: 1.5rem; }
.placeholder--blank { border: 0; padding: 0; }
.placeholder--compact { min-height: 8rem; aspect-ratio: auto; }
.panel .placeholder { color: var(--ink-700); }

/* 10. Content blocks ------------------------------------------------------ */
.prose { max-width: var(--measure); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--space-1); }
.prose h2 { margin-top: var(--space-8); font-size: 1.75rem; }
.prose h3 { margin-top: var(--space-6); }
.prose > :first-child { margin-top: 0; }
.prose strong { color: var(--ink); }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.dl dt { color: var(--ink-500); font-size: var(--text-sm); }
.dl dd { margin: 0; color: var(--ink); }

.facts { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.facts li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--rule); }
.facts .facts__value { order: 2; font-weight: 600; font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; text-align: right; white-space: nowrap; letter-spacing: -0.01em; }

.legend { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums lining-nums; }
.legend li { display: grid; grid-template-columns: 1rem 1fr auto; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--rule); }
.legend--plain li { grid-template-columns: 1fr auto; }
.legend__swatch { width: 1rem; height: 1rem; border-radius: 3px; align-self: center; background: var(--stone-2); }
.legend__swatch--none { background: transparent; }
.legend__count { color: var(--ink); font-weight: 600; }
.legend__note { color: var(--ink-500); font-size: var(--text-sm); }
.legend a { display: inline-block; padding-block: var(--space-2); margin-block: calc(-1 * var(--space-2)); text-decoration: none; }

.bar { display: block; width: 100%; height: 1.25rem; border-radius: 999px; overflow: hidden; margin: var(--space-4) 0 var(--space-2); background: var(--stone); }
.bar rect { stroke: var(--paper); stroke-width: 1; }
/* Monochrome swatches: value steps of ink, so the bar reads without hue. */
.swatch--high { background: #111111; fill: #111111; }
.swatch--medium { background: #6b6b67; fill: #6b6b67; }
.swatch--low { background: #3b3b38; fill: #3b3b38; }
.swatch--commercial { background: #9a9a95; fill: #9a9a95; }
.swatch--industrial { background: #b8b8b3; fill: #b8b8b3; }
.swatch--flats { background: #cfcfca; fill: #cfcfca; }
.swatch--shops { background: #e4e4df; fill: #e4e4df; }
.swatch--community { background: var(--stone-2); fill: var(--stone-2); }

.amenities { display: grid; gap: 0 var(--space-8); margin: 0; }
.amenities__item { border-top: var(--rule); padding: var(--space-4) 0; }
.amenities dt { font-weight: 600; font-size: var(--text-lg); color: var(--ink); margin-bottom: var(--space-1); letter-spacing: -0.01em; }
.amenities dd { margin: 0; font-size: var(--text-sm); color: var(--ink-700); }
@media (min-width: 40em) { .amenities { grid-template-columns: repeat(2, 1fr); } .amenities--1 { grid-template-columns: 1fr; } }

.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--space-6); }
.people li { border-top: var(--rule); padding: var(--space-3) 0; display: flex; flex-direction: column; }
.people strong { color: var(--ink); }
.people span { color: var(--ink-500); font-size: var(--text-sm); }
@media (min-width: 40em) { .people { grid-template-columns: repeat(2, 1fr); } }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: var(--space-4) 0 var(--space-4) 3.25rem; border-top: var(--rule); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.steps h3 { margin-bottom: var(--space-1); }
.steps p { font-size: var(--text-sm); color: var(--ink-700); }

.notice { display: flex; gap: var(--space-3); padding: var(--space-4); border: var(--rule); border-radius: var(--r-input); background: var(--white); color: var(--ink-700); }
.notice .icon { margin-top: 2px; color: var(--ink-500); }
.notice--success { background: var(--chip-available-bg); border-color: color-mix(in srgb, var(--chip-available-fg) 30%, transparent); color: var(--chip-available-fg); }
.notice--success .icon { color: var(--chip-available-fg); }
.notice--error { background: var(--error-bg); border-color: color-mix(in srgb, var(--error) 35%, transparent); color: var(--error); }
.notice--error .icon { color: var(--error); }
.notice p { color: inherit; }
.notice a { color: inherit; }

.chip { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.625rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.chip--available { background: var(--chip-available-bg); color: var(--chip-available-fg); }
.chip--limited { background: var(--chip-limited-bg); color: var(--chip-limited-fg); }
.chip--sold_out { background: var(--chip-sold-bg); color: var(--chip-sold-fg); }

/* Reading layout with an in-page nav (Why Zvishavane). */
.reading__grid { display: grid; gap: var(--space-6); }
.reading__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reading__nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: 999px; background: var(--white); text-decoration: none; color: var(--ink); font-size: var(--text-sm); font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .reading__nav a:hover { border-color: var(--ink); } }
.reading__section { scroll-margin-top: var(--space-6); }
.reading__section + .reading__section { margin-top: var(--space-8); padding-top: var(--space-8); border-top: var(--rule); }
.reading__section h2 { margin-top: 0; font-size: 1.75rem; }
@media (min-width: 56em) {
  .reading__grid { grid-template-columns: 4fr 8fr; gap: var(--space-8); align-items: start; }
  .reading__nav { position: sticky; top: var(--space-6); }
  .reading__nav ul { flex-direction: column; gap: 0; border-top: var(--rule); }
  .reading__nav a { border: 0; border-bottom: var(--rule); border-radius: 0; background: transparent; padding: var(--space-3) 0; width: 100%; font-size: var(--text-base); }
}

.stand-detail { border-top: var(--rule); padding-block: var(--space-8); scroll-margin-top: var(--space-6); }
.stand-detail h2 { font-size: 2rem; margin-bottom: var(--space-4); }
.stand-detail__meta { margin-bottom: var(--space-5); }
.stand-detail__action { margin: 0; }

/* 11. Gallery & lightbox -------------------------------------------------- */
.album + .album { margin-top: var(--space-10); }
.album__head { margin-bottom: var(--space-5); max-width: 60ch; }
.album__head h2 { font-size: 2rem; }
.album__head p { color: var(--ink-500); }
.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 40em) { .gallery { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-5); } }
.gallery--plan { grid-template-columns: 1fr; }
@media (min-width: 40em) { .gallery--plan { grid-template-columns: 1fr; } }
.gallery__item { margin: 0; }
.gallery__button { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; border-radius: var(--r-card); overflow: hidden; text-align: left; }
.gallery__button img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--stone); transition: transform var(--dur) var(--ease-out); }
.gallery--plan .gallery__button img { aspect-ratio: 3 / 2; }
@media (hover: hover) and (pointer: fine) { .gallery__button:hover img { transform: scale(1.02); } }
.gallery__item figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-500); }

.video { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-card); background: var(--ink); overflow: hidden; }
.video iframe { width: 100%; height: 100%; border: 0; }
.video .video__load { background: var(--ink); color: var(--paper); }
.video .video__load small { color: rgba(255, 255, 255, 0.7); }
.video .video__load .icon { color: var(--paper); }
.video__caption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-500); }

.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--paper); overflow: hidden; scrollbar-color: var(--ink-500) var(--ink); }
.lightbox::backdrop { background: transparent; }
.lightbox :focus-visible { outline-color: var(--paper); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--gutter); min-height: 3.5rem; }
.lightbox__count { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.lightbox__tools { display: flex; gap: var(--space-2); }
.lightbox__btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: transparent; color: var(--paper); transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.lightbox__btn:active { transform: scale(0.95); }
.lightbox__btn[disabled] { opacity: 0.35; }
@media (hover: hover) and (pointer: fine) { .lightbox__btn:hover { background: rgba(255, 255, 255, 0.12); } }
.lightbox__stage { position: relative; overflow: hidden; touch-action: none; display: grid; place-items: center; cursor: grab; }
.lightbox__stage:active { cursor: grabbing; }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.lightbox__caption { padding: var(--space-3) var(--gutter) var(--space-4); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); text-align: center; min-height: 3rem; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lightbox__nav--prev { left: var(--space-3); }
.lightbox__nav--next { right: var(--space-3); }

/* 12. Map & video ----------------------------------------------------------- */
.map { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; background: var(--stone); border: var(--rule); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); text-align: center; color: var(--ink-700); background: var(--stone); border: 0; }
.map__load .icon { width: 2rem; height: 2rem; color: var(--ink); }
.map__load small { color: var(--ink-500); }
.map--loaded .map__load { display: none; }

/* 13. Forms ---------------------------------------------------------------- */
.form { max-width: 40rem; }
.field { margin-bottom: var(--space-5); }
.field label, .field__label { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--space-2); font-size: var(--text-sm); }
.field__hint { font-size: var(--text-sm); color: var(--ink-500); margin: calc(-1 * var(--space-1)) 0 var(--space-2); }
.field__hint--group { margin: 0 0 var(--space-3); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { display: block; width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem; border: 1px solid var(--stone-2); border-radius: var(--r-input); background: var(--white); color: var(--ink); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1.25rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-500); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__error { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--error); }
.field__error:empty { display: none; }
.field__error .icon { width: 1.125rem; height: 1.125rem; margin-top: 1px; }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; margin-top: var(--space-6); }
.form__row { display: grid; gap: 0 var(--space-5); }
@media (min-width: 40em) { .form__row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.enquiry-for { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); border: 1px solid var(--stone-2); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: var(--text-sm); }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; }
.contact-list .icon { margin-top: 3px; color: var(--ink-500); }
.contact-list a { text-decoration: none; }
.contact-card { border-top: var(--rule); padding-top: var(--space-5); }
.contact-card h2 { font-size: 1.5rem; margin-bottom: var(--space-3); }
.contact-card h3 { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.contact-card address { font-style: normal; }
.contact-card address span { display: block; }
.contact-card ul.plain { list-style: none; padding: 0; margin: 0; }
.contact-grid { padding-top: 0; }
.thanks { max-width: 44ch; padding-bottom: var(--space-12); }
.thanks__notice { display: inline-flex; margin-bottom: var(--space-5); padding: var(--space-2) var(--space-3); }

/* 14. Footer --------------------------------------------------------------- */
.site-footer { border-top: var(--rule); color: var(--ink-700); margin-top: auto; }
.site-footer a { color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { text-decoration: underline; } }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8) var(--space-6); padding-block: var(--space-10) var(--space-8); }
.site-footer__brand .wordmark { position: static; padding: 0; margin: 0 0 var(--space-4); display: inline-block; }
.site-footer__brand .wordmark small { color: var(--ink-500); opacity: 1; font-size: 0.75rem; }
.site-footer__heading { font-size: var(--text-sm); font-weight: 600; color: var(--ink); margin: 0 0 var(--space-3); }
.site-footer__heading + ul + .site-footer__heading { margin-top: var(--space-6); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__nav li + li { margin-top: var(--space-2); }
.site-footer__address { font-style: normal; }
.site-footer__address span { display: block; }
.site-footer__hours li { padding: 2px 0; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.site-footer__social a { font-weight: 600; }
.site-footer .placeholder-text { color: var(--ink-500); }
.site-footer__bottom { border-top: var(--rule); padding-block: var(--space-5); font-size: var(--text-sm); display: grid; gap: var(--space-2); color: var(--ink-500); }
.site-footer__bottom p { margin: 0; }
@media (min-width: 56em) {
  .site-footer__grid { grid-template-columns: 5fr 3fr 4fr; }
  .site-footer__bottom { grid-template-columns: auto 1fr; gap: var(--space-6); }
  .site-footer__note { text-align: right; }
}

/* 15. Utilities & motion --------------------------------------------------- */
.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; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.text-right { text-align: right; }
.error-page { padding-block: var(--space-10) var(--space-12); max-width: 44ch; }
.error-page h1 { margin-bottom: var(--space-3); }
.error-page p + p { margin-top: var(--space-2); }

/* 16. Premium ------------------------------------------------------------- */

/* Blurred previews: a few-hundred-byte image under each photograph, so a slow
   connection shows its shape and tone at once. The container isolates so the
   preview sits above its stone background and below the photograph. */
.lqip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; }
.panel__media, .card__media, .case__media, .gallery__button, .hero__slides > *, .lqip-wrap { isolation: isolate; }
.lqip-wrap { position: relative; display: block; overflow: hidden; }
.figure .lqip-wrap { border-radius: var(--r-card); }

/* One continuous panel: the opening panel carries over from page to page and
   only its photograph and headline change. */
@view-transition { navigation: auto; }
.panel[data-nav] { view-transition-name: masthead; }
::view-transition-group(masthead) { animation-duration: 240ms; animation-timing-function: var(--ease-out); overflow: hidden; border-radius: var(--r-panel); }
::view-transition-old(masthead), ::view-transition-new(masthead) { height: 100%; object-fit: cover; animation-duration: 200ms; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* The authored moment: the italic line of the home headline rises into place. */
@keyframes line-rise { from { clip-path: inset(100% 0 0 0); transform: translateY(0.18em); } to { clip-path: inset(0 0 -0.2em 0); transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .headline--hero em, .hero__title em { animation: line-rise 240ms var(--ease-out) 90ms both; }
}

/* Stand rows arrive in sequence the first time the list is seen. */
.motion [data-reveal-rows] > .row { transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.motion [data-reveal-rows]:not(.is-in) > .row { opacity: 0; transform: translateY(8px); }
.motion [data-reveal-rows] > .row:nth-child(2) { transition-delay: 40ms; }
.motion [data-reveal-rows] > .row:nth-child(3) { transition-delay: 80ms; }
.motion [data-reveal-rows] > .row:nth-child(4) { transition-delay: 120ms; }
.motion [data-reveal-rows] > .row:nth-child(5) { transition-delay: 160ms; }
.motion [data-reveal-rows] > .row:nth-child(6) { transition-delay: 200ms; }
.motion [data-reveal-rows] > .row:nth-child(n+7) { transition-delay: 240ms; }

/* Rows that open in place (Stands page). */
.row__toggle { display: inline; min-height: 2.75rem; padding: var(--space-2) 0; margin: calc(-1 * var(--space-2)) 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.row__toggle .icon { display: inline-block; width: 1.125rem; height: 1.125rem; margin-left: 0.3em; vertical-align: -0.12em; transition: transform var(--dur-fast) var(--ease-out); }
.row__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .row__toggle:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } }
.row__more { grid-column: 1 / -1; padding: var(--space-4) 0 var(--space-2); }
.motion .row__more:not([hidden]) { animation: fade-in var(--dur-fast) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.row__more-grid { display: grid; gap: var(--space-6); }
.row__more .dl { font-size: var(--text-sm); }
.row__links { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.row__links a { min-height: 2.75rem; }
@media (min-width: 56em) { .row__more-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); } .row__more { padding-bottom: var(--space-4); } }

/* WhatsApp on phones: appears once the opening panel has scrolled away and
   steps aside over forms and the footer. */
.wa-pill {
  position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 20;
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 3rem; padding: 0 var(--space-5) 0 var(--space-4);
  border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  transform: translateY(calc(100% + var(--space-6))); opacity: 0; pointer-events: none;
  transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out);
}
.wa-pill.is-shown { transform: none; opacity: 1; pointer-events: auto; }
.wa-pill:active { transform: scale(0.97); }
.wa-pill .icon { width: 1.25rem; height: 1.25rem; }
@media (min-width: 56em) { .wa-pill { display: none; } }

/* Language switch: a small paper pill in the top-right tab (desktop); the
   phone menu lists the languages instead. */
.lang-switch { position: relative; display: none; }
.lang-switch summary { list-style: none; display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 6; min-width: 11rem; margin: 0; padding: var(--space-1) var(--space-4); list-style: none; background: var(--paper); border-radius: var(--r-card); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
.lang-switch a, .site-menu__langs a { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.lang-switch li + li { border-top: var(--rule); }
.lang-switch a[aria-current]::before, .site-menu__langs a[aria-current]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
@media (min-width: 64em) { .lang-switch { display: block; } }
/* In the hero line the switch is a plain link-sized label; its list keeps the paper dropdown. */
.hero-bar .lang-switch--hero summary { min-width: 0; min-height: 0; padding: 0.75rem 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-weight: 400; }
.hero-bar .lang-switch--hero a { padding: 0; font-size: var(--text-sm); letter-spacing: normal; text-transform: none; text-shadow: none; }
.hero-bar .lang-switch--hero a::after { content: none; }
.site-menu__langs { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.site-menu__langs a { border-bottom: 0; }

/* Footer additions. */
.site-footer__account { margin-top: var(--space-5) !important; }
.site-footer__account a { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.site-footer__account .icon { width: 1.125rem; height: 1.125rem; color: var(--ink-500); }
.site-footer__langs { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6) !important; }
.site-footer__langs a[aria-current] { text-decoration: underline; text-underline-offset: 0.2em; }
.signup { margin-top: var(--space-8); max-width: 26rem; }
.signup .small { color: var(--ink-700); }
.signup__row { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.signup__row input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0.5rem 0.875rem; border: 1px solid var(--stone-2); border-radius: 999px; background: var(--white); color: var(--ink); }
.signup__row input::placeholder { color: var(--ink-500); opacity: 1; }
.signup__row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.signup__consent { margin-top: var(--space-2); color: var(--ink-500) !important; }
.signup__consent a { color: inherit; text-decoration: underline; }
.input--date { max-width: 14rem; }
.field.check { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-3); align-items: start; }
.field.check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--ink); }
.field.check label { font-weight: 400; color: var(--ink-700); font-size: var(--text-sm); margin: 0; }
.site-footer__privacy { margin-left: var(--space-3); color: var(--ink-500) !important; text-decoration: underline !important; text-underline-offset: 0.2em; }

/* Stand sheet: A4 on paper, the same ink and hairlines. */
.sheet-page { background: var(--stone); }
.sheet-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); width: min(100% - 2 * var(--gutter), 52rem); margin: var(--space-5) auto var(--space-4); }
.sheet { width: min(100% - 2 * var(--gutter), 52rem); margin: 0 auto var(--space-10); padding: var(--space-8) var(--space-6); background: var(--paper); border-radius: var(--r-card); color: var(--ink-700); }
.sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: var(--rule); }
.sheet__brand { margin: 0; display: grid; line-height: 1.2; }
.sheet__brand strong { color: var(--ink); font-size: 1.125rem; letter-spacing: -0.02em; }
.sheet__brand span, .sheet__meta { font-size: var(--text-sm); color: var(--ink-500); }
.sheet__meta { margin: 0; text-align: right; }
.sheet__title { font-size: var(--text-h2); line-height: 1; letter-spacing: -0.035em; margin: var(--space-8) 0 var(--space-3); }
.sheet__lede { font-size: var(--text-lg); max-width: 44ch; margin: 0 0 var(--space-6); }
.sheet__facts { margin-bottom: var(--space-6); }
.sheet__body { display: grid; gap: var(--space-6); }
.sheet__plan img { border-radius: var(--r-card); }
.sheet__plan-svg { background: var(--stone); border-radius: var(--r-card); padding: var(--space-3); }
.sheet__plan-svg svg { display: block; width: 100%; height: auto; }
.sheet__foot { display: grid; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--rule); font-size: var(--text-sm); }
.sheet__foot h2 { font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.sheet__foot .plain { list-style: none; margin: 0; padding: 0; }
.sheet__note { color: var(--ink-500); margin: 0; }
@media (min-width: 40em) { .sheet { padding: var(--space-10) var(--space-10); } .sheet__body { grid-template-columns: 1.2fr 1fr; } .sheet__foot { grid-template-columns: 1fr 1fr; } }
@media print {
  @page { size: A4; margin: 14mm; }
  .sheet-page { background: #fff; }
  .sheet { width: auto; margin: 0; padding: 0; border-radius: 0; }
  .sheet__body { grid-template-columns: 1.2fr 1fr; }
  .sheet__foot { grid-template-columns: 1fr 1fr; }
}

/* 17. The interactive plan ----------------------------------------------- */
:root { --plan-available: #2e7d64; --plan-reserved: #c07a45; --plan-sold: #b8b8b3; --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); }

.page-head--compact .panel__body { padding-top: 6rem; padding-bottom: var(--space-5); }
@media (min-width: 56em) { .page-head--compact .panel__body { padding-top: 7rem; padding-bottom: var(--space-6); } }
.plan-section { margin-top: var(--space-4); }
.plan-note { margin: var(--space-3) 0 0; }

/* The plan fills a panel; filters, key and zoom sit in tabs cut into it. */
.plan-panel { height: min(76dvh, 780px); min-height: 26rem; background: var(--stone); }
.plan-stage { position: absolute; inset: 0; z-index: 0; touch-action: none; cursor: grab; outline: none; overflow: hidden; }
.plan-stage[data-dragging] { cursor: grabbing; }
.plan-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); border-radius: var(--r-panel); }
.plan-stage svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.plan-static { width: 100%; height: 100%; object-fit: contain; padding: 5rem var(--space-4) 5.5rem; }

/* The drawing, in the site's ink. Status colour is availability, the only
   hue on the page; reserved stands are also hatched so status never rests
   on colour alone. */
.plan-stage .plan-block { fill: var(--stone); stroke: var(--stone-2); }
.plan-stage .plan-roads path, .plan-stage .plan-roads line { stroke: var(--paper); stroke-width: 6; }
.plan-stage [data-k], .plan-stage .plan-block, .plan-stage line, .plan-stage path { vector-effect: non-scaling-stroke; }
.plan-stage [data-k] { fill: var(--stone-2); stroke: var(--paper); stroke-width: 1; }
.plan-stage .st { cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out); }
.plan-stage .st--available { fill: var(--plan-available); }
.plan-stage .st--held, .plan-stage .st--reserved { fill: url(#plan-hatch); }
.plan-stage .st--sold { fill: var(--plan-sold); }
.plan-stage .st--unreleased { fill: var(--paper); stroke: var(--line); cursor: default; }
.plan-stage .st.is-dim { opacity: 0.18; }
.plan-stage .st.is-selected { stroke: var(--ink); stroke-width: 3; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .plan-stage .st:not(.st--unreleased):hover { stroke: var(--ink); stroke-width: 2; } }
.plan-stage text { fill: var(--ink-500); }
.plan-stage .plan-label { fill: var(--ink); font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; font-variant-numeric: tabular-nums; }
.plan-stage .plan-label--on-green { fill: var(--white); }

/* States: the static drawing shows before the script, then the live plan. */
.plan-state { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-4); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.plan-panel[data-state="loading"] .plan-state--loading, .plan-panel[data-state="error"] .plan-state--error { display: inline-flex; }
.plan-hint { position: absolute; z-index: 3; left: 50%; bottom: 5.5rem; transform: translateX(-50%); margin: 0; padding: var(--space-2) var(--space-4); border-radius: 999px; background: var(--ink); color: var(--white); font-size: var(--text-sm); font-weight: 600; pointer-events: none; }
.plan-empty { position: absolute; inset: 5rem var(--space-4) var(--space-6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; color: var(--ink-700); border: 1px dashed var(--stone-2); border-radius: var(--r-card); }
.plan-empty .icon { width: 2rem; height: 2rem; }
.plan-empty p { max-width: 36ch; }

/* Filters: the top tab. On phones a search field and a Filters button;
   the fields drop into a paper sheet. */
.plan-panel .tab--top.plan-filters { display: flex; align-items: center; gap: var(--space-2); left: 50%; transform: translateX(-50%); width: min(100% - 2 * var(--space-5), 58rem); padding: var(--space-2) var(--space-3) var(--space-3); flex-wrap: wrap; justify-content: center; }
.plan-filters__search { display: flex; flex: 1 1 10rem; min-width: 0; max-width: 14rem; }
.plan-filters input, .plan-filters select { min-height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--stone-2); background: var(--white); color: var(--ink); font-size: var(--text-sm); border-radius: 999px; min-width: 0; }
.plan-filters__search input { flex: 1; border-radius: 999px 0 0 999px; border-right: 0; }
.plan-filters__go { display: grid; place-items: center; width: 2.75rem; min-height: 2.5rem; border: 1px solid var(--stone-2); border-left: 0; border-radius: 0 999px 999px 0; background: var(--white); color: var(--ink); }
.plan-filters__go .icon { width: 1.125rem; height: 1.125rem; }
.plan-filters select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 1rem; }
.plan-filters input:focus-visible, .plan-filters select:focus-visible, .plan-filters button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.plan-filters__field label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plan-filters__field--budget input { width: 8.5rem; }
.plan-filters__toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: var(--text-sm); }
.plan-filters__toggle .icon { width: 1.125rem; height: 1.125rem; }
.plan-filters__fields { display: contents; }
@media (max-width: 55.99em) {
  .plan-panel .tab--top.plan-filters { width: calc(100% - 2 * var(--space-3)); }
  .plan-filters__fields { display: none; position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: 6; padding: var(--space-4); background: var(--paper); border-radius: var(--r-card); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
  .plan-filters[data-open="true"] .plan-filters__fields { display: grid; gap: var(--space-3); }
  .plan-filters__fields .plan-filters__field label { position: static !important; width: auto; height: auto; clip: auto; display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
  .plan-filters__fields select, .plan-filters__fields input { width: 100%; min-height: 2.75rem; }
  .plan-filters__field--budget input { width: 100%; }
  .plan-filters__search { max-width: none; }
}
@media (min-width: 56em) { .plan-filters__toggle { display: none; } }

/* Key and count: bottom-left tab. Zoom: bottom-right tab. */
.tab--bottom-left { bottom: 0; left: 0; border-radius: 0 var(--r) 0 0; padding: var(--space-3) var(--space-3) 0 0; }
.tab--bottom-left::before { bottom: 0; left: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.tab--bottom-left::after { bottom: 100%; left: 0; background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - 0.5px), var(--paper) var(--r)); }
.plan-legend { padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4); }
.plan-legend ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.plan-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.plan-swatch { width: 0.875rem; height: 0.875rem; border-radius: 3px; }
.plan-swatch--available { background: var(--plan-available); }
.plan-swatch--reserved { background: repeating-linear-gradient(45deg, #8f421a 0 1.5px, var(--plan-reserved) 1.5px 4px); }
.plan-swatch--sold { background: var(--plan-sold); }
.plan-count { margin: var(--space-1) 0 0; font-size: 0.8125rem; color: var(--ink-500); }
.plan-zoom { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); }
.plan-zoom button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.plan-zoom button:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .plan-zoom button:hover { border-color: var(--ink); } }
@media (max-width: 39.99em) {
  .plan-legend { padding-right: var(--space-4); }
  .plan-legend ul { flex-direction: column; gap: 0; }
  .plan-zoom { flex-direction: column; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3); }
}

/* The stand sheet: a paper sheet over the plan on desktop, a bottom sheet
   on phones. It enters on the drawer curve and leaves faster. */
.plan-sheet { position: absolute; z-index: 5; top: 5rem; right: var(--space-4); width: min(22rem, calc(100% - 2 * var(--space-4))); max-height: calc(100% - 10rem); overflow: auto; padding: var(--space-5); background: var(--paper); border-radius: var(--r-card); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); color: var(--ink-700); }
@keyframes sheet-in-side { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes sheet-in-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) { .plan-sheet[data-open="true"] { animation: sheet-in-side 240ms var(--ease-drawer); } }
.plan-sheet__close { position: absolute; top: var(--space-3); right: var(--space-3); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); }
.plan-sheet__close:active { transform: scale(0.95); }
.plan-sheet__head { padding-right: 3rem; margin-bottom: var(--space-4); }
.plan-sheet__title { font-size: 1.75rem; line-height: 1.1; margin: 0 0 var(--space-1); letter-spacing: -0.02em; outline: none; }
.plan-sheet__type { margin: 0; color: var(--ink-500); font-size: var(--text-sm); }
.plan-sheet .dl { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.plan-sheet__note { margin: 0 0 var(--space-4); color: var(--ink-700); }
.plan-sheet__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.plan-sheet__links { list-style: none; margin: 0; padding: var(--space-3) 0 0; border-top: var(--rule); display: grid; gap: var(--space-1); }
.plan-sheet__links .link-arrow { min-height: 2.75rem; font-size: var(--text-sm); }
.linkbtn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
@media (max-width: 55.99em) {
  .plan-sheet { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 72dvh; border-radius: var(--r-panel) var(--r-panel) 0 0; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); z-index: 30; }
  @media (prefers-reduced-motion: no-preference) { .plan-sheet[data-open="true"] { animation: sheet-in-up 240ms var(--ease-drawer); } }
  .page-plan .wa-pill { display: none; }
}

/* The selected stand, rendered on the server for shared links and no-script
   visitors; the live sheet replaces it once the plan has loaded. */
.js-plan [data-server-stand] { display: none; }
.plan-stand__title { font-size: 2rem; margin-bottom: var(--space-1); }
.plan-stand .facts { margin: var(--space-5) 0; max-width: 32rem; }

/* The list twin. */
.plan-list__count { margin: 0 0 var(--space-3); }
.plan-rows .row__name a { text-decoration: none; }
.plan-rows .row__name .row__summary { display: block; }
@media (min-width: 56em) { .plan-rows .row { grid-template-columns: 1.4fr 1.6fr auto; padding-block: var(--space-4); } }
.pager { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); }
.pager a { min-height: 2.75rem; }

/* Plan panel on the Stands page: words and numbers beside the drawing. */
.plan-teaser { padding: var(--space-6) var(--space-4) var(--space-10); color: var(--ink); }
.plan-teaser__grid { display: grid; gap: var(--space-6); align-items: center; }
.plan-teaser__text { max-width: 34ch; margin: var(--space-4) 0 0; color: var(--ink-700); }
.plan-teaser .facts { max-width: 24rem; margin-top: var(--space-5); }
.plan-teaser__plan { display: block; padding: var(--space-4); background: var(--paper); border-radius: var(--r-card); transition: transform var(--dur) var(--ease-out); }
.plan-teaser__plan img { width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) { .plan-teaser__plan:hover { transform: scale(1.01); } }
@media (min-width: 56em) { .plan-teaser { padding: var(--space-10) var(--space-8) var(--space-12); } .plan-teaser__grid { grid-template-columns: 5fr 7fr; gap: var(--space-10); } }

/* 18. News and progress --------------------------------------------------- */
.news-index__side .news-filter { margin-top: var(--space-5); }
.news-filter a[aria-current] { border-color: var(--ink); font-weight: 600; }
@media (min-width: 56em) { .news-index__side { position: sticky; top: var(--space-6); } .news-filter a[aria-current] { font-weight: 600; } }
.news-rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.news-row { display: grid; gap: var(--space-2) var(--space-5); padding: var(--space-5) 0; border-bottom: var(--rule); grid-template-columns: 1fr 6.5rem; grid-template-areas: "meta thumb" "body thumb"; align-items: start; }
.news-row__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--ink-500); }
.news-row__meta time { color: var(--ink); font-weight: 600; }
.news-row__body { grid-area: body; }
.news-row__title { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.news-row__title a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .news-row__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } }
.news-row__summary { margin: 0; font-size: var(--text-sm); color: var(--ink-700); max-width: 56ch; }
.news-row__thumb { grid-area: thumb; position: relative; display: block; border-radius: var(--r-card); overflow: hidden; background: var(--stone); isolation: isolate; }
.news-row__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 40em) {
  .news-row { grid-template-columns: 9rem 1fr 11rem; grid-template-areas: "meta body thumb"; gap: var(--space-6); }
  .news-row__meta { flex-direction: column; }
}
.news-rows--one { border-top: var(--rule); }
.news-feed { margin-top: var(--space-6); }
.news-feed a { color: var(--ink-700); }
.news-post__side { display: grid; gap: var(--space-3); align-content: start; }
.news-post__kind { margin: 0; font-size: var(--text-sm); color: var(--ink-500); }
.news-post__share { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.news-post__share .link-arrow { min-height: 2.75rem; font-size: var(--text-sm); }
@media (min-width: 56em) { .news-post__side { position: sticky; top: var(--space-6); } }
.news-post__lede { max-width: 52ch; margin-bottom: var(--space-6); color: var(--ink); }
.news-photos { margin-top: var(--space-8); }
@media (min-width: 40em) { .news-photos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .news-photos { grid-template-columns: repeat(3, 1fr); } }
.news-around { display: grid; gap: var(--space-4); margin-top: var(--space-10); padding-top: var(--space-5); border-top: var(--rule); }
.news-around a { display: grid; gap: var(--space-1); text-decoration: none; min-height: 2.75rem; }
.news-around strong { color: var(--ink); font-weight: 600; }
@media (min-width: 40em) { .news-around { grid-template-columns: 1fr 1fr; } .news-around__prev { text-align: right; } }

/* 19. Accounts (buyer and investor) ----------------------------------------- */
.portal-notice { margin-top: var(--space-4); }
.portal-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--rule); }
.portal-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.portal-nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); text-decoration: none; font-size: var(--text-sm); }
.portal-nav a[aria-current] { border-color: var(--ink); font-weight: 600; }
.portal-nav .linkbtn { font-size: var(--text-sm); min-height: 2.5rem; }
.portal-form { max-width: 26rem; }
.portal-stand .row__meta strong { color: var(--ink); }
.portal-facts { max-width: 26rem; }
.is-late { color: var(--error) !important; }
.stage-track { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 0; counter-reset: st; }
.stage-track__step { position: relative; padding: var(--space-2) 0 var(--space-2) 1.75rem; color: var(--ink-500); font-size: var(--text-sm); }
.stage-track__step::before { content: ""; position: absolute; left: 0.3125rem; top: 0.95rem; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--stone-2); background: var(--paper); }
.stage-track__step::after { content: ""; position: absolute; left: 0.6875rem; top: 1.625rem; bottom: -0.5rem; width: 1.5px; background: var(--stone-2); }
.stage-track__step:last-child::after { display: none; }
.stage-track__step.is-done { color: var(--ink-700); }
.stage-track__step.is-done::before { background: var(--ink); border-color: var(--ink); }
.stage-track__step.is-done::after { background: var(--ink); }
.stage-track__step.is-current { color: var(--ink); font-weight: 600; }
.stage-track__step.is-current::before { width: 14px; height: 14px; left: 0.1875rem; top: 0.8rem; background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px var(--stone); }
@media (min-width: 56em) {
  .stage-track { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .stage-track__step { padding: 1.75rem var(--space-3) 0 0; }
  .stage-track__step::before { left: 0; top: 0.25rem; }
  .stage-track__step.is-current::before { left: -0.125rem; top: 0.125rem; }
  .stage-track__step::after { left: 0.9rem; right: 0; top: 0.625rem; bottom: auto; width: auto; height: 1.5px; }
}
.next-due { padding: var(--space-5); border-radius: var(--r-card); background: var(--stone); margin-bottom: var(--space-6); }
.next-due__label { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.next-due__amount { margin: var(--space-1) 0 var(--space-4); font-size: 2.25rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.next-due p:last-child { margin-bottom: 0; }
.portal-howto h3, .sched-rows + h3 { font-size: var(--text-base); }
.sched-rows { margin-top: var(--space-3); }
.sched-row { display: grid; grid-template-columns: 6.5rem 1fr auto; grid-template-areas: "date what amount" "date what chip"; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: var(--rule); align-items: center; font-size: var(--text-sm); }
.sched-row__date { grid-area: date; color: var(--ink); font-weight: 600; }
.sched-row__what { grid-area: what; color: var(--ink-700); }
.sched-row__amount { grid-area: amount; text-align: right; color: var(--ink); font-weight: 600; }
.sched-row .chip { grid-area: chip; justify-self: end; }
@media (min-width: 40em) { .sched-row { grid-template-columns: 7.5rem 1fr auto 7rem; grid-template-areas: "date what amount chip"; } }
.doc-row a { display: grid; grid-template-columns: 1.25rem 1fr auto; grid-template-rows: auto auto; column-gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: var(--rule); text-decoration: none; color: var(--ink); min-height: 3rem; }
.doc-row .icon:first-child { grid-row: 1 / 3; color: var(--ink-500); }
.doc-row .icon:last-child { grid-row: 1 / 3; grid-column: 3; }
.doc-row__title { font-weight: 600; }
.doc-row__meta { font-size: var(--text-sm); }
.sheet__h2 { font-size: var(--text-base); margin: var(--space-8) 0 var(--space-3); }
.sheet__table { width: 100%; font-size: var(--text-sm); border-top: var(--rule); }
.sheet__table th, .sheet__table td { text-align: left; padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: var(--rule); }
.sheet__table th { color: var(--ink-500); font-weight: 600; }
.sheet__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet__table .date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  .tab, .site-menu, .nav-toggle, .lightbox, .map, .dots, .wa-pill, .lang-switch, .sheet-tools { display: none !important; }
  [data-reveal-rows] > .row { opacity: 1 !important; transform: none !important; }
  .row__more[hidden] { display: block !important; }
  .panel { border-radius: 0; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: none; }
}

/* 20. Reserving online ------------------------------------------------------ */
.mt-4 { margin-top: var(--space-4); }
.label--step::before { display: none; }
.step-no { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.75rem; font-variant-numeric: tabular-nums; line-height: 1; flex: none; }
.reserve-notice { margin-top: var(--space-4); }
.form > .notice { margin-bottom: var(--space-5); }
.reserve-stand { max-width: 40rem; }
.reserve-facts { max-width: 40rem; }
.reserve-facts__deposit .facts__value { font-size: 1.5rem; }
.reserve-alts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.reserve-later__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.reserve-later { padding-top: 0; }
.reserve-map { margin: 0; max-width: 40rem; order: 3; }
@media (min-width: 56em) {
  .reserve-step--stand { grid-template-rows: auto 1fr; }
  .reserve-step--stand > .label { grid-column: 1; grid-row: 1; }
  .reserve-step--stand > .reserve-map { grid-column: 1; grid-row: 2; max-width: 22rem; }
  .reserve-step--stand > .reserve-stand { grid-column: 2; grid-row: 1 / span 2; }
}
.hold { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--r-card); background: var(--stone); display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: 1fr auto; align-items: baseline; }
.hold__label { display: flex; gap: var(--space-2); align-items: center; margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.hold__label .icon { width: 1.125rem; height: 1.125rem; }
.hold__left { margin: 0; font-size: 1.75rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; text-align: right; }
.hold__left [data-hold-left] { font-variant-numeric: tabular-nums; }
.hold__expired { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); color: var(--ink); }
.hold__cancel { grid-column: 1 / -1; }
.hold__cancel .linkbtn { font-size: var(--text-sm); color: var(--ink-700); text-decoration: underline; text-underline-offset: 0.16em; min-height: 2.75rem; }
.hold.is-expired .hold__left, .hold.is-expired .hold__cancel { display: none; }
.reserve-form.is-expired { opacity: 0.55; }
.ways { border: 0; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }
.ways legend { padding: 0; margin-bottom: var(--space-2); }
.ways .way { display: grid; margin: 0; font-weight: 400; font-size: inherit; grid-template-columns: 1.25rem 1fr; gap: var(--space-3); align-items: start; padding: var(--space-4); border: 1px solid var(--stone-2); background: var(--white); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.ways .way + .way { margin-top: -1px; }
.way:first-of-type { border-radius: var(--r-input) var(--r-input) 0 0; }
.way:last-of-type { border-radius: 0 0 var(--r-input) var(--r-input); }
.way input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--ink); }
.way__text { display: grid; gap: var(--space-1); }
.way__name { font-weight: 600; color: var(--ink); }
.way__hint { font-size: var(--text-sm); color: var(--ink-500); }
.way:has(input:checked) { position: relative; z-index: 1; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.way:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; position: relative; z-index: 2; }
.ways[aria-describedby] .way { border-color: var(--error); }
.reserve-pay .pill { min-width: 16rem; justify-content: space-between; }
.pay-wait { max-width: 40rem; }
.pay-wait__status { display: flex; gap: var(--space-3); align-items: center; margin: 0 0 var(--space-4); font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pay-wait__dot { width: 10px; height: 10px; margin: 0 4px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--stone); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .pay-wait__dot { animation: pay-wait 1.4s ease-in-out infinite; }
  @keyframes pay-wait { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
}
.pay-wait__steps { margin: 0 0 var(--space-4); padding-left: 1.25rem; color: var(--ink-700); }
.pay-wait__steps li { margin-bottom: var(--space-2); }
@media (max-width: 39.99em) {
  .hold { grid-template-columns: 1fr; }
  .hold__left { text-align: left; }
  .reserve-pay .pill { width: 100%; min-width: 0; }
}

/* 21. Data room ------------------------------------------------------------- */
.field__optional { font-weight: 400; color: var(--ink-500); }
.dr-summary { margin: 0; }
.dr-folder { padding-block: var(--space-4); }
.dr-note { max-width: 40rem; }
.dr-actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; }