/* =========================================================
   Clean Water Worldwide Academy — Government Contracting for 5th Graders
   Design system: navy / dark blue / white, with ONE reserved yellow
   used exclusively for payment / purchase actions.
   ========================================================= */

:root{
  --navy-deep:  #0a1a33;
  --navy:       #12294f;
  --navy-mid:   #1c3a68;
  --paper:      #f6f5f1;
  --white:      #ffffff;
  --ink:        #17202c;
  --muted:      #3b4657;
  --line-dark:  rgba(10,26,51,0.14);
  --line-light: rgba(255,255,255,0.14);

  /* Reserved payment color — used ONLY for purchase actions */
  --pay-yellow:      #f7c600;
  --pay-yellow-hover:#e0b300;
  --pay-text:        #0a1a33;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Public Sans', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Merriweather', serif; color:var(--navy-deep); }
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy-mid);
  font-weight:500;
}

/* ---------- reserved payment CTA class ---------- */
.payment-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--pay-yellow);
  color:var(--pay-text);
  font-weight:700;
  font-size:15.5px;
  padding:17px 30px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(10,26,51,0.15);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  letter-spacing:.01em;
  min-height:52px;
}
.payment-cta:hover{
  background:var(--pay-yellow-hover);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(10,26,51,0.18);
}
.payment-cta:active{ transform:translateY(0); }
.payment-cta:focus-visible{
  outline:3px solid var(--navy-mid);
  outline-offset:3px;
}
.payment-cta.small{ padding:12px 20px; font-size:14px; min-height:44px; }
.payment-cta.block{ width:100%; }

/* ---------- top strip ---------- */
.top-strip{
  background:var(--navy-deep);
  color:#cdd8e8;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:.05em;
  padding:8px 0;
  text-align:center;
}

/* ---------- header / nav ---------- */
header{
  background:var(--navy);
  border-bottom:1px solid var(--line-light);
  position:sticky;
  top:0;
  z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:1120px; margin:0 auto;
  gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:38px; height:38px; }
.brand-text{ line-height:1.15; }
.brand-text .line1{ color:var(--white); font-weight:700; font-size:15.5px; }
.brand-text .line2{ color:#9fb3d1; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }

nav.main-nav{ display:flex; align-items:center; gap:24px; }
nav.main-nav a.nav-link{
  color:#dbe4f2; font-size:14px; font-weight:500;
}
nav.main-nav a.nav-link:hover{ color:var(--white); }

.menu-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:36px; height:36px; position:relative;
}
.menu-toggle span{
  display:block; position:absolute; left:6px; right:6px; height:2px; background:var(--white);
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle span:nth-child(1){ top:11px; }
.menu-toggle span:nth-child(2){ top:18px; }
.menu-toggle span:nth-child(3){ top:25px; }
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  background:var(--navy-deep);
  background-image:
    radial-gradient(circle at 85% 10%, rgba(255,255,255,0.05), transparent 45%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px);
  color:var(--white);
  padding:76px 0 84px;
  text-align:center;
}
.hero .eyebrow{ color:#9fb3d1; }
h1.title{
  font-size:clamp(30px, 5.6vw, 52px);
  line-height:1.12;
  color:var(--white);
  font-weight:900;
  max-width:820px;
  margin:16px auto 20px;
}
.hero-sub-strong{
  max-width:640px;
  margin:0 auto 18px;
  color:#dbe4f2;
  font-size:17px;
  font-weight:600;
}
.hero-copy{
  max-width:640px;
  margin:0 auto 34px;
  color:#b7c3d8;
  font-size:15.5px;
}
.hero-copy p{ margin-bottom:12px; }
.hero-cta-note{
  margin-top:14px;
  font-size:13px;
  color:#8ea3c4;
}

/* ---------- sections shared ---------- */
section{ padding:74px 0; }
.section-head{ max-width:680px; margin:0 auto 44px; text-align:center; }
.section-head h2{ font-size:clamp(24px,3.4vw,32px); margin-top:10px; line-height:1.25; }
.section-head p{ margin-top:14px; color:var(--muted); font-size:15.5px; }
.center{ text-align:center; }

/* ---------- problem section ---------- */
.problem{ background:var(--white); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.jargon-row{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:28px 0 36px;
}
.jargon-chip{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  color:var(--navy);
  background:var(--paper);
  border:1px solid var(--line-dark);
  padding:8px 14px;
  border-radius:20px;
}
.problem-copy{ max-width:680px; margin:0 auto; color:var(--muted); font-size:15.5px; text-align:center; }
.problem-copy p{ margin-bottom:14px; }
.problem-copy strong{ color:var(--navy-deep); }

/* ---------- translate cards ---------- */
.translate{ background:var(--paper); }
.translate-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.term-card{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:8px;
  padding:26px 24px;
}
.term-card .big-word{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy-mid);
  background:rgba(18,41,79,0.06);
  display:inline-block;
  padding:5px 10px;
  border-radius:4px;
  margin-bottom:14px;
}
.term-card h3{ font-size:18px; margin-bottom:8px; }
.term-card p{ font-size:14.5px; color:var(--muted); }
.arrow-note{ text-align:center; margin-top:24px; color:var(--navy-mid); font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.05em; }

/* ---------- what they'll learn ---------- */
.learn{ background:var(--white); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.learn-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 32px;
  max-width:840px; margin:0 auto 40px;
}
.learn-item{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--muted); }
.learn-item .dot{
  width:8px; height:8px; border-radius:50%; background:var(--navy-mid);
  margin-top:8px; flex-shrink:0;
}

/* ---------- cta banner ---------- */
.cta-banner{
  background:var(--navy-deep);
  color:var(--white);
  text-align:center;
}
.cta-banner h3{ color:var(--white); font-size:26px; margin-bottom:14px; }
.cta-banner p{ color:#b7c3d8; max-width:520px; margin:0 auto 26px; font-size:15px; }

/* ---------- who this is for ---------- */
.who{ background:var(--paper); }
.who-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px;
}
.who-card{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:8px;
  padding:26px 22px;
}
.who-card h3{ font-size:16.5px; margin-bottom:8px; }
.who-card p{ font-size:14px; color:var(--muted); }

/* ---------- why 5th graders ---------- */
.why-name{ background:var(--white); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.why-name-copy{ max-width:640px; margin:0 auto; text-align:center; color:var(--muted); font-size:15.5px; }
.why-name-copy p{ margin-bottom:14px; }
.rule-box{
  max-width:520px; margin:22px auto 0;
  border-left:3px solid var(--navy-mid);
  background:var(--paper);
  padding:16px 20px;
  font-family:'Merriweather', serif;
  font-style:italic;
  color:var(--navy-deep);
  text-align:left;
}

/* ---------- about judah ---------- */
.about{ background:var(--paper); }
.about-card{
  max-width:760px; margin:0 auto;
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:10px;
  padding:36px 34px;
}
.about-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.about-head img{ width:52px; height:52px; border-radius:50%; }
.about-head .name{ font-family:'Merriweather', serif; font-size:19px; color:var(--navy-deep); }
.about-head .role{ font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-mid); }
.about-card p{ font-size:15px; color:var(--muted); margin-bottom:14px; }
.philosophy{
  font-family:'Merriweather', serif;
  font-size:17px;
  color:var(--navy-deep);
  border-top:1px solid var(--line-dark);
  padding-top:18px;
  margin-top:18px;
}

/* ---------- final sales section ---------- */
.final-sales{
  background:var(--navy-deep);
  color:var(--white);
  text-align:center;
  background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,0.04), transparent 50%);
}
.final-sales h2{ color:var(--white); font-size:clamp(26px,4vw,38px); max-width:760px; margin:0 auto 18px; }
.final-sales p{ color:#b7c3d8; max-width:600px; margin:0 auto 30px; font-size:15.5px; }
.final-sales .payment-cta{ padding:20px 38px; font-size:17px; }

/* ---------- academy blurb ---------- */
.academy{ background:var(--white); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.academy-inner{ max-width:680px; margin:0 auto; text-align:center; }
.academy-inner img{ width:56px; height:56px; margin:0 auto 18px; }
.academy-inner h2{ font-size:24px; margin-bottom:14px; }
.academy-inner p{ color:var(--muted); font-size:15px; }

/* ---------- faq ---------- */
.faq{ background:var(--paper); }
.faq-item{ border-bottom:1px solid var(--line-dark); padding:22px 0; max-width:760px; margin:0 auto; }
.faq-item h4{ font-family:'Merriweather', serif; font-size:16px; color:var(--navy-deep); margin-bottom:8px; }
.faq-item p{ font-size:14.5px; color:var(--muted); }
.faq-list{ display:flex; flex-direction:column; }

/* ---------- footer ---------- */
footer{ background:var(--navy-deep); color:#9fb3d1; padding:48px 0 30px; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.footer-brand img{ width:32px; height:32px; }
.footer-brand .n{ color:var(--white); font-weight:700; font-size:15px; }
.disclaimer{ font-size:12px; color:#8094b3; max-width:820px; margin-bottom:10px; }
.copyright{ font-size:12px; color:#6d82a3; margin-top:16px; }

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .translate-grid{ grid-template-columns:1fr 1fr; }
  .learn-grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--navy);
    flex-direction:column; align-items:flex-start;
    padding:0 24px; gap:0;
    max-height:0; overflow:hidden;
    border-bottom:1px solid var(--line-light);
    transition:max-height .25s ease;
  }
  nav.main-nav.open{ max-height:320px; padding:14px 24px 20px; }
  nav.main-nav a.nav-link{ padding:10px 0; width:100%; }
  nav.main-nav .payment-cta{ margin-top:10px; width:100%; justify-content:center; }
  .menu-toggle{ display:block; }
  .translate-grid{ grid-template-columns:1fr; }
  section{ padding:56px 0; }
  .about-head{ flex-direction:column; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}