/* ============================================================
   The Independent Care Directory — shared stylesheet
   Reuses the Caia design system (locked tokens, Fraunces + Hanken,
   self-hosted, zero third-party). Directory-specific components below.
   ============================================================ */

/* ---------- fonts (self-hosted, shared with the Caia site) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-full.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-full-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- tokens (locked palette, shared with Caia) ---------- */
:root {
  --linen: #efede6;
  --linen-deep: #e4dfd1;
  --white: #ffffff;
  --ink: #191510;
  --moss: #87ba3b;
  --sub: #6a6256;
  --line: #ddd8cc;
  --line-deep: rgba(25, 21, 16, 0.16);
  --evergreen: #17261c;
  --pine-teal: #2d4e39;
  --linen-soft: #d8d2c4;

  --maxw: 1180px;
  --gutter: 1.5rem;
  /* section vertical rhythm, calibrated near the Caia site. --sec-y is the
     generous standard; --sec-y-sm is the lighter side, used for a section's top
     when it sits directly under a preceding section so gaps don't double up. */
  --sec-y: clamp(5rem, 10vh, 8rem);
  --sec-y-sm: clamp(3.25rem, 6.5vh, 5rem);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* sticky footer: column layout so the footer holds the viewport bottom even
     when a page's content is short (e.g. the 404) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#main { flex: 1 0 auto; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
a { color: inherit; }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--sans); /* stay Hanken even on a heading element (h2.eyebrow) */
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--moss);
  flex: none;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 560; margin: 0; }
.moss { color: var(--moss); }

/* ---------- icons (Phosphor sprite, currentColor) ---------- */
.icon {
  width: 1.05em; height: 1.05em;
  display: inline-block; vertical-align: middle; flex: none;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* arrow slide-through hover (matches the Caia motion) */
.arrow-slide {
  position: relative; display: inline-block; overflow: hidden;
  width: 1.05em; height: 1.05em; vertical-align: middle; flex: none;
}
.arrow-slide .icon { width: 100%; height: 100%; display: block;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1); }
.arrow-slide .ar-2 { position: absolute; inset: 0; }
.arrow-slide.dir-right .ar-2 { transform: translateX(-100%); }
.arrow-slide.dir-left .ar-2 { transform: translateX(100%); }
.arrow-slide.dir-up .ar-2 { transform: translateY(100%); }
/* diagonal: the clone waits off the bottom-left, the arrow exits top-right */
.arrow-slide.dir-up-right .ar-2 { transform: translate(-100%, 100%); }
a:hover .arrow-slide.dir-right .ar-1,
button:hover .arrow-slide.dir-right .ar-1 { transform: translateX(100%); }
a:hover .arrow-slide.dir-right .ar-2,
button:hover .arrow-slide.dir-right .ar-2 { transform: translateX(0); }
a:hover .arrow-slide.dir-left .ar-1 { transform: translateX(-100%); }
a:hover .arrow-slide.dir-left .ar-2 { transform: translateX(0); }
a:hover .arrow-slide.dir-up .ar-1 { transform: translateY(-100%); }
a:hover .arrow-slide.dir-up .ar-2 { transform: translateY(0); }
a:hover .arrow-slide.dir-up-right .ar-1,
button:hover .arrow-slide.dir-up-right .ar-1 { transform: translate(100%, -100%); }
a:hover .arrow-slide.dir-up-right .ar-2,
button:hover .arrow-slide.dir-up-right .ar-2 { transform: translate(0, 0); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600;
  text-decoration: none; padding: 0.62rem 1.15rem; border-radius: 100px;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
  cursor: pointer; border: 0;
}
.btn-ink { background: var(--ink); color: var(--linen); }
.btn-ink:hover { transform: translateY(-1px); }
.btn-moss { background: var(--moss); color: var(--ink); }
.btn-moss:hover { transform: translateY(-1px); filter: brightness(1.04); }

/* chip CTA: moss pill with a trailing ink circle holding a slide-arrow (matches
   the Caia chip button — structure of the chunky-pill ref, care-warm styling) */
.btn-chip { padding: 0.42rem 0.42rem 0.42rem 1.45rem; gap: 0.95rem; }
.btn-chip > span:first-child { line-height: 1; }
.btn-chip-icon {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--ink); color: var(--linen);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.btn-chip-icon .arrow-slide { width: 1.02rem; height: 1.02rem; }

/* ---------- wordmark lockup (text-only variant) ---------- */
.lockup { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.lk-mark { width: 2.5rem; height: 2.5rem; flex: none; color: var(--moss); }
.lockup .lk-text { display: flex; flex-direction: column; line-height: 1; }
.lockup .lk-word {
  font-family: var(--serif);
  font-variation-settings: "opsz" 30, "wght" 600;
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 0.98;
  color: var(--ink);
}
.lockup .lk-sub {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  color: var(--sub);
  margin-top: 0.28rem;
}

/* ---------- header (fixed; floats transparent over the home hero, solid else) ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(239, 237, 230, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  /* airier at the very top; tightens once scrolled (matches the Caia header) */
  padding-top: 0.65rem;
  transition: background 0.3s ease, border-color 0.3s ease, padding-top 0.3s ease, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.site-header.scrolled { border-bottom-color: var(--line); padding-top: 0; }
/* interior pages have a solid header, so keep the hairline visible even at the top
   (the home header floats transparent over the dark hero and manages its own state) */
/* interior pages: solid header with no top-spacing and no shrink-on-scroll
   animation (the airy-top-then-tighten is a home-only behaviour that pairs
   with the transparent hero) */
body:not(.page-home) .site-header { border-bottom-color: var(--line); padding-top: 0; }
/* anchor targets clear the fixed header when jumped/deep-linked to (#search,
   #browse, #top, #main) so the scroll never lands under the 72px header. */
:target { scroll-margin-top: 6rem; }
#top, #main, #browse, #search { scroll-margin-top: 6rem; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; height: 72px;
}
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a.navlink {
  font-size: 0.92rem; font-weight: 500; color: var(--sub);
  text-decoration: none; transition: color 0.2s ease;
}
.nav a.navlink:hover { color: var(--moss); }
.header-cta { border: 1px solid var(--ink); background: var(--ink); color: var(--linen); }
.header-cta:hover { transform: translateY(-1px); }

/* on the home page the header floats transparent over the dark hero until the
   user scrolls past it, then it snaps to the solid state above (matches Caia) */
.page-home .site-header:not(.scrolled) {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: none;
}
.page-home .site-header:not(.scrolled) .lk-word { color: var(--linen); }
.page-home .site-header:not(.scrolled) .lk-sub { color: var(--linen-soft); }
.page-home .site-header:not(.scrolled) .navlink { color: var(--linen-soft); }
.page-home .site-header:not(.scrolled) .header-cta {
  border-color: rgba(239, 237, 230, 0.6); background: rgba(239, 237, 230, 0.08); color: var(--linen);
}
/* mobile: keep About reachable from the header (it's the editorial hook); drop
   only the in-page "Browse" scroll link, which is redundant on a phone */
@media (max-width: 640px) { .nav .navlink-browse { display: none; } }
/* narrow phones: shrink the lockup + CTA so they don't crowd each other */
@media (max-width: 480px) {
  .lk-mark { width: 2rem; height: 2rem; }
  .lockup .lk-word { font-size: 1.05rem; }
  .lockup .lk-sub { font-size: 0.5rem; letter-spacing: 0.24em; }
  .header-cta { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
  .nav { gap: 1.1rem; }
}
/* tightest phones: drop the wordmark to the logomark alone so About + the CTA
   have room (the logomark still links home; the lockup keeps its aria-label).
   Scoped to the header so the footer lockup keeps its wordmark. */
@media (max-width: 430px) { .site-header .lockup .lk-text { display: none; } }

/* ---------- intro (interior-page header, light; clears the fixed header) ---------- */
/* top pad clears the fixed header (72px wrap, no top-spacing on interior pages)
   and then adds the Caia privacy-page gap below it, so the header→crumb rhythm
   matches */
.intro { background: var(--linen); padding: calc(72px + clamp(3.25rem, 6vh, 4.25rem)) 0 var(--sec-y-sm); }
.intro-head { max-width: 44rem; }
.intro h1 {
  font-size: clamp(2.2rem, 5vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 1rem 0 0;
}
.intro .lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--sub);
  max-width: 42rem;
  margin: 1.5rem 0 0;
}

/* region intro sits on the deeper linen; the linen-deep -> linen step where the
   results begin acts as the divider, so no hairline is needed */
.intro-region { background: var(--linen-deep); }

/* decorative region silhouette: faint, unlabeled, with a generous right margin
   (footer-glyph energy). Behind the text; the section clips anything that spills
   past the band; hidden on mobile. Size (width/height attrs) is set per region. */
.intro-has-map { overflow: hidden; }
.intro-has-map .wrap { position: relative; }
.intro-has-map .intro-head { position: relative; z-index: 1; }
.intro-map {
  position: absolute; z-index: 0;
  top: 50%; right: 4rem;
  transform: translateY(-50%);
  color: var(--pine-teal); opacity: 0.1;
  pointer-events: none; user-select: none;
}
@media (max-width: 1120px) { .intro-map { display: none; } }

/* breadcrumb back-link (interior pages: own row above the eyebrow, hugs its text;
   spacing mirrors the Caia privacy-page back-link) */
.crumb {
  display: flex; width: fit-content; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 600; color: var(--sub);
  text-decoration: none; margin: 0 0 2.25rem;
  transition: color 0.2s ease;
}
.crumb:hover { color: var(--moss); }

/* region index: cross-link to the other regions (SEO internal linking + UX) */
.region-nav {
  margin-top: clamp(3rem, 6vh, 4.5rem);
  padding-top: clamp(2rem, 4vh, 2.75rem);
  border-top: 1px solid var(--line);
}
.region-nav-title { margin-bottom: 1.15rem; }
.region-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.region-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 100px;
  padding: 0.5rem 0.55rem 0.5rem 1rem;
  font-size: 0.92rem; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.region-chip:hover { border-color: var(--moss); color: var(--moss); transform: translateY(-1px); }
.rc-count {
  font-size: 0.74rem; font-weight: 600; color: var(--sub);
  background: var(--linen-deep); border-radius: 100px; padding: 0.08rem 0.5rem;
}

/* ---------- hero (ink + amber glow, full-bleed-with-margin) — home only ----------
   Echoes the Caia hero: dark inset rounded panel, warm off-centre glow + moss
   pool. No video in v1; a background image can drop in behind .hero later. The
   search sits inside as a light inset panel, so it stays fully legible on dark. */
.hero-frame { padding: 0.55rem; }
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: var(--linen);
  border-radius: 22px;
  transform: translateZ(0);
}
/* warm hero photo behind the ink panel: blurred + heavily scrimmed so it adds
   depth without hurting legibility (self-hosted; low-res source, blur hides it) */
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  background: url("/img/hero/hero-hands.jpg") right center / cover no-repeat;
  filter: blur(4px); transform: scale(1.06);
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(95deg, var(--ink) 6%, rgba(25, 21, 16, 0.86) 34%, rgba(25, 21, 16, 0.5) 70%, rgba(25, 21, 16, 0.62) 100%),
    linear-gradient(to top, rgba(25, 21, 16, 0.7), rgba(25, 21, 16, 0) 55%);
}
/* on phones the text stacks full-width over the image, so scrim more evenly */
@media (max-width: 720px) {
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(25, 21, 16, 0.8), rgba(25, 21, 16, 0.62)),
      linear-gradient(to top, rgba(25, 21, 16, 0.55), rgba(25, 21, 16, 0) 60%);
  }
}
.hero::before {
  content: "";
  position: absolute; z-index: 1;
  top: -30%; right: -8%;
  width: 62%; height: 120%;
  background: radial-gradient(55% 50% at 60% 40%, rgba(255, 184, 92, 0.24) 0%, rgba(214, 142, 70, 0.11) 40%, rgba(25, 21, 16, 0) 72%);
  filter: blur(8px);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; z-index: 1;
  bottom: -30%; left: -12%;
  width: 52%; height: 90%;
  background: radial-gradient(50% 50% at 40% 50%, rgba(135, 186, 59, 0.10) 0%, rgba(25, 21, 16, 0) 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2;
  /* top pad clears the floating header with a gap close to the interior pages'
     header->content rhythm (a touch tighter is fine over a transparent header) */
  padding: clamp(7rem, 12vh, 8.5rem) var(--gutter) clamp(2.5rem, 5vh, 3.5rem);
}
.hero .eyebrow { color: var(--linen-soft); }
.hero-head { max-width: 44rem; }
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.7rem);
  line-height: 1.05; letter-spacing: -0.015em;
  margin: 1rem 0 0;
}
.hero .lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--linen-soft);
  max-width: 42rem; margin: 1.5rem 0 0;
}

/* search / filter bar: light inset panel over the dark hero. Text field grows,
   two selects sit beside it. */
.search {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 0.6rem;
  margin-top: clamp(2rem, 4vh, 3rem);
  /* translucent frosted linen so the warm hero glow + photo read through it more
     openly (glassier); the white fields inside keep the inputs fully legible */
  background: rgba(239, 237, 230, 0.38);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  padding: 0.6rem;
  border-radius: 16px;
  box-shadow: 0 26px 54px -30px rgba(0, 0, 0, 0.6);
}
.search-field {
  position: relative;
  display: flex; align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-field:focus-within { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(135, 186, 59, 0.16); }
.search-text .icon { position: absolute; left: 1rem; color: var(--sub); pointer-events: none; }
.search input[type="search"] {
  width: 100%; border: 0; background: none; outline: none;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 0.9rem 1rem 0.9rem 2.7rem;
}
.search input::placeholder { color: var(--sub); }
.search select {
  width: 100%; border: 0; background: none; outline: none; cursor: pointer;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 0.9rem 2.6rem 0.9rem 1rem;
  appearance: none; -webkit-appearance: none;
  /* self-hosted inline caret (data URI, same-origin — no third party) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none" stroke="%236a6256" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"><polyline points="208 96 128 176 48 96"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.8rem;
}

/* ---------- SlimSelect (self-hosted) theming ----------
   The two hero filters are enhanced into branded, searchable dropdowns. Map the
   library's CSS variables to the palette and let its trigger sit flush inside the
   existing .search-field pill. Native <select>s stay the no-JS fallback. */
:root {
  --ss-primary-color: var(--moss);
  --ss-bg-color: var(--white);
  --ss-font-color: var(--ink);
  --ss-placeholder-color: var(--sub);
  --ss-border-color: var(--line);
  --ss-focus-color: var(--moss);
  --ss-border-radius: 12px;
  --ss-search-height: 52px; /* taller in-panel search field than the 40px default */
}
/* the .search-field pill already provides the white bg + border, so the trigger
   sits transparent and borderless inside it, matched to the input's type/padding.
   SlimSelect lays out .ss-values (flex:1) + .ss-arrow, so the caret self-aligns. */
.search-field .ss-main {
  background: transparent; border: 0; min-height: 0;
  padding: 0.9rem 1rem; font-family: var(--sans); font-size: 1rem; color: var(--ink);
}
.search-field .ss-main:focus, .search-field .ss-main:focus-within { box-shadow: none; outline: none; }
.search-field .ss-main .ss-placeholder { color: var(--sub); }
/* dropdown panel: white card, moss selection, matching the site */
.ss-content {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 26px 54px -30px rgba(0, 0, 0, 0.5); font-family: var(--sans);
}
.ss-content .ss-search { padding: 0.55rem 0.7rem; }
/* clean, borderless search bar — the panel's own border-bottom is the only divider,
   and the taller --ss-search-height gives it room; no inner box or focus glow. */
.ss-content .ss-search input {
  font-family: var(--sans); font-size: 0.95rem;
  border: 0; border-radius: 0; background: transparent;
}
.ss-content .ss-search input:focus { border: 0; box-shadow: none; }
/* neutral, unobtrusive scrollbar (was moss via --ss-primary-color) */
.ss-content .ss-list { scrollbar-width: thin; scrollbar-color: var(--sub) transparent; }
.ss-content .ss-list::-webkit-scrollbar { width: 8px; }
.ss-content .ss-list::-webkit-scrollbar-thumb {
  background: var(--sub); border-radius: 8px;
  border: 2px solid var(--white); background-clip: padding-box;
}
.ss-content .ss-list::-webkit-scrollbar-track { background: transparent; }
.ss-content .ss-list .ss-option { font-size: 0.95rem; color: var(--ink); padding: 0.62rem 1rem; }
/* kill SlimSelect's default moss 5px left-border on option hover */
.ss-content .ss-list .ss-option:hover:not(.ss-disabled),
.ss-content .ss-list .ss-option.ss-highlighted { background: rgba(135, 186, 59, 0.14); color: var(--ink); border-left: 0; }
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected { background: var(--moss); color: #fff; }
/* optgroup labels (for when regions are grouped by UK / Ireland) */
.ss-content .ss-list .ss-optgroup .ss-optgroup-label-text {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sub);
}
/* mobile modal (SlimSelect switches to a centered dialog under ~600px): re-theme
   the default 80%-black overlay to a soft evergreen wash, and carry the neutral
   scrollbar into the higher-specificity modal-list rule. Everything else — the 52px
   search field, borderless input, hover, option styling — already applies through
   the shared .ss-content selectors. */
.ss-modal-overlay { background-color: rgba(23, 38, 28, 0.76); }
.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-list {
  scrollbar-width: thin; scrollbar-color: var(--sub) transparent;
}
.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-list::-webkit-scrollbar { width: 8px; }
.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-list::-webkit-scrollbar-thumb {
  background: var(--sub); border-radius: 8px; border: 2px solid var(--white); background-clip: padding-box;
}

@media (max-width: 720px) {
  .search { grid-template-columns: 1fr; }
}

/* ---------- results (linen, seamless with the hero frame's margin above) ---------- */
.results { background: var(--linen); padding: var(--sec-y-sm) 0 var(--sec-y); }
.results-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 0.4rem 1rem;
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}
.results-count { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -0.01em; }
.results-note {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; color: var(--sub); margin: 0;
}
.results-note .icon { color: var(--moss); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }

/* ---------- listing card ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(25, 21, 16, 0.45); border-color: var(--linen); }
.card.is-hidden { display: none; }
.card-link {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.4rem 1.4rem 1.3rem;
  text-decoration: none; color: inherit;
}
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.card-monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 12px;
  background: var(--linen-deep);
  color: var(--pine-teal);
  font-family: var(--serif);
  font-variation-settings: "opsz" 30, "wght" 560;
  font-size: 1.35rem; line-height: 1;
  flex: none;
}
.rating {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.76rem; font-weight: 600; color: var(--sub);
  white-space: nowrap;
}
/* CQC rating reads as an official quality seal: a check-seal icon, the "CQC"
   source muted, the rating level emphasised, and a colour tint that scales with
   the rating (stronger green for Outstanding, amber/red for the lower bands) */
.rating-cqc {
  gap: 0.36rem;
  border: 1px solid transparent; border-radius: 100px;
  padding: 0.28rem 0.66rem 0.28rem 0.5rem;
}
.rating-cqc .icon { width: 0.98em; height: 0.98em; color: var(--pine-teal); }
.rt-src { color: var(--sub); font-weight: 600; letter-spacing: 0.02em; }
.rt-lvl { color: var(--pine-teal); font-weight: 700; }
.lvl-outstanding { background: rgba(135, 186, 59, 0.22); }
.lvl-good { background: rgba(135, 186, 59, 0.11); }
.lvl-requires-improvement { background: rgba(214, 142, 70, 0.16); }
.lvl-requires-improvement .icon, .lvl-requires-improvement .rt-lvl { color: #96551f; }
.lvl-inadequate { background: rgba(190, 74, 58, 0.14); }
.lvl-inadequate .icon, .lvl-inadequate .rt-lvl { color: #9c3b30; }
/* Google star rating: same pill shape as the CQC seal but deliberately quiet
   (neutral linen-deep, hairline border) so the colour-coded CQC pill stays primary */
.rating-star {
  gap: 0.34rem;
  /* neutral tint at the same 0.11 alpha as the CQC "Good" pill, and borderless
     like it, so the two ratings match and the colour-coded CQC pill leads */
  background: rgba(106, 98, 86, 0.11); border: 1px solid transparent; border-radius: 100px;
  padding: 0.28rem 0.66rem 0.28rem 0.5rem;
}
.rating-star .icon { width: 0.85em; height: 0.85em; color: var(--moss); }
.rating-n { color: var(--sub); font-weight: 500; }
.card-name {
  font-size: 1.32rem; line-height: 1.14; letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.card-region {
  display: flex; align-items: flex-start; gap: 0.4rem;
  font-size: 0.9rem; color: var(--sub); line-height: 1.4;
  margin: 0 0 1rem;
}
.card-region .icon { width: 0.95em; height: 0.95em; color: var(--moss); margin-top: 0.15em; }
.card-tags {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.card-tags li {
  font-size: 0.74rem; font-weight: 500; color: var(--sub);
  border: 1px solid var(--line); border-radius: 100px; padding: 0.26rem 0.65rem;
}
.card-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: auto; font-size: 0.88rem; font-weight: 600; color: var(--ink);
  transition: color 0.2s ease;
}
.card:hover .card-cta { color: var(--moss); }

.no-results {
  margin: 2rem 0 0; padding: 2rem;
  background: var(--white); border: 1px dashed var(--line); border-radius: 16px;
  color: var(--sub); font-size: 1.02rem; text-align: center;
}

/* ---------- provider detail page ---------- */
/* intro identity header sits on the deeper linen (matches the region pages); the
   linen -> linen step into .provider-body acts as the divider */
.provider-intro { background: var(--linen-deep); }
/* breadcrumb trail (Directory / Region / Provider): orientation + SEO */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 500; margin: 0 0 1.75rem;
}
.breadcrumb a { color: var(--sub); text-decoration: none; transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--moss); }
.breadcrumb .bc-sep { color: var(--line-deep); }
.breadcrumb .bc-current {
  color: var(--ink); font-weight: 600;
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.provider-id { display: flex; align-items: center; gap: 1.1rem; margin-top: 0.35rem; }
.provider-monogram {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: clamp(4rem, 8vw, 4.6rem); height: clamp(4rem, 8vw, 4.6rem); border-radius: 18px;
  background: var(--white); color: var(--pine-teal);
  font-family: var(--serif);
  font-variation-settings: "opsz" 30, "wght" 560;
  font-size: clamp(2.1rem, 4.4vw, 2.5rem); line-height: 1;
}
.provider-id-text .eyebrow { margin-bottom: 0.5rem; }
.provider-intro h1 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.05; letter-spacing: -0.015em; margin: 0;
}
.rating-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.5rem; }
.rating-row .rating { font-size: 0.85rem; padding: 0.34rem 0.8rem 0.34rem 0.62rem; }
.provider-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.85rem; }
.provider-actions .btn:not(.btn-chip) { padding: 0.78rem 1.4rem; font-size: 0.95rem; }
@media (max-width: 420px) { .provider-actions .btn { width: 100%; justify-content: center; } }

/* mobile sticky action bar: Website/Call kept in thumb reach on phone widths.
   Hidden on desktop; slides up once the inline actions scroll off (see app.js). */
.provider-stickybar { display: none; }
@media (max-width: 700px) {
  .provider-stickybar {
    display: flex; gap: 0.6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(239, 237, 230, 0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(25, 21, 16, 0.08);
    transform: translateY(120%); opacity: 0; pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
  }
  .provider-stickybar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .provider-stickybar .btn { flex: 1; justify-content: center; font-size: 0.95rem; }
  .provider-stickybar .btn:not(.btn-chip) { padding: 0.85rem 1rem; }
  /* full-width chip: label hugs the left, the circle sits at the right edge */
  .provider-stickybar .btn-chip { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .provider-stickybar { transition: none; } }

/* body: asymmetric two-column — descriptive content left, sticky info aside right */
.provider-body { background: var(--linen); padding: var(--sec-y-sm) 0; }
.provider-grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 860px) { .provider-grid { grid-template-columns: 1fr; } }
.provider-main > .prose-block + .prose-block { margin-top: clamp(2.25rem, 4.5vh, 3rem); }
.block-title { font-size: 1.4rem; letter-spacing: -0.01em; margin: 0 0 1.1rem; }
.provider-about { font-size: 1.15rem; line-height: 1.65; color: var(--ink); margin: 0; max-width: 48ch; }

/* service rows: icon + label + one-line explainer, 2-up on desktop, 1-up mobile */
.service-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
@media (max-width: 560px) { .service-rows { grid-template-columns: 1fr; } }
.service-row { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.95rem 0; border-top: 1px solid var(--line); }
/* keep the top hairline off the first row of each column (both columns start level) */
.service-rows .service-row:nth-child(1),
.service-rows .service-row:nth-child(2) { border-top: 0; }
@media (max-width: 560px) {
  .service-rows .service-row:nth-child(2) { border-top: 1px solid var(--line); }
  .service-rows .service-row:nth-child(1) { border-top: 0; }
}
.service-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.3rem; height: 2.3rem; border-radius: 10px;
  background: var(--linen-deep); color: var(--pine-teal);
}
.service-ic .icon { width: 1.3rem; height: 1.3rem; }
.service-copy { display: flex; flex-direction: column; gap: 0.15rem; }
.service-name { font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.25; }
.service-desc { font-size: 0.9rem; color: var(--sub); line-height: 1.45; }

.area-served { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 1.05rem; color: var(--ink); margin: 0; }
.area-served .icon { color: var(--moss); width: 1.05em; height: 1.05em; margin-top: 0.22em; }
/* town chips: the parenthetical town list, made scannable (also long-tail SEO) */
.town-chips { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.town-chips li {
  font-size: 0.82rem; font-weight: 500; color: var(--sub);
  background: var(--white); border: 1px solid var(--line); border-radius: 100px;
  padding: 0.3rem 0.75rem;
}
.area-note { font-size: 0.95rem; color: var(--sub); margin: 1.1rem 0 0; }
.area-note a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--line);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.area-note a:hover { color: var(--moss); text-decoration-color: var(--moss); }

/* aside info cards (white on linen) */
.provider-aside { display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 92px; }
@media (max-width: 860px) { .provider-aside { position: static; } }
.info-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; }
.info-card-title {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sub); margin: 0 0 1.15rem;
}
.info-list { margin: 0; display: flex; flex-direction: column; }
.info-row { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 0; }
.info-row:first-child { padding-top: 0; }
.info-row:last-child { padding-bottom: 0; }
.info-row + .info-row { border-top: 1px solid var(--line); }
.info-row dt {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sub); margin: 0;
}
.info-row dd { margin: 0; font-size: 0.98rem; color: var(--ink); display: flex; align-items: baseline; gap: 0.3rem 0.55rem; flex-wrap: wrap; }
.info-strong { font-weight: 600; }
.info-muted { color: var(--sub); font-size: 0.9rem; }
.provenance {
  margin: 1.15rem 0 0; padding-top: 1.15rem; border-top: 1px solid var(--line);
  font-size: 0.8rem; line-height: 1.5; color: var(--sub);
}
.info-link {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-size: 0.84rem; font-weight: 600; color: var(--sub); text-decoration: none;
  transition: color 0.2s ease;
}
.info-link:hover { color: var(--moss); }
.info-link .ext, .contact-list .ext { width: 0.82em; height: 0.82em; }
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.contact-list li + li { border-top: 1px solid var(--line); }
.contact-list a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0;
  color: var(--ink); text-decoration: none; font-size: 0.98rem; font-weight: 500;
  transition: color 0.2s ease;
}
.contact-list li:first-child a { padding-top: 0; }
.contact-list li:last-child a { padding-bottom: 0; }
.contact-list a:hover { color: var(--moss); }
.contact-list .icon { color: var(--sub); width: 1.15em; height: 1.15em; flex: none; }
.contact-list a:hover .icon { color: var(--moss); }
.contact-list .ext { color: var(--sub); margin-left: auto; flex: none; }
/* the leading globe/phone size rule (1.15em) must not reach the trailing
   slide-arrow, or it overflows the 0.82em box and clips under overflow:hidden */
.contact-list .ext .icon { width: 100%; height: 100%; }
.contact-text { overflow-wrap: anywhere; }

/* claim band: the "is this your service?" outreach hook (warm ink, moss accent) */
.claim {
  background: var(--linen);
  padding: var(--sec-y-sm) 0;
}
/* the ink card: full-bleed-with-margin (inset by .wrap), rounded, with a warm
   scrimmed photo behind the copy — same "floating card" family as the hero */
.claim-card {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 22px;
  background: var(--ink) url(/img/claim/claim-conversation.jpg) center / cover no-repeat;
  color: var(--linen);
  padding: clamp(2.5rem, 6vw, 4.25rem);
}
/* heavy ink scrim (darker on the left where the copy sits) so the photo reads as
   warm texture and the text stays legible, plus the amber glow at top-right */
.claim-card::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 130% at 84% 18%, rgba(255, 184, 92, 0.20) 0%, rgba(25, 21, 16, 0) 55%),
    linear-gradient(105deg, rgba(20, 16, 12, 0.94) 0%, rgba(20, 16, 12, 0.82) 45%, rgba(20, 16, 12, 0.60) 100%);
}
.claim-inner { position: relative; z-index: 1; max-width: 40rem; }
.claim .eyebrow { color: var(--linen-soft); font-size: 0.72rem; }
.claim h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0.95rem 0 0; }
.claim p { color: var(--linen-soft); font-size: 1.08rem; line-height: 1.6; margin: 1.1rem 0 0; max-width: 38rem; }
.claim .btn { margin-top: 1.9rem; }

/* related providers: cards on linen so the page flows calmly out of the claim
   card (which now carries the dark contrast that linen-deep used to provide) */
.provider-related { background: var(--linen); }
.results-more-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.9rem; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: color 0.2s ease;
}
.results-more-link:hover { color: var(--moss); }

/* ---------- about / why independent ---------- */
/* surface rhythm down the page (no two identical adjacent except the CTA, which
   deliberately shares its neighbour's surface so the ink card is the only
   divider): intro linen-deep, reasons linen, problem linen-deep, choose
   evergreen, who white, faq linen, claim linen. */
.about-intro { background: var(--linen-deep); }
.about-section { padding: var(--sec-y) 0; }
.about-alt { background: var(--linen-deep); }
.about-white { background: var(--white); }
.about-dark { background: var(--evergreen); color: var(--linen); }
.about-section h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08; letter-spacing: -0.015em; margin: 1rem 0 0;
}

/* shared section header (ported from Caia): a full-width eyebrow row, then a
   heading-left / intro-right grid so the right side never reads empty. Sections
   without a supporting intro keep the stacked eyebrow+h2 (who-we-are, faq). */
.about-topbar { margin-bottom: 1rem; }
.about-headrow {
  display: grid; grid-template-columns: 1.45fr 1fr;
  gap: 2.5rem 3.5rem; align-items: start;
  margin-bottom: clamp(3rem, 6vh, 4.5rem);
}
.about-headrow h2 { margin: 0; max-width: 15ch; }
.about-headrow-intro {
  color: var(--sub); font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.55; max-width: 34ch; margin: 0;
}
@media (max-width: 820px) {
  .about-headrow { grid-template-columns: 1fr; gap: 1.1rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
}

/* orphan control: balance headings (even line lengths, no lone last word) and
   let paragraphs use `pretty` (which specifically avoids a single-word last
   line). Scoped to the about page; specific stubborn cases are handled by copy
   or width alongside this. */
.about-intro h1, .about-section h2, .about-statement, .criteria-note-pull,
.criterion-desc, #about-cta-title { text-wrap: balance; }
.about-intro .lede, .about-headrow-intro, .about-statement-note,
.reason-card-desc, .about-prose p, .faq-lede,
.criteria-note-body { text-wrap: pretty; }

/* shared prose (who-we-are) */
.about-prose > * { margin: 0; }
.about-prose > * + * { margin-top: 1.15rem; }
.about-prose p { font-size: 1.1rem; line-height: 1.68; color: var(--ink); max-width: 54ch; }
.about-prose a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--moss); transition: color 0.2s ease;
}
.about-prose a:hover { color: var(--moss); }

/* image slots: warm self-hosted photos (cropped + lightly brand-graded at build
   time; see site/img/about/SOURCES.txt). A soft scrim ::after adds depth and a
   faint pine-teal edge so the photos sit in the palette. Swapping a photo is one
   background-image change. Pine-teal shows through only while an image loads. */
.about-figure {
  position: relative; margin: 0; border-radius: 18px; overflow: hidden;
  background: var(--pine-teal) center / cover no-repeat;
}
.about-figure::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(23, 38, 28, 0) 52%, rgba(23, 38, 28, 0.28) 100%),
    linear-gradient(300deg, rgba(45, 78, 57, 0.16) 0%, rgba(45, 78, 57, 0) 42%);
  box-shadow: inset 0 0 0 1px rgba(25, 21, 16, 0.06);
}
.about-figure-intro { aspect-ratio: 4 / 5; background-image: url(/img/about/intro.jpg); }
.about-figure-problem { aspect-ratio: 5 / 4; background-image: url(/img/about/problem.jpg); }
.about-figure-faq { aspect-ratio: 4 / 5; background-image: url(/img/about/faq.jpg); }

/* 1 · intro — asymmetric text + inset image */
.about-intro-grid {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.about-intro-grid .intro-head { max-width: none; }
@media (max-width: 820px) {
  .about-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* square (not landscape) + face-biased crop so the mobile crop keeps the face */
  .about-figure-intro { aspect-ratio: 1 / 1; background-position: center 22%; }
}

/* 2 · staggered reason cards (ports the shelved Caia staggered-set idea).
   Equal height: align-items:stretch makes all three fill the tallest card in the
   row, then a transform:translateY cascade staggers them visually WITHOUT
   changing the box heights (margin-top would have made them unequal). The bottom
   margin gives the most-translated card room so it doesn't spill into the next
   section. */
.reason-cards {
  list-style: none; margin: 0 0 clamp(2rem, 6vh, 4.5rem); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch;
}
.reason-cards > li:nth-child(2) { transform: translateY(clamp(1rem, 3vh, 2.25rem)); }
.reason-cards > li:nth-child(3) { transform: translateY(clamp(2rem, 6vh, 4.5rem)); }
.reason-card {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; padding: clamp(1.5rem, 2.4vw, 2rem);
}
.reason-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 12px;
  background: var(--linen-deep); color: var(--pine-teal);
}
.reason-ic .icon { width: 1.5rem; height: 1.5rem; }
.reason-num {
  position: absolute; top: clamp(1.35rem, 2.4vw, 1.9rem); right: clamp(1.4rem, 2.4vw, 1.95rem);
  font-family: var(--serif); font-variation-settings: "opsz" 40, "wght" 500;
  font-size: 1.5rem; color: var(--moss); line-height: 1;
}
.reason-card-title { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; margin: 1.2rem 0 0; }
.reason-card-desc { font-size: 1rem; line-height: 1.6; color: var(--sub); margin: 0.6rem 0 0; }
@media (max-width: 780px) {
  .reason-cards { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 0; }
  .reason-cards > li { transform: none !important; }
}

/* 3 · problem — inset image + Fraunces pull-statement */
.about-split {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 820px) { .about-split { grid-template-columns: 1fr; gap: 1.75rem; } }
/* a short Fraunces pull-title, then the longer explanation as a paragraph */
.about-statement {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); margin: 1rem 0 0; max-width: 16ch;
}
.about-statement-note { font-size: 1.1rem; line-height: 1.65; color: var(--sub); margin: 1.5rem 0 0; max-width: 48ch; }

/* 4 · how we choose — dark evergreen band, criteria trio. The dark band reads
   heavier than the light sections, so it gets more vertical air between its three
   rows (header / criteria / note) than the shared header rhythm. */
.about-dark .eyebrow { color: var(--linen-soft); }
.about-dark .about-headrow-intro { color: var(--linen-soft); }
.about-dark .about-headrow { margin-bottom: clamp(3.75rem, 8vh, 5.75rem); }
/* hairline-topped columns so the trio reads as a deliberate set rather than
   three loose items floating on the dark */
.criteria {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem);
}
@media (max-width: 720px) { .criteria { grid-template-columns: 1fr; gap: 2rem; } }
.criterion { border-top: 1px solid rgba(216, 210, 196, 0.22); padding-top: clamp(1.35rem, 3vh, 1.9rem); }
.criterion-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 12px;
  background: rgba(135, 186, 59, 0.14); color: var(--moss);
  margin-bottom: clamp(1.1rem, 2.4vh, 1.5rem);
}
.criterion-ic .icon { width: 1.5rem; height: 1.5rem; }
.criterion-title { font-size: 1.2rem; line-height: 1.2; margin: 0; color: var(--linen); }
.criterion-desc { font-size: 1rem; line-height: 1.55; color: var(--linen-soft); margin: 0.5rem 0 0; }
/* closing note: a two-column split so the right side isn't empty. The detail
   sits left, and the single strongest line is pulled out as a Fraunces line
   right, echoing the "problem" pull-statement device. */
.criteria-note {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  margin: clamp(3.25rem, 7vh, 5rem) 0 0; padding-top: clamp(2rem, 4vh, 2.75rem);
  border-top: 1px solid rgba(216, 210, 196, 0.18);
}
.criteria-note-body { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--linen-soft); max-width: 54ch; }
.criteria-note-pull {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.16;
  letter-spacing: -0.015em; color: var(--linen);
  max-width: 11ch; text-wrap: balance; /* break to two balanced lines */
}
@media (max-width: 720px) {
  .criteria-note { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
}

/* 5 · who we are — brand-glyph split, glyph on the RIGHT. Tall portrait container,
   oversized mark bleeding off the bottom edge, container clips it — reads as a
   crafted brand moment, not a boxed logo in a tile. */
.about-who-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 720px) { .about-who-grid { grid-template-columns: 1fr; gap: 2.25rem; } }
.about-glyph {
  position: relative; overflow: hidden; flex: none;
  width: clamp(18rem, 40vw, 30.5rem); aspect-ratio: 4 / 3;
  border-radius: 24px; background: var(--evergreen);
  display: grid; place-items: center;
}
/* soft blurred care photo behind the mark (scaled past the edges so the blur
   never leaves a transparent rim) + an evergreen wash so the moss mark reads */
.about-glyph::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url(/img/about/glyph-bg.jpg) center / cover no-repeat;
  filter: blur(16px) saturate(0.95);
  transform: scale(1.18);
}
.about-glyph::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 45%, rgba(23, 38, 28, 0.30) 0%, rgba(23, 38, 28, 0.62) 100%),
    linear-gradient(180deg, rgba(23, 38, 28, 0.30) 0%, rgba(23, 38, 28, 0.5) 100%);
}
.about-glyph-mark {
  position: relative; z-index: 2;
  width: 40%; height: auto; color: var(--moss);
}
.about-who .about-prose { margin-top: clamp(1.2rem, 2.5vh, 1.6rem); }
/* mobile: glyph goes full-width of the collapsed column (placed after the base
   .about-glyph rule so it wins on source order — media queries add no specificity) */
@media (max-width: 720px) { .about-glyph { width: 100%; } }

/* 6 · FAQ — inset image + accordion. Answers are open by default so no-JS and
   crawlers get the content; html.js collapses them into an accordion. */
.faq-grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
@media (max-width: 820px) {
  .faq-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .about-figure-faq { aspect-ratio: 1 / 1; background-position: center 20%; }
}
.faq-head { margin-bottom: clamp(1.5rem, 3vh, 2rem); }
.faq-lede { color: var(--sub); font-size: 1.05rem; line-height: 1.6; margin: 1rem 0 0; max-width: 42ch; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--serif); font-weight: 560; color: var(--ink);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.25;
  padding: clamp(1.1rem, 2.4vh, 1.5rem) 0;
  transition: color 0.2s ease;
}
.faq-q:hover { color: var(--moss); }
.faq-toggle { position: relative; width: 1.05rem; height: 1.05rem; flex: none; }
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); background: var(--moss);
}
.faq-toggle::before { width: 1.05rem; height: 2px; }
.faq-toggle::after { width: 2px; height: 1.05rem; transition: transform 0.28s ease; }
.faq-item.is-open .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
/* accordion: app.js drives the open height inline (max-height = scrollHeight),
   so it animates to the exact content height. Answers stay visible with JS off /
   for crawlers; app.js collapses them on load. */
.faq-a { overflow: hidden; transition: max-height 0.32s ease; }
.faq-a-inner { padding-bottom: clamp(1.1rem, 2.4vh, 1.5rem); }
.faq-a p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--sub); max-width: 54ch; }

/* the about CTA reuses the ink claim card; a quiet secondary line for providers.
   Drop the claim's top padding on the about page: the FAQ above already carries a
   full --sec-y of bottom room, so the default top padding just doubled the gap. */
.about-faq + .claim { padding-top: 0; }
.claim-note { margin: 1.4rem 0 0; font-size: 0.95rem; color: var(--linen-soft); }
.claim-note a {
  color: var(--linen); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--moss); transition: color 0.2s ease;
}
.claim-note a:hover { color: var(--moss); }

/* tablet + down: once the about page's two-column sections collapse to a single
   full-width column (<=820px), the desktop readability caps (sized for the
   narrower desktop columns) strand the text with big empty space on the right.
   Let these blocks use the full column width when collapsed. Placed after all the
   base rules so it wins on source order (media queries add no specificity). */
@media (max-width: 820px) {
  .about-headrow h2,
  .about-headrow-intro,
  .about-statement,
  .about-statement-note,
  .faq-lede { max-width: none; }
}

/* ---------- footer (evergreen, giant faded glyph — shared shape with Caia) ---------- */
.site-footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--evergreen); color: var(--linen);
  padding: clamp(4rem, 9vh, 6.5rem) 0 0;
}
/* giant faded wordmark bleeding off the bottom edge (the Caia footer device);
   short form "Independent Care" so it spans without truncating */
.footer-glyph {
  position: absolute; z-index: 0;
  left: 50%; bottom: -0.06em; transform: translateX(-50%);
  font-family: var(--sans);
  font-variation-settings: "wght" 800;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(2.5rem, 12vw, 12rem); line-height: 0.8;
  color: var(--linen); opacity: 0.07;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 90%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 90%);
  pointer-events: none; white-space: nowrap; user-select: none;
}
.footer-top {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(2.5rem, 5vw, 4rem); align-items: start;
  padding-bottom: clamp(3rem, 7vh, 5rem);
}
.footer-brand { max-width: 32ch; }
.site-footer .lockup .lk-word { color: var(--linen); }
.site-footer .lockup .lk-sub { color: var(--linen-soft); }
.footer-tagline { color: var(--linen-soft); font-size: 1rem; line-height: 1.55; margin: 1.3rem 0 0; }
.footer-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem 2.5rem; align-items: start; }
/* multicol, not flex — must out-specify the shared `.footer-col ul` flex rule
   (which would otherwise disable columns) */
.footer-cols ul.footer-region-list { display: block; columns: 2; column-gap: 2.5rem; }
.footer-cols ul.footer-region-list li { break-inside: avoid; margin-bottom: 0.7rem; }
.footer-col h3 {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--linen-soft);
  opacity: 0.7; margin: 0 0 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a { color: var(--linen); text-decoration: none; font-size: 1rem; opacity: 0.9; transition: color 0.2s ease, opacity 0.2s ease; }
.footer-col a:hover { color: var(--moss); opacity: 1; }
.footer-bar {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(216, 210, 196, 0.18);
  padding: 1.5rem 0 1.8rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.6rem 1.2rem; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--linen-soft);
}
.footer-bar a { color: var(--linen-soft); text-decoration: none; transition: color 0.2s ease; }
.footer-bar a:hover { color: var(--moss); }
.footer-bar-right { display: inline-flex; align-items: center; gap: 1.4rem; }
.footer-top-link { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-top-link .arrow-slide { width: 0.92em; height: 0.92em; }
@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-cols { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ---------- legal / privacy ----------
   one calm prose column echoing the Caia privacy page: a narrow measure so lines
   stay readable, generous heading rhythm, moss-underlined links. Header (eyebrow
   / h1 / updated / lede) rides the shared .intro; this styles the body below it. */
.legal { background: var(--linen); padding: 0 0 var(--sec-y); }
.legal-updated { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--sub); }
.legal-body { max-width: 42rem; }
.legal-body > h2:first-child { margin-top: 0; }
.legal-body h2 {
  font-family: var(--serif); font-weight: 560;
  font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.15; letter-spacing: -0.01em;
  margin: clamp(2.25rem, 5vh, 3rem) 0 0.75rem;
}
.legal-body p { font-size: 1.08rem; line-height: 1.68; color: var(--ink); margin: 0 0 1rem; }
.legal-body ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal-body li { margin-bottom: 0.45rem; font-size: 1.08rem; line-height: 1.6; color: var(--ink); }
.legal-body strong { font-weight: 600; }
.legal-body a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--moss); transition: color 0.2s ease;
}
.legal-body a:hover { color: var(--moss); }
.legal-body p:last-child, .legal-body ul:last-child { margin-bottom: 0; }
.legal-body p, .legal-body li { text-wrap: pretty; }

/* two-column legal layout: the prose keeps its readable measure, and the
   otherwise-empty right column carries a sticky "In short" summary (reusing the
   provider aside's .info-card). justify-content pushes the two tracks to the
   page edges so there's no lopsided gutter. Stacks on narrow screens. */
.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 42rem) minmax(15rem, 20rem);
  justify-content: space-between;
  gap: 2rem clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.legal-aside { position: sticky; top: 92px; }
.legal-summary-list { list-style: none; margin: 0 0 1.15rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.legal-summary-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.98rem; color: var(--ink); }
.legal-summary-list .icon { color: var(--moss); width: 1.15em; height: 1.15em; flex: none; }
.legal-summary-contact {
  margin: 0; padding-top: 1.15rem; border-top: 1px solid var(--line);
  font-size: 0.9rem; line-height: 1.55; color: var(--sub);
}
.legal-summary-contact a {
  color: var(--ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--moss); transition: color 0.2s ease;
}
.legal-summary-contact a:hover { color: var(--moss); }
@media (max-width: 860px) {
  .legal-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .legal-aside { position: static; }
}

/* ---------- motion: header slide-in + on-scroll reveal ----------
   Ported from the Caia site, tuned for a denser utility directory: editorial
   surfaces (hero, page intros, prose, claim) fade up with an optional stagger;
   the results grids reveal as a single quick batch (the whole grid fades once —
   a card-by-card cascade would fight a family scanning it). All gated on html.js
   + prefers-reduced-motion: no-preference, so no-JS and reduced-motion loads
   render everything composed and in place, and the content is always in the DOM
   (SEO). The header transition itself lives on .site-header above. */
@media (prefers-reduced-motion: no-preference) {
  html.js .site-header { transform: translateY(-100%); }
  html.js.ready .site-header { transform: none; }

  html.js .reveal {
    opacity: 0;
    transform: translateY(48px);
    transition:
      opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rd, 0s),
      transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rd, 0s);
  }
  html.js .reveal.is-in { opacity: 1; transform: none; }

  /* stagger: cascade the direct .reveal children of a .stagger group */
  .stagger > .reveal:nth-child(2) { --rd: 0.08s; }
  .stagger > .reveal:nth-child(3) { --rd: 0.16s; }
  .stagger > .reveal:nth-child(4) { --rd: 0.24s; }
  .stagger > .reveal:nth-child(5) { --rd: 0.32s; }
  .stagger > .reveal:nth-child(6) { --rd: 0.40s; }

  /* hero: the search form follows the heading cluster in */
  .hero-inner > .search.reveal { --rd: 0.24s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}