/* ==========================================================================
   NOVARA SENIOR LIVING — styles.css
   One hand-written stylesheet. No framework, no build step, no utility-class
   soup. Every design decision lives here as a CSS custom property so the
   whole site can be retuned from this one block. See the architecture
   handoff, "Design system" section, for the reasoning behind each token.

   Fraunces (headings) and Inter (body) are self-hosted here as real woff2
   files (OFL-licensed, via Fontsource) rather than a Google Fonts CDN call,
   per the handoff's "never a Google Fonts CDN call" rule — these are
   downloaded once and shipped with the repo, not fetched from Google at
   request time.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------- */
/* Tokens                                                                  */
/* ---------------------------------------------------------------------- */
:root {
  /* Colour */
  --ink: #1C1B18;
  --ink-soft: #55524B;
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --line: #E5E1D8;
  --accent: #2F5D50;
  --accent-dark: #234639;
  --accent-tint: #EAF0EC;
  --whatsapp: #107A6D;
  --whatsapp-dark: #0C5F55;
  --gold: #B08D57;
  /* --gold at 14-16px text size measures ~2.9-3.1:1 against both --bg and
     --surface, failing WCAG AA (4.5:1). Keep --gold for borders/rules where
     it's only decorative, and use this darker shade (~4.7-4.9:1) for any
     actual gold-colored text. */
  --gold-text: #8C6A3D;
  --alert: #8C3B2E;
  --alert-tint: #FBEDEA;

  /* Type */
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fs-base: 18px;
  --fs-sm: 16px;
  --fs-md: 20px;
  --fs-lg: 24px;
  --fs-xl: 30px;
  --fs-2xl: clamp(2rem, 1.6rem + 1.6vw, 2.375rem);   /* ~38px */
  --fs-3xl: clamp(2.25rem, 1.7rem + 2.4vw, 3rem);     /* ~48px */
  --fs-4xl: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);     /* ~60px */
  --lh-body: 1.7;
  --measure: 68ch;

  /* Space (8px scale) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* Layout */
  --content-max: 1200px;
  --text-max: 720px;
  --radius: 4px;
  --header-h: 76px;

  /* Motion */
  --dur: 300ms;
  --travel: 12px;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
svg { display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 var(--sp-2);
  color: var(--ink);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-2); max-width: var(--measure); }
ul, ol { margin: 0 0 var(--sp-2); padding-left: 1.3em; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-head); font-weight: 500; }

/* Focus ring — visible on every interactive element, non-negotiable */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: var(--sp-1) var(--sp-2);
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------- */
/* Layout helpers                                                          */
/* ---------------------------------------------------------------------- */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-2);
}
.prose { max-width: var(--text-max); }
.section { padding-block: var(--sp-12); }
@media (max-width: 768px) {
  .section { padding-block: var(--sp-8); }
}
.section-tight { padding-block: var(--sp-6); }
.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(12, 1fr);
}
.grid > * { grid-column: span 12; }
@media (min-width: 768px) {
  .col-6 { grid-column: span 6; }
  .col-4 { grid-column: span 4; }
  .col-3 { grid-column: span 3; }
  .col-8 { grid-column: span 8; }
}
.center { text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 500;
  margin-bottom: var(--sp-1);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------- */
/* Motion — one effect only                                                */
/* ---------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--travel));
  transition: opacity var(--dur) ease-out, transform var(--dur) ease-out;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn-primary, .btn-secondary, .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 48px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-secondary { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-secondary:hover { background: var(--accent-tint); color: var(--accent-dark); }
/* White text on the brand WhatsApp green (#25D366) measures ~1.98:1 —
   badly fails WCAG AA (4.5:1). This darker teal-green keeps the WhatsApp
   association while giving white text ~5.2:1. Used consistently below for
   the button fill, the floating action button and the mobile bar link. */
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: var(--whatsapp-dark); color: #fff; }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* Paired CTAs (e.g. Call + WhatsApp) read as misaligned when one button is
   noticeably wider than the other, so buttons inside a .btn-row share a
   minimum width and centre their label. Standalone buttons (header, mobile
   bar) are untouched since they're outside .btn-row. */
.btn-row > .btn-primary, .btn-row > .btn-secondary, .btn-row > .btn-whatsapp {
  min-width: 220px;
  justify-content: center;
}
@media (max-width: 480px) {
  .btn-row > .btn-primary, .btn-row > .btn-secondary, .btn-row > .btn-whatsapp {
    min-width: 0;
    /* flex-basis 100% (not auto) forces each button to claim the full row
       width and wrap onto its own line, so a short-label pair (e.g. "Book a
       Visit" / "WhatsApp us") always ends up equal width instead of growing
       unevenly from two different natural content widths. */
    flex: 1 1 100%;
  }
}
.btn-row { margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------------- */
/* Sticky header / nav                                                    */
/* ---------------------------------------------------------------------- */
.nav-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.nav-sticky .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: var(--sp-2);
}
.nav-brand img { height: 40px; width: auto; }
.nav-links {
  display: none;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a { color: var(--ink); font-weight: 500; text-decoration: none; }
.nav-links a:hover { color: var(--accent); }
/* aria-current="page" was being set correctly in the markup but had no
   visual effect at all — the attribute existed for screen readers only.
   Give it an actual on-screen indicator too. */
.nav-links a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
@media (min-width: 1024px) {
  .nav-links { display: flex; align-items: center; }
}
.nav-actions { display: flex; align-items: center; gap: var(--sp-2); }
.nav-phone {
  display: none;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 640px) { .nav-phone { display: inline; } }
/* At 375px the logo (~171px at its fixed aspect ratio) + this button
   (~138px) + the hamburger (48px) need ~355px+ of a 343px inner width,
   squeezing the logo and wrapping the button's own label onto two lines.
   The bottom mobile bar (visible at the same widths) already offers Call
   and WhatsApp, so drop the redundant header CTA on the narrowest phones
   rather than let it collide with the logo. */
@media (max-width: 480px) { .nav-actions .btn-primary { display: none; } }
.nav-toggle {
  display: inline-flex;
  min-height: 48px; min-width: 48px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-links.is-open {
  display: flex;
  position: absolute;
  top: var(--header-h);
  left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-direction: column;
  padding: var(--sp-2);
  gap: 0;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
/* :not(:last-child), and scoped to direct children only (>) so the dropdown's
   own nested <li>s below don't each pick up a border too. */
.nav-links.is-open > li:not(:last-child) { border-bottom: 1px solid var(--line); }
.nav-links.is-open a { display: block; padding: var(--sp-2) 0; }

/* Services dropdown — desktop: hover/focus reveals a floating panel; mobile
   (nav-links.is-open): no hover on touch, so the six services are shown as
   an always-open, indented sub-list right under "Services" instead. */
.nav-dropdown { position: relative; }
.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) {
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--sp-2);
    padding: var(--sp-1) 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(28, 27, 24, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0.15s;
    z-index: 100;
  }
  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .dropdown-menu li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    font-weight: 500;
    white-space: nowrap;
  }
  .dropdown-menu li a:hover,
  .dropdown-menu li a:focus-visible { background: var(--bg); color: var(--accent); }
  .dropdown-menu li a span { color: var(--gold-text); }
}
@media (max-width: 1023px) {
  .nav-links.is-open .dropdown-menu {
    padding-left: var(--sp-3);
    border-left: 2px solid var(--line);
    margin: var(--sp-1) 0 var(--sp-2);
  }
  .nav-links.is-open .dropdown-menu a { padding: var(--sp-1) 0; font-weight: 400; font-size: var(--fs-sm); }
  .nav-links.is-open .dropdown-menu li:not(:last-child) { border-bottom: 0; }
}

/* Mobile bottom action bar */
.mobile-action-bar {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.mobile-action-bar a {
  flex: 1;
  text-align: center;
  padding: var(--sp-2) 0;
  font-weight: 500;
  text-decoration: none;
  min-height: 48px;
}
.mobile-action-bar .call { color: var(--accent); border-right: 1px solid var(--line); }
.mobile-action-bar .whatsapp { color: var(--whatsapp); }
@media (min-width: 1024px) { .mobile-action-bar { display: none; } }
body { padding-bottom: 0; }
/* .mobile-action-bar's real rendered height (~62px: 48px min-height plus
   vertical padding/line-height) ran slightly past the 56px reserved here,
   so the fixed bar clipped the last few px of footer content. Match it to
   the sp-8 token (64px) for a small safety margin instead of an exact,
   fragile pixel count. */
@media (max-width: 1023px) { body.has-mobile-bar { padding-bottom: var(--sp-8); } }

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  bottom: 72px; right: var(--sp-2);
  z-index: 95;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  text-decoration: none;
}
@media (min-width: 1024px) { .whatsapp-float { bottom: var(--sp-3); } }

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero { padding-block: var(--sp-8) var(--sp-8); }
/* Anchor targets (e.g. the service-page "Book a Visit" button linking to
   #enquiry) landed underneath the 76px sticky header with no offset,
   permanently hiding the section heading. */
[id] { scroll-margin-top: var(--header-h); }
.hero .grid { align-items: center; }
.hero h1 { margin-bottom: var(--sp-2); }
.hero-sub { font-size: var(--fs-md); color: var(--ink-soft); max-width: var(--text-max); }
.hero img { border-radius: var(--radius); }

/* ---------------------------------------------------------------------- */
/* Proof bar — removed from the homepage (2026-09-19); rules kept out of the
   cascade rather than left dangling on unused markup. */

/* ---------------------------------------------------------------------- */
/* Cards                                                                   */
/* ---------------------------------------------------------------------- */
.card-service {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  height: 100%;
}
.card-service img { aspect-ratio: 4/3; object-fit: cover; }
/* The "day at Novara" section's 6 photos (one per timeline row), shown as a
   compact 2-column mosaic rather than a single hero photo so all 6 that get
   generated/shot actually appear somewhere, not just home-daylife-01. Kept
   at 2 columns on every width deliberately — it's meant to read as a small
   mosaic of moments, not a full-size photo per row. */
/* Vertically centers the photo mosaic against its taller timeline-text
   sibling column, since a CSS Grid cell stretches to the row height by
   default but its content otherwise sits at the top. */
.daylife-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.daylife-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.daylife-grid img {
  width: 100%;
  height: 100%;
  min-width: 0;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.card-service .body { padding: var(--sp-3); flex: 1; display: flex; flex-direction: column; }
.card-service h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.card-service .cta { margin-top: auto; color: var(--accent); font-weight: 500; }
.card-service:hover { border-color: var(--accent); }

.qualifier-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  height: 100%;
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.qualifier-col:hover { border-color: var(--accent); }
.qualifier-col h3 { font-size: var(--fs-lg); }

.pillar {
  border-top: 3px solid var(--gold);
  padding-top: var(--sp-2);
  text-align: center;
}
.pillar h3 { font-size: var(--fs-md); }

/* ---------------------------------------------------------------------- */
/* Timeline (A day at Novara)                                              */
/* ---------------------------------------------------------------------- */
.timeline-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.timeline-row .time {
  font-family: var(--font-head);
  color: var(--accent-dark);
  font-weight: 500;
}
.timeline-row:last-child { border-bottom: none; }

/* ---------------------------------------------------------------------- */
/* Safety grid                                                             */
/* ---------------------------------------------------------------------- */
/* Single column below 768px, matching every other card grid on the site
   (.grid defaults to one column per row until 768px) — the 2-column mobile
   default here was the one grid that broke that pattern, and at 375px it
   left each card only ~127px of readable width, wrapping headings like
   "Emergency hospital tie-up" one word per line. */
.safety-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 768px) { .safety-grid { grid-template-columns: repeat(3, 1fr); } }

/* Amenities & facilities (Life at Novara) — native <details>, no JS, same
   pattern as the FAQ accordion below. */
.amenity-categories { display: flex; flex-direction: column; gap: 0; }
.amenity-category {
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-3);
}
.amenity-category:first-child { padding-top: 0; }
.amenity-category:last-child { border-bottom: none; }
.amenity-category summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.amenity-category summary::-webkit-details-marker { display: none; }
.amenity-category summary::after {
  content: "+";
  font-size: 1.4em;
  color: var(--accent);
  flex-shrink: 0;
}
.amenity-category[open] summary::after { content: "\2212"; }
.amenity-category h3 {
  font-size: var(--fs-lg);
  margin: 0;
}
.amenity-category .amenity-grid { margin-top: var(--sp-4); }
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-3);
}
@media (min-width: 640px) { .amenity-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .amenity-grid { grid-template-columns: repeat(5, 1fr); } }
.amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-1);
}
.amenity-item span { font-size: var(--fs-sm); color: var(--ink-soft); }
.amenity-icon {
  width: 40px;
  height: 40px;
  color: var(--accent);
  flex-shrink: 0;
}
.safety-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-2);
}
.safety-item h4 { font-size: var(--fs-base); margin-bottom: 4px; }

/* ---------------------------------------------------------------------- */
/* Pricing                                                                 */
/* ---------------------------------------------------------------------- */
.pricing-band {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  height: 100%;
}
.pricing-band .price {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  color: var(--accent-dark);
  display: block;
  margin: var(--sp-1) 0;
}
.pricing-band .price .unit { font-size: var(--fs-sm); color: var(--ink-soft); font-family: var(--font-body); }
/* .pricing-band .price (two classes) beats .todo-flag (one class) on
   specificity alone, so a placeholder price rendered the large serif price
   font instead of the small cream badge. Re-declare the badge look at equal
   specificity to win it back. */
.pricing-band .price.todo-flag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: #6B4E00;
  background: #FCEFC7;
  border: 1px dashed #B08D57;
  padding: 2px 8px;
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------------- */
/* Team                                                                    */
/* ---------------------------------------------------------------------- */
.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
}
.team-card img { aspect-ratio: 1/1; object-fit: cover; }
.team-card .body { padding: var(--sp-3); }
.team-card .role { color: var(--gold-text); font-weight: 500; font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------- */
/* FAQ — native <details>, no JS                                          */
/* ---------------------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-2);
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4em;
  color: var(--accent);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .answer { padding-top: var(--sp-1); color: var(--ink-soft); }
.faq-item summary h3 { margin: 0; font: inherit; }
.faq-cat {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
}
.faq-cat:first-of-type { margin-top: 0; padding-top: 0; }


/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */
.form-field { margin-bottom: var(--sp-2); max-width: 100%; }
.form-field label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}
.form-field .hint { color: var(--ink-soft); font-size: var(--fs-sm); }
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="date"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background: var(--surface);
  color: var(--ink);
}
.form-field textarea { min-height: 96px; }
.form-field input:invalid.touched, .form-field select:invalid.touched {
  border-color: var(--alert);
}
.form-field .error-msg {
  display: none;
  color: var(--alert);
  font-size: var(--fs-sm);
  margin-top: 4px;
}
.form-field.has-error .error-msg { display: block; }
.form-field.has-error input, .form-field.has-error select { border-color: var(--alert); }
/* sp-2 (16px) instead of sp-1 (8px) between radio options — 8px left the
   options' center-to-center tap distance under the ~48px spacing senior
   users need to tap reliably. */
.radio-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.radio-group label { font-weight: 400; display: flex; gap: 8px; align-items: center; }
/* .checkbox-row is applied directly to a single label (the consent
   checkbox), whose text wraps to two lines, so it top-aligns the input
   instead of centering it — center would look off once the text wraps. */
.checkbox-row { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.checkbox-row input[type="checkbox"] { flex-shrink: 0; }
/* "Who needs care?" is now a <fieldset>/<legend> (see enquiry_form) for
   correct radio-group semantics — reset the UA fieldset chrome and match
   the look of every other field label. */
fieldset.form-field { border: 0; padding: 0; min-width: 0; }
fieldset.form-field legend {
  display: block;
  width: 100%;
  padding: 0;
  font-weight: 500;
  margin-bottom: 4px;
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--ink);
}
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: var(--sp-2); padding: var(--sp-2); border-radius: var(--radius); display: none; }
.form-status.show { display: block; }
.form-status.success { background: var(--accent-tint); color: var(--accent-dark); }
.form-status.error { background: var(--alert-tint); color: var(--alert); }
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #E9E7E1; }
.site-footer a { color: #E9E7E1; }
.site-footer a:hover { color: #fff; }
.footer-nap { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-nap { grid-template-columns: repeat(4, 1fr); } }
.footer-nap h4 { color: #fff; font-size: var(--fs-base); }
.footer-nap ul { list-style: none; padding: 0; margin: 0; }
.footer-nap li { margin-bottom: 8px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: #B9B6AE;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between;
}

/* ---------------------------------------------------------------------- */
/* Breadcrumbs                                                             */
/* ---------------------------------------------------------------------- */
.breadcrumbs { font-size: var(--fs-sm); color: var(--ink-soft); padding-block: var(--sp-2); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--line); }

/* ---------------------------------------------------------------------- */
/* Consent banner                                                          */
/* ---------------------------------------------------------------------- */
/* v1 of this fix pinned the banner full-width to the bottom (blocking the
   FAB + mobile bar) then, on mobile, to the top (blocking the hero H1 and
   the open hamburger menu instead) — a full-width fixed bar collides with
   *something* wherever it's anchored. Fixed properly this time: a compact
   card, not a full-width bar, anchored bottom-LEFT and narrow enough to
   structurally clear the bottom-RIGHT WhatsApp FAB regardless of content
   length or viewport, and raised above the mobile bottom bar. Same rules
   on every viewport — no more mobile/desktop special-casing. */
.consent-banner {
  position: fixed;
  left: var(--sp-2);
  right: 88px; /* clears the 56px-wide .whatsapp-float (right: var(--sp-2)) with an 8px gap */
  bottom: calc(var(--sp-8) + var(--sp-1)); /* clears the 64px mobile bottom bar with a small gap */
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: var(--sp-2);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  display: none;
}
.consent-banner.show { display: block; }
.consent-banner .wrap { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding-inline: 0; max-width: none; }
.consent-banner p { margin: 0; max-width: none; font-size: var(--fs-sm); }
.consent-banner .actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.consent-banner button {
  min-height: 44px; padding: 0 var(--sp-2);
  border-radius: var(--radius); border: 1px solid #fff; cursor: pointer;
  font-weight: 500;
}
.consent-banner .accept { background: var(--accent); color: #fff; border-color: var(--accent); }
.consent-banner .reject { background: transparent; color: #fff; }
@media (min-width: 1024px) {
  /* No mobile bottom bar to clear at this width — anchor to the left,
     well clear of the FAB's bottom-right corner, and cap the width so it
     reads as a card rather than a bar. */
  .consent-banner { right: auto; bottom: var(--sp-3); max-width: 420px; }
}
/* Both the footer and this banner sit on the same dark --ink background,
   where the default sage focus outline drops to ~2.3:1 contrast (fails the
   3:1 minimum for non-text UI). Swap to white there. */
.site-footer a:focus-visible, .site-footer button:focus-visible,
.consent-banner a:focus-visible, .consent-banner button:focus-visible {
  outline-color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Last-updated marker (see maintenance automation in the handoff)         */
/* ---------------------------------------------------------------------- */
.lastmod { color: var(--ink-soft); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------- */
/* Misc                                                                    */
/* ---------------------------------------------------------------------- */
.divider { border: none; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
.badge {
  display: inline-block;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
}
.todo-flag {
  display: inline-block;
  background: #FCEFC7;
  color: #6B4E00;
  border: 1px dashed #B08D57;
  font-size: var(--fs-sm);
  padding: 2px 8px;
  border-radius: var(--radius);
}
/* Block-level version of the same placeholder treatment, for a full
   paragraph-length notice (e.g. "legal review required") instead of a short
   inline badge — cream/dashed like every other placeholder, never the red
   `alert` token, which is reserved for form errors. */
.todo-notice {
  display: block;
  background: #FCEFC7;
  color: #6B4E00;
  border: 1px dashed #B08D57;
  padding: var(--sp-2);
  border-radius: var(--radius);
}