/* ═══════════════════════════════════════════════════════════════════
   MUSE landing page components

   Shared layout and component styles for the campaign landing pages
   (private-schools, charter-public-schools, microschools-homeschool).
   Loaded after muse.css, which supplies every color and font token
   used below. Deliberately NOT loaded by index, privacy or
   cookie-policy, whose own layouts define conflicting rules for the
   same class names.
   ═══════════════════════════════════════════════════════════════════ */

/* clip, not hidden. Both stop sideways scrolling, but hidden makes body a
   scroll container, which silently disables position:sticky on the nav. */
body{overflow-x:clip}

.container{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.container-narrow{max-width:var(--maxw-narrow);margin:0 auto;padding:0 32px}

/* ───── SHARED TYPE ──────────────────────────────────────── */
.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:18px;
}
.eyebrow-dark{color:var(--gold)}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(32px,4.4vw,50px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.015em;
  margin-bottom:22px;
}
.section-title em{font-style:italic;font-weight:300;color:var(--gold-deep)}
.lead{
  font-size:19px;
  line-height:1.7;
  color:var(--navy-80);
  font-weight:300;
}
.section{padding:104px 0}

/* ───── HERO ─────────────────────────────────────────────── */
.hero{
  background:var(--navy);
  color:var(--cream);
  padding:88px 0 96px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(40px,5.4vw,68px);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.02em;
  margin-bottom:26px;
  color:var(--cream);
}
.hero p{
  font-size:clamp(17px,1.5vw,20px);
  font-weight:300;
  line-height:1.62;
  color:var(--cream-85);
  max-width:37em;
  margin-bottom:38px;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:18px 36px;
  background:var(--gold);
  color:var(--navy);
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  border-radius:100px;
  text-decoration:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background .25s ease;
  box-shadow:0 8px 24px var(--gold-28);
}
.btn-primary:hover{
  background:var(--cream);
  transform:translateY(-2px);
  box-shadow:0 14px 32px var(--gold-40);
}
.btn-primary .arrow{transition:transform .3s ease}
.btn-primary:hover .arrow{transform:translateX(4px)}

/* Hero photograph.
   The three source images are 1.78:1, 1.84:1 and 2.00:1, none of them the
   3:2 the placeholder used. Rather than crop subjects out of frame, each
   photo keeps its own proportions and is sized by width. The hero is a
   centred grid whose text column is taller, so desktop layout is
   unaffected. */
.hero-photo{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius-lg);
  box-shadow:0 20px 44px rgba(0,0,0,.22);
}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
}

/* ───── PROBLEM ──────────────────────────────────────────── */
.problem{background:var(--cream)}
.problem-statement{
  font-family:var(--font-display);
  font-size:clamp(23px,2.9vw,33px);
  font-weight:300;
  line-height:1.44;
  letter-spacing:-.01em;
  color:var(--navy);
  margin-bottom:28px;
}
.problem-turn{
  font-size:19px;
  font-weight:500;
  line-height:1.6;
  color:var(--gold-deep);
  font-style:italic;
  font-family:var(--font-display);
  padding-left:22px;
  border-left:3px solid var(--gold);
}

/* ───── INSTALLS ─────────────────────────────────────────── */
.installs{background:var(--navy);color:var(--cream)}
.installs .section-title{color:var(--cream);max-width:22ch}
.installs .section-title em{color:var(--gold)}
.installs-head{max-width:760px;margin-bottom:56px}
.installs-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.install-card{
  padding:34px 32px;
  background:var(--cream-14);
  border:1px solid var(--cream-14);
  border-radius:var(--radius);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s ease,box-shadow .3s ease;
}
.install-card:hover{
  border-color:var(--gold-40);
  transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(0,0,0,.22);
}
.install-card h3{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--gold);
  margin-bottom:12px;
}
.install-card p{
  font-size:15.5px;
  line-height:1.68;
  color:var(--cream-85);
  font-weight:300;
}
@media(max-width:860px){
  .installs-grid{grid-template-columns:1fr}
}

/* ───── HOW IT WORKS ─────────────────────────────────────── */
.how{background:var(--cream)}
.how-head{max-width:700px;margin-bottom:56px}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  counter-reset:step;
}
.step{
  position:relative;
  padding:36px 30px;
  background:var(--white);
  border:1px solid var(--navy-08);
  border-radius:var(--radius);
  box-shadow:0 12px 34px var(--navy-08);
}
.step-num{
  font-family:var(--font-display);
  font-size:44px;
  font-style:italic;
  font-weight:300;
  line-height:1;
  color:var(--gold-deep);
  margin-bottom:18px;
}
.step h3{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:500;
  letter-spacing:-.01em;
  margin-bottom:10px;
  color:var(--navy);
}
.step p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--navy-64);
  font-weight:400;
}
@media(max-width:860px){
  .steps{grid-template-columns:1fr}
}

/* ───── BUILT FOR ────────────────────────────────────────── */
.built{
  background:var(--white);
  border-top:1px solid var(--navy-08);
  border-bottom:1px solid var(--navy-08);
}
.built .container-narrow{text-align:center}
.built .lead{font-size:20px;max-width:60ch;margin:0 auto}

/* ───── FAQ ──────────────────────────────────────────────── */
.faq{background:var(--cream)}
.faq-head{margin-bottom:48px}
.faq-list{
  display:grid;
  gap:18px;
}
.faq-item{
  padding:30px 32px;
  background:var(--white);
  border:1px solid var(--navy-08);
  border-radius:var(--radius);
}
.faq-item h3{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.35;
  color:var(--navy);
  margin-bottom:10px;
}
.faq-item p{
  font-size:16px;
  line-height:1.7;
  color:var(--navy-64);
  font-weight:400;
}
@media(max-width:640px){
  .faq-item{padding:24px 22px}
}

/* ───── CLOSING CTA ──────────────────────────────────────── */
.closing{
  background:var(--navy);
  color:var(--cream);
  text-align:center;
  padding:112px 0;
}
.closing h2{
  font-family:var(--font-display);
  font-size:clamp(32px,4.4vw,52px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--cream);
  margin-bottom:36px;
  max-width:18ch;
  margin-left:auto;
  margin-right:auto;
}
.closing-secondary{
  margin-top:26px;
  font-size:15.5px;
  color:var(--cream-65);
  font-weight:300;
}
.closing-secondary a{color:var(--gold);font-weight:500;text-decoration:none}
.closing-secondary a:hover{text-decoration:underline}

/* ───── FOOTER ───────────────────────────────────────────── */
.footer{
  background:var(--navy);
  color:var(--cream-65);
  padding:48px 32px;
  text-align:center;
  font-size:14px;
  font-weight:300;
  border-top:1px solid var(--cream-14);
}
.footer a{color:var(--cream-45);text-decoration:none}
.footer a:hover{color:var(--gold)}

/* ───── SCROLL REVEAL ────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s ease,transform .85s ease;
}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

@media(max-width:640px){
  .section{padding:72px 0}
  .hero{padding:64px 0 72px}
  .closing{padding:80px 0}
  .container,.container-narrow{padding:0 24px}
      }

/* ───── FORM SECTION ─────────────────────────────────────── */
.form-section{background:var(--cream);border-top:1px solid var(--navy-08)}
.form-section .container-narrow{max-width:720px}
.form-section .eyebrow{text-align:center}
.form-section .form-heading{
  font-family:var(--font-display);
  font-size:clamp(27px,3.4vw,38px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.015em;
  text-align:center;
  color:var(--navy);
  margin-bottom:34px;
}
@media(max-width:640px){
    }

/* Bolded lead-in inside an install card. Used where the source copy runs the
   bold phrase straight into the sentence instead of ending it. */
.install-card p strong{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--gold);
}