/* assets/css/main.css
 * Blue Heart Services — component skin. Async-loaded after critical.css.
 * Consumes ONLY var(--…) tokens from theme.css. No raw hex, no font names.
 *
 * Design language ("Editorial Care"): warm ivory paper, humanist serif display,
 * border-led cards with NO resting shadow, and one owned motif — "the open weave"
 * (the logo's two ribbon-arms abstracted to a mark that crosses once & continues).
 * Motion (weave draws itself on hover/focus) is the whole "fun" budget and is the
 * BONUS layer — every static state is already complete (touch users get no hover).
 */

/* ─── MOTIF PRIMITIVES ─────────────────────────────────────────────────────
 * .weave-underline  → two-tone rule + a small woven knot on the seam (headings)
 * .weave-link       → a link whose two-tone underline draws itself on hover/focus
 * Colors stay tokenized (var() can't live inside a data-URI SVG, so the weave is
 * built from layered CSS gradients + border-arcs — all crisp, all themeable).
 */

.weave-underline,
.hero-heading,
.section-heading,
.page-hero h1,
.service-hero-heading,
.hub-hero-heading {
  position: relative;
  padding-bottom: 0.55em;
}
.weave-underline::after,
.hero-heading::after,
.section-heading::after,
.page-hero h1::after,
.service-hero-heading::after,
.hub-hero-heading::after {           /* the horizontal two-tone rule */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--motif-weave-w);
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg,
    var(--color-primary)      0%,
    var(--color-primary)      46%,
    transparent               46%,
    transparent               54%,
    var(--color-accent)       54%,
    var(--color-accent)       100%);
}
.weave-underline::before,
.hero-heading::before,
.section-heading::before,
.page-hero h1::before,
.service-hero-heading::before,
.hub-hero-heading::before {          /* the little woven knot sitting on the join */
  content: "";
  position: absolute;
  left: calc(var(--motif-weave-w) / 2 - 9px);
  bottom: -3px;
  width: 18px;
  height: 13px;
  background:
    linear-gradient(58deg,  transparent 41%, var(--color-primary) 41%, var(--color-primary) 59%, transparent 59%),  /* cobalt arm — on top */
    linear-gradient(58deg,  transparent 35%, var(--color-bg)      35%, var(--color-bg)      65%, transparent 65%),  /* paper halo gap */
    linear-gradient(122deg, transparent 41%, var(--color-accent)  41%, var(--color-accent)  59%, transparent 59%);  /* sky arm — under */
  background-repeat: no-repeat;
}
/* centered variant — the dark CTA band heading is centered */
.cta-section .section-heading::after { left: 50%; transform: translateX(-50%); }
.cta-section .section-heading::before { left: 50%; transform: translateX(-50%); }

/* a link whose underline is the two-tone weave, drawn on hover/focus */
.weave-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(90deg,
    var(--color-primary) 0%, var(--color-primary) 47%,
    transparent 47%, transparent 53%,
    var(--color-accent) 53%, var(--color-accent) 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size var(--transition-base);
  padding-bottom: 2px;
}
.weave-link:hover,
.weave-link:focus-visible { background-size: 100% 2px; text-decoration: none; }

/* the interlocking-arc icon (empty .service-card-icon / .value-icon divs).
 * Two crisp border-rendered arcs leaning into each other = a mini heart-weave. */
.weave-mark { position: relative; width: 48px; height: 44px; flex: none; }
.weave-mark::before,
.weave-mark::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: var(--motif-stroke) solid transparent;
  border-radius: 50%;
}
.weave-mark::before {                /* left arm — deep cobalt, on top */
  bottom: 4px; left: 3px;
  border-top-color: var(--color-primary-deep);
  border-left-color: var(--color-primary-deep);
  transform: rotate(45deg);
  z-index: 2;
}
.weave-mark::after {                 /* right arm — sky, behind */
  bottom: 4px; right: 3px;
  border-top-color: var(--color-accent);
  border-right-color: var(--color-accent);
  transform: rotate(-45deg);
  z-index: 1;
}

/* ─── HEADER / NAV ─────────────────────────────────────────────────────────*/

.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-6);
  min-height: 72px;
}
.topnav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.topnav-brand:hover { text-decoration: none; }
#site-logo { height: 46px; width: auto; }
.brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-wordmark .bw-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--color-primary-deep);
  letter-spacing: -0.01em;
}
.brand-wordmark .bw-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.topnav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.topnav-links > a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--color-text);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(90deg,
    var(--color-primary) 0 47%, transparent 47% 53%, var(--color-accent) 53% 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size var(--transition-base), color var(--transition-fast);
}
.topnav-links > a:hover,
.topnav-links > a:focus-visible { background-size: 100% 2px; text-decoration: none; color: var(--color-primary-deep); }

.topnav-cta {
  font-family: var(--font-body);
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 0.5em 1.1em;
  background-image: none !important;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.topnav-cta:hover,
.topnav-cta:focus-visible {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary);
}

.topnav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}
.topnav-toggle:hover { background: var(--color-pale); }

/* Mobile drawer */
.mobile-menu {
  display: none;
  position: sticky;
  top: 72px;
  z-index: 99;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6) var(--space-6);
}
.mobile-menu.active { display: block; }
.menu-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.menu-item {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-3) 0 var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.menu-item:hover {
  text-decoration: none;
  border-left-color: var(--color-primary);
  background: var(--color-pale);
}

/* ─── BUTTONS ──────────────────────────────────────────────────────────────*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  padding: 0.8em 1.4em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.btn:hover { text-decoration: none; }

.btn-primary {                       /* THE call — solid cobalt "paper key" */
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  box-shadow: inset 0 -3px 0 rgba(1, 30, 64, 0.35);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-primary-deep);
  box-shadow: inset 0 -3px 0 rgba(1, 30, 64, 0.45), var(--shadow-md);
  transform: translateY(-1px);
}

.btn-outline {                       /* lower-pressure ask */
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--color-pale);
  border-color: var(--color-primary-deep);
  color: var(--color-primary-deep);
}

.btn-secondary {                     /* quiet text-link action with weave underline */
  background: transparent;
  color: var(--color-primary-deep);
  border-color: transparent;
  padding-inline: 0.25em;
  background-image: linear-gradient(90deg,
    var(--color-primary) 0 47%, transparent 47% 53%, var(--color-accent) 53% 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
}
.btn-secondary:hover,
.btn-secondary:focus-visible { background-size: 100% 2px; transform: none; }

.btn-lg { padding: 0.95em 1.7em; font-size: 1.0625rem; }
.btn-sm { padding: 0.55em 1em; font-size: 0.875rem; }

/* ─── SECTION FRAME ────────────────────────────────────────────────────────*/

main { display: block; }
section { padding-block: var(--space-24); }
.section-header { max-width: 760px; margin-bottom: var(--space-12); }
.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  color: var(--color-primary-deep);
  line-height: 1.15;
}
.section-sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: var(--measure);
  margin-top: var(--space-4);
}
.section-cta { margin-top: var(--space-12); }

/* alternating section backgrounds: bg → surface → pale → bg … */
.services-section  { background: var(--color-bg); }
.values-section    { background: var(--color-surface); }
.process-section   { background: var(--color-pale); }
.locations-section { background: var(--color-bg); }
.partner-section   { background: var(--color-surface); }

/* ─── HERO ─────────────────────────────────────────────────────────────────*/

.hero-section {
  background:
    radial-gradient(120% 90% at 88% 0%, var(--color-pale) 0%, transparent 55%),
    var(--color-bg);
  padding-block: var(--space-24) var(--space-16);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: var(--space-16);
}
.hero-text { grid-column: 1; grid-row: 1; }
.hero-image-slot {
  grid-column: 2; grid-row: 1;
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 70% at 75% 25%, var(--color-pale) 0%, transparent 70%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-image-slot .hero-logo {           /* large confident brand mark on the panel */
  width: 62%;
  max-width: 280px;
  height: auto;
}
.hero-image-slot img {                  /* branded hero graphic fills the panel */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-image-slot:has(img)::after { content: none; }  /* graphic carries its own weave arcs */
.hero-image-slot::after {               /* faint oversized weave arc bleeding off a corner */
  content: "";
  position: absolute;
  right: -60px; bottom: -60px;
  width: 220px; height: 220px;
  border: 14px solid var(--color-accent);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0.16;
  transform: rotate(45deg);
}

.hero-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-4);
}
.hero-eyebrow::before {                  /* mini woven bracket replacing a bullet */
  content: "";
  width: 22px; height: 13px;
  background:
    linear-gradient(58deg,  transparent 41%, var(--color-primary) 41% 59%, transparent 59%),
    linear-gradient(58deg,  transparent 34%, var(--color-bg)      34% 66%, transparent 66%),
    linear-gradient(122deg, transparent 41%, var(--color-accent)  41% 59%, transparent 59%);
  background-repeat: no-repeat;
}
.hero-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  color: var(--color-primary-deep);
}
.hero-tagline {                          /* "You don't have to do this alone." */
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--color-primary);
  margin-top: var(--space-4);
}
.hero-sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  line-height: 1.65;
  margin-top: var(--space-6);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
/* .hero-tagline-sub — class retired with the "Do it with love." secondary tagline; rule kept here intentionally removed */

/* ─── CARDS (base) ─────────────────────────────────────────────────────────*/

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

/* ─── SERVICES: ASAM continuum of care ─────────────────────────────────────*/
/* Card grid matching the Integrated Support grid below it; level as a pale pill badge */
.continuum-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.continuum-step {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-6);
}
.continuum-level {
  display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary-deep);
  background: var(--color-pale); padding: 0.35em 0.7em; border-radius: var(--radius-pill); margin-bottom: var(--space-3);
}
.continuum-body { color: var(--color-text-muted); line-height: 1.65; }
.continuum-body strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-1); }

/* ─── SERVICES ─────────────────────────────────────────────────────────────*/

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-6);
}
.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  border-left: 3px solid var(--color-primary-deep);   /* always-on perceptible edge */
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-fast);
}
.service-card::before {               /* two-tone top rule that blooms on hover */
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--color-primary) 0 55%, var(--color-accent) 55% 100%);
  transition: width var(--transition-base);
}
.service-card:hover,
.service-card:focus-visible {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.service-card:hover::before,
.service-card:focus-visible::before { width: 100%; }

.service-card-icon {                  /* matched line-icon (see includes/icons.php) on a pale tile */
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-pale);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  color: var(--color-primary-deep);
}
.service-card-icon svg { width: 30px; height: 30px; }
.service-card:hover .service-card-icon,
.service-card:focus-visible .service-card-icon { color: var(--color-primary); }

.service-card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--color-text);
}
.service-card-desc {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: 1.6;
}
.service-card-link {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-primary);
}
.service-card:hover .service-card-link { color: var(--color-primary-deep); }

/* ─── VALUES (deliberately quieter than services) ─────────────────────────*/

.values-section .section-heading { /* bare h2, no wrapper — gets centered weave */ }
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.value-card {
  background: var(--color-bg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.value-icon {                         /* matched line-icon, no tile (quieter than services) */
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}
.value-icon svg { width: 42px; height: 42px; transition: transform var(--transition-base); }
.value-card:hover .value-icon svg { transform: translateY(-3px); }

.value-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--color-primary-deep);
}
.value-desc {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: 1.6;
}

/* trust signals — the compliance-safe trust mechanism (credentials by tone) */
.trust-signals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.trust-signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}
.trust-signal:not(:last-child)::after {   /* tiny woven tick separator */
  content: "";
  width: 16px; height: 10px;
  background:
    linear-gradient(58deg,  transparent 40%, var(--color-primary) 40% 60%, transparent 60%),
    linear-gradient(122deg, transparent 40%, var(--color-accent)  40% 60%, transparent 60%);
  background-repeat: no-repeat;
  opacity: 0.85;
}
.trust-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

/* ─── PROCESS / WHAT TO EXPECT ─────────────────────────────────────────────*/

.process-steps {
  display: grid;
  gap: var(--space-8);
  max-width: 820px;
  position: relative;
}
.process-step {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-6);
  align-items: start;
  position: relative;
}
.process-step:not(:last-child)::before {  /* woven connector threading the numbers */
  content: "";
  position: absolute;
  left: 43px; top: 64px; bottom: calc(var(--space-8) * -1);
  width: 3px;
  background: linear-gradient(var(--color-primary), var(--color-accent));
  border-radius: var(--radius-pill);
  opacity: 0.5;
}
.step-number {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-primary);
  width: 88px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
  z-index: 1;
}
.step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--color-text);
}
.step-desc {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  max-width: 56ch;
  line-height: 1.65;
}

.process-privacy-note {               /* reassurance inset — answers "will I be seen?" */
  margin-top: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 760px;
}
.process-privacy-note strong { color: var(--color-text); }
.process-privacy-note a { font-weight: 600; }

/* ─── LOCATIONS ────────────────────────────────────────────────────────────*/

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.location-card {
  border-top: 2px solid var(--color-primary);   /* perceptible cue beyond the hairline */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.location-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-text);
}
.location-address { color: var(--color-text-muted); font-style: normal; }
.location-address--pending { font-style: italic; }
.location-phone {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-primary);
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}
.location-status {                    /* status chip — TEXT carries meaning, dot is redundant */
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: var(--color-pale);
  border-radius: var(--radius-pill);
  padding: 0.3em 0.8em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-deep);
  font-style: normal;
}
.location-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}
.location-card .btn { margin-top: var(--space-2); }

/* ─── PARTNER (brief text section) ─────────────────────────────────────────*/

.partner-section .section-heading { margin-bottom: var(--space-4); }
.partner-section p { max-width: var(--measure); color: var(--color-text-muted); font-size: var(--text-lg); }

/* ─── CTA BAND (the only dark section) ─────────────────────────────────────*/

.cta-section {
  background: var(--color-primary-deep);
  text-align: center;
}
.cta-section .section-heading {
  color: var(--color-white);
  display: inline-block;
}
.cta-section .section-heading::after {   /* sky arm reads clearly against cobalt here */
  background: linear-gradient(90deg,
    var(--color-pale) 0 47%, transparent 47% 53%, var(--color-accent) 53% 100%);
}
.cta-desc {
  color: var(--color-pale);
  font-size: var(--text-lg);
  max-width: 52ch;
  margin: var(--space-6) auto 0;
  line-height: 1.65;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-8);
}
.cta-section .btn-primary {           /* brightest thing on the darkest section */
  background: var(--color-white);
  color: var(--color-primary-deep);
  box-shadow: inset 0 -3px 0 rgba(1, 30, 64, 0.18);
}
.cta-section .btn-primary:hover,
.cta-section .btn-primary:focus-visible {
  background: var(--color-pale);
  color: var(--color-primary-deep);
}
.cta-section .btn-outline {
  color: var(--color-white);
  border-color: var(--color-pale);
}
.cta-section .btn-outline:hover,
.cta-section .btn-outline:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  border-color: var(--color-white);
}
.cta-disclaimer {
  margin-top: var(--space-8);
  color: var(--color-pale);
  font-size: 0.9rem;
  font-style: italic;
}
.cta-disclaimer strong { color: var(--color-white); font-style: normal; }
.cta-section :focus-visible { outline-color: var(--color-focus-on-dark); }

/* ─── FOOTER ───────────────────────────────────────────────────────────────*/

.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  position: relative;
}
.site-footer::before {                /* full-width open-weave rule above the footer */
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 8px;
  background:
    linear-gradient(90deg, var(--color-primary) 0 44%, transparent 44% 56%, var(--color-accent) 56% 100%);
  border-radius: var(--radius-pill);
}
.foot-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-8);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-16) var(--space-6) var(--space-8);
}
.foot-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-primary-deep);
}
.foot-values {
  font-family: var(--font-body);
  font-weight: 600;
  font-style: italic;
  color: var(--color-primary);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}
.cta-button {                         /* full-width solid cobalt (drawer + footer) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  text-decoration: none;
  padding: 0.8em 1.4em;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 -3px 0 rgba(1, 30, 64, 0.35);
  transition: background var(--transition-fast);
}
.cta-button:hover { background: var(--color-primary-deep); text-decoration: none; color: var(--color-white); }

.foot-col h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.foot-col a {
  display: block;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.3em 0;
}
.foot-col a:hover { color: var(--color-primary); text-decoration: none; }
.foot-col address { color: var(--color-text-muted); font-style: normal; line-height: 1.7; margin: var(--space-2) 0; }

/* Crisis & support resources — full-width duty-of-care callout band */
.foot-crisis {
  grid-column: 1 / -1;
  background: var(--color-pale);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-top: var(--space-4);
}
.foot-crisis-heading {
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-primary-deep); margin-bottom: var(--space-3);
}
.foot-crisis-line { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; max-width: 90ch; }
.foot-crisis-line + .foot-crisis-line { margin-top: var(--space-2); }
.foot-crisis-line a { color: var(--color-primary); text-decoration: none; }
.foot-crisis-line a:hover { color: var(--color-primary-deep); text-decoration: underline; }

.foot-notices {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.foot-notices p { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.6; max-width: 90ch; }

.foot-legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  align-items: center;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.foot-credit { color: var(--color-primary); }

/* ─── MOBILE STICKY CTA ────────────────────────────────────────────────────*/

.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px var(--color-shadow-warm);
}
.sticky-cta-call,
.sticky-cta-contact {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 1em 0.5em;
  text-decoration: none;
}
.sticky-cta-call { background: var(--color-cta-bg); color: var(--color-white); }
.sticky-cta-contact { color: var(--color-primary); border-left: 1px solid var(--color-border); }

/* ─── RESPONSIVE ───────────────────────────────────────────────────────────*/

@media (max-width: 900px) {
  .topnav-links { display: none; }
  .topnav-toggle { display: inline-flex; }

  .hero-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-image-slot { grid-column: 1; grid-row: 1; min-height: 220px; order: -1; }
  .hero-text { grid-column: 1; grid-row: 2; }

  .foot-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  section { padding-block: var(--space-16); }
  .mobile-sticky-cta { display: flex; }
  body { padding-bottom: 56px; }   /* clear the sticky bar */

  /* Hero graphic on phones: shallow banner above the H1 (8 KB webp, cheap) */
  .hero-image-slot { min-height: 160px; }

  .process-step { grid-template-columns: 64px 1fr; gap: var(--space-4); }
  .process-step:not(:last-child)::before { left: 31px; }
  .step-number { width: 64px; height: 52px; font-size: 2rem; }

  .foot-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .trust-signal:not(:last-child)::after { display: none; }
}

/* respect reduced-motion — snap straight to final states */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .weave-link, .topnav-links > a, .btn-secondary { background-size: 100% 2px; }
  .service-card::before { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERIOR / FUNNEL PAGES — contact, service hub, money pages, shared interior
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Interior page hero (contact, about, locations, blog, privacy, 404) ──── */
.page-hero {
  background: radial-gradient(120% 80% at 85% 0%, var(--color-pale) 0%, transparent 55%), var(--color-bg);
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--color-border);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--color-primary-deep);
}
.page-hero-sub { font-size: var(--text-lg); color: var(--color-text-muted); max-width: var(--measure); margin-top: var(--space-4); }

/* ─── Breadcrumb ──────────────────────────────────────────────────────────*/
.breadcrumb { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.breadcrumb-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
}
.breadcrumb-item, .breadcrumb-item a { color: var(--color-text-muted); }
.breadcrumb-item a:hover { color: var(--color-primary); text-decoration: none; }
.breadcrumb-item[aria-current="page"] { color: var(--color-text); font-weight: 600; }
.breadcrumb-item[aria-hidden="true"] { color: var(--color-border); }

/* ─── Service / hub hero ──────────────────────────────────────────────────*/
.service-hero, .hub-hero {
  background: radial-gradient(120% 80% at 88% 0%, var(--color-pale) 0%, transparent 55%), var(--color-bg);
  padding-block: var(--space-16) var(--space-12);
}
.service-hero-eyebrow, .hub-hero-eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-primary-deep); margin-bottom: var(--space-3);
}
.service-hero-heading, .hub-hero-heading {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.1;
  color: var(--color-primary-deep);
}
.service-hero-desc, .hub-hero-desc {
  font-size: var(--text-lg); color: var(--color-text-muted);
  max-width: var(--measure); margin-top: var(--space-4); line-height: 1.6;
}
.service-hero-actions, .hub-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.service-hero-image-slot:not(:empty) {
  margin-top: var(--space-8); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.service-hero-image-slot img { width: 100%; height: auto; display: block; }

/* ─── Prose blocks (overview, location context) ───────────────────────────*/
.service-overview-section, .hub-overview-section { background: var(--color-bg); }
.service-overview-body, .hub-overview-body { max-width: var(--measure); margin-top: var(--space-6); }
.service-overview-body p, .hub-overview-body p, .location-context-body { margin-bottom: var(--space-4); line-height: 1.7; max-width: var(--measure); }
.location-context-subheading { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); margin: var(--space-8) 0 var(--space-2); }

/* ─── FAQ cards ───────────────────────────────────────────────────────────*/
.faq-section, .hub-faq-section { background: var(--color-surface); }
.faq-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-6); margin-top: var(--space-8);
}
.faq-card { background: var(--color-bg); border-left: 3px solid var(--color-primary); }
.faq-question { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); }
.faq-answer { color: var(--color-text-muted); margin-top: var(--space-2); line-height: 1.65; }

/* ─── Guarantees ("what you can count on") ────────────────────────────────*/
.guarantees-section { background: var(--color-bg); }
.guarantees-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: var(--space-6); margin-top: var(--space-8); align-items: start;
}
.guarantee-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.guarantee-check {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-pale); color: var(--color-primary);
  border-radius: 50%; font-weight: 700; font-size: 0.9rem;
}
.guarantee-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); display: block; }
.guarantee-desc { color: var(--color-text-muted); margin-top: var(--space-1); line-height: 1.6; }

/* ─── Trust section wrapper (service pages) ───────────────────────────────*/
.trust-section { background: var(--color-surface); }
.trust-section .trust-signals { justify-content: flex-start; margin-top: var(--space-8); }

/* ─── Related / hub location cards ────────────────────────────────────────*/
.related-locations-section, .hub-locations-section { background: var(--color-bg); }
.related-locations-grid, .hub-locations-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6); margin-top: var(--space-8);
}
.related-location-card, .hub-location-card {
  border-top: 2px solid var(--color-primary);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  text-decoration: none;
}
.related-location-card { transition: box-shadow var(--transition-base), transform var(--transition-fast); }
.related-location-card:hover, .related-location-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.related-location-name, .hub-location-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); }
.related-location-address, .hub-location-address { color: var(--color-text-muted); font-style: normal; line-height: 1.6; }
.hub-location-phone { font-weight: 700; color: var(--color-primary); min-height: 44px; line-height: 44px; }
.related-location-link { color: var(--color-primary); font-weight: 600; margin-top: var(--space-2); }
.hub-location-link { margin-top: var(--space-2); }
.hub-locations-unavailable { color: var(--color-text-muted); margin-top: var(--space-4); max-width: var(--measure); }

/* ─── Contact: phone-first CTA card ───────────────────────────────────────*/
.phone-cta-section { background: var(--color-bg); }
.phone-cta-card { background: var(--color-pale); border-color: transparent; }
.phone-cta-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: center; }
.phone-cta-heading { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); color: var(--color-primary-deep); line-height: 1.2; }
.phone-cta-desc { color: var(--color-text); margin-top: var(--space-3); line-height: 1.6; }
.phone-cta-hours { margin-top: var(--space-3); color: var(--color-text-muted); }
.phone-cta-hours strong { color: var(--color-text); }
.phone-cta-action { text-align: center; }
.phone-cta-action .btn { width: 100%; }
.phone-cta-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); }
.btn-xl { padding: 1.05em 2em; font-size: 1.2rem; }

/* ─── Contact: privacy box ────────────────────────────────────────────────*/
.contact-privacy-section { background: var(--color-surface); }
.contact-privacy-box {
  max-width: 820px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md); padding: var(--space-8);
}
.contact-privacy-heading { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--color-primary-deep); margin-bottom: var(--space-4); }
.contact-privacy-box p { color: var(--color-text-muted); margin-bottom: var(--space-3); line-height: 1.65; }
.contact-privacy-box strong { color: var(--color-text); }
.contact-privacy-link { font-weight: 600; }

/* ─── Contact: form ───────────────────────────────────────────────────────*/
.contact-form-section { background: var(--color-bg); }
.contact-form-card { max-width: 720px; margin-inline: auto; }
.form-intro { color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: 1.6; }
.form-intro strong { color: var(--color-text); }
.form-channel-warning {
  background: var(--color-pale); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); color: var(--color-primary-deep);
  margin-bottom: var(--space-6); font-size: var(--text-sm);
}
.form-message { border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); line-height: 1.55; }
.form-message--success { background: var(--color-pale); color: var(--color-primary-deep); }
.form-message--error { background: var(--color-danger-bg); color: var(--color-danger-text); }
.hp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-fields { display: grid; gap: var(--space-6); }
.form-label { display: block; font-weight: 600; color: var(--color-text); }
.form-required { color: var(--color-primary); }
.form-label-hint { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-sm); }
.form-input, .form-select, .form-textarea {
  display: block; width: 100%; margin-top: var(--space-2);
  padding: 0.7em 0.9em; font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-text-muted); border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-pale);
}
.form-textarea { resize: vertical; }
.form-consent-label { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }
.form-consent-checkbox { margin-top: 0.2em; width: 18px; height: 18px; flex: none; accent-color: var(--color-primary); }
.form-submit { margin-top: var(--space-2); justify-self: start; }

/* ─── Contact: unwired notice (current live state, FORM_WIRED=false) ──────*/
.contact-unwired-notice { max-width: 640px; margin-inline: auto; text-align: center; background: var(--color-surface); }
.contact-unwired-notice .section-heading { display: inline-block; }
.contact-unwired-notice .section-heading::after,
.contact-unwired-notice .section-heading::before { left: 50%; transform: translateX(-50%); }
.contact-unwired-notice p { color: var(--color-text-muted); max-width: 52ch; margin-inline: auto; line-height: 1.6; }
.contact-unwired-notice .btn { margin-top: var(--space-4); }
.contact-unwired-sub { margin-top: var(--space-4); font-size: var(--text-sm); }
.contact-unwired-sub strong { color: var(--color-text); }

/* ─── Contact: what-to-expect + offices ───────────────────────────────────*/
.what-to-expect-section { background: var(--color-pale); }
.contact-locations-section { background: var(--color-bg); }
.contact-locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.contact-location-item h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); }
.contact-location-item address { color: var(--color-text-muted); font-style: normal; margin: var(--space-2) 0; line-height: 1.6; }
.contact-location-phone { font-weight: 700; color: var(--color-primary); }
.location-pending { color: var(--color-text-muted); font-style: italic; margin: var(--space-2) 0; }

/* ─── Interior responsive ─────────────────────────────────────────────────*/
@media (max-width: 760px) {
  .phone-cta-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .phone-cta-action { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT + LOCATIONS PAGES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── About: mission (text + image panel) ─────────────────────────────────*/
.mission-section { background: var(--color-bg); }
.mission-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); align-items: center; }
.mission-text p { color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: 1.7; max-width: 60ch; }
.mission-tagline { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-xl); color: var(--color-primary); }
.mission-image-slot {
  position: relative; min-height: 300px; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: radial-gradient(70% 70% at 70% 25%, var(--color-pale) 0%, transparent 70%), var(--color-surface);
}
.mission-image-slot::after {
  content: ""; position: absolute; right: -50px; bottom: -50px;
  width: 200px; height: 200px; border: 13px solid var(--color-accent);
  border-right-color: transparent; border-bottom-color: transparent;
  border-radius: 50%; opacity: 0.16; transform: rotate(45deg);
}
.mission-image-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ─── About: clinical approach ────────────────────────────────────────────*/
.approach-section { background: var(--color-bg); }
.approach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.approach-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-6);
}
.approach-item h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-2); }
.approach-item p { color: var(--color-text-muted); line-height: 1.65; }

/* ─── About: care team ────────────────────────────────────────────────────*/
.team-section { background: var(--color-surface); }
.team-roles-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.team-role {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-6);
}
.role-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-primary-deep); margin-bottom: var(--space-2); }
.role-desc { color: var(--color-text-muted); line-height: 1.65; }

/* Clinical leadership — roles + credentials, card grid matching .team-role/.credential */
.team-leadership-heading {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl);
  color: var(--color-primary-deep); margin-top: var(--space-16); margin-bottom: var(--space-6);
}
.leadership-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-4); }
.leadership-role {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-6);
}
.leadership-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-primary-deep); }
.leadership-creds { display: block; color: var(--color-text-muted); line-height: 1.5; margin-top: var(--space-1); }

/* ─── About: credentials ──────────────────────────────────────────────────*/
.credentials-section { background: var(--color-bg); }
.credentials-list { display: grid; gap: var(--space-4); margin-top: var(--space-12); max-width: 820px; }
.credential {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-6);
}
.credential-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-1); }
.credential-desc { color: var(--color-text-muted); line-height: 1.65; }

/* ─── About: community prose ──────────────────────────────────────────────*/
.community-section { background: var(--color-surface); }
.community-section p { max-width: var(--measure); color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: 1.7; }

/* ─── Locations: office detail cards ──────────────────────────────────────*/
.locations-detail-section { background: var(--color-bg); }
.locations-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-6); margin-top: var(--space-12); align-items: start; }
.location-detail-card { border-top: 2px solid var(--color-primary); display: flex; flex-direction: column; align-items: flex-start; }
.location-detail-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--color-text); margin-bottom: var(--space-3); }
.location-nap { margin-bottom: var(--space-4); }
.location-nap .location-address { line-height: 1.6; }
.location-cta { width: 100%; margin-bottom: var(--space-4); }
.map-embed { width: 100%; }
.map-embed iframe { width: 100%; min-height: 220px; border: 0; border-radius: var(--radius-md); display: block; margin-bottom: var(--space-4); }
.location-services { width: 100%; margin-top: var(--space-2); }
.location-services-heading { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-primary-deep); margin-bottom: var(--space-2); }
.location-service-item a {
  display: block; padding: var(--space-2) 0; color: var(--color-primary);
  font-weight: 500; border-bottom: 1px solid var(--color-border);
}
.location-service-item a:hover { color: var(--color-primary-deep); text-decoration: none; }
.location-services--pending { color: var(--color-text-muted); font-style: italic; margin-top: var(--space-2); line-height: 1.6; }

/* ─── Locations: what-to-expect grid (also shared context section) ────────*/
.location-context-section { background: var(--color-surface); }
.context-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.context-item {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-6);
}
.context-item h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-primary-deep); margin-bottom: var(--space-2); }
.context-item p { color: var(--color-text-muted); line-height: 1.65; }
.location-privacy-notice { margin-top: var(--space-8); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 90ch; line-height: 1.6; }

/* ─── About + Locations responsive ────────────────────────────────────────*/
@media (max-width: 820px) {
  .mission-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .mission-image-slot { min-height: 220px; order: -1; }
}
/* a real photo in the mission panel suppresses the decorative corner arc */
.mission-image-slot:has(img)::after { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL (privacy / NPP) + 404
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-section { background: var(--color-bg); padding-block: var(--space-12); }
.legal-section .container { max-width: 820px; }
.legal-section p { color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: 1.7; }
.legal-section strong { color: var(--color-text); }
.legal-section--highlight { background: var(--color-pale); }

.legal-required-header {
  font-weight: 700; color: var(--color-text); line-height: 1.5;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-6);
}
.legal-meta { font-size: var(--text-sm); }
.legal-review-notice {
  background: var(--color-pale); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin-top: var(--space-4);
}
.legal-review-notice p { color: var(--color-primary-deep); margin: 0; }

.legal-subheading { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-primary-deep); margin: var(--space-6) 0 var(--space-2); }
.legal-list { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.legal-list li { position: relative; padding-left: var(--space-6); color: var(--color-text-muted); line-height: 1.65; }
.legal-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); }

.rights-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.right-item { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-6); }
.right-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-text); margin-bottom: var(--space-2); }
.right-item p { color: var(--color-text-muted); margin: 0; line-height: 1.6; }

.legal-contact { font-style: normal; color: var(--color-text-muted); line-height: 1.9; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); display: inline-block; }
.legal-contact strong { color: var(--color-text); }
.legal-license { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-4); }

/* 404 */
.notfound-links-section { background: var(--color-surface); }
.notfound-links-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--space-8); margin-top: var(--space-8); }
.notfound-links-list a { display: block; padding: var(--space-3) 0; color: var(--color-primary); font-weight: 600; border-bottom: 1px solid var(--color-border); }
.notfound-links-list a:hover { color: var(--color-primary-deep); text-decoration: none; }
.notfound-privacy-note { margin-top: var(--space-8); color: var(--color-text-muted); font-size: var(--text-sm); }
.notfound-privacy-note strong { color: var(--color-text); }