/* Stematics shared Phase 1 foundation */
:root{
  --site-max:1200px;
  --site-pad:clamp(12px,2vw,24px);
  --site-focus:#0b5fff;
  --primary:#e94e1b;
  --text:#333;
  --white:#fff;
  --black:#000;
  --section-bg:#444444;
  --radius:8px;
  --shadow:0 4px 12px rgba(0,0,0,.18);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --shadow-lg: 0 20px 42px rgba(5, 2, 17, 0.44);
  --shadow-md: 0 14px 28px rgba(9, 5, 24, 0.33);
  --shadow-glow-gold: 0 0 14px rgba(255, 156, 18, 0.48);
  /* Shared liveness motion tokens — house standard (de-facto values from the
     blog-card reference). Use in rules added/edited going forward; existing
     untouched rules are intentionally left as-is to avoid churn. */
  --transition-card: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  --transition-zoom: transform 0.4s ease;
  --transition-color: color 0.2s ease;
  --lift-card: -6px;        /* the blog reference lift */
  --zoom-img: 1.06;
  --text-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.42);
  --text-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
  --text-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.42);
  --site-shell-bg:#0a0a0f;
  --site-chrome-bg:#56524d;   /* warm neutral gray — shared header/menu/footer chrome (approved,
                                  promoted sitewide from the Home prototype; = hsl 35 6% 32%, the
                                  beige canvas's own hue darkened. See section 3a.) */
  --site-chrome-text:#f8efff;
  --site-chrome-accent:#ffc64f;
  --stem-science: #129b59;
  --stem-technology: #0662b8;
  --stem-engineering: #f8ae20;
  --stem-math: #fc1002;
  --accent-purple: #c68cff;
  --accent-red: #ff3b3b;
  --accent-red-glow: rgba(255, 59, 59, 0.5);
}

/* ============================================================================
   AMETHYST PURPLE FAMILY — sitewide rule (approved from the Home prototype)
   Anchor: standard Amethyst #9966CC = hsl(270, 50%, 60%).
   EVERY general purple section / panel / card background in this file sits on
   that one axis: hue 270, saturation 50%, and ONLY lightness varies. Depth
   hierarchy and gradient direction are therefore carried entirely by the
   lightness value, so deeper surfaces stay deeper and darker->lighter
   gradients keep their direction.

   Live ramp, darkest -> lightest. NOTE these are RAW values; what the eye
   actually sees is the value composited over the beige canvas at its own
   alpha, and the alphas here run from .55 to 1.0 — which is why the audit
   below works in composited L*, not raw lightness.
     25%  #402061                                        gallery frame dark stop
     26%  #422163   HOME hero feature panel
     28%  #47246b   faq filter bar
     30%  #4e2774   program-hero figure + its letterbox scrim
     33%  #542a7e                                        gallery frame light stop
     34%  #562b80  #562b81  #572b82   HOME programs panel; testimonial card
     35%  #5a2d86  #5a2d88  #5b2d88
     36%  #5b2e89  #5d2e8b
     37%  #5d2f8c  #5e2f8d  #5e2f8e  #5f2f8e  #5f308f    card/panel dark stops
     38%  #613091
     39%  #633195  #653297
     40%  #653298  #663399 (HOME testimonial panel)  #66339a  #67339b
     41%  #68349b  #68349d  #69349e                       card/panel light stops
     42%  #6a359f  #6a35a0  #6b36a1
     43%  #6d37a4  #6f37a6                                program hero banner
     45%  #7239aa                                         lightest surface

   VISUAL BAND (the rule that actually governs this palette). Every general
   purple surface must composite, over the beige canvas and at its own alpha,
   into L* 28..41 — the band the approved Home surfaces occupy (hero 27.7,
   programs 36.9, testimonial 40.5). The ceiling is set by text: at L* 41 the
   muted rgba(255,255,255,.8) body copy is 4.7:1, and above that it fails AA.
   Hue 270 alone is NOT sufficient — a hue-270 colour at high alpha can still
   read near-black. When adding a purple surface, check the composited L*.

   Two surfaces sit outside the band on purpose:
     .gallery-item          L* 55/42 — a text-free translucent frame behind
                            photos; it was already at/above the band.
     .program-hero img      L* 35 letterbox behind object-fit:contain photos;
                            shares its figure's colour at .30 alpha.
   And .program-hero::before is a NEUTRAL scrim (rgba(8,9,12,.22->.08)), not a
   purple, kept low so the banner's inner panel stays in the band.

   To restyle purple sitewide, move the hue/saturation pair here and re-derive
   the ramp; do NOT hand-pick one-off purples per component.

   NOT part of this family (intentionally left alone): the STEM subject colors,
   --accent-purple #c68cff (light accent/glow tint, already on hue 270), all
   gold accents, and the CTA glow-button gradient (#6366f1 / #a855f7 / #ec4899).
   ============================================================================ */
*,:before,:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{max-width:100%;overflow-x:hidden}
body{max-width:100%}
body{margin:0;color:var(--text);font-family:'Roboto',Arial,sans-serif;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.container{width:min(100%,var(--site-max));margin-inline:auto;padding-inline:var(--site-pad)}

/* Header and navigation */
.site-nav{width:100%;position:static;transform:none;left:auto}
.nav-toggle{cursor:pointer}
.phone-call{justify-self:start}
.site-nav ul{display:none;flex-direction:column;align-items:stretch;gap:4px;padding:4px 0;margin:0;list-style:none}
.site-nav.is-open>ul{display:flex}
.site-nav li{display:flex;align-items:center}
.site-nav a,.site-nav .programs-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-weight:500;line-height:1.2;text-align:center;cursor:pointer;vertical-align:middle;appearance:none;-webkit-appearance:none}
.has-dropdown{position:relative}
.has-dropdown>.submenu{display:none!important;position:static;transform:none;left:auto;min-width:0;width:100%;box-shadow:none;border:1px solid #ddd;margin-top:4px;background:#fff;list-style:none;padding:8px 0}
.has-dropdown.open>.submenu{display:block!important}
.site-nav .submenu a,.footer-nav .submenu a{display:block;min-height:auto;width:100%;padding:10px 14px;border-radius:0;color:var(--text);font-size:1rem;font-weight:400;line-height:1.4;text-align:left;white-space:nowrap}
.site-nav .submenu a:hover,.footer-nav .submenu a:hover{background:#f3f4f6;color:var(--text)}
/* Submenu items: icon + label row. Icon sits left of the label at a fixed size
   and never squashes; small gap between them; both vertically centered. Applies
   to the desktop popover AND the mobile inline submenus (same nav_groups loop). */
.site-nav .submenu a{display:flex;align-items:center;gap:.55rem}
.submenu-icon{flex:0 0 auto;width:20px;height:20px;display:block}
.submenu-label{min-width:0}

/* Footer stabilization */
.footer-nav>ul{list-style:none;display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:0;padding:0}
.footer-social .social-link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:#ddd;background:rgba(255,255,255,.08);transition:background .2s,color .2s,transform .2s}
.footer-social .social-link:hover{color:#fff;background:rgba(255,255,255,.15);transform:translateY(-1px)}
.footer-social svg{width:18px;height:18px;display:block}
.footer-legal-nav{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:1rem;color:#bbb;margin:8px 0 6px}
.footer-address{margin:4px 0 6px;text-align:center;color:#c9c9c9;font-size:1rem}
.copyright{margin-top:4px;text-align:center;color:#aaa;font-size:.9rem}

/* Reused layout rows */
#hero .container,header{width:min(100%,var(--site-max));margin-inline:auto}

/* Legal pages */
.legal-updated{color:#666;margin-bottom:1rem}
.legal-location{color:#444;margin-bottom:1rem}
.legal-contact p{margin:.25rem 0}

:focus-visible{outline:3px solid var(--site-focus);outline-offset:2px}

@media (min-width:1024px){
  .nav-toggle{display:none}
  .site-nav>ul{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px}
}
@media (max-width:768px){
  .footer-social .social-link{width:28px;height:28px}
}
/* Run-6 approved homepage and shared header/footer promotion */
.site-wrapper {
      --site-shell-bg: #0a0a0f;
      color: #ffffff;
    }

    .site-wrapper header a,
    .site-wrapper nav a,
    .site-wrapper footer,
    .site-wrapper footer a {
      color: #f8efff;
    }
    .site-theme {
      --site-purple-950: #160729;
      --site-purple-900: #240b44;
      --site-white: #ffffff;
      --site-text-soft: #f4ecff;
      --site-shadow-lg: var(--shadow-lg);
      --site-shadow-md: var(--shadow-md);
      --site-radius-lg: var(--radius-lg);
      --site-radius-md: var(--radius-md);
      color: var(--site-white);
      padding: clamp(1rem, 2vw, 1.5rem) 0 2.8rem;
    }


    .site-theme #testimonial {
      width: min(1480px, calc(100% - clamp(1rem, 4vw, 4rem)));
      margin: 1.45rem auto;
      border-radius: var(--site-radius-lg);
      border: 1px solid rgba(255, 255, 255, 0.28);
      box-shadow: var(--site-shadow-lg);
      overflow: hidden;
      padding: clamp(1.5rem, 3vw, 2.2rem);
    }

    .site-theme #testimonial h2 {
      color: #fffefb;
      text-align: center;
      font-size: clamp(1.65rem, 2.1vw + 1rem, 3rem);
      font-weight: 800;
      letter-spacing: clamp(0.03em, 0.15vw, 0.08em);
      text-transform: uppercase;
      text-shadow: var(--text-shadow-lg);
      margin: 0 0 clamp(1rem, 2.2vw, 1.75rem);
      position: relative;
      padding-bottom: 0.72rem;
    }

    .site-theme #testimonial h2::after {
      content: "";
      display: block;
      width: clamp(88px, 12vw, 160px);
      height: 4px;
      margin: 0.52rem auto 0;
      border-radius: var(--radius-pill);
      background: linear-gradient(90deg, rgba(255, 221, 139, 0.92), rgba(255, 156, 18, 0.96));
      box-shadow: var(--shadow-glow-gold);
    }


        .site-theme #testimonial {
      position: relative;
      isolation: isolate;
      padding: clamp(1.7rem, 3.6vw, 2.85rem) clamp(1.1rem, 3.4vw, 2.1rem);
      text-align: center;
    }

    @media (min-width: 700px) {
            .site-theme #testimonial {
        padding: clamp(1.5rem, 2.5vw, 2.6rem);
      }
    }

    @media (min-width: 1024px) {
      .site-theme #testimonial {
        width: min(1480px, calc(100% - clamp(2rem, 5vw, 6rem)));
      }
    }


    @media (max-width: 768px) {
      .site-theme #testimonial { margin: 1.1rem auto; padding: 1.2rem; }
    }


    /*
      Shared Run-6 chrome selectors intentionally include element + shared
      container/chrome classes so legacy page-level .container, header, nav,
      footer, .footer-top, .footer-nav, and .phone-call CSS on existing
      public pages cannot override the approved shared header/footer while
      those body pages await future conversion.
    */
    header.container.site-header,
    footer.container.site-footer {
      width: calc(100% - clamp(0.7rem, 2vw, 1.5rem));
      max-width: calc(100% - clamp(0.7rem, 2vw, 1.5rem));
      margin-inline: auto;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: clamp(14px, 1.8vw, 20px);
      box-shadow: 0 10px 22px rgba(6, 3, 16, 0.34);
      color: var(--site-chrome-text, #f8efff);
    }

    header.container.site-header { margin-top: 0.55rem; }
    header.container.site-header,
    header.container.site-header.clearfix { display: grid; }
    header.container.site-header {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 0.5rem;
      padding: clamp(0.42rem, 1.15vw, 0.6rem) clamp(0.55rem, 1.35vw, 0.82rem);
    }
    /* System A consolidation Run 1 (additive): port the header sticky
       positioning from the generic System A `header` rule (top of file) onto
       the System B base selector, so a later run can safely retire System A.
       Same values as the System A original, which is intentionally retained as
       the live fallback for this run. */
    header.container.site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    header.container.site-header .banner-header img { height: clamp(74px, 20vw, 102px); width: auto; }
    header.container.site-header .nav-toggle {
      justify-self: end;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.36);
      background: linear-gradient(180deg, rgba(19, 19, 27, 0.95), rgba(10, 10, 15, 0.95));
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      box-shadow: 0 8px 14px rgba(0, 0, 0, 0.28);
    }
    header.container.site-header .nav-toggle span {
      width: 20px;
      height: 2px;
      border-radius: var(--radius-pill);
      background: #f8efff;
      display: block;
      transition: transform 0.3s ease, opacity 0.2s ease;
    }
    /* Hamburger → X: the open state is mirrored onto the button as
       aria-expanded="true" by site.js (do not touch the JS). Bars are 2px tall
       with gap:5px here (4px ≤1023, overridden in that block), so adjacent bar
       centers sit 7px apart — translate the outer bars to the middle and rotate
       so they cross. Middle bar fades out. Button is display:none ≥1024, so this
       only ever renders on the mobile button. */
    header.container.site-header .nav-toggle[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    header.container.site-header .nav-toggle[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }
    header.container.site-header .nav-toggle[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
    /* Reduced motion: keep the X end-state, drop only the animated transition
       (this transform brings its own reset — no global catch-all). */
    @media (prefers-reduced-motion: reduce) {
      header.container.site-header .nav-toggle span {
        transition: none;
      }
    }
    header.container.site-header .phone-call {
      justify-self: end;
      text-align: right;
      color: var(--site-chrome-accent);
      background: rgba(255, 156, 18, 0.12);
      border: 1px solid rgba(255, 198, 79, 0.58);
      border-radius: var(--radius-pill);
      padding: 0.44rem 0.9rem;
      font-size: clamp(0.9rem, 2.5vw, 1rem);
      font-weight: 700;
      text-decoration: none;
    }
    header.container.site-header nav li.active > a,
    header.container.site-header nav li.active > .programs-link {
      color: var(--site-chrome-accent);
      background: rgba(255, 198, 79, 0.1);
    }

    footer.container.site-footer { margin-top: 1rem; margin-bottom: 0.75rem; padding: clamp(0.62rem, 1.35vw, 0.86rem); }
    footer.container.site-footer .footer-top {
      display: grid;
      grid-template-columns: auto auto minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 0.55rem;
      row-gap: 0.6rem;
      width: auto;
      margin: 0;
      padding: 0;
      border-bottom: 0;
    }
    footer.container.site-footer .footer-brand img { height: clamp(88px, 24vw, 130px); width: auto; max-width: 100%; }
    footer.container.site-footer .footer-nav { grid-column: 1 / -1; }
    footer.container.site-footer .footer-nav a,
    footer.container.site-footer .footer-nav .programs-link,
    footer.container.site-footer .footer-legal-nav a,
    footer.container.site-footer .footer-address,
    footer.container.site-footer .copyright {
      color: #f8efff;
      font-size: clamp(0.95rem, 2.5vw, 1.03rem);
    }
    footer.container.site-footer .footer-address {
      color: #f1c66b;
      font-weight: 700;
      margin-top: 0.7rem;
      text-align: center;
    }
    footer.container.site-footer .footer-address a { color: inherit; text-decoration: none; }
    footer.container.site-footer .phone-call {
      justify-self: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      color: var(--site-chrome-accent);
      background: rgba(255, 156, 18, 0.12);
      border: 1px solid rgba(255, 198, 79, 0.58);
      border-radius: var(--radius-pill);
      padding: 0.32rem 0.68rem;
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.15;
      text-decoration: none;
      white-space: nowrap;
    }
    footer.container.site-footer .phone-call span { color: inherit; }
    footer.container.site-footer .footer-social { justify-self: center; }
    footer.container.site-footer .footer-legal-nav {
      margin-top: 0.45rem;
      gap: 0.32rem;
      text-align: center;
    }
    footer.container.site-footer .copyright { text-align: center; }


    @media (max-width: 1023px) {
      header.container.site-header,
      header.container.site-header.clearfix {
        display: flex;
      }
      header.container.site-header {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: clamp(0.38rem, 1.7vw, 0.7rem);
        row-gap: 0;
      }
      header.container.site-header .banner-header {
        order: 1;
        flex: 0 1 auto;
        min-width: 0;
      }
      header.container.site-header .banner-header img { max-width: min(39vw, 182px); }
      header.container.site-header .phone-call {
        order: 2;
        flex: 0 0 auto;
        white-space: nowrap;
        padding-inline: clamp(0.4rem, 1.55vw, 0.72rem);
        font-size: clamp(0.82rem, 2.6vw, 1rem);
      }
      header.container.site-header .nav-toggle {
        order: 3;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border-radius: 11px;
        gap: 4px;
      }
      /* gap tightens to 4px here → adjacent bar centers are 6px apart, so the
         X arms meet exactly at center at this breakpoint. */
      header.container.site-header .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }
      header.container.site-header .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }
      header.container.site-header nav {
        order: 4;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }
      header.container.site-header nav > ul {
        align-items: center;
        gap: 0.25rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-top: 0.45rem;
      }
      header.container.site-header nav li,
      header.container.site-header nav .has-dropdown {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
      }
      header.container.site-header nav a,
      header.container.site-header nav .programs-link {
        width: min(100%, 18rem);
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        color: #f8efff;
        font-size: clamp(1rem, 3.5vw, 1.12rem);
        justify-content: center;
        text-align: center;
      }
      header.container.site-header nav .has-dropdown > .submenu {
        width: min(100%, 18rem);
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0.15rem auto 0.35rem;
        padding: 0.35rem;
        border: 1px solid rgba(43, 34, 51, 0.12);
        border-radius: 12px;
        /* Beige paper surface — same centralized tokens as the desktop
           dropdowns so the expanded hamburger submenu belongs to the warm
           paper canvas (replaces the old translucent-white/gray panel). */
        background-color: var(--page-bg);
        background-image: var(--page-grain);
        background-repeat: repeat;
        background-size: 200px 200px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      header.container.site-header nav .submenu a {
        color: var(--text);
        font-family: inherit;
        font-size: clamp(0.95rem, 3.25vw, 1.04rem);
        text-align: center;
        justify-content: center;
        white-space: normal;
        overflow-wrap: anywhere;
        border-radius: 8px;
      }
      header.container.site-header nav .submenu a:hover,
      header.container.site-header nav .submenu a:focus-visible {
        color: var(--primary);
        background: var(--menu-hover-bg);
      }
      /* Programs row: the label is a real link to /programs and the chevron
         is a separate .submenu-toggle <button> (site.js) that alone opens the
         submenu. Both share one grid cell the same min(100%, 18rem) width as
         the sibling entries; the link reserves the chevron's width on both
         sides so its label stays centred in line with them, and the chevron
         overlays the row's right end. The submenu drops to row two. */
      header.container.site-header nav .has-dropdown {
        display: grid;
        grid-template-columns: min(100%, 18rem);
        justify-content: center;
      }
      header.container.site-header nav .has-dropdown > a,
      header.container.site-header nav .has-dropdown > .submenu-toggle {
        grid-area: 1 / 1;
      }
      header.container.site-header nav .has-dropdown > a {
        padding-inline: 2.75rem;
      }
      header.container.site-header nav .has-dropdown > .submenu-toggle {
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        min-height: 44px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #f8efff;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
      }
      header.container.site-header nav li.active > .submenu-toggle {
        color: var(--site-chrome-accent);
      }
      /* Same chevron + 180deg turn as the FAQ accordion, keyed off the
         aria-expanded state site.js mirrors onto the button. */
      header.container.site-header nav .submenu-toggle svg {
        width: 1.25rem;
        height: 1.25rem;
        transition: transform 0.3s ease;
      }
      header.container.site-header nav .submenu-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
      }
      header.container.site-header nav .has-dropdown > .submenu {
        grid-row: 2;
      }

      footer.container.site-footer .footer-top {
        grid-template-columns: max-content max-content;
        grid-template-areas:
          "brand aside"
          "nav nav";
        align-items: center;
        justify-content: center;
        justify-items: center;
        column-gap: clamp(0.65rem, 4vw, 1.25rem);
        row-gap: 0.5rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        text-align: center;
      }
      footer.container.site-footer .footer-brand {
        grid-area: brand;
        order: 1;
        justify-self: center;
        min-width: 0;
      }
      footer.container.site-footer .footer-brand img {
        width: min(42vw, 180px);
        max-width: 100%;
        height: auto;
      }
      footer.container.site-footer .footer-aside {
        grid-area: aside;
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        justify-self: center;
        min-width: 0;
        text-align: center;
      }
      footer.container.site-footer .footer-social {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
      }
      footer.container.site-footer .footer-nav {
        grid-area: nav;
        order: 4;
        width: 100%;
        justify-self: stretch;
      }
      /* Mobile footer nav: horizontal dot-separated row (the Menu toggle is
         gone). Ports the desktop (>=1024) dot pattern down — flex row, centered,
         literal "•" separator via li + li::before — tuned for the narrower
         mobile width with flex-wrap so 3 links + dots never overflow. Dots stay
         between links within each wrapped row. */
      footer.container.site-footer .footer-nav > ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.22rem;
      }
      footer.container.site-footer .footer-nav li {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
      }
      footer.container.site-footer .footer-nav li + li::before {
        content: "\2022";
        margin-inline-end: 0.22rem;
        color: #bbb;
      }
      footer.container.site-footer .footer-nav a,
      footer.container.site-footer .footer-nav .programs-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #f8efff;
        font-family: inherit;
        font-size: clamp(1rem, 3.2vw, 1.12rem);
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        padding: 10px clamp(0.3rem, 1.4vw, 0.5rem);
        appearance: none;
        -webkit-appearance: none;
      }
      footer.container.site-footer .footer-nav a:hover,
      footer.container.site-footer .footer-nav a:focus-visible {
        color: var(--primary);
      }
      footer.container.site-footer .footer-nav .has-dropdown > .submenu {
        position: static;
        transform: none;
        width: min(100%, 18rem);
        min-width: 0;
        max-width: 100%;
        margin: 0.15rem auto 0.35rem;
        padding: 0.35rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      footer.container.site-footer .footer-nav .submenu a {
        color: #f8efff;
        font-family: inherit;
        font-size: clamp(0.95rem, 3.25vw, 1.04rem);
        text-align: center;
        white-space: normal;
        border-radius: 8px;
      }
      footer.container.site-footer .footer-nav .submenu a:hover,
      footer.container.site-footer .footer-nav .submenu a:focus-visible {
        color: var(--site-chrome-accent);
        background: rgba(255, 255, 255, 0.1);
      }
      footer.container.site-footer .footer-legal-nav {
        margin-top: 0.7rem;
        justify-content: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      header.container.site-header nav .submenu-toggle svg {
        transition: none;
      }
    }

    @media (min-width: 1024px) {
      header.container.site-header {
        width: fit-content;
        max-width: calc(100% - clamp(0.7rem, 2vw, 1.5rem));
        grid-template-columns: auto max-content auto;
        justify-content: center;
        column-gap: clamp(0.85rem, 1.35vw, 1.35rem);
        padding: clamp(0.32rem, 0.62vw, 0.44rem) clamp(0.62rem, 1vw, 0.9rem);
      }
      header.container.site-header .banner-header { justify-self: end; }
      header.container.site-header .banner-header img { height: clamp(86px, 6.8vw, 116px); }
      header.container.site-header .nav-toggle { display: none; }
      /* Desktop: the Programs label is the /programs link and hover /
         focus-within below reveal its submenu, so the mobile chevron toggle
         is not shown. */
      header.container.site-header nav .submenu-toggle { display: none; }
      /* System A consolidation Run 1 (additive): port the desktop header
         dropdown popover from System A's `.site-nav .has-dropdown>.submenu`
         (min-width:1024 block, top of file) onto the System B selector, which
         keys off the static markup (header.container.site-header nav) instead
         of the JS-injected .site-nav class. Declarations copied 1:1 from the
         live System A rule. The System A original is retained as the live
         fallback for this run; specificity (0,4,2) / hover (0,5,2) lets these
         win where they overlap. The same selector is already used in-flow in
         the <=1023 block — these are its non-overlapping >=1024 counterparts. */
      header.container.site-header nav .has-dropdown { position: relative; }
      header.container.site-header nav .has-dropdown > .submenu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        min-width: 10rem;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
        /* Beige paper surface — reuses the centralized page canvas tokens so
           the popover belongs to the same warm paper as the site background. */
        background-color: var(--page-bg);
        background-image: var(--page-grain);
        background-repeat: repeat;
        background-size: 200px 200px;
        border: 0;
        border-radius: var(--radius);
        z-index: 1001;
        margin-top: 0;
      }
      header.container.site-header nav .has-dropdown:hover > .submenu,
      header.container.site-header nav .has-dropdown:focus-within > .submenu {
        display: block !important;
      }
      header.container.site-header nav {
        min-width: 0;
        justify-self: center;
      }
      header.container.site-header nav ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(0.16rem, 0.38vw, 0.34rem);
        flex-wrap: nowrap;
      }
      header.container.site-header nav li { flex: 0 0 auto; }
      header.container.site-header nav a,
      header.container.site-header nav .programs-link {
        color: #f8efff;
        font-size: clamp(1.08rem, 0.94vw, 1.16rem);
        padding-inline: clamp(0.3rem, 0.38vw, 0.42rem);
        white-space: nowrap;
      }
      /* Submenu links sit on the white popover, so they need the dark body
         text colour (the top-level header links are light on the dark bar). */
      .site-wrapper header.container.site-header nav .submenu a {
        color: var(--text);
      }
      /* Header link hover (desktop >=1024px): mirrors the footer nav link hover
         exactly (footer About/Contact/FAQs links use `color: var(--primary)` on
         :hover and :focus-visible — see media min-width:1024px below). Applied to
         ALL header links: the top-level links (Partnerships/Blog/Gallery/About
         Us) AND every dropdown submenu link. Only <a> elements match, so the
         dropdown toggle <button>s (.programs-link: Programs/Camps) are excluded and
         show no link hover. The .submenu selectors are repeated to clear the
         dark-text submenu base rule above by specificity + source order. */
      .site-wrapper header.container.site-header nav a:hover,
      .site-wrapper header.container.site-header nav a:focus-visible,
      .site-wrapper header.container.site-header nav .submenu a:hover,
      .site-wrapper header.container.site-header nav .submenu a:focus-visible {
        color: var(--primary);
      }
      /* Submenu items sit on the beige paper popover, so their hover/focus
         highlight is the warm paper-toned wash (not the old cold near-white).
         Scoped to .submenu a only — the top-level charcoal-bar links keep their
         no-background hover. */
      .site-wrapper header.container.site-header nav .submenu a:hover,
      .site-wrapper header.container.site-header nav .submenu a:focus-visible {
        background: var(--menu-hover-bg);
      }
      header.container.site-header .phone-call {
        grid-column: auto;
        justify-self: start;
        white-space: nowrap;
        color: var(--site-chrome-accent);
        font-size: clamp(0.94rem, 0.78vw, 1rem);
        padding: 0.4rem 0.68rem;
      }

      footer.container.site-footer {
        width: fit-content;
        max-width: min(820px, calc(100% - clamp(0.7rem, 2vw, 1.5rem)));
        margin-inline: auto;
        padding: clamp(0.45rem, 0.8vw, 0.62rem) clamp(0.72rem, 1.15vw, 0.95rem);
      }
      footer.container.site-footer .footer-top {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        justify-content: center;
        column-gap: clamp(1.5rem, 3vw, 2.5rem);
        row-gap: 0.5rem;
        width: auto;
      }
            footer.container.site-footer .footer-brand { grid-column: 1; grid-row: 1; }
      footer.container.site-footer .footer-brand img { height: clamp(112px, 7.8vw, 132px); }
      footer.container.site-footer .footer-nav {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
      }
      footer.container.site-footer .footer-nav > ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 0.22rem;
      }
      /* Dot-separated nav row: reproduce the .footer-legal-nav literal "•"
         (footer.php:59, U+2022, color #bbb) via a pseudo-element since the nav
         markup carries no separators. Matches the legal row exactly. */
      footer.container.site-footer .footer-nav li + li::before {
        content: "\2022";
        margin-inline-end: 0.22rem;
        color: #bbb;
      }
      footer.container.site-footer .footer-nav li { flex: 0 0 auto; display: inline-flex; align-items: center; }
      footer.container.site-footer .footer-nav a,
      footer.container.site-footer .footer-nav .programs-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #f8efff;
        font: inherit;
        font-size: clamp(1.08rem, 0.94vw, 1.16rem);
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        cursor: pointer;
        white-space: nowrap;
        padding: 10px clamp(0.3rem, 0.38vw, 0.42rem);
        appearance: none;
        -webkit-appearance: none;
      }
      footer.container.site-footer .footer-nav a:hover,
      footer.container.site-footer .footer-nav a:focus-visible,
      footer.container.site-footer .footer-nav .programs-link:hover,
      footer.container.site-footer .footer-nav .programs-link:focus-visible {
        color: var(--primary);
      }
      footer.container.site-footer .footer-nav .has-dropdown {
        position: relative;
      }
      footer.container.site-footer .footer-nav .has-dropdown > .submenu {
        display: none !important;
        position: absolute;
        top: auto;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        min-width: 240px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0;
        padding: 8px 0;
        list-style: none;
        /* Beige paper surface — matches the header dropdown (shared tokens). */
        background-color: var(--page-bg);
        background-image: var(--page-grain);
        background-repeat: repeat;
        background-size: 200px 200px;
        border: 0;
        border-radius: var(--radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1001;
      }
      footer.container.site-footer .footer-nav .has-dropdown:hover > .submenu,
      footer.container.site-footer .footer-nav .has-dropdown:focus-within > .submenu {
        display: block !important;
      }
      footer.container.site-footer .footer-nav .submenu a {
        display: block;
        min-height: auto;
        width: 100%;
        padding: 10px 14px;
        border-radius: 0;
        color: var(--text);
        background: transparent;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.4;
        text-align: left;
        white-space: nowrap;
      }
      footer.container.site-footer .footer-nav .submenu a:hover,
      footer.container.site-footer .footer-nav .submenu a:focus-visible {
        background: var(--menu-hover-bg);
        color: var(--text);
      }
      footer.container.site-footer .footer-top > .footer-aside {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        min-width: max-content;
        text-align: center;
      }
      footer.container.site-footer .footer-top > .footer-aside .phone-call {
        padding: 0.34rem 0.68rem;
        font-size: clamp(0.94rem, 0.76vw, 1rem);
        line-height: 1.15;
      }
      footer.container.site-footer .footer-top > .footer-aside .footer-social {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.42rem;
        width: 100%;
      }
      footer.container.site-footer .footer-legal-nav {
        gap: 0.22rem;
        margin-top: 0.06rem;
      }
      /* Legal links hover (desktop >=1024px): mirrors the footer nav link hover
         and header link hover exactly (color: var(--primary) on :hover and
         :focus-visible). Brings Terms/Privacy in line with the rest of the
         site's link hover treatment. Desktop only — no mobile rule changes. */
      footer.container.site-footer .footer-legal-nav a:hover,
      footer.container.site-footer .footer-legal-nav a:focus-visible {
        color: var(--primary);
      }
      footer.container.site-footer .footer-address,
      footer.container.site-footer .copyright { text-align: center; font-size: 1.03rem; }
    }


/* Run-6 program page assimilation styles */
.program-page {
  --program-orange-400: #ffc64f;
  --program-orange-300: #ffdd8b;
  --program-white: #ffffff;
  --program-text-soft: #f4ecff;
  --program-shadow-lg: var(--shadow-lg);
  --program-radius-lg: var(--radius-lg);
  --program-radius-md: var(--radius-md);
  /* PAGE-LEVEL FALLBACK = sitewide purple accent. A page's own chrome (eyebrow,
     panels, headings) is purple unless the page maps to one clean STEM subject.
     Subject pages override this below; subject CARDS carry their own color. */
  --program-accent: var(--accent-purple);
  --program-accent-soft: rgba(198, 140, 255, 0.2);
  --program-accent-glow: rgba(198, 140, 255, 0.45);
  color: var(--program-white);
  padding: clamp(1rem, 2vw, 1.5rem) 0 2.8rem;
}

/* SUBJECT PAGES — the whole page carries its locked STEM color, applied heavily.
   Higher soft/glow values than the page-level purple so the subject reads loud
   across pills, panels, headings, lists, and glows. */


/* Engineering = the locked Engineering STEM color (#f8ae20). Same token as the
   Robotics page, applied here as Engineering's own subject color. */

/* Test Prep has no clean STEM mapping — it uses the standard purple, but at the
   louder subject-page intensity so the page still feels strongly accented. */

/* Robotics = Engineering color (#f8ae20), applied as the page's subject color. */

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

.program-page__inner {
  width: min(1480px, calc(100% - clamp(1rem, 4vw, 4rem)));
  margin-inline: auto;
}

.program-hero,
.program-panel {
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: var(--program-shadow-lg);
  overflow: hidden;
}

.program-hero {
  position: relative;
  isolation: isolate;
  width: fit-content;
  min-width: min(340px, 100%);
  max-width: min(92%, 52rem);
  margin-inline: auto;
  box-sizing: border-box;
  min-height: clamp(99px, 10.8vw, 140px);
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: var(--program-radius-lg);
  background:
    radial-gradient(circle at 14% 18%, var(--program-accent-soft), transparent 33%),
    radial-gradient(circle at 86% 16%, var(--program-accent-soft), transparent 28%),
    linear-gradient(145deg, rgba(111, 55, 166, 0.92), rgba(99, 49, 149, 0.98));
  padding: clamp(0.67rem, 1.6vw, 1.13rem) clamp(2.35rem, 6vw, 4.75rem);
}

/* TITLE-ONLY HEADER PILL. Pages whose hero carries the page name alone (no
   category label above it) keep the identical pill treatment — same gradient,
   radius, border, shadow, inset ring and inline padding — but the base
   min-height was sized for the two-line eyebrow + title stack, so on its own the
   title floated in ~40px of dead space. This modifier lowers ONLY min-height, to
   about the same slack over natural content height the stacked version had.
   Additive and opt-in: heroes without the class (camps banner, any future hero
   that keeps a label) are untouched. */
.program-hero--title-only {
  min-height: clamp(68px, 6.9vw, 100px);
}

.program-hero::before {
  content: "";
  position: absolute;
  inset: clamp(0.6rem, 1.5vw, 1rem);
  border-radius: calc(var(--program-radius-lg) - 8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Amethyst audit: this inset scrim was rgba(8,9,12,.48)->(.18), which dragged
     the hero's inner panel down to L* 21.9..27.4 — below the Amethyst band and
     the main reason interior page banners still read as the old dark treatment.
     Lightened to .22->.08 so the inner panel lands at L* 31.7..30.5, inside the
     band and still a touch deeper than the un-scrimmed ring at the edges. White
     hero text stays 8.8:1. */
  background: linear-gradient(175deg, rgba(8, 9, 12, 0.22), rgba(8, 9, 12, 0.08));
  z-index: -1;
  pointer-events: none;
}

.program-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 0.38rem;
  color: var(--program-accent);
  font-size: clamp(0.72rem, 0.85vw, 0.84rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.program-eyebrow::before,
.program-eyebrow::after {
  content: "";
  width: clamp(1.15rem, 3.5vw, 2.25rem);
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--program-accent));
}

.program-eyebrow::after {
  background: linear-gradient(90deg, var(--program-accent), transparent);
}

/* AMPLIFIED EYEBROW — NESTED "PILL-IN-PILL". The eyebrow reads as a glowing
   inner bubble nested inside an outer accent pill. Built with no extra markup:
   the <p> is the outer pill (accent border + fill); stacked inset shadows paint
   a dark gap band and then a 1px accent ring just inside it, forming a
   concentric inner bubble around the label. Applies on program/camp pages AND
   the about/contact heroes so every hero eyebrow shares the identical nested
   treatment. Color follows each page's own --program-accent (purple on program
   pages, gold on about/contact) — this is PAGE CHROME, not card subject color. */
.program-page .program-eyebrow,
.about-page .program-eyebrow,
.contact-page .program-eyebrow {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--program-accent);
  background:
    linear-gradient(135deg, var(--program-accent-soft), rgba(255, 255, 255, 0.04));
  box-shadow:
    0 0 18px var(--program-accent-glow),                  /* outer subject glow */
    inset 0 0 0 4px rgba(12, 5, 28, 0.55),                /* dark gap band */
    inset 0 0 0 5px var(--program-accent-soft),           /* inner-bubble ring */
    inset 0 0 14px -2px var(--program-accent-glow),       /* inner-bubble glow */
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: var(--program-accent);
  text-shadow: 0 0 12px var(--program-accent-glow);
}

.program-page .program-eyebrow::before,
.program-page .program-eyebrow::after,
.about-page .program-eyebrow::before,
.about-page .program-eyebrow::after,
.contact-page .program-eyebrow::before,
.contact-page .program-eyebrow::after {
  display: none;
}

.program-title {
  margin: 0;
  color: #fffefb;
  font-size: clamp(1.75rem, 4.1vw, 3.45rem);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.52);
}

/* Robotics — keep the short hero title on one line, prevent awkward wrap on wide viewports */

/* Gold hero chrome — single source for the gold hero accent.
   .contact-hero / .about-hero-section supply program-hero token defaults for the
   About/Contact pages (which don't use .program-page). The legal hero is added
   here too so the two legal pages get the IDENTICAL gold accent from the same
   rule — change the gold once and all pages update together. The off-template
   pages (blog/faqs/gallery) use the standard .program-hero header as well, so
   their heroes are added here to inherit the same gold the standard way. Scoped
   to the hero, so only the hero's own tint and glow go gold; legal body copy
   keeps the purple .program-page accent. No other page's hero is touched.
   (Task 11 removed the category eyebrow these heroes used to carry; the tokens
   below still drive the hero background tint and glow, so the gold reads the
   same.) */
.contact-hero,
.about-hero-section,
.program-page--legal .program-hero,
.program-page--blog .program-hero,
.program-page--faqs .program-hero,
.program-page--gallery .program-hero {
  --program-orange-400: var(--site-chrome-accent);
  --program-accent: var(--program-orange-400);
  --program-accent-soft: rgba(255, 198, 79, 0.18);
  --program-accent-glow: rgba(255, 156, 18, 0.48);
  /* About/Contact <main> never defines the .program-page radius/shadow tokens,
     so .program-hero's border-radius/box-shadow resolved to nothing (square
     corners, no drop shadow). Supply the same defaults the program pages use. */
  --program-radius-lg: var(--radius-lg);
  --program-shadow-lg: var(--shadow-lg);
}

.program-section {
  margin-top: clamp(1rem, 2.8vw, 1.55rem);
}

.program-panel {
  border-radius: var(--program-radius-lg);
  /* Opaque-dark base (was translucent white, which only read as dark over the
     old #bg-layer). Same value legal already used, so it stays dark on beige. */
  background:
    radial-gradient(circle at 8% 8%, var(--program-accent-soft), transparent 32%),
    radial-gradient(circle at 92% 10%, var(--program-accent-soft), transparent 26%),
    linear-gradient(148deg, rgba(94, 47, 141, 0.86), rgba(97, 48, 145, 0.92));
  backdrop-filter: blur(1px);
  padding: clamp(1.25rem, 3vw, 2.4rem);
}

.program-content {
  color: var(--program-text-soft);
  font-size: clamp(1rem, 1vw, 1.08rem);
  line-height: 1.72;
  text-shadow: var(--text-shadow-md);
  scroll-margin-top: 120px;
}


.program-content > h3 {
  max-width: min(100%, 1100px);
  margin: 0 auto clamp(1rem, 2.2vw, 1.75rem);
  color: #fffefb;
  text-align: center;
  font-size: clamp(1.45rem, 1.45vw + 0.95rem, 2.45rem);
  font-weight: 800;
  letter-spacing: clamp(0.005em, 0.08vw, 0.035em);
  line-height: 1.2;
  text-wrap: balance;
  border: 1px solid var(--program-accent);
  border-top-width: 5px;
  border-bottom-width: 2px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, var(--program-accent-soft), transparent 46%),
    linear-gradient(145deg, rgba(111, 55, 166, 0.95), rgba(101, 50, 151, 0.98));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.34),
    0 0 22px var(--program-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  text-shadow: var(--text-shadow-lg);
  padding: clamp(1rem, 1.8vw, 1.45rem) clamp(1rem, 2.3vw, 2rem) clamp(0.9rem, 1.6vw, 1.25rem);
}

.program-content > h3::after {
  content: "";
  display: block;
  width: clamp(88px, 12vw, 160px);
  height: 4px;
  margin: 0.72rem auto 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--program-accent) 18%, var(--program-accent) 82%, transparent);
  box-shadow: 0 0 14px var(--program-accent-glow);
}

.program-content h4,
.program-content .subsection-lead {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: clamp(1.45rem, 3vw, 2.15rem) 0 0.72rem;
  border-left: 4px solid var(--program-accent);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: linear-gradient(90deg, var(--program-accent-soft), rgba(255, 255, 255, 0.035));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.2),
    0 0 12px var(--program-accent-glow);
  color: #fffefb;
  font-size: clamp(1.08rem, 0.72vw + 0.95rem, 1.42rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.28;
  padding: 0.42rem 0.95rem 0.42rem 0.82rem;
}

.program-content .subsection-lead strong {
  color: inherit;
}

.program-content .centered.subsection-lead {
  margin-inline: auto;
  border-radius: var(--radius-pill);
  border-left-width: 0;
  box-shadow: inset 0 0 0 1px var(--program-accent-soft), 0 10px 22px rgba(0, 0, 0, 0.16);
  text-align: center;
}

.program-content p {
  margin: 0 0 0.95rem;
}


.program-content strong {
  color: #fffefb;
}

.program-content ul {
  display: grid;
  gap: 0.72rem;
  margin: 0.65rem 0 1.2rem;
  padding-left: 1.35rem;
}

.program-content li {
  margin: 0;
  border-left: 4px solid var(--program-accent);
  border-radius: 0 13px 13px 0;
  background: linear-gradient(100deg, var(--program-accent-soft), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  padding: 0.66rem 0.82rem 0.7rem 0.86rem;
}

.program-content li::marker {
  color: var(--program-accent);
}

.program-content .centered {
  text-align: center;
}

.program-content .program-hero {
  max-width: min(100%, 980px);
  margin: 0 auto clamp(1.1rem, 2.4vw, 1.7rem);
  border: 2px solid var(--program-accent);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--program-accent-soft), rgba(78, 39, 116, 0.78));
  box-shadow:
    0 20px 36px rgba(0, 0, 0, 0.4),
    0 0 20px var(--program-accent-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  padding: 5px;
}

.program-content .program-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(240px, 44vw, 560px);
  object-fit: contain;
  border-radius: 16px;
  background: rgba(78, 39, 116, 0.3);
}


@media (min-width: 701px) and (max-width: 1100px) {
  .program-page .program-panel.program-content {
    padding: clamp(1.15rem, 2.8vw, 1.85rem);
  }


  .program-page .program-content > h3 {
    border-radius: 20px;
    padding: 1rem clamp(1rem, 3vw, 1.55rem) 0.95rem;
  }

  .program-page .program-content h4,
  .program-page .program-content .subsection-lead {
    margin-top: 1.7rem;
  }
}

@media (max-width: 700px) {
  .program-page {
    padding-top: 0.9rem;
    padding-bottom: 3.5rem;
  }

  .program-page .program-page__inner {
    width: min(100%, calc(100% - 1rem));
  }

  .program-page .program-hero,
  .about-page .program-hero,
  .contact-page .program-hero {
    width: fit-content;
    max-width: calc(100% - 1rem);
    min-height: 95px;
    padding-block: 0.67rem;
    padding-inline: clamp(1.55rem, 7vw, 2.35rem);
  }

  /* Title-only pill — mobile counterpart of the min-height reduction above.
     Needs the .program-page/.about-page/.contact-page prefix to outrank the
     95px min-height set for the stacked hero a few rules up. */
  .program-page .program-hero--title-only,
  .about-page .program-hero--title-only,
  .contact-page .program-hero--title-only {
    min-height: 60px;
  }

  .program-page .program-eyebrow,
  .about-page .program-eyebrow,
  .contact-page .program-eyebrow {
    font-size: 0.72rem;
  }

  .program-page .program-eyebrow::before,
  .program-page .program-eyebrow::after,
  .about-page .program-eyebrow::before,
  .about-page .program-eyebrow::after,
  .contact-page .program-eyebrow::before,
  .contact-page .program-eyebrow::after {
    width: 1.3rem;
  }

  .program-page .program-title,
  .about-page .program-title,
  .contact-page .program-title {
    font-size: 1.75rem;
  }

  .program-page .program-section {
    margin-top: 1.25rem;
  }

  .program-page .program-panel.program-content {
    border: 2px solid var(--program-accent);
    border-radius: 20px;
    background:
      radial-gradient(circle at 4% 2%, var(--program-accent-soft), transparent 34%),
      radial-gradient(circle at 96% 16%, var(--program-accent-soft), transparent 30%),
      linear-gradient(152deg, rgba(106, 53, 159, 0.98), rgba(93, 46, 139, 0.99) 58%, rgba(86, 43, 128, 0.99));
    box-shadow:
      0 22px 38px rgba(5, 2, 17, 0.58),
      0 0 0 1px rgba(255, 255, 255, 0.12),
      0 0 25px var(--program-accent-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: var(--program-text-soft);
    font-size: 1rem;
    line-height: 1.72;
    padding: 1.15rem 1rem 1.35rem;
  }

  /* PROGRAM MOBILE BODY STRUCTURE V2 */


  .program-page .program-content > h3 {
    max-width: 100%;
    margin: 0 0 1.35rem;
    border: 1px solid var(--program-accent);
    border-top-width: 4px;
    border-bottom-width: 2px;
    border-radius: 16px;
    background:
      radial-gradient(circle at 10% 0%, var(--program-accent-soft), transparent 48%),
      linear-gradient(145deg, rgba(109, 55, 164, 0.96), rgba(99, 49, 149, 0.98));
    box-shadow:
      0 13px 24px rgba(0, 0, 0, 0.34),
      0 0 18px var(--program-accent-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
    font-size: clamp(1.22rem, 5.4vw, 1.58rem);
    letter-spacing: 0;
    line-height: 1.28;
    padding: 0.9rem 0.78rem 0.78rem;
    text-wrap: balance;
  }

  .program-page .program-content > h3::after {
    width: min(54%, 148px);
    height: 4px;
    margin-top: 0.72rem;
    background: linear-gradient(90deg, transparent, var(--program-accent) 18%, var(--program-accent) 82%, transparent);
    box-shadow: 0 0 15px var(--program-accent-glow);
  }

  .program-page .program-content h4,
  .program-page .program-content .subsection-lead {
    width: fit-content;
    max-width: 100%;
    margin: 1.55rem 0 0.82rem;
    border: 1px solid var(--program-accent);
    border-left-width: 5px;
    border-radius: 0 18px 18px 0;
    background: linear-gradient(100deg, var(--program-accent-soft), rgba(105, 52, 158, 0.94) 72%);
    box-shadow:
      0 8px 17px rgba(0, 0, 0, 0.28),
      0 0 12px var(--program-accent-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fffefb;
    font-size: clamp(1rem, 4.5vw, 1.16rem);
    line-height: 1.34;
    overflow-wrap: anywhere;
    padding: 0.54rem 0.78rem 0.58rem 0.72rem;
  }

  .program-page .program-content .centered.subsection-lead {
    margin-inline: auto;
    border-left-width: 1px;
    border-radius: 18px;
    text-align: center;
  }

  .program-page .program-content p {
    margin-bottom: 1.08rem;
  }

  .program-page .program-content ul {
    display: grid;
    gap: 0.62rem;
    margin: 0.7rem 0 1.3rem;
    padding-left: 1.18rem;
  }

  .program-page .program-content li {
    margin: 0;
    border-left: 3px solid var(--program-accent);
    border-radius: 0 11px 11px 0;
    background: linear-gradient(100deg, var(--program-accent-soft), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    padding: 0.58rem 0.68rem 0.62rem 0.72rem;
  }

  .program-page .program-content li::marker {
    color: var(--program-accent);
    font-size: 1.12em;
  }

  .program-page .program-content .program-hero {
    max-width: 100%;
    margin: 0 auto 1.35rem;
    border: 2px solid var(--program-accent);
    border-radius: 17px;
    background: linear-gradient(145deg, var(--program-accent-soft), rgba(78, 39, 116, 0.78));
    box-shadow:
      0 14px 27px rgba(0, 0, 0, 0.42),
      0 0 18px var(--program-accent-glow),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    overflow: hidden;
    padding: 4px;
  }

  .program-page .program-content .program-hero img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
  }
}

/* ============================================================
   SCHEDULE CARD COMPONENT
   Used by: robotics.php (Phase 5) — reusable for camp pages
   ============================================================ */

.schedule-card {
  border-radius: var(--program-radius-lg);
  border: 1px solid var(--program-accent-soft);
  background:
    radial-gradient(circle at 8% 8%, var(--program-accent-soft), transparent 32%),
    radial-gradient(circle at 92% 10%, var(--program-accent-soft), transparent 26%),
    linear-gradient(148deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  box-shadow: var(--program-shadow-lg);
  backdrop-filter: blur(1px);
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.4rem);
}

.schedule-intro {
  text-align: center;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 2px solid var(--program-accent-soft);
}

.schedule-intro h2 {
  color: #fffefb;
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 0.65rem;
  letter-spacing: 0.01em;
  text-shadow: var(--text-shadow-sm);
}

.schedule-intro p {
  color: var(--program-text-soft);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  margin: 0.5rem 0;
}

.price-highlight {
  display: block;
  text-align: center;
  width: fit-content;
  margin-inline: auto;
  background: linear-gradient(128deg, var(--program-accent), var(--program-orange-300));
  color: #3d1800;
  font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  border-radius: var(--radius-pill);
  padding: 0.38rem 1.15rem;
  margin-top: 0.85rem;
  box-shadow: 0 0 16px var(--program-accent-glow);
}

.schedule-pricing-note {
  display: block;
  text-align: center;
  font-size: 0.95rem;
  color: var(--program-text-soft);
  opacity: 0.72;
  margin-top: 0.4rem;
}

/* Subheading sitting directly above the day-boxes grid */

.week-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.35rem);
  max-width: 900px;
  margin-inline: auto;
}

.day-box {
  background:
    radial-gradient(circle at 50% 0%, var(--program-accent-soft), transparent 58%),
    linear-gradient(145deg, rgba(105, 52, 158, 0.96), rgba(93, 47, 140, 0.98));
  border: 1px solid var(--program-accent-soft);
  border-radius: var(--program-radius-md);
  padding: clamp(0.95rem, 2vw, 1.35rem);
  text-align: center;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.day-box:hover {
  transform: translateY(-4px);
  border-color: var(--program-accent);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.36),
    0 0 18px var(--program-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.day-name {
  display: block;
  font-weight: 800;
  color: var(--program-accent);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.55rem;
  text-shadow: 0 0 10px var(--program-accent-glow);
}

.class-name {
  display: block;
  font-weight: 600;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  color: var(--program-text-soft);
  margin-bottom: 0.35rem;
}

.class-time {
  display: block;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  color: var(--program-text-soft);
  opacity: 0.72;
}

@media (max-width: 600px) {
  .week-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MODAL COMPONENT
   Used by: includes/program-inquiry-modal.php (programs/*.php)
   ============================================================ */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}

.modal-content {
  position: relative;
  background: linear-gradient(148deg, rgba(104, 52, 157, 0.98), rgba(93, 47, 140, 0.99));
  border: 1px solid var(--program-accent-soft);
  border-radius: var(--program-radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 40px var(--program-accent-glow);
  width: clamp(300px, 90vw, 720px);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.modal-image {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
  border-radius: var(--program-radius-lg) var(--program-radius-lg) 0 0;
}

.modal-body {
  padding: clamp(1.25rem, 4vw, 2rem);
  color: #fffefb;
}

.modal-body h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: #fffefb;
  margin: 0 0 1rem;
}

.modal-body p {
  color: var(--program-text-soft);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  margin: 0.65rem 0;
}

.modal-body ul {
  margin: 0.65rem 0 0.65rem 1.25rem;
  color: var(--program-text-soft);
}

.modal-body li {
  margin: 0.4rem 0;
  font-size: clamp(0.93rem, 1.1vw, 1.02rem);
}

.modal-body strong {
  color: #fffefb;
}

.modal-footer {
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
  border-top: 1px solid var(--program-accent-soft);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.close-btn {
  /* sticky keeps the button visible as modal-content scrolls;
     float: right places it at the top-right corner over the banner image */
  position: sticky;
  top: 0.65rem;
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fffefb;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  z-index: 10;
  transition: color 0.2s ease, background 0.2s ease;
}

.close-btn:hover {
  color: #fffefb;
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   MODAL STEM SUBJECT STRIPES
   Top accent stripe matching the card's STEM subject colors
   ============================================================ */

.modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--program-accent, #ffc64f), var(--program-accent, #ffc64f));
  border-radius: 26px 26px 0 0;
  z-index: 2;
  pointer-events: none;
}

.modal--stem-eng-tech .modal-content::before {
  background: linear-gradient(90deg, var(--stem-engineering, #f8ae20), var(--stem-technology, #0662b8));
}

.modal--stem-sci-eng-tech .modal-content::before {
  background: linear-gradient(90deg, var(--stem-science, #129b59), var(--stem-engineering, #f8ae20), var(--stem-technology, #0662b8));
}

.modal--stem-tech-math .modal-content::before {
  background: linear-gradient(90deg, var(--stem-technology, #0662b8), var(--stem-math, #fc1002));
}


/* Modal header accent — subtle subject-colored tint fading down from the
   image into the header area, matching each card's STEM colors. */
.modal--stem-eng-tech .modal-body {
  background: linear-gradient(180deg, rgba(248, 174, 32, 0.1), transparent 140px);
}

.modal--stem-sci-eng-tech .modal-body {
  background: linear-gradient(180deg, rgba(18, 155, 89, 0.1), transparent 140px);
}

.modal--stem-tech-math .modal-body {
  background: linear-gradient(180deg, rgba(6, 98, 184, 0.1), transparent 140px);
}


/* ============================================================
   CTA BUTTONS
   Used by: summer-camps.php, past-camps.php
   ============================================================ */

/* .cta-button is the SINGLE sitewide primary button. Its appearance (dark
   zinc base + indigo->purple->pink glow + arrow) is defined once, globally, in
   the "GLOW GRADIENT BUTTON" section near the end of this file. Modals live
   inside <body class="site-wrapper">, so the .site-wrapper-scoped glow rule
   reaches them too — no unscoped gold fallback is needed here anymore. */

/* .cta-button-secondary is the SINGLE sitewide SECONDARY button ("Dimmed Glow").
   It is the primary glow base with a quieter gradient, for the lesser action
   when two buttons sit side by side. Its appearance is defined globally in the
   "GLOW GRADIENT BUTTON" section near the end of this file: it shares the glow
   base/arrow rules with .cta-button and then a dimmed override drops the glow
   opacity. No gold outline anymore. */

.btn-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-group--center {
  justify-content: center;
}

/* ============================================================
   CAMP CARDS COMPONENT
   Used by: summer-camps.php, past-camps.php
   ============================================================ */

.camp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}


/* Desktop/tablet: both grids are 2 columns. With 4 afternoon cards this
   yields the required 2 columns x 2 rows layout. */
@media (min-width: 640px) {
  .camp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: single column with extra separation so each stacked card reads
   as a clearly distinct block. */
@media (max-width: 639px) {
  .camp-grid {
    gap: 2rem;
  }
}

/* Single-card grid (past-camps.php): stay 1 column, center in container */
.camp-grid--single {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Card root */
.camp-card {
  --card-accent: var(--program-accent);
  --card-accent-soft: var(--program-accent-soft);
  --card-accent-glow: var(--program-accent-glow);
  /* Ordered subject palette (primary -> secondary -> tertiary). Modifiers set
     -1/-2/-3 to var(--stem-*) names; here -2 falls back to -1 and -3 to -2, so a
     card that names fewer subjects collapses cleanly to its primary with no extra
     hue. --card-accent (border/hover-glow/top-stripe) stays the primary = -1. */
  --card-accent-1: var(--card-accent);
  --card-accent-2: var(--card-accent-1);
  --card-accent-3: var(--card-accent-2);
  /* Soft (~0.6 alpha) tint of each subject, derived from the opaque -N tokens so
     the zoned body wash can read every subject as a distinct, clearly-visible band
     over the dark base. 0.6 keeps it a tint (dark base still shows through), not
     opaque. */
  --card-soft-1: color-mix(in srgb, var(--card-accent-1) 60%, transparent);
  --card-soft-2: color-mix(in srgb, var(--card-accent-2) 60%, transparent);
  --card-soft-3: color-mix(in srgb, var(--card-accent-3) 60%, transparent);
  /* Body wash = equal 135° diagonal bands, one per subject, soft tints over the
     dark base. Default = equal THIRDS (3-subject cards; single-subject collapses
     to one even solid tint since -2/-3 fall back to -1). 2-subject modifiers
     override this token to equal HALVES. Small ~6% seams blend the band edges. */
  --card-body-wash: linear-gradient(135deg,
    var(--card-soft-1) 0%,
    var(--card-soft-1) 30%,
    var(--card-soft-2) 36%,
    var(--card-soft-2) 64%,
    var(--card-soft-3) 70%,
    var(--card-soft-3) 100%);
  /* Subject-tinted background DEPTH — a corner radial wash plus a diagonal sweep
     (both driven by --card-accent-soft) over the dark base, so the whole interior
     reads its STEM subject. This is the "tasteful middle" between flat-dark and
     index.php's solid subject fill; dial richness with the one token
     --card-accent-soft (per modifier or globally). */
  background:
    radial-gradient(125% 90% at 0% 0%, var(--card-accent-soft), transparent 62%),
    linear-gradient(135deg, var(--card-accent-soft) 0%, transparent 58%),
    linear-gradient(148deg, rgba(104, 52, 155, 0.82), rgba(94, 47, 142, 0.88));
  /* Strong subject-colored border + persistent subject glow so each card reads
     its STEM subject instantly, not just via the thin top stripe. */
  border: 1.5px solid var(--card-accent);
  border-radius: var(--program-radius-md, 18px);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Resting glow kept intentionally soft so the hover glow visibly grows. */
  box-shadow:
    0 0 0 1px var(--card-accent-soft),
    0 8px 20px rgba(0, 0, 0, 0.35),
    0 0 12px var(--card-accent-glow);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.camp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--card-top-stripe, linear-gradient(90deg, var(--card-accent), var(--card-accent)));
  border-radius: var(--program-radius-md, 18px) var(--program-radius-md, 18px) 0 0;
  z-index: 1;
  pointer-events: none;
}

/* Hover GLOW must be unmistakably the subject color and clearly stronger than
   rest: a solid subject ring plus a doubled (near + far) subject glow halo,
   all driven by --card-accent-glow / --card-accent. */
.camp-card:hover,
.camp-card:focus-within {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1.5px var(--card-accent),
    0 16px 34px rgba(0, 0, 0, 0.45),
    0 0 28px var(--card-accent-glow),
    0 0 56px var(--card-accent-glow);
}

/* Color modifiers — STEM subject colors.
   Each modifier sets only the subject TOKENS (--card-accent / -soft / -glow)
   and a STEM gradient top stripe (--card-top-stripe). The subject background
   DEPTH, border, glow and hover are all rendered by the .camp-card base off
   these tokens, so a single token value drives the whole card's intensity.
   Multi-subject cards (e.g. eng+tech) keep the blended top stripe.
   The gold UI accent (--program-accent) is intentionally NOT used here. */
.camp-card--eng {
  /* Engineering (robotics) + Technology (coding) */
  --card-accent-1: var(--stem-engineering);
  --card-accent-2: var(--stem-technology);
  --card-accent: var(--card-accent-1);
  --card-accent-soft: rgba(248, 174, 32, 0.42);
  --card-accent-glow: rgba(248, 174, 32, 0.62);
  --card-top-stripe: linear-gradient(90deg, var(--stem-engineering), var(--stem-technology));
  /* 2-subject: equal halves */
  --card-body-wash: linear-gradient(135deg,
    var(--card-soft-1) 0%, var(--card-soft-1) 44%,
    var(--card-soft-2) 50%, var(--card-soft-2) 100%);
}

.camp-card--sci {
  /* Science (physics/chem) + Engineering (robotics) + Technology (coding) */
  --card-accent-1: var(--stem-science);
  --card-accent-2: var(--stem-engineering);
  --card-accent-3: var(--stem-technology);
  --card-accent: var(--card-accent-1);
  --card-accent-soft: rgba(18, 155, 89, 0.42);
  --card-accent-glow: rgba(18, 155, 89, 0.62);
  --card-top-stripe: linear-gradient(90deg, var(--stem-science), var(--stem-engineering), var(--stem-technology));
}

.camp-card--math {
  /* Technology (coding) + Math */
  --card-accent-1: var(--stem-technology);
  --card-accent-2: var(--stem-math);
  --card-accent: var(--card-accent-1);
  --card-accent-soft: rgba(6, 98, 184, 0.42);
  --card-accent-glow: rgba(6, 98, 184, 0.62);
  --card-top-stripe: linear-gradient(90deg, var(--stem-technology), var(--stem-math));
  /* 2-subject: equal halves */
  --card-body-wash: linear-gradient(135deg,
    var(--card-soft-1) 0%, var(--card-soft-1) 44%,
    var(--card-soft-2) 50%, var(--card-soft-2) 100%);
}

.camp-card--adv {
  /* Engineering (robotics) + Technology (coding) */
  --card-accent-1: var(--stem-engineering);
  --card-accent-2: var(--stem-technology);
  --card-accent: var(--card-accent-1);
  --card-accent-soft: rgba(248, 174, 32, 0.42);
  --card-accent-glow: rgba(248, 174, 32, 0.62);
  --card-top-stripe: linear-gradient(90deg, var(--stem-engineering), var(--stem-technology));
  /* 2-subject: equal halves */
  --card-body-wash: linear-gradient(135deg,
    var(--card-soft-1) 0%, var(--card-soft-1) 44%,
    var(--card-soft-2) 50%, var(--card-soft-2) 100%);
}


/* Card internals */
.camp-card__image {
  width: 100%;
  height: clamp(120px, 16vw, 160px);
  object-fit: cover;
  display: block;
  transition: var(--transition-zoom);
}

/* Liveness: image zooms on hover/keyboard-focus, clipped by the card's
   existing overflow:hidden. Image-only addition — card bg/box-shadow/accent
   composition is untouched (B6 locked). */
.camp-card:hover .camp-card__image,
.camp-card:focus-within .camp-card__image {
  transform: scale(var(--zoom-img));
}

/* Reduced-motion guard for the camp card lifts (a pre-existing gap) and the
   camp image zoom added above. Resets transforms flat and disables
   the transitions; lift/zoom VALUES are unchanged. */
@media (prefers-reduced-motion: reduce) {
  .camp-card,
    .camp-card__image {
    transition: none;
  }
  .camp-card:hover,
    .camp-card:focus-within {
    transform: none;
  }
  .camp-card:hover .camp-card__image,
  .camp-card:focus-within .camp-card__image {
    transform: none;
  }
}

.camp-card__body {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Subject wash on the body: the card's corner radial sits under the opaque
     image, so the body below it would read flat dark. The body is where the
     subject color pools as equal diagonal bands — see --card-body-wash. */
  background: var(--card-body-wash);
}

.camp-card__title {
  font-size: clamp(0.85rem, 1.3vw + 0.22rem, 1.3rem);
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.015em;
  /* Solid WHITE title for maximum readability over the multi-color subject bands.
     The previous gradient/clip treatment was removed because clipped subject-color
     text was hard to read against the colored bands behind it. inline-block +
     max-width:100% with the inherited overflow:hidden + white-space:nowrap
     preserve ellipsis truncation. */
  display: inline-block;
  max-width: 100%;
  color: #fff;
}

.camp-card__meta {
  font-weight: 700;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  color: var(--card-accent);
  margin: 0;
}

.camp-card__body p {
  color: var(--program-text-soft, #f4ecff);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

.camp-card__body h4 {
  color: #fffefb;
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  font-weight: 700;
  margin: 0;
}

.camp-card__body h5 {
  color: var(--program-text-soft, #f4ecff);
  font-size: clamp(0.82rem, 1vw, 0.92rem);
  font-weight: 500;
  margin: 0;
}

.camp-card__actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.75rem;
}

.camp-card__actions .cta-button,
.camp-card__actions .cta-button-secondary {
  flex: 1;
  min-width: 100px;
  text-align: center;
  justify-content: center;
}

/* Skill level badge — solid dark pill in the card's top-right corner.
   Deliberately neutral (no STEM color, no gold UI accent) so it reads as a
   tag rather than a subject signal. Mirrored in the matching modal body. */
.camp-skill-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.modal-skill-badge {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ============================================================
   CAMP LOGISTICS COMPONENT
   Used by: summer-camps.php
   ============================================================ */

.camp-logistics {
  border: 1px solid var(--program-accent-soft);
  border-left: 6px solid var(--program-accent);
  border-radius: var(--program-radius-md, 18px);
  background:
    radial-gradient(circle at 0% 0%, var(--program-accent-soft), transparent 54%),
    linear-gradient(145deg, rgba(105, 52, 158, 0.94), rgba(91, 46, 137, 0.97));
  padding: clamp(1.25rem, 3vw, 2rem);
}

.camp-logistics h2 {
  color: #fffefb;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 800;
  margin: 0 0 1rem;
  text-align: center;
}

.camp-logistics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 0.5rem;
}

@media (min-width: 640px) {
  .camp-logistics__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.camp-logistics__item {
  background: linear-gradient(145deg, rgba(106, 53, 160, 0.85), rgba(94, 47, 141, 0.9));
  border: 1px solid var(--program-accent-soft);
  border-radius: var(--program-radius-md, 18px);
  padding: clamp(0.85rem, 2vw, 1.25rem);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.camp-logistics__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}

.camp-logistics__item h4 {
  color: var(--program-accent);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  font-weight: 800;
  margin: 0 0 0.6rem;
}

.camp-logistics__item p {
  color: var(--program-text-soft, #f4ecff);
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  line-height: 1.6;
  margin: 0 0 0.35rem;
}

.camp-logistics__item p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   DAY AT CAMP SECTION
   Used by: summer-camps.php
   ============================================================ */

.camp-day h3 {
  text-align: center;
}

.camp-day__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 768px) {
  .camp-day__grid {
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }
}

.camp-day__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.camp-day__intro figure {
  margin: 0 0 1rem;
}

.camp-day__intro figure img {
  width: 100%;
  border-radius: var(--program-radius-md, 18px);
  border: 1px solid var(--program-accent-soft, rgba(255, 198, 79, 0.18));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
}

/* JS-powered accordion (replaces the old <details>/<summary> markup).
   site.js toggles .is-open on each item; the panel animates via max-height
   and the chevron rotates 180deg. Colors are light neutral — no STEM/gold. */
.camp-accordion {
  margin: 0;
}

.camp-accordion__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.camp-accordion__item:last-child {
  border-bottom: none;
}

.camp-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fffefb;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.3;
  text-align: left;
  border-radius: var(--radius, 8px);
  transition: background 0.2s ease;
}

.camp-accordion__trigger:hover,
.camp-accordion__trigger:focus-visible,
.camp-accordion__item.is-open .camp-accordion__trigger {
  background: rgba(255, 255, 255, 0.04);
}

.camp-accordion__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.8);
}

.camp-accordion__icon svg {
  display: block;
}

.camp-accordion__label {
  flex: 1;
}

.camp-accordion__chevron {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.8);
  transition: transform 0.35s ease;
}

.camp-accordion__item.is-open .camp-accordion__chevron {
  transform: rotate(180deg);
}

.camp-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.camp-accordion__item.is-open .camp-accordion__panel {
  max-height: 500px;
}

.camp-accordion__panel-inner {
  padding: 0 0.5rem 0.9rem 2.85rem;
  color: var(--program-text-soft, #f4ecff);
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  line-height: 1.65;
}

.camp-accordion__panel-inner p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .camp-accordion__panel,
  .camp-accordion__chevron {
    transition: none;
  }
}


.camp-day__cta {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   CAMP FAQ SECTION
   Used by: summer-camps.php, past-camps.php
   ============================================================ */

.camp-faq__list {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.camp-faq__item {
  border-bottom: 1px solid var(--program-accent-soft, rgba(255, 198, 79, 0.18));
}

.camp-faq__item:last-child {
  border-bottom: none;
}

.camp-faq__item details {
  padding: clamp(0.75rem, 1.5vw, 1rem) 0.25rem;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: var(--radius, 8px);
}

.camp-faq__item details:hover {
  background: rgba(255, 255, 255, 0.03);
}

.camp-faq__item details[open] {
  background: rgba(255, 255, 255, 0.04);
  padding-inline: 0.75rem;
}

.camp-faq__item summary {
  font-weight: 600;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  color: #fffefb;
  list-style: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding-inline: 1.75rem;
}

.camp-faq__item summary::-webkit-details-marker {
  display: none;
}

.camp-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--program-accent, #ffc64f);
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.2s ease;
}

.camp-faq__item details[open] summary::after {
  content: '\2212';
}

.camp-faq__item details p,
.camp-faq__item details ul {
  margin-top: 0.65rem;
  color: var(--program-text-soft, #f4ecff);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.65;
  padding-left: 0.25rem;
}

.camp-faq__item details ul {
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.camp-faq__item details li {
  margin: 0.35rem 0;
}

/* Camp footer CTA panel */
.camp-cta-footer {
  text-align: center;
  width: fit-content;
  min-width: min(340px, 100%);
  max-width: min(92%, 52rem);
  margin-inline: auto;
}

.camp-cta-footer p {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--program-text-soft, #f4ecff);
  margin: 0 0 1rem;
}

.camp-cta-footer__actions {
  justify-content: center;
}

/* ============================================================
   PAGE BANNER
   Used by: summer-camps.php, past-camps.php (via includes/camp-banner.php)
   Uses --page-banner-bg custom property set inline per page
   ============================================================ */

.page-banner {
  /* Page-level chrome on camp/hub banner pages = standard purple. */
  --program-accent: var(--accent-purple);
  --program-accent-soft: rgba(198, 140, 255, 0.2);
  --program-accent-glow: rgba(198, 140, 255, 0.45);
  position: relative;
  min-height: clamp(180px, 28vw, 340px);
  background-image: var(--page-banner-bg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.page-banner .container {
  text-align: center;
}

.page-banner .program-eyebrow {
  justify-content: center;
  margin-bottom: 0.5rem;
}

.page-banner .program-title {
  margin: 0;
}

.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
}

.page-banner .container {
  position: relative;
  z-index: 1;
}

.page-banner h1 {
  color: #fffefb;
  font-size: clamp(1.85rem, 4vw, 3.2rem);
  font-weight: 800;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  line-height: 1.15;
  text-align: center;
}

/* ============================================================
   LEGAL PAGES (themed)
   Used by: terms-of-use.php, privacy-policy.php
   On-template glass treatment of long-form legal copy. Page-level accent is the
   standard purple (inherited from .program-page). Scoped to .program-page--legal
   so none of these rules touch other pages. Readable measure, clear heading
   hierarchy, generous spacing — a polished legal doc that belongs to this site.
   ============================================================ */

.program-page--legal .legal-content {
  max-width: 880px;
  margin-inline: auto;
  color: var(--program-text-soft);
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.08rem);
  line-height: 1.78;
  text-shadow: var(--text-shadow-md);
  /* Legal-only readability override: darker, more opaque content background.
     Keeps the shared .program-panel blur/border/radius — only the background
     changes. Same purple hue family (deep --program-purple-950), high opacity
     so dense legal copy reads comfortably; not a flat solid black. Scoped under
     .program-page--legal so no other page's glass panel is affected. */
  background:
    radial-gradient(circle at 8% 8%, var(--program-accent-soft), transparent 32%),
    radial-gradient(circle at 92% 10%, var(--program-accent-soft), transparent 26%),
    linear-gradient(148deg, rgba(94, 47, 141, 0.86), rgba(97, 48, 145, 0.92));
}

.program-page--legal .legal-content > :first-child {
  margin-top: 0;
}

.program-page--legal .legal-content > :last-child {
  margin-bottom: 0;
}

.program-page--legal .legal-updated,
.program-page--legal .legal-location {
  margin: 0 0 1.3rem;
  color: var(--program-accent);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.program-page--legal .legal-content h2 {
  margin: 2.2rem 0 0.7rem;
  padding: 0.5rem 0.6rem 0.5rem 0.95rem;
  border-left: 4px solid var(--program-accent);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, var(--program-accent-soft), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 14px var(--program-accent-glow);
  color: #fffefb;
  font-size: clamp(1.25rem, 1.1vw + 0.95rem, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  scroll-margin-top: 120px;
}

.program-page--legal .legal-content h3 {
  margin: 1.5rem 0 0.45rem;
  color: var(--program-accent);
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.22rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.program-page--legal .legal-content p {
  margin: 0 0 1.05rem;
}

.program-page--legal .legal-content strong {
  color: #fffefb;
}

.program-page--legal .legal-content a {
  color: var(--program-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

.program-page--legal .legal-content a:hover {
  color: #fffefb;
}

.program-page--legal .legal-content ul {
  display: grid;
  gap: 0.55rem;
  margin: 0.6rem 0 1.2rem;
  padding-left: 1.3rem;
}

.program-page--legal .legal-content li {
  border-left: 3px solid var(--program-accent);
  border-radius: 0 11px 11px 0;
  background: linear-gradient(100deg, var(--program-accent-soft), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 0.5rem 0.72rem 0.55rem 0.78rem;
}

.program-page--legal .legal-content li::marker {
  color: var(--program-accent);
}

.program-page--legal .legal-contact {
  margin-top: 2rem;
  border: 1px solid var(--program-accent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, var(--program-accent-soft), transparent 60%),
    linear-gradient(145deg, rgba(105, 52, 158, 0.94), rgba(91, 46, 137, 0.97));
  box-shadow:
    0 0 18px var(--program-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: clamp(1rem, 2.5vw, 1.6rem);
}

.program-page--legal .legal-contact p {
  margin: 0.25rem 0;
}

/* ============================================================
   CONTACT PAGE
   Used by: contact-us.php
   ============================================================ */

.contact-page {
  color: #ffffff;
  padding: clamp(1rem, 2vw, 1.5rem) 0 2.8rem;
}

.contact-page__inner {
  width: min(1480px, calc(100% - clamp(1rem, 4vw, 4rem)));
  margin-inline: auto;
}

.contact-section {
  margin-top: clamp(1rem, 2.8vw, 1.55rem);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

/* Shared card shell: glassy dark purple panel matching program/about pages */
.contact-card {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 26px;
  /* Opaque-dark base (was translucent white); keeps the card dark on beige. */
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 188, 79, 0.12), transparent 32%),
    linear-gradient(148deg, rgba(94, 47, 141, 0.86), rgba(97, 48, 145, 0.92));
  backdrop-filter: blur(1px);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
}

.contact-card h2 {
  color: #fffefb;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  text-align: center;
  margin: 0 0 0.75rem;
  text-shadow: var(--text-shadow-sm);
}

.contact-address {
  color: #f4ecff;
  text-align: center;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  margin: 0 0 0.85rem;
}

.contact-map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 12;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: grid;
  gap: 0.5rem;
  text-align: center;
  color: #f4ecff;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
}

.contact-info-item a {
  color: var(--site-chrome-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.contact-info-item a:hover {
  color: #ffdd8b;
}

.contact-social-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 1rem;
  justify-content: center;
}

.social-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.social-badge:hover,
.social-badge:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .social-badge {
    transition: none;
  }
  .social-badge:hover,
  .social-badge:focus-visible {
    transform: none;
  }
}

.social-badge svg {
  width: 20px;
  height: 20px;
  fill: #fff;
  display: block;
}

.social-badge--fb {
  background: #1877f2;
}

.social-badge--ig {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.contact-hours {
  margin: 0 0 1rem;
}

.contact-hours h3 {
  color: #fffefb;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.6rem;
}

.contact-hours ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
  color: #f4ecff;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
}

.contact-hours li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.contact-hours .day {
  font-weight: 600;
  min-width: 90px;
}

.contact-cta {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.contact-form-section {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.contact-form-section h2 {
  margin-bottom: 1.25rem;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
}

.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.contact-form-field--full {
  grid-column: 1 / -1;
}

.contact-form-field label {
  font-weight: 600;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  color: #f4ecff;
}

.contact-form-field input,
.contact-form-field textarea,
.contact-form-field select {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-family: inherit;
  background: rgba(255, 255, 255, 0.06);
  color: #fffefb;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* Select needs solid bg so option text stays readable in all browsers */
.contact-form-field select {
  background: #68349d;
}

.contact-form-field select option {
  background: #69349e;
  color: #fffefb;
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.contact-form-field input:focus,
.contact-form-field textarea:focus,
.contact-form-field select:focus {
  outline: none;
  border-color: rgba(255, 198, 79, 0.7);
  background: rgba(255, 255, 255, 0.1);
}

.contact-form-field select:focus {
  background: #68349d;
}

.contact-form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form-actions {
  margin-top: clamp(0.85rem, 1.5vw, 1.1rem);
  display: flex;
  justify-content: center;
}

/* Contact form honeypot (the `website` field): out of sight and out of the
   layout; aria-hidden + tabindex="-1" in the markup keep it out of the
   accessibility tree and the keyboard order. */
.page-contact .contact-form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.contact-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #f4ecff;
  font-size: clamp(0.88rem, 1.1vw, 0.96rem);
  cursor: pointer;
}

.contact-form-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--site-chrome-accent);
}

.contact-disclaimer {
  margin-top: 0.6rem;
  font-size: clamp(0.82rem, 1vw, 0.9rem);
  color: rgba(244, 236, 255, 0.7);
  line-height: 1.55;
}

.contact-disclaimer a {
  color: var(--site-chrome-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.contact-disclaimer a:hover {
  color: #ffdd8b;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Desktop card balancing: make the Find Us map fill the card's stretched height */
@media (min-width: 901px) {
  .contact-grid > .contact-card:not(.contact-info-card) {
    display: flex;
    flex-direction: column;
  }

  .contact-grid > .contact-card:not(.contact-info-card) .contact-map-embed {
    flex: 1;
    aspect-ratio: unset;
    min-height: 200px;
  }
}

@media (min-width: 768px) {
  .contact-info-card .contact-info-list {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
  }

  .contact-info-card .contact-hours h3 {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  }

  .contact-info-card .contact-hours ul {
    font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  }
}

@media (max-width: 640px) {
  .contact-page {
    padding-top: 0.9rem;
    padding-bottom: 3.5rem;
  }

  .contact-page__inner {
    width: min(100%, calc(100% - 1rem));
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-field--full {
    grid-column: 1;
  }
}

/* About Page Components */
.about-page {
  --about-orange-300: #ffdd8b;
  --about-white: #ffffff;
  --about-text-soft: #f4ecff;
  --about-shadow-lg: var(--shadow-lg);
  --about-shadow-md: var(--shadow-md);
  --about-radius-lg: var(--radius-lg);
  --about-radius-md: var(--radius-md);
  color: var(--about-white);
  padding: clamp(1rem, 2vw, 1.5rem) 0 2.8rem;
}

.about-page a {
  color: inherit;
}

.about-page__inner {
  width: min(1480px, calc(100% - clamp(1rem, 4vw, 4rem)));
  margin-inline: auto;
}

.about-panel {
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: var(--about-shadow-lg);
  overflow: hidden;
  border-radius: var(--about-radius-lg);
  /* Opaque-dark base (was translucent white); keeps the panel dark on beige. */
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 188, 79, 0.16), transparent 32%),
    linear-gradient(148deg, rgba(94, 47, 141, 0.86), rgba(97, 48, 145, 0.92));
  backdrop-filter: blur(1px);
  padding: clamp(1.25rem, 3vw, 2.4rem);
}

.about-section {
  margin-top: clamp(1rem, 2.8vw, 1.55rem);
}

.about-section-title {
  margin: 0 0 clamp(1rem, 2.2vw, 1.75rem);
  color: #fffefb;
  text-align: center;
  font-size: clamp(1.65rem, 2.1vw + 1rem, 3rem);
  font-weight: 800;
  letter-spacing: clamp(0.03em, 0.15vw, 0.08em);
  line-height: 1.14;
  text-transform: uppercase;
  text-shadow: var(--text-shadow-lg);
  padding-bottom: 0.72rem;
}

.about-section-title::after {
  content: "";
  display: block;
  width: clamp(88px, 12vw, 160px);
  height: 4px;
  margin: 0.52rem auto 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(255, 221, 139, 0.92), rgba(255, 156, 18, 0.96));
  box-shadow: var(--shadow-glow-gold);
}

.about-mission-grid {
  display: grid;
  grid-template-columns: minmax(130px, 210px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: center;
}

.about-mission-logo-card {
  display: grid;
  place-items: center;
  min-height: clamp(170px, 24vw, 260px);
  border-radius: var(--about-radius-md);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: clamp(1rem, 2vw, 1.4rem);
}

.about-mission-logo {
  width: min(100%, 210px);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.34));
}

.about-copy {
  margin: 0;
  color: var(--about-text-soft);
  font-size: clamp(1.02rem, 1.1vw, 1.16rem);
  line-height: 1.72;
  text-shadow: var(--text-shadow-md);
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.about-team-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--about-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(160deg, rgba(114, 57, 170, 0.88), rgba(101, 50, 152, 0.95));
  box-shadow: var(--about-shadow-md);
  overflow: hidden;
}

.about-team-photo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 198, 79, 0.24), transparent 38%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  padding: clamp(1rem, 2vw, 1.4rem);
}

.about-team-photo {
  width: clamp(150px, 16vw, 210px);
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  object-fit: cover;
  object-position: center;
  border: 3px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  background: rgba(255, 255, 255, 0.12);
}

.about-team-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.05rem, 2vw, 1.35rem);
}

.about-member-name {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.3vw, 1.65rem);
  text-align: center;
  line-height: 1.18;
}

.about-member-role {
  align-self: center;
  margin: 0.62rem 0 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 198, 79, 0.16);
  border: 1px solid rgba(255, 198, 79, 0.5);
  color: var(--about-orange-300);
  padding: 0.38rem 0.72rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.about-team-bio {
  color: #fff8ec;
  font-size: clamp(0.98rem, 1vw, 1.05rem);
  line-height: 1.66;
}

.about-team-bio p {
  margin: 0;
}

@media (max-width: 1080px) {
  .about-team-grid {
    grid-template-columns: 1fr;
  }

  .about-team-card {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  }

  .about-team-photo-wrap {
    align-content: start;
  }

  .about-team-photo {
    width: min(100%, 210px);
  }
}

@media (max-width: 700px) {
  .about-page__inner {
    width: min(100%, calc(100% - 1rem));
  }

  .about-mission-grid,
  .about-team-card {
    grid-template-columns: 1fr;
  }

  .about-mission-grid {
    text-align: center;
  }

  .about-mission-logo-card {
    width: min(100%, 260px);
    margin-inline: auto;
  }

  .about-member-role {
    text-align: center;
  }

  .about-team-body {
    text-align: center;
  }
}

/* ============================================================================
   PHASE 10 — GLOBAL DESIGN STANDARDS (rolled in from prototype/bg.php)
   Three global systems: (1) animated STEM background, (2) glow gradient
   button, (3) glass panel treatment. Appended at end of file so these rules
   win on equal-specificity source order over the earlier home-theme rules,
   exactly as the approved prototype <style> block did when injected after the
   site.css link. Page-specific hero + testimonial blocks follow, scoped under
   .site-theme #hero / .site-theme #testimonial so they only affect index.php.
   ============================================================================ */

/* === Sitewide page background tokens (beige paper) — single source of truth.
   Tune these to adjust the canvas shade/tone across the whole site. === */
:root {
  --page-bg: #e7dccd;                        /* warm beige paper (not yellow, not brown) */
  /* Paper/linen grain layer — single source of truth, shared by the page
     canvas (body, below) AND the desktop nav dropdown surface so the menus
     reuse the real treatment instead of a separate approximation. */
  --page-grain:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'paper'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.6'%20numOctaves%3D'3'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23paper)'%20opacity%3D'0.14'%2F%3E%3C%2Fsvg%3E");
  --page-wash-1: rgba(198, 171, 133, 0.18);  /* warm tonal pool — top-left */
  --page-wash-2: rgba(192, 165, 128, 0.14);  /* warm tonal pool — bottom-right */
  /* Dark text for content that sits directly on the beige canvas (headings /
     subheads that previously relied on the dark background). Tune with the bg. */
  --page-ink: #2b2233;                        /* strong heading ink on the canvas */
  --page-ink-soft: #3c3348;                   /* softer subhead/body ink on the canvas */
  /* Warm paper-toned hover highlight for dropdown menu items on the beige
     surface (replaces the cold near-white #f3f4f6 used on the old white menus). */
  --menu-hover-bg: rgba(43, 34, 51, 0.1);
}

/* ============================================================
   SITEWIDE PAGE BACKGROUND — warm beige paper + subtle paper/linen grain.
   Single source of truth for the page canvas on EVERY live page (promoted
   from the approved Home prototype). Shade/tone knobs are the --page-* tokens
   above; grain scale/strength are baseFrequency + the 200px tile + the
   `opacity` inside the SVG data URI.

   Set on <body>; it propagates to the viewport canvas (html has no
   background). Content panels/cards keep their own opaque (dark/glass)
   backgrounds, so the beige shows in the page margins/gaps while the
   intentional purple/dark sections stay intact.

   Texture is 100% inline — NO image files. Layers, top to bottom: (1) a
   desaturated SVG fractal-noise grain (data URI; seamless via stitchTiles,
   neutral via `saturate 0` so it adds no yellow), over (2) two warm radial
   washes for organic tone, over (3) the beige base.

   NOTE: this is the current WORKING background direction — the exact shade /
   texture may be tuned later; adjust the --page-* tokens / grain values here.
============================================================ */
body {
  background-color: var(--page-bg);
  background-image:
    var(--page-grain),
    radial-gradient(120% 90% at 12% 0%, var(--page-wash-1), transparent 60%),
    radial-gradient(120% 90% at 88% 100%, var(--page-wash-2), transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 200px 200px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  background-attachment: scroll, scroll, scroll;
}

/* ============================================================
   3a. CHROME TREATMENT — shared header / menu / footer (global)
   Solid warm neutral gray #56524d, the approved Home prototype promoted
   sitewide (it replaced the previous #1b1b1d charcoal, which the owner
   found much too dark). Completely opaque — no glass transparency, blur,
   gradient, or texture — so header and footer read as matching pieces of
   site chrome against the warm beige page canvas. The value lives in the
   shared --site-chrome-bg token (:root, top of file) and is the single
   place to change it.

   #56524d = hsl(35, 6%, 32%) — the SAME hue as the beige paper canvas
   (#e7dccd is hsl 35 33% 85%), so the chrome reads as a deep shade of the
   page's own paper rather than a foreign slab; warm also sits opposite
   Amethyst on the wheel, so it complements the purple sections and
   flatters the gold accents.
     vs the old charcoal : L* 9.8 -> 35.1   (dramatically lighter)
     vs the beige canvas : 5.73:1           (clearly darker; the chrome
                                             stays plainly separated)

   Because the surface is lighter than the old charcoal, four contrast
   corrections travel WITH it and are part of the shared treatment — see
   section 3b immediately after the chrome rule. Everything else in the
   chrome (nav + footer links 6.93:1, footer address 4.81:1, copyright,
   gold bullets, section title, social icons, separator dots, the
   beige-paper dropdowns, nav-toggle, mobile menu and the CTA) passes
   unchanged on this gray and is deliberately untouched.
============================================================ */

/* Header + footer chrome — solid warm gray (sitewide) */
header.container.site-header,
header.container.site-header.clearfix,
footer.container.site-footer {
  background: var(--site-chrome-bg);
}

/* Home programs panel — semi-transparent glass.
   Task 10 follow-up prototype (Home/index only): re-hued from the violet-indigo
   rgba(51, 25, 107, .85) (#33196b, hsl 259 62% 26%) to the Amethyst family —
   rgba(87, 43, 130, .85) (#572b82) = Amethyst #9966CC (hsl 270 50% 60%) held at
   its hue + saturation and dropped to 34% lightness. Middle of the three Home
   panels. APPROVED and promoted sitewide — see the Amethyst family note in
   :root at the top of this file. Alpha unchanged. */

/* Home testimonial panel — semi-transparent glass.
   Task 10 follow-up prototype (Home/index only): re-hued from the violet-indigo
   rgba(68, 33, 125, .86) (#44217d, hsl 263 58% 31%) to the Amethyst family —
   rgba(102, 51, 153, .86) (#663399) = Amethyst #9966CC held at its hue +
   saturation and dropped to 40% lightness. Lightest of the three Home panels.
   APPROVED and promoted sitewide — see the Amethyst family note in :root at
   the top of this file. Alpha unchanged. */
.site-theme #testimonial {
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 184, 62, 0.1), transparent 40%),
    rgba(102, 51, 153, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============================================================
   2. GLOW GRADIENT BUTTON (global, SINGLE SITEWIDE BUTTON)
   Dark zinc-900 base, pill shape, indigo->purple->pink gradient glow
   underneath (low opacity at rest, brighter on hover, soft blur).

   This is THE primary button for the whole site, and .cta-button is its only
   class. Every register/CTA button across the program & camp pages is a
   .cta-button and therefore renders as this glow button with no per-page
   markup change. Scoped under .site-wrapper (= <body>) so it also reaches
   buttons inside modals and wins over earlier .cta-button appearance rules by
   specificity + source order.

   .cta-button-secondary ("Dimmed Glow") shares this same base, arrow, hover and
   reduced-motion treatment, then a small override below drops the glow opacity
   so it reads as the lesser action in a side-by-side pair. See section 2's
   dimmed override and the note at the old .cta-button-secondary location above.
============================================================ */

.site-wrapper .cta-button,
    .site-wrapper .cta-button-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1.5em;
  border: none;
  border-radius: var(--radius-pill);
  background-color: #18181b;
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 300ms ease, transform 300ms ease;
}

/* Gradient glow layer — sits below the bare label (z-index:-1 inside the
   isolated stacking context), so no span wrapper is required on the label. */
.site-wrapper .cta-button::before,
    .site-wrapper .cta-button-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  opacity: 0.4;
  filter: blur(6px);
  transition: opacity 300ms ease;
  z-index: -1;
  pointer-events: none;
}

.site-wrapper .cta-button:hover,
    .site-wrapper .cta-button:focus-visible,
    .site-wrapper .cta-button-secondary:hover,
    .site-wrapper .cta-button-secondary:focus-visible {
  color: #ffffff;
  /* Liveness: subtle lift to complement the existing glow brighten. */
  transform: translateY(-2px);
}

.site-wrapper .cta-button:hover::before,
    .site-wrapper .cta-button:focus-visible::before {
  opacity: 0.8;
}

/* SECONDARY = "Dimmed Glow": same dark base + same gradient as the primary
   (inherited from the shared rules above), but the glow is quieter — lower
   opacity and softer blur at rest and on hover — so a primary visibly out-glows
   it when the two sit side by side. This override is placed AFTER the shared
   ::before rules so it wins at equal specificity by source order. Standalone
   buttons must use .cta-button (full glow), never this. */
.site-wrapper .cta-button-secondary::before {
  opacity: 0.15;
  filter: blur(4px);
}
.site-wrapper .cta-button-secondary:hover::before,
.site-wrapper .cta-button-secondary:focus-visible::before {
  opacity: 0.4;
}

/* Global arrow-up-right icon, delivered via ::after pseudo-element so every
   glow button gets it with zero per-page markup. White stroke matches the
   white label. This pseudo is the single source — no button carries an inline
   arrow, so there is nothing to double up. */
.site-wrapper .cta-button::after,
    .site-wrapper .cta-button-secondary::after {
  content: '';
  width: 14px;
  height: 14px;
  margin-left: 0.5em;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='7'%20y1='17'%20x2='17'%20y2='7'/%3E%3Cpolyline%20points='7%207%2017%207%2017%2017'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (prefers-reduced-motion: reduce) {
  .site-wrapper .cta-button,
    .site-wrapper .cta-button-secondary,
    .site-wrapper .cta-button::before,
    .site-wrapper .cta-button-secondary::before {
    transition: none !important;
  }
  .site-wrapper .cta-button:hover,
    .site-wrapper .cta-button:focus-visible,
    .site-wrapper .cta-button-secondary:hover,
    .site-wrapper .cta-button-secondary:focus-visible {
    transform: none;
  }
}

/* ============================================================
   4. HERO FEATURE — two-column layout (index.php ONLY)
   Scoped under .site-theme #hero so it overrides the earlier full-bleed
   image hero. Kills the old ::before/::after background images and the
   .container overlay, then lays out the copy column on the left and the
   image column on the right. The Home page's own hero carousel styling is
   inline in index.php; only this shared two-column frame lives here.
============================================================ */

/* Kill the old full-bleed hero background images + dark overlay */
.site-theme #hero {
  position: static;
  min-height: unset !important;
  display: block;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.site-theme #hero::before,
.site-theme #hero::after,
.site-theme #hero .container::before {
  display: none !important;
}

.site-theme #hero .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 2rem !important;
  text-align: left;
  border-radius: 0;
}

/* Panel — darkest glass pill (hero pill treatment).
   Task 10 follow-up prototype (Home/index only): re-hued from the violet-indigo
   rgba(34, 16, 80, .90) (#221050, hsl 257 67% 19%) to the Amethyst family —
   rgba(66, 33, 99, .90) (#422163) = Amethyst #9966CC held at its hue +
   saturation and dropped to 26% lightness. Still the darkest of the three Home
   panels. APPROVED and promoted sitewide — see the Amethyst family note in
   :root at the top of this file. Alpha unchanged. */
.site-theme #hero .hero-feature__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  background: rgba(66, 33, 99, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 4rem 2.5rem 3rem;
}

.site-theme #hero .hero-feature__left,
.site-theme #hero .hero-feature__right {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Left column */
.site-theme #hero .hero-feature__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.site-theme #hero .hero-feature__left h1:first-of-type {
  margin: 0;
  text-shadow: none;
}

.site-theme #hero .hero-feature__left p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}

/* Right column — image / carousel frame */
.site-theme #hero .hero-feature__right {
  border-radius: 1rem;
  overflow: hidden;
}


/* Mobile — keep 2 columns (no stacking), tighten proportions */
@media (max-width: 768px) {
  .site-theme #hero .container {
    padding: 0 0.5rem !important;
  }
  .site-theme #hero .hero-feature__panel {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 2.5rem 0.75rem 1.25rem;
    align-items: start;
  }
  .site-theme #hero .hero-feature__left {
    gap: 0.35rem;
  }
    .site-theme #hero .hero-feature__left h1:first-of-type {
    font-size: clamp(0.65rem, 2.5vw, 0.85rem);
    /* Give the <h1> a DEFINITE width so iOS Safari caps it deterministically.
       The parent flex column uses align-items:center, leaving this item
       shrink-to-fit; WebKit resolves the % max-width below against an
       indefinite reference during intrinsic sizing and treats it as none, so
       the <h1> kept its one-line max-content width and the ghost + the
       absolutely-positioned .tw-live (left:0/right:0, pinned to the <h1>)
       overflowed the ~50% column onto the hero image. align-self:stretch
       overrides align-items:center for THIS item only, stretching it to the
       column's definite track width (min-width:0 on .hero-feature__left
       prevents blowout). A definite used width has no content dependency, so
       the inline ghost wraps to the column, .tw-live becomes column-wide, and
       .tw-text (white-space:normal, set below) wraps — what max-width:100%
       could not do. text-align:center then re-centers the now-full-width
       inline content (inherited by .tw-ghost and .tw-live's .tw-text lines),
       matching the centered hero <p>. max-width:100% kept (redundant but
       harmless). Desktop (≥769px) is untouched: base h1 has no
       align-self/text-align and base .tw-text stays white-space:nowrap. */
    align-self: stretch;
    text-align: center;
    max-width: 100%;
  }
  .site-theme #hero .hero-feature__left p {
    font-size: 0.8rem;
    line-height: 1.35;
    /* Center the multi-line paragraph text. The block is already centered
       by the column's align-items:center, but inline text defaults to left;
       this matches the badge / headline / .stem alignment. ≤768 only. */
    text-align: center;
  }

  /* Typewriter: allow the headline to wrap on the narrow mobile column.
     Desktop keeps .tw-text { white-space: nowrap } (caret rides the last
     char on one line). Here we let the typed text wrap, and balance BOTH
     the ghost (which reserves the box) and the live text so they break at
     the same column width — typed words land in their final positions with
     minimal jitter, and the ghost still reserves the full multi-line box so
     siblings (.stem / <p> / CTA) don't shift. Wrapping fix only; no
     font-size change. .tw-live carries no nowrap, so nothing to override
     there — it is left:0/right:0 and already pins to the host <h1> width
     the ghost establishes. */
  .site-theme #hero .hero-feature__left .tw-text {
    white-space: normal;
  }
  .site-theme #hero .hero-feature__left .tw-ghost,
  .site-theme #hero .hero-feature__left .tw-text {
    text-wrap: balance;
    /* PHYSICAL FORCE-WRAP (≤768 only) — the guarantee, not a width bet.
       Three prior fixes tried to cap the BOX to the 191px left track and
       trusted the text to wrap inside it; on iOS Safari the box kept
       resolving to ~max-content (~286px) during the flex intrinsic pass and
       spilled ~95px onto the hero image. overflow-wrap:anywhere introduces
       soft-wrap opportunities that ARE counted in min-/max-content sizing, so
       the content can no longer claim a wide intrinsic width — the box
       collapses to the column. word-break:break-word is the belt for older
       WebKit (it doesn't affect intrinsic sizing, but breaks at render). Even
       if the box still resolved wide, the visible text now breaks at the
       column edge instead of crossing onto the image. */
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Constrain the absolute live layer directly, not via the <h1>. It is
     left:0/right:0 so it already pins to its containing block (the host <h1>),
     but cap it explicitly so a shrink-to-fit/max-content WebKit pass cannot
     widen it past the column. box-sizing:border-box is global (line 31). */
  .tw-live {
    max-width: 100%;
    width: auto;
  }
}

/* ============================================================
   5. TESTIMONIALS — rotating glass cards (index.php ONLY)
   Scoped under .site-theme #testimonial to override the earlier centered
   blockquote layout. Left intro column (badge + heading + subhead) and a
   right column holding an absolutely-positioned card stack (one visible).
============================================================ */

/* Override the earlier centered single-quote layout */
.site-theme #testimonial {
  text-align: left;
}

.site-theme #testimonial .tst {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* --- Left column: badge + heading + subhead --- */
.site-theme #testimonial .tst__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.site-theme #testimonial .tst__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4em 1em;
  border-radius: var(--radius-pill);
  color: var(--program-accent, #f8ae20);
  border: 1.5px solid var(--program-accent, #f8ae20);
  background: rgba(248, 174, 32, 0.1);
}

.site-theme #testimonial .tst__badge-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Heading — override the earlier centered h2; keep gold underline, pin left */
.site-theme #testimonial h2 {
  text-align: left;
  margin: 0;
  padding-bottom: 0.4rem;
}

.site-theme #testimonial h2::after {
  margin-left: 0;
  margin-right: auto;
}

.site-theme #testimonial .tst__subhead {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
}

/* --- Right column: viewport holding the absolutely-positioned stack --- */
.site-theme #testimonial .tst__viewport {
  position: relative;
}

.site-theme #testimonial .tst__stack {
  position: relative;
  width: 100%;
  min-height: 380px;
}

/* Card — darker, more-opaque glass panel. inset:0 fills the stack's reserved
   width + height. Cards stack; only one is .is-active. */
.site-theme #testimonial .tst-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: 1.5rem;
  /* Amethyst audit: was rgba(3,1,8,.97) — L* 1.3, effectively black and off the
     Amethyst axis. Moved onto the axis at the band floor (L* 27.9), matching the
     Home hero panel, so it still reads as the deepest recessed card against its
     L* 40.5 parent while belonging to the family. Quote text 9.5:1. */
  background: rgba(86, 43, 129, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(8, 4, 22, 0.45);
  /* Hidden "from" state — incoming animates FROM here; outgoing reverses TO here. */
  opacity: 0;
  transform: translateX(100px) scale(0.9);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.site-theme #testimonial .tst-card.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 2;
  pointer-events: auto;
}

.site-theme #testimonial .tst-card__stars {
  display: inline-flex;
  gap: 0.2rem;
}

.site-theme #testimonial .tst-card__star {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--program-accent, #f8ae20);
}

.site-theme #testimonial .tst-card__quote {
  width: 2.4rem;
  height: 2.4rem;
  color: rgba(248, 174, 32, 0.22);
  flex-shrink: 0;
}

.site-theme #testimonial .tst-card__text {
  margin: 0;
  color: #fff8ec;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  flex-grow: 1;
}

.site-theme #testimonial .tst-card__sep {
  margin: 0;
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.site-theme #testimonial .tst-card__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.site-theme #testimonial .tst-card__avatar {
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-weight: 700;
  color: #1a0533;
  background: linear-gradient(150deg, var(--stem-engineering), #d08b10);
}

.site-theme #testimonial .tst-card__name {
  font-weight: 700;
  color: #ffffff;
}

.site-theme #testimonial .tst-card__role {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Scroll-in reveal (IntersectionObserver toggles .is-visible once) --- */
.site-theme #testimonial .tst__intro > *,
.site-theme #testimonial .tst__viewport {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.site-theme #testimonial.is-visible .tst__intro > *,
.site-theme #testimonial.is-visible .tst__viewport {
  opacity: 1;
  transform: none;
}

.site-theme #testimonial.is-visible .tst__intro > *:nth-child(1) { transition-delay: 0.05s; }
.site-theme #testimonial.is-visible .tst__intro > *:nth-child(2) { transition-delay: 0.15s; }
.site-theme #testimonial.is-visible .tst__intro > *:nth-child(3) { transition-delay: 0.25s; }
.site-theme #testimonial.is-visible .tst__viewport { transition-delay: 0.3s; }

/* Reduced motion: show everything immediately, no slide/fade transitions */
@media (prefers-reduced-motion: reduce) {
  .site-theme #testimonial .tst__intro > *,
  .site-theme #testimonial .tst__viewport {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
  .site-theme #testimonial .tst-card {
    transition: none !important;
  }
}

/* Mobile: stack to a single column, recenter the intro */
@media (max-width: 768px) {
  .site-theme #testimonial .tst {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .site-theme #testimonial .tst__intro {
    align-items: center;
    text-align: center;
  }
  .site-theme #testimonial h2 {
    text-align: center;
  }
  .site-theme #testimonial h2::after {
    margin-left: auto;
    margin-right: auto;
  }
  .site-theme #testimonial .tst__subhead {
    max-width: 100%;
  }
  .site-theme #testimonial .tst__stack {
    min-height: 560px;
  }
}

/* ============================================================
   TYPEWRITER EFFECT (reusable, data-typewriter)
   Generic, page-agnostic looping type/delete effect driven by
   data-* attributes (see site.js). Deliberately NOT scoped to any
   page/section — drop [data-typewriter] on any element to use it.
   No-reflow technique: a visibility:hidden "ghost" holds the full
   phrase open (reserving the exact wrapped box at every viewport)
   while an absolutely-positioned "live" layer overlays it. Both
   layers inherit ALL type metrics from the host element, so the
   typed text is pixel-identical to the reserved space.
   ============================================================ */

[data-typewriter] {
  position: relative;
}

/* Reserves the final box without painting — keeps siblings from shifting. */
.tw-ghost {
  visibility: hidden;
}

/* Caret-width reservation inside the ghost: makes the shrink-wrapped box
   measure phrase + cursor (matching .tw-live) so the live caret never wraps.
   Inherits the ghost's visibility:hidden; must add width, so never display:none,
   and must not animate. */
.tw-ghost-cursor {
  display: inline;
}

/* Overlays the ghost; inherits the host's type styling for a pixel match. */
.tw-live {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Typed text stays on one line so the caret rides the last character and the
   phrase never breaks mid-effect (the ghost reserves the full one-line width). */
.tw-text {
  white-space: nowrap;
}

/* Blinking cursor (replaces the source snippet's animate-pulse). */
.tw-cursor {
  animation: tw-blink 1s steps(1, end) infinite;
}

@keyframes tw-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Calm by default: no blink when the user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .tw-cursor {
    animation: none;
  }
}

/* ============================================================
   TEXT SWEEP EFFECT (reusable, data-underline-sweep / data-highlight-sweep)
   Generic, page-agnostic text decoration driven by data-* attributes
   (see site.js). Deliberately NOT scoped to any page/section — drop the
   class + data-attribute on any inline span; the word stays as the span's
   own text content (graceful degradation if JS fails: plain text).

   Motion is a CONTINUOUS, in-view loop: JS toggles .sweep-run when the
   element enters/leaves the viewport (it does NOT unobserve), and ALL
   timing/stagger/hold lives in these CSS @keyframes so the loop is
   driftless and the underline + highlight stay in lockstep (one shared
   2400ms period). Both restart together each time the element re-enters view.

   UNDERLINE = a 3-line tapered stack drawn sequentially left→right:
     line 1 (100%, top)  = the span's own background gradient,
     line 2 (68%, mid)   = ::before, centered,
     line 3 (42%, bottom)= ::after, centered.
   HIGHLIGHT = a translucent 25% marker band that wipes in left→right,
   holds, then retreats/collapses toward the right edge (R→L un-wipe).

   No-reflow: every line/band is zero-extent at rest (scaleX(0) /
   background-size 0), so animating never resizes the span's box.
   Shared color is tuned in exactly one place via --sweep-color.
   Reduced motion: JS adds the static .is-swept final state instead and
   never loops (see the media query at the end).
   ============================================================ */

.underline-sweep,
.highlight-sweep {
  /* Single tuning point for both effects — bright pink, chosen for strong
     contrast against the dark Amethyst surfaces it runs over (~#1a0c2e). */
  --sweep-color: #ff2ec4;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- UNDERLINE: 3-line tapered stack, all BELOW the word's baseline ---- */
/* padding-bottom reserves sub-glyph space (inline vertical padding adds NO line
   height → no reflow) and pushes the padded-box bottom clearly under the
   descenders. Every line is positioned against that bottom edge so none paint
   over the glyphs: line 1 (full, top) & line 2 (68%, mid) are the ::before /
   ::after pseudos drawn L→R via scaleX; line 3 (42%, bottom) is the span's own
   background gradient drawn L→R via a paired size+position keyframe. */
.underline-sweep {
  position: relative;
  padding-bottom: 0.42em;
  background-image: linear-gradient(var(--sweep-color), var(--sweep-color));
  background-position-x: 29%;
  background-position-y: bottom;
  background-size: 0% 2px;
}

.underline-sweep::before,
.underline-sweep::after {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--sweep-color);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Line 1 — full width, highest line (closest to the word). */
.underline-sweep::before {
  left: 0;
  width: 100%;
  bottom: 0.26em;
}

/* Line 2 — 68% wide, centered (left edge at 16%), middle line. */
.underline-sweep::after {
  left: 16%;
  width: 68%;
  bottom: 0.13em;
}

/* ---- HIGHLIGHT: SOLID pink marker band ---- */
/* Solid fill (alpha 1.0). The word's text stays its inherited near-white
   (#f4ecff) the entire time — during the loop, at the hold, and in the static
   reduced-motion state. White-on-pink over the dark pill is legible; no ink
   swap is applied. */
.highlight-sweep {
  padding: 0.08em 0.15em;
  margin: 0 -0.15em;
  border-radius: 3px;
  background-image: linear-gradient(var(--sweep-color), var(--sweep-color));
  background-position-x: 0%;
  background-position-y: center;
  background-size: 0% 100%;
  text-shadow: none;
}

/* ---- Continuous in-view loop (active only while .sweep-run is present) ----
   2400ms period: line 1 draws 0→7%, line 2 7→13%, line 3 13→20% (staggered,
   ~160ms each); highlight wipes in 0→20%; all hold to 53% (~800ms hold). At the
   end of the hold the 3 underline lines CLEAR INSTANTLY together (step-end snap
   at 54%); the highlight instead retreats cleanly R→L (left-anchored, only the
   right edge moves) by 70%; brief empty rest to 100%, then the whole sequence
   restarts in sync. */
.underline-sweep.sweep-run::before {
  animation: sweep-ul-line1 2400ms linear infinite;
}

.underline-sweep.sweep-run::after {
  animation: sweep-ul-line2 2400ms linear infinite;
}

.underline-sweep.sweep-run {
  animation: sweep-ul-line3 2400ms linear infinite;
}

.highlight-sweep.sweep-run {
  animation: sweep-hl 2400ms linear infinite;
}

/* Line 1 (::before, full width) — draws first, then instant clear at 54%. */
@keyframes sweep-ul-line1 {
  0% { transform: scaleX(0); }
  7% { transform: scaleX(1); }
  53% { transform: scaleX(1); animation-timing-function: step-end; }
  54% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}

/* Line 2 (::after, 68%) — staggered after line 1, same instant clear. */
@keyframes sweep-ul-line2 {
  0%, 7% { transform: scaleX(0); }
  13% { transform: scaleX(1); }
  53% { transform: scaleX(1); animation-timing-function: step-end; }
  54% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}

/* Line 3 (span background, 42% centered) — draws last; paired size+position
   keeps the left edge fixed at 29% so it grows L→R within its centered slot,
   then snaps clear at 54% in sync with lines 1 & 2. */
@keyframes sweep-ul-line3 {
  0%, 13% { background-size: 0% 2px; background-position-x: 29%; }
  20% { background-size: 42% 2px; background-position-x: 50%; }
  53% { background-size: 42% 2px; background-position-x: 50%; animation-timing-function: step-end; }
  54% { background-size: 0% 2px; background-position-x: 29%; }
  100% { background-size: 0% 2px; background-position-x: 29%; }
}

/* Highlight band: clean wipe in L→R, hold, then retreat R→L. background-position
   stays pinned LEFT (base rule, 0%) the whole time, so during the retreat only
   the right (trailing) edge moves leftward — the band never collapses from both
   ends. */
@keyframes sweep-hl {
  0% { background-size: 0% 100%; }
  20% { background-size: 100% 100%; }
  53% { background-size: 100% 100%; }
  70% { background-size: 0% 100%; }
  100% { background-size: 0% 100%; }
}

/* ---- Static final state (reduced motion / no-IO fallback): fully drawn ---- */
.underline-sweep.is-swept {
  background-size: 42% 2px;
  background-position-x: 50%;
}

.underline-sweep.is-swept::before,
.underline-sweep.is-swept::after {
  transform: scaleX(1);
}

.highlight-sweep.is-swept {
  background-size: 100% 100%;
}

/* Reduced motion: never run the loop (JS uses the static .is-swept above). */
@media (prefers-reduced-motion: reduce) {
  .underline-sweep.sweep-run,
  .underline-sweep.sweep-run::before,
  .underline-sweep.sweep-run::after,
  .highlight-sweep.sweep-run {
    animation: none;
  }
}

/* ============================================================
   OFF-TEMPLATE PAGE SUBHEAD (blog.php, faqs.php, gallery.php)
   These pages use the standard .program-hero boxed header (page
   title only) like every other page — their gold hero chrome comes
   from the shared gold-hero-chrome rule above. Only the intro
   paragraph beneath the hero is page-specific: a centered lede.
   ============================================================ */
.page-intro__subhead {
  max-width: 44rem;
  margin: 0.9rem auto 0;
  text-align: center;
  color: var(--page-ink-soft);     /* dark ink — this subhead sits on the beige canvas */
  font-size: clamp(1rem, 0.5vw + 0.92rem, 1.18rem);
  line-height: 1.7;
}

/* ============================================================
   BLOG (blog.php)
   Featured two-column post, auto-fit glass card grid, and an
   intentionally inert newsletter band. Dark identity only — all
   color/glass/eyebrow comes from the shared --program-* tokens.
   ============================================================ */
.blog-section {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* Featured post — large two-column card (image | content) */
.blog-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 3vw, 2.1rem);
  align-items: center;
  padding: clamp(0.9rem, 2vw, 1.4rem);
  border-radius: var(--program-radius-lg);
  border: 1px solid var(--program-accent-soft);
  border-top: 4px solid var(--program-accent);
  background:
    radial-gradient(circle at 12% 0%, var(--program-accent-soft), transparent 55%),
    linear-gradient(145deg, rgba(105, 52, 158, 0.96), rgba(93, 47, 140, 0.98));
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.32),
    0 0 18px var(--program-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* "Latest" badge — accent pill floated over the top-left of the featured card */
.blog-featured__badge {
  position: absolute;
  top: clamp(0.9rem, 2vw, 1.4rem);
  left: clamp(0.9rem, 2vw, 1.4rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--program-accent);
  background: linear-gradient(145deg, rgba(101, 50, 152, 0.92), rgba(106, 53, 160, 0.92));
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 14px var(--program-accent-glow);
}

/* Soft pulsing dot before the label */
.blog-featured__badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 8px var(--accent-red-glow);
  animation: blog-badge-pulse 2.4s ease-in-out infinite;
}

@keyframes blog-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-featured__badge::before {
    animation: none;
  }
}

.blog-featured__media {
  display: block;
  border-radius: var(--program-radius-md);
  overflow: hidden;
}

.blog-featured__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.blog-featured:hover .blog-featured__media img,
.blog-featured:focus-within .blog-featured__media img {
  transform: scale(1.04);
}

.blog-featured__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(0.4rem, 1.5vw, 1rem);
}

@media (max-width: 760px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }
  .blog-featured__media img {
    aspect-ratio: 16 / 10;
  }
}

/* Tag pill — accent-tinted */
.blog-tag {
  align-self: flex-start;
  display: inline-block;
  padding: 0.28rem 0.82rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--program-accent);
  background: var(--program-accent-soft);
  color: var(--program-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-featured__title {
  margin: 0;
  font-size: clamp(1.4rem, 1.4vw + 1rem, 2.1rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.blog-featured__title a,
.blog-card__title a {
  color: #fffefb;
  transition: color 0.2s ease;
}

.blog-featured__title a:hover,
.blog-featured__title a:focus-visible,
.blog-card__title a:hover,
.blog-card__title a:focus-visible {
  color: var(--program-accent);
}

.blog-featured__excerpt,
.blog-card__excerpt {
  margin: 0;
  color: var(--program-text-soft);
  font-size: clamp(0.96rem, 0.4vw + 0.9rem, 1.05rem);
  line-height: 1.7;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: rgba(244, 236, 255, 0.72);
  font-size: 0.85rem;
}

.blog-meta span[aria-hidden] {
  opacity: 0.5;
}

/* Read Article / Read More link + nudging arrow */
.blog-readmore {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  color: var(--program-accent);
  font-weight: 700;
}

.blog-readmore .blog-arrow {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.blog-readmore:hover .blog-arrow,
.blog-readmore:focus-visible .blog-arrow {
  transform: translateX(4px);
}

/* Responsive card grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--program-radius-md);
  border: 1px solid var(--program-accent-soft);
  background:
    radial-gradient(circle at 50% 0%, var(--program-accent-soft), transparent 60%),
    linear-gradient(145deg, rgba(105, 52, 158, 0.96), rgba(93, 47, 140, 0.98));
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.3),
    0 0 16px var(--program-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--program-accent);
  box-shadow:
    0 24px 40px rgba(0, 0, 0, 0.42),
    0 0 26px var(--program-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.blog-card__media {
  display: block;
  overflow: hidden;
}

.blog-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__media img,
.blog-card:focus-within .blog-card__media img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card__media img,
  .blog-featured__media img {
    transition: none;
  }
  .blog-card:hover,
  .blog-card:focus-within {
    transform: none;
  }
  .blog-card:hover .blog-card__media img,
  .blog-card:focus-within .blog-card__media img,
  .blog-featured:hover .blog-featured__media img,
  .blog-featured:focus-within .blog-featured__media img {
    transform: none;
  }
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.blog-card__title {
  margin: 0;
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem);
  font-weight: 800;
  line-height: 1.3;
}

/* Newsletter band — inert (no POST); styled input + non-submitting button */
.blog-newsletter {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  text-align: center;
  border-radius: var(--program-radius-lg);
  border: 1px solid var(--program-accent-soft);
  border-top: 4px solid var(--program-accent);
  background:
    radial-gradient(circle at 50% 0%, var(--program-accent-soft), transparent 65%),
    linear-gradient(145deg, rgba(103, 51, 155, 0.95), rgba(91, 45, 136, 0.98));
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.3),
    0 0 18px var(--program-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.blog-newsletter__title {
  margin: 0;
  color: #fffefb;
  font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem);
  font-weight: 800;
}

.blog-newsletter__text {
  max-width: 38rem;
  margin: 0.8rem auto 1.4rem;
  color: var(--program-text-soft);
  line-height: 1.65;
}

.blog-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 34rem;
  margin-inline: auto;
}

/* Visually-hidden label kept for screen readers */
.blog-newsletter__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.blog-newsletter__input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.8rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(78, 39, 116, 0.6);
  color: #fffefb;
  font: inherit;
}

.blog-newsletter__input::placeholder {
  color: rgba(244, 236, 255, 0.5);
}

.blog-newsletter__input:focus-visible {
  outline: 2px solid var(--program-accent);
  outline-offset: 2px;
  border-color: var(--program-accent);
}

.blog-newsletter__btn {
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .blog-newsletter__input,
  .blog-newsletter__btn {
    flex: 1 1 100%;
  }
}

/* ============================================================
   FAQ (faqs.php)
   Segmented General/Camps filter with a noticeable accent switch
   (purple -> gold via data-faq-active), and a button-based
   accessible accordion. JS toggles classes only; all visuals here.
   ============================================================ */
.faq-section {
  /* Default (General) accent = purple. */
  --program-accent: var(--accent-purple);
  --program-accent-soft: rgba(198, 140, 255, 0.22);
  --program-accent-glow: rgba(198, 140, 255, 0.45);
  max-width: 52rem;
  margin-inline: auto;
}

/* Camps active = white accent — the visible color switch (standing alternate
   for the General<->Camps segmented filter; kept distinct from the gold the
   Engineering page will ship). */
.faq-section[data-faq-active="camps"] {
  --program-accent: #fffefb;
  --program-accent-soft: rgba(255, 255, 255, 0.16);
  --program-accent-glow: rgba(255, 255, 255, 0.42);
}

.faq-filter {
  display: flex;
  gap: 0.35rem;
  width: fit-content;
  margin: 0 auto clamp(1.4rem, 3vw, 2rem);
  padding: 0.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(71, 36, 107, 0.85);   /* opaque enough to stay dark on the beige canvas */
}

.faq-filter__btn {
  appearance: none;
  cursor: pointer;
  border: 0;
  padding: 0.55rem 1.45rem;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--program-text-soft);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.faq-filter__btn:hover {
  color: #fffefb;
}

.faq-filter__btn.is-active {
  background: var(--program-accent-soft);
  color: var(--program-accent);
  box-shadow:
    inset 0 0 0 1px var(--program-accent),
    0 0 14px var(--program-accent-glow);
}

.faq-list {
  display: grid;
  gap: 0.8rem;
}

.faq-item {
  border-radius: var(--program-radius-md);
  border: 1px solid var(--program-accent-soft);
  background: linear-gradient(145deg, rgba(101, 50, 152, 0.9), rgba(90, 45, 136, 0.96));
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item.is-hidden {
  display: none;
}

.faq-item:hover {
  border-color: var(--program-accent);
}

.faq-item__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  cursor: pointer;
  appearance: none;
  border: 0;
  background: transparent;
  color: #fffefb;
  font: inherit;
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.1rem, 2.2vw, 1.5rem);
}

.faq-item__q {
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.12rem);
  font-weight: 700;
  line-height: 1.4;
}

.faq-item__chevron {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 50%;
  border: 1px solid var(--program-accent-soft);
  color: var(--program-accent);
  transition: transform 0.3s ease, background 0.2s ease;
}

.faq-item__chevron svg {
  width: 1rem;
  height: 1rem;
}

.faq-item__trigger[aria-expanded="true"] .faq-item__chevron {
  transform: rotate(180deg);
  background: var(--program-accent-soft);
}

/* Animated collapse via max-height (mirrors .camp-accordion__panel). The
   grid 0fr->1fr technique clipped the first answer line by a sub-pixel
   fr-track shortfall; max-height avoids it. Expanded cap is generous (1100px)
   because several camp answers are long lists. FAQ stays multi-open. */
.faq-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.is-open .faq-item__panel {
  max-height: 1100px;
}

.faq-item__panel-inner {
  padding: 0 clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.05rem, 2vw, 1.35rem);
  color: var(--program-text-soft);
  font-size: clamp(0.96rem, 0.4vw + 0.9rem, 1.05rem);
  line-height: 1.7;
}

.faq-item__panel-inner p {
  margin: 0 0 0.7rem;
}

.faq-item__panel-inner p:last-child {
  margin-bottom: 0;
}

.faq-item__panel-inner ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.4rem;
}

.faq-item__panel-inner a {
  color: var(--program-accent);
  text-decoration: underline;
  transition: var(--transition-color);
}

/* Liveness: in-content link brightens + underline strengthens on hover/focus,
   mirroring the blog title-link treatment. */
.faq-item__panel-inner a:hover,
.faq-item__panel-inner a:focus-visible {
  color: color-mix(in srgb, var(--program-accent) 72%, #fff);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__panel-inner a {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__panel,
  .faq-item__chevron {
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE PHOTO WRAPPER (includes/real-photos.php)
   The <picture> around an authentic-photo <img> generates no box,
   so the <img> keeps laying out — and matching its existing
   selectors, aspect ratios, crops and absolute positioning —
   exactly as the direct child of its container it used to be.
   ============================================================ */
.real-picture {
  display: contents;
}

/* ============================================================
   GALLERY (gallery.php)
   Masonry CSS-columns grid with a deliberate portrait/landscape
   mix. Each tile fades/rises in on scroll via the shared
   IntersectionObserver reveal pattern (site.js). Default state is
   fully visible so no-JS / no-IO / reduced-motion users see images.
   ============================================================ */
.gallery-section {
  margin-top: clamp(1rem, 3vw, 1.8rem);
}

.gallery-grid {
  columns: 3 280px;
  column-gap: clamp(0.8rem, 2vw, 1.25rem);
}

@media (max-width: 700px) {
  .gallery-grid {
    columns: 2 150px;
  }
}

.gallery-item {
  margin: 0 0 clamp(0.8rem, 2vw, 1.25rem);
  break-inside: avoid;
  border-radius: var(--program-radius-md);
  overflow: hidden;
  border: 1px solid var(--program-accent-soft);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  background: linear-gradient(145deg, rgba(84, 42, 126, 0.55), rgba(64, 32, 97, 0.7));
  transition: var(--transition-card);
}

/* Liveness: tile lifts + accent border/glow grows on hover and keyboard focus
   (focus-within fires if/when a tile becomes focusable — no markup/tabindex
   change here). Image zoom is clipped by the existing overflow:hidden above. */
.gallery-item:hover,
.gallery-item:focus-within {
  transform: translateY(var(--lift-card));
  border-color: var(--program-accent);
  box-shadow:
    0 20px 38px rgba(0, 0, 0, 0.42),
    0 0 22px var(--program-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: var(--transition-zoom);
}

.gallery-item:hover img,
.gallery-item:focus-within img {
  transform: scale(var(--zoom-img));
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item,
  .gallery-item img {
    transition: none;
  }
  .gallery-item:hover,
  .gallery-item:focus-within {
    transform: none;
  }
  .gallery-item:hover img,
  .gallery-item:focus-within img {
    transform: none;
  }
}

.gallery-item--portrait img {
  aspect-ratio: 9 / 16;
}

.gallery-item--landscape img {
  aspect-ratio: 16 / 9;
}

/* Authentic photographs are shown whole: these replace the 9:16 / 16:9
   reservation above with the photo's own proportions (equal specificity,
   declared later). 9:16 and 16:9 photos simply keep the base classes. */
.gallery-item--ratio-3x4 img {
  aspect-ratio: 3 / 4;
}

.gallery-item--ratio-4x3 img {
  aspect-ratio: 4 / 3;
}

.gallery-item--ratio-6x5 img {
  aspect-ratio: 6 / 5;
}

/* Transparent brand art is shown whole, padded on the glass panel */
.gallery-item--contain img {
  object-fit: contain;
  padding: clamp(1rem, 3vw, 2rem);
}

/* Reveal: hidden "from" state applied only when JS will animate. */
.gallery-grid.is-reveal-ready .gallery-item {
  opacity: 0;
  transform: translateY(16px);
}

.gallery-grid.is-reveal-ready .gallery-item.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Hover-timing fix: the reveal-in transition above (0.9s, specificity 0,4,0)
   also governed the hover lift on revealed tiles, making it mushy. Re-assert the
   snappy card transition for the hover/focus state only, at higher specificity
   (0,5,0) so it wins — the one-shot reveal-in fade/rise still eases at 0.9s. */
.gallery-grid.is-reveal-ready .gallery-item.is-revealed:hover,
.gallery-grid.is-reveal-ready .gallery-item.is-revealed:focus-within {
  transition: var(--transition-card);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid.is-reveal-ready .gallery-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   GALLERY LIGHTBOX (gallery.php)
   Image-only overlay opened by clicking/keyboard-activating a gallery
   tile (site.js). Mirrors the .modal show/hide mechanism: toggling
   .is-open drives display:none -> flex (no transition on display). It
   is a page-end leaf at z-index:1000 — its DOM position after </main>
   wins the tie against the sticky header (also z-index:1000), so it
   sits above all chrome without creating a stacking context on an
   ancestor. Any motion lives only on the image leaf here, never on an
   ancestor of the sticky header.
   ============================================================ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 1000;
}

.lightbox.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}

.lightbox__img {
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Subtle fade/scale-in on the image only (overlay backdrop appears
   instantly). Reset for reduced motion below — no global catch-all. */
.lightbox.is-open .lightbox__img {
  animation: lightbox-in 0.28s ease;
}

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Close control: top-right, kept within the viewport (not clipped),
   44x44 touch target, reusing the .close-btn contrast idiom so it stays
   visible against any photo. */
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fffefb;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  z-index: 2;
  transition: color 0.2s ease, background 0.2s ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  color: #fffefb;
  background: rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .lightbox.is-open .lightbox__img {
    animation: none;
  }
  .lightbox__close {
    transition: none;
  }
}

/* ============================================================
   ===== PROMO POPUP =====
   Sitewide dismissible announcement card. Markup in
   includes/promo-popup.php, behaviour (4s reveal, per-campaign
   localStorage dismissal, Escape/close) in site.js.
   Fixed leaf element at z-index:1001 — DELIBERATELY one above the
   header / .modal / .lightbox (all 1000) so it floats over them
   regardless of DOM source order. The transform lives ONLY on
   .promo-popup (a fixed leaf, never an ancestor of header/main),
   so the slide animation can't shift page layout.
   ============================================================ */
.promo-popup {
  position: fixed;
  z-index: 1001;
  width: min(360px, calc(100vw - 2rem));
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  background: linear-gradient(145deg, rgba(102, 51, 154, 0.92), rgba(90, 45, 134, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: #fffefb;
  /* Hidden by default — offscreen, transparent, and inert to pointer/AT. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition-card), opacity 0.22s ease, visibility 0.22s ease;
}

.promo-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, 0);
}

.promo-popup__close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: currentColor;
  cursor: pointer;
  transition: var(--transition-color), background 0.2s ease;
}

.promo-popup__close svg {
  width: 20px;
  height: 20px;
}

.promo-popup__close:hover,
.promo-popup__close:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.promo-popup__close:focus-visible {
  outline: 2px solid var(--site-focus, #0b5fff);
  outline-offset: 2px;
}

.promo-popup__heading {
  margin: 0 2.25rem 0.5rem 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.25;
}

.promo-popup__session {
  margin: 0 0 0.35rem;
  font-weight: 700;
}

.promo-popup__dates,
.promo-popup__price {
  margin: 0 0 0.35rem;
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  color: rgba(255, 254, 251, 0.86);
}

.promo-popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.promo-popup__actions .cta-button,
.promo-popup__actions .cta-button-secondary {
  flex: 1 1 auto;
}

/* Desktop: anchor top-right, clear of the sticky header. Slides in from the
   right edge. */
@media (min-width: 1024px) {
  .promo-popup {
    top: clamp(5rem, 9vh, 7rem);
    right: clamp(1rem, 2vw, 1.5rem);
    transform: translateX(calc(100% + 1.5rem));
  }
}

/* Mobile: bottom slide-in, near full-width with side margins. */
@media (max-width: 1023px) {
  .promo-popup {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    transform: translateY(calc(100% + 1.5rem));
  }
  .promo-popup__actions .cta-button,
  .promo-popup__actions .cta-button-secondary {
    flex: 1 1 100%;
  }
}

/* Scoped reduced-motion reset — appear without sliding/fading. No global
   catch-all exists; this mirrors the per-component pattern used sitewide. */
@media (prefers-reduced-motion: reduce) {
  .promo-popup {
    transition: opacity 0.001s linear, visibility 0.001s linear;
    transform: none;
  }
  .promo-popup.is-open {
    transform: none;
  }
  .promo-popup__close {
    transition: none;
  }
}

/* ============================================================
   SHARED DESKTOP FOOTER — three-column layout (sitewide)
   ------------------------------------------------------------
   The approved footer layout, applied to every page. It layers over the
   base footer foundation earlier in this file (which still supplies the
   solid charcoal chrome, link colour/hover, phone pill and social icons),
   so it is appended last: equal-specificity ties resolve here.
     - < 1024px : the .footer-links wrapper is display:contents and the
                  "Quick Links" label + CTA are hidden, so the footer keeps
                  the approved stacked MOBILE layout unchanged.
     - >= 1024px: a compact three-column layout (brand/contact | Quick Links |
                  Schedule FREE Consultation CTA) that sizes to its content, with
                  a thin divider and a bottom row (legal left / copyright right).
   Uses only existing footer content and design tokens; all link
   hover/focus behaviour is inherited from the base footer rules.
============================================================ */

/* Base (all widths): keep the Quick Links wrapper + label and the CTA inert
   below the desktop breakpoint so the stacked MOBILE footer is unchanged. The
   desktop block below re-activates them at >= 1024px. */
footer.container.site-footer .footer-links {
  display: contents;
}
footer.container.site-footer .footer-quicklinks-title {
  display: none;
}
footer.container.site-footer .footer-cta {
  display: none;
}

@media (min-width: 1024px) {
  /* Three content-sized columns spread across the full width (brand/contact |
     Quick Links | CTA). Columns size to their content and justify-content
     distributes them edge-to-edge, so there is no empty spacer track; the
     divider and bottom row span all three. Height is driven by the tallest
     column (the brand stack), not any fixed minimum. */
  footer.container.site-footer {
    display: grid;
    width: calc(100% - clamp(0.7rem, 2vw, 1.5rem));
    max-width: min(900px, calc(100% - clamp(0.7rem, 2vw, 1.5rem)));
    margin-inline: auto;
    padding: clamp(0.85rem, 1.7vw, 1.2rem) clamp(1.1rem, 2.4vw, 1.9rem);
    grid-template-columns: auto auto auto;
    grid-template-areas:
      "brand    links     cta"
      "address  links     cta"
      "contact  links     cta"
      "divider  divider   divider"
      "legal    copyright copyright";
    justify-content: space-between;
    column-gap: clamp(1.25rem, 3vw, 2.25rem);
    row-gap: clamp(0.4rem, 1vw, 0.6rem);
    align-items: start;
  }

  /* Flatten the wrapper so brand / contact / links / cta become direct grid items. */
  footer.container.site-footer .footer-top {
    display: contents;
  }

  /* --- Column 1: logo, address, phone, social (tightly stacked) --- */
  footer.container.site-footer .footer-brand {
    grid-area: brand;
    justify-self: start;
    margin: 0;
  }
  footer.container.site-footer .footer-brand img {
    height: clamp(84px, 6.4vw, 108px);
  }
  footer.container.site-footer .footer-address {
    grid-area: address;
    justify-self: start;
    text-align: left;
    margin: 0;
  }
  footer.container.site-footer .footer-top > .footer-aside {
    grid-area: contact;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 0.4rem;
    margin: 0;
  }
  footer.container.site-footer .footer-top > .footer-aside .footer-social {
    justify-content: flex-start;
    width: auto;
  }

  /* --- Column 2: Quick Links (one cohesive, compact navigation block) ---
     The block is content-sized and vertically centred within Column 1's row
     span, so the heading lands around the vertical centre of the logo (not its
     top edge) and the four links stack directly beneath it. No stretch and no
     fixed height — the span stays driven by Column 1's content. */
  footer.container.site-footer .footer-links {
    grid-area: links;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    gap: 0.6rem;
  }
  /* Section title — clearly a heading, not a link: larger + bolder than the
     links and in the gold site accent. */
  footer.container.site-footer .footer-quicklinks-title {
    display: block;
    margin: 0;
    color: var(--site-chrome-accent, #ffc64f);
    font-size: clamp(1.2rem, 1.4vw, 1.38rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
  }
  footer.container.site-footer .footer-links .footer-nav {
    display: block;
    width: 100%;
  }
  /* Compact, evenly-spaced vertical list directly beneath the heading — one
     cohesive block, no stretch or space-between gaps. */
  footer.container.site-footer .footer-links .footer-nav > ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  /* Drop the dot separators the default horizontal footer nav injects. */
  footer.container.site-footer .footer-links .footer-nav li + li::before {
    content: none;
  }
  footer.container.site-footer .footer-links .footer-nav li {
    display: flex;
  }
  footer.container.site-footer .footer-links .footer-nav a {
    min-height: auto;
    justify-content: flex-start;
    text-align: left;
    padding: 0.1rem 0;
    font-size: clamp(1.02rem, 1.05vw, 1.14rem);
  }
  /* Gold bullet before each link — a small, subtle dot in the site accent.
     Only the marker is gold; the link text keeps its white/light colour and
     its existing hover/focus behaviour (the dot has its own explicit colour so
     it is unaffected by the link's :hover colour change). */
  footer.container.site-footer .footer-links .footer-nav a::before {
    content: "";
    flex: 0 0 auto;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: var(--site-chrome-accent, #ffc64f);
  }

  /* --- Column 3: Schedule FREE Consultation CTA (reuses the sitewide .cta-button,
     scaled up a little for presence). Vertically centred so it balances the
     brand + Quick Links columns without stretching or looking oversized. --- */
  footer.container.site-footer .footer-cta {
    grid-area: cta;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
  }
  footer.container.site-footer .footer-cta .cta-button {
    font-size: clamp(1rem, 1.1vw, 1.14rem);
    padding: 0.72em 1.75em;
    white-space: nowrap;
  }

  /* --- Divider + compact bottom row --- */
  footer.container.site-footer::before {
    content: "";
    grid-area: divider;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
    align-self: center;
  }
  footer.container.site-footer .footer-legal-nav {
    grid-area: legal;
    justify-content: flex-start;
    align-self: center;
    margin: 0;
  }
  footer.container.site-footer .copyright {
    grid-area: copyright;
    justify-self: end;
    align-self: center;
    text-align: right;
    margin: 0;
  }
}


/* ============================================================================
   3b. CHROME CONTRAST CORRECTIONS — shared, travel with the gray (global)
   ----------------------------------------------------------------------------
   The header/footer were originally coloured for a near-black charcoal. On the
   approved #56524d gray (section 3a) four light-on-light treatments no longer
   hold up, so these four corrections are part of the shared chrome and apply on
   every page. They were validated as the Home prototype and promoted with it.

   Deliberately NOT changed: the beige-paper dropdown/submenu popovers keep
   their dark body text and their orange --primary hover, which are correct on
   that light surface and still pass.
   ============================================================================ */

/* 1. Link hover/focus. The sitewide hover colour --primary (#e94e1b) scored
      4.56:1 on the old charcoal but only 2.06:1 on the gray. Retargeted to the
      chrome's own gold accent (4.96:1) — hover BEHAVIOUR is unchanged (same
      colour-shift on the same states, no state added or removed), only the
      destination colour. Excludes `.submenu a`, which sits on the beige paper
      popover where #e94e1b is still correct.
      Footer nav links define a hover at every width, so this half is unscoped. */
.site-wrapper footer.container.site-footer .footer-nav a:hover,
.site-wrapper footer.container.site-footer .footer-nav a:focus-visible {
  color: var(--site-chrome-accent);
}

/* Header top-level links and the footer legal links only define a hover at
   >=1024px, so these mirror that breakpoint exactly rather than introducing a
   hover state where the site has none. `> ul > li > a` keeps this off the
   submenu links nested deeper in the same nav. */
@media (min-width: 1024px) {
  .site-wrapper header.container.site-header nav > ul > li > a:hover,
  .site-wrapper header.container.site-header nav > ul > li > a:focus-visible,
  .site-wrapper footer.container.site-footer .footer-legal-nav a:hover,
  .site-wrapper footer.container.site-footer .footer-legal-nav a:focus-visible {
    color: var(--site-chrome-accent);
  }
}

/* 2. Phone pill (header + footer). Its light gold wash sat almost on top of the
      gray, dropping the gold label to 4.20:1 and the pill edge to 2.55:1.
      Flipping the fill to a soft dark wash recesses the pill against the
      lighter chrome: gold label 6.27:1, and the border alpha lift takes the
      edge to 3.13:1 (the 3:1 UI-boundary threshold). Gold text and gold border
      colour are unchanged. */
.site-wrapper header.container.site-header .phone-call,
.site-wrapper footer.container.site-footer .phone-call {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 198, 79, 0.72);
}

/* 3. Active nav item. Same problem as the pill — the gold-on-gold-wash chip
      fell to 4.11:1; a dark wash restores it to 5.95:1. Gold text unchanged. */
.site-wrapper header.container.site-header nav li.active > a,
.site-wrapper header.container.site-header nav li.active > .programs-link {
  background: rgba(0, 0, 0, 0.14);
}

/* 4. Desktop footer divider (>=1024px). A 14% white hairline read at 1.54:1 on
      the charcoal but only 1.45:1 here; 20% restores it to 1.68:1 so the bottom
      row stays visually separated. */
.site-wrapper footer.container.site-footer::before {
  background: rgba(255, 255, 255, 0.20);
}

/* ============================================================================
   HOME DESKTOP CONTENT DENSITY (Home/index ONLY)
   A tighter, more efficient desktop Home page — more meaningful content per
   viewport — without the page reading as "smaller", cramped or cheap. There is
   exactly ONE place where Home's desktop density is defined: this block.

   WHAT IT STILL COVERS. The Home page was replaced by the promoted design,
   which brought its own hero carousel, quick-links, pillars and What We Teach
   sections (all styled inline in index.php). What survives here is the density
   direction for the parts the two designs share: the page shell, the
   header/footer chrome sizing, the hero's two-column frame and the testimonial
   panel. The rules for the sections the promoted design dropped were removed
   with them.

   SCOPING — two guards, both required:
     1. `.page-home` — a Home-only body class set in index.php (the ONLY markup
        change in this task). Nothing else on the site carries it, so not one
        declaration below can reach an interior page even though several of the
        base selectors (.site-theme, header/footer chrome) are sitewide.
     2. `@media (min-width: 1024px)` — the site's existing desktop breakpoint
        (where the header/footer switch to their desktop layout). Mobile
        (<=768px) AND tablet (769-1023px) therefore inherit the untouched base
        values: zero declarations here apply below 1024px.

   Geometry only — the block declares no colour, background, border or shadow
   property, so the beige canvas, the Amethyst family, the gold accents and the
   #56524d chrome all carry through untouched. No transform:scale, no zoom, no
   global typography change; every reduction is per-component and hand-tuned.

   Header and footer are deliberately held at a modest reduction (see the
   chrome note below); the rest of the saving comes from page content.

   Home-only — do NOT roll sitewide without owner approval.
   ============================================================================ */

@media (min-width: 1024px) {

  /* --- Page shell ------------------------------------------------------- */
  /* main's own top/bottom breathing room.
     Base clamp(1rem,2vw,1.5rem) / 2.8rem  ->  p1 1rem / 2rem  ->  p2 below. */
  .page-home .site-theme {
    padding-top: 0.75rem;
    padding-bottom: 1.5rem;
  }

  /* --- Header + footer chrome (sizing only — no redesign) ---------------- */
  /* The logo alone sets each bar's height, so it is the only lever used here,
     and pass 2 leaves BOTH at their pass-1 values: the chrome has already given
     up ~11% and the owner asked that this pass come from page content instead.
     Header base was clamp(86px, 6.8vw, 116px); footer base clamp(112px, 7.8vw,
     132px). Padding, nav, structure, legal row and colours are all untouched. */
  .page-home header.container.site-header .banner-header img {
    height: clamp(80px, 6vw, 102px);
  }
  .page-home footer.container.site-footer .footer-brand img {
    height: clamp(98px, 6.9vw, 118px);
  }

  /* --- Hero ------------------------------------------------------------- */
  /* Panel padding was the single biggest block of dead space on the original
     page: 4rem top / 3rem bottom -> p1 3.15/2.35 -> p2 2.5/1.75 (112px of
     vertical padding down to 68px). The eyebrow badge is absolutely positioned
     against this panel, so its offset AND its line-height move with the padding
     to keep it clear of the headline — 5.5px of clearance at the new values
     (badge box 27.3px tall at top:7.2px, against a 40px padding-top). */
  .page-home .site-theme #hero .hero-feature__panel {
    padding: 2.5rem 2.5rem 1.75rem;
  }

  /* Column rhythm: base 1.25rem between badge/headline/STEM/copy/CTA. */
  .page-home .site-theme #hero .hero-feature__left {
    gap: 0.9rem;
  }

  /* Typewriter headline inherited the 1.6 body line-height, loose for a display
     line. The ghost and the .tw-live overlay both inherit this value, so they
     stay pixel-matched and the no-reflow technique is unaffected. */
  .page-home .site-theme #hero .hero-feature__left h1:first-of-type {
    line-height: 1.2;
  }

  .page-home .site-theme #hero .hero-feature__left p {
    line-height: 1.5;
  }

  /* --- Section frame (Testimonials) -------------------------------------- */
  /* Base margin 1.45rem (collapses to a single gutter between the panels) and
     padding clamp(1.5rem, 2.5vw, 2.6rem). Horizontal `auto` margin preserved. */
  .page-home .site-theme #testimonial {
    margin-top: 0.95rem;
    margin-bottom: 0.95rem;
    padding: clamp(1.2rem, 1.85vw, 1.9rem);
  }

  /* --- Section headings -------------------------------------------------- */
  /* These were the second-largest source of slack: a ~46px uppercase title
     carrying the inherited 1.6 body line-height produced a ~74px line box.
     Most of the saving is line-height (1.6 -> 1.2 -> 1.15); the font-size trims
     are deliberately small (~7% each pass) so the titles stay display-scale.
     A later typography pass cut this title a further ~23% at every desktop
     width: its long heading sits in the narrow intro column.
     Gold underline rule and its centring are preserved. */
  .page-home .site-theme #testimonial h2 {
    font-size: clamp(1.25rem, 1.35vw + 0.68rem, 2rem);
    line-height: 1.15;
    padding-bottom: 0.35rem;
  }
  .page-home .site-theme #testimonial h2::after {
    margin-top: 0.28rem;
  }
  /* Restated: the testimonial heading is a flex child, so it carries margin:0
     and its own padding-bottom rather than the base heading's margin. */
  .page-home .site-theme #testimonial h2 {
    margin: 0;
    padding-bottom: 0.25rem;
  }

  /* --- Testimonials ------------------------------------------------------ */
  .page-home .site-theme #testimonial .tst__intro {
    gap: 0.75rem;
  }
  .page-home .site-theme #testimonial .tst__subhead {
    font-size: 1rem;
    line-height: 1.45;
  }
  /* .tst__stack's min-height is a FIXED reservation for the absolutely
     positioned cards — a card that outgrows it overflows — so it is never cut
     on its own. Each pass first trims the card's own fixed overhead (padding,
     the four flex gaps, the stars, the quote mark, the avatar) and only then
     lowers the reservation by less than it saved. Fixed overhead at 1440:
     246 -> 205 -> 174px against a reservation of 380 -> 340 -> 305px, so the
     room left for quote text is 4.03 -> 4.20 -> 4.19 lines. Verified at every
     width from 1024 to 2560: pass 2 never leaves less quote room than the
     original page did. */
  .page-home .site-theme #testimonial .tst__stack {
    min-height: 305px;
  }
  .page-home .site-theme #testimonial .tst-card {
    gap: 0.65rem;
    padding: clamp(1.2rem, 1.85vw, 1.7rem);
  }
  .page-home .site-theme #testimonial .tst-card__star {
    width: 1.05rem;
    height: 1.05rem;
  }
  .page-home .site-theme #testimonial .tst-card__quote {
    width: 1.6rem;
    height: 1.6rem;
  }
  .page-home .site-theme #testimonial .tst-card__text {
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.5;
  }
  .page-home .site-theme #testimonial .tst-card__avatar {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ============================================================================
   TASK 10.5 — SELECTED-PAGE DESKTOP CONTENT DENSITY (PROTOTYPE)
   Extends the approved Home desktop-density direction to FIVE pages ONLY:
   Blog, About Us, Contact Us, Summer Camps, Past Camps.

   THIS IS NOT A SITEWIDE ROLLOUT. Programs, FAQs, Gallery, Partnerships, the
   legal pages and Home are all deliberately excluded and must be unaffected by
   everything below.

   WHY BODY CLASSES WERE REQUIRED. Four of the five target pages share their
   structural selectors with pages that must NOT change: .program-page,
   .program-hero, .program-section, .program-panel, .program-content and
   .page-banner are used by FAQs, Gallery, Partnerships and the legal pages
   too, which carry the same `main.program-page.site-theme` as the two camps
   pages. There is
   no pre-existing selector that isolates these five, so each page gained one
   body class, matching the .page-home convention already established for Home:
     blog.php                -> .page-blog
     about-us.php            -> .page-about
     contact-us.php          -> .page-contact
     camps/summer-camps.php  -> .page-camps-summer
     camps/past-camps.php    -> .page-camps-past
   These five classes are the only markup change in this task.

   SCOPING — two guards, both required on every declaration:
     1. A body class from the list above. Every selector in this section starts
        with one, so a page that does not carry one cannot inherit anything
        here, no matter which shared component class it uses.
     2. @media (min-width: 1024px). Mobile (<=768px) and tablet (769-1023px)
        inherit the untouched base values; zero declarations apply below 1024px.
   No broad rule is created and then undone elsewhere — the scope is positive
   only.

   Geometry and line-height only: this section declares no colour, background,
   border-colour or shadow property, so the beige canvas, the Amethyst family,
   the gold accents and the #56524d chrome carry through unchanged. No
   transform:scale, no zoom, no global typography reduction. Header and footer
   are NOT touched — Home's shorter chrome is Home-only and is not copied here,
   so these five pages keep the shared header/footer dimensions.

   Contact form controls (input/select/textarea padding, font-size, focus
   rings, the consent checkbox) are deliberately left alone for usability; only
   the space AROUND them and the textarea's starting height are reduced.
   Camp card images are left alone as well — at 160px they are already the
   thinnest images on the site and cutting them further would read as cropped.

   PROTOTYPE — do NOT extend to any further page without owner approval.
   ============================================================================ */

@media (min-width: 1024px) {

  /* ---------------------------------------------------------------------
     A. SHARED SHELL — the five pages' <main> and section rhythm
     --------------------------------------------------------------------- */
  /* Each page's <main> sets padding: clamp(1rem,2vw,1.5rem) 0 2.8rem via its
     own page class (.program-page / .about-page / .contact-page) as well as
     the shared .site-theme. Targeting main.site-theme clears all of them. */
  .page-blog main.site-theme,
  .page-about main.site-theme,
  .page-contact main.site-theme,
  .page-camps-summer main.site-theme,
  .page-camps-past main.site-theme {
    padding-top: 0.75rem;
    padding-bottom: 1.75rem;
  }

  /* Gap between stacked sections. Base clamp(1rem, 2.8vw, 1.55rem) on all
     three variants of the same idea. Summer Camps stacks five of these. */
  .page-blog .blog-section,
  .page-camps-summer .program-section,
  .page-camps-past .program-section,
  .page-about .about-section,
  .page-contact .contact-section {
    margin-top: clamp(0.75rem, 1.9vw, 1.1rem);
  }

  /* ---------------------------------------------------------------------
     B. SHARED PAGE HEADER — .program-hero (Blog, About, Contact)
     --------------------------------------------------------------------- */
  /* Boxed page-title header. Base min-height clamp(99px, 10.8vw, 140px)
     with clamp(0.67rem, 1.6vw, 1.13rem) block padding. The camps pages do not
     use this — they use the full-bleed .page-banner handled in section F. */
  .page-blog .program-hero,
  .page-about .program-hero,
  .page-contact .program-hero {
    min-height: clamp(84px, 8.4vw, 112px);
    padding-block: clamp(0.55rem, 1.25vw, 0.88rem);
  }

  /* Title-only pill (Task 11) — these three pages lost the eyebrow above the
     title, so the density min-height above, which was sized for the two-line
     eyebrow + title stack, now leaves the lone title floating. Lowered to the
     same small slack over natural content height. min-height only; the density
     block-padding, the title size and every colour/border/shadow are unchanged. */
  .page-blog .program-hero--title-only,
  .page-about .program-hero--title-only,
  .page-contact .program-hero--title-only {
    min-height: clamp(64px, 6vw, 84px);
  }
  /* Modest trim on an oversized display title — base clamp(1.75rem, 4.1vw,
     3.45rem) reached 55px at 1440. Line-height and weight are untouched. */
  .page-blog .program-title,
  .page-about .program-title,
  .page-contact .program-title,
  .page-camps-summer .program-title,
  .page-camps-past .program-title {
    font-size: clamp(1.75rem, 3.6vw, 3rem);
  }

  /* ---------------------------------------------------------------------
     C. BLOG (blog.php)
     Biggest source of height: the featured card's 4/3 image, which at 1440
     resolved to ~509px and set the whole card's height on its own.
     --------------------------------------------------------------------- */
  .page-blog .page-intro__subhead {
    margin-top: 0.6rem;
    line-height: 1.55;
  }

  .page-blog .blog-featured {
    padding: clamp(0.75rem, 1.6vw, 1.1rem);
    gap: clamp(0.95rem, 2.4vw, 1.6rem);
  }
  .page-blog .blog-featured__badge {
    top: clamp(0.75rem, 1.6vw, 1.1rem);
    left: clamp(0.75rem, 1.6vw, 1.1rem);
  }
  /* 4/3 -> 16/10, the ratio the small cards and the <=760px layout already
     use, so the page becomes internally consistent as well as shorter.
     object-fit is cover, so this trims letterbox rather than distorting. */
  .page-blog .blog-featured__media img {
    aspect-ratio: 16 / 10;
  }
  .page-blog .blog-featured__body {
    gap: 0.55rem;
    padding: clamp(0.35rem, 1.2vw, 0.8rem);
  }
  .page-blog .blog-featured__title {
    font-size: clamp(1.35rem, 1.25vw + 0.95rem, 1.9rem);
  }
  .page-blog .blog-featured__excerpt,
  .page-blog .blog-card__excerpt {
    line-height: 1.55;
  }

  .page-blog .blog-grid {
    gap: clamp(0.85rem, 1.8vw, 1.25rem);
  }
  .page-blog .blog-card__media img {
    aspect-ratio: 16 / 9;
  }
  .page-blog .blog-card__body {
    gap: 0.48rem;
    padding: clamp(0.85rem, 1.55vw, 1.1rem);
  }
  .page-blog .blog-readmore {
    margin-top: 0.15rem;
  }

  /* Newsletter band — base margin-top clamp(2rem,5vw,3.5rem) was the largest
     single gap on the page (56px at 1440). */
  .page-blog .blog-newsletter {
    margin-top: clamp(1.25rem, 3vw, 2rem);
    padding: clamp(1.25rem, 2.9vw, 2rem);
  }
  .page-blog .blog-newsletter__title {
    font-size: clamp(1.3rem, 1.05vw + 0.95rem, 1.8rem);
  }
  .page-blog .blog-newsletter__text {
    margin: 0.6rem auto 1rem;
    line-height: 1.55;
  }

  /* ---------------------------------------------------------------------
     D. ABOUT US (about-us.php)
     Biggest source of height: the mission logo card's 260px min-height, which
     is taller than the copy beside it and therefore sets the row.
     --------------------------------------------------------------------- */
  .page-about .about-panel {
    padding: clamp(1.05rem, 2.3vw, 1.85rem);
  }
  .page-about .about-section-title {
    font-size: clamp(1.5rem, 1.8vw + 0.9rem, 2.6rem);
    margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem);
    padding-bottom: 0.5rem;
  }
  .page-about .about-section-title::after {
    margin-top: 0.4rem;
  }

  .page-about .about-mission-grid {
    gap: clamp(0.9rem, 2.4vw, 1.7rem);
  }
  .page-about .about-mission-logo-card {
    min-height: clamp(150px, 18vw, 200px);
    padding: clamp(0.8rem, 1.6vw, 1.1rem);
  }
  .page-about .about-copy {
    line-height: 1.6;
  }

  .page-about .about-team-grid {
    gap: clamp(0.85rem, 1.6vw, 1.15rem);
  }
  .page-about .about-team-photo-wrap {
    padding: clamp(0.8rem, 1.5vw, 1.05rem);
  }
  /* NOTE: the team photo width is handled in the >=1081px block at the end of
     this section, NOT here. Below 1081px the base stylesheet switches the team
     card to a horizontal photo|body layout with its own width rule, and a
     value set here would win on specificity and shrink the photo in the
     1024-1080 band too. Only the wrap padding above is safe at both layouts. */
  .page-about .about-team-body {
    padding: clamp(0.85rem, 1.55vw, 1.1rem);
  }
  .page-about .about-member-name {
    font-size: clamp(1.25rem, 2.1vw, 1.5rem);
  }
  .page-about .about-member-role {
    margin: 0.45rem 0 0.6rem;
  }
  .page-about .about-team-bio {
    line-height: 1.55;
  }

  /* ---------------------------------------------------------------------
     E. CONTACT US (contact-us.php)
     The two top cards stretch to a shared height that the info card's stacked
     content dictates, so the savings come from that stack's internal gaps —
     NOT from the form controls, which are left at full size.
     --------------------------------------------------------------------- */
  .page-contact .contact-card {
    padding: clamp(1.05rem, 2.2vw, 1.65rem);
  }
  .page-contact .contact-card h2 {
    margin-bottom: 0.55rem;
  }
  .page-contact .contact-address {
    margin-bottom: 0.65rem;
  }
  .page-contact .contact-grid {
    gap: clamp(0.85rem, 1.6vw, 1.15rem);
  }

  .page-contact .contact-info-list {
    gap: 0.4rem;
    margin-bottom: 0.65rem;
  }
  .page-contact .contact-social-row {
    margin-bottom: 0.75rem;
  }
  .page-contact .contact-hours {
    margin-bottom: 0.75rem;
  }
  .page-contact .contact-hours h3 {
    margin-bottom: 0.45rem;
  }
  .page-contact .contact-hours ul {
    gap: 0.28rem;
  }
  .page-contact .contact-cta {
    margin-top: 0.75rem;
  }

  .page-contact .contact-form-section {
    margin-top: clamp(0.8rem, 1.9vw, 1.15rem);
  }
  .page-contact .contact-form-section h2 {
    margin-bottom: 0.9rem;
  }
  .page-contact .contact-form-grid {
    gap: clamp(0.7rem, 1.45vw, 1rem);
  }
  /* Label-to-control gap only. Control padding, font-size, border-radius and
     the focus ring are intentionally NOT overridden anywhere in this section. */
  .page-contact .contact-form-field {
    gap: 0.35rem;
  }
  /* Starting height only — the control stays user-resizable (resize: vertical)
     and 96px still shows four lines of the message. */
  .page-contact .contact-form-field textarea {
    min-height: 96px;
  }
  .page-contact .contact-form-actions {
    margin-top: clamp(0.7rem, 1.2vw, 0.9rem);
  }
  .page-contact .contact-disclaimer {
    margin-top: 0.45rem;
    line-height: 1.45;
  }

  /* ---------------------------------------------------------------------
     F. CAMPS — shared by Summer Camps and Past Camps
     Both pages are built from .page-banner + repeated
     .program-section > .program-panel.program-content blocks, so the panel
     padding and the boxed <h3> heading repeat five times on Summer Camps and
     three times on Past Camps — they are the dominant cost on both.
     Nesting depth is preserved: at 1440 the panel keeps 29.6px of padding, the
     logistics block 25.6px and each logistics item 16px, the same descending
     hierarchy as the base values (38.4 / 32 / 20).
     --------------------------------------------------------------------- */
  /* Full-bleed photo banner. Base min-height clamp(180px, 28vw, 340px) — the
     single largest desktop element on either camps page. */
  .page-camps-summer .page-banner,
  .page-camps-past .page-banner {
    min-height: clamp(180px, 21vw, 260px);
  }

  .page-camps-summer .program-panel,
  .page-camps-past .program-panel {
    padding: clamp(1.05rem, 2.3vw, 1.85rem);
  }

  /* Boxed section heading — font, its own padding, the accent rule beneath it
     and the gap to the content below all contribute. */
  .page-camps-summer .program-content > h3,
  .page-camps-past .program-content > h3 {
    font-size: clamp(1.4rem, 1.3vw + 0.9rem, 2.2rem);
    margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem);
    padding: clamp(0.8rem, 1.4vw, 1.15rem) clamp(1rem, 2.3vw, 2rem) clamp(0.7rem, 1.25vw, 0.95rem);
  }
  .page-camps-summer .program-content > h3::after,
  .page-camps-past .program-content > h3::after {
    margin-top: 0.5rem;
  }

  /* Body copy: line-height only, no font-size change. 1.72 was loose for
     multi-paragraph panels; 1.62 stays comfortable for parents reading detail. */
  .page-camps-summer .program-content,
  .page-camps-past .program-content {
    line-height: 1.62;
  }
  .page-camps-summer .program-content p,
  .page-camps-past .program-content p {
    margin-bottom: 0.75rem;
  }
  .page-camps-summer .program-content h4,
  .page-camps-summer .program-content .subsection-lead,
  .page-camps-past .program-content h4,
  .page-camps-past .program-content .subsection-lead {
    margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0.55rem;
  }
  .page-camps-summer .program-content ul,
  .page-camps-past .program-content ul {
    gap: 0.55rem;
    margin: 0.5rem 0 0.9rem;
  }
  .page-camps-summer .program-content li,
  .page-camps-past .program-content li {
    padding: 0.52rem 0.82rem 0.55rem 0.86rem;
  }

  /* Camp cards. The 160px image height is deliberately NOT reduced — it is
     already the thinnest image band on the site. */
  .page-camps-summer .camp-grid,
  .page-camps-past .camp-grid {
    gap: clamp(0.85rem, 1.8vw, 1.25rem);
    margin-top: clamp(0.9rem, 2.1vw, 1.4rem);
  }
  .page-camps-summer .camp-card__body,
  .page-camps-past .camp-card__body {
    gap: 0.42rem;
    padding: clamp(0.85rem, 1.9vw, 1.2rem);
  }
  .page-camps-summer .camp-card__actions,
  .page-camps-past .camp-card__actions {
    padding-top: 0.6rem;
  }

  .page-camps-summer .camp-cta-footer p,
  .page-camps-past .camp-cta-footer p {
    margin-bottom: 0.75rem;
  }

  /* ---------------------------------------------------------------------
     G. SUMMER CAMPS ONLY — logistics, day-at-camp, accordion, FAQ
     --------------------------------------------------------------------- */
  .page-camps-summer .camp-logistics {
    padding: clamp(1.05rem, 2.3vw, 1.6rem);
  }
  .page-camps-summer .camp-logistics h2 {
    margin-bottom: 0.75rem;
  }
  .page-camps-summer .camp-logistics__grid {
    gap: clamp(0.85rem, 1.8vw, 1.15rem);
    margin-top: 0.35rem;
  }
  .page-camps-summer .camp-logistics__item {
    padding: clamp(0.7rem, 1.6vw, 1rem);
  }
  .page-camps-summer .camp-logistics__item h4 {
    margin-bottom: 0.45rem;
  }

  .page-camps-summer .camp-day__grid {
    gap: clamp(1.1rem, 2.5vw, 1.75rem);
    margin-top: clamp(0.9rem, 2.1vw, 1.4rem);
  }
  .page-camps-summer .camp-day__intro figure {
    margin-bottom: 0.75rem;
  }
  .page-camps-summer .camp-day__cta {
    margin-top: clamp(1rem, 2.1vw, 1.4rem);
  }

  .page-camps-summer .camp-accordion__trigger {
    padding-block: 0.7rem;
  }
  .page-camps-summer .camp-accordion__panel-inner {
    padding-bottom: 0.7rem;
    line-height: 1.55;
  }

  .page-camps-summer .camp-faq__list {
    margin-top: clamp(0.8rem, 1.8vw, 1.15rem);
  }
  .page-camps-summer .camp-faq__item details {
    padding-block: clamp(0.6rem, 1.2vw, 0.8rem);
  }
  .page-camps-summer .camp-faq__item details p,
  .page-camps-summer .camp-faq__item details ul {
    margin-top: 0.5rem;
    line-height: 1.55;
  }
}

/* Team-photo trim, deliberately gated at >=1081px — the width where the About
   team grid becomes three columns. The 1024-1080 band keeps the base stylesheet's
   horizontal card layout and its own min(100%, 210px) photo rule untouched.
   Still inside the Task 10.5 scope on both guards: .page-about only, and
   1081px is above the 1024px desktop floor. */
@media (min-width: 1081px) {
  .page-about .about-team-photo {
    width: clamp(150px, 13.5vw, 180px);
  }
}

/* ============================================================================
   SCHOOL PARTNERSHIP PROGRAMS
   Used by: partnerships/school-partnership-programs.php

   SCOPE: every selector in this section is prefixed with
   `.page-school-partnerships`, the body class carried ONLY by the page above.
   Nothing here can reach another page. Do not loosen these selectors — the
   scope prefix is what keeps this block safe inside the shared stylesheet.

   POSITION: this section is LAST in site.css on purpose. It was authored and
   visually approved as a separate stylesheet loaded AFTER site.css, so equal-
   specificity ties resolved in its favour. Several later blocks in this file
   (e.g. `.site-wrapper .cta-button`, `.page-* main.site-theme`) are also 0,2,0
   and would otherwise win those ties and change the approved rendering. Keeping
   this section at the end reproduces the reviewed cascade exactly. Anything
   appended after it must not target this page.

   IDENTITY: no new palette, no new type family, no chrome change. Every colour
   below is an existing site.css token or an existing site.css literal, reused:
     beige canvas        --page-bg              (body, sitewide — untouched)
     chrome              --site-chrome-bg #56524d (header/footer — untouched)
     Amethyst surfaces   rgba(66,33,99,.90)   #422163  L26 — hero pill + inner
                                                            cards (= Home hero)
                         rgba(87,43,130,.85)  #572b82  L34 — standard panel
                                                            (= Home section panel)
                         rgba(102,51,153,.86) #663399  L40 — testimonial panel
                                                            (= Home #testimonial)
                         rgba(86,43,129,.97)  #562b81  L28 — testimonial card
                                                            (= .tst-card above)
                       All four are already-approved values on the documented
                       hue-270 / sat-50% Amethyst axis. No new purple is coined.
     gold accents        --site-chrome-accent #ffc64f, plus the existing
                         rgba(255,221,139,.92) -> rgba(255,156,18,.96) rule and
                         the linear-gradient(150deg, --stem-engineering, #d08b10)
                         avatar disc from .tst-card__avatar
     dark ink on gold    #1a0533 — the value already paired with the engineering
                         gold on .tst-card__avatar
     buttons             .cta-button, untouched (the single sitewide button)
     form controls       the .contact-form-field treatment above (translucent
                         white field, gold focus ring), re-expressed under this
                         page's own class names

   HEADINGS: .spp2-section-title is deliberately identical to the Home section
   heading (`.site-theme #testimonial h2` + its gold ::after bar), so the page's
   titles — including the Testimonials heading — read as the same family.

   DENSITY: the >=1024px block follows the approved desktop-density direction
   (tighter panel margins/padding, tighter heading line boxes). It is geometry
   and line-height only — no colour, and none of it applies below 1024px, so
   mobile keeps the site's established comfortable sizing.

   BEHAVIOUR: the hero carousel and the inquiry form's submit handler live in
   Assets/js/site.js, guarded on #spp2Carousel / [data-spp2-form].
   ============================================================================ */

/* ============================================================
   0. SHARED SECTION FURNITURE
   .spp2-panel mirrors the approved Home section panel exactly
   (width, margin, radius, border, shadow, padding, Amethyst glass) — the
   values `.site-theme #testimonial` still carries.
   ============================================================ */

.page-school-partnerships .spp2-panel {
  width: min(1480px, calc(100% - clamp(1rem, 4vw, 4rem)));
  margin: 1.45rem auto;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--site-radius-lg, var(--radius-lg));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 188, 79, 0.08), transparent 32%),
    rgba(87, 43, 130, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
}

/* Centred section title with the sitewide gold underline — the exact treatment
   used by #testimonial h2 on the approved Home page. */
.page-school-partnerships .spp2-section-title {
  position: relative;
  margin: 0 0 clamp(1rem, 2.2vw, 1.75rem);
  padding-bottom: 0.72rem;
  color: #fffefb;
  text-align: center;
  font-size: clamp(1.65rem, 2.1vw + 1rem, 3rem);
  font-weight: 800;
  letter-spacing: clamp(0.03em, 0.15vw, 0.08em);
  line-height: 1.18;
  text-transform: uppercase;
  text-shadow: var(--text-shadow-lg);
  text-wrap: balance;
}

.page-school-partnerships .spp2-section-title::after {
  content: "";
  display: block;
  width: clamp(88px, 12vw, 160px);
  height: 4px;
  margin: 0.52rem auto 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(255, 221, 139, 0.92), rgba(255, 156, 18, 0.96));
  box-shadow: var(--shadow-glow-gold);
}

/* Left-aligned section heading, used where the section title sits beside an
   image rather than above a grid (the Collaborative Learning column). */
.page-school-partnerships .spp2-heading {
  margin: 0 0 0.85rem;
  padding-bottom: 0.55rem;
  color: #fffefb;
  font-size: clamp(1.4rem, 1.5vw + 0.8rem, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  text-shadow: var(--text-shadow-md);
  text-wrap: balance;
}

.page-school-partnerships .spp2-heading::after {
  content: "";
  display: block;
  width: clamp(72px, 9vw, 120px);
  height: 4px;
  margin-top: 0.5rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(255, 221, 139, 0.92), rgba(255, 156, 18, 0.96));
  box-shadow: var(--shadow-glow-gold);
}

/* ============================================================
   1. HERO — split copy / carousel on the darkest Amethyst pill.
   Geometry mirrors the approved Home .hero-feature__panel
   (two equal columns, 3rem gutter, 1.5rem radius) without
   borrowing its selectors, so nothing on Home is involved.
   ============================================================ */

.page-school-partnerships .spp2-hero {
  width: min(1480px, calc(100% - clamp(1rem, 4vw, 4rem)));
  margin: 1.45rem auto;
}

.page-school-partnerships .spp2-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--shadow-lg);
  background: rgba(66, 33, 99, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.page-school-partnerships .spp2-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  text-align: center;
}

.page-school-partnerships .spp2-hero__title {
  margin: 0;
  color: #fffefb;
  font-size: clamp(1.75rem, 2.4vw + 0.9rem, 3.1rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-shadow: var(--text-shadow-md);
  text-wrap: balance;
}

.page-school-partnerships .spp2-hero__sub {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.98rem, 0.55vw + 0.8rem, 1.15rem);
  line-height: 1.6;
}

.page-school-partnerships .spp2-hero__cta {
  margin-top: 0.35rem;
  min-height: 2.9rem;
  padding: 0.75em 1.8em;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}

.page-school-partnerships .spp2-hero__media {
  min-width: 0;
}

/* --- Carousel --- */
.page-school-partnerships .spp2-carousel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  min-width: 0;
}

/* Fixed aspect box: the height never depends on which slide is active, so
   changing slides causes zero layout shift. */
.page-school-partnerships .spp2-carousel__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(26, 5, 51, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-md);
}

.page-school-partnerships .spp2-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}

.page-school-partnerships .spp2-carousel__slide.is-active {
  opacity: 1;
}

/* Per-photograph crops for the authentic slides ('crop' in the page), so the
   robot builds and the whole club group stay in frame, not only faces. */
.page-school-partnerships .spp2-crop--library { object-position: 50% 60%; }
.page-school-partnerships .spp2-crop--floor { object-position: 50% 60%; }
.page-school-partnerships .spp2-crop--group { object-position: 50% 75%; }

.page-school-partnerships .spp2-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.page-school-partnerships .spp2-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.page-school-partnerships .spp2-carousel__arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.page-school-partnerships .spp2-carousel__arrow:hover,
.page-school-partnerships .spp2-carousel__arrow:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.page-school-partnerships .spp2-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

/* 26x40 hit area around a 9px dot — comfortably tappable without a large dot. */
.page-school-partnerships .spp2-carousel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.page-school-partnerships .spp2-carousel__dot > span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.36);
  transition: background 0.2s ease, transform 0.2s ease;
}

.page-school-partnerships .spp2-carousel__dot.is-active > span {
  background: var(--site-chrome-accent);
  transform: scale(1.3);
}

/* ============================================================
   2. COLLABORATIVE LEARNING ON CAMPUS
   ============================================================ */

.page-school-partnerships .spp2-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
  align-items: center;
}

.page-school-partnerships .spp2-intro__copy {
  min-width: 0;
}

.page-school-partnerships .spp2-intro__copy p {
  margin: 0 0 0.85rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.98rem, 0.45vw + 0.85rem, 1.08rem);
  line-height: 1.62;
}

.page-school-partnerships .spp2-intro__copy p:last-child {
  margin-bottom: 0;
}

.page-school-partnerships .spp2-intro__copy strong {
  color: #fffefb;
  font-weight: 800;
}

/* Fixed aspect frame so the wide banner asset never dictates the row height. */
.page-school-partnerships .spp2-intro__figure {
  margin: 0;
  min-width: 0;
  border-radius: var(--site-radius-md, var(--radius-md));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-md);
  background: rgba(26, 5, 51, 0.35);
}

.page-school-partnerships .spp2-intro__figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Keeps the students AND the robotics kits on the table in frame. */
  object-position: 50% 45%;
}

/* ============================================================
   3. WHY PARTNER WITH STEMATICS ACADEMY? — three cards
   Card shell matches the approved .hv2-pillar treatment: deepest
   Amethyst, gold top rule, standard lift on hover.
   ============================================================ */

.page-school-partnerships .spp2-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 1.6vw, 1.3rem);
}

.page-school-partnerships .spp2-benefit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  overflow: hidden;
  padding: clamp(1.3rem, 2vw, 1.7rem) clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: var(--site-radius-md, var(--radius-md));
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(66, 33, 99, 0.9);
  box-shadow: 0 14px 24px rgba(8, 4, 22, 0.28);
  text-align: center;
  transition: var(--transition-card);
}

.page-school-partnerships .spp2-benefit:hover,
.page-school-partnerships .spp2-benefit:focus-within {
  transform: translateY(var(--lift-card));
  box-shadow: 0 18px 30px rgba(8, 4, 22, 0.34);
}

.page-school-partnerships .spp2-benefit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 221, 139, 0.92), rgba(255, 156, 18, 0.96));
}

/* Gold disc holding the local inline SVG. Ink is the dark value site.css
   already pairs with the engineering gold. */
.page-school-partnerships .spp2-benefit__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.1rem;
  height: 3.1rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--stem-engineering), #d08b10);
  color: #1a0533;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 14px rgba(8, 4, 22, 0.3);
}

/* nav_icon() ships .submenu-icon at a fixed 20px for the dropdowns; scale it up
   for the benefit discs. Every glyph is currentColor, so the disc's ink drives
   both stroke and the filled dots. */
.page-school-partnerships .spp2-benefit__icon .submenu-icon {
  width: 1.7rem;
  height: 1.7rem;
}

.page-school-partnerships .spp2-benefit__title {
  margin: 0;
  color: var(--site-chrome-accent);
  font-size: clamp(1.12rem, 1.1vw + 0.6rem, 1.35rem);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.page-school-partnerships .spp2-benefit__body {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.95rem, 0.4vw + 0.82rem, 1.03rem);
  line-height: 1.55;
}

/* ============================================================
   4. PARTNERSHIP TESTIMONIAL
   Lightest Amethyst panel (Home #testimonial) holding the deeper
   .tst-card surface, the gold decorative quote mark, the gold
   separator and the Home avatar + name + role author row. One
   hard-coded quote — no rotator, no data island, no API.
   ============================================================ */

.page-school-partnerships .spp2-testimonial {
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 184, 62, 0.1), transparent 40%),
    rgba(102, 51, 153, 0.86);
}

.page-school-partnerships .spp2-quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(100%, 62rem);
  margin: 0 auto;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: 1.5rem;
  background: rgba(86, 43, 129, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 18px 40px rgba(8, 4, 22, 0.45);
}

.page-school-partnerships .spp2-quote__mark {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  color: rgba(248, 174, 32, 0.22);
}

.page-school-partnerships .spp2-quote__text {
  margin: 0;
  color: #fff8ec;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6;
}

.page-school-partnerships .spp2-quote__sep {
  margin: 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 221, 139, 0.5), rgba(255, 156, 18, 0.28), transparent);
}

.page-school-partnerships .spp2-quote__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Same gold disc as the Home author avatar. It carries a decorative glyph
   rather than initials, because the supplied attribution is a role — not a
   person's name — and inventing initials would fabricate content. */
.page-school-partnerships .spp2-quote__avatar {
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  flex-shrink: 0;
  color: #1a0533;
  background: linear-gradient(150deg, var(--stem-engineering), #d08b10);
}

.page-school-partnerships .spp2-quote__avatar .submenu-icon {
  width: 1.55rem;
  height: 1.55rem;
}

.page-school-partnerships .spp2-quote__author-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-school-partnerships .spp2-quote__name {
  font-weight: 700;
  color: #ffffff;
}

.page-school-partnerships .spp2-quote__role {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   5. OUR CURRENT PARTNERS
   Both supplied marks are dark artwork on a light ground, so each
   sits on a light plate; placing them straight onto Amethyst would
   make the CNSCS red unreadable and box the Greenbrier JPEG's own
   white corners against the purple.
   ============================================================ */

.page-school-partnerships .spp2-partners__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  width: min(100%, 46rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.page-school-partnerships .spp2-partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.page-school-partnerships .spp2-partner__plate {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 1 / 1;
  padding: clamp(0.75rem, 1.6vw, 1.15rem);
  border-radius: var(--site-radius-md, var(--radius-md));
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: #ffffff;
  box-shadow: var(--shadow-md);
  transition: var(--transition-card);
}

.page-school-partnerships .spp2-partner:hover .spp2-partner__plate {
  transform: translateY(var(--lift-card));
  box-shadow: var(--shadow-lg);
}

.page-school-partnerships .spp2-partner__plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.page-school-partnerships .spp2-partner__name {
  color: #fffefb;
  font-size: clamp(1rem, 0.5vw + 0.85rem, 1.15rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

/* ============================================================
   6. INTERESTED IN PARTNERING? — inquiry form
   Field treatment is the sitewide contact-form aesthetic from
   site.css (.contact-form-field): translucent white field on the
   Amethyst surface, gold focus ring, vertical-resize textarea.
   ============================================================ */

/* The hero CTA scrolls here. The shared header is position:sticky (site.css),
   so the landing point is offset by the header's own height — logo
   clamp(74px,20vw,102px) / clamp(86px,6.8vw,116px) on desktop, plus its
   padding and margin-top — otherwise the heading lands underneath it. */
.page-school-partnerships .spp2-inquiry {
  scroll-margin-top: clamp(112px, 20vw, 160px);
}

/* This section leads with a supporting line under its title, so the title's
   own bottom margin is trimmed here rather than pulled back with a negative
   margin (which would collapse at the tighter desktop-density values). */
.page-school-partnerships .spp2-inquiry .spp2-section-title {
  margin-bottom: 0.75rem;
}

.page-school-partnerships .spp2-inquiry__lede {
  width: min(100%, 62ch);
  margin: 0 auto clamp(1.2rem, 2.4vw, 1.9rem);
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.98rem, 0.45vw + 0.85rem, 1.1rem);
  line-height: 1.6;
  text-align: center;
}

.page-school-partnerships .spp2-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
  width: min(100%, 52rem);
  margin: 0 auto;
}

.page-school-partnerships .spp2-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.page-school-partnerships .spp2-form__field--full {
  grid-column: 1 / -1;
}

.page-school-partnerships .spp2-form__field label {
  color: #f4ecff;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  font-weight: 600;
}

.page-school-partnerships .spp2-form__note {
  color: rgba(244, 236, 255, 0.68);
  font-size: 0.9em;
  font-weight: 400;
}

.page-school-partnerships .spp2-form__field input,
.page-school-partnerships .spp2-form__field textarea {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-family: inherit;
  background: rgba(255, 255, 255, 0.06);
  color: #fffefb;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.page-school-partnerships .spp2-form__field input::placeholder,
.page-school-partnerships .spp2-form__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.page-school-partnerships .spp2-form__field input:focus,
.page-school-partnerships .spp2-form__field textarea:focus {
  outline: none;
  border-color: rgba(255, 198, 79, 0.7);
  background: rgba(255, 255, 255, 0.1);
}

.page-school-partnerships .spp2-form__field textarea {
  min-height: 130px;
  resize: vertical;
}

.page-school-partnerships .spp2-form__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: clamp(0.35rem, 1vw, 0.7rem);
}

.page-school-partnerships .spp2-form__submit {
  min-height: 2.9rem;
  padding: 0.75em 2em;
}

/* Honeypot (the `website` field): out of sight and out of the layout;
   aria-hidden + tabindex="-1" in the markup keep it out of the accessibility
   tree and the keyboard order. */
.page-school-partnerships .spp2-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* SMS consent block: full width, styled by the sitewide .contact-form-consent /
   .contact-disclaimer rules. It is deliberately NOT a .spp2-form__field, whose
   input rules would restyle the checkbox and remove its focus outline. No
   display value is set here, so the `hidden` attribute site.js toggles works. */
.page-school-partnerships .spp2-form__sms {
  grid-column: 1 / -1;
}

/* ============================================================
   7. FOCUS STATES — visible on every new interactive element
   ============================================================ */

.page-school-partnerships .spp2-carousel__arrow:focus-visible,
.page-school-partnerships .spp2-carousel__dot:focus-visible {
  outline: 3px solid var(--site-chrome-accent);
  outline-offset: 3px;
}

/* ============================================================
   8. RESPONSIVE
   Breakpoints follow the ones already used sitewide:
   600 / 700 / 900 / 1024 up, 768 / 420 down.
   ============================================================ */

/* --- >=600px: the form's short fields pair up --- */
@media (min-width: 600px) {
  .page-school-partnerships .spp2-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- >=700px: panel padding matches the Home panels at this width --- */
@media (min-width: 700px) {
  .page-school-partnerships .spp2-panel {
    padding: clamp(1.5rem, 2.5vw, 2.6rem);
  }
}

/* --- >=900px: the split hero, the split intro row and three benefit
       columns. Held back to 900 (not 700) on purpose: three long-copy
       cards or a half-width hero read as cramped below this width. --- */
@media (min-width: 900px) {
  .page-school-partnerships .spp2-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 3.5vw, 3rem);
  }

  .page-school-partnerships .spp2-hero__copy {
    align-items: flex-start;
    text-align: left;
  }

  .page-school-partnerships .spp2-benefits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-school-partnerships .spp2-intro__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* --- >=1024px: desktop. The approved desktop-density direction applied to
       this page's sections — tighter panel margins/padding and tighter
       heading line boxes, matched to the values the Home prototype uses.
       Geometry and line-height only; no colour changes. --- */
@media (min-width: 1024px) {
  .page-school-partnerships main.site-theme {
    padding-top: 0.75rem;
    padding-bottom: 1.75rem;
  }

  .page-school-partnerships .spp2-hero,
  .page-school-partnerships .spp2-panel {
    width: min(1480px, calc(100% - clamp(2rem, 5vw, 6rem)));
    margin-top: 0.95rem;
    margin-bottom: 0.95rem;
  }

  .page-school-partnerships .spp2-panel {
    padding: clamp(1.2rem, 1.85vw, 1.9rem);
  }

  .page-school-partnerships .spp2-hero__inner {
    padding: clamp(1.4rem, 2.2vw, 2.1rem);
  }

  .page-school-partnerships .spp2-section-title {
    font-size: clamp(1.5rem, 1.8vw + 0.88rem, 2.6rem);
    line-height: 1.15;
    padding-bottom: 0.35rem;
    margin-bottom: clamp(0.7rem, 1.4vw, 1.1rem);
  }

  .page-school-partnerships .spp2-section-title::after {
    margin-top: 0.28rem;
  }

  .page-school-partnerships .spp2-heading {
    font-size: clamp(1.35rem, 1.5vw + 0.7rem, 2.05rem);
    line-height: 1.18;
    margin-bottom: 0.7rem;
    padding-bottom: 0.4rem;
  }

  .page-school-partnerships .spp2-hero__title {
    font-size: clamp(1.7rem, 2vw + 0.75rem, 2.75rem);
    line-height: 1.12;
  }

  .page-school-partnerships .spp2-intro__copy p,
  .page-school-partnerships .spp2-benefit__body,
  .page-school-partnerships .spp2-hero__sub {
    line-height: 1.5;
  }

  .page-school-partnerships .spp2-inquiry__lede {
    line-height: 1.5;
    margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
  }

  /* Matches the density block's 16/9 image reservation. */
  .page-school-partnerships .spp2-carousel__viewport {
    aspect-ratio: 16 / 9;
  }

  .page-school-partnerships .spp2-intro__figure img {
    aspect-ratio: 16 / 9;
  }
}

/* --- <=768px: mobile.
       The desktop-density reductions above never reach here; mobile keeps the
       site's established comfortable sizing. The hero is already one column
       below 900px, so nothing "unstacks" — this block only tunes the
       proportions for a phone. --- */
@media (max-width: 768px) {
  .page-school-partnerships .spp2-hero,
  .page-school-partnerships .spp2-panel {
    margin: 1.1rem auto;
  }

  .page-school-partnerships .spp2-panel {
    padding: 1.2rem;
  }

  .page-school-partnerships .spp2-hero__inner {
    padding: 1.5rem 1.1rem 1.35rem;
    gap: 1.2rem;
  }

  /* Full-width portrait-ish box, not 16/10 — at full width a wide box leaves
     the classroom faces too small to read on a phone. */
  .page-school-partnerships .spp2-carousel__viewport,
  .page-school-partnerships .spp2-intro__figure img {
    aspect-ratio: 4 / 3;
  }

  .page-school-partnerships .spp2-carousel__viewport {
    border-radius: 0.85rem;
  }

  /* Logos reflow to one comfortable column rather than two cramped ones. */
  .page-school-partnerships .spp2-partners__grid {
    grid-template-columns: 1fr;
    max-width: 20rem;
  }

  .page-school-partnerships .spp2-quote {
    padding: 1.35rem 1.15rem;
    border-radius: 1.15rem;
  }
}

/* --- <=420px: the narrowest supported phones --- */
@media (max-width: 420px) {
  .page-school-partnerships .spp2-benefit__icon {
    width: 2.8rem;
    height: 2.8rem;
  }

  .page-school-partnerships .spp2-benefit__icon .submenu-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .page-school-partnerships .spp2-hero__cta,
  .page-school-partnerships .spp2-form__submit {
    width: 100%;
  }
}

/* ============================================================
   9. REDUCED MOTION
   The carousel's auto-advance is disabled in JS; here the crossfade
   and every hover lift are dropped too. Manual navigation still
   works — it simply swaps instantly.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .page-school-partnerships .spp2-carousel__slide,
  .page-school-partnerships .spp2-carousel__arrow,
  .page-school-partnerships .spp2-carousel__dot > span,
  .page-school-partnerships .spp2-benefit,
  .page-school-partnerships .spp2-partner__plate {
    transition: none !important;
  }

  .page-school-partnerships .spp2-benefit:hover,
  .page-school-partnerships .spp2-benefit:focus-within,
  .page-school-partnerships .spp2-partner:hover .spp2-partner__plate {
    transform: none;
  }
}

/* ============================================================================
   PROGRAMS FAMILY LAYER  (.page-program-v2)
   ----------------------------------------------------------------------------
   Promoted from the six approved Programs prototypes. This is the ONE shared
   foundation the six live Programs pages stand on — Engineering & Arduino,
   Math, Science, Test Prep, Coding and Robotics — so they read as one family:
   one shell width, one vertical rhythm, one heading / rule / lede stack, one
   eyebrow geometry, one CTA tap target, one set of Amethyst surface, shadow and
   geometry tokens.

   WHAT LIVES HERE vs ON THE PAGE
     here  everything that is identical on two or more Programs pages.
     page  the SUBJECT layer (`.page-program-<subject>-v2`, which supplies
           --pgm-accent* and nothing else structural) and every component that
           exists on exactly one page. Those stay in that page's own inline
           <style> block, which is emitted AFTER this file, so a page may
           override any rule below at equal specificity.

   ACCENT CONTRACT: nothing here declares a colour of its own. The surfaces,
   shadows and the section rule all read --pgm-accent / --pgm-accent-soft /
   --pgm-accent-glow, which the subject layer on each page sets from the site's
   existing reserved STEM tokens (:root above). Test Prep deliberately sets a
   neutral chrome instead of a STEM hue. No new palette is introduced.
   ============================================================================ */

.page-program-v2 {
  /* Content shell — one width for every section on the page. */
  --pgm-shell: min(1220px, calc(100% - clamp(1.4rem, 5vw, 3.5rem)));

  /* Geometry / depth, all from existing sitewide tokens. */
  --pgm-radius-lg: var(--radius-lg);
  --pgm-radius-md: var(--radius-md);

  /* Ink. Headings/ledes that sit on the beige canvas use --page-ink /
     --page-ink-soft; everything inside a purple surface uses these. */
  --pgm-ink: #fffefb;
  --pgm-ink-soft: #f4ecff;

  /* Amethyst surfaces — the approved values, reused verbatim. The accent
     radial on top is what carries the subject colour into each surface. */
  --pgm-hero-bg:
    radial-gradient(circle at 14% 16%, var(--pgm-accent-soft), transparent 38%),
    radial-gradient(circle at 88% 8%, var(--pgm-accent-soft), transparent 32%),
    linear-gradient(145deg, rgba(111, 55, 166, 0.94), rgba(95, 47, 142, 0.98));
  --pgm-panel:
    radial-gradient(circle at 0% 0%, var(--pgm-accent-soft), transparent 54%),
    linear-gradient(145deg, rgba(103, 51, 155, 0.94), rgba(91, 45, 136, 0.97));
  --pgm-card:
    radial-gradient(circle at 50% 0%, var(--pgm-accent-soft), transparent 60%),
    linear-gradient(145deg, rgba(105, 52, 158, 0.96), rgba(93, 47, 140, 0.98));

  --pgm-shadow-panel:
    0 16px 30px rgba(0, 0, 0, 0.3),
    0 0 18px var(--pgm-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  --pgm-shadow-card:
    0 14px 28px rgba(0, 0, 0, 0.3),
    0 0 16px var(--pgm-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --pgm-shadow-card-hover:
    0 20px 36px rgba(0, 0, 0, 0.38),
    0 0 22px var(--pgm-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------------------
   PAGE SHELL + SHARED SECTION RHYTHM
   One shell width, one vertical rhythm, one heading/rule/lede
   stack — this is what makes six different Programs pages read
   as one family.
   ------------------------------------------------------------ */

.page-program-v2 .pgm {
  /* Guard: nothing on these pages may push the document sideways. */
  overflow-x: clip;
}

.page-program-v2 .pgm-shell {
  width: var(--pgm-shell);
  margin-inline: auto;
}

.page-program-v2 .pgm-section {
  margin-top: clamp(2.4rem, 5.5vw, 4.2rem);
}

/* Section heading — dark ink directly on the beige canvas. */
.page-program-v2 .pgm-heading {
  margin: 0;
  color: var(--page-ink);
  text-align: center;
  font-size: clamp(1.55rem, 1.4vw + 1.05rem, 2.5rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-shadow: none;
}

/* Short subject-accent divider — the family's section marker. Where a section
   has no supplied heading it opens that section on its own. */
.page-program-v2 .pgm-rule {
  display: block;
  width: clamp(88px, 12vw, 160px);
  height: 4px;
  margin: clamp(0.6rem, 1.4vw, 0.9rem) auto clamp(1.2rem, 2.6vw, 1.8rem);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--pgm-accent) 18%, var(--pgm-accent) 82%, transparent);
  box-shadow: 0 0 14px var(--pgm-accent-glow);
}

/* Section intro copy — also on the beige canvas, so dark ink. */
.page-program-v2 .pgm-lede {
  max-width: 68ch;
  margin: 0 auto clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--page-ink-soft);
  text-align: center;
  font-size: clamp(1rem, 0.45vw + 0.92rem, 1.12rem);
  line-height: 1.7;
  text-shadow: none;
}

/* Program-name eyebrow — geometry only in the family layer; the colour
   treatment is each page's subject layer. */
.page-program-v2 .pgm-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 clamp(0.75rem, 1.8vw, 1rem);
  border-radius: var(--radius-pill);
  font-size: clamp(0.86rem, 0.35vw + 0.79rem, 0.98rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  padding: 0.55rem 1.15rem;
}

/* CTA sizing (family layer). Appearance is 100% the sitewide .cta-button /
   .cta-button-secondary — only the tap target grows, so every Programs CTA
   clears the 44px minimum on touch, and a long supplied label is allowed to
   wrap centred instead of overflowing a narrow phone. Scoped to the Programs
   pages' own buttons; no other .cta-button on the site is affected. */
.page-program-v2 .pgm-cta {
  min-height: 48px;
  max-width: 100%;
  padding: 0.85em 1.9em;
  font-size: clamp(1rem, 0.35vw + 0.93rem, 1.1rem);
  text-align: center;
}

/* Small phones — family layer only; each page tightens its own components. */
@media (max-width: 400px) {
  .page-program-v2 .pgm-eyebrow {
    letter-spacing: 0.04em;
  }

  .page-program-v2 .pgm-cta {
    padding: 0.8em 1.2em;
  }
}

/* ============================================================================
   PROGRAM CONSULTATION INQUIRY MODAL — the six Programs pages
   ----------------------------------------------------------------------------
   Markup in includes/program-inquiry-modal.php; open / close / focus / reset
   is the shared .modal behaviour in site.js. Built from existing parts — the
   MODAL COMPONENT (.modal backdrop, .modal-content card, .close-btn) and the
   Contact Us form classes (.contact-form-grid / -field / -consent,
   .contact-disclaimer) — so this section only adapts them.

   ACCENT CONTRACT (as the family layer above): no colour of its own. The modal
   is rendered inside <body class="page-program-v2 page-program-*-v2">, so it
   inherits that page's existing --pgm-accent / -soft / -glow. Only the top
   stripe, the subject label, the field focus halo and the consent checkbox
   read the accent; the card itself stays the shared Amethyst.
   ============================================================================ */

/* The base card reads --program-* tokens the Programs pages never define, so
   its border, radius and glow are re-pointed at the family tokens. Compact
   width; it never outgrows the backdrop's padded box and scrolls inside on
   short screens. */
.modal--program-inquiry .modal-content {
  width: min(100%, 38rem);
  max-height: 100%;
  border: 1px solid var(--pgm-accent-soft);
  border-radius: var(--pgm-radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 18px var(--pgm-accent-glow);
  overscroll-behavior: contain;
}

/* The dialog box itself takes focus on open (so it is announced by name). It
   is not a control, so it shows no ring; every control inside keeps its own. */
.modal--program-inquiry .modal-content:focus {
  outline: none;
}

.modal--program-inquiry .modal-content::before {
  background: var(--pgm-accent);
}

.modal--program-inquiry .close-btn {
  margin: 0.75rem 0.75rem 0 0;
}

.modal--program-inquiry .program-inquiry {
  padding: clamp(1.35rem, 4vw, 2rem);
  color: var(--pgm-ink);
}

/* Subject label — the family eyebrow's type, as a small accent-edged chip. */
.modal--program-inquiry .program-inquiry__subject {
  width: fit-content;
  margin: 0 0 0.65rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--pgm-accent);
  border-radius: var(--radius-pill);
  background: var(--pgm-accent-soft);
  color: var(--pgm-ink);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.modal--program-inquiry .program-inquiry__title {
  margin: 0 0 clamp(1rem, 2.4vw, 1.35rem);
  color: var(--pgm-ink);
  font-size: clamp(1.3rem, 1.1vw + 1rem, 1.65rem);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}

/* Field focus: a near-white edge carries the visible indicator on every page
   (Coding blue and Math red sit too close to the purple to do it alone), with
   the subject accent as a halo around it. */
.modal--program-inquiry .contact-form-field input:not([type="checkbox"]):focus {
  border-color: var(--pgm-ink);
  box-shadow: 0 0 0 3px var(--pgm-accent-glow);
}

.modal--program-inquiry .contact-form-consent input[type="checkbox"] {
  accent-color: var(--pgm-accent);
}

/* The shared .contact-form-field input:focus rule also strips the checkbox's
   outline; give it a visible keyboard ring back inside the modal. */
.modal--program-inquiry .contact-form-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--pgm-ink);
  outline-offset: 3px;
}

/* Honeypot: out of sight and out of the layout; aria-hidden + tabindex="-1" in
   the markup keep it out of the accessibility tree and the keyboard order. */
.modal--program-inquiry .program-inquiry__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.modal--program-inquiry.is-open .modal-content {
  animation: program-inquiry-in 0.22s ease;
}

@keyframes program-inquiry-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Phones: 16px field text stops iOS zooming the page when a field is focused.
   Same breakpoint at which .contact-form-grid stacks to one column. */
@media (max-width: 640px) {
  .modal--program-inquiry .contact-form-field input {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal--program-inquiry.is-open .modal-content {
    animation: none;
  }
}

/* ============================================================================
   LAPTOP DENSITY LAYER  (1024px – 1599.98px)
   ----------------------------------------------------------------------------
   The third responsive presentation: MOBILE (<=1023px) -> LAPTOP -> LARGE
   DESKTOP (>=1600px). Most desktop clamp() values in this file reach their
   maximum by ~1100–1360px, so laptops were rendering the full large-desktop
   spacing and near edge-to-edge shells. This layer trims vertical density
   (sections 1–6) and widens the canvas either side of each page's main shell
   (section 7), on laptop widths only.

   THE CONTRACT — the only ranges this layer uses. The page-owned laptop rules
   in the inline <style> blocks of index.php, programs/*.php and camps/camps.php
   repeat these query strings verbatim:
     band     @media (min-width: 1024px) and (max-width: 1599.98px)
     short    @media (min-width: 1024px) and (max-width: 1599.98px) and (max-height: 820px)
     shorter  @media (min-width: 1024px) and (max-width: 1599.98px) and (max-height: 700px)
   The one internal split (section 6) follows About's existing 1080/1081
   team-grid switch rather than adding a new breakpoint.

   LOCKS: nothing here applies at <=1023px (mobile/tablet) or >=1600px (large
   desktop). The 900px Programs hub switch and the 1023/1024 nav switch in
   site.js are untouched. Geometry, type size and line-height only — no colour,
   content or behaviour.

   CASCADE: page inline <style> blocks load AFTER this file, so a rule that must
   beat a page's own equal-specificity rule carries one extra class
   (.site-wrapper, on <body>). No !important is used.

   PARTNERSHIPS: only section 7 (gutters) targets .page-school-partnerships,
   deliberately and scoped to its body class; otherwise that page receives
   only the shared header rules (section 1).
   ============================================================================ */

/* --- 1. Sticky header on short laptop viewports ------------------------------
   The logo sets the bar's height, so it is the one lever; nav type, nav
   spacing, the phone pill and the dropdowns are untouched. body.site-wrapper
   (0,4,3) outranks both the base desktop logo rule and Home's .page-home logo
   rule. A shorter logo also narrows the bar, which leaves room for the nav if
   Blog returns. */
@media (min-width: 1024px) and (max-width: 1599.98px) and (max-height: 820px) {
  body.site-wrapper header.container.site-header {
    padding-block: 0.26rem;
  }

  body.site-wrapper header.container.site-header .banner-header img {
    height: clamp(68px, 5vw, 76px);
  }
}

@media (min-width: 1024px) and (max-width: 1599.98px) and (max-height: 700px) {
  body.site-wrapper header.container.site-header {
    padding-block: 0.2rem;
  }

  body.site-wrapper header.container.site-header .banner-header img {
    height: 64px;
  }
}

/* --- 2. Programs family rhythm ------------------------------------------------
   Coding, Engineering, Math, Robotics, Science, Test Prep and Camps.
   .site-wrapper.page-program-v2 (0,3,0) clears the pages' own inline (0,2,0)
   rules — e.g. Engineering's tighter .pgm-lede margin — so the whole family
   takes one laptop rhythm. Only margins, heading size and leading move; each
   page's rule width, colours and subject treatment are untouched. The Programs
   hub mirrors these values in its own inline block (.pgo-section). */
@media (min-width: 1024px) and (max-width: 1599.98px) {
  .site-wrapper.page-program-v2 .pgm-section {
    margin-top: clamp(2.4rem, 3.4vw, 2.9rem);
  }

  .site-wrapper.page-program-v2 .pgm-heading {
    font-size: clamp(1.5rem, 1.1vw + 1rem, 2.1rem);
    line-height: 1.15;
  }

  .site-wrapper.page-program-v2 .pgm-rule {
    margin-top: 0.65rem;
    margin-bottom: 1.15rem;
  }

  .site-wrapper.page-program-v2 .pgm-lede {
    margin-bottom: clamp(1.25rem, 1.8vw, 1.6rem);
    line-height: 1.55;
  }

  /* Still >= 46px tall — above the 44px touch minimum. */
  .site-wrapper.page-program-v2 .pgm-cta {
    min-height: 46px;
    padding: 0.75em 1.75em;
  }
}

/* --- 3. Shared modal shell + Program Consultation Inquiry --------------------
   Short laptop viewports only. The backdrop's padded box is the dialog's
   max-height (.modal-content { max-height: 100% }), so trimming it gives the
   dialog more room before it scrolls. The inquiry form keeps its field padding,
   input font size and 44px+ controls; only the gaps and the SMS disclaimer's
   leading tighten. Focus trap, scroll lock and close behaviour live in site.js
   and are unchanged. The Home subject dialog shares only the backdrop padding.
   The gallery lightbox is a separate component and is not affected. */
@media (min-width: 1024px) and (max-width: 1599.98px) and (max-height: 820px) {
  .site-wrapper .modal.is-open {
    padding: 1.25rem;
  }

  .site-wrapper .modal--program-inquiry .program-inquiry {
    padding: 1.35rem 1.6rem 1.25rem;
  }

  .site-wrapper .modal--program-inquiry .program-inquiry__subject {
    margin-bottom: 0.5rem;
  }

  .site-wrapper .modal--program-inquiry .program-inquiry__title {
    margin-bottom: 0.85rem;
  }

  .site-wrapper .modal--program-inquiry .contact-form-grid {
    gap: 0.8rem;
  }

  .site-wrapper .modal--program-inquiry .contact-form-field {
    gap: 0.3rem;
  }

  .site-wrapper .modal--program-inquiry .contact-disclaimer {
    margin-top: 0.4rem;
    line-height: 1.42;
  }

  .site-wrapper .modal--program-inquiry .contact-form-actions {
    margin-top: 0.7rem;
  }
}

@media (min-width: 1024px) and (max-width: 1599.98px) and (max-height: 700px) {
  .site-wrapper .modal.is-open {
    padding: 0.75rem;
  }

  .site-wrapper .modal--program-inquiry .program-inquiry {
    padding: 1.1rem 1.4rem 1rem;
  }

  .site-wrapper .modal--program-inquiry .contact-form-grid {
    gap: 0.65rem;
  }

  .site-wrapper .modal--program-inquiry .contact-form-field {
    gap: 0.25rem;
  }

  .site-wrapper .modal--program-inquiry .contact-form-consent {
    line-height: 1.4;
  }

  .site-wrapper .modal--program-inquiry .contact-disclaimer {
    line-height: 1.36;
  }
}

/* --- 4. Page shell for the pages without a desktop-density layer -------------
   <main>'s top/bottom breathing room on laptop widths, matched to the values
   the density-layer pages (Home, Blog, About, Contact, Partnerships) already
   use. Named page by page — never a broad main.site-theme — so those pages keep
   their own values. Camps keeps its zero top padding (its hero banner meets the
   header), so it takes only the bottom value. */
@media (min-width: 1024px) and (max-width: 1599.98px) {
  .site-wrapper.page-program-v2:not(.page-camps-v2) main.pgm,
  .site-wrapper.page-programs-overview-v2 main.pgo,
  .site-wrapper main.program-page--faqs,
  .site-wrapper main.program-page--gallery,
  .site-wrapper main.program-page--legal {
    padding-top: 0.75rem;
  }

  .site-wrapper.page-program-v2 main.pgm,
  .site-wrapper.page-programs-overview-v2 main.pgo,
  .site-wrapper main.program-page--faqs,
  .site-wrapper main.program-page--gallery,
  .site-wrapper main.program-page--legal {
    padding-bottom: 1.75rem;
  }
}

/* --- 5. Gallery: four masonry columns ----------------------------------------
   At three columns a 9:16 portrait tile runs ~700–850px tall across laptop
   widths — taller than the visible viewport. Four columns (~230px tiles at
   1024px, ~350px at 1536px) bring portraits to ~410–630px without touching any
   tile's aspect ratio or crop. The transparent logo tile's inset shrinks with
   its tile. The lightbox is untouched. */
@media (min-width: 1024px) and (max-width: 1599.98px) {
  .program-page--gallery .gallery-grid {
    columns: 4 200px;
  }

  .program-page--gallery .gallery-item--contain img {
    padding: clamp(0.75rem, 1.2vw, 1.1rem);
  }
}

/* --- 6. About — Meet Our Team ------------------------------------------------
   The three bios are locked copy, so the long cards are shortened around them:
   a smaller photo and inset, slightly tighter bio leading and card gap. The
   existing 1080/1081 switch is respected: the photo column of the horizontal
   cards (1024–1080) and the photo trim of the three-column cards (>=1081) are
   set separately, exactly as the rules they adjust are. */
@media (min-width: 1024px) and (max-width: 1599.98px) {
  .site-wrapper.page-about .about-team-grid {
    gap: clamp(0.75rem, 1.2vw, 1rem);
  }

  .site-wrapper.page-about .about-team-photo-wrap {
    padding: clamp(0.65rem, 1vw, 0.8rem);
  }

  .site-wrapper.page-about .about-member-role {
    margin: 0.4rem 0 0.5rem;
  }

  .site-wrapper.page-about .about-team-bio {
    line-height: 1.5;
  }
}

@media (min-width: 1024px) and (max-width: 1080px) {
  .site-wrapper.page-about .about-team-card {
    grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
  }

  .site-wrapper.page-about .about-team-photo {
    width: min(100%, 160px);
  }
}

@media (min-width: 1081px) and (max-width: 1599.98px) {
  .site-wrapper.page-about .about-team-photo {
    width: clamp(120px, 10vw, 150px);
  }
}

/* --- 7. Laptop gutters: one shell width for every page ------------------------
   On laptop widths the main page shells ran nearly edge to edge (~25–40px of
   canvas each side), where a large desktop shows ~200px or more. One fluid
   token, --laptop-gutter, now sets the canvas visible either side of every
   page's main shell: ~44px at 1024px, ~85px at 1280, ~99px at 1366, ~110px at
   1440 and ~126px at 1536 (about 4–8% of the viewport, growing with the
   width). It reaches its 8.5rem cap exactly at the top of the band.

   Each shell keeps its existing cap and only takes the gutter as a second
   limit — width: min(<existing cap>, 100% - 2 × gutter) — so a shell that
   already sits inside wider gutters (the Programs family's 1220px shell from
   ~1440px up, the FAQ list, the legal copy column) is never made narrower.
   Only the outer shells move: every panel's padding, grid, gap, card, type and
   image ratio is unchanged, and the grids re-flow into the narrower shell.

   Header and footer keep their own content-sized widths. Full-bleed
   backgrounds (the Camps hero banner) stay full-bleed. Selectors carry
   .site-wrapper so they clear each page's own equal-specificity width rule,
   including the inline <style> blocks on Home and the Programs hub. */
@media (min-width: 1024px) and (max-width: 1599.98px) {
  :root {
    --laptop-gutter: clamp(2.5rem, 16vw - 7.5rem, 8.5rem);
  }

  /* Programs family (six Programs pages + Camps) and the Programs hub. Their
     shell width is already a token, so only the token is re-pointed. */
  .site-wrapper.page-program-v2 {
    --pgm-shell: min(1220px, calc(100% - 2 * var(--laptop-gutter)));
  }

  .site-wrapper.page-programs-overview-v2 {
    --pgo-shell: min(1220px, calc(100% - 2 * var(--laptop-gutter)));
  }

  /* FAQ, Gallery, Blog, Privacy Policy, Terms of Use / About / Contact. */
  .site-wrapper .program-page__inner,
  .site-wrapper .about-page__inner,
  .site-wrapper .contact-page__inner {
    width: min(1480px, calc(100% - 2 * var(--laptop-gutter)));
  }

  /* Home — the floating section panels. */
  .site-wrapper .site-theme #testimonial,
  .site-wrapper.page-home-v2 .hv2-quick,
  .site-wrapper.page-home-v2 .hv2-panel {
    width: min(1480px, calc(100% - 2 * var(--laptop-gutter)));
  }

  /* Home hero. The panel sits inside #hero .container, which carries a fixed
     2rem !important side padding (section 4 of the global design standards).
     The panel is capped instead of the container, with that 4rem added back,
     so its gutter matches the panels below exactly — no !important needed. */
  .site-wrapper.page-home-v2 .site-theme #hero .hero-feature__panel {
    max-width: min(1480px, calc(100% + 4rem - 2 * var(--laptop-gutter)));
  }

  /* School Partnerships — its hero pill and section panels, targeted
     deliberately and scoped to its own body class. */
  .site-wrapper.page-school-partnerships .spp2-hero,
  .site-wrapper.page-school-partnerships .spp2-panel {
    width: min(1480px, calc(100% - 2 * var(--laptop-gutter)));
  }
}