/* ==========================================================================
   Denver Recovery Center — THEME 2 ("Editorial")
   --------------------------------------------------------------------------
   Full-bleed, light and airy. Sections run edge to edge on one soft GREEN
   canvas — every neutral is mixed toward the forest hue, not toward sand — and
   are separated by whitespace and hairline rules rather than alternating slabs
   of colour. There is exactly one tinted band and one dark band per page.

   Rhythm comes from varied layouts instead: icon-card grids, image/copy splits
   that alternate sides, a connected step timeline, and full-width feature art.

   Drop-in replacement for style.css. Every token is a custom property below.
   ========================================================================== */

:root {
  /* Brand */
  --c-ink:        #072a53;
  --c-forest:     #072a53;
  --c-forest-600: #0b3b6d;
  --c-forest-400: #2d6500;
  /* Copper is deepened so white button text and small copper text clear WCAG
     AA (4.5:1). The old #c1743a measured 3.60 white-on-copper and 3.39 as text. */
  --c-copper:     #b35418;   /* buttons, rules, link hover   */
  --c-copper-ink: #91410f;   /* copper used as small text    */
  --c-copper-300: #df8f5c;   /* on dark backgrounds only     */

  /* Canvas — a green ground, not a beige one. Every neutral below is mixed
     toward the forest hue rather than toward sand. */
  --c-page:       #ffffff;
  --c-cream:      #f5f1e8;
  --c-sand:       #f5f1e8;   /* image slots, table stripes        */
  --c-tint:       #e8f3f8;   /* the single tinted band            */
  --c-card:       #ffffff;
  --c-border:     #d8e2e8;
  --c-hair:       #e6ecef;   /* hairline rules between sections   */
  --c-border-str: #b7c8d2;
  --c-body:       #2c2c2c;
  --c-muted:      #59636b;   /* 5.10 on page / 4.51 on tint — AA */

  /* Type — warm serif display against a clean geometric sans */
  --f-display: "Libre Baskerville", Georgia, serif;
  --f-body:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs-hero:  clamp(2.5rem, 1.5rem + 3.6vw, 4.4rem);
  --fs-h1:    clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem);
  --fs-h2:    clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem);
  --fs-h3:    clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-lede:  clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;

  /* Layout — full-bleed sections, centred measure */
  --w-page:   1240px;
  --w-prose:  68ch;
  --r-sm:     8px;
  --r-md:     12px;
  --r-lg:     18px;
  --r-xl:     26px;
  --r-pill:   999px;

  --pad-sec:  clamp(3.2rem, 6vw, 6rem);   /* vertical section rhythm */

  --shadow:    0 1px 2px rgba(16,35,29,.04), 0 10px 30px -16px rgba(16,35,29,.16);
  --shadow-lg: 0 2px 6px rgba(16,35,29,.05), 0 30px 70px -30px rgba(16,35,29,.28);

  --header-h: 76px;
}

/* --------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-body);
  background: var(--c-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;          /* belt and braces against stray wide children */
}
img { max-width: 100%; height: auto; display: block; }
svg { flex: none; }
iframe { border: 0; max-width: 100%; }
a { color: var(--c-forest-600); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--c-copper); }
p { margin: 0 0 1.15rem; }
ul, ol { margin: 0 0 1.15rem; padding-left: 1.2rem; }
li { margin: 0 0 .5rem; }
strong { color: var(--c-ink); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--c-hair); margin: 2.5rem 0; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--c-ink);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 .7rem;
  font-weight: 500;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-family: var(--f-body); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
h4 { font-family: var(--f-body); font-size: 1rem; font-weight: 700; }

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

.wrap { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.75rem); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.15rem; }
.split { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }

.skip-link {
  position: absolute; left: 0; top: -100px; z-index: 200;
  background: var(--c-forest); color: #fff; padding: .8rem 1.3rem;
  border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { top: 0; }

/* ------------------------------------------------------------- Top bar -- */
.topbar {
  background: var(--c-forest);
  color: rgba(255,255,255,.88);
  font-size: var(--fs-xs);
  padding: .6rem 0;
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; align-items: center; }
.topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.topbar a:hover { color: var(--c-copper-300); }
.topbar__note { display: inline-flex; align-items: center; gap: .5rem; }
.pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-copper-300);
  box-shadow: 0 0 0 0 rgba(221,162,119,.7); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(221,162,119,0); }
  100% { box-shadow: 0 0 0 0 rgba(221,162,119,0); }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* -------------------------------------------------------------- Header -- */
/* Full-width, flat, hairline rule. No floating pill, nothing overlapping. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-hair);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 1px 20px -6px rgba(16,35,29,.16); }
.site-header > .wrap {
  display: flex; align-items: center; gap: clamp(.7rem, 1.4vw, 1.15rem);
  min-height: var(--header-h); max-width: 1420px;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name {
  font-family: var(--f-display); font-weight: 600; font-size: 1.12rem;
  color: var(--c-ink); letter-spacing: -.015em; white-space: nowrap;
}
.brand__tag {
  font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--c-muted); font-weight: 600; white-space: nowrap;
}

/* Desktop nav — seven top-level items. The bar is capped by --w-page, so the
   spare room is a fixed ~22px no matter how wide the screen gets; widening the
   viewport does NOT buy more. If the post-merge brand name is longer than
   "Denver Recovery Center", shrink the nav font/padding here, drop a top-level
   item, or give .site-header > .wrap its own wider max-width. */
.nav { display: none; align-items: center; gap: 0; }
@media (min-width: 1320px) { .nav { display: flex; } }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .5rem .44rem; border-radius: var(--r-sm);
  font-size: .82rem; font-weight: 600; color: var(--c-ink);
  text-decoration: none; white-space: nowrap;
}
.nav__link:hover { color: var(--c-forest); background: var(--c-tint); }
.nav__link[aria-current], .nav__item[aria-current] > .nav__link { color: var(--c-forest); }
.nav__item[aria-current] > .nav__link { box-shadow: inset 0 -2px 0 var(--c-copper); border-radius: 0; }
.nav__caret { width: 9px; height: 9px; opacity: .5; transition: transform .18s ease; }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  min-width: 250px; padding: .55rem;
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: none; z-index: 10;
}
/* The visual gap between the link and the panel is dead space the pointer has
   to cross. Without a bridge, :hover drops mid-travel and the menu vanishes.
   This invisible strip is a child of the panel, so hovering it still counts as
   hovering .nav__item and the menu stays open. */
.nav__panel::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -10px; height: 10px;  /* == the gap */
}
.nav__item:hover .nav__panel, .nav__item:focus-within .nav__panel { display: block; }
.nav__panel--wide { min-width: 560px; columns: 2; column-gap: .5rem; }
.nav__panel a {
  display: block; padding: .48rem .65rem; border-radius: var(--r-sm);
  font-size: .89rem; color: var(--c-body); text-decoration: none;
  break-inside: avoid; font-weight: 500;
}
.nav__panel a:hover { background: var(--c-tint); color: var(--c-forest); }
.nav__panel .nav__grouphead {
  margin: .55rem .65rem .2rem; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted);
  break-inside: avoid;
}

.site-header .header-cta { display: none; }
@media (min-width: 660px) {
  .site-header .header-cta { display: inline-flex; flex: none; padding: .7rem 1.15rem; font-size: .89rem; }
}

.burger {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--c-border-str);
  border-radius: var(--r-sm); padding: .58rem 1rem;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--c-ink); cursor: pointer;
}
.burger:hover { border-color: var(--c-forest); }
@media (min-width: 1320px) { .burger { display: none; } }
.burger__bars { display: inline-flex; flex-direction: column; gap: 3px; width: 15px; }
.burger__bars span { height: 1.8px; background: currentColor; border-radius: 2px; }

/* Mobile nav */
.mobile-nav { display: none; border-top: 1px solid var(--c-hair); max-height: 76vh; overflow-y: auto; background: var(--c-page); }
.mobile-nav.is-open { display: block; }
@media (min-width: 1320px) { .mobile-nav.is-open { display: none; } }
.mobile-nav .wrap { padding-top: .7rem; padding-bottom: 1.1rem; }
/* :not(.btn) — this rule is more specific than .btn--primary, so without the
   exclusion it repainted the menu's phone CTA dark-ink on dark-forest (1.5:1). */
.mobile-nav > .wrap > a:not(.btn) {
  display: block; padding: .72rem .1rem; font-weight: 600;
  color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-hair);
}
.mobile-nav details { border-bottom: 1px solid var(--c-hair); }
.mobile-nav summary {
  list-style: none; cursor: pointer; padding: .72rem .1rem;
  font-weight: 600; color: var(--c-ink); position: relative;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after {
  content: ''; position: absolute; right: .3rem; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; transition: rotate .2s ease;
}
.mobile-nav details[open] summary::after { rotate: -135deg; }
.mobile-nav details > div { padding: 0 0 .7rem .8rem; }
.mobile-nav details a { display: block; padding: .45rem 0; font-size: .92rem; color: var(--c-body); text-decoration: none; }
.mobile-nav .btn { width: 100%; justify-content: center; margin-top: 1rem; }

/* ------------------------------------------------------------- Buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: .93rem; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn__ico { width: 16px; height: 16px; }
.btn--primary { background: var(--c-forest); color: #fff; }
.btn--primary:hover { background: var(--c-forest-600); box-shadow: 0 12px 26px -14px rgba(20,70,58,.8); }
.btn--accent { background: var(--c-copper); color: #fff; }
.btn--accent:hover { background: #8f5220; box-shadow: 0 12px 26px -14px rgba(166,95,43,.85); }
.btn--ghost { background: transparent; color: var(--c-forest); border-color: var(--c-border-str); }
.btn--ghost:hover { border-color: var(--c-forest); background: var(--c-tint); }
.btn--light { background: #fff; color: var(--c-forest); }
.btn--light:hover { background: var(--c-tint); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.62); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.8rem 0 0; }
.btn-row--center { justify-content: center; }

/* ------------------------------------------------------------ Sections -- */
/* Full-bleed. Separated by whitespace + a hairline, not by colour slabs. */
.section { padding: var(--pad-sec) 0; border-top: 1px solid var(--c-hair); }
.section--tint { background: var(--c-tint); border-top-color: transparent; }
.section--tint + .section { border-top-color: transparent; }
.section--band { background: var(--c-forest); color: rgba(255,255,255,.85); border-top: 0; }
.section--band h2, .section--band h3 { color: #fff; }
.section--band .sub { color: rgba(255,255,255,.75); }
.section--band .eyebrow { color: var(--c-copper-300); }
.section--band .eyebrow::before { background: var(--c-copper-300); }

.section-head { max-width: 60ch; margin: 0 0 2.4rem; }
.section-head .sub { font-size: var(--fs-lede); color: var(--c-muted); margin: 0; line-height: 1.55; }

/* the accent rule motif that ties the whole theme together */
.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .9rem;
  font-family: var(--f-body);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-copper-ink);
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--c-copper); flex: none; }

.lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--c-ink); }
.prose { max-width: var(--w-prose); }
.prose h3 { margin-top: 2.2rem; }

/* ---------------------------------------------------------------- Hero -- */
/* Light and airy — the page no longer opens on a dark slab. */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.6rem, 5vw, 4.5rem);
  /* green-dominant wash; copper is only a warm trace at the foot */
  background:
    radial-gradient(1100px 560px at 86% -10%, rgba(60,133,112,.22), transparent 64%),
    radial-gradient(920px 500px at 6% 2%, rgba(20,70,58,.12), transparent 62%),
    radial-gradient(760px 400px at 62% 108%, rgba(166,95,43,.08), transparent 70%);
}
.hero h1 { font-size: var(--fs-hero); letter-spacing: -.025em; margin-bottom: 1rem; }
.hero__sub {
  font-family: var(--f-display); font-size: var(--fs-lede);
  font-weight: 500; font-style: italic; color: var(--c-forest); margin: 0 0 1.3rem;
}
.hero__lede { font-size: var(--fs-lede); line-height: 1.65; max-width: 58ch; }
.hero__lede p:last-child { margin-bottom: 0; }
.hero__inner { min-width: 0; }

.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
}
/* image sits on an offset accent block — the signature move of this theme */
.hero__media { position: relative; }
.hero__media::before {
  content: ''; position: absolute; inset: 18px -18px -18px 18px;
  border-radius: var(--r-xl); background: var(--c-tint); z-index: 0;
}
.hero__media > .ph { position: relative; z-index: 1; }
.hero__media > .site-photo {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}
@media (max-width: 939px) { .hero__media::before { inset: 12px -12px -12px 12px; } }

/* index/lead pages get a centred, text-only hero for contrast */
.hero--lead { text-align: center; }
.hero--lead .hero__inner { max-width: 62rem; margin: 0 auto; }
.hero--lead .hero__lede { margin: 0 auto; }
.hero--lead .btn-row { justify-content: center; }
.hero--wide .hero__inner { max-width: none; }

.badge-strip {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--c-hair);
}
.hero--lead .badge-strip { justify-content: center; }
.badge-strip span {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 34px; padding: .42rem .8rem;
  border: 1px solid #cfdee6; border-radius: var(--r-pill);
  background: var(--c-tint);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink);
}
.badge-strip span:not(:last-child)::after { content: none; }
.badge-strip svg { width: 14px; height: 14px; color: var(--c-forest-400); }

/* --------------------------------------------------------- Breadcrumbs -- */
.crumbs { background: var(--c-tint); border-bottom: 1px solid var(--c-border); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; list-style: none; margin: 0; padding: .68rem 0; font-size: var(--fs-xs); }
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: .55rem; color: var(--c-muted); }
.crumbs li:not(:last-child)::after { content: '›'; color: var(--c-forest-400); font-size: 1.05rem; line-height: 1; }
.crumbs a { color: var(--c-forest-600); font-weight: 600; text-decoration: none; }
.crumbs a:hover { color: var(--c-forest); }
.crumbs [aria-current] { color: var(--c-ink); font-weight: 700; }

/* ------------------------------------------------- Image placeholders -- */
.ph {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; padding: 1.25rem;
  aspect-ratio: var(--ph-ratio, 16 / 9);
  background:
    linear-gradient(145deg, rgba(7,42,83,.12), transparent 52%),
    radial-gradient(circle at 82% 18%, rgba(179,84,24,.16), transparent 28%),
    var(--c-sand);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  color: var(--c-muted);
  overflow: hidden;
}
.ph__icon svg { width: 42px; height: 42px; opacity: .18; color: var(--c-forest); }
.ph__note {
  display: none; font-size: var(--fs-sm); font-weight: 600; color: var(--c-body);
  max-width: 30ch; line-height: 1.4;
}
.ph__ratio {
  display: none; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--c-muted);
  background: rgba(255,255,255,.75); padding: .18rem .5rem; border-radius: var(--r-pill);
}
.ph--flat { border-radius: var(--r-md); }

/* --------------------------------------------------------------- Grids -- */
.grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 1.6rem 1.5rem;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.card--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.card--link .card__more { margin-top: auto; padding-top: 1rem; }
.card h3 { margin: 0 0 .5rem; }
.card p:last-child { margin-bottom: 0; }
.card--link:hover { border-color: var(--c-forest-400); box-shadow: var(--shadow); transform: translateY(-3px); }
.card__more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-forest);
}
.card__more svg { width: 14px; height: 14px; transition: transform .16s ease; }

a.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
a.card h3 { color: var(--c-ink); }
a.card:hover h3 { color: var(--c-forest); }
a.card:hover .card__more { color: var(--c-copper); }
a.card:hover .card__more svg { transform: translateX(3px); }

/* cards that carry a thumbnail lose their padding at the top */
a.card:has(.card__thumb) { padding: 0; overflow: hidden; }
.card__thumb { display: block; }
.card__thumb .ph, .card__thumb .site-photo {
  width: 100%; border: 0; border-bottom: 1px solid var(--c-border);
  border-radius: 0; aspect-ratio: 16 / 10; object-fit: cover;
}
.card__thumb .ph__note { display: none; }
.card__body { display: block; padding: 1.4rem 1.5rem 1.6rem; }

/* --------------------------------------------------------- Icon cards -- */
/* Replaces the endless stack of identical full-width boxes. */
/* Explicit column counts — `auto-fit` was spilling three-up grids to four. */
.icards { display: grid; align-items: stretch; gap: 1.6rem 1.5rem; margin: 0 0 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .icards--2, .icards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .icards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) {
  .icards--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
  .icards--split { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.icard {
  height: 100%; padding: 1.5rem; background: var(--c-card);
  border: 1px solid var(--c-border); border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.icard:hover {
  transform: translateY(-3px); border-color: #bfd1dc;
  box-shadow: var(--shadow-lg);
}
.icard__ico {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--c-tint); color: var(--c-forest);
}
.section--tint .icard__ico { background: #fff; }
.icard__ico svg { width: 21px; height: 21px; }
.icard h3 { margin: 0 0 .45rem; font-size: 1.06rem; }
.icard h3 a { color: inherit; text-decoration: none; }
.icard h3 a:hover { color: var(--c-forest); }
.icard p { margin: 0; font-size: var(--fs-sm); line-height: 1.65; }

/* ------------------------------------------------------- Media splits -- */
.media-split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) {
  .media-split { grid-template-columns: 1.05fr .95fr; }
  .media-split--programs { grid-template-columns: 1fr; align-items: start; }
  .media-split__copy .icards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .media-split__copy .icards--3 > .icard:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .media-split__copy .icard { padding: 1.35rem; }
  .media-split--flip .media-split__copy { order: 2; }
}
.media-split__copy { min-width: 0; }
.media-split__copy .section-head { margin-bottom: 1.6rem; }
.media-split__media { position: relative; width: 100%; max-width: 440px; justify-self: center; }
.media-split__media::before {
  content: ''; position: absolute; inset: 16px -16px -16px 16px;
  border-radius: var(--r-xl); background: var(--c-tint); z-index: 0;
}
.media-split--flip .media-split__media::before { inset: 16px 16px -16px -16px; }
.media-split__media > .ph { position: relative; z-index: 1; }
.media-split__media > .site-photo {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}

/* Full-width introduction followed by a balanced image/content row */
.split-feature__intro { width: 100%; margin-bottom: clamp(2rem, 4vw, 3rem); }
.split-feature__intro .section-head { margin-bottom: 1.25rem; }
.split-feature__intro > p { max-width: 88ch; }
.split-feature__row { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.split-feature__content { min-width: 0; }
.split-feature__row .media-split__media { max-width: 420px; justify-self: start; }
.split-feature__row .media-split__media > .site-photo { aspect-ratio: 4 / 3; }
@media (min-width: 620px) {
  .split-feature__content .icards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-feature__content .icards--2 > .icard:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 940px) {
  .split-feature__row { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); }
}
/* --------------------------------------------------------------- Lists -- */
.checklist { list-style: none; padding: 0; margin: 0 0 1.15rem; display: grid; gap: .7rem; }
.checklist--cols { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .7rem 2rem; }
.checklist li { position: relative; padding-left: 1.9rem; margin: 0; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .38em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--c-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072a53' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.66rem no-repeat;
}
.section--tint .checklist li::before { background-color: #fff; }
.checklist--tight li { padding-left: 1.65rem; }
.checklist--tight li::before { width: .95rem; height: .95rem; background-size: .58rem; }

/* kept for the 1–2 item cases that don't become icon cards */
.deflist { list-style: none; padding: 0; margin: 0 0 1.15rem; display: grid; gap: 1.3rem; }
.deflist li { margin: 0; padding-left: 1.15rem; border-left: 2px solid var(--c-copper); }
.deflist li::before { content: none; }
.deflist strong { display: block; margin-bottom: .2rem; font-size: 1.04rem; color: var(--c-ink); }

/* ------------------------------------------------------ Step timeline -- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1.15rem; }

/* horizontal, connected — used when there are 4 or fewer steps */
.steps--flow { display: grid; gap: 2rem 1.6rem; }
@media (min-width: 800px) {
  .steps--flow { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.6rem; }
}
.steps--flow li { position: relative; margin: 0; padding-top: 3.4rem; }
.steps--flow li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-forest); color: #fff;
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 600;
  z-index: 1;
}
/* the connecting rail */
.steps--flow li::after {
  content: ''; position: absolute; left: 2.5rem; top: 1.25rem;
  height: 1px; width: calc(100% - 1.9rem); background: var(--c-border);
}
.steps--flow li:last-child::after { content: none; }
@media (max-width: 799px) { .steps--flow li::after { content: none; } }

/* vertical rail — used when there are 5 or more */
.steps--rail { display: grid; gap: 1.9rem; }
.steps--rail li { position: relative; margin: 0; padding-left: 3.6rem; }
.steps--rail li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -.15rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-forest); color: #fff;
  font-family: var(--f-display); font-size: 1rem; font-weight: 600;
  z-index: 1;
}
.steps--rail li:not(:last-child)::after {
  content: ''; position: absolute; left: 1.2rem; top: 2.5rem;
  bottom: -1.9rem; width: 1px; background: var(--c-border);
}
.steps li strong { display: block; margin-bottom: .3rem; font-size: 1.05rem; color: var(--c-ink); }
.steps li p:last-child { margin-bottom: 0; }
.steps li p { font-size: var(--fs-sm); }

/* ----------------------------------------------------------- Callouts  -- */
.callout {
  padding: 1.3rem 1.5rem; margin: 0 0 1.15rem;
  background: var(--c-tint); border-radius: var(--r-lg);
  border-left: 3px solid var(--c-forest-400);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--c-forest); }
.callout--alert { background: #fdf3ea; border-left-color: var(--c-copper); }

.quote {
  position: relative; margin: 0 0 1.15rem; padding: 0 0 0 1.6rem;
  border-left: 3px solid var(--c-copper);
}
.quote::before { content: none; }
.quote p {
  font-family: var(--f-display); font-size: 1.22rem; line-height: 1.5;
  color: var(--c-ink); font-style: italic;
}
.quote footer { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; font-style: normal; }

.inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  justify-content: space-between;
  padding: 1.5rem 1.7rem; margin: 1.8rem 0;
  background: var(--c-tint); border-radius: var(--r-xl);
}
.section--tint .inline-cta { background: #fff; }
.inline-cta p { margin: 0; font-weight: 600; color: var(--c-ink); }
.inline-cta .btn { flex: none; }

.slot {
  padding: 1.5rem; margin: 0 0 1.15rem;
  border: 1px solid var(--c-border); border-radius: var(--r-xl);
  background: var(--c-sand);
}
.slot p:last-child { margin-bottom: 0; }
.slot__label {
  display: inline-block; margin-bottom: .35rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-muted);
}

.insurers { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0 0 1.15rem; }
.insurers li {
  margin: 0; padding: .6rem 1.2rem;
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
}

.info-card {
  padding: 1.6rem; background: var(--c-card);
  border: 1px solid var(--c-border); border-radius: var(--r-xl);
}
.info-card dl { margin: 0; display: grid; gap: .9rem; }
.info-card dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.info-card dd { margin: .15rem 0 0; color: var(--c-ink); font-weight: 500; }
.info-card dd a { font-weight: 600; }

.map-embed { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--c-border); background: var(--c-sand); }
.map-embed iframe { display: block; width: 100%; height: 360px; }

/* --------------------------------------------------------------- Table -- */
.table-scroll { overflow-x: auto; margin: 0 0 1.15rem; border-radius: var(--r-xl); border: 1px solid var(--c-border); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--c-card); }
.data-table th, .data-table td { padding: .9rem 1.15rem; text-align: left; vertical-align: top; }
.data-table thead th {
  background: var(--c-forest); color: #fff;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.data-table tbody tr + tr { border-top: 1px solid var(--c-hair); }
.data-table tbody tr:nth-child(even) { background: #f4f9f5; }
.data-table tbody td:first-child { font-weight: 600; color: var(--c-ink); }

/* ----------------------------------------------------------------- FAQ -- */
/* A clean divided list — not another stack of boxes. */
.faq { border-top: 1px solid var(--c-hair); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--c-hair); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.25rem 3rem 1.25rem 0;
  font-family: var(--f-body); font-weight: 600; font-size: 1.05rem;
  color: var(--c-ink); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .6rem; top: 50%;
  width: 11px; height: 2px; background: var(--c-forest); margin-top: -1px;
}
.faq summary::before {
  content: ''; position: absolute; right: 1.05rem; top: 50%;
  width: 2px; height: 11px; background: var(--c-forest); margin-top: -5.5px;
  transition: opacity .2s ease, rotate .2s ease;
}
.faq details[open] summary::before { opacity: 0; rotate: 90deg; }
.faq details[open] summary { color: var(--c-forest); }
.faq__body { padding: 0 3rem 1.5rem 0; }
.faq__body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Form -- */
.form-card {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--r-xl); padding: clamp(1.6rem, 3vw, 2.5rem);
}
.form-grid { display: grid; gap: 1.05rem; }
@media (min-width: 700px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.field label .opt { font-weight: 400; color: var(--c-muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--fs-body); color: var(--c-ink);
  padding: .78rem .95rem; width: 100%;
  background: #fff; border: 1.5px solid var(--c-border-str);
  border-radius: var(--r-md);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-forest); box-shadow: 0 0 0 3px rgba(60,133,112,.16);
}
.form-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-muted); }
/* a checkbox, not a text field — must not inherit the full-width rule above */
.form-consent input {
  width: 1.05rem; height: 1.05rem; flex: none;
  margin-top: .24rem; padding: 0; border-radius: 4px;
  accent-color: var(--c-forest);
}
.form-consent > span { flex: 1 1 auto; min-width: 0; }
.form-note { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-muted); margin: 1.1rem 0 0; }
.form-note svg { width: 15px; height: 15px; margin-top: .22rem; color: var(--c-forest-400); }

/* ------------------------------------------------------- Emergency bar -- */
.emergency { background: #fdf3ea; border-top: 1px solid #f0dcc6; border-bottom: 1px solid #f0dcc6; padding: 1.1rem 0; }
.emergency .wrap { display: flex; gap: .75rem; align-items: flex-start; }
.emergency svg { width: 18px; height: 18px; color: var(--c-copper); margin-top: .2rem; }
.emergency p { margin: 0; font-size: var(--fs-sm); color: #71512f; }
.emergency a { color: #8a4b16; font-weight: 700; }

/* ------------------------------------------------------------ CTA band -- */
/* The single dark moment on the page. */
.cta-band {
  position: relative; overflow: hidden;
  padding: clamp(3.2rem, 6vw, 5.5rem) 0;
  background:
    radial-gradient(900px 400px at 80% 0%, rgba(60,133,112,.35), transparent 62%),
    var(--c-forest);
  color: rgba(255,255,255,.85);
  border-top: 0;
}
.cta-band::before {
  content: ''; position: absolute; left: -120px; bottom: -160px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, rgba(193,116,58,.28), transparent 68%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band__inner { max-width: 60rem; }
.cta-band h2 { color: #fff; }
.cta-band .sub {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  color: var(--c-copper-300); font-size: var(--fs-lede); margin: 0 0 1.2rem;
}
.cta-band p { color: rgba(255,255,255,.85); }
.cta-band a:not(.btn) { color: #fff; font-weight: 600; }
.cta-band .eyebrow { color: var(--c-copper-300); }
.cta-band .eyebrow::before { background: var(--c-copper-300); }

/* -------------------------------------------------------------- Footer -- */
.site-footer {
  background: var(--c-ink); color: rgba(255,255,255,.62);
  font-size: var(--fs-sm); padding: clamp(2.8rem, 5vw, 4rem) 0 1.6rem;
}
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.site-footer a:hover { color: var(--c-copper-300); }
.footer__main { display: grid; gap: 2.2rem; margin-bottom: 2.5rem; }
@media (min-width: 800px) { .footer__main { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; } }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__tag { color: rgba(255,255,255,.62); }
.footer__blurb { margin: 1rem 0 1.2rem; max-width: 34ch; line-height: 1.6; }
.footer__contact { display: grid; gap: .5rem; }
.footer__phone { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; color: #fff !important; }
.footer__col h4 {
  color: #fff; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .9rem;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer__col li { margin: 0; }
.footer__disclaimer {
  font-size: var(--fs-xs); line-height: 1.65; color: rgba(255,255,255,.62);   /* .45 blended to 4.36:1 — under AA */
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.4rem; margin: 0 0 1.2rem;
}
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255,255,255,.62);   /* .45 blended to 4.36:1 — under AA */
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.2rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* ------------------------------------------------------------- Motion  -- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .card--link:hover { transform: none; }
}

/* ------------------------------------------------------------- Narrow  -- */
@media (max-width: 560px) {
  .btn-row .btn, .form-card .btn { width: 100%; flex: 1 1 100%; }
  .hero__media::before, .media-split__media::before { inset: 10px -10px -10px 10px; }
  .media-split--flip .media-split__media::before { inset: 10px 10px -10px -10px; }
}
/* portrait art is fine beside copy, but stacked on a phone it eats the screen */
@media (max-width: 939px) {
  .hero__media .ph, .hero__media .site-photo, .media-split__media .ph, .media-split__media .site-photo { aspect-ratio: 3 / 2; }
}
/* brand lockup + burger have to share a phone-width bar without spilling */
@media (max-width: 480px) {
  .brand__mark { width: 33px; height: 33px; }
  .brand__name { font-size: 1rem; }
  .burger { padding: .55rem .75rem; gap: .4rem; }
}
@media (max-width: 400px) { .brand__tag { display: none; } }

/* --------------------------------------------------------------- Print -- */
@media print {
  .topbar, .site-header, .mobile-nav, .btn, .cta-band, .site-footer, .crumbs, .ph { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .hero { background: #fff; color: #000; padding: 1rem 0; border: 0; }
}