:root {
  --ink: #0F2A1E;
  --ink-2: #17402D;
  --gold: #C9A648;
  --gold-bright: #DDBE6C;
  --brass: #8C6A2F;
  --paper: #FAF8F3;
  --white: #fff;
  --gray: #565D5A;
  --line: rgba(15,42,30,0.09);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:'Fraunces',Georgia,serif; line-height:1.08; letter-spacing:-0.01em; }
img { max-width:100%; display:block; }
a { color:inherit; }
.wrap { max-width:1140px; margin:0 auto; padding:0 28px; }

/* highlighter signature */
.hl { position:relative; white-space:nowrap; z-index:0; }
.hl::after {
  content:""; position:absolute; left:-3%; bottom:0.06em; width:106%; height:0.42em;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  z-index:-1; border-radius:3px; transform:rotate(-1.2deg) skewX(-8deg);
}

/* ---------- NAV ---------- */
header { position:sticky; top:0; z-index:100; background:rgba(15,42,30,0.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,0.07); }
.nav { display:flex; align-items:center; justify-content:space-between; max-width:1140px; margin:0 auto; padding:18px 28px; }
.logo { display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:700; font-size:1.3rem; color:#fff; text-decoration:none; letter-spacing:-0.01em; }
.logo-mark { width:72px; height:72px; display:block; flex-shrink:0; object-fit:cover; border-radius:10px; }
.logo em { font-style:normal; color:var(--gold); }
.nav-links { display:flex; gap:32px; list-style:none; align-items:center; }
.nav-links a { color:#A9C2B4; text-decoration:none; font-size:0.92rem; font-weight:500; transition:color .15s; }
.nav-links a:hover { color:var(--gold-bright); }
.nav-cta { background:var(--gold); color:var(--ink)!important; padding:11px 22px; border-radius:10px; font-weight:700!important; transition:transform .15s, box-shadow .15s; box-shadow:0 4px 14px rgba(201,166,72,.35); }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(201,166,72,.5); }
.menu-btn { display:none; background:none; border:none; color:#fff; font-size:1.6rem; cursor:pointer; }

/* ---------- HERO ---------- */
.hero {
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(201,166,72,0.22), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(201,166,72,0.10), transparent 55%),
    linear-gradient(160deg, #0F2A1E 0%, #17402D 55%, #0F2A1E 100%);
  padding:110px 0 130px;
}
.hero::before {
  content:""; position:absolute; inset:0; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
.hero .wrap { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:0.78rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:22px; }
.eyebrow::before { content:""; width:28px; height:2px; background:var(--gold); }
.hero h1 { font-size:clamp(2.8rem,5.6vw,4.4rem); font-weight:700; color:#fff; }
.hero h1 .hl { color:var(--ink); }
.hero h1 .hl::after { height:0.8em; bottom:0.03em; transform:rotate(-1.4deg) skewX(-6deg); }
.hero p.lead { margin-top:24px; max-width:540px; font-size:1.18rem; color:#A3BEAE; }
.btn-row { margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:12px; font-weight:700; text-decoration:none; font-size:1rem; transition:transform .15s, box-shadow .15s, background .15s; }
.btn-gold { background:linear-gradient(135deg, var(--gold-bright), var(--gold)); color:var(--ink); box-shadow:0 8px 24px rgba(201,166,72,.4); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(201,166,72,.55); }
.btn-ghost { border:1.5px solid rgba(255,255,255,.22); color:#fff; }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px); }
.hero-stats { margin-top:56px; display:flex; gap:44px; }
.hero-stats div strong { display:block; font-family:'Fraunces',serif; font-size:1.9rem; color:var(--gold-bright); }
.hero-stats div span { font-size:0.85rem; color:#7FA090; }

/* hero photo */
.hero-photo {
  border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.hero-photo img { width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block; }

/* ---------- SECTIONS ---------- */
section { padding:96px 0; }
#book, #math, #reading-writing, #science, #history, #test-prep, #isee, #ap-courses { scroll-margin-top:90px; }

.subject-nav { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.subject-nav a {
  background:var(--white); border:1.5px solid var(--line); color:var(--ink);
  font-weight:700; font-size:0.92rem; padding:12px 22px; border-radius:999px;
  text-decoration:none; transition:border-color .15s, color .15s, background .15s;
}
.subject-nav a:hover { border-color:var(--gold); color:var(--brass); background:rgba(201,166,72,.08); }
.sec-head { max-width:660px; margin-bottom:56px; }
.kicker { display:inline-block; font-size:0.75rem; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--brass); margin-bottom:14px; }
.sec-head h2 { font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:700; }
.sec-head p { margin-top:14px; font-size:1.08rem; color:var(--gray); }

.grid { display:grid; gap:22px; }
.g3 { grid-template-columns:repeat(3,1fr); }
.g2 { grid-template-columns:repeat(2,1fr); }

.card {
  background:var(--white); border-radius:18px; padding:32px; border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(15,42,30,.04);
  transition:transform .2s, box-shadow .2s;
}
.card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(15,42,30,.10); }
.card h3 { font-size:1.22rem; margin-bottom:10px; }
.card p { color:var(--gray); font-size:0.97rem; }
.icon {
  width:52px; height:52px; border-radius:14px; margin-bottom:20px;
  background:linear-gradient(135deg, rgba(201,166,72,.18), rgba(201,166,72,.08));
  border:1px solid rgba(140,106,47,.25);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.stepnum { font-family:'Fraunces',serif; font-size:0.9rem; font-weight:700; color:var(--brass); letter-spacing:.1em; margin-bottom:8px; display:block; }
.icon.photo { width:100%; height:auto; aspect-ratio:1/1; background:none; border:none; overflow:hidden; }
.icon.photo img { width:100%; height:100%; object-fit:cover; border-radius:14px; }

/* subjects marquee-ish */
.dark { background:var(--ink); color:#fff; }
.dark .sec-head h2 { color:#fff; }
.dark .sec-head p { color:#93B0A0; }
.chips { display:flex; flex-wrap:wrap; gap:12px; }
.chip {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#D3E3D9;
  border-radius:999px; padding:11px 22px; font-size:0.94rem; font-weight:500;
  transition:border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color:var(--gold); color:var(--gold-bright); background:rgba(201,166,72,.08); }

/* testimonials */
.quote { background:var(--white); border-radius:18px; padding:34px; border:1px solid var(--line); position:relative; }
.quote::before { content:"“"; position:absolute; top:6px; left:22px; font-family:'Fraunces',serif; font-size:4.5rem; color:var(--gold); opacity:.5; line-height:1; }
.quote p { font-size:1.05rem; color:var(--ink-2); padding-top:26px; }
.quote .who { margin-top:20px; font-weight:700; font-size:0.88rem; display:flex; align-items:center; gap:10px; }
.quote .who::before { content:""; width:22px; height:2px; background:var(--gold); }

/* CTA band */
.band {
  position:relative; overflow:hidden; border-radius:26px; padding:72px 56px; text-align:center; color:#fff;
  background:
    radial-gradient(700px 300px at 50% -40%, rgba(201,166,72,.3), transparent 70%),
    linear-gradient(150deg, #17402D, #0F2A1E);
  border:1px solid rgba(255,255,255,.08);
}
.band h2 { font-size:clamp(2rem,4vw,3rem); margin-bottom:16px; }
.band p { color:#A3BEAE; max-width:520px; margin:0 auto 34px; font-size:1.08rem; }

/* footer */
footer { background:var(--ink); color:#7FA090; padding:64px 0 36px; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:48px; }
footer h4 { color:#fff; font-size:0.92rem; margin-bottom:16px; letter-spacing:.04em; }
footer ul { list-style:none; }
footer li { margin-bottom:10px; }
footer a { text-decoration:none; font-size:0.92rem; transition:color .15s; }
footer a:hover { color:var(--gold-bright); }
.foot-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:26px; font-size:0.84rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* reveal on scroll */
.rv { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.rv.in { opacity:1; transform:none; }

@media (max-width:960px) {
  .hero .wrap { grid-template-columns:1fr; }
  .hero-photo { max-width:480px; margin:0 auto; }
  .g3 { grid-template-columns:1fr 1fr; }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .g2,.g3 { grid-template-columns:1fr; }
  section { padding:64px 0; }
  .band { padding:48px 26px; }
  .hero { padding:72px 0 84px; }
  .hero-stats { gap:28px; flex-wrap:wrap; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:var(--ink); flex-direction:column; padding:26px; gap:20px; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav-links.open { display:flex; }
  .menu-btn { display:block; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .rv { opacity:1; transform:none; transition:none; }
  .card:hover,.btn:hover { transform:none; }
}