/* ==========================================================================
   TRA public-site design system — P5.A mockups (owner approval gate)
   One shared stylesheet for design_system.html · home.html · apartment.html
   Mobile-first at 390×844; desktop ≥1024px is the enhancement layer.
   Palette anchored on the logo navy (#032354 / #002248). Light theme only
   (dark mode out of scope for public site v1).
   ========================================================================== */

/* ------------------------------------------------------------- self-hosted
   fonts (same relative-path @font-face pattern as tokens.css's existing
   Allura block). Inter is a variable font — one file covers the whole
   weight axis, so font-weight is declared as a RANGE (400 800), not a
   single value; the browser interpolates any weight inside that range
   from the one file. Playfair Display and Mukta are static families —
   one file per weight, per Google's own delivery. Playfair Display is
   Latin-only (S1 DA25.3: the Devanagari-safety requirement E44 originally
   set for the display face is dropped — no active or planned Hindi-
   language content anywhere in the system); Mukta's Latin/Devanagari
   split (unicode-range scoped) stays, since Mukta is the body-text face
   and still carries that requirement. Allura is declared here too
   (byte-identical to tokens.css's block, just a two-levels-up relative
   path from static/public/css/) — the only source it had on the public
   site was the Google Fonts <link> in templates/public/base.html;
   removing that link (font-vendoring prompt) would otherwise have
   silently broken the .brand__name/.wordmark wordmark with no CDN and
   no local @font-face left to fall back on. */
@font-face {
  font-family: "Allura";
  src: url("../../brand/fonts/Allura-Regular.06c41c8927d5.woff2") format("woff2"),
       url("../../brand/fonts/Allura-Regular.ec47de04a5f2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../../brand/fonts/PlayfairDisplay-700-latin.9401d0214a93.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mukta";
  src: url("../../brand/fonts/Mukta-400-devanagari.0177c1af85b0.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Mukta";
  src: url("../../brand/fonts/Mukta-400-latin.5fd54c8638ba.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mukta";
  src: url("../../brand/fonts/Mukta-600-devanagari.cd9e14260735.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Mukta";
  src: url("../../brand/fonts/Mukta-600-latin.f1c753473335.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mukta";
  src: url("../../brand/fonts/Mukta-700-devanagari.aa0e47f3623e.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Mukta";
  src: url("../../brand/fonts/Mukta-700-latin.a4069cc51529.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- tokens */
:root {
  /* Brand — navy from the roundel logo */
  --navy-950: #021833;
  --navy-900: #002248;   /* logo mark on white */
  --navy-800: #032354;   /* brand primary (logo bg-blue fill) */
  --navy-700: #0E3A75;   /* hover / links */
  --navy-200: #B8C7DE;
  --navy-100: #E3EAF4;   /* tint fills */
  --navy-50:  #F0F4F9;

  /* Accent — heritage brass (warmth against the navy) */
  --brass-700: #8C6825;  /* accent text / hover: AA on white */
  --brass-600: #A97F2F;  /* decorative / large type only */
  /* S25 contrast-fix pass: lightened from #F3EBDB (.chip--brass text was
     4.30:1, FAIL) — HSL lightness only, same cream hue, barely visible
     change. */
  --brass-100: #F7F2E7;

  /* Warm neutrals */
  --sand-25: #FBFAF7;    /* page background */
  --sand-50: #F5F3EC;    /* alternate section fill */
  --sand-100:#EDEAE0;
  --line:    #E5E1D6;    /* hairlines / card borders */
  --ink:     #1B2334;    /* body text */
  --muted:   #5A6474;    /* secondary text: AA on sand-25 */

  /* Surface / inverse ink (S25 color audit) — names two roles this file has
     used as a bare #fff literal ~25 times with no token: .card/.accordion/
     .quote-card/.modal-like popups/.swatch all hardcode background:#fff
     (the "surface" role, no prior token — unlike tokens.css, which already
     has --surface); .btn--primary/.btn--brass/.hero/.section--navy/
     .site-footer a/h4 etc. all hardcode color:#fff for text-on-navy/brass
     (the "inverse ink" role). Same hex, two distinct semantic roles — kept
     as two tokens, not one, so a future reader never has to guess which
     meaning a given #fff site was reaching for. */
  --surface:     #ffffff;
  --ink-inverse: #ffffff;

  /* State */
  --ok:   #1B7A46;
  --warn: #A85D04;
  --err:  #B3261E;
  /* Soft/tint pairs (S25 color audit) — name the bg+border literals
     .chip--ok/--warn/--err already hardcode (tra.css .chip rules), mirroring
     tokens.css's own --ok-soft/--warn-soft/--danger-soft naming so the two
     surfaces read as one system. --brass-soft-border does the same for
     .chip--brass's border, whose bg half already had a token (--brass-100)
     but whose border half didn't. */
  --ok-soft:          #E8F4ED;
  --ok-soft-border:   #CBE5D6;
  /* S25 contrast-fix pass: lightened from #FBF0E0 (.chip--warn text was
     4.40:1, FAIL) — HSL lightness only, same cream/amber hue. Also updated
     in the .chip--warn rule itself (tra.css component section) so the
     token stays an accurate name for the real declaration. */
  --warn-soft:        #FCF3E7;
  --warn-soft-border: #F0DCBC;
  --err-soft:         #FBEAE9;
  --err-soft-border:  #F1CFCD;
  --brass-soft-border:#E7D9BC;

  /* Type — rem-based ramp on a 17px (mobile) / 18px (desktop) root, 1.25 ratio.
     Root scaling (html font-size below) rescales the whole ramp so the
     heading/body contrast is preserved at both sizes. */
  --font-display: "Playfair Display", Georgia, serif;   /* self-hosted, static 700 (S1 DA25.3 — Devanagari-safety dropped) */
  --font-text: "Mukta", "Segoe UI", system-ui, sans-serif; /* Devanagari-safe, self-hosted */
  --font-wordmark: "Allura", "Brush Script MT", cursive;   /* wordmark ONLY */
  --fs-xs:   0.8125rem;  /* 14/15 — captions, chips */
  --fs-sm:   0.875rem;   /* 15/16 — meta, buttons-sm */
  --fs-base: 1rem;       /* 17/18 — body */
  --fs-lead: 1.125rem;   /* 19/20 — lead paragraphs */
  --fs-h4:   1.25rem;    /* 21/23 */
  --fs-h3:   1.5625rem;  /* 27/28 */
  --fs-h2:   1.9375rem;  /* 33/35 */
  --fs-h1:      clamp(2rem, 5vw, 2.75rem);      /* ~34–50 */
  --fs-display: clamp(2.375rem, 6vw, 3.625rem); /* ~40–65 */

  /* Spacing — 4px base. S25 spacing audit: matches tokens.css's --sp-0..
     --sp-6 value-for-value through 32px (0,4,8,12,16,24,32) — genuinely
     the same progression that far, confirmed by grep, not assumed. Beyond
     that they diverge: tokens.css's 48px step is numbered --sp-8 (--sp-7
     is missing entirely, and --sp-8 itself is never consumed anywhere —
     see that file's own note), while this file's 48px step is the
     correctly-sequential --s-7, live in 6 real selectors. This file also
     continues to --s-8=64/--s-9=96 (also both live), which tokens.css has
     no equivalent of at all — Ops's scale simply stops at 48px. */
  --s-1: 0.25rem;  /*  4 */
  --s-2: 0.5rem;   /*  8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 3rem;     /* 48 */
  --s-8: 4rem;     /* 64 */
  --s-9: 6rem;     /* 96 */

  /* Shape & elevation */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  /* S25 shadow audit: real usage grepped across this file (7 call sites;
     21 total with ops.css+tapechart.css — over the "handful" threshold, so
     documented here rather than renamed, matching tokens.css's judgment).
     Real roles, as used today — NOT the same mapping as tokens.css's
     shadow-1/2/3, despite identical ordinal names:
       --shadow-1 = resting card: .card, .quote-card. Matches Ops's
         --shadow-1 resting-surface role.
       --shadow-2 = a genuine mix: .btn--primary:hover (button hover),
         .site-nav (open mobile-menu dropdown), .carousel__btn (a resting,
         not hover, circular control), .booking-card (the sticky booking
         rail's own resting elevation). No single label fits all four.
       --shadow-3 = a.card:hover — the card HOVER-LIFT role, i.e. the
         opposite ordinal from Ops, where --shadow-2 is the hover tier and
         --shadow-3 is floating/overlay. A reader assuming "shadow-N means
         the same thing on both surfaces" would be wrong at N=2 and N=3.
     Values also run heavier at tier 2 (larger offset/blur than Ops's
     shadow-2) and wider-but-more-transparent at tier 3 (larger offset/
     blur, lower alpha than Ops's shadow-3) — plausibly intentional (a
     softer, more diffuse "editorial" feel for the public marketing site
     vs. Ops's tighter, denser dashboard shadows), not fixed here —
     side-by-side comparison previously tracked in design-system/
     ui-preview.html, retired S196. */
  --shadow-1: 0 1px 2px rgba(2, 24, 51, .06), 0 1px 3px rgba(2, 24, 51, .08);
  --shadow-2: 0 4px 12px rgba(2, 24, 51, .08), 0 2px 4px rgba(2, 24, 51, .06);
  --shadow-3: 0 12px 32px rgba(2, 24, 51, .14);

  /* ---- Motion (S25 motion audit) — same --dur-fast(150ms)/--dur-base
     (200ms)/--ease-standard(ease) tiers as tokens.css, matched value-for-
     value: this file's own .btn transition (background-color/color/
     border-color/box-shadow) was already 150ms; .card's hover-lift
     (box-shadow/transform) and .accordion's chevron rotation were already
     200ms — real values, not invented. This file has no third/pulse tier
     (--dur-slow/--ease-pulse are Ops-only, tc-pulse's own animation, not
     duplicated here since nothing on the public site uses it). Previously
     implicit (no easing keyword written, relying on the CSS default,
     which IS "ease") — now explicit via --ease-standard, same rendered
     behavior. */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --ease-standard: ease;

  --container: 72rem;    /* 1152 */
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 106.25%; } /* 17px base */
@media (min-width: 1024px) { html { font-size: 112.5%; } } /* 18px base */
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand-25);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy-900);
  margin: 0 0 var(--s-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; color: var(--navy-900); margin: 0 0 var(--s-3); }
p  { margin: 0 0 var(--s-4); }
a  { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brass-700); }
ul { padding-left: 1.25rem; }
:focus-visible { outline: 3px solid var(--navy-700); outline-offset: 2px; border-radius: 2px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--s-4); }
.section { padding-block: var(--s-7); }
.section--tint { background: var(--sand-50); }
.section--navy { background: var(--navy-900); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }

/* Section headers: brass eyebrow + display heading */
.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-700);
  margin-bottom: var(--s-2);
}
.section-head { max-width: 44rem; margin-bottom: var(--s-6); }
.lead { font-size: var(--fs-lead); color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

/* ------------------------------------------------------- mockup ribbon */
.mock-ribbon {
  background: var(--navy-950);
  color: var(--navy-200);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--s-1) var(--s-4);
  letter-spacing: .04em;
}

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 247, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 4rem;
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand__mark { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.brand__name {
  /* Allura is wordmark-only — never buttons, headings, or body */
  font-family: var(--font-wordmark);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--navy-900);
  white-space: nowrap;
}
/* Allura ships no bold cut — thicken the strokes instead (P5.A-fix1b). */
.brand__name, .wordmark {
  -webkit-text-stroke: 0.5px currentColor;
  text-shadow: 0 0 0.4px currentColor, 0 0 0.4px currentColor; /* non-WebKit fallback */
}
.wordmark { font-family: var(--font-wordmark); line-height: 1; color: var(--navy-900); }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--navy-900); cursor: pointer; background: #fff;
}
.site-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: var(--s-2);
  background: var(--sand-25);
  border-bottom: 1px solid var(--line);
  padding: var(--s-4);
  box-shadow: var(--shadow-2);
}
.nav-toggle:checked ~ .site-nav { display: flex; }
.site-nav a { text-decoration: none; font-weight: 600; color: var(--navy-900); padding: var(--s-2) 0; }
.site-nav .btn { justify-content: center; }
@media (min-width: 1024px) {
  .nav-burger { display: none; }
  .site-nav {
    display: flex; position: static;
    flex-direction: row; align-items: center; gap: var(--s-6);
    margin-left: auto; background: none; border: 0; padding: 0; box-shadow: none;
  }
  .site-nav a { padding: 0; }
}

/* -------------------------------------------------------- account avatar
   S71 fix: the previous checkbox-hack dropdown (S70) put "Guest Dashboard"
   one extra tap behind the avatar and nested it inside the hamburger's own
   .site-nav, contrary to the Airbnb/Booking.com reference this whole
   entry-point arc is built against — a signed-in avatar there is a direct
   link to the account/dashboard screen, full stop, independent of any
   drawer. Logout moved into the portal's own Profile screen (S71) rather
   than living in this menu at all. A plain link needs no checkbox/toggle
   machinery, so none is here — and it sits OUTSIDE <nav class="site-nav">
   (a sibling of .nav-toggle/.nav-burger in the header), so the hamburger
   drawer's own content (Apartments/Location/FAQs/Contact/Guest sign in)
   is untouched by this change. Placed as the LAST child of .site-header__
   inner (after .nav-burger and .site-nav, not before): on mobile it then
   sits right beside the hamburger icon at the row's already-pushed-right
   edge (.nav-burger's own margin-left:auto carries it along); at desktop,
   .site-nav's own margin-left:auto pushes the nav group right and this
   simply follows immediately after via the row's existing gap — no
   margin of its own needed either way. */
.account-avatar-link { display: inline-flex; flex: none; }
.account-avatar-link__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--navy-800); color: #fff;
  font-weight: 700; font-size: var(--fs-sm);
}

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: 600 var(--fs-base)/1.2 var(--font-text);
  padding: 0.75rem 1.375rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.btn--primary { background: var(--navy-800); color: #fff; }
.btn--primary:hover { background: var(--navy-700); color: #fff; box-shadow: var(--shadow-2); }
.btn--outline { border-color: var(--navy-800); color: var(--navy-800); background: transparent; }
.btn--outline:hover { background: var(--navy-50); color: var(--navy-800); }
.btn--ghost { color: var(--navy-800); background: transparent; }
.btn--ghost:hover { background: var(--navy-50); color: var(--navy-800); }
.btn--brass { background: var(--brass-700); color: #fff; }
.btn--brass:hover { background: var(--brass-600); color: #fff; }
.btn--sm { font-size: var(--fs-sm); padding: 0.5rem 1rem; }
.btn--lg { font-size: var(--fs-lead); padding: 0.9rem 1.75rem; }
.btn--block { width: 100%; }
.btn svg { flex: none; }

/* ----------------------------------------------------------------- hero */
.hero { position: relative; background: var(--navy-950); color: #fff; overflow: hidden; }
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.hero__inner {
  position: relative;
  padding-block: var(--s-8) var(--s-7);
  max-width: 46rem;
}
.hero h1 { color: #fff; font-size: var(--fs-display); margin-bottom: var(--s-3); }
.hero .lead { color: var(--navy-200); margin-bottom: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero .btn--outline { border-color: #fff; color: #fff; }
.hero .btn--outline:hover { background: rgba(255, 255, 255, .12); color: #fff; }
@media (min-width: 1024px) { .hero__inner { padding-block: var(--s-9) var(--s-8); } }

/* ----------------------------------------------------------- trust strip */
.trust-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.trust-item { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--navy-900); }
.trust-item .muted { font-weight: 400; }
.star { color: var(--brass-600); }

/* ---------------------------------------------------------------- cards */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); color: inherit; }
.card__media { aspect-ratio: 4 / 3; background: var(--sand-100); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--s-4) var(--s-4) var(--s-5); }
.card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--navy-900); margin: 0 0 var(--s-1); }
.card__meta { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.card__cta { font-weight: 600; color: var(--navy-700); font-size: var(--fs-sm); }

.card-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
/* two-up variant: for grids inside the booking-rail layout */
@media (min-width: 1024px) { .card-grid--two { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------- chips / pills */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--navy-900);
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}
.chip--brass { background: var(--brass-100); border-color: #E7D9BC; color: var(--brass-700); }
.chip--ok    { background: #E8F4ED; border-color: #CBE5D6; color: var(--ok); }
.chip--warn  { background: #FCF3E7; border-color: #F0DCBC; color: var(--warn); }
.chip--err   { background: #FBEAE9; border-color: #F1CFCD; color: var(--err); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-row--scroll {
  flex-wrap: nowrap; overflow-x: auto;
  padding-bottom: var(--s-2);
  scrollbar-width: none;
}
.chip-row--scroll::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .chip-row--scroll { flex-wrap: wrap; overflow: visible; } }

/* ------------------------------------------------------------- accordion */
.accordion { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.accordion + .accordion { margin-top: var(--s-3); }
.accordion summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-weight: 600; color: var(--navy-900);
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  flex: none; width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--brass-700); border-bottom: 2px solid var(--brass-700);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-standard);
}
.accordion[open] summary::after { transform: rotate(225deg); }
.accordion__body { padding: 0 var(--s-5) var(--s-5); color: var(--muted); }

/* ------------------------------------------------------ landmark strip */
.landmark-strip { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
.landmark {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
}
.landmark strong { color: var(--navy-900); font-weight: 600; }
.landmark span { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
@media (min-width: 1024px) { .landmark-strip { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------- type cards (home IA) */
.card--type .card__media { aspect-ratio: 1 / 1; }
.card__price { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.card__price strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h4); color: var(--navy-900);
}

/* --------------------------------------- horizontal snap scroller (cards) */
.scroller {
  display: flex; gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-3);
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { flex: 0 0 78%; max-width: 20rem; scroll-snap-align: start; }
@media (min-width: 640px)  { .scroller > * { flex-basis: 44%; } }
@media (min-width: 1024px) { .scroller > * { flex-basis: 30%; } }
/* full-bleed on mobile: cards run edge-to-edge past the container padding */
.scroller--bleed { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); }
@media (min-width: 1024px) { .scroller--bleed { margin-inline: 0; padding-inline: 0; } }

/* -------------------------------------------- location: map embed + chips */
.location-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .location-grid { grid-template-columns: 2fr 1fr; align-items: start; }
}
.map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-50);
}
@media (min-width: 640px) { .map-embed { aspect-ratio: 16 / 9; } }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.location-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-content: flex-start; }
@media (min-width: 1024px) { .location-chips { flex-direction: column; align-items: flex-start; } }

/* ---------------------------------------------------------- testimonials */
.quote-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
}
.quote-card blockquote { margin: 0 0 var(--s-4); color: var(--ink); }
.quote-card figcaption { display: flex; align-items: center; gap: var(--s-3); }
.avatar {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-100); color: var(--navy-800);
  font-weight: 700; font-size: var(--fs-sm);
}

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--navy-950); color: var(--navy-200); margin-top: var(--s-8); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--brass-600); text-decoration: underline; }
.site-footer__grid {
  display: grid; gap: var(--s-6); grid-template-columns: 1fr;
  padding-block: var(--s-7);
}
.site-footer h4 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .12em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: var(--s-4);
  font-size: var(--fs-xs);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between;
}
.footer-cta { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
/* S25 contrast-fix pass: base darkened from #128C4B (4.30:1, FAIL) to
   #118749 — HSL lightness only, same WhatsApp-adjacent green (still
   flagged as a deliberate one-off, not tokenized — see the S25 color
   audit). :hover was already passing (5.42:1) and is unchanged. */
.btn--whatsapp { background: #118749; color: #fff; }
.btn--whatsapp:hover { background: #0E7A40; color: #fff; }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; } }

/* ------------------------------------------------------------- carousel */
.carousel { position: relative; background: var(--navy-950); }
.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.carousel__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carousel__slide-btn { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; }
@media (min-width: 1024px) {
  .carousel { border-radius: var(--r-lg); overflow: hidden; }
  .carousel__slide img { aspect-ratio: 16 / 9; }
}
.carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%; border: 0;
  background: rgba(251, 250, 247, .92); color: var(--navy-900);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-2);
}
.carousel__btn:hover { background: #fff; }
.carousel__btn--prev { left: var(--s-3); }
.carousel__btn--next { right: var(--s-3); }
.carousel__counter {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  background: rgba(2, 24, 51, .72); color: #fff;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 0.2rem 0.7rem; border-radius: var(--r-pill);
}

/* ------------------------------------------------- property gallery strip
   (S171-GALLERY-1) — hero photo stays the existing full-bleed .hero__img;
   this is only the horizontal scroll-snap strip of the property's
   remaining photos below it, reusing .carousel__track's own scroll-snap
   mechanism (thumbnail-sized slides instead of full-bleed ones) rather
   than a second, bespoke scroller. */
.gallery-strip__track {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery-strip__track::-webkit-scrollbar { display: none; }
.gallery-strip__item {
  flex: 0 0 auto;
  width: 9rem;
  scroll-snap-align: start;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  display: block;
}
.gallery-strip__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.hero__img { cursor: pointer; }

/* -------------------------------------------------------------- lightbox
   (S171-GALLERY-1) — shared full-screen viewer for Property + Apartment
   public galleries (static/public/js/lightbox.js builds/controls this
   markup; one instance per page, reused across every trigger). */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2, 8, 20, .94);
  display: flex; align-items: center; justify-content: center;
}
/* [hidden] and .lightbox are equal-specificity (0,0,1,0) selectors, and
   this stylesheet loads after the UA stylesheet's own [hidden]{display:
   none}, so without this override the plain `hidden` attribute
   lightbox.js toggles on close() would never actually hide the overlay. */
.lightbox[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }
.lightbox__figure { margin: 0; max-width: min(92vw, 64rem); max-height: 86vh; text-align: center; }
.lightbox__img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--r-md); }
.lightbox__caption { color: #fff; opacity: .85; font-size: var(--fs-sm); margin-top: var(--s-2); }
.lightbox__close, .lightbox__btn {
  position: absolute; border: 0; cursor: pointer;
  background: rgba(251, 250, 247, .16); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.lightbox__close:hover, .lightbox__btn:hover { background: rgba(251, 250, 247, .3); }
.lightbox__close { top: var(--s-3); right: var(--s-3); width: 2.5rem; height: 2.5rem; }
.lightbox__btn { top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; }
.lightbox__btn--prev { left: var(--s-3); }
.lightbox__btn--next { right: var(--s-3); }
.lightbox__counter {
  position: absolute; left: 50%; bottom: var(--s-3); transform: translateX(-50%);
  background: rgba(251, 250, 247, .16); color: #fff;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 0.2rem 0.7rem; border-radius: var(--r-pill);
}
@media (max-width: 640px) {
  .lightbox__close { width: 2.25rem; height: 2.25rem; top: var(--s-2); right: var(--s-2); }
  .lightbox__btn { width: 2.25rem; height: 2.25rem; }
}

/* ------------------------------------------------- clamp / show-more (CSS-only) */
.clamp-toggle { position: absolute; opacity: 0; pointer-events: none; }
.clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-toggle:checked ~ .clamp-5 { -webkit-line-clamp: unset; display: block; }
.clamp-label {
  display: inline-block; margin-top: var(--s-2);
  font-weight: 600; color: var(--navy-700);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.clamp-label:hover { color: var(--brass-700); }
.clamp-label::after { content: attr(data-more); }
.clamp-toggle:checked ~ .clamp-label::after { content: attr(data-less); }
.reveal { display: none; }
.clamp-toggle:checked ~ .reveal { display: block; }
.clamp-toggle ~ label .when-open { display: none; }
.clamp-toggle:checked ~ label .when-open { display: inline; }
.clamp-toggle:checked ~ label .when-closed { display: none; }

/* ------------------------------------------------ apartment page pieces */
.title-block { padding-block: var(--s-5) var(--s-4); }
.title-block h1 { margin-bottom: var(--s-2); }
.title-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); color: var(--muted); }
.title-meta strong { color: var(--navy-900); }
.title-meta li { list-style: none; }
.title-meta li + li::before { content: "·"; margin-right: var(--s-3); color: var(--line); }
.title-meta { padding: 0; margin: 0; }

.highlights { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
.highlight {
  display: flex; gap: var(--s-4); align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-4);
}
.highlight svg { flex: none; color: var(--brass-700); }
.highlight strong { display: block; color: var(--navy-900); }
.highlight span { color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 1024px) { .highlights { grid-template-columns: repeat(3, 1fr); } }

.amenity-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; margin: 0; padding: 0; }
.amenity-grid li { list-style: none; display: flex; gap: var(--s-3); align-items: center; }
.amenity-grid svg { flex: none; color: var(--navy-700); }
@media (min-width: 640px) { .amenity-grid { grid-template-columns: repeat(2, 1fr); } }
.amenity-group { margin-top: var(--s-5); }
.amenity-group h4 { margin-bottom: var(--s-2); }
.amenity-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .amenity-group ul { grid-template-columns: repeat(2, 1fr); } }
.amenity-group li { padding-left: var(--s-5); position: relative; }
.amenity-group li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.45rem; height: 0.28rem;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}

/* apartment layout: single column on mobile in reading order; on desktop the
   booking rail (.apt-rail, placed after amenities in the DOM) moves to a
   sticky right column spanning the whole block. */
.apt-layout > section, .apt-rail { padding-block: var(--s-6); }
.apt-layout > section { border-top: 1px solid var(--line); }
.apt-layout > section:first-child { border-top: 0; }
@media (min-width: 1024px) {
  .apt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    column-gap: var(--s-7);
  }
  .apt-layout > * { grid-column: 1; }
  .apt-rail { grid-column: 2; grid-row: 1 / span 40; padding-block: 0 var(--s-6); }
  .booking-card { position: sticky; top: 5.5rem; margin-top: var(--s-6); }
}

.booking-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s-5);
}
.booking-card__price { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-4); }
.booking-card__price strong { font-size: var(--fs-h3); font-family: var(--font-display); color: var(--navy-900); font-weight: 700; }
.field { display: grid; gap: var(--s-1); margin-bottom: var(--s-3); min-width: 0; }
.field label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.field input, .field select {
  font: inherit; color: var(--ink);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--sand-25);
  width: 100%;
  min-width: 0; /* date inputs have a wide intrinsic min-width — let them shrink */
}
.field input:focus, .field select:focus { outline: 2px solid var(--navy-700); border-color: var(--navy-700); }
/* stacked on the narrowest phones; side-by-side from ~400px up */
.field-row { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 400px) { .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.sleep-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sleep-grid { grid-template-columns: 1fr 1fr; } }

/* sticky mobile bottom bar */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: #fff; border-top: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
  box-shadow: 0 -4px 16px rgba(2, 24, 51, .10);
}
.sticky-bar strong { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--navy-900); }
.sticky-bar .muted { display: block; font-size: var(--fs-xs); }
body.has-sticky-bar { padding-bottom: 5rem; }
@media (max-width: 379px) {
  .sticky-bar .btn { white-space: nowrap; font-size: var(--fs-sm); padding: 0.6rem 1rem; }
  .sticky-bar strong { font-size: var(--fs-base); }
}
@media (min-width: 1024px) { .sticky-bar { display: none; } body.has-sticky-bar { padding-bottom: 0; } }

/* --------------------------------------------- design-system page only */
.ds-section { padding-block: var(--s-6); border-top: 1px solid var(--line); }
.swatch-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.swatch { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.swatch__chip { height: 4.5rem; }
.swatch__meta { padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); }
.swatch__meta strong { display: block; color: var(--navy-900); }
.swatch__meta code { color: var(--muted); }
.type-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); padding-block: var(--s-3); border-bottom: 1px dashed var(--line); }
.type-row code { flex: none; width: 11rem; color: var(--muted); font-size: var(--fs-xs); }
.space-row { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-1); }
.space-row code { width: 9rem; color: var(--muted); font-size: var(--fs-xs); }
.space-bar { height: 1rem; background: var(--brass-600); border-radius: 2px; }
.demo-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.demo-block { margin-top: var(--s-4); }