/* Clearwater theme for Waverley (Glen, 2026-10-29: "brand waverley back to clearwater").
   Read from clearwaterhealth.com on 2026-10-29. No Clearwater brand book exists, so the live site is the source:
   - GalanoGrotesque for all type (Clearwater's own webfont files), weights 400/500/600/700.
   - Navy #152177 header and footer, primary blue #2331B5 buttons with 6px corners, teal #3EDDBF quote pill with
     dark text, accent blue #4B59DD, body text #3A3A3A, light panels #F9F9F9 and #EBEBEB, 15px card corners.
   Same token names as Waverley's src.html and the Sophia partner themes, so this file is appended after the base
   styles (the same way partners/kennett-square/site/theme.css works) and only overrides.
   Contrast (WCAG): white on #2331B5 is 9.6:1, white on #152177 is 13.9:1, #3A3A3A on #3EDDBF is 6.7:1, and
   white on #3EDDBF is 1.7:1, so teal always carries dark text. Coral #EF6B51 is for small accents only (white is 3.1:1). */
@font-face { font-family: "GalanoGrotesque"; font-weight: 400; font-style: normal; font-display: swap; src: url("/clearwater/fonts/GalanoGrotesque-Regular.woff2") format("woff2"); }
@font-face { font-family: "GalanoGrotesque"; font-weight: 500; font-style: normal; font-display: swap; src: url("/clearwater/fonts/GalanoGrotesque-Medium.woff2") format("woff2"); }
@font-face { font-family: "GalanoGrotesque"; font-weight: 600; font-style: normal; font-display: swap; src: url("/clearwater/fonts/GalanoGrotesque-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "GalanoGrotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url("/clearwater/fonts/GalanoGrotesque-Bold.woff2") format("woff2"); }

:root {
  --cw-navy: #152177; --cw-blue: #2331b5; --cw-blue-2: #4b59dd; --cw-deep: #00098d;
  --cw-teal: #3eddbf; --cw-teal-soft: #e3faf5; --cw-coral: #ef6b51; --cw-text: #3a3a3a;
  --cw-panel: #f9f9f9; --cw-panel-2: #ebebeb; --cw-line: #e0e0e0;

  --ink: #1a1a1a; --warm-ink: #1a1a1a; --muted: #5c5c66; --line: var(--cw-line); --soft-line: #ececec;
  --paper: #ffffff; --canvas: #ffffff; --soft: var(--cw-panel); --sand: var(--cw-panel-2);
  /* Waverley's "yellow" is its action color; for Clearwater the action color is the primary blue. */
  --yellow: var(--cw-blue); --yellow-dark: var(--cw-navy); --yellow-soft: #eef0fb;
  --display: "GalanoGrotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "GalanoGrotesque", "Helvetica Neue", Arial, sans-serif;
  --radius: 15px;
  --orb-core: var(--cw-teal); --orb-core-deep: var(--cw-blue); --orb-glow: rgba(62,221,191,0.45); --orb-ring: rgba(21,33,119,0.25);
  --shadow: 0 24px 60px rgba(21,33,119,0.14);
}

html, body { background: var(--canvas); color: var(--cw-text); }
body { font-weight: 500; letter-spacing: -0.001em; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; color: var(--cw-navy); }
h3 { font-weight: 600; }
.eyebrow { color: var(--cw-blue); letter-spacing: 0.08em; }
.eyebrow::before { background: var(--cw-teal); }
/* Teal is 1.7:1 on white, so the heading dot is blue on white and teal only on blue or navy. */
.dot { color: var(--cw-blue-2); }
.home-hero .dot, .page-band .dot, .dark .dot { color: var(--cw-teal); }

/* Everything Waverley fills with its action color (--yellow, now blue) carries white text. */
.btn-primary, .start, .button-primary, .section-number, .show li .n, .reason.lift .ico, .plan-card-flag,
.btn-primary:hover { color: #fff; }
/* waverley-site.css styles canvas links with a five-part :not() selector that outranks any plain override. */
.canvas-content .step-rail .is-current a, .step-rail .is-current a { color: #fff !important; }
a { color: var(--cw-blue); }

/* Buttons: blue with white text and 6px corners, as on clearwaterhealth.com. */
.btn { border-radius: 6px; font-weight: 700; color: var(--cw-navy); border-color: var(--cw-navy); }
.btn-primary { background: var(--cw-blue); border-color: var(--cw-blue); color: #fff; }
.btn-primary:hover { background: var(--cw-navy); border-color: var(--cw-navy); color: #fff; }
.btn:focus-visible, .nav a:focus-visible, .orb:focus-visible, .chip:focus-visible { outline-color: var(--cw-teal); }

/* Header: navy bar, white logo and nav, teal underline on the active page. */
.top { background: var(--cw-navy); border-bottom: 0; backdrop-filter: none; }
.brand img { height: 32px; }
.top .nav a { color: rgba(255,255,255,0.86); }
.top .nav a:hover { color: #fff; }
.top .nav a.is-active, .top .nav a.active { color: #fff; border-bottom-color: var(--cw-teal); }
.top .menu-btn { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
@media (max-width: 1023px) { .nav.is-open { background: var(--cw-navy); border-bottom-color: rgba(255,255,255,0.15); } }

/* Hero and page bands: Clearwater blue panel with white type; teal for the highlight word. */
.page-band, .site > .page-band { background: var(--cw-blue); border-bottom: 0; }
.page-band h1, .page-band .eyebrow { color: #fff; }
.page-band .eyebrow::before { background: var(--cw-teal); }
.home-hero { background: var(--cw-blue); }
.home-hero h1 { color: #fff; }
.home-hero .lead, .home-hero .disclose { color: rgba(255,255,255,0.88); }
.home-hero .eyebrow { color: #fff; }
.home-hero .btn { color: #fff; border-color: rgba(255,255,255,0.7); background: transparent; }
.home-hero .btn-primary { background: var(--cw-teal); border-color: var(--cw-teal); color: var(--cw-navy); }
.home-hero .btn-primary:hover { background: #fff; border-color: #fff; color: var(--cw-navy); }
.screen-card strong { color: var(--cw-navy); }
.home-hero .screen-card .eyebrow { color: var(--cw-blue); }
.screen-card .say i { background: radial-gradient(circle at 35% 30%, #c9fff3, var(--cw-teal) 45%, var(--cw-blue)); }

/* Cards and steps: Clearwater's 15px panels, light gray fills, teal number chips. */
.card, .reason, .home-step, .year { border-radius: 15px; border-color: var(--cw-line); }
.card strong { color: var(--cw-navy); }
.card .go { color: var(--cw-blue); }
.home-step .n { background: var(--cw-teal); color: var(--cw-navy); }
.strip .item span { color: var(--muted); }
.year-labels > div:nth-child(1) { border-top-color: var(--cw-teal); }
.year-labels > div:nth-child(2) { border-top-color: var(--cw-blue); }
.year-labels > div:nth-child(3) { border-top-color: var(--cw-panel-2); }
.band .stat b { color: #fff; }

/* Dark panels: Waverley's near-black becomes Clearwater navy, with white headings and teal accents. */
.dark, .reason.lift { background: var(--cw-navy); border-color: var(--cw-navy); color: #fff; }
.dark h1, .dark h2, .dark h3, .reason.lift h3 { color: #fff; }
.dark p, .dark .muted, .reason.lift p { color: rgba(255,255,255,0.85); }
.dark .eyebrow { color: var(--cw-teal); }
.chip.chip-primary { background: var(--cw-navy); border-color: var(--cw-navy); }
.site-nav a.active, .steps-row article span, .question-number { background: var(--cw-navy); }

/* Footer: navy with white type, like the live site. */
footer { background: var(--cw-navy); color: rgba(255,255,255,0.85); }
footer .muted, footer p { color: rgba(255,255,255,0.78); }
footer h4, footer summary { color: #fff; }
footer a { color: #fff; }
footer .stamp, footer .stamp strong, footer .stamp-text, footer .legal { color: rgba(255,255,255,0.72); }