/* Happy Valley Pre-Primary — rebuilt static site
   Palette pulled from the real logo: leaf green + sunny yellow/orange */
:root{
  --green:#1e9e4e;
  --green-dark:#0f7a38;
  --yellow:#ffd500;
  --orange:#f5941f;
  --ink:#2b2b28;
  --cream:#fffaf0;
  --white:#ffffff;
  --radius:18px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Trebuchet MS','Segoe UI',Verdana,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:'Trebuchet MS','Segoe UI',Verdana,sans-serif;margin:0 0 .5em;line-height:1.2;}
.container{max-width:1140px;margin:0 auto;padding:0 24px;}

/* Header */
header.site-header{
  background:var(--white);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  position:sticky;top:0;z-index:50;
  border-bottom:4px solid var(--yellow);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px;max-width:1140px;margin:0 auto;
}
.logo img{height:70px;width:auto;}
nav.main-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;}
nav.main-nav a{font-weight:bold;color:var(--green-dark);padding:8px 4px;border-bottom:3px solid transparent;transition:.2s;}
nav.main-nav a:hover, nav.main-nav a.active{border-bottom-color:var(--orange);color:var(--orange);}
.nav-toggle{display:none;background:none;border:none;font-size:28px;color:var(--green-dark);cursor:pointer;}

@media(max-width:820px){
  nav.main-nav{display:none;width:100%;}
  nav.main-nav.open{display:block;}
  nav.main-nav ul{flex-direction:column;gap:0;background:var(--white);}
  nav.main-nav a{display:block;padding:14px 24px;border-bottom:1px solid #eee;}
  .nav-toggle{display:block;}
  .header-inner{flex-wrap:wrap;}
}

/* Hero */
.hero{
  background:
    radial-gradient(circle at 15% 20%, rgba(255,213,0,.35) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(245,148,31,.3) 0, transparent 45%),
    linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  color:var(--white);
  padding:70px 0 90px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero h1{font-size:2.6rem;text-shadow:0 2px 8px rgba(0,0,0,.15);}
.hero p.tagline{font-size:1.2rem;opacity:.97;margin-bottom:0;}

/* Feature cards */
.features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  max-width:1140px;margin:-60px auto 60px;padding:0 24px;position:relative;
}
@media(max-width:900px){.features{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.features{grid-template-columns:1fr;}}
.feature-card{
  background:var(--white);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  border-top:5px solid var(--yellow);
}
.feature-card .imgwrap{height:190px;overflow:hidden;background:#eee;}
.feature-card img{height:100%;width:100%;object-fit:cover;object-position:top center;}
.feature-card .txt{padding:18px;}
.feature-card h4{color:var(--green-dark);font-size:1.05rem;}
.feature-card p{font-size:.92rem;margin:0;color:#555;}

/* Intro / about strip */
.intro{
  display:flex;align-items:center;gap:48px;padding:50px 0;
}
.intro img{border-radius:var(--radius);flex:0 0 300px;}
.intro .txt{flex:1;}
@media(max-width:800px){.intro{flex-direction:column;} .intro img{flex:none;width:100%;}}

.cta-banner{
  background:linear-gradient(120deg,var(--orange),var(--yellow));
  color:var(--white);text-align:center;
  padding:40px 24px;border-radius:var(--radius);margin:40px auto;max-width:1140px;
  box-shadow:0 10px 25px rgba(0,0,0,.1);
}
.cta-banner h3{text-shadow:0 1px 4px rgba(0,0,0,.15);}
.cta-banner a.btn{
  display:inline-block;margin-top:16px;background:var(--white);color:var(--orange);
  font-weight:bold;padding:12px 28px;border-radius:30px;transition:.2s;
}
.cta-banner a.btn:hover{background:var(--ink);color:var(--white);}
.cta-banner.alt{background:linear-gradient(120deg,var(--green),var(--green-dark));}
.cta-banner.alt a.btn{color:var(--green-dark);}

/* Section headings */
.section-title{text-align:center;margin:60px 0 30px;}
.section-title h2{color:var(--green-dark);font-size:2rem;}
.section-title p{color:#777;}
.section-title .dots{display:flex;justify-content:center;gap:8px;margin-top:10px;}
.section-title .dots span{width:10px;height:10px;border-radius:50%;display:inline-block;}
.section-title .dots span:nth-child(1){background:var(--yellow);}
.section-title .dots span:nth-child(2){background:var(--orange);}
.section-title .dots span:nth-child(3){background:var(--green);}

/* Classes grid */
.classes-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0 24px 20px;max-width:1140px;margin:0 auto;
}
@media(max-width:900px){.classes-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.classes-grid{grid-template-columns:1fr;}}
.class-card{
  background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.1);
  transition:transform .2s;
}
.class-card:hover{transform:translateY(-4px);}
.class-card .imgwrap{height:230px;overflow:hidden;background:#eee;}
.class-card img{height:100%;width:100%;object-fit:cover;object-position:top center;}
.class-card .txt{padding:18px;}
.class-card h3{color:var(--green-dark);}
.class-card h3 a{color:inherit;}
.class-card .badge{
  display:inline-block;background:#e9f7ee;color:var(--green-dark);font-size:.75rem;font-weight:bold;
  padding:4px 10px;border-radius:20px;margin-bottom:8px;
}
.class-card ul{list-style:none;margin:10px 0 14px;padding:0;font-size:.88rem;color:#666;}
.class-card ul li{margin-bottom:4px;}
.class-card .readmore{
  display:inline-block;font-weight:bold;color:var(--orange);font-size:.9rem;
}
.class-card .readmore:hover{text-decoration:underline;}

/* Teachers grid */
.teachers-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:0 24px 40px;max-width:1140px;margin:0 auto;
}
@media(max-width:900px){.teachers-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.teachers-grid{grid-template-columns:repeat(2,1fr);}}
.teacher-card{text-align:center;}
.teacher-card .imgwrap{
  width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.15);border:4px solid var(--white);outline:3px solid var(--yellow);
}
.teacher-card img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.teacher-card h4{margin:14px 0 2px;color:var(--green-dark);}
.teacher-card span{font-size:.85rem;color:#888;}

/* Specialists strip (mixed aspect ratios incl. one partner logo) */
.specialists-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1140px;margin:0 auto;padding:0 24px 20px;
}
@media(max-width:700px){.specialists-grid{grid-template-columns:repeat(2,1fr);}}
.specialist-tile{
  b