/* =========================================================
   NIVARA CO-LIVING, Design System
   Premium residential architecture + boutique hospitality
   + modern editorial. Olive / ivory / champagne gold.
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand, Olive */
  --olive: #3C452A;        /* Primary Olive  */
  --olive-dark: #29321D;   /* Dark Olive     */

  /* Brand, Champagne Gold (accent, ~5%) */
  --gold: #B38C51;         /* Muted Champagne Gold */
  --gold-soft: #D2B77F;    /* Soft Champagne       */

  /* Neutrals */
  --ivory: #F9F7F2;        /* Warm Ivory, primary bg */
  --cream: #F3F0E8;        /* Soft Cream, secondary  */
  --white: #FFFFFF;
  --ph: #E8E4DA;           /* deeper placeholder tone */

  /* Text */
  --text: #25271F;         /* Primary text   */
  --muted: #707169;        /* Secondary text */

  /* Lines */
  --border: #DDD9CF;

  /* Status (never colour-alone; paired with icon + label) */
  --ok: #4B6A3F;
  --ok-bg: #EDF2E6;
  --warn: #9A6B24;
  --warn-bg: #F6EEDD;
  --bad: #9B4A3B;
  --bad-bg: #F5E7E3;

  /* Type, single source of truth */
  --font-primary: 'Plus Jakarta Sans', sans-serif;

  /* Spacing (8px system) */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s15: 120px;

  /* Layout */
  --maxw: 1240px;
  --gutter: 40px;
  --nav-h: 76px;
  --util-h: 36px;        /* slim utility contact strip; 0 on mobile (strip hidden) */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 0.25s var(--ease);
  --slow: 0.6s var(--ease);

  /* Radius + shadow (restrained) */
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --shadow: 0 18px 40px -28px rgba(41, 50, 29, 0.35);
  --shadow-lg: 0 30px 70px -40px rgba(41, 50, 29, 0.45);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-family: var(--font-primary); }

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Root app container inherits the single global font */
#app { font-family: inherit; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Typography ----------
   Single font (Plus Jakarta Sans). Hierarchy comes from weight, scale,
   line-height, letter-spacing and whitespace, never from a second family.
   Large headings stay refined (medium weight), not bold. */
h1, h2, h3, h4 {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--olive-dark);
  margin: 0;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; } /* 40 → 72px */
h2 { font-size: clamp(2rem, 4vw, 3rem);     line-height: 1.14; font-weight: 500; }                          /* 32 → 48px */
h3 { font-size: clamp(1.55rem, 2.4vw, 2.05rem); line-height: 1.2; font-weight: 600; }
h4 { font-size: 1.2rem; line-height: 1.3; font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.12rem; color: var(--muted); line-height: 1.6; font-weight: 400; }

/* Tabular figures, keeps prices, dates, room sizes, availability, booking
   totals, ratings and distances aligned and consistent everywhere. */
.price, .trust__num, .book-box__price, .book-box__row, .summary, .summary__total,
.confirm__id, .confirm__grid, .room-specs, .compare, .avail-status, .results__count,
.badge, .nearby, .field, .control, .pd-rating, .breadcrumb, .steps {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.eyebrow {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--s3);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--gold); display: inline-block;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::after {
  content: ""; width: 28px; height: 1px; background: var(--gold); display: inline-block;
}

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--s15) 0; }
.section--sm { padding: var(--s10) 0; }
.section-head { max-width: 640px; margin-bottom: var(--s8); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap;
}
.bg-cream { background: var(--cream); }
.bg-olive { background: var(--olive-dark); color: #E7E4D8; }
.bg-olive h1, .bg-olive h2, .bg-olive h3, .bg-olive h4 { color: #F5F2E9; }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-primary); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 15px 26px; border-radius: var(--r-sm);
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast), box-shadow var(--fast);
  border: 1px solid transparent; white-space: nowrap;
}
.btn .arrow { transition: transform var(--fast); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary { background: var(--olive); color: #fff; }
.btn--primary:hover { background: var(--olive-dark); box-shadow: var(--shadow); }
.btn--secondary { background: transparent; color: var(--olive); border-color: var(--olive); }
.btn--secondary:hover { background: var(--olive); color: #fff; }
.btn--ghost-light { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.55); backdrop-filter: blur(4px); }
.btn--ghost-light:hover { background: #fff; color: var(--olive-dark); }
.btn--block { width: 100%; }
.btn--lg { padding: 18px 32px; font-size: 14px; }
.btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--olive);
  position: relative; padding-bottom: 2px;
}
.link-arrow span { color: var(--gold); transition: transform var(--fast); }
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--fast);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------- Placeholders (no photography yet) ---------- */
.ph {
  position: relative; overflow: hidden; background: var(--cream);
  border: 1px solid var(--border); border-radius: var(--r);
  /* subtle architectural line texture */
  background-image:
    linear-gradient(135deg, rgba(211,183,127,0.05) 0%, transparent 55%),
    repeating-linear-gradient(60deg, rgba(60,69,42,0.035) 0 1px, transparent 1px 26px);
  color: var(--muted);
}
.ph--deep { background-color: var(--ph); }
.ph__label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(60,69,42,0.42); text-align: center; padding: 12px;
}
.ph__label svg { width: 30px; height: 30px; opacity: 0.5; }
.ph--16x9 { aspect-ratio: 16/9; }
.ph--4x3  { aspect-ratio: 4/3; }
.ph--3x2  { aspect-ratio: 3/2; }
.ph--1x1  { aspect-ratio: 1/1; }
.ph--tall { aspect-ratio: 3/4; }

/* Real imagery dropped into a .ph container, fills it, never distorts.
   The placeholder texture stays underneath as a graceful fallback. */
.ph > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border: 0;
}
.ph.has-img { background: var(--cream); }
.ph.has-img .ph__label { display: none; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px; border: 1px solid transparent;
}
.badge--gold { background: var(--white); color: var(--gold); border-color: var(--gold-soft); }
.badge--ok   { background: var(--ok-bg);   color: var(--ok);   }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--bad  { background: var(--bad-bg);  color: var(--bad);  }
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(249,247,242,0.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color var(--fast), box-shadow var(--fast);
}
.nav.is-scrolled { border-color: var(--border); box-shadow: 0 8px 24px -22px rgba(41,50,29,0.4); }
/* Anchor-scroll offset so section headings clear the sticky header. Scroll-only, no visual effect. */
#why, #stories { scroll-margin-top: calc(var(--nav-h) + var(--util-h) + 24px); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: var(--s4); }

.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo__mark { width: 30px; height: 36px; color: var(--olive); flex: 0 0 auto; }
.logo__mark path { stroke: currentColor; }
.logo__mark .accent { color: var(--gold); }
.logo__mark .fill { fill: var(--olive); stroke: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__word { font-family: var(--font-primary); font-size: 22px; font-weight: 600; letter-spacing: 0.14em; color: var(--olive-dark); }
.logo__sub { font-family: var(--font-primary); font-size: 8.5px; font-weight: 600; letter-spacing: 0.42em; color: var(--gold); margin-top: 3px; }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-size: 14px; font-weight: 500; color: var(--text); position: relative; padding: 4px 0;
  transition: color var(--fast);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--fast);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--olive-dark); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }

.nav__cta { display: flex; align-items: center; gap: 18px; }
.nav__login { font-size: 14px; font-weight: 500; }
.nav__toggle { display: none; width: 40px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav__toggle span { width: 22px; height: 1.6px; background: var(--olive-dark); transition: transform var(--fast), opacity var(--fast); }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: calc(var(--nav-h) + var(--util-h)); left: 0; right: 0; bottom: 0;
  height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
  background: var(--ivory); z-index: 190;
  padding: var(--s6) var(--gutter); display: flex; flex-direction: column; gap: var(--s2);
  overflow-y: auto;
  /* Fade in place (no off-screen transform → never adds horizontal scroll) */
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mobile-menu a:not(.btn) {
  font-family: var(--font-primary); font-size: 30px; color: var(--olive-dark);
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.mobile-menu .btn { margin-top: var(--s3); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--olive-dark); color: #C9CBBE; padding: var(--s12) 0 var(--s6); }
.footer h5 { font-family: var(--font-primary); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 var(--s3); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6); padding-bottom: var(--s8); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer .logo__word { color: #F5F2E9; }
.footer .logo__mark { color: #E7E4D8; }
.footer__blurb { margin-top: var(--s3); max-width: 320px; color: #A9AB9D; font-size: 15px; }
.footer li { margin-bottom: 12px; }
.footer li a { font-size: 15px; color: #C9CBBE; transition: color var(--fast); }
.footer li a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s4); gap: var(--s3); flex-wrap: wrap; font-size: 13px; color: #8F9184; }
/* Footer responsiveness, brand full-width, link columns reflow */
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s4); }
  .footer__top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer { padding: var(--s10) 0 var(--s6); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s4); padding-bottom: var(--s6); }
  .footer__top > :first-child { grid-column: 1 / -1; margin-bottom: var(--s1); }
  .footer__blurb { max-width: none; }
}
.footer__social { display: flex; gap: var(--s3); }
.footer__social a:hover { color: #fff; }

/* =========================================================
   HERO + SEARCH (Home / Explore)
   ========================================================= */
.hero { position: relative; }
.hero__media {
  position: relative; min-height: 620px; display: flex; align-items: center;
  border-radius: 0; overflow: hidden; background: var(--cream);
  /* Lifestyle photo behind an ivory wash, keeps dark heading text fully
     legible on the left while the interior shows through on the right. */
  background-image:
    linear-gradient(100deg, rgba(249,247,242,0.97) 0%, rgba(249,247,242,0.90) 38%, rgba(249,247,242,0.55) 72%, rgba(249,247,242,0.32) 100%),
    url("../assets/img/home/hero-desktop-sm.jpg");
  background-size: cover, cover;
  background-position: center, center right;
}
/* --- Homepage hero -------------------------------------------------------
   Source photograph: "Nivara images/gallery/2. Lounge Area/2.JPG".
   Two crops of that ONE original, 16:9 for landscape viewports, 4:5 for
   portrait ones, so the shelving screen and sofa stay in frame on every
   screen instead of the browser slicing a wide file down to a narrow strip.
   The ivory wash is angled on desktop (text sits left) and vertical on
   mobile (text sits over the ceiling). Scoped to the non-compact hero so the
   Explore page hero is unaffected. */
.hero:not(.hero--compact) .hero__media {
  background-image:
    linear-gradient(100deg, rgba(249,247,242,0.97) 0%, rgba(249,247,242,0.90) 38%, rgba(249,247,242,0.55) 72%, rgba(249,247,242,0.32) 100%),
    url("../assets/img/home/hero-desktop-sm.jpg");
  background-position: center, center 42%;
}
@media (min-width: 1401px) {
  .hero:not(.hero--compact) .hero__media {
    background-image:
      linear-gradient(100deg, rgba(249,247,242,0.97) 0%, rgba(249,247,242,0.90) 38%, rgba(249,247,242,0.55) 72%, rgba(249,247,242,0.32) 100%),
      url("../assets/img/home/hero-desktop.jpg");
  }
}
@media (max-width: 700px) {
  .hero:not(.hero--compact) .hero__media {
    min-height: 560px;
    background-image:
      linear-gradient(180deg, rgba(249,247,242,0.97) 0%, rgba(249,247,242,0.93) 34%, rgba(249,247,242,0.62) 62%, rgba(249,247,242,0.34) 100%),
      url("../assets/img/home/hero-mobile.jpg");
    background-position: center, center 46%;
  }
}
.hero__inner { padding: var(--s12) 0; max-width: 760px; }
.hero h1 { margin-bottom: var(--s3); }
.hero__sub { font-size: 1.18rem; color: var(--muted); max-width: 560px; margin-bottom: var(--s6); }
.hero__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.hero__badge {
  position: absolute; right: var(--gutter); bottom: var(--s6);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(60,69,42,0.4);
}
.hero--compact .hero__media { min-height: 380px; }

/* Search module */
.search {
  position: relative; z-index: 20; margin-top: -46px;
}
.search__card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 14px;
  display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; align-items: stretch;
}
.field {
  display: flex; flex-direction: column; gap: 5px; padding: 10px 16px; position: relative;
  border-radius: var(--r-sm); transition: background var(--fast);
}
.field + .field { border-left: 1px solid var(--border); }
.field label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field select, .field input {
  border: none; background: transparent; font-size: 15px; font-weight: 500; color: var(--text);
  padding: 2px 0; width: 100%; appearance: none; cursor: pointer;
}
.field input { cursor: text; }
.field select:focus, .field input:focus { outline: none; }
.field .chev { position: absolute; right: 14px; bottom: 16px; color: var(--olive); pointer-events: none; }
.search__submit { align-self: stretch; }

/* Trust strip */
/* Breathing space between the search/filter card and the stats (uses spacing tokens):
   desktop 48px · tablet 32px · mobile 24px, overrides in the media queries below. */
.trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--ivory); margin-top: var(--s6); }
.trust__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--s6) 0; flex-wrap: wrap; gap: var(--s4); }
.trust__stat { text-align: center; flex: 1; min-width: 120px; }
.trust__num { font-family: var(--font-primary); font-size: 2.6rem; color: var(--olive-dark); line-height: 1; }
.trust__num span { color: var(--gold); font-size: 1.6rem; }
.trust__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.trust__divider { width: 1px; height: 44px; background: var(--border); }

/* =========================================================
   PROPERTY / ROOM CARDS + GRID
   ========================================================= */
.grid { display: grid; gap: var(--s4); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
a.card, .card--link { cursor: pointer; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.card__media { position: relative; }
.card__media .ph { border: none; border-radius: 0; }
.card__media .badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.card__body { padding: var(--s3); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.card__loc svg { color: var(--gold); }
.card__name { font-size: 1.5rem; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 12px; color: var(--muted); background: var(--cream);
  border: 1px solid var(--border); padding: 3px 10px; border-radius: 100px;
}
.card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--border); }
.price b { font-family: var(--font-primary); font-size: 1.5rem; color: var(--olive-dark); font-weight: 600; display: block; line-height: 1; }
.price small { font-size: 12px; color: var(--muted); }
.price .from { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 2px; }

/* =========================================================
   EXPLORE, filters + results
   ========================================================= */
.explore { display: grid; grid-template-columns: 280px 1fr; gap: var(--s6); align-items: start; }
.filters {
  position: sticky; top: calc(var(--nav-h) + var(--util-h) + 20px);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3);
}
.filters__group { padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.filters__group:last-child { border-bottom: none; }
.filters__group h4 { font-family: var(--font-primary); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check__box { width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 4px; flex: 0 0 auto; display: grid; place-items: center; transition: background var(--fast), border-color var(--fast); }
.check__box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity var(--fast); }
.check input:checked + .check__box { background: var(--olive); border-color: var(--olive); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--gold); outline-offset: 2px; }
.range-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.range-row input[type="range"] { flex: 1; accent-color: var(--olive); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13px; padding: 7px 14px; border-radius: 100px; border: 1px solid var(--border);
  background: var(--white); color: var(--text); transition: all var(--fast);
}
.chip:hover { border-color: var(--gold-soft); }
.chip.is-active { background: var(--olive); color: #fff; border-color: var(--olive); }
.filters__clear { margin-top: var(--s2); width: 100%; font-size: 13px; color: var(--gold); font-weight: 600; padding: 8px; }

.results__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); gap: var(--s3); flex-wrap: wrap; }
.results__count { font-size: 14px; color: var(--muted); }
.results__count b { color: var(--olive-dark); font-family: var(--font-primary); font-size: 1.2rem; }
.select-sort { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 34px 10px 14px; background: var(--white); font-size: 14px; font-weight: 500; appearance: none; position: relative; }
.sort-wrap { position: relative; }
.sort-wrap .chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--olive); }

.filters-mobile-toggle { display: none; }

/* =========================================================
   PROPERTY DETAIL
   ========================================================= */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: var(--s3) 0; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--olive); }
.breadcrumb span { color: var(--border); }
.breadcrumb .current { color: var(--olive-dark); font-weight: 500; }

.gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 480px; margin-bottom: var(--s8); }
.gallery > *:first-child { grid-row: 1 / 3; }
.gallery .ph { border-radius: var(--r); height: 100%; }

/* Property-detail single hero image */
.pd-hero-wrap { margin-bottom: var(--s8); }
.pd-hero { aspect-ratio: 16 / 7; border-radius: var(--r); overflow: hidden; background: var(--cream); }
.pd-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.pd-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s8); align-items: start; }
.pd-main > section { padding: var(--s6) 0; border-top: 1px solid var(--border); }
.pd-main > section:first-child { border-top: none; padding-top: 0; }
.pd-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; }
.pd-title-row h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.pd-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--olive-dark); font-weight: 600; }
.pd-rating .stars { color: var(--gold); }

.amenities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.amenity { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.amenity svg { width: 22px; height: 22px; color: var(--olive); flex: 0 0 auto; }
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.feature-list svg { color: var(--gold); width: 18px; height: 18px; flex: 0 0 auto; margin-top: 4px; }

/* Sticky booking box */
.book-box {
  position: sticky; top: calc(var(--nav-h) + var(--util-h) + 20px);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: var(--s4);
}
.book-box__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: var(--s3); }
.book-box__price b { font-family: var(--font-primary); font-size: 2.2rem; color: var(--olive-dark); }
.book-box__price small { color: var(--muted); font-size: 14px; }
.book-box__rooms { margin: var(--s3) 0; }
.book-box__row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.book-box__row:last-child { border-bottom: none; }
.book-box .btn { margin-top: var(--s2); }

/* Nearby list */
.nearby { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.nearby li { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--cream); border-radius: var(--r-sm); font-size: 14px; }
.nearby li span { color: var(--muted); }

/* FAQ */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) 0; font-family: var(--font-primary); font-size: 1.3rem; color: var(--olive-dark); }
.faq__q .plus { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.faq__q .plus::before, .faq__q .plus::after { content: ""; position: absolute; background: var(--gold); transition: transform var(--fast); }
.faq__q .plus::before { top: 8px; left: 0; width: 18px; height: 1.5px; }
.faq__q .plus::after { left: 8px; top: 0; width: 1.5px; height: 18px; }
.faq__item.is-open .plus::after { transform: scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--slow); color: var(--muted); }
.faq__a-inner { padding-bottom: var(--s3); max-width: 720px; }

/* =========================================================
   SELECT ROOM
   ========================================================= */
/* Desktop: image | content | price, three separate columns, no overlap.
   minmax(0,1fr) + min-width:0 stop long text/media from escaping their column;
   aspect-ratio:auto lets the image fill its stretched cell instead of deriving
   its width from the row height (the cause of the image overlapping the text). */
.room-card {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 200px;
  gap: var(--s4);
  align-items: stretch;
  padding: var(--s3);
}
.room-card > .ph {
  border-radius: var(--r-sm);
  aspect-ratio: auto;
  width: 100%; height: 100%;
  min-height: 230px;
  overflow: hidden;
}
.room-card > .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s var(--ease); }
.room-card__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 2px 0; }
.room-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.room-spec { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); min-width: 0; }
.room-spec svg { width: 18px; height: 18px; color: var(--olive); flex: 0 0 auto; }
.room-spec b { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; display: block; }
.room-card__side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; text-align: right; gap: var(--s3); min-width: 0; border-left: 1px solid var(--border); padding-left: var(--s4); }
.room-card__side .btn { white-space: nowrap; }
.room-card.is-selected { border-color: var(--olive); box-shadow: 0 0 0 1px var(--olive); }
/* Subtle premium hover, pointer devices only (no forced hover on touch).
   Uses .room-card.reveal specificity so the lift beats the .reveal.is-in
   transform:none settled state, and owns its own 0.3s transition timing. */
.room-card.reveal { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .room-card.reveal:hover { transform: translateY(-4px); }
  .room-card.reveal:hover:not(.is-selected) { box-shadow: var(--shadow); border-color: var(--gold-soft); }
  .room-card:hover > .ph img { transform: scale(1.02); }
}

/* Tablet (≤1024): image left + content right on top, price/CTA as a full-width bar below */
@media (max-width: 1024px) {
  .room-card {
    grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
    grid-template-areas: "img body" "side side";
    gap: var(--s3) var(--s4);
  }
  .room-card > .ph { grid-area: img; }
  .room-card__body { grid-area: body; }
  .room-card__side {
    grid-area: side; flex-direction: row; align-items: center; justify-content: space-between;
    text-align: left; border-left: none; border-top: 1px solid var(--border);
    padding-left: 0; padding-top: var(--s3); gap: var(--s3);
  }
}

/* Mobile (≤640): clean vertical card, image → info → price → full-width CTA */
@media (max-width: 640px) {
  .room-card {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "body" "side";
    gap: var(--s3);
    padding: var(--s2);
  }
  .room-card > .ph { grid-area: img; aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .room-card__body { grid-area: body; }
  .room-card__side {
    grid-area: side; flex-direction: column; align-items: stretch; text-align: left;
    border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--s3); gap: var(--s2);
  }
  .room-card__side .btn { width: 100%; }
}

/* =========================================================
   BOOKING PROGRESS
   ========================================================= */
.steps { display: flex; align-items: center; gap: 0; margin: 0 auto var(--s8); max-width: 820px; }
.step { display: flex; align-items: center; gap: 10px; flex: 1; }
.step__num { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--white); flex: 0 0 auto; transition: all var(--fast); }
.step__label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
.step__bar { flex: 1; height: 1.5px; background: var(--border); margin: 0 12px; }
.step.is-active .step__num { background: var(--olive); border-color: var(--olive); color: #fff; }
.step.is-active .step__label { color: var(--olive-dark); }
.step.is-done .step__num { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.step.is-done .step__bar, .step.is-active ~ .step .step__bar { }
.step.is-done + .step .step__bar, .step.is-done .step__bar { background: var(--ok); }

/* =========================================================
   AVAILABILITY
   ========================================================= */
.booking-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s8); align-items: start; }
.panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); }
.avail-controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s4); }
.control label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.control input, .control select {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px;
  background: var(--white); font-size: 15px; transition: border-color var(--fast); appearance: none;
}
.control input:focus, .control select:focus { outline: none; border-color: var(--olive); }
.control__wrap { position: relative; }
.control__wrap .chev { position: absolute; right: 16px; top: 44px; pointer-events: none; color: var(--olive); }

/* Room Type, custom accessible dropdown (matches the Nivara input styling).
   Scoped to .rt-select so no other control is affected. */
.rt-select { position: relative; }
.rt-select__trigger {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white);
  padding: 14px 16px; font-size: 15px; font-family: var(--font-primary); color: var(--text);
  text-align: left; cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.rt-select__trigger:hover { border-color: var(--gold-soft); }
.rt-select__trigger:focus-visible { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(60,69,42,0.08); }
.rt-select.is-open .rt-select__trigger { border-color: var(--olive); box-shadow: 0 0 0 3px rgba(60,69,42,0.08); }
.rt-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-select__arrow { width: 12px; height: 8px; flex: 0 0 auto; color: var(--olive); transition: transform var(--fast); }
.rt-select.is-open .rt-select__arrow { transform: rotate(180deg); }

.rt-select__panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  margin: 0; padding: 6px; list-style: none;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
}
.rt-select.is-open .rt-select__panel { opacity: 1; visibility: visible; transform: none; }
.rt-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 10px 14px; border-radius: var(--r-sm);
  font-size: 15px; color: var(--text); cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.rt-option:hover, .rt-option.is-active { background: var(--cream); }
.rt-option.is-selected { background: var(--ok-bg); color: var(--olive-dark); font-weight: 600; }
.rt-option.is-selected.is-active, .rt-option.is-selected:hover { background: #E6EEDC; }
.rt-option__tick { width: 18px; height: 18px; flex: 0 0 auto; color: var(--olive); }
.rt-option.is-disabled { color: var(--muted); opacity: 0.55; cursor: not-allowed; }
.rt-option.is-disabled:hover { background: transparent; }

.duration-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { padding: 12px 20px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); font-size: 14px; font-weight: 500; transition: all var(--fast); }
.pill:hover { border-color: var(--gold-soft); }
.pill.is-active { background: var(--olive); color: #fff; border-color: var(--olive); }

.avail-status { display: flex; align-items: flex-start; gap: 14px; padding: var(--s4); border-radius: var(--r); margin-top: var(--s4); border: 1px solid transparent; }
.avail-status svg { width: 26px; height: 26px; flex: 0 0 auto; margin-top: 2px; }
.avail-status h4 { font-family: var(--font-primary); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 4px; }
.avail-status p { font-size: 14px; margin: 0; }
.avail-status--ok   { background: var(--ok-bg);   border-color: rgba(75,106,63,0.25);  color: var(--ok); }
.avail-status--warn { background: var(--warn-bg); border-color: rgba(154,107,36,0.25);  color: var(--warn); }
.avail-status--bad  { background: var(--bad-bg);  border-color: rgba(155,74,59,0.25);   color: var(--bad); }
.avail-status .body { color: var(--text); }

.alt-dates { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.alt-date { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); font-size: 13px; }
.alt-date:hover { border-color: var(--olive); }

/* Booking summary card */
.summary { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; position: sticky; top: calc(var(--nav-h) + var(--util-h) + 20px); }
.summary__head { padding: var(--s3) var(--s4); background: var(--olive-dark); color: #fff; display: flex; align-items: center; gap: var(--s2); }
.summary__head .ph { width: 56px; height: 56px; border-radius: var(--r-sm); border: none; flex: 0 0 auto; }
.summary__head h4 { color: #fff; font-size: 1.2rem; }
.summary__head small { color: #B9BBAE; font-size: 12px; }
.summary__body { padding: var(--s4); }
.summary__row { display: flex; justify-content: space-between; gap: var(--s2); padding: 11px 0; font-size: 14px; border-bottom: 1px solid var(--border); }
.summary__row:last-of-type { border-bottom: none; }
.summary__row span:first-child { color: var(--muted); }
.summary__row span:last-child { font-weight: 500; text-align: right; color: var(--text); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s3) 0 0; margin-top: var(--s2); border-top: 2px solid var(--olive); }
.summary__total b { font-family: var(--font-primary); font-size: 1.7rem; color: var(--olive-dark); }
.summary__total small { font-size: 12px; color: var(--muted); }
.summary__note { font-size: 12px; color: var(--muted); margin-top: var(--s2); line-height: 1.5; }

/* Mobile summary collapse */
.summary-toggle { display: none; }

/* =========================================================
   FORMS (Your Details)
   ========================================================= */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.col-2 { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--text); }
.form-field label .req { color: var(--bad); }
.form-field input, .form-field select {
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px;
  background: var(--white); font-size: 15px; transition: border-color var(--fast), box-shadow var(--fast); width: 100%; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(60,69,42,0.08); }
.form-field.has-error input, .form-field.has-error select { border-color: var(--bad); background: var(--bad-bg); }
.form-field__error { display: none; align-items: center; gap: 6px; font-size: 13px; color: var(--bad); }
.form-field__error svg { width: 14px; height: 14px; flex: 0 0 auto; }
.form-field.has-error .form-field__error { display: flex; }
.form-hint { font-size: 13px; color: var(--muted); }
.form-section-title { font-family: var(--font-primary); font-size: 1.5rem; color: var(--olive-dark); margin-bottom: var(--s3); }

/* =========================================================
   PAYMENT
   ========================================================= */
.pay-methods { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--s4); }
.pay-method { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; transition: border-color var(--fast), background var(--fast); }
.pay-method:hover { border-color: var(--gold-soft); }
.pay-method.is-active { border-color: var(--olive); background: var(--cream); }
.pay-method__radio { width: 20px; height: 20px; border: 1.5px solid var(--border); border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.pay-method.is-active .pay-method__radio { border-color: var(--olive); }
.pay-method.is-active .pay-method__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--olive); }
.pay-method__label { font-weight: 600; font-size: 15px; }
.pay-method__desc { font-size: 13px; color: var(--muted); }
.pay-method__icon { margin-left: auto; color: var(--muted); font-size: 12px; letter-spacing: 0.08em; }
.pay-body { padding-top: var(--s2); }
.secure-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: var(--s3); justify-content: center; }
.secure-note svg { width: 15px; height: 15px; color: var(--ok); }
.sim-banner { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--warn); background: var(--warn-bg); border: 1px solid rgba(154,107,36,0.25); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: var(--s4); }
.sim-banner svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

/* =========================================================
   CONFIRMATION
   ========================================================= */
.confirm { text-align: center; max-width: 640px; margin: 0 auto; padding: var(--s10) 0; }
.confirm__check { width: 88px; height: 88px; border-radius: 50%; background: var(--ok-bg); display: grid; place-items: center; margin: 0 auto var(--s4); animation: pop 0.5s var(--ease) both; }
.confirm__check svg { width: 44px; height: 44px; color: var(--ok); }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.confirm h1 { margin-bottom: var(--s2); }
.confirm__id { display: inline-flex; align-items: center; gap: 10px; background: var(--cream); border: 1px dashed var(--gold-soft); border-radius: var(--r-sm); padding: 10px 20px; margin: var(--s4) 0; font-family: var(--font-primary); font-size: 15px; }
.confirm__id b { font-weight: 700; letter-spacing: 0.08em; color: var(--olive-dark); }
.confirm__card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); text-align: left; margin: var(--s6) 0; overflow: hidden; }
.confirm__card-head { display: flex; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--border); align-items: center; }
.confirm__card-head .ph { width: 84px; height: 84px; border-radius: var(--r-sm); flex: 0 0 auto; }
.confirm__grid { display: grid; grid-template-columns: repeat(2,1fr); }
.confirm__grid > div { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.confirm__grid > div:nth-child(2n) { border-right: none; }
.confirm__grid small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; }
.confirm__grid b { font-weight: 600; color: var(--olive-dark); font-size: 15px; }
.confirm__actions { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; margin-top: var(--s4); }

/* =========================================================
   FINDER (guided discovery)
   ========================================================= */
.finder { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s8); box-shadow: var(--shadow); }
.finder__q { margin-bottom: var(--s6); }
.finder__q:last-of-type { margin-bottom: var(--s4); }
.finder__q > label { display: block; font-family: var(--font-primary); font-size: 1.6rem; color: var(--olive-dark); margin-bottom: var(--s3); }
.finder__opts { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   LIFESTYLE / INCLUDED / COMPARE / QUOTES / MOSAIC
   ========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s10); align-items: center; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s6); }
.pillar { display: flex; gap: 14px; }
.pillar svg { width: 34px; height: 34px; color: var(--olive); flex: 0 0 auto; }
.pillar h4 { margin-bottom: 4px; }
.pillar p { font-size: 14px; color: var(--muted); }

.included-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s4); }
.include { padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r); background: var(--white); transition: transform var(--fast), box-shadow var(--fast); }
.include:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.include svg { width: 34px; height: 34px; color: var(--olive); margin-bottom: var(--s2); }
.include h4 { margin-bottom: 6px; }
.include p { font-size: 14px; color: var(--muted); margin: 0; }

.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; }
.mosaic .ph { border-radius: var(--r); }

/* Community collage, contained editorial panel (home "Life at Nivara" only).
   Scoped to .mosaic-panel so the shared .mosaic (property detail) is untouched. */
.mosaic-panel {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s3);
  box-shadow: var(--shadow);
}
.mosaic-panel .mosaic { gap: var(--s2); }
/* Let grid tracks shrink freely so a spanning tile never blows out the width */
.mosaic-panel .mtile { min-width: 0; }
/* Tile media fills the grid cell exactly (grid sizes it; aspect-ratio stays inert) */
.mosaic-panel .mtile .ph { width: 100%; height: 100%; }
.mtile--tall { grid-row: span 2; }
.mtile--wide { grid-column: span 2; }
.mtile { position: relative; }
.mtile .ph__label { align-items: flex-start; justify-content: flex-end; }
.mtile .ph, .mtile > .ph { height: 100%; }
/* Caption chip overlaid on community / common-space imagery */
.mtile__cap {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: rgba(41,50,29,0.55); backdrop-filter: blur(3px);
  padding: 5px 12px; border-radius: 100px; pointer-events: none;
}

/* Common spaces gallery (Property Detail, shared across all properties).
   Uniform cards on one responsive grid, 3 cols desktop → 2 tablet → 1 mobile,
   equal gaps, consistent aspect ratio. Scoped so the shared .mosaic is untouched. */
.spaces-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.spaces-grid .mtile { min-width: 0; }
.spaces-grid .mtile .ph { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r); }
@media (max-width: 960px) {
  .spaces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr; }
  .spaces-grid .mtile .ph { aspect-ratio: 16 / 10; }
}

.compare { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.compare__head { padding: var(--s3) var(--s4); }
.compare__head small { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.compare__head h3 { font-size: 1.3rem; margin-top: 4px; }
.compare__head.niv { background: var(--olive-dark); }
.compare__head.niv small { color: var(--gold-soft); }
.compare__head.niv h3 { color: #fff; }
.compare__cell { padding: 16px var(--s4); border-top: 1px solid var(--border); font-size: 14px; display: flex; align-items: center; gap: 10px; }
.compare__label { font-weight: 600; color: var(--olive-dark); }
.compare__cell.niv-col { background: rgba(60,69,42,0.03); }
.compare__cell svg { width: 18px; height: 18px; flex: 0 0 auto; }
.compare__cell .tick { color: var(--ok); }
.compare__cell .cross { color: var(--bad); }
/* Icon + text: fixed icon column, flexible text column → icons form a
   perfectly straight vertical line and text starts at a consistent position,
   independent of text length. */
.compare__val { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.compare__val svg { justify-self: start; }
.compare__val .compare__txt { min-width: 0; overflow-wrap: anywhere; }

.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s4) var(--s3); }
/* margin:0 clears the default <figure> UA margin (40px each side) that was
   inflating the visible gap between cards, spacing is now driven by the grid gap. */
.quote { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4); margin: 0; display: flex; flex-direction: column; height: 100%; }
.quote__mark { font-family: var(--font-primary); font-size: 4rem; line-height: 0.6; color: var(--gold-soft); }
.quote__text { font-family: var(--font-primary); font-size: 1.35rem; line-height: 1.4; color: var(--olive-dark); margin: var(--s2) 0 var(--s3); }
/* margin-top:auto anchors the reviewer block to the bottom of the card regardless
   of quote length, so all three profile rows align on one baseline. */
.quote__person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote__avatar { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; border: 0; }
.quote__name { font-weight: 600; font-size: 14px; }
/* Keep the property·duration line on one row so avatars align across cards
   (the text-wrapper can shrink, so a long value ellipsizes rather than wrapping). */
.quote__person > div { min-width: 0; }
.quote__meta { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================
   TOAST / MODAL / EMPTY / LOADING
   ========================================================= */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--olive-dark); color: #fff; padding: 14px 22px; border-radius: 100px; box-shadow: var(--shadow-lg); font-size: 14px; animation: toastIn 0.4s var(--ease) both; }
.toast svg { width: 18px; height: 18px; color: var(--gold-soft); }
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast.is-out { animation: toastOut 0.35s var(--ease) both; }
@keyframes toastOut { to { transform: translateY(20px); opacity: 0; } }

.modal-scrim { position: fixed; inset: 0; background: rgba(41,50,29,0.5); backdrop-filter: blur(3px); z-index: 300; display: grid; place-items: center; padding: var(--s3); opacity: 0; transition: opacity var(--fast); }
.modal-scrim.is-open { opacity: 1; }
.modal { background: var(--white); border-radius: var(--r-lg); max-width: 440px; width: 100%; padding: var(--s6); transform: translateY(16px); transition: transform var(--slow); }
.modal-scrim.is-open .modal { transform: translateY(0); }
.modal h3 { margin-bottom: var(--s2); }
.modal__close { position: absolute; }

.empty { text-align: center; padding: var(--s10) var(--s3); }
.empty svg { width: 56px; height: 56px; color: var(--gold-soft); margin-bottom: var(--s3); }
.empty h3 { margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 400px; margin: 0 auto var(--s4); }

.skeleton { background: linear-gradient(100deg, var(--cream) 30%, var(--ivory) 50%, var(--cream) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r); }
@keyframes shimmer { to { background-position: -200% 0; } }
.spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   VIEW TRANSITION
   ========================================================= */
#app { animation: viewIn 0.5s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.page-head { padding: var(--s10) 0 var(--s6); }
.page-head h1 { margin-bottom: var(--s2); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  :root { --gutter: 28px; }
  .grid--3, .included-grid, .amenities-grid, .quotes { grid-template-columns: repeat(2, 1fr); }
  .pd-layout, .booking-layout { grid-template-columns: 1fr; }
  .book-box, .summary { position: static; }
  .explore { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filters-mobile-toggle { display: inline-flex; }
  .filters.is-collapsed { display: none; }
  .split { grid-template-columns: 1fr; gap: var(--s6); }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  /* Community collage on tablet: Community Events full-width hero + 2×2 below */
  .mosaic-panel .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
  .mosaic-panel .mtile--tall { grid-column: 1 / -1; grid-row: auto; }
  .mosaic-panel .mtile--wide { grid-column: auto; grid-row: auto; }
  .gallery { grid-template-columns: 1fr 1fr; height: 380px; }
}

/* Tablet + mobile navigation → hamburger (covers 912 / 834 / 768 and below).
   Header shows logo + hamburger only; nav links, login and the inline CTA
   move into the slide-in menu. */
@media (max-width: 960px) {
  .nav__links, .nav__login, .nav__cta .btn { display: none; }
  .nav__toggle { display: flex; }
  .nav__inner { gap: var(--s2); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  :root { --gutter: 20px; }
  .search__card { grid-template-columns: 1fr; }
  .field + .field { border-left: none; border-top: 1px solid var(--border); }
  .grid--3, .grid--2, .included-grid, .amenities-grid, .quotes, .form-grid,
  .avail-controls, .pillars, .nearby, .feature-list, .confirm__grid { grid-template-columns: 1fr; }
  /* Comparison table on mobile: single column stacked as
     [feature name] → [old way] → [nivara] per feature. Icons keep their
     fixed-column grid so X's and checks still form straight vertical lines. */
  .compare { grid-template-columns: 1fr; }
  .compare__head { display: none; }
  .compare__cell { border-top: none; padding: 5px var(--s3); }
  .compare__label { border-top: 1px solid var(--border); padding-top: var(--s3); padding-bottom: 4px; }
  .compare__label:first-of-type { border-top: none; }
  .compare__val.niv-col { padding-bottom: var(--s3); }
  /* .room-card responsiveness is handled by its own ≤1024 / ≤640 queries above */
  /* Swipeable gallery, main image stays prominent, rest scroll-snap horizontally */
  .gallery {
    grid-template-columns: none; grid-template-rows: 1fr;
    grid-auto-flow: column; grid-auto-columns: 84%;
    height: 240px; gap: 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    margin-left: 0; margin-right: 0;
  }
  .gallery > * { grid-row: auto !important; scroll-snap-align: center; display: block !important; }
  .gallery > *:first-child { grid-column: auto; }
  .pd-hero { aspect-ratio: 4 / 3; }
  .pd-hero-wrap { margin-bottom: var(--s6); }
  .steps { overflow-x: auto; gap: 4px; padding-bottom: 8px; }
  .step__label { display: none; }
  .step.is-active .step__label { display: block; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .mtile--wide { grid-column: span 2; }
  /* Community collage on mobile: clean single-column stack, tighter panel padding */
  .mosaic-panel { padding: var(--s2); }
  .mosaic-panel .mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 200px; }
  .mosaic-panel .mtile--tall, .mosaic-panel .mtile--wide { grid-column: auto; grid-row: auto; }
  .section { padding: var(--s10) 0; }
  .finder { padding: var(--s4); }

  /* Collapsible mobile summary */
  .summary.is-collapsible .summary__body { display: none; }
  .summary.is-collapsible.is-open .summary__body { display: block; }
  .summary-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--s3) var(--s4); background: var(--olive-dark); color: #fff; font-size: 14px; font-weight: 600; }
  .summary-toggle .chev { transition: transform var(--fast); }
  .summary.is-open .summary-toggle .chev { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   AUTH MODAL (Login / Sign-up), self-contained, scoped to .auth-*
   ========================================================= */
.auth-overlay {
  position: fixed; inset: 0; z-index: 600;
  display: grid; place-items: center; padding: var(--s3);
  background: rgba(41, 50, 29, 0.45); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity var(--fast), visibility var(--fast);
}
.auth-overlay.is-open { opacity: 1; visibility: visible; }
.auth-dialog {
  position: relative; width: 100%; max-width: 440px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100dvh - 2 * var(--s3));
  transform: translateY(12px) scale(0.985); transition: transform var(--slow);
}
.auth-overlay.is-open .auth-dialog { transform: none; }
.auth-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  color: var(--muted); background: transparent; transition: background var(--fast), color var(--fast);
}
.auth-close:hover { background: var(--cream); color: var(--olive-dark); }
.auth-close svg { width: 18px; height: 18px; }
.auth-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s8) var(--s6) var(--s6); }

.auth-screen { display: none; }
.auth-screen.is-active { display: block; }

.auth-logo { display: flex; justify-content: center; margin-bottom: var(--s3); }
.auth-logo .logo__mark { width: 34px; height: 40px; color: var(--olive); }
.auth-head { text-align: center; margin-bottom: var(--s6); }
.auth-title { font-size: 1.6rem; line-height: 1.2; color: var(--olive-dark); margin-bottom: 6px; }
.auth-sub { font-size: 14px; color: var(--muted); line-height: 1.5; }
.auth-sub strong { color: var(--olive-dark); font-weight: 600; }

.auth-field { margin-bottom: var(--s3); }
.auth-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.auth-input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 15px 16px; font-size: 15px; font-family: var(--font-primary); color: var(--text); background: var(--white);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.auth-input:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(60,69,42,0.08); }
.auth-field.has-error .auth-input { border-color: var(--bad); background: var(--bad-bg); }
.auth-error { display: none; align-items: center; gap: 6px; font-size: 13px; color: var(--bad); margin-top: 8px; }
.auth-error svg { width: 14px; height: 14px; flex: 0 0 auto; }
.auth-field.has-error .auth-error, .auth-error.is-shown { display: flex; }
.auth-body .btn--block { margin-top: var(--s2); }

.auth-divider { display: flex; align-items: center; gap: 14px; margin: var(--s4) 0; color: var(--muted); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-social__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white);
  padding: 13px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
}
.auth-social__btn:hover { border-color: var(--gold-soft); background: var(--cream); }
.auth-social__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.auth-social__btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.auth-social__btn[disabled] { opacity: 0.6; pointer-events: none; }
.auth-social__btn .spinner { border-color: rgba(60,69,42,0.25); border-top-color: var(--olive); }

.auth-terms { text-align: center; font-size: 12px; color: var(--muted); margin-top: var(--s4); line-height: 1.5; }
.auth-terms a { color: var(--olive); text-decoration: underline; text-underline-offset: 2px; }
.auth-demo { text-align: center; font-size: 11px; color: var(--muted); margin-top: 10px; letter-spacing: 0.02em; }

.auth-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--olive); margin-bottom: var(--s3); background: transparent; }
.auth-back svg { width: 15px; height: 15px; }

.auth-otp { display: flex; justify-content: center; gap: 8px; margin: var(--s4) 0 var(--s2); }
.auth-otp input {
  width: 44px; height: 52px; text-align: center; font-size: 20px; font-weight: 600;
  border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--olive-dark);
  background: var(--white); font-family: var(--font-primary); -moz-appearance: textfield;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.auth-otp input::-webkit-outer-spin-button, .auth-otp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.auth-otp input:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(60,69,42,0.08); }
.auth-otp.has-error input { border-color: var(--bad); }
.auth-resend { text-align: center; font-size: 13px; color: var(--muted); margin: 0 0 var(--s4); }
.auth-resend button { color: var(--olive); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; background: transparent; }
.auth-resend button[disabled] { color: var(--muted); text-decoration: none; pointer-events: none; }

.auth-success { text-align: center; padding: var(--s3) 0; }
.auth-success__check { width: 76px; height: 76px; border-radius: 50%; background: var(--ok-bg); display: grid; place-items: center; margin: 0 auto var(--s4); animation: pop 0.5s var(--ease) both; }
.auth-success__check svg { width: 38px; height: 38px; color: var(--ok); }

/* Logged-in nav account control (reuses .nav__login styling) */
.nav__login { cursor: pointer; }
.nav__login.is-authed { color: var(--olive-dark); font-weight: 600; }

/* Tablet, proportionate sizing */
@media (max-width: 834px) {
  .auth-dialog { max-width: 420px; }
  .auth-body { padding: var(--s8) var(--s6) var(--s6); }
}
/* Mobile, near-full width with comfortable margins, internal scroll.
   Uniform internal padding on all four sides; responsive horizontal padding
   so no element ever touches the modal edges. */
@media (max-width: 480px) {
  .auth-overlay { padding: var(--s2); }
  .auth-dialog { max-width: none; max-height: calc(100dvh - 2 * var(--s2)); }
  .auth-body { padding: var(--s6) clamp(20px, 6vw, 28px) var(--s4); }
  .auth-title { font-size: 1.45rem; }
  .auth-otp { gap: 6px; }
  .auth-otp input { width: 40px; height: 48px; font-size: 18px; }
}
@media (max-width: 360px) {
  .auth-otp input { width: 38px; height: 46px; }
}

/* =========================================================
   CLIENT FEATURE INTEGRATION (2026)
   Utility contact bar · mobile contact · social rail ·
   enquiry panel · events · new amenity cards.
   Built entirely on existing tokens, no new colour system.
   ========================================================= */

/* ---------- Slim utility contact strip (above main nav) ---------- */
.util-bar { background: var(--olive-dark); color: #D3D5C8; }
.util-bar__inner { display: flex; align-items: center; justify-content: flex-start; gap: 14px; min-height: 36px; }
.util-link { display: inline-flex; align-items: center; gap: 7px; color: #D3D5C8; font-size: 12.5px; letter-spacing: 0.01em; text-decoration: none; transition: color var(--fast); }
.util-link:hover, .util-link:focus-visible { color: var(--gold-soft); }
.util-link__label { color: #9EA093; }
.util-ic { width: 15px; height: 15px; flex: 0 0 auto; }
.util-ic--wa { width: 16px; height: 16px; }
.util-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.16); flex: 0 0 auto; }
.util-enquire { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: #EDEAE0; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; padding: 4px 2px; transition: color var(--fast); }
.util-enquire:hover, .util-enquire:focus-visible { color: var(--gold-soft); }
.util-enquire .arrow { transition: transform var(--fast); }
.util-enquire:hover .arrow { transform: translateX(3px); }
.util-link:focus-visible, .util-enquire:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 3px; }

/* ---------- Mobile contact cluster (inside mobile menu) ---------- */
.m-contact { display: flex; gap: 10px; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.m-contact__btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 60px; padding: 12px 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--white); color: var(--olive); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; transition: border-color var(--fast), background var(--fast); }
.m-contact__btn svg { width: 22px; height: 22px; }
.m-contact__btn:hover { border-color: var(--gold-soft); }
.m-contact__btn--enquire { background: var(--olive); color: #fff; border-color: var(--olive); }
.m-contact__btn--enquire:hover { background: var(--olive-dark); border-color: var(--olive-dark); }

/* ---------- Floating social rail (large desktop only) ---------- */
.social-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 150; display: flex; flex-direction: column; gap: 10px; }
.social-rail__link { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 1px solid var(--border); color: var(--olive); box-shadow: var(--shadow); transition: color var(--fast), border-color var(--fast), transform var(--fast); }
.social-rail__link svg { width: 19px; height: 19px; }
.social-rail__link:hover { color: var(--gold); border-color: var(--gold-soft); transform: translateY(-2px); }
.social-rail__link:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.social-rail__tip { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--olive-dark); color: #F5F2E9; font-size: 12px; padding: 5px 9px; border-radius: var(--r-sm); opacity: 0; pointer-events: none; transition: opacity var(--fast); }
.social-rail__link:hover .social-rail__tip, .social-rail__link:focus-visible .social-rail__tip { opacity: 1; }
.social-rail__link.is-hidden { display: none; }
/* Social rail stays visible on every screen size.
   Desktop / laptop / tablet: vertical, right-centered (base rule above).
   Mobile (≤720px): floats bottom-right, clear of the bottom browser controls
   via the safe-area inset; sits below the nav/menu and all overlays (z-index 150). */
@media (max-width: 720px) {
  .social-rail { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); transform: none; right: 14px; gap: 10px; }
  .social-rail__link { width: 44px; height: 44px; }
  .social-rail__link svg { width: 20px; height: 20px; }
}
/* Search card → stats spacing scales down on smaller screens (existing tokens). */
@media (max-width: 1024px) { .trust { margin-top: var(--s4); } }
@media (max-width: 720px)  { .trust { margin-top: var(--s3); } }

/* ---------- Enquiry slide-in panel ---------- */
.enq-overlay { position: fixed; inset: 0; z-index: 320; background: rgba(41,50,29,0.5); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--fast), visibility var(--fast); }
.enq-overlay.is-open { opacity: 1; visibility: visible; }
.enq-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 100%); background: var(--ivory); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--fast); display: flex; flex-direction: column; }
.enq-overlay.is-open .enq-panel { transform: translateX(0); }
.enq-head { padding: var(--s6) var(--s6) var(--s3); position: relative; flex: 0 0 auto; }
.enq-head h2 { font-size: 1.6rem; margin-bottom: 8px; }
.enq-head p { font-size: 14px; color: var(--muted); margin: 0; max-width: 32ch; }
.enq-close { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color var(--fast), color var(--fast); }
.enq-close svg { width: 18px; height: 18px; }
.enq-close:hover, .enq-close:focus-visible { border-color: var(--gold-soft); color: var(--gold); }
.enq-body { padding: 0 var(--s6) var(--s6); overflow-y: auto; flex: 1 1 auto; }
.enq-form { display: block; }
.enq-field { margin-bottom: 14px; }
.enq-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.enq-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.enq-label .req { color: var(--gold); }
.enq-input, .enq-select, .enq-textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--white); font-family: inherit; font-size: 15px; color: var(--text); transition: border-color var(--fast), box-shadow var(--fast); }
.enq-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6l5-4.5' stroke='%233C452A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.enq-textarea { min-height: 88px; resize: vertical; }
.enq-input:focus, .enq-select:focus, .enq-textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(179,140,81,0.15); }
.enq-field.has-error .enq-input, .enq-field.has-error .enq-select { border-color: var(--bad); }
.enq-fieldmsg { display: none; font-size: 12.5px; color: var(--bad); margin-top: 5px; }
.enq-field.has-error .enq-fieldmsg { display: block; }
.enq-company { display: none; }
.enq-company.is-shown { display: block; }
.enq-submit { width: 100%; margin-top: 6px; }
.enq-success { display: none; flex-direction: column; align-items: center; text-align: center; padding: var(--s10) var(--s6); }
.enq-panel.is-done .enq-form { display: none; }
.enq-panel.is-done .enq-success { display: flex; }
.enq-success__check { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin-bottom: var(--s3); }
.enq-success__check svg { width: 30px; height: 30px; }
.enq-success h3 { font-size: 1.5rem; margin-bottom: 8px; }
.enq-success p { color: var(--muted); font-size: 15px; max-width: 34ch; }
/* WhatsApp hand-off: the note under the button and the follow-up actions. */
.enq-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 12px; text-align: center; }
.enq-note a { color: var(--olive-dark); text-decoration: underline; }
.enq-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; margin-top: 24px; }
.enq-actions .btn { width: 100%; justify-content: center; }

/* Search card with two services: Monthly stay (PG) and Short stay. */
.search__card--stay { display: block; padding: 12px 14px 14px; }
.search__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 12px; }
.search__tab { padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); color: var(--olive-dark); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; transition: background var(--fast), color var(--fast), border-color var(--fast); }
.search__tab:hover { border-color: var(--olive); }
.search__tab.is-active { background: var(--olive); border-color: var(--olive); color: #fff; }
.search__row { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; align-items: stretch; }
.search__row--short { grid-template-columns: 1fr 1fr 1fr 1.15fr auto; }
.search__row[hidden] { display: none; }
.field__sub { font-size: 12px; color: var(--muted); min-height: 16px; }
.field--rb { position: relative; }
.rb-trigger { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 2px 24px 0 0; text-align: left; width: 100%; background: none; border: 0; cursor: pointer; }
.rb-trigger__main { font-size: 15px; font-weight: 600; color: var(--text); }
.rb-trigger__sub { font-size: 12px; color: var(--muted); }
.rb-pop { position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; width: 320px; max-width: calc(100vw - 32px); padding: 14px; background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.rb-pop[hidden] { display: none; }
.rb-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 8px; }
.rb-opt.is-on { border-color: var(--olive); background: var(--cream); }
.rb-opt__pick, .field .rb-opt__pick { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; flex: 1 1 auto; min-width: 0; text-transform: none; letter-spacing: normal; font-size: 14px; font-weight: 400; color: var(--text); }
.rb-opt__pick input, .field .rb-opt__pick input[type="radio"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 3px 0 0; padding: 0; appearance: auto; -webkit-appearance: radio; accent-color: var(--olive); cursor: pointer; }
.rb-opt__pick span { min-width: 0; }
.rb-opt__pick b { display: block; font-size: 14px; }
.rb-opt__pick small { display: block; font-size: 12px; color: var(--muted); }
.rb-step { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rb-step button { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%; background: var(--white); color: var(--olive-dark); font-size: 16px; line-height: 1; display: grid; place-items: center; }
.rb-step button:disabled { opacity: 0.4; cursor: default; }
.rb-step output { min-width: 18px; text-align: center; font-weight: 600; }
.rb-fixed { font-size: 13px; color: var(--muted); flex: 0 0 auto; }
.rb-pop__note { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.ss-nights-note { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; min-height: 18px; }
@media (max-width: 960px) {
  .search__row--short { grid-template-columns: 1fr 1fr; }
  .search__row--short .search__submit { grid-column: 1 / -1; }
  .search__row--short .field:nth-child(odd) { border-left: none; }
}
@media (max-width: 720px) {
  .search__row, .search__row--short { grid-template-columns: 1fr; }
  .search__row--short .field { border-left: none; }
  /* Opens directly under its full-width field (a fixed popover would be
     thrown off by the page's entrance animation transform). */
  .rb-pop { left: 0; right: 0; width: auto; max-width: none; }
}

/* Short stay · 1+ nights: price breakdown, request form and result page. */
.ss-quote { margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--cream); border: 1px solid var(--border); border-radius: var(--r); }
.ss-quote h4 { font-family: var(--font-primary); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.ss-quote__row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ss-quote__row span:last-child { text-align: right; font-weight: 600; color: var(--olive-dark); }
.ss-quote__total { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 12px 0 4px; font-size: 15px; }
.ss-quote__total small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ss-quote__total b { font-size: 1.35rem; color: var(--olive-dark); text-align: right; }
.ss-quote__note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }
.ss-points { list-style: disc; padding-left: 20px; margin: var(--s4) 0 0; display: grid; gap: 6px; font-size: 14px; }
.ss-textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; background: var(--white); font: inherit; font-size: 15px; resize: vertical; }
.ss-textarea:focus { outline: none; border-color: var(--olive); }
.ss-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ss-wa-hint { font-size: 13px; color: var(--muted); margin: 12px auto 0; max-width: 520px; }
.ss-wa-banner { display: flex; gap: 12px; align-items: flex-start; text-align: left; max-width: 640px; margin: 0 auto 8px; padding: 14px 16px; border: 1px solid rgba(37, 211, 102, 0.45); background: #eefaf2; border-radius: var(--r); color: var(--text); }
.ss-wa-banner svg { width: 24px; height: 24px; flex: 0 0 auto; color: #1a9e4b; margin-top: 2px; }
.ss-wa-banner b { display: block; font-size: 15px; margin-bottom: 2px; }
.ss-wa-banner span b { display: inline; font-size: inherit; margin: 0; }
.ss-wa-banner span { font-size: 14px; color: var(--muted); }
.ss-send { display: inline-flex; align-items: center; gap: 10px; }
.ss-send svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* On a phone the button fills the width and never runs off the screen. */
@media (max-width: 620px) {
  .ss-send { width: 100%; justify-content: center; white-space: normal; text-align: center; padding: 16px 18px; }
}
.confirm__check.ss-wa-icon { background: #eefaf2; }
.confirm__check.ss-wa-icon svg { color: #1a9e4b; }
.ss-wa-banner--warn { border-color: rgba(154, 107, 36, 0.3); background: var(--warn-bg); }
.ss-wa-banner--warn > svg { color: var(--warn); }
.ss-price-note { font-size: 12px; color: var(--muted); text-align: left; max-width: 640px; margin: -12px auto 0; }
@media (max-width: 480px) {
  .ss-quote { padding: var(--s3); }
  .ss-quote__row { font-size: 13px; }
}
@media (max-width: 480px) {
  .enq-panel { width: 100%; }
  .enq-head { padding: var(--s6) var(--s4) var(--s3); }
  .enq-body { padding: 0 var(--s4) var(--s6); }
  .enq-grid2 { grid-template-columns: 1fr; }
}

/* ---------- "Everything you need", 8 cards, 4x2 on desktop ---------- */
@media (min-width: 1025px) { .included-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Events ("Life at Nivara") ---------- */
.ev-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s3); align-items: stretch; }
.ev-top__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s3); min-height: 0; }
.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s3); }
.ev-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--fast), box-shadow var(--fast); }
.ev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ev-thumb { position: relative; overflow: hidden; }
/* Empty media area, intentionally blank (no image/placeholder/texture/border) */
.ev-thumb .ph.ev-ph--empty { background: var(--white); background-image: none; border: none; }
.ev-thumb .ph { border-radius: 0; height: auto; aspect-ratio: 4 / 3; }
.ev-thumb .ph > img { transition: transform var(--slow); }
.ev-card:hover .ev-thumb .ph > img { transform: scale(1.03); }
.ev-top .ev-card { height: 100%; }
.ev-top .ev-thumb { flex: 1 1 auto; min-height: 0; }
.ev-top .ev-thumb .ph { height: 100%; aspect-ratio: auto; min-height: 220px; }
.ev-tag { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(41,50,29,0.72); color: #F5F2E9; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; backdrop-filter: blur(2px); }
.ev-body { padding: var(--s3); display: flex; flex-direction: column; flex: 1 1 auto; }
.ev-date { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ev-body h3 { font-size: 1.2rem; margin-bottom: 6px; }
.ev-top .ev-body h3 { font-size: 1.5rem; }
.ev-desc { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.ev-loc { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-top: auto; }
.ev-loc svg { width: 14px; height: 14px; color: var(--gold); flex: 0 0 auto; }
.ev-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ev-play__btn { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.92); display: grid; place-items: center; color: var(--olive); box-shadow: var(--shadow); transition: transform var(--fast); }
.ev-card:hover .ev-play__btn { transform: scale(1.06); }
.ev-play__btn svg { width: 22px; height: 22px; margin-left: 3px; }
@media (max-width: 900px) {
  .ev-top { grid-template-columns: 1fr; }
  .ev-top__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .ev-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ev-top__side { grid-template-columns: 1fr; }
  .ev-grid { grid-template-columns: 1fr; }
  .ev-top .ev-thumb .ph { min-height: 200px; }
}

/* Events page, media-only gallery (image/video cards, no text) */
.events-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: var(--s8); }
.events-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.event-empty { grid-column: 1 / -1; padding: clamp(32px, 7vw, 72px); border: 1px dashed var(--border); border-radius: var(--r-lg); background: var(--cream); text-align: center; }
.event-empty h2 { font-size: clamp(1.45rem, 3vw, 2rem); margin-bottom: 10px; }
.event-empty p { max-width: 680px; margin: 0 auto; color: var(--muted); }
.event-empty code { font-size: .9em; color: var(--olive-dark); }
.home-gallery { display: grid; grid-template-columns: 1.45fr 1fr 1fr; grid-auto-rows: 230px; gap: var(--s2); }
.home-gallery__item { position: relative; overflow: hidden; border-radius: var(--r); background: var(--ph); }
.home-gallery__item:first-child { grid-row: span 2; }
.home-gallery__item:nth-child(4) { grid-column: span 2; }
.home-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.home-gallery__item:hover img { transform: scale(1.03); }
.home-gallery__item span { position: absolute; left: 14px; bottom: 14px; padding: 6px 11px; border-radius: 100px; background: rgba(41,50,29,.76); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .09em; }
@media (max-width: 900px) { .home-gallery { grid-template-columns: 1fr 1fr; } .home-gallery__item:first-child { grid-row: span 2; } .home-gallery__item:nth-child(4) { grid-column: auto; } }
@media (max-width: 560px) { .home-gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; } .home-gallery__item:first-child { grid-row: auto; } }
.event-media-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--cream); aspect-ratio: 4 / 3;
}
.event-media-card img, .event-media-card video {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.event-video-card { cursor: pointer; }
.event-play-button {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; padding: 0;
  border: none; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--olive);
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow);
  transition: transform var(--fast);
}
.event-video-card:hover .event-play-button { transform: scale(1.06); }
.event-play-button svg { width: 22px; height: 22px; margin-left: 3px; }
@media (max-width: 1024px) { .events-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .events-media-grid { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Subtle inline "view more" links (community / reviews) ---------- */
.inline-link { display: inline-flex; align-items: center; gap: 6px; color: var(--olive); font-weight: 600; font-size: 14px; text-decoration: none; transition: color var(--fast); }
.inline-link:hover, .inline-link:focus-visible { color: var(--gold); }
.inline-link .arrow { transition: transform var(--fast); }
.inline-link:hover .arrow { transform: translateX(3px); }

/* Hide the utility strip on phones, contact moves into the mobile menu */
/* Mobile: keep the utility contact strip visible (part of the sticky header),
   just more compact. The phone number collapses to "Call" so the bar never
   wraps or overflows; the tel: link stays fully clickable. */
@media (max-width: 720px) {
  :root { --util-h: 40px; }                 /* keep sticky offsets in sync with the mobile bar height */
  .util-bar__inner { min-height: 40px; gap: 10px; }
  .util-link { font-size: 13px; }
  .util-enquire { font-size: 11.5px; }
  .util-ic { width: 15px; height: 15px; }
  .util-ic--wa { width: 15px; height: 15px; }
  .util-num { display: none; }              /* hide the phone number, keep "Call" + tel link */
}
@media (max-width: 380px) {
  .util-bar__inner { gap: 8px; }
  .util-link, .util-enquire { font-size: 11px; letter-spacing: 0.02em; }
  .util-sep { height: 12px; }
}

/* Mobile contact buttons are anchors inside .mobile-menu, override the large
   nav-link typography/border that .mobile-menu a:not(.btn) would otherwise apply. */
.mobile-menu .m-contact { margin-top: var(--s3); }
.mobile-menu .m-contact .m-contact__btn { font-size: 13px; padding: 12px 8px; border: 1px solid var(--border); }
.mobile-menu .m-contact .m-contact__btn--enquire { border-color: var(--olive); }

/* =========================================================
   PROPERTY GALLERY, preview mosaic, gallery page, lightbox
   Reuses existing tokens, .ph image system and .mtile__cap pills.
   ========================================================= */

/* ---- Property-detail preview ---- */
.pd-gallery-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.pd-gallery-cta { white-space: nowrap; }
.pgallery__top { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s2); align-items: stretch; }
.pgallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s2); min-height: 0; }
.pgallery__bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s2); }
.pgallery__tile { position: relative; display: block; border-radius: var(--r); overflow: hidden; }
.pgallery__tile .ph { border-radius: 0; height: auto; aspect-ratio: 4 / 3; }
.pgallery__tile .ph > img { transition: transform var(--slow); }
.pgallery__tile:hover .ph > img { transform: scale(1.03); }
.pgallery__top .pgallery__tile { height: 100%; }
.pgallery__top .pgallery__tile .ph { height: 100%; aspect-ratio: auto; min-height: 210px; }
.pgallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(41,50,29,0.55); color: #F5F2E9; font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em; z-index: 2; transition: background var(--fast); }
.pgallery__tile:hover .pgallery__more { background: rgba(41,50,29,0.62); }
@media (max-width: 900px) {
  .pgallery__top { grid-template-columns: 1fr; }
  .pgallery__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pgallery__top .pgallery__tile .ph { min-height: 190px; }
}

/* ---- Full gallery page ---- */
.gal-head { padding: var(--s6) 0 var(--s3); }
.galcat-bar { position: sticky; top: calc(var(--nav-h) + var(--util-h)); z-index: 90; background: rgba(249,247,242,0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.galcat-bar__inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 10px 0; }
.galcat-bar__inner::-webkit-scrollbar { display: none; }
.galcat { flex: 0 0 auto; padding: 8px 14px; border-radius: 100px; font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; text-decoration: none; border: 1px solid transparent; transition: color var(--fast), background var(--fast), border-color var(--fast); }
.galcat:hover { color: var(--olive); }
.galcat.is-active { color: var(--olive-dark); background: var(--white); border-color: var(--border); font-weight: 600; }
.gal-body { padding-top: var(--s6); }
.gal-section { margin-bottom: var(--s8); scroll-margin-top: calc(var(--nav-h) + var(--util-h) + 72px); }
.gal-section h2 { margin-bottom: var(--s3); }
.gal-grid { columns: 3; column-gap: var(--s2); }
.galimg { display: inline-block; width: 100%; padding: 0; margin: 0 0 var(--s2); border: 0; background: none; cursor: pointer; border-radius: var(--r); overflow: hidden; font: inherit; break-inside: avoid; vertical-align: top; }
.galimg .ph { border-radius: 0; height: auto; }
.galimg .ph > img { object-fit: cover; }
.galimg .ph > img { transition: transform var(--slow); }
.galimg:hover .ph > img { transform: scale(1.03); }
.galimg:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.gal-back { text-align: center; padding: var(--s3) 0 var(--s6); }
@media (max-width: 900px) { .gal-grid { columns: 2; } }
@media (max-width: 560px) { .gal-grid { columns: 1; } }

/* ---- Lightbox ---- */
.lb-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(29,34,20,0.82); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--fast), visibility var(--fast); display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.lb-overlay.is-open { opacity: 1; visibility: visible; }
.lb-dialog { position: relative; display: flex; align-items: center; gap: clamp(8px, 2vw, 20px); max-width: 1100px; width: 100%; }
.lb-figure { margin: 0; flex: 1 1 auto; min-width: 0; text-align: center; }
.lb-figure img { max-width: 100%; max-height: 78vh; border-radius: var(--r); display: inline-block; object-fit: contain; box-shadow: var(--shadow-lg); }
.lb-cap { margin-top: 14px; color: #E7E4D8; font-size: 14px; letter-spacing: 0.01em; }
.lb-btn { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #F5F2E9; display: grid; place-items: center; cursor: pointer; transition: background var(--fast), border-color var(--fast); }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255,255,255,0.18); border-color: var(--gold-soft); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { position: absolute; top: -8px; right: -8px; width: 42px; height: 42px; z-index: 3; }
@media (max-width: 640px) {
  .lb-close { top: -6px; right: 0; }
  .lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
  .lb-prev { left: 2px; }
  .lb-next { right: 2px; }
  .lb-figure img { max-height: 70vh; }
}

/* =========================================================
   HOMEPAGE PHOTOGRAPHY
   Room preview · common-area preview · amenity strip · lifestyle stack ·
   final booking CTA. Every image here is a crop of an original in
   "Nivara images/gallery", see docs/homepage-image-selection.md.
   ========================================================= */

/* ---- Room + common-area preview cards ---- */
.photo-grid { display: grid; gap: var(--s3); }
.photo-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.photo-card { margin: 0; min-width: 0; }
/* height:auto is required, the width/height HTML attributes (kept so the
   browser can reserve space before load) are presentational hints that would
   otherwise beat aspect-ratio and render the image at its intrinsic height. */
.photo-card img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: var(--r); background: var(--ph);
  transition: transform var(--slow);
}
.photo-card:hover img { transform: scale(1.02); }
.photo-card figcaption { display: block; padding-top: 14px; }
.photo-card figcaption strong {
  display: block; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: 0.01em;
}
.photo-card figcaption span {
  display: block; margin-top: 5px; font-size: 14px; line-height: 1.6; color: var(--muted);
}

/* ---- Amenity photo strip (square crops under the icon grid) ---- */
.amenity-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s2); margin-top: var(--s6);
}
.amenity-shot { margin: 0; min-width: 0; }
.amenity-shot img {
  width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block;
  border-radius: var(--r); background: var(--ph);
}
.amenity-shot figcaption {
  margin-top: 10px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}

/* ---- Lifestyle stack (one tall lead + two stacked) ---- */
.life-stack { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s2); }
.life-stack figure { margin: 0; min-width: 0; }
.life-stack img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r); background: var(--ph);
}
.life-stack__lead { aspect-ratio: 4/5; }
.life-stack__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s2); min-width: 0; }

/* ---- Final booking CTA over a photograph ---- */
.cta-photo { position: relative; overflow: hidden; isolation: isolate; }
.cta-photo__bg {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(41,50,29,0.93) 0%, rgba(41,50,29,0.88) 55%, rgba(41,50,29,0.94) 100%),
    url("../assets/img/home/cta-desktop.jpg");
  background-size: cover, cover;
  background-position: center, center 55%;
}
@media (max-width: 700px) {
  /* Portrait-friendly crop of the same photograph. */
  .cta-photo__bg {
    background-image:
      linear-gradient(180deg, rgba(41,50,29,0.91) 0%, rgba(41,50,29,0.86) 55%, rgba(41,50,29,0.93) 100%),
      url("../assets/img/home/cta-mobile.jpg");
  }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .photo-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amenity-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .photo-grid { gap: var(--s2); }
  .amenity-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .life-stack { grid-template-columns: 1fr; }
  .life-stack__lead { aspect-ratio: 4/3; }
  .life-stack__side { grid-template-rows: auto auto; }
  .life-stack__side figure { aspect-ratio: 3/2; }
}


/* =========================================================
   REFINEMENT LAYER
   Loaded last so it has the final word in the cascade.
   1. Richer palette (the hero read flat and washed out)
   2. Architectural edge system, replaces rounded corners
   3. Round arrow affordance
   4. Brand ticker
   5. Floating WhatsApp button
   6. Symmetry, spacing and mobile full-bleed imagery
   ========================================================= */

/* ---------- 1. PALETTE ----------
   Same olive/ivory identity, but deeper and warmer so photography sits in it
   instead of fading into it. Clay is drawn from the building's own ochre
   reception wall and terracotta murals, so it never fights the pictures. */
:root {
  --olive:       #35402A;   /* primary olive, deepened for contrast */
  --olive-dark:  #1E2616;   /* headings, dark blocks */
  --olive-mid:   #55613F;   /* mid tone for rules and hovers */
  --gold:        #A87A38;   /* brass, warmer and more saturated */
  --gold-soft:   #DDBC7E;
  --clay:        #B4643C;   /* warm accent from the building's own palette */

  --ivory:       #F8F5EE;
  --cream:       #EFEADD;
  --sand:        #E4DDCB;   /* third surface tone for section rhythm */
  --white:       #FFFFFF;
  --ph:          #E4DDCB;

  --text:        #1C2115;
  --muted:       #63665A;
  --border:      #D8D1C0;
  --border-soft: #E6E0D2;

  /* Architectural edges, not rounded corners */
  --r-sm: 0; --r: 0; --r-lg: 0;
  --shadow:    0 18px 42px -30px rgba(30, 38, 22, 0.42);
  --shadow-lg: 0 34px 80px -46px rgba(30, 38, 22, 0.52);

  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8h10.2M8.9 3.9 13 8l-4.1 4.1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

body { background: var(--ivory); }
.bg-cream { background: var(--cream); }
.bg-sand  { background: var(--sand); }

/* ---------- 2. EDGE SYSTEM ----------
   Every surface is square-cut with a hairline keyline. Depth comes from the
   rule weight and a soft ambient shadow, not from a corner radius. */
.card, .finder, .compare, .ph, .search__card, .quote, .include, .room-card,
.book-box, .summary, .filters, .pay-method, .ev-card, .event-media-card,
.photo-card img, .amenity-shot img, .life-stack img, .home-gallery__item,
.galimg, .lb-figure img, .mosaic-panel, .feature-panel, .pgallery__tile,
.gal-head, .enq-panel, .auth-card, .modal, .toast-wrap > * {
  border-radius: 0;
}

/* Headings never leave a single orphan word on the last line. */
h1, h2, h3, h4, .finder__q > label { text-wrap: balance; }
.lede, .hero__sub, p { text-wrap: pretty; }

/* ---------- 3. ARROWS ----------
   The text glyph is hidden and replaced with a masked SVG arrow inside a
   circular field that tints itself from the surrounding text colour, so the
   same markup works on olive, ivory and photographic backgrounds. */
.arrow, .link-arrow span {
  font-size: 0 !important;
  line-height: 0;
  width: 27px; height: 27px;
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: rgba(140, 140, 130, 0.16);
  background: color-mix(in srgb, currentColor 15%, transparent);
  transition: background var(--fast), transform var(--fast);
}
.arrow::before, .link-arrow span::before {
  content: "";
  width: 13px; height: 13px;
  background: currentColor;
  -webkit-mask: var(--arrow-mask); mask: var(--arrow-mask);
}
.btn:hover .arrow, .link-arrow:hover span, a:hover > .arrow {
  background: color-mix(in srgb, currentColor 28%, transparent);
}
.btn--lg .arrow { width: 30px; height: 30px; }
.util-enquire .arrow { width: 20px; height: 20px; }
.util-enquire .arrow::before { width: 10px; height: 10px; }

/* ---------- 4. TICKER ---------- */
.ticker {
  background: var(--olive-dark);
  border-top: 1px solid rgba(221, 188, 126, 0.22);
  border-bottom: 1px solid rgba(221, 188, 126, 0.22);
  overflow: hidden;
  padding: 15px 0;
}
.ticker__track { display: flex; width: max-content; animation: tickerScroll 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__run { display: flex; align-items: center; flex: 0 0 auto; }
.ticker__item {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #E9E4D6; white-space: nowrap;
}
.ticker__dot {
  width: 5px; height: 5px; margin: 0 30px; flex: 0 0 auto;
  background: var(--gold-soft); transform: rotate(45deg); /* small diamond */
}
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
  .ticker__run[aria-hidden="true"] { display: none; }
}

/* ---------- 5. FLOATING WHATSAPP ---------- */
.wa-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 420;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(18, 90, 45, 0.55), 0 2px 6px rgba(0,0,0,0.16);
  transition: transform var(--fast), box-shadow var(--fast);
}
.wa-fab:hover, .wa-fab:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px -10px rgba(18, 90, 45, 0.6); }
.wa-fab__ic { width: 31px; height: 31px; position: relative; z-index: 2; }
.wa-fab__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: waPulse 2.6s var(--ease) infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: 0.65; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.wa-fab__tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--olive-dark); color: #F5F2E9;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  padding: 8px 13px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--fast);
  box-shadow: var(--shadow);
}
.wa-fab:hover .wa-fab__tip { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wa-fab__pulse { animation: none; opacity: 0; } }
@media (max-width: 720px) {
  .wa-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-fab__ic { width: 29px; height: 29px; }
  .wa-fab__tip { display: none; }
}
/* The vertical social rail is a large-desktop device only. Below that it
   collided with the hero and now with the WhatsApp button. */
@media (max-width: 1180px) { .social-rail { display: none !important; } }

/* ---------- 6a. HERO ----------
   The old wash sat at 97% ivory across most of the frame, which flattened the
   photograph into beige. Lighter wash, a warm tint and a soft olive vignette
   give it depth while keeping the headline fully legible. */
.hero:not(.hero--compact) .hero__media {
  background-image:
    linear-gradient(101deg,
      rgba(248,245,238,0.975) 0%,
      rgba(248,245,238,0.94) 28%,
      rgba(248,245,238,0.66) 55%,
      rgba(246,240,228,0.26) 78%,
      rgba(53,64,42,0.10) 100%),
    url("../assets/img/home/hero-desktop-sm.jpg");
  background-position: center, center 42%;
}
@media (min-width: 1401px) {
  .hero:not(.hero--compact) .hero__media {
    background-image:
      linear-gradient(101deg,
        rgba(248,245,238,0.975) 0%,
        rgba(248,245,238,0.94) 28%,
        rgba(248,245,238,0.66) 55%,
        rgba(246,240,228,0.26) 78%,
        rgba(53,64,42,0.10) 100%),
      url("../assets/img/home/hero-desktop.jpg");
  }
}
@media (max-width: 700px) {
  .hero:not(.hero--compact) .hero__media {
    background-image:
      linear-gradient(178deg,
        rgba(248,245,238,0.975) 0%,
        rgba(248,245,238,0.95) 30%,
        rgba(248,245,238,0.70) 56%,
        rgba(246,240,228,0.32) 78%,
        rgba(53,64,42,0.12) 100%),
      url("../assets/img/home/hero-mobile.jpg");
  }
}
/* Warm brass hairline under the hero, ties it to the ticker below. */
.hero__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 42%, transparent 100%);
}
.hero h1 { color: var(--olive-dark); }
.hero__sub { color: #4C5044; }

/* ---------- 6b. TRUST STRIP ----------
   Four stats in an even grid so nothing touches the screen edge on a phone. */
.trust { background: var(--ivory); border-bottom: 1px solid var(--border-soft); }
.trust__inner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center; gap: 0; padding: var(--s6) 0;
}
.trust__stat { padding: 6px 14px; min-width: 0; }
.trust__stat + .trust__stat { border-left: 1px solid var(--border-soft); }
.trust__divider { display: none; }
@media (max-width: 720px) {
  .trust__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s4) 0; }
  .trust__stat { padding: 18px 12px; }
  .trust__stat:nth-child(odd) { border-left: none; }
  .trust__stat:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
  .trust__num { font-size: 2.1rem; }
  .trust__label { font-size: 11px; letter-spacing: 0.08em; }
}

/* ---------- 6c. RESIDENCE FEATURE PANEL (single property) ---------- */
.feature-panel {
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.feature-panel__media { position: relative; display: block; overflow: hidden; background: var(--ph); }
.feature-panel__media img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; display: block; transition: transform var(--slow); }
.feature-panel:hover .feature-panel__media img { transform: scale(1.03); }
.feature-panel__badge {
  position: absolute; top: 18px; left: 18px;
  background: rgba(30,38,22,0.82); color: #F5F2E9; backdrop-filter: blur(3px);
  font-size: 11px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  padding: 7px 13px;
}
.feature-panel__body { padding: var(--s6); display: flex; flex-direction: column; gap: 14px; }
.feature-panel__body h3 { margin-top: 2px; }
.feature-panel__tag { color: var(--muted); font-size: 15px; margin: 0; max-width: 46ch; }
.feature-panel__amen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 4px 0 0; }
.feature-panel__amen li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); }
.feature-panel__amic { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; }
.feature-panel__rooms { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); margin-top: 4px; }
.feature-panel__room { background: var(--white); padding: 13px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.feature-panel__room strong { font-size: 13.5px; color: var(--olive-dark); }
.feature-panel__room span { font-size: 12px; color: var(--muted); }
.feature-panel__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3);
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--border-soft); flex-wrap: wrap;
}
.feature-panel__from { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.feature-panel__foot .price { font-size: 1.9rem; color: var(--olive-dark); line-height: 1.15; display: block; }
.feature-panel__per { font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) {
  .feature-panel { grid-template-columns: 1fr; }
  .feature-panel__media img { min-height: 0; aspect-ratio: 16/10; }
  .feature-panel__body { padding: var(--s4); }
  .feature-panel__rooms { grid-template-columns: 1fr; }
}

/* ---------- 6d. FINDER ----------
   Was a narrow 820px island inside a 1240px section, which read as misaligned.
   Now it fills the same column as every other section and the three questions
   sit in an even three-up grid. */
.finder {
  max-width: none; margin: 0;
  background: var(--white); border: 1px solid var(--border);
  padding: var(--s8) var(--s8) var(--s6);
  box-shadow: var(--shadow);
}
.finder__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-soft); }
.finder__q { background: var(--white); padding: 0 var(--s4); margin: 0; }
.finder__q:first-child { padding-left: 0; }
.finder__q:last-child { padding-right: 0; }
.finder__q > label {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 1.18rem; font-weight: 600; color: var(--olive-dark); margin-bottom: var(--s3);
}
.finder__q > label i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); }
.finder__act { display: flex; justify-content: center; margin-top: var(--s6); }
#finderResult:not(:empty) { margin-top: var(--s6); }
@media (max-width: 900px) {
  .finder { padding: var(--s4); }
  .finder__grid { grid-template-columns: 1fr; gap: 0; background: none; }
  .finder__q { padding: var(--s4) 0; border-top: 1px solid var(--border-soft); }
  .finder__q:first-child { padding-top: 0; border-top: none; }
  .finder__act .btn { width: 100%; }
}

/* ---------- 6e. TIGHTER GRIDS ----------
   The 32px gutters between cards read as gaps rather than rhythm. Amenity and
   gallery grids now use a hairline gutter so each block forms one object. */
.included-grid {
  gap: 1px; background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
.include { background: var(--white); margin: 0; padding: var(--s4); }
.home-gallery { gap: 6px; }
.photo-grid { gap: 18px; }
.amenity-strip { gap: 8px; margin-top: var(--s4); }
.amenity-shot figcaption { font-size: 11px; letter-spacing: 0.1em; }
.life-stack { gap: 8px; grid-template-columns: 1fr 1fr; }
.life-stack__side { gap: 8px; }
.mosaic-panel .mosaic { gap: 6px; }
.gal-grid { column-gap: 8px; }
.galimg { margin-bottom: 8px; }

/* ---------- 6f. COMPARISON TABLE ----------
   The final row sat flush against the panel edge. Extra breathing room top and
   bottom, applied to the cells so the column fills still run edge to edge. */
.compare { border: 1px solid var(--border); box-shadow: var(--shadow); }
.compare__head { padding-top: var(--s4); padding-bottom: var(--s3); }
.compare__cell { padding: 17px var(--s4); }
.compare__cell:nth-last-child(-n+3) { padding-bottom: var(--s4); }
.compare__cell.niv-col { background: rgba(53, 64, 42, 0.045); }
@media (max-width: 720px) {
  .compare__cell { padding: 5px var(--s3); }
  .compare__cell:nth-last-child(-n+3) { padding-bottom: 5px; }
  .compare__val.niv-col { padding-bottom: var(--s3); }
  .compare__label { padding-top: var(--s3); padding-bottom: 4px; }
}

/* ---------- 6g. FOOTER SEO LINKS ---------- */
.seo { border-top: 1px solid rgba(231, 228, 216, 0.16); padding: var(--s6) 0 var(--s4); }
.seo__title { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 var(--s3); }
.seo__group { margin: 0 0 18px; line-height: 2.15; }
.seo__label {
  display: inline-block; margin-right: 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(231, 228, 216, 0.5);
}
.seo__group a {
  font-size: 13px; color: rgba(231, 228, 216, 0.68);
  padding: 3px 0; margin-right: 6px;
  transition: color var(--fast);
}
.seo__group a:not(:last-child)::after { content: " \00B7"; color: rgba(231, 228, 216, 0.28); margin-left: 7px; }
.seo__group a:hover { color: var(--gold-soft); }
@media (max-width: 620px) {
  .seo__group { line-height: 2.3; }
  .seo__label { display: block; margin-bottom: 4px; }
}

/* ---------- 6h. MOBILE: FULL-BLEED IMAGERY ----------
   On a phone the photographs run edge to edge with no inset and no radius;
   only the captions keep the page gutter. */
@media (max-width: 620px) {
  .photo-grid, .amenity-strip, .home-gallery, .life-stack {
    margin-inline: calc(var(--gutter) * -1);
    gap: 2px;
  }
  .photo-grid { grid-template-columns: 1fr; }
  .photo-card img { aspect-ratio: 3/2; }
  .photo-card figcaption { padding: 12px var(--gutter) 18px; }
  .amenity-strip { grid-template-columns: 1fr 1fr; }
  .amenity-shot figcaption { padding: 8px var(--s1) 0; }
  .home-gallery { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .life-stack { grid-template-columns: 1fr; }
  .life-stack__lead { aspect-ratio: 4/3; }
  .life-stack__side { grid-template-rows: auto auto; gap: 2px; }
  .life-stack__side figure { aspect-ratio: 3/2; }
  .gal-grid { column-gap: 2px; margin-inline: calc(var(--gutter) * -1); }
  .galimg { margin-bottom: 2px; }
  .mosaic-panel { padding: 0; border: none; background: none; }
  .mosaic-panel .mosaic { gap: 2px; margin-inline: calc(var(--gutter) * -1); }
  .feature-panel { margin-inline: calc(var(--gutter) * -1); border-left: none; border-right: none; }
  .feature-panel__body { padding: var(--s4) var(--gutter); }
}

/* ---------- 6i. ODDS AND ENDS ---------- */
.logo { cursor: pointer; transition: opacity var(--fast); }
.logo:hover { opacity: 0.78; }
.home-gallery__item span { border-radius: 0; background: rgba(30,38,22,0.82); letter-spacing: 0.1em; }
.btn--primary { background: var(--olive); }
.btn--primary:hover { background: var(--olive-dark); }


/* =========================================================
   REFINEMENT LAYER 2, symmetry pass
   ========================================================= */

/* ---------- Trust strip dividers ----------
   The old markup interleaves .trust__divider elements between the stats, so an
   adjacent-sibling rule never matched. General sibling does. */
.trust__stat ~ .trust__stat { border-left: 1px solid var(--border-soft); }
@media (max-width: 720px) {
  .trust__stat ~ .trust__stat { border-left: 1px solid var(--border-soft); }
  .trust__stat:nth-child(odd) { border-left: none; }
}

/* ---------- Lifestyle stack, true 2x2 symmetry ----------
   The side wrapper is dissolved with display:contents so its two figures become
   direct grid cells. The block then has one fixed shape: a full-height lead on
   the left and two exactly equal halves on the right. */
.life-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  aspect-ratio: 1 / 1.04;
}
.life-stack__lead { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
.life-stack__side { display: contents; }
.life-stack figure { margin: 0; min-width: 0; min-height: 0; overflow: hidden; }
.life-stack img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Gallery preview, even 3 x 2 contact sheet ----------
   The old 1.45fr mosaic left the bottom-right cell empty with six tiles. */
.home-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 6px;
}
.home-gallery__item {
  grid-row: auto !important;
  grid-column: auto !important;
  aspect-ratio: 4 / 3;
}
.home-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Finder, clean full-height dividers ----------
   A 1px grid gap with a coloured background leaked grey under the shortest
   column. Real borders on the columns do the same job cleanly. */
.finder__grid { gap: 0; background: none; }
.finder__q { border-left: 1px solid var(--border-soft); padding: 0 var(--s5, 40px); }
.finder__q:first-child { border-left: none; padding-left: 0; }
.finder__q:last-child { padding-right: 0; }

/* ---------- Section head rhythm ----------
   Centred intros were capped at 640px, which forced awkward two-word last
   lines under wide headings. */
.section-head.center { max-width: 720px; }
.section-head.center .lede { max-width: 58ch; margin-left: auto; margin-right: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .home-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .finder__grid { grid-template-columns: 1fr; }
  .finder__q { border-left: none; border-top: 1px solid var(--border-soft); padding: var(--s4) 0; }
  .finder__q:first-child { border-top: none; padding-top: 0; }
}
@media (max-width: 620px) {
  .life-stack {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    aspect-ratio: auto;
    gap: 2px;
    margin-inline: calc(var(--gutter) * -1);
  }
  .life-stack__lead { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; }
  .life-stack__side figure { aspect-ratio: 3 / 2; }
  .home-gallery {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-inline: calc(var(--gutter) * -1);
  }
  .home-gallery__item { aspect-ratio: 3 / 2; }
}


/* =========================================================
   REFINEMENT LAYER 3
   Sliders, floating contact, footer texture and statement,
   neighbourhood page, gallery balancing, hero tagline.
   ========================================================= */

/* ---------- Arrow, optical centring ----------
   The masked glyph was drawn off-centre in its viewBox and the zero-height
   line box let the circle drift off the button's text baseline. */
:root {
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.arrow, .link-arrow span {
  align-items: center; justify-content: center;
  align-self: center;
  vertical-align: middle;
  line-height: 0;
  padding: 0;
}
.arrow::before, .link-arrow span::before { display: block; }
.link-arrow, .inline-link { align-items: center; }

/* ---------- Hero tagline ---------- */
.hero__tag {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 var(--s3);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--clay);
}
.hero__tag-dot {
  width: 7px; height: 7px; flex: 0 0 auto;
  background: var(--clay); transform: rotate(45deg);
}
.gal-head .hero__tag { color: var(--clay); }
@media (max-width: 620px) { .hero__tag { font-size: 11px; letter-spacing: 0.12em; } }

/* =========================================================
   SLIDERS (resident stories, facilities)
   Native scroll-snap does the scrolling; the buttons and rail sit on top.
   ========================================================= */
.slider { position: relative; }
.slider__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.slider__viewport::-webkit-scrollbar { display: none; }
.slider__track { display: flex; gap: var(--s3); align-items: stretch; }
.slider__slide { scroll-snap-align: start; flex: 0 0 auto; }

.slider__bar {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s4);
}
.slider__rail { position: relative; flex: 1 1 auto; height: 2px; background: var(--border); overflow: hidden; }
.slider__thumb {
  position: absolute; inset: 0 auto 0 0; width: 50%;
  background: var(--gold);
  transition: transform 0.18s linear;
}
.slider__nav { display: flex; gap: 10px; flex: 0 0 auto; }
.slider__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--white); color: var(--olive);
  display: grid; place-items: center;
  transition: background var(--fast), color var(--fast), border-color var(--fast), opacity var(--fast);
}
.slider__btn svg { width: 16px; height: 16px; }
.slider__btn:hover:not(:disabled) { background: var(--olive); border-color: var(--olive); color: #fff; }
.slider__btn:disabled { opacity: 0.32; cursor: default; }
.slider.is-static .slider__bar { display: none; }

/* Resident stories: three across on desktop, one and a peek on a phone. */
.slider[data-slider="quotes"] .slider__slide { width: calc((100% - var(--s3) * 2) / 3); }
@media (max-width: 1024px) { .slider[data-slider="quotes"] .slider__slide { width: calc((100% - var(--s3)) / 2); } }
@media (max-width: 700px)  { .slider[data-slider="quotes"] .slider__slide { width: 86%; } }

/* Facilities: a scroll-to-slide strip of square crops. */
.amenity-slider .slider__track { gap: 8px; }
.amenity-slider .slider__slide { width: calc((100% - 8px * 5) / 6); }
.amenity-slider .amenity-shot img { aspect-ratio: 1 / 1; }
@media (max-width: 1024px) { .amenity-slider .slider__slide { width: calc((100% - 8px * 2) / 3); } }
@media (max-width: 620px)  { .amenity-slider .slider__slide { width: 62%; } }

/* On a phone the caption sat far below the image and crowded the next tile. */
.amenity-shot { display: flex; flex-direction: column; }
.amenity-shot figcaption { margin-top: 10px; }
@media (max-width: 620px) {
  .amenity-slider .slider__viewport { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .amenity-strip { margin-inline: 0 !important; }
  .amenity-shot figcaption { margin-top: 8px; padding: 0; font-size: 11px; line-height: 1.35; }
}

/* =========================================================
   FLOATING CONTACT BUTTON
   ========================================================= */
.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 420;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 24px -9px rgba(18, 90, 45, 0.55), 0 2px 6px rgba(0,0,0,0.16);
  transition: transform var(--fast), background 0.45s var(--ease), box-shadow var(--fast);
}
.fab[data-mode="call"] {
  background: var(--olive);
  box-shadow: 0 10px 24px -9px rgba(30, 38, 22, 0.6), 0 2px 6px rgba(0,0,0,0.16);
}
.fab:hover, .fab:focus-visible { transform: translateY(-3px) scale(1.04); }
.fab__face {
  grid-area: 1 / 1; display: grid; place-items: center;
  opacity: 0; transform: scale(0.55) rotate(-35deg);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.fab__face.is-on { opacity: 1; transform: none; }
.fab__face svg { width: 26px; height: 26px; display: block; }
.fab__face--call svg { width: 24px; height: 24px; }
.fab__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid currentColor; color: inherit;
  animation: fabPulse 2.8s var(--ease) infinite;
}
@keyframes fabPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.fab__tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--olive-dark); color: #F5F2E9;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  padding: 7px 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--fast);
}
.fab:hover .fab__tip { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fab__pulse { animation: none; opacity: 0; } }
@media (max-width: 720px) {
  .fab { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .fab__face svg { width: 24px; height: 24px; }
  .fab__tip { display: none; }
}

/* =========================================================
   FOOTER: texture, statement, wordmark, connect cluster
   ========================================================= */
/* Jaali lattice, the same geometric screen pattern as the building's own
   window grilles. Two layers: the lattice plus a soft warm glow. */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(120% 80% at 82% -10%, rgba(168, 122, 56, 0.20) 0%, transparent 62%),
    radial-gradient(90% 70% at 5% 108%, rgba(180, 100, 60, 0.14) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23DDBC7E' stroke-width='1' stroke-opacity='0.16'%3E%3Cpath d='M36 0v72M0 36h72'/%3E%3Cpath d='M36 6a30 30 0 0130 30 30 30 0 01-30 30A30 30 0 016 36 30 30 0 0136 6z'/%3E%3Cpath d='M18 18h36v36H18z'/%3E%3Cpath d='M36 18l18 18-18 18-18-18z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 72px 72px;
}
.footer > .wrap { position: relative; z-index: 1; }

/* Closing statement */
.fstate { padding: var(--s10) 0 var(--s6); border-top: 1px solid rgba(231, 228, 216, 0.14); }
.fstate__line {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.14; font-weight: 500; letter-spacing: -0.02em;
  color: #F5F2E9; max-width: 20ch; text-wrap: balance;
}
.fstate__line em { font-style: normal; color: var(--gold-soft); }
.fstate__meta {
  display: flex; align-items: center; gap: 14px; margin-top: var(--s3);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(231, 228, 216, 0.5);
}
.fstate__dot { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }

/* Giant brand wordmark, edge to edge above the legal line */
.fmark {
  border-top: 1px solid rgba(231, 228, 216, 0.14);
  margin-top: var(--s6); padding-top: var(--s6);
  line-height: 0.78; overflow: hidden;
}
.fmark span {
  display: block; width: 100%;
  font-size: clamp(3.4rem, 15.5vw, 13rem);
  font-weight: 700; letter-spacing: 0.045em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(231, 228, 216, 0.20);
  background: linear-gradient(180deg, rgba(231,228,216,0.13) 0%, rgba(231,228,216,0.02) 100%);
  -webkit-background-clip: text; background-clip: text;
  user-select: none;
}

/* Popular searches, its own panel with separated groups */
.seo {
  border-top: 1px solid rgba(231, 228, 216, 0.14);
  border-bottom: 1px solid rgba(231, 228, 216, 0.14);
  padding: var(--s6) 0;
}
.seo__title { color: var(--gold-soft); }
.seo__body {
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(231, 228, 216, 0.10);
  padding: var(--s4) var(--s4) var(--s2);
}
.seo__group { margin: 0; padding: 16px 0; border-top: 1px dashed rgba(231, 228, 216, 0.16); }
.seo__group:first-of-type { border-top: none; padding-top: 4px; }
.seo__label {
  display: block; margin: 0 0 8px;
  color: var(--gold-soft); font-size: 10.5px; letter-spacing: 0.18em;
}
.seo__label::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 9px;
  background: var(--gold); transform: rotate(45deg); vertical-align: middle;
}

/* Connect cluster */
.connect { position: relative; padding: var(--s6) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.connect__toggle {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px 13px 14px;
  border: 1px solid rgba(231, 228, 216, 0.3); background: rgba(231, 228, 216, 0.06);
  color: #F5F2E9; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background var(--fast), border-color var(--fast);
}
.connect__toggle:hover { background: rgba(231, 228, 216, 0.12); border-color: var(--gold-soft); }
.connect__toggle-ic { position: relative; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--olive-dark); }
.connect__toggle-ic svg { grid-area: 1 / 1; width: 15px; height: 15px; transition: opacity var(--fast), transform var(--fast); }
.connect__ic-close { opacity: 0; transform: rotate(-90deg); }
.connect.is-open .connect__ic-open { opacity: 0; transform: rotate(90deg); }
.connect.is-open .connect__ic-close { opacity: 1; transform: none; }

.connect__group { display: flex; gap: 14px; flex-wrap: wrap; }
.connect__btn {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: #F5F2E9; color: var(--olive-dark);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,0.7);
  opacity: 0; transform: translateY(14px) scale(0.7);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), background var(--fast);
}
.connect.is-open .connect__btn { opacity: 1; transform: none; }
.connect.is-open .connect__btn[data-i="1"] { transition-delay: 0.02s; }
.connect.is-open .connect__btn[data-i="2"] { transition-delay: 0.07s; }
.connect.is-open .connect__btn[data-i="3"] { transition-delay: 0.12s; }
.connect.is-open .connect__btn[data-i="4"] { transition-delay: 0.17s; }
.connect__btn svg { width: 26px; height: 26px; }
.connect__btn--wa { background: #25D366; color: #fff; }
.connect__btn--call { background: var(--gold); color: var(--olive-dark); }
.connect__btn--ig { background: #E1306C; color: #fff; }
.connect__btn:hover { transform: translateY(-3px); }
.connect__lab {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(231, 228, 216, 0.66); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .connect__btn { transition: none; }
}

/* =========================================================
   GALLERY, balancing thin categories
   ========================================================= */
.gal-section h2 { display: flex; align-items: baseline; gap: 12px; }
.gal-section__n {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--gold); border: 1px solid var(--border); padding: 2px 9px;
}
/* One photograph: it takes two thirds and a caption panel fills the rest, so
   the row reads as designed rather than as a gap. */
.gal-grid--solo, .gal-grid--pair {
  columns: auto; display: grid; gap: 8px; align-items: stretch;
}
.gal-grid--solo { grid-template-columns: 2fr 1fr; }
.gal-grid--pair { grid-template-columns: 1fr 1fr; }
.gal-grid--solo .galimg, .gal-grid--pair .galimg { margin: 0; }
.gal-grid--solo .galimg .ph { height: 100%; aspect-ratio: auto !important; min-height: 340px; }
.gal-grid--pair .galimg .ph { aspect-ratio: 4 / 3 !important; }
.gal-note {
  background: var(--cream); border: 1px solid var(--border);
  padding: var(--s4); display: flex; flex-direction: column; gap: 12px;
  justify-content: center;
}
.gal-note__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.gal-note p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }
.gal-note__count { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); opacity: 0.7; }
@media (max-width: 760px) {
  .gal-grid--solo, .gal-grid--pair { grid-template-columns: 1fr; }
  .gal-grid--solo .galimg .ph { min-height: 0; aspect-ratio: 4 / 3 !important; }
}

/* =========================================================
   NEIGHBOURHOOD PAGE
   ========================================================= */
.near-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--s4); }

.rhythm { margin-bottom: var(--s10); }
.rhythm__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: var(--s4); }
.rhythm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.rhythm__col { background: var(--white); padding: var(--s4); }
.rhythm__when {
  display: inline-block; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.rhythm__col ul { display: flex; flex-direction: column; gap: 10px; }
.rhythm__col li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.rhythm__col li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; background: var(--clay); transform: rotate(45deg);
}

.near-block { margin-bottom: var(--s10); scroll-margin-top: 150px; }
.near-block__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: var(--s4); }
.near-block__ic { width: 30px; height: 30px; color: var(--gold); flex: 0 0 auto; margin-top: 4px; }
.near-block__head h3 { margin-bottom: 4px; }
.near-block__head p { color: var(--muted); font-size: 15px; margin: 0; max-width: 62ch; }

.near-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.near-item {
  background: var(--white); padding: 16px var(--s3);
  display: flex; align-items: baseline; gap: 16px; min-width: 0;
}
.near-item__dist {
  flex: 0 0 62px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.near-item__body { flex: 1 1 auto; min-width: 0; }
.near-item__body strong { display: block; font-size: 15px; color: var(--olive-dark); font-weight: 600; }
.near-item__body span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.near-item__tag {
  flex: 0 0 auto; align-self: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--olive); background: var(--cream); border: 1px solid var(--border); padding: 4px 8px;
}
.near-disclaimer { font-size: 13px; color: var(--muted); max-width: 70ch; padding-top: var(--s3); border-top: 1px solid var(--border); }

@media (max-width: 860px) {
  .rhythm__grid { grid-template-columns: 1fr; }
  .near-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .near-item { padding: 14px var(--s2); gap: 12px; }
  .near-item__dist { flex-basis: 54px; font-size: 11.5px; }
  .near-item__tag { display: none; }
  .near-actions .btn { width: 100%; }
}


/* =========================================================
   REFINEMENT LAYER 4
   ========================================================= */

/* ---------- Arrow, true optical centring ----------
   The circle was an inline-grid that still contained the original "→" text
   node. Even at font-size 0 that node becomes an anonymous grid item and
   claims its own row, so the arrow was laid out in row 1 of a two-row grid
   and sat about 3px high. Taking the glyph out of flow entirely removes the
   text node from the equation: inset:0 + margin:auto centres it exactly,
   whatever else is inside the element. */
.arrow, .link-arrow span {
  position: relative;
  display: inline-block;
  width: 27px; height: 27px;
  flex: 0 0 auto;
  vertical-align: middle;
  align-self: center;
  border-radius: 50%;
  font-size: 0 !important;
  line-height: 0;
  padding: 0;
  overflow: hidden;
}
.arrow::before, .link-arrow span::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px; height: 13px;
  background: currentColor;
  -webkit-mask: var(--arrow-mask);
          mask: var(--arrow-mask);
}
.btn--lg .arrow { width: 30px; height: 30px; }
.btn--lg .arrow::before { width: 14px; height: 14px; }
.util-enquire .arrow { width: 20px; height: 20px; }
.util-enquire .arrow::before { width: 10px; height: 10px; }
/* The containers the arrow sits in all centre their own cross axis. */
.btn, .link-arrow, .inline-link, .util-enquire { align-items: center; }

/* ---------- Ticker, breathing room above ----------
   It sat hard against the search card. */
.ticker { margin-top: var(--s6); }
@media (max-width: 720px) { .ticker { margin-top: var(--s4); } }

/* ---------- Resident stories, equal cards ----------
   The quotes are different lengths, so the cards were different heights and
   the names sat at different levels. Each card is now a column: the quote
   grows to fill, which pins every attribution to the same baseline and makes
   all three cards exactly as tall as the longest. */
.slider__track { align-items: stretch; }
.quote.slider__slide { display: flex; flex-direction: column; height: auto; }
.quote.slider__slide .quote__text { flex: 1 1 auto; }
.quote.slider__slide .quote__person { margin-top: auto; }

/* ---------- Neighbourhood, every place is a search ---------- */
.near-item { padding: 0; }
.near-link {
  display: flex; align-items: baseline; gap: 16px;
  width: 100%; padding: 16px var(--s3); min-width: 0;
  transition: background var(--fast);
}
.near-link:hover, .near-link:focus-visible { background: var(--cream); }
.near-link:hover .near-item__body strong { color: var(--gold); }
.near-item__go {
  flex: 0 0 auto; align-self: center; width: 15px; height: 15px;
  color: var(--muted); opacity: 0; transform: translateX(-4px);
  transition: opacity var(--fast), transform var(--fast), color var(--fast);
}
.near-link:hover .near-item__go, .near-link:focus-visible .near-item__go {
  opacity: 1; transform: none; color: var(--gold);
}
.near-item__go svg { width: 100%; height: 100%; }
@media (max-width: 620px) {
  .near-link { padding: 14px var(--s2); gap: 12px; }
  .near-item__go { opacity: 0.5; transform: none; }
}


/* =========================================================
   REFINEMENT LAYER 5
   Flush gallery rows, and three distinct colour bands in the footer.
   ========================================================= */

/* ---------- Gallery, no ragged right edge ----------
   The old CSS-columns masonry balanced by height, which left the right-hand
   column short in every category whose count was not a clean multiple. This is
   a six-column grid: a normal tile spans 2 (three per row) and any leftovers on
   the last row widen to absorb the remainder, so every row ends flush. */
.gal-grid--fill {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.gal-grid--fill .galimg { margin: 0; width: auto; min-width: 0; }
.gal-grid--fill .galimg[data-span="2"] { grid-column: span 2; }
.gal-grid--fill .galimg[data-span="3"] { grid-column: span 3; }
.gal-grid--fill .galimg[data-span="6"] { grid-column: span 6; }

/* Wider tiles get a wider crop so a full-width row never becomes a tower. */
.gal-grid--fill .galimg .ph { height: auto; }
.gal-grid--fill .galimg[data-span="2"] .ph { aspect-ratio: 4 / 3; }
.gal-grid--fill .galimg[data-span="3"] .ph { aspect-ratio: 3 / 2; }
.gal-grid--fill .galimg[data-span="6"] .ph { aspect-ratio: 21 / 8; }
.gal-grid--fill .galimg .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Narrower screens drop to two columns, then one. The desktop span attribute
   is ignored at these sizes and the row is re-balanced from the tile count, so
   an odd last tile widens instead of leaving a hole. */
@media (max-width: 900px) {
  .gal-grid--fill { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal-grid--fill .galimg[data-span] { grid-column: auto; }
  .gal-grid--fill .galimg:nth-child(odd):last-child { grid-column: 1 / -1; }
  .gal-grid--fill .galimg[data-span] .ph { aspect-ratio: 4 / 3; }
  .gal-grid--fill .galimg:nth-child(odd):last-child .ph { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .gal-grid--fill {
    grid-template-columns: 1fr; gap: 2px;
    margin-inline: calc(var(--gutter) * -1);
  }
  .gal-grid--fill .galimg[data-span],
  .gal-grid--fill .galimg:nth-child(odd):last-child { grid-column: 1 / -1; }
  .gal-grid--fill .galimg[data-span] .ph,
  .gal-grid--fill .galimg:nth-child(odd):last-child .ph { aspect-ratio: 3 / 2; }
}


/* =========================================================
   REFINEMENT LAYER 6
   Footer: one colour, richer ground, ornamental separators.
   Floating contact: a vertical speed dial.
   ========================================================= */

/* ---------- Footer ground ----------
   One colour throughout. Depth comes from a warm brass glow at the top right
   and a deeper settle at the bottom, not from separate coloured blocks. */
.footer {
  background: #1B2314;
  position: relative;
  overflow: hidden;
}
.footer__top, .seo {
  background: none;
  box-shadow: none;
  clip-path: none;
  border: 0;
  padding-left: 0;
  padding-right: 0;
}
.footer__top { padding-top: var(--s10); padding-bottom: var(--s8); }
.seo { padding: 0 0 var(--s6); }

/* The jaali: an eight-point star lattice, the geometry you find in the
   building's own window grilles, drawn in brass at low opacity. Two soft
   radial washes sit over it so the ground has depth without banding. */
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 1;
  background-image:
    radial-gradient(78% 58% at 88% -6%, rgba(168, 122, 56, 0.26) 0%, transparent 66%),
    radial-gradient(70% 55% at 4% 104%, rgba(180, 100, 60, 0.16) 0%, transparent 62%),
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(9, 13, 6, 0.45) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23DDBC7E' stroke-width='0.9' stroke-opacity='0.13'%3E%3Cpath d='M32 0 64 32 32 64 0 32Z'/%3E%3Crect x='9.4' y='9.4' width='45.2' height='45.2'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3Ccircle cx='0' cy='0' r='6.5'/%3E%3Ccircle cx='64' cy='0' r='6.5'/%3E%3Ccircle cx='0' cy='64' r='6.5'/%3E%3Ccircle cx='64' cy='64' r='6.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 64px 64px;
}

/* ---------- Ornamental separator ----------
   A brass rule that fades at both ends and breaks in the middle for a small
   lozenge flanked by two points. Used between every footer block, so the
   sections read as separate without needing separate colours. */
.fstate::before, .seo::before, .fmark::before, .connect::before {
  content: "";
  display: block;
  height: 11px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='11' viewBox='0 0 64 11'%3E%3Cg fill='none' stroke='%23C9A468' stroke-width='1'%3E%3Cpath d='M32 1.4 37.1 5.5 32 9.6 26.9 5.5Z'/%3E%3Cpath d='M32 3.9 33.6 5.5 32 7.1 30.4 5.5Z' fill='%23C9A468'/%3E%3C/g%3E%3Cg fill='%23C9A468'%3E%3Ccircle cx='16' cy='5.5' r='1.5'/%3E%3Ccircle cx='48' cy='5.5' r='1.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(90deg,
      transparent 0%,
      rgba(201, 164, 104, 0.34) 16%,
      rgba(201, 164, 104, 0.34) calc(50% - 40px),
      transparent calc(50% - 40px),
      transparent calc(50% + 40px),
      rgba(201, 164, 104, 0.34) calc(50% + 40px),
      rgba(201, 164, 104, 0.34) 84%,
      transparent 100%);
  background-position: center, center;
  background-size: 64px 11px, 100% 1px;
  background-repeat: no-repeat, no-repeat;
}
.fstate::before { margin-bottom: var(--s10); }
.seo::before    { margin: var(--s8) 0 var(--s6); }
.fmark::before  { margin: var(--s8) 0 var(--s6); }
.connect::before { margin: var(--s8) 0 var(--s6); }

/* The blocks no longer need their own rules now the ornament separates them. */
.fstate { border-top: none; padding: 0 0 var(--s4); }
.connect { padding-top: 0; }
.fmark { border-top: none; margin-top: 0; padding-top: 0; }
.footer__bottom { border-top: 1px solid rgba(201, 164, 104, 0.16); }
/* No panel fill: the footer stays one colour, and the dashed group rules plus
   the brass label markers do the dividing. */
.seo__body { background: none; border: 0; padding: 0; }
.seo__group { border-top-color: rgba(201, 164, 104, 0.20); padding: 18px 0; }
.seo__group a { color: rgba(238, 232, 216, 0.72); }

@media (max-width: 720px) {
  .fstate::before { margin-bottom: var(--s6); }
  .seo::before, .fmark::before, .connect::before { margin: var(--s6) 0 var(--s4); }
  .footer__top { padding-top: var(--s8); padding-bottom: var(--s6); }
}

/* =========================================================
   FLOATING CONTACT, vertical speed dial
   The trigger keeps its WhatsApp/phone alternation as an attention cue, but a
   tap now opens four round actions stacked above it, and turns into a close
   control. Nothing is hidden behind a second gesture.
   ========================================================= */
.fab-dock {
  position: fixed; right: 20px; bottom: 20px; z-index: 420;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.fab-dock__items {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.fab-item {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: #F5F2E9; color: var(--olive-dark);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.65), 0 2px 5px rgba(0, 0, 0, 0.18);
  opacity: 0; transform: translateY(14px) scale(0.6);
  pointer-events: none;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
}
.fab-item svg { width: 23px; height: 23px; }
.fab-item--wa { background: #25D366; color: #fff; }
.fab-item--call { background: var(--gold); color: var(--olive-dark); }
.fab-item--ig { background: #E1306C; color: #fff; }
.fab-item--g { background: #fff; }
.fab-item__lab {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--olive-dark); color: #F5F2E9;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em;
  padding: 6px 11px; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.fab-dock.is-open .fab-item {
  opacity: 1; transform: none; pointer-events: auto;
}
.fab-dock.is-open .fab-item__lab { opacity: 1; }
/* Stagger from the bottom up, so the stack unrolls out of the trigger. */
.fab-dock.is-open .fab-item:nth-last-child(1) { transition-delay: 0.02s; }
.fab-dock.is-open .fab-item:nth-last-child(2) { transition-delay: 0.07s; }
.fab-dock.is-open .fab-item:nth-last-child(3) { transition-delay: 0.12s; }
.fab-dock.is-open .fab-item:nth-last-child(4) { transition-delay: 0.17s; }

/* Trigger */
.fab { position: static; }
.fab__face--close { opacity: 0; transform: scale(0.5) rotate(-45deg); }
.fab-dock.is-open .fab { background: var(--olive-dark); }
.fab-dock.is-open .fab__face--wa,
.fab-dock.is-open .fab__face--call { opacity: 0; transform: scale(0.5) rotate(35deg); }
.fab-dock.is-open .fab__face--close { opacity: 1; transform: none; }
.fab-dock.is-open .fab__pulse { opacity: 0; animation: none; }
.fab-dock.is-open .fab__tip { display: none; }

@media (max-width: 720px) {
  .fab-dock { right: 14px; bottom: 14px; gap: 11px; }
  .fab-dock__items { gap: 11px; }
  .fab-item { width: 44px; height: 44px; }
  .fab-item svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-item { transition: opacity 0.15s linear; transform: none; }
}


/* =========================================================
   REFINEMENT LAYER 7
   ========================================================= */

/* ---------- Floating button pulse ----------
   Setting .fab to position:static handed the absolutely positioned pulse to a
   far-away ancestor, so it stretched across it as a huge ellipse. Giving the
   trigger its own positioning context puts the ring back on the 50px circle,
   and the travel is smaller so it reads as a halo, not a shockwave. */
.fab { position: relative; }
.fab__pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  animation: fabPulse 2.6s var(--ease) infinite;
}
@keyframes fabPulse {
  0%   { transform: scale(1);    opacity: 0.5; }
  65%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* ---------- Hero mini subheader ----------
   A short brass rule with a lozenge, then the line itself: sentence case
   rather than shouty caps, clay against the ivory wash, and balanced so it
   never leaves one word stranded on a phone. */
.hero__tag {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 var(--s3);
  font-size: 1.02rem; font-weight: 500; letter-spacing: 0.005em;
  line-height: 1.45; color: var(--clay);
  text-transform: none;
  max-width: 52ch; text-wrap: balance;
}
.hero__tag-orn {
  flex: 0 0 auto; width: 42px; height: 9px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 0 9 4.5 4.5 9 0 4.5Z' fill='%23B4643C'/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(180,100,60,0.55) 0%, rgba(180,100,60,0.55) 100%);
  background-position: right center, left center;
  background-size: 9px 9px, 28px 1.5px;
  background-repeat: no-repeat, no-repeat;
}
.hero__tag-text em { font-style: normal; font-weight: 700; }
.hero__tag-dot { display: none; }
@media (max-width: 700px) {
  .hero__tag { font-size: 0.95rem; gap: 11px; max-width: 26ch; align-items: flex-start; }
  .hero__tag-orn { width: 30px; margin-top: 9px; background-size: 8px 8px, 18px 1.5px; }
}

/* =========================================================
   THE NIVARA STANDARD
   Laurel badges carrying the residence's own service promises. They are not
   awards and are worded so they cannot be read as any: no awarding body, no
   year, no ranking.
   ========================================================= */
.laurels { text-align: center; padding: 0 0 var(--s4); }
.laurels__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 10px;
}
.laurels__title {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 500; color: #F5F2E9;
  margin-bottom: var(--s6); text-wrap: balance;
}
.laurels__row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4); align-items: start;
}
/* The standards band takes its own ornament; the connect button tucks under
   it rather than being separated again. */
.laurels::before {
  content: "";
  display: block;
  height: 11px;
  margin: var(--s8) 0 var(--s6);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='11' viewBox='0 0 64 11'%3E%3Cg fill='none' stroke='%23C9A468' stroke-width='1'%3E%3Cpath d='M32 1.4 37.1 5.5 32 9.6 26.9 5.5Z'/%3E%3Cpath d='M32 3.9 33.6 5.5 32 7.1 30.4 5.5Z' fill='%23C9A468'/%3E%3C/g%3E%3Cg fill='%23C9A468'%3E%3Ccircle cx='16' cy='5.5' r='1.5'/%3E%3Ccircle cx='48' cy='5.5' r='1.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(90deg,
      transparent 0%,
      rgba(201, 164, 104, 0.34) 16%,
      rgba(201, 164, 104, 0.34) calc(50% - 40px),
      transparent calc(50% - 40px),
      transparent calc(50% + 40px),
      rgba(201, 164, 104, 0.34) calc(50% + 40px),
      rgba(201, 164, 104, 0.34) 84%,
      transparent 100%);
  background-position: center, center;
  background-size: 64px 11px, 100% 1px;
  background-repeat: no-repeat, no-repeat;
}
.connect::before { display: none; }
.connect { padding-top: var(--s2); }
@media (max-width: 720px) {
  .laurels::before { margin: var(--s6) 0 var(--s4); }
}


/* =========================================================
   REFINEMENT LAYER 8
   The standards badges as circular seals, and a heavier footer wordmark
   on phones.
   ========================================================= */

/* ---------- Seal badge ----------
   Pure geometry rather than illustration: a true circle from border-radius,
   two concentric brass rings, a gem at twelve o'clock and a notched ribbon
   across the foot. It is exact at any size, which a hand-drawn wreath was not.
   Every badge carries two lines of main text and one line of caption, so the
   four read as a set. */
.laurels__row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4); align-items: start;
}
.seal {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0; text-align: center;
}

.seal__disc {
  position: relative;
  width: 132px; height: 132px; border-radius: 50%;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px 10px;
  border: 1.5px solid rgba(201, 164, 104, 0.85);
  background:
    radial-gradient(circle at 50% 32%, rgba(201, 164, 104, 0.13) 0%, transparent 68%),
    rgba(255, 255, 255, 0.018);
  transition: transform var(--fast), border-color var(--fast);
}
/* The inner ring. */
.seal__disc::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(201, 164, 104, 0.42);
  border-radius: 50%;
  pointer-events: none;
}
/* A hairline tick at six o'clock, so the ribbon reads as sitting on the seal. */
.seal__disc::after {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  width: 42px; height: 1.5px; transform: translateX(-50%);
  background: #1B2314;
}
.seal:hover .seal__disc { transform: translateY(-3px); border-color: var(--gold-soft); }

/* The gem at twelve o'clock, echoing the footer separators. */
.seal__gem {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px; background: var(--gold);
  box-shadow: 0 0 0 3.5px #1B2314;
}

.seal__main {
  font-size: 13.5px; font-weight: 700; line-height: 1.26; letter-spacing: 0.045em;
  text-transform: uppercase; color: #F5F2E9;
}

/* The ribbon: a banner overlapping the foot of the seal, with V notches cut
   into both ends by clip-path. */
.seal__ribbon {
  position: relative; z-index: 2;
  margin-top: -13px;
  min-width: 116px; padding: 6px 20px;
  background: var(--gold); color: #1B2314;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1.5;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
}

.seal__sub {
  margin-top: 16px;
  font-size: 12.5px; line-height: 1.5; color: rgba(238, 232, 216, 0.6);
  max-width: 24ch; text-wrap: balance;
  min-height: 2.6em;   /* keeps the four captions on a shared baseline */
}

@media (max-width: 900px) {
  .laurels__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s3); }
}
@media (max-width: 420px) {
  .seal__disc { width: 118px; height: 118px; padding: 0 13px 9px; }
  .seal__main { font-size: 12px; letter-spacing: 0.035em; }
  .seal__ribbon { min-width: 102px; padding: 5px 16px; font-size: 9px; letter-spacing: 0.16em; }
  .seal__sub { font-size: 12px; margin-top: 13px; }
}

/* ---------- Footer wordmark on phones ----------
   It read as a thin outline lost inside the page gutter. Heavier stroke, a
   denser fill, tighter tracking and negative side margins so it runs almost
   to the screen edges. */
@media (max-width: 620px) {
  .fmark { margin-inline: calc(var(--gutter) * -1 + 5px); }
  .fmark span {
    font-size: 20.5vw;
    letter-spacing: 0.004em;
    -webkit-text-stroke: 1.5px rgba(231, 228, 216, 0.40);
    background: linear-gradient(180deg, rgba(231, 228, 216, 0.30) 0%, rgba(231, 228, 216, 0.07) 100%);
    -webkit-background-clip: text; background-clip: text;
  }
}


/* =========================================================
   REFINEMENT LAYER 9
   Sticky sub-header, and the speed dial alignment.
   ========================================================= */

/* ---------- Sticky sub-header ----------
   It lives inside <header class="nav">, which is already position:sticky, so
   it travels with the navigation instead of needing its own stacking. A warm
   brass wash with hairlines above and below, the line in clay, and a small
   diamond either side. */
:root { --sub-h: 36px; }

.subbar {
  background:
    linear-gradient(90deg, rgba(168,122,56,0.10) 0%, rgba(180,100,60,0.14) 50%, rgba(168,122,56,0.10) 100%),
    var(--cream);
  border-top: 1px solid rgba(168, 122, 56, 0.26);
  border-bottom: 1px solid rgba(168, 122, 56, 0.26);
}
.subbar__inner {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  height: var(--sub-h);
}
.subbar__text {
  margin: 0; min-width: 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--clay); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.subbar__text strong { font-weight: 800; }
/* The rule tapers away from the text on both sides. */
.subbar__orn {
  flex: 1 1 auto; max-width: 190px; height: 7px; min-width: 24px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M3.5 0 7 3.5 3.5 7 0 3.5Z' fill='%23B4643C'/%3E%3C/svg%3E"),
    linear-gradient(90deg, transparent 0%, rgba(180,100,60,0.5) 100%);
  background-position: right center, left center;
  background-size: 7px 7px, calc(100% - 13px) 1.5px;
  background-repeat: no-repeat, no-repeat;
}
.subbar__orn--r { transform: scaleX(-1); }

@media (max-width: 720px) {
  :root { --sub-h: 32px; }
  .subbar__inner { gap: 11px; }
  .subbar__text { font-size: 10.5px; letter-spacing: 0.09em; }
  .subbar__more { display: none; }   /* keeps the line on one row on a phone */
  .subbar__orn { max-width: 70px; }
}
@media (max-width: 360px) {
  .subbar__orn { display: none; }
}

/* Everything that hangs off the header height has to account for the new band. */
#why, #stories { scroll-margin-top: calc(var(--nav-h) + var(--util-h) + var(--sub-h) + 24px); }
.mobile-menu {
  top: calc(var(--nav-h) + var(--util-h) + var(--sub-h));
  height: calc(100vh - var(--nav-h) - var(--sub-h));
  height: calc(100dvh - var(--nav-h) - var(--sub-h));
}
.galcat-bar { top: calc(var(--nav-h) + var(--util-h) + var(--sub-h)); }
.book-box, .summary, .filters {
  top: calc(var(--nav-h) + var(--util-h) + var(--sub-h) + 20px);
}
.near-block { scroll-margin-top: calc(var(--nav-h) + var(--util-h) + var(--sub-h) + 70px); }
.gal-section { scroll-margin-top: calc(var(--nav-h) + var(--util-h) + var(--sub-h) + 70px); }

/* ---------- Speed dial alignment ----------
   The trigger still carried right:20px / bottom:20px from when it was the
   fixed element itself. Once the dock took over positioning and .fab became
   relative, those offsets shifted it 20px left and 20px up, which is why the
   close button sat off-axis and overlapped the WhatsApp circle. Clearing them
   puts it back in flow; centring the dock lines every circle up on one axis
   even though the trigger is a little larger than the actions. */
.fab {
  position: relative;
  right: auto; bottom: auto; left: auto; top: auto;
  margin: 0;
}
.fab-dock { align-items: center; }
.fab-dock__items { align-items: center; }
/* Labels hang off the left of each circle, so they must not affect alignment. */
.fab-item { flex: 0 0 auto; }


/* =========================================================
   REFINEMENT LAYER 10
   Sub-header: brass instead of clay, much smaller type, one short line,
   no decorative rules.
   ========================================================= */
:root { --sub-h: 30px; }

.subbar {
  /* A quieter wash now the type is small, so the band supports the line
     instead of competing with it. */
  background:
    linear-gradient(90deg, rgba(168,122,56,0.055) 0%, rgba(168,122,56,0.085) 50%, rgba(168,122,56,0.055) 100%),
    var(--cream);
  border-top: 1px solid rgba(168, 122, 56, 0.20);
  border-bottom: 1px solid rgba(168, 122, 56, 0.20);
}
.subbar__inner {
  display: flex; align-items: center; justify-content: center;
  height: var(--sub-h);
}
.subbar__text {
  margin: 0;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.34em; text-indent: 0.34em;   /* the indent balances the tracking */
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
/* The ornament rules are gone. */
.subbar__orn { display: none; }

@media (max-width: 720px) {
  :root { --sub-h: 27px; }
  .subbar__text { font-size: 8.5px; letter-spacing: 0.26em; text-indent: 0.26em; }
}
@media (max-width: 360px) {
  .subbar__text { font-size: 8px; letter-spacing: 0.2em; text-indent: 0.2em; }
}


/* =========================================================
   REFINEMENT LAYER 11
   Touch fixes, popular searches as pills, connect cluster spacing.
   ========================================================= */

/* ---------- Ticker on touch ----------
   A tap on a phone leaves the element in :hover, which latched
   animation-play-state to paused and froze the ticker for good. The pause is
   now only wired up on devices that genuinely hover. */
.ticker:hover .ticker__track { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
  .ticker:hover .ticker__track { animation-play-state: paused; }
}

/* ---------- Popular searches as pills ----------
   Transparent, brass-outlined chips instead of a run-on list with dot
   separators. Easier to scan and to tap. */
.seo__group {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 16px 0; line-height: 1.5;
}
.seo__label { flex: 0 0 100%; margin: 0 0 2px; }
.seo__group a {
  display: inline-block;
  margin: 0; padding: 7px 15px;
  border: 1px solid rgba(201, 164, 104, 0.34);
  border-radius: 100px;
  background: transparent;
  font-size: 12.5px; line-height: 1.35;
  color: rgba(238, 232, 216, 0.76);
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.seo__group a:hover, .seo__group a:focus-visible {
  background: rgba(201, 164, 104, 0.14);
  border-color: var(--gold-soft);
  color: #F5F2E9;
}
/* The interpuncts belonged to the old run-on layout. */
.seo__group a::after { content: none !important; }
@media (max-width: 620px) {
  .seo__group { gap: 7px; padding: 14px 0; }
  .seo__group a { padding: 6px 12px; font-size: 11.5px; }
}

/* ---------- Connect cluster ----------
   The expanded buttons sat on top of the toggle because the group was
   absolutely stacked above it with no room reserved. It is a normal column
   now: buttons above, toggle below, with the labels sitting under each
   circle rather than overlapping the next row. */
.connect {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding-top: var(--s2);
}
.connect__group {
  display: flex; flex-wrap: wrap; gap: 14px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.34s var(--ease), opacity 0.24s var(--ease), margin-bottom 0.34s var(--ease);
  margin-bottom: 0;
}
.connect.is-open .connect__group {
  max-height: 220px; opacity: 1; margin-bottom: var(--s5, 40px);
}
.connect__btn { margin-bottom: 22px; }   /* room for the label beneath */
.connect__lab { top: calc(100% + 6px); }
@media (max-width: 620px) {
  .connect__group { gap: 12px; }
  .connect__btn { width: 54px; height: 54px; }
}


/* =========================================================
   REFINEMENT LAYER 12
   The floating trigger alternates via CSS, not a timer.
   Browsers throttle setInterval in background tabs, which left the icon
   frozen. A compositor-driven animation keeps running everywhere, including
   on phones, and it can be purely decorative because tapping the trigger
   opens the menu rather than dialling.
   ========================================================= */
.fab {
  animation: fabTint 7s var(--ease) infinite;
}
.fab__face { animation-duration: 7s; animation-timing-function: var(--ease); animation-iteration-count: infinite; }
.fab__face--wa   { animation-name: fabFaceA; }
.fab__face--call { animation-name: fabFaceB; }
.fab__face--close { animation: none; }

@keyframes fabTint {
  0%, 44%   { background: #25D366; }
  50%, 94%  { background: var(--olive); }
  100%      { background: #25D366; }
}
@keyframes fabFaceA {           /* WhatsApp: visible for the first half */
  0%, 44%   { opacity: 1; transform: none; }
  50%, 94%  { opacity: 0; transform: scale(0.5) rotate(-40deg); }
  100%      { opacity: 1; transform: none; }
}
@keyframes fabFaceB {           /* Phone: visible for the second half */
  0%, 44%   { opacity: 0; transform: scale(0.5) rotate(40deg); }
  50%, 94%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: scale(0.5) rotate(40deg); }
}

/* Open: hold on the close mark, stop the cycling and the halo. */
.fab-dock.is-open .fab { animation: none; background: var(--olive-dark); }
.fab-dock.is-open .fab__face--wa,
.fab-dock.is-open .fab__face--call { animation: none; opacity: 0; transform: scale(0.5) rotate(35deg); }

/* Pause on hover, but only where hovering is a real thing. A tap on a phone
   can leave an element stuck in :hover, which would freeze it for good. */
@media (hover: hover) and (pointer: fine) {
  .fab:hover, .fab:hover .fab__face { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .fab, .fab__face { animation: none; }
  .fab { background: #25D366; }
  .fab__face--wa { opacity: 1; transform: none; }
  .fab__face--call { opacity: 0; }
}


/* =========================================================
   REFINEMENT LAYER 13
   Legal pages, date-format hints, hero tagline in brass.
   ========================================================= */

/* ---------- Hero tagline ----------
   Brass like the rest of the theme, and without the little rule that sat in
   front of it. */
.hero__tag { color: var(--gold); gap: 0; }
.hero__tag-orn { display: none; }
.hero__tag-text em { font-style: normal; font-weight: 700; color: var(--gold); }

/* ---------- Date-format hint ---------- */
.fmt {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); opacity: 0.75; margin-left: 6px;
}

/* ---------- Legal pages ---------- */
.lg-updated { margin-top: 14px; font-size: 13px; color: var(--muted); }
.lg-body { padding-bottom: var(--s10); }
.lg-notice {
  background: var(--warn-bg); border: 1px solid rgba(138, 99, 32, 0.3);
  color: #6E4E17; padding: 16px 20px; font-size: 14px; line-height: 1.6;
  margin: var(--s6) 0 var(--s8);
}
.lg-layout { display: grid; grid-template-columns: 236px 1fr; gap: var(--s8); align-items: start; }

.lg-toc {
  position: sticky; top: calc(var(--nav-h) + var(--util-h) + var(--sub-h) + 20px);
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--border); padding-left: var(--s3);
}
.lg-toc > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.lg-toc a {
  font-size: 13.5px; line-height: 1.45; color: var(--muted); padding: 5px 0;
  transition: color var(--fast);
}
.lg-toc a:hover { color: var(--olive-dark); }

.lg-content { min-width: 0; max-width: 74ch; }
.lg-sec { margin-bottom: var(--s8); scroll-margin-top: 160px; }
.lg-sec h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 600;
  padding-bottom: 12px; margin-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.lg-sec p { font-size: 15.5px; line-height: 1.75; color: var(--text); margin-bottom: 1.1em; }
.lg-sec strong { font-weight: 700; color: var(--olive-dark); }
.lg-sec em { font-style: italic; }

.lg-list { display: flex; flex-direction: column; gap: 11px; margin: 0 0 1.2em; }
.lg-list li {
  position: relative; padding-left: 22px;
  font-size: 15.5px; line-height: 1.7; color: var(--text);
}
.lg-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg);
}

.lg-table {
  display: grid; gap: 1px; background: var(--border-soft);
  border: 1px solid var(--border-soft); margin: 0 0 1.4em;
}
.lg-row { display: grid; grid-template-columns: 200px 1fr; gap: 1px; background: var(--border-soft); }
.lg-row > span { background: var(--white); padding: 13px 16px; font-size: 14.5px; line-height: 1.6; }
.lg-row > span:first-child { font-weight: 600; color: var(--olive-dark); background: var(--cream); }

@media (max-width: 900px) {
  .lg-layout { grid-template-columns: 1fr; gap: var(--s5, 40px); }
  .lg-toc {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 8px;
    border-left: 0; border-top: 1px solid var(--border); padding: var(--s3) 0 0;
  }
  .lg-toc > span { flex: 0 0 100%; margin-bottom: 4px; }
  .lg-toc a { border: 1px solid var(--border); padding: 6px 12px; border-radius: 100px; font-size: 12.5px; }
}
@media (max-width: 620px) {
  .lg-row { grid-template-columns: 1fr; }
  .lg-row > span:first-child { padding-bottom: 6px; }
  .lg-sec p, .lg-list li { font-size: 15px; }
}


/* =========================================================
   REFINEMENT LAYER 14
   Ticker speed and the reduced-motion fallback.
   ========================================================= */

/* At 46s the strip crawls at about 54px a second. On a desktop that reads as a
   slow drift; on a 375px phone one item takes seven seconds to cross, which
   looks stationary at a glance. The duration now scales with the screen so the
   apparent speed is similar everywhere. */
/* The track is a fixed ~4950px of content and the animation travels half of
   it, so speed is 2475/duration px per second. Tuned to stay in the 70 to 110
   range: unmistakably moving, still comfortable to read. */
.ticker__track { animation-duration: 36s; }            /* ~69 px/s */
@media (max-width: 1024px) { .ticker__track { animation-duration: 30s; } }  /* ~82 px/s */
@media (max-width: 720px)  { .ticker__track { animation-duration: 26s; } }  /* ~95 px/s */
@media (max-width: 420px)  { .ticker__track { animation-duration: 22s; } }  /* ~112 px/s */

/* If the phone has Reduce Motion switched on (iOS: Settings, Accessibility,
   Motion; Android: Accessibility, Remove animations) the browser stops the
   scroll and there is no overriding that, nor should there be. Rather than
   leaving a strip that looks broken, it becomes a deliberate static row: the
   duplicate is hidden and the items centre and wrap. */
@media (prefers-reduced-motion: reduce) {
  /* THE BUG THIS REPLACES: overflow was set to visible here so that a wrapped
     list would not be clipped. But .ticker__run is a flex item with
     flex: 0 0 auto, so it never shrank to the viewport. It stayed 1139px wide
     and, with nothing clipping it, the whole page could be panned sideways on
     a phone. The strip keeps its clipping; the run is made shrinkable. */
  .ticker { padding: 12px 0; overflow: hidden; }
  .ticker__track {
    animation: none;
    width: 100%; max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .ticker__run[aria-hidden="true"] { display: none; }
  /* flex: 1 1 100% lets it wrap inside the viewport instead of running past it. */
  .ticker__run {
    flex: 1 1 100%;
    min-width: 0; max-width: 100%;
    flex-wrap: wrap; justify-content: center; row-gap: 4px;
  }
  .ticker__item { white-space: nowrap; max-width: 100%; }
  .ticker__item:nth-child(n+5) { display: none; }
  .ticker__item:nth-child(4) .ticker__dot { display: none; }
  .ticker__dot { margin: 0 12px; }
}


/* =========================================================
   REFINEMENT LAYER 15
   Nothing may pan the page sideways on a phone.
   ========================================================= */

/* overflow-x on body alone is unreliable on mobile Safari: the viewport
   propagates from html, so a wide descendant can still pan the page even
   though a desktop browser contains it. Setting both is the reliable form.
   overflow-x: clip is preferred where supported because, unlike hidden, it
   does not make the element a scroll container, so position: sticky on the
   header keeps working. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* The ticker clips its own contents in every state, animated or not, so the
   4950px track can never reach the page's scroll width. */
.ticker { overflow: hidden; max-width: 100%; }

/* Full-bleed blocks pull out to the screen edges with negative margins. Cap
   them so a rounding difference on a real device cannot leave a stray pixel
   of horizontal scroll. */
.photo-grid, .amenity-strip, .home-gallery, .life-stack,
.gal-grid--fill, .mosaic-panel .mosaic, .feature-panel, .fmark {
  max-width: 100vw;
}


/* =========================================================
   REFINEMENT LAYER 16
   Ticker keeps moving on devices set to reduce motion, with a pause control.
   Date fields drawn by us so the format is always dd/mm/yyyy.
   ========================================================= */

/* ---------- Ticker ----------
   Earlier the strip stopped dead when the device asked for reduced motion,
   which on a phone left four wrapped lines and a tall static block. The strip
   now animates in every case, and the pause button beside it is the mechanism
   WCAG 2.2.2 asks for when content moves for more than five seconds. That is a
   better answer than an OS switch, because it works for everyone and it is
   visible. */
@media (prefers-reduced-motion: reduce) {
  .ticker { padding: 15px 0; overflow: hidden; }
  .ticker__track {
    animation-name: tickerScroll;
    animation-duration: 40s;          /* gentler, but still moving */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: max-content; max-width: none;
    flex-wrap: nowrap; justify-content: flex-start; row-gap: 0;
  }
  .ticker__run { display: flex; flex: 0 0 auto; flex-wrap: nowrap; min-width: 0; max-width: none; }
  .ticker__run[aria-hidden="true"] { display: flex; }
  .ticker__item { white-space: nowrap; max-width: none; }
  .ticker__item:nth-child(n+5) { display: inline-flex; }
  .ticker__item:nth-child(4) .ticker__dot { display: block; }
  .ticker__dot { margin: 0 30px; }
}

/* Paused by the button, or while hovered on a device that truly hovers. */
.ticker.is-paused .ticker__track { animation-play-state: paused !important; }

.ticker { position: relative; }
.ticker__pause {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(231, 228, 216, 0.10);
  border: 1px solid rgba(221, 188, 126, 0.28);
  color: var(--gold-soft);
  transition: background var(--fast), color var(--fast);
  z-index: 2;
}
.ticker__pause:hover { background: rgba(231, 228, 216, 0.2); color: #F5F2E9; }
.ticker__ic { grid-area: 1 / 1; display: grid; place-items: center; }
.ticker__ic svg { width: 11px; height: 11px; display: block; }
.ticker__ic--play { opacity: 0; }
.ticker.is-paused .ticker__ic--pause { opacity: 0; }
.ticker.is-paused .ticker__ic--play { opacity: 1; }
/* Keep the last item clear of the button. */
.ticker__track { padding-right: 44px; }
@media (max-width: 620px) {
  .ticker__pause { right: 5px; width: 24px; height: 24px; }
  .ticker__track { padding-right: 36px; }
}

/* ---------- Date field ----------
   The native control renders in the browser's locale, so it is gone. This is
   a text box we format ourselves plus a calendar we draw, which means
   dd/mm/yyyy on every device regardless of its language settings. */
.dfield { position: relative; display: flex; align-items: center; }
.dfield__text {
  width: 100%; border: 0; background: none; padding: 0;
  font: inherit; color: inherit;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.dfield__text:focus { outline: none; }
.dfield__text::placeholder { color: var(--muted); opacity: 0.75; }
.dfield__btn {
  flex: 0 0 auto; width: 30px; height: 30px; margin-left: 6px;
  display: grid; place-items: center; color: var(--muted);
  border-radius: 50%; transition: color var(--fast), background var(--fast);
}
.dfield__btn svg { width: 17px; height: 17px; }
.dfield__btn:hover { color: var(--olive); background: var(--cream); }

.dfield__pop {
  position: absolute; z-index: 60; top: calc(100% + 10px); left: 0;
  width: 274px; padding: 14px;
  background: var(--white); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.dhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dhead strong { font-size: 14px; font-weight: 600; color: var(--olive-dark); }
.dnav {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--olive); font-size: 16px; line-height: 1;
  transition: background var(--fast), border-color var(--fast);
}
.dnav:hover { background: var(--cream); border-color: var(--olive); }
.dweek, .dgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dweek span {
  text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted); padding-bottom: 6px;
}
.dcell {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.dcell:hover:not(:disabled) { background: var(--cream); border-color: var(--border); }
.dcell:disabled { color: var(--border); cursor: default; }
.dcell--pad { pointer-events: none; }
.dcell.is-today { border-color: var(--gold); font-weight: 600; }
.dcell.is-sel { background: var(--olive); color: #fff; border-color: var(--olive); }
.dfoot { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.dfoot button {
  flex: 1 1 auto; padding: 7px 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); color: var(--olive);
  transition: background var(--fast), border-color var(--fast);
}
.dfoot button:hover { background: var(--cream); border-color: var(--olive); }

/* On a phone the calendar opens directly under its field, which is full width
   there. It used to be pinned to the bottom of the screen with position:
   fixed, but the page's slide-in animation (a transform on #app) turned that
   into a position far down the page, so the calendar could not be seen. */
@media (max-width: 620px) {
  .dfield__pop {
    position: absolute; top: calc(100% + 8px); bottom: auto; left: 0; right: auto;
    transform: none;
    width: min(320px, calc(100vw - 40px));
  }
}
/* Inside the enquiry drawer the popover opens upward. */
.dfield--enq .dfield__pop { top: auto; bottom: calc(100% + 10px); }


/* =========================================================
   REFINEMENT LAYER 17
   THE ACTUAL ROOT CAUSE of the frozen ticker on a phone.

   The base stylesheet carries the standard accessibility kill-switch:

     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after { animation-duration: 0.01ms !important; ... }
     }

   That universal !important rule stops every animation on the page on any
   device with Reduce Motion enabled, which is why the ticker and the floating
   button sat dead on the phone while the desktop was fine. It stays in place
   for everything else, which is right. Only the two elements that now carry
   their own visible pause control are exempted, and a selector with real
   specificity beats the universal one even though both are !important.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* The ticker: exempt, because .ticker__pause is the WCAG 2.2.2 mechanism. */
  .ticker .ticker__track {
    animation-duration: 40s !important;
    animation-play-state: running;
  }
  .ticker.is-paused .ticker__track { animation-play-state: paused !important; }

  /* The floating contact button: a slow two-icon cross-fade, no travel.
     Restating the whole shorthand matters. An earlier reduced-motion block
     sets `.fab, .fab__face { animation: none }`, and overriding only the
     duration cannot revive an animation whose NAME is none, which is why the
     button still sat on one icon. The shorthand with !important sets every
     longhand at once and beats both that rule and the universal
     animation-duration: 0.01ms above. */
  .fab-dock .fab { animation: fabTint 9s var(--ease) infinite !important; }
  .fab-dock .fab .fab__face--wa { animation: fabFaceA 9s var(--ease) infinite !important; }
  .fab-dock .fab .fab__face--call { animation: fabFaceB 9s var(--ease) infinite !important; }
  /* The close mark never cycles, and the halo stays off: that is real travel,
     which is the kind of motion the setting is actually about. */
  .fab-dock .fab .fab__face--close { animation: none !important; }
  .fab-dock .fab .fab__pulse { animation: none !important; opacity: 0; }

  /* Everything else stays still, as the setting intends. */
}


/* =========================================================
   REFINEMENT LAYER 18
   Long room names, and per-day rates shown as such.
   ========================================================= */

/* A name like "Per-Day Accommodation" ran outside its cell in the residence
   panel. Grid children default to min-width:auto, which refuses to shrink
   below the longest word, so the text escaped the border. */
.feature-panel__rooms { grid-auto-rows: 1fr; }
.feature-panel__room { min-width: 0; overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
.feature-panel__room strong { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.feature-panel__room span { min-width: 0; overflow-wrap: anywhere; }

/* With six or more room types the three-up grid gets cramped; two columns
   read better and leave room for the longer names. */
@media (max-width: 1100px) {
  .feature-panel__rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The nightly alternative under the monthly "from" price. */
.feature-panel__day { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

/* Booking box rows: name on the left, price and badge on the right, each able
   to wrap without pushing the other out of the box. */
.book-box__row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.book-box__rname { flex: 1 1 46%; min-width: 0; overflow-wrap: anywhere; }
.book-box__rprice { flex: 0 1 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.book-box__rprice i { font-style: normal; font-size: 11.5px; color: var(--muted); }


/* =========================================================
   REFINEMENT LAYER 19
   The enquiry drawer's move-in date matches the fields around it.
   ========================================================= */

/* The date control is drawn by us rather than being an <input>, so it did not
   pick up .enq-input and sat in the form as bare text with no box. It now
   borrows the same frame, padding and focus ring as its neighbours. */
.enq-field .dfield {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  font-size: 15px;
  color: var(--text);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.enq-field .dfield:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(179, 140, 81, 0.15);
}
.enq-field .dfield__btn { margin-right: -4px; }


/* =========================================================
   REFINEMENT LAYER 20
   The availability page fits a phone.
   ========================================================= */

/* THE BUG THIS FIXES: a `1fr` grid column is shorthand for `minmax(auto, 1fr)`,
   and that `auto` minimum resolves to the column's min-content width. The
   booking panel carries 48px of padding plus a room-type line set to
   white-space: nowrap, so its min-content came to 479px. The column refused to
   go below that inside a 320px grid, the panel overhung the screen, and
   html { overflow-x: clip } then cut the right-hand side off rather than
   letting it scroll, so the controls were unreachable.

   minmax(0, 1fr) removes the floor, which lets the column take the width it is
   actually given and lets the ellipsis on the room-type line do its job. */
.booking-layout, .avail-controls, .pd-layout,
.pillars, .nearby, .feature-list, .confirm__grid {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1025px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (min-width: 721px) {
  .avail-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Grid and flex children default to min-width: auto, which is the same trap one
   level down. */
.booking-layout > *, .avail-controls > *, .control, .rt-select, .rt-select__trigger {
  min-width: 0;
}

/* 48px of padding on each side leaves 264px of usable width on a 360px phone.
   The panel keeps its generous inset on a desktop and takes a sensible one on
   a handset. */
@media (max-width: 720px) {
  .panel { padding: var(--s4); }
  .section { padding-top: 16px; padding-bottom: 48px; }
}
@media (max-width: 400px) {
  .panel { padding: 18px 16px; }
}

/* The room type can be a long line. It truncates rather than setting the width
   of everything around it, and the full text stays available as a title. */
.rt-select__trigger { gap: 10px; }
.rt-select__value { flex: 1 1 auto; }

/* The step rail scrolls on its own when it cannot fit, instead of pushing the
   page. Padding on the right keeps the last circle from being sliced in half,
   and the scrollbar is hidden because the rail is an indicator, not a control. */
@media (max-width: 720px) {
  .steps {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding: 0 2px 8px;
    margin-bottom: var(--s5);
  }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 auto; }
  .step__bar { flex: 0 0 26px; margin: 0 8px; }
}

/* Duration pills already wrap; this stops a single long pill from overhanging. */
.duration-pills > * { max-width: 100%; }

/* The date control is drawn by us rather than being an <input>, so it never
   picked up .control input and sat in the form as bare text with the calendar
   button outside the frame. It now takes the same box as the fields it sits
   beside, on the availability page and anywhere else .control is used. This
   supersedes the narrower .enq-field rule in layer 19. */
.control .dfield, .enq-field .dfield {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  background: var(--white);
  font-size: 15px;
  color: var(--text);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.enq-field .dfield { border-radius: var(--r); padding: 12px 14px; }
.control .dfield:focus-within { border-color: var(--olive); }
.enq-field .dfield:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(179, 140, 81, 0.15);
}
/* The hidden ISO input must not be styled as a visible field. */
.dfield input[type="hidden"] { display: none; }
.control .dfield__btn, .enq-field .dfield__btn { margin-right: -4px; }

/* The text box inside the control is a real <input>, so .control input and
   .enq-input were drawing a second border inside the frame above. The inner
   field is stripped back to bare text; the wrapper carries the box. */
.control .dfield__text, .enq-field .dfield__text {
  border: 0; background: none; padding: 0; border-radius: 0;
  box-shadow: none; font-size: inherit; width: 100%;
}
.control .dfield__text:focus, .enq-field .dfield__text:focus {
  outline: none; border: 0; box-shadow: none;
}


/* =========================================================
   REFINEMENT LAYER 21
   An amenity name never splits across two lines.
   ========================================================= */

/* "High-Speed Wi-Fi" broke as "High-" / "Speed Wi-Fi" once the amenities grid
   went multi-column and each cell narrowed. A hyphen is a break opportunity, so
   that label split at a width where "Wheelchair Access" of the same length did
   not. The label is now shortened in the data and, as a guard, no amenity name
   may break mid-name: the grid gives it a wider cell instead. */
.amenity > span, .amenity__name, .chip, .amen__name {
  white-space: nowrap;
}
/* Cells size to the longest name rather than a fixed count, so adding a longer
   amenity later widens the column instead of splitting the word. */
.amenities-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.amenity { min-width: 0; }