/* ═══════════════════════════════════════════════════════════
   NES ETS SCHOOL — RESPONSIVE STYLESHEET
   Breakpoints: 960px (tablet) · 640px (mobile) · 420px (small)
   Load LAST in every page so these rules override everything.
═══════════════════════════════════════════════════════════ */

/* ─── HAMBURGER BUTTON (injected by main.js) ──────────────── */
.nav-ham {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 8px;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  transition: background .2s;
}
.nav-ham:hover { background: rgba(255,255,255,.22); }
.nav-ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s;
}
/* X state — root navbar */
.navbar.nav-open .nav-ham span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar.nav-open .nav-ham span:nth-child(2) { opacity: 0; }
.navbar.nav-open .nav-ham span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* School navbar hamburger — dark on white bg */
.s-navbar .nav-ham {
  background: rgba(62,66,150,.07);
  border-color: rgba(62,66,150,.2);
}
.s-navbar .nav-ham span { background: var(--blue); }
.s-navbar.nav-open .nav-ham span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.s-navbar.nav-open .nav-ham span:nth-child(2) { opacity: 0; }
.s-navbar.nav-open .nav-ham span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── PREVENT ANY HORIZONTAL PAGE SCROLL ─────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }

/* ─── CAROUSEL CLIP — prevent off-screen slides from overflowing ── */
.carousel-viewport { overflow: hidden; }
.carousel-section  { overflow: hidden; }

/* ─── GLOBAL IMAGE FIX — always fill container ────────────── */
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* ═══════════════════════════════════════════════════════════
   ≤ 960px — TABLET
═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {

  /* ── ROOT NAVBAR ─────────────────────────────────────── */
  .navbar { padding: 0 20px; height: 64px; overflow: visible; }
  .nav-ham { display: flex; }
  .nav-logo { gap: 10px; }
  .nav-logo-icon { height: 58px; }

  .nav-links {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--blue);
    padding: 8px 0 18px;
    box-shadow: 0 14px 36px rgba(0,0,0,.28);
    z-index: 997;
  }
  .navbar.nav-open .nav-links { display: flex; }
  .nav-links > li { width: 100%; }
  .nav-links > li > a {
    padding: 13px 24px;
    font-size: 14px;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-drop-toggle {
    padding: 13px 24px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    width: 100%;
  }
  /* Dropdown becomes accordion in mobile */
  .nav-dropdown::after { display: none; }
  .dropdown-panel {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border-radius: 0;
    background: rgba(0,0,0,.18);
    min-width: unset;
    padding: 4px 0;
    display: none;
    width: 100%;
  }
  .nav-dropdown.nav-sub-open .dropdown-panel { display: block; }
  .dropdown-panel a {
    color: rgba(255,255,255,.78);
    padding: 10px 44px;
    font-size: 13px;
    border-left: none;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .dropdown-panel a:hover { background: rgba(255,255,255,.08); color: #fff; }

  /* ── SCHOOL NAVBAR ───────────────────────────────────── */
  .s-navbar { padding: 0 20px; height: 58px; overflow: visible; }
  .s-navbar .nav-ham { display: flex; }
  .s-nav-logo { height: 68px; }

  .s-nav-links {
    display: none;
    position: absolute;
    top: 58px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    padding: 8px 0 18px;
    box-shadow: 0 14px 36px rgba(62,66,150,.18);
    z-index: 997;
    border-top: 2px solid rgba(62,66,150,.1);
  }
  .s-navbar.nav-open .s-nav-links { display: flex; }
  .s-nav-links > li { width: 100%; }
  .s-nav-links > li > a {
    padding: 12px 24px;
    font-size: 14px;
    display: block;
    border-bottom: 1px solid rgba(62,66,150,.07);
    white-space: normal;
  }
  .s-nav-links .s-nav-cta {
    margin: 14px 24px 2px;
    padding: 11px 20px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    display: block;
  }

  /* ── ROOT HERO ───────────────────────────────────────── */
  .hero { min-height: 72vh; }
  .hero-content { padding: 0 36px; max-width: 100%; }
  .hero-content h1 { font-size: 38px; max-width: 100%; }
  .hero-content p  { font-size: 13.5px; }

  /* ── SCHOOL HERO ─────────────────────────────────────── */
  .s-hero { padding: 0 36px; min-height: 72vh; }
  .s-hero-content h1 { font-size: 30px; }
  .s-hero-circles { flex: 0 0 280px; height: 240px; }
  .s-hero-circle-main { width: 200px; height: 200px; }
  .s-hero-circle-bg  { width: 190px; height: 190px; right: 36px; }
  .s-hero-circle-sm-1 { width: 90px; height: 90px; }
  .s-hero-circle-sm-2 { width: 76px; height: 76px; }

  /* ── PAGE INTRO ──────────────────────────────────────── */
  .page-intro { padding: 52px 40px; }

  /* ── INSPIRING ───────────────────────────────────────── */
  .inspiring { grid-template-columns: 1fr; padding: 60px 40px; gap: 44px; }
  .inspiring-grid { height: 320px; }

  /* ── THREE INSTITUTIONS ──────────────────────────────── */
  .three-inst { padding: 60px 40px; }
  .inst-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* ── TIMELINE ────────────────────────────────────────── */
  .timeline-section { padding: 60px 40px; overflow-x: auto; }
  .timeline-track { min-width: 640px; }

  /* ── LEGACY (root stats) ─────────────────────────────── */
  .legacy { padding: 60px 40px; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 18px; }

  /* ── CAROUSEL ────────────────────────────────────────── */
  .carousel-section { padding: 60px 40px; }
  .car-slide { flex: 0 0 calc((100% - 18px) / 2); }

  /* ── EXCELLENCE / AWARDS ─────────────────────────────── */
  .excellence { padding: 60px 40px; }
  .awards-label-box { width: 170px; font-size: 14px; }
  .awards-marquee-outer { left: 170px; }
  .awards-pill-bg { width: 54%; }

  /* ── SPACES ──────────────────────────────────────────── */
  .spaces { padding: 60px 40px; }
  .spaces-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 170px 170px 170px 170px;
    grid-template-areas:
      "s1 s2"
      "s1 s3"
      "s4 s5"
      "s6 s7";
  }

  /* ── REVIEWS ─────────────────────────────────────────── */
  .reviews { padding: 60px 40px; }
  .reviews-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .review-card { height: 360px; }

  /* ── LEADING ─────────────────────────────────────────── */
  .leading { flex-direction: column; padding: 60px 40px; gap: 44px; }
  .video-frame { flex: none; width: 100%; height: 260px; }

  /* ── ADMISSIONS CTA ──────────────────────────────────── */
  .admissions-cta { padding: 64px 40px; }

  /* ── FOOTER ──────────────────────────────────────────── */
  footer { padding: 60px 40px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }

  /* ── ABOUT PAGE ──────────────────────────────────────── */
  .about-hero { padding: 0 40px; min-height: 520px; }
  .about-pv   { flex-direction: column; padding: 60px 40px; gap: 44px; }
  .about-pv--rev { flex-direction: column-reverse; }
  .about-img-3d     { padding-right: 22px; padding-bottom: 22px; }
  .about-img-3d--rev{ padding-left: 22px;  padding-bottom: 22px; }
  .about-visionaries { padding: 60px 40px; }
  .about-vis-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
  .about-vis-card:nth-child(5) { grid-column: auto; justify-self: auto; width: auto; }
  .about-mission  { padding: 60px 40px; }
  .about-principal { padding: 60px 40px; }
  .about-principal-body { flex-direction: column; gap: 32px; align-items: flex-start; }
  .about-principal-circle { width: 160px; height: 160px; }

  /* ── FAC-HERO ────────────────────────────────────────── */
  .fac-hero { padding: 0 40px; min-height: 520px; }

  /* ── SL2 (school2 student life) — tablet ────────────── */
  .sl2-section { padding: 60px 40px; }
  .sl2-gallery { padding: 60px 40px; }
  .sl2-glance  { padding: 60px 40px; }
  .sl2-glance-grid { grid-template-columns: repeat(2, 1fr); }
  .sl2-img-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .sl2-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .sl2-gallery-item--wide, .sl2-gallery-item--tall,
  .sl2-gallery-item--wide-tall { grid-column: auto; grid-row: auto; }
  .sl2-full-img-wrap { width: 100%; margin-left: 0; height: 300px; }

  /* ── FAC-ITEM (2-col → 1-col) ────────────────────────── */
  .fac-item { grid-template-columns: 1fr; padding: 56px 40px; gap: 44px; }
  .fac-item--rev .fac-img-3d {
    order: 0;
    padding-left: 0;
    padding-right: 22px;
    padding-bottom: 22px;
  }
  .fac-item--rev .fac-img-3d::after { left: auto; right: 0; }
  .fac-item--rev .fac-text h2,
  .fac-item--rev .fac-text p { text-align: left; }
  .fac-item--rev .acad-focus-grid  { direction: ltr; }
  .fac-item--rev .fac-text .acad-label,
  .fac-item--rev .fac-text .acad-focus-heading { text-align: left; }
  .fac-img-3d { padding-right: 22px; padding-bottom: 22px; }
  .fac-img    { height: 260px; }
  .fac-img-section { padding: 56px 40px; }

  /* ── ACADEMICS ───────────────────────────────────────── */
  .acad-overview { padding: 60px 40px; }
  .acad-pillars  { padding: 60px 40px; }

  /* ── ADMISSIONS ──────────────────────────────────────── */
  .adm-section     { padding: 60px 40px; }
  .adm-why-grid    { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .adm-assist      { padding: 60px 40px; }
  .adm-form-section{ padding: 60px 40px; }

  /* ── ACHIEVEMENTS ────────────────────────────────────── */
  .ach-section    { padding: 60px 40px; }
  .ach-grid--5    { grid-template-columns: repeat(3, 1fr); }
  .ach-grid--3    { grid-template-columns: repeat(2, 1fr); }
  .ach-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ach-alumni     { padding: 60px 40px; }
  .ach-legacy     { padding: 60px 40px; }

  /* ── STUDENT LIFE ────────────────────────────────────── */
  .sl-grid-section { padding: 60px 40px; }
  .sl-grid  { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .sl-text-section { padding: 60px 40px; }

  /* ── SCHOOL INFO ─────────────────────────────────────── */
  .s-info { padding: 44px 40px; }
  .s-info-cols { grid-template-columns: 1fr; gap: 20px; }

  /* ── STATS STRIP ─────────────────────────────────────── */
  .s-stats-strip { flex-wrap: wrap; }
  .s-stat-item   { flex: 1 1 50%; border-bottom: 1px solid #eceef7; }

  /* ── CONTACT STRIP ───────────────────────────────────── */
  .s-contact-strip { padding: 12px 40px; gap: 16px; flex-wrap: wrap; }

  /* ── ACADEMICS GRID (school) ─────────────────────────── */
  .s-academics-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── LEARNING SPACES (school1 flex col) ─────────────── */
  .s-spaces { padding: 52px 40px; }

  /* ── SCHOOL1 LEGACY ──────────────────────────────────── */
  .s-legacy {
    flex-direction: column;
    padding: 60px 40px;
    gap: 40px;
    align-items: flex-start;
  }
  .s-legacy-stat {
    min-width: unset;
    width: 100%;
    max-width: 320px;
    aspect-ratio: unset;
    padding: 40px;
  }
  .s-legacy-stat-num { font-size: 60px; }

  /* ── MONTESSORI / SCHOOL1 ────────────────────────────── */
  .s-montessori-content {
    flex-direction: column;
    padding: 60px 40px;
    gap: 32px;
  }
  .s-montessori-content h2 { flex: none; }
  .s-montessori-pills { padding: 24px 40px 60px; }
  .s-pills-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── TRUST / SPACES SCHOOL ───────────────────────────── */
  .s-trust      { padding: 60px 40px; }
  .s-equal      { padding: 52px 0 52px 40px; }
  .s-achievements { padding: 52px 40px; }
  .s-ach-circles { flex-wrap: wrap; justify-content: center; gap: 20px; }

  /* ── SCHOOL2: LEARNING BEYOND CLASSROOMS ────────────── */
  .s-spaces[style*="grid"],
  .school2-spaces-grid { grid-template-columns: 1fr; }

  /* ── SCHOOL2: CBSE SPACES (2-col grid → 1-col) ──────── */
  .s-mont-boxes    { grid-template-columns: repeat(2, 1fr); }
  .s-moments       { grid-template-columns: 1fr; min-height: unset; }
  .s-moments-text  { padding: 52px 40px; }
  .s-moments-stack-wrap { padding: 40px; }
  .s-tomorrow      { padding: 60px 40px; }

  /* ── SCHOOL3: TEXTBOOKS SECTION ──────────────────────── */
  .s-textbooks     { flex-direction: column; padding: 56px 40px; gap: 40px; }

  /* ── CONTACT (main site table) ───────────────────────── */
  .contact-section { padding: 60px 40px; }

  /* ── SCHOOL2 CONTACT (ctc-*) ─────────────────────────── */
  .ctc-visit         { padding: 60px 40px; }
  .ctc-visit-inner   { grid-template-columns: 1fr; gap: 44px; }
  .ctc-touch         { padding: 60px 40px; }
  .ctc-cards         { grid-template-columns: 1fr 1fr; gap: 18px; }
  .ctc-form-section  { padding: 60px 40px; }
  .ctc-form-inner    { grid-template-columns: 1fr; gap: 40px; }
  .ctc-form-img      { display: none; }
  .ctc-book-visit    { padding: 60px 40px; }
  .ctc-social        { padding: 60px 40px; }

  /* ── TEAM PAGE ───────────────────────────────────────── */
  .team-section { padding: 64px 40px; }
  .team-grid    { grid-template-columns: repeat(4, 1fr); }

  /* ── DISCLOSURE ──────────────────────────────────────── */
  .disc-hero-row  { grid-template-columns: 1fr; }
  .disc-sidebar   { display: none; }
  .disc-sections  { padding: 40px 40px 60px; }

  /* ── FAC SPACES SECTION — reduce 80px side padding ──── */
  .fac-spaces-section { padding: 60px 40px; }
  .fac-spaces-card,
  .fac-spaces-img-card { flex: 0 0 calc(50% - 8px); }

  /* ── FAC ACHIEVEMENTS SECTION ────────────────────────── */
  .fac-achievements-section { padding: 60px 40px; }

  /* ── ACADEMICS: PILLARS GRID (4-col → 2-col) ────────── */
  .acad-pillars-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── ACADEMICS: LEARNING APPROACH SECTION ────────────── */
  .acad-approach { padding: 60px 40px; }
  .acad-approach-pills { grid-template-columns: repeat(2, 1fr); }

  /* ── ACADEMICS: ASSESSMENT SECTION ──────────────────── */
  .acad-assessment { padding: 60px 40px; }

  /* ── ADMISSIONS: SCHOLARSHIPS ───────────────────────── */
  .adm-scholarships { padding: 40px 40px; }

  /* ── SCHOOL3: TRADITION SECTION ─────────────────────── */
  .s-tradition { padding: 70px 40px; }

  /* ── SCHOOL3: MONTESSORI SECTION ────────────────────── */
  .s-montessori { padding: 60px 40px; }

  /* ── SCHOOL2: SPACES GRID — CSS grid, selector fix ──── */
  /* [style*="grid"] never matches — target class directly */
  .s-spaces { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   ≤ 640px — MOBILE
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── ROOT NAVBAR ─────────────────────────────────────── */
  .navbar { padding: 0 16px; height: 60px; }
  .nav-links { top: 60px; }

  /* ── SCHOOL NAVBAR ───────────────────────────────────── */
  .s-navbar { padding: 0 16px; height: 54px; }
  .s-nav-links { top: 54px; }
  .s-nav-logo { height: 54px; }

  /* ── ROOT NAVBAR LOGOS — always show all 3 ───────────── */
  .nav-logo { gap: 6px; }
  .nav-logo-icon {
    height: 34px;
    transform: translateY(4px);
    display: flex !important; /* force all 3 visible; no hide-then-show */
    min-width: 34px;          /* prevent collapse when image fails */
    flex-shrink: 0;
  }

  /* ── ROOT HERO ───────────────────────────────────────── */
  .hero {
    min-height: unset;
    align-items: flex-start;
    padding-top: 90px;
    padding-bottom: 60px;
  }
  .hero-content { padding: 0 20px; width: 100%; max-width: 100%; }
  .hero-content h1 { font-size: 28px; max-width: 100%; }
  .hero-content p  { font-size: 13px; margin-bottom: 22px; }
  .hero-btns { flex-direction: column; align-items: stretch; gap: 16px; max-width: 300px; }
  .hero-btns .btn,
  .hero-btns .btn-outline-white,
  .hero-btns .btn-blue,
  .hero-btns .btn-outline-blue {
    display: block;
    text-align: center;
    padding: 13px 22px;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── SCHOOL HERO ─────────────────────────────────────── */
  .s-hero {
    padding: 90px 20px 52px;
    min-height: 88vh;
    flex-direction: column;
    justify-content: center;
    gap: 36px;
  }
  .s-hero-content { max-width: 100%; flex: none; width: 100%; }
  .s-hero-content h1 { font-size: 26px; }
  .s-hero-content p  { font-size: 13px; }
  .s-hero-circles    { display: none; }
  .s-hero-btns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 22px;
    max-width: 300px;
  }
  .s-hero-btns .btn,
  .s-hero-btns .btn-outline-white,
  .s-hero-btns .btn-blue,
  .s-hero-btns .btn-outline-blue {
    display: block;
    text-align: center;
    padding: 13px 22px;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── PAGE INTRO ──────────────────────────────────────── */
  .page-intro { padding: 36px 20px; }
  .page-intro h1 { font-size: 24px; }
  .page-intro p  { font-size: 13px; }
  .page-intro .page-intro-btns { flex-direction: column; align-items: flex-start; }

  /* ── INSPIRING ───────────────────────────────────────── */
  .inspiring { padding: 40px 20px; gap: 36px; }
  .inspiring-grid { height: 220px; grid-template-columns: 1fr; }
  .inspiring-grid .marquee-col:nth-child(2) { display: none; }
  .inspiring-text h2 { font-size: 22px; }
  .inspiring-text p  { font-size: 13px; }
  .tag { font-size: 11.5px; padding: 6px 16px; }

  /* ── THREE INSTITUTIONS ──────────────────────────────── */
  .three-inst { padding: 40px 20px; }
  .three-inst > h2 { font-size: 24px; margin-bottom: 28px; }
  .inst-grid { grid-template-columns: 1fr; gap: 16px; }

  /* ── TIMELINE — only the TRACK scrolls, heading stays put */
  .timeline-section {
    padding: 40px 20px;
    overflow-x: visible; /* override 960px auto — heading must not scroll */
  }
  .timeline-section h2 { font-size: 20px; margin-bottom: 36px; }
  .timeline-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
    /* items' min-width forces content wider than container → scrolls */
  }
  .tl-item { min-width: 130px; }
  .tl-popup { display: none !important; }

  /* ── LEGACY ──────────────────────────────────────────── */
  .legacy { padding: 40px 20px; }
  .legacy-content h2 { font-size: 24px; }
  .legacy-content > p { font-size: 13px; margin-bottom: 36px; }
  .stats-row { grid-template-columns: 1fr; }
  .stat-card { padding: 28px 24px; }
  .stat-num  { font-size: 42px; }

  /* ── CAROUSEL ────────────────────────────────────────── */
  .carousel-section { padding: 40px 20px; }
  .car-slide { flex: 0 0 100%; }

  /* ── EXCELLENCE / AWARDS ─────────────────────────────── */
  .excellence { padding: 40px 20px; }
  .excellence h2 { font-size: 24px; }
  .excellence > p { font-size: 13px; }
  .awards-row { height: 80px; }
  .awards-label-box { width: 110px; font-size: 11px; padding: 0 10px; line-height: 1.35; }
  .awards-marquee-outer { left: 110px; }
  .awards-pill-bg { width: 46%; }

  /* ── SPACES ──────────────────────────────────────────── */
  .spaces { padding: 40px 20px; }
  .spaces-content h2 { font-size: 24px; }
  .spaces-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 130px);
    grid-template-areas:
      "s1 s2"
      "s3 s4"
      "s5 s6"
      "s7 s7";
  }

  /* ── REVIEWS ─────────────────────────────────────────── */
  .reviews { padding: 40px 20px; }
  .reviews h2 { font-size: 24px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .review-card  { height: 300px; }

  /* ── LEADING ─────────────────────────────────────────── */
  .leading { padding: 40px 20px; gap: 32px; }
  .leading-text h2 { font-size: 26px; }
  .video-frame { height: 200px; }

  /* ── ADMISSIONS CTA ──────────────────────────────────── */
  .admissions-cta { padding: 48px 20px; }
  .admissions-cta h2 { font-size: 20px; }
  .admissions-cta h3 { font-size: 28px; }
  .cta-btns { flex-direction: column; align-items: center; gap: 14px; }
  .cta-btns .btn,
  .cta-btns .btn-outline-white { width: 100%; max-width: 300px; text-align: center; display: block; padding: 13px 22px; }

  /* ── FOOTER ──────────────────────────────────────────── */
  footer { padding: 40px 20px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid > div:first-child { grid-column: auto; }

  /* ── ABOUT PAGE ──────────────────────────────────────── */
  .about-hero { padding: 0 20px; min-height: 420px; }
  .about-hero-content h1 { font-size: 28px; }
  .about-hero-content > p { font-size: 13px; }
  .about-hero-btns { flex-direction: column; align-items: flex-start; gap: 14px; }

  .about-pv { padding: 40px 20px; gap: 36px; }
  .about-pv-text h2 { font-size: 24px; }

  /* Remove 3D shadow effect on mobile — show clean images */
  .about-img-3d,
  .about-img-3d--rev { padding: 0; flex: none; width: 100%; }
  .about-img-3d::after,
  .about-img-3d--rev::after { display: none; }
  .about-img-box { height: 220px; }

  .about-mission { padding: 40px 20px; }
  .about-mission h2 { font-size: 24px; }

  .about-visionaries { padding: 40px 20px; }
  .about-vis-header h2 { font-size: 24px; }
  .about-vis-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .about-vis-card:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: 50%; }

  .about-principal { padding: 40px 20px; }
  .about-principal-title { font-size: 22px; }
  .about-principal-card  { padding: 28px 20px; }
  .about-principal-body  { flex-direction: column; gap: 24px; }
  .about-principal-photo { flex-shrink: unset; }
  .about-principal-circle { width: 140px; height: 140px; }
  .about-principal-quote p { font-size: 13px; }

  /* ── FAC HERO ────────────────────────────────────────── */
  .fac-hero { padding: 0 20px; min-height: 420px; }
  .fac-hero-content h1 { font-size: 26px; }
  .fac-hero-content p  { font-size: 13px; }
  .fac-hero-btns { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fac-hero-btns .btn,
  .fac-hero-btns .btn-outline-white { display: block; text-align: center; padding: 13px 22px; width: 100%; max-width: 300px; }

  /* ── FAC ITEM ────────────────────────────────────────── */
  .fac-item { padding: 40px 20px; gap: 36px; }
  .fac-img-3d,
  .fac-item--rev .fac-img-3d { padding: 0; flex: none; width: 100%; }
  .fac-img-3d::after { display: none; }
  .fac-text h2 { font-size: 22px; }
  .fac-img { height: 220px; }
  .fac-img-section { padding: 40px 20px; }
  .fac-img-section h2 { font-size: 24px; }

  /* ── ACADEMICS ───────────────────────────────────────── */
  .acad-overview { padding: 40px 20px; }
  .acad-overview-inner h2 { font-size: 24px; }
  .acad-pillars  { padding: 40px 20px; }
  .acad-focus-grid { grid-template-columns: 1fr; }

  /* ── ADMISSIONS ──────────────────────────────────────── */
  .adm-section  { padding: 40px 20px; }
  .adm-section h2 { font-size: 22px; }
  .adm-docs-grid { grid-template-columns: 1fr; }
  .adm-why-grid  { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .adm-assist    { padding: 40px 20px; }
  .adm-assist h2 { font-size: 22px; }
  .adm-assist-btns { flex-direction: column; align-items: center; }
  .adm-form-section { padding: 40px 20px; }
  .adm-form-intro h2 { font-size: 22px; }

  /* ── ACHIEVEMENTS ────────────────────────────────────── */
  .ach-section { padding: 40px 20px; }
  .ach-section h2 { font-size: 22px; }
  .ach-grid--5 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ach-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ach-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ach-stat-number { font-size: 30px; }
  .ach-alumni { padding: 40px 20px; }
  .ach-alumni h2 { font-size: 24px; }
  .ach-legacy { padding: 40px 20px; }
  .ach-legacy-header h2 { font-size: 24px; }

  /* ── STUDENT LIFE ────────────────────────────────────── */
  .sl-grid-section { padding: 40px 20px; }
  .sl-grid { grid-template-columns: 1fr; }
  .sl-grid-title { font-size: 24px; }
  .sl-text-section { padding: 40px 20px; }
  .sl-text-inner h2 { font-size: 22px; }

  /* ── SCHOOL INFO ─────────────────────────────────────── */
  .s-info { padding: 36px 20px; }
  .s-contact-strip { padding: 12px 20px; gap: 10px; flex-wrap: wrap; }
  .s-contact-strip-cta { margin-left: 0; }
  .s-contact-item { font-size: 11.5px; }

  /* ── ACADEMICS GRID (school) ─────────────────────────── */
  .s-academics-grid { grid-template-columns: 1fr; }
  .s-acad-card:nth-child(even) { border: none; }

  /* ── SCHOOL SPACES ───────────────────────────────────── */
  .s-spaces { padding: 40px 20px; display: flex; flex-direction: column; gap: 36px; }

  /* ── SCHOOL1 LEGACY ──────────────────────────────────── */
  .s-legacy { padding: 40px 20px; gap: 36px; }
  .s-legacy-content h2 { font-size: 26px; }
  .s-legacy-stat { padding: 32px; }
  .s-legacy-stat-num { font-size: 52px; }

  /* ── MONTESSORI ──────────────────────────────────────── */
  .s-montessori-content { padding: 40px 20px; }
  .s-montessori-content h2 { font-size: 26px; }
  .s-montessori-pills { padding: 16px 20px 48px; }
  .s-pills-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .s-flip-card  { height: 240px; }

  /* ── TRUST / EQUAL / ACHIEVEMENTS (school) ───────────── */
  .s-trust h2      { font-size: 24px; }
  .s-trust         { padding: 40px 20px; }
  .s-equal         { padding: 40px 0 40px 20px; }
  .s-equal h2      { font-size: 22px; }
  .s-achievements  { padding: 40px 20px; }
  .s-ach-circle    { width: 140px; height: 140px; }

  /* ── SCHOOL2: TOMORROW / MONT / MOMENTS ─────────────── */
  .s-mont-boxes { grid-template-columns: 1fr; }
  .s-moments    { display: flex; flex-direction: column; }
  .s-moments-text { padding: 40px 20px; }
  .s-moments-text h2 { font-size: 24px; }
  .s-moments-stack-wrap { padding: 20px; }
  .s-tomorrow   { padding: 40px 20px; }
  .s-tomorrow-inner h2 { font-size: 26px; }

  /* ── SCHOOL3: TEXTBOOKS ──────────────────────────────── */
  .s-textbooks { padding: 40px 20px; gap: 36px; }

  /* ── CONTACT (main site table) ───────────────────────── */
  .contact-section { padding: 40px 20px; }
  .contact-section h2 { font-size: 22px; }

  /* ── SCHOOL2 CONTACT ─────────────────────────────────── */
  .ctc-visit       { padding: 40px 20px; }
  .ctc-touch       { padding: 40px 20px; }
  .ctc-cards       { grid-template-columns: 1fr; }
  .ctc-form-section{ padding: 40px 20px; }
  .ctc-book-visit  { padding: 40px 20px; }
  .ctc-book-btns   { flex-direction: column; align-items: center; }
  .ctc-social      { padding: 40px 20px; }

  /* ── TEAM PAGE ───────────────────────────────────────── */
  .team-section { padding: 48px 20px; }
  .team-grid    { grid-template-columns: repeat(3, 1fr); gap: 32px 14px; }
  .team-intro h2 { font-size: 24px; }

  /* ── DISCLOSURE ──────────────────────────────────────── */
  .disc-sections { padding: 28px 20px 48px; }
  .disc-hero     { padding: 36px 20px 32px; }
  .disc-hero-content h1 { font-size: 22px; }
}


/* ═══════════════════════════════════════════════════════════
   ≤ 420px — SMALL MOBILE
═══════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  /* Smaller headings */
  .hero-content h1       { font-size: 24px; }
  .s-hero-content h1     { font-size: 22px; }
  .about-hero-content h1 { font-size: 24px; }
  .fac-hero-content h1   { font-size: 22px; }
  .fac-text h2           { font-size: 20px; }
  .three-inst > h2       { font-size: 20px; }
  .legacy-content h2     { font-size: 20px; }
  .admissions-cta h3     { font-size: 24px; }

  /* Grids: force 2 cols on smallest screens */
  .inst-grid   { grid-template-columns: 1fr; }
  .stats-row   { grid-template-columns: 1fr; }
  .stat-num    { font-size: 36px; }

  /* Team: 2 cols on very small */
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .team-photo { width: 90px; height: 90px; font-size: 20px; }

  /* Achievements */
  .ach-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ach-stat-number { font-size: 26px; }

  /* School circles */
  .s-ach-circle { width: 110px; height: 110px; }

  /* Visionaries */
  .about-vis-grid { gap: 16px 12px; }
  .about-vis-card:nth-child(5) { width: 70%; }

  /* Admissions */
  .adm-why-grid { grid-template-columns: 1fr; }

  /* Logo: keep all 3 visible, compress further */
  .nav-logo { gap: 4px; }
  .nav-logo-icon { height: 30px; transform: translateY(3px); display: flex !important; min-width: 30px; }

  /* Footer */
  .footer-grid { gap: 24px; }
}


/* ═══════════════════════════════════════════════════════════
   TARGETED FIXES — applied after full audit
═══════════════════════════════════════════════════════════ */

/* ── Hide the floating Apply Now / Admissions CTA that sits
      next to the hamburger on mobile — it's reachable via
      the nav menu, so no information is lost               */
@media (max-width: 960px) {
  .s-navbar > .s-nav-cta { display: none; }

  /* School hero: keep a useful minimum height on tablet   */
  .s-hero { min-height: 60vh; padding-top: 56px; }

  /* Contact strip: let items wrap cleanly, hide the CTA   */
  .s-contact-strip { overflow-x: hidden; }
  .s-contact-strip-cta { display: none; }

  /* School2 "Learning Beyond Textbooks" — remove 3D shadow on mobile */
  .s-spaces-img-3d { padding: 0; }
  .s-spaces-img-3d::after { display: none; }

  /* About-page hero simple variant (contact/inner pages)  */
  .about-hero--simple { min-height: 300px; }
  .about-hero--simple .about-hero-content h1 { font-size: 30px; }

  /* Admission form fields: full-width on tablet           */
  .adm-form-inner { padding: 32px 28px; }

  /* school3 textbooks right side (flip grid)              */
  .s-textbooks-right .s-focus-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* School hero: natural height so landscape photo shows */
  .s-hero { min-height: unset; padding: 74px 20px 52px; }
  .s-hero-content { width: 100%; }

  /* CTA buttons inside school hero                        */
  .fac-hero-btns .btn,
  .fac-hero-btns .btn-outline-white { display: block; text-align: center; }

  /* School2 spaces section: stack cleanly, hide 3D outline */
  .s-spaces-img-3d {
    padding: 0;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
  }
  .s-spaces-img-3d::after { display: none; }
  .s-spaces-img { height: 220px; }

  /* School info two-column → single column                */
  .s-info-cols { grid-template-columns: 1fr !important; }

  /* Stats strip: 2 per row on mobile                     */
  .s-stat-item { flex: 1 1 50%; }
  .s-stat-val  { font-size: 16px; }

  /* Flip cards: fixed height to avoid collapse            */
  .s-flip-card { height: 200px; }

  /* About vis 5th card: full row on very narrow           */
  .about-vis-card:nth-child(5) { grid-column: 1 / -1; width: 55%; justify-self: center; }

  /* Disclosure info rows: single column                   */
  .disc-info-row,
  .disc-staff-row,
  .disc-infra-row { grid-template-columns: 1fr; }
  .disc-info-label,
  .disc-staff-label,
  .disc-infra-label { border-right: none; border-bottom: 1.5px solid #e8eaf5; }

  /* Admissions form: full-width fields                    */
  .adm-form-inner { padding: 24px 20px; }

  /* CTA section buttons: full width, proper spacing       */
  .adm-assist-btns { flex-direction: column; align-items: center; gap: 14px; }
  .adm-assist-btns .btn,
  .adm-assist-btns .btn-outline-white { display: block; text-align: center; width: 100%; max-width: 300px; padding: 13px 22px; }

  /* School legacy stat box: sensible width                */
  .s-legacy-stat { max-width: 100%; }

  /* Montessori pills: 2-col grid on mobile                */
  .s-pills-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Awards marquee label: hide label text on very small   */
  .awards-row { height: 72px; }

  /* Carousel buttons: closer to edges                     */
  .car-btn.prev { left: -14px; }
  .car-btn.next { right: -14px; }

  /* Review cards: cap height                              */
  .review-card { height: 260px; }

  /* About-page hero simple variant (inner pages)          */
  .about-hero--simple { min-height: 240px; }
  .about-hero--simple .about-hero-content h1 { font-size: 24px; }

  /* Contact table: wrap scrolls, reduce border-radius     */
  .contact-table-wrap { border-radius: 10px; }

  /* Disclosure result tables: make table itself scrollable */
  .disc-result-table,
  .disc-staff-table,
  .disc-infra-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 420px;
  }

  /* School achievements results table (if present)        */
  .ach-result-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 380px;
  }

  /* School3 textbooks                                     */
  .s-textbooks { gap: 32px; }

  /* ── SL2 (school2 student life) — mobile ────────────── */
  .sl2-section { padding: 40px 20px; }
  .sl2-gallery { padding: 40px 20px; }
  .sl2-glance  { padding: 40px 20px; }
  .sl2-section-split { grid-template-columns: 1fr; gap: 32px; }
  .sl2-section-split--rev .sl2-section-main-img { order: 0; padding-left: 0; padding-right: 14px; }
  .sl2-section-main-img { padding-right: 14px; padding-bottom: 14px; }
  .sl2-section-main-img-box { height: 220px; }
  .sl2-img-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sl2-img-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sl2-img-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .sl2-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .sl2-glance-grid  { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sl2-glance h2 { font-size: 22px; margin-bottom: 28px; }
  .sl2-glance-card { padding: 22px 14px; }
  .sl2-full-img-wrap { height: 220px; width: 100%; margin-left: 0; }
  .sl2-img-grid--flex-center .sl2-img-card { flex: 0 0 calc(50% - 9px); min-width: 0; }
  .sl2-marquee-track .sl2-img-card { flex: 0 0 160px; width: 160px; }
  .sl2-section h2 { font-size: 22px; }
}

@media (max-width: 420px) {
  /* Keep hero circles hidden, keep s-nav-cta hidden       */
  .s-navbar > .s-nav-cta { display: none !important; }

  /* Visionaries: single column on tiny screens            */
  .about-vis-grid { grid-template-columns: 1fr; }
  .about-vis-card:nth-child(5) { grid-column: auto; width: auto; justify-self: auto; }

  /* Pills: keep 2-col                                     */
  .s-pills-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .s-flip-card  { height: 180px; }

  /* Strip items: hide overflow cleanly                    */
  .s-contact-item:nth-child(3) { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE COMPREHENSIVE FIXES
   Applied last to override any remaining desktop-only rules
═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── ABOUT / FAC HERO — natural height, landscape photo shows */
  .about-hero { min-height: unset; padding: 80px 20px 56px; }
  .fac-hero   { min-height: unset; padding: 80px 20px 56px; }

  /* ── INSPIRING MARQUEE — single col, taller on mobile ── */
  .inspiring { grid-template-columns: 1fr; padding: 40px 20px; gap: 32px; }
  .inspiring-grid {
    height: 280px;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .inspiring-grid .marquee-col:nth-child(2) { display: none; }

  /* ── AWARDS MARQUEE — fix on narrow phones ───────────── */
  .awards-row { height: 72px; }
  .awards-label-box {
    width: 90px;
    font-size: 10px;
    padding: 0 8px;
    line-height: 1.3;
    border-radius: 12px 0 0 12px;
  }
  .awards-marquee-outer { left: 90px; }
  .awards-pill-bg { width: 42%; border-radius: 12px; }
  .award-frame { width: 72px; }

  /* ── ALL BUTTON GROUPS — stack vertically, full width ── */
  .cta-btns,
  .adm-assist-btns,
  .ctc-book-btns,
  .fac-hero-btns,
  .adm-campus-visit-btns,
  .about-hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .cta-btns .btn,              .cta-btns .btn-outline-white,
  .cta-btns .btn-blue,         .cta-btns .btn-outline-blue,
  .adm-assist-btns .btn,       .adm-assist-btns .btn-outline-white,
  .adm-assist-btns .btn-blue,  .adm-assist-btns .btn-outline-blue,
  .ctc-book-btns .btn,         .ctc-book-btns .btn-outline-white,
  .ctc-book-btns .btn-blue,    .ctc-book-btns .btn-outline-blue,
  .fac-hero-btns .btn,         .fac-hero-btns .btn-outline-white,
  .fac-hero-btns .btn-blue,    .fac-hero-btns .btn-outline-blue,
  .adm-campus-visit-btns .btn, .adm-campus-visit-btns .btn-outline-white,
  .about-hero-btns .btn,       .about-hero-btns .btn-outline-white {
    display: block;
    width: 100%;
    max-width: 300px;
    text-align: center;
    padding: 13px 22px;
    box-sizing: border-box;
  }

  /* ── PAGE INTRO BUTTONS ──────────────────────────────── */
  .page-intro .page-intro-btns {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .page-intro .page-intro-btns .btn,
  .page-intro .page-intro-btns .btn-outline-white,
  .page-intro .page-intro-btns .btn-blue,
  .page-intro .page-intro-btns .btn-outline-blue {
    display: block;
    width: 100%;
    max-width: 280px;
    text-align: center;
    box-sizing: border-box;
  }

  /* ── ADMISSIONS — WHY CHOOSE ICON GRID (5-col → 2-col) ─ */
  .adm-why-icon-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .adm-why-icon-card { padding: 16px 10px 14px; font-size: 11px; }

  /* ── ADMISSIONS — PROCESS TIMELINE (horizontal scroll) ─ */
  .adm-timeline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
  }
  .adm-timeline-step {
    flex: 0 0 140px;
    min-width: 140px;
    padding: 0 10px;
  }
  /* Extend the background line to match the wider content */
  .adm-timeline::before { left: 27px; right: 27px; }

  /* ── ADMISSIONS — FORM: 2-col rows → single col ──────── */
  .adm-form-row--2 { grid-template-columns: 1fr; }
  .adm-form { padding: 28px 18px; border-radius: 14px; }
  .adm-form-section { padding: 40px 16px; }

  /* ── ADMISSIONS — CAMPUS VISIT SECTION ──────────────── */
  .adm-campus-visit { padding: 48px 20px; min-height: auto; }
  .adm-campus-visit-content h2 { font-size: 22px; }

  /* ── ADMISSIONS — DOCS GRID ──────────────────────────── */
  .adm-docs-grid { gap: 8px; }
  .adm-doc-card { font-size: 12px; padding: 8px 14px; }

  /* ── CONTACT TABLE — horizontal scroll ───────────────── */
  .contact-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    display: block;
    width: 100%;
    border-radius: 10px;
  }
  .contact-table {
    min-width: 560px; /* 4 columns × ~140px */
    width: 100%;
  }
  /* Prevent table from pushing body width */
  .contact-section { overflow: hidden; }

  /* ── SCHOOL2 CONTACT FORM — collapse 2-col inputs ────── */
  .ctc-form-inner .adm-form-row--2,
  .ctc-form-inner .form-row--2 { grid-template-columns: 1fr; }

  /* ── CONTACT STRIP — wrap cleanly ───────────────────── */
  .s-contact-strip {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 8px;
    justify-content: flex-start;
  }

  /* ── FOOTER — single col ─────────────────────────────── */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  /* ── SPACES GRID — 2-col on mobile ──────────────────── */
  .spaces-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 120px);
    grid-template-areas:
      "s1 s2"
      "s3 s4"
      "s5 s6"
      "s7 s7";
    gap: 8px;
  }

  /* ── GLOBAL: PREVENT ELEMENTS WIDER THAN VIEWPORT ────── */
  img, video, iframe, canvas { max-width: 100%; }

  /* ── FAC IMAGE GRID (4-col → 2-col) ─────────────────── */
  .fac-img-grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* ── FAC SPACES SECTION + CARDS ─────────────────────── */
  .fac-spaces-section { padding: 40px 20px; }
  .fac-spaces-card,
  .fac-spaces-img-card { flex: 0 0 100%; }

  /* ── FAC ACHIEVEMENTS SECTION ────────────────────────── */
  .fac-achievements-section { padding: 40px 20px; }

  /* ── ACADEMICS: PILLARS GRID (4-col → 1-col) ────────── */
  .acad-pillars-grid { grid-template-columns: 1fr; }

  /* ── ACADEMICS: APPROACH SECTION ────────────────────── */
  .acad-approach { padding: 40px 20px; }

  /* ── ACADEMICS: ASSESSMENT SECTION ──────────────────── */
  .acad-assessment { padding: 40px 20px; }

  /* ── ADMISSIONS: SCHOLARSHIPS ───────────────────────── */
  .adm-scholarships { padding: 40px 20px; }

  /* ── CONTACT: INFO TABLE — label + value stack ───────── */
  .ctc-info-row { grid-template-columns: 1fr; }

  /* ── CONTACT: MAP CARD — pull out of absolute overlay ── */
  .ctc-map-card {
    position: static;
    transform: none;
    min-width: unset;
    width: 100%;
    margin-top: 20px;
    border-radius: 14px;
  }

  /* ── SCHOOL2: SPACES LIST (2-col → 1-col) ───────────── */
  .s-spaces-list { grid-template-columns: 1fr; }

  /* ── SCHOOL3: TEXTBOOKS LIST (2 CSS cols → 1) ───────── */
  .s-textbooks-list { columns: 1; }

  /* ── SCHOOL3: TRADITION SECTION ─────────────────────── */
  .s-tradition { padding: 60px 20px; }
  .s-tradition-content h2 { font-size: 26px; }

  /* ── SCHOOL3: MONTESSORI SECTION ────────────────────── */
  .s-montessori { padding: 40px 20px; }
}

@media (max-width: 380px) {
  .hero-content h1    { font-size: 22px; }
  .s-hero-content h1  { font-size: 20px; }
  .hero-btns, .s-hero-btns { max-width: 260px; }
  .awards-label-box   { width: 72px; font-size: 9px; padding: 0 6px; }
  .awards-marquee-outer { left: 72px; }
  .award-frame { width: 60px; }
  .awards-row { height: 64px; }
  /* Narrow admissions form */
  .adm-why-icon-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .adm-timeline-step { flex: 0 0 120px; min-width: 120px; }
}