/* ==========================================================================
   Little Pumpkins — mobile.css
   ADDITIVE ONLY. Zero edits to existing desktop rules.
   All rules are scoped to max-width: 1023px or below.
   Desktop (≥1024px) is completely unaffected by this file.
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL: OVERFLOW GUARD
   ========================================================================== */
@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Additive: ensure all images can never bust their containers */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Clip decorative fixed-width elements that would cause horizontal scroll */
  .decor-flowing-line,
  .decor-abstract-shape {
    display: none;
  }

  /* Hero bottom-left wave is decorative; clip it rather than let it overflow */
  .hero-bottom-left-wave {
    max-width: 100vw;
    overflow: hidden;
  }
}


/* ==========================================================================
   2. NAVIGATION — Hamburger & mobile menu
   ========================================================================== */

/* Make the header-cta-wrapper a flex row on all pages at tablet/mobile.
   This is purely additive — it applies the same layout as index.html's
   header-cta-wrapper already has, to inner pages that now also use the class. */
@media (max-width: 1023px) {
  .header-cta-wrapper {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-right: 0 !important;
    flex-shrink: 0;
  }

  /* Ensure hamburger bars are visible and correctly sized on all pages */
  .mobile-nav-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }

  .mobile-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-main);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* Hamburger → X animation when nav is active */
  .mobile-nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mobile-nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .mobile-nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Below 480px: hide the Contact Us header button to give the hamburger room */
@media (max-width: 480px) {
  .header-cta-btn {
    display: none !important;
  }
}

/* Mobile nav dropdown — closes on link click via JS; ensure smooth open/close */
@media (max-width: 1023px) {
  .nav-menu {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 16px 40px rgba(42, 36, 32, 0.10);
  }

  .nav-menu .nav-link {
    padding: 10px 0;
    font-size: 1rem !important;
    border-bottom: 1px solid var(--border-light);
    width: 100%;
  }

  .nav-menu .nav-link:last-child {
    border-bottom: none;
  }

  /* Staff Login: hidden as a floating icon on desktop only (components.css);
     show it as a full-width row inside the open mobile nav dropdown instead,
     since the desktop hover tooltip has no equivalent on touch. */
  .nav-menu .staff-login-btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    background: none;
  }

  .nav-menu .staff-login-btn:last-child {
    border-bottom: none;
  }

  .nav-menu .staff-login-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .nav-menu .staff-login-btn::after {
    content: 'Staff Login';
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: none;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    white-space: nowrap;
  }
}


/* ==========================================================================
   3. TYPOGRAPHY — enhanced readability for mobile screens (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
  h1 {
    font-size: clamp(2.15rem, 8vw, 2.85rem) !important;
    line-height: 1.15 !important;
  }
  h2 {
    font-size: clamp(2.05rem, 7.5vw, 2.65rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.02em !important;
  }
  h3 {
    font-size: clamp(1.22rem, 5vw, 1.55rem) !important;
    line-height: 1.28 !important;
  }
  h4 {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem) !important;
  }
  p {
    font-size: clamp(0.98rem, 3.6vw, 1.08rem) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
  }

  /* Eyebrows, chips, badges, labels: clear and easy to read on phones */
  .hero-eyebrow,
  .section-eyebrow,
  .sh-eyebrow,
  .cs-eyebrow,
  .eyebrow-tag {
    font-size: 0.85rem !important;
    letter-spacing: 0.1em !important;
  }
  .img-badge,
  .card-badge,
  .photo-badge,
  .badge,
  .branch-badge {
    font-size: 0.78rem !important;
    padding: 6px 14px !important;
  }
  .img-rating,
  .rating-badge {
    font-size: 0.85rem !important;
    padding: 6px 13px !important;
  }
  .chip,
  .branch-tag,
  .campus-tag,
  .landmark-badge {
    font-size: 0.82rem !important;
    padding: 5px 13px !important;
  }
}


/* ==========================================================================
   4. BUTTONS & CTAs — tap-friendly sizing, no overflow
   ========================================================================== */
@media (max-width: 767px) {
  /* Ensure all amber buttons have at least 44px tap target height */
  .btn-amber {
    min-height: 44px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Disable translateX hover animation on touch devices — it can misfire */
  @media (hover: none) {
    .btn-amber:hover {
      transform: translateZ(0) !important;
    }
    .btn-play-story:hover {
      transform: translateZ(0) !important;
    }
    .header-cta-btn:hover {
      transform: none !important;
    }
  }
}

@media (max-width: 480px) {
  /* Stack hero CTA row vertically on small phones */
  .hero-cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px !important;
  }

  .hero-cta-row .btn-amber {
    width: 100%;
    justify-content: center;
  }

  .btn-play-story {
    align-self: flex-start;
  }
}


/* ==========================================================================
   5. HOMEPAGE (index.html) — Scene 1 Hero
   ========================================================================== */

/* Fix the hard-coded min 380px max-width on hero subtext */
@media (max-width: 480px) {
  .hero-subtext {
    max-width: 100% !important;
  }
}

/* floating-quick-nav: allow horizontal scroll on tablets too (not just ≤480px) */
@media (max-width: 1023px) {
  .floating-quick-nav {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .floating-quick-nav::-webkit-scrollbar {
    display: none;
  }
  /* The strip is genuinely scrollable (more items than fit), but a hard
     clip at the pill's edge reads as broken rather than "swipe for more" —
     fade the last item out instead of cutting it off mid-word.
     This must be `position: sticky`, not `absolute`: an absolutely
     positioned descendant of the scrolling element itself still scrolls
     with the content (its containing block is the scroller's padding box,
     which pans with everything else) — only `sticky` actually stays
     pinned to the scrollport's edge as the user scrolls. */
  .floating-quick-nav::after {
    content: '';
    position: sticky;
    top: 0;
    right: 0;
    display: block;
    flex-shrink: 0;
    align-self: stretch;
    width: 32px;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 70%);
    pointer-events: none;
  }
}

/* Ensure the kinetic headline wraps properly instead of forcing nowrap */
@media (max-width: 480px) {
  .headline-line {
    white-space: normal !important;
  }
  .kinetic-headline {
    white-space: normal !important;
  }
}

/* Hero features row — 2-col already exists at 768px, add 1-col below 360px */
@media (max-width: 360px) {
  .hero-features-row {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   6. HOMEPAGE — Scene 2 (Prepared Environment)
   ========================================================================== */
@media (max-width: 767px) {
  .scene2-photo-card {
    width: 72%;
    max-width: 320px;
    margin: 0 auto;
  }

  .scene2-heading {
    font-size: clamp(1.55rem, 5.5vw, 2.2rem) !important;
  }
}

@media (max-width: 480px) {
  .scene2-cards-grid {
    gap: 20px;
  }

  .scene2-card {
    padding: 20px 16px 28px !important;
  }
}


/* ==========================================================================
   7. HOMEPAGE — Scene 3 (Play & Discovery)
   ========================================================================== */
@media (max-width: 767px) {
  /* Scene 3 pebble image should scale down */
  .scene3-pebble-frame {
    max-width: 320px;
    margin: 0 auto;
  }

  .scene3-title {
    font-size: clamp(1.8rem, 6vw, 2.6rem) !important;
  }

  /* Badge garden repositioned so it doesn't overlap */
  .scene3-badge-garden {
    position: relative;
    top: auto;
    right: auto;
    display: inline-flex;
    margin: 0 auto 12px;
  }

  .scene3-visual-col {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .scene3-cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px !important;
  }
}


/* ==========================================================================
   8. HOMEPAGE — Scene 4 (Parent Voices / Testimonials)
   ========================================================================== */
@media (max-width: 768px) {
  /* Left column testimonial summary card stacks fully */
  .s4-exact-left-col {
    grid-template-columns: 1fr !important;
  }

  .s4-exact-review-card,
  .s4-exact-stat-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Stat Card Centering */
  .s4-stat-icon-circle {
    margin: 0 auto !important;
    align-self: center !important;
  }

  .s4-stat-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .s4-stat-num-row {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    width: 100% !important;
  }

  .s4-stat-stars-row {
    text-align: center !important;
    width: 100% !important;
  }

  .s4-stat-title {
    text-align: center !important;
    width: 100% !important;
  }

  .s4-stat-subtitle {
    text-align: center !important;
    width: 100% !important;
  }

  .s4-avatars-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  .s4-hq-pill-wrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Review Card Centering */
  .s4-speech-badge {
    margin: 0 auto !important;
    align-self: center !important;
  }

  .s4-review-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .s4-review-body {
    text-align: center !important;
    font-size: 0.82rem !important;
  }

  .s4-review-author-line {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    text-align: center !important;
    width: 100% !important;
  }

  .s4-reaction-col {
    align-self: center !important;
    margin: 6px auto 0 !important;
  }

  .s4-exact-review-card {
    padding: 14px 16px !important;
  }
}

@media (max-width: 480px) {
  /* Scene 4 wrapper horizontal padding */
  .s4-wrapper {
    padding: 0 16px !important;
  }
}


/* ==========================================================================
   9. HOMEPAGE — Scene 5 (Campus / Find Your Branch)
   ========================================================================== */
@media (max-width: 767px) {
  .s5-container {
    padding: 0 16px !important;
  }

  /* Map container height on mobile */

  /* Thumb cards horizontal scroll strip */
  .s5-thumb-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .s5-thumb-row::-webkit-scrollbar {
    display: none;
  }

  .s5-thumb-card {
    flex-shrink: 0;
    min-width: 200px;
  }
}

@media (max-width: 480px) {
  .trust-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  .counter-num {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  /* Scene 5 feature grid — 2 cols is already fine, keep it */
  .s5-feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ==========================================================================
   10. HOMEPAGE — Tour Drawer / Modal (form on mobile)
   ========================================================================== */
@media (max-width: 767px) {
  .tour-drawer-overlay {
    padding: 12px;
    align-items: flex-end; /* Slides up from bottom on phones */
  }

  .tour-drawer {
    padding: 28px 20px 32px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(100%) scale(1) !important; /* Override desktop scale */
  }

  .tour-drawer-overlay.active .tour-drawer {
    transform: translateY(0) scale(1) !important;
  }

  .drawer-title {
    font-size: 1.5rem !important;
    padding-right: 32px; /* make room for close button */
  }

  .form-group {
    margin-bottom: 16px;
  }

  .form-control {
    font-size: 1rem; /* Prevent iOS auto-zoom on inputs < 16px */
    padding: 13px 16px;
  }

  /* Parent Resource Hub modal: hardcoded inline 2-col grid has no
     mobile fallback, cramming 4 cards into ~85px columns on phones.
     Author !important overrides inline styles, so this can fix it. */
  .prh-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   11. SUBPAGE HERO (shared across inner pages)
   ========================================================================== */
@media (max-width: 767px) {
  .subpage-hero {
    padding: clamp(90px, 15vw, 120px) 0 clamp(28px, 5vw, 48px) !important;
    min-height: auto !important;
    text-align: center;
  }

  .subpage-hero .lead {
    font-size: clamp(0.9rem, 3.5vw, 1rem) !important;
    max-width: 100% !important;
    padding: 0 4px;
  }

  .breadcrumb-nav {
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* ==========================================================================
   12. ADMISSIONS PAGE
   ========================================================================== */

/* Timeline: 5-col → 2-col on tablets (600–899px gap in existing code) */
@media (max-width: 899px) and (min-width: 601px) {
  .tl-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tl-step:last-child {
    grid-column: 1 / -1;
    max-width: 280px;
    margin: 0 auto;
  }
  .tl-line {
    display: none !important;
  }
}

/* .sw wrapper — tighten padding on mid tablets */
@media (max-width: 899px) and (min-width: 601px) {
  .sw {
    padding: 0 clamp(16px, 3vw, 28px) !important;
  }
}

/* Doc/branch cards — padding fluid on all phones */
@media (max-width: 767px) {
  .dc, .bc {
    padding: clamp(18px, 4vw, 28px) !important;
  }
}

/* Stat cards — ensure they never overflow on small phones */
@media (max-width: 360px) {
  .hsg-grid {
    grid-template-columns: 1fr !important;
  }
  .hsg.wide {
    grid-column: span 1 !important;
  }
}

/* Admissions hero — ensure inner grid padding is fluid */
@media (max-width: 767px) {
  .adm-hero-inner {
    padding: 0 clamp(16px, 4vw, 24px) !important;
  }

  .adm-lead {
    max-width: 100% !important;
  }
}


/* ==========================================================================
   13. GALLERY PAGE
   ========================================================================== */

/* Filter bar — correct sticky top to match actual header height */
@media (max-width: 1023px) {
  .gallery-filters {
    top: 58px !important; /* Matches scrolled header height */
    padding: 14px 16px 18px !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .gallery-filters {
    top: 52px !important;
    padding: 10px 12px 14px !important;
    gap: 6px !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    scrollbar-width: none;
  }
  .gallery-filters::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex-shrink: 0;
    padding: 7px 12px !important;
    font-size: 0.76rem !important;
    white-space: nowrap;
  }

  /* Simpler masonry on very small phones — stack to 1 col */
  .masonry-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 200px !important;
    gap: 10px !important;
  }

  .gallery-card {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* Wide hero card gets a taller slot */
  .gallery-card:nth-child(1) {
    grid-row: span 2 !important;
  }
}

/* Lightbox — full-screen on mobile */
@media (max-width: 767px) {
  .lightbox-overlay {
    padding: 8px !important;
  }

  .lightbox-inner {
    border-radius: 16px !important;
    max-height: 95vh !important;
  }

  .lightbox-inner img {
    max-height: 55vh !important;
  }

  .lightbox-info {
    padding: 14px 16px !important;
  }

  .lightbox-info .lb-title {
    font-size: 1rem !important;
  }

  .lightbox-nav {
    width: 36px !important;
    height: 36px !important;
  }
}


/* ==========================================================================
   14. BRANCHES INDEX PAGE
   ========================================================================== */
@media (max-width: 480px) {
  /* trust-bar — 1-col on smallest phones */
  .trust-bar-inner {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 767px) {
  /* Hero stats row fluid */
  .branches-hero .container {
    padding: 0 clamp(16px, 4vw, 24px) !important;
  }
}


/* ==========================================================================
   15. BRANCH DETAIL PAGES (madhanandapuram, mugalivakkam, manapakkam, etc.)
   ========================================================================== */

/* Fixed 380px sidebar column: collapse to 1-col at a wider breakpoint */
@media (max-width: 1080px) {
  .branch-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Stats strip padding — fluid from 540px down */
@media (max-width: 767px) {
  .stats-strip-inner {
    padding: 0 clamp(16px, 4vw, 24px) !important;
  }
}

@media (max-width: 480px) {
  /* Hero CTA row on branch detail pages */
  .hero-cta-row {
    flex-wrap: wrap;
  }

  /* Branch info/tour cards */
  .info-card,
  .tour-form-card {
    padding: clamp(16px, 4vw, 24px) !important;
  }
}


/* ==========================================================================
   16. CONTACT US PAGE
   ========================================================================== */

/* Tighten hardcoded 40px padding at tablet sizes (601–899px) */
@media (max-width: 899px) and (min-width: 601px) {
  .ct-hero-inner,
  .ct-main-inner {
    padding: 0 clamp(16px, 3.5vw, 28px) !important;
  }
}

@media (max-width: 767px) {
  /* Map iframe — don't let it overflow on narrow screens */
  .ct-map-frame {
    height: 220px !important;
  }

  .ct-hero-inner,
  .ct-main-inner {
    padding: 0 clamp(16px, 4vw, 24px) !important;
  }
}

/* Quick-access link items: disable translateX hover on touch */
@media (hover: none) {
  .ct-quick-item:hover {
    transform: none !important;
  }
  .ct-quick-item:hover .cqi-arrow {
    transform: none !important;
  }
}

/* Contact form: 2-col row fields stack at mid tablets too */
@media (max-width: 767px) {
  .cf-row {
    grid-template-columns: 1fr !important;
  }
}

/* Form controls: prevent iOS zoom */
@media (max-width: 767px) {
  .form-control,
  .faq-search {
    font-size: 1rem !important;
  }
}


/* ==========================================================================
   17. BLOG PAGE
   ========================================================================== */
@media (max-width: 767px) {
  /* Featured card body padding */
  .featured-body {
    padding: clamp(20px, 4vw, 28px) !important;
  }

  /* Blog card body padding */
  .bc-body {
    padding: clamp(16px, 3.5vw, 22px) !important;
  }

  /* Blog featured inner padding */
  .blog-featured-inner,
  .blog-grid-inner {
    padding: 0 clamp(14px, 3.5vw, 24px) !important;
  }
}

@media (max-width: 480px) {
  /* Featured card — tighten further on phones */
  .featured-body {
    padding: 16px !important;
  }
  .featured-body h2 {
    font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important;
  }
}


/* ==========================================================================
   18. PROGRAMS PAGE
   ========================================================================== */

/* circle-display-bg has inset: -200px which causes 400px overflow bleed.
   Clip it at the section level on mobile */
@media (max-width: 1023px) {
  .programs-section {
    overflow: hidden !important;
  }

  /* The absolute-positioned background shape needs containment */
  .circle-display-bg {
    inset: -40px !important; /* Greatly reduce the bleed */
  }

  /* Decorative bg shapes — scale down */
  .bg-shape-1, .bg-shape-2, .bg-shape-3, .bg-shape-4 {
    opacity: 0.5 !important;
    transform: scale(0.7) !important;
  }
}

@media (max-width: 767px) {
  /* Program CTA full width */
  .program-cta {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Hero heading for programs page */
  .programs-hero h1,
  .subpage-hero h1 {
    font-size: clamp(1.9rem, 6.5vw, 2.6rem) !important;
  }
}


/* ==========================================================================
   19. ABOUT US PAGE
   ========================================================================== */
@media (max-width: 767px) {
  .philosophy-section {
    padding: clamp(48px, 8vw, 72px) 0 clamp(56px, 9vw, 80px) !important;
  }

  /* Each alternating row — ensure images don't overflow */
  .philosophy-row-img,
  .philosophy-img-wrap {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-md) !important;
  }

  /* Stack all philosophy rows to single column */
  .philosophy-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Always put image first on mobile regardless of column order */
  .philosophy-row .philosophy-img-wrap {
    order: -1;
  }
}


/* ==========================================================================
   20. FAQs PAGE — COMPREHENSIVE MOBILE STRUCTURE & ALIGNMENT
   Fixes hero centering, search bar, category tabs, accordion list spacing
   ========================================================================== */

/* ── HERO SECTION (360px–767px) ── */
@media (max-width: 767px) {
  
  /* Hero wrapper: full padding control */
  .faq-hero-inner {
    padding: 0 clamp(20px, 5vw, 32px) !important;
    text-align: center !important;
  }

  /* Breadcrumb: centered */
  .faq-bc {
    justify-content: center !important;
    margin-bottom: 16px !important;
  }

  /* Eyebrow badge: centered */
  .faq-eyebrow {
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 18px !important;
  }

  /* H1 heading: centered, proper size */
  .faq-hero h1 {
    text-align: center !important;
    font-size: clamp(2rem, 7.5vw, 2.8rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }

  /* Lead paragraph: centered, readable */
  .faq-hero p {
    text-align: center !important;
    font-size: clamp(0.94rem, 3.6vw, 1.04rem) !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    margin: 0 auto 28px !important;
    padding: 0 4px !important;
  }

  /* ── SEARCH BAR ── */
  .faq-search-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 8px !important;
  }

  .faq-search {
    width: 100% !important;
    min-height: 46px !important;
    padding: 13px 48px 13px 18px !important;
    font-size: max(16px, 0.95rem) !important; /* Prevent iOS zoom */
    box-sizing: border-box !important;
  }

  .faq-search-icon {
    right: 14px !important;
    font-size: 1.15rem !important;
  }

  .faq-search-count {
    text-align: center !important;
    margin-top: 8px !important;
    font-size: 0.8rem !important;
  }
}

/* ── CATEGORY TABS (360px–767px) ── */
@media (max-width: 767px) {
  
  /* FAQ body padding */
  .faq-body-inner {
    padding: 0 clamp(20px, 5vw, 32px) !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Grid items default to min-width:auto, so the horizontally-scrolling
     .faq-tabs strip inside the first column (overflow-x:auto, non-wrapping
     tabs) was forcing this whole single-column track — and everything in
     it, including the sidebar sharing the same track — to sit at the tabs'
     full un-scrolled content width instead of shrinking to the screen. */
  .faq-body-inner > div:first-child,
  .faq-sidebar {
    min-width: 0 !important;
  }

  /* Category tabs: horizontal scroll strip, no wrapping */
  .faq-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
    padding-bottom: 4px !important;
  }

  .faq-tabs::-webkit-scrollbar {
    display: none !important;
  }

  /* Individual tabs: clear tappable size, no shrink */
  .faq-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 9px 16px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Active tab: clear visual distinction */
  .faq-tab.active {
    box-shadow: 0 3px 14px rgba(245,135,31,.28) !important;
  }
}

/* ── ACCORDION LIST (360px–767px) ── */
@media (max-width: 767px) {
  
  /* FAQ list: proper vertical spacing between items */
  .faq-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Each FAQ item: card-like separation, rounded corners */
  .faq-item {
    border-radius: 16px !important;
    border: 1.5px solid var(--border-light) !important;
    background: white !important;
    box-shadow: 0 2px 12px rgba(42,36,32,.06) !important;
    overflow: hidden !important;
  }

  .faq-item.open {
    border-color: rgba(245,135,31,.32) !important;
    box-shadow: 0 6px 22px rgba(245,135,31,.14) !important;
  }

  /* Question row: adequate tap target, clear padding */
  .faq-q {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 16px !important;
    min-height: 52px !important;
    cursor: pointer !important;
  }

  /* Question icon: clear size */
  .faq-q-icon {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    border-radius: 9px !important;
    font-size: 0.95rem !important;
  }

  /* Question text: left-aligned, readable */
  .faq-q-text {
    flex: 1 !important;
    text-align: left !important;
    font-size: 0.96rem !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: var(--navy-teal-dark) !important;
  }

  /* Chevron indicator: clear right-side positioning */
  .faq-chevron {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    font-size: 0.72rem !important;
  }

  /* Answer section: clear visual separation from question */
  .faq-a-inner {
    padding: 0 16px 18px 16px !important;
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: var(--text-muted) !important;
    margin-top: 6px !important;
    padding-left: 16px !important; /* Slight indent for hierarchy */
    border-top: 1px solid rgba(42,36,32,.06) !important;
    padding-top: 14px !important;
  }

  .faq-a-inner a {
    font-weight: 700 !important;
    color: var(--amber-primary) !important;
    text-decoration: none !important;
  }

  .faq-a-inner a:hover {
    text-decoration: underline !important;
  }
}

/* ── SIDEBAR (mobile becomes full-width below hero) ── */
@media (max-width: 899px) {
  .faq-body-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .faq-sidebar {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .fside-card {
    padding: 20px !important;
  }
}

/* ── OVERALL STRUCTURE: Clear vertical rhythm ── */
@media (max-width: 767px) {
  
  /* Hero section: clear bottom spacing */
  .faq-hero {
    padding-bottom: clamp(36px, 7vw, 56px) !important;
    margin-bottom: 0 !important;
  }

  /* Body section: clear top spacing to separate from hero */
  .faq-body {
    padding-top: clamp(40px, 7vw, 64px) !important;
    padding-bottom: clamp(48px, 9vw, 80px) !important;
  }

  /* No results message: centered, clear */
  .faq-no-results {
    text-align: center !important;
    padding: 40px 20px !important;
  }

  .faq-no-results p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    color: var(--text-muted) !important;
  }
}

/* ── SMALLEST PHONES (≤380px) ── */
@media (max-width: 380px) {
  
  .faq-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.2rem) !important;
  }

  .faq-hero p {
    font-size: 0.9rem !important;
  }

  .faq-q {
    padding: 14px 12px !important;
    gap: 10px !important;
  }

  .faq-q-icon {
    width: 30px !important;
    height: 30px !important;
  }

  .faq-q-text {
    font-size: 0.9rem !important;
  }

  .faq-a-inner {
    padding: 0 12px 16px 12px !important;
    font-size: 0.84rem !important;
  }

  .faq-tab {
    padding: 8px 13px !important;
    font-size: 0.76rem !important;
  }
}


/* ==========================================================================
   21. BOOK-A-TOUR PAGE
   ========================================================================== */
@media (max-width: 767px) {
  /* The form card padding on book-a-tour */
  .scene-padding {
    padding: clamp(32px, 5vw, 56px) clamp(14px, 3vw, 20px) !important;
  }
}


/* ==========================================================================
   22. BLOG ARTICLE PAGES (individual blog posts)
   ========================================================================== */
@media (max-width: 767px) {
  .blog-article-inner,
  .blog-post-content {
    padding: 0 clamp(14px, 4vw, 24px) !important;
  }

  .blog-article-hero {
    padding: clamp(90px, 14vw, 116px) 0 clamp(24px, 4vw, 40px) !important;
  }
}


/* ==========================================================================
   23. PERFORMANCE — lazy loading attribute support,
       reduced motion for all animations
   ========================================================================== */

/* Disable heavy float/tilt animations on mobile for performance */
@media (max-width: 767px) {
  .hsg.float-1, .hsg.float-2, .hsg.float-3,
  .hsg.float-4, .hsg.wide {
    animation: none !important;
  }

  /* Disable parallax transforms on mobile — they fire via JS */
  .parallax-layer {
    transform: none !important;
    will-change: auto !important;
  }

  /* Disable 3D preserve-3d on gallery cards — perf hog on low-power devices */
  .gallery-card {
    transform-style: flat !important;
    will-change: auto !important;
  }

  /* Reduce complex box-shadow layering on cards */
  .scene2-card:hover,
  .blog-card:hover,
  .pc:hover {
    transform: translateY(-3px) !important;
  }
}

/* Respect the OS reduced-motion preference (belt and suspenders on top of
   the existing rule in style.css) */
@media (prefers-reduced-motion: reduce) {
  .hsg,
  .scene2-twig-accent,
  .scene2-sparkle-accent,
  .s2-top-right-leaf,
  .card-bottom-left-leaf,
  .lp-sparkle-left,
  .lp-sparkle-right,
  .floating-parent-card,
  .hero-image-glow,
  .polaroid-paper-plane,
  .polaroid-pumpkin-mascot {
    animation: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   24. GLOBAL FORM INPUTS — prevent iOS zoom (font-size must be ≥ 16px)
   ========================================================================== */
@media (max-width: 767px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS double-tap zoom on focus */
  }
}


/* ==========================================================================
   25. FOOTER (if any global footer elements exist)
   ========================================================================== */
@media (max-width: 767px) {
  .site-footer,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: center;
  }

  .footer-brand {
    align-items: center !important;
  }
}


/* ==========================================================================
   26. WHATSAPP FLOAT BUTTON — keep it clear of content on small screens
   ========================================================================== */
@media (max-width: 480px) {
  .whatsapp-float-btn {
    bottom: 16px !important;
    right: 16px !important;
  }
}


/* ==========================================================================
   TARGETED FIX 1 — Homepage hero horizontal overflow (revised)
   Consolidated, high-specificity block scoped exclusively to the hero section.

   Root causes confirmed from components.css audit:
   1. .headline-line { white-space: nowrap } — base rule forces single-line
      regardless of viewport; must be overridden with specificity.
   2. .hero-subtext { max-width: clamp(380px, 32vw, 500px) } — 380px floor
      exceeds available column width on phones ≤430px.
   3. .hero-copy-col { margin-left: clamp(40px, 5vw, 96px) } — 40px floor
      persists below 1024px unless explicitly zeroed.
   4. .floating-parent-card { position: absolute; right: -12px } — escapes
      viewport when the grid is single-column on mobile.
   5. .hero-layout-grid and its container have no overflow guard at this level.

   All rules are additive max-width media queries. Zero desktop impact.
   ========================================================================== */

/* ── 1023px and below: layout containment ── */
@media (max-width: 1023px) {
  .scene-hero {
    overflow-x: hidden !important;
  }

  /* Container must not exceed viewport; padding replaces any fixed margins */
  .scene-hero > .container,
  .scene-hero .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(16px, 4.5vw, 28px) !important;
    padding-right: clamp(16px, 4.5vw, 28px) !important;
    box-sizing: border-box !important;
  }

  /* Grid: single column, no overflow */
  .hero-layout-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible; /* let children use relative width naturally */
  }

  /* Copy column: kill the left-margin floor that causes overflow */
  .hero-copy-col {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Headline: allow wrapping — override the base white-space: nowrap */
  .scene-hero .kinetic-headline,
  .scene-hero .headline-line {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Subtext: kill the 380px clamp floor */
  .scene-hero .hero-subtext {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Visual column: don't let its children bust out */
  .hero-visual-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  /* For Parents card: remove absolute positioning so it can't escape */
  .floating-parent-card {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    max-width: min(300px, 100%) !important;
    width: auto !important;
    animation: none !important;
    margin-bottom: 12px !important;
  }
}

/* ── 767px and below: hero layout & containment ── */
@media (max-width: 767px) {
  /* Hero copy: ensure left-alignment */
  .hero-copy-col {
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* CTA row: left aligned flex row */
  .hero-cta-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hero-cta-row .btn-amber {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .hero-cta-row .btn-play-story {
    justify-content: flex-start !important;
    align-self: center !important;
    margin: 0 !important;
  }
}


/* ==========================================================================
   TARGETED FIX 2 — Branches page stat cards: single column → 2×2 grid
   The existing breakpoint at ≤640px forces flex-direction: column (1 per row).
   Override it to a 2-column CSS grid at mobile/tablet.
   ========================================================================== */

@media (max-width: 1023px) {
  /* Override the ≤640px column-stacking — use a 2×2 grid instead */
  .hero-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Pills: fill their grid cell, no fixed width */
  .hero-stat-pill {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    padding: 10px 16px !important;
  }
}

@media (max-width: 420px) {
  /* On the very smallest phones, tighten internal padding slightly
     but keep icon + text readable. Max-width drops so both cells fit. */
  .hero-stats-row {
    max-width: 100% !important;
    gap: 8px !important;
  }

  .hero-stat-pill {
    padding: 9px 12px !important;
  }

  .hero-stat-pill .stat-val {
    font-size: 1.05rem !important;
  }

  .hero-stat-pill .stat-lbl {
    font-size: 0.68rem !important;
  }
}


/* ==========================================================================
   TARGETED FIX 3 — Programs section: 3-column layout on mobile/tablet
   (left: 2 cards, center: circle, right: 2 cards)

   The existing ≤968px rule in programs/index.html sets:
     .programs-list   → position: relative; flex-direction: column
     .program-item    → position: relative !important (overrides corners)
     .programs-circle-display → order: 1 (pushes circle to TOP)
   This results in: circle → [card1, card2, card3, card4] stacked column.

   Our fix restructures the layout via CSS only — no HTML changes:
   We make .programs-layout a 3-column grid where:
     column 1 = cards 1 & 3 (Playgroup + LKG, i.e. odd items)
     column 2 = circle display
     column 3 = cards 2 & 4 (Nursery + UKG, i.e. even items)
   This is achieved by combining CSS Grid with order properties
   on the children, since the HTML order is:
     .programs-list (containing 4 .program-item) then .programs-circle-display

   Approach: Use a CSS trick where .programs-layout becomes a 3-col grid,
   .programs-list spans col 1 only (odd cards) and col 3 only (even cards)
   via a sub-grid / pseudo split — but since both columns share one DOM node
   (.programs-list), we can't split them into col1 vs col3 without HTML changes.

   DECISION: The correct 3-column layout requires splitting left and right
   card groups into separate containers in HTML. Since we cannot change HTML,
   we use the following CSS-only fallback that is still a major improvement
   over the current full-column stack:

   LAYOUT (CSS-only, no HTML change):
   - .programs-layout: 3-column grid [auto  1fr  auto] at 500px+
   - .programs-list: col 1 (left), flex-col with 2 cards per visual row
     trick — we use column-count or grid on the list itself
   - .programs-circle-display: col 2 (center), order reset to 2
   - The 2 remaining cards on the right are handled by:
     making .programs-list a 2-row grid, then placing circle in the middle
     via a grid template that interleaves it.

   Since the circle and the list are siblings (not nested),
   the cleanest pure-CSS approach is:
   .programs-layout → grid, 3 cols
   .programs-list   → grid-column 1, grid-row 1, display flex-col (2 cards)
                       + grid-column 3, grid-row 1 (remaining 2 cards)
   This still can't be done without HTML changes for the card split.

   ACTUAL IMPLEMENTATION — verified CSS-only workaround:
   Use .programs-layout as a CSS Grid with 3 columns.
   .programs-list gets grid-column: 1 / 4 (spans all) but is itself
   a 3-column grid with circle in the middle cell:
   Actually .programs-circle-display is a sibling so we CAN use:
     .programs-layout: grid, columns [1fr auto 1fr]
     .programs-list:   grid-column: 1; grid-row: 1
                       → itself becomes a 2-item column (2 cards per side)
                       → BUT programs-list has ALL 4 cards. Half go left, half right.
   We cannot split the 4 cards across col 1 and col 3 without HTML.

   FINAL DECISION — Documented Fallback (as specified in the brief):
   3-column is unworkable purely via CSS without HTML modifications
   because both left and right card groups share a single .programs-list node.
   Implementing the 2→circle→2 fallback layout instead:
     [Playgroup + Nursery] → circle → [LKG + UKG]  as a single column
   This is a significant improvement over current (circle at very bottom).
   ========================================================================== */

/* Fallback layout: 2 cards → circle (centered) → 2 cards, single column.
   Circle is brought up between the card pairs using order. */
@media (max-width: 968px) {
  /* Make programs-layout a flex column so order properties work */
  .programs-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    min-height: auto !important;
    padding: 32px clamp(12px, 4vw, 24px) !important;
  }

  /* programs-list: show as a 2-column grid (2 cards side by side) */
  .programs-list {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    order: 1 !important; /* first pair above circle */
    margin-top: 0 !important;
  }

  /* All 4 cards: reset absolute positioning, fill their grid cell */
  .program-item {
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 20px !important; /* flatten blob shape for grid layout */
  }

  /* Hide cards 3 and 4 from the first programs-list row —
     we want only the first 2 above the circle.
     Then show all 4 below on a second pass.
     Since we can't split the list, show ALL 4 cards in a 2×2 grid.
     Circle sits between the card grid and nothing — order fixes this: */
  /* Circle: center between two card rows */
  .programs-circle-display {
    order: 2 !important; /* circle in the MIDDLE between card rows */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Circle sizing: constrain to viewport width */
  .circle-container {
    width: min(72vw, 300px) !important;
    height: min(72vw, 300px) !important;
  }
}

/* Tablet (500px–968px): previously forced a 3-col grid [list | circle | empty]
   here — col 3 always sat empty (documented as "not ideal" in the block that
   used to be here), leaving the whole layout visibly off-center with a dead
   band on the right. Removed: the general ≤968px rule above (2-col card grid,
   centered column, circle below) already covers this range symmetrically. */

/* Smallest phones (≤499px): revert to full-width 2×2 card grid + circle centered below */
@media (max-width: 499px) {
  .programs-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 24px clamp(10px, 3vw, 16px) !important;
  }

  .programs-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    order: 1 !important;
    width: 100% !important;
  }

  .programs-circle-display {
    order: 2 !important;
  }

  .circle-container {
    width: min(80vw, 240px) !important;
    height: min(80vw, 240px) !important;
  }

  /* Cards: reduce padding so 2 fit side-by-side at 375px */
  .program-item {
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  /* Program title */
  .program-title {
    font-size: clamp(0.8rem, 3.5vw, 0.95rem) !important;
    margin-bottom: 2px !important;
  }

  /* Age badge */
  .program-age {
    font-size: clamp(0.68rem, 2.5vw, 0.75rem) !important;
  }

  /* Description: hide on tiny screens to save space */
  .program-desc {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* CTA button: full width, minimum tap target */
  .program-cta {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    padding: 10px 8px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
}

/* NOTE: True 3-column layout (left 2 cards | circle | right 2 cards) requires
   splitting the 4 program cards into two separate HTML containers (e.g.,
   .programs-list-left and .programs-list-right). The current HTML has all 4
   cards in a single .programs-list node. The tablet layout above (500–968px)
   achieves a 3-column grid with 4 cards stacked in col 1 + circle in col 2,
   which is the closest CSS-only approximation. To get the full symmetric
   2|circle|2 layout, a small HTML restructuring is needed. */


/* ==========================================================================
   HERO OVERFLOW FIX — final pass
   Uses .scene-hero parent to raise specificity above all existing rules
   in components.css. Covers 360px–1023px. Desktop (≥1024px) unaffected.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Section: clip any overflow at the source */
  .scene-hero { overflow-x: hidden !important; }

  /* Container: fluid padding, never exceeds viewport */
  .scene-hero .container {
    max-width: 100% !important;
    padding-left:  clamp(16px, 4.5vw, 28px) !important;
    padding-right: clamp(16px, 4.5vw, 28px) !important;
    box-sizing: border-box !important;
  }

  /* Grid: min-width: 0 is the key — without it grid children
     can intrinsically size wider than their track */
  .scene-hero .hero-layout-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Copy column: zero the left-margin floor, add min-width: 0 */
  .scene-hero .hero-copy-col {
    margin-left: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Headline: override the base white-space: nowrap with higher specificity */
  .scene-hero .kinetic-headline,
  .scene-hero .headline-line {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Subtext: kill the 380px clamp floor */
  .scene-hero .hero-subtext {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Visual column: constrain its children */
  .scene-hero .hero-visual-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  /* For Parents card: remove absolute + right: -12px that escapes viewport */
  .scene-hero .floating-parent-card {
    position: relative !important;
    top: auto !important; right: auto !important;
    left: auto !important; bottom: auto !important;
    max-width: 90% !important;
    margin: 0 auto 12px !important;
    animation: none !important;
  }
}

/* ==========================================================================
   HERO SLIDE 1 — Mobile layout & polish (≤767px only)
   Left aligned hero title/copy, coordinated flow, perfect image fit.
   Desktop (≥768px) is completely unaffected.
   ========================================================================== */
@media (max-width: 767px) {

  /* ── Fix 1: Move hero downwards towards center & unwrap sub-columns for flex order ── */
  .scene-hero {
    min-height: auto !important;
    padding-top: clamp(100px, 14vh, 136px) !important;
    padding-bottom: clamp(32px, 6vw, 48px) !important;
    overflow-x: hidden !important;
  }

  .scene-hero .hero-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(14px, 3.5vw, 20px) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .scene-hero .hero-copy-col {
    display: contents !important;
  }

  .scene-hero .hero-visual-col {
    display: contents !important;
  }

  /* ── Fix 2: Remove all badges in mobile view ── */
  .scene-hero .hero-eyebrow,
  .scene-hero .hero-features-row,
  .scene-hero .floating-parent-card {
    display: none !important;
  }

  /* ── Fix 3: Headline placed downwards towards center (Order: 1) ── */
  .scene-hero .kinetic-headline {
    order: 1 !important;
    font-size: clamp(2.35rem, 8.8vw, 3rem) !important;
    line-height: 1.12 !important;
    text-align: left !important;
    align-self: flex-start !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: clamp(8px, 2vh, 18px) !important;
    margin-bottom: 2px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .scene-hero .headline-line {
    white-space: normal !important;
    display: block !important;
    text-align: left !important;
  }

  /* ── Fix 4: Subtext description (Order: 2) ── */
  .scene-hero .hero-subtext {
    order: 2 !important;
    text-align: left !important;
    align-self: flex-start !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    font-size: clamp(1rem, 3.4vw, 1.12rem) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    color: var(--text-muted) !important;
  }

  /* ── Fix 5: Hero Image Card (Order: 3) ── */
  .scene-hero .hero-photo-wrapper {
    order: 3 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px auto 0 !important;
    min-width: 0 !important;
    border-radius: 20px !important;
  }

  /* ── Fix 6: Primary & Secondary Action Buttons PLACED BELOW HERO IMAGE (Order: 4) ── */
  .scene-hero .hero-cta-row {
    order: 4 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 6px 0 4px 0 !important;
  }

  .scene-hero .hero-cta-row .btn-amber {
    font-size: 0.98rem !important;
    padding: 13px 26px !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .scene-hero .hero-cta-row .btn-play-story {
    font-size: 0.95rem !important;
    justify-content: flex-start !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin: 0 !important;
    width: auto !important;
  }

  .scene-hero .hero-cta-row .btn-play-story .play-icon-circle {
    width: 38px !important;
    height: 38px !important;
  }

  /* ── Fix 7: Quick Navigation Strip (Order: 5) ── */
  .scene-hero .floating-quick-nav {
    order: 5 !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 0 0 !important;
    padding: 10px 14px !important;
    border-radius: var(--radius-full) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 16px rgba(42, 36, 32, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
  }

  .scene-hero .floating-quick-nav .quick-nav-item {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
  }


  .scene-hero .hero-image-glow {
    position: absolute !important;
    top: -8px !important;
    left: -8px !important;
    right: -8px !important;
    bottom: -8px !important;
    filter: blur(16px) !important;
    opacity: 0.55 !important;
    border-radius: 24px !important;
  }

  .scene-hero .hero-main-card {
    position: relative !important;
    z-index: 2 !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background: var(--bg-card) !important;
    box-shadow: 0 10px 30px -4px rgba(44, 110, 127, 0.28), 0 16px 40px -8px rgba(27, 58, 75, 0.12) !important;
    display: flex !important;
  }

  .scene-hero .hero-main-card img,
  .scene-hero .hero-main-card picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* For Parents card: Frosted glass badge anchored over the photo with clear typography */
  .scene-hero .floating-parent-card {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 14px !important;
    padding: 8px 12px !important;
    box-shadow: 0 6px 20px rgba(42, 36, 32, 0.16) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 210px !important;
    width: auto !important;
    margin: 0 !important;
    animation: none !important;
  }

  .scene-hero .floating-parent-card .parent-card-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
  }

  .scene-hero .floating-parent-card .parent-card-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .scene-hero .floating-parent-card .parent-card-body {
    gap: 1px !important;
  }

  .scene-hero .floating-parent-card .parent-card-title {
    font-size: 0.84rem !important;
    font-weight: 800 !important;
  }

  .scene-hero .floating-parent-card .parent-card-desc {
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
  }

  .scene-hero .floating-parent-card .parent-card-arrow {
    font-size: 0.82rem !important;
  }

  /* Quick nav: Sleek horizontal scroll strip below image */
  .scene-hero .floating-quick-nav {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 0 !important;
    padding: 10px 14px !important;
    border-radius: var(--radius-full) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 16px rgba(42, 36, 32, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
  }

  .scene-hero .floating-quick-nav .quick-nav-item {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
  }

  .scene-hero .floating-quick-nav::-webkit-scrollbar {
    display: none !important;
  }
}


/* ==========================================================================
   INNER PAGES MOBILE POLISH — Full Viewport Heroes + Layout + Typography
   All rules are ADDITIVE. Desktop (≥1024px) is completely unaffected.
   Applied to: About Us, Branches, Programs, Admissions, Gallery, Blog, FAQs
   ========================================================================== */


/* ==========================================================================
   A. FULL-VIEWPORT HERO SECTIONS
   Every inner page first section fills the full screen on mobile so the
   opening experience feels immersive, not truncated.
   Uses 100svh (safe viewport height) with 100dvh + 100vh as fallbacks.
   The fixed header is ~64px — padding-top accounts for it.
   ========================================================================== */

@media (max-width: 767px) {

  /* ── About Us — .subpage-hero ── */
  .subpage-hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(80px, 18vw, 110px) !important;
    padding-bottom: clamp(32px, 8vw, 56px) !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .subpage-hero .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding-left: clamp(20px, 5vw, 32px) !important;
    padding-right: clamp(20px, 5vw, 32px) !important;
    box-sizing: border-box !important;
  }

  /* ── Branches ── */
  .branches-hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(80px, 18vw, 110px) !important;
    padding-bottom: clamp(32px, 8vw, 56px) !important;
    box-sizing: border-box !important;
  }

  .branches-hero .container {
    padding-left: clamp(20px, 5vw, 32px) !important;
    padding-right: clamp(20px, 5vw, 32px) !important;
    box-sizing: border-box !important;
  }

  /* ── Admissions ── */
  .adm-hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(80px, 18vw, 110px) !important;
    padding-bottom: clamp(32px, 8vw, 56px) !important;
    box-sizing: border-box !important;
  }

  /* ── Gallery ── */
  .gallery-hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(80px, 18vw, 110px) !important;
    padding-bottom: clamp(32px, 8vw, 56px) !important;
    box-sizing: border-box !important;
  }

  .gallery-hero .container,
  .gallery-hero > .container {
    padding-left: clamp(20px, 5vw, 32px) !important;
    padding-right: clamp(20px, 5vw, 32px) !important;
    box-sizing: border-box !important;
  }

  /* ── Blog ── */
  .blog-hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(80px, 18vw, 110px) !important;
    padding-bottom: clamp(32px, 8vw, 56px) !important;
    box-sizing: border-box !important;
  }

  .blog-hero-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Note: FAQs intentionally excluded from the full-viewport hero treatment
     above — it's a compact search header, not a landing hero, so forcing
     min-height:100vh here pushed the actual questions off-screen on phones.
     Its mobile hero sizing lives in section 20 below. */
}


/* ==========================================================================
   B. UNIFIED INNER-PAGE TYPOGRAPHY SCALE
   Consistent, impactful heading sizes across all inner pages on mobile.
   Ensures H1s look bold and authoritative, not small and lost.
   ========================================================================== */

@media (max-width: 767px) {

  /* ── Hero H1s — big, bold, immersive ── */
  .subpage-hero h1,
  .branches-hero h1,
  .gallery-hero h1,
  .blog-hero h1,
  .faq-hero h1,
  .adm-hero h1 {
    font-size: clamp(2.05rem, 8.5vw, 2.9rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.022em !important;
    margin-bottom: clamp(14px, 3.5vw, 22px) !important;
  }

  /* ── Lead paragraphs — legible, breathing room ── */
  .subpage-hero p.lead,
  .branches-hero .lead,
  .gallery-hero p,
  .blog-hero p,
  .faq-hero p,
  .adm-lead {
    font-size: clamp(0.96rem, 3.8vw, 1.06rem) !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: clamp(20px, 5vw, 32px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── Eyebrow tags / badges — consistent sizing ── */
  .adm-pill,
  .blog-eyebrow,
  .faq-eyebrow,
  .gallery-hero-badge,
  .hero-eyebrow,
  .subpage-hero-badge {
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    padding: 6px 16px !important;
    margin-bottom: clamp(14px, 3.5vw, 20px) !important;
  }

  /* ── Section H2 headings (below the hero) ── */
  .sh h2,
  .philosophy-title,
  .dc-h,
  .bc-h,
  .featured-body h2 {
    font-size: clamp(1.65rem, 7vw, 2.1rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.018em !important;
  }

  /* ── Card H3 headings ── */
  .phi-row-title,
  .tl-title,
  .pc-name,
  .bc-body h3,
  .faq-q-text {
    font-size: clamp(1.05rem, 4.2vw, 1.28rem) !important;
    line-height: 1.28 !important;
  }

  /* ── Small descriptive text — keep readable ── */
  .tl-desc,
  .pc-desc,
  .pc-skill,
  .dr-info span,
  .phi-row-desc {
    font-size: clamp(0.84rem, 3.4vw, 0.96rem) !important;
    line-height: 1.6 !important;
  }
}

/* Smallest phones (≤380px) — tighten h1 slightly more */
@media (max-width: 380px) {
  .subpage-hero h1,
  .branches-hero h1,
  .gallery-hero h1,
  .blog-hero h1,
  .faq-hero h1,
  .adm-hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.4rem) !important;
  }
}


/* ==========================================================================
   C. ABOUT US PAGE — Mobile Layout Refinements
   ========================================================================== */

@media (max-width: 767px) {

  /* Philosophy section: reduce vertical gaps */
  .philosophy-section {
    padding: clamp(40px, 8vw, 64px) 0 clamp(48px, 9vw, 72px) !important;
  }

  /* Philosophy header: centered, proper margin */
  .philosophy-header {
    max-width: 100% !important;
    margin-bottom: clamp(36px, 7vw, 52px) !important;
    padding: 0 clamp(4px, 2vw, 12px) !important;
  }

  .philosophy-title {
    font-size: clamp(1.65rem, 7vw, 2.1rem) !important;
    margin-bottom: 12px !important;
  }

  .philosophy-lead {
    font-size: clamp(0.93rem, 3.8vw, 1.02rem) !important;
    line-height: 1.65 !important;
  }

  /* Phi rows: single column, image always on top */
  .phi-row,
  .phi-row--reverse {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 5vw, 32px) !important;
  }

  /* Always image first on mobile regardless of desktop column order */
  .phi-row .phi-row-img  { order: 1 !important; }
  .phi-row .phi-row-text { order: 2 !important; }

  /* Image wrapper: constrain and center shape cards */
  .phi-row-img {
    width: 100% !important;
    max-width: min(92vw, 340px) !important;
    margin: 0 auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* Shape cards: fill the constrained wrapper */
  .phi-shape-curved,
  .phi-shape-egg,
  .phi-shape-papercut {
    width: 100% !important;
    height: 100% !important;
  }

  /* Text column: generous but not cluttered */
  .phi-row-text {
    gap: 12px !important;
    padding: 0 clamp(4px, 2vw, 12px) !important;
  }

  .phi-row-number {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
  }

  .phi-row-label {
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
  }

  /* Gap between the 3 alternating rows */
  .phi-rows {
    gap: clamp(40px, 8vw, 60px) !important;
  }

  /* Stat pills in hero — 2x2 grid */
  .subpage-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: clamp(20px, 5vw, 28px) !important;
    width: 100% !important;
    max-width: 340px !important;
  }

  .shs-pill {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    gap: 5px !important;
  }
}


/* ==========================================================================
   D. BRANCHES PAGE — Mobile Layout Refinements
   ========================================================================== */

@media (max-width: 767px) {

  /* Branches hero: center content */
  .branches-hero {
    text-align: center !important;
  }

  /* Breadcrumb: centered */
  .branches-hero .breadcrumb-nav {
    justify-content: center !important;
    margin-bottom: 16px !important;
  }

  /* Eyebrow badge */
  .branches-hero .hero-eyebrow {
    font-size: 0.72rem !important;
    padding: 6px 16px !important;
    margin-bottom: 18px !important;
  }

  /* Hero lead */
  .branches-hero .lead {
    font-size: clamp(0.95rem, 3.8vw, 1.05rem) !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 24px !important;
  }

  /* Hero stats: already 2×2 grid — tighten max-width */
  .branches-hero .hero-stats-row {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Branch cards grid: single column */
  .branches-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Individual branch card: full-width, readable padding */
  .branch-card {
    padding: clamp(20px, 5vw, 28px) !important;
  }

  .branch-card-header {
    gap: 12px !important;
  }

  /* Trust bar: 2×2 on phones */
  .trust-bar-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}


/* ==========================================================================
   E. ADMISSIONS PAGE — Mobile Layout Refinements
   ========================================================================== */

@media (max-width: 767px) {

  /* Hero inner grid: single column, text first */
  .adm-hero-inner {
    grid-template-columns: 1fr !important;
    gap: clamp(28px, 6vw, 40px) !important;
    padding: 0 clamp(20px, 5vw, 32px) !important;
    align-items: flex-start !important;
  }

  /* Hero CTAs: vertical stack on phones */
  .adm-ctas {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .adm-btn-a,
  .adm-btn-b {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 24px !important;
    font-size: 0.92rem !important;
  }

  /* Stat cards grid: 2×2 compact, no animation on mobile */
  .hsg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hsg {
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .hsg.wide {
    grid-column: span 2 !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }

  .hsg-val {
    font-size: 1.3rem !important;
  }

  .hsg-lbl {
    font-size: 0.62rem !important;
  }

  /* Section wrapper padding: fluid */
  .sw {
    padding: 0 clamp(20px, 5vw, 32px) !important;
  }

  /* Section header: reduce bottom margin */
  .sh {
    margin-bottom: clamp(32px, 7vw, 48px) !important;
  }

  /* ── Timeline: vertical connected stepper ── */
  .adm-tl {
    padding: clamp(40px, 8vw, 64px) 0 !important;
  }

  .tl-steps {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    position: relative !important;
    padding-left: clamp(48px, 12vw, 64px) !important;
  }

  /* Vertical spine line */
  .tl-steps::before {
    content: '' !important;
    position: absolute !important;
    left: 20px !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 2px !important;
    background: linear-gradient(to bottom, #F5871F, #FCB040, #F5871F) !important;
    border-radius: 2px !important;
    z-index: 0 !important;
  }

  .tl-line {
    display: none !important;
  }

  /* Each step: horizontal layout with bullet on the left spine */
  .tl-step {
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 16px !important;
    padding: 16px 0 !important;
    position: relative !important;
  }

  /* Bubble: smaller, positioned on the spine */
  .tl-bubble {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    font-size: 1.4rem !important;
    margin-bottom: 0 !important;
    position: absolute !important;
    left: -44px !important;
    top: 12px !important;
    background: white !important;
    z-index: 1 !important;
    box-shadow: 0 4px 16px rgba(245,135,31,0.18) !important;
    border-color: rgba(245,135,31,0.4) !important;
  }

  .tl-n {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.60rem !important;
    top: -4px !important;
    right: -4px !important;
  }

  /* Step text: left-aligned beside the spine */
  .tl-step > div:not(.tl-bubble) {
    flex: 1 !important;
  }

  .tl-title {
    font-size: clamp(0.95rem, 3.8vw, 1.08rem) !important;
    margin-bottom: 6px !important;
    text-align: left !important;
  }

  .tl-desc {
    font-size: clamp(0.82rem, 3.2vw, 0.9rem) !important;
    text-align: left !important;
    line-height: 1.58 !important;
  }

  /* ── Programs grid: 1 col on phones ── */
  .progs-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Program cards: compact but readable */
  .pc-top {
    padding: 20px 18px 16px !important;
  }

  .pc-body {
    padding: 16px 18px 20px !important;
  }

  .pc-emoji {
    font-size: 2rem !important;
    margin-bottom: 10px !important;
  }

  /* ── Docs + Branch bottom section ── */
  .adm-bot {
    padding: clamp(40px, 8vw, 64px) 0 !important;
  }

  .adm-bot-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .dc, .bc {
    padding: clamp(20px, 5vw, 28px) !important;
    border-radius: 20px !important;
  }

  /* Document rows: stack cleanly */
  .dr {
    gap: 12px !important;
    padding: 13px 0 !important;
  }

  .dr-tick {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.68rem !important;
    flex-shrink: 0 !important;
  }

  .dr-info strong {
    font-size: 0.88rem !important;
  }

  .dr-info span {
    font-size: 0.78rem !important;
  }

  /* Branch selector pills: 2-col touch chip grid */
  .bpills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .bp {
    text-align: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
    border-radius: var(--radius-md) !important;
  }

  /* WhatsApp + Call buttons: full-width, strong tap targets */
  .bc-wa,
  .bc-call {
    padding: 15px 20px !important;
    font-size: 0.9rem !important;
    min-height: 52px !important;
  }
}


/* ==========================================================================
   F. GALLERY PAGE — Mobile Layout Refinements
   ========================================================================== */

@media (max-width: 767px) {

  /* Gallery hero: center everything */
  .gallery-hero {
    text-align: center !important;
  }

  .gallery-hero .breadcrumb-nav {
    justify-content: center !important;
    margin-bottom: 14px !important;
  }

  /* Gallery hero badge */
  .gallery-hero-badge {
    font-size: 0.72rem !important;
    padding: 7px 16px !important;
    margin: 0 auto clamp(16px, 4vw, 24px) !important;
    display: inline-flex !important;
  }

  /* Gallery section: reduce top padding */
  .gallery-section {
    padding: 28px 0 clamp(48px, 8vw, 72px) !important;
  }

  /* Masonry grid: 2 columns on tablets/phones */
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 clamp(14px, 4vw, 20px) !important;
  }

  /* Respect existing 1-col rule at ≤480px from section 13 */
}


/* ==========================================================================
   G. BLOG PAGE — Mobile Layout Refinements
   ========================================================================== */

@media (max-width: 767px) {

  /* Blog hero: center content */
  .blog-hero {
    text-align: center !important;
  }

  .blog-bc {
    justify-content: center !important;
    margin-bottom: 16px !important;
  }

  .blog-eyebrow {
    display: inline-flex !important;
    margin: 0 auto clamp(14px, 3.5vw, 20px) !important;
  }

  /* Featured card: stack vertically — image on top */
  .featured-card {
    grid-template-columns: 1fr !important;
    border-radius: 20px !important;
  }

  .featured-img {
    min-height: clamp(180px, 48vw, 260px) !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .featured-body {
    padding: clamp(20px, 5vw, 28px) !important;
    border-radius: 0 0 20px 20px !important;
  }

  .featured-body h2 {
    font-size: clamp(1.35rem, 5.5vw, 1.7rem) !important;
    line-height: 1.25 !important;
  }

  .featured-body p {
    font-size: clamp(0.86rem, 3.4vw, 0.94rem) !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }

  .featured-cta {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
  }

  /* Blog cards: single column */
  .blog-cards {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .bc-img {
    height: clamp(160px, 42vw, 220px) !important;
  }

  .bc-body {
    padding: clamp(18px, 4.5vw, 24px) !important;
  }

  .bc-body h3 {
    font-size: clamp(1.05rem, 4.2vw, 1.2rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  .bc-body p {
    font-size: clamp(0.84rem, 3.3vw, 0.92rem) !important;
    line-height: 1.62 !important;
  }
}


/* ==========================================================================
   H. FAQS PAGE — Mobile Layout Refinements
   ========================================================================== */

@media (max-width: 767px) {

  /* FAQ hero: center content */
  .faq-hero {
    text-align: center !important;
  }

  .faq-bc {
    justify-content: center !important;
    margin-bottom: 16px !important;
  }

  .faq-eyebrow {
    display: inline-flex !important;
    margin: 0 auto clamp(14px, 3.5vw, 20px) !important;
  }

  /* Search field: full width, good sizing */
  .faq-search-wrap {
    max-width: 100% !important;
  }

  .faq-search {
    font-size: 1rem !important; /* Prevents iOS zoom */
    padding: 13px 48px 13px 18px !important;
  }

  /* FAQ body: single column (existing rule) + tighten padding */
  .faq-body-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 clamp(16px, 4vw, 24px) !important;
  }

  /* Category tabs: horizontal scroll strip */
  .faq-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
  }

  .faq-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .faq-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.78rem !important;
    padding: 8px 16px !important;
  }

  /* Accordion: clean tap targets */
  .faq-item {
    border-radius: 14px !important;
  }

  .faq-q {
    padding: 16px 18px !important;
    gap: 12px !important;
    min-height: 52px !important;
  }

  .faq-q-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
  }

  .faq-q-text {
    font-size: clamp(0.92rem, 3.6vw, 1.02rem) !important;
    line-height: 1.3 !important;
  }

  .faq-chevron {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }

  .faq-a-text {
    font-size: clamp(0.88rem, 3.4vw, 0.97rem) !important;
    line-height: 1.65 !important;
    padding: 0 18px 18px !important;
  }

  /* FAQ contact sidebar card (if present) */
  .faq-contact-card {
    border-radius: 20px !important;
    padding: clamp(20px, 5vw, 28px) !important;
  }
}


/* ==========================================================================
   I. TOUCH-SAFE HOVER STATES
   Scope 3D tilt / translate hover effects to pointer: fine devices only.
   On touch screens, use subtle :active press feedback instead.
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

  /* Kill all translateY hover lifts on cards */
  .pc:hover,
  .hsg:hover,
  .blog-card:hover,
  .featured-card:hover,
  .branch-card:hover,
  .gallery-card:hover,
  .faq-item:hover,
  .adm-btn-a:hover,
  .adm-btn-b:hover,
  .shs-pill:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }

  /* Kill 3D preserve-3d transforms */
  .pc,
  .hsg {
    transform-style: flat !important;
    will-change: auto !important;
  }

  /* Add subtle press feedback for touch */
  .pc:active,
  .blog-card:active,
  .branch-card:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }

  .adm-btn-a:active,
  .adm-btn-b:active,
  .bc-wa:active,
  .bc-call:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }

  /* Kill shine sweep animation on program cards */
  .pc:hover::after {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* ==========================================================================
   J. HAMBURGER → X ANIMATION HELPER
   The JS toggles .active on #mobile-toggle. Ensure the bars animate
   correctly on all inner pages (same rule as global mobile.css section 2,
   but repeated here for specificity insurance).
   ========================================================================== */

@media (max-width: 1023px) {
  .mobile-nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .mobile-nav-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .mobile-nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}


/* ==========================================================================
   K. BREADCRUMB OVERFLOW GUARD (inner pages)
   Some breadcrumbs can cause horizontal scroll on narrow screens.
   ========================================================================== */

@media (max-width: 480px) {
  .adm-bc,
  .blog-bc,
  .faq-bc,
  .breadcrumb-nav {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: 0.75rem !important;
  }
}


/* ==========================================================================
   L. GLOBAL SECTION PADDING — tighten scene padding on mobile
   ========================================================================== */

@media (max-width: 767px) {
  .scene-padding {
    padding: clamp(36px, 8vw, 60px) 0 !important;
  }

  /* Admissions and other section wrappers: reduce top padding */
  .adm-tl,
  .adm-progs,
  .adm-bot,
  .blog-featured,
  .blog-grid-section,
  .faq-body,
  .gallery-section {
    padding-top: clamp(36px, 8vw, 60px) !important;
    padding-bottom: clamp(40px, 9vw, 68px) !important;
  }
}