/* ==========================================================================
   NORTH FORK UNITED SOCCER CLUB
   01 Fonts · 02 Tokens · 03 Base · 04 Reveal & motion · 05 Type system
   06 Header & nav · 07 Buttons & links · 08 Marquee · 09 Home hero
   10 Shared sections · 11 Home sections · 12 Page heroes · 13 Programs
   14 About · 15 Season · 16 Contact · 17 Footer · 18 404 · 19 Media queries
   ========================================================================== */

/* 01 · FONTS ------------------------------------------------------------- */
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-500.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-800.ttf") format("truetype");font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("assets/fonts/barlow-italic-700.ttf") format("truetype");font-style:italic;font-weight:700;font-display:swap}
@font-face{font-family:"Manrope";src:url("assets/fonts/manrope-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url("assets/fonts/manrope-600.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url("assets/fonts/manrope-700.ttf") format("truetype");font-weight:700;font-display:swap}

/* 02 · TOKENS ------------------------------------------------------------ */
:root{
  --ink:#071b29;
  --paper:#f3f6f7;
  --blue:#a9d6f0;
  --green:#8be234;
  --wash:#e8eee9;
  --text-soft:#4b5b64;
  --text-muted:#68736d;
  --on-green:#2f5e0c;
  --line:rgba(7,27,41,.16);
  --line-strong:rgba(7,27,41,.22);
  --shadow:0 10px 24px rgba(7,27,41,.12);
  --shadow-lift:0 22px 44px rgba(7,27,41,.18);
  --radius:4px;
  --condensed:"Barlow Condensed",Arial Narrow,sans-serif;
  --sans:"Manrope",Helvetica,Arial,sans-serif;
}

/* 03 · BASE -------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;
  background-color:var(--paper);
  background-image:linear-gradient(rgba(7,27,41,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(7,27,41,.018) 1px,transparent 1px);
  background-size:32px 32px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
}
body.menu-open{overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
.tabular{font-variant-numeric:tabular-nums}
.skip-link{position:fixed;z-index:1000;top:8px;left:8px;transform:translateY(-150%);background:#fff;padding:10px 16px;text-decoration:none;font-weight:700}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid #e7ff57;outline-offset:3px}

/* 04 · REVEAL & MOTION --------------------------------------------------- */
.reveal{opacity:1;transform:none}
.reveal.visible{animation:content-in .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes content-in{from{opacity:.25;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Staggered cascade for groups of revealed siblings */
.program-list .reveal:nth-child(2),
.value-grid .reveal:nth-child(2),
.field-grid .reveal:nth-child(2),
.program-detail .reveal:nth-child(2),
.schedule .reveal:nth-child(2),
.principles .reveal:nth-child(2){animation-delay:.07s}
.program-list .reveal:nth-child(3),
.value-grid .reveal:nth-child(3),
.field-grid .reveal:nth-child(3),
.program-detail .reveal:nth-child(3),
.schedule .reveal:nth-child(3),
.principles .reveal:nth-child(3){animation-delay:.14s}
.program-list .reveal:nth-child(4),
.program-detail .reveal:nth-child(4),
.schedule .reveal:nth-child(4){animation-delay:.21s}
.program-list .reveal:nth-child(5),
.program-detail .reveal:nth-child(5){animation-delay:.28s}

/* 05 · TYPE SYSTEM ------------------------------------------------------- */
.hero h1,.section h2,.page-hero h1,.contact-title h1,.mini-cta h2,.error-page h1{
  font-family:var(--condensed);
  text-transform:uppercase;
  letter-spacing:0;
  line-height:.86;
  margin:0;
  font-weight:800;
  text-wrap:balance;
}
.hero h1 em,.section h2 em,.page-hero h1 em,.contact-title h1 em,.mini-cta h2 em,.error-page h1 em,
.hero h1 i,.section h2 i,.page-hero h1 i,.contact-title h1 i,.mini-cta h2 i,.error-page h1 i{
  font-style:italic;
  font-weight:700;
}
.hero h1 em,.page-hero h1 em,.error-page h1 em{color:var(--green)}
.eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;margin:0 0 20px;color:var(--green)}
.eyebrow.dark{color:var(--on-green)}

/* 06 · HEADER & NAV ------------------------------------------------------ */
.site-header{
  height:76px;
  padding:0 4vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(243,246,247,.91);
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 35px rgba(7,27,41,.05);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--condensed);text-transform:uppercase;font-size:20px;line-height:.9}
.brand img{width:52px;height:52px;mix-blend-mode:multiply}
.brand strong{display:block;font-size:25px}
.site-nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.site-nav a{text-decoration:none}
/* Underline animation is scoped away from .nav-cta — a bare `background`
   shorthand here would wipe the button's fill. */
.site-nav>a:not(.nav-cta){
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%;
  background-size:0 2px;
  padding-bottom:4px;
  transition:background-size .25s ease,color .2s ease;
}
.site-nav>a:not(.nav-cta):hover,.site-nav>a:not(.nav-cta):focus-visible,
.site-nav>a.active-link:not(.nav-cta),.site-nav>a[aria-current="page"]:not(.nav-cta){background-size:100% 2px}
.nav-cta{background:var(--ink);color:#fff;padding:13px 25px;border-radius:var(--radius);box-shadow:0 8px 22px rgba(7,27,41,.16);transition:background .2s ease}
.nav-cta:hover{background:#183b51}
.menu-toggle{display:none;border:0;background:none;width:44px;height:44px;padding:10px;cursor:pointer}
.menu-toggle span{display:block;height:2px;background:var(--ink);margin:7px 0}

/* 07 · BUTTONS & LINKS --------------------------------------------------- */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:50px;
  padding:0 23px;
  text-decoration:none;
  text-transform:uppercase;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  border-radius:var(--radius);
  white-space:nowrap;
  box-shadow:var(--shadow);
  transition:transform .2s,background .2s,box-shadow .2s;
}
.button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.button:active{transform:translateY(1px);box-shadow:var(--shadow)}
.button span[aria-hidden]{display:inline-block;transition:transform .2s ease}
.button:hover span[aria-hidden]{transform:translate(3px,-3px)}
.button-primary{background:var(--green);color:#10200b}
.button-primary:hover{background:#a6f457}
.button-ghost{border:1px solid rgba(255,255,255,.65);color:#fff;background:rgba(0,0,0,.18)}
.button-dark{background:var(--ink);color:#fff}
.button-dark:hover{background:#183b51}
.text-link{display:inline-flex;gap:40px;text-transform:uppercase;font-size:12px;font-weight:700;text-underline-offset:7px}

/* 08 · MARQUEE ----------------------------------------------------------- */
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:15px 0;border-block:1px solid rgba(255,255,255,.08)}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee-group{
  display:flex;
  align-items:center;
  gap:2.5rem;
  padding-right:2.5rem;
  font:600 clamp(16px,2vw,25px) var(--condensed);
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
}
.marquee-group b{color:var(--green);font-weight:700}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* 09 · HOME HERO --------------------------------------------------------- */
.hero{position:relative;min-height:calc(100dvh - 76px);color:#fff;display:flex;align-items:center;overflow:hidden}
.hero-image,.hero-shade{position:absolute;inset:0}
.hero-image{object-position:center 43%;animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translate(1.4%,-1.2%)}}
.hero-shade{background:linear-gradient(90deg,rgba(3,16,25,.94) 0%,rgba(3,16,25,.62) 45%,rgba(3,16,25,.08) 78%),linear-gradient(0deg,rgba(3,16,25,.65),transparent 55%)}
.hero-outline{
  position:absolute;
  left:-1vw;
  bottom:3%;
  z-index:1;
  pointer-events:none;
  user-select:none;
  font:800 clamp(110px,21vw,330px)/.75 var(--condensed);
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.16);
}
.hero-content{position:relative;z-index:2;width:min(92%,1400px);margin:auto;padding:40px 0 125px}
.hero-content>*{opacity:0;animation:hero-in .75s cubic-bezier(.2,.7,.2,1) forwards}
.hero-content>*:nth-child(1){animation-delay:.05s}
.hero-content>*:nth-child(2){animation-delay:.16s}
.hero-content>*:nth-child(3){animation-delay:.27s}
.hero-content>*:nth-child(4){animation-delay:.38s}
@keyframes hero-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(58px,11vw,150px);line-height:.82;max-width:1100px;overflow-wrap:break-word}
.hero-content>p:not(.eyebrow){max-width:510px;font-size:19px;line-height:1.65;margin:26px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{
  position:absolute;
  z-index:3;
  right:max(4vw,calc((100vw - 1400px)/2));
  bottom:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(145px,1fr));
  background:rgba(7,27,41,.45);
  backdrop-filter:blur(14px);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.28);
  box-shadow:0 -16px 45px rgba(3,16,25,.28);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-stats{background:rgba(7,27,41,.92)}
}
.hero-stats div{padding:23px 28px;border-left:1px solid rgba(255,255,255,.2)}
.hero-stats strong{font:800 36px/1 var(--condensed);display:block;font-variant-numeric:tabular-nums}
.hero-stats span{font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.82)}
.scroll-hint{
  position:absolute;left:4vw;bottom:32px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:rgba(255,255,255,.75);transition:color .2s;
}
.scroll-hint:hover{color:#fff}
.scroll-hint::after{content:"";width:1px;height:46px;background:linear-gradient(rgba(255,255,255,.85),transparent);transform-origin:top;animation:scroll-pulse 2.2s ease-in-out infinite}
@keyframes scroll-pulse{0%,100%{transform:scaleY(.3);opacity:.45}50%{transform:scaleY(1);opacity:1}}

/* 10 · SHARED SECTIONS --------------------------------------------------- */
.section{padding:clamp(80px,10vw,150px) 4vw;max-width:1600px;margin-inline:auto}
.programs,.season,.values,.fields,.join,.mini-cta,.impact{max-width:none}
.section-heading{max-width:1050px}
.section-heading>p{max-width:660px;font-size:20px;margin:35px 0 65px}
.section h2{font-size:clamp(48px,6.7vw,105px)}
.big-mark{position:absolute;top:-20px;right:0;font:800 clamp(110px,16vw,250px)/1 var(--condensed);color:rgba(7,27,41,.045);z-index:-1}

/* 11 · HOME SECTIONS ----------------------------------------------------- */
.intro-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:8vw;align-items:end}
.photo-tall{height:min(72vw,740px);margin:0}
.photo-tall img{object-position:center}
.principles article{display:grid;grid-template-columns:52px 1fr;gap:0 15px;padding:26px 0;border-top:1px solid var(--line)}
.principles article:last-child{border-bottom:1px solid var(--line)}
.principles span{grid-row:1/3;font-weight:700;color:var(--text-soft)}
.principles h3{font-family:var(--condensed);text-transform:uppercase;font-weight:700;font-size:29px;margin:0}
.principles p{margin:5px 0 0;max-width:440px;color:var(--text-soft)}

.programs{
  background-color:var(--blue);
  background-image:linear-gradient(rgba(7,27,41,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(7,27,41,.055) 1px,transparent 1px);
  background-size:54px 54px;
}
.programs-title{max-width:900px}
.age-filter{display:flex;gap:6px;flex-wrap:wrap;margin:50px 0 45px}
.age-filter button{
  border:1px solid rgba(7,27,41,.45);background:transparent;border-radius:var(--radius);
  padding:11px 17px;font:700 12px var(--sans);text-transform:uppercase;cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.age-filter button:hover{background:var(--ink);color:#fff}
.age-filter button:active{transform:translateY(1px)}
.age-filter button.active{background:var(--ink);color:#fff}
.program-list{max-width:1400px;margin-inline:auto}
.program-row{
  display:grid;
  grid-template-columns:clamp(72px,6vw,110px) 1fr 190px;
  gap:25px;
  align-items:center;
  padding:28px 0;
  border-top:1px solid var(--line-strong);
  transition:background .25s ease,padding .25s ease;
}
.program-row:last-child{border-bottom:1px solid var(--line-strong)}
.program-row.is-hidden{display:none}
.program-row:hover{background:rgba(255,255,255,.42);padding-inline:22px}
.program-number{
  font:800 clamp(44px,5vw,72px)/1 var(--condensed);
  color:transparent;
  -webkit-text-stroke:1.5px rgba(7,27,41,.55);
  font-variant-numeric:tabular-nums;
}
.program-row h3{font:700 52px/.9 var(--condensed);text-transform:uppercase;margin:0}
.program-row p{max-width:580px;margin:10px 0 0}
.program-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.program-meta a{
  width:48px;height:48px;border:1px solid var(--ink);display:grid;place-items:center;
  text-decoration:none;font-size:22px;border-radius:var(--radius);
  transition:background .2s,transform .2s;
}
.program-meta a:hover{background:var(--green);transform:translate(2px,-2px)}
.program-note{max-width:1400px;margin:28px auto 0;font-size:12px;font-weight:600;color:var(--text-soft)}

.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:8vw;align-items:center}
.feature-image{height:min(62vw,720px);margin-left:-4vw}
.feature-copy{position:relative;padding-top:70px}
.feature h2{font-size:clamp(46px,5.5vw,84px)}
.feature p{max-width:540px;font-size:19px;line-height:1.75;margin:30px 0}

.photo-tall,.feature-image,.community-photo,.page-hero>img,.impact>img,.contact-photo{overflow:hidden}
.photo-tall img,.feature-image img,.community-photo img,.page-hero>img,.impact>img,.contact-photo img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.photo-tall:hover img,.feature-image:hover img,.community-photo:hover img{transform:scale(1.025)}

.season{display:grid;grid-template-columns:.78fr 1.22fr;gap:9vw;background:var(--wash)}
.season-lead{position:sticky;top:110px;align-self:start}
.season-lead p{font-size:18px;max-width:430px;margin-top:30px}
.schedule article{
  display:grid;grid-template-columns:clamp(96px,8.5vw,124px) 1fr;gap:26px;
  padding:28px 0;border-bottom:1px solid var(--line);align-items:center;
  transition:background .25s ease,box-shadow .25s ease;
}
.schedule article:first-child{border-top:1px solid var(--line)}
.schedule article:hover{background:rgba(7,27,41,.03)}
.schedule article.is-next{background:rgba(7,27,41,.045);box-shadow:inset 3px 0 0 var(--green)}
.schedule time{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:var(--ink);color:#fff;padding:13px 8px;border-radius:var(--radius);
}
.schedule time strong{font:800 clamp(34px,3.6vw,46px)/.9 var(--condensed);font-variant-numeric:tabular-nums}
.schedule time span{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--blue)}
.schedule h3{font:700 28px/1 var(--condensed);text-transform:uppercase;margin:0}
.schedule article.is-next h3::before{
  content:"Next up";display:block;margin-bottom:6px;
  font:800 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-green);
}
.schedule p{margin:7px 0 0;color:var(--text-soft)}

.community{padding-top:0;display:grid;grid-template-columns:1.25fr .75fr;gap:7vw;align-items:center}
.community-photo{height:min(55vw,680px)}
blockquote{position:relative;margin:0}
blockquote::before{
  content:"\201C";position:absolute;top:-.42em;left:-.07em;z-index:-1;
  font:800 280px/1 var(--condensed);color:rgba(7,27,41,.07);
}
blockquote p{position:relative;font:700 clamp(32px,3.5vw,57px)/1.05 var(--condensed);text-transform:uppercase;margin:0}
blockquote footer{margin-top:30px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
blockquote footer span{display:block;color:var(--text-muted);font-weight:400;text-transform:none;letter-spacing:0;margin-top:3px}

.join{background:var(--green);display:grid;grid-template-columns:1.25fr .75fr;gap:10vw;align-items:end}
.join h2{font-size:clamp(58px,8vw,122px)}
.join-copy>p:not(.eyebrow){font-size:19px;max-width:560px;margin:30px 0}
.contact-block{border-left:1px solid rgba(7,27,41,.3);padding-left:45px}
.contact-block h3{font:700 35px var(--condensed);text-transform:uppercase;margin:0 0 20px}
.contact-block a{font-weight:700;overflow-wrap:anywhere}
.contact-block p{margin:25px 0}
.contact-block .nonprofit{font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:.04em;margin-top:50px}

/* 12 · PAGE HEROES ------------------------------------------------------- */
.page-hero{min-height:calc(100dvh - 76px);display:grid;grid-template-columns:1fr 1fr;background:var(--blue);position:relative}
.page-hero>div{padding:clamp(65px,8vw,130px) 4vw;align-self:center;position:relative;z-index:1}
.page-hero>div:after{
  content:"";position:absolute;width:clamp(150px,18vw,280px);aspect-ratio:1;
  border:1px solid rgba(7,27,41,.13);border-radius:50%;right:-8%;bottom:5%;
  box-shadow:0 0 0 40px rgba(7,27,41,.025),0 0 0 80px rgba(7,27,41,.018);z-index:-1;
}
.page-hero h1{font-size:clamp(60px,7.8vw,122px)}
.page-hero>div>p:not(.eyebrow),.contact-title>p:not(.eyebrow){max-width:520px;font-size:19px;margin:28px 0}
.page-hero>img{min-height:calc(100dvh - 76px)}

/* 13 · PROGRAMS PAGE ----------------------------------------------------- */
.program-detail{padding-top:30px;counter-reset:detail}
.detail-row{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:75px 0;border-bottom:1px solid var(--line);max-width:1400px;margin:auto}
.detail-row:nth-child(even)>div:first-child{padding-left:7vw}
.detail-row>div:first-child::before{
  counter-increment:detail;content:"0" counter(detail);display:block;margin-bottom:14px;
  font:800 clamp(64px,7vw,110px)/.8 var(--condensed);color:transparent;
  -webkit-text-stroke:1.5px rgba(7,27,41,.42);
}
.detail-row>div:first-child span,.contact-options span{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.detail-row h2{font-size:clamp(45px,5vw,78px);margin-top:16px}
.detail-row p{font-size:18px;line-height:1.75;max-width:570px;margin-top:0}
.detail-row ul{padding-left:19px;margin:25px 0 30px}
.detail-row li{margin:7px 0}
.mini-cta{background:var(--ink);color:#fff;text-align:center;padding:clamp(75px,10vw,140px) 20px}
.mini-cta h2{font-size:clamp(48px,7vw,100px);line-height:.9}
.mini-cta p{font-size:18px;margin:25px auto 30px;max-width:600px;color:rgba(255,255,255,.82)}
.decision-info>h2{margin-bottom:50px}
.decision-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);max-width:1400px}
.decision-grid article{background:var(--paper);padding:38px}
.decision-grid h3{font:700 36px var(--condensed);text-transform:uppercase;margin:0 0 12px}
.decision-grid p{max-width:520px;margin:0;color:var(--text-soft)}

/* 14 · ABOUT PAGE -------------------------------------------------------- */
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:9vw}
.story h2{font-size:clamp(48px,6vw,90px)}
.story-copy .lead{font-size:25px;color:var(--ink)}
.story-copy p{font-size:18px;line-height:1.75;color:var(--text-soft);margin:0 0 25px}
.values{background:var(--wash)}
.values>h2{margin-bottom:60px}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);max-width:1400px;margin:auto}
.value-grid article{background:var(--wash);padding:40px;transition:background .25s,transform .25s}
.value-grid article:hover{background:#dce7eb;transform:translateY(-4px)}
.value-grid strong{font-size:12px}
.value-grid h3{font:700 40px var(--condensed);text-transform:uppercase;margin:45px 0 15px}
.impact{display:grid;grid-template-columns:1.4fr .6fr;min-height:670px}
.impact div{background:var(--blue);padding:6vw;display:flex;flex-direction:column;justify-content:center}
.impact div span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:55px}
.impact div strong{font:700 clamp(36px,4vw,65px)/1.25 var(--condensed);text-transform:uppercase;border-top:1px solid rgba(7,27,41,.3);padding:18px 0;font-variant-numeric:tabular-nums}

/* 15 · SEASON PAGE ------------------------------------------------------- */
.calendar-page{display:grid;grid-template-columns:.75fr 1.25fr;gap:9vw}
.calendar-page>div:first-child p{font-size:18px;line-height:1.75;max-width:420px}
.fields{background:var(--wash)}
.fields>h2{margin-bottom:55px}
.field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);max-width:1400px;margin:auto}
.field-grid article{background:var(--wash);padding:38px;transition:background .25s,transform .25s}
.field-grid article:hover{background:#dce7eb;transform:translateY(-4px)}
.field-grid h3{font:700 32px/1 var(--condensed);text-transform:uppercase;margin:0 0 20px}
.field-grid a{display:inline-block;margin-top:25px;font-size:12px;font-weight:700;text-transform:uppercase}

/* 16 · CONTACT PAGE ------------------------------------------------------ */
.contact-page{
  min-height:calc(100dvh - 76px);display:grid;grid-template-columns:1fr 1fr;gap:9vw;
  padding:clamp(70px,8vw,125px) 4vw;background:var(--green);align-items:center;
}
.contact-title h1{font-size:clamp(60px,7.8vw,122px)}
.contact-options article{padding:26px 0;border-top:1px solid rgba(7,27,41,.3);transition:padding-left .25s}
.contact-options article:hover{padding-left:12px}
.contact-options h2{font:700 clamp(25px,2.4vw,38px)/1.1 var(--condensed);text-transform:uppercase;margin:12px 0;overflow-wrap:anywhere}
.contact-photo{height:70vh;max-height:760px}
.contact-photo img{object-position:center 42%}
.contact-form{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:-35px}
.contact-form .wide{grid-column:1/-1}
.contact-form label{display:block;font-size:10px;text-transform:uppercase;font-weight:700;letter-spacing:.1em;margin-bottom:7px}
.contact-form label:has(+ input[required])::after,.contact-form label:has(+ textarea[required])::after{content:" *";color:var(--on-green)}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;border:1px solid rgba(7,27,41,.45);background:rgba(255,255,255,.55);
  border-radius:var(--radius);padding:12px;font:inherit;color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(7,27,41,.14);
}
.contact-form input:user-invalid,.contact-form textarea:user-invalid{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.contact-form textarea{resize:vertical}
.contact-form button{border:0;cursor:pointer;justify-self:start;font-family:var(--sans)}
.form-status{font-size:12px;font-weight:700;margin:0}
.form-status:not(:empty){color:var(--ink)}

/* 17 · FOOTER ------------------------------------------------------------ */
.site-footer{
  padding:70px 4vw 35px;background:#061824;color:#fff;
  display:grid;grid-template-columns:150px 1fr auto;gap:40px;align-items:end;
}
.footer-brand img{width:100px;height:100px;mix-blend-mode:screen}
.site-footer>div>p{font:700 30px var(--condensed);text-transform:uppercase;margin:0 0 20px}
.site-footer nav{display:flex;gap:25px}
.site-footer nav a{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.copyright{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#a8b0ac}

/* 18 · 404 --------------------------------------------------------------- */
.error-page{
  position:relative;overflow:hidden;
  min-height:calc(100dvh - 76px);background:var(--ink);color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,10vw,150px) 4vw;
}
.error-page>*{position:relative;z-index:1}
.error-code{
  position:absolute;right:1vw;top:50%;transform:translateY(-50%);z-index:0;
  pointer-events:none;user-select:none;
  font:800 clamp(200px,34vw,560px)/.7 var(--condensed);
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.1);
}
.error-page h1{font-size:clamp(52px,7vw,110px)}
.error-page p:not(.eyebrow){font-size:19px;max-width:520px;margin:26px 0 32px;color:rgba(255,255,255,.8)}

/* 19 · MEDIA QUERIES ----------------------------------------------------- */
@media(max-width:820px){
  .site-header{height:68px;padding:0 18px}
  .brand{font-size:16px}
  .brand img{width:45px;height:45px}
  .brand strong{font-size:20px}
  .menu-toggle{display:block}
  .site-nav{
    display:none;position:fixed;inset:68px 0 0;background:var(--paper);padding:40px 22px;
    flex-direction:column;align-items:flex-start;gap:25px;font:30px var(--condensed);
    box-shadow:0 20px 35px rgba(7,27,41,.12);
  }
  .site-nav.open{display:flex}
  .site-nav a{background-size:0 2px}
  .nav-cta{font:800 13px var(--sans)}

  .marquee{padding:12px 0}
  .marquee-group{gap:1.5rem;padding-right:1.5rem;font-size:17px}

  .hero{min-height:calc(100dvh - 68px);align-items:flex-end}
  .hero-image{object-position:58% center}
  /* Top scrim keeps the lime eyebrow legible against a bright sky. */
  .hero-shade{
    background:
      linear-gradient(180deg,rgba(4,12,9,.52) 0%,rgba(4,12,9,.14) 32%),
      linear-gradient(0deg,rgba(4,12,9,.94) 0%,rgba(4,12,9,.44) 68%,rgba(4,12,9,.2) 100%);
  }
  .hero-content{width:100%;padding:90px 18px 170px}
  .hero h1{font-size:clamp(52px,16vw,80px)}
  .hero-content>p:not(.eyebrow){font-size:17px;max-width:330px}
  .hero-outline{display:none}
  .scroll-hint{display:none}
  .hero-actions{flex-direction:column;align-items:stretch;width:230px;max-width:calc(100vw - 36px);gap:8px}
  .hero-actions .button{width:100%;min-height:46px;font-size:10px;padding-inline:8px}
  .hero-stats{left:0;right:0;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}
  .hero-stats div{padding:16px 10px}
  .hero-stats strong{font-size:27px}
  .hero-stats span{font-size:8px;letter-spacing:.02em}

  .section{padding:80px 18px}
  .section-heading>p{font-size:17px;margin:25px 0 45px}
  .section h2{font-size:clamp(45px,13vw,68px)}
  .big-mark{display:none}

  .intro-grid,.feature,.season,.community,.join,.story,.calendar-page,.contact-page,.page-hero,.detail-row{grid-template-columns:1fr;gap:55px}
  .photo-tall,.feature-image,.community-photo{height:auto;aspect-ratio:4/5}
  .feature-image{margin-left:0}
  .principles article{grid-template-columns:42px 1fr}

  .program-row{grid-template-columns:42px 1fr;gap:12px}
  .program-row:hover{background:transparent;padding-inline:0}
  .program-number{font-size:34px;-webkit-text-stroke-width:1.2px}
  .program-row h3{font-size:36px}
  .program-row p{font-size:14px}
  .program-meta{grid-column:2;align-items:center;margin-top:8px}
  .program-meta a:hover{transform:none}

  .season-lead{position:static}
  .schedule article{grid-template-columns:88px 1fr;gap:16px}
  .schedule time{padding:10px 6px}
  .schedule time strong{font-size:38px}
  .schedule time span{font-size:9px;letter-spacing:.1em}
  .schedule h3{font-size:25px}

  .community{padding-top:0}
  .community-photo{aspect-ratio:4/3}
  blockquote::before{font-size:190px;top:-.38em}
  blockquote p{font-size:36px}

  .join h2{font-size:clamp(54px,16vw,82px)}
  .contact-block{padding:35px 0 0;border-left:0;border-top:1px solid rgba(7,27,41,.3)}

  .page-hero{min-height:auto}
  .page-hero>div{padding:75px 18px}
  .page-hero>div:after{display:none}
  .page-hero h1,.contact-title h1{font-size:clamp(52px,16vw,78px)}
  .page-hero>img{min-height:0;height:auto;aspect-ratio:4/3}

  .detail-row{padding:55px 0}
  .detail-row:nth-child(even)>div:first-child{padding-left:0}
  .detail-row>div:first-child::before{font-size:58px;margin-bottom:8px}

  .value-grid,.field-grid{grid-template-columns:1fr}
  .value-grid article,.field-grid article{padding:30px}
  .value-grid article:hover,.field-grid article:hover{transform:none}
  .impact{grid-template-columns:1fr;min-height:0}
  .impact>img{height:auto;aspect-ratio:4/3}
  .impact div{padding:60px 18px}
  .impact div strong{font-size:clamp(30px,8vw,44px)}

  .contact-page{min-height:auto;padding:75px 18px}
  .contact-photo{height:auto;aspect-ratio:4/3}
  .contact-form{grid-column:auto;grid-template-columns:1fr;margin-top:0}
  .contact-form .wide{grid-column:auto}

  .decision-grid{grid-template-columns:1fr}
  .decision-grid article{padding:27px 22px}

  .site-footer{grid-template-columns:90px 1fr;align-items:start;padding:45px 18px}
  .footer-brand img{width:70px;height:70px}
  .site-footer>div>p{font-size:23px}
  .site-footer nav{flex-wrap:wrap}
  .copyright{grid-column:1/-1;margin:15px 0 0}

  .error-code{opacity:.55}
  .error-page{min-height:calc(100dvh - 68px)}
}

@media(max-width:430px){
  .hero-content{padding-bottom:165px}
  .hero h1{font-size:clamp(49px,15vw,66px)}
  .hero-content>p:not(.eyebrow){margin:20px 0}
  .hero-actions{width:230px;max-width:calc(100vw - 36px)}
  .age-filter button{flex:1 1 46%}
  .program-row{grid-template-columns:34px 1fr}
  .program-number{font-size:26px;-webkit-text-stroke-width:1.1px}
  .program-row h3{font-size:32px}
  .schedule article{grid-template-columns:76px 1fr;gap:12px}
  .schedule time strong{font-size:33px}
  .site-footer{grid-template-columns:1fr}
  .footer-brand{display:none}
  .copyright{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.visible{opacity:1;transform:none;animation:none}
  .hero-content>*{opacity:1;animation:none}
  .hero-image{animation:none}
  .marquee-track{animation:none;transform:none}
  .scroll-hint::after{animation:none}
  .button,.button span[aria-hidden],.site-nav a,.program-row,.program-meta a,.value-grid article,.field-grid article,.schedule article,.contact-options article,.age-filter button{transition:none}
}