/* ===========================================================================
   VOICES OF TOMORROW CHILDREN'S CHOIR — DESIGN SYSTEM (v3: Navy & Gold)
   A VOICE FOR THE FUTURE
   Warm navy + gold premium worship/performance-brand system: solid deep-navy
   sections, warm ivory sections, rounded soft-shadow cards, a single gold
   accent used consistently for CTAs, numerals and iconography.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;0,9..144,900;1,9..144,500;1,9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root{
  --navy:           #0c1224;
  --navy-2:         #141b33;
  --navy-3:         #1b2440;
  --navy-black:     #06070d;
  --navy-line:      rgba(255,255,255,.12);
  --navy-line-soft: rgba(255,255,255,.07);

  --cream:          #faf6ee;
  --cream-2:        #f2ecdd;
  --white:          #ffffff;
  --line:           rgba(20,20,30,.12);
  --line-soft:      rgba(20,20,30,.07);

  --gold:           #e0a83f;
  --gold-deep:      #c98a2e;
  --gold-pale:      #f6e3b8;
  --wine:           #5c1327;
  --wine-2:         #7a1c34;
  --forest:         #103322;

  --text-hi:        #171a2b;
  --text-mid:       #5b5d6c;
  --text-on-navy:   rgba(255,255,255,.90);
  --text-on-navy-mid: rgba(255,255,255,.66);
  --text-on-navy-lo:  rgba(255,255,255,.46);

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, sans-serif;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius-sm: 10px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 50px;

  --shadow-sm: 0 4px 18px rgba(12,18,36,.07);
  --shadow-md: 0 18px 44px rgba(12,18,36,.14);
  --shadow-lg: 0 30px 70px rgba(12,18,36,.24);

  --ease: cubic-bezier(.22,.68,0,1);
  --dur-1: .22s;
  --dur-2: .45s;

  --maxw: 1240px;
  --maxw-narrow: 760px;
  --header-h: 84px;
}

/* ---------------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0; background: var(--cream); color: var(--text-hi);
  font-family: var(--font-body); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img, svg, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
h1,h2,h3,h4,h5{ font-family: var(--font-display); font-weight:600; line-height:1.12; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
:focus{ outline:none; }
:focus-visible{ outline: 2.5px solid var(--gold); outline-offset:3px; border-radius:2px; }
.skip-link{
  position:absolute; left:16px; top:-60px; background:var(--navy); color:#fff; padding:12px 20px;
  border-radius:6px; font-weight:700; font-size:.9rem; z-index:2000; transition: top .2s;
}
.skip-link:focus{ top:16px; }
::selection{ background: var(--gold); color: var(--navy); }

.container{ max-width: var(--maxw); margin:0 auto; padding:0 40px; }
.container-narrow{ max-width: var(--maxw-narrow); margin:0 auto; padding:0 40px; }
section{ position:relative; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.2em;
  font-family: var(--font-body); font-size:.72rem; font-weight:800; color: var(--gold-deep);
}
.on-dark .eyebrow{ color: var(--gold); }
.eyebrow-center{ display:flex; justify-content:center; }

.display-lg{ font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-weight:600; }
h1{ font-size: clamp(2.3rem,4.6vw,3.6rem); }
h2{ font-size: clamp(1.8rem,3vw,2.5rem); }
h3{ font-size: clamp(1.2rem,1.7vw,1.45rem); }

.lede{ font-family: var(--font-body); font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight:500; color: var(--text-mid); line-height:1.7; }
.on-dark .lede{ color: var(--text-on-navy-mid); }
.body-text{ font-size:1rem; color: var(--text-mid); line-height:1.75; }
.on-dark .body-text{ color: var(--text-on-navy-mid); }
.small-caps{ text-transform:uppercase; letter-spacing:.14em; font-weight:800; font-size:.76rem; }

.on-dark{ color: var(--text-on-navy); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4{ color:#fff; }

.gold-text{ color: var(--gold-deep); }
.on-dark .gold-text{ color: var(--gold); }

.section-title{ margin-bottom: var(--space-2); }
.section-head-center{ max-width:640px; margin:0 auto var(--space-4); text-align:center; }
.section-head-center .eyebrow{ justify-content:center; margin-bottom:12px; }
.title-rule{ width:64px; height:3px; background: var(--gold); border-radius:3px; margin:16px auto 0; }
.title-rule.left{ margin:16px 0 0; }

/* ---------------------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family: var(--font-body); font-weight:800;
  font-size:.86rem; padding:16px 30px; border-radius: 12px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; position:relative;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn svg{ width:15px; height:15px; }
.btn-gold{ background: linear-gradient(155deg, var(--gold-pale) 0%, var(--gold) 55%, var(--gold-deep) 100%); color: var(--navy); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-gold:hover{ background: linear-gradient(155deg, var(--gold) 0%, var(--gold-deep) 100%); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-navy{ background: linear-gradient(155deg, var(--navy-3) 0%, var(--navy) 100%); color:#fff; }
.btn-navy:hover{ background: linear-gradient(155deg, var(--navy-2) 0%, var(--navy-3) 100%); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline{ background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover{ background: var(--navy); color:#fff; }
.on-dark .btn-outline{ border-color: rgba(255,255,255,.4); color:#fff; }
.on-dark .btn-outline:hover{ background:#fff; color: var(--navy); border-color:#fff; }
.btn-sm{ padding:11px 22px; font-size:.78rem; }
.btn-block{ width:100%; justify-content:center; }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.btn-text{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.9rem;
  color: var(--navy); border-bottom:1.5px solid var(--line); padding-bottom:4px;
}
.btn-text svg{ width:14px; height:14px; transition: transform var(--dur-1) var(--ease); }
.btn-text:hover{ border-color: var(--gold-deep); color: var(--gold-deep); }
.btn-text:hover svg{ transform: translateX(4px); }
.on-dark .btn-text{ color:#fff; border-color: rgba(255,255,255,.3); }
.on-dark .btn-text:hover{ color: var(--gold); border-color: var(--gold); }

/* ---------------------------------------------------------------------------
   5. HEADER / NAVIGATION — solid navy, always on, blends into the hero
   --------------------------------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index:1000; height: var(--header-h); background: var(--navy);
  display:flex; align-items:center; border-bottom:1px solid transparent; transition: box-shadow var(--dur-2), border-color var(--dur-2);
}
.site-header.is-scrolled{ box-shadow: 0 6px 24px rgba(0,0,0,.25); border-bottom-color: var(--navy-line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; }

.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height:42px; width:auto; border-radius:8px; }
.brand-name{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name strong{ font-family: var(--font-display); font-size:1.05rem; font-weight:600; color:#fff; }
.brand-name span{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; font-weight:800; color: var(--gold); }

.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:flex; align-items:center; padding:12px 15px; font-weight:700; font-size:.86rem;
  color: var(--text-on-navy-mid); transition: color var(--dur-1); position:relative;
}
.main-nav > ul > li > a:hover, .main-nav > ul > li > a[aria-current="page"]{ color:#fff; }
.main-nav > ul > li > a[aria-current="page"]::after{
  content:""; position:absolute; left:15px; right:15px; bottom:6px; height:2px; background: var(--gold); border-radius:2px;
}
.main-nav .dropdown{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px); min-width:210px; background:#fff;
  border-radius:14px; padding:10px; box-shadow: var(--shadow-lg); opacity:0; visibility:hidden;
  transition: opacity var(--dur-1), transform var(--dur-1), visibility var(--dur-1);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.main-nav .dropdown a{ display:block; padding:11px 16px; border-radius:9px; font-size:.86rem; font-weight:600; color: var(--text-hi); }
.main-nav .dropdown a:hover{ background: var(--cream); color: var(--gold-deep); }

.header-cta{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.header-cta .btn{ padding:12px 24px; font-size:.75rem; }
.mobile-nav-cta{ display:none; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px;
  background:none; border:none; cursor:pointer; flex-shrink:0;
}
.nav-toggle span{ width:22px; height:2px; background:#fff; border-radius:2px; transition: all var(--dur-1) var(--ease); }
.nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   6. HERO — full-bleed photo slideshow, gradient scrim for legible type
   --------------------------------------------------------------------------- */
.hero{ background: var(--navy); color:#fff; position:relative; overflow:hidden; min-height:88vh; display:flex; flex-direction:column; justify-content:flex-end; }
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slides img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;
  opacity:0; transition: opacity 1.8s ease;
}
.hero-slides img.active{ opacity:1; }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(180deg, rgba(9,11,20,.55) 0%, rgba(9,11,20,.4) 45%, rgba(9,11,20,.92) 100%),
    radial-gradient(ellipse 900px 500px at 85% 0%, rgba(224,168,63,.18), transparent 60%);
}
@media (prefers-reduced-motion: reduce){ .hero-slides img{ transition:none; } }
.hero-inner{ position:relative; z-index:2; padding: calc(var(--header-h) + 40px) 0 var(--space-4); max-width:640px; }
.hero-tag{ display:inline-flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; color: var(--gold); margin-bottom: var(--space-2); }
.hero-tag svg{ width:14px; height:14px; }
.hero h1{ font-size: clamp(2.4rem, 5.2vw, 4.2rem); margin-bottom: var(--space-2); text-shadow:0 2px 24px rgba(0,0,0,.3); }
.hero p.lede{ max-width:480px; margin-bottom: var(--space-3); color: var(--text-on-navy); text-shadow:0 1px 10px rgba(0,0,0,.55); }

.hero-stats{ background: var(--navy); border-top:1px solid var(--navy-line); }
.hero-stats-inner{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); padding: var(--space-4) 0; }
.stat-num{ font-family: var(--font-display); font-size: clamp(1.6rem,2.6vw,2.2rem); font-weight:600; color: var(--gold); }
.stat-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color: var(--text-on-navy-lo); margin-top:4px; }

.page-hero{ background: var(--navy); color:#fff; padding: var(--space-5) 0 var(--space-4); position:relative; overflow:hidden; }
.page-hero-bg{ position:absolute; inset:0; z-index:0; }
.page-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(180deg, rgba(9,11,20,.68) 0%, rgba(9,11,20,.82) 100%),
    radial-gradient(ellipse 900px 500px at 85% 0%, rgba(224,168,63,.14), transparent 60%);
}
.page-hero .breadcrumb{ position:relative; z-index:2; font-size:.82rem; color: var(--text-on-navy-lo); margin-bottom: var(--space-2); }
.page-hero .breadcrumb a{ color: var(--text-on-navy-mid); font-weight:700; }
.page-hero .breadcrumb a:hover{ color: var(--gold); }
.page-hero h1{ position:relative; z-index:2; color:#fff; margin-bottom: var(--space-2); text-shadow:0 2px 24px rgba(0,0,0,.3); }
.page-hero .lede{ position:relative; z-index:2; max-width:600px; color: var(--text-on-navy); text-shadow:0 1px 10px rgba(0,0,0,.55); }

/* Real-photo fill inside placeholder-style containers (arch, media thumb, tile, person) */
.img-fill{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------------------------------------------------------------------------
   7. SECTIONS
   --------------------------------------------------------------------------- */
.section{ padding: var(--space-6) 0; }
.section-sm{ padding: var(--space-5) 0; }
.section-navy{ background: var(--navy); color: var(--text-on-navy); }
.section-cream{ background: var(--cream); }
.section-white{ background: var(--white); }

/* Clear section boundaries: a hairline divider whenever two sections of the
   same background land back to back, so each block reads as its own
   distinct section rather than one continuous scroll. Sections that already
   change color (light -> dark or dark -> light) get separation for free. */
.section-cream + .section-cream,
.section-white + .section-white,
.section-cream + .section-white,
.section-white + .section-cream{ border-top: 1px solid var(--line); }
.section-navy + .section-navy{ border-top: 1px solid var(--navy-line); }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items:center; }
.split > *{ min-width:0; }
.split.gap-lg{ gap: var(--space-6); }
.split-5-7{ grid-template-columns: 5fr 7fr; }
.split-7-5{ grid-template-columns: 7fr 5fr; }

/* ---------------------------------------------------------------------------
   8. CARDS
   --------------------------------------------------------------------------- */
.card{
  position:relative; overflow:hidden; isolation:isolate;
  padding: var(--space-4); background: var(--white); border:1.5px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* Frame: a slim inset ring that brightens on hover, on top of the border */
.card::after{
  content:""; position:absolute; inset:0; border-radius: var(--radius); pointer-events:none; z-index:2;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .4s var(--ease);
}
.card:hover::after{ box-shadow: inset 0 0 0 1.5px rgba(224,168,63,.55); }
/* Spotlight that tracks the cursor (position set via JS --mx/--my) */
.card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(224,168,63,.16), transparent 65%);
  transition: opacity .4s var(--ease);
}
.card:hover::before{ opacity:1; }
.card > *{ position:relative; z-index:1; }
.card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--gold-pale); }
.on-dark .card{ background: var(--navy-2); border-color: var(--navy-line); box-shadow:none; }
.on-dark .card:hover{ box-shadow: var(--shadow-lg); }
.card .icon-badge{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: var(--white); color: var(--gold-deep); border: 2px solid var(--gold-pale); margin-bottom: var(--space-2);
}
.card .icon-badge svg{ width:24px; height:24px; }
.card h3{ font-size:1.15rem; margin-bottom:.5em; color: var(--text-hi); }
.card p{ color: var(--text-mid); font-size:.95rem; line-height:1.7; margin:0; }
.on-dark .card p{ color: var(--text-on-navy-mid); }

/* Feature cards — modern variant with a mouse-tracking gold shine on the title */
.card-feature{
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(165deg, var(--white) 0%, var(--cream) 130%);
}
.card-feature .icon-badge{
  width:60px; height:60px; border-radius:16px;
  background: linear-gradient(155deg, var(--gold-pale) 0%, var(--white) 75%);
  box-shadow: inset 0 0 0 1px rgba(224,168,63,.3);
}
.card-feature .icon-badge svg{ width:26px; height:26px; }
.card-feature h3{
  display:inline-block; position:relative; font-size:1.4rem; padding-bottom:.4em; margin-bottom:.6em;
  background-image: radial-gradient(140px circle at var(--tx,50%) var(--ty,-40%), var(--gold) 0%, var(--text-hi) 65%);
  background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.card-feature h3::after{
  content:""; position:absolute; left:0; bottom:0; width:38px; height:2px; background: var(--gold);
  transition: width .4s var(--ease);
}
.card-feature:hover h3::after{ width:64px; }
.card-feature p{ font-size:1.02rem; line-height:1.85; }
@media (hover:none){
  .card-feature h3{ background-image:none; -webkit-text-fill-color: var(--text-hi); color: var(--text-hi); }
}

/* Anchor targets (in-page nav + cross-page dropdown/CTA links landing on
   #story, #book, etc.) must clear the sticky header, whether reached via
   the JS-offset smooth scroll on the same page or a plain browser jump
   after navigating from another page. */
main section[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

.grid{ display:grid; gap: var(--space-3); }
.grid > *{ min-width:0; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------------------------------------------------------------------------
   9. CHECKLIST
   --------------------------------------------------------------------------- */
.check-list{ display:flex; flex-direction:column; gap:16px; }
.check-list li{ display:flex; align-items:flex-start; gap:14px; }
.check-list .tick{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background: var(--white); color: var(--gold-deep);
  border: 2px solid var(--gold-pale); display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.check-list .tick svg{ width:13px; height:13px; }
.check-list strong{ display:block; font-size:.98rem; margin-bottom:2px; color: var(--text-hi); }
.on-dark .check-list strong{ color:#fff; }
.check-list span{ font-size:.88rem; color: var(--text-mid); }
.on-dark .check-list span{ color: var(--text-on-navy-mid); }

/* ---------------------------------------------------------------------------
   10. IMAGE CLUSTER (organic arch shapes, no photography yet)
   --------------------------------------------------------------------------- */
.img-cluster{ position:relative; }
.arch{
  position:relative; overflow:hidden; background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
  border:1px solid var(--navy-line);
}
.arch .visual-fill{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.28); }
.arch .visual-fill svg{ width:34px; height:34px; }
.arch-main{ border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 30% 30% var(--radius-lg) var(--radius-lg); aspect-ratio: 5/6; box-shadow: var(--shadow-lg); }
.arch-tag{
  position:absolute; padding:12px 18px; background: var(--navy); border:1px solid var(--navy-line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); z-index:2;
}
.arch-tag .k{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color: var(--gold); display:block; margin-bottom:3px; }
.arch-tag .v{ font-size:.78rem; font-weight:700; color:#fff; }
.arch-tag.pos-tl{ top:6%; left:-6%; }
.arch-tag.pos-br{ bottom:8%; right:-8%; }
.arch-float{ position:absolute; width:46%; border-radius: var(--radius); aspect-ratio:4/5; box-shadow: var(--shadow-lg); border:4px solid var(--cream); z-index:1; }
.arch-float.pos-below{ bottom:-8%; right:-4%; }

/* ---------------------------------------------------------------------------
   11. MUSIC / DISCOGRAPHY CARDS
   --------------------------------------------------------------------------- */
.media-card{ border-radius: var(--radius); overflow:hidden; background: var(--navy-2); border:1px solid var(--navy-line); transition: transform var(--dur-2) var(--ease); }
.media-card:hover{ transform: translateY(-6px); }
.media-card .thumb{
  position:relative; aspect-ratio:4/3; background: linear-gradient(150deg, var(--navy-3), var(--navy)); display:flex; align-items:center; justify-content:center;
}
.media-card .thumb svg.watermark{ width:34px; height:34px; color: rgba(255,255,255,.16); }
.play-dot{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%;
  background: var(--white); color: var(--navy); border: 2px solid var(--gold); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md);
  transition: transform var(--dur-1) var(--ease);
}
.play-dot svg{ width:18px; height:18px; margin-left:2px; }
.media-card:hover .play-dot{ transform: translate(-50%,-50%) scale(1.08); }
.media-card .body{ padding: var(--space-3); }
.media-card .k{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color: var(--gold); margin-bottom:8px; display:block; }
.media-card h3{ color:#fff; font-size:1.05rem; margin-bottom:6px; }
.media-card p{ color: var(--text-on-navy-mid); font-size:.88rem; margin:0; }

.category-strip{ display:flex; flex-wrap:wrap; gap:12px; }
.category-chip{ padding:11px 20px; border-radius: var(--radius-pill); border:1.5px solid var(--navy-line); font-size:.84rem; font-weight:700; color: var(--text-on-navy-mid); }

/* ---------------------------------------------------------------------------
   12. EVENTS
   --------------------------------------------------------------------------- */
.event-list{ display:flex; flex-direction:column; gap:14px; }
.event-row{
  display:flex; align-items:center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--white); border:1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  flex-wrap:wrap;
}
.event-date{
  width:64px; height:64px; border-radius: var(--radius-sm); background: var(--navy); color:#fff; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.event-date .d{ font-family: var(--font-display); font-size:1.3rem; font-weight:700; line-height:1; color: var(--gold); }
.event-date .m{ font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
.event-body{ flex:1; min-width:200px; }
.event-body .k{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color: var(--gold-deep); display:block; margin-bottom:4px; }
.event-body h3{ font-size:1.1rem; margin-bottom:4px; }
.event-meta{ font-size:.84rem; color: var(--text-mid); display:flex; align-items:center; gap:6px; }

.tba-panel{
  border:1.5px dashed var(--line); border-radius: var(--radius); padding: var(--space-4);
  text-align:center; background: var(--white);
}
.on-dark .tba-panel{ border-color: var(--navy-line); background: var(--navy-2); }
.tba-panel .tba-tag{
  display:inline-block; padding:7px 18px; border-radius: var(--radius-pill); background: var(--gold-pale); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.14em; font-weight:800; color: var(--gold-deep); margin-bottom: var(--space-2);
}
.on-dark .tba-panel .tba-tag{ background: rgba(224,168,63,.16); color: var(--gold); }
.tba-panel p{ color: var(--text-mid); max-width:520px; margin:0 auto; }
.on-dark .tba-panel p{ color: var(--text-on-navy-mid); }

/* ---------------------------------------------------------------------------
   13. TIER / OPTION CARDS (support & sponsorship — no invented pricing)
   --------------------------------------------------------------------------- */
.tier-card{
  background: var(--navy-2); border:1.5px solid var(--navy-line); border-radius: var(--radius); padding: var(--space-4);
  text-align:center; display:flex; flex-direction:column; gap: var(--space-2); transition: transform var(--dur-2) var(--ease), border-color var(--dur-2);
}
.tier-card:hover{ transform: translateY(-6px); border-color: var(--gold); }
.tier-card.featured{ border-color: var(--gold); background: var(--navy-3); }
.tier-card .k{ font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; font-weight:800; color: var(--gold); }
.tier-card h3{ color:#fff; font-size:1.3rem; }
.tier-card p{ color: var(--text-on-navy-mid); font-size:.9rem; flex:1; }
.tier-card .btn{ align-self:center; margin-top: var(--space-1); }

/* ---------------------------------------------------------------------------
   14. TEAM / PEOPLE
   --------------------------------------------------------------------------- */
.person .thumb{
  position:relative; overflow:hidden; aspect-ratio:1/1; border-radius: var(--radius); background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
  display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-2); color: rgba(255,255,255,.25);
  border:1px solid var(--navy-line);
}
.person .thumb svg{ width:30px; height:30px; }
.person .thumb img.img-fill{ object-position:center 18%; }
.person h3{ font-size:1.02rem; margin-bottom:.2em; }
.person .role{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color: var(--gold-deep); }

/* ---------------------------------------------------------------------------
   15. GALLERY + LIGHTBOX
   --------------------------------------------------------------------------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.g-tile{
  position:relative; aspect-ratio:1/1; border-radius: var(--radius); overflow:hidden; border:none; padding:0; width:100%;
  background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
}
.g-wide{ grid-column: span 2; aspect-ratio: 2/1; }
.g-tile .tile-label{
  position:absolute; inset:auto 0 0 0; padding:14px 16px; color:#fff; font-weight:800; text-transform:uppercase;
  font-size:.7rem; letter-spacing:.1em; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
}
.g-tile .play-dot{ width:44px; height:44px; }
.g-tile .play-dot svg{ width:15px; height:15px; }

.lightbox{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background: rgba(8,10,20,.94); opacity:0; visibility:hidden; transition: opacity var(--dur-2) var(--ease); padding:32px;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-inner{ max-width:900px; width:100%; }
.lightbox-visual{
  aspect-ratio:16/10; border-radius: var(--radius); background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
  display:flex; align-items:center; justify-content:center; border:1px solid var(--navy-line);
  background-size:cover; background-position:center;
}
.lightbox-caption{ color: var(--text-on-navy-mid); text-align:center; margin-top: var(--space-2); font-size:.9rem; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed; background: rgba(255,255,255,.08); border:1.5px solid var(--navy-line); color:#fff; border-radius:50%;
  width:50px; height:50px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: var(--dur-1);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: var(--gold); color: var(--navy); border-color:transparent; }
.lightbox-close{ top:26px; right:26px; }
.lightbox-prev{ left:26px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:26px; top:50%; transform:translateY(-50%); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:17px; height:17px; }

/* ---------------------------------------------------------------------------
   16. VIDEO MODAL
   --------------------------------------------------------------------------- */
.video-modal{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background: rgba(8,10,20,.94); opacity:0; visibility:hidden; transition: opacity var(--dur-2) var(--ease); padding:32px;
}
.video-modal.open{ opacity:1; visibility:visible; }
.video-modal-inner{ max-width:960px; width:100%; }
.video-modal .frame{ aspect-ratio:16/9; border-radius: var(--radius); background: linear-gradient(150deg, var(--navy-3), var(--navy-2)); display:flex; align-items:center; justify-content:center; border:1px solid var(--navy-line); color:#fff; font-weight:700; }
.video-modal-close{
  position:fixed; top:26px; right:26px; background: rgba(255,255,255,.08); border:1.5px solid var(--navy-line);
  color:#fff; border-radius:50%; width:50px; height:50px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.video-modal-close:hover{ background: var(--gold); color: var(--navy); border-color:transparent; }
.video-modal-close svg{ width:17px; height:17px; }

/* ---------------------------------------------------------------------------
   17. ACCORDION / FAQ
   --------------------------------------------------------------------------- */
.accordion{ border-top:1px solid var(--line); }
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; background:none; border:none;
  padding: var(--space-3) 4px; text-align:left; cursor:pointer; font-family: var(--font-display); font-size:1.15rem; font-weight:600; color: var(--text-hi);
}
.accordion-trigger .plus{ width:22px; height:22px; flex-shrink:0; position:relative; }
.accordion-trigger .plus::before, .accordion-trigger .plus::after{ content:""; position:absolute; background: var(--gold-deep); transition: transform var(--dur-2) var(--ease); }
.accordion-trigger .plus::before{ left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); }
.accordion-trigger .plus::after{ top:0; left:50%; width:2px; height:100%; transform:translateX(-50%); }
.accordion-item.open .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height var(--dur-2) var(--ease); }
.accordion-panel-inner{ padding:0 4px var(--space-3); color: var(--text-mid); line-height:1.75; max-width:620px; }

/* ---------------------------------------------------------------------------
   18. FORMS
   --------------------------------------------------------------------------- */
.form-card{ background: var(--white); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-md); border:1px solid var(--line-soft); }
.on-dark .form-card{ background: var(--navy-2); border-color: var(--navy-line); box-shadow:none; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; color: var(--text-hi); }
.on-dark .field label{ color:#fff; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--cream);
  font-family: var(--font-body); font-size:.95rem; color: var(--text-hi); transition: border-color var(--dur-1);
}
.on-dark .field input, .on-dark .field select, .on-dark .field textarea{ color:#fff; background: var(--navy-3); border-color: var(--navy-line); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--gold-deep); }
.field textarea{ resize:vertical; min-height:100px; }
.field .error-msg{ display:none; color: #c0392b; font-size:.78rem; margin-top:6px; font-weight:600; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#c0392b; }
.field.invalid .error-msg{ display:block; }
.form-success{
  display:none; margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm);
  background: rgba(52,152,113,.1); border:1px solid rgba(52,152,113,.3); color:#2e7d5b; font-weight:700; font-size:.9rem;
}
.form-success.show{ display:block; }
.form-note{ font-size:.82rem; color: var(--text-mid); }
.on-dark .form-note{ color: var(--text-on-navy-mid); }

/* ---------------------------------------------------------------------------
   19. CTA BLOCK — a distinct rich wine-to-navy tone, not just plain navy
   --------------------------------------------------------------------------- */
.cta-block{ padding: var(--space-6) 0; background: linear-gradient(155deg, var(--wine-2) 0%, var(--wine) 38%, var(--navy) 100%); position:relative; overflow:hidden; }
.cta-block::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 900px 500px at 15% 100%, rgba(224,168,63,.16), transparent 60%); }
.cta-inner{ position:relative; z-index:1; text-align:center; }
.cta-inner h2{ color:#fff; margin-bottom: var(--space-3); font-style:italic; }

/* ---------------------------------------------------------------------------
   20. FOOTER — three distinct zones: navy links, near-black transition,
   bright gold credit strip. No two zones share the same background.
   --------------------------------------------------------------------------- */
.site-footer{ background: var(--navy); color: var(--text-on-navy-mid); padding: var(--space-6) 0 0; border-top:1px solid var(--navy-line); }
.footer-top{
  display:grid; gap: var(--space-4) var(--space-5); padding-bottom: var(--space-4);
  grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
  grid-template-areas: "brand explore involved contact";
  align-items:start;
}
.footer-top > div:nth-of-type(1){ grid-area: brand; }
.footer-top > div:nth-of-type(2){ grid-area: explore; }
.footer-top > div:nth-of-type(3){ grid-area: involved; }
.footer-top > div:nth-of-type(4){ grid-area: contact; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom: var(--space-2); }
.footer-brand img{ height:40px; border-radius:8px; }
.footer-brand strong{ font-family: var(--font-display); color:#fff; font-size:1.05rem; }
.footer-blurb{ font-size:.9rem; line-height:1.75; max-width:280px; color: var(--text-on-navy-lo); }
.footer-col h4{
  position:relative; color: var(--gold); font-family: var(--font-display); font-style:italic; font-size:.92rem;
  letter-spacing:.02em; font-weight:600; text-transform:none; padding-bottom:12px; margin-bottom: var(--space-2);
}
.footer-col h4::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background: var(--gold); border-radius:2px; opacity:.6; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col a{ font-size:.9rem; transition: color var(--dur-1); }
.footer-col a:hover{ color: var(--gold); }
.footer-contact li{ font-size:.9rem; margin-bottom:12px; }

.footer-bottom-band{
  background: linear-gradient(100deg, var(--gold-pale) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  margin-top: var(--space-4);
}
.footer-bottom{ padding: var(--space-3) 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; color: var(--navy); }
.footer-copy{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 14px; }
.footer-copy > span{ font-family: var(--font-display); font-weight:600; font-style:italic; font-size:.95rem; letter-spacing:.01em; }
.footer-credit{ font-family: var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.02em; color: var(--navy); opacity:.75; }
.footer-credit:hover{ opacity:1; text-decoration:underline; }
.footer-legal{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-legal a{ font-weight:700; font-size:.78rem; letter-spacing:.02em; color: var(--navy); opacity:.75; }
.footer-legal a:hover{ opacity:1; text-decoration:underline; }

/* ---------------------------------------------------------------------------
   21. REVEAL
   --------------------------------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:none; }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.13s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.21s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.29s; }
@media (prefers-reduced-motion: reduce){ .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; } }

/* ---------------------------------------------------------------------------
   22. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 1300px){
  .container, .container-narrow{ padding:0 32px; }
  .header-inner{ gap:12px; }
  .brand-name strong{ font-size:.92rem; }
  .brand-name span{ font-size:.52rem; }
  .main-nav > ul{ gap:0; }
  .main-nav > ul > li > a{ padding:12px 9px; font-size:.76rem; }
  .header-cta{ gap:10px; }
  .header-cta .btn{ padding:11px 18px; font-size:.7rem; }
}
@media (max-width: 900px){
  :root{ --header-h:72px; }
  /* Mobile nav becomes a right-hand drawer (not full-bleed) with a dimmed
     backdrop behind it, closer to a native app's slide-out menu than a
     full-screen takeover. */
  .main-nav{
    position:fixed; top:72px; right:0; bottom:0; left:auto; width:min(380px, 86vw);
    background: var(--navy); transform: translateX(100%); box-shadow: -18px 0 48px rgba(0,0,0,.35);
    transition: transform var(--dur-2) var(--ease); overflow-y:auto; padding: var(--space-3) 0 var(--space-5);
  }
  .main-nav.open{ transform:translateX(0); }
  /* nav-backdrop sits OUTSIDE .site-header in the DOM, so its z-index is
     compared against .site-header as a whole (a stacking context of its
     own) rather than against .main-nav directly — a z-index on .main-nav
     itself could never win that comparison. Keeping the backdrop below
     the header's own z-index (1000) is what keeps the drawer clickable. */
  .nav-backdrop{
    position:fixed; top:72px; right:0; bottom:0; left:0; background: rgba(6,7,13,.55);
    opacity:0; visibility:hidden; transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2); z-index:999;
  }
  .nav-backdrop.open{ opacity:1; visibility:visible; }
  .main-nav > ul{ flex-direction:column; align-items:stretch; padding:0 var(--space-3); gap:0; }
  .main-nav > ul > li{
    border-bottom:1px solid var(--navy-line); opacity:0; transform:translateX(16px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .main-nav.open > ul > li{ opacity:1; transform:none; }
  .main-nav.open > ul > li:nth-child(1){ transition-delay:.05s; }
  .main-nav.open > ul > li:nth-child(2){ transition-delay:.08s; }
  .main-nav.open > ul > li:nth-child(3){ transition-delay:.11s; }
  .main-nav.open > ul > li:nth-child(4){ transition-delay:.14s; }
  .main-nav.open > ul > li:nth-child(5){ transition-delay:.17s; }
  .main-nav.open > ul > li:nth-child(6){ transition-delay:.2s; }
  .main-nav.open > ul > li:nth-child(7){ transition-delay:.23s; }
  .main-nav.open > ul > li:nth-child(8){ transition-delay:.26s; }
  .main-nav > ul > li > a{ padding:16px 4px; font-size:1.05rem; color:#fff; -webkit-tap-highlight-color:transparent; }
  .main-nav > ul > li > a:active{ color: var(--gold); }
  /* Dropdown submenus are a desktop-hover affordance only — the mobile
     drawer stays a single flat list of top-level links. display:none
     (rather than the old reveal-on-tap accordion) keeps it out of the
     layout, tab order and screen-reader tree entirely, with no dead
     click-to-reveal step before a link becomes navigable. */
  .main-nav .dropdown{ display:none !important; }
  .mobile-nav-cta{ display:block; padding: var(--space-2) var(--space-3) 0; }
  .nav-toggle{ display:flex; }
  .header-cta .btn-gold{ display:none; }

  .split, .split-5-7, .split-7-5{ grid-template-columns:1fr; gap: var(--space-4); }
  .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid{ grid-template-columns: repeat(3,1fr); }
  .footer-top{
    grid-template-columns:1fr 1fr; gap: var(--space-4) var(--space-3);
    grid-template-areas: "brand brand" "explore involved" "contact contact";
  }
  .footer-top > div:nth-of-type(1){ padding-bottom: var(--space-3); border-bottom:1px solid var(--navy-line); }
  .arch-float{ display:none; }
  .hero-stats-inner{ grid-template-columns:1fr; gap: var(--space-2); text-align:center; }
}
@media (max-width: 600px){
  .container, .container-narrow{ padding:0 22px; }
  .section{ padding: var(--space-5) 0; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .g-wide{ grid-column: span 2; }
  .form-row{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; grid-template-areas: "brand" "explore" "involved" "contact"; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .footer-copy{ justify-content:center; }
  .event-row{ flex-direction:column; align-items:flex-start; }
  .lightbox-prev, .lightbox-next{ width:40px; height:40px; }
  .lightbox-close{ top:14px; right:14px; width:40px; height:40px; }
  .brand-name{ display:none; }
  .form-card{ padding: var(--space-3); }
  .btn-block{ white-space:normal; text-align:center; }
}