/*
 * Design tokens — Bymansley (playbook §4).
 * Colours from "Colour Codes 4.5.26 (detailed).pdf"; type from "Font Key 14.5.26.pdf".
 * NEVER eye-dropped from the JPGs. Components reference these tokens only —
 * no hard-coded hexes in component CSS.
 */

/* Riviera Nights — licensed brand serif, self-hosted WOFF2 (§4.3/§22). Latin
 * (WebXL) faces, font-display:swap so the metric-compatible fallback paints
 * immediately and swaps without blocking the LCP. Weights in use: 400 body,
 * 500 most titles, 700 headings (h1–h4); 600 resolves up to 700. The 700 face
 * is <link rel=preload>ed in the head (PageRenderer) as the above-the-fold weight. */
@font-face {
  font-family: "Riviera Nights";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/riviera-nights-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Riviera Nights";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/riviera-nights-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Riviera Nights";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/riviera-nights-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Riviera Nights";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/riviera-nights-black.woff2") format("woff2");
}
@font-face {
  font-family: "Riviera Nights";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/riviera-nights-italic.woff2") format("woff2");
}

:root {
  /* Brand palette (§4.1) */
  --c-green-base: #80957f;     /* Base Green — decorative / large text ONLY (§4.2) */
  --c-green-primary: #536452;  /* Primary Green / "Fern" — body + headings */
  --grad-green: linear-gradient(90deg, var(--c-green-base), var(--c-green-primary)); /* light → dark, horizontal (green banners + buttons) */
  --c-sand-base: #fff3e9;      /* Base Sand */
  --c-sand-2: #f5e6da;         /* Base Sand 2 */
  --c-sand-accent: #ffe9d5;    /* Accent Sand */

  /* Gold accent (§4.2 large/decorative only — like Base Green, never body copy).
     Sampled from the Est.1958 heritage mark (design-assets/Est.1958.png), a real
     brand accent the §4.1 table omitted. The homepage handoff eye-matched it to
     #B5965C/#9a7b3f; this brand-sourced value is canonical. Used for: Est.1958,
     property sub-labels, testimonial stars, gold accent rules. */
  --c-gold: #9e8c67;

  /* Semantic aliases — use these in components (§4.1) */
  --bg-page: var(--c-sand-base);
  --bg-section-alt: var(--c-sand-2);
  --bg-accent: var(--c-sand-accent);
  --bg-inverse: var(--c-green-primary);     /* dark green sections carrying copy (§4.2) */
  --bg-inverse-soft: var(--c-green-base);   /* soft green bands — short/large text only */
  --text-body: var(--c-green-primary);      /* Fern on sand → 5.81:1 AA (§4.2) */
  --text-heading: var(--c-green-primary);
  --text-subhead: var(--c-green-base);      /* large/bold only (§4.2) */
  --text-on-inverse: var(--c-sand-base);
  --text-subhead-on-inverse: var(--c-sand-accent);
  --btn-bg: var(--c-green-primary);
  --btn-text: var(--c-sand-base);
  --btn-bg-inverse: var(--c-sand-base);
  --btn-text-inverse: var(--c-green-primary);
  --text-accent: var(--c-gold);             /* gold accents, large/decorative only */

  /* Typography (§4.3) — Riviera Nights, self-hosted once licensed (§32 Q6).
     Fallback stack is metric-compatible (Cormorant) for FOUT safety. */
  --font-serif: "Riviera Nights", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --tracking-display: 0.11em;   /* "tracking 110" in the brand doc */

  /* Spacing (§4.4) — tightened vertical rhythm (was up to 120px, felt too heavy). */
  --space-section: clamp(40px, 5.5vw, 76px);
  --space-section-compact: clamp(24px, 3.5vw, 44px);
  --space-gutter: clamp(16px, 4vw, 40px);
  --max-content: 1200px;
  --max-narrow: 720px;
  --max-wide: 1440px;
  --radius: 6px;               /* small radii preserve the heritage feel (§4.4) */
}

/*
 * Base stylesheet — realises the block renderers' class contract to the
 * design_handoff_homepage spec, on our reconciled brand tokens (tokens.css).
 * Handoff colours/fonts were eye-matched; we hold to §4.1 + Riviera Nights
 * (single family for now — serif/sans pairing is a logged pre-launch decision).
 * Desktop-canonical, mobile-first; fine spacing is KINGS' discretion (§3).
 * Critical-CSS inlining is a build-step concern (§22).
 *
 * cache-bust: 2026-08-25 (force a full-site page-cache flush so stale HTML —
 * e.g. the pre-capping Est.1958 header mark — is re-rendered fresh everywhere).
 */

*, *::before, *::after { box-sizing: border-box; }
/* Reserve the scrollbar gutter always so locking scroll (booking modals / nav /
   mega-menu) doesn't reflow the page behind the overlay (no horizontal shift). */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; font-family: var(--font-serif); color: var(--text-body);
  background: var(--bg-page); line-height: 1.6; font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Accessibility (§21) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bg-inverse); color: var(--text-on-inverse); padding: 0.75rem 1.25rem; }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--c-green-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ── Typography (§4.3): display uppercased + tracked via CSS, stored normal-case ── */
h1, h2, h3, h4 { font-weight: 700; color: var(--text-heading); line-height: 1.15; margin: 0 0 0.5em; }
.eyebrow, .intro-statement, .section-heading, .property-carousel__heading,
.testimonials__heading, .instagram-feed__heading, .newsletter__heading,
.book-direct-band__headline, .feature-icons__label, .site-nav__link, .btn {
  text-transform: uppercase; letter-spacing: 0.18em;
}
.intro-statement { font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: 0.16em; line-height: 1.7; max-width: clamp(20rem, 50vw, 48rem); margin-inline: auto; color: var(--c-green-primary); }
/* Leading script accent (e.g. "Award-Winning") — gold fill with a lighter gold
   stroke, in the brand script face. text-transform reset so the script isn't
   forced to caps; sized up to balance the small-caps run that follows. */
.intro-statement__accent { font-family: "Alex Brush", var(--font-serif); text-transform: none; letter-spacing: 0.01em; font-weight: 400; font-size: 2.1em; line-height: 0.9; color: #665a3e; -webkit-text-stroke: 0.5px #a89363; paint-order: stroke fill; }
/* Script SVG variant (exact brand type, no webfont): the mark sits inline before
   the caps run; the real words stay in an adjacent .sr-only span for SEO/AT. */
.intro-statement__accent--img { font: inherit; letter-spacing: normal; }
.intro-statement__accent-img { display: inline-block; vertical-align: middle; height: 2.9em; width: auto; aspect-ratio: 850 / 217; margin: -0.4em -0.5em 0 0; }

/* ── Block wrapper + common options (§7.1) ── */
/* Contain full-bleed (100vw) children — e.g. the apartment carousel — so the
   reserved scrollbar gutter never triggers a sliver of horizontal page scroll.
   clip (not hidden) keeps sticky/fixed descendants working. */
#main { overflow-x: clip; }
.block { padding-block: var(--space-section); padding-inline: var(--space-gutter); }
.block__inner { max-width: var(--max-content); margin-inline: auto; }
.pad--compact { padding-block: var(--space-section-compact); }
.pad--spacious { padding-block: calc(var(--space-section) * 1.2); }
.pad--none { padding-block: 0; }
.align--center { text-align: center; }
.align--right { text-align: right; }
.mw--narrow .block__inner { max-width: 48rem; }
.mw--wide .block__inner { max-width: var(--max-wide); }
.mw--full .block__inner { max-width: none; }

.bg--sand { background: var(--c-sand-base); }          /* cream */
.bg--sand2 { background: var(--c-sand-2); }
.bg--accent { background: var(--c-sand-accent); }      /* blush */
.bg--green { background: var(--grad-green); color: var(--text-on-inverse); }  /* horizontal light→dark green banner */
.bg--green h1, .bg--green h2, .bg--green h3 { color: var(--text-on-inverse); }
.bg--green-soft { background: var(--c-green-base); color: var(--c-green-primary); }
/* Buttons on the green bands ghost to a transparent fill on hover, so their text
   must stay cream to read against the band. */
.bg--green .btn:hover, .bg--green .btn:focus-visible { color: var(--c-sand-base); }
.bg--image { background-size: cover; background-position: center; }

.hide-desktop { display: none; }
@media (max-width: 1024px) { .hide-tablet { display: none; } }
@media (max-width: 640px)  { .hide-mobile { display: none; } }

/* Row group — adjacent blocks sharing options.row_group sit side-by-side on
   desktop (e.g. the location hero + perfect-for card), stacked on mobile. */
.block-row { max-width: var(--max-wide); margin-inline: auto; padding-inline: var(--space-gutter); display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
/* Grouped blocks don't add their own section padding (incl. pad--spacious's ~144px);
   the row controls spacing via its padding-block + row-gap, and each block's inner
   card has its own padding. */
.block-row > .block { padding: 0; }
.block-row > .block .block__inner { max-width: none; }
@media (min-width: 1024px) {
  /* Hero on the left (spans both rows); the info panel and the gallery stacked on
     the right, so the gallery sits DIRECTLY under the Perfect-for / Special-features box. */
  .block-row--hero { grid-template-columns: 40% 60%; align-items: start; }
  .block-row--hero > .block--hero { grid-column: 1; }
  .block-row--hero > .block--info_panel { grid-column: 2; }
}
/* Location top section: full-bleed dark-sand band behind the title + info panel,
   info-panel card in lighter sand on top. Full bleed via the box-shadow/clip trick. */
.block-row--hero { background: var(--c-sand-accent); padding-block: clamp(2rem, 4vw, 3.5rem); clip-path: inset(0 -100vmax); box-shadow: 0 0 0 100vmax var(--c-sand-accent); row-gap: 30px; }

/* ── Buttons (§4.4): slim, 3px radius, uppercase ── */
.btn { display: inline-block; padding: 0.85em 2.2em; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-text); text-decoration: none; font-weight: 600; border-radius: 3px; letter-spacing: 0.14em; transition: background-color 0.2s, color 0.2s; }
.btn:hover { background: transparent; color: var(--btn-bg); }
.btn--outline { background: transparent; color: var(--btn-bg); }
.btn--outline:hover { background: var(--btn-bg); color: var(--btn-text); }
.btn--inverse { background: var(--c-sand-base); color: var(--c-green-primary); border-color: var(--c-green-primary); }
.btn--sand { background: var(--c-sand-accent); color: var(--c-green-primary); border-color: var(--c-sand-accent); padding: 0.95em 2.8em; }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.btn--sand:hover { background: var(--c-green-primary); color: var(--c-sand-base); }

/* ── Header / nav ── */
.site-header { position: relative; background: var(--c-sand-base); border-bottom: 1px solid rgba(83, 100, 82, 0.18); }
.site-header__inner { max-width: var(--max-wide); margin-inline: auto; padding: 18px clamp(16px, 2vw, 34px); display: flex; align-items: center; gap: clamp(0.7rem, 1.2vw, 2em); }
.site-header__logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1; flex: 0 0 auto; }
.site-header__logo-img { height: 33px; width: auto; display: block; }
.site-header__logo-name { font-size: 1.45rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-green-primary); }
.site-header__logo-sub { font-size: 0.5rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-green-base); margin-top: 4px; }
/* Nudge the primary nav off the logo: with the Est mark's auto side-margins,
   an auto left margin here splits the header's free space evenly so the
   logo→nav, nav→Est and Est→actions gaps stay balanced across widths. */
.site-nav { margin-left: auto; }
.site-nav__list { list-style: none; display: flex; gap: clamp(0.65rem, 1.7vw, 2.1rem); margin: 0; padding: 0; flex-wrap: nowrap; }
.site-nav__link { text-decoration: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.07em; color: var(--c-green-primary); white-space: nowrap; }
.site-nav__link:hover { color: var(--c-gold); }
.site-header__right { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }
/* Mobile-menu copies of the action buttons — hidden on desktop (they live in the header bar). */
.site-nav__actions { display: none; }
.site-nav__est { display: none; }
.site-header__est { font-style: italic; font-size: 1.2rem; color: var(--c-gold); text-transform: none; letter-spacing: normal; display: inline-flex; align-items: center; flex: 0 0 auto; margin-inline: auto; }
.site-header__est-img { height: clamp(30px, 1.2vw, 60px); width: auto; display: block; flex: 0 0 auto; }
.site-header__action { display: inline-flex; align-items: center; gap: 0.4rem; padding: 9px 14px; font-size: 0.68rem; white-space: nowrap; flex: 0 0 auto; }
/* Brand icon recoloured to cream so it reads on the green button. */
.site-header__action-icon-img { width: 16px; height: 16px; object-fit: contain; filter: brightness(0) invert(1); }
.site-header__action:hover .site-header__action-icon-img, .site-header__action:focus-visible .site-header__action-icon-img { filter: none; }
.site-header__call { display: none; }
/* Book Direct Benefits drawer: a sand-accent panel that slides out from the left
   edge with an attached vertical "Book Direct Benefits" handle riding its right
   edge. site.js toggles .is-open on the root; the handle chevron flips to point
   back in when open (no separate close button). */
.book-direct { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.book-direct__scrim { position: absolute; inset: 0; background: rgba(43, 53, 39, 0.55); border: 0; opacity: 0; pointer-events: none; transition: opacity 0.44s ease; }
.book-direct.is-open .book-direct__scrim { opacity: 1; pointer-events: auto; cursor: pointer; }
.book-direct__drawer { position: absolute; left: 0; top: 50%; width: min(760px, 94vw); transform: translate(-100%, -50%); transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: auto; }
.book-direct.is-open .book-direct__drawer { transform: translate(0, -50%); }
.book-direct__panel { max-height: 92vh; overflow-y: auto; background: var(--c-sand-accent); color: var(--c-green-primary); box-shadow: 0 24px 60px rgba(43, 53, 39, 0.32); padding: clamp(1.35rem, 2.7vw, 2.15rem); text-align: center; }
/* The handle sits just past the panel's right edge, so it stays on-screen at the
   left when closed and rides the panel out when open. Full panel height. */
.book-direct__handle { position: absolute; left: 100%; top: 0; height: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; border: 0; cursor: pointer; background: var(--c-sand-accent); color: var(--c-green-primary); padding: 1rem 0.8rem; writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; font-family: var(--font-serif); font-weight: 900; font-size: 0.9em; letter-spacing: 0.1em; box-shadow: 4px 0 12px -2px rgba(43, 53, 39, 0.3); }
.book-direct__handle-chev { display: inline-flex; width: 24px; height: 24px; color: var(--c-green-primary); transition: transform 0.3s ease; }
.book-direct.is-open .book-direct__handle-chev { transform: rotate(180deg); }
/* Tab reads "Why Book Direct?" when closed, cross-fading to "Book Direct Benefits"
   when open. The open label sits in flow (sizing the tab to the longer text); the
   closed label overlays it. */
.book-direct__handle-label { position: relative; display: inline-block; letter-spacing: 2px; }
@media (prefers-reduced-motion: reduce) { .book-direct__drawer, .book-direct__scrim, .book-direct__handle-chev { transition: none; } }
.book-direct__title { font-family: var(--font-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(0.7rem, 1.6vw, 1.05rem); color: var(--c-green-primary); margin: 0; }
.book-direct__rule { display: block; width: 220px; max-width: 60%; height: 2px; background: var(--c-green-primary); margin: 1rem auto clamp(1.6rem, 3vw, 2.4rem); }
.book-direct__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.book-direct__col { display: flex; flex-direction: column; align-items: center; }
.book-direct__icon { display: flex; justify-content: center; }
.book-direct__icon-img { display: block; height: clamp(56px, 6.2vw, 76px); width: auto; object-fit: contain; }
.book-direct__col-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.95rem; color: var(--c-green-primary); margin: 0.9rem 0 0; }
/* Swanky gold underline (SVG flourish) beneath each column title. */
.book-direct__col-rule { display: block; width: clamp(94px, 9vw, 122px); height: auto; margin: 0.5rem auto 0.85rem; }
.book-direct__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.32em; }
.book-direct__item { font-weight: 400; line-height: 1.32; font-size: 0.82rem; color: var(--c-green-primary); }
@media (max-width: 640px) {
  .book-direct__drawer { top: 0; width: min(420px, 88%); transform: translateX(-100%); }
  .book-direct.is-open .book-direct__drawer { transform: translateX(0); }
  .book-direct__panel { height: 100vh; max-height: none; }
  .book-direct__title { font-size: 1.4rem; }
  /* Closed: a compact tab (roughly half the desktop size — it's a one-tap
     feature). Open: the handle spans the full-height pulled-out panel. */
  .book-direct__handle { top: 50%; height: auto; transform: translateY(-50%) rotate(180deg); padding: 0.55rem 0.32rem; font-size: 0.6em; gap: 0.28rem; }
  .book-direct__handle-chev { width: 15px; height: 15px; }
  .book-direct.is-open .book-direct__handle { top: 0; height: 100%; transform: rotate(180deg); }
  .book-direct__cols { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ── Hero ── */
.block--hero { padding: 0; }
.hero { position: relative; display: grid; place-items: center; min-height: 340px; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Deferred background video (site.js): oversized to COVER the banner, clipped by
   the media box, behind the gradient + content, non-interactive. Fades in on load. */
/* Cover the frame (no extra zoom); pointer-events:none keeps it non-interactive. */
.hero__video-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.hero--video-ready .hero__video-frame { opacity: 1; }
/* Self-hosted looping background video: covers the frame, sits behind the content.
   The poster (= the eager hero image) shows until playback starts, so no flash. */
/* Overscan by 1px on every edge so no hairline of the poster (holding image) ever
   shows between the playing video and the block beneath (sub-pixel rounding). */
.hero__video { display: block; position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero__video-frame, .hero__video { display: none; } }
/* Even scrim: the hero copy is centred, so darken the frame gently and uniformly
   for legibility anywhere. Applies to every image hero; the bare homepage hero
   opts out just below. */
.hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(33, 42, 28, 0.4) 0%, rgba(33, 42, 28, 0.5) 55%, rgba(33, 42, 28, 0.6) 100%); }
/* Contact + Guest login heroes: no dark overlay on the image (per request). */
body.page--contact .hero__media::after,
body.page--guest-login .hero__media::after { display: none; }
/* Bare image/video hero (homepage): taller banner, no copy, so no scrim. */
.hero--bare { min-height: 500px; }
/* Homepage hero forms its own stacking context so the absolutely-positioned
   <video> stays trapped inside it. Without this the video escapes to the root
   layer, where mobile GPUs composite it above the booking card and the overlap
   vanishes; contained, the booking section's higher z-index reliably wins. */
.page--home .hero--bare { isolation: isolate; }
/* Thinner hero banner on mobile so the wide video reads better. */
@media (max-width: 700px) { .hero--bare { min-height: clamp(300px, 42vh, 380px); } }
/* Homepage: the hero video is an ultra-wide cinematic strip (1920×568). In the
   tall box above it just zoom-crops, so on mobile give the homepage hero a short
   ~2.7:1 band — thinner overall, showing the whole width rather than a cropped slice. */
@media (max-width: 700px) {
  .page--home .hero--bare { min-height: 0; aspect-ratio: 2 / 1; }
}
.hero--bare .hero__media::after { display: none; }
/* Damask pattern background (heroes without a photo) — the texture is the treatment,
   so no darkening scrim. */
.hero__media--pattern { background-size: cover; background-position: center; }
.hero__media--pattern::after { display: none; }
/* Ornate title divider (rule + flourish) beneath the headline; inherits the hero
   text colour (cream on the green damask, green on a light one). */
.hero--framed { min-height: clamp(360px, 32vw, 460px); }
/* Card hero (Our Cities): the copy sits in a cream card over the photo. The
   two-class selectors out-specify the base full/standard hero colour rules. */
.hero--card { min-height: clamp(380px, 34vw, 480px); padding-block: clamp(1.75rem, 5vw, 3rem); }
.hero--card .hero__media::after { background: rgba(43, 53, 39, 0.22); }
.hero.hero--full.hero--card .hero__content, .hero.hero--standard.hero--card .hero__content { max-width: min(880px, 90%); background: var(--c-sand-accent); color: var(--c-green-primary); border-radius: 10px; padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.5rem, 5vw, 4rem); }
.hero.hero--full.hero--card .hero__headline, .hero.hero--standard.hero--card .hero__headline { color: var(--c-green-primary); font-size: clamp(1.95rem, 4.5vw, 3.45rem); letter-spacing: 0.12em; margin: 0; }
.hero.hero--full.hero--card .hero__body, .hero.hero--standard.hero--card .hero__body, .hero.hero--full.hero--card .hero__body p { color: var(--c-green-primary); font-size: 1.05rem; line-height: 1.7; margin: clamp(1rem, 2.5vw, 1.6rem) auto 0; max-width: 48rem; }
.hero.hero--full.hero--card .hero__eyebrow, .hero.hero--standard.hero--card .hero__eyebrow { color: var(--c-green-base); }
/* Card pinned to the left over the image (e.g. Aparthotels vs Hotels hero).
   Selectors carry the full hero--full.hero--card.hero--card-left chain so they
   out-specify the centred .hero--full.hero--card card rules above. */
.hero--card-left { place-items: center start; }
.hero.hero--full.hero--card.hero--card-left .hero__content { margin-left: max(var(--space-gutter), calc((100% - var(--max-wide)) / 2 + var(--space-gutter))); margin-right: 0; max-width: 40%; text-align: left; }
.hero.hero--full.hero--card.hero--card-left .hero__headline { font-size: clamp(1.95rem, 4.5vw, 2.45rem); text-align: left; }
.hero--card-left .hero__eyebrow { text-align: left; }
.hero.hero--full.hero--card.hero--card-left .hero__body, .hero.hero--full.hero--card.hero--card-left .hero__body p { margin-left: 0; margin-right: 0; text-align: left; max-width: none; }
.hero--card-left .hero__divider { justify-content: flex-start; margin-inline: 0; }
@media (max-width: 900px) { .hero.hero--full.hero--card.hero--card-left .hero__content { max-width: min(440px, 90%); } }
@media (max-width: 700px) { .hero.hero--full.hero--card.hero--card-left .hero__content { margin-inline: auto; max-width: 90%; } }
/* Aparthotels vs Hotels: long green dividers above and below the FAQs — the same
   full content-width as the rule between the two comparison sections. */
body.page--aparthotels-vs-hotels .block--faq .block__inner::before,
body.page--aparthotels-vs-hotels .block--faq .block__inner::after { content: ""; display: block; width: 100%; height: 2px; background: var(--c-green-primary); }
body.page--aparthotels-vs-hotels .block--faq .block__inner::before { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
body.page--aparthotels-vs-hotels .block--faq .block__inner::after { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* City property tiles (Our Cities) — flat green cards linking to each property. */
.city-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); max-width: var(--max-wide); margin-inline: auto; }
/* The hero above the city tiles has no padding, so the gap above the tiles is a
   single section's worth; drop the tiles' own bottom padding so the gap below
   (the next block's top padding) matches it rather than doubling up. */
.block--city_tiles { padding-bottom: 0; }
.city-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; min-height: 132px; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--c-green-primary); color: var(--c-sand-base); border: 2px solid var(--c-green-primary); border-radius: 8px; transition: background-color 0.2s ease, color 0.2s ease; }
.city-tile:hover, .city-tile:focus-visible { background: transparent; color: var(--c-green-primary); }
.city-tile__name { font-family: var(--font-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.1; }
.city-tile__sub { font-family: var(--font-serif); font-size: clamp(1rem, 1.8vw, 1.3rem); margin-top: 0.35rem; }
/* A lone city tile (e.g. Inverness → Highland Apartments) centres rather than
   sitting in the left grid column. */
.city-tile:only-child { grid-column: 1 / -1; max-width: 640px; margin-inline: auto; width: 100%; }
@media (max-width: 640px) { .city-tiles { grid-template-columns: 1fr; } }
/* Property feature (Our Cities residence card): cream card, tall image right. */
.property-feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; max-width: var(--max-wide); margin-inline: auto; background: var(--c-sand-accent); border-radius: 12px; padding: clamp(1.75rem, 4vw, 3rem); }
.property-feature__name { font-family: var(--font-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--c-green-primary); margin: 0; }
.property-feature__area { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--c-green-base); margin: 0.5rem 0 0; }
.property-feature__address { font-weight: 700; color: var(--c-green-base); margin: 0.35rem 0 0; }
.property-feature__desc { color: var(--c-green-primary); line-height: 1.7; margin: 1.2rem 0 0; }
.property-feature__desc:first-of-type { margin-top: 1.6rem; }
.property-feature__media { align-self: stretch; border-radius: 10px; overflow: hidden; }
.property-feature__media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.property-feature__media--empty { min-height: 340px; background: linear-gradient(150deg, var(--c-sand-2), #c9b39a); }
@media (max-width: 900px) { .property-feature { grid-template-columns: 1fr; } .property-feature__media img { min-height: 260px; } }
/* Sustainability band (homepage): green-framed foliage card — big title left, a
   cream pillar panel right, the whole card a link out to /sustainability/ with the
   same sand highlight-on-hover as the apartment-type tiles. */
/* Full-bleed like the Book Direct band: the block drops its gutter and the card
   spans edge to edge, framed top and bottom by the sage rule. */
.block--sustainability_band { padding: 0; }
.sustainability-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3.5rem); width: 100%; min-height: clamp(200px, 20vw, 280px); padding-block: clamp(1.5rem, 5vw, 3rem); padding-inline: max(clamp(1.25rem, 5vw, 2.15rem), calc((100% - var(--max-wide)) / 2 + 34px)); border-block: 6px solid var(--c-green-base); overflow: hidden; text-decoration: none; }
.sustainability-band__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.sustainability-band__media--empty { background: linear-gradient(150deg, var(--c-green-primary), #2b3527); }
/* Sand highlight fade on hover — same treatment as the apartment-type tiles. */
.sustainability-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 243, 233, 0.5), rgba(255, 243, 233, 0)); opacity: 0; transition: opacity 0.25s ease; }
.sustainability-band:hover .sustainability-band__media::after, .sustainability-band:focus-visible .sustainability-band__media::after { opacity: 1; }
.sustainability-band__title { position: relative; z-index: 1; margin: 0; font-family: var(--font-serif); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(3.2rem, 7vw, 4.8rem); line-height: 1; color: var(--c-sand-base); }
.sustainability-band__panel { position: relative; z-index: 1; flex: 0 0 auto; display: flex; flex-direction: column; gap: clamp(0.6rem, 1.5vw, 1rem); background: var(--c-sand-base); border-radius: 8px; padding: clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.4rem, 3vw, 2.5rem); }
.sustainability-band__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.sustainability-band__item { font-family: var(--font-serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(0.85rem, 1.5vw, 1.15rem); color: var(--c-green-base); line-height: 1.4; }
.sustainability-band__cta { font-family: var(--font-serif); font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1.27rem, 2.64vw, 2.09rem); color: var(--c-green-primary); }
@media (max-width: 720px) { .sustainability-band { flex-direction: column; align-items: stretch; text-align: center; padding-left: 3.5rem; } .sustainability-band__panel { align-items: center; } .sustainability-band__title { font-size: clamp(1.45rem, 7.2vw, 3.4rem); overflow-wrap: anywhere; } }
/* Our Cities: the related-reading card grid gets a full-width green divider above
   and below, matching the section rules elsewhere on the page. Trim the outer
   whitespace and give the content generous, even room inside the two rules. */
body[class*="page--our-cities-"] .block--card_grid { padding-block: clamp(2rem, 4vw, 3rem); }
body[class*="page--our-cities-"] .block--card_grid .block__inner { border-top: 2px solid var(--c-green-primary); border-bottom: 2px solid var(--c-green-primary); padding-block: clamp(2.75rem, 5.5vw, 4rem); }
/* Our Cities: apartment room grids keep the cream card the section is known for. */
body[class*="page--our-cities-"] .block--room_grid .room-grid { background: var(--c-sand-accent); border-radius: 14px; padding: clamp(1.5rem, 4vw, 3rem); }
/* Cheltenham guide sub-pages: full-width green section rules under the intro,
   above the apartments heading, and beneath the 'Destination Experts' block.
   Each rule is drawn at the BLOCK EDGE (not on the inner) so it sits centred in
   the normal section gap and adds no extra padding to compound. The apartments
   heading is also centred; its small underline is turned off in the data.
   Scoped to /cheltenham/<sub> only. */
body[class*="page--our-cities-cheltenham-"] .block--rich_text,
body[class*="page--our-cities-cheltenham-"] .block--section_heading,
body[class*="page--our-cities-cheltenham-"] .block--contact_block { position: relative; }
body[class*="page--our-cities-cheltenham-"] .block--section_heading .block__inner { text-align: center; }
body[class*="page--our-cities-cheltenham-"] .block--rich_text::after,
body[class*="page--our-cities-cheltenham-"] .block--contact_block::after,
body[class*="page--our-cities-cheltenham-"] .block--section_heading::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: min(var(--max-wide), 90vw); height: 2px; background: var(--c-green-primary);
}
body[class*="page--our-cities-cheltenham-"] .block--rich_text::after,
body[class*="page--our-cities-cheltenham-"] .block--contact_block::after { bottom: 0; }
body[class*="page--our-cities-cheltenham-"] .block--section_heading::before { top: 0; }
.hero__divider { margin-top: clamp(1rem, 2.5vw, 1.8rem); }
.hero__divider-rule { display: block; width: min(560px, 74%); height: 1px; background: currentColor; opacity: 0.85; margin: 0 auto clamp(0.9rem, 2vw, 1.5rem); }
.hero__divider-mark svg { display: block; width: clamp(120px, 16vw, 190px); height: auto; margin: 0 auto; }
.hero__content { position: relative; z-index: 2; text-align: center; color: var(--text-on-inverse); padding: 1rem; }

/* Editorial image hero (full/standard with copy): eyebrow → headline → subline →
   ghost CTA, anchored bottom-left over the directional scrim (design handoff). */
.hero--full:not(.hero--bare), .hero--standard { min-height: 300px; }
.hero--full:not(.hero--bare) .hero__content,
.hero--standard .hero__content { position: relative; z-index: 2; max-width: 60%; padding: 1rem; text-align: center; color: var(--c-sand-base); }
.hero--full:not(.hero--bare) .hero__eyebrow,
.hero--standard .hero__eyebrow { text-transform: uppercase; letter-spacing: 0.34em; font-size: 0.75rem; color: var(--c-sand-base); margin: 0; }
.hero--full:not(.hero--bare) .hero__headline,
.hero--standard .hero__headline { font-family: var(--font-serif); font-weight: 500; font-size: 2.4em; line-height: 1.08; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-sand-base); margin: 14px 0 0; }
.hero--full:not(.hero--bare) .hero__subhead,
.hero--standard .hero__subhead,
.hero--full:not(.hero--bare) .hero__body,
.hero--standard .hero__body,
.hero--full:not(.hero--bare) .hero__body p,
.hero--standard .hero__body p { font-size: 1rem; line-height: 1.6; letter-spacing: 0; text-transform: none; color: #e8e9dd; max-width: 420px; margin: 18px auto 0; }
.hero--full:not(.hero--bare) .hero__actions,
.hero--standard .hero__actions { margin-top: 26px; justify-content: center; }
.hero--full:not(.hero--bare) .hero__actions .btn,
.hero--standard .hero__actions .btn { background: transparent; color: var(--c-sand-base); border: 1px solid rgba(251, 243, 232, 0.7); border-radius: 100px; padding: 13px 24px; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; }
.hero--full:not(.hero--bare) .hero__actions .btn:hover,
.hero--standard .hero__actions .btn:hover { background: rgba(251, 243, 232, 0.14); }
.hero__caption { position: absolute; left: 28px; bottom: 18px; z-index: 1; margin: 0; font-style: italic; font-size: 1.1rem; color: rgba(43, 53, 39, 0.55); }
/* Compact text hero (location Option A): text on cream, gold rule, no photo. */
.hero--compact { min-height: 0; display: block; }
.hero--compact .hero__content { position: static; padding: 0; text-align: left; color: var(--c-green-primary); }
.hero--compact .hero__eyebrow { color: var(--c-green-base); }
.hero--compact .hero__headline { color: var(--c-green-primary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; font-size: clamp(2rem, 4vw, 2.6rem); }
.hero--compact .hero__headline::after { content: ""; display: block; width: 100%; height: 2px; background: var(--c-green-primary); margin: 0.75rem 0 0.25rem; }
.hero--compact .hero__subhead { display: none; }
.hero--compact .hero__body { color: var(--c-green-primary); margin-top: 1rem; font-weight: 500; font-size: 1rem; }
.hero--compact .hero__body p { line-height: 1.8; }

/* ── Booking bar (§11): full-bleed sage band; content aligned to the wide content
      frame (--max-wide + page gutter) so its left edge lines up with the property
      page images (.mw--wide / room grid), not the narrower header frame ── */
.block--booking_bar { padding: 0; }
.booking-bar { width: 100%; position: relative; z-index: 5; color: var(--text-on-inverse); padding-inline: var(--space-gutter); }
.booking-bar::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url("/assets/brand/images/mansley-maypole-light.svg") center 75% / cover no-repeat; opacity: 0.06; pointer-events: none; }
.booking-bar__inner { position: relative; z-index: 1; }
.booking-bar--sticky { position: sticky; top: 0; z-index: 20; }
.booking-bar--green-soft, .booking-bar--green { background: var(--grad-green); }
.booking-bar--sand { background: var(--c-sand-base); color: var(--c-green-primary); }
.booking-bar__inner { max-width: var(--max-wide); margin-inline: auto; padding-block: 16px; display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: end; }
.booking-bar__intro { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; align-self: center; }
.booking-bar__lockup { display: flex; flex-direction: column; line-height: 1.05; }
.booking-bar__title { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.2rem; color: var(--text-on-inverse); }
.booking-bar__subtitle { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-sand-base); margin-top: 3px; }
.booking-bar__info { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: var(--text-on-inverse); font-style: italic; cursor: pointer; }
.booking-bar__field { display: flex; flex-direction: column; gap: 0.25rem; flex: 0 1 14.5rem; min-width: 2.2rem; }
/* Narrow the three select fields (~85%) and balance the freed space on both
   sides of the trio: a gap before the first field and before the promo group. */
.booking-bar__intro + .booking-bar__field { margin-left: auto; }
.booking-bar__field--promo { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 0.45rem; margin-left: auto; }
.booking-bar__promo-label { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-on-inverse); white-space: nowrap; }
.booking-bar__field--promo .booking-bar__promo { width: 11rem; }
.booking-bar__label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-subhead-on-inverse); }
/* Fields: outlined in light sand on a darker-green fill, sand text. */
.booking-bar__select, .booking-bar__field-btn, .booking-bar__dates, .booking-bar__guests-toggle, .booking-bar__promo { width: 100%; padding: 11px 13px; border: 1px solid var(--c-sand-base); border-radius: 4px; font: inherit; font-size: 0.78rem; background: var(--c-green-primary); color: var(--c-sand-base); text-align: left; }
.booking-bar__select { -webkit-appearance: none; appearance: none; }
.booking-bar__promo::placeholder { color: var(--text-subhead-on-inverse); }
.booking-bar__guests-toggle { cursor: pointer; }
.booking-bar__submit { flex: 0 0 auto; align-self: end; padding: 11px 26px; background: var(--c-sand-accent); border-color: var(--c-sand-accent); color: var(--c-green-primary); font-family: var(--font-serif); font-weight: 900; font-size: 1.05rem; }
.booking-bar__submit:hover, .booking-bar__submit:focus-visible { background: var(--c-sand-base); border-color: var(--c-sand-base); color: var(--c-green-primary); }

/* ── Book Direct band: sage, split left text / right image fade ── */
.block--book_direct_band { padding: 0; border-top: 2px solid var(--c-green-primary); border-bottom: 2px solid var(--c-green-primary); }

/* Homepage spacing overrides (targeted by anchor id, §7.1). The intro paragraph
   above the feature icons hugs them (24px bottom); the Why Mansley button sits
   flush under the icons-and-text block (0 top) with breathing room below. */
#home-intro { padding-bottom: 24px; }
#home-why-mansley { padding-top: 0; padding-bottom: 74px; }
/* Full-bleed band: the image bleeds to the far edge; the frame constrains the text
   to the content column (header frame), so the copy doesn't span full width. */
.book-direct-band { position: relative; min-height: 200px; }
.book-direct-band__bg { position: absolute; inset: 0 0 0 0%; z-index: 0; }
.book-direct-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.book-direct-band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-green-base) 0%, rgba(128, 149, 127, 0.2) 60%, transparent 100%); }
.book-direct-band__frame { position: relative; z-index: 1; max-width: var(--max-wide); margin-inline: auto; padding: 56px 34px; display: flex; align-items: center; gap: clamp(1.5rem, 6vw, 6rem); flex-wrap: wrap; }
.book-direct-band__content { width: fit-content; }
.book-direct-band__headline { font-size: clamp(2rem, 3.5vw, 2.4rem); font-weight: 500; letter-spacing: 0.1em; color: var(--c-sand-base); margin: 0 0 0.6rem; }
.book-direct-band__rule { width: 100%; height: 2px; border: 0; background: var(--c-sand-base); opacity: 0.55; margin: 0 0 0.7rem; }
.book-direct-band__subhead { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--c-sand-base); text-transform: uppercase; letter-spacing: 4px; margin: 0; }
/* "Use code: XXXX" copy-to-promo control. */
.book-direct-band__promo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.book-direct-band__promo-label { font-size: clamp(1.05rem, 1.9vw, 1.4rem); color: var(--c-sand-base); letter-spacing: 0.02em; }
.book-direct-band__code { background: var(--c-sand-base); color: var(--c-green-primary); border: 0; border-radius: 4px; padding: 0.55em 1.3em; font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.08s ease; }
.book-direct-band__code:hover, .book-direct-band__code:focus-visible { background: var(--c-sand-accent); }
.book-direct-band__code:active { transform: scale(0.97); }
.book-direct-band__code.is-copied { background: var(--c-green-primary); color: var(--c-sand-base); }
.book-direct-band__copied { color: var(--c-sand-base); font-size: 0.9rem; letter-spacing: 0.02em; opacity: 0; transform: translateY(2px); transition: opacity 0.2s ease, transform 0.2s ease; }
.book-direct-band__copied.is-visible { opacity: 1; transform: none; }
.booking-bar__promo.is-flash { box-shadow: 0 0 0 3px var(--c-sand-accent); transition: box-shadow 0.2s ease; }
/* Whole-band link with a soft beige hover wash (matches the sustainability band). */
.book-direct-band--link { display: block; text-decoration: none; color: inherit; }
.book-direct-band__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(255, 243, 233, 0.5), rgba(255, 243, 233, 0.12)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.book-direct-band--link:hover .book-direct-band__overlay, .book-direct-band--link:focus-visible .book-direct-band__overlay { opacity: 1; }

/* ── Heritage timeline (/history/) ── */
.timeline__list { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-content); }
.timeline__list::before { content: ""; position: absolute; left: 7px; top: 0.75rem; bottom: 0.75rem; width: 2px; background: rgba(83, 100, 82, 0.3); }
.timeline__entry { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.timeline__entry--chapter { padding-block: clamp(2rem, 5vw, 4rem); }
.timeline__entry--marker { padding-block: 0.6rem; }
.timeline__rail { position: relative; padding-left: 2.4rem; }
.timeline__dot { position: absolute; left: 0; top: 0.35rem; width: 16px; height: 16px; border-radius: 50%; background: var(--c-green-primary); box-shadow: 0 0 0 4px var(--c-sand-base); }
.timeline__place { font-family: var(--font-serif); font-size: 1.2rem; color: var(--c-green-primary); margin: 0 0 0.1rem; }
.timeline__year { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--c-green-primary); margin: 0; }
.timeline__note { font-size: 0.9rem; line-height: 1.55; color: var(--c-green-primary); margin: 0.5rem 0 0; max-width: 15rem; }
.timeline__media { position: relative; min-height: clamp(260px, 34vw, 430px); }
.timeline__img { position: absolute; background-size: cover; background-position: center; border-radius: 2px; box-shadow: 0 22px 55px -26px rgba(33, 42, 28, 0.6); }
/* Interactive images open in a lightbox — clickable, with a hover lift. */
.timeline--interactive .timeline__media .timeline__img { cursor: zoom-in; transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; }
.timeline--interactive .timeline__media .timeline__img:hover, .timeline--interactive .timeline__media .timeline__img:focus-visible { transform: translateY(-3px) scale(1.015); box-shadow: 0 30px 64px -22px rgba(33, 42, 28, 0.72); filter: brightness(1.06); outline: none; }
.timeline--interactive .timeline__media .timeline__img:focus-visible { box-shadow: 0 0 0 3px var(--c-green-primary), 0 30px 64px -22px rgba(33, 42, 28, 0.72); }
/* Lightbox */
.tl-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(33, 42, 28, 0.88); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.tl-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.tl-lightbox__img { max-width: min(1100px, 94vw); max-height: 90vh; width: auto; height: auto; border-radius: 3px; box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.65); }
.tl-lightbox__close { position: absolute; top: 3.5vmin; right: 3.5vmin; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--c-sand-base); color: var(--c-green-primary); font-size: 1.5rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tl-lightbox__close:focus-visible { outline: 3px solid var(--c-sand-base); outline-offset: 3px; }
.timeline__img--back { top: 0; right: 0; width: 80%; height: 88%; }
.timeline__img--front { left: 0; bottom: 0; width: 60%; height: 74%; z-index: 2; border: 7px solid var(--c-sand-base); }
.timeline__heading { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.4rem); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-green-primary); margin: 0 0 1.3rem; padding-bottom: 1.3rem; border-bottom: 2px solid var(--c-green-primary); }
.timeline__body p { line-height: 1.85; color: var(--c-green-primary); margin: 0 0 1.1rem; }
.timeline__body p:last-child { margin-bottom: 0; }

/* ── Timeline scroll choreography — slick reveal + gentle snap ── */
@media (prefers-reduced-motion: no-preference) {
  /* Vertical slider feel: each chapter fills the screen, so a scroll/swipe down
     brings the next one in, and the scroll-driven cross-fade (below) makes only
     one read at a time. Deliberately NO scroll-snap on the root — snapping the
     page scroller disables mobile pull-to-refresh — the full-height chapters +
     fade give the one-at-a-time effect without hijacking the page scroll. */
  .page--history .timeline__entry--chapter {
    min-height: 100vh;
    min-height: 100svh;
    align-content: center;
    padding-block: clamp(2rem, 5vh, 4rem);
  }

  /* Fallback reveal (browsers without scroll-driven animations). Gated on
     .is-js-reveal — site.js adds it — so without JS the content stays fully
     visible (no-JS friendly). Inner parts rise in, staggered, once the
     IntersectionObserver marks the entry .is-inview. */
  @supports not (animation-timeline: view()) {
    .page--history .timeline__list.is-js-reveal .timeline__rail,
    .page--history .timeline__list.is-js-reveal .timeline__media,
    .page--history .timeline__list.is-js-reveal .timeline__text {
      opacity: 0;
      transform: translateY(46px);
      transition: opacity 0.9s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
    }
    .page--history .timeline__list.is-js-reveal .timeline__entry.is-inview .timeline__rail { opacity: 1; transform: none; transition-delay: 0.02s; }
    .page--history .timeline__list.is-js-reveal .timeline__entry.is-inview .timeline__media { opacity: 1; transform: none; transition-delay: 0.14s; }
    .page--history .timeline__list.is-js-reveal .timeline__entry.is-inview .timeline__text { opacity: 1; transform: none; transition-delay: 0.28s; }
  }

  /* The real thing: buttery fade-in from the bottom AND fade-out at the top,
     tied directly to scroll position, plus opposing parallax on the two photo
     plates for depth. Entirely CSS — needs no JS, so it degrades cleanly. */
  @supports (animation-timeline: view()) {
    .page--history .timeline__entry {
      animation: tlChapterReveal linear both;
      animation-timeline: view();
      animation-range: entry 6% exit 94%;
    }
    .page--history .timeline__img--back { animation: tlDriftBack linear both; animation-timeline: view(); }
    .page--history .timeline__img--front { animation: tlDriftFront linear both; animation-timeline: view(); }
  }
}
@keyframes tlChapterReveal {
  0%   { opacity: 0; transform: translateY(80px) scale(0.978); }
  24%  { opacity: 1; transform: none; }
  76%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-80px) scale(0.978); }
}
@keyframes tlDriftBack  { from { translate: 0 5%; }  to { translate: 0 -5%; } }
@keyframes tlDriftFront { from { translate: 0 -4%; } to { translate: 0 7%; } }

/* ── Interactive heritage timeline — JS click-picker (site.js builds it from
   [data-timeline-data]; the <ol> stays the crawlable no-JS fallback). Click a
   year: the rail pans to centre it (3 visible) and the content cross-fades. ── */
.timeline--interactive .timeline__list { display: none; }
.timeline__ui { --tl-row: clamp(82px, 11vh, 104px); display: grid; grid-template-columns: minmax(190px, 250px) 1fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; max-width: var(--max-content); margin-inline: auto; }
/* Year rail: a 3-row window; the strip slides so the active year sits centre. */
.timeline__rail-window { position: relative; height: calc(var(--tl-row) * 3); overflow: hidden; }
.timeline__rail-window::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: rgba(83, 100, 82, 0.22); }
.timeline__rail-strip { display: grid; grid-auto-rows: var(--tl-row); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.timeline__year-spacer { display: block; height: var(--tl-row); }
.timeline__year-btn { position: relative; height: var(--tl-row); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.15rem; padding-left: 2.5rem; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; opacity: 0.36; transition: opacity 0.4s ease; }
.timeline__year-btn:hover { opacity: 0.7; }
.timeline__year-btn.is-active { opacity: 1; cursor: default; }
.timeline__year-dot { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--c-green-base); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.timeline__year-btn.is-active .timeline__year-dot { background: var(--c-green-primary); box-shadow: 0 0 0 4px var(--c-sand-base), 0 0 0 6px rgba(83, 100, 82, 0.25); }
.timeline__year-num { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; color: var(--c-green-primary); }
.timeline__year-btn.is-active .timeline__year-num { font-weight: 600; }
.timeline__year-place { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-green-base); }
.timeline__year-btn:focus-visible { outline: 3px solid var(--c-green-primary); outline-offset: 2px; border-radius: 4px; }
/* Content stage — cross-fades between chapters. */
.timeline__stage { position: relative; min-height: clamp(320px, 44vw, 460px); }
.timeline__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; opacity: 0; transition: opacity 0.4s ease; }
.timeline__panel.is-in { opacity: 1; }
/* No scroll-driven drift for the static picker images. */
.timeline--interactive .timeline__media .timeline__img { animation: none; translate: none; }
@media (prefers-reduced-motion: reduce) { .timeline__rail-strip, .timeline__panel { transition: none; } }
@media (max-width: 860px) {
  .timeline__ui { grid-template-columns: 1fr; gap: 1.25rem; justify-items: stretch; }
  /* Horizontal year rail across the top — three years in a row, active centred —
     so the content below gets the full width for text + imagery. */
  .timeline__rail-window { width: 100%; max-width: none; height: auto; }
  .timeline__rail-window::before { left: 0; right: 0; top: auto; bottom: 13px; width: auto; height: 2px; }
  .timeline__rail-strip { grid-auto-flow: column; grid-auto-rows: auto; grid-auto-columns: calc((100vw - 2.5rem) / 3); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  .timeline__year-spacer { height: auto; }
  .timeline__year-btn { height: auto; align-items: center; text-align: center; padding: 0.4rem 0.25rem 1.6rem; gap: 0.1rem; }
  .timeline__year-dot { left: 50%; top: auto; bottom: 5px; transform: translateX(-50%); }
  .timeline__year-num { font-size: clamp(1.3rem, 6vw, 1.9rem); }
  .timeline__year-place { font-size: 0.62rem; }
  /* Content below: full width, smaller image so the copy breathes. */
  .timeline__panel { grid-template-columns: 1fr; gap: 1.1rem; }
  /* Full-width panel: centre the copy and drop the left indent used by the
     static list layout (higher specificity than the ≤900px .page--history rule). */
  .page--history .timeline__panel .timeline__text { text-align: center; padding-left: 0; padding-right: 0; }
  .timeline__media { min-height: clamp(180px, 46vw, 260px); }
  .timeline__img--back { width: 74%; height: 84%; }
  .timeline__img--front { width: 56%; height: 68%; }
}

@media (max-width: 900px) {
  .timeline__entry--chapter { grid-template-columns: 1fr; gap: 1.75rem; }
  .timeline__media { min-height: clamp(280px, 70vw, 380px); }
  .timeline__note { max-width: none; }
  /* Sit the timeline hard against the left as normal — it's fine for the fixed
     "Why book direct?" tab to cross the thin rail line. Just nudge the chapter
     copy in a touch so the headings/body stay readable rather than clipped. */
  .page--history .block--timeline { padding-left: var(--space-gutter); }
  .page--history .timeline__text { padding-left: 2.75rem; }
}

/* ── Rich text (intro + Since 1958) ── */
.rich-text__body p { margin: 0 0 1.1rem; line-height: 1.85; color: var(--c-green-primary); }
.rich-text__body strong { color: var(--c-green-primary); }
.rich-text__body a { color: var(--c-green-primary); text-decoration: underline; text-underline-offset: 2px; }
.rich-text__body a:hover { color: var(--c-gold); }

/* ── Feature icons ── */
.block--feature_icons { padding-block: 0; }
.feature-icons__list { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(2rem, 8vw, 6rem); justify-content: center; padding: 0; margin: 1.5rem 0; }
.feature-icons__item { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.feature-icons__icon svg { width: 46px; height: 46px; color: var(--c-green-base); }
.feature-icons__icon img, .feature-icons__icon-img { width: 50px; height: 50px; object-fit: contain; }
.feature-icons__label { font-size: 0.72rem; font-weight: 600; }

/* ── Section heading ── */
.section-heading { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 500; }
.section-heading__divider { display: block; width: 80px; height: 2px; background: var(--c-gold); margin: 0.75rem auto 0; }

/* ── Auto-scroll marquee (shared by the property + testimonials rows, §21) ──
   Track holds the items twice; -50% loops seamlessly. Pauses on hover/focus;
   under reduced-motion it becomes a normal horizontal scroller. */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee-scroll var(--marquee-duration, 45s) linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
/* Reduced-motion (no JS): no auto-scroll; a native scroller but WITHOUT the OS
   scrollbar chrome (swipe/drag still works) — never the grey bars. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee__track { animation: none; transform: none; }
}
/* JS-enhanced (site.js): native horizontal scroller for pointer-drag + touch,
   scrollbar hidden, the CSS auto-scroll replaced by a paced scrollLeft loop that
   respects reduced-motion. Only rows that actually overflow get the grab cursor. */
.marquee--interactive { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.marquee--interactive::-webkit-scrollbar { display: none; }
.marquee--interactive .marquee__track { animation: none; transform: none; }
.marquee--interactive.is-scrollable { cursor: grab; }
.marquee--interactive.is-dragging { cursor: grabbing; }
.marquee--interactive.is-dragging a { pointer-events: none; }

/* ── Property carousel: blush band, auto-scroll, portrait cards ── */
.block--property_carousel { background: var(--c-sand-accent); padding-inline: 0; }
.property-carousel__heading { text-align: center; font-size: 1.1rem; font-weight: 500; }
.property-carousel__viewport { --marquee-duration: 45s; padding-bottom: 1rem; }
.property-carousel__tiles { list-style: none; padding: 0; margin: 2rem 0 0; gap: 0; }
.property-carousel__tile { flex: 0 0 clamp(200px, 19vw, 260px); padding-inline: 0.6rem; }
/* Continuous auto-scroll + drag/swipe at ALL widths (site.js upgrades .marquee);
   the loop copies stay in the flow at every breakpoint so it never freezes on wide
   screens. When the set genuinely fits, site.js leaves it static (canScroll=false). */
.property-carousel__link { display: flex; flex-direction: column; text-decoration: none; text-align: center; }
.property-carousel__media { position: relative; display: block; border-radius: 4px; overflow: hidden; }
.property-carousel__link img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; display: block; }
/* Light sand wash on hover/focus — matches the apartment tiles on the property pages. */
.property-carousel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 243, 233, 0.66), rgba(255, 243, 233, 0)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.property-carousel__link:hover .property-carousel__media::after, .property-carousel__link:focus-visible .property-carousel__media::after { opacity: 1; }
.property-carousel__img--empty { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 4px; background: linear-gradient(150deg, var(--c-sand-2), #c9b39a); }
/* Coming-soon property (e.g. York): dimmed image + badge, non-clickable. */
.property-carousel__link--soon { cursor: default; }
.property-carousel__media--soon::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(43, 53, 39, 0.4); border-radius: 4px; }
.property-carousel__soon { position: absolute; z-index: 2; left: 50%; bottom: 12%; transform: translateX(-50%); background: var(--c-green-primary); color: var(--c-sand-base); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; padding: 6px 14px; border-radius: 3px; white-space: nowrap; }
.property-carousel__caption { display: block; margin-top: 0.85rem; text-align: left; }
.property-carousel__area { display: block; font-size: 1.35rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-green-primary); }
.property-carousel__name { display: block; font-size: 1.05rem; color: var(--c-green-base); margin: 0.25rem 0; }
.property-carousel__city { display: block; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-green-primary); }

/* ── Testimonials: cream, gold underline, auto-scroll, max 3 at a time ── */
.block--testimonials { padding-inline: 0; }
.testimonials__heading { width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; font-size: 1.1rem; font-weight: 500; padding-inline: 0; }
.testimonials__heading::after { content: ""; display: block; width: 100%; height: 2px; background: var(--c-green-primary); margin: 0.75rem auto 0; }
.testimonials__viewport { --marquee-duration: 60s; padding-bottom: 1rem; }
.testimonials__list { list-style: none; padding: 0; margin: 2.5rem 0 0; gap: 0; }
.testimonials__item { flex: 0 0 calc((100vw - 2 * var(--space-gutter)) / 3); max-width: 460px; padding-inline: 1.5rem; text-align: center; }
.testimonials__figure { margin: 0; color: var(--c-green-primary); }
.testimonials__quote { font-size: 1.05rem; line-height: 1.55; color: var(--c-green-primary); margin: 0 0 0.8rem; }
.testimonials__cite { font-style: normal; font-size: 0.9rem; color: var(--c-green-primary); }
.testimonials__author { display: block; font-weight: 600; color: var(--c-green-primary); }
.testimonials__place { display: block; font-style: italic; color: var(--c-green-primary); }
.testimonials__stars { display: block; margin: 0.35rem 0; color: var(--c-green-primary); letter-spacing: 0.1em; }

/* ── Instagram: sage band, title cream (tight 15px), flush square tiles ── */
.block--instagram_feed { background: var(--c-green-base); padding: 0; }
.instagram-feed__heading { text-align: center; color: var(--text-on-inverse); padding: 15px var(--space-gutter); margin: 0; font-size: 1.1rem; font-weight: 500; }
.instagram-feed__follow { color: inherit; text-decoration: none; }
.instagram-feed__follow:hover, .instagram-feed__follow:focus-visible { text-decoration: underline; }
.instagram-feed__list { list-style: none; padding: 0; margin: 0; display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.instagram-feed__item { flex: 1 0 clamp(150px, 14.28vw, 220px); }
.instagram-feed__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; display: block; }

/* ── Newsletter: cream, centered ── */
.newsletter__heading { font-size: 1.15rem; font-weight: 500; padding-bottom: 20px; }
.newsletter__form { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 340px; margin: 1.5rem auto 0; }
.newsletter__hp { position: absolute; left: -9999px; }
.newsletter__label { position: absolute; left: -9999px; }
.newsletter__input { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--c-green-base); border-radius: 3px 3px 0 0; font: inherit; text-align: center; background: #fff; }
.newsletter__input::placeholder { text-transform: uppercase; letter-spacing: 0.08em; }
/* Button stacked directly beneath the input, sharing its edge (no gap). */
.newsletter__submit { width: 100%; padding: 0.85rem 1rem; font-family: var(--font-serif); font-weight: 900; font-size: 1.2rem; background: var(--grad-green); color: var(--c-sand-base); border: 1px solid var(--c-green-base); border-top: 0; border-radius: 0 0 3px 3px; }

/* ── Homepage-only sizing tweaks (scoped so other pages keep their defaults) ── */
body.page--home .mw--narrow .block__inner { max-width: 60rem; }
body.page--home .rich-text__body,
body.page--careers .rich-text__body,
body.page--corporate-lets-london .rich-text__body,
body.page--the-hoteliers-charter .rich-text__body,
body.page--about-us .rich-text__body,
body.page--why-mansley .rich-text__body,
body[class*="page--sustainability-"] .rich-text__body { font-size: 1.1em; }

/* Careers / Corporate Lets / Hoteliers' Charter: Families-style green divider above the newsletter. */
body.page--careers .block--rich_text,
body.page--corporate-lets-london .block--rich_text,
body.page--the-hoteliers-charter .block--rich_text { padding-bottom: 0; }
body.page--careers .block--rich_text .block__inner,
body.page--corporate-lets-london .block--rich_text .block__inner,
body.page--the-hoteliers-charter .block--rich_text .block__inner { border-bottom: 2px solid var(--c-green-primary); padding-bottom: calc(var(--space-section) * 1.2); }
/* All sustainability sub-pages: green divider above the newsletter. */
body[class*="page--sustainability-"] .block--newsletter_signup .block__inner::before { content: ""; display: block; width: min(36rem, 88%); height: 2px; background: var(--c-green-primary); margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
/* Green divider separating the newsletter section on the competition + secret pages. */
body.page--competition .block--newsletter_signup .block__inner::before,
body.page--secret-landing-page .block--newsletter_signup .block__inner::before { content: ""; display: block; width: min(60rem, 90%); height: 2px; background: var(--c-green-primary); margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
/* Competition: intro sits right on the form; the submit gets a little breathing room. */
body.page--competition .block--rich_text:has(+ .block--join_form) { padding-bottom: 0; }
body.page--competition .join-form__submit { margin-top: 20px; }
body.page--sustainability-one-green-tourism-accreditation .stats { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
/* Centre the body copy. */
body.page--careers .rich-text__body,
body.page--corporate-lets-london .rich-text__body,
body.page--the-hoteliers-charter .rich-text__body,
body.page--about-us .rich-text__body,
body.page--why-mansley .rich-text__body,
body[class*="page--sustainability-"] .rich-text__body { text-align: center; }
/* Title styled like the Tours experience-cards heading. */
body.page--corporate-lets-london .rich-text__heading,
body.page--the-hoteliers-charter .rich-text__heading,
body.page--about-us .rich-text__heading,
body.page--why-mansley .rich-text__heading,
body[class*="page--sustainability-"] .rich-text__heading { text-align: center; font-size: 2rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 4rem; }
/* About Us: match the value-strip heading to the uppercase section titles. */
body.page--about-us .value-strip__heading,
body.page--why-mansley .value-strip__heading { font-size: 2rem; text-transform: uppercase; letter-spacing: 0.18em; }
/* About Us / Why Mansley: keep the "Discover our history" button close to the
   Our History copy (collapse the padding between the rich_text and the button). */
body.page--about-us .block--rich_text:has(+ .block--cta_button),
body.page--why-mansley .block--rich_text:has(+ .block--cta_button) { padding-bottom: 0; }
body.page--about-us .block--rich_text + .block--cta_button,
body.page--why-mansley .block--rich_text + .block--cta_button { padding-top: 0; }
/* About Us: green divider under the 'passionate…' lead line; no gap below. */
body.page--about-us .block--lead,
body.page--why-mansley .block--lead { padding-bottom: 0; }
body.page--about-us .block--lead .block__inner::after,
body.page--why-mansley .block--lead .block__inner::after { content: ""; display: block; width: min(60rem, 90%); height: 2px; background: var(--c-green-primary); margin: 2.5rem auto 0; }
/* Hoteliers' Charter: "Our commitments" subheading + a readable centred bullet list. */
body.page--the-hoteliers-charter .rich-text__body h2,
body[class*="page--sustainability-"] .rich-text__body h2 { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-green-primary); margin: 2.75rem 0 1.4rem; }
body.page--the-hoteliers-charter .rich-text__body ul,
body[class*="page--sustainability-"] .rich-text__body ul { display: inline-block; text-align: left; max-width: 44rem; margin: 0 auto; padding-left: 1.2rem; }
body.page--the-hoteliers-charter .rich-text__body li,
body[class*="page--sustainability-"] .rich-text__body li { margin: 0 0 0.9rem; line-height: 1.7; color: var(--c-green-primary); }
body.page--home .feature-icons__label { font-size: 1em; color: var(--c-green-base); }
body.page--home .feature-icons__icon svg { width: 92px; height: 92px; }
/* Gold USP icons are <img> (isolated SVGs); size by height with auto width so
   the wider skyline icon isn't squashed into a square. */
body.page--home .feature-icons__icon img, body.page--home .feature-icons__icon-img { height: 104px; width: auto; max-width: 150px; object-fit: contain; }
body.page--home .property-carousel__caption, body.page--home .property-carousel__caption > span { font-weight: 600; }
body.page--home .newsletter__form { max-width: 510px; }
body.page--home .newsletter__input { padding: 1rem 1.5rem; font-size: 1.05rem; }
body.page--home .newsletter__submit { padding: 1rem 1.5rem; font-size: 1.4rem; font-weight: 900; }

/* ── Footer: two bands — green (badges left + social right), sand (links + ©) ── */
/* Bands: full-bleed background colour; the inner wrapper constrains the CONTENT to
   the header frame so only the content (not the colour) is capped. */
.site-footer__band { padding-block: 2rem; }
.site-footer__band-inner { position: relative; z-index: 1; max-width: var(--max-wide); margin-inline: auto; padding-inline: 34px; }
.site-footer__band--green { background: var(--grad-green); padding-block: 5em; position: relative; z-index: 0; overflow: hidden; }
.site-footer__band--green::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url("/assets/brand/images/mansley-maypole-light.svg") center 85% / cover no-repeat; opacity: 0.06; pointer-events: none; }
.site-footer__band--green .site-footer__band-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.site-footer__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; padding: 0; margin: 0; }
.site-footer__badge { position: relative; display: inline-flex; }
.site-footer__badge-img { height: 85px; width: auto; object-fit: contain; }
/* Hover image (set per badge in the CMS, or the -colour fallback) cross-fades
   over the default. */
.site-footer__badge-img--hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.25s ease; }
.site-footer__badge:hover .site-footer__badge-img--hover, .site-footer__badge:focus-within .site-footer__badge-img--hover { opacity: 1; }
.site-footer__social { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0; align-items: center; }
.site-footer__social-link { position: relative; display: inline-flex; }
.site-footer__social-icon { width: 50px; height: 50px; object-fit: contain; }
/* Full-colour brand logo revealed on hover (over the cream default). */
.site-footer__social-icon--hover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s ease; }
.site-footer__social-link:hover .site-footer__social-icon--hover, .site-footer__social-link:focus-visible .site-footer__social-icon--hover { opacity: 1; }
.site-footer__band--sand { background: var(--c-sand-2); font-weight: 600; }
.site-footer__band--sand .site-footer__band-inner { display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch; justify-content: space-between; }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 5rem); }
.site-footer__col { min-width: 9rem; }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.site-footer__links a { text-decoration: none; font-size: 1.05rem; color: var(--c-green-primary); }
.site-footer__links a:hover { color: var(--c-gold); }
.site-footer__legal { text-align: right; font-size: 1.05rem; color: var(--c-green-primary); width: 500px; max-width: 100%; align-self: flex-end; }
.site-footer__group { text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 0.25rem; }
.site-footer__copyright { margin: 0; text-transform: uppercase; letter-spacing: 0.12em; }

/* ── Generic card media constraint (card_grid / text_media) ── */
.text-media__figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }

/* Individual news article: halve the spacing between body sections. The first
   section keeps its top padding (gap below the hero) and the section before the
   "Written by" card (the sand-2 block) keeps its bottom padding. */
body.page--news-post .block--lead,
body.page--news-post .block--content_image,
body.page--news-post .block--rich_text:not(.bg--sand2) { padding-block: calc(var(--space-section-compact) * 0.5); }
body.page--news-post .block--lead { padding-top: var(--space-section-compact); }
body.page--news-post .block:has(+ .block--rich_text.bg--sand2) { padding-bottom: var(--space-section-compact); }

/* Card grid ("Related reading") — a 3-up grid of blog-style story cards. The
   cards are .blog-card, so they inherit the blog archive card styling exactly. */
.card-grid__heading { text-align: center; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--c-green-primary); margin: 0 0 2rem; }
.card-grid__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: var(--max-content); margin-inline: auto; }
@media (max-width: 900px) { .card-grid__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .card-grid__list { grid-template-columns: 1fr; } }

/* ── Location template blocks (§8.1/§8b) ── */
/* Info panel — Perfect for / Special features, bordered card */
.info-panel { display: flex; align-items: stretch; border: 2px solid var(--c-green-primary); border-radius: 6px; background: var(--c-sand-base); overflow: hidden; }
.info-panel__groups { flex: 1; position: relative; display: grid; gap: 1.5rem; padding: 2rem 2.5rem 2.75rem; align-content: start; }
.info-panel__note { position: absolute; right: 2.5rem; bottom: 1rem; margin: 0; font-style: italic; font-size: 0.8rem; color: var(--c-green-primary); }
@media (max-width: 560px) { .info-panel__note { position: static; margin: 1rem 0 0; text-align: right; } }
.info-panel__group + .info-panel__group { border-top: 2px solid var(--c-green-primary); padding-top: 1.5rem; padding-bottom: 1.5rem; }
.info-panel__label { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-green-primary); margin: 0 0 1rem; }
.info-panel__items { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1.5rem; padding: 0; margin: 0; }
.info-panel__item { display: flex; align-items: center; gap: 0.6rem; }
.info-panel__icon svg { width: 28px; height: 28px; color: var(--c-green-primary); }
.info-panel__icon-img { width: 28px; height: 28px; object-fit: contain; }
.info-panel__item-label { font-size: 1rem; font-weight: 500; }
/* The image fills its column but never dictates the panel height — it's taken out
   of flow so the groups drive the box height and the photo just crops to fit. */
.info-panel__media { flex: 0 0 35%; position: relative; align-self: stretch; }
.info-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.info-panel__img--empty { display: block; width: 100%; height: 100%; min-height: 240px; background: linear-gradient(150deg, var(--c-sand-2), var(--c-green-base)); }
@media (max-width: 900px) { .info-panel { flex-direction: column; } .info-panel__media { flex-basis: auto; max-height: 220px; } }
/* Diagonal corner ribbon over the panel image (e.g. 'Opening Spring 2027'). */
.info-panel__media { overflow: hidden; }
.info-panel__ribbon { position: absolute; top: 0; right: 0; width: 160px; height: 160px; overflow: hidden; pointer-events: none; z-index: 2; }
.info-panel__ribbon > span { position: absolute; top: 45px; right: -45px; transform: rotate(45deg); width: 210px; padding: 0.42rem 0; background: var(--c-sand-base); color: var(--c-gold); border-top: 1px solid var(--c-gold); border-bottom: 1px solid var(--c-gold); text-align: center; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; box-shadow: 0 2px 6px rgba(43, 53, 39, 0.22); }

/* Gallery — horizontal thumbnail strip */
/* Gallery — horizontal carousel: scrollable viewport + a click arrow in the right
   gutter; touch/trackpad swipe works too. Scrollbar hidden. */
/* On property pages the first carousel sits directly under the hero/info row
   (same sand-accent field); drop its top padding so it hugs the icon block. */
.block-row--hero + .block--gallery { padding-top: 0; }
.gallery { display: flex; align-items: center; gap: 1.25rem; }
.gallery__list { flex: 1; min-width: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3rem) / 4); gap: 1rem; padding: 0; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.gallery__list::-webkit-scrollbar { display: none; }
.gallery__item { scroll-snap-align: start; }
.gallery__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.gallery__open img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); transition: opacity 0.18s ease; }
.gallery__open:hover img, .gallery__open:focus-visible img { opacity: 0.88; }
.gallery__arrow { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--c-green-primary); background: var(--c-sand-accent); color: var(--c-green-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gallery__arrow svg { width: 18px; height: 18px; }
.gallery__arrow:hover, .gallery__arrow:focus-visible { background: var(--c-green-primary); color: var(--c-sand-base); }
/* Mobile: no arrow — swipe, with the next image peeking off the edge (like the homepage). */
@media (max-width: 768px) {
  .gallery__arrow { display: none; }
  .gallery__list { grid-auto-columns: 78%; }
}

/* Lightbox (built/injected by site.js) */
.gallery-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(43, 53, 39, 0.92); padding: 4vh 4vw; }
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 4px; }
.gallery-lightbox__btn { position: absolute; background: rgba(255, 243, 233, 0.12); border: 1px solid rgba(255, 243, 233, 0.4); color: var(--c-sand-base); width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }
.gallery-lightbox__btn:hover { background: rgba(255, 243, 233, 0.22); }
.gallery-lightbox__close { top: 4vh; right: 4vw; }
.gallery-lightbox__prev { left: 3vw; top: 50%; transform: translateY(-50%); }
.gallery-lightbox__next { right: 3vw; top: 50%; transform: translateY(-50%); }

/* Review band — green, aggregate rating + pull-quote */
/* Maypole watermark overlay, matching the green footer band. */
.block--review_band.bg--green { position: relative; z-index: 0; overflow: hidden; }
.block--review_band.bg--green::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url("/assets/brand/images/mansley-maypole-light.svg") center 85% / cover no-repeat; opacity: 0.06; pointer-events: none; }
.block--review_band.bg--green .block__inner { position: relative; z-index: 1; }
.review-band { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3rem); }
.review-band__meta { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(1.75rem, 4vw, 3.5rem); }
.review-band__lead { flex: 0 0 auto; display: flex; align-items: center; gap: 1.1rem; }
.review-band__badge { display: flex; justify-content: center; }
.review-band__badge img { width: 100%; max-width: 92px; height: auto; }
/* "Find … on the map" — label above the icon, with a cream hover highlight. */
.review-band__map { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; text-align: center; margin-left: clamp(1rem, 3vw, 2.75rem); }
.review-band__map-label { color: var(--c-sand-base); font-size: 0.9rem; line-height: 1.3; max-width: 10rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.2s ease; }
.review-band__map-figure { display: flex; padding: 8px; border-radius: 50%; transition: background-color 0.2s ease, transform 0.2s ease; }
.review-band__map-icon { width: 54px; height: 54px; display: block; }
.review-band__map:hover .review-band__map-figure, .review-band__map:focus-visible .review-band__map-figure { background: rgba(255, 233, 213, 0.22); transform: translateY(-2px); }
.review-band__map:hover .review-band__map-label, .review-band__map:focus-visible .review-band__map-label { text-decoration-color: var(--c-sand-base); }
.review-band__rating { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; margin: 0; }
/* Clickable score → the property's live TripAdvisor rating. */
.review-band__rating--link { text-decoration: none; transition: opacity 0.2s ease; }
.review-band__rating--link:hover, .review-band__rating--link:focus-visible { opacity: 0.82; }
.review-band__rating--link .review-band__count { text-decoration: underline; text-underline-offset: 3px; }
.review-band__score { display: flex; align-items: baseline; gap: 0.2rem; margin: 0; }
.review-band__value { font-size: 3.4rem; font-weight: 700; color: var(--c-sand-base); }
.review-band__scale { font-size: 3.4rem; font-weight: 700; color: var(--c-sand-base); }
.review-band__count { color: var(--c-sand-base); font-size: 1.5rem; margin: 0; }
.review-band__stars { color: var(--c-sand-base); letter-spacing: 0.12em; font-size: 1.2rem; }
/* Rotating quotes: stack in one grid cell so the band height stays put and each
   cross-fades in place. Without JS the first (.is-active) simply shows. */
.review-band__testimonials { flex: 0 1 50%; max-width: 50%; min-width: 0; display: grid; }
.review-band__testimonials > .review-band__testimonial { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; }
.review-band__testimonials > .review-band__testimonial.is-active { opacity: 1; visibility: visible; }
.review-band__testimonial { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; text-align: center; align-items: center; }
.review-band__quote { font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--c-sand-base); margin: 0; }
.review-band__cite { display: flex; flex-direction: column; gap: 0.25rem; align-items: center; }
.review-band__author { color: var(--c-sand-base); font-size: 1.2rem; }
/* Keep the horizontal desktop layout on mobile; shrink the testimonial (and the
   score a touch) so it all fits rather than stacking. */
/* Keep the horizontal desktop layout on mobile; contract everything (badge,
   score, map, testimonial) so it fits one row rather than stacking. */
@media (max-width: 768px) {
  .review-band { gap: clamp(0.5rem, 1.5vw, 1rem); }
  /* Let the meta cluster grow so the map can centre in the space between the
     rating numbers and the testimonial rather than hugging the numbers. */
  .review-band__meta { flex: 1 1 auto; gap: clamp(0.5rem, 2vw, 1rem); margin-left: 0; }
  .review-band__badge { flex: 0 0 auto; }
  .review-band__rating { flex: 0 0 auto; }
  .review-band__badge img { max-width: clamp(48px, 14vw, 68px); }
  .review-band__value, .review-band__scale { font-size: clamp(1.5rem, 6vw, 2.3rem); }
  .review-band__count { font-size: clamp(0.7rem, 2.4vw, 0.95rem); }
  /* Map centred in the leftover space, with its label restored above the icon. */
  .review-band__map { margin: 0 auto; gap: 0.3rem; }
  .review-band__map-label { display: block; font-size: clamp(0.44rem, 1.8vw, 0.62rem); max-width: 7rem; line-height: 1.2; }
  .review-band__map-figure { padding: 3px; }
  .review-band__map-icon { width: clamp(28px, 8vw, 40px); height: clamp(28px, 8vw, 40px); }
  .review-band__testimonials { flex: 0 1 38%; max-width: 38%; }
  .review-band__quote { font-size: clamp(0.62rem, 2.2vw, 0.8rem); line-height: 1.35; }
  .review-band__author { font-size: clamp(0.7rem, 2.4vw, 0.9rem); }
  .review-band__stars { font-size: 0.9rem; }
}

/* Room grid — apartments & suites */
.room-grid__banner img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.5rem; }
.room-grid__intro { max-width: 48rem; margin: 0 auto 2rem; text-align: center; }
.room-grid__intro p { line-height: 1.8; }
/* Apartments sit tight under their section heading (no big top gap). */
.block--room_grid { padding-top: 0; }
.room-grid__list { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; padding: 0; margin: 0; }
@media (max-width: 1100px) { .room-grid__list { grid-template-columns: repeat(3, 1fr); } }
.room-grid__room { text-align: left; }
.room-grid__link { display: block; text-decoration: none; color: inherit; }
.room-grid__media { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.room-grid__media img { width: 100%; aspect-ratio: 396 / 615; object-fit: cover; display: block; }
/* Hover: a light-sand → transparent wash fades in over the image. */
.room-grid__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 243, 233, 0.66), rgba(255, 243, 233, 0)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.room-grid__room:hover .room-grid__media::after, .room-grid__room:focus-within .room-grid__media::after { opacity: 1; }
.room-grid__name { font-size: 1.05rem; margin: 0.7rem 0 0; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.25; color: var(--c-green-primary); }
.room-grid__sub { display: block; margin-top: 0.2rem; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--c-green-base); }

/* Distance grid — Attractions / Transport on a green band */
.distance-grid__heading { text-align: center; color: var(--text-on-inverse); text-transform: uppercase; letter-spacing: 0.18em; font-size: 1.1rem; font-weight: 500; }
.distance-grid__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; padding: 0; margin: 1.75rem 0 0; }
.distance-grid__item { text-align: center; color: var(--text-on-inverse); }
.distance-grid__link { display: block; text-decoration: none; color: inherit; transition: opacity 0.18s ease; }
.distance-grid__link:hover, .distance-grid__link:focus-visible { opacity: 0.82; }
.distance-grid__link .distance-grid__name { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.18s ease; }
.distance-grid__link:hover .distance-grid__name { text-decoration-color: currentColor; }
.distance-grid__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.distance-grid__name { font-size: 1.05rem; margin: 0.6rem 0 0.2rem; color: var(--text-on-inverse); }
.distance-grid__distance { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-subhead-on-inverse); }

/* Neighbourhood — "Around the neighbourhood": one sage band, segmented tabs.
   Flagship (No.1) = numbered list + map; others = 3-column card grid. The tabs are
   revealed only once site.js enhances (data-neighbourhood); without JS every category
   stays visible and stacked (crawlable, no-JS friendly). */
.neighbourhood { background: transparent; color: var(--text-on-inverse); padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.25rem); }
.neighbourhood__head { text-align: center; }
.neighbourhood__eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-subhead-on-inverse); }
.neighbourhood__title { font-family: var(--font-serif); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.6rem, 3vw, 1.9rem); color: var(--text-on-inverse); margin: 0; }

/* Tablist — hidden until enhanced; revealed by .is-enhanced */
.neighbourhood__tabs { display: none; max-width: 660px; margin: 1.4rem auto 0; border: 1px solid rgba(255, 243, 233, 0.45); border-radius: 5px; overflow: hidden; }
.neighbourhood.is-enhanced .neighbourhood__tabs { display: flex; }
.neighbourhood__tab { flex: 1; padding: 0.9rem 0.4rem; font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; background: transparent; color: var(--text-on-inverse); border: none; border-right: 1px solid rgba(255, 243, 233, 0.25); transition: background 0.15s ease, color 0.15s ease; }
/* Mobile: 2×2 tab grid. */
@media (max-width: 600px) {
  .neighbourhood.is-enhanced .neighbourhood__tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .neighbourhood__tab:nth-child(2n) { border-right: 0; }
  .neighbourhood__tab:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 243, 233, 0.25); }
}
.neighbourhood__tab:last-child { border-right: none; }
.neighbourhood__tab:hover { background: rgba(255, 243, 233, 0.08); }
.neighbourhood__tab[aria-selected="true"] { background: var(--c-sand-accent); color: var(--c-green-primary); }

.neighbourhood__body { margin-top: 2rem; }
.neighbourhood__body--map { display: flex; gap: 2.4rem; align-items: stretch; }
@media (max-width: 768px) { .neighbourhood__body--map { flex-direction: column; } }
/* Panels/pin-groups set an explicit display (grid/flex), which would override the
   [hidden] attribute's display:none — so the JS tab-switch must win explicitly. */
.neighbourhood__grid[hidden],
.neighbourhood__list[hidden],
.neighbourhood__pins[hidden] { display: none; }

/* Flagship: ranked numbered list */
.neighbourhood__lists { flex: 0 0 40%; }
.neighbourhood__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.neighbourhood__row { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 243, 233, 0.18); }
.neighbourhood__num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 243, 233, 0.5); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.neighbourhood__rowtext { flex: 1; }
.neighbourhood__name { display: block; font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-inverse); }
.neighbourhood__name a { color: inherit; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.18s ease; }
.neighbourhood__name a:hover, .neighbourhood__name a:focus-visible { text-decoration-color: currentColor; }
.neighbourhood__dist { display: block; font-size: 1rem; letter-spacing: 0.04em; color: var(--text-subhead-on-inverse); margin-top: 0.15rem; }

/* Flagship: map slot (placeholder texture until the provider is wired) */
.neighbourhood__map { flex: 1; position: relative; min-height: 430px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 243, 233, 0.25); background: repeating-linear-gradient(135deg, #7c8b73 0 13px, #84927b 13px 26px); }
.neighbourhood__maplabel { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font-family: ui-monospace, Menlo, monospace; font-size: 0.625rem; letter-spacing: 0.18em; color: rgba(255, 243, 233, 0.55); text-transform: uppercase; }
.neighbourhood__pin { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: var(--c-sand-accent); color: var(--c-green-primary); border: 2px solid rgba(255, 243, 233, 0.92); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25); }

/* Standard: 3-column card grid (collapses on small screens) */
/* Cards keep a consistent width (the 3-across column width) whatever the item
   count, and centre — so 1- and 2-item rows don't render smaller than 3-item
   rows. Used wherever this block appears (activity pages, property pages, …). */
.neighbourhood__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; justify-content: center; }
.neighbourhood__grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, calc((100% - 2rem) / 3)); }
.neighbourhood__grid:has(> :only-child) { grid-template-columns: calc((100% - 2rem) / 3); }
@media (max-width: 768px) { .neighbourhood__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .neighbourhood__grid { grid-template-columns: 1fr; } }
/* Image tile: photo with the name + distance beneath (not a bordered card). */
.neighbourhood__tile { display: flex; flex-direction: column; text-align: center; text-decoration: none; color: inherit; }
/* Media wrapper carries the hover overlay (light sand → transparent), matching the
   apartment room cards. */
.neighbourhood__media { position: relative; display: block; border-radius: 8px; overflow: hidden; }
.neighbourhood__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 243, 233, 0.66), rgba(255, 243, 233, 0)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.neighbourhood__tile:hover .neighbourhood__media::after, .neighbourhood__tile:focus-within .neighbourhood__media::after { opacity: 1; }
.neighbourhood__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.neighbourhood__img--empty { background: linear-gradient(150deg, rgba(255, 243, 233, 0.18), rgba(255, 243, 233, 0.06)); }
.neighbourhood__tile .neighbourhood__name { line-height: 1.4; margin-top: 0.7rem; }
.neighbourhood__tile .neighbourhood__dist { margin-top: 0.25rem; }
a.neighbourhood__tile:hover .neighbourhood__name, a.neighbourhood__tile:focus-visible .neighbourhood__name { text-decoration: underline; }
/* Stacked, enhanced-off: a little breathing room between the four panels */
.neighbourhood:not(.is-enhanced) .neighbourhood__grid + .neighbourhood__grid,
.neighbourhood:not(.is-enhanced) .neighbourhood__list + .neighbourhood__list { margin-top: 1.5rem; }

/* Contact block — Live Chat / Phone / Email */
.contact-block__heading { text-transform: uppercase; font-weight: 500; }

/* Section titles share a consistent 4px tracking so nothing looks off. Placed
   after the individual definitions so it overrides their letter-spacing. */
.section-heading, .neighbourhood__title, .contact-block__heading,
.property-carousel__heading, .testimonials__heading,
.instagram-feed__heading, .newsletter__heading { letter-spacing: 4px; }
.contact-block__methods { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; padding: 0; margin: 1.75rem 0 0; }
.contact-block__method { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; background: none; padding: 1rem 1.5rem; flex: 1 1 200px; max-width: 280px; }
.contact-block__icon svg { width: 36px; height: 36px; color: var(--c-green-primary); }
.contact-block__icon-img { width: 40px; height: 40px; object-fit: contain; }
.contact-block__link, .contact-block__live-chat { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-decoration: none; background: none; border: 0; font: inherit; color: var(--text-body); cursor: pointer; }
.contact-block__label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 1rem; color: var(--c-green-base); font-weight: 700; }
.contact-block__value { color: var(--c-green-primary); }

/* Back-to link — boxed */
.back-to { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.back-to__pre { text-transform: uppercase; letter-spacing: 0.14em; font-size: 1rem; font-weight: 500; color: var(--c-green-primary); }
.block--back_to_link { padding-bottom: 0; }
.back-to__btn { display: inline-block; background: var(--c-sand-accent); border: 2px solid var(--c-green-primary); border-radius: 3px; padding: 0.9em 5.5em; text-decoration: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.2rem; font-weight: 700; color: var(--c-green-primary); transition: background 0.18s ease, color 0.18s ease; }
.back-to__btn:hover, .back-to__btn:focus-visible { background: var(--c-green-primary); color: var(--c-sand-base); }
.back-to__rule { width: 65%; max-width: 720px; height: 2px; border: 0; background: var(--c-green-primary); margin: 75px auto 0; }
.block--newsletter_signup { padding-top: 75px; padding-bottom: 75px; }

/* Mobile-only controls are hidden on desktop (the booking sheet is mobile-only) */
.nav-toggle, .booking-sheet { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.booking-sheet-lock, .nav-lock { overflow: hidden; }
/* While the mobile menu overlay is open, keep the book-direct handle and the
   bottom "Book now" sheet out of the way. */
.nav-lock .book-direct, .nav-lock .booking-sheet { display: none; }
@media (prefers-reduced-motion: reduce) { .booking-sheet__panel, .booking-sheet__backdrop { transition: none; } }

/* ── Shared booking components: range calendar + steppers (mobile sheet AND
   desktop modal use these) + the desktop modal shell + the bar field buttons. ── */
.booking-cal { position: relative; }
.booking-cal__nav { position: absolute; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 243, 233, 0.35); background: transparent; color: var(--c-sand-base); font-size: 1.2rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.booking-cal__nav--prev { left: 0; }
.booking-cal__nav--next { right: 0; }
.booking-cal__nav:disabled { opacity: 0.3; cursor: default; }
.booking-cal__months { display: grid; gap: 26px; }
.booking-cal[data-cal-months="2"] .booking-cal__months { grid-template-columns: 1fr 1fr; }
.booking-cal__label { text-align: center; font-family: var(--font-serif); font-size: 1.2rem; color: var(--c-sand-base); margin-bottom: 4px; }
.booking-cal__weekdays, .booking-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.booking-cal__weekdays span { text-align: center; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-sand-2); padding: 6px 0; }
.booking-cal__grid { gap: 2px; }
.booking-day { height: 40px; border: 0; background: transparent; font: inherit; font-size: 0.82rem; color: var(--c-sand-base); border-radius: 9px; cursor: pointer; padding: 0; }
.booking-day--blank { visibility: hidden; }
.booking-day--past { color: rgba(255, 243, 233, 0.35); cursor: default; }
.booking-day--in { background: rgba(255, 243, 233, 0.18); border-radius: 4px; }
.booking-day--end { background: var(--c-green-primary); color: var(--c-sand-base); font-weight: 500; }
.booking-cal__helper { font-size: 0.78rem; color: var(--c-sand-2); margin: 0; text-align: center; }

.booking-stepper-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255, 243, 233, 0.3); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
.booking-stepper-row__info { display: flex; flex-direction: column; gap: 2px; }
.booking-stepper-row__label { font-size: 0.9rem; color: var(--c-sand-base); }
.booking-stepper-row__sub { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-sand-2); }
.booking-stepper { display: flex; align-items: center; gap: 14px; }
.booking-step-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 243, 233, 0.4); background: transparent; color: var(--c-sand-base); font-size: 1.2rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.booking-step-btn:disabled { opacity: 0.3; cursor: default; }
.booking-step-val { min-width: 1.3rem; text-align: center; font-size: 1.05rem; color: var(--c-sand-base); }
.booking-steppers__note { text-align: center; font-size: 0.72rem; color: var(--c-sand-2); margin: 6px 0 0; }

/* Desktop bar Dates/Guests field buttons (look like the cream inputs) */
.booking-bar__field-btn { cursor: pointer; }

/* Desktop modals */
.booking-modals { display: contents; }
.booking-modal[hidden] { display: none; }
.booking-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.booking-modal__backdrop { position: absolute; inset: 0; background: rgba(83, 100, 82, 0.45); }
.booking-modal__card { position: relative; width: 660px; max-width: 100%; background: var(--c-green-base); border-radius: 16px; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4); padding: 26px 30px 28px; animation: booking-modal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.booking-modal__card--guests { width: 420px; }
@keyframes booking-modal-in { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .booking-modal__card { animation: none; } }
.booking-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 1.25rem; }
.booking-modal__heading { display: flex; flex-direction: column; gap: 2px; }
.booking-modal__title { font-family: var(--font-serif); font-size: 1.55rem; color: var(--c-sand-base); }
.booking-modal__subtitle { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--c-sand-2); }
.booking-modal__close { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; border: 0; background: rgba(255, 243, 233, 0.16); color: var(--c-sand-base); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.booking-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.booking-modal__done { background: var(--c-sand-accent); color: var(--c-green-primary); border-color: var(--c-sand-accent); border-radius: 3px; padding: 13px 32px; font-weight: 700; }
.booking-modal__done--full { width: 100%; margin-top: 14px; padding: 16px 0; }

/* ── Destinations finder (interactive drill-down, §8a) ── */
.block--destinations_map { background: var(--c-sand-2) url(/assets/brand/patterns/destinations-map.webp) center / cover no-repeat; }
.destinations-map__heading { text-align: center; font-size: 1.1rem; font-weight: 500; margin: 0 0 1.5rem; }
.dest-finder { max-width: var(--max-wide); margin-inline: auto; }
/* No-JS fallback nested list (the JS hides this and builds the finder) */
.destinations-map__level { list-style: none; padding-left: 1.1rem; margin: 0.3rem 0; }
.destinations-map__toggle, .destinations-map__city-link, .destinations-map__explore { background: none; border: 0; font: inherit; color: var(--c-green-primary); text-decoration: none; cursor: pointer; padding: 0.25rem 0; display: inline-block; }
.destinations-map__area { color: var(--c-gold); margin-left: 0.4rem; }
.destinations-map__explore--soon { cursor: default; color: var(--c-green-primary); }
.destinations-map__soon { display: inline-block; margin-left: 0.5rem; background: var(--c-green-primary); color: var(--c-sand-base); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 3px; vertical-align: middle; }

/* Desktop org-chart tree */
.dest-tree { position: relative; padding-top: 0.5rem; }
.dest-connectors { position: absolute; inset: 0; pointer-events: none; }
.dest-connectors line { stroke: rgba(128, 149, 127, 0.55); stroke-width: 2; }
.dest-row { display: flex; justify-content: space-evenly; align-items: stretch; gap: 1.5rem; position: relative; z-index: 1; margin-bottom: 2.5rem; }
.dest-row--root { justify-content: center; }
.dest-box { background: #fffdf7; border: 1px solid #7c8a66; color: var(--c-green-primary); border-radius: 3px; padding: 0.9rem 1.6rem; cursor: pointer; font: inherit; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s; min-width: 8rem; }
.dest-box.is-selected { background: #fffdf7; border: 1.5px solid #7c8a66; color: var(--c-green-primary); font-weight: 600; }
.dest-box.is-faded:hover, .dest-box.is-faded:focus-visible { background: #fffdf7; border-color: #7c8a66; color: var(--c-green-primary); }
.dest-box--root { font-size: 0.95rem; }
.dest-box__sub { font-size: 0.62rem; color: var(--c-green-base); letter-spacing: 0.1em; }
.dest-box--soon { cursor: default; }
.dest-box--soon:hover, .dest-box--soon:focus-visible { background: #fffdf7; border-color: #7c8a66; color: var(--c-green-primary); }
.dest-box__soon { margin-top: 3px; background: var(--c-green-primary); color: var(--c-sand-base); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 3px; }

/* Detail card (shared by desktop tree + mobile flow) */
.dest-detail { display: grid; grid-template-columns: 1fr 1fr; background: var(--c-sand-base); border: 2px solid var(--c-green-primary); border-radius: 3px; overflow: hidden; box-shadow: 0 16px 40px -24px rgba(43, 53, 39, 0.3); position: relative; z-index: 1; animation: destDrop 0.3s ease; }
@keyframes destDrop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dest-detail__body { padding: 2rem 2.25rem; }
.dest-detail__eyebrow { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--c-gold); margin: 0 0 0.5rem; }
.dest-detail__name { font-family: var(--font-serif); font-size: 1.6rem; color: var(--c-green-primary); margin: 0 0 0.5rem; }
.dest-detail__desc { color: var(--c-green-primary); line-height: 1.6; margin: 0 0 1.25rem; }
.dest-detail__pf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; justify-items: center; margin-bottom: 1.5rem; }
.dest-pf { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.dest-pf__icon img { width: 38px; height: 38px; object-fit: contain; }
.dest-pf__label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-green-base); }
.dest-detail__explore { display: block; width: 100%; text-align: center; background: var(--c-green-base); color: var(--c-sand-base); border-color: var(--c-green-base); }
.dest-detail__media { background: var(--c-sand-2); min-height: 220px; }
.dest-detail__media img { width: 100%; height: 100%; object-fit: cover; }
/* Desktop: the detail card reads better as a contained ~65% panel, centred under
   the tree, rather than spanning the full finder width. */
@media (min-width: 1024px) {
  .dest-finder--desktop .dest-detail { max-width: 65%; margin-inline: auto; }
}

/* Mobile guided flow */
.dest-crumb { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.dest-crumb__pill { border: 1px solid rgba(124, 138, 102, 0.5); background: transparent; color: var(--c-green-primary); border-radius: 100px; padding: 0.4rem 0.9rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; }
.dest-crumb__pill.is-active { background: var(--c-green-primary); color: var(--c-sand-base); border-color: var(--c-green-primary); cursor: default; }
.dest-step__kicker { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--c-gold); margin: 0 0 0.25rem; }
.dest-step__title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--c-green-primary); margin: 0 0 1rem; }
.dest-cards { display: grid; gap: 0.6rem; }
.dest-card { display: flex; align-items: center; gap: 0.75rem; background: var(--c-sand-base); border: 1px solid rgba(124, 138, 102, 0.3); border-radius: 14px; padding: 1rem 1.1rem; cursor: pointer; font: inherit; text-align: left; animation: destSlide 0.28s ease; }
.dest-card__name { flex: 1; font-size: 1rem; color: var(--c-green-primary); }
.dest-card__meta { font-size: 0.78rem; color: var(--c-green-base); }
.dest-card__chev { font-size: 1.3rem; color: var(--c-gold); }
.dest-card--soon { cursor: default; }
.dest-card__soon { background: var(--c-green-primary); color: var(--c-sand-base); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 10px; border-radius: 3px; }
@keyframes destSlide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dest-card, .dest-detail { animation: none; } }
@media (max-width: 1023px) {
  .dest-detail { grid-template-columns: 1fr; }
  .dest-detail__media { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
}

/* ── Legal pages: shared reading layout (section table of contents + sections) ── */
.legal__head { max-width: var(--max-content); margin-inline: auto; padding-inline: var(--space-gutter); }
.legal__eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--c-gold); margin: 0 0 0.6rem; }
.legal__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 4vw, 2.9rem); color: var(--c-green-primary); margin: 0; }
.legal__updated { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--c-gold); margin: 0.7rem 0 0; }
.legal__body {
  max-width: var(--max-content); margin: clamp(1.5rem, 4vw, 2.75rem) auto 0; padding-inline: var(--space-gutter);
  display: grid; grid-template-columns: 260px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
/* Table of contents (desktop): sticky list of this document's sections. */
.legal__toc { position: sticky; top: 1.25rem; border-right: 1px solid rgba(83, 100, 82, 0.12); padding-right: 1.5rem; }
.legal__toc-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-green-base); margin: 0 0 0.9rem; }
.legal__toc-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.legal__toc-list li { margin-bottom: 0.2rem; }
.legal__toc-link { display: grid; grid-template-columns: 1.9rem 1fr; align-items: baseline; gap: 0.4rem; padding: 0.45rem 0; color: var(--c-green-base); text-decoration: none; font-size: 0.92rem; line-height: 1.4; transition: color 0.15s; }
.legal__toc-link:hover, .legal__toc-link:focus-visible { color: var(--c-green-primary); }
.legal__toc-num { font-family: var(--font-serif); font-size: 0.78rem; color: var(--c-gold); }
.legal__toc-note { font-size: 0.78rem; line-height: 1.6; color: var(--c-green-base); margin: 1.6rem 0 0; }
.legal__toc-note a { color: var(--c-green-primary); }
/* Content column: a single calm measure. Body copy is Fern (AA), never Base Green. */
.legal__content { max-width: 680px; }
.legal__intro { font-size: 1.06rem; line-height: 1.8; color: var(--c-green-primary); margin: 0; }
.legal__section { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; margin-top: 2.6rem; scroll-margin-top: 1.5rem; }
.legal__num { font-family: var(--font-serif); font-size: 1rem; color: var(--c-gold); letter-spacing: 0.06em; padding-top: 0.35rem; }
.legal__h { font-family: var(--font-serif); font-weight: 500; font-size: 1.4rem; color: var(--c-green-primary); margin: 0 0 0.6rem; }
.legal__section-body p { line-height: 1.8; color: var(--c-green-primary); margin: 0 0 0.9rem; }
.legal__section-body p:last-child { margin-bottom: 0; }
.legal__list { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.legal__list li { position: relative; padding-left: 1.4rem; line-height: 1.7; color: var(--c-green-primary); margin-bottom: 0.5rem; }
.legal__list li::before { content: "\2014"; position: absolute; left: 0; color: var(--c-green-base); }
@media (max-width: 1023px) {
  /* TOC becomes a compact "On this page" card above the content. */
  .legal__body { display: block; }
  .legal__toc { position: static; border-right: 0; padding: 1rem 1.2rem; margin-bottom: 1.75rem; border: 1px solid rgba(83, 100, 82, 0.14); border-radius: var(--radius); background: var(--c-sand-2); }
  .legal__content { max-width: none; }
}

/* ── Contact page: reservations feature panel + residence cards by city ── */
/* Reservations panel — the deep-green featured CTA (split text + image). */
.contact-res { max-width: var(--max-content); margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: 1.25fr 0.75fr; background: var(--c-green-primary); color: var(--c-sand-base); border-radius: 14px; overflow: hidden; }
.contact-res__text { padding: clamp(1.75rem, 4vw, 3rem); }
.contact-res__eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--c-sand-base); margin: 0 0 0.8rem; }
.contact-res__headline { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--c-sand-base); margin: 0 0 0.9rem; }
.contact-res__body { color: var(--c-sand-accent); line-height: 1.7; max-width: 36rem; margin: 0 0 0.5rem; }
.contact-res__hours { color: var(--c-sand-accent); font-size: 0.9rem; margin: 0 0 1.4rem; }
.contact-res__contacts { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.6rem; }
.contact-res__phone, .contact-res__email { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--c-sand-base); text-decoration: none; }
.contact-res__phone { font-size: 0.92rem; }
.contact-res__email { font-size: 0.92rem; color: var(--c-sand-base); }
.contact-res__icon { display: inline-flex; }
.contact-res__icon svg { width: 18px; height: 18px; color: var(--c-gold); }
.contact-res__icon-img { width: 16px; height: 16px; object-fit: contain; filter: brightness(0) invert(1); }
.contact-res__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contact-res__chat { background: transparent; color: var(--c-sand-base); border: 1px solid rgba(255, 243, 233, 0.55); }
.contact-res__media { background: var(--c-green-base); background-size: cover; background-position: center; min-height: 200px; }

/* Residence directory header. */
.contact-dir__residences { max-width: var(--max-content); margin-inline: auto; padding-inline: var(--space-gutter); }
.contact-dir__eyebrow { text-align: center; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--c-gold); margin: 0 0 0.6rem; }
.contact-dir__heading { text-align: center; font-family: var(--font-serif); font-weight: 500; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-green-primary); margin: 0 0 clamp(2rem, 4vw, 3rem); }
.contact-dir__city { margin-bottom: clamp(2rem, 4vw, 3rem); }
.contact-dir__city-head { display: flex; align-items: baseline; gap: 0.9rem; border-bottom: 2px solid var(--c-green-primary); padding-bottom: 0.75rem; margin-bottom: 1.4rem; }
.contact-dir__city-name { font-family: var(--font-serif); font-weight: 500; font-size: 1.55rem; text-transform: uppercase; letter-spacing: 4px; color: var(--c-green-primary); margin: 0; }
.contact-dir__city-count { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-green-base); }
.contact-dir__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* Residence contact card. */
.contact-card { display: grid; grid-template-columns: 116px 1fr; background: var(--c-sand-accent); border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, 0.3); }
.contact-card__media { background-size: cover; background-position: center; min-height: 100%; }
.contact-card__media--empty { background: linear-gradient(150deg, var(--c-sand-2), var(--c-green-base)); }
.contact-card__body { padding: 1.3rem 1.4rem; }
.contact-card__name { font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; color: var(--c-green-primary); margin: 0; }
.contact-card__region { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-gold); margin: 0.25rem 0 0; }
.contact-card__rule { border: 0; border-top: 1px solid rgba(83, 100, 82, 0.12); margin: 0.9rem 0; }
.contact-card__rows { list-style: none; margin: 0; padding: 0; }
.contact-card__row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; font-size: 0.85rem; color: var(--c-green-primary); }
.contact-card__row--address { align-items: flex-start; }
.contact-card__row a { color: var(--c-green-primary); text-decoration: none; }
.contact-card__row a:hover { color: var(--c-gold); }
.contact-card__icon { display: inline-flex; flex: 0 0 auto; }
.contact-card__icon svg { width: 15px; height: 15px; color: var(--c-green-base); }
.contact-card__row--address .contact-card__icon { margin-top: 2px; }
.contact-card__discover { display: inline-block; margin-top: 0.6rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-green-primary); text-decoration: none; }
.contact-card__discover:hover { color: var(--c-gold); }
@media (max-width: 1023px) {
  .contact-res { grid-template-columns: 1fr; }
  .contact-res__media { min-height: 140px; }
  .contact-dir__grid { grid-template-columns: 1fr; }
  .contact-card { grid-template-columns: 1fr; }
  .contact-card__media { min-height: 150px; aspect-ratio: 16 / 9; }
}

/* ── Audience landing pages (Business Stays / Families) ── */
/* Alternating residence feature rows. */
.residence-rows__heading { text-align: center; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--c-green-primary); margin: 0 0 2rem; }
.residence-rows__row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.residence-rows__row:first-child { padding-top: 0; }
.residence-rows__row:last-child { padding-bottom: 0; }
/* Full-width green rule dividing each residence from the next (as on the offers page). */
.residence-rows__row + .residence-rows__row { border-top: 2px solid var(--c-green-primary); }
.residence-rows__row--reverse .residence-rows__media, .residence-rows__row--reverse .residence-gallery { order: 2; }
.residence-rows__media { border-radius: 8px; min-height: 360px; background-size: cover; background-position: center; }
.residence-rows__address { font-size: 0.85rem; color: var(--c-green-base); margin: 0 0 1.1rem; }
.residence-gallery { display: flex; flex-direction: column; gap: 0.85rem; }
.residence-gallery__main { border-radius: 8px; overflow: hidden; background: var(--c-sand-2); }
.residence-gallery__main-img { display: block; width: 100%; height: 360px; object-fit: cover; }
.residence-gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.residence-gallery__thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: none; line-height: 0; transition: border-color 0.2s; }
.residence-gallery__thumb img { display: block; width: 100%; height: 88px; object-fit: cover; }
.residence-gallery__thumb.is-active { border-color: var(--c-green-primary); }
.residence-gallery__thumb:hover, .residence-gallery__thumb:focus-visible { border-color: var(--c-green-base); outline: none; }
.residence-rows__media--empty { background: linear-gradient(150deg, var(--c-sand-2), var(--c-green-base)); }
.residence-rows__region { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-gold); margin: 0 0 0.5rem; }
.residence-rows__name { font-family: var(--font-serif); font-weight: 500; text-transform: uppercase; letter-spacing: 4px; font-size: 2rem; color: var(--c-green-primary); margin: 0 0 0.8rem; }
.residence-rows__desc { color: var(--c-green-primary); line-height: 1.7; margin: 0 0 1.3rem; max-width: 34rem; }
.residence-rows__features { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; }
.residence-rows__feature { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; line-height: 1.4; color: var(--c-green-primary); }
.residence-rows__check { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.residence-rows__check svg { width: 16px; height: 16px; color: var(--c-green-base); }
.residence-rows__explore { background: var(--c-green-base); color: var(--c-sand-base); border-color: var(--c-green-base); }
.residence-rows__explore:hover { background: var(--c-green-primary); border-color: var(--c-green-primary); color: var(--c-sand-base); }

/* Offer band (Families 'BookDirect'). */
.offer-band { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--c-sand-2); border-radius: 8px; padding: clamp(1.75rem, 4vw, 2.75rem); }
.offer-band__code { text-align: center; border-right: 1px solid rgba(158, 140, 103, 0.35); padding-right: clamp(1rem, 3vw, 2rem); }
.offer-band__eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-green-base); margin: 0 0 0.5rem; }
.offer-band__code-value { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--c-green-primary); margin: 0; }
.offer-band__code-note { font-size: 0.85rem; color: var(--c-green-base); margin: 0.35rem 0 0; }
.offer-band__heading { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--c-green-primary); margin: 0 0 1.1rem; }
.offer-band__perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; }
.offer-band__perk { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; line-height: 1.4; color: var(--c-green-primary); }
.offer-band__check { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.offer-band__check svg { width: 16px; height: 16px; color: var(--c-gold); }

/* Experts contact band (deep green). */
.block--experts_band .block__inner { text-align: center; }
.experts-band__inner { display: flex; flex-direction: column; align-items: center; }
.experts-band__eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--c-sand-accent); margin: 0 0 0.6rem; }
.experts-band__heading { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--c-sand-base); margin: 0 0 1.1rem; }
.experts-band__phone { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--c-sand-base); text-decoration: none; margin-bottom: 1.4rem; }
.experts-band__icon { display: inline-flex; }
.experts-band__icon svg { width: 18px; height: 18px; color: var(--c-gold); }
.experts-band__email { background: var(--c-sand-base); color: var(--c-green-primary); border-color: var(--c-sand-base); }
@media (max-width: 1023px) {
  .residence-rows__row, .residence-rows__row--reverse { grid-template-columns: 1fr; gap: 1.25rem; }
  .residence-rows__row--reverse .residence-rows__media, .residence-rows__row--reverse .residence-gallery { order: 0; }
  .residence-rows__media { min-height: 0; aspect-ratio: 16 / 10; }
  .residence-rows__features { grid-template-columns: 1fr; }
  .residence-gallery__main-img { height: 240px; }
  .residence-gallery__thumb img { height: 64px; }
  .offer-band { grid-template-columns: 1fr; }
  .offer-band__code { border-right: 0; border-bottom: 1px solid rgba(158, 140, 103, 0.35); padding-right: 0; padding-bottom: 1.25rem; }
  .offer-band__perks { grid-template-columns: 1fr; }
}

/* ── Tours & Activities: experience cards, value strip, message band ── */
.experience-cards__heading, .value-strip__heading { text-align: center; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--c-green-primary); margin: 0 0 2rem; }
.experience-cards__heading { font-size: 2rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 4rem; }
/* Green divider line above the heading (between it and the paragraph above). */
.experience-cards__heading::before { content: ""; display: block; width: min(60rem, 90%); height: 2px; background: var(--c-green-primary); margin: 0 auto 3.5rem; }
/* Same treatment for the section title on Families / Business Stays: larger title,
   a green divider above it (between it and the paragraph) and doubled space below. */
/* Wide divider above the title lives on the block inner, so the heading itself can
   shrink to its text and its underline hugs the text width. */
body.page--families .block--section_heading .block__inner::before, body.page--business-stays .block--section_heading .block__inner::before { content: ""; display: block; width: min(60rem, 90%); height: 2px; background: var(--c-green-primary); margin: 0 auto 3.5rem; }
body.page--families .section-heading, body.page--business-stays .section-heading { font-size: 2rem; width: fit-content; margin: 0 auto; }
/* The intro paragraph sits right on the divider — drop its bottom padding. */
body.page--families .block--rich_text, body.page--business-stays .block--rich_text { padding-bottom: 0; }
/* Business Stays intro: breathing room before the green contact band (the intro
   is the rich_text directly after the stats band). */
body.page--business-stays .block--stats + .block--rich_text { padding-bottom: 80px; }
/* No divider above the "Our Full Serviced Corporate Apartments" heading (the
   section_heading directly after the contact band); the "More Information"
   heading keeps its divider. */
body.page--business-stays .block--message_band + .block--section_heading .block__inner::before { display: none; }
/* Same green rule under every residence name as the offer-block titles carry. */
body.page--families .residence-rows__name::after, body.page--business-stays .residence-rows__name::after { content: ""; display: block; width: 100%; height: 2px; background: var(--c-green-primary); margin: 0.9rem 0 0; }
/* Divider between the last residence and the "Freedom For All The Family" section. */
body.page--families .block--offer_blocks .block__inner { border-top: 2px solid var(--c-green-primary); }
body.page--families .block--offer_blocks { padding-top: 0; }
/* Tighten the first section under the title — halve its top padding. */
body.page--families .block--residence_rows, body.page--business-stays .block--residence_rows { padding-top: calc(var(--space-section) / 2); }
/* Dividing line centred between the related-reading posts and the newsletter:
   drop the grid's own bottom padding and grow the space above the line so it sits
   evenly against the newsletter's top padding below. */
body.page--families .block--card_grid, body.page--business-stays .block--card_grid { padding-bottom: 0; }
body.page--families .block--card_grid .block__inner, body.page--business-stays .block--card_grid .block__inner { border-bottom: 2px solid var(--c-green-primary); padding-bottom: calc(var(--space-section) * 1.2); }
/* Second divider above the "Related reading" grid (below the More Information copy). */
body.page--business-stays .block--card_grid .block__inner { border-top: 2px solid var(--c-green-primary); padding-top: calc(var(--space-section) * 1.2); }
/* Green divider separating the FAQ block that follows the More Information copy. */
body.page--business-stays .block--faq .block__inner::before { content: ""; display: block; width: min(60rem, 90%); height: 2px; background: var(--c-green-primary); margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
/* Families: full-width divider above the FAQ (matching the one above the offers). */
body.page--families .block--faq .block__inner { border-top: 2px solid var(--c-green-primary); padding-top: calc(var(--space-section) * 1.2); }
.experience-cards__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
.experience-card { display: flex; }
.experience-card__link { position: relative; display: block; width: 100%; min-height: 440px; border-radius: 8px; overflow: hidden; text-decoration: none; }
.experience-card__media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.experience-card__media--empty { background: linear-gradient(160deg, var(--c-sand-2), var(--c-green-base)); }
/* Permanent legibility scrim on the image. */
.experience-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 53, 39, 0.05) 38%, rgba(43, 53, 39, 0.82)); }
/* Same sand highlight-fade on hover as the apartment tiles — sits above the scrim
   but below the caption (z-index 1), so the copy stays crisp. */
.experience-card__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 243, 233, 0.66), rgba(255, 243, 233, 0)); opacity: 0; transition: opacity 0.25s ease; }
.experience-card__link:hover::after, .experience-card__link:focus-within::after { opacity: 1; }
.experience-card__overlay { position: absolute; inset: auto 0 0 0; z-index: 1; padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; }
.experience-card__region { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--c-sand-accent); }
.experience-card__name { font-family: var(--font-serif); font-weight: 500; text-transform: uppercase; letter-spacing: 4px; font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--c-sand-base); line-height: 1.05; margin: 0.35rem 0 0.5rem; }
.experience-card__teaser { font-size: 0.86rem; line-height: 1.55; color: var(--c-sand-accent); margin-bottom: 1.1rem; }
.experience-card__cta { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-sand-base); border: 1px solid rgba(255, 243, 233, 0.6); padding: 0.6rem 1rem; border-radius: 10px; transition: background-color 0.2s, color 0.2s; }
.experience-card__cta svg { width: 13px; height: 9px; }
.experience-card__link:hover .experience-card__cta { background: var(--c-sand-base); color: var(--c-green-primary); }
.experience-card__link:hover .experience-card__cta svg { stroke: var(--c-green-primary); }
/* Tours & Activities: tighten the intro→cards gap and add breathing room below the cards. */
body.page--tours-activities .block--rich_text { padding-bottom: 0; }
body.page--tours-activities .block--experience_cards { padding-bottom: 120px; }

.value-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); max-width: var(--max-content); margin-inline: auto; }
.value-strip__item { display: flex; gap: 1rem; align-items: flex-start; }
/* Photo variant: image on top, centred label + text beneath. */
.value-strip__item--photo { flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.value-strip__photo { display: block; width: 100%; }
.value-strip__photo-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.value-strip__item--photo .value-strip__label { margin-bottom: 0.5rem; }
.value-strip__icon { flex: 0 0 auto; margin-top: 2px; }
.value-strip__icon svg { width: 26px; height: 26px; color: var(--c-green-base); }
.value-strip__label { display: block; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-green-primary); margin-bottom: 0.35rem; }
.value-strip__text { display: block; font-size: 0.9rem; line-height: 1.6; color: var(--c-green-primary); }

/* FAQ accordion — a white card per question (first open by default); the toggle is
   a chevron in a circle that flips to dark green when open. Native <details>. */
.faq__heading { font-family: var(--font-serif); font-weight: 500; text-transform: uppercase; letter-spacing: 4px; font-size: clamp(1.5rem, 2.6vw, 1.9rem); color: var(--c-green-primary); text-align: center; margin: 0 0 1.5rem; }
.faq__list { display: flex; flex-direction: column; gap: 12px; max-width: 840px; margin-inline: auto; }
.faq__item { background: #fff; border: 1px solid rgba(83, 100, 82, 0.14); border-radius: 10px; overflow: hidden; }
.faq__question { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 26px; cursor: pointer; list-style: none; font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; line-height: 1.25; color: var(--c-green-primary); }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }
.faq__toggle { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-sand-accent); color: var(--c-gold); transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.faq__toggle svg { width: 14px; height: 14px; display: block; }
.faq__item[open] .faq__toggle { background: var(--c-green-primary); color: var(--c-sand-base); transform: rotate(180deg); }
.faq__answer { padding: 0 26px 24px; }
.faq__answer::before { content: ""; display: block; height: 1px; background: rgba(83, 100, 82, 0.12); margin-bottom: 18px; }
.faq__answer > :first-child { margin-top: 0; }
.faq__answer p { font-size: 0.95rem; line-height: 1.8; color: var(--c-green-primary); margin: 0 0 0.7rem; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer ul, .faq__answer ol { margin: 0 0 0.7rem; padding-left: 1.2rem; color: var(--c-green-primary); line-height: 1.8; }
@media (max-width: 700px) { .faq__question { padding: 16px 18px; font-size: 1.1rem; } .faq__answer { padding: 0 18px 18px; } }

/* Message band — colour comes from the wrapper (.bg--green = sage + cream text). */
.message-band { text-align: center; max-width: 46rem; margin-inline: auto; }
.message-band__eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--c-sand-accent); margin: 0 0 0.6rem; }
.message-band__heading { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.1rem); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; white-space: nowrap; }
@media (max-width: 600px) { .message-band__heading { white-space: normal; } }
.message-band__body { font-size: 0.98rem; line-height: 1.7; margin: 0.7rem 0 0; }
@media (max-width: 1023px) {
  .experience-cards__list { grid-template-columns: 1fr; }
  .experience-card__link { min-height: 300px; border-radius: 14px; }
  .value-strip__list { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Offers page: page head + alternating offer blocks + donation CTA ── */
.offer-blocks__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2rem, 5vw, 3.5rem); }
.offer-blocks__eyebrow { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--c-green-base); margin: 0 0 0.8rem; }
.offer-blocks__heading { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.1rem, 4.5vw, 2.9rem); color: var(--c-green-primary); margin: 0; }
.offer-blocks__subhead { font-size: 1rem; line-height: 1.7; color: var(--c-green-primary); margin: 1.1rem 0 0; }
.offer-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(4rem, 10vw, 7rem); }
/* Page-edge spacing stays single (not the doubled inter-section gap). */
.offer-block:first-child { padding-top: clamp(2rem, 5vw, 3.5rem); }
.offer-block:last-child { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
/* Full-width dark-green line dividing each promotion from the next. */
.offer-block + .offer-block { border-top: 2px solid var(--c-green-primary); }
.offer-block--reverse .offer-block__media { order: 2; }
.offer-block__media { position: relative; border-radius: 10px; min-height: 340px; background-size: cover; background-position: center; }
.offer-block__media--empty { background: linear-gradient(150deg, #cdb99a, #a98a63); }
/* Stacked variants (Our Cities Explore/Dining): two maps or two images, min-height off. */
.offer-block__media--maps, .offer-block__media--stack { min-height: 0; background: none; display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }
.offer-block__media--icon { background: var(--c-sand-accent); display: flex; align-items: center; justify-content: center; }
.offer-block__icon-img { width: clamp(96px, 22%, 160px); height: auto; }
.offer-block__map { width: 100%; aspect-ratio: 16 / 11; min-height: 320px; border: 0; border-radius: 10px; display: block; }
.offer-block__stack-img { width: 100%; aspect-ratio: 16 / 5; object-fit: cover; border-radius: 10px; display: block; }
.offer-block__seal { position: absolute; top: 1.4rem; left: 1.4rem; width: 96px; height: 96px; border-radius: 50%; background: var(--c-green-primary); color: var(--c-sand-base); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.offer-block__seal-value { font-family: var(--font-serif); font-weight: 600; font-size: 1.7rem; line-height: 1; }
.offer-block__seal-label { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; }
.offer-block__title { font-family: var(--font-serif); font-weight: 500; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-green-primary); margin: 0; }
.offer-block__sub { font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; color: var(--c-green-base); margin: 0.4rem 0 0; }
.offer-block__address { font-weight: 700; color: var(--c-green-primary); margin: 0.35rem 0 0; }
.offer-block__rule { display: block; width: 100%; height: 2px; background: var(--c-green-primary); margin: 0.9rem 0 30px; }
.offer-block__desc { font-size: 1.1em; color: var(--c-green-primary); line-height: 1.7; margin: 0 0 1.1rem; max-width: 36rem; }
.offer-block__bullets { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.5rem; }
.offer-block__bullet { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 1.1em; line-height: 1.4; color: var(--c-green-primary); }
.offer-block__check { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.offer-block__check svg { width: 16px; height: 16px; color: var(--c-green-base); }
.offer-block__note { font-size: 0.82rem; font-style: italic; line-height: 1.5; color: var(--c-green-base); margin: 0 0 1.2rem; max-width: 34rem; }
.offer-block__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.offer-block__cta { background: var(--c-green-base); color: var(--c-sand-base); border-color: var(--c-green-base); }
.offer-block__cta:hover { background: var(--c-green-primary); border-color: var(--c-green-primary); color: var(--c-sand-base); }
.offer-block__phone { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-serif); font-size: 1.2rem; color: var(--c-green-primary); text-decoration: none; }
.offer-block__phone-icon svg { width: 17px; height: 17px; color: var(--c-gold); }
.offer-block__phone-icon-img { width: 18px; height: 18px; object-fit: contain; display: block; }
.message-band__actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }
.message-band__cta { margin-top: 0; }
/* On the green band, the default .btn:hover (transparent bg) reads as green-on-green.
   Shift the hover to a warm cream instead, keeping the green text/border. */
.bg--green .message-band__cta:hover { background: #ffe9d5; color: var(--c-green-primary); border-color: var(--c-green-primary); }

/* Link banner — a full-bleed clickable image with a hover overlay. */
.link-banner { display: block; position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; }
.link-banner__img { display: block; width: 100%; height: auto; }
/* Beige highlight on hover (matches the homepage sustainability band), not green. */
.link-banner__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 243, 233, 0.55), rgba(255, 243, 233, 0.15)); opacity: 0; transition: opacity 0.25s ease; }
.link-banner:hover .link-banner__overlay, .link-banner:focus-visible .link-banner__overlay { opacity: 1; }

/* Testimonial story — blush card, cut-out photo one side, titled quote + CTA. */
.story { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); max-width: var(--max-wide); margin-inline: auto; background: var(--c-sand-accent); border-radius: 20px; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.75rem, 5vw, 4rem); }
.story__media { flex: 0 0 40%; display: flex; justify-content: center; }
.story__media--empty { align-self: stretch; min-height: 240px; border-radius: 16px; background: linear-gradient(150deg, var(--c-sand-base), var(--c-green-base)); }
.story__img { display: block; width: 100%; height: auto; }
/* Rotating stories carousel (prev/next arrows; site.js shows one at a time). */
.story-carousel { position: relative; max-width: var(--max-wide); margin-inline: auto; }
/* Slides stack in one grid cell so the box keeps the tallest slide's height
   the whole time (no jump when paging); only the active one is shown. */
.story-carousel__viewport { display: grid; }
.story-carousel .story { grid-area: 1 / 1; max-width: none; visibility: hidden; opacity: 0; transition: opacity 0.35s ease; }
.story-carousel .story.is-active { visibility: visible; opacity: 1; }
.story-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c-green-primary); color: var(--c-sand-base); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px -3px rgba(43, 53, 39, 0.5); }
.story-carousel__nav svg { width: 20px; height: 20px; }
.story-carousel__nav--prev { left: -8px; }
.story-carousel__nav--next { right: -8px; }
@media (max-width: 1180px) { .story-carousel__nav--prev { left: 6px; } .story-carousel__nav--next { right: 6px; } }
.story__content { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.story__title { font-family: var(--font-serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--c-green-primary); margin: 0; }
.story__rule { display: block; width: clamp(180px, 45%, 320px); height: 2px; background: var(--c-green-primary); margin: 1rem 0 1.6rem; }
.story__text { line-height: 1.7; color: var(--c-green-primary); margin: 0 0 1rem; }
.story__cta { margin-top: 0.8rem; }
@media (max-width: 800px) {
  .story { flex-direction: column; }
  /* image-right stacks text-then-image in the DOM; reverse it on mobile so the
     image comes first, matching the image-left stories (Noah, Lori). */
  .story--image-right { flex-direction: column-reverse; }
  .story__media { flex: 0 0 auto; max-width: 340px; }
  /* Drop the arrows below the card so they never sit over the story copy. */
  .story-carousel { padding-bottom: 4.25rem; }
  .story-carousel__nav { top: auto; bottom: 0; transform: none; }
  .story-carousel__nav--prev { left: calc(50% - 3.25rem); right: auto; }
  .story-carousel__nav--next { right: calc(50% - 3.25rem); left: auto; }
}
@media (max-width: 1023px) {
  .offer-block, .offer-block--reverse { grid-template-columns: 1fr; gap: 1.25rem; }
  .offer-block--reverse .offer-block__media { order: 0; }
  .offer-block__media { min-height: 0; aspect-ratio: 16 / 10; }
  .offer-block__title { font-size: 1.6rem; }
}

/* ── Mansley Rewards: tier cards, steps, good-to-know, join form ── */
.rewards-tiers__head { text-align: center; margin: 0 auto clamp(2rem, 5vw, 3rem); }
.rewards-tiers__eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.26em; color: var(--c-gold); margin: 0 0 0.5rem; }
.rewards-tiers__heading { font-family: var(--font-serif); font-weight: 500; font-size: 2rem; text-transform: uppercase; letter-spacing: 4px; color: var(--c-green-primary); margin: 0; }
.rewards-tiers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); max-width: var(--max-content); margin-inline: auto; align-items: start; }
.rewards-tier { position: relative; background: var(--c-sand-base); border: 1px solid var(--c-green-primary); border-radius: 12px; padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; }
.rewards-tier--premium { background: var(--c-green-primary); border-color: var(--c-green-primary); color: var(--c-sand-base); }
.rewards-tier__tag { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-green-primary); background: var(--c-gold); padding: 0.3rem 0.7rem; border-radius: 100px; }
.rewards-tier__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rewards-tier__eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-gold); margin: 0 0 0.4rem; }
.rewards-tier--premium .rewards-tier__eyebrow { color: var(--c-sand-accent); }
.rewards-tier__name { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0; color: var(--c-green-primary); }
.rewards-tier--premium .rewards-tier__name { color: var(--c-sand-base); }
.rewards-tier__star { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--c-green-primary); display: inline-flex; align-items: center; justify-content: center; color: var(--c-green-base); }
.rewards-tier--premium .rewards-tier__star { border-color: rgba(255, 233, 213, 0.55); color: var(--c-sand-accent); }
.rewards-tier__star svg { width: 28px; height: 28px; }
.rewards-tier__qualifier { font-size: 0.85rem; color: var(--c-green-base); margin: 0.6rem 0 0; }
.rewards-tier--premium .rewards-tier__qualifier { color: var(--c-sand-accent); }
.rewards-tier__rule { display: block; height: 2px; background: var(--c-green-primary); margin: 1.25rem 0; }
.rewards-tier--premium .rewards-tier__rule { background: var(--c-sand-accent); }
.rewards-tier__benefits { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.7rem; }
.rewards-tier__benefit { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.45; color: var(--c-green-primary); }
.rewards-tier--premium .rewards-tier__benefit { color: var(--c-sand-base); }
.rewards-tier__check { display: inline-flex; flex: 0 0 auto; margin-top: 2px; color: var(--c-green-base); }
.rewards-tier--premium .rewards-tier__check { color: var(--c-gold); }
.rewards-tier__check svg { width: 17px; height: 17px; }
.rewards-tier__cta { margin-top: auto; text-align: center; background: var(--c-green-base); color: var(--c-sand-base); border-color: var(--c-green-base); }
.rewards-tier--premium .rewards-tier__cta { background: var(--c-sand-base); color: var(--c-green-primary); border-color: var(--c-sand-base); }

.steps__heading { text-align: center; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--c-green-primary); margin: 0 0 2rem; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2rem); max-width: var(--max-content); margin-inline: auto; counter-reset: none; }
.steps__step { text-align: center; }
.steps__num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-green-primary); color: var(--c-sand-base); font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 1rem; }
.steps__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; color: var(--c-green-primary); margin: 0 0 0.5rem; }
.steps__body { font-size: 0.9rem; line-height: 1.6; color: var(--c-green-primary); margin: 0; }

.join-form { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; max-width: var(--max-content); margin-inline: auto; }
/* No signed note — a single, centred form column (competition, secret landing). */
.join-form--solo { grid-template-columns: minmax(0, 640px); justify-content: center; }
.join-form__heading { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: var(--c-green-primary); margin: 0 0 0.5rem; }
.join-form__intro { color: var(--c-green-primary); line-height: 1.6; margin: 0 0 1.5rem; }

/* Mansley Rewards page: uppercase 2rem/4px section headings. */
body.page--mansley-rewards .steps__heading,
body.page--mansley-rewards .value-strip__heading,
body.page--mansley-rewards .join-form__heading { font-size: 2rem; text-transform: uppercase; letter-spacing: 4px; }
/* "Good to know" on the deep-green band: light text + four key facts. */
.block--value_strip.bg--green .value-strip__heading,
.block--value_strip.bg--green .value-strip__label,
.block--value_strip.bg--green .value-strip__text { color: var(--c-sand-base); }
.block--value_strip.bg--green .value-strip__icon svg { color: var(--c-sand-accent); }

/* ── Legible text on the dark-green band (.bg--green) ────────────────────────
   Many body-copy blocks hardcode dark-green text; on the green background that
   is dark-on-dark. The design intends cream text on green (--text-on-inverse,
   as headings already use), so flip the body copy too. Scoped to .bg--green
   only (not .bg--green-soft, which is a light background). Two-class specificity
   beats the single-class component colours. */
.bg--green :is(p, li, h4, h5, h6, blockquote, dt, dd, figcaption, .lead,
  [class$="__body"], [class$="__text"], [class$="__label"], [class$="__heading"],
  [class$="__question"], [class$="__note"], [class$="__title"], [class$="__subtitle"],
  [class$="__lead"], [class$="__copy"]) {
  color: var(--text-on-inverse);
}
.bg--green .rich-text__body a,
.bg--green .rich-text__body strong { color: var(--text-on-inverse); }
.bg--green :is([class$="__icon"] svg) { color: var(--c-sand-accent); }
body.page--mansley-rewards .value-strip__list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.join-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.join-form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.join-form__field--wide { grid-column: 1 / -1; }
.join-form__label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-green-base); margin-bottom: 0.4rem; }
.join-form__input { width: 100%; padding: 0.8rem 0.9rem; border: 1px solid rgba(83, 100, 82, 0.3); border-radius: 5px; background: #fff; font: inherit; font-size: 0.92rem; color: var(--c-green-primary); }
.join-form__consents { display: grid; gap: 0.6rem; margin: 1.25rem 0 1.5rem; }
.join-form__consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; line-height: 1.45; color: var(--c-green-primary); }
.join-form__consent input { margin-top: 2px; accent-color: var(--c-green-base); }
.join-form__submit { width: 100%; }
.join-form__note { background: var(--c-sand-base); border-radius: 12px; padding: clamp(1.5rem, 3vw, 2rem); }
.join-form__quote { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; line-height: 1.3; color: var(--c-green-primary); margin: 0 0 1rem; }
.join-form__note-p { font-size: 0.9rem; line-height: 1.7; color: var(--c-green-primary); margin: 0 0 0.9rem; }
.join-form__signoff { font-family: var(--font-serif); font-size: 1.1rem; color: var(--c-green-primary); margin: 0.5rem 0 0; }
@media (max-width: 1023px) {
  .rewards-tiers__grid { grid-template-columns: 1fr; }
  .steps__list { grid-template-columns: 1fr 1fr; }
  .join-form { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .steps__list { grid-template-columns: 1fr; }
  .join-form__fields { grid-template-columns: 1fr; }
}

/* ── Content pages: lead, checklist, pull-quote, stats, image, embed ── */
.lead { font-family: var(--font-serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.5; color: var(--c-green-primary); margin: 0; }
.checklist__heading { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: var(--c-green-primary); margin: 0 0 1.1rem; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.checklist__item { display: flex; align-items: flex-start; gap: 0.7rem; line-height: 1.6; color: var(--c-green-primary); }
.checklist__check { display: inline-flex; flex: 0 0 auto; margin-top: 3px; color: var(--c-green-base); }
.checklist__check svg { width: 18px; height: 18px; }
.pull-quote { margin: 0; padding-left: 1.5rem; border-left: 2px solid var(--c-gold); }
.pull-quote__text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.35; color: var(--c-green-primary); margin: 0; }
.pull-quote__cite { display: block; margin-top: 0.8rem; font-style: normal; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-gold); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; }
.stats__card { text-align: center; background: var(--c-sand-2); border-radius: 10px; padding: 1.5rem 1rem; }
.stats__value { font-family: var(--font-serif); font-weight: 600; font-size: clamp(0.9rem, 1.75vw, 1.3rem); text-transform: uppercase; color: var(--c-green-primary); margin: 0; }
.stats__label { font-size: 0.82rem; line-height: 1.4; color: var(--c-green-base); margin: 0.4rem 0 0; }
.content-image { margin: 0; }
.content-image__img, .content-image__placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; }
.content-image__placeholder { background: linear-gradient(150deg, var(--c-sand-2), var(--c-green-base)); }
.content-image__caption { font-size: 0.82rem; color: var(--c-gold); margin: 0.7rem 0 0; }
.embed { margin: 0; }
.embed__slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; min-height: 200px; background: #f1f0e6; border: 1px dashed rgba(124, 138, 102, 0.6); border-radius: 12px; padding: 2rem; text-align: center; }
.embed__icon { color: var(--c-green-base); }
.embed__icon svg { width: 30px; height: 30px; }
.embed__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-green-base); }
.embed__note { font-size: 0.8rem; line-height: 1.6; color: var(--c-green-base); margin: 0.8rem 0 0; }
.embed__slot--mounted { display: block; min-height: 0; padding: 0; background: none; border: 0; }
.embed__frame { width: 100%; border: 0; display: block; border-radius: 12px; }
.embed__frame--surveymonkey { height: 800px; }
.embed__frame--cleanhub { height: 460px; }

/* Lazy-facade video block (YouTube): poster + play button, iframe injected on click. */
.video-facade { position: relative; aspect-ratio: 16 / 9; max-width: 760px; margin: 1.5rem auto; border-radius: 12px; overflow: hidden; background: var(--c-green-primary); cursor: pointer; }
.video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(83, 100, 82, 0.85); transition: background-color 0.2s, transform 0.2s; }
.video-facade__play::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--c-sand-base); }
.video-facade:hover .video-facade__play { background: var(--c-green-primary); transform: translate(-50%, -50%) scale(1.06); }
.video-block { margin: 1.5rem auto; max-width: 760px; }
.video-block .video-facade { margin: 0 auto 0.9rem; }
.video-block__caption { text-align: center; font-family: var(--font-serif); font-size: 1.05rem; color: var(--c-green-primary); margin: 0; }
@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr; }
}

/* Stats as an impact strip on a sage band (Sustainability hub): bare figures, not
   cream cards, with cream text and hairline dividers. */
.block--stats.bg--green { padding-block: 15px; }
.bg--green .stats { gap: 0; }
.bg--green .stats__card { background: transparent; border-radius: 0; padding: 0.5rem clamp(1rem, 3vw, 2.5rem); display: flex; flex-direction: column; align-items: center; }
/* Accreditation icon above the value (cream on the green band). */
.stats__icon-wrap { display: flex; justify-content: center; margin-bottom: 0.9rem; }
.stats__icon { height: clamp(52px, 6vw, 76px); width: auto; object-fit: contain; }
.bg--green .stats__card + .stats__card { border-left: 1px solid rgba(255, 243, 233, 0.22); }
.bg--green .stats__value { color: var(--c-sand-base); }
.bg--green .stats__label { color: var(--c-sand-accent); }
@media (max-width: 600px) {
  .bg--green .stats__card + .stats__card { border-left: 0; border-top: 1px solid rgba(255, 243, 233, 0.22); padding-top: 1.1rem; margin-top: 1.1rem; }
}
/* Mobile auto-rotating USP strip: site.js adds .stats--carousel (mobile only,
   not under reduced motion). One card shows and the next slides in from the
   right every couple of seconds. Without JS the strip stays stacked. */
.stats--carousel { display: grid; }
.stats--carousel .stats__card { grid-area: 1 / 1; opacity: 0; transform: translateX(28px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stats--carousel .stats__card.is-active { opacity: 1; transform: none; }
.bg--green .stats--carousel .stats__card + .stats__card { border: 0; padding-top: 0.5rem; margin-top: 0; }

/* Same auto-rotate for the homepage feature-icon USPs (site.js adds the class
   on mobile only): one icon+label shows, the next slides in from the right. */
.feature-icons--carousel { display: grid; }
.feature-icons--carousel .feature-icons__item { grid-area: 1 / 1; opacity: 0; transform: translateX(28px); transition: opacity 0.5s ease, transform 0.5s ease; }
.feature-icons--carousel .feature-icons__item.is-active { opacity: 1; transform: none; }

/* ── Grouped cards (activity index by city + activity-leaf "places" block) ── */
.grouped-cards__heading { text-align: center; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--c-green-primary); margin: 0 0 2rem; }
.grouped-cards__group { margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.grouped-cards__group-head { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1.25rem; }
.grouped-cards__group-name { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); text-transform: uppercase; letter-spacing: 2px; color: var(--c-green-primary); margin: 0; }
.grouped-cards__group-region { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--c-gold); flex: 0 0 auto; }
.grouped-cards__rule { flex: 1; height: 2px; background: var(--c-green-primary); }
.grouped-cards__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.grouped-card { background: var(--c-sand-accent); border: 1px solid rgba(83, 100, 82, 0.12); border-radius: 10px; overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.grouped-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(43, 53, 39, 0.45); border-color: rgba(124, 138, 102, 0.45); }
.grouped-card__link { display: block; text-decoration: none; color: inherit; }
.grouped-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.grouped-card__media--empty { background: linear-gradient(150deg, #9aa07e, #6f7d57); }
.grouped-card__badge { position: absolute; top: 0.75rem; right: 0.75rem; display: inline-flex; align-items: center; gap: 0.3rem; background: var(--c-sand-base); color: var(--c-green-primary); border-radius: 100px; padding: 0.3rem 0.7rem; font-size: 0.72rem; }
.grouped-card__badge-icon svg { width: 13px; height: 13px; color: var(--c-gold); display: block; }
.grouped-card__icon { position: absolute; left: 0.75rem; bottom: 0.75rem; width: 38px; height: 38px; border-radius: 50%; background: var(--c-sand-base); display: inline-flex; align-items: center; justify-content: center; color: #5f6e49; }
.grouped-card__icon svg { width: 20px; height: 20px; }
.grouped-card__body { display: block; padding: 1rem 1.1rem 1.2rem; }
.grouped-card__title { display: block; font-family: var(--font-serif); font-size: 1.25rem; color: var(--c-green-primary); }
.grouped-card__meta { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.85rem; color: var(--c-green-base); }
.grouped-card__meta-icon svg { width: 15px; height: 15px; color: var(--c-green-base); display: block; }
.grouped-card__cta { display: inline-block; margin-top: 0.8rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-green-base); }
@media (max-width: 700px) {
  /* Per-group swipe row (scroll-snap), keeping the page short. */
  .grouped-cards__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
  .grouped-card { scroll-snap-align: start; }
}

/* ── Guest Login portal selector (portal_grid) ── */
.portal-grid__heading { text-align: center; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--c-green-primary); margin: 0 0 2rem; }
.portal-grid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.portal-card { background: var(--c-sand-accent); border: 1px solid rgba(83, 100, 82, 0.12); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.portal-card__media { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.portal-card__media--empty { background: linear-gradient(150deg, #6f7d57, #46523a); }
.portal-card__body { display: flex; flex-direction: column; padding: 1.25rem 1.3rem 1.4rem; flex: 1; }
.portal-card__city { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-gold); margin: 0 0 0.35rem; }
.portal-card__name { font-family: var(--font-serif); font-weight: 500; font-size: 1.4rem; color: var(--c-green-primary); margin: 0 0 0.5rem; }
.portal-card__address { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--c-green-base); margin: 0 0 1.1rem; }
.portal-card__pin svg { width: 15px; height: 15px; color: var(--c-green-base); display: block; }
.portal-card__login { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; background: var(--c-green-primary); color: var(--c-sand-base); border-color: var(--c-green-primary); }
.portal-card__login:hover, .portal-card__login:focus-visible { background: transparent; color: var(--c-green-primary); border-color: var(--c-green-primary); }
.portal-card__login-icon svg { width: 17px; height: 17px; }
.portal-help { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; background: var(--c-sand-accent); border-radius: 12px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.portal-help__heading { font-family: var(--font-serif); font-size: 1.3rem; color: var(--c-green-primary); margin: 0 0 0.5rem; }
.portal-help__body { color: var(--c-green-primary); line-height: 1.6; margin: 0 auto 1.25rem; max-width: 38rem; }
@media (max-width: 1023px) { .portal-grid__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .portal-grid__list { grid-template-columns: 1fr; } }

/* ── Property sub-pages: sub-nav + apartment selector ── */
.block--property_subnav { padding-top: 20px; padding-bottom: 20px; background: var(--c-sand-base); }
.block--property_subnav { padding-top: 45px; }
.block--property_subnav .block__inner { max-width: var(--max-content); }
/* The apartment selector sits right under the property subnav; its spacious top
   padding left far too big a gap to the first panel — tighten to ~1/3. */
.block--property_subnav + .block--apartment_selector { padding-top: 1rem; }
.property-subnav { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 2rem; }
.property-subnav__lockup { display: flex; flex-direction: column; gap: 0.4rem; }
.property-subnav__area { font-size: 1.4rem; text-transform: capitalize; letter-spacing: 0.1em; color: #806d46; }
.property-subnav__name { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; color: var(--c-green-primary); }
.property-subnav__right { flex: 1 1 auto; min-width: 220px; display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; }
.property-subnav__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem 1.6rem; margin: 0; padding: 0; }
.property-subnav__link { display: inline-block; padding: 0.3rem 0; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-green-base); text-decoration: none; }
.property-subnav__link:hover { color: var(--c-green-primary); }
.property-subnav__link.is-active { color: var(--c-green-primary); font-weight: 700; }
.property-subnav__rule { display: block; width: 100%; height: 2px; background: var(--c-green-primary); }
@media (max-width: 700px) { .property-subnav { align-items: stretch; } .property-subnav__right { align-items: stretch; } .property-subnav__links { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; } .property-subnav__link { white-space: nowrap; } }

/* Alex Brush (OFL, self-hosted, Latin subset) — the script face for the
   "Signature Collection" tagline. Declared here in the async app CSS (not the
   inlined critical set) and used only by .apt-detail__collection, so the woff2
   is fetched solely on apartment pages that actually render that element. */
@font-face {
  font-family: "Alex Brush";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/alex-brush-regular.woff2") format("woff2");
}

/* Apartment selector — "Option B": pill tab strip → showcase gallery → 2-col detail. */
.apt-selector__heading { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: var(--c-green-primary); text-align: center; margin: 0 0 0.4rem; }
.apt-selector__heading::after { content: ""; display: block; width: 48px; height: 2px; background: var(--c-gold); margin: 0.7rem auto 0; }
.apt-selector { max-width: var(--max-content); margin-inline: auto; }

/* Tab strip */
/* "More from …" apartment carousel (also the tab strip for the detail panel). */
/* Full-bleed blush band that runs to the viewport edges (like the homepage
   property carousel); the heading + first card line up with the content frame
   while the row scrolls/drags off both edges. */
.apt-carousel { margin-top: clamp(2rem, 5vw, 3.5rem); background: var(--c-sand-accent); width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(2rem, 4vw, 3rem) 0; overflow: hidden; }
.apt-carousel__heading { text-align: center; font-family: var(--font-serif); font-weight: 600; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-green-primary); margin: 0 0 2rem; padding-inline: max(var(--space-gutter), calc((100% - var(--max-content)) / 2)); }
/* A drag scroller (site.js) — never auto-scrolling. With 6+ types it holds three
   identical copies and wraps by one copy-width for a seamless infinite loop; the
   first card lines up with the content frame. Per-li padding (not flex gap) keeps
   each copy an exact third so the wrap is invisible. */
.apt-carousel__viewport { overflow-x: auto; scrollbar-width: none; cursor: grab; }
.apt-carousel__viewport::-webkit-scrollbar { display: none; }
.apt-carousel__viewport.is-dragging { cursor: grabbing; }
.apt-carousel__viewport.is-dragging .apt-card { pointer-events: none; }
.apt-carousel__list { display: flex; width: max-content; list-style: none; margin: 0; padding: 0 max(var(--space-gutter), calc((100% - var(--max-content)) / 2)) 0.5rem; align-items: stretch; }
/* Looping copies must be exact thirds, so drop the frame padding (cards bleed to the edges). */
.apt-carousel__viewport[data-apt-loop] .apt-carousel__list { padding-inline: 0; }
.apt-carousel__list > li { flex: 0 0 clamp(190px, 18vw, 250px); padding-inline: 0.6rem; }
.apt-card { display: flex; flex-direction: column; width: 100%; height: 100%; background: none; border: 0; padding: 0.55rem 0.55rem 1.1rem; border-radius: 10px; font: inherit; text-align: left; cursor: pointer; color: inherit; transition: background-color 0.2s ease; }
.apt-card__media { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 6px; background-size: cover; background-position: center; overflow: hidden; }
.apt-card__media--empty { background: linear-gradient(150deg, var(--c-sand-2), #c9b39a); }
.apt-card:not(.is-active):hover { background: rgba(128, 149, 127, 0.22); }
.apt-card.is-active { background: var(--c-green-primary); }
.apt-card__name { display: block; margin-top: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.2rem; font-weight: 600; color: var(--c-green-primary); }
.apt-card__collection { display: block; margin-top: 0.2rem; font-family: var(--font-serif); font-style: normal; font-weight: 600; font-size: 1.02rem; color: var(--c-green-base); }
.apt-card.is-active .apt-card__name { color: var(--c-sand-base); }
.apt-card.is-active .apt-card__collection { color: var(--c-sand-accent); }

.apt-panel { display: block; position: relative; background: var(--c-sand-accent); border-radius: 20px; padding: clamp(1.75rem, 4vw, 3rem); }
.apt-panel[hidden] { display: none; }
/* Prev/next tabs — bigger siblings of the "Why book direct?" handle. */
.apt-panel__nav { position: absolute; top: 10%; bottom: 10%; width: 56px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.4rem; border: 0; cursor: pointer; padding: 1.4rem 0.4rem; background: #e7d8c5; color: var(--c-green-base); font-family: var(--font-serif); font-weight: 900; transition: background-color 0.18s ease, color 0.18s ease; }
.apt-panel__nav:hover { background: var(--c-green-primary); color: var(--c-sand-base); }
.apt-panel__nav--prev { left: 0; transform: translateX(-100%); border-radius: 14px 0 0 14px; }
.apt-panel__nav--next { right: 0; transform: translateX(100%); border-radius: 0 14px 14px 0; }
.apt-panel__nav-arrow svg { width: 24px; height: 24px; display: block; }
.apt-panel__nav-label { flex: 1; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; text-align: center; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; }
.apt-panel__nav--prev .apt-panel__nav-label { transform: rotate(180deg); }
.apt-panel__nav--next .apt-panel__nav-label { transform: rotate(0deg); }
@media (max-width: 1100px) { .apt-panel__nav { display: none; } }

/* Showcase gallery: lead tile spans both rows + four supporting tiles */
.apt-showcase { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: 420px; margin-bottom: 2.25rem; }
.apt-showcase__tile { border-radius: 12px; background-size: cover; background-position: center; }
.apt-showcase__tile--lead { grid-row: 1 / span 2; }
.apt-showcase__tile--empty { background: linear-gradient(150deg, var(--c-sand-2), #cdbfa3); }
.apt-showcase__tile--lead.apt-showcase__tile--empty { background: linear-gradient(150deg, var(--c-sand-2), var(--c-green-base)); }

/* Two-column detail */
.apt-detail { display: flex; gap: clamp(2rem, 4vw, 3.4rem); align-items: stretch; }
.apt-detail__left { flex: 0 0 42%; display: flex; flex-direction: column; }
.apt-detail__right { flex: 1; min-width: 0; }
.apt-detail__desc { line-height: 1.85; color: var(--c-green-primary); margin: 1rem 0 0; }
/* Right-column gallery: main photo + a scrolling thumbnail strip. */
.apt-gallery { margin-bottom: 2rem; }
.apt-gallery__main { display: block; aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--c-green-base); background-size: cover; background-position: center; }
.apt-gallery__main--empty { background: linear-gradient(150deg, var(--c-sand-2), var(--c-green-base)); }
.apt-gallery__strip { position: relative; margin-top: 0.9rem; }
.apt-gallery__thumbs { display: flex; gap: 0.75rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: 3.25rem; }
.apt-gallery__thumbs::-webkit-scrollbar { display: none; }
.apt-gallery__thumb { flex: 0 0 calc((100% - 2.25rem) / 4); aspect-ratio: 4 / 3; border-radius: 8px; border: 1px solid var(--c-green-base); background-size: cover; background-position: center; scroll-snap-align: start; }
.apt-gallery__thumb--empty { background: linear-gradient(150deg, var(--c-sand-2), #cdbfa3); }
button.apt-gallery__thumb { padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
button.apt-gallery__thumb:hover { border-color: var(--c-green-primary); }
.apt-gallery__thumb.is-active { border-color: var(--c-green-primary); box-shadow: 0 0 0 2px var(--c-green-primary); }
.apt-gallery__more { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c-green-primary); color: var(--c-sand-base); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px -2px rgba(43, 53, 39, 0.45); }
.apt-gallery__more svg { width: 20px; height: 20px; }
.apt-detail__collection { font-family: "Alex Brush", var(--font-serif); font-style: normal; font-size: 1.9rem; line-height: 1; color: var(--c-gold); margin: 0 0 0.5rem; }
.apt-detail__collection--classic { color: var(--c-green-base); }
.apt-detail__name { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.45rem, 2.38vw, 1.95rem); text-transform: uppercase; line-height: 1.05; color: var(--c-green-primary); margin: 0; }
.apt-detail__size { font-size: 1.2em; letter-spacing: 0.04em; color: var(--c-green-base); margin: 0.6rem 0 0; }
.apt-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 1.4rem 0 1.6rem; margin-top: auto; }
.apt-spec { background: #fff; border: 1px solid rgba(83, 100, 82, 0.1); border-radius: 10px; padding: 1.2rem 0.75rem; text-align: center; }
.apt-spec__num { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.7rem; color: var(--c-green-primary); line-height: 1; }
.apt-spec__label { display: block; margin-top: 0.45rem; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-gold); }
.apt-detail__cta { width: 100%; background: var(--c-green-base); color: var(--c-sand-base); border-color: var(--c-green-base); text-align: center; justify-content: center; }
.apt-detail__label { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; text-transform: capitalize; letter-spacing: 0.01em; color: var(--c-green-primary); margin: 0 0 0.8rem; }
.apt-detail__label:not(:first-child) { margin-top: 1.5rem; }
.apt-detail__right p:not(.apt-detail__label) { line-height: 1.85; color: var(--c-green-primary); margin: 0 0 1rem; }
.apt-facilities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.3rem; }
.apt-facility { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--c-green-primary); line-height: 1.4; font-size: 0.88rem; }
.apt-facility__check { flex: 0 0 auto; margin-top: 2px; color: var(--c-green-base); }
.apt-facility__check svg { width: 16px; height: 16px; }
.apt-facilities__note { margin: 0.9rem 0 0; }
.apt-facilities__note-line { margin: 0; color: var(--c-green-primary); font-size: 0.8rem; line-height: 1.45; opacity: 0.85; }
@media (max-width: 900px) {
  .apt-showcase { grid-template-columns: 1fr 1fr; grid-template-rows: 200px auto; height: auto; }
  .apt-showcase__tile--lead { grid-row: 1; grid-column: 1 / span 2; height: 220px; }
  .apt-showcase__tile--empty:nth-child(n+4) { display: none; }
  .apt-detail { flex-direction: column; }
  .apt-detail__left { flex: 1 1 auto; width: 100%; }
  .apt-facilities { grid-template-columns: 1fr; }
}

/* ── Blog archive (/news/) ── */
.blog-archive__masthead { text-align: center; max-width: 600px; margin: 0 auto 4rem; }
.blog-archive__eyebrow { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.34em; color: var(--c-green-base); margin: 0 0 0.7rem; }
.blog-archive__heading { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 4.5vw, 2.9rem); text-transform: uppercase; color: var(--c-green-primary); margin: 0; white-space: nowrap; }
.blog-archive__intro { font-size: 0.98rem; line-height: 1.7; color: var(--c-green-primary); margin: 1rem 0 0; }
@media (max-width: 640px) { .blog-archive__heading { white-space: normal; } }
.blog-archive__filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; max-width: var(--max-content); margin: 0 auto 2rem; }
.blog-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.blog-filter__label { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-gold); margin-right: 0.2rem; }
.blog-chip, .blog-pill { font: inherit; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.55rem 1.05rem; border-radius: 3px; cursor: pointer; background: #fff; border: 1px solid rgba(83, 100, 82, 0.16); color: var(--c-green-base); transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.blog-chip:hover, .blog-pill:hover { border-color: rgba(124, 138, 102, 0.6); }
.blog-chip.is-active { background: var(--c-green-primary); border-color: var(--c-green-primary); color: var(--c-sand-base); }
.blog-pill { background: transparent; }
.blog-pill.is-active { background: var(--c-green-base); border-color: var(--c-green-base); color: var(--c-sand-base); }
.blog-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: var(--max-content); margin-inline: auto; }
.blog-card { display: flex; }
.blog-card[hidden] { display: none; }
.blog-card__link { display: flex; flex-direction: column; width: 100%; background: var(--c-sand-accent); border: 1px solid rgba(83, 100, 82, 0.1); border-radius: 3px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.blog-card__link:hover { transform: translateY(-3px); border-color: rgba(124, 138, 102, 0.5); box-shadow: 0 18px 38px -24px rgba(43, 53, 39, 0.4); }
.blog-card__media { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.blog-card__media--empty { background: linear-gradient(150deg, var(--c-sand-2), #9c8a66); }
.blog-card__body { display: flex; flex-direction: column; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.blog-card__eyebrow { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 0.5rem; }
.blog-card__cat { color: var(--c-green-primary); }
.blog-card__city { color: var(--c-green-base); }
.blog-card__dot { width: 4px; height: 4px; border-radius: 50%; background: #c2b48f; }
.blog-card__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.15; color: var(--c-green-primary); }
.blog-card__excerpt { font-size: 0.9rem; line-height: 1.6; color: var(--c-green-primary); margin-top: 0.5rem; }
.blog-card__meta { font-size: 0.72rem; color: var(--c-green-primary); margin-top: 0.7rem; }
.blog-card__read { display: none; align-items: center; gap: 0.45rem; margin-top: 1rem; font-size: 0.62rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-green-base); }
.blog-card__read svg { width: 13px; height: 9px; }
/* Featured lead story: full width, horizontal. */
.blog-card.is-featured { grid-column: 1 / -1; }
.blog-card.is-featured .blog-card__link { flex-direction: row; align-items: stretch; }
.blog-card.is-featured .blog-card__media { flex: 0 0 54%; aspect-ratio: auto; min-height: 340px; }
.blog-card.is-featured .blog-card__body { justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
.blog-card.is-featured .blog-card__title { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.blog-card.is-featured .blog-card__read { display: inline-flex; }
.blog-archive__empty { text-align: center; color: var(--c-gold); padding: 2.5rem 0; }
.blog-archive__more { text-align: center; margin-top: 2.5rem; }
.blog-archive__more-btn { background: var(--c-green-base); color: var(--c-sand-base); border-color: var(--c-green-base); }
.blog-archive__count { font-size: 0.78rem; color: var(--c-green-base); margin: 1rem 0 0; }
@media (max-width: 900px) { .blog-archive__grid { grid-template-columns: 1fr 1fr; } .blog-card.is-featured .blog-card__link { flex-direction: column; } .blog-card.is-featured .blog-card__media { flex: none; min-height: 0; aspect-ratio: 16 / 10; } }
@media (max-width: 600px) {
  .blog-archive__grid { grid-template-columns: 1fr; }
  .blog-archive__filters { flex-direction: column; }
  .blog-filter { flex-wrap: nowrap; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
  .blog-chip, .blog-pill { white-space: nowrap; flex: 0 0 auto; }
  .blog-archive__more-btn { width: 100%; }
}

/* ── Destinations mega-menu (header dropdown) ── */
.site-nav__item--mega { position: static; }
.site-nav__mega-trigger { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-green-primary); }
.site-nav__mega-trigger:hover { color: var(--c-gold); }
.site-nav__chev svg { width: 12px; height: 12px; stroke-width: 2.6; transition: transform 0.25s ease; }
.site-nav__mega-trigger[aria-expanded="true"] { color: var(--c-gold); }
.site-nav__mega-trigger[aria-expanded="true"] .site-nav__chev svg { transform: rotate(180deg); }
html.mega-open .site-header { position: relative; z-index: 100; }
.dest-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; overflow: hidden; background: var(--grad-green); color: var(--c-sand-base); border-bottom: 1px solid rgba(43, 53, 39, 0.3); box-shadow: 0 28px 40px -30px rgba(43, 53, 39, 0.45); padding: clamp(2rem, 4vw, 2.6rem) clamp(1.5rem, 5vw, 3rem) clamp(2rem, 4vw, 3rem); animation: megaDrop 0.28s ease; }
.dest-mega::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url("/assets/brand/images/mansley-maypole-light.svg") no-repeat right center; background-size: auto 88%; opacity: 0.05; pointer-events: none; }
.dest-mega[hidden] { display: none; }
@keyframes megaDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.dest-mega__cols { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.9rem 4rem; max-width: var(--max-wide); margin-inline: auto; }
.dest-mega__col { display: grid; gap: 1.9rem; align-content: start; }
.dest-mega__city { display: block; font-size: 0.9em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--c-sand-base); margin: 0 0 1.1rem; }
.dest-mega__rule { display: block; width: 100%; height: 2px; background: rgba(255, 243, 233, 0.3); margin-top: 0.55rem; }
.dest-mega__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.dest-mega__row { display: flex; gap: 1.1rem; text-decoration: none; color: inherit; transition: opacity 0.18s; }
.dest-mega__row:hover { opacity: 0.78; }
.dest-mega__thumb { position: relative; flex: 0 0 120px; height: 88px; border-radius: 8px; background-size: cover; background-position: center; overflow: hidden; }
.dest-mega__thumb--empty { background: linear-gradient(150deg, var(--c-sand-base), var(--c-green-base)); }
/* "Coming soon" property (e.g. York) — dimmed row with a corner ribbon badge. */
.dest-mega__row--soon .dest-mega__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(43, 53, 39, 0.42); }
.dest-mega__soon { position: absolute; z-index: 1; left: 0; bottom: 0; right: 0; text-align: center; background: var(--c-green-primary); color: var(--c-sand-base); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 0; }
.dest-mega__row--soon { cursor: default; }
.dest-mega__text { display: flex; flex-direction: column; }
.dest-mega__name { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.1em; color: var(--c-sand-base); }
.dest-mega__area { font-size: 0.9em; font-weight: 500; text-transform: capitalize; letter-spacing: 0.1em; color: var(--c-sand-base); margin-bottom: 2px; }
.dest-mega__desc { font-size: 0.82rem; font-weight: 400; line-height: 1.55; letter-spacing: 0.08em; color: var(--c-sand-accent); margin-top: 5px; }
.dest-mega__explore { display: none; }
.dest-mega__explore svg { width: 12px; height: 8px; }
.dest-mega__footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(255, 243, 233, 0.25); margin-top: 2rem; padding-top: 1.5rem; max-width: var(--max-wide); margin-inline: auto; }
.dest-mega__tagline { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--c-sand-base); }
.dest-mega__all { background: transparent; color: var(--c-sand-base); border-color: rgba(255, 243, 233, 0.6); font-size: 0.62rem; padding: 0.6rem 1.1rem; }
.dest-mega__all:hover, .dest-mega__all:focus-visible { background: var(--c-sand-base); border-color: var(--c-sand-base); color: var(--c-green-primary); }
.dest-mega-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(43, 53, 39, 0.5); transition: opacity 0.3s ease; }
.dest-mega-scrim[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .dest-mega { animation: none; } }
@media (max-width: 1024px) {
  /* In the slide-in drawer the mega-menu is an in-flow accordion (compact rows). */
  .site-nav__mega-trigger { width: 100%; justify-content: center; padding: 1.15rem 0.5rem; font-size: 1rem; letter-spacing: 0.2em; }
  .dest-mega { position: static; z-index: auto; overflow: visible; background: transparent; color: var(--c-green-primary); border: 0; box-shadow: none; padding: 0 0 1rem; animation: none; width: 100%; max-width: 360px; margin-inline: auto; }
  .dest-mega::after { display: none; }
  .dest-mega__city { color: var(--c-gold); }
  .dest-mega__rule { height: 2px; background: rgba(51, 64, 46, 0.18); }
  .dest-mega__name { color: var(--c-green-primary); }
  .dest-mega__area { color: var(--c-green-base); }
  .dest-mega__all { color: var(--c-green-primary); border-color: var(--c-green-primary); }
  .dest-mega__cols { grid-template-columns: 1fr; gap: 1.25rem; text-align: left; }
  .dest-mega__col { gap: 1.25rem; }
  .dest-mega__row { gap: 0.8rem; align-items: center; }
  .dest-mega__thumb { flex: 0 0 64px; height: 52px; border-radius: 7px; }
  .dest-mega__desc, .dest-mega__explore { display: none; }
  .dest-mega__footer { flex-direction: column; align-items: stretch; }
  .dest-mega-scrim { display: none !important; }
}

/* ── Mobile: single-column reflow (≤1024px) ── */
@media (max-width: 1024px) {
  /* Header: hamburger (left) + centred logo + compact right */
  .site-header__inner { padding: 14px 18px; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; }
  /* Header sits above the fixed booking bar so the nav overlay can cover it. */
  .site-header { z-index: 100; }
  /* Hamburger toggle: a real <button>; site.js flips aria-expanded + .is-open. It
     stays above the full-screen nav overlay so it doubles as the close (✕). */
  .nav-toggle { position: relative; z-index: 90; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; padding: 0; border: 0; background: transparent; }
  .hamburger__bars, .hamburger__bars::before, .hamburger__bars::after { display: block; width: 24px; height: 2px; background: var(--c-green-primary); transition: transform 0.3s ease, background-color 0.3s ease, top 0.3s ease; }
  .hamburger__bars { position: relative; }
  .hamburger__bars::before { content: ""; position: absolute; top: -7px; }
  .hamburger__bars::after { content: ""; position: absolute; top: 7px; }
  /* Open → morph the bars into an ✕ */
  .nav-toggle[aria-expanded="true"] .hamburger__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .hamburger__bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .hamburger__bars::after { top: 0; transform: rotate(-45deg); }
  .nav-toggle:focus-visible { outline: 3px solid var(--c-green-primary); outline-offset: 2px; }
  .site-header__logo { order: 0; margin: 0 auto 0 0; align-items: flex-start; }
  .site-header__est { display: none; }
  /* Mobile header: logo (left) · phone icon + burger (right) */
  .site-header__right { display: none; }
  .site-header__call { display: inline-flex; order: 1; align-items: center; }
  .site-header__call-icon-img { width: 24px; height: 24px; object-fit: contain; }
  .nav-toggle { order: 2; }
  .site-header__action { padding: 7px 12px; font-size: 0.62rem; }
  /* Full-screen nav overlay — fades/scales in, links centred. `safe center` keeps
     a short (collapsed) menu vertically centred but switches to top-aligned the moment
     the content (e.g. the open destinations accordion) is taller than the viewport, so
     the first row/city heading is never clipped under the header ✕. */
  .site-nav { position: fixed; inset: 0; z-index: 80; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 0; padding: 5rem 1.5rem 2rem; overflow-y: auto; background: var(--c-sand-base); opacity: 0; visibility: hidden; transform: scale(1.03); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.35s ease; }
  .site-nav__list { flex-direction: column; gap: 0; padding: 0; width: 100%; max-width: 360px; text-align: center; }
  .site-nav__item { border-top: 1px solid rgba(83, 100, 82, 0.14); }
  .site-nav__item:last-child { border-bottom: 1px solid rgba(83, 100, 82, 0.14); }
  .site-nav__link { display: block; padding: 1.15rem 0.5rem; font-size: 1rem; letter-spacing: 0.2em; }
  /* Guest Login + Contact buttons, surfaced inside the slide-in menu. */
  .site-nav__actions { display: flex; flex-direction: column; gap: 0.85rem; width: 100%; max-width: 360px; margin-top: 1.85rem; }
  .site-nav__action { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.95rem 1.25rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .site-nav__action .site-header__action-icon-img { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) invert(1); }
  /* Est.1958 mark featured at the foot of the slide-in menu. */
  .site-nav__est { display: block; margin-top: 2.25rem; flex: 0 0 auto; }
  .site-nav__est-img { height: clamp(72px, 20vw, 104px); width: auto; display: block; }

  /* Booking: hide the desktop ribbon; show the collapsed bar + expanding sheet */
  .booking-bar { display: none; }
  .booking-sheet { display: block; }
  .booking-sheet__bar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; width: 100%; padding: 13px 18px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--c-green-base); border: 0; border-top: 1px solid rgba(255, 243, 233, 0.18); text-align: left; cursor: pointer; font: inherit; }
  /* Docked (inline) booking form on landing: the sheet panel sits in the page
     flow as a green card — no pull handle or close — and the sticky bottom tab
     stays hidden until the user scrolls past it. site.js manages the states. */
  .booking-sheet--docked .booking-sheet__panel { position: static; transform: none; box-shadow: none; border-radius: 12px; margin: 0 var(--space-gutter); max-height: none; }
  /* Overlap the inline form up onto the hero video. The panel's negative margin
     collapses through to this section, so the section rises into the hero zone —
     its bg--sand must go transparent here or the sand covers the video and the
     card looks like it sits on a sand block rather than overlapping the video. */
  .page--home .block--booking_bar { padding-top: 0; position: relative; z-index: 6; background: transparent; }
  .page--home .booking-sheet--docked .booking-sheet__panel {
    margin-top: clamp(-25px, -5vw, -16px);
    position: relative;
    z-index: 3;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .booking-sheet--docked .booking-sheet__handle,
  .booking-sheet--docked .booking-sheet__close,
  .booking-sheet--docked .booking-sheet__back { display: none; }
  .booking-sheet--docked .booking-sheet__bar { transform: translateY(130%); pointer-events: none; }
  .booking-sheet--docked.booking-sheet--past .booking-sheet__bar { transform: none; pointer-events: auto; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
  /* The "Why Book Direct?" tab stays hidden while the inline form is on screen. */
  html.has-inline-booking:not(.past-inline-booking) .book-direct__handle { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
  .booking-sheet__summary { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .booking-sheet__eyebrow { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--c-sand-2); }
  .booking-sheet__line { font-size: 0.82rem; color: var(--c-sand-base); }
  .booking-sheet__pill { flex: 0 0 auto; background: var(--c-sand-accent); color: var(--c-green-primary); padding: 14px 22px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 700; }
  body { padding-bottom: 86px; } /* clearance for the fixed bar */

  .booking-sheet__backdrop { position: fixed; inset: 0; z-index: 131; background: rgba(83, 100, 82, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.38s ease; }
  /* Sage panel + dark-green cream-texted fields, mirroring the desktop booking bar. */
  .booking-sheet__panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 132; background: var(--c-green-base); border-radius: 24px 24px 0 0; box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.25); padding: 14px 20px calc(26px + env(safe-area-inset-bottom, 0px)); transform: translateY(106%); transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1); }
  .booking-sheet.is-open .booking-sheet__backdrop { opacity: 1; pointer-events: auto; }
  .booking-sheet.is-open .booking-sheet__panel { transform: translateY(0); }
  .booking-sheet__handle { display: block; width: 40px; height: 4px; border: 0; border-radius: 2px; background: rgba(255, 243, 233, 0.5); margin: 0 auto 16px; cursor: pointer; padding: 0; }
  .booking-sheet__header { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
  .booking-sheet__heading { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  /* Back arrow — only in the sub-views (handoff v5) */
  .booking-sheet__back { display: none; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 0; background: rgba(255, 243, 233, 0.16); color: var(--c-sand-base); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
  .booking-sheet__panel:not([data-view="main"]) .booking-sheet__back { display: inline-flex; }
  .booking-sheet__title { font-size: 1.45rem; color: var(--c-sand-base); }
  .booking-sheet__subtitle { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--c-sand-2); }
  .booking-sheet__close { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 243, 233, 0.16); color: var(--c-sand-base); font-size: 1rem; line-height: 1; cursor: pointer; }
  .booking-sheet__form { display: grid; gap: 10px; }
  .booking-sheet__field { background: var(--c-green-primary); border: 1px solid var(--c-sand-base); border-radius: 3px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
  .booking-sheet__field-label { font-size: 0.8rem; color: var(--c-sand-base); }
  .booking-sheet__caption { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-sand-2); }
  .booking-sheet__field-control { border: 0; background: transparent; font: inherit; color: var(--c-sand-base); padding: 0; width: 100%; }
  .booking-sheet__field-control::placeholder { color: var(--c-sand-2); }
  .booking-sheet__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .booking-sheet__submit { background: var(--c-sand-accent); color: var(--c-green-primary); border-color: var(--c-sand-accent); border-radius: 3px; padding: 16px 0; width: 100%; font-weight: 700; }

  /* ── Sheet sub-views: one view shown at a time (data-view on the panel) ── */
  .booking-sheet__form { display: block; } /* views own their own layout */
  .booking-sheet__view { display: none; gap: 10px; }
  .booking-sheet__panel[data-view="main"] [data-view-panel="main"],
  .booking-sheet__panel[data-view="dates"] [data-view-panel="dates"],
  .booking-sheet__panel[data-view="guests"] [data-view-panel="guests"] { display: grid; }
  /* Tappable Dates/Guests fields (buttons styled as the bordered field rows) */
  .booking-sheet__field--tap { background: var(--c-green-primary); cursor: pointer; text-align: left; font: inherit; width: 100%; }
  .booking-sheet__field-value { font-size: 0.82rem; color: var(--c-sand-base); }
  /* The calendar (.booking-cal) + steppers (.booking-stepper) are SHARED global
     components (below the media query), used by the desktop modals too. */

  /* DONE (sub-views) — deep Fern vs the sage Search button */
  .booking-sheet__done { background: var(--c-sand-accent); color: var(--c-green-primary); border-color: var(--c-sand-accent); border-radius: 3px; padding: 16px 0; width: 100%; font-weight: 700; }

  /* Book Direct band stacks */
  .book-direct-band { min-height: 0; }
  .book-direct-band__bg { inset: 0; opacity: 0.5; }
  .book-direct-band__frame { padding: 2.5rem var(--space-gutter); }

  /* No left-edge "Book Direct Benefits" tab on mobile */

  /* Feature-icons section carries no vertical padding (text blocks above/below hug it) */
  .block--feature_icons { padding-block: 0; }
  .feature-icons__list { margin: 0.5rem 0; }

  /* Footer stacks, centred */
  .site-footer__band--green .site-footer__band-inner { flex-direction: column; gap: 1.5rem; text-align: center; }
  .site-footer__band--sand .site-footer__band-inner { flex-direction: column; align-items: center; text-align: center; }
  .site-footer__cols { justify-content: center; }
  .site-footer__links { justify-items: center; }
  .site-footer__legal { text-align: center; width: 100%; align-self: center; }

  /* Award badges: all five across one row. Fixed-height images size each badge to
     its natural width so five sit comfortably side by side (no wrap to 3 + 2). */
  .site-footer__band--green { padding-block: 2em; }
  .site-footer__badges { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; column-gap: 0.5rem; row-gap: 1.25rem; width: 100%; margin-inline: auto; }
  .site-footer__badge { flex: 0 1 auto; min-width: 0; }
  .site-footer__badge-img { height: 46px; width: auto; max-width: 100%; }
  .site-footer__social-icon { width: 35px; height: 35px; }
}

/* ── Mobile: narrow phones (≤640px) ── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { min-height: 300px; }
  /* The 50% editorial text column would be too narrow on phones — let it span. */
  .hero--full:not(.hero--bare) .hero__content, .hero--standard .hero__content { max-width: 86%; }
  .hero__caption { left: 16px; font-size: 0.95rem; }
  /* Instagram → 3-column grid; show 6 (two clean rows), not 7 with a lone tile. */
  .instagram-feed__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; overflow: visible; }
  .instagram-feed__item { flex: initial; }
  .instagram-feed__item:nth-child(n+7) { display: none; }
  /* Carousels peek one at a time */
  .property-carousel__tile { flex-basis: 60vw; }
  .testimonials__item { flex-basis: 82vw; }
  .booking-bar__inner { padding: 14px 18px; }
  .feature-icons__list { gap: 1.75rem; }
  /* Book Direct band: scale the oversized headline/subhead down for phones */
  .book-direct-band__headline { font-size: 1.5rem; }
  .book-direct-band__subhead { font-size: 1rem; }
  /* Header keeps only the last action (Guest Login) on phones, per the spec */
  .site-header__right .site-header__action:not(:last-child) { display: none; }
  /* Location: suites / attractions / transport become swipe carousels */
  .room-grid__list, .distance-grid__list { grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .room-grid__room, .distance-grid__item { scroll-snap-align: start; }
  .info-panel { grid-template-columns: 1fr; }
}

/* Why Mansley — the "Love the finer things" intro: oval portrait image on the
   left, centred heading + copy + button in the right column (per template). */
body.page--why-mansley .block--text_media .text-media--media-left {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
  max-width: var(--max-content);
  margin-inline: auto;
}
/* Renderer emits text before media; place the image column on the left. */
body.page--why-mansley .text-media--media-left .text-media__media { order: -1; }
body.page--why-mansley .text-media--media-left .text-media__text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.page--why-mansley .text-media__heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-green-primary);
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
}
body.page--why-mansley .text-media--media-left .text-media__body {
  max-width: 34rem;
  color: var(--c-green-primary);
  line-height: 1.75;
}
body.page--why-mansley .text-media__cta { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
/* The finer-things image is a die-cut PNG (soft feathered edges baked in), so
   show it at its natural shape — no crop, no border radius. */
body.page--why-mansley .text-media--media-left .text-media__figure {
  max-width: 420px;
  margin-inline: auto;
}
body.page--why-mansley .text-media--media-left .text-media__figure img {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}
/* Hairline rule between the intro and the USP blocks, matching the template. */
body.page--why-mansley .block--text_media + .block--offer_blocks .block__inner {
  border-top: 1px solid var(--c-green-base);
  padding-top: clamp(2.5rem, 6vw, 4rem);
}
@media (max-width: 760px) {
  body.page--why-mansley .block--text_media .text-media--media-left {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 6vw, 2.5rem);
  }
  body.page--why-mansley .text-media--media-left .text-media__figure { max-width: 300px; }
}