/* ============================================================
   Salt & Light Learning — shared stylesheet
   Palette: cream paper, charcoal ink, dusty blue, warm gold
   Type: Cormorant Garamond (display/quote) + Mulish (body)
   ============================================================ */

:root{
  --cream:        #FBF8F1;
  --paper:        #FFFFFF;
  --cream-card:   #FCEFD6;
  --cream-soft:   #FDF6E8;
  --blue-card:    #E4EFF6;
  --blue:         #7FB4D4;
  --blue-deep:    #3D6A88;
  --gold:         #E4B85C;
  --gold-deep:    #C1912F;
  --charcoal:     #383735;
  --charcoal-2:   #5A574F;
  --line:         rgba(56,55,53,0.12);
  --line-gold:    rgba(193,145,47,0.35);
  --shadow:       0 18px 46px -24px rgba(61,106,136,0.28);
  --shadow-soft:  0 10px 30px -18px rgba(56,55,53,0.22);
  --radius:       26px;
  --radius-sm:    16px;
  --maxw:         1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--blue-deep);text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--gold-deep);}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:600;
  color:var(--charcoal);
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:.005em;
}
h1{font-size:clamp(2.7rem,6vw,4.3rem);font-weight:500;}
h2{font-size:clamp(2rem,4vw,2.9rem);}
h3{font-size:clamp(1.35rem,2.4vw,1.7rem);}
p{margin:0 0 1.1em;}
.lead{font-size:1.18rem;color:var(--charcoal-2);}

.eyebrow{
  font-family:"Mulish",sans-serif;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--blue-deep);
  margin:0 0 1rem;
  display:block;
}
.eyebrow.gold{color:var(--gold-deep);}

.quote{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  line-height:1.4;
  color:var(--charcoal);
}
.verse{
  font-family:"Mulish",sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:700;
  color:var(--gold-deep);
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem);}
.section{padding:clamp(3.5rem,7vw,6rem) 0;}
.section.tight{padding:clamp(2.5rem,5vw,4rem) 0;}
.center{text-align:center;}
.narrow{max-width:720px;margin-left:auto;margin-right:auto;}

/* ---------- Sunburst divider (open-book glyph) ---------- */
.divider{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:0 auto;color:var(--gold-deep);
}
.divider::before,.divider::after{
  content:"";height:1px;width:min(90px,18vw);
  background:linear-gradient(90deg,transparent,var(--line-gold));
}
.divider::after{background:linear-gradient(90deg,var(--line-gold),transparent);}
.divider svg{width:34px;height:auto;opacity:.9;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:"Mulish",sans-serif;font-weight:700;
  font-size:.86rem;letter-spacing:.06em;padding:.85rem 1.7rem;border-radius:999px;
  cursor:pointer;border:1.5px solid transparent;transition:all .22s ease;
}
.btn-primary{background:var(--blue-deep);color:#fff;}
.btn-primary:hover{background:var(--charcoal);color:#fff;transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:var(--charcoal);}
.btn-yellow{background:#F3D77C;color:var(--charcoal);}
.btn-yellow:hover{background:var(--gold);color:var(--charcoal);transform:translateY(-2px);}
.btn-gold:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--blue-deep);border-color:var(--blue);}
.btn-ghost:hover{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep);}

/* ---------- Header / nav ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,241,0.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1.2rem,4vw,2.5rem);max-width:1240px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:.7rem;}
.brand img{width:40px;height:40px;}
.brand-txt{font-family:"Cormorant Garamond",serif;font-size:1.32rem;font-weight:600;
  letter-spacing:.14em;color:var(--charcoal);line-height:1;}
.brand-txt small{display:block;font-family:"Mulish",sans-serif;font-size:.56rem;
  letter-spacing:.42em;color:var(--blue-deep);margin-top:3px;font-weight:700;}
.nav-links{display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-family:"Mulish",sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.03em;
  color:var(--charcoal-2);padding:.5rem .8rem;border-radius:999px;
}
.nav-links a:hover{color:var(--charcoal);background:rgba(127,180,212,0.14);}
.nav-links a.active{color:var(--blue-deep);background:rgba(127,180,212,0.18);}
.nav-cta{margin-left:.4rem;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--charcoal);margin:5px 0;transition:.25s;}

@media(max-width:900px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:.6rem clamp(1.2rem,4vw,2.5rem) 1.2rem;gap:.15rem;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav-links.open{max-height:520px;}
  .nav-links a{padding:.7rem .6rem;}
  .nav-cta{margin:.4rem 0 0;}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;text-align:center;
  padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem);
  background:radial-gradient(58% 52% at 50% 22%, rgba(228,184,92,0.15), rgba(228,184,92,0) 72%);}
.hero .wrap{position:relative;z-index:2;}
.sunburst{position:absolute;top:-8%;left:50%;transform:translateX(-50%);
  width:min(760px,120vw);z-index:1;opacity:.5;pointer-events:none;}
.hero-logo{width:clamp(120px,20vw,168px);margin:0 auto 1.4rem;}
.hero-logo-wrap{margin:0 0 1.1rem;line-height:0;}
.hero-logo-full{width:clamp(250px,46vw,470px);margin:0 auto;}
.hero h1{margin-bottom:.2em;}
.hero .tag{font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(1.25rem,2.6vw,1.7rem);color:var(--charcoal-2);margin:.2em 0 1.4em;}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem;}

/* ---------- Cards ---------- */
.grid{display:grid;gap:1.6rem;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.card{
  background:var(--paper);border-radius:var(--radius);padding:2rem 2rem;
  box-shadow:var(--shadow-soft);border:1px solid var(--line);
}
.card.cream{background:var(--cream-soft);}
.card.blue{background:var(--blue-card);border-color:rgba(61,106,136,.12);}
.card h3{margin-top:.2rem;}
.card .price{font-family:"Cormorant Garamond",serif;font-size:1.5rem;color:var(--blue-deep);
  font-weight:600;}
.card .price small{display:block;font-family:"Mulish",sans-serif;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal-2);font-weight:700;margin-top:.2rem;}

/* pill label */
.pill{display:inline-block;font-family:"Mulish",sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:.4rem 1rem;
  border-radius:999px;margin-bottom:1.2rem;}
.pill.cream{background:var(--cream-card);color:var(--gold-deep);}
.pill.blue{background:var(--blue);color:#fff;}

/* book-glyph list */
.blist{list-style:none;padding:0;margin:0;}
.blist li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;}
.blist li::before{
  content:"";position:absolute;left:0;top:.42em;width:20px;height:12px;
  background:url("../assets/book.svg") no-repeat center/contain;
}

/* two-column feature */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;}
.feature.rev .feature-img{order:2;}
@media(max-width:820px){.feature{grid-template-columns:1fr;}.feature.rev .feature-img{order:0;}}
.feature-img img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;object-fit:cover;}

/* service row (menu style: text + price) */
.srow{padding:1.5rem 0;border-top:1px solid var(--line);}
.srow:first-of-type{border-top:0;}
.srow > div{max-width:760px;}

/* discount table */
.dtable{width:100%;border-collapse:separate;border-spacing:0 .7rem;}
.dtable td{background:var(--paper);padding:1.05rem 1.4rem;border:1px solid rgba(61,106,136,.18);
  font-weight:600;}
.dtable td:first-child{border-right:0;border-radius:14px 0 0 14px;text-align:center;
  font-family:"Cormorant Garamond",serif;font-size:1.7rem;color:var(--blue-deep);
  background:var(--blue-card);width:38%;}
.dtable td:last-child{border-left:0;border-radius:0 14px 14px 0;letter-spacing:.14em;
  text-transform:uppercase;font-size:.9rem;color:var(--charcoal-2);}

/* callout */
.callout{background:var(--cream-card);border-radius:var(--radius);padding:clamp(2rem,4vw,3rem);
  text-align:center;}
.callout .verse{margin-bottom:1rem;}

/* info box (funding cards) */
.fcard{background:var(--paper);border-radius:var(--radius-sm);padding:1.7rem;border:1px solid var(--line);
  box-shadow:var(--shadow-soft);height:100%;}
.fcard .tagn{font-family:"Mulish",sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:.4rem;}
.fcard h3{font-size:1.35rem;margin-bottom:.5rem;}
.fcard .amt{font-family:"Cormorant Garamond",serif;color:var(--blue-deep);font-size:1.15rem;
  font-weight:600;margin-bottom:.5rem;}

/* resource links */
.rlist{display:grid;gap:1rem;}
.rlink{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.2rem 1.4rem;box-shadow:var(--shadow-soft);}
.rlink:hover{border-color:var(--blue);transform:translateY(-2px);transition:all .2s ease;}
.rlink strong{color:var(--charcoal);font-size:1.05rem;}
.rlink span{display:block;color:var(--charcoal-2);font-size:.92rem;margin-top:.2rem;}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}
.person{background:var(--cream-soft);border-radius:var(--radius);padding:2rem;text-align:center;}
.person img{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;
  box-shadow:var(--shadow);}

/* note / disclaimer */
.note{font-size:.9rem;color:var(--charcoal-2);font-style:italic;
  border-left:3px solid var(--line-gold);padding-left:1rem;margin-top:1.5rem;}

/* ---------- Footer ---------- */
.site-foot{background:var(--charcoal);color:#E9E5DC;margin-top:2rem;}
.site-foot .wrap{padding-top:3.2rem;padding-bottom:2rem;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;margin-bottom:2.4rem;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:1.6rem;}}
.site-foot h4{color:#fff;font-size:1.3rem;margin-bottom:.6rem;}
.site-foot a{color:#CFE3F0;}
.site-foot a:hover{color:var(--gold);}
.foot-links{list-style:none;padding:0;margin:0;}
.foot-links li{margin-bottom:.45rem;font-size:.92rem;}
.foot-verse{font-family:"Cormorant Garamond",serif;font-style:italic;color:#C9C3B6;font-size:1.05rem;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.4rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  font-size:.82rem;color:#A8A399;}

/* accessibility */
:focus-visible{outline:2.5px solid var(--gold-deep);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}

/* small helpers */
.mt0{margin-top:0;}.mb0{margin-bottom:0;}
.stat-row{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:center;margin-top:1.5rem;}
.stat{text-align:center;}
.stat b{font-family:"Cormorant Garamond",serif;font-size:2.2rem;color:var(--blue-deep);display:block;line-height:1;}
.stat span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal-2);font-weight:700;}

/* clean why-choose list */
.why-list{max-width:720px;margin:2.4rem auto 0;columns:2;column-gap:2.6rem;}
.why-list li{break-inside:avoid;}
@media(max-width:640px){.why-list{columns:1;}}

/* learning-differences stats */
.statbig{font-family:"Cormorant Garamond",serif;font-size:clamp(2.8rem,6vw,3.6rem);line-height:1;color:var(--blue-deep);font-weight:600;margin-bottom:.6rem;}
.src{display:block;margin-top:.7rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;}

/* playful footer hashtags */
.foot-tags{margin-top:1.1rem;display:flex;gap:.5rem;flex-wrap:wrap;}
.ftag{display:inline-block;font-family:"Mulish",sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.03em;padding:.4rem .85rem;border-radius:999px;transition:transform .18s ease;}
.ftag:hover{transform:translateY(-2px) rotate(-1.5deg);}
.ftag.salt{background:rgba(127,180,212,.24);color:#CFE3F0;}
.ftag.light{background:rgba(228,184,92,.26);color:var(--gold);}

/* grant language blocks */
.gblock{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.5rem 1.6rem;box-shadow:var(--shadow-soft);margin-bottom:1.4rem;}
.gblock-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-bottom:.9rem;}
.gblock-head h3{margin:0;font-size:1.3rem;}
.gtext{background:var(--cream-soft);border-left:3px solid var(--line-gold);border-radius:8px;
  padding:1.1rem 1.2rem;font-size:.95rem;line-height:1.7;color:var(--charcoal-2);}
.gtext p{margin:0 0 .8rem;}
.gtext p:last-child{margin-bottom:0;}
.copy-btn{font-family:"Mulish",sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.06em;
  padding:.5rem 1.05rem;border-radius:999px;border:1.5px solid var(--blue);background:transparent;
  color:var(--blue-deep);cursor:pointer;transition:all .2s ease;white-space:nowrap;}
.copy-btn:hover{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep);}
.copy-btn.copied{background:var(--gold);border-color:var(--gold);color:var(--charcoal);}
.fillin{color:var(--gold-deep);font-weight:700;}
