/* SKIN: health (med spas, clinics, dental, therapy, fitness, CPR training)
   Feel: calm, clean, credible. Lots of air, soft color, nothing shouting.

   THIS SITE'S COPY carries the client's OWN brand (lumu-health, 2026-09-24),
   taken from the brand flyer Cindy sent: deep teal-green, sage/mint, cream
   and gold; a high-contrast serif for headings (Playfair Display), a clean
   humanist sans for body (Mulish), and a thin monoline script for a few
   accent headlines (Sacramento, self-hosted). The shared template skin is
   untouched (cool blue-gray) - this is per-site tuning, not a fleet change.

   Colors were SAMPLED from the flyer's pixels (banner #164645/#184A48,
   button #2B584E, sage #8CB49F, cream #FBF2E6/#FCFAF3, gold #9D7131 to
   #E7C997). The fonts were matched BY EYE (a flattened image carries no font
   names, and the flyer appears AI-generated - it has a "WASHIGGTON" typo), so
   treat them as close matches, not exact. If Cindy has the source file
   (Canva etc.) or a real logo file, ask for it.

   Contrast (all measured): primary on paper 9.54:1, muted on section-alt
   5.64:1, white on button 8.05:1, gold text on paper 5.12:1 / on alt 4.65:1. */
@font-face{font-family:'Sacramento';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/sacramento-latin.woff2) format('woff2');}

:root{
  --paper:#FDFAF3; --ink:#1F3B38; --muted:#4F625F;
  --radius:12px;
  --shadow:0 4px 18px rgba(24,74,72,.09);
  --tile-border:1px solid #E8DFC9;
  --header-line:1px solid #E8DFC9;
  --section-bg-alt:#F5EFE0;
  --accent-text:#fff;
  --mint:#DDEBE1;            /* icon badge fill, from the flyer's sage circles */
  --gold:#B8924A;            /* decorative lines and borders */
  --gold-deep:#8A6428;       /* gold as TEXT on cream (5.12:1) */
  --gold-light:#E7C997;      /* gold on the dark footer / hero */
  /* Deep-teal overlay. Pixel-sampled against every hero photo across the
     20%-70% text band: white text worst-case 6.08:1, the light-gold eyebrow
     (hero_eyebrow_color in config.php) worst-case 4.75:1. */
  --hero-overlay:linear-gradient(180deg,rgba(12,36,34,.76),rgba(12,36,34,.62) 55%,rgba(12,36,34,.80));
}
section{padding:5rem 0}
h1,h2{font-weight:700}
.sub{line-height:1.75}
.tile{padding:1.8rem 1.6rem}
.tile h3{color:var(--primary);margin-bottom:.7rem}

/* Eyebrows: the flyer sets small labels in spaced caps; gold-deep on cream.
   (.hero .eyebrow gets its own light color from hero_eyebrow_color.) */
.eyebrow{color:var(--gold-deep)}

/* Script accent - the flyer's headline style. Used sparingly, on SHORT
   hero headlines only: a thin script is unreadable at length or small size. */
.hero h1.script{font-family:'Sacramento','Brush Script MT',cursive;font-weight:400;
  font-size:clamp(3.4rem,8vw,5.6rem);line-height:1;letter-spacing:0;
  text-shadow:0 2px 8px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.6)}

/* ---- Tile icons ---- */
.tile-icon{width:44px;height:44px;border-radius:50%;background:var(--mint);
  border:1px solid var(--gold);display:flex;align-items:center;
  justify-content:center;color:var(--primary);margin-bottom:1rem}
.tile-icon svg{width:22px;height:22px}

/* ---- Footer: a gold rule and gold headings, as in the flyer ---- */
.site-footer{border-top:3px solid var(--gold)}
.foot-head{color:var(--gold-light)}

/* ---- Extra breathing room (operator request, 2026-09-15) ----
   base.css's global `*{margin:0}` reset leaves consecutive paragraphs,
   headings, buttons and CTA rows touching with zero gap unless spaced by
   hand. Restoring a more generous default rhythm here, per-site only. */
.eyebrow{margin-bottom:.6rem}
h1{margin-bottom:1.1rem}
h2{margin:.5rem 0 1.4rem}
.sub{margin-bottom:1.2rem}
p{margin-bottom:1.1rem}
.cta-row{margin-top:1.8rem}
.tile p + p{margin-top:.6rem}
.split > div > * + *{margin-top:1.2rem}

/* ---- Flyer components (2026-09-24, "base it off of the flyer") ---- */
.script{font-family:'Sacramento','Brush Script MT',cursive;font-weight:400}

/* The flyer's deep-teal banner with gold edges: used for the "Same compassion.
   Greater access." statement and the closing "You are seen..." band. */
.band{background:var(--primary);color:#fff;text-align:center;
  border-top:3px solid var(--gold);border-bottom:3px solid var(--gold)}
.band .eyebrow{color:var(--gold-light)}
.band h2{color:#fff}
.band h2.script{font-size:clamp(2.6rem,6vw,4.2rem);line-height:1.1;letter-spacing:0}
.band .sub{color:rgba(255,255,255,.92);margin-left:auto;margin-right:auto}
.band .values{letter-spacing:.32em;text-transform:uppercase;font-size:.8rem;
  font-weight:700;color:var(--gold-light);margin:1.4rem 0 0}
.band .cta-row{justify-content:center}
.band .btn-accent{background:var(--gold-light);border-color:var(--gold-light);color:var(--dark)}

/* Four focus areas, as circular icons like the flyer (sage, gold, teal, gold). */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:2.3rem}
@media (max-width:960px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid4{grid-template-columns:1fr}}
.focus{text-align:center}
.focus-icon{width:72px;height:72px;border-radius:50%;margin:0 auto 1.1rem;
  display:flex;align-items:center;justify-content:center;color:#fff;background:#8CB49F}
.focus-icon svg{width:34px;height:34px}
.grid4 > .focus:nth-child(2) .focus-icon,.grid4 > .focus:nth-child(4) .focus-icon{background:#C9A566}
.grid4 > .focus:nth-child(3) .focus-icon{background:var(--accent)}
.focus h3{text-transform:uppercase;letter-spacing:.12em;font-size:.95rem;color:var(--primary);margin-bottom:.45rem}
.focus p{font-weight:600;color:var(--muted)}

/* ---- Insurance plans as a pill list (2026-09-24, operator request) ---- */
.plans{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));
  gap:12px;margin:1.4rem 0 0;max-width:820px}
.plans li{display:flex;align-items:center;gap:.75rem;background:#fff;border:var(--tile-border);
  border-radius:999px;padding:.7rem 1.15rem;font-weight:600;color:var(--primary);
  box-shadow:var(--shadow)}
.plans li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--gold);background:var(--mint) center/12px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184A48' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.plans-note{margin-top:1.2rem;color:var(--muted);font-size:.95rem}

/* ---- Footer logo glow (2026-09-29, operator-approved) ----
   The logo's dark teal wordmark measures ~1.47:1 contrast against this
   site's dark footer - real, not a rendering bug (see SITE-CLAUDE.md Round
   12). A soft white halo around every opaque shape (drop-shadow follows the
   image's own alpha channel, so it hugs the ring/leaves/letterforms rather
   than being a plain box) lifts the whole mark off the dark background
   without altering the logo file itself. Header logo is untouched - it's on
   a light background already and doesn't need this. */
.foot-logo{
  filter: drop-shadow(0 0 1px rgba(255,255,255,.9))
          drop-shadow(0 0 3px rgba(255,255,255,.75))
          drop-shadow(0 0 6px rgba(255,255,255,.55));
}