@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;1,9..144,500&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  color-scheme: light only;
  --ink:#0C0C0F;
  --forest:#2B0D42;
  --forest-2:#3A1358;
  --brass:#9B9BA1;
  --brass-light:#D7D6DC;
  --maroon:#54206F;
  --maroon-light:#7A3AA0;
  --ivory:#F7F6F9;
  --paper:#EBE9EF;
  --text:#1B1B1F;
  --text-soft:#5B5A63;
  --line-dark: rgba(247,246,249,0.16);
  --line-light: rgba(12,12,15,0.12);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; background:#F7F6F9;}
body{
  background:var(--ivory);
  color:var(--text);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.hdln{ font-family:'Fraunces', serif; font-weight:560; letter-spacing:-0.015em; line-height:1.04; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
@media(prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* consistent photographic tone across every image on the site */
.tone{position:relative; overflow:hidden;}
.tone::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(155deg, rgba(43,13,66,0.26), rgba(12,12,15,0.14) 60%);
  mix-blend-mode:multiply;
}
.tone img{filter:saturate(0.9) contrast(1.04);}

/* ---------- UTILITY BAR ---------- */
.utility{background:var(--ink); color:#B7B6BC; font-size:12.5px;}
.utility .wrap{display:flex; justify-content:space-between; align-items:center; padding:9px 32px; max-width:1160px;}
.utility a{color:#B7B6BC;}
.utility a:hover{color:var(--brass-light);}
.utility .u-left{display:flex; gap:22px;}
.utility .u-right{display:flex; gap:20px;}
@media(max-width:700px){ .utility .u-left span:nth-child(2){display:none;} }

/* ---------- NAV ---------- */
header.site{ position:sticky; top:0; z-index:50; background:var(--ivory); border-bottom:1px solid var(--line-light); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 32px; max-width:1160px; margin:0 auto; }
.brand{display:flex; align-items:center; gap:12px; color:var(--ink);}
.crest-img{width:42px; height:auto; flex-shrink:0;}
.brand-word{display:flex; flex-direction:column; line-height:1.1;}
.brand-name{font-family:'Fraunces'; font-weight:600; font-size:17px; letter-spacing:-0.01em;}
.brand-name em{font-style:normal; color:var(--maroon);}
.brand-sub{font-size:10.5px; letter-spacing:0.09em; color:var(--text-soft); margin-top:2px;}

nav.links{display:flex; gap:32px; align-items:center;}
nav.links a{color:var(--text); font-size:14.5px; font-weight:500; opacity:0.78; transition:opacity 0.15s, color 0.15s;}
nav.links a:hover{opacity:1; color:var(--maroon);}
.nav-cta{ border:1px solid var(--ink); padding:9px 20px; opacity:1 !important; font-weight:600; color:var(--ink) !important; }
.nav-cta:hover{background:var(--ink); color:var(--ivory) !important;}
.nav-toggle{display:none; background:none; border:none; color:var(--ink); font-size:24px; cursor:pointer;}

@media(max-width:860px){
  nav.links{
    position:fixed; top:101px; left:0; right:0; bottom:0; background:var(--ivory);
    flex-direction:column; justify-content:flex-start; padding:36px 32px; gap:24px;
    transform:translateX(100%); transition:transform 0.25s ease; overflow-y:auto; border-top:1px solid var(--line-light);
  }
  nav.links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  nav.links a{font-size:19px;}
}

/* ---------- HERO ---------- */
.hero{position:relative; background:var(--ivory); padding:56px 0 0;}
.hero-inner{ position:relative; max-width:1160px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:stretch; }
.hero-copy{padding-bottom:12px; display:flex; flex-direction:column; justify-content:center;}
.hero-eyebrow{ color:var(--maroon); font-weight:600; font-size:13px; letter-spacing:0.04em; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--line-light); display:inline-block; }
h1.hero-h{font-size:clamp(40px, 5vw, 64px); color:var(--ink);}
h1.hero-h .accent{color:var(--maroon); font-style:italic;}
.hero-sub{margin-top:24px; max-width:42ch; font-size:18px; color:var(--text-soft);}
.hero-ctas{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; align-items:center;}
.btn{ display:inline-block; padding:14px 24px; font-weight:600; font-size:14.5px; transition:all 0.15s; cursor:pointer; border:1px solid transparent; }
.btn-solid{background:var(--ink); color:var(--ivory);}
.btn-solid:hover{background:var(--forest-2);}
.btn-text{color:var(--ink); border-bottom:1px solid var(--ink); padding:14px 0;}
.btn-text:hover{color:var(--maroon); border-color:var(--maroon);}

.hero-photo{position:relative; min-height:460px;}
.hero-photo .frame{height:100%;}
.hero-photo .frame img{width:100%; height:100%; object-fit:cover;}
.hero-photo .tag{ position:absolute; bottom:-1px; left:-1px; background:var(--ink); color:var(--brass-light); font-family:'Fraunces'; font-size:14px; padding:10px 16px; z-index:2; }

.stat-strip{border-top:1px solid var(--line-light); margin-top:56px; background:var(--paper);}
.stat-strip .wrap{display:grid; grid-template-columns:repeat(3,1fr);}
.stat{padding:26px 24px; border-right:1px solid var(--line-light);}
.stat:last-child{border-right:none;}
.stat .num{font-family:'Fraunces'; font-weight:600; font-size:24px; color:var(--ink);}
.stat .lbl{font-size:12px; color:var(--text-soft); margin-top:5px;}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr; gap:36px;}
  .hero-photo{max-width:100%; min-height:280px;}
  .stat-strip .wrap{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2){border-right:none;}
}

/* ---------- SECTION BASICS ---------- */
section{padding:96px 0; background:#F7F6F9;}
#about, .training, #gallery, #coaches, .pillars{background:#F7F6F9;}
.levels{background:#0C0C0F !important;}
.testimonials, .community{background:#2B0D42 !important;}
.section-head{max-width:52ch; margin-bottom:50px;}
.kicker{color:#54206F; font-weight:600; font-size:13px; letter-spacing:0.03em; margin-bottom:12px;}
h2.hdln{font-size:clamp(29px,3.4vw,40px); color:#0C0C0F;}
.on-dark h2.hdln{color:#F7F6F9;}
.section-lead{margin-top:16px; font-size:16.5px; color:#5B5A63; max-width:58ch;}
.on-dark .section-lead{color:#CBC9D1;}

/* ---------- ABOUT ---------- */
.about{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
.about-media{position:sticky; top:114px;}
.about-media .frame-a{aspect-ratio:4/5;}
.about-media .frame-a img{width:100%; height:100%; object-fit:cover;}
.about-media .caption{margin-top:14px; font-size:12.5px; color:var(--text-soft); border-top:1px solid var(--line-light); padding-top:12px;}
.about p{font-size:16.5px; color:#5B5A63; margin-top:18px;}
.about p:first-of-type{margin-top:0; font-size:19px; color:#1B1B1F; font-family:'Fraunces'; font-weight:500; line-height:1.4;}
.value-list{margin-top:32px; border-top:1px solid var(--line-light);}
.value-list div{ display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line-light); font-size:15px; }
.value-list div span:first-child{font-weight:600; color:#0C0C0F;}
.value-list div span:last-child{color:#5B5A63; text-align:right;}
.crest-badge{display:flex; align-items:center; gap:14px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line-light);}
.crest-badge img{width:52px; height:auto;}
.crest-badge span{font-size:12.5px; color:var(--text-soft); max-width:32ch;}

@media(max-width:860px){ .about{grid-template-columns:1fr;} .about-media{position:static; max-width:340px;} }

/* ---------- WHY FAMILIES CHOOSE US ---------- */
.pillars{background:var(--paper); border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);}
.pillar-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:8px; border-top:1px solid var(--line-light);}
.pillar{padding:32px 28px 32px 0; border-right:1px solid var(--line-light);}
.pillar:last-child{border-right:none;}
.pillar .pn{font-family:'Fraunces'; font-size:13px; color:var(--maroon); margin-bottom:14px;}
.pillar h4{font-family:'Fraunces'; font-weight:600; font-size:18px; color:var(--ink);}
.pillar p{font-size:14px; color:var(--text-soft); margin-top:10px;}
@media(max-width:900px){ .pillar-grid{grid-template-columns:1fr 1fr;} .pillar{border-bottom:1px solid var(--line-light); padding-bottom:26px; padding-top:26px;} }
@media(max-width:560px){ .pillar-grid{grid-template-columns:1fr;} .pillar{border-right:none;} }

/* ---------- PROGRAM LEVELS (plaque list) ---------- */
.levels{background:var(--ink); color:var(--ivory);}
.level-list{border-top:1px solid var(--line-dark); margin-top:32px;}
.level-row{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; padding:32px 0; border-bottom:1px solid var(--line-dark); }
.level-row .grade{font-family:'Fraunces'; font-size:14.5px; color:var(--brass-light);}
.level-row h3{font-family:'Fraunces'; font-weight:600; font-size:23px;}
.level-row p{font-size:15px; color:#C4C3CA; max-width:48ch;}
@media(max-width:760px){ .level-row{grid-template-columns:1fr; gap:14px;} }

/* ---------- COACHES ---------- */
.coach-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); margin-top:8px;}
.coach-card{background:var(--ivory); padding:36px; display:flex; flex-direction:column; gap:18px;}
.coach-photo{aspect-ratio:2/3; max-width:200px;}
.coach-photo img{width:100%; height:100%; object-fit:cover;}
.coach-card h3{font-family:'Fraunces'; font-weight:600; font-size:20px; color:var(--ink);}
.coach-role{color:var(--maroon); font-weight:600; font-size:12.5px; margin-top:3px;}
.coach-card p{margin-top:2px; font-size:14.5px; color:var(--text-soft);}
@media(max-width:700px){ .coach-grid{grid-template-columns:1fr;} }
.sideline{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px;}
.sideline .tone{aspect-ratio:2/3;}
.sideline img{width:100%; height:100%; object-fit:cover;}
.sideline-cap{font-size:12.5px; color:var(--text-soft); margin-top:36px; text-align:center;}
@media(max-width:700px){ .sideline{grid-template-columns:1fr;} }

/* ---------- TESTIMONIALS ---------- */
.testimonials{background:var(--forest); color:var(--ivory);}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:8px; align-items:start;}
.testi{border-top:2px solid var(--brass); padding-top:22px;}
.testi p{font-family:'Fraunces'; font-style:italic; font-size:17px; line-height:1.5; color:#EFEDF3;}
.testi .who{margin-top:18px; font-size:13px; color:var(--brass-light); font-weight:600;}
.testi-more{display:inline-block; margin-top:12px; font-size:12.5px; color:#B8B6C1; text-decoration:underline; background:none; border:none; cursor:pointer; font-family:'Work Sans'; padding:0;}
.testi-more:hover{color:var(--brass-light);}
.testi-full{display:none;}
.testi-full.open{display:block;}
.testi-excerpt.hidden{display:none;}
@media(max-width:860px){ .testi-grid{grid-template-columns:1fr; gap:36px;} }

/* ---------- TRAINING BAND ---------- */
.training{background:var(--paper); border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);}
.training .wrap{display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center;}
.training-media{display:flex; justify-content:center;}
.training-media img{width:100%; height:100%; object-fit:cover;}
.training-video{width:100%; max-width:420px; aspect-ratio:9/16; background:#000; border-radius:4px; box-shadow:0 10px 30px rgba(12,12,15,0.18);}
.training p{margin-top:16px; font-size:16.5px; color:var(--text-soft); max-width:46ch;}
.training .btn{margin-top:26px;}
@media(max-width:860px){ .training .wrap{grid-template-columns:1fr;} .training-media{order:-1; max-width:420px;} }

/* ---------- GALLERY ---------- */
.gallery-strip{display:flex; gap:20px; overflow-x:auto; padding:8px 4px 22px; scroll-snap-type:x proximity;}
.gallery-strip .tone{height:280px; width:auto; flex:0 0 auto; scroll-snap-align:start;}
.gallery-strip img{height:100%; width:auto;}
.gallery-strip::-webkit-scrollbar{height:6px;}.gallery-strip::-webkit-scrollbar-thumb{background:var(--maroon);}
.gallery-strip::-webkit-scrollbar-track{background:var(--paper);}

/* ---------- COMMUNITY ---------- */
.community{background:var(--forest); color:var(--ivory);}
.community-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px;}
.community-grid .tone{aspect-ratio:5/4;}
.community-grid img{width:100%; height:100%; object-fit:cover;}
@media(max-width:700px){ .community-grid{grid-template-columns:1fr;} }

/* ---------- REGISTER ---------- */
.register{background:var(--maroon); color:var(--ivory);}
.register .wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
.register h2.hdln{color:var(--ivory);}
.fee-box{border-top:1px solid rgba(247,246,249,0.4); border-bottom:1px solid rgba(247,246,249,0.4); padding:20px 0; margin-top:26px;}
.fee-box .fee{font-family:'Fraunces'; font-weight:600; font-size:25px;}
.fee-box .fee-note{font-size:13px; margin-top:5px; color:#E7DAEF;}
.mini-steps{list-style:none; counter-reset:step; margin-top:34px;}
.mini-steps li{counter-increment:step; padding:12px 0; display:flex; gap:14px; align-items:baseline; font-size:14px; color:#E7DAEF;}
.mini-steps li::before{content:counter(step); font-family:'Fraunces'; font-size:13px; color:var(--brass-light); flex-shrink:0; width:16px;}

/* -- form card -- */
.reg-card{background:var(--ivory); color:var(--text); padding:38px; border-top:3px solid var(--brass);}
.reg-card h3{font-family:'Fraunces'; font-weight:600; font-size:20px; color:var(--ink);}
.reg-card .reg-sub{font-size:13.5px; color:var(--text-soft); margin-top:6px;}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px;}
.f-grid.three{grid-template-columns:1fr 1fr 1fr;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:12.5px; font-weight:600; color:var(--ink); letter-spacing:0.01em;}
.field input, .field select{
  border:1px solid var(--line-light); background:#fff; padding:11px 12px; font-family:'Work Sans'; font-size:14.5px;
  color:var(--text); outline-offset:2px;
}
.field input:focus, .field select:focus{outline:2px solid var(--maroon); border-color:var(--maroon);}
.field-note{font-size:12px; color:var(--text-soft); margin-top:24px;}
.waiver{
  margin-top:22px; padding:16px; background:var(--paper); border:1px solid var(--line-light);
  display:flex; gap:12px; align-items:flex-start; font-size:12.5px; color:var(--text-soft); line-height:1.55;
}
.waiver input[type="checkbox"]{margin-top:3px; width:16px; height:16px; flex-shrink:0; accent-color:var(--maroon);}
.reg-card .btn-solid{background:var(--ink); color:var(--ivory); margin-top:24px; width:100%; text-align:center; border:none; font-family:'Work Sans'; cursor:pointer;}
.reg-card .btn-solid:hover{background:var(--forest-2);}
.reg-card .btn-solid:disabled{opacity:0.5; cursor:not-allowed;}
.reg-tabs{display:flex; gap:0; margin-bottom:0;}
.reg-tab{flex:1; padding:16px 20px; text-align:center; font-family:'Fraunces'; font-weight:600; font-size:15px; color:var(--text-soft); background:var(--paper); border:none; cursor:pointer; border-top:3px solid transparent;}
.reg-tab.active{background:var(--ivory); color:var(--ink); border-top:3px solid var(--brass);}
.reg-panel{display:none;}
.reg-panel.active{display:block;}
.form-status{margin-top:16px; font-size:13.5px; display:none; padding:12px 14px; border-left:3px solid var(--brass); color:#0C0C0F;}
.form-status.show{display:block;}
.form-status.success{background:#F0EEF3; color:#0C0C0F; border-left-color:#2B0D42;}
.form-status.error{background:#F5E8EE; color:#0C0C0F; border-left-color:#7A3AA0;}
.admin-row{margin-top:44px; padding-top:28px; border-top:1px solid rgba(247,246,249,0.25);}
.admin-link{background:none; border:none; color:#E7DAEF; font-size:12.5px; text-decoration:underline; cursor:pointer; padding:0;}
.admin-link:hover{color:var(--brass-light);}
.admin-panel{display:none; margin-top:20px;}
.admin-panel.open{display:block;}
.admin-entry{background:var(--ivory); color:var(--text); padding:16px 18px; margin-bottom:10px; font-size:13.5px; border-left:3px solid var(--brass);}
.admin-entry .ae-name{font-weight:700; color:var(--ink);}
.admin-entry .ae-row{color:var(--text-soft); margin-top:3px;}
.admin-empty{color:#E7DAEF; font-size:13.5px;}
@media(max-width:860px){ .register .wrap{grid-template-columns:1fr;} }
@media(max-width:560px){ .f-grid, .f-grid.three{grid-template-columns:1fr;} .reg-card{padding:28px 22px;} }

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:var(--ivory); padding:72px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:44px;}
.foot-brand p{margin-top:16px; color:#9E9DA5; font-size:14px; max-width:34ch;}
.foot-brand .brand-name{font-size:18px; color:var(--ivory);}
.foot-brand .brand-sub{color:#8F8E97;}
footer h5{font-size:12.5px; color:var(--brass-light); font-weight:600; margin-bottom:16px; letter-spacing:0.03em;}
footer .flinks a{display:block; color:#CBC9D1; font-size:14.5px; margin-bottom:11px;}
footer .flinks a:hover{color:var(--brass-light);}
.foot-bottom{ border-top:1px solid var(--line-dark); margin-top:52px; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:#7E7D85; }
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:36px;} }
/* ---------- SMALL-SCREEN / MOBILE POLISH ---------- */
@media(max-width:600px){
  /* Tighter horizontal padding so content isn't cramped */
  .wrap{padding:0 20px;}
  .utility .wrap{padding:8px 20px;}
  .hero-inner{padding:0 20px;}

  /* Roomier vertical rhythm without huge gaps */
  section{padding:60px 0;}
  .hero{padding:36px 0 0;}
  .section-head{margin-bottom:34px;}

  /* Typography that fits narrow screens */
  h1.hero-h{font-size:clamp(32px, 8.5vw, 44px); line-height:1.08;}
  .hero-sub{font-size:16px; margin-top:18px;}
  .hero-ctas{margin-top:26px;}
  h2.hdln{font-size:clamp(25px, 6.8vw, 32px); line-height:1.12;}
  .section-lead{font-size:15.5px;}

  /* Full-width tappable buttons */
  .hero-ctas{gap:12px;}
  .hero-ctas .btn{width:100%; text-align:center; padding:15px 20px;}
  .register .btn-solid, #regSubmit, #returningSubmit{width:100%;}

  /* Stat strip stacks to a single column and reads cleanly */
  .stat-strip .wrap{grid-template-columns:1fr;}
  .stat{border-right:none; border-bottom:1px solid var(--line-light); text-align:center; padding:20px;}
  .stat:last-child{border-bottom:none;}

  /* Photos taller-friendly & scroll hint */
  .gallery-strip{gap:14px; padding-left:20px; padding-right:20px;}
  .gallery-strip .tone{height:230px;}

  /* Coaches / community media sizing */
  /* Show sideline & community photos in full on mobile (no cropping) */
  .sideline .tone, .community-grid .tone{aspect-ratio:auto;}
  .sideline .tone img, .community-grid .tone img{width:100%; height:auto; object-fit:contain; display:block;}
  .coach-photo{aspect-ratio:auto; max-width:100%;}
  .coach-photo img{width:100%; height:auto; object-fit:contain; display:block;}

  /* Forms: comfortable inputs, no zoom-on-focus (16px min) */
  .reg-card{padding:24px 18px;}
  .field input, .field select{font-size:16px; padding:12px 14px;}
  .reg-tabs .reg-tab{font-size:14px; padding:12px 8px;}
  .waiver{font-size:13.5px;}

  /* Instagram embeds fill the width */

  /* Compact header on phones */
  .nav{padding:12px 20px;}
  .crest-img{width:36px;}
  .brand-sub{font-size:9.5px;}

  /* Nav drawer opens below the compact header */
  nav.links{top:60px; padding-top:32px;}
}

/* Extra-small phones */
@media(max-width:380px){
  .wrap{padding:0 16px;}
  h1.hero-h{font-size:30px;}
  .brand-name{font-size:15px;}
}