/* --------------------------------------------------------------------------------------------------------------------------
     TOKENS
  -------------------------------------------------------------------------------------------------------------------------- */
  :root {
    --black:   #080808;
    --dark:    #101010;
    --card:    #161616;
    --border:  rgba(255,255,255,0.08);
    --white:   #F7F7F5;
    --gray:    #999;
    --muted:   #555;
    --orange:  #FF6200;
    --orange2: #FF8533;
    --radius:  40px;
    --font-d:  'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-b:  'Inter', system-ui, sans-serif;
    --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     RESET & BASE
  -------------------------------------------------------------------------------------------------------------------------- */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-b);
    background: var(--black);
    color: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font-family: var(--font-b); cursor: pointer; border: none; background: none; }

  .container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     REVEAL ANIMATIONS
  -------------------------------------------------------------------------------------------------------------------------- */
  .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .reveal.in { opacity: 1; transform: none; }
  .reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .reveal-left.in { opacity: 1; transform: none; }
  .reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .reveal-right.in { opacity: 1; transform: none; }
  .d1 { transition-delay: 0.1s; }
  .d2 { transition-delay: 0.2s; }
  .d3 { transition-delay: 0.3s; }
  .d4 { transition-delay: 0.4s; }
  .d5 { transition-delay: 0.5s; }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  }

  /* Scroll progress indicator — thin gradient bar that fills as you scroll */
  .scroll-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px; z-index: 250; pointer-events: none;
    background: rgba(255,255,255,0.04);
  }
  .scroll-progress > i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--orange), var(--art));
    box-shadow: 0 0 12px rgba(255,98,0,0.4);
    will-change: width;
  }
  /* Parallax targets drift slightly slower/faster than scroll for depth */
  .parallax { will-change: transform; }

  /* --------------------------------------------------------------------------------------------------------------------------
     BUTTONS
  -------------------------------------------------------------------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 34px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background 0.22s, color 0.22s, transform 0.18s var(--ease), gap 0.2s;
    cursor: pointer;
  }
  .btn:active { transform: scale(0.97); }
  .btn svg { transition: transform 0.2s var(--ease); flex-shrink: 0; }
  .btn:hover svg { transform: translateX(5px); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.97); }

  /* light sweep across solid buttons */
  .btn-orange, .btn-white-solid, .btn-white, .nav-cta {
    position: relative;
    overflow: hidden;
  }
  .btn-orange::after, .btn-white-solid::after, .btn-white::after, .nav-cta::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s var(--ease);
    pointer-events: none;
  }
  .btn-white-solid::after, .btn-white::after {
    background: linear-gradient(105deg, transparent, rgba(8,8,8,0.12), transparent);
  }
  .btn-orange:hover::after, .btn-white-solid:hover::after, .btn-white:hover::after, .nav-cta:hover::after { left: 130%; }

  .btn-orange  { background: var(--orange); color: var(--white); }
  .btn-orange:hover { background: var(--orange2); box-shadow: 0 10px 28px rgba(255,98,0,0.35); }
  .btn-white-solid { background: var(--white); color: var(--black); }
  .btn-white-solid:hover { box-shadow: 0 10px 28px rgba(255,255,255,0.18); }

  .btn-white   { background: var(--white); color: var(--black); }
  .btn-white:hover { background: #e8e8e6; }

  .btn-ghost   { border: 1.5px solid rgba(255,255,255,0.28); color: var(--white); }
  .btn-ghost:hover { border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); box-shadow: 0 8px 22px rgba(0,0,0,0.3); }

  .btn-ghost-dark { border: 1.5px solid rgba(0,0,0,0.22); color: var(--black); }
  .btn-ghost-dark:hover { background: rgba(0,0,0,0.06); }

  /* --------------------------------------------------------------------------------------------------------------------------
     EYEBROW LABEL
  -------------------------------------------------------------------------------------------------------------------------- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
  }
  .eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: rgba(255,255,255,0.4);
    border-radius: 2px;
    flex-shrink: 0;
  }
  .eyebrow.light { color: var(--gray); }
  .eyebrow.light::before { background: var(--gray); }

  /* --------------------------------------------------------------------------------------------------------------------------
     NAV
  -------------------------------------------------------------------------------------------------------------------------- */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: 72px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
    will-change: background;
  }
  .nav.scrolled {
    background: rgba(8,8,8,0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: var(--border);
  }

  .nav-logo img {
    height: 34px;
    width: auto;
    filter: brightness(0) invert(1);
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
    list-style: none;
  }
  .nav-links a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    position: relative;
    transition: color 0.2s;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 1.5px;
    background: linear-gradient(90deg, var(--orange), #22C55E);
    transition: width 0.25s var(--ease);
  }
  .nav-links a:hover { color: var(--white); }
  .nav-links a:hover::after { width: 100%; }

  .nav-cta {
    padding: 11px 24px;
    background: var(--white);
    color: var(--black);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background 0.2s, transform 0.18s;
  }
  .nav-contact {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .nav-contact-divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,0.2);
  }
  .nav-contact-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    line-height: 1.3;
  }
  .nav-contact-phone {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--white);
    transition: color 0.25s, text-shadow 0.25s;
  }
  .nav-contact-phone:hover { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,0.8); }
  .nav-contact-email {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.75);
    transition: color 0.25s, text-shadow 0.25s;
  }
  .nav-contact-email:hover { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,0.8); }
  .nav-cta:hover { background: rgba(255,255,255,0.85); transform: translateY(-1px); }

  /* Mobile nav */
  .nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
  }
  .nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
  }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Compact drop-down panel — matches parties.html, which is the design we settled on.
     (Was a full-screen 40px Bebas menu sliding in from the right.) It drops from under
     the 72px nav rather than covering the screen, so it stays out of the way. */
  .nav-mobile {
    display: none;
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: rgba(8,8,8,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    z-index: 199;
    flex-direction: column;
    padding: 20px 32px;
    gap: 8px;
    transform: translateY(-130%);
    transition: transform 0.4s var(--ease);
  }
  .nav-mobile.open { transform: translateY(0); }
  .nav-mobile a {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    padding: 8px 0;
    transition: color 0.2s;
  }
  .nav-mobile a:hover { color: var(--white); }
  .nav-mobile-contact {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .nav-mobile .nmc-phone {
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
  }
  .nav-mobile .nmc-email {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
  }

  @media (max-width: 900px) {
    .nav-links, .nav-cta, .nav-contact { display: none; }
    .nav-burger { display: flex; }
    .nav-mobile { display: flex; }
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     HERO
  -------------------------------------------------------------------------------------------------------------------------- */
  .hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 0 80px;
    overflow: hidden;
    background: var(--black);
  }

  .hero-video {
    position: absolute; inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .hero-video video {
    position: absolute;
    top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;
    min-height: 100svh; min-width: 177.78svh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    object-fit: cover;
  }
  .hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    /* Solid, PIXEL-anchored black shield over the bottom 90px so no video ever
       bleeds through behind the curve, plus the usual top-to-bottom darkening. */
    background:
      linear-gradient(to top, var(--black) 0, var(--black) 90px, rgba(8,8,8,0) 220px),
      linear-gradient(
        to bottom,
        rgba(8,8,8,0.55) 0%,
        rgba(8,8,8,0.4) 35%,
        rgba(8,8,8,0.82) 70%,
        rgba(8,8,8,0.95) 100%
      );
  }

  /* Curved bottom cutout */
  .hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 80px;
    background: var(--black);
    border-radius: 50px 50px 0 0;
    z-index: 1;   /* below .hero-content (z:2) so the curve can never cover the hero text */
  }

  .hero-content {
    position: relative;
    z-index: 2;
    padding-top: 0;
  }

  .hero-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 20px;
    animation: fadeUp 0.7s 0.3s var(--ease) both;
  }

  .hero-title {
    font-family: var(--font-d);
    font-size: clamp(46px, 7.4vw, 118px);
    line-height: 0.86;
    letter-spacing: 0.01em;
    animation: fadeUp 0.9s 0.45s var(--ease) both;
  }
  .hero-title .ol {
    color: #fff;
    text-shadow: 0 2px 24px rgba(255,255,255,0.18);
  }
  .hero-title .dim { color: rgba(255,255,255,0.6); }
  .dim-w { color: rgba(255,255,255,0.6); }
  .hero-title .accent { color: var(--orange); }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: none; }
  }

  .hero-sub {
    margin-top: 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.9;
    color: rgba(255,255,255,0.8);
    animation: fadeUp 0.8s 0.6s var(--ease) both;
  }
  .hero-sub .hs-seg { white-space: nowrap; }

  .hero-scroll {
    position: absolute;
    bottom: 96px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: fadeUp 0.6s 1s var(--ease) both;
  }
  .hero-scroll span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }
  .hero-scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
  }
  @keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(0.6) translateY(12px); }
  }

  @media (max-width: 768px) {
    .hero-sub { max-width: 100%; }
    .hero-scroll { display: none; }
    /* Hug the content instead of stretching to full screen (removes the big empty gap above the text on tall phones) */
    .hero { min-height: auto; padding-top: 116px; padding-bottom: 72px; }
    /* Belt-and-suspenders (same as the parties hero): clip the video itself to end
       92px above the hero bottom so there is literally no video near the curve to leak. */
    .hero-video { bottom: 92px; }
    /* Solid, PIXEL-anchored black shield over the bottom 130px (immune to mobile svh changes) so no video bleeds through above the curve */
    .hero-overlay { background:
      linear-gradient(to top, var(--black) 0, var(--black) 130px, rgba(8,8,8,0) 250px),
      linear-gradient(to bottom, rgba(8,8,8,0.55), rgba(8,8,8,0.35) 45%, rgba(8,8,8,0.5) 80%); }
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     STATS BAR
  -------------------------------------------------------------------------------------------------------------------------- */
  .stats-bar {
    background: var(--dark);
    padding: 44px 0;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
  }
  .stat-cell {
    background: var(--card);
    padding: 26px 24px;
    text-align: center;
    transition: background 0.25s;
  }
  .stat-cell:hover { background: #1e1e1e; }
  .stat-num {
    font-family: var(--font-d);
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1;
    color: var(--white);
    letter-spacing: 0.02em;
  }
  .stat-num .highlight { color: rgba(255,255,255,0.45); }
  .stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gray);
    margin-top: 8px;
  }

  @media (max-width: 700px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    /* 5 stats in a 2-col grid leaves the last one alone — let it span full width so there's no empty cell */
    .stats-grid .stat-cell:last-child { grid-column: 1 / -1; }
  }
  @media (max-width: 400px) {
    .stats-grid { grid-template-columns: 1fr; }
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     PARTNERS
  -------------------------------------------------------------------------------------------------------------------------- */
  .partners {
    background: var(--dark);
    padding: 0 0 40px;
    overflow: hidden;
  }
  .partners-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 28px;
  }
  .partners-track-wrap { overflow: hidden; }
  .partners-track {
    display: flex;
    align-items: center;
    gap: 0;
    animation: marquee 40s linear infinite;
    width: max-content;
    will-change: transform;
  }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } }
  .partners-track img,
  .partners-track svg {
    height: 32px;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
    flex-shrink: 0;
    padding: 0 48px;
    transition: opacity 0.3s;
  }
  .partners-track img:hover,
  .partners-track svg:hover { opacity: 1; }
  .partners-track .logo-nba { height: 48px; }


  /* --------------------------------------------------------------------------------------------------------------------------
     ABOUT
  -------------------------------------------------------------------------------------------------------------------------- */
  .about {
    background: var(--dark);
    border-radius: var(--radius) var(--radius) 0 0;
    margin-top: -40px;
    padding: 64px 0 72px;
    position: relative;
    z-index: 2;
  }
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .about-image-wrap {
    position: relative;
  }
  .about-image-wrap img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 28px;
    display: block;
  }
  .about-split {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 28px;
    overflow: hidden;
  }
  .about-tri {
    position: absolute;
    inset: 0;
  }
  .about-image-wrap .about-tri img {
    width: 100%; height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
  }
  .about-tag {
    position: absolute;
    z-index: 3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
  }
  .tag-bball { top: 16px; right: 16px; background: var(--orange); }
  .tag-art { bottom: 16px; left: 16px; background: var(--art); }
  .tri-bball { clip-path: polygon(0 0, 99.5% 0, 0 99.5%); }
  .tri-art   { clip-path: polygon(100% 0.5%, 100% 100%, 0.5% 100%); }
  .tri-bball img { transform: scale(1.44) translate(-15%, 3%); }
  .tri-art img   { transform: scale(1.35) translate(10.5%, 2.5%); }
  .about-image-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--white);
    color: var(--black);
    border-radius: 20px;
    padding: 24px 28px;
    font-family: var(--font-d);
    font-size: 56px;
    line-height: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 20px 60px rgba(255,98,0,0.35);
  }
  .about-image-badge span {
    display: block;
    font-family: var(--font-b);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: 4px;
  }

  .about-content { padding-left: 20px; }
  .about-content .eyebrow { margin-bottom: 24px; }
  .about-heading {
    font-family: var(--font-d);
    font-size: clamp(40px, 4.5vw, 68px);
    line-height: 0.95;
    letter-spacing: 0.02em;
    margin-bottom: 28px;
  }
  .about-heading .ol {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--white);
  }
  .about-body {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255,255,255,0.6);
    margin-bottom: 16px;
  }
  .about-divider {
    width: 48px;
    height: 2px;
    background: rgba(255,255,255,0.4);
    border-radius: 2px;
    margin: 32px 0;
  }
  .about-pillars {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .about-pillar {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.8);
  }
  .pillar-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    flex-shrink: 0;
  }

  @media (max-width: 860px) {
    .about-grid { grid-template-columns: 1fr; gap: 60px; }
    .about-content { padding-left: 0; }
    .about-image-badge { right: 16px; bottom: 16px; }
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     PROGRAMS
  -------------------------------------------------------------------------------------------------------------------------- */
  .programs {
    background: var(--black);
    padding: 72px 0;
  }
  .programs-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 64px;
    gap: 24px;
  }
  .programs-head .eyebrow { margin-bottom: 18px; }
  .programs-heading {
    font-family: var(--font-d);
    font-size: clamp(40px, 5vw, 72px);
    line-height: 0.95;
    letter-spacing: 0.02em;
  }

  .programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .prog-card {
    background: var(--card);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
    cursor: default;
  }
  .prog-card:hover {
    transform: translateY(-10px);
    border-color: rgba(144,155,60,0.55);
    box-shadow: -14px 24px 60px rgba(255,98,0,0.18), 14px 24px 60px rgba(34,197,94,0.18);
  }
  .prog-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
  }
  .prog-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
  }
  .prog-card:hover .prog-image img { transform: scale(1.07); }
  /* Day Camps basketball photo — cropped in and anchored to its top so the
     players sit lower in the frame; the wrapper clips the zoom to its own
     half of the card, and hover combines the crop with the zoom */
  .img-crop-low { width: 50%; height: 100%; overflow: hidden; flex-shrink: 0; }
  .prog-image.split .img-crop-low img {
    width: 100%;
    height: 100%;
    object-position: center 0%;
    transform: scale(1.22);
    transform-origin: 50% 0%;
  }
  #programs-day-camps:hover .img-crop-low img { transform: scale(1.31); }
  .prog-image.split { display: flex; }
  .prog-image.split img { width: 50%; height: 100%; }
  .prog-image-badge {
    position: absolute;
    top: 6px; left: 16px;
    background: linear-gradient(90deg, var(--orange), #22C55E);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
  }

  .prog-body {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .prog-num {
    font-family: var(--font-d);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--orange);
    margin-bottom: 10px;
  }
  .prog-name {
    font-family: var(--font-d);
    font-size: 28px;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    line-height: 1.05;
  }
  .prog-desc {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.55);
    flex: 1;
    margin-bottom: 28px;
  }
  .prog-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 11px 18px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--orange) -22%, #22C55E 58%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: gap 0.2s, border-color 0.25s, box-shadow 0.25s, transform 0.18s;
  }
  /* background-clip: text swallows background-color, so the hover fill
     is an inset shadow instead */
  .prog-card:hover .prog-link {
    gap: 14px;
    border-color: rgba(255,255,255,0.4);
    box-shadow: inset 0 0 0 999px rgba(255,255,255,0.05);
  }
  .prog-link:active { transform: scale(0.97); }

  @media (max-width: 860px) {
    .programs-grid { grid-template-columns: 1fr; gap: 16px; }
    .programs-head { flex-direction: column; align-items: flex-start; }
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     GALLERY / COLLAGE
  -------------------------------------------------------------------------------------------------------------------------- */
  .gallery {
    background: var(--black);
    padding-bottom: 72px;
  }
  .gallery-head {
    padding: 0 0 56px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
  .gallery-heading {
    font-family: var(--font-d);
    font-size: clamp(40px, 5vw, 68px);
    line-height: 0.95;
    letter-spacing: 0.02em;
    margin-top: 18px;
  }

  /* ---- Collage — editorial scatter style ---------------------------------------- */
  .collage {
    display: flex;
    height: 620px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
  }

  /* Left brand panel — torn white paper */
  .col-left {
    width: 36%;
    flex-shrink: 0;
    background: #f0eee8;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px 44px;
    overflow: visible;
  }
  .col-ghost {
    position: absolute;
    bottom: -18px; left: -16px;
    pointer-events: none; user-select: none;
  }
  .col-ghost img {
    width: 340px;
    height: auto;
    filter: brightness(0);
    opacity: 0.05;
  }
  .col-eyebrow {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    white-space: nowrap;
    color: rgba(8,8,8,0.55); margin-bottom: 18px;
  }
  .col-headline {
    font-family: var(--font-d);
    font-size: clamp(52px, 4.8vw, 78px);
    line-height: 0.88; color: var(--black);
    margin-bottom: 32px;
  }
  .col-headline .dim-w { color: rgba(8,8,8,0.45); }
  .col-hl-orange { color: var(--orange); }
  .col-hl-art    { color: #22C55E; }
  .col-stat-inline {
    display: flex; align-items: flex-end; gap: 10px;
    border-top: 1px solid rgba(8,8,8,0.15);
    padding-top: 20px;
  }
  .col-stat-lbl { padding-bottom: 6px; }
  .col-stat-num {
    font-family: var(--font-d);
    font-size: 54px; line-height: 1;
    color: var(--black);
  }
  .col-stat-num span { color: rgba(8,8,8,0.4) !important; }
  .col-stat-lbl {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(8,8,8,0.5); max-width: 120px; line-height: 1.4;
  }

  /* Torn SVG edge */
  .col-tear {
    position: absolute;
    right: -1px; top: 0;
    height: 100%; width: 48px;
    z-index: 10; pointer-events: none;
  }

  /* Right photo zone */
  .col-right {
    flex: 1;
    position: relative;
    background: #060606;
    overflow: visible;
    z-index: 5;
  }


  /* Photo cards */
  .col-photo {
    position: absolute;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.6s var(--ease), box-shadow 0.4s;
  }
  .col-photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    filter: brightness(0.92) saturate(1.1);
    transition: transform 0.8s var(--ease), filter 0.4s;
  }
  .col-photo:hover { transform: scale(1.015) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.7) !important; }
  .col-photo:hover img { filter: brightness(1) saturate(1.2); }
  .col-border { border: 4px solid #fff; }

  /* Main anchor */
  .col-pm  { width: 36%; height: 68%; top: 12%; left: 4%;   z-index: 3;  transform: rotate(-1.5deg); box-shadow: 0 12px 48px rgba(0,0,0,0.65); }
  /* Right zone photos */
  .col-p1  { width: 32%; height: 38%; top: 2%;    left: 42%; z-index: 4;  transform: rotate(4deg);   box-shadow: 0 8px 28px rgba(0,0,0,0.55); }
  .col-p2  { width: 28%; height: 34%; top: 3%;    right: 1%; z-index: 5;  transform: rotate(-5deg);  box-shadow: 0 6px 22px rgba(0,0,0,0.5); }
  .col-p3  { width: 40%; height: 34%; bottom: 2%; left: 2%;  z-index: 4;  transform: rotate(2deg);   box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
  .col-p4  { width: 28%; height: 36%; bottom: 3%; right: 2%; z-index: 5;  transform: rotate(-4deg);  box-shadow: 0 8px 28px rgba(0,0,0,0.55); }
  .col-p5  { width: 24%; height: 30%; bottom: 5%; left: 45%; z-index: 6;  transform: rotate(6deg);   box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
  .col-p6  { width: 26%; height: 28%; top: 42%;   left: 40%; z-index: 7;  transform: rotate(-7deg);  box-shadow: 0 8px 28px rgba(0,0,0,0.6); }
  .col-p7  { width: 20%; height: 26%; top: 36%;   right: 1%; z-index: 6;  transform: rotate(5deg);   box-shadow: 0 6px 24px rgba(0,0,0,0.55); }
  .col-p8  { width: 18%; height: 24%; top: 1%;    left: 38%; z-index: 8;  transform: rotate(-9deg);  box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
  .col-p9  { width: 22%; height: 28%; bottom: 1%; left: 41%; z-index: 7;  transform: rotate(8deg);   box-shadow: 0 6px 22px rgba(0,0,0,0.5); }
  .col-p10 { width: 16%; height: 20%; top: 28%;   left: 34%; z-index: 8;  transform: rotate(-10deg); box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
  /* Fill empty spots on right */
  .col-p11 { width: 22%; height: 24%; top: 22%;   left: 63%; z-index: 6;  transform: rotate(3deg);   box-shadow: 0 6px 22px rgba(0,0,0,0.5); }
  .col-p12 { width: 18%; height: 22%; top: 57%;   left: 68%; z-index: 7;  transform: rotate(-6deg);  box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
  .col-p13 { width: 20%; height: 24%; top: 4%;    left: 18%; z-index: 6;  transform: rotate(9deg);   box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
  .col-p14 { width: 17%; height: 20%; top: 52%;   left: 15%; z-index: 6;  transform: rotate(-8deg);  box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
  .col-p15 { width: 17%; height: 24%; top: 72%;   left: 18%; z-index: 7; transform: rotate(8deg);  box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
  /* Barely crossing the left border — stays in the gap near the dividing line, not over text */
  /* Background fillers — large, low z, cover gaps behind the scattered cards */
  .col-pe  { width: 44%; height: 48%; top: 22%; left: 16%; z-index: 1; transform: rotate(2deg); }
  .col-pf  { width: 54%; height: 48%; top: 36%; left: 44%; z-index: 1; transform: rotate(-3deg); }
  .col-pa  { width: 22%; height: 26%; top: 5%;    left: -8%;  z-index: 9;  transform: rotate(6deg);   box-shadow: 0 10px 36px rgba(0,0,0,0.7); }
  .col-pb  { width: 20%; height: 24%; bottom: 4%; left: -6%;  z-index: 9;  transform: rotate(-7deg);  box-shadow: 0 8px 28px rgba(0,0,0,0.65); }
  .col-pc  { width: 18%; height: 22%; top: 48%;   left: -5%;  z-index: 9;  transform: rotate(10deg);  box-shadow: 0 6px 24px rgba(0,0,0,0.6); }
  .col-pd  { width: 16%; height: 20%; top: 25%;   left: -4%;  z-index: 10; transform: rotate(-5deg);  box-shadow: 0 8px 28px rgba(0,0,0,0.6); }

  /* Responsive */
  @media (max-width: 960px) {
    .collage { flex-direction: column; height: auto; border-radius: 16px; overflow: hidden; }
    .col-left { width: 100%; padding: 40px 32px 32px; justify-content: flex-start; }
    .col-tear { display: none; }
    .col-ghost img { width: 220px; }
    .col-headline { font-size: 52px; }

    .col-right {
      flex: none;
      height: 560px;
      min-height: 560px;
      position: relative;
      overflow: hidden;
      background: #060606;
    }

    /* All photos absolute, overlapping collage */
    .col-photo { position: absolute !important; }

    /* Mobile: all photos in a staggered 4-row quilt — two photos per row
       with small consistent overlaps, three smaller accents floating over
       the row seams, fillers peeking through the gaps behind */
    .col-pe  { width: 50%; height: 34%; top: 24%; left: 12%; z-index: 1; transform: rotate(2deg); }
    .col-pf  { width: 78%; height: 30%; top: 55%; left: 4%; z-index: 1; transform: rotate(-3deg); }
    .col-pm  { width: 52%; height: 28%; top: 1%;  bottom: auto; left: 2%;  z-index: 3; transform: rotate(-2deg); box-shadow: 0 12px 40px rgba(0,0,0,0.65); }
    .col-p1  { width: 44%; height: 26%; top: 3%;  bottom: auto; left: auto; right: 2%; z-index: 4; transform: rotate(3deg); box-shadow: 0 8px 28px rgba(0,0,0,0.55); }
    .col-p2  { width: 44%; height: 22%; top: 27%; bottom: auto; left: 4%;  z-index: 5; transform: rotate(-4deg); box-shadow: 0 6px 22px rgba(0,0,0,0.5); display: block !important; }
    .col-p6  { width: 46%; height: 24%; top: 29%; bottom: auto; left: auto; right: 3%; z-index: 4; transform: rotate(5deg); box-shadow: 0 8px 28px rgba(0,0,0,0.6); display: block !important; }
    .col-p10 { width: 44%; height: 22%; top: 52%; bottom: auto; left: 2%;  z-index: 5; transform: rotate(-3deg); box-shadow: 0 8px 28px rgba(0,0,0,0.55); display: block !important; }
    .col-p7  { width: 42%; height: 22%; top: 54%; bottom: auto; left: auto; right: 4%; z-index: 4; transform: rotate(4deg); box-shadow: 0 6px 24px rgba(0,0,0,0.55); display: block !important; }
    .col-p3  { width: 50%; height: 21%; top: 77%; bottom: auto; left: 3%;  z-index: 5; transform: rotate(2deg); box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
    .col-p4  { width: 44%; height: 22%; top: 76%; bottom: auto; left: auto; right: 2%; z-index: 4; transform: rotate(-4deg); box-shadow: 0 8px 28px rgba(0,0,0,0.55); display: block !important; }
    .col-p8  { width: 28%; height: 14%; top: 18%; bottom: auto; left: 38%; z-index: 8; transform: rotate(-7deg); box-shadow: 0 6px 20px rgba(0,0,0,0.5); display: block !important; }
    .col-p5  { width: 34%; height: 14%; top: 43%; bottom: auto; left: 32%; z-index: 8; transform: rotate(6deg); box-shadow: 0 6px 20px rgba(0,0,0,0.5); display: block !important; }
    .col-p9  { width: 32%; height: 16%; top: 67%; bottom: auto; left: 33%; z-index: 8; transform: rotate(-5deg); box-shadow: 0 6px 22px rgba(0,0,0,0.5); display: block !important; }
    .col-p11, .col-p12, .col-p13, .col-p14, .col-p15,
    .col-pa, .col-pb, .col-pc, .col-pd { display: none; }
  }

  @media (max-width: 540px) {
    .col-right { height: 480px; min-height: 480px; }
  }

  /* Gallery CTA strip */
  .gallery-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 48px;
    flex-wrap: wrap;
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     PRICING
  -------------------------------------------------------------------------------------------------------------------------- */
  .pricing {
    background: var(--dark);
    border-radius: var(--radius) var(--radius) 0 0;
    margin-top: -40px;
    padding: 72px 0 40px;
    position: relative;
    z-index: 3;
    isolation: isolate;   /* clean stacking context so the gallery below can never bleed over the header */
  }
  .pricing-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;     /* clip the parallax bg image here instead of on the whole section
                             (keeps .pricing from becoming a GPU layer that Chrome mis-paints) */
    border-radius: var(--radius) var(--radius) 0 0;
  }
  /* The background is a BAND across the top of the section, not a stretch over all of it.
     Why: .pricing is ~4300px tall. With the old height:124%, `cover` had to fill a
     4300px box from a ~1200px-tall photo — a 4x blow-up that showed only ~8% of the
     photo's width, i.e. a vertical smear rather than a scene. At a fixed 1600px the
     zoom drops to ~1.3x and essentially the whole frame reads, so the people at the
     left and right edges are visible either side of the cards.
     top/-70px + the extra height give the parallax (±60px) room to move without
     exposing an edge. */
  .pricing-bg img {
    position: absolute; left: 0; top: -70px;
    width: 100%; height: 1600px;
    object-fit: cover;
    object-position: center 42%;
    filter: brightness(0.24) saturate(0.55);
    /* Fade the image out BEFORE its own bottom edge. This must be a mask on the image
       rather than an overlay at a fixed pixel depth: the parallax translates the image
       up to ±60px, so its bottom edge roams — an overlay that ends at a fixed y would
       let that hard edge slide out from under the fade as you scroll (visible as a
       horizontal line in the gutters). A % mask travels with the image, so the edge
       can never appear. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 88%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 88%);
  }
  /* Darken the very top so the section never hard-cuts straight into a photo
     (on the program pages .pricing sits directly under the hero video). */
  .pricing-bg::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 760px;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      var(--black) 0,
      rgba(8,8,8,0.45) 300px,
      rgba(8,8,8,0) 760px
    );
  }
  .pricing .container { position: relative; z-index: 1; }
  .pricing-head {
    text-align: center;
    margin-bottom: 72px;
    position: relative;
    z-index: 2;            /* keep the title above the parallax bg / any section overlap */
  }
  .pricing-head .eyebrow { justify-content: center; margin-bottom: 20px; }
  .pricing-heading {
    font-family: var(--font-d);
    font-size: clamp(60px, 5vw, 72px);
    line-height: 0.95;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
  }
  .pricing-note {
    max-width: none;
    white-space: nowrap;
    margin: 16px auto 0;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255,255,255,0.38);
    text-align: center;
  }
  @media (max-width: 820px) {
    .pricing-note { white-space: normal; max-width: 540px; }
  }
  .pricing-sub {
    font-size: 14px;
    color: var(--gray);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.7;
  }

  .pricing-grid-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
  }
  .pricing-grid-row.row-3 { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid-row.row-2 { grid-template-columns: repeat(2, 1fr); max-width: 830px; margin-left: auto; margin-right: auto; }
  /* Side-by-side camp cards share row tracks so header, dates, prices,
     and CTA line up across both cards. Falls back to independent flex
     columns where subgrid isn't supported. */
  @media (min-width: 861px) {
    @supports (grid-template-rows: subgrid) {
      .pricing-grid-row.row-2 { grid-template-rows: repeat(4, auto); }
      .pricing-grid-row.row-2 > .program-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
      }
    }
  }
  .pricing-grid-row:last-child { margin-bottom: 0; }
  .price-card { min-height: 420px; }
  .price-card-img {
    width: calc(100% + 80px);
    height: 220px;
    margin: -48px -40px 32px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    flex-shrink: 0;
  }
  .price-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    transition: transform 0.6s var(--ease);
  }
  .price-card:hover .price-card-img img { transform: scale(1.04); }
  .price-card.featured .price-card-img img { filter: brightness(0.75); }

  .price-card {
    background: var(--card);
    border-radius: 24px;
    padding: 48px 40px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
  }
  .price-card:hover { border-color: rgba(255,255,255,0.2); }
  .price-card.featured {
    background: var(--orange);
    border-color: transparent;
  }
  .price-card.featured:hover {
    box-shadow: 0 24px 80px rgba(255,98,0,0.3);
    border-color: transparent;
  }
  .featured-badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    color: var(--black);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .price-plan {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 12px;
  }
  .price-card.featured .price-plan { color: rgba(255,255,255,0.8); }
  .price-amount {
    font-family: var(--font-d);
    font-size: 64px;
    line-height: 1;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
  }
  .price-period {
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
  }
  .price-card.featured .price-period { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.2); }
  .price-desc {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.55);
    margin-bottom: 28px;
    flex: 1;
  }
  .price-card.featured .price-desc { color: rgba(255,255,255,0.8); }
  .price-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
  }
  .price-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
  }
  .price-card.featured .price-feature { color: rgba(255,255,255,0.9); }
  .price-feature-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--orange);
    flex-shrink: 0;
  }
  .price-card.featured .price-feature-dot { background: var(--white); }
  .price-cta {
    display: block;
    text-align: center;
    padding: 15px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 8px;
    transition: background 0.2s, transform 0.18s;
    background: var(--black);
    color: var(--white);
  }
  .price-card.featured .price-cta {
    background: var(--white);
    color: var(--black);
  }
  .price-cta:hover { transform: translateY(-2px); }

  /* ---- Schedule card (full-width, two-column schedule layout) ---- */
  .schedule-card {
    background: rgba(255,255,255,0.03);
    border-radius: 24px;
    border: 1px solid var(--border);
    padding: 40px 48px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
  }
  .schedule-card:hover { border-color: rgba(255,255,255,0.18); }
  .schedule-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
  }
  .schedule-title-group {}
  .schedule-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
  }
  .eyebrow-bball { color: var(--orange); }
  .eyebrow-art { color: #22C55E; }
  .schedule-title {
    font-family: var(--font-d);
    font-size: 52px;
    line-height: 1;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
  }
  .schedule-dates {
    font-size: 12px;
    color: var(--gray);
    letter-spacing: 0.06em;
  }
  .schedule-pricing {
    display: flex;
    gap: 24px;
    align-items: flex-end;
  }
  .schedule-price-item {
    text-align: center;
  }
  .schedule-price-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 4px;
  }
  .schedule-price-amount {
    font-family: var(--font-d);
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .schedule-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .schedule-col-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .schedule-col-head-line {
    flex: 1;
    height: 1px;
    background: var(--border);
  }
  .schedule-col-head.bball { color: var(--orange); }
  .schedule-col-head.bball .schedule-col-head-line { background: rgba(255,98,0,0.3); }
  .schedule-col-head.art { color: #22C55E; }
  .schedule-col-head.art .schedule-col-head-line { background: rgba(34,197,94,0.3); }
  .schedule-day-group { margin-bottom: 20px; }
  .schedule-day-group:last-child { margin-bottom: 0; }
  .schedule-day-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 10px;
  }
  .schedule-slot {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.75);
    margin-bottom: 5px;
  }
  .schedule-slot:last-child { margin-bottom: 0; }
  .schedule-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
  }
  .bball .schedule-dot, .bball-dot { background: var(--orange); }
  .art .schedule-dot, .art-dot { background: #22C55E; }
  .slot-time {
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .slot-level {
    color: rgba(255,255,255,0.4);
    font-size: 11.5px;
  }
  .schedule-cta {
    display: inline-block;
    padding: 14px 36px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--orange), #22C55E);
    color: var(--white);
    transition: transform 0.18s var(--ease), box-shadow 0.25s;
  }
  .schedule-cta:hover {
    transform: translateY(-2px);
    box-shadow: -10px 10px 26px rgba(255,98,0,0.4), 10px 10px 26px rgba(34,197,94,0.4);
  }
  .schedule-cta:active { transform: translateY(0) scale(0.97); }
  /* Season-ended card state (class applied by JS): months stay, exact
     dates hide, Register Now swaps for the registration-opens note */
  .season-ended .sd-exact { display: none; }
  .schedule-reg-note {
    display: none;
    padding: 10px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.6;
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.6);
    text-align: center;
  }
  /* all three action states live in one fixed-height slot on their own row
     below the prices — buttons keep their natural size, yet every card's
     schedule lines up because the slot reserves equal height */
  .schedule-action {
    flex: 1 0 100%;
    width: 100%;
    margin-top: 20px;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .schedule-action .schedule-join-note,
  .schedule-action .schedule-reg-note { align-self: stretch; }
  /* Register-open state: separate Basketball (orange) and Art (green)
     registration buttons, since a training card covers both disciplines */
  .schedule-reg-btns { display: flex; flex-direction: column; align-self: stretch; }
  .reg-btn-row { display: flex; gap: 8px; }
  .reg-btn {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    border-radius: 8px;
    color: #fff;
    transition: transform 0.18s var(--ease), box-shadow 0.25s;
  }
  .reg-btn.bball { background: var(--orange); }
  .reg-btn.art { background: #22C55E; }
  .reg-btn.both { background: linear-gradient(90deg, var(--orange), #22C55E); }
  /* priced register columns: price sits directly above each button */
  .reg-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
  .reg-col .reg-btn { flex: none; }
  .reg-price { font-family: var(--font-d); font-size: 22px; line-height: 1; letter-spacing: 0.03em; color: #fff; text-align: center; }
  .reg-pw { font-family: var(--font-b); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.4); margin-left: 2px; }
  .reg-btn.bball:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,98,0,0.45); }
  .reg-btn.art:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(34,197,94,0.45); }
  .reg-btn.both:hover { transform: translateY(-2px); box-shadow: -6px 8px 20px rgba(255,98,0,0.4), 6px 8px 20px rgba(34,197,94,0.4); }
  /* on phones the day/week camps' 3 buttons stack full-width so the long
     "Basketball & Art" label stays on one line; extra gap between the
     price+button pairs makes it clear which price goes with which button */
  @media (max-width: 540px) {
    .program-card .reg-btn-row { flex-direction: column; gap: 22px; }
  }
  .season-ended .schedule-reg-btns { display: none; }
  .season-ended .schedule-reg-note { display: block; }
  /* Collapse the bulky weekly-schedule detail ONLY when the card is neither open
     for registration nor in session (the "Registration Opens…" / ended state).
     Register Now and In Session both keep the full schedule.
     !important is required to beat the div's inline display:flex. */
  .season-ended .schedule-detail { display: none !important; }
  .schedule-join-note { display: none; }
  .season-live .schedule-reg-btns,
  .season-live .schedule-reg-note { display: none; }
  .season-live .schedule-join-note { display: flex; flex-direction: column; }
  /* keep the dates on one line in the 3-up layout so every card's header is
     the same height and the schedules line up (wraps freely once stacked) */
  @media (min-width: 961px) {
    .schedule-grid-3 .schedule-dates { white-space: nowrap; }
  }

  /* Shared in-session contact group (training + summer camp): an "in session"
     label over three outline buttons — Call / Text / Email — that fill with
     the orange-green gradient on hover. Outline by default so it reads
     differently from the filled Register Now button. */
  .join-label {
    display: block;
    font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 8px;
  }
  .join-btns { display: flex; gap: 8px; }
  .join-btn {
    position: relative;
    z-index: 0;
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    border-radius: 8px;
    color: #fff;
    background: transparent;
    transition: transform 0.18s var(--ease), box-shadow 0.25s;
  }
  /* orange-green gradient ring (border) via masked pseudo — transparent
     center, matches the Basketball & Art party button; on hover the mask
     is dropped so the gradient fills the whole button */
  .join-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(90deg, var(--orange), #22C55E);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }
  .join-btn:hover {
    transform: translateY(-2px);
    box-shadow: -6px 8px 20px rgba(255,98,0,0.35), 6px 8px 20px rgba(34,197,94,0.35);
  }
  .join-btn:hover::before {
    -webkit-mask: none;
            mask: none;
  }

  /* ---- Group wrapper cards ---- */
  .group-card {
    border-radius: 24px;
    border: 1px solid var(--border);
    padding: 40px 48px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .training-group { background: #080808; }
  .camps-group    { background: #080808; }
  .group-card-header {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
  }
  @media (max-width: 860px) {
    .group-card { padding: 28px 20px; }
  }

  /* ---- Summer Camp card ---- */
  #basketball-art, #basketball, #art,
  #programs-training, #programs-day-camps, #programs-week-camps, #programs-summer-camps, #programs-parties,
  #pricing-schedule-training, #pricing-schedule-training-fall, #pricing-schedule-training-spring, #pricing-schedule-training-summer, #schedule-camps, #schedule-camps-basketball, #schedule-camps-art, #schedule-camps-basketball-art, #pricing-day-week-camps, #pricing-day-camps, #pricing-week-camps, #pricing-summer-camp, #pricing-summer-camp-basketball, #pricing-summer-camp-art, #pricing-summer-camp-basketball-art, #pricing-parties, #pricing-parties-basketball, #pricing-parties-art, #pricing-parties-basketball-art { scroll-margin-top: 90px; }
  /* the programs section carries 120px of internal top padding — a negative
     scroll margin skips most of it so deep links land with the "What We Offer"
     eyebrow just below the nav (heading + cards follow) */
  #programs { scroll-margin-top: -36px; }
  /* gallery has no internal top padding, so it needs the standard offset to keep
     its heading clear of the fixed 72px nav when deep-linked */
  #gallery { scroll-margin-top: 90px; }
  /* reviews already carries 60px top padding, so a smaller offset lands its
     heading at the same clean spot below the 72px nav */
  #reviews { scroll-margin-top: 30px; }
  .summer-camp-card {
    background: #080808;
    border-radius: 24px;
    border: 1px solid var(--border);
    padding: 40px 48px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
  }
  .summer-camp-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--border);
  }
  .summer-weeks-year {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: -4px;
  }
  .summer-weeks-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .summer-week-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .swi-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
  }
  .swi-dates {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
  }
  @media (max-width: 860px) {
    .summer-weeks-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .summer-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }
  .summer-option {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .summer-option.featured {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
  }
  .summer-option-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .summer-option-head.bball { color: var(--orange); }
  .summer-option-head.art { color: #22C55E; }
  .summer-option-head.both { color: var(--orange); }
  .summer-option-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  }
  .summer-option-dot.bball { background: var(--orange); }
  .summer-option-dot.art { background: #22C55E; }
  .summer-option-dot.both { background: linear-gradient(90deg, var(--orange), #22C55E); }
  .summer-price-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    margin: 4px 0;
  }
  .spt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
  }
  .spt-row.highlight {
    background: rgba(255,255,255,0.07);
  }
  .spt-weeks {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
  }
  .spt-row.highlight .spt-weeks {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
  }
  .spt-price {
    font-family: var(--font-d);
    font-size: 18px;
    letter-spacing: 0.04em;
    color: #fff;
  }
  .spt-pw {
    font-family: var(--font-b);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.4);
    margin-left: 2px;
  }
  .summer-option-features {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }
  .summer-option-features li {
    font-size: 12.5px;
    color: rgba(255,255,255,0.55);
    padding-left: 14px;
    position: relative;
    line-height: 1.5;
  }
  .summer-option-features li::before {
    content: '\2013';
    position: absolute;
    left: 0;
    color: rgba(255,255,255,0.25);
  }
  /* ---- Party card ---- */
  .party-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .party-option {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .party-option-featured {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
  }
  .party-option-head {
    font-family: var(--font-d);
    font-size: 30px;
    letter-spacing: 0.06em;
    color: #fff;
  }
  .party-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .party-price {
    font-family: var(--font-d);
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
  }
  .party-duration {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }
  .party-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
  }
  .party-features li {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    padding-left: 14px;
    position: relative;
  }
  .party-features li::before {
    content: '\2013';
    position: absolute;
    left: 0;
    color: rgba(255,255,255,0.3);
  }
  .email-copied-tip {
    position: fixed;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #080808;
    background: #fff;
    border-radius: 6px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
  }
  .email-copied-tip.show { opacity: 1; transform: translateY(0); }
  .summer-cta.party-cta {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.7);
    transition: background 0.25s, color 0.25s, transform 0.25s;
  }
  .summer-cta.party-cta:hover {
    background: #fff;
    color: #080808;
    transform: translateY(-2px);
  }
  /* Discipline-colored outlines for the party CTAs */
  .summer-cta.party-cta.party-cta-bball { border-color: var(--orange); }
  .summer-cta.party-cta.party-cta-bball:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    box-shadow: 0 10px 26px rgba(255,98,0,0.4);
  }
  .summer-cta.party-cta.party-cta-art { border-color: #22C55E; }
  .summer-cta.party-cta.party-cta-art:hover {
    background: #22C55E;
    border-color: #22C55E;
    color: #fff;
    box-shadow: 0 10px 26px rgba(34,197,94,0.4);
  }
  .summer-cta.party-cta.party-cta-both {
    border-color: transparent;
    /* inner fill matches the featured card bg; outer layer paints the border ring */
    background: linear-gradient(#141414, #141414) padding-box,
                linear-gradient(90deg, var(--orange), #22C55E) border-box;
  }
  .summer-cta.party-cta.party-cta-both:hover {
    background: linear-gradient(90deg, var(--orange), #22C55E) border-box;
    color: #fff;
    box-shadow: -10px 10px 26px rgba(255,98,0,0.4), 10px 10px 26px rgba(34,197,94,0.4);
  }
  .party-btn-row { display: flex; gap: 8px; margin-top: 8px; }
  .party-btn-row .party-cta { flex: 1; margin-top: 0; }
  .party-note {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
  }

  /* PARTY PACKAGE CARDS — matched to the dedicated /parties page */
  .pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .pkg { background:var(--dark); border:1px solid var(--border); border-radius:20px; padding:28px; display:flex; flex-direction:column; }
  .pkg.featured { position:relative; border-color:transparent; background:linear-gradient(var(--dark),var(--dark)) padding-box, linear-gradient(135deg,var(--orange),var(--art)) border-box; border:1.5px solid transparent; }
  /* Badge floats on the top edge so it doesn't push the title down (keeps all 3 titles aligned) */
  .pkg.featured .pkg-tag { position:absolute; top:-11px; left:24px; margin-bottom:0; }
  .pkg-tag { font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--black); background:linear-gradient(90deg,var(--orange),var(--art)); align-self:flex-start; padding:5px 12px; border-radius:20px; margin-bottom:16px; }
  .pkg-name { font-family:var(--font-d); font-size:34px; line-height:1; margin-bottom:4px; color:#fff; }
  .pkg-name.bball { color:var(--orange); } .pkg-name.art { color:var(--art); }
  .pkg-name .amp { color:rgba(255,255,255,0.4); } .pkg-name .g { color:var(--art); }
  .pkg-meta { font-size:12px; color:var(--gray); margin-bottom:20px; }
  .pkg-price-row { display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:18px; }
  .pkg-price .pp-num { font-family:var(--font-d); font-size:38px; line-height:1; color:#fff; }
  .pkg-price .pp-lbl { font-size:11px; color:var(--gray); letter-spacing:0.08em; text-transform:uppercase; }
  .pkg-list { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .pkg-list li { font-size:12px; line-height:1.5; color:rgba(255,255,255,0.8); padding-left:20px; position:relative; }
  .pkg-list li::before { content:'\2713'; position:absolute; left:0; font-weight:700; }
  .pkg.bb .pkg-list li::before { color:var(--orange); }
  .pkg.ar .pkg-list li::before { color:var(--art); }
  .pkg.both .pkg-list li::before { background:linear-gradient(90deg,var(--orange),var(--art)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
  .pkg-note { font-size:12.5px; color:rgba(255,255,255,0.78); font-weight:500; margin:2px 0 12px; }
  .pkg-note .np-tag { display:block; margin-top:4px; }
  .pkg-btn-row { display:flex; gap:8px; margin-top:4px; }
  /* Hollow (outlined) buttons, colored by discipline; fill in on hover */
  .pkg-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 16px; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border-radius:8px; color:#fff; background:transparent; transition:transform 0.2s var(--ease), background 0.25s, color 0.25s, box-shadow 0.3s; }
  .pkg-btn:hover { transform:translateY(-2px); }
  .pkg.bb .pkg-btn { border:1.5px solid var(--orange); color:#fff; }
  .pkg.ar .pkg-btn { border:1.5px solid var(--art); color:#fff; }
  .pkg.both .pkg-btn { border:1.5px solid transparent; color:#fff; background:linear-gradient(var(--dark),var(--dark)) padding-box, linear-gradient(90deg,var(--orange),var(--art)) border-box; }
  .pkg.bb .pkg-btn:hover { background:var(--orange); color:#fff; box-shadow:0 10px 26px rgba(255,98,0,0.35); }
  .pkg.ar .pkg-btn:hover { background:var(--art); color:#fff; box-shadow:0 10px 26px rgba(34,197,94,0.35); }
  .pkg.both .pkg-btn:hover { background:linear-gradient(90deg,var(--orange),var(--art)) border-box; border-color:transparent; color:#fff; }

  /* Phone / email links — glow on hover so they read as clickable */
  .contact-link {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.25s, text-shadow 0.25s;
  }
  .contact-link:hover {
    color: #fff;
    text-shadow: 0 0 14px rgba(255,255,255,0.8);
  }

  /* ---- Camp overview layout ---- */
  .camp-overview-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .camp-overview-sc {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .camp-overview-sc-label { display: flex; flex-direction: column; gap: 4px; }
  .camp-overview-sc-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 860px) {
    .camp-overview-row2 { grid-template-columns: 1fr; }
    .camp-overview-sc-cols { grid-template-columns: 1fr; }
  }

  /* ---- Unified card section divider ---- */
  .unified-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0;
  }
  .unified-divider::before,
  .unified-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }
  .unified-divider-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
  }

  /* ---- Option comparison banners ---- */
  .option-banner {
    text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: rgba(255,255,255,0.22); padding: 36px 0 10px;
  }

  /* ---- Option 1: Level-first cards ---- */
  .level-card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 18px; }
  .level-card-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 12px; }
  .level-item {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; padding: 16px; display: flex; flex-direction: column;
  }
  .lbp { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; width: fit-content; }
  .lbp-bball { background: rgba(255,98,0,.15); color: var(--orange); }
  .lbp-art   { background: rgba(34,197,94,.15); color: #22C55E; }
  .li-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; }
  .li-age  { font-size: 11px; color: rgba(255,255,255,.35); margin-bottom: 8px; }
  .li-desc { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.5; margin-bottom: 12px; flex: 1; }
  .li-days { font-size: 11px; color: rgba(255,255,255,.3); margin-bottom: 10px; }
  .li-prices { display: flex; gap: 8px; }
  .li-price-chip { flex: 1; text-align: center; padding: 7px 4px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; }
  .lipc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.3); }
  .lipc-val   { font-size: 15px; font-weight: 700; color: #fff; }
  .opt1-section-head { font-size: 11px; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; padding-bottom: 6px; margin-top: 20px;
    border-bottom: 1px solid; }
  .opt1-section-head.bball { color: var(--orange); border-color: rgba(255,98,0,.2); }
  .opt1-section-head.art   { color: #22C55E; border-color: rgba(34,197,94,.2); }

  /* ---- Option 2: Day tabs ---- */
  .day-tabs-bar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
  .day-tab-btn { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 7px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
    background: transparent; color: rgba(255,255,255,.35); cursor: pointer; }
  .day-tab-btn.active { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
  .day-tab-pane { display: none; }
  .day-tab-pane.active { display: block; }
  .spl { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    padding-bottom: 6px; margin-bottom: 4px; margin-top: 14px; border-bottom: 1px solid; }
  .spl:first-child { margin-top: 0; }
  .spl.bball { color: var(--orange); border-color: rgba(255,98,0,.25); }
  .spl.art   { color: #22C55E; border-color: rgba(34,197,94,.25); }
  .se { display: flex; align-items: center; gap: 12px; padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.04); }
  .se:last-child { border-bottom: none; }
  .se-time  { font-size: 11px; color: rgba(255,255,255,.65); min-width: 100px; font-variant-numeric: tabular-nums; }
  .se-level { font-size: 13px; font-weight: 700; color: #fff; flex: 1; }
  .se-detail{ display: none; }
  .level-key { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border); margin-top: 4px; }
  .level-key-item { font-size: 14px; color: rgba(255,255,255,.5); }
  .level-key-item strong { font-weight: 700; color: rgba(255,255,255,.85); margin-right: 5px; }
  .hr-tag { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing:.03em; }
  .hr-tag-1 { background: rgba(255,255,255,.08); color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.1); }
  .hr-tag-2 { background: rgba(255,255,255,.18); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.22); }

  /* ---- Option 3: Accordion ---- */
  .acc-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 18px; }
  .acc-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; overflow: hidden; }
  .acc-head { padding: 18px 18px 14px; cursor: pointer; }
  .acc-head-top { display: flex; justify-content: space-between; align-items: flex-start; }
  .acc-title { font-size: 15px; font-weight: 700; color: #fff; margin: 6px 0 3px; }
  .acc-age  { font-size: 11px; color: rgba(255,255,255,.35); margin-bottom: 8px; }
  .acc-desc { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.5; margin-bottom: 10px; }
  .acc-prices { display: flex; gap: 8px; margin-bottom: 10px; }
  .acc-price-chip { padding: 5px 12px; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08); border-radius: 7px; font-size: 12px; color: rgba(255,255,255,.6); }
  .acc-price-chip strong { color: #fff; font-weight: 700; }
  .acc-toggle-btn { font-size: 11px; color: rgba(255,255,255,.35); display: flex; align-items: center;
    gap: 5px; background: none; border: none; cursor: pointer; padding: 0; }
  .acc-chevron { transition: transform .2s ease; display: inline-block; }
  .acc-card.open .acc-chevron { transform: rotate(180deg); }
  .acc-body { max-height: 0; overflow: hidden; transition: max-height .35s ease;
    border-top: 0px solid rgba(255,255,255,.08); }
  .acc-card.open .acc-body { max-height: 900px; border-top-width: 1px; }
  .acc-body-inner { padding: 16px 18px; }

  @media (max-width: 960px) {
    .level-card-grid { grid-template-columns: repeat(2,1fr); }
    .acc-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .level-card-grid, .level-card-grid-2 { grid-template-columns: 1fr; }
  }

  /* ---- Daily schedule slot cards ---- */
  .ds-slots { display: flex; flex-direction: column; gap: 6px; flex: 1; }
  .ds-slot {
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .bball-slot { background: rgba(255,98,0,0.08); border: 1px solid rgba(255,98,0,0.18); }
  .art-slot   { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.18); }
  .break-slot { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
  .ds-time { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
  .bball-slot .ds-name { color: var(--orange); }
  .art-slot   .ds-name { color: #22C55E; }
  .break-slot .ds-name { color: rgba(255,255,255,0.5); }
  .ds-name { font-size: 13px; font-weight: 700; }
  .ds-desc { font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.4; }

  /* ---- Camp description cards ---- */
  .camp-desc-card {
    background: #080808;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .camp-desc-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .camp-desc-title {
    font-family: var(--font-d);
    font-size: 32px;
    letter-spacing: 0.04em;
    color: #fff;
    line-height: 1;
  }
  .camp-desc-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: -6px;
  }
  .camp-desc-body {
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255,255,255,0.6);
    margin: 0;
  }
  .camp-desc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
  }
  .camp-desc-list li {
    font-size: 12.5px;
    color: rgba(255,255,255,0.75);
    padding-left: 14px;
    position: relative;
  }
  .camp-desc-list li::before {
    content: '\2013';
    position: absolute;
    left: 0;
    color: rgba(255,255,255,0.3);
  }
  .camp-desc-cta {
    margin-top: 4px;
  }
  @media (max-width: 860px) {
    .party-options { grid-template-columns: 1fr; }
    .pkg-grid { grid-template-columns: 1fr; }
  }
  .summer-cta {
    display: block;
    text-align: center;
    margin-top: 8px;
    padding: 12px 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 8px;
    color: #fff;
    transition: opacity 0.2s, transform 0.18s;
  }
  .summer-cta { transition: transform 0.18s var(--ease), box-shadow 0.25s, background 0.25s, color 0.25s; }
  .summer-cta:hover { transform: translateY(-2px); }
  .summer-cta:active { transform: translateY(0) scale(0.97); }
  .bball-cta:hover { box-shadow: 0 10px 26px rgba(255,98,0,0.4); }
  .art-cta:hover { box-shadow: 0 10px 26px rgba(34,197,94,0.4); }
  .both-cta:hover { box-shadow: -10px 10px 26px rgba(255,98,0,0.4), 10px 10px 26px rgba(34,197,94,0.4); }
  .party-cta:hover { box-shadow: 0 10px 26px rgba(255,255,255,0.15); }
  .bball-cta { background: var(--orange); }
  .art-cta { background: #22C55E; }
  .both-cta { background: linear-gradient(90deg, var(--orange), #22C55E); }
  @media (max-width: 860px) {
    .summer-options { grid-template-columns: 1fr; }
    .summer-camp-card { padding: 32px 24px; }
  }

  /* ---- Program cards (Day Camp / Week Camp) ---- */
  .program-card {
    display: flex;
    flex-direction: column;
    background: #080808;
    border-radius: 24px;
    border: 1px solid var(--border);
    padding: 36px 40px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    transition: border-color 0.3s;
  }
  .program-card:hover { border-color: rgba(255,255,255,0.18); }
  .program-card-header {}
  .program-card-title {
    font-family: var(--font-d);
    font-size: 48px;
    line-height: 1;
    letter-spacing: 0.02em;
    margin: 8px 0 6px;
  }
  .program-card-meta {
    font-size: 12px;
    color: var(--gray);
    letter-spacing: 0.06em;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .program-card-meta .dot-sep { color: rgba(255,255,255,0.2); }
  .program-section {
    border-top: 1px solid var(--border);
    padding-top: 20px;
  }
  .program-section-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .program-section-head::after {
    content: '';
    flex: 1;
    height: 1px;
  }
  .program-section-head.bball { color: var(--orange); }
  .program-section-head.bball::after { background: rgba(255,98,0,0.25); }
  .program-section-head.art { color: #22C55E; }
  .program-section-head.art::after { background: rgba(34,197,94,0.25); }
  .program-section-head.both { color: #fff; }
  .program-section-head.both::after { background: rgba(255,255,255,0.12); }
  .program-slot {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 12px;
    margin-bottom: 10px;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .program-slot:last-child { margin-bottom: 0; }
  .program-slot-time {
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    padding-top: 1px;
  }
  .program-slot-name {
    font-weight: 700;
    color: rgba(255,255,255,0.9);
  }
  .program-slot-desc {
    color: rgba(255,255,255,0.4);
    font-size: 11.5px;
    line-height: 1.55;
  }
  .break-dates { display: flex; flex-direction: column; gap: 10px; }
  .break-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    border: 1px solid var(--border);
    min-height: 58px;
    justify-content: center;
  }
  .break-item-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
  }
  .break-item-dates {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
  }
  /* Daily Schedule Reference Card */
  .daily-ref-card {
    background: var(--card);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 32px 40px 36px;
    margin-bottom: 24px;
  }
  .daily-ref-label {
    font-family: var(--font-d);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: rgba(255,255,255,0.3);
    margin-bottom: 6px;
  }
  .daily-ref-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    margin: 0 0 22px;
    line-height: 1.55;
  }
  .daily-ref-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
  .daily-ref-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .daily-ref-tab:hover { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); }
  .daily-ref-tab.active { border-color: rgba(255,255,255,0.25); color: #fff; background: rgba(255,255,255,0.06); }
  .daily-ref-tab.active[data-tab="bball"] { border-color: rgba(255,98,0,0.5); background: rgba(255,98,0,0.08); color: var(--orange); }
  .daily-ref-tab.active[data-tab="art"] { border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.08); color: #22C55E; }
  .tab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .tab-dot.bball { background: var(--orange); }
  .tab-dot.art { background: #22C55E; }
  .tab-dot.both { background: #fff; }
  .daily-ref-body { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 20px; }
  .daily-ref-pane { display: none; }
  .daily-ref-pane.active { display: block; }
  .both-bball .program-slot-name { color: var(--orange); }
  .both-art .program-slot-name { color: #22C55E; }
  #tab-bball .program-slot-name { color: var(--orange); }
  #tab-art .program-slot-name { color: #22C55E; }
  .both-bball .program-slot-time, .both-art .program-slot-time,
  #tab-bball .program-slot-time, #tab-art .program-slot-time,
  #tab-both .program-slot-time { color: rgba(255,255,255,0.85); }
  .daily-ref-applies {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .applies-chip {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
  }
  .program-section-price {
    font-family: var(--font-d);
    font-size: 22px;
    letter-spacing: 0.02em;
    margin-left: auto;
    flex-shrink: 0;
  }
  .program-section-head.bball .program-section-price { color: var(--orange); }
  .program-section-head.art .program-section-price { color: #22C55E; }
  .program-section-head.both .program-section-price { color: rgba(255,255,255,0.9); }
  .day-camp-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .day-camp-date-chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border: 1px solid var(--border);
    flex: 1;
    min-width: 120px;
    min-height: 58px;
    justify-content: center;
  }
  .day-camp-date-holiday {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
  }
  .day-camp-date-val {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
  }
  /* Past-date state — chip stays visible, dimmed with a red PAST tag */
  .date-past {
    opacity: 0.55;
    border-color: rgba(248,113,113,0.3);
  }
  .date-past .day-camp-date-val,
  .date-past .break-item-dates,
  .date-past .swi-dates {
    text-decoration: line-through;
    color: rgba(255,255,255,0.5);
  }
  .past-badge {
    display: inline-block; /* keeps the parent's line-through off the tag */
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F87171;
    border: 1px solid rgba(248,113,113,0.4);
    border-radius: 4px;
    vertical-align: middle;
  }
  /* Future-year chips — registration hasn't opened yet (added by JS).
     Mini version of the dashed Registration Opens pill used on the
     training and summer camp cards. */
  .chip-reg-note {
    margin-top: 6px;
    padding: 4px 6px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255,255,255,0.6);
    border: 1px dashed rgba(255,255,255,0.3);
    border-radius: 6px;
  }
  /* Day/Week camp buttons close when no camp is registerable yet (added by JS):
     hide the Register button row, show one dashed "Registration Opens" note. */
  .camp-reg-closed .reg-btn-row { display: none; }
  /* once every day/week camp in the list has passed, collapse the whole list
     (the "Upcoming …" heading + all the chips) to save scroll space */
  .camp-collapsed .program-section { display: none; }
  /* Keep the "Registration Opens" note at its natural height instead of letting
     it stretch to fill the collapsed card (the card itself stays full height). */
  .camp-reg-note { align-self: start; }
  .camp-reg-note {
    margin-top: 16px;
    padding: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255,255,255,0.6);
    border: 1px dashed rgba(255,255,255,0.3);
    border-radius: 10px;
  }
  /* week-camp chip once its first day passes: self-registration is closed,
     so it shows an in-session call/text prompt until its last day (then Past) */
  .chip-session-note {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
  }
  .chip-session-label {
    display: block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255,255,255,0.5);
    margin-bottom: 5px;
  }
  .chip-session-btns { display: flex; gap: 5px; }
  .chip-btn {
    position: relative;
    z-index: 0;
    flex: 1;
    padding: 10px 6px; /* match .reg-btn height (~32px) — never taller than Register */
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    background: transparent;
    transition: transform 0.15s, box-shadow 0.2s;
  }
  /* orange-green gradient ring, matching the Call/Text buttons elsewhere */
  .chip-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(90deg, var(--orange), #22C55E);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }
  .chip-btn:hover { transform: translateY(-1px); }
  .chip-btn:hover::before { -webkit-mask: none; mask: none; }
  /* Summer camp cards while registration is closed (class added by JS) */
  .summer-reg-note {
    display: none;
    margin-top: 8px;
    padding: 12px 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.6);
  }
  .reg-closed .summer-cta, .coming-soon .summer-cta { display: none; }
  .reg-closed .summer-reg-note, .coming-soon .summer-reg-note { display: block; }
  /* Once summer camp is over for the year, minimize the whole section to just the
     title + a "Registration Opens January 1" note (body.summer-over added by JS the
     day after the last day) — same one-line collapse as day/week camps. Hides the
     year label, week chips, and the entire Basketball/Art/Both schedule + prices. */
  /* Once the camp year ends (day after the last day) the whole summer block
     collapses to its title + "Registration Opens January 1" — there's no reason to
     show price cards for something nobody can register for yet. Same on every page.
     It reopens by itself on Jan 1. */
  body.summer-over .summer-weeks-year,
  body.summer-over .summer-weeks-grid,
  body.summer-over .summer-camp-options { display: none; }
  /* On /summer-camp the prices sit under their own "Summer Camp" divider, which
     would otherwise dangle over an empty space once the prices above hide. The home
     page keeps its divider — there it IS the section title, not a sub-header. */
  body[data-page="summer-camp"].summer-over #pricing-summer-camp { display: none; }
  /* Summer Camp underway: single course, self-registration closed once day 1
     passes -> Register Now swaps for a gradient "call to join" button */
  .summer-join-note { display: none; margin-top: 12px; }
  .reg-live .summer-cta { display: none; }
  .reg-live .summer-join-note { display: block; }
  /* Coming-soon cards keep their week tiers but grayed out; JS masks the
     prices with dashes so the real numbers stay in the markup */
  .coming-soon .summer-price-table { opacity: 0.3; }
  .program-card .schedule-cta { margin-top: auto; text-align: center; }
  @media (max-width: 860px) {
    .program-card { padding: 28px 24px; }
    .program-slot { grid-template-columns: 110px 1fr; }
  }

  /* 3-up grid for schedule cards */
  .schedule-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
  }
  .schedule-grid-3 .schedule-card {
    padding: 28px 24px;
  }
  .schedule-grid-3 .schedule-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .schedule-grid-3 .schedule-title { font-size: 36px; }
  .schedule-grid-3 .schedule-pricing {
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
  }
  .schedule-grid-3 .schedule-price-amount { font-size: 32px; }
  .schedule-grid-3 .schedule-body { grid-template-columns: 1fr; gap: 24px; }
  .schedule-grid-3 .schedule-slot { font-size: 11.5px; }
  .schedule-grid-3 .slot-time { font-size: 11.5px; }
  .schedule-grid-3 .schedule-cta { padding: 11px 20px; font-size: 11px; }

  @media (max-width: 960px) {
    .schedule-grid-3 { grid-template-columns: 1fr; }
  }

  @media (max-width: 860px) {
    .schedule-card { padding: 32px 24px; }
    .schedule-header { flex-direction: column; gap: 20px; }
    .schedule-title { font-size: 40px; }
    .schedule-body { grid-template-columns: 1fr; gap: 28px; }
  }

  @media (max-width: 860px) {
    .pricing-grid-row.row-3 { grid-template-columns: 1fr; }
    .pricing-grid-row.row-2 { grid-template-columns: 1fr; max-width: none; }
    .price-card { padding: 40px 28px; min-height: unset; }
  }
  @media (max-width: 540px) {
    .pricing-grid-row.row-3,
    .pricing-grid-row.row-2 { grid-template-columns: 1fr; gap: 16px; }
    /* narrow the time column so level names sit further left and get
       enough width to avoid wrapping mid-name */
    .schedule-grid-3 .se { gap: 8px; }
    .schedule-grid-3 .se-time { min-width: 66px; font-size: 10px; }
    .schedule-grid-3 .se-level { font-size: 12px; }
    .schedule-grid-3 .hr-tag { padding: 3px 6px; font-size: 10px; }
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     TESTIMONIALS
  -------------------------------------------------------------------------------------------------------------------------- */
  .testimonials {
    background: var(--black);
    padding: 44px 0 72px;
  }
  /* the parties group is the last thing before Reviews — drop its wasted bottom margin (all breakpoints) */
  #pricing-parties { margin-bottom: 0; }
  .test-head {
    margin-bottom: 64px;
  }
  .test-head .eyebrow { margin-bottom: 18px; }
  .test-heading {
    font-family: var(--font-d);
    font-size: clamp(40px, 4.5vw, 64px);
    line-height: 0.95;
    letter-spacing: 0.02em;
  }
  /* Google reviews overall bar */
  .g-overall-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 56px;
    flex-wrap: wrap;
  }
  .g-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .g-wordmark {
    font-size: 22px;
    font-weight: 500;
    color: var(--white);
    letter-spacing: -0.01em;
  }
  .g-wordmark span:nth-child(1) { color: #4285F4; }
  .g-wordmark span:nth-child(2) { color: #EA4335; }
  .g-wordmark span:nth-child(3) { color: #FBBC04; }
  .g-wordmark span:nth-child(4) { color: #4285F4; }
  .g-wordmark span:nth-child(5) { color: #34A853; }
  .g-wordmark span:nth-child(6) { color: #EA4335; }
  .g-divider { width: 1px; height: 28px; background: var(--border); }
  .g-score { font-family: var(--font-d); font-size: 42px; line-height: 1; color: var(--white); }
  .g-stars-row { display: flex; gap: 2px; margin: 4px 0 2px; }
  .g-star { width: 18px; height: 18px; fill: #FBBC04; }
  .g-count { font-size: 11px; color: var(--gray); letter-spacing: 0.05em; }
  .g-view-link {
    margin-left: auto;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--gray); text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
  }
  .g-view-link:hover { color: var(--white); border-color: var(--white); }

  /* Review marquee carousel */
  .reviews-marquee-wrap {
    overflow: hidden;
    margin: 0 -24px;
    /* fade edges */
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .test-grid {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: reviewScroll 65s linear infinite;
  }
  .reviews-marquee-wrap:hover .test-grid { animation-play-state: paused; }

  @keyframes reviewScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .test-card {
    background: var(--card);
    border-radius: 20px;
    padding: 28px 32px;
    border: 1px solid var(--border);
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s;
  }
  .test-card:hover { border-color: rgba(255,255,255,0.22); }

  /* Card top row: author + Google G */
  .tc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .tc-author { display: flex; align-items: center; gap: 12px; }
  .test-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    color: var(--white); flex-shrink: 0;
    text-transform: uppercase;
  }
  .test-name { font-size: 13px; font-weight: 600; color: var(--white); }
  .test-role { font-size: 11px; color: var(--gray); margin-top: 2px; }

  /* Google G icon */
  .tc-g { flex-shrink: 0; opacity: 0.7; }

  /* Stars + date */
  .tc-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .test-text {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.75);
    flex: 1;
  }

  /* Card with photo strip */
  .test-card-wide { width: 480px; }
  .tc-photos {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    border-radius: 8px;
    overflow: hidden;
  }
  .tc-photos img {
    flex: 1;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    filter: brightness(0.85);
    transition: filter 0.3s;
  }
  .tc-photos img:hover { filter: brightness(1); }

  @media (max-width: 580px) {
    .test-card { width: 300px; padding: 24px; }
    .test-card-wide { width: 340px; }
    .g-view-link { margin-left: 0; }
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     CTA BAND
  -------------------------------------------------------------------------------------------------------------------------- */
  .cta-band {
    position: relative;
    overflow: hidden;
    padding: 84px 0;
    text-align: center;
    background: var(--black);
  }
  .cta-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .cta-video video {
    position: absolute;
    top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;
    min-height: 100%; min-width: 177.78%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .cta-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: rgba(8,8,8,0.78);
  }
  .cta-content { position: relative; z-index: 2; }
  .cta-band .eyebrow { justify-content: center; margin-bottom: 24px; }
  .cta-heading {
    font-family: var(--font-d);
    font-size: clamp(56px, 8vw, 120px);
    line-height: 0.92;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
  }
  .cta-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    max-width: 380px;
    margin: 0 auto 40px;
    line-height: 1.7;
  }
  .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  /* --------------------------------------------------------------------------------------------------------------------------
     FOOTER
  -------------------------------------------------------------------------------------------------------------------------- */
  .footer {
    background: var(--black);
    padding: 80px 0 40px;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
  }
  .footer-brand img { height: 32px; filter: brightness(0) invert(1); margin-bottom: 20px; }
  .footer-tagline {
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray);
    margin-bottom: 24px;
  }
  .footer-socials { display: flex; gap: 12px; }
  .footer-social {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, background 0.2s;
  }
  .footer-social:hover {
    border-color: transparent;
    background:
      linear-gradient(105deg, rgba(255,98,0,0.14), rgba(34,197,94,0.14)) padding-box,
      linear-gradient(var(--black), var(--black)) padding-box,
      linear-gradient(105deg, var(--orange), #22C55E) border-box;
  }
  .footer-social svg { stroke: var(--gray); transition: stroke 0.2s; }
  .footer-social:hover svg { stroke: #fff; }

  .footer-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 20px;
  }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .footer-links a {
    font-size: 13px;
    color: var(--gray);
    transition: color 0.2s;
  }
  .footer-links a:hover { color: var(--white); }

  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  .footer-copy { font-size: 12px; color: var(--muted); }
  .footer-copy a { color: var(--muted); transition: color 0.2s; }
  .footer-copy a:hover { color: var(--gray); }

  @media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  }
  @media (max-width: 560px) {
    /* keep the link columns side by side (2-up) instead of fully stacked;
       the brand block spans the full width above them */
    .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     UTILITY
  -------------------------------------------------------------------------------------------------------------------------- */
  @media (max-width: 768px) {
    .container { padding: 0 20px; }
    .nav { padding: 0 20px; }
  }

  /* --------------------------------------------------------------------------------------------------------------------------
     ART TOKENS & ACCENTS
  -------------------------------------------------------------------------------------------------------------------------- */
  :root {
    --art:  #22C55E;
    --art2: #4ADE80;
    --art3: #DCFCE7; /* very light mint */
  }

  /* Art eyebrow variant */
  .eyebrow.art { color: var(--art); }
  .eyebrow.art::before { background: var(--art); }

  /* Art button */
  .btn-art { background: var(--art); color: var(--white); }
  .btn-art:hover { background: var(--art2); }

  @keyframes brushReveal {
    to { clip-path: inset(0 0% 0 0); }
  }

  /* ---- Enrollment TEST MODE (?enrolltest) — force every Register button visible
     so all 15 widgets can be opened regardless of the date-based reg gating ---- */
  body.enroll-test .schedule-reg-btns { display: flex !important; }
  body.enroll-test .summer-cta { display: block !important; }
  body.enroll-test .schedule-reg-note,
  body.enroll-test .schedule-join-note,
  body.enroll-test .summer-reg-note,
  body.enroll-test .summer-join-note { display: none !important; }

  /* ---- Enrollment popup (Mindbody widget opens in a modal) ---- */
  .enroll-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vh 16px;
    background: rgba(0,0,0,0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.25s var(--ease);
  }
  .enroll-backdrop.open { display: flex; opacity: 1; }
  body.enroll-lock { overflow: hidden; }
  .enroll-modal {
    width: 100%;
    max-width: 680px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--dark);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.6);
    transform: translateY(12px);
    transition: transform 0.3s var(--ease);
  }
  .enroll-backdrop.open .enroll-modal { transform: translateY(0); }
  .enroll-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--dark);
    border-radius: 20px 20px 0 0;
  }
  .enroll-title {
    font-family: var(--font-d);
    font-size: 26px;
    letter-spacing: 0.01em;
  }
  .enroll-close {
    position: relative;
    z-index: 0;
    flex: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--white);
    font-size: 20px; line-height: 1;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, transform 0.15s;
  }
  /* discipline-colored RING (::before) + glyph on hover — outline only, no fill.
     background forced transparent so the Mindbody theme's button:hover fill can't show. */
  .enroll-close::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    padding: 1.5px;
    background: transparent;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .enroll-close:hover { background: transparent !important; border-color: transparent !important; transform: translateY(-1px); }
  .enroll-close:hover::before { opacity: 1; }
  .enroll-backdrop.disc-bball .enroll-close:hover { color: var(--orange) !important; background: transparent !important; }
  .enroll-backdrop.disc-bball .enroll-close:hover::before { background: var(--orange) !important; }
  .enroll-backdrop.disc-art   .enroll-close:hover { color: #22C55E !important; background: transparent !important; }
  .enroll-backdrop.disc-art   .enroll-close:hover::before { background: #22C55E !important; }
  .enroll-backdrop.disc-both  .enroll-close:hover {
    background: linear-gradient(90deg, var(--orange), #22C55E) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    color: transparent !important;
  }
  .enroll-backdrop.disc-both  .enroll-close:hover::before { background: linear-gradient(90deg, var(--orange), #22C55E) !important; }
  .enroll-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 24px 26px;
  }
  /* Mindbody widget renders on a light surface — give it a readable card */
  .enroll-body .healcode-inner,
  .enroll-body healcode-widget {
    display: block;
    background: #fff;
    color: #111;
    border-radius: 12px;
    padding: 8px;
    overflow-x: auto;
  }

  /* ---- Custom cursor (desktop only) ---- */
  @media (pointer: fine) {
    *, *::before, *::after { cursor: none !important; }
    /* When a third-party overlay is up (e.g. Mindbody's checkout lightbox), hand
       control back to the real system cursor and hide the custom orb — the orb
       can't reliably sit above external overlays, so it would otherwise vanish. */
    html.native-cursor, html.native-cursor * { cursor: auto !important; }
    html.native-cursor a, html.native-cursor button, html.native-cursor [role="button"],
    html.native-cursor select, html.native-cursor label { cursor: pointer !important; }
    html.native-cursor input:not([type="checkbox"]):not([type="radio"]),
    html.native-cursor textarea { cursor: text !important; }
    html.native-cursor #cb, html.native-cursor #cd, html.native-cursor #cb-t { opacity: 0 !important; }

    /* Pure-CSS fallback (no JS timing): the instant Mindbody's checkout modal is
       ACTIVE (#modal-iframe.is-active / .semantic-content.is-active), restore the
       native cursor and hide the orb. NOTE the .is-active is required — every
       healcode widget ships an inactive #modal-iframe placeholder, so matching a
       bare #modal-iframe would wrongly kill the custom cursor over the enrollment
       list too. Separate rules so browsers without :has() just skip them. */
    html:has(#modal-iframe.is-active), html:has(#modal-iframe.is-active) *,
    html:has(.semantic-content.is-active), html:has(.semantic-content.is-active) * { cursor: auto !important; }
    html:has(#modal-iframe.is-active) a, html:has(#modal-iframe.is-active) button, html:has(#modal-iframe.is-active) [role="button"],
    html:has(#modal-iframe.is-active) select, html:has(#modal-iframe.is-active) label,
    html:has(.semantic-content.is-active) a, html:has(.semantic-content.is-active) button { cursor: pointer !important; }
    html:has(#modal-iframe.is-active) input:not([type="checkbox"]):not([type="radio"]),
    html:has(#modal-iframe.is-active) textarea { cursor: text !important; }
    html:has(#modal-iframe.is-active) #cb, html:has(#modal-iframe.is-active) #cd, html:has(#modal-iframe.is-active) #cb-t,
    html:has(.semantic-content.is-active) #cb, html:has(.semantic-content.is-active) #cd,
    html:has(.semantic-content.is-active) #cb-t { opacity: 0 !important; }
  }

  /* tiny snap-dot — follows mouse instantly */
  #cd {
    position: fixed; top: 0; left: 0;
    width: 5px; height: 5px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 13000;
    transform: translate(-50%,-50%);
    mix-blend-mode: exclusion;
    transition: opacity 0.2s;
  }

  /* large orb — clean circle, inverts colors beneath via exclusion */
  #cb {
    position: fixed; top: 0; left: 0;
    width: 38px; height: 38px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 12998;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: background 0.4s, opacity 0.22s, box-shadow 0.4s,
                width  0.55s cubic-bezier(0.16,1,0.3,1),
                height 0.55s cubic-bezier(0.16,1,0.3,1);
  }

  /* label overlay — normal blend so text stays readable */
  #cb-t {
    position: fixed; top: 0; left: 0;
    width: 180px; height: 180px;
    pointer-events: none;
    z-index: 12999;
    transform: translate(-50%,-50%);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.28s;
  }
  #cb-t span {
    font-family: var(--font-b);
    font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #080808;
  }

  /* ---- cursor states — only color/blend, JS owns transform ---- */

  /* plain links/nav — shrink to small dot */
  body.cs-link #cb {
    width: 12px; height: 12px;
    mix-blend-mode: difference;
  }

  /* images/cards — expand, show VIEW */
  body.cs-view #cb  { width: 60px; height: 60px; }
  body.cs-view #cb-t { opacity: 1; }

  /* orange CTAs — solid orange, normal blend */
  body.cs-cta #cb {
    width: 50px; height: 50px;
    background: var(--orange);
    mix-blend-mode: normal;
    box-shadow: 0 0 32px rgba(255,98,0,0.4);
  }
  body.cs-cta #cb-t { opacity: 1; }
  body.cs-cta #cb-t span { color: #fff; }

  /* art elements — solid green, normal blend */
  body.cs-art #cb {
    width: 46px; height: 46px;
    background: var(--art);
    mix-blend-mode: normal;
    box-shadow: 0 0 32px rgba(34,197,94,0.4);
  }
  body.cs-art #cb-t { opacity: 1; }
  body.cs-art #cb-t span { color: #fff; }

  /* hidden */
  body.cs-hidden #cd,
  body.cs-hidden #cb,
  body.cs-hidden #cb-t { opacity: 0; }

  /* ---- Art program card green variant ---- */
  .prog-card.art-card { border-color: rgba(34,197,94,0.12); }
  .prog-card.art-card:hover {
    border-color: var(--art);
    box-shadow: 0 24px 60px rgba(34,197,94,0.15);
  }
  .prog-card.art-card .prog-num { color: var(--art); }
  .prog-card.art-card .prog-link { color: var(--art); }
  .prog-card.art-card .prog-image-badge { background: var(--art); }

  /* ---- Art Showcase section ---- */
  .art-showcase {
    background: #0A120C; /* very dark warm green-black */
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }

  /* Basketball showcase — orange twin of the art showcase */
  .bball-showcase {
    background: #120C08; /* very dark warm orange-black */
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  .bball-glow {
    position: absolute;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: #FF6200;
    opacity: 0.14;
    filter: blur(100px);
    top: -200px; left: -150px;
    pointer-events: none;
  }
  .eyebrow.bball { color: var(--orange); }
  .eyebrow.bball::before { background: var(--orange); }
  .bball-frame::before { border-color: rgba(255,98,0,0.25); }
  .bball-frame::after { border-color: rgba(255,98,0,0.1); }
  .art-medium.bm {
    border-color: rgba(255,98,0,0.35);
    color: #ff8a3d;
  }

  /* Watercolor atmosphere blobs */
  .art-splash {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    user-select: none;
  }
  .art-splash-1 {
    width: 700px; height: 700px;
    background: #22C55E;
    opacity: 0.18;
    top: -200px; right: -150px;
  }
  .art-splash-2 {
    width: 500px; height: 500px;
    background: #06B6D4;
    opacity: 0.06;
    bottom: -100px; left: -100px;
  }
  .art-splash-3 {
    width: 300px; height: 300px;
    background: #F59E0B;
    opacity: 0.04;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }

  .art-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  /* Image frame with tilted border art-gallery effect */
  .art-image-frame {
    position: relative;
  }
  .art-image-frame::before {
    content: '';
    position: absolute;
    inset: -14px;
    border: 1.5px solid rgba(34,197,94,0.22);
    border-radius: 38px;
    transform: rotate(-2.5deg);
    z-index: -1;
    transition: transform 0.5s var(--ease);
  }
  .art-image-frame::after {
    content: '';
    position: absolute;
    inset: -28px;
    border: 1px solid rgba(34,197,94,0.1);
    border-radius: 50px;
    transform: rotate(1.5deg);
    z-index: -1;
    transition: transform 0.5s var(--ease);
  }
  .art-image-frame:hover::before { transform: rotate(-1deg); }
  .art-image-frame:hover::after  { transform: rotate(0.5deg); }

  .art-image-frame img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 28px;
    display: block;
  }

  /* Floating paint palette widget */
  .art-palette-float {
    position: absolute;
    bottom: -18px; left: -18px;
    background: rgba(16, 10, 26, 0.9);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 999px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(20px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(34,197,94,0.1);
    z-index: 2;
  }
  .palette-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(34,197,94,0.7);
    margin-right: 4px;
    white-space: nowrap;
  }
  .apl-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.2s var(--ease), box-shadow 0.2s;
    cursor: default;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  }
  .apl-dot:hover {
    transform: scale(1.35) translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }

  /* Art content side */
  .art-content { position: relative; }
  .art-content .eyebrow { margin-bottom: 22px; }

  .art-heading {
    font-family: var(--font-d);
    font-size: clamp(44px, 5.5vw, 80px);
    line-height: 0.93;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
  }
  .art-heading .ol {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--white);
  }

  /* Brushstroke decoration under art heading */
  .art-brush {
    display: block;
    width: 220px;
    height: 14px;
    margin-bottom: 32px;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0s; /* controlled by JS observer */
  }
  .art-brush.in {
    animation: brushReveal 1.2s 0.1s var(--ease) forwards;
  }

  .art-body {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255,255,255,0.58);
    margin-bottom: 36px;
  }

  /* Art mediums — pill tags */
  .art-mediums {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
  }
  .art-medium {
    padding: 9px 18px;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--art2);
    transition: background 0.2s, border-color 0.2s;
  }
  .art-medium:hover { background: rgba(34,197,94,0.2); border-color: var(--art); }

  /* Gallery art cell — green hover tint */
  .ci.ci-art .shade {
    background: linear-gradient(160deg, transparent 40%, rgba(90,20,140,0.55) 100%);
  }
  .ci.ci-art:hover img { filter: brightness(1) saturate(1.15) hue-rotate(10deg); }

  /* Quote card art accent */
  .ci-quote .cq-mark { color: var(--art); }
  .ci-quote .cq-attr { color: var(--art); opacity: 0.6; }

  @media (max-width: 860px) {
    .art-grid { grid-template-columns: 1fr; gap: 60px; }
    .art-image-frame::before, .art-image-frame::after { display: none; }
    .art-palette-float { left: 12px; bottom: 12px; }
  }

  /* ---- Dual discipline split section -------------------------------------------------- */
  .dual-disc {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .dd-half {
    padding: 72px 64px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  /* full-width Explore buttons, shifted down into the bottom padding
     so they sit below the faces in the photos */
  .dd-half .btn { position: relative; top: 28px; }
  .dd-bball {
    background:
      linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.78)),
      url('Videos and Images for website/23-10-09 Columbus Day Camp-IG.jpg') center 55% / cover no-repeat;
    border-right: 1px solid rgba(255,98,0,0.15);
  }
  .dd-art {
    background:
      linear-gradient(rgba(13,10,22,0.78), rgba(13,10,22,0.78)),
      url('Videos and Images for website/art-showcase-group.jpg') center center / cover no-repeat;
  }
  /* large ghost number */
  .dd-num {
    font-family: var(--font-d);
    font-size: 180px; line-height: 1;
    color: rgba(255,255,255,0.03);
    position: absolute; top: 16px; right: 24px;
    pointer-events: none; user-select: none;
  }
  /* program icon */
  .dd-icon-wrap {
    width: 58px; height: 58px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 28px;
  }
  .dd-bball .dd-icon-wrap { background: rgba(255,98,0,0.1); color: var(--orange); }
  .dd-art   .dd-icon-wrap { background: rgba(34,197,94,0.1); color: var(--art); }
  .dd-eyebrow {
    font-family: var(--font-b);
    font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .dd-bball .dd-eyebrow { color: var(--orange); }
  .dd-art   .dd-eyebrow { color: var(--art); }
  .dd-heading {
    font-family: var(--font-d);
    font-size: clamp(44px, 4.5vw, 72px);
    line-height: 0.92;
    color: var(--white);
    margin-bottom: 32px;
  }
  .dd-features {
    list-style: none;
    display: flex; flex-direction: column; gap: 14px;
    margin-bottom: 44px;
  }
  .dd-feature {
    display: flex; align-items: center; gap: 12px;
    font-size: 15px; color: rgba(255,255,255,0.9);
    line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  }
  .dd-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .dd-bball .dd-dot { background: var(--orange); }
  .dd-art   .dd-dot { background: var(--art); }
  /* colour strip along top of each half */
  .dd-bball::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--orange), transparent);
  }
  .dd-art::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--art));
  }
  @media (max-width: 860px) {
    .dual-disc { grid-template-columns: 1fr; }
    .dd-half { padding: 72px 32px; }
    .dd-bball { border-right: none; border-bottom: 1px solid rgba(255,98,0,0.15); }
    .dd-num { font-size: 120px; }
  }

  /* ---- Tighter section spacing on phones (the desktop rhythm is too airy on small screens) ---- */
  @media (max-width: 768px) {
    /* these two sit under a card that slides up 40px (about / pricing), so they
       need >40px bottom padding or that card cuts off the logos / the FB button */
    .partners     { padding-bottom: 56px; }
    .about        { padding: 40px 0 44px; }
    .programs     { padding: 40px 0; }
    .gallery      { padding-bottom: 64px; }
    .pricing      { padding: 44px 0 12px; }
    .testimonials { padding: 24px 0 44px; }
    .cta-band     { padding: 48px 0; }
    .contact      { padding: 44px 0 48px; }
    .dd-half      { padding: 48px 24px; }
    .footer       { padding: 44px 0 32px; }
    /* group-card wrappers add their own bottom space; trim it, and drop the
       wasted margin under the last group (parties) before the reviews section */
    .summer-camp-card { padding-bottom: 16px; }
    #pricing-parties  { margin-bottom: 0; }
  }
  
  /* Touch devices (phones/tablets): hide the desktop custom cursor so it can't sit as a stray dot in the corner, and prevent any sideways scroll from the off-screen mobile menu */
@media (hover: none), (pointer: coarse) { #cd, #cb, #cb-t { display: none !important; } }
  html { overflow-x: hidden; }

  /* -------------------------------------------------------------------------------------
     PROGRAM PAGES  (/training, /camps, /summer-camp)
     The cards on these pages are the exact same components as the home page. Only the
     page shell below is new: a compact hero (no video, height driven by content so the
     cards sit near the fold) and the supporting detail/FAQ blocks. Same tokens throughout.
     ------------------------------------------------------------------------------------- */
  /* The hero SHELL is the home page's .hero — the program pages carry
     class="hero page-hero", so the video, the overlay (incl. its black shield
     behind the pricing curve), the bottom curve and every mobile override are
     inherited rather than re-implemented. .page-hero only restyles the copy. */
  .page-hero .container { position: relative; z-index: 2; }

  /* (The pricing background sizing, brightness and top fade are handled once in the
     .pricing-bg rules above — every page including home shares them, so they can't
     drift apart. Each page only picks its own IMAGE, in the markup.) */

  /* Hero eyebrow dash = the orange->green gradient, matching the parties hero.
     Scoped to .page-hero on purpose: the plain white dash stays on every OTHER
     eyebrow (Tuition & Fees, How It Works, Get in Touch...) so those keep
     matching the identical sections on the home page. */
  .page-hero .eyebrow::before {
    background: linear-gradient(90deg, var(--orange), var(--art));
  }
  .page-hero h1 {
    font-family: var(--font-d);
    font-size: clamp(52px, 7.5vw, 96px);
    line-height: 0.92;
    letter-spacing: 0.02em;
    color: var(--white);
    margin: 16px 0 20px;
  }
  .page-hero-sub {
    font-size: 16px;
    line-height: 1.75;
    /* Deliberately dimmer than the headline — this is supporting copy and must not
       compete with the big words for attention. Legibility is handled by the darker
       scrim behind it on mobile (see the .page-hero .hero-overlay override below)
       and by the shadow, NOT by brightening the text. */
    color: rgba(255,255,255,0.62);
    max-width: 660px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 16px rgba(0,0,0,0.65);
  }
  .page-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
  .phm {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
  }
  .phm-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
  .phm-dot.bball { background: var(--orange); }
  .phm-dot.art   { background: var(--art); }


  /* Detail / prose blocks under the cards */
  .page-detail { background: var(--dark); padding: 8px 0 76px; position: relative; z-index: 3; }
  .detail-head { margin-bottom: 34px; }
  .detail-head h2 {
    font-family: var(--font-d);
    font-size: clamp(34px, 3.4vw, 48px);
    line-height: 1;
    letter-spacing: 0.02em;
    margin: 12px 0 0;
  }
  .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
  .detail-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 26px 24px;
  }
  .detail-card h3 {
    font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--white); margin: 0 0 10px;
  }
  .detail-card p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.55); margin: 0; }
  .detail-card ul { margin: 0; padding-left: 18px; }
  .detail-card li { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.55); }

  /* FAQ — native <details>, no JS needed */
  .faq-list { max-width: 860px; margin: 0 auto; }
  .faq-item {
    border-bottom: 1px solid var(--border);
  }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 44px 22px 0;
    position: relative;
    font-size: 15px; font-weight: 600; color: var(--white);
    transition: color 0.2s;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  /* These questions cover basketball AND art, so the highlight is the both-disciplines
     gradient — never plain orange (basketball) or plain green (art).
     The gradient MUST sit on .faq-q, not on <summary>: background-clip paints across the
     element's box then clips to the glyphs, and <summary> is full-width. On a full-width
     box the words only cover the first ~35% of the ramp, so it reads as solid orange and
     the green half is painted across empty space. The inline span hugs the text, so the
     whole orange->green ramp lands on the letters — same reason parties' .grad is a span. */
  .faq-item summary .faq-q { transition: color 0.2s; }
  .faq-item summary:hover .faq-q {
    background: linear-gradient(90deg, var(--orange), var(--art));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .faq-item summary::after {
    content: '+';
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 22px; font-weight: 300; color: rgba(255,255,255,0.4);
    transition: transform 0.25s var(--ease), color 0.2s;
  }
  .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); color: #fff; }
  /* the +/x is a UI affordance, not a discipline — keep it neutral and make sure the
     gradient clip on :hover never renders it transparent */
  .faq-item summary:hover::after { color: rgba(255,255,255,0.55); }
  .faq-item[open] summary:hover::after { color: #fff; }
  .faq-item p { margin: 0 0 22px; padding-right: 44px; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.55); }

  @media (max-width: 768px) {
    /* padding/height come from .hero's own mobile override — don't duplicate it here */
    /* was 15px: mobile is where this copy sits over the brightest part of the video,
       so it keeps the full 16px rather than shrinking exactly where it's hardest to read */
    .page-hero-sub { font-size: 16px; }

    /* Push the video further back BEHIND the program-page heroes on mobile.
       Home and parties only put a short line over the video, so their light scrim
       (0.35 mid-hero) is fine. These pages put a full paragraph there, and on a
       bright frame white-on-light measured 2.2:1 — unreadable. Deepening the scrim
       to ~0.62 takes it to ~4.9:1 (WCAG AA). Scoped to .page-hero so the home and
       parties heroes keep their original, lighter look. The video still reads —
       it just stops competing with the words. */
    .page-hero .hero-overlay {
      background:
        linear-gradient(to top, var(--black) 0, var(--black) 130px, rgba(8,8,8,0) 250px),
        linear-gradient(to bottom, rgba(8,8,8,0.72), rgba(8,8,8,0.62) 45%, rgba(8,8,8,0.72) 80%);
    }
    .page-detail { padding: 8px 0 56px; }
    .faq-item summary { font-size: 14px; padding-right: 36px; }
  }

  /* Orange->green gradient text — the "basketball AND art together" device.
     Same definition as the one inline in parties.html (that page doesn't load
     site.css, so the two copies must be kept in step). Only use it where BOTH
     disciplines genuinely apply; for one or the other use .accent / #22C55E. */
  .grad {
    background: linear-gradient(90deg, var(--orange), var(--art));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* ---- PROGRAM PAGE GALLERY ----
     Parties' grid, tight: 4 columns, 200px rows. .wide spans 2 columns, .tall spans 2 rows.
     Tile shapes must total 16 cells (= 4 full rows) or the grid leaves holes:
       4 + 1 + 1 + 2 + 1 + 2 + 1 + 1 + 2 + 1 = 16  -> the 10-tile pattern below.
     NOTE the trade-off: the IG library is 1080x1350 (4:5 portrait) while these tiles are
     landscape, so a portrait photo shows a full-width horizontal BAND of itself rather than
     the whole frame. object-position 28% puts that band on the subject's face, which is
     what makes it work. Choose photos whose subject sits in the upper-middle. */
  .gal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 12px;
    grid-auto-flow: dense;
  }
  .gal a { border-radius: 12px; overflow: hidden; background: var(--card); display: block; }
  .gal img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 28%;
    transition: transform 0.5s var(--ease);
  }
  .gal a:hover img { transform: scale(1.06); }
  .gal .tall { grid-row: span 2; }
  .gal .wide { grid-column: span 2; }
  .gal .tall img { object-position: center top; }

  @media (max-width: 900px) {
    .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  }

  /* ---- [hidden] MUST WIN ----
     The UA stylesheet's `[hidden] { display: none }` has attribute-level specificity —
     the same weight as a class. So ANY class that sets display (.phm{display:inline-flex},
     .gal{display:grid}, .detail-card, ...) silently overrides it and the element stays
     visible despite the attribute. That is how the "Art" chip ended up advertising art on
     the Summer Camp page months before it launches.
     The date rules in site.js (data-live-from / data-live-until) toggle el.hidden, so this
     rule is what makes them actually work. Don't remove it. */
  [hidden] { display: none !important; }