/* SereneMind Residences — design tokens + global styles
   Implemented from "SereneMind Website.dc.html" (Claude Design). */

:root {
  /* Palette */
  --color-bg: #F7F4EC;
  --color-surface: #FFFFFF;
  --color-alt: #E8DFD0;
  --color-border: #DDD0B6;          /* hairlines: Muted Gold softened into ivory (CI: gold for rules) */
  --color-ink: #3B2B20;             /* body text: Espresso, a very dark brown on the hue of the renders' wood
                                       (#5A3720) and the CI's warm golds; 12.3:1 on Warm Ivory (client, 26 Sep) */
  --color-muted: #5E4B3C;           /* secondary body text, the same brown lighter: 7.5:1 on ivory, 6.2:1 on beige */
  --color-brand: #1F5A5A;
  --color-brand-dark: #123B3B;
  --color-heading: var(--color-brand);   /* every header and sub-header: the play-button teal (client, 26 Sep) */
  --color-brand-tint: #E2EDE6;
  --color-brand-border: #A8C3B0;
  /* Client, 25 Sep: no dark-green blocks. Every colour block (footer, invitation bands) is the
     CI's soft Beige flowing into Sage Green, left to right, as in the CI website mock-up (p.18).
     White fails on sage (1.9:1), so type is Charcoal (6.7:1+) and headings deep teal. */
  --color-on-wave: #3B2B20;
  --color-footer-bg: #C8D7C9;
  --color-footer-border: rgba(59, 43, 32, 0.14);
  --color-footer-link: #123B3B;
  --color-footer-text: #3B2B20;
  --color-footer-muted: #4E3D30;
  --gradient-sage-band: linear-gradient(115deg, #E8DFD0 0%, #C8D7C9 45%, #A8C3B0 100%);
  --gradient-sage-footer: linear-gradient(100deg, #E8DFD0 0%, #C8D7C9 40%, #A8C3B0 100%);

  /* Section accents */
  --accent-purple: #1F5A5A;
  --accent-purple-tint: #E9EFE7;
  --accent-purple-border: #A8C3B0;
  --accent-purple-ink: #1F5A5A;
  --accent-orange: #1F5A5A;
  --accent-gold: #B59A62;
  --rule-gold: var(--accent-gold);  /* CI p.16/17: fine gold rules and gold trim; decorative only, never text */
  --rim-gold: 2px solid var(--accent-gold);   /* every box: the same gold rim as the footer logo panel and price card (client, 27 Sep) */
  --accent-sage: #A8C3B0;
  --accent-teal: #1F5A5A;
  --accent-green: #1F5A5A;
  --accent-pink: #1F5A5A;
  --accent-blue: #1F5A5A;

  /* Type */
  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  --text-hero: clamp(2.1rem, 1.2rem + 3.4vw, 3rem);
  --text-page-title: clamp(1.85rem, 1.15rem + 2.6vw, 2.5rem);

  /* Layout */
  --container: 1180px;
  --space-page-y: clamp(2.75rem, 2rem + 3vw, 4rem);
  --radius-card: 24px;
  --radius-panel: 24px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-reveal: 1100ms;
  --reveal-stagger: 190ms;
  --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  min-height: 100vh;
  line-height: 1.5;
}

::selection { background: var(--accent-sage); }

:focus-visible {
  outline: 3px solid var(--color-brand-dark);
  outline-offset: 2px;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-heading);
  /* Headings break into even lines, so no word is left alone on the last one; the brand name is
     held together in the HTML (SereneMinds Residences). */
  text-wrap: balance;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FCFAF4;               /* solid: a backdrop blur behind a 95%-opaque bar was invisible
                                       but re-rendered on every scroll frame */
  border-bottom: 1px solid var(--rule-gold);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 8px 20px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

.brand > span:last-child {
  display: flex;
  flex-direction: column;
}

.brand { color: var(--color-brand); --logo-heart: var(--accent-gold); }

.brand-logo {
  height: 42px;
  width: auto;
  flex-shrink: 0;
}

/* Brand CI v5.0 (p.18): the header carries the emblem only, on the left. The artwork is never
   recoloured, shadowed or stretched, so it is sized by height alone. */
.brand-emblem {
  display: block;
  height: 56px;
  width: auto;
}
@media (max-width: 860px) {
  .brand-emblem { height: 48px; }
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
  color: var(--color-brand);
}

.brand-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.site-nav a {
  padding: 7px 9px;
  font-family: 'Montserrat', var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  border-radius: 6px;
  white-space: nowrap;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.site-nav a:hover {
  color: var(--color-brand-dark);
  background: var(--color-brand-tint);
  text-decoration: none;
}
.site-nav a[aria-current="page"] {
  color: var(--color-brand-dark);
  font-weight: 700;
  background: var(--color-brand-tint);
}

/* Grouped tabs (client request, 19 Sep): Team sits under Our care model and
   the virtual tour under Accommodation, taking the menu from 11 tabs to 8.
   The parent stays a real link. At desktop widths the sub-menu opens on hover
   or keyboard focus; in the collapsed mobile list it is always visible,
   indented under its parent. */
.nav-group { position: relative; }
.site-nav .nav-group > a { position: relative; padding-right: 22px; }
.nav-group > a::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
.nav-group.is-active > a { color: var(--color-brand-dark); font-weight: 700; }
.nav-group::before {           /* hover bridge across the gap below the tab */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 10px;
}
.nav-sub {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 170px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 76, 74, 0.12);
  z-index: 50;
}
.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub { display: block; }
.nav-sub a { display: block; padding: 9px 12px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--color-surface);
  color: var(--color-brand-dark);
  border: 1.5px solid var(--color-brand-border);
  border-radius: 8px;
  padding: 8px 14px;
  font: 700 13.5px var(--font-body);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--color-brand-tint); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-weight: 700;
  font-size: 16px;
  padding: 10px 26px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-body);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--color-brand); color: #fff; }
.btn-primary:hover { background: var(--color-brand-dark); color: #fff; }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-brand-dark);
  border: 1.5px solid var(--color-brand-border);
}
.btn-secondary:hover { background: var(--color-brand-tint); color: var(--color-brand-dark); }

.btn-inverse { background: #fff; color: var(--color-brand-dark); }
.btn-inverse:hover { background: var(--color-brand-tint); color: var(--color-brand-dark); }

.header-cta {
  font-size: 14.5px;
  min-height: 42px;
  padding: 6px 20px;
  flex-shrink: 0;
}

/* Enquire button: Forest Teal like every other primary button (client, 25 Sep: no gold-filled
   buttons; gold stays for rules and trims). */
.btn-primary.header-cta {
  font-family: 'Montserrat', var(--font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------- Page scaffolding ---------- */

.page {
  padding-block: var(--space-page-y);
}

.page-intro {
  max-width: 720px;
  margin-bottom: 44px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--rule-gold);
}

/* Sub-headers break into even lines too (client, 26 Sep: mind where headers break) */
.eyebrow, .footer-heading, .room-card .room-name, .resource-card .resource-tag { text-wrap: balance; }

.eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--color-heading);
}

.page-intro h1,
.page-intro .section-title {
  font-weight: 600;
  color: var(--color-heading);
  font-size: var(--text-page-title);
  line-height: 1.12;
  margin: 0 0 16px;
}

/* Merged "Our care" page */
.page-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.page-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--color-brand-tint);
  border: 1px solid var(--color-brand-border);
  color: var(--color-brand-dark);
  font-weight: 700;
  font-size: 15px;
}
.page-jump a:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
  text-decoration: none;
}

.merged-section { scroll-margin-top: 90px; }
.merged-section + .merged-section {
  margin-top: var(--space-page-y);
  padding-top: var(--space-page-y);
  border-top: 1px solid var(--rule-gold);
}

.page-intro p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0;
}

/* ---------- Cards ---------- */

.card {
  background: var(--color-surface);
  border: var(--rim-gold);
  border-radius: var(--radius-card);
  padding: 26px;
}

.card h2, .card h3 {
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 6px;
}

.card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .card-grid-3 { grid-template-columns: 1fr; } }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Image placeholders ---------- */

.image-slot {
  width: 100%;
  height: 100%;
  min-height: 150px;
  border: 1.5px dashed var(--color-brand-border);
  border-radius: var(--radius-card);
  background:
    linear-gradient(160deg, var(--color-brand-tint), #fff 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: var(--color-muted);
  font-size: 13px;
}

.media-frame {
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--gradient-sage-band);
  border: var(--rim-gold);
  border-radius: var(--radius-panel);
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-band h2 {
  font-weight: 800;
  font-size: 26px;
  color: var(--color-heading);
  margin: 0 0 6px;
}

.cta-band p {
  font-size: 15.5px;
  color: var(--color-on-wave);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Home ---------- */

.hero {
  background: var(--color-alt);
  border-bottom: 1px solid var(--rule-gold);
}

/* On Our Residence the former home page follows the room tour, so its band has a gold rule above
   as well as below (client, 27 Sep) */
.hero--below { border-top: 1px solid var(--rule-gold); margin-top: clamp(56px, 7vw, 96px); }

.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(44px, 4vw + 24px, 72px) clamp(20px, 4vw, 32px) clamp(40px, 4vw + 20px, 64px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.hero .badge {
  display: inline-block;
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
  border: 1px solid var(--rule-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero h1,
.hero .hero-title {
  font-weight: 600;
  color: var(--color-heading);
  font-size: var(--text-hero);
  line-height: 1.08;
  margin: 0 0 18px;
}

.hero p {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0 0 28px;
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-media {
  height: 400px;
  min-width: 0;
}

.home-card {
  display: block;
  color: inherit;
  transition: border-color var(--duration-fast) ease;
}
.home-card:hover { text-decoration: none; color: inherit; }
.home-card h2 { font-size: 19px; margin-bottom: 8px; }
.home-card .more {
  margin-top: 14px;
  color: var(--color-brand);
  font-weight: 700;
  font-size: 14px;
}
/* All four cards carry the same gold trim; on hover the whole card is lined in gold. */
.home-card:hover { border-color: var(--rule-gold); }

/* ---------- About ---------- */

.about-page .eyebrow,
.about-page .card-title { color: var(--accent-green); }

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.values-grid h3 { font-family: var(--font-body); font-weight: 700; font-size: 15.5px; margin: 0 0 6px; }
.values-grid p { font-size: 14px; line-height: 1.6; color: var(--color-muted); margin: 0; }

.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 10px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.split h2 { font-weight: 700; font-size: 22px; margin: 0 0 12px; }
.split p { font-size: 15.5px; line-height: 1.7; color: var(--color-muted); margin: 0; }

/* ---------- Who we care for ---------- */

.who-page .eyebrow { color: var(--accent-purple); }
.who-page .card { border-top: 3px solid var(--rule-gold); padding: 24px 26px; }
.who-page .card--wide { grid-column: span 2; }

/* ---------- Expandable info cards (Who we care for, Care model) ---------- */

.expand-grid { align-items: start; }

.expand-card { --expand-accent: var(--accent-purple); }
.model-page .expand-card { --expand-accent: var(--accent-orange); }
.families-page .expand-card { --expand-accent: var(--accent-pink); }

.card.expand-card { padding: 0; transition: border-color var(--duration-fast) ease; }
.expand-card:hover { border-color: var(--expand-accent); }
.expand-card--wide { grid-column: 1 / -1; }

.expand-card summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background var(--duration-fast) ease;
}
.expand-card summary:hover { background: var(--color-bg); }
.expand-card summary::-webkit-details-marker { display: none; }
.expand-card summary h2 { margin: 0; }
.expand-card summary .pillar-number,
.expand-card summary .step-label { margin-bottom: 2px; }
.step-card.expand-card summary h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
}

.expand-toggle {
  color: var(--expand-accent);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.expand-card .label-open { display: none; }
.expand-card[open] .label-open { display: inline; }
.expand-card[open] .label-closed { display: none; }

.expand-details {
  margin: 0 26px 24px;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}
.expand-photo {
  height: 190px;
  margin-bottom: 16px;
}
.expand-photo .image-slot { min-height: 190px; height: 100%; }
.expand-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}
.expand-details .expand-short {
  color: var(--color-ink);
  font-weight: 600;
}
.expand-details p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.expand-details ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
}
.expand-details li::before { content: "· "; color: var(--expand-accent); font-weight: 700; }

.notice {
  margin-top: 36px;
  background: var(--accent-purple-tint);
  border: var(--rim-gold);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--accent-purple-ink);
}
.notice a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ---------- Care model ---------- */

.model-page .eyebrow { color: var(--accent-orange); }

.pillar-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-orange);
  margin-bottom: 10px;
}

.card--full {
  grid-column: 1 / -1;
  display: flex;
  gap: 24px;
  align-items: center;
}
.card--full .pillar-number { margin-bottom: 0; }

/* ---------- Accommodation ---------- */

.rooms-page .eyebrow { color: var(--color-brand); }

.room-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.room-gallery .image-slot { height: 220px; }
.room-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 12px;
  align-items: start;
}

.room-card {
  background: var(--color-surface);
  border: var(--rim-gold);
  border-radius: var(--radius-card);
  position: relative;
  transition: border-color var(--duration-fast) ease;
}
.room-card:hover { border-color: var(--color-brand); }
.room-card--featured { border: 2px solid var(--color-brand); }

.room-card summary {
  list-style: none;
  cursor: pointer;
  padding: 28px;
}
.room-card summary::-webkit-details-marker { display: none; }

.room-card .room-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--color-heading);
}
.room-card .room-type {
  font-size: 13.5px;
  color: var(--color-muted);
  margin: 4px 0 16px;
}
.room-card .room-price {                  /* the amount reads as a heading, "/month" as body text */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--color-heading);
}
.room-card .room-price small {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
}

.room-toggle-label {
  margin-top: 14px;
  color: var(--color-brand);
  font-weight: 700;
  font-size: 13.5px;
}
.room-card .label-open { display: none; }
.room-card[open] .label-open { display: inline; }
.room-card[open] .label-closed { display: none; }

.room-includes {
  margin: 0 28px 28px;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-muted);
  list-style: none;
  padding-left: 0;
}
.room-includes li::before { content: "· "; }

.featured-tag {
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--color-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

.fee-note {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 40px;
}

.facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  font-size: 14.5px;
  color: var(--color-muted);
}

/* ---------- Families ---------- */

.families-page .eyebrow,
.families-page .card-title { color: var(--accent-pink); }

.step-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-pink);
  margin-bottom: 10px;
}
.step-card { padding: 24px; }
.step-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 16px; margin: 0 0 6px; }

/* Process timeline (Families admission, Doctors referral) */

.timeline {
  --timeline-accent: var(--accent-gold);
  position: relative;
  padding-left: 60px;
  display: grid;
  gap: 14px;
  max-width: 920px;
}
/* Per-step connector segments: each runs from 9px below its own dot to
   9px above the next dot, so the line can never touch a dot. */
.timeline-step:not(:last-child)::before,
.timeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -41px;
  top: 65px;
  bottom: -21px;
  width: 2px;
  background: var(--timeline-accent);
}
.timeline-step:not(:last-child)::before { opacity: 0.18; }
.timeline-step:not(:last-child)::after {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 700ms var(--ease-out-soft);
}
.timeline-step.is-reached:not(:last-child)::after { transform: scaleY(1); }

.timeline-step {
  position: relative;
  background: var(--color-surface);
  border: var(--rim-gold);
  border-radius: var(--radius-card);
  transition: border-color var(--duration-fast) ease;
}
.timeline-step:hover { border-color: var(--timeline-accent); }

.timeline-marker {
  position: absolute;
  z-index: 1;
  left: -60px;
  top: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--timeline-accent);
  border: 2px solid color-mix(in srgb, var(--timeline-accent) 40%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 0 0 9px var(--color-bg);
  transform: scale(0.82);
  transition:
    background 300ms ease,
    color 300ms ease,
    border-color 300ms ease,
    transform 400ms var(--ease-out-soft);
}

.timeline-step.is-reached .timeline-marker {
  background: var(--color-brand);             /* filled step numbers match the teal buttons */
  color: #fff;
  border-color: var(--color-brand);
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .timeline-marker { transform: none; transition: none; }
  .timeline-step:not(:last-child)::after { transform: none; transition: none; }
}

.timeline-step summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: background var(--duration-fast) ease;
  border-radius: var(--radius-card);
}
.timeline-step summary:hover { background: var(--color-bg); }
.timeline-step summary::-webkit-details-marker { display: none; }

.timeline-heading { flex: 1; min-width: 0; }
.timeline-heading h2 {
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 3px;
}
.timeline-teaser {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}

.timeline-chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--timeline-accent);
  border-bottom: 2.5px solid var(--timeline-accent);
  transform: rotate(45deg);
  transition: transform 250ms var(--ease-out-soft);
  margin-right: 4px;
}
.timeline-step[open] .timeline-chevron { transform: rotate(-135deg); }

.timeline-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  margin: 0 24px 24px;
  border-top: 1px solid var(--color-border);
  padding-top: 18px;
}
.timeline-body .expand-photo {
  height: 100%;
  min-height: 200px;
  margin-bottom: 0;
}
.timeline-body .expand-photo .image-slot { min-height: 200px; }
.timeline-body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.timeline-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
}
.timeline-body li::before { content: "· "; color: var(--timeline-accent); font-weight: 700; }

/* Closed-state teaser inside expandable cards */
.expand-card summary .expand-teaser {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 4px 0 0;
  font-weight: 400;
}

.checklist {
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-muted);
  list-style: none;
  margin: 0;
  padding: 0;
}
.checklist li::before { content: "· "; }
.checklist .highlight { color: var(--color-brand-dark); }
.checklist .highlight::before { content: ""; }

.faq-section { max-width: 820px; }
.faq-section h2 {
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 18px;
}

.faq-item {
  background: var(--color-surface);
  border: var(--rim-gold);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--color-heading);
  text-wrap: balance;
  transition: background var(--duration-fast) ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--color-bg); }
.faq-item summary::after {
  content: "+";
  color: var(--color-brand);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-answer {
  padding: 0 22px 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0;
}

/* ---------- Doctors ---------- */

.doctors-page .eyebrow,
.doctors-page .card-title { color: var(--accent-blue); }
.doctors-page .timeline { --timeline-accent: var(--accent-gold); }

.referral-steps {
  display: grid;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted);
}
.referral-steps strong { color: var(--color-ink); }

.referral-band {
  background: var(--gradient-sage-band);
  border: var(--rim-gold);
  border-radius: var(--radius-panel);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.referral-band h2 {
  font-weight: 800;
  font-size: 22px;
  color: var(--color-heading);
  margin: 0 0 4px;
}
.referral-band p {
  font-size: 15px;
  color: var(--color-on-wave);
  margin: 0;
  overflow-wrap: anywhere;
}
.referral-band strong { color: var(--color-brand-dark); }
.referral-band a:not(.btn) { color: var(--color-on-wave); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Resources ---------- */

.resources-page .eyebrow { color: var(--accent-green); }

.resource-card {
  display: block;
  color: inherit;
  background: var(--color-surface);
  border: var(--rim-gold);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--duration-fast) ease;
  align-self: start;
}
.resource-card:hover {
  border-color: var(--color-brand);
  text-decoration: none;
  color: inherit;
}
.resource-card summary {
  list-style: none;
  cursor: pointer;
}
.resource-card summary::-webkit-details-marker { display: none; }
.resource-card[open] { grid-column: 1 / -1; }

.resource-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--color-border);
}
.resource-card[open] .resource-img { height: 280px; }

.resource-more {
  margin-top: 12px;
  color: var(--color-brand);
  font-weight: 700;
  font-size: 13.5px;
}
.resource-card .label-open { display: none; }
.resource-card[open] .label-open { display: inline; }
.resource-card[open] .label-closed { display: none; }

.resource-article {
  padding: 4px 22px 30px;
  max-width: 74ch;
}
.resource-article h2,
.resource-article h3 {
  font-weight: 700;
  font-size: 17px;
  margin: 22px 0 8px;
  color: var(--color-heading);
}
.resource-article p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.resource-article ul,
.resource-article ol {
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-muted);
  display: grid;
  gap: 6px;
}
.resource-article strong { color: var(--color-ink); }

.video-slot {
  aspect-ratio: 16 / 9;
  max-width: 640px;
  margin: 6px 0 16px;
}
.resource-article .video-slot .image-slot {
  height: 100%;
  min-height: 0;
  border: 1.5px dashed var(--color-brand-border);
  border-radius: var(--radius-card);
}

.resource-card .image-slot {
  height: 150px;
  min-height: 150px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
}
.resource-card .resource-body { padding: 20px 22px; }
.resource-card .resource-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 8px;
}
.resource-card h2,
.resource-card h3 {
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.35;
  margin: 0 0 8px;
}
.resource-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}

/* ---------- Contact ---------- */

.contact-page .eyebrow,
.contact-page .card-title { color: var(--accent-purple); }
.contact-page .card-title { font-size: 18px; margin-bottom: 14px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
}

.contact-cards {
  display: grid;
  gap: 20px;
  align-content: start;
}

.contact-detail {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-muted);
  margin: 0;
}
.contact-detail strong { color: var(--color-ink); }

.map-slot {
  margin-top: 16px;
  height: 150px;
}
.map-slot .image-slot { min-height: 150px; border-radius: 8px; }
.map-slot iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  display: block;
}

.enquiry-form { display: grid; gap: 14px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 14.5px;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-surface);
}
.field textarea { resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
  border-color: var(--color-brand);
}

.form-note { font-size: 12.5px; color: var(--color-muted); }

.form-success {
  background: var(--color-brand-tint);
  border: var(--rim-gold);
  border-radius: 10px;
  padding: 28px;
  text-align: center;
}
.form-success h2 {
  font-weight: 800;
  font-size: 20px;
  color: var(--color-heading);
  margin: 0 0 8px;
}
.form-success p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-footer-bg) var(--gradient-sage-footer);
  border-top: 2px solid var(--rule-gold);
  margin-top: 64px;
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px clamp(20px, 4vw, 32px) 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-brand-dark);
  --logo-heart: var(--color-alt);
  margin-bottom: 10px;
}

/* CI p.8: on Forest Teal the logo always sits inside an ivory panel with generous padding.
   The master lockup carries its own ivory ground with margins wider than the clearspace (the
   height of the "S"), so that ground is the panel: one clean ivory tile, no second rectangle. */
.footer-brand:has(.footer-lockup) {
  display: inline-block;
  padding: 0;
  border: 2px solid var(--rule-gold);   /* gold rim, like the fascia's gold trim (CI p.17) */
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
}
.footer-lockup {
  display: block;
  width: 260px;
  height: auto;
}
.footer-brand .brand-logo { height: 36px; }
.footer-brand .brand-name { color: var(--color-brand-dark); font-size: 18px; }
.footer-brand .brand-sub { color: var(--color-footer-link); }

.footer-blurb {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-footer-muted);
  max-width: 38ch;
}

.footer-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 12px;
}

.footer-links,
.footer-contact {
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--color-footer-text);
}
.footer-links a { color: var(--color-footer-text); }
/* The address and phone in the footer are links now; on the sage ground they
   take the footer's own colour rather than the site's link colour. */
.footer-contact a { color: var(--color-footer-text); text-decoration: none; }
.footer-contact a:hover { color: var(--color-brand-dark); text-decoration: underline; }
.footer-links a:hover { color: var(--color-brand-dark); text-decoration: underline; }

.footer-legal { border-top: 1px solid var(--color-footer-border); }
.footer-legal .container {
  padding-block: 16px;
  font-size: 12.5px;
  color: var(--color-footer-muted);
}

/* ---------- Reveal animation ---------- */

@keyframes sm-reveal {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: none; }
}

.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-revealed {
  animation: sm-reveal var(--duration-reveal) var(--ease-out-soft) both;
  animation-delay: calc(var(--reveal-order, 0) * var(--reveal-stagger));
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; }
  .js [data-reveal].is-revealed { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { height: 320px; }
  .card-grid, .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .room-gallery { grid-template-columns: repeat(2, 1fr); }
  .values-grid, .facilities-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .timeline { padding-left: 46px; }
  .timeline-marker { left: -46px; width: 32px; height: 32px; font-size: 14px; top: 16px; }
  .timeline-step:not(:last-child)::before,
  .timeline-step:not(:last-child)::after { left: -31px; top: 57px; bottom: -19px; }
  .timeline-body { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 12px 14px;
    gap: 2px;
    box-shadow: 0 4px 16px rgba(15, 76, 74, 0.08);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 11px 12px; font-size: 15px; }
  .header-cta { margin-left: auto; }
  .nav-toggle { margin-left: 0; order: 3; }
  .header-inner { position: relative; flex-wrap: nowrap; }
  .contact-grid, .split, .card-grid-2 { grid-template-columns: 1fr; }
  .who-page .card--wide { grid-column: auto; }
  .card--full { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cta-band { padding: 32px 28px; }
  .referral-band { padding: 28px 24px; }
}

@media (max-width: 560px) {
  .card-grid, .card-grid-3, .card-grid-4, .room-gallery,
  .values-grid, .facilities-grid, .form-row {
    grid-template-columns: 1fr;
  }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-media { height: 240px; }
  .brand-sub { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .header-inner { padding-inline: 12px; gap: 8px; }
  .brand { gap: 8px; }
  .brand-logo { height: 34px; }
  .brand-emblem { height: 40px; }
  .brand-name { font-size: 16px; }
  .nav-toggle { padding: 7px 10px; }
  .header-cta { padding: 8px 12px; font-size: 13px; }
}

/* Florence — AI care guide launcher */
#florence-launcher {
  position: fixed;
  right: 22px;
  bottom: 0;
  z-index: 900;
  width: 132px;   /* was 192px; reduced 19 Sep at the client's request */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms var(--ease-out-soft), opacity 250ms var(--ease-out-soft);
}
#florence-launcher:hover,
#florence-launcher:focus-visible { transform: scale(1.05); }
#florence-launcher.florence-hidden { opacity: 0; pointer-events: none; transform: translateY(30px); }
.florence-figure { position: relative; }
#florence-launcher video,
#florence-launcher img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  /* No drop shadow: it pooled as a dark band under her feet (removed 22 Sep). */
  transition: opacity 150ms ease;
}
#florence-launcher .florence-swapping { opacity: 0; }
.florence-floor-shadow {
  display: none;   /* floor ellipse removed 22 Sep — read as a dark smudge under her feet */
  position: absolute;
  left: 50%;
  bottom: 2px;
  z-index: 1;
  width: 74%;
  height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(18, 59, 59, 0.28) 0%, transparent 70%);
}
.florence-bubble {
  position: absolute;
  right: 86%;
  bottom: 78%;
  z-index: 3;
  white-space: nowrap;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--accent-gold);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 10px 35px rgba(18, 59, 59, 0.14);
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transform-origin: 100% 100%;
  animation: florence-bubble-in 450ms var(--ease-out-soft) 2.2s forwards;
}
.florence-bubble-lead,
.florence-bubble-sub { display: block; }
@keyframes florence-bubble-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* On phones the full-body cutout covered the bottom third of the viewport, so
   she collapses to a conventional circular chat avatar. The clip is scaled and
   offset inside the circle to frame her head and shoulders: at 152px wide the
   360x646 source renders at 0.422x, so the 68px circle interior shows source
   x90-251, y14-175 — putting her face (source 170,75) at 50% across and 38%
   down, with her head filling ~43% of the circle. florence.js narrows the clip
   rotation to match this crop. */
@media (max-width: 640px) {
  #florence-launcher {
    width: 72px;
    right: 16px;
    bottom: 16px;
  }
  .florence-figure {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface);
    border: 2px solid var(--accent-gold);
    box-shadow: 0 6px 18px rgba(18, 59, 59, 0.22);
  }
  #florence-launcher video,
  #florence-launcher img {
    position: absolute;
    top: -6px;
    left: -38px;
    width: 152px;
    /* The global `img { max-width: 100% }` would otherwise clamp the fallback
       cutout back to the 68px circle interior, undoing the crop and leaving
       Florence out of frame. Videos were never clamped, which is why this only
       ever showed on browsers that fall back to the still. */
    max-width: none;
    height: auto;
    max-height: none;
    filter: none;
  }
  .florence-floor-shadow { display: none; }
  .florence-bubble {
    right: calc(100% + 10px);
    bottom: 21px;
    font-size: 0.72rem;
    padding: 0.4rem 0.66rem;
  }
  .florence-bubble-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #florence-launcher { transition: none; }
  .florence-bubble { animation: none; opacity: 1; transform: none; }
}

/* ---------- Hero 3D cube ---------- */
.hero-cube {
  --cube-size: clamp(190px, 29vw, 340px);
  --cube-half: calc(var(--cube-size) / 2);
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1100px;
}
/* soft floor shadow, drawn outside the 3D context */
.hero-cube::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(var(--cube-size) * 1.02);
  height: 24px;
  top: calc(50% + var(--cube-size) * 0.53);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18, 59, 59, 0.26) 0%, rgba(18, 59, 59, 0) 72%);
}
.cube-stage {
  position: relative;
  z-index: 1;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  transform: rotateX(-14deg);
}
.cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: cube-turn 12.4s var(--ease-out-soft) infinite;
}
.cube-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 0 0 0 1px rgba(18, 59, 59, 0.08);
}
.cube-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* gentle veil so the solid reads as three-dimensional */
.cube-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(18, 59, 59, 0.16) 100%);
}
.cube-face--front  { transform: translateZ(var(--cube-half)); }
.cube-face--right  { transform: rotateY(90deg) translateZ(var(--cube-half)); }
.cube-face--back   { transform: rotateY(180deg) translateZ(var(--cube-half)); }
.cube-face--left   { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
.cube-face--top    { transform: rotateX(90deg) translateZ(var(--cube-half)); }
.cube-face--bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)); }

/* holds each face still, then turns calmly to the next */
@keyframes cube-turn {
  0%,   16%  { transform: rotateY(0deg); }
  25%,  41%  { transform: rotateY(-90deg); }
  50%,  66%  { transform: rotateY(-180deg); }
  75%,  91%  { transform: rotateY(-270deg); }
  100%       { transform: rotateY(-360deg); }
}
.hero-cube:hover .cube,
.hero-cube:focus-within .cube { animation-play-state: paused; }
/* once the script is running it drives the transforms itself */
.hero-cube.cube--interactive .cube { animation: none; }
/* while the pointer is steering, smooth the jumps between mouse samples */
.hero-cube.is-controlled .cube,
.hero-cube.is-controlled .cube-stage { transition: transform 140ms linear; }
.cube-stage { cursor: grab; touch-action: pan-y; }
.hero-cube.is-grabbing .cube-stage { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .cube { animation: none; }
}

/* ---------- Meet the team: editorial carousel ---------- */
/* Four fixed value words sit behind a tilted portrait card. Only the word
   belonging to the current person is in full ink; the rest stay as pale
   texture. Slides are stacked and cross-faded rather than translated, so the
   card never leaves the composition the words are balanced around. */
.team-page .page-intro { max-width: 760px; }
/* The stage carries its own generous air, so the intro above it does not need
   a full section gap as well. */
.team-page > .page:first-child { padding-bottom: 0; }
.team-page > .page:first-child .page-intro { margin-bottom: 0; }

.team-stage {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  padding-block: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}
.team-stage-inner {
  position: relative;
  max-width: var(--container);
  /* The top band is where the stat bubble and the note card live; the words
     start below it. Anchoring the words to a fixed offset rather than a
     percentage keeps them clear of both at every width, since neither of those
     two shrinks proportionally with the stage. */
  --team-top-band: 190px;
  min-height: clamp(560px, 46vw, 620px);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

/* --- the four value words --- */
.team-words {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.team-word {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 8.4vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--color-alt);
  transition: color 620ms var(--ease-out-soft), opacity 620ms var(--ease-out-soft);
}
.team-word.is-active { color: var(--color-ink); }
.team-word--tl { left: clamp(20px, 4vw, 32px); top: var(--team-top-band); }
.team-word--bl { left: clamp(20px, 4vw, 32px); top: calc(var(--team-top-band) + 150px); }
.team-word--tr { right: clamp(20px, 4vw, 32px); top: var(--team-top-band); }
.team-word--br { right: clamp(20px, 4vw, 32px); top: calc(var(--team-top-band) + 150px); }

/* --- 24/7 bubble --- */
.team-stat {
  position: absolute;
  left: clamp(20px, 4vw, 32px);
  top: 0;
  z-index: 2;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--color-alt);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 18px;
}
.team-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--color-brand-dark);
  margin-bottom: 4px;
}
.team-stat span {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--color-muted);
}

/* --- numbered note card --- */
.team-notes {
  position: absolute;
  right: clamp(20px, 4vw, 32px);
  top: 0;
  z-index: 3;
  width: min(430px, 40vw);
  /* The four notes are stacked in one grid cell, so the panel is exactly as
     tall as the longest of them. A fixed min-height either clipped the longest
     note or left the shorter ones floating in reserved space. */
  display: grid;
}
.team-note {
  grid-area: 1 / 1;
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--color-alt);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease-out-soft), transform 420ms var(--ease-out-soft), visibility 0s linear 420ms;
}
.team-note.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.team-note-num {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 9px;
  background: var(--color-surface);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-muted);
}
.team-note-num::before { content: "#"; }
.team-note h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 5px;
  color: var(--color-heading);
}
.team-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-muted);
}

/* --- tilted portrait cards --- */
.team-cards {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(210px, 23vw, 290px);
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -46%);
}
.team-card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-alt);
  box-shadow: 0 26px 60px rgba(18, 59, 59, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: rotate(4.5deg) scale(0.94);
  transition: opacity 520ms var(--ease-out-soft), transform 520ms var(--ease-out-soft), visibility 0s linear 520ms;
}
.team-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: rotate(4.5deg) scale(1);
  transition-delay: 0s;
}
.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.team-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 46px 20px 18px;
  color: #fff;
  background: linear-gradient(to top, rgba(18, 59, 59, 0.88) 12%, rgba(18, 59, 59, 0) 100%);
}
.team-card figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
}
.team-card figcaption span {
  display: block;
  text-wrap: balance;
  margin-top: 3px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
}

/* --- controls --- */
.team-arrow {
  position: absolute;
  bottom: 8px;
  z-index: 4;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid var(--color-brand-border);
  color: var(--color-brand-dark);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.team-arrow svg { width: 20px; height: 20px; }
.team-arrow--prev { left: clamp(20px, 4vw, 32px); }
.team-arrow--next {
  right: clamp(20px, 4vw, 32px);
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}
.team-arrow--prev:hover { background: var(--color-brand-tint); border-color: var(--color-brand); }
.team-arrow--next:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); }

.team-dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
}
.team-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-brand-border);
  cursor: pointer;
  transition: width var(--duration-fast) ease, background var(--duration-fast) ease;
}
.team-dot.is-active {
  width: 26px;
  background: var(--color-brand);
}

.team-placeholder {
  margin: 0 0 34px;
  font-size: 13px;
  color: var(--color-muted);
  text-align: center;
  font-style: italic;
}

/* Florence's launcher is fixed to the bottom-right of every page and is 192px
   wide, which lands squarely on the next arrow when the stage fills the
   viewport. Desktop has room to step the arrow inside her. */
@media (min-width: 1024px) {
  .team-arrow--next { right: calc(clamp(20px, 4vw, 32px) + 200px); }
}

@media (max-width: 1023px) {
  .team-notes { width: min(360px, 46vw); }
  .team-note { padding: 16px 18px; }
  .team-note p { font-size: 12.5px; }
  .team-stat { width: 112px; height: 112px; }
  .team-stat strong { font-size: 20px; }
}

/* On phones the four-word composition has nowhere to go, so only the current
   word remains — centred behind the card as texture — and the note card drops
   below the portrait. The stage becomes a flex column purely to reorder the
   card ahead of its note, which the desktop absolute layout does not need. */
@media (max-width: 767px) {
  .team-stage-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding-block: 26px 96px;
  }
  .team-stat { display: none; }

  /* Behind the card the word would be entirely hidden at this width, so it
     sits above the portrait instead — full height and in sage rather than the
     desktop's near-invisible tint, so it reads as a deliberate label rather
     than a sliver of texture. */
  .team-words {
    position: static;
    order: 0;
    width: 100%;
    display: grid;
    place-items: center;
  }
  .team-word {
    position: static;
    grid-area: 1 / 1;
    font-size: clamp(2.9rem, 17vw, 4.4rem);
    color: var(--color-brand-border);
    opacity: 0;
    transition: opacity 480ms var(--ease-out-soft);
  }
  .team-word.is-active { opacity: 1; color: var(--color-brand-border); }

  .team-cards {
    order: 1;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(228px, 62vw);
    margin: 18px 0 0;
  }
  .team-card { transform: rotate(3.5deg) scale(0.94); }
  .team-card.is-active { transform: rotate(3.5deg); }

  .team-notes {
    order: 2;
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    margin-top: 34px;
  }

  /* Corner arrows would sit under the fixed Florence launcher at this width,
     so the controls gather into one centred row instead. */
  .team-arrow { bottom: 18px; width: 48px; height: 48px; }
  .team-arrow--prev { left: calc(50% - 101px); }
  .team-arrow--next { left: calc(50% + 53px); right: auto; }
  .team-dots { bottom: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .team-word,
  .team-note,
  .team-card { transition: none; }
}

/* ---------- 9-page IA: About home card + wider primary nav ---------- */


/* Ten primary items need to sit on one row between 861px and ~1180px. */
@media (min-width: 861px) and (max-width: 1200px) {
  .site-nav a { padding: 7px 6px; font-size: 13px; }
  .header-inner { gap: 10px; }
}

/* ---------- Header: eleven nav items ---------- */
/* With Team added the nav only fits on one line above ~1100px. The
   menu button therefore takes over earlier than the rest of the mobile layout
   does, which is why this is its own query rather than a change to the 860px
   block — that one also carries card and timeline rules. */
@media (max-width: 1100px) {
  .nav-toggle { display: block; margin-left: 0; order: 3; }
  .header-inner { position: relative; flex-wrap: nowrap; }
  .header-cta { margin-left: auto; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 12px 14px;
    gap: 2px;
    box-shadow: 0 4px 16px rgba(15, 76, 74, 0.08);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 11px 12px; font-size: 15px; }
  .nav-group::before,
  .nav-group > a::after { display: none; }
  .site-nav .nav-group > a { display: block; padding-right: 12px; }
  .nav-sub {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 4px 18px;
    background: none;
    border: 0;
    box-shadow: none;
  }
}
/* The header is capped at --container (1180px) whatever the viewport, so the
   tighter nav is needed at every width above the breakpoint, not just up to
   1340px — a 1440px window has exactly the same 1180px of header to fill. */
@media (min-width: 1101px) {
  .site-nav a { padding: 7px 7px; font-size: 13px; }
}

/* ---------- Accommodation: one residence, one fee ---------- */
/* The building has a single kind of accommodation, so the old three-tier grid
   becomes the fee card beside the plain-speaking note about what a shared
   residence actually is. */
.pricing-grid--single { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pricing-grid--single .room-card { align-self: stretch; }
.room-honesty {
  padding: 26px 28px;
  background: var(--color-alt);
  border-color: transparent;
}
.room-honesty p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-ink);
}
.room-honesty .btn { margin-top: 6px; }

@media (max-width: 860px) {
  .pricing-grid--single { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Accommodation: the room-by-room tour (26 Sep redesign) ----------
   Client brief: the page is a tour of the home. Only the six rendered spaces are shown
   (facade, visitor area, treatment room, activity areas, residences, side garden), in the
   same order as the butterfly fly-through. A butterfly flies down a fine gold path between
   them as the visitor scrolls (js/stay.js). Images sit in softly rounded frames on Soft
   Beige, as the CI asks. */

.stay-page { --stay-gap: clamp(28px, 5vw, 72px); }

.stay-hero .page-intro { margin-bottom: 32px; }

.stay-film {
  position: relative;
  margin: 0;
  padding: 10px;
  background: var(--color-alt);
  border: 1px solid var(--rule-gold);
  border-radius: calc(var(--radius-panel) + 10px);
}
.stay-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-panel);
  background: var(--color-alt);
  object-fit: cover;
}
.stay-play {
  position: absolute;
  left: 50%;
  top: calc(50% - 14px);
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border: 2px solid rgba(255, 251, 247, 0.9);
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 34px rgba(18, 59, 59, 0.28);
  transition: transform var(--duration-fast) var(--ease-out-soft), background var(--duration-fast) ease;
}
.stay-play svg { width: 34px; height: 34px; margin-left: 5px; }
.stay-play:hover { transform: scale(1.06); background: var(--color-brand-dark); }
.stay-film.is-playing .stay-play { opacity: 0; pointer-events: none; }
.stay-film figcaption {
  padding: 12px 6px 2px;
  font-family: 'Montserrat', var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}

/* Headings that end in "SereneMinds Residences.": the name never breaks (client, 26 Sep), so on
   small phones the heading shrinks just enough for the name to fit on one line (it is ~12.3 em). */
.page-intro h1.fits-brand,
.stay-tour-head h2.fits-brand {
  font-size: min(var(--text-page-title), calc((100vw - 2 * clamp(20px, 4vw, 32px)) / 12.4));
}

.stay-tour { margin-top: clamp(64px, 8vw, 104px); }
.stay-tour-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.stay-tour-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  line-height: 1.15;
  margin: 0;
  color: var(--color-heading);
}

.stay-journey { position: relative; }   /* the flight runs from the tour down to the fees */
.stay-journey .room-card,
.stay-journey .card,
.stay-journey .fee-note { position: relative; z-index: 1; }
.stay-journey .fee-note { background: var(--color-bg); }   /* the dotted path passes behind the note */
.stay-perch {                          /* where the butterfly lands: on the line, just after "price." */
  display: inline-block;
  width: 1px;
  height: 1px;
  margin-left: 40px;                   /* half the butterfly's width plus a small gap */
  vertical-align: baseline;
}

.stay-stops {
  position: relative;
  display: grid;
  gap: clamp(56px, 8vw, 112px);
}

.stay-stop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--stay-gap);
  align-items: center;
}
.stay-stop:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.stay-stop:nth-of-type(even) .stay-frame { order: 2; }

.stay-frame {
  margin: 0;
  padding: 10px;
  background: var(--color-alt);
  border-radius: calc(var(--radius-card) + 10px);
  position: relative;
  z-index: 1;
}
.stay-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1086;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.stay-copy { position: relative; z-index: 1; max-width: 460px; }
.stay-num {
  display: block;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--accent-gold);           /* decorative numeral, 44px: CI allows gold at 18px+ */
  margin-bottom: 10px;
}
.stay-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem);
  color: var(--color-heading);
  margin: 0 0 12px;
}
.stay-copy p { font-size: 16px; line-height: 1.75; color: var(--color-ink); margin: 0 0 18px; }
.stay-facts {                          /* facts sit on one straight line (client, 26 Sep) */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}
.stay-facts li {
  white-space: nowrap;
  font-family: 'Montserrat', var(--font-body);
  font-size: clamp(10.5px, 0.95vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-brand-dark);
  padding: 6px 14px;
  border: 1px solid var(--rule-gold);
  border-radius: 999px;
  background: var(--color-surface);
}

/* Where the flight path passes each stop: the gutter between picture and words. */
.stay-anchor {
  position: absolute;
  top: 50%;
  left: calc(58.333% - var(--stay-gap) * 7 / 12 + var(--stay-gap) / 2);   /* centre of the 7fr|5fr gutter */
  width: 1px;
  height: 1px;
}
.stay-stop:nth-of-type(even) .stay-anchor { left: calc(41.667% - var(--stay-gap) * 5 / 12 + var(--stay-gap) / 2); }

.stay-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.stay-path-line {
  fill: none;
  stroke: var(--rule-gold);
  stroke-width: 1.5;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
  opacity: 0.85;
}

.stay-bfly {
  position: absolute;
  left: 0;
  top: 0;
  width: 58px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  will-change: transform;              /* no filter: a live shadow re-renders every scroll frame */
  transition: opacity 400ms ease;
}
.stay-bfly img { display: block; width: 100%; height: auto; transform-origin: 78% 60%; }
.stay-bfly.is-ready { opacity: 1; }
.stay-bfly.is-ready img { animation: stay-flap 900ms ease-in-out infinite; }
.stay-bfly.is-perched img { animation-duration: 3.2s; }   /* resting: a slow, occasional flex */
@keyframes stay-flap {                 /* the wings close towards the body, not the whole insect */
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.72); }
}

.stay-fees { margin-top: clamp(64px, 8vw, 104px); }
/* The price card on its own, lined in Muted Gold (client, 26 Sep). */
/* Full container width, so the card, the fee note and the Facilities box share both edges;
   the included list runs in two columns to keep the card short. */
.stay-price { grid-template-columns: minmax(0, 1fr); }
.stay-price .room-includes { columns: 2; column-gap: 48px; display: block; }
.stay-price .room-includes li { break-inside: avoid; margin-bottom: 8px; }
@media (max-width: 860px) {
  .stay-price .room-includes { columns: 1; }
}
.stay-price .room-card--featured,
.stay-price .room-card--featured:hover { border: 2px solid var(--accent-gold); }
.stay-fees .card-title { font-size: 20px; }

@media (max-width: 860px) {
  .stay-stop,
  .stay-stop:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stay-stop:nth-of-type(even) .stay-frame { order: 0; }
  .stay-copy { max-width: none; padding-left: 34px; }
  .stay-facts { flex-wrap: wrap; }
  .stay-anchor,
  .stay-stop:nth-of-type(even) .stay-anchor { left: 8px; top: auto; bottom: 40px; }
  .stay-bfly { width: 40px; }
  .stay-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .stay-play svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .stay-bfly.is-ready img { animation: none; }
}

/* ---------- Article pages (/resources/*.html) ---------- */

.article-back {
  display: inline-block;
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-brand);
}
.article-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.article { max-width: 780px; }
.article-hero {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
  border: var(--rim-gold);
  border-radius: var(--radius-card);
  margin: 4px 0 28px;
}
.article-page .resource-article { padding: 0; max-width: 70ch; }
.article-page .resource-article h2,
.article-page .resource-article h3 { font-size: 20px; margin-top: 30px; }
.article-page .resource-article ul,
.article-page .resource-article ol { font-size: 16px; }
.article-cta { margin-top: 48px; }
.article-related { margin: 56px 0 24px; }
.article-related > h2 { font-size: 22px; margin: 0 0 18px; }

/* "Read our guide" links from service pages into /resources/ */
.guide-link { margin: 14px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.guide-link + .guide-link { margin-top: 6px; }
.guide-link a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.guide-link a:hover { color: var(--color-brand-dark); }

/* ---------- Contact buttons (js/contact-buttons.js; off until real numbers are set) ---------- */

.wa-float {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #FFFFFF;
  border: var(--rim-gold);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(18, 59, 59, 0.22);
  transition: transform var(--duration-fast) ease, background var(--duration-fast) ease;
}
.wa-float svg { width: 22px; height: 22px; }
.wa-float:hover, .wa-float:focus-visible { background: var(--color-brand-dark); color: #FFFFFF; transform: translateY(-2px); text-decoration: none; }
.header-call { display: none; }
@media (max-width: 860px) {
  .header-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--color-brand-border);
    background: var(--color-surface);
    color: var(--color-brand-dark);
    font-family: 'Montserrat', var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
  }
  .header-call svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } .wa-float:hover { transform: none; } }
/* The WhatsApp button sits over the bottom-left corner; leave room under the
   copyright line so the button never covers it at the foot of the page. */
body:has(.wa-float) .footer-legal { padding-bottom: 72px; }

/* ---------- Second call to action ("Book a Visit") ---------- */

.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Visit card (Contact) ---------- */

.visit-hours { margin: 6px 0 14px; }
.visit-hours strong { color: var(--color-ink); }

/* "Questions to Ask Any Care Home" (Families) sits above the FAQ */
.faq-section + .faq-section { margin-top: 48px; }
.faq-intro { font-size: 16px; line-height: 1.65; color: var(--color-muted); margin: -8px 0 18px; }
.faq-answer a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 400px) {
  .wa-float { padding: 12px; }
  .wa-float span { display: none; }         /* the aria-label still names it */
  .header-call { padding: 9px 11px; }
  .header-call span { display: none; }
}

/* ---------- Word groups stay on one line (copy rule, Mark 29 Sep) ----------
   Buttons, menu links and short labels never break between their words; times,
   phone numbers and hyphenated terms in running text are wrapped in .nowrap. */
.nowrap { white-space: nowrap; }
.btn, .header-cta, .header-call, .wa-float,
.site-nav a, .nav-toggle, .footer-links a,
.resource-more, .expand-toggle, .room-toggle-label,
.label-closed, .label-open, .article-back { white-space: nowrap; }

/* ---------- Card photos keep their shape (Mark, 29 Sep) ----------
   Fold-out card photos had a fixed 190px height, so on wide laptop cards a 3:2 photo
   became a thin strip showing a quarter of the picture while phones showed nearly all
   of it. Photos now follow their own shape, capped so a square photo never towers, and
   full-width cards put the photo beside the text instead of stretching it across. */
.expand-details > .expand-photo { height: auto; }
.expand-details > .expand-photo img { height: auto; max-height: 360px; }

@media (min-width: 861px) {
  .expand-card--wide > .expand-details,
  .card--wide > .expand-details {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 28px;
    align-items: start;
  }
  .expand-card--wide > .expand-details > *,
  .card--wide > .expand-details > * { grid-column: 2; }
  .expand-card--wide > .expand-details > .expand-photo,
  .card--wide > .expand-details > .expand-photo { grid-column: 1; grid-row: 1 / span 12; margin-bottom: 0; }
}

/* Guide cards: a taller picture area, so faces are not trimmed off */
.resource-img { height: auto; aspect-ratio: 16 / 10; }

/* When a photo of people has to be trimmed to fit its box, trim from the bottom
   (legs) and never the top (heads). Mark, 29 Sep. Room renderings stay centred. */
.expand-photo img,
.resource-img,
.article-hero,
.media-frame img { object-position: center top; }
/* Exceptions: photos of objects stay centred, and the schizophrenia photo (people seated low) sits just below centre */
.resource-img[src*="home-care-signs"], .article-hero[src*="home-care-signs"],
.resource-img[src*="paying-care"], .article-hero[src*="paying-care"],
.resource-img[src*="referral-criteria"], .article-hero[src*="referral-criteria"],
.resource-img[src*="resources/medication"], .article-hero[src*="resources/medication"] { object-position: center; }
.resource-img[src*="schizophrenia"], .article-hero[src*="schizophrenia"] { object-position: center 55%; }
/* About: the team photo shows whole at every width instead of a 320px strip */
.media-frame img { height: auto; display: block; }

/* ---------- Language switch (js/i18n.js) ---------- */

/* While a translated page is being prepared, keep it hidden so the English text
   never flashes. i18n.js removes the class (3-second fail-safe). */
.i18n-pending body { visibility: hidden; }

/* Chinese: the brand fonts have no Chinese characters, so name good system
   Chinese fonts after them (Latin text keeps the brand fonts). */
html[lang="zh-Hans"] {
  --font-display: 'Lora', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', Georgia, serif;
  --font-body: 'Nunito Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Segoe UI', Arial, sans-serif;
}

/* Header: a pill showing the current language (EN / BM / 中文) that opens a
   short menu of the three. */
.lang-menu { position: relative; margin-left: 4px; flex-shrink: 0; }
.lang-menu > summary { list-style: none; cursor: pointer; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1.5px solid var(--color-brand-border);
  background: var(--color-surface);
  color: var(--color-brand-dark);
  font-family: 'Montserrat', var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  user-select: none;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.lang-toggle:hover, .lang-toggle:focus-visible, .lang-menu[open] > .lang-toggle {
  background: var(--color-brand-tint);
  border-color: var(--color-brand);
}
.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 950;
  min-width: 184px;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 76, 74, 0.14);
}
.lang-list a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lang-list a:hover, .lang-list a:focus-visible { background: var(--color-brand-tint); color: var(--color-brand-dark); text-decoration: none; }
.lang-list a[aria-current], .lang-inline a[aria-current] { color: var(--color-brand-dark); background: var(--color-brand-tint); }
.lang-list a[aria-current]::after { content: " ✓"; }
@media (max-width: 860px) { .lang-menu { margin-left: auto; } .lang-menu ~ .header-cta { margin-left: 0; } }
@media (max-width: 420px) { .lang-toggle { min-width: 36px; min-height: 36px; padding: 0 8px; font-size: 12.5px; } }

/* Shown at the top of a page with no translation yet. */
.i18n-notice {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-brand-border);
  background: var(--color-brand-tint);
  color: var(--color-ink);
  font-size: 14.5px;
  line-height: 1.6;
}

/* On small phones the header has no room for the pill: the three languages sit
   as a row at the bottom of the Menu instead. */
.site-nav .lang-inline { display: none; }
@media (max-width: 400px) {
  .header-inner > .lang-menu { display: none; }
  .header-inner > .lang-menu ~ .header-cta { margin-left: auto; }
  .site-nav.is-open .lang-inline {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }
  .site-nav.is-open .lang-inline a {
    flex: 1;
    text-align: center;
    padding: 10px 4px;
    border-radius: 10px;
    border: 1px solid var(--color-brand-border);
    font-size: 14px;
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .header-inner { gap: 6px; }
  .brand-emblem { height: 36px; width: auto; }
  .header-cta { padding: 8px 10px; font-size: 12.5px; letter-spacing: 0.02em; }
  .nav-toggle { padding: 7px 8px; }
}