/* =====================================================================
   Adams Behavioral Consulting · site styles
   ---------------------------------------------------------------------
   HOW TO CUSTOMIZE
   Everything you'd want to change (colors, fonts, sizes, rounding,
   shadows, panel widths) is in the THEME block below. Nothing further
   down hard-codes a color, so a change there carries to every page.

   Family resemblance: the layout language follows the A&D Behavioral
   Solutions site (bordered white panels on a tinted page, dark gradient
   vision card, photo strips with an accent edge, serif card titles,
   light footer). Joe's own identity comes from his colors and fonts.

   Colors are from Joe's current site (adamsbehavioralconsulting.com):
   teal #3A99AA, deep teal #0A292E, aqua #C8EDF3, aqua white #F1FBFC,
   grey #CDCDCD, text #333333. Those are the only design colors used.
   Like his current site, buttons are teal with dark text, and turn
   deep teal with light text on hover.
   ===================================================================== */

/* ------------------------------ THEME ------------------------------ */
:root {
  /* Joe's palette: the only colors on the site (from his current site) */
  --teal:          #3A99AA;   /* buttons, accents, the Vision panel */
  --teal-deep:     #0A292E;   /* headings, links, banner, dark panels */
  --aqua:          #C8EDF3;   /* borders, soft fills, text on dark */
  --aqua-white:    #F1FBFC;   /* page background */
  --grey:          #CDCDCD;
  --text:          #333333;
  --white:         #FFFFFF;

  /* Roles (all built from the palette above) */
  --page-bg:       var(--aqua-white);
  --panel:         var(--white);
  --panel-soft:    var(--aqua-white);
  --line:          var(--aqua);
  --heading:       var(--teal-deep);
  --text-muted:    rgba(51, 51, 51, .78);       /* #333333, softened */
  --on-dark:       var(--aqua-white);
  --on-dark-muted: rgba(241, 251, 252, .75);    /* #F1FBFC, softened */
  --accent-on-dark:var(--aqua);
  --button-text:   var(--teal-deep);            /* dark text on teal, like his current buttons */

  /* Top banner look (deep teal with teal glows); also used by the Vision panel */
  --banner-glow:
    radial-gradient(circle at 15% 20%, rgba(58, 153, 170, .55), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(200, 237, 243, .22), transparent 50%),
    linear-gradient(135deg, rgba(10, 41, 46, .95) 0%, rgba(10, 41, 46, .78) 55%, rgba(58, 153, 170, .55) 100%);

  /* Texture (palette colors only). Set either to "none" to turn it off. */
  --texture-watermark: url("img/adams-icon-teal.png");   /* Joe's infinity mark, tiled behind the panels */
  --watermark-size: 150px;      /* size of each infinity mark */
  --watermark-strength: 0;      /* 0 = off (was .16 when tried), higher = stronger */
  --clouds-strength: 1;         /* soft teal/aqua clouds behind the panels: 0 = off, 1 = normal */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04  0 0 0 0 .16  0 0 0 0 .18  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");   /* faint paper grain inside panels */

  /* The one intentional off-palette color: the red "live" tag on the
     event bar (Rodney 2026-10-05, reads like a recording light) */
  --live-red:      #D92D20;

  /* Functional only (never part of the design) */
  --focus:         #F2B134;   /* keyboard focus ring */
  --error:         #B42318;   /* form errors */

  /* Fonts (same pair as Joe's project roadmap) */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --weight-heading: 600;

  /* Type sizes */
  --text-base: 1rem;
  --h1: clamp(2.4rem, 5vw, 3.6rem);
  --h2: clamp(1.8rem, 3.2vw, 2.5rem);
  --h3: 1.3rem;

  /* Layout */
  --shell: 1200px;        /* width of the panels */
  --page-width: 1060px;   /* content width inside a panel */
  --narrow: 780px;        /* centered column for text, events, forms */
  --gutter: clamp(20px, 4vw, 40px);
  --panel-gap: 24px;      /* space between panels */
  --panel-pad: clamp(44px, 6vw, 72px);

  /* Rounding (A&D uses 12 / 8 / 6) */
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --radius-button: 999px;  /* pill, like his current site */

  /* Depth */
  --shadow-sm: 0 2px 8px rgba(10, 41, 46, .06);
  --shadow:    0 4px 20px rgba(10, 41, 46, .09);
  --shadow-lg: 0 10px 40px rgba(10, 41, 46, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------ BASE ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--page-bg);
  color: var(--text);
  font: 400 var(--text-base)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Soft color clouds: big blurry patches of Joe's teal and aqua behind the
   panels. Fixed to the window, so every screenful looks balanced. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  opacity: var(--clouds-strength);
  background:
    radial-gradient(38% 34% at 4% 12%, rgba(58, 153, 170, .38), transparent 70%),
    radial-gradient(34% 32% at 97% 40%, rgba(58, 153, 170, .32), transparent 70%),
    radial-gradient(46% 40% at 14% 80%, rgba(200, 237, 243, 1), transparent 72%),
    radial-gradient(40% 36% at 90% 98%, rgba(58, 153, 170, .34), transparent 70%),
    radial-gradient(30% 26% at 55% 55%, rgba(200, 237, 243, .8), transparent 70%);
}
/* Infinity watermark: Joe's mark repeated at a tilt behind everything.
   Fixed to the window, so it shows in the gaps as the page scrolls. */
body::before {
  content: ""; position: fixed; inset: -30%; z-index: -1; pointer-events: none;
  background: var(--texture-watermark) 0 0 / var(--watermark-size) auto space;
  opacity: var(--watermark-strength);
  transform: rotate(-12deg);
}
img, video, iframe { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .55em;
  color: var(--heading);
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.25; }
p { margin: 0 0 1em; }
a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
a:hover { color: var(--teal-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--aqua); color: var(--teal-deep); }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow); }

.container { width: min(100% - 2 * var(--gutter), var(--page-width)); margin-inline: auto; }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 0 auto 40px; max-width: var(--narrow); }
.section-head h2 { margin: 0; }
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font: 700 .75rem/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 12px;
}
.eyebrow::before { content: ""; flex: none; width: 18px; height: 3px; border-radius: 3px; background: var(--teal); }
.section-head .eyebrow, .stack .eyebrow, .group-head .eyebrow { justify-content: center; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.7; color: var(--text-muted); max-width: 60ch; }
.muted { color: var(--text-muted); }

/* Still to confirm with Joe. Search the HTML for "tbd" to find them all. */
.tbd { text-decoration: underline dotted #C9A227 2px; text-underline-offset: 4px; background: rgba(242, 177, 52, .12); border-radius: 4px; }

/* ----------------------------- BUTTONS ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px;
  border: 1.5px solid var(--teal);
  border-radius: var(--radius-button);
  background: var(--teal);
  color: var(--button-text);
  font: 700 .95rem/1.1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), background .2s, box-shadow .25s var(--ease), color .2s, border-color .2s;
}
.btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--aqua-white); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--outline { background: var(--panel); color: var(--teal-deep); border-color: var(--teal-deep); }
.btn--outline:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--aqua-white); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--teal-deep); }
.btn--light:hover { background: var(--aqua); border-color: var(--aqua); color: var(--teal-deep); }
.btn--small { padding: 8px 14px; font-size: .85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* A&D-style "LEARN MORE →" links */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font: 700 .8rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep);
}
.link-arrow::after { content: "→"; transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--teal-deep); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ------------------------- HIGHLIGHT BAR --------------------------- */
/* Update bar (every page): fixed red UPDATES label, then one of Joe's
   Presenting/Hosting events at a time in the spotlight. Every few seconds
   it slides up and the next one slides in; the thin line along the bottom
   shows when. Filled from js/events.js; hover pauses it. */
.highlight-bar {
  position: relative; z-index: 60;
  background: var(--teal); color: var(--teal-deep);
  font-size: .95rem; font-weight: 600;
  box-shadow: 0 4px 14px rgba(10, 41, 46, .25);
}
.ticker { display: flex; align-items: stretch; height: 48px; overflow: hidden; }
.ticker-label {
  position: relative; z-index: 2; flex: none;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 22px 0 max(16px, var(--gutter));
  background: var(--live-red); color: var(--white);
  font: 800 .75rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 6px 0 14px rgba(10, 41, 46, .25);
}
.ticker-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--white);
  animation: bar-pulse 1.8s ease-out infinite;
}
.ticker-label::after {
  content: ""; position: absolute; top: 0; right: -14px; width: 14px; height: 100%;
  background: var(--live-red); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ticker-stage { position: relative; flex: 1; min-width: 0; }
.ticker-item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 24px 0 34px;
  color: var(--teal-deep); text-decoration: none; white-space: nowrap;
  opacity: 0; transform: translateY(100%);
  transition: transform .55s var(--ease), opacity .55s var(--ease);
}
.ticker-item.is-on  { opacity: 1; transform: translateY(0); }
.ticker-item.is-out { opacity: 0; transform: translateY(-100%); }
.ticker-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ticker-item:hover .ticker-text { text-decoration: underline; text-underline-offset: 3px; }
.ticker-tag {
  flex: none; padding: 3px 9px; border-radius: var(--radius-sm);
  background: var(--teal-deep); color: var(--aqua);
  font: 700 .66rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}
.ticker-more {
  flex: none; padding: 5px 14px; border-radius: var(--radius-button);
  background: var(--teal-deep); color: var(--aqua-white); font-size: .8rem; font-weight: 700;
}
.ticker-more::after { content: " →"; }
.ticker-item:hover .ticker-more { background: var(--white); color: var(--teal-deep); }
.ticker-count {
  flex: none; display: inline-flex; align-items: center; padding: 0 max(16px, var(--gutter)) 0 12px;
  font: 700 .75rem/1 var(--font-body); letter-spacing: .08em; color: var(--teal-deep); opacity: .8;
  font-variant-numeric: tabular-nums;
}
.ticker-count:empty { display: none; }
.ticker-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--aqua); transform-origin: left center; transform: scaleX(0);
}
.ticker-progress.is-running { animation: ticker-fill linear forwards; }
@keyframes ticker-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Phones: the whole event fits. Tag on top, the event wraps to two
   smaller lines, and the red label shrinks. */
@media (max-width: 640px) {
  .ticker { height: 66px; font-size: .8rem; line-height: 1.3; }
  .ticker-label { padding: 0 10px 0 12px; gap: 6px; font-size: .62rem; letter-spacing: .08em; }
  .ticker-label::after { right: -10px; width: 10px; }
  .ticker-item {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
    padding: 0 12px 0 20px; white-space: normal;
  }
  .ticker-tag { font-size: .58rem; padding: 2px 7px; }
  .ticker-text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; text-overflow: clip;
  }
  .ticker-more, .ticker-count { display: none; }
}
.pill {
  display: inline-block; padding: 3px 9px; margin-right: 10px;
  border-radius: var(--radius-sm);
  background: rgba(58, 153, 170, .14); color: var(--teal-deep);
  font: 700 .66rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  vertical-align: 2px;
}
@keyframes bar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .9); opacity: 1; }
  50%  { opacity: .55; }
  70%  { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); opacity: 1; }
}
.pill--hosting   { background: var(--aqua); color: var(--teal-deep); }
.pill--attending { background: rgba(205, 205, 205, .45); color: var(--text-muted); }

/* ----------------------------- BANNER ------------------------------ */
/* Same build as A&D: photo or video underneath, angled gradient on top. */
.banner {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--teal-deep);
  color: var(--white);
  display: grid; place-items: center; text-align: center;
}
.banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--banner-glow);
}
.banner--home { min-height: clamp(420px, 84vh, 760px); padding: 64px var(--gutter); }
/* Home banner with Joe's video: a lighter teal wash (like A&D's) so the
   people show through, darker in the middle where the logo sits. */
.banner--home { background: var(--teal-deep); }
.banner--home::after {
  background:
    radial-gradient(ellipse 50% 55% at 50% 50%, rgba(10, 41, 46, .5), transparent 75%),
    linear-gradient(135deg, rgba(10, 41, 46, .66) 0%, rgba(10, 41, 46, .38) 55%, rgba(58, 153, 170, .34) 100%);
}
.banner--home .banner-video, .banner--home .banner-photo { object-position: center 15%; }  /* lower % = video sits lower, more of the top shows */
.banner--page { padding: clamp(64px, 9vw, 104px) var(--gutter); }
/* Inner pages: the Home spotlight image as a subtle backdrop behind the
   regular teal wash (same height and title as before). */
.banner--page { background: var(--teal-deep) url("img/banner-spotlight4.jpg?v=2") center 35% / cover no-repeat;  /* was banner-spotlight2.jpg; 2026-10-12 trying spotlight4 (spotlight3 also kept) */ }
.banner--page::after {
  /* same wash as the Home banner */
  background:
    radial-gradient(ellipse 50% 55% at 50% 50%, rgba(10, 41, 46, .5), transparent 75%),
    linear-gradient(135deg, rgba(10, 41, 46, .66) 0%, rgba(10, 41, 46, .38) 55%, rgba(58, 153, 170, .34) 100%);
}
.banner video, .banner .banner-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.banner-inner { position: relative; display: grid; justify-items: center; gap: 16px; max-width: 820px; }
.banner-logo { width: min(480px, 80vw); height: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35)); }
.banner h1 { color: var(--white); margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.banner p { color: rgba(255, 255, 255, .85); margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.banner .tagline { font: 600 clamp(.85rem, 1.4vw, 1.05rem)/1.3 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }

/* ------------------------------- NAV ------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.site-nav .container { width: min(100% - 2 * var(--gutter), var(--shell)); display: flex; align-items: center; justify-content: center; gap: 10px 24px; min-height: 64px; }
.nav-brand { display: none; margin-right: auto; }
.nav-brand img { height: 30px; width: auto; }
/* Phones: name of the current page between the logo and the menu button */
.nav-current { display: none; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; color: var(--text-muted); font-size: .92rem; font-weight: 500; text-decoration: none;
  padding: 9px 14px; border-radius: var(--radius-sm); transition: background .15s, color .15s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--teal-deep); background: rgba(58, 153, 170, .1); }
.nav-links a[aria-current="page"] { font-weight: 600; }
.site-nav .btn { padding: 10px 18px; font-size: .9rem; }
.nav-toggle {
  display: none; position: relative; width: 44px; height: 40px; padding: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
/* Three-line "hamburger" icon; turns into an X while the menu is open */
.nav-toggle-bar {
  position: absolute; left: 12px; width: 18px; height: 2px; border-radius: 2px; background: var(--teal-deep);
  transition: transform .2s var(--ease), opacity .2s;
}
.nav-toggle-bar:nth-child(1) { top: 13px; }
.nav-toggle-bar:nth-child(2) { top: 19px; }
.nav-toggle-bar:nth-child(3) { top: 25px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 960px) {
  .site-nav .container { justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-block: 10px; min-height: 0; }
  .nav-brand { display: block; margin-right: 0; }
  .nav-current { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 1.05rem/1.2 var(--font-heading); color: var(--heading); }
  .nav-toggle { display: inline-block; flex: none; }
  .nav-links { display: none; order: 3; width: 100%; flex-direction: column; gap: 2px; padding: 6px 0; }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 12px 14px; }
  .site-nav .btn { padding: 8px 14px; font-size: .82rem; }
}

/* --------------------------- PANELS -------------------------------- */
/* Every section is a bordered white panel on the tinted page (A&D's
   "page shell"), so the eye moves block to block. */
main { display: grid; gap: var(--panel-gap); padding-block: var(--panel-gap) calc(var(--panel-gap) * 2); }
.section {
  position: relative; overflow: hidden;
  width: min(100% - 2 * var(--panel-gap), var(--shell));
  margin-inline: auto;
  padding-block: var(--panel-pad);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Faint paper grain over each panel's open space (above backgrounds,
   doesn't block clicks) */
.section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: var(--texture-grain);
}
.section--tint { background: linear-gradient(180deg, var(--aqua-white) 0%, var(--panel) 100%); }
/* Wrapper for a call-to-action band: no panel of its own */
.section--tight { padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.section--tight > .container { width: 100%; }
.section--tight .cta-band { width: 100%; }

/* Photo + text strips: accent edge like A&D's showcase strips */
.section:has(> .split .split-media) { padding-block: clamp(20px, 2.5vw, 28px); transition: box-shadow .25s ease, transform .25s ease; }
.section:has(> .split .split-media):hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.section:has(> .split .split-media)::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: linear-gradient(180deg, var(--teal), var(--teal-deep));
}
.section:has(> .split.split--reverse .split-media)::before { inset: 0 0 0 auto; background: linear-gradient(180deg, var(--teal-deep), var(--teal)); }
.section:has(> .split .split-media) > .container { width: min(100% - 2 * clamp(20px, 2.5vw, 28px), var(--shell)); }

/* Vision: same deep-teal look as the top banner, with Joe's infinity
   mark as a faint white watermark. */
.section:has(> .stack) {
  border: 0; color: var(--white);
  background: var(--banner-glow), var(--teal-deep);
  box-shadow: var(--shadow-lg);
}
.section:has(> .stack)::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(820px, 130%); aspect-ratio: 1;
  translate: -50% -50%; pointer-events: none; opacity: .07;
  background: url("img/adams-icon-white.png") center / contain no-repeat;
}
.section:has(> .stack) > .container { position: relative; }

/* ---------------------------- PHOTOS ------------------------------- */
.photo { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--panel-soft); aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
/* Placeholder until Joe's photos arrive */
.photo--empty {
  display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 20px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(58, 153, 170, .22), transparent 55%),
    radial-gradient(90% 90% at 100% 100%, rgba(200, 237, 243, .9), transparent 60%),
    var(--aqua-white);
  color: var(--teal-deep); font: 500 .78rem/1.3 var(--font-body); letter-spacing: .04em;
}
.photo--empty::before {
  content: ""; width: 34px; height: 34px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A292E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m21 15-4.5-4.5L7 19'/%3E%3C/svg%3E") center / contain no-repeat;
}
.photo--wide { aspect-ratio: 16 / 9; }
.photo--square { aspect-ratio: 1; }
.split-media .photo { box-shadow: var(--shadow); min-height: 280px; max-height: 400px; aspect-ratio: auto; height: 100%; }
/* Portrait (Joe's headshot on About): keep its 4:5 shape */
.split-media .photo--portrait { aspect-ratio: 4 / 5; height: auto; max-height: none; max-width: 440px; margin-inline: auto; }
.photo--portrait img { object-position: center 20%; }
/* Team cards (About): staff photos are often full-length, so keep faces in the square crop */
.photo--team img { object-position: center 12%; }

/* --------------------------- LAYOUTS ------------------------------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: center; }
.split--reverse { grid-template-columns: 1fr 1.1fr; }
.split--reverse .split-media { order: 2; }
.split--top { align-items: start; }
/* Text beside a photo, styled like A&D's showcase copy */
.split:has(.split-media) > div:not(.split-media) { padding: 8px 12px; }
.split:has(.split-media) h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--teal-deep); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .split, .split--reverse, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
}

/* Vision + values (on the deep-teal Vision panel) */
.stack { display: grid; justify-items: center; gap: 40px; text-align: center; max-width: var(--narrow); }
.stack > * { width: 100%; }
.stack h2 { font-size: clamp(2rem, 3.6vw, 2.6rem); color: var(--white); }
.stack .eyebrow { color: var(--aqua); }
.stack .eyebrow::before { background: var(--teal); }
.stack p { color: var(--on-dark); }
.stack .lead {
  margin-inline: auto; max-width: 34ch;
  font: 500 clamp(1.3rem, 2.4vw, 1.75rem)/1.5 var(--font-heading); color: var(--white);
}
.stack .tbd { background: rgba(200, 237, 243, .16); }
.stack > div:first-child::after { content: ""; display: block; width: 56px; height: 3px; margin: 28px auto 0; border-radius: 3px; background: var(--teal); }
/* Core values: no boxes, no ranking. Four equal columns on the dark panel,
   split by thin aqua lines, a line icon over each value. */
.values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.values li {
  padding: 6px 18px 4px;
  color: var(--white); font: 600 1.05rem/1.35 var(--font-body);
}
.values li + li { border-left: 1px solid rgba(200, 237, 243, .35); }
.values li svg {
  display: block; width: 40px; height: 40px; margin: 0 auto 12px;
  fill: none; stroke: var(--aqua); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.values li .tbd { background: rgba(200, 237, 243, .14); }
@media (max-width: 720px) {
  .values { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .values li:nth-child(3) { border-left: 0; }
  .values li svg { width: 34px; height: 34px; }
}

/* Service tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 24px; padding: 0; list-style: none; }
.tags li { background: var(--aqua-white); color: var(--teal-deep); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 12px; font-size: .85rem; font-weight: 500; }
.tags--small { margin: 8px 0 0; }
.tags--small + h3 { margin-top: 28px; }
.tags--small li { font-size: .72rem; padding: 3px 9px; font-weight: 600; letter-spacing: .02em; }

/* Referral page: two ways in (new referral / online intake); the intake card is the dark, featured one */
.path-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 22px; }
.path-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 32px 30px 30px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel) 0%, var(--aqua-white) 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.path-card h3 { color: var(--teal-deep); font-size: 1.6rem; margin-bottom: 4px; }
.path-card p { flex: 1; margin-bottom: 18px; }
.path-card .btn { align-self: flex-start; }
.path-card .eyebrow { margin-bottom: 2px; }
.path-step {
  position: absolute; top: 22px; right: 24px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--aqua-white); color: var(--teal-deep); border: 1.5px solid var(--teal);
}
.path-card--feature { background: var(--teal-deep); border-color: var(--teal-deep); box-shadow: var(--shadow-lg); }
.path-card--feature h3, .path-card--feature p { color: var(--white); }
.path-card--feature .eyebrow { color: var(--aqua); }
.path-card--feature .path-step { background: var(--teal); color: var(--white); border-color: var(--aqua); }
@media (max-width: 720px) { .path-grid { grid-template-columns: 1fr; } .path-card { padding: 26px 22px 24px; } }

/* ----------------------------- CARDS ------------------------------- */
/* A&D link cards: serif title, top bar slides in on hover */
.card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--panel) 0%, var(--aqua-white) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: linear-gradient(90deg, var(--teal), var(--teal-deep));
  transform: scaleX(0); transform-origin: left center; transition: transform .35s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: 6px; color: var(--teal-deep); font-size: 1.35rem; }
.card p { color: var(--text); font-size: .97rem; }
.card p:last-child { margin-bottom: 0; }
.card .eyebrow { margin-bottom: 8px; font-size: .7rem; color: var(--text-muted); }
.card .card-action { margin-top: auto; padding-top: 14px; }
.card--feature::before { transform: scaleX(1); }
.card--dark {
  background:
    radial-gradient(circle at 90% 10%, rgba(58, 153, 170, .5), transparent 55%),
    linear-gradient(135deg, var(--teal-deep), var(--teal-deep));
  border-color: transparent; color: var(--on-dark); box-shadow: var(--shadow);
}
.card--dark::before { background: linear-gradient(90deg, var(--aqua), var(--teal)); }
.card--dark h3 { color: var(--white); }
.card--dark p { color: var(--on-dark-muted); }
.card--dark .eyebrow { color: var(--accent-on-dark); }
.card--dark a { color: var(--white); }
.card--dark .link-arrow { color: var(--accent-on-dark); }
.card--dark .btn--light, .card--dark .btn--light:hover { color: var(--teal-deep); }
.card--media { padding: 0; }
.card--media .photo { border-radius: 0; }
.card--media:hover .photo img { transform: scale(1.04); }
.card--media .card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card--media .card-body h3 { margin: 0; font-size: 1.15rem; }
/* Team cards (About): job title above the photo in the same type as the name; credentials under the name in small grey */
.card .team-role { margin: 0; padding: 16px 20px 14px; font: var(--weight-heading) 1.15rem/1.25 var(--font-heading); color: var(--heading); }
.card .team-creds { margin: 2px 0 0; font: 700 .85rem/1.3 var(--font-body); letter-spacing: .04em; color: var(--text); }
/* Team cards always show the hover look: teal top bar, teal border, deeper shadow (Rodney 2026-10-13) */
.card--team { box-shadow: var(--shadow-lg); border-color: var(--teal); }
.card--team::before { transform: scaleX(1); }

/* Core ABA services (Home): Joe's social-graphic format. Deep teal panel,
   glassy teal tiles with white line icons. */
.section--aba {
  border: 0; color: var(--white); box-shadow: var(--shadow-lg);
  background: var(--banner-glow), var(--teal-deep);
}
.section--aba .section-head h2 { color: var(--white); }
.section--aba .eyebrow { color: var(--aqua); }
.section--aba .lead { color: var(--on-dark-muted); margin-inline: auto; }
.aba-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.aba-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  aspect-ratio: 1; padding: 18px 12px; border-radius: 18px; text-align: center; text-decoration: none;
  background: linear-gradient(150deg, rgba(58, 153, 170, .55), rgba(58, 153, 170, .28));
  border: 1px solid rgba(200, 237, 243, .18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  color: var(--white); font: 500 1.02rem/1.3 var(--font-body);
  transition: transform .25s var(--ease), background .25s, box-shadow .25s;
}
.aba-tile svg { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aba-tile:hover { color: var(--white); transform: translateY(-4px); background: linear-gradient(150deg, rgba(58, 153, 170, .8), rgba(58, 153, 170, .45)); box-shadow: 0 16px 32px rgba(0, 0, 0, .3); }
/* Home "Our Core Services": 9 tiles (5 ABA + 4 BSS), 3 per row, last row centered */
.aba-grid--wrap { display: flex; flex-wrap: wrap; justify-content: center; max-width: 760px; }
.aba-grid--wrap > li { width: calc((100% - 40px) / 3); }
/* Program tag on each tile: deep teal pill with aqua text (same for ABA and BSS) */
.aba-tile .tile-tag { font: 700 .9rem/1 var(--font-body); letter-spacing: .14em; padding: 7px 16px; border-radius: 999px; margin-top: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.aba-tile .tile-tag--aba { background: var(--teal-deep); color: var(--aqua); border: 1.5px solid var(--aqua); }
.aba-tile .tile-tag--bss { background: var(--teal-deep); color: var(--aqua); border: 1.5px solid var(--aqua); }
.aba-more { text-align: center; margin-top: 32px; }
@media (max-width: 760px) {
  .aba-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .aba-grid--wrap > li { width: calc((100% - 14px) / 2); }
  .aba-tile { font-size: .92rem; }
  .aba-tile svg { width: 42px; height: 42px; }
  .aba-tile .tile-tag { font-size: .78rem; padding: 6px 12px; }
}

/* Checklist with teal check circles (Joe's "Who we are" / "15+ years"
   social graphics). White text on dark panels, deep teal on light ones. */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; text-align: left; }
.checklist li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.check { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--teal); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.check svg { width: 24px; height: 24px; fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.checklist b { display: block; font: 600 1.15rem/1.3 var(--font-heading); color: var(--teal-deep); }
.checklist li span:not(.check) { display: block; margin-top: 2px; color: var(--text-muted); }
.section--aba .checklist b, .stack .checklist b { color: var(--white); }
.section--aba .checklist li span:not(.check), .stack .checklist li span:not(.check) { color: var(--on-dark-muted); }
.checklist-title { color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 26px; }
.stack .checklist { max-width: 560px; margin-inline: auto; }

/* "15+ years" panel */
.years { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; max-width: 980px; }
.years-stat { text-align: center; }
.years-stat b { display: block; font: 600 clamp(6rem, 13vw, 9.5rem)/.9 var(--font-heading); letter-spacing: -.04em; color: var(--white); text-shadow: 0 6px 24px rgba(0, 0, 0, .3); }
.years-stat b i { font: 800 .7em/1 var(--font-body); font-style: normal; vertical-align: .32em; margin-left: .04em; }
.years-stat span { display: block; margin-top: 14px; font: 700 .85rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--aqua); }
.years h2 { color: var(--white); margin-bottom: 26px; }
.years .eyebrow { color: var(--aqua); }
@media (max-width: 760px) { .years { grid-template-columns: 1fr; text-align: center; } .years .eyebrow { justify-content: center; } }

/* Photo with a caption (Community top) */
.photo--figure { margin: 0; position: relative; }
.photo--figure { min-height: 360px; }
.photo--figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: 60% 30%; }
.photo--figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(10, 41, 46, .85)); color: var(--white); font-size: .85rem; font-weight: 500;
}
a.card { color: inherit; text-decoration: none; }

/* Spotlight (Community): photo gallery + details */
.spotlight { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 44px); align-items: start; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gallery-item { display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); }
.gallery-item--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }
.spotlight-info .details { margin-bottom: 22px; }
.photo-credit { margin: 14px 0 0; font-size: .8rem; color: var(--text-muted); }
@media (max-width: 860px) { .spotlight { grid-template-columns: 1fr; } }

/* Spotlight extras: theme line, stats row, session card, pull quotes */
.spot-theme { margin: 0; font: italic 500 clamp(1.2rem, 2.2vw, 1.5rem)/1.3 var(--font-heading); color: var(--aqua); }
.section--glow .spot-theme { color: var(--aqua); }
.spot-stats { list-style: none; margin: 0 auto 40px; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(4, 1fr); }
.spot-stats li { padding: 4px 20px; text-align: center; }
.spot-stats li + li { border-left: 1px solid rgba(200, 237, 243, .3); }
.spot-stats b { display: block; font: 600 clamp(2.2rem, 4vw, 3rem)/1 var(--font-heading); color: var(--white); letter-spacing: -.02em; }
.spot-stats span { display: block; margin-top: 8px; font-size: .85rem; line-height: 1.4; color: var(--on-dark-muted); }
@media (max-width: 720px) { .spot-stats { grid-template-columns: 1fr 1fr; row-gap: 22px; } .spot-stats li:nth-child(3) { border-left: 0; } }

.session-card {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(200, 237, 243, .22);
  border-left: 4px solid var(--teal); border-radius: var(--radius-md); padding: 22px 24px; margin-bottom: 22px;
}
.session-tag { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--teal); color: var(--teal-deep); font: 700 .66rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.session-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.session-card p { font-size: .95rem; }
.section--glow .session-topics li { background: rgba(200, 237, 243, .12); border-color: rgba(200, 237, 243, .25); color: var(--aqua); }
.session-with { margin: 14px 0 0; font-size: .88rem; }
.section--glow .session-with { color: var(--on-dark-muted); }
.session-with b { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 4px; }

.spot-quotes { margin-bottom: 24px; }
.spot-quotes blockquote { margin: 0 0 12px; padding: 4px 0 4px 18px; border-left: 3px solid var(--teal); }
.spot-quotes blockquote p { margin: 0; font: 500 1.25rem/1.35 var(--font-heading); }
.section--glow .spot-quotes blockquote p { color: var(--white); }
.spot-quotes cite { display: block; margin-top: 4px; font: 700 .72rem/1 var(--font-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); }

/* Shared section polish (Community): tagline on light panels, small
   labels, card tags, episode list in a card */
.spot-theme { color: var(--teal-deep); }
.split .spot-theme { margin: -6px 0 16px; }
.mini-label { display: block; margin: 18px 0 8px; font: 700 .7rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.mini-label--center { text-align: center; margin: 36px 0 14px; }
/* About: Joe's credentials + county lists (2026-10-12) */
.cred-box { max-width: 440px; margin: 28px auto 0; }
.cred-box h3 { margin-top: 0; }
.cred-list { margin: 0 0 8px; padding-left: 1.15em; display: grid; gap: 6px; }
.cred-list li::marker { color: var(--teal); }
.county-title { font-size: 1.02rem; margin: 20px 0 4px; }
.county-list { font-size: .95rem; margin: 0 0 6px; }
/* About: service area map, whole state (inline SVG). Colors follow Rodney's
   "service area.png" (Map 1), approved 2026-10-12 as the map's own palette. */
.service-map {
  --map-bg: #111F30; --map-land: #1F3047; --map-line: #34475F;
  --map-bss: #48C9B0; --map-aba: #F68C6F; --map-both: #F2C66D; --map-text: #E8EEF4; --map-muted: #A9B6C4;
  margin: 0; position: relative; background: var(--map-bg); border-radius: var(--radius-md); padding: 10px; box-shadow: var(--shadow);
}
.sa-map { display: block; width: 100%; height: auto; }
.split--map { grid-template-columns: 1.7fr 1fr; align-items: start; gap: clamp(24px, 3vw, 36px); }
@media (max-width: 720px) { .split--map { grid-template-columns: 1fr; } }
.sa-map path { stroke: var(--map-bg); stroke-width: .7; stroke-linejoin: round; }
.sa-none { fill: var(--map-land); stroke: var(--map-line) !important; stroke-width: .5 !important; }
.sa-bss { fill: var(--map-bss); }
.sa-aba { fill: var(--map-aba); }
.sa-both { fill: var(--map-both); }
.sa-county { cursor: pointer; transition: opacity .15s; }
.sa-county:hover, .sa-county:focus, .sa-county.is-active { opacity: .75; outline: none; stroke: var(--white); stroke-width: 1.6; }
.sa-labels { pointer-events: none; }
.sa-labels text { font: 700 9px var(--font-body); fill: #10202C; text-anchor: middle; }
.sa-office { pointer-events: none; }
.sa-office path { fill: var(--white); stroke: var(--map-bg); stroke-width: 1.8; stroke-linejoin: round; }
/* Key sits over the bottom of the state (all unserved counties there); below the map on phones */
.service-map figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 14px; border-radius: 10px; background: rgba(17, 31, 48, .88); }
@media (max-width: 720px) { .service-map figcaption { position: static; padding: 4px 4px 2px; background: none; } }
.sa-legend { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .82rem; color: var(--map-text); }
.sa-legend li { display: flex; align-items: center; gap: 7px; }
.sa-key { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.sa-key.sa-bss { background: var(--map-bss); }
.sa-key.sa-aba { background: var(--map-aba); }
.sa-key.sa-both { background: var(--map-both); }
.sa-star-key { width: 16px; height: 16px; flex: none; fill: var(--white); }
.sa-readout { margin: 0; font-size: .85rem; color: var(--map-muted); min-height: 1.4em; }
.sa-readout b { color: var(--white); }

/* Sub-heading for a group of cards inside a section (Services: ABA / BSS) */
.group-head { text-align: center; margin: 48px auto 22px; max-width: 760px; }
.group-head h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 6px 0 4px; }
.group-head .spot-theme { margin-bottom: 8px; }
.group-note { font-size: .92rem; margin: 0; }
.group-note .link-arrow { margin-left: 6px; }
.section--glow .group-note { color: var(--on-dark-muted); }
.before-visit { max-width: 860px; margin-inline: auto; }
.before-visit .card { padding: 22px 24px; }
.logo-row { margin-top: 0; }
.card-tag { align-self: flex-start; margin-bottom: 6px; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--aqua); color: var(--teal-deep); font: 700 .64rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.episodes-card { margin: 0; }
.section--aba .spot-theme, .stack .spot-theme, .years .spot-theme { color: var(--aqua); }
.years .spot-theme { margin: -14px 0 22px; }
.cta-band .eyebrow { color: var(--aqua); justify-content: center; }
.section--events .spot-theme, .section--events .eyebrow { color: var(--aqua); }
.prose .section-head h2 { margin-top: 0; font-size: var(--h2); color: var(--heading); }
.episodes-card .episodes { margin-top: 6px; }

/* Info pop-up (privacy notice, program comparison) opened from inside a form */
.peek-modal { width: min(92vw, 900px); max-height: 86vh; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-lg); overflow: hidden; }
.peek-modal::backdrop { background: rgba(10, 41, 46, .6); }
.peek-modal[open] { display: flex; flex-direction: column; }
.peek-body { overflow-y: auto; max-height: 86vh; }
.peek-body > .section { margin: 0; padding: 48px 28px 32px; border-radius: 0; }
.peek-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--teal-deep); background: var(--white); color: var(--teal-deep);
  font: 400 1.7rem/1 var(--font-body); cursor: pointer;
}
.peek-close:hover, .peek-close:focus-visible { background: var(--aqua); }
@media (max-width: 720px) { .peek-modal { width: 100vw; max-width: 100vw; max-height: 92vh; margin-bottom: 0; } .peek-body > .section { padding: 56px 16px 24px; } }

/* Lightbox (full-size photo) */
.lightbox-modal { display: none; }
.lightbox-modal[open] { display: grid; place-items: center; }
.lb-img { max-width: min(100vw - 70px, 1400px);  /* fits inside the dialog (max-width 100% - 38px, 16px padding) */ max-height: 82vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.lb-nav {
  position: fixed; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .9); color: var(--teal-deep); font: 400 2rem/1 var(--font-body); cursor: pointer;
}
.lb-prev { left: 16px; } .lb-next { right: 16px; }
.lb-nav:hover { background: var(--aqua); }
.lb-count { position: fixed; bottom: 16px; left: 50%; translate: -50% 0; color: var(--white); font-size: .85rem; letter-spacing: .08em; }
.lightbox-modal .video-close { position: fixed; top: 16px; right: 16px; }

/* Note under the podcast player (e.g. recorded at the BMBA Summit) */
.player-info .player-note { display: block; margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--teal); font-size: .88rem; color: var(--teal-deep); }

/* "More about this service" (Services page cards) */
.more { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.more summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font: 700 .78rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font-size: 1.1rem; line-height: 1; color: var(--teal); }
.more[open] summary::after { content: "\2212"; }
.more p { font-size: .92rem; margin: 12px 0 0; }
.more h4 { margin: 16px 0 6px; font: 700 .72rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.more ul { margin: 0; padding-left: 1.1em; font-size: .9rem; display: grid; gap: 4px; }
.more li::marker { color: var(--teal); }
.card:has(.more[open]) { transform: none; }

/* Team members (About page): equal-size cards built for headshots.
   Portrait photo (4:5) beside name/role/credentials, full bio below.
   For a photo that isn't a headshot, add a frame-* class to the <img> that sets
   --focus (the point to keep in view) and --zoom; see .frame-rashida. */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.member {
  display: grid; grid-template-columns: 170px 1fr; grid-template-areas: "photo head" "bio bio";
  column-gap: 24px; align-items: end; align-content: start; padding: 26px 28px 28px;
  border-color: var(--teal); box-shadow: var(--shadow-lg);
}
.member-photo { grid-area: photo; position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--panel-soft); }
.member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 20%); transform: scale(var(--zoom, 1)); transform-origin: var(--focus, 50% 20%); }
.member-photo.photo--empty { font-size: .72rem; }
.member-photo img.frame-rashida { --focus: 50% 5%; --zoom: 2.6; } /* full-length seated photo → head and shoulders */
.member-head { grid-area: head; padding-bottom: 4px; }
.member-role { margin: 0 0 6px; font: 700 .72rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.member-head h3 { margin: 0; font-size: 1.5rem; }
.member-creds { margin: 4px 0 0; font: 700 .85rem/1.3 var(--font-body); letter-spacing: .04em; color: var(--text); }
.member-bio { grid-area: bio; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.65; }
@media (max-width: 1060px) { .team-grid { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; } }
@media (max-width: 560px) {
  .member { grid-template-columns: 112px 1fr; column-gap: 16px; padding: 20px; }
  .member-head h3 { font-size: 1.25rem; }
}

/* Our team in the community (Events page) */
.story .card-body { gap: 6px; }
.story-who { margin: 0; font: 500 .8rem/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.story-who b { font-weight: 700; color: var(--teal-deep); }
.story-meta { margin: 0; font-size: .85rem; color: var(--text-muted); }
.story-text { margin: 4px 0 0; font-size: .93rem; }

/* Founder quote (About page, Mission & vision panel) */
.quote {
  margin: 20px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--teal);
  font: 500 1.15rem/1.5 var(--font-heading); color: var(--teal-deep);
}
.quote span { display: block; margin-top: 6px; font: 700 .75rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
/* On the dark Mission & vision panel (centered): no side rule, light text */
.section:has(> .stack) .quote { padding-left: 0; border-left: 0; color: var(--white); }
.section:has(> .stack) .quote span, .section--glow .quote span { color: var(--aqua); }

/* Dark "glow" panel, same look as Our Vision (deep teal glow + faint
   infinity watermark). Add class "section--glow" to any section. */
.section.section--glow {
  border: 0; color: var(--on-dark); box-shadow: var(--shadow-lg);
  background: var(--banner-glow), var(--teal-deep);
}
.section.section--glow::before {
  content: ""; position: absolute; inset: auto; left: 50%; top: 50%; width: min(820px, 130%); height: auto; aspect-ratio: 1;
  translate: -50% -50%; pointer-events: none; opacity: .07;
  background: url("img/adams-icon-white.png") center / contain no-repeat;
}
.section--glow > .container { position: relative; }
.section--glow h2, .section--glow h3, .section--glow .split:has(.split-media) h2 { color: var(--white); }
.section--glow .eyebrow { color: var(--aqua); }
.section--glow p { color: var(--on-dark); }
.section--glow .social-links a { background: rgba(255, 255, 255, .08); border-color: rgba(200, 237, 243, .3); color: var(--white); }
.section--glow .social-links a:hover { background: var(--white); color: var(--teal-deep); border-color: var(--white); }
.section--glow .split-media .photo { box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }

/* Podcast section on a glow panel */
.section--glow .player-info b, .section--glow .episode b { color: var(--white); }
.section--glow .player-info .player-date, .section--glow .episode small { color: var(--on-dark-muted); }
.section--glow .player-info .player-note { color: var(--aqua); border-left-color: var(--teal); }
.section--glow .episode { color: var(--on-dark); }
.section--glow .episode:hover { background: rgba(255, 255, 255, .08); }
.section--glow .link-arrow { color: var(--aqua); }
.section--glow .link-arrow:hover { color: var(--white); }
.section--glow .video-frame { box-shadow: 0 12px 34px rgba(0, 0, 0, .35); }
/* White cards on a glow panel keep their normal dark text */
.section--glow .card:not(.card--dark) h3 { color: var(--teal-deep); }
.section--glow .card:not(.card--dark) p { color: var(--text); }
.section--glow .card { box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.section--glow .card:not(.card--dark) { color: var(--text); }
.section--glow .card:not(.card--dark) .eyebrow { color: var(--text-muted); }
.section--glow .card:not(.card--dark) .link-arrow { color: var(--teal-deep); }
.section--glow .card--dark { border: 1px solid rgba(200, 237, 243, .3); }
/* Spotlight details + buttons on a glow panel */
.section--glow .details li { border-bottom-color: rgba(200, 237, 243, .2); color: var(--on-dark); }
.section--glow .details b { color: var(--aqua); }
.section--glow .lead { color: var(--on-dark); }
.section--glow .btn--outline { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); }
.section--glow .btn--outline:hover { background: var(--white); color: var(--teal-deep); border-color: var(--white); }
.section--glow .photo-credit { color: var(--on-dark-muted); }
.section--glow .gallery-item { box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }

/* Upcoming Events panel (Events page): same look as the Our Vision panel
   on Home. Deep teal glow, faint infinity watermark, white event cards. */
.section--events {
  border: 0; color: var(--white); box-shadow: var(--shadow-lg);
  background: var(--banner-glow), var(--teal-deep);
}
.section--events::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(820px, 130%); aspect-ratio: 1;
  translate: -50% -50%; pointer-events: none; opacity: .07;
  background: url("img/adams-icon-white.png") center / contain no-repeat;
}
.section--events > .container { position: relative; }
.section--events .section-head h2 { color: var(--white); }
.section--events .event-empty { color: var(--on-dark-muted); }
.section--events .filter-row { background: rgba(255, 255, 255, .08); border-color: rgba(200, 237, 243, .25); }
.section--events .filter-row button { color: var(--on-dark-muted); }
.section--events .filter-row button:hover { color: var(--white); }
.section--events .filter-row button[aria-pressed="true"] { background: var(--white); color: var(--teal-deep); }
.section--events .next-event { border-color: var(--teal); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.section--events .event-row { border-color: transparent; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }

/* ----------------------------- EVENTS ------------------------------ */
[data-events], .event-list { max-width: var(--narrow); margin-inline: auto; }
.next-event {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 190px 1fr auto; gap: 24px; align-items: center;
  padding: 14px 24px 14px 14px; margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow);
}
.next-event .photo { border-radius: var(--radius-sm); aspect-ratio: 4 / 3; }
.next-event h3 { font-size: 1.35rem; margin: 8px 0 4px; color: var(--teal-deep); }
.next-event p { margin: 0; color: var(--text-muted); font-size: .95rem; }
.countdown { display: grid; place-items: center; min-width: 104px; padding: 14px 12px; border-radius: var(--radius-md); background: var(--aqua-white); border: 1px solid var(--line); }
.countdown b { font: 600 2.6rem/1 var(--font-heading); color: var(--teal-deep); font-variant-numeric: tabular-nums; }
.countdown span { margin-top: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

.event-list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; }
.event-row {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 20px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 18px 12px 12px;
  transition: border-color .2s, box-shadow .25s ease;
}
.event-row:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.event-row h3 { font-size: 1.1rem; margin: 4px 0 0; }
.event-row p { margin: 0; color: var(--text-muted); font-size: .9rem; }
.date-box { border-radius: var(--radius-sm); text-align: center; padding: 8px 0 9px; background: var(--teal-deep); color: var(--white); font-variant-numeric: tabular-nums; }
.date-box small { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .16em; color: var(--accent-on-dark); }
.date-box b { display: block; margin-top: 2px; font: 600 1.5rem/1 var(--font-heading); }
.event-empty { color: var(--text-muted); text-align: center; }
.filter-row { display: flex; width: fit-content; margin: 0 auto 24px; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--panel-soft); border: 1px solid var(--line); }
.filter-row button { border: 0; background: transparent; color: var(--text-muted); border-radius: var(--radius-sm); padding: 8px 16px; font: 500 .875rem var(--font-body); cursor: pointer; }
.filter-row button:hover { color: var(--teal-deep); }
.filter-row button[aria-pressed="true"] { background: var(--panel); color: var(--teal-deep); font-weight: 600; box-shadow: var(--shadow-sm); }
@media (max-width: 720px) {
  .next-event { grid-template-columns: 1fr auto; padding: 18px; gap: 14px; }
  .next-event .photo { display: none; }
  .countdown { min-width: 0; padding: 10px; }
  .countdown b { font-size: 1.9rem; }
  .event-row { grid-template-columns: 54px 1fr; }
  .event-row .btn { grid-column: 2; justify-self: start; }
}

/* ------------------------- ACTIVITY FEED --------------------------- */
.feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feed--wide { grid-template-columns: repeat(4, 1fr); }
.feed-item { text-decoration: none; color: inherit; }
.feed-item:hover { color: inherit; }
.feed-source { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.feed-date { font-size: .82rem; color: var(--text-muted); margin: auto 0 0; padding-top: 6px; }
.play-badge::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230A292E' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") 55% 50% / 24px no-repeat;
  box-shadow: 0 6px 20px rgba(10, 41, 46, .25);
}
.photo--empty.play-badge::before { display: none; }
.photo--empty.play-badge { color: transparent; }
@media (max-width: 960px) { .feed, .feed--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feed, .feed--wide { grid-template-columns: 1fr; } }

/* Real YouTube thumbnails: 16:9 tiles. Episode thumbnails (hqdefault)
   have black bars top and bottom; a 16:9 crop removes them exactly.
   Clips are vertical, so show their upper middle. */
.feed .photo:not(.photo--empty) { aspect-ratio: 16 / 9; }
.feed-item--short .photo img { object-position: center 30%; }
.feed-item h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* Podcast player poster (click to play) */
.player-poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--teal-deep); }
.player-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.player-poster:hover img { transform: scale(1.03); }
.player-poster.play-badge::after { width: 72px; height: 72px; background-size: 30px; z-index: 2; }
.player-info { margin-top: 14px; }
.player-info .player-tag { display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--teal); color: var(--teal-deep); font: 700 .66rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.player-info b { display: block; font: 600 1.2rem/1.3 var(--font-heading); color: var(--teal-deep); }
.player-info .player-date { display: block; margin-top: 4px; font-size: .9rem; color: var(--text-muted); }

/* Recent episode list beside the podcast player */
.episodes { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 10px; }
.episode { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; text-decoration: none; color: var(--text); padding: 6px; border-radius: var(--radius-md); transition: background .2s; }
.episode:hover { background: var(--panel-soft); color: var(--teal-deep); }
.episode img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.episode b { display: block; font: 600 .95rem/1.35 var(--font-body); color: var(--teal-deep); }
.episode small { color: var(--text-muted); font-size: .8rem; }

/* Podcast */
.video-frame { aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--teal-deep); box-shadow: var(--shadow); }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
.social-links a { display: inline-block; padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); color: var(--teal-deep); font-weight: 500; font-size: .875rem; text-decoration: none; }
.social-links a:hover { border-color: var(--teal); color: var(--teal-deep); }
.logo-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 28px; }
.logo-row .photo { aspect-ratio: 3 / 2; border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: .7rem; }
.logo-row .photo::before { width: 22px; height: 22px; }
/* A real partner logo in the row */
.partner-logo {
  display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--white);
  transition: box-shadow .25s, transform .25s var(--ease);
}
.logo-row > * { min-width: 0; }
.partner-logo img { width: 100%; height: 100%; object-fit: contain; }
.partner-logo:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* Logos designed on black keep their black tile (e.g. BMBA Summit) */
.partner-logo--dark { background: #000; border-color: #000; padding: 4px; }
@media (max-width: 720px) { .logo-row { grid-template-columns: repeat(3, 1fr); } }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.steps li { counter-increment: step; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px 22px; font: 600 1.15rem/1.3 var(--font-heading); color: var(--teal-deep); box-shadow: var(--shadow-sm); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: var(--radius-sm); background: var(--teal-deep); color: var(--white); font: 700 1rem var(--font-body); }
.steps li span { display: block; margin-top: 8px; font: 400 .92rem/1.55 var(--font-body); color: var(--text); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ------------------------- CALL TO ACTION -------------------------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(100% - 2 * var(--panel-gap), var(--shell)); margin-inline: auto;
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 56px) var(--gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center;
  background:
    radial-gradient(circle at 12% 20%, rgba(58, 153, 170, .55), transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(200, 237, 243, .2), transparent 50%),
    linear-gradient(135deg, var(--teal-deep), var(--teal-deep));
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 80% 30%, transparent 0 28px, rgba(255, 255, 255, .06) 28px 29px);
}
.cta-band h2 { margin: 0 0 6px; color: var(--white); }
.cta-band p { margin: 0; color: var(--on-dark-muted); font-size: 1.05rem; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn { background: var(--white); border-color: var(--white); color: var(--teal-deep); }
.cta-band .btn:hover { background: var(--aqua); border-color: var(--aqua); }
.cta-band .btn--outline { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .4); }
.cta-band .btn--outline:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); color: var(--white); }

/* ------------------------------ FORMS ------------------------------ */
#forms, #forms + .privacy-note, .section > .container > .form { max-width: var(--narrow); margin-inline: auto; }
.section > .container > .lead { margin: 0 auto 36px; text-align: center; }
.form { display: grid; gap: 18px; }
.form fieldset { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px 24px 26px; background: var(--panel); }
.form legend { float: left; width: 100%; margin-bottom: 18px; padding: 0; font: 600 1.2rem/1.3 var(--font-heading); color: var(--teal-deep); }
.form legend ~ * { clear: both; }  /* ~ not +: the first item after a legend may be hidden (e.g. a guardian-only note) */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: grid; gap: 6px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 600; font-size: .875rem; color: var(--heading); }
.field .hint, fieldset > .hint { font-size: .82rem; color: var(--text-muted); margin: 0; }
fieldset > .hint { margin-top: 12px; }
.req { color: var(--error); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: 400 .95rem var(--font-body); color: var(--text); background: var(--aqua-white);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); background: var(--panel); box-shadow: 0 0 0 3px rgba(58, 153, 170, .18); }
input[type="file"] { max-width: 100%; font: 400 .85rem var(--font-body); color: var(--text-muted); }
textarea { min-height: 130px; resize: vertical; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 14px; font-size: .9rem; cursor: pointer; background: var(--panel); transition: border-color .2s, background .2s; }
.choice:hover { border-color: var(--teal); }
.choice:has(input:checked) { border-color: var(--teal-deep); background: rgba(58, 153, 170, .1); color: var(--teal-deep); font-weight: 600; }
.choice input { accent-color: var(--teal-deep); margin: 0; }
.dropzone { display: grid; place-items: center; gap: 6px; text-align: center; cursor: pointer; border: 1.5px dashed var(--teal); border-radius: var(--radius-md); padding: 32px 20px; background: var(--aqua-white); }
.dropzone:hover { background: var(--aqua); }
.dropzone strong { font: 600 1.05rem var(--font-heading); color: var(--teal-deep); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.consent input { margin-top: 5px; accent-color: var(--teal-deep); }
.form-status { padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 600; }
.form-status--ok { background: var(--aqua-white); border: 1px solid var(--aqua); color: var(--teal-deep); }
.form-status--error { background: #FDF0EE; border: 1px solid #F6CFC9; color: var(--error); }
.privacy-note { display: flex; align-items: center; gap: 14px; background: var(--aqua-white); border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: var(--radius-md); padding: 20px 22px; font-size: .95rem; color: var(--teal-deep); }
.privacy-note::before {
  content: ""; flex: none; width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A292E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 20px no-repeat;
  border: 1px solid var(--line);
}
@media (max-width: 640px) { .fields { grid-template-columns: 1fr; } .form fieldset { padding: 20px 18px 22px; } }

/* Client intake (intake.html): step-by-step form with signature + review */
.intake, .intake-progress, .demo-note, .intake-done { max-width: var(--narrow); margin-inline: auto; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.demo-note { margin-bottom: 24px; padding: 14px 18px; border: 1.5px dashed var(--teal); border-radius: var(--radius-md); background: var(--aqua-white); color: var(--teal-deep); font-size: .92rem; scroll-margin-top: 90px; }
.intake-progress { list-style: none; padding: 0; margin-bottom: 24px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.intake-progress button { width: 100%; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; font: 600 .7rem/1.25 var(--font-body); color: var(--text-muted); text-align: center; cursor: pointer; }
.intake-progress button:disabled { cursor: default; opacity: .6; }
.steps-num { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel); font: 700 .82rem var(--font-body); color: var(--text-muted); transition: background .2s, border-color .2s, color .2s; }
.intake-progress .is-done .steps-num { background: var(--aqua); border-color: var(--teal); color: var(--teal-deep); }
.intake-progress .is-current button { color: var(--teal-deep); }
.intake-progress .is-current .steps-num { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--aqua-white); }
@media (max-width: 760px) {
  .intake-progress { gap: 4px; }
  .intake-progress button { font-size: 0; gap: 0; }                 /* numbers only on phones */
  .steps-num { width: 26px; height: 26px; font-size: .78rem; }
}
.intake-step { display: grid; gap: 18px; }
.legend-note { font: 400 .85rem var(--font-body); }
.step-intro { margin: 0; color: var(--text-muted); }
.checklist-plain { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.checklist-plain li::marker { color: var(--teal); }
[aria-invalid="true"] { border-color: var(--error) !important; }
.choices:has([aria-invalid="true"]) .choice, .consent:has([aria-invalid="true"]) { outline: 1px solid var(--error); outline-offset: 2px; border-radius: var(--radius-sm); }
/* BSS "own words" questions: room between the note and the first question */
.voice .voice-note { margin: 0 0 18px; padding: 12px 16px; border-left: 4px solid var(--teal); background: var(--aqua-white); border-radius: var(--radius-sm); color: var(--teal-deep); }
/* SOW 8(b): forms are not for emergencies (wording pending Joe's approval) */
.emergency-note { margin: 14px auto 0; font-size: .88rem; color: var(--teal-deep); }
#forms + .privacy-note + .emergency-note, .emergency-note--narrow { max-width: var(--narrow); margin-inline: auto; }
.emergency-note--narrow { margin-bottom: 24px; }
/* BSS: acknowledgment instead of consents (Consent to Treatment is sent after review) */
.ack-card { display: grid; gap: 12px; border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: var(--radius-md); padding: 22px 24px; background: var(--aqua-white); }
.ack-card h3 { margin: 0; font-size: 1.15rem; color: var(--teal-deep); }
.ack-card p { margin: 0; font-size: .95rem; }
.consent-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px 22px; background: var(--panel); }
.consent-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 1.15rem; color: var(--teal-deep); }
.consent-card h3 .card-tag { margin: 0; }
.consent-card > p { margin-bottom: 0; font-size: .93rem; color: var(--text-muted); }
.consent-card .more { margin-bottom: 14px; }
.consent-card .more > div > p:first-child { margin-top: 12px; }
.consent-lock { margin: 0 0 8px; font-size: .85rem; font-weight: 600; color: var(--teal-deep); }
.consent:has(input:disabled), .choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.sig-pad { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--aqua-white); }
.sig-pad canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
.sig-line { position: absolute; left: 18px; right: 90px; bottom: 30px; border-top: 1px solid var(--grey); padding-top: 4px; font-size: .72rem; color: var(--text-muted); pointer-events: none; }
.sig-clear { position: absolute; right: 10px; bottom: 10px; }
.sign-block .consent { margin-top: 18px; }
.step-nav { display: flex; align-items: center; gap: 12px; }
.step-count { margin-right: auto; font-size: .85rem; color: var(--text-muted); }
.step-nav #step_back + .step-count { margin-left: 4px; }
.review-block { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 22px; background: var(--panel); }
.review-block + .review-block { margin-top: 12px; }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.review-head h3 { margin: 0; font-size: 1.1rem; }
.review-list { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 6px 16px; margin: 0; font-size: .92rem; }
.review-list dt { color: var(--text-muted); }
.review-list dd { margin: 0; color: var(--text); overflow-wrap: anywhere; white-space: pre-line; }
.review-sig { max-width: 320px; margin-top: 12px; border-bottom: 1px solid var(--grey); }
@media (max-width: 520px) { .review-list { grid-template-columns: 1fr; gap: 0; } .review-list dd { margin-bottom: 8px; } }
.intake-done { text-align: center; padding: 8px 0 12px; }
.intake-done .eyebrow { justify-content: center; }
.intake-done:focus { outline: none; }
.intake-record { display: none; }

/* Printing the intake page prints only the signed record */
@media print {
  body.intake-page > *:not(main), .intake-page main .section > .container > *:not(.intake-record) { display: none !important; }
  body.intake-page::before, body.intake-page::after, .intake-page .section::after { display: none !important; }
  .intake-page, .intake-page main, .intake-page .section { background: #fff !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
  .intake-record { display: block; color: #000; font-size: 11pt; }
  .record-head { display: flex; justify-content: space-between; border-bottom: 2px solid var(--teal-deep); padding-bottom: 8px; margin-bottom: 12px; }
  .intake-record h3 { margin: 16px 0 6px; font-size: 13pt; break-after: avoid; }
  .intake-record .review-list { grid-template-columns: 38% 1fr; font-size: 10.5pt; }
  .intake-record .review-list dt, .intake-record .review-list dd { break-inside: avoid; }
  .record-foot { margin-top: 18px; font-size: 9pt; color: #555; }
}

/* Booking embed */
.booking-prompt { margin: 0 0 10px; font-weight: 600; color: var(--teal-deep); }
.booking-prompt b { color: var(--teal); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; margin-right: 4px; }
.booking-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
/* Each visit type is a selectable card with a radio dot, so it reads as a choice */
.booking-switch button { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 16px; border: 2px solid var(--teal); border-radius: var(--radius-md); background: var(--panel); color: var(--teal-deep); font: inherit; font-size: 1.05rem; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, background-color .15s; }
.booking-switch button::before { content: ""; grid-row: span 2; width: 20px; height: 20px; border: 2px solid var(--teal); border-radius: 50%; background: var(--white); box-sizing: border-box; }
.booking-switch button b, .booking-switch button span { grid-column: 2; }
.booking-switch button span { font-size: .85rem; color: var(--text-muted); }
.booking-switch button:hover { transform: translateY(-2px); background: var(--aqua-white); box-shadow: 0 6px 16px rgba(10, 41, 46, .12); }
.booking-switch button[aria-selected="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--white); transform: none; }
.booking-switch button[aria-selected="true"]::before { border-color: var(--aqua); background: radial-gradient(circle, var(--aqua) 0 4px, var(--teal-deep) 5px); }
.booking-switch button[aria-selected="true"] span { color: var(--aqua); }
.booking-frame { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; min-height: 640px; background: var(--panel); box-shadow: var(--shadow-sm); }
.booking-frame iframe { width: 100%; height: 960px; border: 0; }
.booking-frame .photo--empty { min-height: 640px; border-radius: 0; aspect-ratio: auto; }

/* Contact details */
.details { list-style: none; margin: 0; padding: 0; display: grid; }
.details li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.details li:first-child { padding-top: 0; }
.details b { display: block; margin-bottom: 2px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.map-frame { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ----------------------------- FOOTER ------------------------------ */
/* Light footer on the page color, like A&D */
.site-footer { color: var(--text-muted); font-size: .92rem; padding-bottom: 8px; }
.site-footer > .container { width: min(100% - 2 * var(--panel-gap), var(--shell)); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr; gap: 40px; padding: 40px 0 36px; border-top: 1px solid var(--line); }
.footer-logo { width: 170px; height: auto; margin-bottom: 18px; }
.site-footer p { margin-bottom: .6em; }
.site-footer h2 { color: var(--heading); font: 800 .82rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer h2::after { content: ""; display: block; width: 24px; height: 3px; border-radius: 3px; background: var(--teal); margin-top: 10px; }
.site-footer a { color: var(--teal-deep); text-decoration: none; }
.site-footer a:hover { color: var(--teal-deep); text-decoration: underline; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-sitemap { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.site-footer .footer-note { margin: 12px 0 0; font-size: .82rem; }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .82rem; }
.footer-bottom-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
/* Developer credit: small and quiet beside the privacy link. */
.site-footer .site-credit { font-size: .76rem; color: var(--text-muted); }
.site-footer .site-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer .site-credit a:hover { color: var(--teal-deep); }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ------------------------------ PROSE ------------------------------ */
.prose { max-width: 70ch; margin-inline: auto; }
.prose h2 { font-size: 1.5rem; margin-top: 1.8em; color: var(--teal-deep); }
.prose ul { padding-left: 1.2em; }

@media (max-width: 640px) { :root { --panel-gap: 12px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  html { scroll-behavior: auto; }
  .banner video { display: none; }
  .ticker-label::before { animation: none; }
  .ticker-item { transition: opacity .2s; transform: none !important; }
}

/* TEMPORARY review marker for photos whose service changed (2026-10-12).
   Search the HTML for "photo--review"; remove the class + data-review once Rodney approves the photo. */
.photo--review { outline: 3px dashed var(--live-red); outline-offset: -3px; }
.photo--review::after {
  content: attr(data-review); position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  background: var(--live-red); color: var(--white); font: 600 .74rem/1.35 var(--font-body);
  padding: 6px 9px; border-radius: 6px; text-align: left; letter-spacing: 0;
}

/* Thank-you spotlight (Community): Joe's Putnam County thank-you card, rebuilt as a section */
.thanks { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 980px; margin-inline: auto; }
.thanks-script { margin: 0 0 6px; font: italic 600 clamp(2.6rem, 5vw, 3.6rem)/1 var(--font-heading); color: var(--white); }
.thanks-script::after { content: ""; display: block; width: 72%; height: 4px; margin-top: 14px; border-radius: 4px; background: var(--teal); }
.section--glow .thanks-name { margin: 22px 0 8px; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: .02em; text-transform: uppercase; color: var(--aqua); }
.section--glow .thanks-role { margin: 0 0 18px; font-weight: 700; letter-spacing: .08em; line-height: 1.6; color: var(--white); }
.thanks-message { padding-top: 18px; border-top: 1px solid rgba(200, 237, 243, .25); font-size: 1.05rem; line-height: 1.7; }
.thanks-tags { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 22px; padding: 0; list-style: none; }
.thanks-tags li { font: 700 .8rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--aqua); }
.thanks-tags li + li::before { content: "|"; margin-right: 22px; color: var(--teal); }
.thanks-photo { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 14px 36px rgba(0, 0, 0, .35); max-width: 380px; justify-self: center; }
.thanks-photo img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.thanks-photo:hover img { transform: scale(1.03); }
@media (max-width: 720px) {
  .thanks { grid-template-columns: 1fr; }
  .thanks-photo { order: -1; max-width: 320px; }
}