/* =========================================================================
   Community Partners of Johnson County
   Hand-built replacement for the Duda export.

   Replaces ~700KB of Duda CSS. One responsive stylesheet, no device-specific
   HTML: the layout adapts with grid/flex instead of Duda serving three
   separate builds behind User-Agent sniffing.
   ========================================================================= */

/* ---- Fonts (already on disk from the export; nothing fetched remotely) ---- */
@font-face {
  font-family: 'Chelsea Market';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/Resources/files/BCawqZsHqfr89WNP_IApC8tzKChiJg8.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/Resources/files/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2') format('woff2');
}

/* ---- Design tokens, lifted from the original so the client's brand is unchanged ---- */
:root {
  /* Two teals and two magentas, split by JOB, because the brand colours are
     too light to carry text. Measured: white on #38bdc2 is 2.28:1 — every
     teal band on the old build failed WCAG AA, footer included.
       *-bright  decorative only (rules, icons, hover fills, the accent bar)
       *-text    text on light backgrounds        (>= 4.5:1)
       *-deep    background that carries white text (white reaches 7.3:1)   */
  --teal-bright: #38bdc2;
  --teal-text:   #1e7176;
  --teal-deep:   #166063;
  --teal-wash:   #eefafa;
  --magenta:     #cc35cc;
  --magenta-text:#b32bb3;
  --ink:         #2f2f2f;
  --muted:       #5f5f5f;
  --bg:          #ffffff;
  --bg-alt:      #f7f9f9;
  --white:       #ffffff;
  --line:        #e3e8e8;

  /* Chelsea Market is a casual display face. Using it for every heading, stat
     and label made the page read as informal throughout. It now carries only
     the big brand moments (h1, h2, stat figures); Montserrat carries structure
     — h3, eyebrows, buttons, nav and body. Warmth stays, the page gains spine. */
  --font-display: 'Chelsea Market', Georgia, serif;
  --font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ONE width scale, applied consistently. Previously prose was 68ch, the
     accordion 860px, the form 760px and the lede 62ch — four different
     measures stacked in the same section, which is what made the page look
     like it had no grid. Now: media uses --wrap, every text block uses
     --measure, and nothing else invents its own width. */
  --wrap: 1180px;
  --measure: 720px;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 14px;
  --header-h: 84px;
  --shadow: 0 18px 40px -24px rgba(22,96,99,.45);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Anchor targets must clear the sticky header. */
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.72;
  letter-spacing: .003em;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-text); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--teal { background: var(--teal-deep); color: var(--white); }

h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.14; margin: 0 0 .5em; letter-spacing: -.005em; }
h3 {
  font-family: var(--font-ui); font-weight: 600; line-height: 1.3;
  margin: 0 0 .55em; letter-spacing: -.01em;
}
h2 { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.6rem); color: var(--teal-text); text-align: center; }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); color: var(--teal-text); }
.section--teal h2, .section--teal h3 { color: var(--white); }
.section--teal a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.lede { text-align: center; max-width: 60ch; margin-inline: auto; color: var(--muted); font-size: 1.05rem; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95em 2.2em;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  transition: background-color .22s, color .22s, transform .22s, box-shadow .22s, border-color .22s;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Primary — solid. Every button being an outline pill left the page with no
   hierarchy: donate looked exactly as important as a wishlist link. */
.btn--primary {
  background: var(--magenta-text); border-color: var(--magenta-text); color: var(--white);
  box-shadow: 0 10px 24px -12px rgba(179,43,179,.65);
}
.btn--primary:hover { background: #9c239c; border-color: #9c239c; color: var(--white); box-shadow: 0 16px 30px -14px rgba(179,43,179,.75); }
.btn--solid {
  background: var(--white); border-color: var(--white); color: var(--teal-deep);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.5);
}
.btn--solid:hover { background: var(--teal-wash); border-color: var(--teal-wash); color: var(--teal-deep); }
.btn--ghost      { color: var(--white); background: transparent; }
.btn--ghost:hover{ background: var(--white); color: var(--teal-deep); }
.btn--teal       { color: var(--teal-text); background: transparent; }
.btn--teal:hover { background: var(--teal-deep); color: var(--white); border-color: var(--teal-deep); }
.btn--magenta       { color: var(--magenta-text); background: transparent; }
.btn--magenta:hover { background: var(--magenta-text); color: var(--white); border-color: var(--magenta-text); }

/* ---- Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(16,40,42,.08);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--header-h);
}
.site-header__logo img { width: 230px; }

.nav { margin-left: auto; }
.nav__list {
  list-style: none; display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.9rem);
  margin: 0; padding: 0;
}
.nav__list a {
  font-family: var(--font-ui);
  font-size: .76rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.nav__list a:hover, .nav__list a:focus-visible { color: var(--teal-text); border-bottom-color: var(--teal-bright); }

.social { display: flex; gap: .85rem; align-items: center; }
.social a { color: var(--teal); display: inline-flex; }
.social a:hover { color: var(--magenta-text); }
.social svg { width: 19px; height: 19px; fill: currentColor; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 28px; height: 28px; fill: currentColor; }

/* ---- Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(78vh, 620px);
  display: grid; align-items: center;
  /* Hero image lives here rather than inline so phones can take the smaller
     file — a 1600px hero on a 390px screen is most of the mobile payload. */
  background: #2f4f4f url('/Resources/images/Depositphotos_116431680_xl-2015-1600.webp') center/cover no-repeat;
  color: var(--white);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  /* Scrim strength is measured, not eyeballed: white body copy over the
     brightest patches of this photo was 4.28:1 with a lighter gradient.
     A teal-black tint keeps it from going muddy grey. */
  background:
    linear-gradient(90deg, rgba(8,32,34,.80) 0%, rgba(8,32,34,.60) 52%, rgba(8,32,34,.28) 100%),
    linear-gradient(180deg, rgba(8,32,34,.10) 0%, rgba(8,32,34,0) 40%, rgba(8,32,34,.22) 100%);
}
.hero__inner { position: relative; z-index: 1; padding: clamp(3rem, 8vw, 5rem) 0; max-width: 40rem; }
.hero h1 {
  font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.4rem);
  margin-bottom: .3em; text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.hero p { font-size: clamp(1.02rem, .96rem + .38vw, 1.18rem); margin: 0 0 2.4rem; max-width: 33rem; line-height: 1.65; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

.accent-bar { height: 6px; background: linear-gradient(90deg, var(--teal-bright) 0%, var(--magenta) 55%, var(--teal-bright) 100%); }

/* ---- Quick links ------------------------------------------------------ */
.quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); text-align: center; }
.quicklinks a { text-decoration: none; color: var(--teal-text); display: block; padding: 1rem .5rem; border-radius: var(--radius); transition: background-color .2s, transform .2s; }
.quicklinks a:hover { background: var(--bg-alt); transform: translateY(-3px); }
.quicklinks img { width: 74px; margin: 0 auto .7rem; }
.quicklinks span { font-family: var(--font-ui); font-weight: 600; font-size: .95rem; letter-spacing: .01em; }

/* ---- Prose ------------------------------------------------------------ */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose p { margin: 0 0 1.15em; }
.prose ul { margin: 0 0 1.3em; padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
.prose strong { color: var(--ink); }

/* ---- Stats ------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); text-align: center; margin-top: 3rem; }
.stat { padding: 0 1rem; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat img { width: 68px; margin: 0 auto .8rem; opacity: .75; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.2rem); color: var(--magenta-text); line-height: 1; }
.stat__label { font-size: .82rem; color: var(--muted); margin-top: .55rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

/* ---- Galleries -------------------------------------------------------- */
.gallery { display: grid; gap: 1.15rem; grid-template-columns: repeat(4, 1fr); margin-top: 3rem; }
.gallery--programs { grid-template-columns: repeat(4, 1fr); }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: #ddd; }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .45s ease; }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  color: #fff; font-size: .8rem; line-height: 1.4; padding: 2.2rem .85rem .85rem;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.gallery figure:hover figcaption,
.gallery figure:focus-within figcaption { opacity: 1; transform: translateY(0); }

/* ---- CTA band --------------------------------------------------------- */
.cta-band { background: var(--teal-deep); color: var(--white); padding: clamp(2.2rem, 5vw, 3.2rem) 0; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem 2.4rem; text-align: center; }
.cta-band h2 { margin: 0; color: var(--white); font-size: clamp(1.4rem, 1rem + 1.8vw, 2rem); }
.cta-band .hero__cta { justify-content: center; }

/* ---- Accordion -------------------------------------------------------- */
.accordion { max-width: var(--measure); margin: 2.5rem auto 0; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem .25rem;
  font-family: var(--font-ui); font-weight: 600; font-size: .98rem; letter-spacing: .005em; color: var(--magenta-text);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '+'; font-family: var(--font-ui); font-size: 1.4rem; line-height: 1;
  color: var(--teal-text); transition: transform .25s; flex: none;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion__body { padding: 0 .25rem 1.3rem; color: var(--muted); }
.accordion__body p { margin: 0 0 .9rem; }

/* ---- Split (image + text) --------------------------------------------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split--reverse > :first-child { order: 2; }
.split img { border-radius: var(--radius); }

/* An inline max-width beat the global img{max-width:100%} here and pushed the
   page 280px wider than the viewport on phones. Width must be constrained too. */
.volunteer-photo { margin: 2.5rem auto 0; width: 100%; max-width: 900px; border-radius: var(--radius); box-shadow: 0 26px 60px -30px rgba(0,0,0,.65); }

/* ---- Sponsors --------------------------------------------------------- */
.sponsors { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 3vw, 2.4rem); align-items: center; margin-top: 2.5rem; }
/* Full colour, not greyscale: these are paying sponsors of the Cruisin' for
   Kids car show and their branding should read as intended. */
.sponsors img { max-height: 78px; width: auto; margin-inline: auto; transition: transform .25s; }
.sponsors img:hover { transform: scale(1.06); }

/* ---- Forms ------------------------------------------------------------ */
.form { max-width: var(--measure); margin: 2.5rem auto 0; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__field--full { grid-column: 1 / -1; }
.form label { display: block; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: .8rem .9rem; border: 1px solid #d7d7d7; border-radius: 8px; background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.form textarea { min-height: 130px; resize: vertical; }
.form :is(input, textarea):focus-visible { outline: none; border-color: var(--teal-text); box-shadow: 0 0 0 3px rgba(30,113,118,.18); }
.form__choices { display: flex; gap: 1.5rem; align-items: center; padding-top: .2rem; }
.form__choices label { display: inline-flex; align-items: center; gap: .45rem; text-transform: none; letter-spacing: 0; font-size: .95rem; font-family: var(--font-body); font-weight: 400; color: var(--ink); margin: 0; }
.form__actions { margin-top: 1.4rem; text-align: center; }
.form__status { margin-top: 1rem; text-align: center; font-weight: 600; }
.form__status--ok  { color: #1d8a54; }
.form__status--err { color: #c0392b; }
.form [hidden] { display: none !important; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer { background: var(--teal-deep); color: var(--white); padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.site-footer a { color: var(--white); }
.site-footer__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.site-footer__logo { width: 250px; margin-bottom: 1rem; }
.site-footer h3 { color: var(--white); font-size: 1.15rem; }
.site-footer p { margin: 0 0 .9rem; font-size: .95rem; }
.site-footer dt { font-weight: 700; font-size: .9rem; }
.site-footer dd { margin: 0 0 .8rem; font-size: .95rem; }
.newsletter { background: rgba(255,255,255,.14); border-radius: var(--radius); padding: 1.4rem; }
.newsletter input[type=email] { width: 100%; font: inherit; padding: .7rem .85rem; border: 0; border-radius: 6px; margin-bottom: .8rem; }
.newsletter .btn { width: 100%; }
.newsletter small { display: block; font-size: .78rem; opacity: .82; margin-bottom: .9rem; line-height: 1.5; }
.site-footer__social { margin-top: 1.2rem; }
.site-footer__social svg { width: 22px; height: 22px; }
.site-footer__bottom { margin-top: clamp(2rem, 5vw, 3rem); padding: 1.4rem 0 3rem; text-align: center; font-size: .9rem; }

/* =========================================================================
   Responsive. One HTML file adapting at real breakpoints — this is the whole
   reason for the rebuild. The Duda export shipped three separate documents
   and picked between them by sniffing the User-Agent, which broke on any
   device it didn't recognise and meant every content edit had to be made
   three times.
   ========================================================================= */
@media (max-width: 980px) {
  .quicklinks { grid-template-columns: repeat(2, 1fr); }
  .gallery, .gallery--programs { grid-template-columns: repeat(3, 1fr); }
  .sponsors { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .newsletter { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --header-h: 68px; }

  .hero { background-image: url('/Resources/images/Depositphotos_116431680_xl-2015-900.webp'); }

  .nav-toggle { display: inline-flex; }
  .site-header__inner { gap: .75rem; }
  .site-header__logo img { width: 180px; }
  .site-header .social { display: none; }

  /* Drawer. Hidden from assistive tech and keyboard until opened — a nav you
     can tab into while it's off-screen is worse than no drawer at all. */
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--white);
    border-top: 1px solid #eee;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    transform: translateY(-125%);
    transition: transform .28s ease;
    margin: 0;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; }
  .nav__list li { border-bottom: 1px solid #f0f0f0; }
  .nav__list li:last-child { border-bottom: 0; }
  .nav__list a { display: block; padding: .95rem .25rem; font-size: .9rem; border-bottom: 0; }

  .hero { min-height: auto; text-align: center; }
  .hero::after { background: rgba(0,0,0,.5); }
  .hero__inner { max-width: none; }
  .hero__cta { justify-content: center; }

  .gallery, .gallery--programs { grid-template-columns: repeat(2, 1fr); }
  /* Captions are hover-only on desktop; touch has no hover, so show them. */
  .gallery figcaption { position: static; opacity: 1; transform: none; background: none; color: var(--muted); padding: .55rem .2rem 0; }
  .gallery figure { background: none; }
  .gallery img { border-radius: var(--radius); }

  .stats { grid-template-columns: 1fr; gap: 2rem; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); padding-top: 2rem; }

  .form__grid { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .sponsors { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .btn { padding: .8em 1.5em; font-size: .76rem; }
  .hero__cta { flex-direction: column; align-items: center; }
  .hero__cta .btn { width: 100%; max-width: 260px; }
}

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

/* =========================================================================
   VGM Design Credit — D01·V2 Brand Star Reveal (spec v3)
   Now that Duda's stylesheet is gone, none of the specificity fights from the
   old build are needed: no #dmRoot prefixes, no !important on padding. Only
   the star colour and Google dot keep !important, per spec §3, to defend
   against any future theme rule.
   ========================================================================= */
.vgm-credit-line { display: inline; }

.vgm-credit {
  --vgm-footer-color: #ffffff;
  --vgm-weight-hover: 800;
  --vgm-ease: cubic-bezier(.23, 1, .32, 1);

  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--vgm-footer-color);
  margin: 0;
  /* inline-flex: the credit sits mid-sentence after the copyright, so it must
     stay in the text flow and let the line wrap naturally. */
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  flex-wrap: wrap;
}

.vgm-bsr { position: relative; display: inline-block; cursor: default; }

.vgm-bsr-brand,
.vgm-bsr-rated,
.vgm-bsr-label { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--vgm-footer-color); }

/* Deviation from VGM spec v3 §3, which has the reveal rows inherit footer
   typography. At footer size the rating line rendered wider than the brand
   name it sits under, which read as clumsy. Both reveal rows step down two
   sizes; --vgm-reveal-scale keeps them locked together. */
.vgm-bsr { --vgm-reveal-scale: .72; }
.vgm-bsr-rated,
.vgm-bsr-label { font-size: calc(1em * var(--vgm-reveal-scale)); }
.vgm-bsr-star  { font-size: calc(1em * var(--vgm-reveal-scale)); }
.vgm-bsr-dot   { width: calc(.7em * var(--vgm-reveal-scale)); height: calc(.7em * var(--vgm-reveal-scale)); }
/* The rating line must never be wider than the brand name above it. .vgm-bsr is
   sized by the brand link, so 100% here is exactly the brand's width. */
.vgm-bsr-bottom { max-width: 100%; }
.vgm-bsr-label  { overflow: hidden; text-overflow: ellipsis; }

.vgm-bsr-brand, .vgm-bsr-label { white-space: nowrap; }

.vgm-bsr-brand {
  text-decoration: none;
  line-height: 1.1;
  transition: font-weight .22s var(--vgm-ease), letter-spacing .22s var(--vgm-ease);
}
.vgm-bsr-brand:hover, .vgm-bsr-brand:focus { color: var(--vgm-footer-color); text-decoration: none; }
.vgm-bsr-brand:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

/* Absolute so the reveal never shifts the footer and the glow isn't clipped. */
.vgm-bsr-top {
  position: absolute; bottom: 100%; left: 0; margin-bottom: .4em;
  display: flex; align-items: center; gap: .45em; white-space: nowrap;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity .32s var(--vgm-ease), transform .32s var(--vgm-ease);
}
.vgm-bsr-star {
  font-size: 1em; line-height: 1; display: inline-block;
  color: #FBBC04 !important;
  opacity: 0; transform: translateY(-8px) scale(.6);
  transition: opacity .28s var(--vgm-ease), transform .28s var(--vgm-ease), filter .28s;
}
.vgm-bsr-bottom {
  position: absolute; top: 100%; left: 0; margin-top: .4em;
  display: flex; align-items: center; gap: .4em; white-space: nowrap;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .35s var(--vgm-ease), transform .35s var(--vgm-ease);
}
.vgm-bsr-dot {
  width: .7em; height: .7em; border-radius: 50%; display: inline-block; flex-shrink: 0;
  background: linear-gradient(135deg,#4285F4 0%,#34A853 33%,#FBBC05 66%,#EA4335 100%) !important;
}

.vgm-bsr:hover .vgm-bsr-brand,
.vgm-bsr:focus-within .vgm-bsr-brand,
.vgm-bsr.is-active .vgm-bsr-brand {
  font-weight: var(--vgm-weight-hover);
  letter-spacing: var(--vgm-hover-track, inherit);
}
.vgm-bsr:hover .vgm-bsr-top,
.vgm-bsr:focus-within .vgm-bsr-top,
.vgm-bsr.is-active .vgm-bsr-top { opacity: 1; transform: translateY(0); }
.vgm-bsr:hover .vgm-bsr-star,
.vgm-bsr:focus-within .vgm-bsr-star,
.vgm-bsr.is-active .vgm-bsr-star {
  opacity: 1; transform: translateY(0) scale(1);
  filter: drop-shadow(0 0 3px rgba(251,188,4,.6));
  transition-delay: calc(var(--i) * 70ms);
}
.vgm-bsr:hover .vgm-bsr-bottom,
.vgm-bsr:focus-within .vgm-bsr-bottom,
.vgm-bsr.is-active .vgm-bsr-bottom { opacity: 1; transform: translateY(0); transition-delay: .38s; }

/* The reveal grows above and below the credit; the footer's bottom padding
   gives the lower row somewhere to land. */
.site-footer__bottom { padding-bottom: 3.4rem; }

@media (max-width: 600px) {
  /* On a phone the copyright wraps, so an inline credit would put the
     "Rated ★★★★★" row on top of the client's own text. Give it its own line. */
  .vgm-credit { display: flex; width: 100%; justify-content: center; margin-top: 2.2em; }
  .vgm-bsr-top, .vgm-bsr-bottom, .vgm-bsr-label { white-space: normal; }
  .vgm-bsr-top, .vgm-bsr-bottom { max-width: 14em; }
}

@media (prefers-reduced-motion: reduce) {
  .vgm-bsr-top, .vgm-bsr-bottom, .vgm-bsr-star { transform: none !important; }
  .vgm-bsr-star, .vgm-bsr-bottom { transition-delay: 0s !important; }
  .vgm-bsr-brand { transition: none; }
}

/* =========================================================================
   Polish layer
   ========================================================================= */

/* Section eyebrow — small typographic label above a heading. Gives each
   section a consistent entry point instead of a bare centred title. */
.eyebrow {
  display: block; text-align: center;
  font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--teal-text); margin-bottom: 1rem;
}
.section--teal .eyebrow, .cinematic .eyebrow { color: rgba(255,255,255,.75); }
h2 + .lede { margin-top: -.2em; }

/* A hairline rule under section headings, centred, brand-coloured. */
.rule::after {
  content: ''; display: block; width: 54px; height: 3px; border-radius: 2px;
  background: var(--teal-bright); margin: .9rem auto 0;
}

/* Cards — used for Summer Camp / Caseworker Appreciation so those two blocks
   read as a pair rather than two more centred text columns. */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 2.5rem; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.75rem, 3.2vw, 2.6rem);
  box-shadow: 0 1px 2px rgba(16,40,42,.04);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* Feature split: image beside text, used for the Rainbow Room. */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.feature__media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.feature__body { max-width: 34rem; }
.feature__body h3 { margin-top: 0; }

/* Gallery polish */
.gallery figure { box-shadow: 0 10px 24px -18px rgba(0,0,0,.55); }

/* Quicklinks as cards */
.quicklinks a { border: 1px solid transparent; }
.quicklinks a:hover { background: var(--teal-wash); border-color: var(--line); }

/* Accordion polish */
.accordion summary:hover { color: var(--teal-text); }
.accordion details[open] { background: linear-gradient(var(--teal-wash), transparent); }

/* =========================================================================
   Cinematic scroll band
   Full-bleed image that drifts against the scroll, with the copy pinned over
   it. background-attachment: fixed is deliberately NOT used — iOS ignores it
   and Android repaints badly; a transform on an oversized child is smooth on
   both and can be disabled for reduced-motion.
   ========================================================================= */
.cinematic {
  position: relative; overflow: clip;
  display: grid; place-items: center;
  min-height: clamp(340px, 62vh, 620px);
  color: var(--white); text-align: center;
  background: var(--teal-deep);
  isolation: isolate;
}
.cinematic__bg {
  position: absolute; inset: -12% 0; z-index: -2;
  width: 100%; height: 124%; object-fit: cover;
  will-change: transform;
}
.cinematic::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Dark enough that white body copy clears 4.5:1 over the photo. */
  background: linear-gradient(180deg, rgba(10,48,50,.78) 0%, rgba(10,48,50,.62) 50%, rgba(10,48,50,.82) 100%);
}
.cinematic__inner { padding: clamp(3rem, 8vw, 5rem) 0; max-width: 46rem; margin-inline: auto; }
.cinematic h2 { color: var(--white); }
.cinematic p { font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem); margin: 0 auto 2rem; max-width: 40rem; }
.cinematic .hero__cta { justify-content: center; }

/* =========================================================================
   Scroll reveal — subtle, and only where it can't hide content.
   Elements start visible for anyone without JS (the .js-reveal class is only
   added by script), which is the mistake Duda made in the other direction.
   ========================================================================= */
.js-reveal { opacity: 0; transform: translateY(18px); }
.js-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.js-reveal.is-in:nth-child(2) { transition-delay: .06s; }
.js-reveal.is-in:nth-child(3) { transition-delay: .12s; }
.js-reveal.is-in:nth-child(4) { transition-delay: .18s; }

@media (max-width: 980px) {
  .cards, .feature { grid-template-columns: 1fr; }
  .feature__media { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal, .js-reveal.is-in { opacity: 1 !important; transform: none !important; }
  .cinematic__bg { transform: none !important; }
  .card:hover { transform: none; }
}


/* Get Involved contact row.
   Email and phone are each a single unbreakable unit, so the line wraps
   BETWEEN them instead of snapping a phone number across two rows. */
.contact-inline {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem clamp(3rem, 9vw, 7rem);
  margin-top: 2.4rem;
}
.contact-inline li {
  display: inline-flex; flex-direction: column; align-items: center; gap: .45rem;
  white-space: nowrap;
}
.contact-inline__label {
  font-family: var(--font-ui); font-size: .66rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.contact-inline a { color: var(--white); font-size: 1.02rem; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 5px; }
.contact-inline a:hover { text-decoration-thickness: 2px; }

@media (max-width: 560px) {
  /* One per row on small screens rather than a cramped two-up. */
  .contact-inline { flex-direction: column; align-items: center; gap: .8rem; }
}

/* Nav "Donate" as a compact primary pill — the single most valuable action on
   the page shouldn't look identical to the four navigation links beside it. */
.nav__cta a {
  background: var(--magenta-text); color: var(--white);
  padding: .6rem 1.15rem; border-radius: 999px; border-bottom: 0;
  transition: background-color .2s, transform .2s;
}
.nav__cta a:hover, .nav__cta a:focus-visible {
  background: #9c239c; color: var(--white); border-bottom-color: transparent; transform: translateY(-1px);
}

/* Heading rule sits closer to its heading than to the copy below it, so the
   two read as one unit. */
.rule::after { margin: 1rem auto .25rem; }
h2 { margin-bottom: .45em; }

/* Prose rhythm — headings inside long copy need air above, not below. */
.prose h3 { margin-top: 2.4em; }
.prose h3:first-child { margin-top: 0; }

/* Feature block: a touch more room between image and copy. */
.feature { gap: clamp(2rem, 5vw, 4.5rem); }

@media (max-width: 760px) {
  .nav__cta a { display: inline-block; margin: .6rem 0; }
}