/* =============================================================
   Anna Maria House — "Olive & Salt", recoloured
   -------------------------------------------------------------
   A structured, hard-cornered, ruled-grid system in warm charcoal,
   cream, sand and terracotta, with heavy uppercase Archivo headings.

   THREE RULES THAT HOLD THE WHOLE THING TOGETHER:

     1. Radius is 0. Everywhere. Buttons, cards, inputs, the avatar
        chip. It is the direction's signature — do not soften it.
     2. Green is WhatsApp and nothing else. If a control is green it
        opens WhatsApp; if it opens WhatsApp it is green.
     3. One dark ground (charcoal), one accent (terracotta), one warm
        neutral (sand), cream cards on a warm-grey page. Terracotta is
        the only accent on light; on charcoal it becomes ochre; on
        terracotta it becomes pale peach.

   Layout is written without media queries — everything reflows on
   `repeat(auto-fit, minmax(min(100%, Npx), 1fr))`. There are three
   exceptions, each justified where it appears.
   ============================================================= */

:root {
  /* ---- Ground & ink ---------------------------------------- */
  --charcoal:        #2E2823;  /* header, hero ground, dark bands, footer */
  --charcoal-deep:   #241F1A;  /* body ink, 2px rules, room-panel backdrop */
  --ink:             #3F3A32;  /* lead paragraphs on light */
  --ink-soft:        #5B5348;  /* body text on light */
  --ink-muted:       #6E6455;  /* small print, secondary labels (4.5:1 on cream) */
  --ink-faint:       #9A9184;  /* inactive numerals, input placeholders */
  --ink-label:       #4A4438;  /* form field labels */
  --ink-optional:    #8A8072;  /* the "(optional)" qualifier */

  --page:            #EFEBE2;  /* page background */
  --card:            #FAF7F1;  /* card / panel fill on the page ground */
  --card-hover:      #F2ECE1;  /* hover fill for interactive cards and rows */

  --sand:            #E4D7C1;  /* secondary buttons, active row, gallery rail */
  --sand-deep:       #D6C6A9;  /* sand hover */
  --sand-ink:        #8F7A5C;  /* counts inside the sand rail */

  --hairline:        #D8D1C4;  /* 1px grid lines and card borders on light */
  --hairline-rail:   #CFC5B4;  /* divider inside the sand gallery rail */

  --terracotta:      #B5502E;  /* eyebrows, numerals, underlines, CTA ground */
  --terracotta-dark: #8F3D22;  /* link hover */
  --terracotta-pale: #FFD9C2;  /* eyebrow text on the terracotta ground */
  --cream-warm:      #FFF8EF;  /* text and buttons on the terracotta ground */

  --ochre:           #C39B6E;  /* eyebrow on charcoal; host avatar chip */
  --ochre-light:     #E8B489;  /* distance figures, room-panel eyebrow */

  --on-dark:         #F4F0E7;  /* primary text on charcoal */
  --on-dark-soft:    #DCD4C6;  /* body text on charcoal */
  --on-dark-muted:   #BFB5A5;  /* secondary text on charcoal */
  --on-dark-faint:   #A79684;  /* small print on charcoal */

  --white:           #FFFFFF;
  --whatsapp:        #128C7E;  /* WhatsApp affordances ONLY */

  /* Hairlines and fills on the charcoal ground. */
  --hairline-dark:   rgba(244, 240, 231, .16);
  --hairline-dark-2: rgba(244, 240, 231, .18);
  --fill-dark:       rgba(244, 240, 231, .1);
  --edge-dark:       rgba(244, 240, 231, .22);

  /* ---- Type ------------------------------------------------- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Karla", system-ui, sans-serif;

  /* ---- Geometry --------------------------------------------- */
  /* The page gutter. Shared by header cells, sections and footer —
     everything lines up on it, which is what makes the grid read. */
  --gutter:    clamp(24px, 3.6vw, 52px);
  --section-y: clamp(52px, 5.4vw, 80px);

  /* Header height. Deterministic: 20px padding + 16px line box + 20px.
     script.js re-measures it so the sticky gallery rail stays correct
     when the header wraps to two rows on a narrow screen. */
  --header-h: 56px;
}

/* =============================================================
   Base
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--charcoal-deep);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--terracotta); text-decoration: none; }
a:hover { color: var(--terracotta-dark); }

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

h1, h2, h3 { margin: 0; }

/* The hidden attribute is how JS toggles the room slides, the lightbox
   and the form's error slot. It is a single-class-specificity author
   rule, so `.lightbox { display: flex }` would otherwise beat it and
   the dialog would sit open on load. This has to win. */
[hidden] { display: none !important; }

/* Radius 0 is the signature, and iOS rounds inputs and buttons by
   default — so both the appearance reset and the explicit 0 are needed. */
input, textarea, select, button {
  font-family: var(--font-body);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* Keyboard focus has to stay visible. The design specifies a terracotta
   ring on form fields, so the same ring is used everywhere — switched to
   ochre on the dark grounds, where terracotta would disappear. */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.page-head :focus-visible,
.section--dark :focus-visible,
.hero :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--ochre-light);
}

/* The icon sprite, inlined once per page and referenced with <use>. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: none; }

/* =============================================================
   Type primitives
   ============================================================= */

.eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow--wide { letter-spacing: .24em; }
.eyebrow--soft { font-weight: 700; }        /* hero and page-head eyebrows */
.eyebrow--lg   { font-size: 12px; }
.eyebrow--terracotta { color: var(--terracotta); }
.eyebrow--ochre      { color: var(--ochre); }
.eyebrow--muted      { color: var(--ink-muted); }
.eyebrow--pale       { color: var(--terracotta-pale); }

/* Section numerals — 01, 02, 03… */
.numeral {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--terracotta);
}
.numeral--ochre { color: var(--ochre); }
.numeral--pale  { color: var(--terracotta-pale); }

/* Headings. All Archivo 800, uppercase, tight tracking. */
.h-hero,
.h-page,
.h-section,
.h-feature,
.h-band,
.h-room,
.h-card,
.h-panel {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  /* The handoff warned that these headings are "tight by design" and to
     budget for translation length. In Romanian the hero reads "Toată
     casa. Piscina. Doar pentru dumneavoastră." — and DUMNEAVOASTRĂ. sets
     383px wide at 38px Archivo in a 312px column on a 360px phone: one
     word, unbreakable, 71px over, dragging the whole page sideways.
     This only ever fires on a word that cannot fit its line at all, so
     the eight languages that do fit are untouched. */
  overflow-wrap: break-word;
}

.h-hero    { font-size: clamp(38px, 4.4vw, 62px); line-height: .98;  letter-spacing: -.035em; text-wrap: balance; }
.h-page    { font-size: clamp(34px, 4vw,   56px); line-height: .98;  letter-spacing: -.035em; text-wrap: balance; max-width: 900px; }
.h-section { font-size: clamp(26px, 2.6vw, 34px);                    letter-spacing: -.03em; }
.h-feature { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.02; letter-spacing: -.035em; }
.h-band    { font-size: clamp(28px, 3.2vw, 44px); line-height: .98;  letter-spacing: -.035em; text-wrap: balance; }
.h-band--lg{ font-size: clamp(30px, 3.4vw, 46px); }
.h-room    { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.02; letter-spacing: -.03em; }
.h-card    { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.1;  letter-spacing: -.02em; }
.h-panel   { font-size: 20px;                                        letter-spacing: -.02em; }

/* Body copy. */
.lead {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  text-wrap: pretty;
}
.lead--prose {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: var(--ink);
}
.prose {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.fineprint {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.note {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* The host's sign-off under section 02. */
.signature {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--charcoal-deep);
}

/* =============================================================
   Buttons
   -------------------------------------------------------------
   Adjacent buttons are FLUSH — .btn-row has no gap, so a pair shares
   an edge. That is deliberate; do not add one.
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 30px;
  border: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* The prototypes set `nowrap` here, which is safe only for labels of
     English length. In Romanian the hero call to action is "Întrebați
     despre datele dorite" — 362px of unbreakable text in a 360px
     viewport, which pushed the whole page sideways. Wrapping costs
     nothing in the languages that fit: a flex item is laid out at its
     max-content width first, so .btn-row still stacks a pair onto two
     lines before either label is allowed to break. */
  white-space: normal;
  text-align: center;
  cursor: pointer;
}

.btn--wa     { background: var(--whatsapp); color: var(--white); }
.btn--wa:hover { filter: brightness(.88); color: var(--white); }

.btn--sand   { background: var(--sand); color: var(--charcoal-deep); }
.btn--sand:hover { background: var(--on-dark); color: var(--charcoal-deep); }

.btn--cream  { background: var(--cream-warm); color: var(--charcoal-deep); }
.btn--cream:hover { background: var(--charcoal-deep); color: var(--cream-warm); }

.btn--outline {
  padding: 17px 22px;
  border: 1.5px solid var(--charcoal-deep);
  background: transparent;
  color: var(--charcoal-deep);
  letter-spacing: .1em;
}
.btn--outline:hover { background: var(--charcoal-deep); color: var(--card); }

.btn--header {
  padding: 20px 30px;
  line-height: 16px;   /* 20 + 16 + 20 = the 56px --header-h depends on */
  /* The header bar is the one place a label must never wrap: a second
     line there would break the 56px row every other cell is built on. */
  white-space: nowrap;
}
.btn--submit { padding: 20px 28px; gap: 11px; font-size: 13px; }

.btn-row { display: flex; flex-wrap: wrap; }
.btn-row--spaced { margin-top: 8px; }
.btn--start { align-self: flex-start; }

/* =============================================================
   Header
   ============================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--charcoal);
  color: var(--on-dark);
  box-shadow: inset 0 -1px 0 var(--edge-dark);   /* the header's bottom edge */
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 clamp(16px, 2.4vw, 34px);
  border-right: 1px solid var(--hairline-dark);
  color: var(--on-dark);
}
.brand:hover { color: var(--on-dark); }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.nav a {
  display: flex;
  align-items: center;
  padding: 20px clamp(13px, 1.9vw, 26px);
  border-right: 1px solid var(--hairline-dark);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav a:hover { background: var(--fill-dark); color: var(--on-dark); }
.nav a[aria-current] { background: var(--fill-dark); }

.header-actions {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

/* =============================================================
   Language selector
   -------------------------------------------------------------
   The site carries nine languages. They cannot be nine header cells:
   measured, the header already comes within 2px of clipping at 375px
   with only four nav items. So the control is a disclosure — one cell
   showing the current code, and a panel listing every language under
   its own native name, which is what a speaker of it actually scans
   for ("Български", not "BG").

   It needs no string of its own in any of the nine dictionaries: the
   trigger is labelled by a globe and the current code, and each row
   is labelled by its own endonym. Nothing here has to be translated.

   Note the two effects this deliberately avoids. The panel has no
   drop shadow — the 1px charcoal border does the separating, because
   the shadow budget is spent (gate 2) and the direction says shadows
   are for the header edge, the active room row and the map pins only.
   The active row is marked with a border rather than the inset rule
   used elsewhere, for the same reason. And nothing transitions.
   ============================================================= */
.lang-switch {
  position: relative;
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--hairline-dark);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px clamp(12px, 1.4vw, 18px);
  border: 0;
  background: transparent;
  color: var(--on-dark-soft);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] {
  background: var(--fill-dark);
  color: var(--on-dark);
}

/* A chevron drawn at the stroke weight of the icon set, so it belongs
   with them. It points down when closed and up when open. */
.lang-toggle__caret {
  width: 6px;
  height: 6px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.lang-toggle[aria-expanded="true"] .lang-toggle__caret {
  transform: translateY(1px) rotate(-135deg);
}

/* Right-aligned so the panel can never run off a narrow viewport, and
   height-capped so all nine rows stay reachable on a short one. */
.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 210px;
  max-height: min(70vh, 440px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--charcoal-deep);
}

.lang-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  /* Transparent 3px keeps the label from shifting when a row becomes
     the current one. */
  border-left: 3px solid transparent;
  background: var(--card);
  color: var(--charcoal-deep);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  /* The prerendered build renders these rows as <a>, so the anchor
     defaults have to be cancelled here rather than in a second rule. */
  box-sizing: border-box;
  text-decoration: none;
}
.lang-menu li:last-child .lang-option { border-bottom: 0; }
.lang-option:hover { background: var(--card-hover); }
.lang-option[aria-current] {
  background: var(--sand);
  border-left-color: var(--terracotta);
}

.lang-option__code {
  flex: none;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lang-option[aria-current] .lang-option__code { color: var(--terracotta); }

/* The page must not scroll behind the open lightbox. */
body.is-lightbox-open { overflow: hidden; }

/* MEDIA QUERY 1 of 3 — the header phone number.
   Below 1120px the header would wrap to two rows to fit it, so it goes.
   Every page still carries the number in the footer, and on Enquiries. */
.header-phone {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  color: var(--hairline-rail);
  font-size: 13px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.header-phone:hover { color: var(--on-dark); }
@media (min-width: 1120px) {
  .header-phone { display: flex; }
}

/* MEDIA QUERY 2 of 3 — the narrow-screen header.
   NOT in the prototypes, and added deliberately. Measured on the supplied
   Location.html: below 720px the header wraps to three rows (124px of
   sticky chrome), the brand cell collapses to its 14px text height
   because it carries no vertical padding, and the nav — which is
   `overflow: hidden` — clips "Enquiries" by 14px at 360px and 54px at
   320px. Here the nav moves to its own full-width row, which fixes all
   three: two rows, nothing clipped, and not one colour, weight or size
   changed.

   The cells were equal quarters until the site gained nine languages;
   see the note on .nav below for why they are content-sized now. */
@media (max-width: 719px) {
  /* flex-basis 0, not auto: the brand must contribute nothing to the
     wrap calculation, or the language cell and the WhatsApp button get
     pushed onto a third row. With a zero basis the brand takes what is
     left of row one and ellipsises if it has to. */
  .brand {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px clamp(16px, 4vw, 24px);
  }
  .brand__name { overflow: hidden; text-overflow: ellipsis; }
  .header-actions { flex: 0 0 auto; }
  /* The nav takes its own full-width row and scrolls sideways if it has
     to. Equal quarters were the obvious choice and are wrong: the site
     runs in nine languages, and Bulgarian's "Местоположение" is fourteen
     characters that will not fit a quarter of a 360px row at any size a
     person can read. `flex: 1 0 auto` lets the cells grow to fill the
     row when they fit — which they do in English — and keep their own
     width when they do not, scrolling instead of spilling. Same
     behaviour as the gallery's room rail. */
  .nav {
    order: 3;
    flex: 1 1 100%;
    overflow-x: auto;
    border-top: 1px solid var(--hairline-dark);
  }
  .nav a {
    flex: 1 0 auto;
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
    letter-spacing: .06em;
  }
  .nav a:last-child { border-right: 0; }
  .btn--header {
    padding-left: clamp(16px, 4vw, 30px);
    padding-right: clamp(16px, 4vw, 30px);
  }
  /* The globe alone carries the meaning on a narrow header; the code
     would push the WhatsApp button onto a third row at 320px. */
  .lang-toggle { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .lang-toggle__code { display: none; }
}

/* =============================================================
   Footer
   -------------------------------------------------------------
   Deliberately minimal, and with NO page navigation — the client
   asked for that explicitly. Do not add a link list back in.
   ============================================================= */

.site-footer {
  background: var(--charcoal);
  color: var(--on-dark-soft);
  padding: clamp(36px, 3.4vw, 50px) var(--gutter);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px 44px;
}
.footer-identity { display: flex; flex-direction: column; gap: 10px; }
.footer-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.footer-blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 340px;
  text-wrap: pretty;
}
.footer-contact { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; }
.footer-contact a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--on-dark-soft);
}
.footer-contact a:hover { color: var(--on-dark); }
.footer-contact .footer-email { overflow-wrap: anywhere; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: clamp(24px, 2.4vw, 32px);
  padding-top: 20px;
  border-top: 1px solid var(--hairline-dark);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.footer-legal span { white-space: nowrap; }

/* =============================================================
   Sections & page furniture
   ============================================================= */

.section { padding: var(--section-y) var(--gutter); }
.section--stack { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); }
.section--stack-tight { display: flex; flex-direction: column; gap: clamp(24px, 2.6vw, 34px); }
.section--flush-top { padding-top: 0; }
.section--dark { background: var(--charcoal); color: var(--on-dark); }
.section--ruled-top { border-top: 1px solid var(--hairline); }

/* A ruled section header: numeral + title on the left, an optional link
   or label on the right, over a 2px charcoal rule. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--charcoal-deep);
}
.section-head__title { display: flex; align-items: baseline; gap: 16px; }
.section-link {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 3px;
}
.section-link:hover { color: var(--terracotta-dark); border-bottom-color: var(--terracotta-dark); }

/* The charcoal head that opens Gallery, Location and Enquiries. */
.page-head {
  background: var(--charcoal);
  color: var(--on-dark);
  padding: clamp(44px, 4.6vw, 72px) var(--gutter) clamp(36px, 3.4vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.page-head .lead { color: var(--on-dark-soft); max-width: 600px; }

/* An eyebrow + title pair, used above prose blocks. */
.meta-row { display: flex; align-items: baseline; gap: 16px; }

/* =============================================================
   Card grids
   -------------------------------------------------------------
   The "grid line" effect: 1px gaps over a hairline background, with a
   hairline border round the block.

   THE RULE: a three-item row must resolve 3 -> 1, and never 3 -> 2.
   Two columns leave an empty third cell whose hairline background
   shows as a large blank block.

   MEDIA QUERY 3 of 3, and the reason this is not an auto-fit track.
   The design handoff asks for `minmax(min(100%, 600px), 1fr)` to
   enforce that rule, but auto-fit cannot express it: it fits as many
   columns as will go, so two columns always become available before
   three do. Measured on this build, that declaration yields exactly
   the blank cell it was meant to prevent —

       <=1280px  1 column    (fine)
       1366px    2 columns   <- blank third cell
       1440px    2 columns   <- blank third cell
       1536px    2 columns   <- blank third cell
       1728px    2 columns   <- blank third cell
       1920px    3 columns   (fine)
       2560px    4 columns   <- blank fourth cell

   which covers essentially every laptop in use. So the rule is
   honoured directly instead: one column, then three. Every .card-grid
   on the site holds exactly three cards, which is what makes a fixed
   three-column track safe here.
   ============================================================= */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
@media (min-width: 1100px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}
/* The variant inset by the page gutter, ruled top and bottom only. */
.card-grid--rule {
  border-left: 0;
  border-right: 0;
  margin: clamp(48px, 5vw, 72px) var(--gutter);
}

.card {
  background: var(--card);
  padding: clamp(28px, 2.4vw, 36px) clamp(24px, 2.2vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.card--tight { gap: 14px; }
.card--compact {
  padding: clamp(26px, 2.4vw, 34px) clamp(24px, 2.8vw, 40px);
  gap: 7px;
}

/* 26x2px terracotta dash + label. The dash is a pseudo-element so the
   label element holds nothing but its own translatable text. */
.card__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.card__label::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--terracotta);
}
.card__lines {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.card__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The three reasons to book direct — terracotta label over one line. */
.reason__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.reason__text { font-size: 16px; line-height: 1.55; color: var(--ink); }

/* =============================================================
   Feature row — a photograph beside a block of prose
   -------------------------------------------------------------
   Which side the photograph lands on is set by DOM order alone: put the
   <img> first for photo-left, the text block first for text-left. Below
   the 360px minimum the row stacks in that same order.
   ============================================================= */

.feature-row {
  padding: 0 var(--gutter) var(--section-y);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(28px, 3.4vw, 52px);
  align-items: center;
}
.feature-row--top { padding-top: var(--section-y); }
.feature-row__img { width: 100%; height: clamp(300px, 32vw, 430px); object-fit: cover; }
.feature-row__body { display: flex; flex-direction: column; gap: 16px; }

/* =============================================================
   Hero (Home)
   ============================================================= */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  background: var(--charcoal);
}
.hero__body {
  padding: clamp(52px, 5.4vw, 84px) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  color: var(--on-dark);
}
.hero__body .lead { color: var(--on-dark-soft); max-width: 460px; }
.hero__img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.hero__trust {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--on-dark-faint);
}

/* =============================================================
   Terracotta CTA band — photograph left, the ask right
   ============================================================= */

.band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  align-items: stretch;
}
.band__img {
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 26vw, 360px);
  object-fit: cover;
}
.band__img--tall { min-height: clamp(280px, 30vw, 420px); }
.band__body {
  background: var(--terracotta);
  color: var(--cream-warm);
  padding: clamp(40px, 4.4vw, 60px) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.band__body--lg { padding: clamp(44px, 4.6vw, 64px) var(--gutter); gap: 18px; }

/* Band leads take the prose curve (1.3vw), not the page-head curve
   (1.35vw) that .lead carries by default — all three prototype bands
   agree on 1.3vw, and the two reach the 18px cap at different widths. */
.band__body .lead { font-size: clamp(16px, 1.3vw, 18px); max-width: 440px; }

/* =============================================================
   Anna Maria House — Home (index.html) partial
   -------------------------------------------------------------
   Everything here is specific to the Home page. Core classes in
   styles.css are used wherever one fits and are NEVER redefined;
   where a core class was close but not exact, a modifier class is
   added here instead.

   Radius stays 0. The only effects in this file are the two the
   prototype explicitly carries: the room-panel scrim gradient and
   the active room row's inset rule.
   ============================================================= */

/* =============================================================
   01 At a glance
   -------------------------------------------------------------
   The card statement is Archivo 800 like every heading, but the
   prototype deliberately leaves it in sentence case — "56 m², all
   on one floor", not "56 M², ALL ON ONE FLOOR". .h-card uppercases,
   so this modifier turns that back off and changes nothing else.
   ============================================================= */

.h-card--sentence { text-transform: none; }

/* The three cards must read as one row, and they only do if their detail
   lists start on the same line. "Up to four adults and two children" runs
   to two lines where the other two statements fit on one, which pushed its
   list down and made the row look broken. Reserving two lines here costs a
   little space under the short statements and keeps the row square.
   2 x 1.1 line-height = 2.2em. */
.card .h-card--sentence { min-height: 2.2em; }

/* =============================================================
   03 Room by room — the switcher
   -------------------------------------------------------------
   All six rooms are in the markup. JS only moves `is-active` and the
   `hidden` attribute, so the section is readable by search engines,
   translatable by the i18n layer, and legible with JS switched off
   (the first room shows, the list and strip stay usable links to it).
   ============================================================= */

.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: clamp(20px, 2.2vw, 28px);
  align-items: stretch;
}

/* --- Left: the photo panel -------------------------------------
   The slides are absolutely positioned so that photographs of
   different aspect ratios (pool is 4:3, everything else 3:2) cannot
   change the frame's size. The panel's min-height is the frame. */
.room-panel {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 40vw, 520px);
  background: var(--charcoal-deep);
}

.room-slide {
  position: absolute;
  inset: 0;
  margin: 0;
}
.room-slide[hidden] { display: none; }

.room-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The one gradient on the page. Without it the copy sits on open
   photograph and stops being readable. */
.room-slide__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 28px);
  background: linear-gradient(to top, rgba(36, 31, 26, .86), rgba(36, 31, 26, 0));
}

.room-slide__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  color: var(--cream-warm);
}

/* The room-panel eyebrow is ochre-light, not ochre — it sits on a
   photograph rather than flat charcoal and needs the extra step. */
.eyebrow--ochre-light { color: var(--ochre-light); }

.room-slide__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

.room-counter {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--cream-warm);
  white-space: nowrap;
}

/* --- Right: the room list --------------------------------------- */
.room-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--card);
}

.room-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 1.7vw, 22px) clamp(18px, 1.9vw, 26px);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: var(--card);
  color: var(--charcoal-deep);
  text-align: left;
  cursor: pointer;
}
.room-row:hover { background: var(--card-hover); }

/* The second of the two effects the prototype keeps: a 4px terracotta
   rule down the inside edge of the active row. */
.room-row.is-active {
  background: var(--sand);
  box-shadow: inset 4px 0 0 var(--terracotta);
}

.room-row__main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.room-row__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink-faint);
}
.room-row.is-active .room-row__num { color: var(--terracotta); }

.room-row__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-align: left;
}
.room-row__title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.room-row__group {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.room-row__mark {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--terracotta);
  opacity: 0;
}
.room-row.is-active .room-row__mark { opacity: 1; }

/* --- Below: the thumbnail strip --------------------------------- */
.room-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
}

.room-thumb {
  padding: 0;
  border: 2px solid transparent;
  background: var(--hairline);
  overflow: hidden;
  opacity: .62;
  cursor: pointer;
}
.room-thumb.is-active {
  border-color: var(--terracotta);
  opacity: 1;
}
.room-thumb__img {
  width: 100%;
  height: clamp(58px, 7vw, 84px);
  object-fit: cover;
}

/* =============================================================
   04 Where you'll be
   -------------------------------------------------------------
   No photograph, deliberately: a photo here would repeat section 05's
   picture-left / copy-right rhythm two screens early.
   ============================================================= */

/* Section 04 is the one section the prototype gives its own vertical
   padding: clamp(48px,5vw,76px), not the --section-y used elsewhere. */
.where {
  padding-top: clamp(48px, 5vw, 76px);
  padding-bottom: clamp(48px, 5vw, 76px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
}
.where__body { display: flex; flex-direction: column; gap: 16px; }
.where__side { display: flex; flex-direction: column; }

/* .h-band is 3.2vw / 44px with a .98 line-height; this heading sits on
   charcoal beside the distances and the prototype holds it a step
   smaller and a hair looser. */
.h-band--where { font-size: clamp(28px, 3vw, 42px); line-height: 1; }

.where__lead  { max-width: 460px; color: var(--on-dark-soft); }
.where__prose { max-width: 460px; color: var(--on-dark-muted); }

/* --- The distances ---------------------------------------------
   Filled by script.js from places.js, keyed off #homeDistances and
   its data-places list — the numbers are computed from the house
   coordinate at runtime so none of them can be wrong or invented.
   Selectors are scoped to .distances so the Location page's own
   distance card is free to style .distance differently. */
.distances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 0 clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.distances .distance {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--hairline-dark-2);
}
.distances .distance-value {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--ochre-light);
}
.distances .distance-unit {
  font-size: 15px;
  letter-spacing: .06em;
}
.distances .distance-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.distances .distance-note {
  font-size: 14px;
  line-height: 1.45;
  color: var(--on-dark-muted);
}

/* The caveat is real copy and lives in the HTML, not in the injected
   markup — it has to be there whether or not the script runs. */
.where__caveat {
  margin-top: clamp(16px, 1.8vw, 22px);
  color: var(--on-dark-faint);
}

/* =============================================================
   05 Booking direct + the three reasons
   -------------------------------------------------------------
   Flex column rather than block flow so the ruled reasons grid keeps
   its own top and bottom margins instead of collapsing them out of
   the section and against the footer.
   ============================================================= */

.booking { display: flex; flex-direction: column; }

/* --- The two bedrooms share one row --------------------------------
   They are one decision — which bed do we get — so they read better
   side by side than as two more entries in a seven-long column. The
   split keeps the row height and the hairline rhythm of the rest of
   the list; only the vertical divider between the pair is new. */
.room-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--hairline);
}
.room-row-split .room-row { border-bottom: 0; }
.room-row-split .room-row:first-child { border-right: 1px solid var(--hairline); }

/* At half width the arrow is the first thing worth losing, and the
   title needs to be allowed to wrap. */
.room-row--half { gap: 10px; }
.room-row--half .room-row__title { white-space: normal; }
.room-row--half .room-row__mark { display: none; }

/* =============================================================
   Anna Maria House — Gallery
   -------------------------------------------------------------
   Everything on gallery.html that styles.css does not already
   cover: the sticky room rail, the nine group sections, the
   photo grid and its zoom-in thumbnails, and the lightbox.

   The page head, the terracotta CTA band, the buttons, the
   eyebrows, the numerals and both headings come from the core
   sheet unchanged. Nothing here redefines a core class; the two
   modifiers that adjust one are written as compound selectors
   (.h-section.h-section--group) so they win on specificity and
   not on load order.
   ============================================================= */

/* -------------------------------------------------------------
   Page head
   The core rule caps the lead at 600px; this page's lead is
   560px in the design, which is where its second line breaks.
   ------------------------------------------------------------- */
.page-head .lead.lead--gallery { max-width: 560px; }

/* =============================================================
   The sticky room rail
   -------------------------------------------------------------
   Nine anchor links, not filters: they work with JavaScript off,
   every group is linkable, and nothing is ever hidden from a
   visitor who wanted to see all 48.

   It parks directly under the header. --header-h is re-measured
   by script.js, so the rail stays put when the header wraps to
   two rows on a narrow screen. Below the header's own z-index
   (1000) so the header always covers it.
   ============================================================= */

.room-rail {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  display: flex;
  overflow-x: auto;
  background: var(--sand);
  border-bottom: 1px solid var(--hairline-rail);
}

.room-rail a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px clamp(14px, 1.5vw, 22px);
  border-right: 1px solid var(--hairline-rail);
  color: var(--charcoal-deep);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.room-rail a:hover { background: var(--sand-deep); color: var(--charcoal-deep); }

/* The photo count inside a rail cell. */
.room-rail__count { color: var(--sand-ink); }

/* The group currently on screen. script.js moves aria-current
   between the cells as the page scrolls; with JS off no cell is
   marked and the rail is exactly the design's static rail.
   Charcoal fill, matching the active state of the map toggles on
   Location — sand-deep is already the hover fill and could not
   also mean "you are here". */
.room-rail a[aria-current] {
  background: var(--charcoal-deep);
  color: var(--on-dark);
}
.room-rail a[aria-current]:hover { background: var(--charcoal-deep); color: var(--on-dark); }
.room-rail a[aria-current] .room-rail__count { color: var(--ochre); }

/* =============================================================
   A group of photographs
   ============================================================= */

.gallery-group {
  padding: clamp(44px, 4.4vw, 72px) var(--gutter);
  border-bottom: 1px solid var(--hairline);
  /* The header plus the rail — an anchored group starts below both. */
  scroll-margin-top: calc(var(--header-h) + 56px);
}

.gallery-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.gallery-group__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}
.gallery-group__blurb {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The group heading sits one step under the core section size. */
.h-section.h-section--group { font-size: clamp(24px, 2.4vw, 32px); }

/* "10 photographs", hard right, never wrapped off its row. */
.eyebrow.eyebrow--nowrap { white-space: nowrap; }

/* =============================================================
   The photo grid
   -------------------------------------------------------------
   auto-FILL, not auto-fit: a three-photo group must keep its
   300px columns rather than stretch three photos across the full
   width of the page.
   ============================================================= */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

/* A thumbnail is a button: it opens the lightbox, so it is not a
   link and it has to be reachable from the keyboard. The hairline
   ground shows while the photograph is still loading. */
.photo-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--hairline);
  cursor: zoom-in;
}
.photo-thumb:hover { filter: brightness(1.04); }

/* height:auto is load-bearing. The width/height attributes on the
   img are presentational hints, and without this the hinted pixel
   height would beat aspect-ratio and the grid would go ragged —
   the pool, bathroom and parking photographs are not 3:2. */
.photo-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* The expand chip, bottom-right of every thumbnail. */
.photo-thumb__chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(36, 31, 26, .72);
  color: var(--on-dark);
}

/* =============================================================
   Lightbox
   -------------------------------------------------------------
   In the DOM from the start, carrying the `hidden` attribute, so
   script.js only has to flip one property. Above the sticky
   header, which sits at z-index 1000.
   ============================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background: rgba(24, 20, 17, .94);
}
/* display:flex would otherwise beat the UA's [hidden] rule. */
.lightbox[hidden] { display: none; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(16px, 2.4vw, 28px);
  border-bottom: 1px solid var(--hairline-dark);
}

.lightbox__body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 20px);
  padding: clamp(12px, 2vw, 26px);
}

.lightbox__img {
  flex: 1;
  min-width: 0;
  max-height: 100%;
  object-fit: contain;
  margin: auto;
}

.lightbox__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(244, 240, 231, .3);
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}
.lightbox__btn:hover { background: rgba(244, 240, 231, .12); }

.lightbox__close { width: 44px; height: 44px; }
.lightbox__nav   { flex: none; width: 48px; height: 48px; }

.lightbox__caption {
  margin: 0;
  padding: 0 clamp(16px, 2.4vw, 28px) 20px;
  font-size: 15px;
  color: var(--on-dark-soft);
  text-align: center;
}

/* The gallery's CTA band lead is held 10px narrower than the other two
   bands (Gallery.dc.html:99 sets 430px where Home and Location set 440),
   so the two-line break lands where the prototype puts it. */
.band__body .lead--gallery-cta { max-width: 430px; }

/* =============================================================
   Location page
   -------------------------------------------------------------
   The map band: map left at a FIXED height, place picker right.

   That fixed height is the point. The band used to give the map
   `flex: 1` + `min-height` and let it stretch to whatever the panel
   beside it happened to be, so choosing a tab or a place resized and
   repositioned the map. Now the map box has an explicit height and the
   list reserves height for its longest tab, so the band is exactly as
   tall in every state and nothing below it ever shifts.
   ============================================================= */

.map-band {
  display: grid;
  /* 560px, not 620px, so two columns survive a narrower viewport. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
  border-bottom: 1px solid var(--hairline);
}

.map-band__map {
  position: relative;
  /* Fills its grid cell, so the map covers the whole left side rather
     than leaving a band of page under it.

     The handoff pinned this to a fixed height to stop the panel beside
     it stretching the map. That is no longer what holds it: the panel
     is a fixed 289px and every other part of the card is fixed too, so
     the right column is the same height on every tab and in every
     state. The map can therefore stretch to match it and still never
     move. The min-height is what carries it on a narrow screen, where
     the band stacks and there is no sibling to match. */
  min-height: clamp(440px, 48vw, 620px);
  /* Shows through while tiles are still loading, instead of white. */
  background: var(--on-dark-soft);
}
.map-canvas { position: absolute; inset: 0; }

/* Leaflet gives its control corners z-index 1000 — the same as the
   sticky header — and the map band comes later in the DOM, so the zoom
   buttons painted straight over the navbar when the band scrolled under
   it. Below the header, above the marker pane (600). */
.leaflet-top,
.leaflet-bottom { z-index: 650; }

/* The zoom control sits bottom-right (set in script.js). The card owns
   top-left, Reset owns bottom-left, and the attribution shares the
   bottom-right corner underneath it. */
.leaflet-bottom.leaflet-right .leaflet-control-zoom { margin-bottom: 6px; }
.leaflet-container { font-family: var(--font-body); background: var(--on-dark-soft); }
.leaflet-bar,
.leaflet-bar a { border-radius: 0; border-color: var(--charcoal-deep); }
.leaflet-bar a { color: var(--charcoal-deep); background: var(--card); }
.leaflet-bar a:hover { background: var(--sand); }
.leaflet-control-attribution {
  background: rgba(250, 247, 241, .86);
  color: var(--ink-muted);
  font-size: 10px;
  padding: 2px 7px;
}
.leaflet-control-attribution a { color: var(--ink-muted); }

/* =============================================================
   The card over the map
   -------------------------------------------------------------
   Browse mode names the active tab; route mode names the chosen place
   and gains a foot with the road time and the maps link. Moving that
   detail here — rather than expanding it inside a list row — is what
   lets every row keep a fixed height.
   ============================================================= */

.map-hud {
  position: absolute;
  top: 16px;
  left: 16px;
  /* Clears Leaflet's tile, overlay, marker and popup panes. */
  z-index: 600;
  width: min(330px, calc(100% - 32px));
  background: var(--cream-warm);
  border: 1px solid var(--charcoal-deep);
  box-shadow: 0 12px 34px rgba(36, 31, 26, .20);
  display: flex;
  flex-direction: column;
}
.map-hud__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px 12px;
}
.map-hud__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.map-hud__eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.map-hud__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--charcoal-deep);
}
.map-hud__sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.map-hud__clear {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.map-hud__clear:hover {
  background: var(--charcoal-deep);
  border-color: var(--charcoal-deep);
  color: var(--cream-warm);
}

.map-hud__foot {
  border-top: 1px solid var(--hairline);
  padding: 11px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.map-hud__road {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.map-hud__rule { flex: none; width: 14px; height: 1px; background: var(--terracotta); }
.map-hud__go {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  background: var(--charcoal-deep);
  color: var(--cream-warm);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.map-hud__go:hover { background: var(--terracotta); color: var(--cream-warm); }

.map-reset {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 600;
  padding: 11px 16px;
  border: 1px solid var(--charcoal-deep);
  background: var(--card);
  color: var(--charcoal-deep);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(36, 31, 26, .18);
  cursor: pointer;
}
.map-reset:hover { background: var(--charcoal-deep); color: var(--cream-warm); }

/* =============================================================
   The picker
   ============================================================= */

.map-card {
  background: var(--card);
  padding: clamp(28px, 3vw, 44px) clamp(22px, 2.8vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
}
.map-card__head { display: flex; flex-direction: column; gap: 9px; }
.map-card__caveat  { font-size: 13.5px; line-height: 1.6; }
.map-card__promise { font-size: 15.5px; line-height: 1.65; }
.map-card__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--hairline);
}
/* The handoff also sets `white-space: nowrap` here, to stop the label
   wrapping to two lines. It is left off deliberately. English is 246px
   at this size in a 346px column and never wrapped anyway, while French
   — "Poser une question sur les environs" — is 369px, and nowrap made it
   overflow the card and push the page sideways. Wrapping is the graceful
   failure; overflowing is not. */
.map-card__foot .btn { padding: 17px 28px; font-size: 11.5px; }

/* --- Tabs. The 1px gaps over charcoal read as the dividers. --- */
.place-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--charcoal-deep);
  border: 1px solid var(--charcoal-deep);
}
.place-tab {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  padding: 13px 6px;
  border: 0;
  background: var(--card);
  color: var(--charcoal-deep);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.place-tab__count { font-size: 10px; letter-spacing: .04em; color: var(--ink-faint); }
.place-tab[aria-selected="true"] { background: var(--charcoal-deep); color: var(--on-dark); }
.place-tab[aria-selected="true"] .place-tab__count { color: var(--on-dark-faint); }

/* --- The ledger -------------------------------------------------
   Constant height, always — but with no dead space in it.

   Two obvious answers are both wrong. Reserving four rows (the
   handoff's min-height) leaves a framed empty cell on the three-place
   tabs, which reads as a missing row. Letting the panel size to its
   content removes that but makes the whole right-hand column grow and
   shrink by a row as you switch tabs, which is the instability this
   refinement exists to remove.

   So the panel is a fixed height and its rows divide it. Four rows come
   out at exactly the 71px the design specifies; three rows share the
   same box and come out at 95px, which reads as breathing room rather
   than as a gap. Constant geometry, no empty row, nothing deleted.

   289px = 4 x 71 + 3 hairlines + the panel's own 2 borders. */
.place-panel {
  border: 1px solid var(--hairline);
  background: var(--card);
  height: 289px;
  display: flex;
  flex-direction: column;
}
.place-row {
  flex: 1;
  min-height: 0;
  border-bottom: 1px solid var(--hairline);
}
.place-row:last-child { border-bottom: 0; }

.place-btn {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 15px;
  width: 100%;
  /* Fills its share of the fixed panel. Nothing inside may wrap. */
  height: 100%;
  padding: 0 17px;
  border: 0;
  background: var(--card);
  color: var(--charcoal-deep);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background .14s;
}
.place-btn:hover { background: var(--card-hover); }
.place-btn:hover .place-btn__arrow { color: var(--charcoal-deep); }

.place-btn__ledger { display: flex; flex-direction: column; gap: 3px; }
.place-btn__km {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.045em;
  color: var(--terracotta);
}
/* The approximation marker lives here, stated once per row. Inside the
   figure at 27px it read as a minus sign. */
.place-btn__unit {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.place-btn__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.place-btn__name,
.place-btn__note {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.place-btn__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.place-btn__note { font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); }

.place-btn__arrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  color: var(--hairline-rail);
}

/* Selected inverts the whole row rather than marking an edge. */
.place-btn[aria-pressed="true"] { background: var(--charcoal-deep); color: var(--on-dark); }
.place-btn[aria-pressed="true"]:hover { background: var(--charcoal-deep); }
.place-btn[aria-pressed="true"] .place-btn__km,
.place-btn[aria-pressed="true"] .place-btn__arrow { color: var(--ochre-light); }
.place-btn[aria-pressed="true"] .place-btn__unit { color: var(--on-dark-faint); }
.place-btn[aria-pressed="true"] .place-btn__note { color: var(--on-dark-muted); }

/* =============================================================
   Map pins
   -------------------------------------------------------------
   Leaflet builds these from divIcon HTML, so they have to be real
   classes here — they cannot be inline styles.
   ============================================================= */

.leaflet-div-icon,
.amh-icon { background: none; border: 0; }

.amh-pinwrap { display: flex; flex-direction: column; align-items: flex-start; }

.amh-pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  background: var(--cream-warm);
  color: var(--charcoal-deep);
  border: 1px solid var(--charcoal-deep);
  box-shadow: 0 3px 10px rgba(36, 31, 26, .22);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.amh-pin::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--terracotta);
}
/* The stem drops to the point, so the chip sits above what it labels
   rather than covering it. iconAnchor puts this base on the coordinate. */
.amh-pin__stem {
  display: block;
  width: 1px;
  height: 13px;
  margin-left: 11px;
  background: var(--charcoal-deep);
}
.amh-icon:hover .amh-pin { background: var(--sand); }

.amh-pin.is-sel {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream-warm);
}
.amh-pin.is-sel::before { background: var(--cream-warm); }

.amh-pin-house {
  background: var(--charcoal-deep);
  border-color: var(--charcoal-deep);
  color: var(--cream-warm);
  font-size: 11px;
  padding: 5px 11px 5px 8px;
}
.amh-pin-house::before { width: 7px; height: 7px; background: var(--ochre); }

/* A place marked `quiet` in places.js draws as this instead of a
   labelled chip, and becomes a full chip while it is selected. De Bosset
   Bridge is the one: it sits 300 m from Argostoli and the two labels
   collided, which the old exclude list "solved" by hiding it entirely. */
.amh-dot {
  display: block;
  width: 11px;
  height: 11px;
  background: var(--terracotta);
  border: 2px solid var(--cream-warm);
  box-shadow: 0 2px 7px rgba(36, 31, 26, .34);
}
.amh-icon:hover .amh-dot { background: var(--charcoal-deep); }

/* =============================================================
   Anna Maria House — Enquiries page partial
   -------------------------------------------------------------
   Everything on enquiries.html that styles.css does not already
   cover. Nothing here redefines a core class: where a core class
   was close but not exact, this file adds a MODIFIER and writes
   it as a double-class selector (.lead.lead--wide) so it wins on
   specificity regardless of source order.

   Values are lifted from design/Enquiries.dc.html verbatim.
   Radius stays 0 — it is never written here, in any form.
   ============================================================= */

/* ---- Page head ---------------------------------------------
   The core rule is `.page-head .lead { max-width: 600px }`; the
   Enquiries lead is 640px. Double class beats the descendant. */
.lead.lead--wide { max-width: 640px; }

/* =============================================================
   The two-column body — form left, support column right
   -------------------------------------------------------------
   480px per column, so it resolves 2 -> 1 and never leaves a
   half-empty second column. Not `.section`: the top padding here
   is clamp(40px, 4.4vw, 64px), tighter than --section-y, because
   the charcoal page head already carries the space above it.
   ============================================================= */

.enquiry-layout {
  padding: clamp(40px, 4.4vw, 64px) var(--gutter) clamp(52px, 5.4vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: clamp(28px, 3vw, 44px);
  align-items: start;
}

/* =============================================================
   The form
   ============================================================= */

.enquiry-form {
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 26px;
  scroll-margin-top: 80px;   /* clears the sticky header on #enquiryForm */
}

.form-intro { display: flex; flex-direction: column; gap: 10px; }

/* The form's own heading sits between .h-card and .h-section. */
.h-section.h-section--form { font-size: clamp(24px, 2.4vw, 30px); }

/* Validation. script.js writes the text and drops the `hidden`
   attribute; first failure wins, so there is only ever one. */
.form-error {
  margin: 0;
  padding: 14px 16px;
  background: var(--terracotta);
  color: var(--cream-warm);
  font-size: 15px;
  line-height: 1.5;
}
.form-error[hidden] { display: none; }

/* ---- Fields ------------------------------------------------- */

/* Two fields side by side, stacking below 200px each. */
.field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;              /* let the field shrink inside the grid */
}
.field.field--guests { gap: 12px; }

/* Field labels are the eyebrow primitive at label tracking. */
.eyebrow.eyebrow--label {
  letter-spacing: .18em;
  color: var(--ink-label);
}
.field__optional {
  color: var(--ink-optional);
  letter-spacing: .1em;
}

.input {
  padding: 15px 16px;
  border: 1.5px solid var(--charcoal-deep);
  background: var(--white);
  font-size: 16px;
  color: var(--charcoal-deep);
}
.input--date { padding: 14px 16px; }
.input--area { line-height: 1.5; resize: vertical; }

/* The ring sits inside the 1.5px border rather than outside it,
   so the field does not grow when it takes focus. */
.input:focus-visible { outline-offset: -2px; }
.input::placeholder { color: var(--ink-faint); }

/* ---- Guest steppers ----------------------------------------
   The visible caps live on the markup (data-min / data-max);
   script.js clamps against config.js and disables the ends. */

.stepper-group {
  border: 1.5px solid var(--charcoal-deep);
  background: var(--white);
}
/* The stepper is 144px of fixed control (46 + 52 + 46) and cannot
   shrink, so on a narrow screen the label is what has to give. In
   German "Erwachsene / Höchstens vier" plus that control overran a
   320px page by 2px. Wrapping lets the control drop under its own
   label instead of pushing the page sideways; min-width lets the
   label text wrap before it comes to that. */
.stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 16px 18px;
}
.stepper-row:not(:last-child) { border-bottom: 1px solid var(--hairline); }

.stepper-row__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stepper-row__name { font-size: 16px; font-weight: 600; }
.stepper-row__sub  { font-size: 14px; color: var(--ink-muted); }

/* Flush 46x46 buttons either side of a 52px value. */
.stepper { display: flex; align-items: center; flex: none; }
.stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--charcoal-deep);
  background: var(--card);
  color: var(--charcoal-deep);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.stepper__btn:not(:disabled):hover {
  background: var(--charcoal-deep);
  color: var(--card);
}
/* At the cap the button is inert — it must not invert on hover. */
.stepper__btn:disabled { color: var(--ink-faint); cursor: default; }

.stepper__value {
  min-width: 52px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}

/* The capacity line is the core .note, laid out beside its glyph. */
.capacity-note { display: flex; align-items: center; gap: 9px; }
.capacity-note .icon { color: var(--terracotta); }

/* ---- Live preview -------------------------------------------
   The outgoing message, rendered exactly as it will arrive. */

.preview {
  border: 1px solid var(--hairline);
  background: var(--card-hover);
}
.preview__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}
.preview__head .icon { color: var(--whatsapp); }
.preview__body {
  margin: 0;
  padding: 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
}

.form-actions { display: flex; flex-direction: column; gap: 12px; }

/* =============================================================
   Support column
   ============================================================= */

.support-col {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 28px);
}

/* Lighter padding than .card, and bordered — these sit beside the
   form rather than inside a ruled grid. */
.support-card {
  border: 1px solid var(--hairline);
  background: var(--card);
  padding: clamp(26px, 2.6vw, 34px);
}
.support-card--stack { display: flex; flex-direction: column; gap: 20px; }
.support-card--talk  { display: flex; flex-direction: column; gap: 16px; }

.steps { display: flex; flex-direction: column; gap: 20px; }
.step  { display: flex; gap: 16px; }
.step__chip {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--sand);
  color: var(--terracotta);
}
.step__body { display: flex; flex-direction: column; gap: 5px; }
.step__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.step__text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* The one dark thing between the page head and the footer. */
.host-card {
  background: var(--charcoal);
  color: var(--on-dark);
  padding: clamp(26px, 2.6vw, 34px);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.host-card__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--ochre);
  color: var(--charcoal-deep);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
}
.host-card__body { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.host-card__name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--on-dark);
}
.host-card__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-soft);
  text-wrap: pretty;
}

/* The one button pair on the site that is NOT flush: these two are
   alternatives to each other, not a primary/secondary pair, so the
   10px gap is deliberate and .btn-row is the wrong class. */
.talk-row { display: flex; flex-wrap: wrap; gap: 10px; }
.talk-row .btn { flex: 1 1 160px; padding: 17px 22px; gap: 10px; }
.talk-row .btn--outline { flex: 1 1 200px; }

/* =============================================================
   Good to know
   ============================================================= */

/* Slightly tighter than a standard .section, per the prototype. */
.section.section--know {
  padding-top: clamp(48px, 5vw, 76px);
  padding-bottom: clamp(48px, 5vw, 76px);
  gap: clamp(26px, 2.8vw, 36px);
}

/* Karla, not Archivo — the counterweight to the Archivo heading
   on the other end of the rule. */
.section-head__label {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}