*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --green: #4CAF50;
    --green-dark: #388E3C;
    --yellow: #FFC107;
    --red: #F44336;
    --blue: #2196F3;
    --orange: #FF9800;
    --pink: #E91E63;
    --text: #333;
    --light: #f9f9f9;
    --gray: #777;
    --border: #eee;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Quicksand', sans-serif;
    color: var(--text);
    overflow-x: hidden;
    background: #fff;
  }

  /* NAV */
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 6%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .logo {
    font-family: 'Pacifico', cursive;
    color: var(--green);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  .logo span { color: var(--yellow); }
  .nav-links { display: flex; gap: 28px; list-style: none; }
  .nav-links a { text-decoration: none; color: var(--text); font-weight: 600; font-size: 0.95rem; transition: color .2s; }
  .nav-links a:hover { color: var(--green); }
  .nav-actions { display: flex; gap: 12px; align-items: center; }
  .btn { display: inline-block; padding: 10px 24px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all .2s; border: none; font-family: 'Quicksand', sans-serif; text-decoration: none; }
  .btn-green { background: var(--green); color: #fff; }
  .btn-green:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(76,175,80,.4); }
  .btn-outline { background: transparent; color: var(--green); border: 2px solid var(--green); }
  .btn-outline:hover { background: var(--green); color: #fff; }
  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
  .hamburger span { width: 26px; height: 3px; background: var(--text); border-radius: 2px; transition: .3s; }

  /* HERO */
  .hero {
    min-height: 520px;
    background: linear-gradient(120deg, #e8f5e9 60%, #fff9c4 100%);
    display: flex;
    align-items: center;
    padding: 60px 6%;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: rgba(255,193,7,.13);
  }
  .hero-content { max-width: 520px; position: relative; z-index: 2; }
  .hero-content h1 {
    font-family: 'Pacifico', cursive;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 18px;
  }
  .hero-content h1 span { color: var(--green); }
  .hero-content p { color: var(--gray); font-size: 1.05rem; margin-bottom: 28px; line-height: 1.7; }
  .hero-img {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
  }
  .hero-img img { width: 100%; max-width: 520px; border-radius: 24px; object-fit: cover; }
  .hero-placeholder {
    width: 100%;
    max-width: 520px;
    height: 340px;
    background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
  }

  /* FEATURES ICONS */
  .features {
    padding: 48px 6%;
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    background: #fff;
  }
  .feature-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .feature-icon {
    width: 76px; height: 76px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.13);
  }
  .feature-item p { font-weight: 700; font-size: 0.9rem; color: var(--text); text-align: center; }

  /* WELCOME */
  .welcome {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 64px 6%;
    background: var(--light);
    flex-wrap: wrap;
  }
  .welcome-imgs {
    flex: 1;
    min-width: 280px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .welcome-imgs .img-box {
    border-radius: 18px;
    overflow: hidden;
    background: #c8e6c9;
    height: 160px;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
  }
  .welcome-imgs .img-box.tall { grid-row: span 2; height: 100%; min-height: 220px; }
  .welcome-text { flex: 1; min-width: 280px; }
  .section-label { color: var(--green); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
  .welcome-text h2 { font-family: 'Pacifico', cursive; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 16px; }
  .welcome-text h2 span { color: var(--green); }
  .welcome-text p { color: var(--gray); line-height: 1.8; margin-bottom: 24px; }

  /* ENROLL BANNER */
  .enroll-banner {
    background: linear-gradient(135deg, #e8f5e9, #f9fbe7);
    padding: 52px 6%;
    text-align: center;
  }
  .enroll-banner h2 { font-family: 'Pacifico', cursive; color: var(--green); font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 12px; }
  .enroll-banner p { color: var(--gray); max-width: 580px; margin: 0 auto 24px; line-height: 1.7; }

  /* CLASSES */
  .classes { padding: 64px 6%; background: #fff; }
  .section-title { text-align: center; margin-bottom: 40px; }
  .section-title h2 { font-family: 'Pacifico', cursive; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 10px; }
  .section-title p { color: var(--gray); max-width: 500px; margin: 0 auto; }
  .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
  .card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transition: transform .25s, box-shadow .25s;
    background: #fff;
  }
  .card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,.13); }
  .card-img {
    height: 170px;
    background: linear-gradient(135deg, #a5d6a7, #c8e6c9);
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem;
  }
  .card-body { padding: 18px; }
  .card-body h3 { font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
  .card-meta { display: flex; gap: 16px; color: var(--gray); font-size: 0.82rem; margin-bottom: 10px; }
  .card-meta span { display: flex; align-items: center; gap: 4px; }
  .card-stars { color: var(--yellow); font-size: 0.82rem; }
  .card-price { color: var(--green); font-weight: 800; font-size: 0.9rem; }

  /* EDUCATORS */
  .educators { padding: 64px 6%; background: var(--light); }
  .educators-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; margin-top: 40px; }
  .educator-card { text-align: center; }
  .educator-avatar {
    width: 110px; height: 110px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, #a5d6a7, #81c784);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.8rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
  }
  .educator-card h4 { font-weight: 800; font-size: 0.95rem; margin-bottom: 4px; }
  .educator-card p { color: var(--gray); font-size: 0.82rem; }
  .educator-card .stars { color: var(--yellow); font-size: 0.8rem; margin-top: 4px; }

  /* ACTIVITIES */
  .activities { padding: 64px 6%; background: #fff; }
  .activity-tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
  .tab-btn {
    padding: 8px 22px; border-radius: 50px;
    border: 2px solid var(--border);
    background: #fff; cursor: pointer;
    font-weight: 700; font-size: 0.85rem;
    font-family: 'Quicksand', sans-serif;
    transition: all .2s;
    color: var(--gray);
  }
  .tab-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
  .activities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
  .activity-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    transition: all .2s;
  }
  .activity-card:hover { border-color: var(--green); box-shadow: 0 4px 16px rgba(76,175,80,.15); }
  .activity-card .tag { font-size: 0.75rem; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
  .activity-card h4 { font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
  .activity-card p { color: var(--gray); font-size: 0.82rem; }

  /* UPCOMING EVENTS */
  .upcoming { padding: 64px 6%; background: var(--light); display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
  .upcoming-content { flex: 1; min-width: 280px; }
  .upcoming-content h2 { font-family: 'Pacifico', cursive; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 24px; }
  .event-item {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 0; border-bottom: 1px solid var(--border);
  }
  .event-num {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.9rem; flex-shrink: 0;
  }
  .event-item h4 { font-weight: 800; margin-bottom: 4px; font-size: 0.95rem; }
  .event-item p { color: var(--gray); font-size: 0.82rem; }
  .upcoming-img {
    flex: 0 0 280px;
    height: 280px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
    display: flex; align-items: center; justify-content: center;
    font-size: 6rem;
    overflow: hidden;
  }

  /* GALLERY */
  .gallery { padding: 64px 6%; background: #fff; }
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 14px;
    margin-top: 36px;
  }
  .gallery-item {
    border-radius: 16px; overflow: hidden;
    background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    aspect-ratio: 1;
    transition: transform .25s;
  }
  .gallery-item:hover { transform: scale(1.03); }
  .gallery-item.wide { grid-column: span 2; aspect-ratio: 2/1; }
  .gallery-item.tall { grid-row: span 2; aspect-ratio: auto; min-height: 200px; }
  .gallery-center { text-align: center; margin-top: 32px; }

  /* TESTIMONIAL */
  .testimonial {
    padding: 64px 6%;
    background: var(--light);
    display: flex; align-items: center; gap: 48px; flex-wrap: wrap;
  }
  .testimonial-img {
    width: 90px; height: 90px; border-radius: 50%;
    background: linear-gradient(135deg, #a5d6a7, #81c784);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; flex-shrink: 0;
  }
  .testimonial-content { flex: 1; min-width: 260px; }
  .testimonial-content blockquote {
    font-size: 1.05rem; color: var(--gray);
    line-height: 1.8; margin-bottom: 16px;
    font-style: italic;
  }
  .testimonial-content strong { font-weight: 800; font-size: 0.95rem; display: block; }
  .testimonial-content span { color: var(--gray); font-size: 0.85rem; }
  .dots { display: flex; gap: 8px; margin-top: 20px; }
  .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); cursor: pointer; }
  .dot.active { background: var(--green); }

  /* NEWS */
  .news { padding: 64px 6%; background: #fff; }
  .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; margin-top: 36px; }
  .news-card { border-radius: 18px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.07); transition: transform .25s; }
  .news-card:hover { transform: translateY(-5px); }
  .news-img { height: 180px; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
  .news-body { padding: 20px; }
  .news-body h4 { font-weight: 800; font-size: 0.95rem; margin-bottom: 8px; line-height: 1.4; }
  .news-body p { color: var(--gray); font-size: 0.82rem; line-height: 1.6; }
  .news-center { text-align: center; margin-top: 36px; }

  /* ENROLL FORM */
  .enroll-form-section { padding: 64px 6%; background: var(--light); }
  .enroll-form-section h2 { font-family: 'Pacifico', cursive; font-size: clamp(1.4rem, 3vw, 1.9rem); text-align: center; margin-bottom: 8px; }
  .enroll-form-section > p { text-align: center; color: var(--gray); margin-bottom: 32px; }
  .enroll-form {
    max-width: 600px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-group.full { grid-column: span 2; }
  .form-group label { font-weight: 700; font-size: 0.85rem; color: var(--text); }
  .form-group input, .form-group select {
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color .2s;
  }
  .form-group input:focus, .form-group select:focus { border-color: var(--green); }
  .form-submit { grid-column: span 2; text-align: center; margin-top: 8px; }

  /* FOOTER */
  footer { background: #2d3436; color: #ccc; padding: 52px 6% 28px; }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
  .footer-brand .logo { color: #fff; margin-bottom: 14px; display: block; }
  .footer-brand p { font-size: 0.88rem; line-height: 1.8; color: #aaa; }
  .footer-col h4 { font-weight: 800; color: #fff; margin-bottom: 16px; font-size: 0.95rem; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .footer-col ul a { color: #aaa; text-decoration: none; font-size: 0.88rem; transition: color .2s; }
  .footer-col ul a:hover { color: var(--green); }
  .social-links { display: flex; gap: 10px; margin-top: 16px; }
  .social-links a {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.85rem; text-decoration: none;
    transition: background .2s;
  }
  .social-links a:hover { background: var(--green); }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; text-align: center; color: #777; font-size: 0.82rem; }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-item.wide { grid-column: span 2; }
  }
  @media (max-width: 768px) {
    .nav-links, .nav-actions { display: none; }
    .hamburger { display: flex; }
    .hero { flex-direction: column; text-align: center; padding: 40px 6%; }
    .hero-img { margin-top: 32px; }
    .welcome { flex-direction: column; }
    .upcoming { flex-direction: column; }
    .upcoming-img { margin: 0 auto; }
    .enroll-form { grid-template-columns: 1fr; }
    .form-group.full, .form-submit { grid-column: span 1; }
    .footer-grid { grid-template-columns: 1fr; }
    .testimonial { flex-direction: column; }
  }
  @media (max-width: 480px) {
    .features { gap: 24px; }
    .gallery-grid { grid-template-columns: 1fr 1fr; }
  }

  /* Mobile menu */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 2000;
  }
  .mobile-menu.open { display: block; }
  .mobile-menu-inner {
    background: #fff;
    width: 280px;
    height: 100%;
    padding: 32px 24px;
    display: flex; flex-direction: column; gap: 24px;
  }
  .mobile-menu-inner a { text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.05rem; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .close-btn { align-self: flex-end; font-size: 1.5rem; cursor: pointer; color: var(--gray); background: none; border: none; }

  /* ─── ALIGNMENT CORRECTIONS ─────────────────────────────────────────────── */

  /* NAV — lock height, vertically centre all children */
  nav { min-height: 68px; align-items: center; }
  .logo { line-height: 1; }

  /* HERO — equal left/right breathing room; image fills its column */
  .hero { gap: 48px; align-items: center; padding: 72px 6%; }
  .hero-content { flex: 0 0 auto; }
  .hero-img { flex: 1; align-items: center; min-width: 0; }
  .hero-img img { height: 380px; max-width: 100%; }

  /* FEATURES — fixed-width items so all four always align */
  .feature-item { width: 120px; }
  .feature-icon { flex-shrink: 0; }

  /* WELCOME — image grid matches text column height */
  .welcome { align-items: stretch; }
  .welcome-imgs { align-self: stretch; }
  .welcome-imgs .img-box { height: 148px; }
  .welcome-imgs .img-box.tall { height: 100%; min-height: 308px; }
  .welcome-text { display: flex; flex-direction: column; justify-content: center; }

  /* CARDS — uniform image height, body stretches to fill */
  .cards-grid { align-items: stretch; }
  .card { display: flex; flex-direction: column; }
  .card-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
  .card-img { flex-shrink: 0; height: 180px; }

  /* EDUCATORS — avatar always centred, text block consistent */
  .educators-grid { align-items: start; }
  .educator-card { display: flex; flex-direction: column; align-items: center; }
  .educator-avatar { flex-shrink: 0; }

  /* ACTIVITIES — all cards same height */
  .activities-grid { align-items: stretch; }
  .activity-card { display: flex; flex-direction: column; }
  .activity-card p { flex: 1; }

  /* UPCOMING — content and image vertically centred */
  .upcoming { align-items: center; }
  .upcoming-content { display: flex; flex-direction: column; justify-content: center; }
  .event-item { align-items: flex-start; }
  .event-num { margin-top: 2px; }

  /* GALLERY — consistent row heights */
  .gallery-item { min-height: 160px; }
  .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* TESTIMONIAL — image and text baseline-aligned */
  .testimonial { align-items: flex-start; padding: 72px 6%; }
  .testimonial-img { margin-top: 4px; }

  /* NEWS — uniform card height */
  .news-grid { align-items: stretch; }
  .news-card { display: flex; flex-direction: column; }
  .news-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
  .news-img { flex-shrink: 0; }
  .news-img img { width: 100%; height: 180px; object-fit: cover; display: block; }

  /* ENROLL FORM — form fields consistent height */
  .enroll-form { align-items: start; }
  .form-group input,
  .form-group select { height: 48px; }

  /* FOOTER — columns top-aligned */
  .footer-grid { align-items: start; }

  /* SECTION LABEL — consistent bottom gap everywhere */
  .section-label { display: block; margin-bottom: 10px; }

  /* RESPONSIVE alignment fixes */
  @media (max-width: 768px) {
    .hero { gap: 32px; padding: 48px 6%; }
    .hero-img img { height: 260px; }
    .welcome-imgs .img-box.tall { min-height: 220px; }
    .testimonial { align-items: center; }
    .testimonial-img { margin-top: 0; }
    .feature-item { width: 100px; }
  }

  @media (max-width: 480px) {
    .feature-item { width: 88px; }
    .gallery-item { min-height: 120px; }
  }

  /* ─── MOBILE RESPONSIVE ──────────────────────────────────────────────────── */

  /* ── Tablet: 900px ── */
  @media (max-width: 900px) {
    .hero { gap: 36px; padding: 56px 6%; }
    .hero-content h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
    .hero-img img { height: 300px; }
    .welcome { gap: 32px; padding: 52px 6%; }
    .welcome-imgs .img-box { height: 130px; }
    .welcome-imgs .img-box.tall { min-height: 270px; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .educators-grid { grid-template-columns: repeat(3, 1fr); }
    .activities-grid { grid-template-columns: repeat(3, 1fr); }
    .upcoming-img { flex: 0 0 240px; height: 240px; }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .gallery-item.wide { grid-column: span 2; }
    .gallery-item.tall { grid-row: span 2; }
  }

  /* ── Mobile: 768px ── */
  @media (max-width: 768px) {
    .hero { flex-direction: column; text-align: center; padding: 48px 5%; gap: 28px; align-items: center; }
    .hero-content { max-width: 100%; }
    .hero-content h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
    .hero-content p { font-size: 0.98rem; }
    .hero-img { justify-content: center; width: 100%; margin-top: 0; }
    .hero-img img { height: 240px; max-width: 100%; border-radius: 18px; }
    .features { gap: 20px; padding: 36px 5%; flex-wrap: wrap; justify-content: center; }
    .feature-item { width: 90px; }
    .feature-icon { width: 64px; height: 64px; font-size: 1.4rem; }
    .welcome { flex-direction: column; gap: 28px; padding: 48px 5%; }
    .welcome-imgs { width: 100%; grid-template-columns: 1fr 1fr; }
    .welcome-imgs .img-box { height: 130px; }
    .welcome-imgs .img-box.tall { min-height: 270px; grid-row: span 2; }
    .welcome-text { min-width: 0; width: 100%; }
    .welcome-text h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); }
    .enroll-banner { padding: 40px 5%; }
    .enroll-banner h2 { font-size: clamp(1.2rem, 4vw, 1.6rem); }
    .classes { padding: 48px 5%; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .card-img, .card-img img { height: 150px; }
    .educators { padding: 48px 5%; }
    .educators-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .educator-avatar, .educator-avatar img { width: 90px; height: 90px; font-size: 2.2rem; }
    .activities { padding: 48px 5%; }
    .activities-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .activity-tabs { gap: 8px; }
    .tab-btn { padding: 7px 16px; font-size: 0.82rem; }
    .upcoming { flex-direction: column; padding: 48px 5%; gap: 32px; align-items: center; }
    .upcoming-content { width: 100%; }
    .upcoming-img { flex: 0 0 220px; width: 220px; height: 220px; margin: 0 auto; }
    .gallery { padding: 48px 5%; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gallery-item.wide { grid-column: span 2; }
    .gallery-item.tall { grid-row: span 1; aspect-ratio: 1; }
    .gallery-item { min-height: 130px; }
    .testimonial { flex-direction: column; align-items: center; text-align: center; padding: 48px 5%; gap: 24px; }
    .testimonial-img { margin-top: 0; }
    .dots { justify-content: center; }
    .news { padding: 48px 5%; }
    .news-grid { grid-template-columns: 1fr; gap: 20px; }
    .enroll-form-section { padding: 48px 5%; }
    .enroll-form { grid-template-columns: 1fr; gap: 14px; }
    .form-group.full, .form-submit { grid-column: span 1; }
    .form-submit button { width: 100%; }
    footer { padding: 44px 5% 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-brand { text-align: center; }
    .social-links { justify-content: center; }
    .section-title { margin-bottom: 28px; }
    .section-title h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); }
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .tab-btn { min-height: 40px; }
    .dot { width: 12px; height: 12px; }
    .social-links a { width: 42px; height: 42px; }
  }

  /* ── Small Mobile: 480px ── */
  @media (max-width: 480px) {
    .hero { padding: 36px 4%; }
    .hero-content h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
    .hero-img img { height: 200px; border-radius: 14px; }
    .features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 32px 4%; justify-items: center; }
    .feature-item { width: auto; }
    .feature-icon { width: 58px; height: 58px; font-size: 1.3rem; }
    .cards-grid { grid-template-columns: 1fr; }
    .card-img, .card-img img { height: 200px; }
    .educators-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .activities-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr; gap: 10px; }
    .gallery-item, .gallery-item.wide, .gallery-item.tall { grid-column: span 1; grid-row: span 1; aspect-ratio: 16/9; min-height: 140px; }
    .upcoming-img { width: 180px; height: 180px; flex: 0 0 180px; }
    .news-grid { grid-template-columns: 1fr; }
    .btn { padding: 10px 20px; font-size: 0.85rem; }
    footer { padding: 36px 4% 20px; }
    .footer-grid { gap: 22px; }
    .enroll-form-section { padding: 36px 4%; }
    .mobile-menu-inner { width: 100%; }
  }

  /* ── Very small: 360px ── */
  @media (max-width: 360px) {
    nav { padding: 12px 4%; }
    .logo span { font-size: 1.3rem !important; }
    .hero-content h1 { font-size: 1.4rem; }
    .feature-icon { width: 52px; height: 52px; font-size: 1.1rem; }
    .educators-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ── Global safety ── */
  img { max-width: 100%; }
  * { -webkit-tap-highlight-color: transparent; }

  /* ─── FINAL MOBILE POLISH ────────────────────────────────────────────────── */

  /* Override inline fixed heights on images at mobile — must use !important
     because the heights are set as inline style="" attributes on the HTML elements */

  @media (max-width: 768px) {

    /* Hero image inline height override */
    .hero-img img { height: 240px !important; max-width: 100% !important; }

    /* Card images inline height override */
    .card-img img { height: 150px !important; width: 100% !important; }

    /* News images inline height override */
    .news-img img { height: 160px !important; width: 100% !important; }

    /* Educator avatar images */
    .educator-avatar img { width: 88px !important; height: 88px !important; }

    /* Testimonial image */
    .testimonial-img img { width: 80px !important; height: 80px !important; }

    /* Enroll banner text sizing */
    .enroll-banner { padding: 36px 5%; }
    .enroll-banner h2 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
    .enroll-banner p { font-size: 0.9rem; }

    /* Educators section padding */
    .educators { padding: 48px 5%; }
    .educators-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }

    /* Upcoming section — circle image fixed size */
    .upcoming-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

    /* Welcome images inline height override */
    .welcome-imgs .img-box img { height: 100% !important; }
    .welcome-imgs .img-box { height: 130px; }
    .welcome-imgs .img-box.tall { height: auto; min-height: 265px; }

    /* Gallery inline heights */
    .gallery-item img { width: 100% !important; height: 100% !important; }

    /* Section title padding fix */
    .classes, .educators, .activities, .gallery, .news { padding: 48px 5%; }

    /* Form full width on mobile */
    .enroll-form input,
    .enroll-form select { width: 100%; box-sizing: border-box; }

    /* Footer brand logo centering */
    .footer-brand .logo { justify-content: center; }

    /* Prevent horizontal scroll from any overflowing element */
    body { overflow-x: hidden; }
    section { overflow-x: hidden; }

    /* Nav hamburger always visible, links hidden */
    .nav-links { display: none !important; }
    .nav-actions { display: none !important; }
    .hamburger { display: flex !important; }
  }

  @media (max-width: 480px) {

    /* Hero */
    .hero-img img { height: 200px !important; }
    .hero { padding: 36px 4%; gap: 24px; }
    .hero-content h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
    .hero-content p { font-size: 0.93rem; }

    /* Card images */
    .card-img img { height: 180px !important; }

    /* News images */
    .news-img img { height: 170px !important; }

    /* Cards single column */
    .cards-grid { grid-template-columns: 1fr; gap: 16px; }

    /* Educators 2 columns */
    .educators-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* Activities single column */
    .activities-grid { grid-template-columns: 1fr; }

    /* News single column */
    .news-grid { grid-template-columns: 1fr; gap: 16px; }

    /* Gallery single column */
    .gallery-grid { grid-template-columns: 1fr; gap: 10px; }
    .gallery-item,
    .gallery-item.wide,
    .gallery-item.tall { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 16/9; min-height: 160px; }

    /* Footer single column */
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-brand { text-align: center; }
    .footer-brand .logo { justify-content: center; }
    .social-links { justify-content: center; }

    /* Form single column */
    .enroll-form { grid-template-columns: 1fr; gap: 12px; }
    .form-group.full { grid-column: span 1; }
    .form-submit { grid-column: span 1; }
    .form-submit button { width: 100%; }

    /* Upcoming circle */
    .upcoming-img { width: 180px !important; height: 180px !important; flex: 0 0 180px !important; }

    /* Features 2×2 */
    .features { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; justify-items: center; padding: 32px 4%; }
    .feature-item { width: auto; }

    /* Buttons full width in banner */
    .enroll-banner .btn { width: 100%; max-width: 320px; }

    /* Sections padding */
    .classes, .educators, .activities, .gallery, .news,
    .welcome, .upcoming, .testimonial, .enroll-form-section { padding: 40px 4%; }
    .enroll-banner { padding: 32px 4%; }
    footer { padding: 36px 4% 20px; }
  }

  @media (max-width: 360px) {
    .hero-img img { height: 170px !important; }
    .cards-grid { grid-template-columns: 1fr; }
    .educators-grid { grid-template-columns: 1fr 1fr; }
    .features { gap: 14px; padding: 28px 4%; }
    .feature-icon { width: 52px !important; height: 52px !important; font-size: 1.1rem !important; }
    nav { padding: 10px 4%; }
    .hero-content h1 { font-size: 1.35rem; }
  }

  /* ── Prevent all images from ever overflowing their containers ── */
  img { max-width: 100%; height: auto; }
  .card-img img,
  .news-img img,
  .gallery-item img,
  .welcome-imgs img,
  .hero-img img { display: block; }

  /* ─── BABYSTEPS — MISSING PIECES ─────────────────────────────────────────── */

  /* Active nav link state (added by script.js highlightNav) */
  .nav-links a.active-nav { color: var(--green); font-weight: 700; }

  /* Hamburger → X animation when menu is open */
  .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Mobile menu — slide in from left */
  .mobile-menu-inner {
    transition: transform .3s ease;
  }
  .mobile-menu.open .mobile-menu-inner {
    transform: translateX(0);
  }

  /* Overlay fade — use display toggle only, no opacity conflict */
  .mobile-menu { display: none; }
  .mobile-menu.open { display: block; opacity: 1; }

  /* Mobile menu enroll button proper sizing */
  .mobile-menu-inner .btn-green {
    margin-top: 8px;
    padding: 12px 20px;
    font-size: 0.95rem;
    border-radius: 50px;
  }

  /* Touch ripple effect on buttons */
  .btn { position: relative; overflow: hidden; }
  .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.18);
    opacity: 0;
    transition: opacity .2s;
    border-radius: inherit;
  }
  .btn:active::after { opacity: 1; }

  /* Smooth card hover on touch devices — disable translateY on touch */
  @media (hover: none) {
    .card:hover { transform: none; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
    .news-card:hover { transform: none; }
    .gallery-item:hover { transform: none; }
  }

  /* Form submit button — full width on all mobile */
  @media (max-width: 768px) {
    .form-submit button { width: 100%; padding: 14px !important; font-size: 0.95rem !important; }

    /* Hamburger animation applies only when open class is added via JS */
    .hamburger { cursor: pointer; padding: 4px; }
    .hamburger span { transition: transform .3s ease, opacity .3s ease; }

    /* Mobile menu full overlay fix — handled globally above */

    /* Fix logo SVG scaling in nav on mobile */
    .logo svg { width: 28px; height: 28px; flex-shrink: 0; }
    .logo > span { font-size: 1.3rem !important; }

    /* Upcoming events — center text on mobile */
    .upcoming-content h2 { text-align: center; }
    .upcoming-content .section-label { text-align: center; }

    /* Testimonial — center everything */
    .testimonial-content { text-align: center; }
    .dots { justify-content: center; }

    /* Section label always centred in banner */
    .enroll-banner .section-label { display: block; text-align: center; }
  }

  @media (max-width: 480px) {
    /* Logo text smaller on very small screens */
    .logo > span { font-size: 1.15rem !important; }
    .logo svg { width: 24px; height: 24px; }

    /* Nav tighter */
    nav { padding: 12px 4%; min-height: 58px; }

    /* Enroll banner button centred */
    .enroll-banner { display: flex; flex-direction: column; align-items: center; }

    /* Footer contact list — text wraps gracefully */
    .footer-col ul li a { font-size: 0.82rem; }

    /* Activity tabs scroll horizontally on very small screens */
    .activity-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; justify-content: flex-start; }
    .activity-tabs::-webkit-scrollbar { display: none; }
    .tab-btn { flex-shrink: 0; }

    /* Testimonial image centred */
    .testimonial-img { margin: 0 auto; }

    /* Enroll form button full width */
    .form-submit { display: flex; justify-content: center; }
    .form-submit button { width: 100%; max-width: 320px; }
  }