/* ==========================================================================
   Zuri Psychiatric Health — design system
   Warm, calm, accessible. Mobile-first.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* -----------------------------------------------------------------
     Palette matched to the original draft at demolinks2.com/tabby-kinyanjui/.
     Values read out of that site's own generated theme CSS, not eyeballed:
       header     rgba(251,163,55,1)  .whb-general-header
       top bar    rgba(242,242,242,1) .whb-top-bar
       page       rgb(242,242,242)    .main-page-wrapper
       body text  rgb(85,83,83)       --wd-text-color
       titles     rgb(0,0,0)          --wd-title-color
       links / UI #333333             --wd-link-color, --wd-header-el-color
       buttons    rgb(255,140,0)      --btn-default-bgcolor  (its text: #333)
       accent     rgb(135,191,188)    --wd-primary-color
       banner     #0a0a0a             .page-title-default
     Three source values fail WCAG AA and have an accessible sibling below;
     each one is commented where it differs. Everything else is exact.
     ----------------------------------------------------------------- */

  /* Neutral grounds */
  /* Warm orange grounds. Dr. Kinyanjui asked for more orange across every
     page, so the neutral greys taken from the draft were replaced with an
     orange family. Every one of these carries all seven text colours the site
     uses at AA or better — checked in tools/verify.py. */
  --cream:        #FFF4E6;   /* page ground — warm, was #F2F2F2 */
  --cream-2:      #FFDCA8;   /* soft orange band — was #E9E9E9 */
  --cream-3:      #FFE7C4;   /* media wells — was #E0E0E0 */
  --card:         #FFFFFF;   /* cards — exact */

  /* Ink */
  --title:        #000000;   /* headings — exact */
  --ink:          #333333;   /* links, nav, UI text — exact */
  --ink-soft:     #555353;   /* body copy — exact */
  --ink-faint:    #636363;   /* derived, 5.37:1 on the page ground */

  /* Dark grounds */
  --footer-bg:    #232120;   /* footer stays charcoal by choice, not from the draft */
  --banner-bg:    #0A0A0A;   /* hero / dark banner — exact */

  /* Orange */
  --header-bg:    #FBA337;   /* header — exact, carries #333 at 6.25:1 */
  --orange:       #FF8C00;   /* button ground — exact */
  --orange-600:   #FF8C00;   /* same ground; carries #333 at 5.42:1 */
  --orange-700:   #9E4200;   /* accent TEXT — #FF8C00 is 2.08:1 and unusable as text */
  --orange-tint:  #FFE7C4;
  --orange-panel-1: #FFF1DE;
  --orange-panel-2: #FDE3BF;
  --orange-bright:  #FBA337; /* orange on dark grounds only — 9.80:1 on the banner */
  --terracotta:   #7F3600;   /* link hover */

  /* Teal accent — replaces the old sage green */
  --sage:         #87BFBC;   /* exact. A GROUND only; carries #333 at 6.14:1 */
  --sage-600:     #2E6A67;   /* derived TEXT sibling — #87BFBC is 1.84:1 as text */
  --sage-tint:    #E7F2F1;

  --blush:        #FFE7C4;
  --section-orange: #FBA337;  /* the band colour — same orange as the header */

  --line:         #EFDCC0;
  --focus:        #1F5FA9;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(42,37,34,.05), 0 2px 8px rgba(42,37,34,.05);
  --shadow:    0 2px 4px rgba(42,37,34,.04), 0 8px 24px rgba(42,37,34,.07);
  --shadow-lg: 0 4px 8px rgba(42,37,34,.05), 0 18px 48px rgba(42,37,34,.11);

  --wrap: 1160px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--title);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: 1.25; }
h4 { font-size: 1.0625rem; line-height: 1.35; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--orange-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terracotta); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 200; font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 780px; }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

/* ---------- Orange section bands ----------
   Every other section carries the brand orange, so about half the page area is
   orange. Body copy inside switches from #555353 to #333: on #FBA337 that is
   6.25:1, where #555353 would be only 2.98:1 and fail. White surfaces inside a
   band (cards, panels, the form) re-assert the normal text colours, because
   they are their own ground. */
.section--orange { background: var(--section-orange); color: var(--ink); }
/* the alternate band: same family, lower intensity, so the page stays orange
   throughout without becoming one flat field */
.section--soft { background: var(--cream-2); }
.section--orange :is(h1, h2, h3, h4) { color: var(--title); }
.section--orange :is(p, li, dt, dd, figcaption) { color: var(--ink); }
.section--orange .eyebrow { color: var(--title); }
.section--orange .eyebrow::before { background: var(--title); }
.section--orange a:not(.btn) { color: var(--ink); text-decoration: underline; }
.section--orange a:not(.btn):hover { color: #000; }
.section--orange .pill-list a { text-decoration: none; }
.section--orange .btn--ghost { border-color: rgba(51,51,51,.55); color: var(--ink); }
.section--orange .btn--ghost:hover { background: var(--card); border-color: var(--ink); }
/* #FF8C00 on #FBA337 is 1.16:1, so the primary button needs an edge here too */
.section--orange .btn--primary { border: 1px solid rgba(51,51,51,.5); }

.section--orange :is(.card, .icon-panel, .form-card, .info-card, .notice) { color: var(--ink-soft); }
.section--orange :is(.card, .icon-panel, .form-card, .info-card, .notice) :is(p, li, dd) { color: var(--ink-soft); }
.section--orange :is(.card, .icon-panel, .form-card, .info-card) a:not(.btn) { color: var(--orange-700); text-decoration: none; }
.section--orange :is(.card, .icon-panel, .form-card, .info-card) :is(.link-desc, .hint, figcaption) { color: var(--ink-faint); }

/* kept: still used by feature icons, split media and notices */
.section--cream2 { background: var(--cream-2); }
.section--sage { background: var(--sage-tint); }

.stack > * + * { margin-top: 1.15rem; }

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2::after {
  content: ""; display: block; width: 3.25rem; height: 4px; border-radius: 4px;
  margin-top: 1rem; background: linear-gradient(90deg, var(--orange-600), var(--orange));
}
.section-head--center h2::after { margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange-700);
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
  background: var(--orange); flex: none;
}
.section-head--center .eyebrow::before { display: none; }

.lede { font-size: clamp(1.075rem, 1rem + .3vw, 1.2rem); color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  line-height: 1.2; padding: .95rem 1.6rem; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--orange-600); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #FF9A1A; color: var(--ink); box-shadow: var(--shadow); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--card); border-color: var(--orange); color: var(--ink); }

.btn--onDark { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); }
.btn--onDark:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* white on #87BFBC is 2.06:1, so this button carries #333 like the draft's own */
.btn--sage { background: var(--sage); color: var(--ink); }
.btn--sage:hover { background: #6FADAA; color: var(--ink); }

.btn--sm { padding: .7rem 1.2rem; font-size: .93rem; }
.btn--block { width: 100%; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; text-decoration: none; color: var(--orange-700);
}
.arrow-link span { transition: transform .22s var(--ease); }
.arrow-link:hover span { transform: translateX(4px); }

/* ---------- Top bar ---------- */
.topbar {
  /* warmed from the draft's #F2F2F2 so the whole page reads orange (10.52:1) */
  background: #FFE7C4; color: var(--ink);
  font-size: .85rem; line-height: 1.4;
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  align-items: center; justify-content: center; padding-block: .6rem;
}
.topbar a { color: var(--ink); text-decoration: none; }
.topbar a:hover { color: var(--orange-700); text-decoration: underline; }
.topbar-item { display: inline-flex; align-items: center; gap: .45rem; }
.topbar-item--addr { display: none; }
.topbar-group { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; justify-content: center; }
.topbar-item svg { flex: none; opacity: .85; }
@media (min-width: 900px) {
  .topbar .wrap { justify-content: space-between; }
  .topbar-item--addr { display: inline-flex; }
  .topbar-group { gap: 1.75rem; flex-wrap: nowrap; }
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Flat #FBA337 exactly as .whb-general-header on the draft, with the
     draft's own 1px bottom border. No gradient, no sheen.
     Nav text is #333 on it at 6.25:1; white would be 2.02:1. */
  background: var(--header-bg);
  border-bottom: 1px solid rgba(129,129,129,.2);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 2px 10px rgba(0,0,0,.16); }
.site-header :focus-visible { outline-color: var(--ink); }
/* Nav text is dark on purpose: white on this orange is 2.02:1 and fails AA. */

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .8rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand img {
  height: 52px; width: auto; max-width: 190px; object-fit: contain; flex: none;
  /* The supplied logo is pure-white artwork, drawn for a dark background.
     White on this orange is 2.8:1. brightness(0) recolours the whole mark to
     black, which reads at ~6:1 — no plate or box required. If a colour version
     is ever supplied, delete this filter. */
  filter: brightness(0) drop-shadow(0 1px 1px rgba(255,255,255,.30));
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.92); border: 1px solid rgba(90,35,5,.22); border-radius: 999px;
  padding: .6rem 1rem; font: inherit; font-size: .92rem; font-weight: 700;
  color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 6px rgba(90,35,5,.20);
}
.nav-toggle-bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle-bars i { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-menu {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream); border-bottom: 3px solid var(--orange-600);
  box-shadow: var(--shadow-lg);
  padding: 1rem var(--gutter) 1.75rem;
}
.nav-menu.is-open { display: block; }
.nav-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.nav-list a {
  display: block; padding: .8rem .25rem; text-decoration: none;
  font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line);
}
.nav-list a:hover { color: var(--orange-700); }
.nav-list a[aria-current="page"] { color: var(--orange-700); }
.nav-cta { margin-top: 1.25rem; }
.nav-cta .btn { width: 100%; }
.nav-cta .btn--primary {
  /* The draft's Get Started is btn-color-default + btn-style-rectangle:
     #FF8C00 ground, #333 text (5.42:1), square, with an inset bottom shadow.
     #FF8C00 against the #FBA337 header is only 1.16:1, so the dark border
     supplies the 3:1 boundary WCAG 1.4.11 asks for without altering the fill. */
  background: var(--orange-600); color: var(--ink); gap: 0;
  border: 1px solid rgba(51,51,51,.6); border-radius: 0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}
.nav-cta .btn--primary::after {
  content: none;
}
.nav-cta .btn--primary:hover { background: #FF9A1A; color: var(--ink); box-shadow: inset 0 -2px 0 rgba(0,0,0,.22); }

@media (min-width: 1080px) {
  .nav-toggle { display: none; }
  .nav-menu {
    display: flex !important; position: static; background: none; border: 0;
    box-shadow: none; padding: 0; align-items: center; gap: 1.35rem;
  }
  .nav-list { display: flex; gap: 1.35rem; align-items: center; }
  .nav-list a {
    border: 0; padding: .4rem 0; font-size: .95rem; position: relative;
    white-space: nowrap; color: var(--ink);
  }

  /* Flat, uppercase, no pills — the draft's --wd-header-el-transform is
     uppercase and its nav has no background treatment. The current page is
     marked with a rule rather than a colour change, so the indicator does
     not depend on colour perception alone. */
  .nav-list a {
    padding: .5rem .1rem; border-radius: 0; text-transform: uppercase;
    letter-spacing: .02em; font-weight: 600; font-size: .9rem;
    border-bottom: 2px solid transparent; background: none;
    transition: border-color .22s var(--ease), opacity .22s var(--ease);
  }
  .nav-list a:hover { background: none; color: var(--ink); border-bottom-color: rgba(51,51,51,.5); }
  .nav-list a[aria-current="page"] {
    background: none; color: var(--ink); box-shadow: none;
    border-bottom-color: var(--ink);
  }
  .nav-cta { margin: 0; }
  .nav-cta .btn { width: auto; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--banner-bg); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(26,24,23,.94) 0%, rgba(32,28,25,.86) 38%, rgba(194,65,12,.52) 76%, rgba(249,115,22,.44) 100%);
}
.hero-inner { padding-block: clamp(4rem, 2rem + 11vw, 8.5rem); max-width: 46rem; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--orange); }
.hero .eyebrow::before { background: var(--orange); }
.hero-sub {
  margin-top: 1.35rem; font-size: clamp(1.075rem, 1rem + .45vw, 1.28rem);
  color: #EDEDED; max-width: 40rem;
}
.hero-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .85rem; }
.hero-badges {
  margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .6rem;
  list-style: none; padding: 0;
}
.hero-badges li {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  color: #F2F2F2; border-radius: 999px; padding: .45rem 1rem;
  font-size: .87rem; font-weight: 600;
}
.hero-badges svg { flex: none; color: var(--orange); }

/* Page banner (interior pages) */
.page-hero {
  background: linear-gradient(160deg, var(--orange-tint) 0%, var(--cream) 48%, var(--orange-panel-2) 128%);
  border-bottom: 3px solid var(--orange-600);
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 4.75rem);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; right: -8%; top: -60%;
  width: 34rem; height: 34rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,140,0,.38), transparent 68%);
  pointer-events: none;
}
.page-hero .lede { max-width: 42rem; margin-top: 1rem; }
.crumbs { font-size: .85rem; color: var(--ink-faint); margin-bottom: .85rem; }
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--orange-700); text-decoration: underline; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: clamp(1.1rem, .6rem + 1.6vw, 1.9rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--orange-600), var(--orange));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.card:hover::after { transform: scaleX(1); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; gap: .6rem; }
.card-body h3 a { color: inherit; text-decoration: none; }
.card-body p { font-size: .97rem; }
.card-foot { margin-top: auto; padding-top: 1rem; }

/* Feature (icon) cards */
.feature {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 1.75rem 1.6rem; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(231,218,202,.7);
}
.feature-icon {
  width: 3rem; height: 3rem; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 1.15rem;
  background: var(--orange-tint); color: var(--orange-700);
}
.feature-icon--sage { background: var(--sage-tint); color: var(--sage-600); }
.feature-icon--blush { background: var(--blush); color: var(--terracotta); }
.feature h3 { margin-bottom: .5rem; }
.feature p { font-size: .97rem; }

/* Split (image + text) */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split-media { order: 2; }
}
.split-media { position: relative; }
.split-media img {
  width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow);
  aspect-ratio: 4 / 3; object-fit: cover; background: var(--cream-3);
}
.split-media::before {
  content: ""; position: absolute; inset: auto -1.25rem -1.25rem auto;
  width: 60%; height: 60%; border-radius: var(--radius-xl);
  background: var(--orange-tint); z-index: -1;
}
.split-media--sage::before { background: var(--sage-tint); }

/* Icon panel — where the source art is an icon, not a photograph */
.icon-panel {
  background: var(--card); border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border: 1px solid var(--line); border-top: 5px solid var(--sage);
  box-shadow: var(--shadow);
}
.icon-panel--blush { border-top-color: var(--orange-600); }
.icon-panel-mark {
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  background: var(--sage-tint); display: grid; place-items: center;
  margin-bottom: 1.35rem;
}
.icon-panel--blush .icon-panel-mark { background: var(--orange-tint); }
.icon-panel-mark img { width: 3.25rem; height: 3.25rem; object-fit: contain; }
.icon-panel-head {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  color: var(--ink); line-height: 1.25; margin-bottom: 1.1rem;
}
.icon-panel .check-list li::before { background: var(--sage-tint); }
.icon-panel--blush .check-list li::before { color: var(--orange-700); }

/* Stat chip row */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin-top: 1.5rem; }
.chips li {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem 1.1rem; font-size: .9rem; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; gap: .5rem;
}
.chips svg { color: var(--orange-700); flex: none; }

/* Pill list (conditions) */
.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.pill-list a, .pill-list span {
  display: inline-block; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: .55rem 1.15rem; font-size: .93rem;
  font-weight: 600; color: var(--ink); text-decoration: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.pill-list a:hover { border-color: var(--orange); background: var(--orange-tint); color: var(--orange-700); }

/* Checklist */
.check-list { list-style: none; padding: 0; display: grid; gap: .8rem; }
.check-list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; align-items: start; }
.check-list li::before {
  content: "✓"; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; margin-top: .15rem;
  background: var(--sage-tint); color: var(--sage-600); font-size: .82rem; font-weight: 800;
}

/* Numbered steps */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.steps li {
  counter-increment: step; background: var(--card); border-radius: var(--radius-lg);
  padding: 1.75rem 1.6rem; box-shadow: var(--shadow-sm); position: relative;
}
.steps li::before {
  content: counter(step); display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; margin-bottom: 1rem;
  background: var(--orange-600); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}
.steps h3 { margin-bottom: .4rem; }
.steps p { font-size: .97rem; }

/* ---------- Quote / testimonial ---------- */
.quote-card {
  background: var(--card); border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem); box-shadow: var(--shadow);
  border-left: 5px solid var(--orange);
}
.quote-card blockquote {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem);
  line-height: 1.5; color: var(--ink); font-weight: 400;
}
.quote-card cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: .93rem; font-weight: 700; color: var(--orange-700); }
.quote-mark { font-family: var(--font-display); font-size: 3rem; line-height: .6; color: var(--orange); display: block; margin-bottom: .5rem; }

.pull-quote {
  text-align: center; max-width: 46rem; margin-inline: auto;
}
.pull-quote blockquote {
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.05rem + 1.2vw, 2rem);
  line-height: 1.4; color: var(--ink);
}
.pull-quote cite { display: block; margin-top: 1.25rem; font-style: normal; font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-700); }

/* ---------- Insurance logos ---------- */
.logo-wall { display: flex; flex-wrap: wrap; gap: .65rem; list-style: none; padding: 0; justify-content: center; }
.logo-wall li {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1.4rem; font-weight: 700; font-size: .95rem; color: var(--ink);
  box-shadow: var(--shadow-sm); border-bottom: 3px solid var(--orange-tint);
  transition: border-bottom-color .2s var(--ease);
}
.logo-wall li:hover { border-bottom-color: var(--orange); }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-grid figure { margin: 0; }
.gallery-grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  background: var(--cream-3);
}
.gallery-grid figcaption { margin-top: .7rem; font-size: .9rem; color: var(--ink-faint); }

/* ---------- Forms ---------- */
.form-card {
  background: var(--card); border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); box-shadow: var(--shadow);
}
.field { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.field label { font-weight: 700; font-size: .93rem; color: var(--ink); }
.field .hint { font-size: .82rem; color: var(--ink-faint); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: .8rem .95rem; width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23574C44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange-600); background: #fff;
  box-shadow: 0 0 0 3px rgba(249,115,22,.28);
}
.field-row { display: grid; gap: 0; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; gap: 0 1.15rem; } }

.notice {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .85rem;
  background: var(--orange-tint); border: 1px solid rgba(158,66,0,.35);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
  font-size: .93rem; color: #7F3600; margin-bottom: 1.75rem;
}
.notice svg { color: var(--orange-700); margin-top: .18rem; }
.notice strong { color: #6B2D00; }
.notice--sage { background: var(--sage-tint); border-color: rgba(46,106,103,.35); color: #2A605D; }
.notice--sage svg, .notice--sage strong { color: var(--sage-600); }

.form-status { margin-top: 1rem; font-size: .95rem; font-weight: 600; }
.form-status[data-state="error"] { color: #8C2F1B; }
.form-status[data-state="ok"] { color: var(--sage-600); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Info / contact blocks ---------- */
.info-card {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 1.6rem 1.6rem; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(231,218,202,.7); border-left: 4px solid var(--orange-600);
}
.info-card h3 { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; }
.info-card h3 svg { color: var(--orange-700); flex: none; }
.info-card a { font-weight: 600; }
.info-list { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: .97rem; }

.hours { list-style: none; padding: 0; display: grid; gap: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .96rem;
}
.hours li:last-child { border-bottom: 0; }
.hours b { color: var(--ink); font-weight: 700; }
.hours .closed { color: var(--ink-faint); }
.hours li[data-today="true"] {
  background: var(--orange-tint); margin-inline: -.75rem; padding-inline: .75rem;
  border-radius: var(--radius-sm); border-bottom-color: transparent;
}

/* ---------- Crisis banner ---------- */
.crisis {
  background: #242120; color: #F2F2F2;
  border-top: 4px solid var(--orange-600); border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
}
.crisis h2, .crisis h3 { color: #fff; }
.crisis a { color: var(--orange-bright); font-weight: 700; }
.crisis a:hover { color: #F8C293; }
.crisis-grid { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 800px) { .crisis-grid { grid-template-columns: repeat(3, 1fr); } }
.crisis-item {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 1.25rem;
}
.crisis-item h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.crisis-item p { font-size: .93rem; color: #E0E0E0; }
.crisis-num { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; display: block; margin-bottom: .3rem; }

/* ---------- Link list (resources) ---------- */
.link-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.25rem; text-decoration: none; color: var(--ink); font-weight: 600;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.link-list a:hover { border-color: var(--orange); transform: translateX(3px); box-shadow: var(--shadow-sm); }
.link-list .link-desc { display: block; font-weight: 400; font-size: .88rem; color: var(--ink-faint); margin-top: .15rem; }
.link-list svg { flex: none; color: var(--orange-700); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--orange-panel-1) 0%, var(--orange-panel-2) 100%);
  color: var(--ink-soft); border-radius: var(--radius-xl);
  border: 1px solid rgba(249,115,22,.35);
  padding: clamp(2rem, 1.25rem + 4vw, 3.75rem);
  text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; left: -10%; bottom: -80%;
  width: 30rem; height: 30rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,140,0,.42), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--ink); }
.cta-band p { margin-top: 1rem; max-width: 40rem; margin-inline: auto; color: var(--ink-soft); }
.cta-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-bg); color: #C7C7C7;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0; margin-top: 0;
  border-top: 5px solid var(--orange-600);
}
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem 3rem; } }
.site-footer h2 {
  color: var(--orange-bright); font-family: var(--font-body); font-size: .82rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1.15rem;
}
.site-footer a { color: #DCDCDC; text-decoration: none; }
.site-footer a:hover { color: var(--orange); text-decoration: underline; }
.footer-brand img {
  height: 58px; width: auto; max-width: 210px; object-fit: contain;
  margin-bottom: 1.1rem;
  /* White artwork on the charcoal footer needs no plate — 16:1 as-is. */
}
.footer-tag { font-family: var(--font-display); font-size: 1.15rem; color: var(--orange); margin-bottom: .75rem; }
.footer-links { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
.footer-contact { list-style: none; padding: 0; display: grid; gap: .75rem; font-size: .95rem; }
.footer-contact li { display: grid; grid-template-columns: 1.15rem 1fr; gap: .7rem; align-items: start; }
.footer-contact svg { margin-top: .3rem; color: var(--orange); }
.footer-hours { list-style: none; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; }
.socials { display: flex; gap: .6rem; margin-top: 1.35rem; }
.socials a {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #E0E0E0;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { background: var(--orange-600); color: #fff; border-color: var(--orange-600); transform: translateY(-2px); }
.footer-bottom {
  margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.5rem; font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; align-items: center;
}
.footer-note { font-size: .82rem; color: #9A9A9A; max-width: 62ch; margin-top: .5rem; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mb-2 { margin-bottom: 1.5rem; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }