/* 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-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);
}
*,: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);background:var(--black);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 */
.banner-row{display:grid;grid-template-columns:1fr;gap:12px;padding-inline:var(--site-pad);width:min(100%,var(--site-max));margin:20px auto 0}
.page-head .container,.section-wrap .container,#hero .container,#programs .container,header{width:min(100%,var(--site-max));margin-inline:auto}

/* Legal/prototype pages */
.legal-updated{color:#666;margin-bottom:1rem}
.legal-location{color:#444;margin-bottom:1rem}
.legal-contact p{margin:.25rem 0}
.prototype-notice{background:#fff7e6;border:1px solid #f5bf55;border-radius:var(--radius);padding:12px 14px;margin:0 0 20px;color:#4c3100}

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

@media (min-width:768px){
  .banner-row{grid-template-columns:1fr 1fr}
}
@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;
      background:
        radial-gradient(circle at 8% 14%, rgba(255, 158, 18, 0.24), transparent 36%),
        radial-gradient(circle at 86% 10%, rgba(255, 208, 105, 0.2), transparent 34%),
        radial-gradient(circle at 82% 72%, rgba(108, 49, 189, 0.22), transparent 42%),
        linear-gradient(162deg, #160729 0%, #240b44 44%, #110420 100%);
      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);
      background:
        radial-gradient(circle at 8% 14%, rgba(255, 158, 18, 0.24), transparent 36%),
        radial-gradient(circle at 86% 10%, rgba(255, 208, 105, 0.2), transparent 34%),
        radial-gradient(circle at 82% 72%, rgba(108, 49, 189, 0.22), transparent 42%),
        linear-gradient(162deg, var(--site-purple-950) 0%, var(--site-purple-900) 44%, #110420 100%);
      color: var(--site-white);
      padding: clamp(1rem, 2vw, 1.5rem) 0 2.8rem;
    }

    .site-theme #hero h1.stem .stem-s { color: var(--stem-science); }
    .site-theme #hero h1.stem .stem-t { color: var(--stem-technology); }
    .site-theme #hero h1.stem .stem-e { color: var(--stem-engineering); }
    .site-theme #hero h1.stem .stem-m { color: var(--stem-math); }

    .site-theme #programs,
    .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 #programs h2,
    .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 #programs h2::after,
    .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 .card-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(0.95rem, 2vw, 1.55rem);
    }

    .site-theme .program-card {
      display: flex;
      flex-direction: column;
      border-radius: var(--site-radius-md);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 14px 24px rgba(8, 4, 22, 0.28);
      color: #fffdf8;
      overflow: hidden;
      transition: transform 0.24s ease, box-shadow 0.24s ease;
    }

    .site-theme .program-card:hover,
    .site-theme .program-card:focus-within {
      transform: translateY(-7px);
      box-shadow: 0 18px 30px rgba(8, 4, 22, 0.34);
    }

    .site-theme .card-img-top {
      width: 100%;
      height: clamp(150px, 21vw, 210px);
      object-fit: cover;
      object-position: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .site-theme .card-body {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      padding: 1.35rem;
    }

    .site-theme .card-body h3 {
      margin: 0 0 0.5rem;
      font-size: clamp(1.35rem, 2.6vw, 1.75rem);
      line-height: 1.2;
      color: #ffffff;
    }

    .site-theme .card-body p {
      color: #f9f9ff;
      line-height: 1.6;
    }

    .site-theme .card-btn {
      margin-top: auto;
      display: inline-block;
      align-self: flex-start;
      border-radius: var(--radius-pill);
      font-weight: 700;
      padding: 0.68rem 1.18rem;
      transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
    }

    .site-theme .card-btn:hover,
    .site-theme .card-btn:focus-visible {
      transform: translateY(-1px);
    }



    .site-theme .card-science { background: linear-gradient(165deg, var(--stem-science), #0f7f49); }
    .site-theme .card-tech { background: linear-gradient(165deg, var(--stem-technology), #054a8b); }
    .site-theme .card-eng { background: linear-gradient(165deg, var(--stem-engineering), #d08b10); }
    .site-theme .card-math { background: linear-gradient(165deg, var(--stem-math), #c90f05); }

    .site-theme .card-btn {
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.5);
      background: rgba(0, 0, 0, 0.15);
    }

    .site-theme .card-btn:hover,
    .site-theme .card-btn:focus-visible {
      background: rgba(0, 0, 0, 0.28);
      color: #fff;
    }
    .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 .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .site-theme #programs,
      .site-theme #testimonial {
        padding: clamp(1.5rem, 2.5vw, 2.6rem);
      }
    }

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

    @media (max-width: 900px) {
      .site-theme .card-img-top { height: clamp(155px, 30vw, 210px); }
    }

    @media (max-width: 768px) {
      .site-theme #programs,
      .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(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);
      }
      header.container.site-header nav .submenu a {
        color: #f8efff;
        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(--site-chrome-accent);
        background: rgba(255, 255, 255, 0.1);
      }

      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 (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; }
      /* 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);
        background: #fff;
        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 (Blog/Gallery/About Us) AND every
         dropdown submenu link. Only <a> elements match, so the dropdown toggle
         <button>s (.programs-link: Programs/Camps/Partnerships) 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);
      }
      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-nav-toggle { display: none; }
      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;
        background: #ffffff;
        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: #f3f4f6;
        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; }
    }

    @media (prefers-reduced-motion: reduce) {
      .site-theme .program-card,
      .site-theme .card-btn {
        transition: none !important;
      }
    }

/* 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. */
.program-page--math {
  --program-accent: var(--stem-math);
  --program-accent-soft: rgba(252, 16, 2, 0.26);
  --program-accent-glow: rgba(252, 16, 2, 0.6);
}

.program-page--science {
  --program-accent: var(--stem-science);
  --program-accent-soft: rgba(18, 155, 89, 0.26);
  --program-accent-glow: rgba(18, 155, 89, 0.6);
}

.program-page--coding {
  --program-accent: var(--stem-technology);
  --program-accent-soft: rgba(6, 98, 184, 0.26);
  --program-accent-glow: rgba(6, 98, 184, 0.6);
}

/* Engineering = the locked Engineering STEM color (#f8ae20). Same token as the
   Robotics page, applied here as Engineering's own subject color. */
.program-page--engineering {
  --program-accent: var(--stem-engineering);
  --program-accent-soft: rgba(248, 174, 32, 0.26);
  --program-accent-glow: rgba(248, 174, 32, 0.6);
}

/* 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. */
.program-page--test-prep {
  --program-accent: var(--accent-purple);
  --program-accent-soft: rgba(198, 140, 255, 0.26);
  --program-accent-glow: rgba(198, 140, 255, 0.55);
}

/* Robotics = Engineering color (#f8ae20), applied as the page's subject color. */
.program-page--robotics {
  --program-accent: var(--stem-engineering);
  --program-accent-soft: rgba(248, 174, 32, 0.26);
  --program-accent-glow: rgba(248, 174, 32, 0.6);
}

.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(74, 28, 126, 0.92), rgba(20, 6, 41, 0.98));
  padding: clamp(0.67rem, 1.6vw, 1.13rem) clamp(2.35rem, 6vw, 4.75rem);
}

.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);
  background: linear-gradient(175deg, rgba(8, 9, 12, 0.48), rgba(8, 9, 12, 0.18));
  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 */
.program-page--robotics .program-title {
  white-space: nowrap;
}

/* Gold hero chrome — single source for the gold eyebrow.
   .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 eyebrow (and hero glow) goes gold; legal body copy
   keeps the purple .program-page accent. No other page's eyebrow is touched. */
.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);
  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));
  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-page .program-content-block {
  margin-top: clamp(1.15rem, 1.8vw, 1.7rem);
  border: 1px solid var(--program-accent);
  border-left-width: 6px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, var(--program-accent-soft), transparent 54%),
    linear-gradient(145deg, rgba(35, 15, 63, 0.94), rgba(12, 5, 28, 0.97));
  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);
  padding: clamp(1rem, 1.7vw, 1.5rem) clamp(1rem, 2vw, 1.75rem);
}

.program-page .program-content-block--intro {
  margin-top: 0;
  border-left-width: 1px;
  border-top-width: 5px;
  background:
    radial-gradient(circle at 12% 0%, var(--program-accent-soft), transparent 58%),
    linear-gradient(145deg, rgba(46, 19, 79, 0.96), rgba(15, 6, 33, 0.98));
}

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

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

.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(63, 26, 103, 0.95), rgba(20, 7, 42, 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 > .program-content-block:last-child > p:last-child {
  margin-bottom: 0;
}

.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(10, 3, 25, 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(10, 3, 25, 0.3);
}

/* Science subject strip */
.program-page--science .science-subject-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(0.6rem, 2vw, 1.35rem);
  margin-top: clamp(1.15rem, 2vw, 1.65rem);
  border: 1px solid var(--program-accent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, var(--program-accent-soft), transparent 68%),
    rgba(9, 28, 24, 0.42);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.22),
    0 0 14px var(--program-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(0.75rem, 2.2vw, 1.4rem);
}

.program-page--science .science-subject-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.45rem;
  text-align: center;
}

.program-page--science .science-subject-label {
  color: #fffefb;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1.2;
}

.program-page--science .science-subject-icon {
  display: grid;
  width: clamp(2rem, 3.8vw, 2.55rem);
  aspect-ratio: 1;
  place-items: center;
  color: var(--program-accent);
  filter: drop-shadow(0 0 7px var(--program-accent-glow));
}

.program-page--science .science-subject-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.program-page--science .science-subject-icon circle:first-child {
  fill: currentColor;
}

.program-page--science .science-subject-divider {
  width: 1px;
  min-height: 3.5rem;
  align-self: center;
  background: linear-gradient(180deg, transparent, var(--program-accent), transparent);
  box-shadow: 0 0 8px var(--program-accent-glow);
}

@media (max-width: 430px) {
  .program-page--science .science-subject-strip {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 0.9rem;
  }

  .program-page--science .science-subject-item {
    gap: 0.32rem;
  }

  .program-page--science .science-subject-divider {
    width: min(68%, 10rem);
    min-height: 1px;
    height: 1px;
    justify-self: center;
    background: linear-gradient(90deg, transparent, var(--program-accent), transparent);
  }
}

/* ============================================================
   PROGRAM INFO BAND  (reusable component)
   Used by: math, coding, robotics, science, test-prep
   ------------------------------------------------------------
   The whole band recolors automatically through each page's
   .program-page--X modifier because color comes ONLY from
   --program-accent / --program-accent-soft / --program-accent-glow.
   There are intentionally ZERO per-page color rules and ZERO
   hardcoded subject hex values in this section.
   ============================================================ */
.program-info {
  display: grid;
  gap: clamp(1.15rem, 2.6vw, 1.9rem);
  width: min(1100px, 100%);
  margin-inline: auto;
}

/* The existing program photo keeps its framed look now that it lives in
   .program-info instead of .program-content. This mirrors the prior
   figure treatment and overrides the title-hero base styling that the
   bare .program-hero rule would otherwise apply to the figure. */
.program-info .program-hero {
  width: 100%;
  min-width: 0;
  max-width: min(100%, 980px);
  min-height: 0;
  margin-inline: auto;
  display: block;
  border: 2px solid var(--program-accent);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--program-accent-soft), rgba(10, 3, 25, 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-info .program-hero::before {
  display: none;
}

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

/* 1. intro title */
.program-info__title {
  margin: 0;
  text-align: center;
  color: #fffefb;
  font-size: clamp(1.6rem, 1.4vw + 1.05rem, 2.6rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* 2. centered lead paragraph */
.program-info__lead {
  max-width: 72ch;
  margin: 0 auto;
  text-align: center;
  color: var(--program-text-soft);
  font-size: clamp(1rem, 0.5vw + 0.92rem, 1.18rem);
  line-height: 1.72;
  text-shadow: var(--text-shadow-md);
  /* Readable glass panel (reuses the .program-info__approach treatment, minus
     its left accent bar since this text is centered) so the lead copy and the
     purple sweep effects have an opaque-enough surface to read against, rather
     than sitting directly over the animated #bg-layer. */
  padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--program-radius-md);
  border: 1px solid var(--program-accent-soft);
  background:
    radial-gradient(circle at 0% 0%, var(--program-accent-soft), transparent 54%),
    linear-gradient(145deg, rgba(35, 15, 63, 0.94), rgba(12, 5, 28, 0.97));
  backdrop-filter: blur(1px);
  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);
}

/* 4. short subject-accent divider */
.program-info__divider {
  display: block;
  width: clamp(88px, 12vw, 160px);
  height: 4px;
  margin: clamp(0.3rem, 1vw, 0.65rem) auto;
  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);
}

/* 5. grid section heading */
.program-info__subjects-title {
  margin: 0;
  text-align: center;
  color: #fffefb;
  font-size: clamp(1.3rem, 0.9vw + 1rem, 1.95rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
}

/* 6. three subject cards — glass panels, subject-colored top border */
.program-info__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

.program-info__card {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  border-radius: var(--program-radius-md);
  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 60%),
    linear-gradient(145deg, rgba(43, 17, 74, 0.96), rgba(14, 5, 32, 0.98));
  backdrop-filter: blur(1px);
  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);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.program-info__card:hover,
.program-info__card:focus-within {
  transform: translateY(-5px);
  box-shadow:
    0 20px 36px rgba(0, 0, 0, 0.38),
    0 0 22px var(--program-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.program-info__icon {
  display: grid;
  width: clamp(2.6rem, 4vw, 3.1rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--program-accent-soft);
  background: linear-gradient(145deg, var(--program-accent-soft), rgba(255, 255, 255, 0.04));
  color: var(--program-accent);
  filter: drop-shadow(0 0 7px var(--program-accent-glow));
}

.program-info__icon svg {
  display: block;
  width: 60%;
  height: 60%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.program-info__card-title {
  margin: 0;
  color: #fffefb;
  font-size: clamp(1.08rem, 0.6vw + 0.95rem, 1.3rem);
  font-weight: 800;
  line-height: 1.25;
}

.program-info__card-desc {
  margin: 0;
  color: var(--program-text-soft);
  font-size: clamp(0.95rem, 0.4vw + 0.88rem, 1.05rem);
  line-height: 1.68;
}

/* 7. approach panel — glass, left accent border, checklist */
.program-info__approach {
  border-radius: var(--program-radius-md);
  border: 1px solid var(--program-accent-soft);
  border-left: 5px solid var(--program-accent);
  background:
    radial-gradient(circle at 0% 0%, var(--program-accent-soft), transparent 54%),
    linear-gradient(145deg, rgba(35, 15, 63, 0.94), rgba(12, 5, 28, 0.97));
  backdrop-filter: blur(1px);
  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);
  padding: clamp(1.25rem, 2.6vw, 2rem);
}

.program-info__approach-title {
  margin: 0 0 0.7rem;
  color: #fffefb;
  font-size: clamp(1.2rem, 0.8vw + 1rem, 1.7rem);
  font-weight: 800;
  line-height: 1.25;
  text-shadow: var(--text-shadow-sm);
}

.program-info__approach-intro {
  margin: 0 0 1.15rem;
  color: var(--program-text-soft);
  font-size: clamp(0.98rem, 0.45vw + 0.9rem, 1.1rem);
  line-height: 1.7;
}

.program-info__checklist {
  display: grid;
  gap: 0.72rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.program-info__checklist li {
  position: relative;
  padding-left: 2.2rem;
  color: var(--program-text-soft);
  font-size: clamp(0.98rem, 0.45vw + 0.9rem, 1.08rem);
  line-height: 1.62;
}

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

/* token-driven checkmark marker — circular accent badge (::before) with a
   CSS-drawn tick (::after). Colored ONLY via the accent tokens and scoped to
   the approach checklist so it never leaks to other lists. */
.program-info__checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08em;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--program-accent);
  background: var(--program-accent-soft);
  box-shadow: 0 0 10px var(--program-accent-glow);
}

.program-info__checklist li::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.32em;
  width: 0.34rem;
  height: 0.64rem;
  border: solid var(--program-accent);
  border-width: 0 0.16rem 0.16rem 0;
  transform: rotate(45deg);
}

@media (max-width: 760px) {
  .program-info__grid {
    grid-template-columns: 1fr;
  }
}

@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-block {
    margin-top: 1.2rem;
    border-left-width: 5px;
    border-radius: 18px;
    padding: 1rem clamp(1rem, 2.4vw, 1.35rem) 1.1rem;
  }

  .program-page .program-content-block--intro {
    margin-top: 0;
    border-left-width: 1px;
    border-top-width: 5px;
  }

  .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);
  }

  .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(43, 18, 74, 0.98), rgba(15, 5, 31, 0.99) 58%, rgba(8, 3, 20, 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-block {
    margin-top: 1rem;
    border: 1px solid var(--program-accent);
    border-left-width: 5px;
    border-radius: 14px;
    background:
      radial-gradient(circle at 0% 0%, var(--program-accent-soft), transparent 58%),
      linear-gradient(145deg, rgba(27, 12, 50, 0.96), rgba(11, 5, 25, 0.98));
    box-shadow:
      0 10px 20px rgba(0, 0, 0, 0.3),
      0 0 14px var(--program-accent-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 0.85rem 0.78rem 0.9rem;
  }

  .program-page .program-content-block--intro {
    margin-top: 0;
    border-left-width: 1px;
    border-top-width: 4px;
    background:
      radial-gradient(circle at 12% 0%, var(--program-accent-soft), transparent 64%),
      linear-gradient(145deg, rgba(32, 14, 58, 0.97), rgba(12, 5, 27, 0.99));
  }

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

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

  .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(55, 23, 91, 0.96), rgba(19, 7, 39, 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(36, 11, 68, 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(10, 3, 25, 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 */
.schedule-subheading {
  text-align: center;
  color: var(--program-accent);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  text-shadow: var(--text-shadow-sm);
}

.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(43, 17, 74, 0.96), rgba(14, 5, 32, 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: school-partnership-programs.php, classes.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(36, 11, 68, 0.98), rgba(14, 5, 32, 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--stem-math .modal-content::before {
  background: linear-gradient(90deg, var(--stem-math), #ff3a1a);
}

.modal--stem-physics .modal-content::before {
  background: linear-gradient(90deg, var(--stem-science, #129b59), var(--stem-math, #fc1002), var(--stem-engineering, #f8ae20));
}

/* 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);
}

.modal--stem-math .modal-body {
  background: linear-gradient(180deg, rgba(252, 16, 2, 0.1), transparent 140px);
}

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

/* ============================================================
   CTA BUTTONS
   Used by: school-partnership-programs.php, classes.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, where it shares
   one rule with the .btn-glow / .card-btn aliases. 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;
}

/* ============================================================
   CLASS LISTING TABLE
   Used by: school-partnership-programs.php
   ============================================================ */

.class-list-container {
  width: 100%;
  border-radius: var(--program-radius-lg);
  border: 1px solid var(--program-accent-soft);
  overflow: hidden;
}

.class-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr 1.5fr;
  gap: 0;
  padding: clamp(0.85rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--program-accent-soft);
  transition: background 0.2s ease;
}

.class-row:last-child {
  border-bottom: none;
}

.class-row:not(.header-row):hover {
  background: rgba(255, 255, 255, 0.04);
}

.class-row.header-row {
  background: rgba(255, 198, 79, 0.08);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--program-accent);
}

.col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: #fffefb;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
}

.col strong {
  color: #fffefb;
  font-weight: 700;
}

.col span {
  color: var(--program-text-soft);
  font-size: 0.9rem;
}

.registration-status {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--program-accent);
  text-align: center;
  margin-top: 0.35rem;
}

/* ============================================================
   CONTACT PROMPT
   Used by: school-partnership-programs.php
   ============================================================ */

.contact-prompt {
  border: 1px dashed var(--program-accent-soft);
  border-radius: var(--program-radius-md);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
  background: rgba(255, 255, 255, 0.03);
}

.contact-prompt p {
  color: var(--program-text-soft);
  font-size: clamp(0.93rem, 1.1vw, 1.02rem);
  line-height: 1.65;
  margin: 0.4rem 0;
}

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

.contact-prompt a:hover {
  color: #fffefb;
}

/* ============================================================
   PARTNERSHIP PAGE COMPONENTS
   Used by: school-partnership-programs.php
   ============================================================ */

/* Section 1 — intro panel (center-aligned variant of program-panel) */
.partnership-intro-panel {
  text-align: center;
}

.partnership-contact-block {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.partnership-contact-heading {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--program-text-soft);
  margin: 0 0 1rem;
}

.partnership-contact-details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.partnership-contact-details p {
  color: var(--program-text-soft);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  margin: 0;
}

.partnership-contact-details strong {
  color: #fffefb;
}

.partnership-contact-details a {
  color: var(--program-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.partnership-contact-details a:hover {
  color: #fffefb;
}

/* Section 2 — showcase header */
.partnership-showcase-header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

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

.partnership-showcase-header 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);
}

.partnership-showcase-header p {
  color: var(--program-text-soft);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  margin: 0;
}

/* Partnership cards — stacked column, scales to many */
.partnership-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* Partnership card subject colors — each card represents a specific STEM program
   and carries that subject's color heavily (strong border, persistent glow,
   subtle wash). Defaults to the page-level accent (purple) if no modifier is set;
   page chrome around the cards stays purple. */
.partnership-card {
  --card-accent: var(--program-accent);
  --card-accent-soft: var(--program-accent-soft);
  --card-accent-glow: var(--program-accent-glow);
  border: 1.5px solid var(--card-accent);
  border-left: 5px solid var(--card-accent);
  border-radius: var(--program-radius-lg);
  overflow: hidden;
  /* Subject-tinted background DEPTH (matches .camp-card) — a corner radial wash
     plus a diagonal sweep, both driven by --card-accent-soft, over the dark
     base. Dial richness with the single token --card-accent-soft. */
  background:
    radial-gradient(120% 80% at 0% 0%, var(--card-accent-soft), transparent 60%),
    linear-gradient(135deg, var(--card-accent-soft) 0%, transparent 58%),
    linear-gradient(148deg, rgba(30, 14, 54, 0.82), rgba(16, 8, 30, 0.88));
  /* Resting glow kept soft so the hover glow visibly grows. */
  box-shadow:
    0 0 0 1px var(--card-accent-soft),
    0 6px 18px rgba(0, 0, 0, 0.32),
    0 0 12px var(--card-accent-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Robotics partnership = Engineering color */
.partnership-card--eng {
  --card-accent: var(--stem-engineering);
  --card-accent-soft: rgba(248, 174, 32, 0.42);
  --card-accent-glow: rgba(248, 174, 32, 0.62);
}

.partnership-card--sci {
  --card-accent: var(--stem-science);
  --card-accent-soft: rgba(18, 155, 89, 0.42);
  --card-accent-glow: rgba(18, 155, 89, 0.62);
}

.partnership-card--tech {
  --card-accent: var(--stem-technology);
  --card-accent-soft: rgba(6, 98, 184, 0.42);
  --card-accent-glow: rgba(6, 98, 184, 0.62);
}

.partnership-card--math {
  --card-accent: var(--stem-math);
  --card-accent-soft: rgba(252, 16, 2, 0.42);
  --card-accent-glow: rgba(252, 16, 2, 0.62);
}

/* Hover GLOW — unmistakably subject-colored and clearly stronger than rest:
   solid subject ring + doubled (near + far) subject halo, driven by the
   --card-accent / --card-accent-glow tokens (identical treatment to .camp-card). */
.partnership-card:hover,
.partnership-card:focus-within {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1.5px var(--card-accent),
    0 16px 34px rgba(0, 0, 0, 0.42),
    0 0 28px var(--card-accent-glow),
    0 0 56px var(--card-accent-glow);
}

.partnership-card__header {
  position: relative;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  padding-right: clamp(4rem, 8vw, 5rem);
  border-bottom: 1px solid var(--card-accent-soft);
}

.partnership-card__icon {
  position: absolute;
  top: clamp(1.25rem, 3vw, 1.75rem);
  right: clamp(1.25rem, 3vw, 1.75rem);
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.partnership-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  /* Subject-colored chrome so the icon reads its STEM subject, not page purple. */
  border: 1px solid var(--card-accent);
  box-shadow: 0 0 12px var(--card-accent-glow);
  background: var(--card-accent-soft);
}

@media (min-width: 768px) {
  .partnership-card__icon {
    width: 72px;
    height: 72px;
  }
}

.partnership-badge {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.85rem;
}

.partnership-badge--ended {
  background: var(--card-accent-soft);
  color: var(--card-accent);
}

.partnership-card__header h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 800;
  /* Heading reads the card's subject color (not page purple / not white). */
  color: var(--card-accent);
  margin: 0 0 0.5rem;
}

.partnership-card__meta {
  color: var(--program-text-soft);
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  margin: 0;
}

.partnership-card__body {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

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

.partnership-card__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  padding: 0 clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
}

.partnership-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.partnership-detail-label {
  color: var(--program-text-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.partnership-detail-value {
  color: #fffefb;
  font-weight: 600;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
}

.partnership-card__footer {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--card-accent-soft);
}

@media (max-width: 640px) {
  .partnership-card__details {
    grid-template-columns: 1fr;
  }

  .partnership-contact-details {
    flex-direction: column;
    align-items: center;
  }
}

/* ============================================================
   CAMP CARDS COMPONENT
   Used by: classes.php
   ============================================================ */

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

.afternoon-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,
  .afternoon-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,
  .afternoon-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). Layer order mirrors
     .partnership-card. */
  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(30, 14, 54, 0.82), rgba(16, 8, 30, 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%);
}

.camp-card--stem-math {
  /* Math only (single-subject) — -2/-3 fall back to -1, wash collapses to solid */
  --card-accent-1: var(--stem-math);
  --card-accent: var(--card-accent-1);
  --card-accent-soft: rgba(252, 16, 2, 0.42);
  --card-accent-glow: rgba(252, 16, 2, 0.62);
  --card-top-stripe: linear-gradient(90deg, var(--stem-math), #ff3a1a);
}

.camp-card--stem-physics {
  /* Physics: Science (primary) + Math + Engineering */
  --card-accent-1: var(--stem-science);
  --card-accent-2: var(--stem-math);
  --card-accent-3: var(--stem-engineering);
  --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-math), var(--stem-engineering));
}

/* 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 card lifts (camp/partnership/program-info — 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,
  .partnership-card,
  .program-info__card {
    transition: none;
  }
  .camp-card:hover,
  .camp-card:focus-within,
  .partnership-card:hover,
  .partnership-card:focus-within,
  .program-info__card:hover,
  .program-info__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: classes.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(35, 15, 63, 0.94), rgba(12, 5, 28, 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(43, 17, 74, 0.85), rgba(14, 5, 32, 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: classes.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-cta-top {
  margin-bottom: 2rem;
}

.camp-cta-bottom {
  margin-top: 2rem;
}

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

/* ============================================================
   CAMP FAQ SECTION
   Used by: classes.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: school-partnership-programs.php, classes.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;
}

@media (max-width: 640px) {
  .class-row {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .class-row.header-row {
    display: none;
  }
}

/* ============================================================
   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(22, 7, 41, 0.86), rgba(22, 7, 41, 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(35, 15, 63, 0.94), rgba(12, 5, 28, 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;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 188, 79, 0.12), transparent 32%),
    linear-gradient(148deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
  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: #1f0a3e;
}

.contact-form-field select option {
  background: #240b44;
  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: #1f0a3e;
}

.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-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);
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 188, 79, 0.16), transparent 32%),
    linear-gradient(148deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  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(74, 28, 126, 0.88), rgba(21, 7, 43, 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.
   ============================================================================ */

/* === Orb color tokens — one per STEM subject === */
:root {
  --bg-orb-1: 18, 155, 89;    /* Science green  #129b59 */
  --bg-orb-2: 6, 98, 184;     /* Technology blue #0662b8 */
  --bg-orb-3: 248, 174, 32;   /* Engineering yellow #f8ae20 */
  --bg-orb-4: 252, 16, 2;     /* Math red #fc1002 */
  --bg-orb-pointer: 160, 100, 220;
}

/* ============================================================
   1. ANIMATED BACKGROUND SYSTEM
   #bg-layer is a fixed, full-viewport layer injected by header.php on every
   page. It uses a NEGATIVE z-index so all normal-flow page content paints
   above it automatically — no per-element elevation needed. Crucially this
   avoids creating a stacking context on <main>, which would otherwise trap
   the fixed modals (z-index:1000) on the camp/class pages beneath the sticky
   header. The body is made transparent (below) so the layer shows through.
============================================================ */

#bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(40deg, #1a0533, #0d0d1a);
  overflow: hidden;
}

/* Hidden inline-SVG goo filter container (no inline style attribute). */
.bg-goo-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Make existing page backgrounds transparent so the fixed gradient shows
   through. Content panels keep their own (opaque/glass) backgrounds. */
body,
body.site-wrapper,
.site-wrapper,
.site-theme {
  background: transparent !important;
}

/* Orb layer inside #bg-layer */
.gradients-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.orb {
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  mix-blend-mode: hard-light;
}

/* Orb 1 — Science green, circular drift */
.orb-1 {
  background: radial-gradient(circle at center, rgba(var(--bg-orb-1), 0.8) 0%, transparent 70%);
  top: 10%;
  left: 10%;
  transform-origin: center center;
  animation: animate-bg-first 20s infinite alternate;
}

/* Orb 2 — Technology blue, elliptical, origin offset left */
.orb-2 {
  background: radial-gradient(circle at center, rgba(var(--bg-orb-2), 0.8) 0%, transparent 70%);
  top: 5%;
  left: -20%;
  transform-origin: calc(50% - 400px);
  animation: animate-bg-second 18s infinite alternate;
}

/* Orb 3 — Engineering yellow, elliptical, origin offset right */
.orb-3 {
  background: radial-gradient(circle at center, rgba(var(--bg-orb-3), 0.6) 0%, transparent 70%);
  top: -10%;
  left: 60%;
  transform-origin: calc(50% + 400px);
  animation: animate-bg-third 25s infinite alternate;
}

/* Orb 4 — Math red, slow drift */
.orb-4 {
  background: radial-gradient(circle at center, rgba(var(--bg-orb-4), 0.8) 0%, transparent 70%);
  top: 40%;
  left: -10%;
  transform-origin: calc(50% - 200px);
  animation: animate-bg-fourth 30s infinite linear;
}

/* Pointer orb — centered on cursor via site.js mouse-lerp */
.orb-pointer {
  background: radial-gradient(circle at center, rgba(var(--bg-orb-pointer), 0.7) 0%, transparent 70%);
  top: -50%;
  left: -50%;
  pointer-events: none;
}

@keyframes animate-bg-first {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate(8%, 12%) rotate(120deg) scale(1.05); }
  66%  { transform: translate(-6%, 8%) rotate(240deg) scale(0.95); }
  100% { transform: translate(4%, -10%) rotate(360deg) scale(1.02); }
}

@keyframes animate-bg-second {
  0%   { transform: rotate(0deg) translateX(0) translateY(0); }
  50%  { transform: rotate(180deg) translateX(15%) translateY(-8%); }
  100% { transform: rotate(360deg) translateX(0) translateY(0); }
}

@keyframes animate-bg-third {
  0%   { transform: rotate(0deg) translateX(0) translateY(0); }
  40%  { transform: rotate(-150deg) translateX(-12%) translateY(10%); }
  100% { transform: rotate(-360deg) translateX(0) translateY(0); }
}

@keyframes animate-bg-fourth {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(10%, -15%) scale(1.08); }
  50%  { transform: translate(20%, 5%) scale(0.94); }
  75%  { transform: translate(5%, 20%) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Honor reduced-motion: freeze the orbs. */
@media (prefers-reduced-motion: reduce) {
  .orb-1, .orb-2, .orb-3, .orb-4 {
    animation: none !important;
  }
}

/* ============================================================
   3a. GLASS PANEL TREATMENT — shared chrome (global)
   Darker / more-opaque pass with backdrop blur.
============================================================ */

/* Header + footer chrome — dark semi-transparent glass */
header.container.site-header,
header.container.site-header.clearfix,
footer.container.site-footer {
  background: rgba(8, 5, 18, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Home programs panel — semi-transparent glass */
.site-theme #programs {
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 188, 79, 0.08), transparent 32%),
    rgba(11, 4, 28, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Home testimonial panel — semi-transparent glass */
.site-theme #testimonial {
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 184, 62, 0.1), transparent 40%),
    rgba(22, 7, 44, 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. .cta-button is the canonical
   class; .btn-glow and .card-btn are kept as aliases sharing the exact same
   rule so existing markup (index.php "Learn More" = .card-btn) keeps working
   with zero edits. Every gold 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 / .card-btn
   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,
.site-wrapper .btn-glow,
.site-wrapper .card-btn {
  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,
.site-wrapper .btn-glow::before,
.site-wrapper .card-btn::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,
.site-wrapper .btn-glow:hover,
.site-wrapper .btn-glow:focus-visible,
.site-wrapper .card-btn:hover,
.site-wrapper .card-btn: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,
.site-wrapper .btn-glow:hover::before,
.site-wrapper .btn-glow:focus-visible::before,
.site-wrapper .card-btn:hover::before,
.site-wrapper .card-btn: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. (The hero's former inline .cta-arrow SVG was removed so this
   pseudo is the single source — no double arrow.) */
.site-wrapper .cta-button::after,
.site-wrapper .cta-button-secondary::after,
.site-wrapper .btn-glow::after,
.site-wrapper .card-btn::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;
}

/* Back-compat: if any markup still carries an inline .cta-arrow SVG, size it
   and hide the pseudo arrow for that button so it never doubles up. */
.site-wrapper .cta-button .cta-arrow,
.site-wrapper .cta-button-secondary .cta-arrow,
.site-wrapper .btn-glow .cta-arrow,
.site-wrapper .card-btn .cta-arrow {
  width: 14px;
  height: 14px;
  margin-left: 0.5em;
  flex-shrink: 0;
}
.site-wrapper .cta-button:has(.cta-arrow)::after,
.site-wrapper .cta-button-secondary:has(.cta-arrow)::after,
.site-wrapper .btn-glow:has(.cta-arrow)::after,
.site-wrapper .card-btn:has(.cta-arrow)::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-wrapper .cta-button,
  .site-wrapper .cta-button-secondary,
  .site-wrapper .btn-glow,
  .site-wrapper .card-btn,
  .site-wrapper .cta-button::before,
  .site-wrapper .cta-button-secondary::before,
  .site-wrapper .btn-glow::before,
  .site-wrapper .card-btn::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,
  .site-wrapper .btn-glow:hover,
  .site-wrapper .btn-glow:focus-visible,
  .site-wrapper .card-btn:hover,
  .site-wrapper .card-btn:focus-visible {
    transform: none;
  }
}

/* ============================================================
   2b. SECONDARY BUTTON VARIANT — 6 CANDIDATES (PREVIEW ONLY)
   Opt-in modifiers layered on top of the primary glow base, e.g.
   <a class="cta-button cta-button--sec-1">. Each is clearly in the GLOW family
   (no gold) and visually subordinate to a primary glow button, but distinct
   from the other five. For use where two buttons sit side by side (primary +
   secondary).

   PREVIEW ONLY: these are applied solely on prototype/btn.php this round so
   Arvin can compare all six live and pick one. APPLIED TO NO REAL PAGE. The
   live .cta-button-secondary class is untouched. Once Arvin picks one, the
   winner becomes the secondary and the other five candidates get deleted.

   Specificity: each is .cta-button.cta-button--sec-N (0,3,0), which beats the
   primary glow base (.site-wrapper .cta-button, 0,2,0) regardless of source
   order, so the modifier reliably overrides the base — including on btn.php,
   whose inline <style> re-declares the base at the same (0,2,0).
============================================================ */

/* Candidate 1 — Ghost / outline. Transparent fill + faint white hairline, NO
   glow at rest. On hover the border dissolves and the gradient glow fades in.
   Most clearly "secondary" at rest; reveals the family on hover. */
.site-wrapper .cta-button.cta-button--sec-1 {
  background-color: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.site-wrapper .cta-button.cta-button--sec-1::before {
  opacity: 0;
}
.site-wrapper .cta-button.cta-button--sec-1:hover,
.site-wrapper .cta-button.cta-button--sec-1:focus-visible {
  border-color: transparent;
}
.site-wrapper .cta-button.cta-button--sec-1:hover::before,
.site-wrapper .cta-button.cta-button--sec-1:focus-visible::before {
  opacity: 0.55;
}

/* Candidate 2 — Dimmed glow. Same dark base + same gradient as primary, but
   the glow is quieter (lower opacity, softer blur) at rest and hover, so a
   primary beside it clearly out-glows it. Subtlest difference. */
.site-wrapper .cta-button.cta-button--sec-2::before {
  opacity: 0.15;
  filter: blur(4px);
}
.site-wrapper .cta-button.cta-button--sec-2:hover::before,
.site-wrapper .cta-button.cta-button--sec-2:focus-visible::before {
  opacity: 0.4;
}

/* Candidate 3 — Muted zinc / monochrome. Lighter zinc base + thin neutral
   border, NO colored gradient (swapped for a flat white wash). Reads as a
   neutral companion; keeps the colored glow unique to the primary. */
.site-wrapper .cta-button.cta-button--sec-3 {
  background-color: #27272a;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.site-wrapper .cta-button.cta-button--sec-3::before {
  background: rgba(255, 255, 255, 0.06);
  opacity: 1;
  filter: none;
}
.site-wrapper .cta-button.cta-button--sec-3:hover::before,
.site-wrapper .cta-button.cta-button--sec-3:focus-visible::before {
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

/* Candidate 4 — Gradient glow ring. Dark center with a crisp indigo->purple->
   pink GRADIENT BORDER (padding-box/border-box layering); no blurred glow at
   rest. On hover a soft outer glow shadow blooms. The colored gradient lives
   in the ring instead of behind the label. */
.site-wrapper .cta-button.cta-button--sec-4 {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#18181b, #18181b) padding-box,
    linear-gradient(90deg, #6366f1, #a855f7, #ec4899) border-box;
}
.site-wrapper .cta-button.cta-button--sec-4::before {
  opacity: 0;
}
.site-wrapper .cta-button.cta-button--sec-4:hover,
.site-wrapper .cta-button.cta-button--sec-4:focus-visible {
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.5);
}

/* Candidate 5 — Solid dark + thin glowing border. Near-black solid base, a
   crisp 1px indigo hairline, and a small static outer glow shadow. Minimal and
   sharp — no big blurred gradient. Hover shifts the border toward purple and
   strengthens the shadow. */
.site-wrapper .cta-button.cta-button--sec-5 {
  background-color: #101013;
  border: 1px solid rgba(99, 102, 241, 0.7);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.25);
}
.site-wrapper .cta-button.cta-button--sec-5::before {
  opacity: 0;
}
.site-wrapper .cta-button.cta-button--sec-5:hover,
.site-wrapper .cta-button.cta-button--sec-5:focus-visible {
  border-color: rgba(168, 85, 247, 0.9);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.45);
}

/* Candidate 6 — Compact / lighter. Same dimmed-glow family but subordinate by
   SIZE: smaller padding, smaller font, lighter weight, and a very low glow. A
   primary beside it dominates by mass rather than color. */
.site-wrapper .cta-button.cta-button--sec-6 {
  padding: 0.4em 1.05em;
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  font-weight: 600;
}
.site-wrapper .cta-button.cta-button--sec-6::before {
  opacity: 0.12;
  filter: blur(4px);
}
.site-wrapper .cta-button.cta-button--sec-6:hover::before,
.site-wrapper .cta-button.cta-button--sec-6:focus-visible::before {
  opacity: 0.35;
}

/* ============================================================
   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 badge + headings + glow CTA on the
   left and the image rotator on the right.
============================================================ */

/* 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) */
.site-theme #hero .hero-feature__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  background: rgba(4, 1, 12, 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;
}

/* Eyebrow badge — pinned top-left of the pill, cycles STEM colors */
.site-theme #hero .hero-feature__badge {
  position: absolute;
  top: 1rem;
  left: 2rem;
  z-index: 10;
  display: inline-block;
  width: fit-content;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35em 1em;
  border-radius: var(--radius-pill);
  border: 1.5px solid currentColor;
  animation: badge-cycle 8s infinite;
}

@keyframes badge-cycle {
  0%,  20% { color: #129b59; border-color: #129b59; background: rgba(18,155,89,0.12); }
  25%, 45% { color: #0662b8; border-color: #0662b8; background: rgba(6,98,184,0.12); }
  50%, 70% { color: #f8ae20; border-color: #f8ae20; background: rgba(248,174,32,0.12); }
  75%, 95% { color: #fc1002; border-color: #fc1002; background: rgba(252,16,2,0.12); }
  100%     { color: #129b59; border-color: #129b59; background: rgba(18,155,89,0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .site-theme #hero .hero-feature__badge { animation: none !important; }
}

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

/* STEM letters — selector specificity (1,3,1) intentionally beats the earlier
   .site-theme #hero h1.stem (1,2,1) on the cascade itself. */
.site-theme #hero .hero-feature__left h1.stem {
  font-size: clamp(5rem, 10vw, 11rem);
  line-height: 1.05;
  white-space: normal;
  display: block;
  filter: none;
  margin: 0;
  /* No forced width: keep the element content-sized so the parent flex
     `align-items: center` (.hero-feature__left) re-centers it as before.
     A forced `width: 100%` made the block span the full column and pushed
     the inline S/T/E/M spans to their default left alignment. max-width
     stays as an overflow cap only. */
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}

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

/* Glow CTA — auto width, centered under the copy */
.site-theme #hero .hero-feature__cta {
  align-self: center;
  margin-top: 0.5rem;
  width: auto;
  max-width: fit-content;
}

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

.site-theme #hero .hero-feature__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
  overflow: hidden;
}

/* NOTE: no default opacity here — both <img> would show. JS sets inline
   opacity to crossfade (img--a starts at 1 via its own rule below). */
.site-theme #hero .hero-feature__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  transition: opacity 1s ease-in-out;
}

.site-theme #hero .hero-feature__img--a { opacity: 1; }
.site-theme #hero .hero-feature__img--b { opacity: 0; }

/* 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.stem {
    font-size: 10vw;
    line-height: 1.0;
  }
  .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;
  }
  .site-theme #hero .hero-feature__img-wrap {
    aspect-ratio: 3 / 4;
    border-radius: 0.75rem;
  }
  .site-theme #hero .hero-feature__img {
    object-position: center top;
  }
  .site-theme #hero .hero-feature__cta {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    margin: 0;
    font-size: 0.62rem;
    padding: 0.4em 0.6em;
    white-space: normal;
    text-align: center;
  }
  .site-theme #hero .hero-feature__badge {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    font-size: 0.65rem;
    padding: 0.25em 0.6em;
  }

  /* 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;
  background: rgba(3, 1, 8, 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 .program-info__lead pill (~#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 (eyebrow
   pill + title) like every other page — their gold eyebrow 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(--program-text-soft);
  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(43, 17, 74, 0.96), rgba(14, 5, 32, 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(20, 7, 42, 0.92), rgba(43, 17, 74, 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(43, 17, 74, 0.96), rgba(14, 5, 32, 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(35, 15, 63, 0.95), rgba(12, 5, 28, 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(3, 1, 8, 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(3, 1, 8, 0.5);
}

.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(35, 15, 63, 0.9), rgba(12, 5, 28, 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;
  }
}

/* ============================================================
   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(35, 15, 63, 0.55), rgba(12, 5, 28, 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;
}

/* 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(35, 15, 63, 0.92), rgba(12, 5, 28, 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;
  }
}