/* ==========================================================================
   CYSO Site Styles (Local CSS)
   --------------------------------------------------------------------------
   Purpose:
   - Replace Tailwind utility styling with local CSS
   - Classic black/white editorial feel with restrained accent colors
   - Organized by page sections for easy maintenance

   HTML Assumptions (IDs/classes used in your current file):
   #header, #hero, #mission, #ensembles, #auditions, #concerts, #tuition,
   #support, #footer
   .header-inner, .brand, .nav-desktop, .nav-toggle, .nav-toggle-bars,
   .nav-overlay, .nav-drawer, .nav-mobile-links, .nav-mobile-cta,
   .grid, .ensemble-card, .social
   ========================================================================== */


/* ==========================================================================
   1) Design Tokens
   ========================================================================== */
:root{
  /* Brand */
  --cyso-gold: #B8956A;
  --cyso-blue: #4A5D6E;

  /* Neutrals */
  --black: #000;
  --white: #fff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Typography */
  --font-sans: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script: "Ephesis", cursive;

  /* Layout */
  --max-hero: 1440px;
  --max-content: 1200px;
  --max-narrow: 1000px;
  --max-reading: 64rem; /* ~1024px */
}


/* ==========================================================================
   2) Base / Reset
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.5;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

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

/* Hide scrollbar (optional aesthetic) */
::-webkit-scrollbar { display: none; }

/* Skip link (if you keep the skip-link in HTML) */
.skip-link{
  position: absolute;
  left: -999px;
  top: 12px;
  background: var(--white);
  color: var(--gray-900);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
  z-index: 9999;
}
.skip-link:focus{ left: 12px; }


/* ==========================================================================
   3) Minimal Utility Class Parity (for Tailwind-ish classes still in HTML)
   ========================================================================== */
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.overflow-hidden { overflow: hidden; }
.text-right { text-align: right; }

/* spacing utilities used in HTML */
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: .25rem; }
.mt-10 { margin-top: 2.5rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-x-2 > * + * { margin-left: .5rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }

/* flex utilities used in HTML */
.flex { display: flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }

/* sizing utilities used in HTML */
.h-48 { height: 12rem; }


/* ==========================================================================
   4) Header + Mobile Nav
   ========================================================================== */
#header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(0,0,0,.40), rgba(0,0,0,0));
}

#header .header-inner{
  max-width: var(--max-hero);
  margin: 0 auto;
  padding: 22px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Brand (logo) */
#header .brand img{
  height: 100px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
}

/* Desktop nav */
#header .nav-desktop{
  display: flex;
  align-items: center;
  gap: 32px;
}

#header .nav-desktop a{
  color: rgba(255,255,255,.95);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .02em;
  transition: color .2s ease;
}

#header .nav-desktop a:hover{ color: var(--cyso-gold); }

/* Hamburger button (hidden on desktop by default) */
#header .nav-toggle{
  display: none; /* shown in mobile media query */
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.20);
  border-radius: 10px;
  cursor: pointer;
  z-index: 80; /* above overlay (60) + drawer (70) */
}

/* The hamburger bars */
#header .nav-toggle-bars{
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  margin: 0 auto;
  position: relative;
  transition: background .18s ease;
}

#header .nav-toggle-bars::before,
#header .nav-toggle-bars::after{
  content:"";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #fff;
  transition: transform .18s ease, top .18s ease, opacity .18s ease;
}

#header .nav-toggle-bars::before{ top: -6px; }
#header .nav-toggle-bars::after{ top: 6px; }

/* Morph into X when open (we toggle html.nav-open in JS) */
html.nav-open #header .nav-toggle-bars{
  background: transparent; /* hide middle bar */
}
html.nav-open #header .nav-toggle-bars::before{
  top: 0;
  transform: rotate(45deg);
}
html.nav-open #header .nav-toggle-bars::after{
  top: 0;
  transform: rotate(-45deg);
}

/* Overlay */
#header .nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 60;
}

#header .nav-overlay.is-open{ opacity: 1; }

/* Drawer */
#header .nav-drawer{
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 92vw);
  height: 100vh;
  background: #0b0f16;
  color: #fff;
  transform: translateX(100%);
  transition: transform .2s ease;
  z-index: 70;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 1px solid rgba(255,255,255,.08);
}

#header .nav-drawer.is-open{ transform: translateX(0); }

/* Prevent background scroll while open */
html.nav-open,
html.nav-open body{
  overflow: hidden;
}

/* Drawer header */
#header .nav-drawer-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 10px;
}

#header .nav-drawer-title{
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* IMPORTANT:
   You asked earlier to avoid the “extra X” showing after click.
   This removes the drawer close button entirely (since the hamburger becomes the X). */
#header .nav-close{ display: none !important; }

/* Mobile links */
#header .nav-mobile-links{
  display: grid;
  gap: 10px;
  padding: 6px;
}

#header .nav-mobile-links a{
  color: #fff;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .2s ease, background .2s ease;
}

#header .nav-mobile-links a:hover{
  border-color: rgba(184,149,106,.35);
  background: rgba(255,255,255,.06);
}

/* CTA buttons inside drawer */
#header .nav-mobile-cta{
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding: 6px;
}

/* Simple button utilities */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 18px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }

.btn-primary{
  background: var(--cyso-gold);
  color: #101214;
}
.btn-primary:hover{
  background: #c6a076;
}

.btn-outline{
  border-color: var(--cyso-gold);
  color: #fff;
  background: transparent;
}
.btn-outline:hover{
  background: rgba(184,149,106,.12);
}

/* Mobile header behavior */
@media (max-width: 980px){
  #header .header-inner{ padding: 18px 20px; }
  #header .brand img{ height: 50px; }
  #header .nav-desktop{ display: none; }
  #header .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ==========================================================================
   5) Hero
   ========================================================================== */
#hero{
  position: relative;
  height: 680px;
  width: 100%;
  overflow: hidden;
}

/* Background wrapper */
#hero > div:first-child{
  position: absolute;
  inset: 0;
}

#hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none; /* keep full color */
  transform: scale(1.02);
}

/* Overlay */
#hero > div:first-child > div{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18, 29, 43, 0.40),
      rgba(18, 29, 43, 0.28),
      rgba(9, 16, 27, 0.68)
    ),
    linear-gradient(
      135deg,
      rgba(74, 93, 110, 0.18),
      rgba(184, 149, 106, 0.10)
    );
}

/* Content wrapper */
#hero > div:last-child{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
}

/* Headline */
#hero h1{
  margin: 0;
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 400;
  color: var(--white);
  font-size: clamp(44px, 7vw, 84px);
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.05;
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
  max-width: 900px;
}

/* Slightly reduce hero height on small devices */
@media (max-width: 720px){
  #hero{ height: 680px; }
}



/* ==========================================================================
   6) Mission
   ========================================================================== */
#mission{
  padding: 6rem 3rem;
  background: var(--white);
}

#mission > div{
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

#mission p{
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight: 300;
  color: var(--gray-800);
  line-height: 1.6;
}

@media (max-width: 900px){
  #mission{ padding: 5rem 1.5rem; }
}
@media (max-width: 600px){
  #mission{ padding: 4rem 1.25rem; }
}


/* Continuously scrolling, low-contrast partner logos */
#mission .mission-partners{
  width: 100%;
  overflow: hidden;
  margin: 5rem auto 0;
  max-width: 65rem;
  -webkit-mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
  mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
}
#mission .mission-partners-track{
  display: flex;
  width: max-content;
  animation: mission-partners-scroll 48s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
#mission .mission-partners-set{
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem;
}
#mission .mission-partners img{
  display: block;
  width: 170px;
  height: 76px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .25s ease;
}
#mission .mission-partners img:hover{opacity: .85;}
#mission .mission-partners:hover .mission-partners-track{animation-play-state: paused;}
@keyframes mission-partners-scroll{
  to{transform: translate3d(-50%, 0, 0);}
}
@media (max-width: 600px){
  #mission .mission-partners{margin-top: 3.5rem;}
  #mission .mission-partners-set{gap: 2rem; padding-right: 2rem;}
  #mission .mission-partners img{width: 128px; height: 60px;}
}
@media (prefers-reduced-motion: reduce){
  #mission .mission-partners-track{animation: none;}
  #mission .mission-partners{overflow-x: auto; mask-image: none; -webkit-mask-image: none;}
  #mission .mission-partners-set[aria-hidden="true"]{display: none;}
}

/* ==========================================================================
   7) Ensembles
   ========================================================================== */
#ensembles{
  padding: 6rem 3rem;
  background: var(--gray-50);
}

#ensembles > div{
  max-width: var(--max-content);
  margin: 0 auto;
}

#ensembles h2{
  margin: 0 0 4rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--gray-900);
}

/* Grid */
#ensembles .grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

/* Card */
.ensemble-card{
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ensemble-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
  border-color: rgba(184,149,106,.55);
}

/* Image block + IMPORTANT: keep zoom inside boundary */
.ensemble-card .h-48{
  height: 12rem;
  overflow: hidden; /* ensures zoom never bleeds */
}

.ensemble-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .35s ease;
  will-change: transform;
}

.ensemble-card:hover img{ transform: scale(1.06); }

/* Text */
.ensemble-card h3{
  margin: 0 0 .75rem;
  padding: 0 1.25rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-900);
}

.ensemble-card p{
  margin: 0 0 1rem;
  padding: 0 1.25rem;
  color: var(--gray-500);
  font-size: .875rem;
  line-height: 1.6;
}

.ensemble-card a{
  display: inline-block;
  padding: 0 1.25rem 1.25rem;
  color: var(--cyso-blue);
  font-size: .875rem;
  font-weight: 700;
  transition: color .2s ease;
}

.ensemble-card a:hover{ color: var(--cyso-gold); }

@media (max-width: 1100px){
  #ensembles .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  #ensembles{ padding: 5rem 1.25rem; }
  #ensembles .grid{ grid-template-columns: 1fr; gap: 18px; }
}


/* ==========================================================================
   8) Auditions (full-width background image)
   ========================================================================== */
#auditions{
  position: relative;
  padding: 8rem 3rem;
  overflow: hidden;
  background: var(--white);
}

/* Background wrapper is your first child div */
#auditions > div:first-child{
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
}

#auditions > div:first-child img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: .20;
}

/* Content wrapper is your last child div */
#auditions > div:last-child{
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

#auditions h2{
  margin: 0 0 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--gray-900);
}

#auditions p{
  margin: 0 auto 2rem;
  max-width: 42rem;
  color: var(--gray-700);
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Button */
#auditions a{
  display: inline-block;
  background: var(--cyso-blue);
  color: var(--white);
  padding: 1rem 2.5rem;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}

#auditions a:hover{
  background: var(--gray-900);
  transform: translateY(-1px);
}

@media (max-width: 900px){
  #auditions{ padding: 7rem 1.5rem; }
}
@media (max-width: 600px){
  #auditions{ padding: 6rem 1.25rem; }
}


/* ==========================================================================
   9) Concerts
   ========================================================================== */
#concerts{
  padding: 6rem 3rem;
  background: var(--white);
}

#concerts > div{
  max-width: var(--max-narrow);
  margin: 0 auto;
}

#concerts h2{
  margin: 0 0 3rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--gray-900);
}

/* Rows */
#concerts .border-b{
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  transition: border-color .2s ease;
}

#concerts .border-b:hover{ border-color: rgba(184,149,106,.8); }

#concerts h3{
  margin: 0 0 .5rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-900);
}

#concerts p{
  margin: 0;
  color: var(--gray-500);
  font-size: .875rem;
}

#concerts .text-right{ text-align: right; }

#concerts .text-cyso-blue{
  color: var(--cyso-blue);
  font-weight: 700;
}

#concerts .mt-10{
  margin-top: 2.5rem;
  text-align: center;
}

#concerts .mt-10 a{
  color: var(--cyso-blue);
  font-weight: 700;
  font-size: .875rem;
  transition: color .2s ease;
}

#concerts .mt-10 a:hover{ color: var(--cyso-gold); }

@media (max-width: 750px){
  #concerts{ padding: 5rem 1.25rem; }
  #concerts .border-b{
    flex-direction: column;
    gap: .75rem;
  }
  #concerts .text-right{ text-align: left; }
}


/* ==========================================================================
   10) Tuition
   ========================================================================== */
#tuition{
  padding: 6rem 3rem;
  background: var(--gray-50);
}

#tuition > div{
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

#tuition h2{
  margin: 0 0 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--gray-900);
}

#tuition p{
  margin: 0 auto 2.5rem;
  max-width: 42rem;
  color: var(--gray-700);
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Buttons row */
#tuition .flex{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

#tuition a{
  display: inline-block;
  padding: 1rem 2.5rem;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

/* First = primary */
#tuition .flex a:first-child{
  background: var(--cyso-blue);
  color: var(--white);
}

#tuition .flex a:first-child:hover{
  background: var(--gray-900);
  transform: translateY(-1px);
}

/* Second = outline */
#tuition .flex a:last-child{
  background: transparent;
  color: var(--cyso-blue);
  border: 2px solid var(--cyso-blue);
}

#tuition .flex a:last-child:hover{
  background: var(--cyso-blue);
  color: var(--white);
  transform: translateY(-1px);
}

@media (max-width: 900px){
  #tuition{ padding: 5rem 1.5rem; }
}
@media (max-width: 720px){
  #tuition{ padding: 4rem 1.25rem; }
  #tuition .flex{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #tuition a{ width: 100%; }
}


/* ==========================================================================
   11) Support / Donate (full-width background image)
   ========================================================================== */
#support{
  position: relative;
  padding: 8rem 3rem;
  overflow: hidden;
}

/* Background wrapper is your first child div */
#support > div:first-child{
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
}

#support > div:first-child img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

/* Dark overlay is the second div inside the background wrapper */
#support > div:first-child > div{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.70);
}

/* Content wrapper is your last child div */
#support > div:last-child{
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

#support h2{
  margin: 0 0 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--white);
}

#support p{
  margin: 0 auto 2.5rem;
  max-width: 42rem;
  color: rgba(255,255,255,.90);
  font-size: 1.125rem;
  line-height: 1.7;
}

#support a{
  display: inline-block;
  background: var(--cyso-gold);
  color: var(--white);
  padding: 1rem 2.5rem;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

#support a:hover{
  background: var(--white);
  color: var(--gray-900);
  transform: translateY(-1px);
}

@media (max-width: 900px){
  #support{ padding: 7rem 1.5rem; }
}
@media (max-width: 600px){
  #support{ padding: 6rem 1.25rem; }
}


/* ==========================================================================
   12) Footer
   ========================================================================== */
#footer{
  background: var(--gray-900);
  color: var(--white);
  padding: 4rem 3rem;
}

#footer > div{
  max-width: var(--max-content);
  margin: 0 auto;
}

#footer .grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

#footer img{
  height: 60px;
  width: auto;
  opacity: .95;
}

/* Footer headings */
#footer h4{
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
}

/* Footer text/links */
#footer p,
#footer li,
#footer a{
  font-size: .875rem;
}

#footer p{ color: var(--gray-400); line-height: 1.7; margin: 0; }
#footer ul{ list-style: none; margin: 0; padding: 0; }

#footer a{
  color: var(--gray-400);
  transition: color .2s ease;
}
#footer a:hover{ color: var(--cyso-gold); }

#footer .social{
  display: flex;
  gap: 14px;
  margin-top: 14px;
}
#footer .social a{ font-size: 1.125rem; }

/* Bottom bar */
#footer .border-t{
  border-top: 1px solid var(--gray-800);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  color: var(--gray-500);
}

@media (max-width: 1100px){
  #footer .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  #footer{ padding: 3.5rem 1.25rem; }
  #footer .grid{ grid-template-columns: 1fr; gap: 22px; }
  #footer .border-t{ flex-direction: column; align-items: flex-start; }
}


/*--------------Auditions---------------------------------*/
/*--------------------------------------------------------*/


/* Containers / spacing */
.page-wrap{ max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px){ .page-wrap{ padding: 0 3rem; } }

.section-pad{ padding: 6rem 0; }
.bg-soft{ background: #f6f7f8; } /* light gray like UX Pilot */

/* Hero (UX Pilot-inspired) */
#hero-auditions{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}
#hero-auditions .hero-media{
  position: absolute; inset: 0;
}
#hero-auditions .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: scale(1.02);
}
#hero-auditions .hero-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}
#hero-auditions .hero-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}
#hero-auditions .eyebrow{
  color: var(--cyso-gold, #B8956A);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#hero-auditions h1{
  margin: 0 0 1.5rem;
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  line-height: 1.02;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#hero-auditions .subhead{
  color: rgba(255,255,255,.90);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  margin: 0 0 2.5rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}
.hero-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.hero-actions a{
  text-decoration: none;
}

/* Two-column overview layout */
.two-col{
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px){
  .two-col{ grid-template-columns: 1.05fr .95fr; }
}

.card{
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 2.5rem;
}
.card.soft{
  background: #f6f7f8;
}
.card h3{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  margin: 0 0 1.5rem;
  font-weight: 500;
}
.date-row{
  padding: 0 0 1rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}
.date-row:last-child{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.kicker{
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyso-blue, #4A5D6E);
  margin: 0 0 .35rem;
}
.val{
  margin: 0;
  font-weight: 600;
  color: #111827;
}
.note{
  margin: .35rem 0 0;
  color: #6b7280;
  font-size: .92rem;
}

/* Ensemble cards: reuse your .ensemble-card if present; enhance hover */
.ensemble-grid{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 640px){ .ensemble-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .ensemble-grid{ grid-template-columns: 1fr 1fr 1fr 1fr; } }

.ensemble-box{
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 2rem;
  transition: border-color .15s ease, transform .15s ease;
}
.ensemble-box:hover{
  border-color: var(--cyso-gold, #B8956A);
  transform: translateY(-2px);
}
.ensemble-box h3{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  margin: 0 0 1rem;
  font-weight: 600;
  color: #111827;
}
.ensemble-box p{
  margin: 0 0 1.25rem;
  color: #6b7280;
  font-size: .95rem;
  line-height: 1.7;
}
.ensemble-box .meta{
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyso-blue, #4A5D6E);
  margin: 0;
}

/* Requirements typography */
.center-title{
  text-align: center;
  max-width: 56rem;
  margin: 0 auto 3rem;
}
.center-title h2{
  margin: 0 0 1rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  color: #111827;
}
.center-title p{
  margin: 0;
  color: #6b7280;
  line-height: 1.8;
}
.req-block{
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 2.25rem;
  margin-bottom: 2.25rem;
}
.req-block:last-child{
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.req-block h3{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.65rem;
  margin: 0 0 .75rem;
  font-weight: 600;
  color: #111827;
}
.req-block p, .req-block li{
  color: #374151;
  line-height: 1.9;
}
.req-block ul{
  margin: .75rem 0 0;
  padding-left: 1.25rem;
}

/* Steps */
.steps{
  max-width: 48rem;
  margin: 0 auto;
}
.step{
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.25rem;
  align-items: start;
}
.badge{
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--cyso-gold, #B8956A);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.step h3{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  margin: 0 0 .35rem;
  font-weight: 600;
  color: #111827;
}
.step p{
  margin: 0;
  color: #374151;
  line-height: 1.8;
}
.step-sep{
  width: 2px;
  height: 2rem;
  background: rgba(184,149,106,.30);
  margin: .75rem 0 .75rem 1.5rem;
}

/* Tuition cards */
.two-card{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 900px){ .two-card{ grid-template-columns: 1fr 1fr; } }

.price-list{
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.price-list li{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  color: #374151;
}
.price-list strong{
  color: #111827;
}

/* Final CTA band */
#final-cta{
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
  background: #111827;
  color: #fff;
}
#final-cta h2{
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 4vw, 3.75rem);
  margin: 0 0 2.25rem;
  text-align: center;
}
#final-cta .cta-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Make your base buttons work here if present; provide safe fallback */
.btn{
  display: inline-block;
  padding: .95rem 1.6rem;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: var(--cyso-gold, #B8956A);
  color: #fff;
}
.btn-outline{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.85);
}
.btn-outline:hover{
  background: #fff;
  color: #111827;
  border-color: #fff;
}

/* Ensure header sits above hero like base */
body{ margin: 0; }
/* Ensemble cards: reuse your .ensemble-card if present; enhance hover */
.ensemble-grid{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 640px){ .ensemble-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .ensemble-grid{ grid-template-columns: 1fr 1fr 1fr 1fr; } }

.ensemble-box{
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 2rem;
  transition: border-color .15s ease, transform .15s ease;
}
.ensemble-box:hover{
  border-color: var(--cyso-gold, #B8956A);
  transform: translateY(-2px);
}
.ensemble-box h3{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  margin: 0 0 1rem;
  font-weight: 600;
  color: #111827;
}
.ensemble-box p{
  margin: 0 0 1.25rem;
  color: #6b7280;
  font-size: .95rem;
  line-height: 1.7;
}
.ensemble-box .meta{
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyso-blue, #4A5D6E);
  margin: 0;
}

/* Requirements typography */
.center-title{
  text-align: center;
  max-width: 56rem;
  margin: 0 auto 3rem;
}
.center-title h2{
  margin: 0 0 1rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  color: #111827;
}
.center-title p{
  margin: 0;
  color: #6b7280;
  line-height: 1.8;
}
.req-block{
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 2.25rem;
  margin-bottom: 2.25rem;
}
.req-block:last-child{
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.req-block h3{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.65rem;
  margin: 0 0 .75rem;
  font-weight: 600;
  color: #111827;
}
.req-block p, .req-block li{
  color: #374151;
  line-height: 1.9;
}
.req-block ul{
  margin: .75rem 0 0;
  padding-left: 1.25rem;
}

/* Steps */
.steps{
  max-width: 48rem;
  margin: 0 auto;
}
.step{
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.25rem;
  align-items: start;
}
.badge{
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--cyso-gold, #B8956A);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.step h3{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  margin: 0 0 .35rem;
  font-weight: 600;
  color: #111827;
}
.step p{
  margin: 0;
  color: #374151;
  line-height: 1.8;
}
.step-sep{
  width: 2px;
  height: 2rem;
  background: rgba(184,149,106,.30);
  margin: .75rem 0 .75rem 1.5rem;
}

/* Tuition cards */
.two-card{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 900px){ .two-card{ grid-template-columns: 1fr 1fr; } }

.price-list{
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.price-list li{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  color: #374151;
}
.price-list strong{
  color: #111827;
}

/* Final CTA band */
#final-cta{
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
  background: #111827;
  color: #fff;
}
#final-cta h2{
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 4vw, 3.75rem);
  margin: 0 0 2.25rem;
  text-align: center;
}
#final-cta .cta-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Make your base buttons work here if present; provide safe fallback */
.btn{
  display: inline-block;
  padding: .95rem 1.6rem;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: var(--cyso-gold, #B8956A);
  color: #fff;
}
.btn-outline{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.85);
}
.btn-outline:hover{
  background: #fff;
  color: #111827;
  border-color: #fff;
}

/* Ensure header sits above hero like base */
body{ margin: 0; }


/*--------------Ensembles---------------------------------*/
/*--------------------------------------------------------*/

/* Hero (UX Pilot-inspired, reused pattern) */
#hero-ensembles{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}
#hero-ensembles .hero-media{ position: absolute; inset: 0; }
#hero-ensembles .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: scale(1.02);
}
#hero-ensembles .hero-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}
#hero-ensembles .hero-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}
#hero-ensembles .eyebrow{
  color: var(--cyso-gold, #B8956A);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#hero-ensembles h1{
  margin: 0 0 1.5rem;
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  line-height: 1.02;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#hero-ensembles .subhead{
  color: rgba(255,255,255,.90);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  margin: 0 0 2.5rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}

/* Sticky tools bar */
#ensemble-tools{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
}
#ensemble-tools .ensemble-tools-inner{
  padding: .9rem 0;
  display: grid;
  gap: .75rem;
}
@media (min-width: 980px){
  #ensemble-tools{ top: 0; }
  #ensemble-tools .ensemble-tools-inner{
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 1rem;
  }
}

.jump-desktop{
  display: none;
  gap: 1rem;
  flex-wrap: wrap;
}
.jump-desktop a{
  font-size: .85rem;
  color: var(--gray-700);
  padding: .25rem 0;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.jump-desktop a:hover{
  color: var(--cyso-gold);
  border-color: rgba(184,149,106,.55);
}
@media (min-width: 980px){
  .jump-desktop{ display: flex; }
}

/* Filter */
.filter-wrap{
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}
@media (min-width: 980px){
  .filter-wrap{ justify-content: flex-end; }
}
.filter-label{
  font-size: .85rem;
  color: var(--gray-500);
}
.filter-btn{
  appearance: none;
  border: 1px solid var(--gray-200);
  background: #fff;
  color: var(--gray-700);
  font-size: .75rem;
  padding: .45rem .65rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.filter-btn:hover{
  border-color: rgba(184,149,106,.55);
  color: var(--cyso-gold);
}
.filter-btn.is-active{
  background: var(--cyso-gold);
  border-color: var(--cyso-gold);
  color: #111827;
}

/* Mobile jump */
.jump-mobile-toggle{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--gray-200);
  background: #fff;
  color: var(--cyso-blue);
  padding: .65rem .9rem;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  width: 100%;
  justify-content: space-between;
}
@media (min-width: 980px){
  .jump-mobile-toggle{ display: none; }
}
.jump-mobile-menu{
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.jump-mobile-menu a{
  display: block;
  padding: .85rem .9rem;
  font-size: .95rem;
  color: var(--gray-700);
  border-top: 1px solid var(--gray-200);
}
.jump-mobile-menu a:first-child{ border-top: 0; }
.jump-mobile-menu a:hover{ color: var(--cyso-gold); }

/* Page grid */
#ensembles-page .center-title{ margin-bottom: 3.25rem; }

.ensembles-page-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px){
  .ensembles-page-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px){
  .ensembles-page-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

/* Ensemble cards */
.ensemble-page-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ensemble-page-card:hover{
  border-color: rgba(184,149,106,.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}
.ensemble-page-card h3{
  font-family: var(--font-serif);
  font-size: 1.75rem;
  margin: 0 0 .5rem;
  font-weight: 500;
  color: var(--gray-900);
}
.ensemble-page-card .conductor{
  margin: 0 0 1.25rem;
  color: var(--cyso-blue);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.ensemble-page-card .conductor span{
  color: var(--gray-700);
  font-weight: 600;
}
.ensemble-page-card .desc{
  margin: 0 0 1.25rem;
  color: var(--gray-700);
  line-height: 1.9;
  font-size: .95rem;
}
.tags{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.tag{
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  padding: .35rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  background: var(--gray-50);
}
.actions{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.actions .btn{
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Back to top */
.back-to-top{
  text-align: center;
  margin-top: 3rem;
}
.back-to-top a{
  color: var(--cyso-blue);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
}
.back-to-top a:hover{ color: var(--cyso-gold); }

/* Helper steps */
.ensemble-steps{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 900px){
  .ensemble-steps{ grid-template-columns: 1fr 1fr 1fr; }
}
.step-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  transition: transform .15s ease, border-color .15s ease;
}
.step-card:hover{
  transform: translateY(-2px);
  border-color: rgba(184,149,106,.55);
}
.step-card .icon{
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--cyso-gold);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.step-card h3{
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin: 0 0 .75rem;
  font-weight: 600;
}
.step-card p{
  margin: 0;
  color: var(--gray-700);
  line-height: 1.8;
}

/* Ensure the sticky bar doesn't hide anchors too harshly */
.ensemble-page-card{ scroll-margin-top: 140px; }
@media (min-width: 980px){
  .ensemble-page-card{ scroll-margin-top: 160px; }
}

/*--------------Get Involved---------------------------------*/
/*-----------------------------------------------------------*/

/* Hero (match auditions/ensembles pattern) */
#hero-get-involved{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}
#hero-get-involved .hero-media{ position: absolute; inset: 0; }
#hero-get-involved .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: scale(1.02);
}
#hero-get-involved .hero-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}
#hero-get-involved .hero-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}
#hero-get-involved .eyebrow{
  color: var(--cyso-gold, #B8956A);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#hero-get-involved h1{
  margin: 0 0 1.5rem;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.02;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#hero-get-involved .subhead{
  color: rgba(255,255,255,.90);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  margin: 0 0 2.5rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}

/* Ways grid */
.getinvolved-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px){
  .getinvolved-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.getinvolved-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.getinvolved-card:hover{
  border-color: rgba(184,149,106,.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

.gi-icon{
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--cyso-gold);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.getinvolved-card h3{
  font-family: var(--font-serif);
  font-size: 1.75rem;
  margin: 0 0 .75rem;
  font-weight: 600;
  color: var(--gray-900);
}
.getinvolved-card p{
  margin: 0 0 1.25rem;
  color: var(--gray-700);
  line-height: 1.9;
}
.gi-link{
  color: var(--cyso-blue);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
}
.gi-link:hover{ color: var(--cyso-gold); }
.gi-link i{ margin-left: .4rem; }

/* Donate callout */
.gi-callout{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  background: rgba(184,149,106,.10);
  border: 2px solid rgba(184,149,106,.45);
  padding: 2rem;
  margin: 2.25rem 0 2rem;
}
@media (min-width: 900px){
  .gi-callout{ grid-template-columns: 3.5rem 1fr; align-items: start; }
}
.gi-callout-icon{
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--cyso-gold);
  color: #fff;
  display: grid;
  place-items: center;
}
.gi-callout h3{
  margin: 0 0 .5rem;
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 600;
}
.gi-callout p{
  margin: 0 0 1rem;
  color: var(--gray-700);
  line-height: 1.9;
}

/* Donate 2-col */
.gi-two{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .gi-two{ grid-template-columns: 1fr 1fr; }
}
.gi-panel{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
}
.gi-panel h3{
  font-family: var(--font-serif);
  font-size: 1.75rem;
  margin: 0 0 1.25rem;
  font-weight: 600;
}
.gi-lines{
  list-style: none;
  padding: 0;
  margin: 0;
}
.gi-lines li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}
.gi-lines li:last-child{ border-bottom: 0; }
.gi-mini{
  border: 1px solid var(--gray-200);
  padding: 1.25rem;
  margin-top: 1.25rem;
}
.gi-mini h4{
  margin: 0 0 .5rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
}
.gi-muted{ color: var(--gray-500); }

.gi-center-cta{
  text-align: center;
  margin-top: 2.25rem;
}

/* Volunteer section */
.gi-requirement{
  background: rgba(74,93,110,.10);
  border-left: 4px solid var(--cyso-blue);
  padding: 1.75rem;
}
.gi-requirement h3{
  margin: 0 0 .5rem;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
}
.gi-requirement p{ margin: 0 0 1rem; color: var(--gray-700); line-height: 1.9; }

.gi-check{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6rem;
}
.gi-check li{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  color: var(--gray-700);
}
.gi-check i{ color: var(--cyso-blue); margin-top: .25rem; }

.gi-section-h3{
  text-align: center;
  margin: 3rem 0 1.5rem;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
}

.gi-committee-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 900px){
  .gi-committee-grid{ grid-template-columns: 1fr 1fr; }
}

.gi-committee-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 1.75rem;
  transition: transform .15s ease, border-color .15s ease;
}
.gi-committee-card:hover{
  transform: translateY(-2px);
  border-color: rgba(184,149,106,.55);
}
.gi-committee-card h4{
  margin: 0 0 .5rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
}
.gi-committee-card p{
  margin: 0;
  color: var(--gray-700);
  line-height: 1.9;
}

.gi-ready{
  margin-top: 2.5rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  text-align: center;
}
.gi-ready h3{
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: 1.85rem;
}
.gi-ready-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.gi-ready a{ text-decoration: none; }

/* Musical Bridges band */
.gi-blueband{
  background: var(--cyso-blue);
  color: #fff;
  padding: 6rem 0;
}
.gi-blue-head{
  text-align: center;
  max-width: 56rem;
  margin: 0 auto 2.5rem;
}
.gi-blue-head h2{
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 3.5vw, 3rem);
}
.gi-blue-head p{
  margin: 0;
  color: rgba(255,255,255,.90);
  line-height: 1.8;
}

.gi-blue-panel{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  padding: 2rem;
  margin: 0 auto 2.5rem;
  max-width: 1000px;
}
.gi-blue-panel h3{
  margin: 0 0 .75rem;
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 600;
}
.gi-blue-panel p{
  margin: 0 0 1.5rem;
  color: rgba(255,255,255,.92);
  line-height: 1.9;
}

.gi-features{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 900px){
  .gi-features{ grid-template-columns: 1fr 1fr 1fr; }
}
.gi-feature{
  text-align: center;
  border: 1px solid rgba(255,255,255,.18);
  padding: 1.5rem;
  background: rgba(0,0,0,.08);
}
.gi-feature-icon{
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
}
.gi-feature h4{ margin: 0 0 .35rem; font-weight: 800; letter-spacing: .02em; }
.gi-feature p{ margin: 0; color: rgba(255,255,255,.85); }

.gi-blue-cta{
  text-align: center;
  max-width: 56rem;
  margin: 0 auto;
}
.gi-blue-cta h3{
  margin: 0 0 .75rem;
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 600;
}
.gi-blue-cta p{
  margin: 0 0 1.5rem;
  color: rgba(255,255,255,.92);
  line-height: 1.9;
}

/* Form */
.gi-form{
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
}
.gi-field{ margin-bottom: 1.25rem; }
.gi-field label{
  display: block;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: .5rem;
  font-size: .9rem;
  letter-spacing: .02em;
}
.gi-field input,
.gi-field select,
.gi-field textarea{
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 1rem;
  outline: none;
}
.gi-field input:focus,
.gi-field select:focus,
.gi-field textarea:focus{
  border-color: rgba(184,149,106,.75);
  box-shadow: 0 0 0 3px rgba(184,149,106,.18);
}
.gi-form-actions{ text-align: center; margin-top: 1.25rem; }
.gi-success{
  text-align: center;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
  border-radius: 12px;
  font-weight: 700;
}

/* Final CTA (dark band like your #final-cta) */
#gi-final-cta{
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0;
  background: #111827;
  color: #fff;
}
#gi-final-cta h2{
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin: 0 0 1rem;
  text-align: center;
}
#gi-final-cta p{
  max-width: 52rem;
  margin: 0 auto 2rem;
  text-align: center;
  color: rgba(255,255,255,.88);
  line-height: 1.9;
}
#gi-final-cta .cta-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/*-------------- About Page ---------------------------------*/
/*-----------------------------------------------------------*/

#hero-about{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}
#hero-about .hero-media{ position: absolute; inset: 0; }
#hero-about .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 18%;
  filter: none;
  transform: scale(1.02);
}
#hero-about .hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}
#hero-about .hero-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}
#hero-about .eyebrow{
  color: var(--cyso-gold);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#hero-about h1{
  margin: 0 0 1rem;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.02;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#hero-about .subhead{
  color: rgba(255,255,255,.90);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.85rem);
  margin: 0;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}

.about-intro{
  max-width: 980px;
}
.about-mission-actions{
  text-align: center;
  margin-top: 2rem;
}
.history-panel{
  margin-top: 2rem;
}
.history-panel-inner{
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  padding: 2rem;
}
.history-panel-inner h3{
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--gray-900);
}
.history-panel-inner p{
  margin: 0 0 1rem;
  color: var(--gray-700);
  line-height: 1.9;
}
.history-panel-inner p:last-child{
  margin-bottom: 0;
}

.director-viewer{
  display: grid;
  gap: 2rem;
}
.director-main{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
}
@media (min-width: 900px){
  .director-main{
    grid-template-columns: 360px 1fr;
    align-items: start;
  }
}
.director-image-wrap{
  overflow: hidden;
  background: var(--gray-100);
  min-height: 340px;
}
.director-image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.director-role{
  margin: 0 0 .6rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyso-blue);
}
.director-content h3{
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 500;
  color: var(--gray-900);
}
.director-content p:last-child{
  margin: 0;
  color: var(--gray-700);
  line-height: 1.9;
  font-size: 1rem;
}

.director-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;

  max-width: 860px;   /* enough room for 5 cards */
  margin: 0 auto;
}

@media (min-width: 700px){
  .director-thumbs{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1100px){
  .director-thumbs{
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
.director-thumb{
  appearance: none;
  width: 150px;
  flex: 0 0 150px;
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: .8rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.director-thumb:hover{
  border-color: rgba(184,149,106,.6);
  transform: translateY(-2px);
}
.director-thumb.is-active{
  border-color: var(--cyso-gold);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.director-thumb img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: .75rem;
  background: var(--gray-100);
}
.director-thumb span{
  display: block;
  font-size: .84rem;
  font-weight: 700;
  color: var(--gray-800);
}

.about-simple-grid,
.about-board-grid{
  display: grid;
  gap: 1.5rem;
}
.about-simple-grid{
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}
.about-board-grid{
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .about-board-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px){
  .about-board-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about-person-card,
.board-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 1.75rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.about-person-card:hover,
.board-card:hover{
  border-color: rgba(184,149,106,.55);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.05);
}
.about-person-card h3,
.board-card h3{
  margin: 0 0 .35rem;
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--gray-900);
}
.about-person-card p,
.board-card p{
  margin: 0;
  color: var(--gray-600, #6b7280);
  line-height: 1.7;
}

#about-cta{
  padding: 6rem 1.5rem;
  background: var(--gray-900);
  color: #fff;
  text-align: center;
}
#about-cta h2{
  margin: 0 0 2rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 300;
}
#about-cta .cta-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 720px){
  #hero-about{ height: 680px; }
}




/*=================Student-Portal==================*/

#hero-student-portal{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}
#hero-student-portal .hero-media{ position:absolute; inset:0; }
#hero-student-portal .hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: none;
  transform: scale(1.02);
}
#hero-student-portal .hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}
#hero-student-portal .hero-inner{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1.5rem;
}
#hero-student-portal .eyebrow{
  color: var(--cyso-gold);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#hero-student-portal h1{
  margin:0 0 1rem;
  color:#fff;
  font-family: var(--font-serif);
  font-weight:300;
  line-height:1.02;
  font-size: clamp(3.1rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#hero-student-portal .subhead{
  color: rgba(255,255,255,.92);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight:300;
  font-size: clamp(1.2rem, 2.3vw, 1.9rem);
  margin: 0 0 2.25rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}
.portal-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

.portal-intro{
  max-width: 880px;
  margin: 0 auto;
  text-align:center;
}
.portal-intro p{
  margin:0;
  color: var(--gray-700);
  font-size: 1.08rem;
  line-height: 1.9;
}

.portal-link-grid,
.portal-policy-grid,
.portal-ensemble-grid,
.portal-info-grid{
  display:grid;
  gap:1.5rem;
}
.portal-link-grid,
.portal-info-grid{
  grid-template-columns:1fr;
}
.portal-policy-grid{
  grid-template-columns:1fr;
}
.portal-ensemble-grid{
  grid-template-columns:1fr;
}
@media (min-width: 760px){
  .portal-link-grid,
  .portal-info-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-policy-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px){
  .portal-link-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal-ensemble-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.portal-card,
.portal-policy-card,
.portal-ensemble-card,
.portal-info-card{
  background:#fff;
  border:1px solid var(--gray-200);
  padding:2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.portal-card:hover,
.portal-policy-card:hover,
.portal-ensemble-card:hover,
.portal-info-card:hover{
  border-color: rgba(184,149,106,.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

.portal-icon{
  width:3rem;
  height:3rem;
  border-radius:999px;
  background: rgba(184,149,106,.14);
  color: var(--cyso-gold);
  display:grid;
  place-items:center;
  margin-bottom:1rem;
  font-size:1rem;
}

.portal-card h3,
.portal-policy-card h3,
.portal-ensemble-card h3,
.portal-info-card h3{
  margin:0 0 .7rem;
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--gray-900);
}
.portal-card p,
.portal-policy-card p,
.portal-ensemble-card p,
.portal-info-card p,
.portal-policy-card li,
.portal-ensemble-card li,
.portal-info-card li{
  color: var(--gray-700);
  line-height: 1.85;
  margin:0;
}
.portal-card .portal-link,
.portal-ensemble-card .portal-link{
  display:inline-block;
  margin-top:1rem;
  color: var(--cyso-blue);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.portal-card .portal-link:hover,
.portal-ensemble-card .portal-link:hover{ color: var(--cyso-gold); }

.portal-note{
  max-width: 980px;
  margin: 2rem auto 0;
  padding: 1.2rem 1.4rem;
  background: rgba(74,93,110,.08);
  border-left: 4px solid var(--cyso-blue);
  color: var(--gray-700);
}

.portal-ensemble-card .portal-meta{
  margin:0 0 1rem;
  font-size: .72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color: var(--cyso-blue);
}

.portal-policy-card ul,
.portal-info-card ul{
  margin:.9rem 0 0;
  padding-left:1.1rem;
}
.portal-policy-card li,
.portal-info-card li{ margin-bottom:.55rem; }
.portal-policy-card li:last-child,
.portal-info-card li:last-child{ margin-bottom:0; }

.portal-band{
  background: var(--gray-50);
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
}

#portal-cta{
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0;
  background: #111827;
  color: #fff;
}
#portal-cta h2{
  font-family: var(--font-serif);
  font-weight:300;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin:0 0 1rem;
  text-align:center;
}
#portal-cta p{
  max-width: 52rem;
  margin:0 auto 2rem;
  text-align:center;
  color: rgba(255,255,255,.88);
  line-height:1.9;
}
#portal-cta .cta-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

@media (max-width: 720px){
  #hero-student-portal{ height: 680px; }
}




/*============== Contact Page ==================*/

#hero-contact{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}
#hero-contact .hero-media{ position: absolute; inset: 0; }
#hero-contact .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: scale(1.02);
}
#hero-contact .hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}
#hero-contact .hero-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}
#hero-contact .eyebrow{
  color: var(--cyso-gold);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#hero-contact h1{
  margin: 0 0 1rem;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.02;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#hero-contact .subhead{
  color: rgba(255,255,255,.92);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.3vw, 1.9rem);
  margin: 0 0 2.25rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}

.contact-quick-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 760px){
  .contact-quick-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px){
  .contact-quick-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.contact-quick-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.contact-quick-card:hover{
  border-color: rgba(184,149,106,.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}
.contact-icon{
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(184,149,106,.14);
  color: var(--cyso-gold);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.contact-quick-card h3{
  margin: 0 0 .7rem;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gray-900);
}
.contact-quick-card p{
  margin: 0;
  color: var(--gray-700);
  line-height: 1.85;
}

.contact-band{
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.contact-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 980px){
  .contact-layout{
    grid-template-columns: 360px minmax(0, 1fr);
  }
}

.contact-sidebar{
  display: grid;
  gap: 1.5rem;
}
.contact-panel{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
}
.contact-kicker{
  margin: 0 0 .45rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyso-blue);
}
.contact-panel h3{
  margin: 0 0 .4rem;
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--gray-900);
}
.contact-role{
  margin: 0 0 1.25rem;
  color: var(--gray-500);
}
.contact-info-list,
.contact-hours{
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-info-list li{
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  color: var(--gray-700);
}
.contact-info-list li:last-child{ margin-bottom: 0; }
.contact-info-list i{
  color: var(--cyso-gold);
  margin-top: .2rem;
}
.contact-info-list a:hover{
  color: var(--cyso-blue);
}
.contact-hours li{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}
.contact-hours li:last-child{ border-bottom: 0; }
.contact-hours strong{ color: var(--gray-900); }

.contact-note-panel p:last-child{
  margin-bottom: 0;
  color: var(--gray-700);
  line-height: 1.9;
}

.contact-form-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
}
.contact-form-card h2{
  margin: 0 0 .5rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 500;
  color: var(--gray-900);
}
.contact-form-intro{
  margin: 0 0 1.75rem;
  color: var(--gray-700);
  line-height: 1.8;
}

.contact-form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.25rem;
}
@media (min-width: 760px){
  .contact-form-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.contact-full{
  grid-column: 1 / -1;
}

.gi-field label span{
  font-weight: 400;
  color: var(--gray-500);
}

.contact-form-actions{
  margin-top: 1.25rem;
}

.hidden-field{
  position: absolute !important;
  left: -9999px !important;
}

#ensemble-field{
  display: none;
}

#contact-cta{
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0;
  background: #111827;
  color: #fff;
  text-align: center;
}
#contact-cta h2{
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin: 0 0 1rem;
}
#contact-cta p{
  max-width: 52rem;
  margin: 0 auto 2rem;
  color: rgba(255,255,255,.88);
  line-height: 1.9;
}
#contact-cta .cta-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 720px){
  #hero-contact{ height: 680px; }
}

.contact-headshot{
  margin: 0 0 1.25rem;
}

.contact-headshot img{
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  border: 3px solid rgba(184,149,106,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}



/*============== Concerto Competition ==================*/

#hero-concerto{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}
#hero-concerto .hero-media{ position: absolute; inset: 0; }
#hero-concerto .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: scale(1.02);
}
#hero-concerto .hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}
#hero-concerto .hero-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}
#hero-concerto .eyebrow{
  color: var(--cyso-gold);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#hero-concerto h1{
  margin: 0 0 1rem;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.02;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#hero-concerto .subhead{
  color: rgba(255,255,255,.92);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.3vw, 1.9rem);
  margin: 0 0 2.25rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}

@media (max-width: 720px){
  #hero-concerto{ height: 680px; }
}



/*============== Summer Music Camp ==================*/

#hero-summer-camp{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}
#hero-summer-camp .hero-media{ position: absolute; inset: 0; }
#hero-summer-camp .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: scale(1.02);
}
#hero-summer-camp .hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}
#hero-summer-camp .hero-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}
#hero-summer-camp .eyebrow{
  color: var(--cyso-gold);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#hero-summer-camp h1{
  margin: 0 0 1rem;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.02;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#hero-summer-camp .subhead{
  color: rgba(255,255,255,.92);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.3vw, 1.9rem);
  margin: 0 0 2.25rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}

.summer-narrow{
  max-width: 920px;
}

.summer-detail-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 980px){
  .summer-detail-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.summer-callout{
  margin-top: 1.5rem;
  padding: 1.25rem 1.25rem;
  background: rgba(74,93,110,.08);
  border-left: 4px solid var(--cyso-blue);
}

.summer-feature-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px){
  .summer-feature-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.summer-feature-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.summer-feature-card:hover{
  border-color: rgba(184,149,106,.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}
.summer-feature-card h3{
  margin: 0 0 .75rem;
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--gray-900);
}
.summer-feature-card p{
  margin: 0;
  color: var(--gray-700);
  line-height: 1.85;
}

.summer-performance-panel{
  max-width: 900px;
  margin: 0 auto;
}
.summer-performance-card{
  text-align: center;
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2.5rem 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
}
.summer-performance-card h3{
  margin: 0 0 .65rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 500;
  color: var(--gray-900);
}
.summer-performance-card p:last-child{
  margin: 0;
  color: var(--gray-700);
  font-size: 1.05rem;
}

#camp-cta{
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0;
  background: #111827;
  color: #fff;
  text-align: center;
}
#camp-cta h2{
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin: 0 0 1rem;
}
#camp-cta p{
  max-width: 52rem;
  margin: 0 auto 2rem;
  color: rgba(255,255,255,.88);
  line-height: 1.9;
}
#camp-cta .cta-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 720px){
  #hero-summer-camp{ height: 680px; }
}




/*============== Donate Page ==================*/

#hero-donate{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}
#hero-donate .hero-media{ position: absolute; inset: 0; }
#hero-donate .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: scale(1.02);
}
#hero-donate .hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}
#hero-donate .hero-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}
#hero-donate .eyebrow{
  color: var(--cyso-gold);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#hero-donate h1{
  margin: 0 0 1rem;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.02;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#hero-donate .subhead{
  color: rgba(255,255,255,.92);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.3vw, 1.9rem);
  margin: 0 0 2.25rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}

.donate-narrow{
  max-width: 920px;
}

.donate-give-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 980px){
  .donate-give-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.donate-impact-list{
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
}
.donate-impact-item{
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--gray-200);
}
.donate-impact-item:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.donate-impact-item h4{
  margin: 0 0 .4rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gray-900);
}
.donate-impact-item p{
  margin: 0;
  color: var(--gray-700);
  line-height: 1.85;
}

.donate-actions{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.donate-outline-dark{
  color: var(--cyso-blue);
  border-color: var(--cyso-blue);
}
.donate-outline-dark:hover{
  background: var(--cyso-blue);
  color: #fff;
}

.donate-mailing{
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}

.donate-level-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 700px){
  .donate-level-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px){
  .donate-level-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.donate-level-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.donate-level-card:hover{
  border-color: rgba(184,149,106,.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}
.donate-level-card h3{
  margin: 0 0 .45rem;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--gray-900);
}
.donate-amount{
  margin: 0;
  color: var(--gray-700);
  line-height: 1.7;
  font-weight: 700;
}

.donate-two-col{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 980px){
  .donate-two-col{
    grid-template-columns: 1fr 1fr;
  }
}

.text-link{
  display: inline-block;
  margin-top: 1rem;
  color: var(--cyso-blue);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.text-link:hover{
  color: var(--cyso-gold);
}

#donate-cta{
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0;
  background: #111827;
  color: #fff;
  text-align: center;
}
#donate-cta h2{
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin: 0 0 1rem;
}
#donate-cta p{
  max-width: 52rem;
  margin: 0 auto 2rem;
  color: rgba(255,255,255,.88);
  line-height: 1.9;
}
#donate-cta .cta-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 720px){
  #hero-donate{ height: 680px; }
}



/*-------------- Upcoming Performances --------------------*/
/*---------------------------------------------------------*/

#hero-upcoming-performances{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}
#hero-upcoming-performances .hero-media{
  position:absolute;
  inset:0;
}
#hero-upcoming-performances .hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:none;
  transform:scale(1.02);
}
#hero-upcoming-performances .hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}
#hero-upcoming-performances .hero-inner{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1.5rem;
}
#hero-upcoming-performances .hero-copy{
  max-width:900px;
}
#hero-upcoming-performances .eyebrow{
  color: var(--cyso-gold);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#hero-upcoming-performances h1{
  margin:0 0 1rem;
  color:#fff;
  font-family: var(--font-serif);
  font-weight:300;
  line-height:1.02;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#hero-upcoming-performances .subhead{
  color: rgba(255,255,255,.92);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight:300;
  font-size: clamp(1.2rem, 2.3vw, 1.9rem);
  margin:0;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}

#performances-intro{
  padding-bottom: 2rem;
}

.featured-events-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}

.featured-event-card{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:1.5rem;
  background:#fff;
  border:1px solid var(--gray-200);
  padding:2rem;
  box-shadow:0 10px 25px rgba(0,0,0,.03);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.featured-event-card:hover{
  border-color: rgba(184,149,106,.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

.featured-event-primary{
  background: linear-gradient(to right, rgba(184,149,106,.08), #fff);
  border-color: rgba(184,149,106,.35);
}

.featured-event-date{
  width:88px;
  min-width:88px;
  height:88px;
  border-radius:18px;
  background: var(--cyso-blue);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.featured-event-date.small{
  background: var(--gray-900);
}

.featured-event-date .month{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  line-height:1;
  margin-bottom:.35rem;
}

.featured-event-date .day{
  font-family: var(--font-serif);
  font-size:2rem;
  font-weight:600;
  line-height:1;
}

.featured-event-kicker{
  margin:0 0 .45rem;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color: var(--cyso-blue);
}

.featured-event-content h3{
  margin:0 0 .5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight:500;
  color: var(--gray-900);
}

.featured-event-meta{
  margin:0 0 1rem;
  color: var(--gray-500);
  font-size:.95rem;
  line-height:1.7;
}

.featured-event-content p:last-of-type{
  color: var(--gray-700);
  line-height:1.85;
}

.featured-event-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
  margin-top:1.25rem;
}

.featured-event-loading{
  grid-template-columns:1fr;
}
.featured-event-loading-content{
  text-align:center;
}

.calendar-subscribe{
  text-align:center;
  max-width:760px;
  margin:0 auto 3rem;
}

.calendar-subscribe h3{
  margin:0 0 .75rem;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight:500;
  color: var(--gray-900);
}

.calendar-subscribe p{
  margin:0 auto 1.5rem;
  color: var(--gray-700);
  line-height:1.85;
}

.calendar-subscribe-actions{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.performance-outline-btn{
  border:2px solid var(--cyso-blue);
  color: var(--cyso-blue);
  background:transparent;
}
.performance-outline-btn:hover{
  background: var(--cyso-blue);
  color:#fff;
}

.calendar-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  border:1px solid var(--gray-200);
  box-shadow:0 10px 25px rgba(0,0,0,.03);
  overflow:hidden;
  background:#fff;
}

.calendar-container iframe{
  width:100%;
  height:760px;
  border:0;
  display:block;
}

#performances-cta{
  position:relative;
  overflow:hidden;
  padding:6.5rem 0;
  background:#111827;
  color:#fff;
  text-align:center;
}
#performances-cta h2{
  font-family: var(--font-serif);
  font-weight:300;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin:0 0 1rem;
}
#performances-cta p{
  max-width:52rem;
  margin:0 auto 2rem;
  color: rgba(255,255,255,.88);
  line-height:1.9;
}
#performances-cta .cta-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

.performance-dark-outline{
  border:2px solid rgba(255,255,255,.45);
  color:#fff;
  background:transparent;
}
.performance-dark-outline:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.7);
}

@media (max-width: 720px){
  #hero-upcoming-performances{
    height:680px;
  }

  .featured-event-card{
    grid-template-columns:1fr;
    gap:1.25rem;
  }

  .featured-event-date{
    width:84px;
    height:84px;
  }

  .calendar-container iframe{
    height:700px;
  }
}

=======================Hero on form pages=======================


#hero-slim .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

#hero-slim {
  position: relative;
  height: 300px;
  overflow: hidden;
}

#hero-slim .hero-media {
  position: absolute;
  inset: 0;
}

#hero-slim .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#hero-slim .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

#hero-slim .hero-inner {
  position: relative;
  z-index: 2;
  min-height: 300px;
  display: flex;
  align-items: center;
  color: #fff;
}

.payments-section {
  padding: 3rem 1.5rem 4rem;
}

.payments-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.payments-intro {
  text-align: center;
  margin-bottom: 2.5rem;
}

.payments-intro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  margin-bottom: 0.75rem;
  color: #111827;
}

.payments-intro p {
  color: #374151;
  margin: 0;
  line-height: 1.7;
}

.payment-list {
  display: grid;
  gap: 1rem;
}

.payment-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
  transition: border-color .2s ease, transform .2s ease;
}

.payment-item:hover {
  border-color: rgba(184,149,106,.6);
  transform: translateY(-2px);
}

.payment-item h3 {
  margin: 0 0 0.25rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #111827;
}

.payment-item p {
  margin: 0;
  color: #6b7280;
  font-size: 0.95rem;
}

.payment-btn {
  display: inline-block;
  white-space: nowrap;
  padding: 0.9rem 1.4rem;
  background: var(--cyso-blue);
  color: #fff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}

.payment-btn:hover {
  background: #111827;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  #hero-slim {
	height: 240px;
  }

  #hero-slim .hero-inner {
	min-height: 240px;
  }

  .payments-section {
	padding: 2rem 1rem 3rem;
  }

  .payment-item {
	flex-direction: column;
	align-items: flex-start;
  }
}

.payments-group-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 500;
  margin: 0 0 1rem;
  color: #111827;
}


/*============== Programs Landing Page ==================*/

#hero-programs{
  position: relative;
  height: 680px;
  overflow: hidden;
  width: 100%;
}

#hero-programs .hero-media{
  position: absolute;
  inset: 0;
}

#hero-programs .hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: scale(1.02);
}

#hero-programs .hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(18,29,43,.42),
      rgba(18,29,43,.24),
      rgba(9,16,27,.70)
    ),
    linear-gradient(
      135deg,
      rgba(74,93,110,.18),
      rgba(184,149,106,.10)
    );
}

#hero-programs .hero-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}

#hero-programs .eyebrow{
  color: var(--cyso-gold);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

#hero-programs h1{
  margin: 0 0 1.5rem;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.02;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}

#hero-programs .subhead{
  color: rgba(255,255,255,.90);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.3vw, 1.9rem);
  margin: 0 0 2.5rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}

.nav-dropdown{
  position: relative;
}

.nav-dropdown-toggle{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.nav-dropdown-toggle i{
  font-size: .65rem;
}

.nav-dropdown-menu{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 230px;
  background: rgba(17,24,39,.96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  padding: .6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

#header .nav-dropdown-menu a{
  display: block;
  padding: .8rem .9rem;
  color: rgba(255,255,255,.92);
  font-size: .85rem;
  border-radius: 10px;
}

#header .nav-dropdown-menu a:hover{
  background: rgba(255,255,255,.08);
  color: var(--cyso-gold);
}

.programs-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 900px){
  .programs-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.program-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2.25rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.03);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.program-card:hover{
  border-color: rgba(184,149,106,.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

.program-icon{
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: rgba(184,149,106,.14);
  color: var(--cyso-gold);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
}

.program-card h3{
  margin: 0 0 .85rem;
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--gray-900);
}

.program-card p{
  margin: 0 0 1.4rem;
  color: var(--gray-700);
  line-height: 1.85;
}

.program-link{
  color: var(--cyso-blue);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.program-link:hover{
  color: var(--cyso-gold);
}

.program-link i{
  margin-left: .35rem;
}

@media (max-width: 720px){
  #hero-programs{
    height: 680px;
  }
}


/* ==========================================================================
   Tuition & Fees — Multi-Student Family Checkout
   ========================================================================== */

.tuition-payments-section{
  padding: 4rem 1.5rem 5rem;
  background: var(--gray-50);
}

.tuition-payments-wrap{
  max-width: 1180px;
  margin: 0 auto;
}

.tuition-intro{
  max-width: 800px;
  margin: 0 auto 2.75rem;
  text-align: center;
}

.tuition-intro h2{
  margin: 0 0 .75rem;
  font-family: var(--font-serif);
  font-size: clamp(2.35rem, 4vw, 3.5rem);
  font-weight: 300;
  color: var(--gray-900);
}

.tuition-intro p{
  margin: .35rem auto;
  color: var(--gray-700);
  line-height: 1.8;
}

.family-checkout-shell{
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
  gap: 2rem;
  align-items: start;
}

.family-checkout-panel,
.family-cart-card{
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(15,23,42,.06);
}

.family-checkout-panel{
  padding: 1.5rem;
}

.family-cart-card{
  position: sticky;
  top: 1.5rem;
  padding: 1.35rem;
}

.family-progress{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 650px;
  margin: 0 auto 2rem;
}

.family-progress-button{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: center;
  position: relative;
  color: var(--gray-500);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
}

.family-progress-button::after{
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--gray-200);
  z-index: 0;
}

.family-progress-button:last-child::after{
  display: none;
}

.family-progress-circle{
  width: 38px;
  height: 38px;
  border: 2px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin: 0 auto .4rem;
  font-weight: 800;
}

.family-progress-label{
  display: block;
}

.family-progress-button.active .family-progress-circle,
.family-progress-button.completed .family-progress-circle{
  background: var(--cyso-blue);
  border-color: var(--cyso-blue);
  color: #fff;
}

.family-progress-button.completed::after{
  background: var(--cyso-blue);
}

.family-progress-button.active .family-progress-label{
  color: var(--gray-900);
}

.family-step{
  display: none;
}

.family-step.active{
  display: block;
}

.family-step h2{
  margin: 0 0 .5rem;
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--gray-900);
}

.family-step > p{
  margin: 0 0 1.25rem;
  color: var(--gray-700);
  line-height: 1.75;
}

.family-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.family-form-grid .full-width{
  grid-column: 1 / -1;
}

.family-field{
  margin-bottom: 1rem;
}

.family-field label{
  display: block;
  margin-bottom: .42rem;
  color: var(--gray-900);
  font-weight: 700;
  font-size: .94rem;
}

.family-field input,
.family-field select,
.family-field textarea{
  width: 100%;
  padding: .88rem .95rem;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  color: var(--gray-900);
  font-family: inherit;
  font-size: 1rem;
}

.family-field input:focus,
.family-field select:focus,
.family-field textarea:focus{
  outline: none;
  border-color: var(--cyso-blue);
  box-shadow: 0 0 0 3px rgba(74,93,110,.12);
}

.family-section{
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}

.family-section h3{
  margin: 0 0 .45rem;
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--gray-900);
}

.family-section > p{
  margin: 0 0 1rem;
  color: var(--gray-700);
  line-height: 1.7;
}

.family-choice-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.family-choice{
  display: block;
  cursor: pointer;
}

.family-choice input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.family-choice-card{
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.family-choice-card:hover{
  border-color: #cbd5e1;
  box-shadow: 0 10px 28px rgba(15,23,42,.05);
  transform: translateY(-1px);
}

.family-choice input:checked + .family-choice-card{
  border-color: var(--cyso-blue);
  box-shadow: 0 0 0 3px rgba(74,93,110,.12);
  background: #fbfdff;
}

.family-choice-card h4{
  margin: 0 0 .3rem;
  color: var(--gray-900);
  font-size: 1rem;
}

.family-choice-card p{
  margin: 0;
  color: var(--gray-700);
  line-height: 1.6;
  font-size: .93rem;
}

.family-choice-price{
  display: inline-block;
  margin-top: .65rem;
  font-weight: 800;
  color: var(--gray-900);
}

.family-payment-list{
  display: grid;
  gap: .8rem;
}

.family-payment-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
}

.family-payment-main{
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  flex: 1;
}

.family-payment-main input{
  margin-top: .25rem;
  accent-color: var(--cyso-blue);
}

.family-payment-copy h4{
  margin: 0 0 .2rem;
  color: var(--gray-900);
}

.family-payment-copy p{
  margin: 0;
  color: var(--gray-700);
  line-height: 1.6;
  font-size: .92rem;
}

.family-price{
  white-space: nowrap;
  font-weight: 800;
  color: var(--gray-900);
}

.family-helper{
  margin-top: .85rem;
  padding: .85rem 1rem;
  border-left: 4px solid var(--cyso-blue);
  background: rgba(74,93,110,.08);
  color: var(--gray-700);
  line-height: 1.65;
  font-size: .92rem;
}

.family-validation{
  min-height: 1.35rem;
  margin-top: .85rem;
  color: #9f1239;
  font-weight: 700;
  line-height: 1.6;
}

.family-nav{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
}

.family-button,
.family-button-secondary,
.family-button-danger{
  appearance: none;
  border-radius: 999px;
  padding: .9rem 1.35rem;
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.family-button{
  border: 0;
  background: var(--cyso-blue);
  color: #fff;
}

.family-button:hover{
  background: var(--gray-900);
  transform: translateY(-1px);
}

.family-button-secondary{
  border: 1px solid #d1d5db;
  background: #fff;
  color: var(--gray-700);
}

.family-button-secondary:hover{
  border-color: var(--cyso-blue);
  color: var(--gray-900);
  transform: translateY(-1px);
}

.family-button-danger{
  border: 1px solid #fecdd3;
  background: #fff;
  color: #9f1239;
}

.family-button-danger:hover{
  background: #fff1f2;
}

.family-student-card{
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: var(--gray-50);
}

.family-student-card-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .8rem;
}

.family-student-card h4{
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  color: var(--gray-900);
}

.family-student-card small{
  color: var(--gray-500);
}

.family-student-actions{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.family-text-button{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cyso-blue);
  cursor: pointer;
  padding: .2rem;
  font-family: inherit;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.family-text-button.remove{
  color: #9f1239;
}

.family-summary-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.family-summary-list li{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .48rem 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-900);
}

.family-summary-list li:last-child{
  border-bottom: 0;
}

.family-student-subtotal{
  display: flex;
  justify-content: space-between;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid #d1d5db;
  font-weight: 800;
}

.family-cart-card h3{
  margin: 0 0 .4rem;
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 500;
}

.family-cart-card > p{
  margin: 0 0 1rem;
  color: var(--gray-700);
  line-height: 1.7;
  font-size: .94rem;
}

.family-cart-empty{
  margin: 0;
  color: var(--gray-500);
  line-height: 1.7;
}

.family-grand-total{
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #d1d5db;
  font-weight: 800;
  font-size: 1.08rem;
}

.family-review-contact{
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: var(--gray-50);
  color: var(--gray-700);
  line-height: 1.7;
}

.family-status{
  min-height: 1.35rem;
  margin-top: .85rem;
  color: var(--gray-700);
  line-height: 1.6;
}

.family-hidden{
  display: none !important;
}

@media (max-width: 980px){
  .family-checkout-shell{
    grid-template-columns: 1fr;
  }

  .family-cart-card{
    position: static;
  }

  .family-choice-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .tuition-payments-section{
    padding: 2.5rem 1rem 3.5rem;
  }

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

  .family-form-grid .full-width{
    grid-column: auto;
  }

  .family-nav{
    flex-direction: column-reverse;
  }

  .family-button,
  .family-button-secondary{
    width: 100%;
  }

  .family-payment-row,
  .family-student-card-header{
    flex-direction: column;
  }

  .family-price{
    margin-left: 1.7rem;
  }
}


/*============== Donorbox Embed ==================*/

html{
  scroll-behavior: smooth;
}

#donorbox{
  scroll-margin-top: 24px;
}

.donorbox-section{
  background:
    radial-gradient(circle at top left, rgba(184,149,106,.10), transparent 36%),
    var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.donorbox-eyebrow{
  margin: 0 0 .65rem;
  color: var(--cyso-gold);
  font-size: .75rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 800;
}

.donorbox-shell{
  max-width: 760px;
  margin: 0 auto;
  padding: 1.25rem;
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(17,24,39,.08);
}

.donorbox-shell dbox-widget{
  display: block;
  width: 100%;
  min-height: 640px;
}

.donorbox-note{
  max-width: 760px;
  margin: 1rem auto 0;
  text-align: center;
  color: var(--gray-500);
  font-size: .9rem;
  line-height: 1.7;
}

@media (max-width: 720px){
  .donorbox-shell{
    padding: .5rem;
    border-radius: 18px;
  }

  .donorbox-shell dbox-widget{
    min-height: 720px;
  }
}


/*============== Summer Camp 2026 + Registration ==================*/
.section-eyebrow{
  margin: 0 0 .75rem;
  color: var(--cyso-gold);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
}

.summer-quick-facts{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.summer-fact{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 10px 30px rgba(17,24,39,.05);
}
.summer-fact i,
.summer-fact svg{
  color: var(--cyso-gold);
  font-size: 1.35rem;
}
.summer-fact span{
  display: block;
  margin-bottom: .25rem;
  color: var(--gray-500);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.summer-fact strong{
  color: var(--gray-900);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
}
.summer-schedule-note{
  margin: 1rem 0 0;
  text-align: center;
  color: var(--gray-600);
}
.summer-camp-grid,
.summer-director-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.summer-camp-card{
  display: flex;
  flex-direction: column;
  padding: 2.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 16px 40px rgba(17,24,39,.06);
}
.summer-camp-card-top{
  padding-bottom: 1.35rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--gray-200);
}
.summer-age-badge{
  display: inline-block;
  margin: 0 0 1rem;
  padding: .42rem .75rem;
  background: rgba(184,149,106,.13);
  color: #765c39;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.summer-camp-card h3,
.summer-director-card h3,
.summer-location-card h3,
.summer-contact-box h3{
  margin: 0 0 .5rem;
  font-family: var(--font-serif);
  color: var(--gray-900);
  font-size: 2rem;
  font-weight: 500;
}
.summer-camp-card h4{
  margin: 1.2rem 0 .6rem;
  color: var(--gray-900);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.summer-camp-card > p,
.summer-director-card p{
  color: var(--gray-600);
  line-height: 1.75;
}
.summer-director{
  margin: 0;
  color: var(--cyso-blue);
}
.summer-instruments{
  padding: .9rem 1rem;
  background: var(--gray-50);
  border-left: 3px solid var(--cyso-blue);
}
.summer-check-list{
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  columns: 2;
  column-gap: 1.5rem;
}
.summer-check-list li{
  break-inside: avoid;
  position: relative;
  padding: .35rem 0 .35rem 1.4rem;
  color: var(--gray-700);
}
.summer-check-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--cyso-gold);
  font-weight: 800;
}
.summer-card-button{
  margin-top: auto;
  align-self: flex-start;
}
.btn-secondary{
  display: inline-block;
  padding: .95rem 1.6rem;
  background: var(--cyso-blue);
  color: #fff;
  border: 2px solid var(--cyso-blue);
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
}
.btn-secondary:hover{
  background: #364956;
  border-color: #364956;
}
.summer-director-card{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 2rem;
  border: 1px solid var(--gray-200);
  background: var(--white);
}
.summer-role{
  margin: 0 0 .8rem;
  color: var(--cyso-gold) !important;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.summer-location-card{
  max-width: 680px;
  margin: 2rem auto 0;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.75rem;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--gray-200);
}
.summer-location-card > i,
.summer-location-card > svg{
  margin-top: .3rem;
  color: var(--cyso-gold);
  font-size: 1.5rem;
}
.summer-location-card p{ margin: .2rem 0; color: var(--gray-600); line-height: 1.6; }
.summer-scholarship-panel{
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 2rem;
  align-items: center;
  padding: 2.5rem;
  background: var(--gray-900);
  color: #fff;
}
.summer-scholarship-panel h2{
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
}
.summer-scholarship-panel > div > p:last-child{ color: rgba(255,255,255,.78); line-height: 1.75; }
.summer-contact-box{
  padding: 1.5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
}
.summer-contact-box h3{ color: #fff; }
.summer-contact-box p{ margin: .2rem 0; color: rgba(255,255,255,.72); }
.summer-contact-box a{ display: block; margin-top: .45rem; color: #fff; font-weight: 700; }

.hero-slim.camp-form-hero{
  padding: 10rem 1.5rem 5rem;
  background: linear-gradient(135deg, #1a2733, #4A5D6E);
  color: #fff;
  text-align: center;
}
.camp-form-hero .eyebrow{
  color: var(--cyso-gold);
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 800;
}
.camp-form-hero h1{
  margin: .5rem 0 .75rem;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
}
.camp-form-hero p:last-child{ margin: 0; color: rgba(255,255,255,.82); font-size: 1.05rem; }
.registration-section{
  padding: 4rem 1.5rem 6rem;
  background: var(--gray-50);
}
.registration-wrap{ max-width: 980px; margin: 0 auto; }
.registration-intro{ margin-bottom: 2rem; }
.registration-back{ display: inline-block; margin-bottom: 1.25rem; color: var(--cyso-blue); text-decoration: none; font-weight: 800; font-size: .82rem; }
.registration-intro h2{ margin: 0 0 .75rem; font-family: var(--font-serif); font-size: 2.6rem; font-weight: 500; }
.registration-intro > p{ color: var(--gray-600); line-height: 1.75; }
.registration-note{ display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.2rem; margin-top: 1.25rem; background: rgba(74,93,110,.08); border-left: 4px solid var(--cyso-blue); color: var(--gray-700); line-height: 1.6; }
.form-honeypot{ position: absolute; left: -9999px; }
.camp-registration-form{ display: grid; gap: 1.5rem; }
.form-section-card{
  min-width: 0;
  margin: 0;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 12px 32px rgba(17,24,39,.045);
}
.form-section-card legend{
  padding: 0 .5rem;
  font-family: var(--font-serif);
  color: var(--gray-900);
  font-size: 1.8rem;
  font-weight: 600;
}
.form-section-help{ margin: 0 0 1.2rem; color: var(--gray-500); line-height: 1.6; }
.registration-form-grid{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.15rem; }
.registration-form-grid .full-width{ grid-column: 1 / -1; }
.registration-form-grid label,
.signature-label{ display: grid; gap: .45rem; }
.registration-form-grid label > span,
.signature-label > span{ color: var(--gray-700); font-size: .82rem; font-weight: 800; }
.registration-form-grid input,
.registration-form-grid select,
.registration-form-grid textarea,
.signature-label input{
  width: 100%;
  box-sizing: border-box;
  padding: .9rem 1rem;
  border: 1px solid #cfd5dc;
  border-radius: 0;
  background: #fff;
  color: var(--gray-900);
  font: inherit;
}
.registration-form-grid textarea{ resize: vertical; }
.registration-form-grid input:focus,
.registration-form-grid select:focus,
.registration-form-grid textarea:focus,
.signature-label input:focus{
  outline: 3px solid rgba(184,149,106,.2);
  border-color: var(--cyso-gold);
}
.camp-choice-grid{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.camp-choice-card{ display: flex; gap: .8rem; align-items: flex-start; padding: 1.15rem; border: 1px solid var(--gray-200); cursor: pointer; }
.camp-choice-card:has(input:checked){ border-color: var(--cyso-gold); background: rgba(184,149,106,.08); }
.camp-choice-card input{ margin-top: .25rem; accent-color: var(--cyso-gold); }
.camp-choice-card strong,.camp-choice-card small{ display: block; }
.camp-choice-card strong{ margin-bottom: .25rem; color: var(--gray-900); }
.camp-choice-card small{ color: var(--gray-500); line-height: 1.5; }
.checkbox-line{ display: flex !important; grid-template-columns: none !important; gap: .75rem !important; align-items: flex-start; color: var(--gray-700); line-height: 1.55; }
.checkbox-line input{ width: auto !important; margin-top: .25rem; accent-color: var(--cyso-gold); }
.agreements-card{ display: grid; gap: 1rem; }
.signature-label{ margin-top: .6rem; }
.registration-submit-card{ display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding: 1.75rem 2rem; background: var(--gray-900); color: #fff; }
.registration-submit-card h3{ margin: 0 0 .35rem; font-family: var(--font-serif); font-size: 1.7rem; }
.registration-submit-card p{ margin: 0; color: rgba(255,255,255,.7); line-height: 1.5; }
.registration-submit{ flex: 0 0 auto; border: 0; cursor: pointer; }
.registration-success-section{ padding: 5rem 1.5rem 6rem; background: var(--gray-50); }
.registration-success-card{ max-width: 760px; margin: 0 auto; padding: 3rem; text-align: center; background: #fff; border: 1px solid var(--gray-200); box-shadow: 0 18px 50px rgba(17,24,39,.07); }
.success-icon{ display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1.4rem; border-radius: 50%; background: rgba(184,149,106,.15); color: var(--cyso-gold); font-size: 1.5rem; }
.registration-success-card h2{ margin: 0 0 1rem; font-family: var(--font-serif); font-size: clamp(2.2rem,5vw,3.3rem); font-weight: 500; }
.registration-success-card > p{ color: var(--gray-600); line-height: 1.7; }
.success-next-step{ margin: 2rem 0; padding: 1.5rem; background: var(--gray-50); border: 1px solid var(--gray-200); }
.success-next-step span{ color: var(--cyso-gold); font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.success-next-step h3{ margin: .5rem 0; font-family: var(--font-serif); font-size: 1.8rem; }
.success-next-step p{ margin: 0; color: var(--gray-600); }
.success-actions{ display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.success-help{ margin-top: 2rem; font-size: .9rem; }
.success-help a{ color: var(--cyso-blue); font-weight: 800; }

@media (max-width: 800px){
  .summer-quick-facts,
  .summer-camp-grid,
  .summer-director-grid,
  .summer-scholarship-panel,
  .registration-form-grid,
  .camp-choice-grid{ grid-template-columns: 1fr; }
  .registration-form-grid .full-width{ grid-column: auto; }
  .summer-check-list{ columns: 1; }
  .summer-scholarship-panel{ padding: 2rem; }
  .registration-submit-card{ flex-direction: column; align-items: stretch; }
  .registration-submit{ width: 100%; }
}
@media (max-width: 560px){
  .summer-camp-card,.form-section-card,.registration-success-card{ padding: 1.35rem; }
  .summer-director-card{ grid-template-columns: 1fr; }
  .hero-slim.camp-form-hero{ padding-top: 8.5rem; }
}


/* Board president portrait and future biography */
#about-board .board-card-president{display:flex;align-items:center;gap:1.15rem;}
#about-board .board-portrait{width:108px;height:138px;object-fit:cover;object-position:center 32%;flex-shrink:0;}
#about-board .board-card-info{min-width:0;}
#about-board .board-bio-pending{margin-top:1rem;color:var(--gray-600,#6b7280);font-size:.9rem;font-style:italic;}
@media(max-width:450px){#about-board .board-card-president{align-items:flex-start}#about-board .board-portrait{width:92px;height:118px}}


/* CYSO board president biography modal */
body.board-modal-open{overflow:hidden}
.board-bio-backdrop{position:fixed;inset:0;background:rgba(12,24,37,.75);z-index:9998;animation:boardFade .2s ease}
.board-bio-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(900px,calc(100% - 2rem));max-height:min(85vh,900px);overflow-y:auto;overscroll-behavior:contain;background:#fff;padding:clamp(1.5rem,4vw,3rem);z-index:9999;box-shadow:0 24px 80px rgba(0,0,0,.22);animation:boardModalIn .22s ease}
.board-bio-panel[hidden],.board-bio-backdrop[hidden],.board-bio-language[hidden]{display:none!important}
#about-board .board-bio-toggle{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;padding:0 0 .35rem;border:0;border-bottom:1px solid var(--cyso-gold,#b8956a);background:none;color:var(--cyso-blue,#173b5c);font-family:var(--font-serif);font-style:italic;font-size:1.15rem;cursor:pointer;transition:color .2s ease}
#about-board .board-bio-toggle:hover{color:var(--cyso-gold,#b8956a)}
.board-bio-header{display:flex;justify-content:space-between;align-items:start;gap:1rem;margin-bottom:1.5rem}
.board-bio-header h3{font-family:var(--font-serif);font-size:clamp(2rem,4vw,3rem);font-weight:400;margin:.15rem 0 0}
.board-bio-close{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;background:transparent;border:1px solid var(--gray-200,#ddd);border-radius:50%;color:var(--cyso-blue,#173b5c);font-size:1.75rem;line-height:1;cursor:pointer;transition:background .2s ease}
.board-bio-close:hover{background:var(--gray-50,#f5f5f5)}
.board-bio-layout{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
.board-bio-layout>img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 32%}
.board-bio-copy p{line-height:1.85;margin:0 0 1.2rem}
.board-language-switch{display:inline-flex;gap:1.4rem;border-bottom:1px solid var(--gray-200,#ddd);margin-bottom:1.5rem}
.board-language-switch button{padding:.45rem 0 .65rem;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--gray-600,#666);font-family:var(--font-serif);font-size:1.15rem;cursor:pointer}
.board-language-switch button.is-selected{border-bottom-color:var(--cyso-gold,#b8956a);color:var(--cyso-blue,#173b5c)}
@keyframes boardFade{from{opacity:0}to{opacity:1}}
@keyframes boardModalIn{from{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}
@media(max-width:650px){.board-bio-panel{max-height:90dvh;padding:1.25rem}.board-bio-layout{grid-template-columns:1fr}.board-bio-layout>img{width:130px;aspect-ratio:1;object-position:center 25%}.board-bio-header{margin-bottom:1rem}}
@media(prefers-reduced-motion:reduce){.board-bio-panel,.board-bio-backdrop{animation:none}}

/* Offset About section anchors for fixed navigation */
#about-mission,#about-artistic,#about-staff,#about-board{scroll-margin-top:110px;}

/* Dane Krich staff profile: match Chie Smith's portrait and modal trigger */
#about-staff .dane-staff-card{display:flex;align-items:center;gap:1.15rem}
#about-staff .dane-staff-card .board-portrait{width:108px;height:138px;object-fit:cover;object-position:center 28%;flex-shrink:0}
#about-staff .dane-staff-card .board-card-info{min-width:0}
#about-staff .dane-staff-card .board-bio-toggle{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;padding:0 0 .35rem;border:0;border-bottom:1px solid var(--cyso-gold,#b8956a);background:none;color:var(--cyso-blue,#173b5c);font-family:var(--font-serif);font-style:italic;font-size:1.15rem;cursor:pointer;transition:color .2s ease}
#about-staff .dane-staff-card .board-bio-toggle:hover{color:var(--cyso-gold,#b8956a)}
@media(max-width:450px){#about-staff .dane-staff-card{align-items:flex-start}#about-staff .dane-staff-card .board-portrait{width:92px;height:118px}}

/* Biography modals: visible, accessible scrollbar for long biographies */
.board-bio-panel{box-sizing:border-box;max-height:calc(100dvh - 3rem);overflow-y:scroll;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#8b9bab #edf0f2;-webkit-overflow-scrolling:touch}
.board-bio-panel::-webkit-scrollbar{width:11px}
.board-bio-panel::-webkit-scrollbar-track{background:#edf0f2}
.board-bio-panel::-webkit-scrollbar-thumb{background:#8b9bab;border:3px solid #edf0f2;border-radius:12px}
.board-bio-panel::-webkit-scrollbar-thumb:hover{background:#52697d}
@media(max-width:650px){.board-bio-panel{max-height:calc(100dvh - 1.5rem)}}

/* Homepage featured event carousel */
#hero.home-carousel{height:680px;position:relative;isolation:isolate;overflow:hidden;background:#101824}
#hero .home-carousel-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease,visibility 1s}
#hero .home-carousel-slide.active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
#hero .home-carousel-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.045) translate3d(10px,0,0);transition:transform 8s ease-out}
#hero .home-carousel-slide.active img{transform:scale(1.02) translate3d(0,0,0)}
#hero .home-carousel-slide:nth-child(2) img{object-position:50% 18%}
#hero .home-carousel-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,29,43,.4),rgba(18,29,43,.28) 45%,rgba(9,16,27,.72))}
#hero .home-carousel-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:5rem 1.5rem 6rem}
#hero .home-carousel-content h1{max-width:900px}
#hero .home-carousel-content h2{font:500 clamp(2.5rem,5vw,5rem)/1.08 var(--font-serif);max-width:850px;margin:.7rem 0 1rem;text-shadow:0 3px 16px #0008}
#hero .home-carousel-kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;font-weight:700}
#hero .home-carousel-content p{font-size:clamp(1rem,1.6vw,1.2rem);max-width:630px;margin:0 0 1.6rem;line-height:1.6;text-shadow:0 2px 10px #0009}
#hero .home-carousel-cta{background:var(--cyso-gold);color:#fff;border-radius:99px;padding:.85rem 1.7rem;font-size:.9rem;font-weight:700}
#hero .home-carousel-cta:hover{background:#a47f52}
#hero.home-carousel > .home-carousel-controls{position:absolute;z-index:5;top:auto;right:auto;bottom:1.75rem;left:50%;width:auto;height:auto;padding:0;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:.8rem}
#hero .home-carousel-controls [data-dot]{appearance:none;display:block;width:12px;height:12px;padding:0;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:background .2s,transform .2s}
#hero .home-carousel-controls [data-dot].active{background:#fff;transform:scale(1.12)}
#hero .home-carousel-controls [data-dot]:hover{background:rgba(255,255,255,.8)}
#hero .home-carousel-controls [data-dot]:focus-visible{outline:2px solid var(--cyso-gold);outline-offset:4px}
@media(max-width:720px){#hero.home-carousel{height:620px}#hero .home-carousel-slide:nth-child(2) img{object-position:58% center}#hero .home-carousel-content{padding:5rem 1.25rem 5.5rem}#hero .home-carousel-content h2{font-size:clamp(2.2rem,9vw,3.8rem)}}
@media(prefers-reduced-motion:reduce){#hero .home-carousel-slide,#hero .home-carousel-slide img{transition:none!important;transform:none!important}}

/* Seasonal homepage feature visibility: hidden cards must not occupy grid space. */
#ensembles .ensemble-card[hidden]{display:none!important;}