/* ============================================================
 * MOBILE POLISH — phone-sized refinements (<= 719px)
 *
 * The page is already structurally responsive. This sheet trims
 * the FEEL on a real phone: section padding, oversized hero,
 * testimonial quote-mark scale, footer rhythm, safe-area insets.
 *
 * No structural changes — only spacing + scale. Remove this
 * stylesheet to revert.
 * ============================================================ */

@media (max-width: 719px) {

  /* ---------- HERO (index) ----------
   * Was ~990px tall on mobile (420 headline + 420 photo).
   * Drop the headline min-height so it sizes to content, and
   * halve the photo so the section ends in ~one phone screen
   * + a bit, not two. */
  .hero {
    padding: var(--sp-20) 0 var(--sp-8);
  }
  .hero__collage { gap: var(--sp-4); }
  .hero__headline {
    min-height: 0;
    gap: var(--sp-5);
  }
  .hero__top { gap: var(--sp-4); }
  .hero h1 {
    font-size: 32px;
    line-height: 1.08;
  }
  .hero__lede { font-size: 16px; }
  .hero__photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  /* Position-absolute hero image needs to sit inside the
   * shorter wrapper without the 116% / -8% overhang showing. */
  .hero__photo-img {
    top: -4%;
    height: 108%;
  }

  /* CTAs full-width side-by-side stack on mobile for a clear hierarchy. */
  .hero__actions { gap: var(--sp-3); width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* ---------- HERO PANEL (current markup) ----------
   * The headline phrase "A complete front-desk" carries white-space:nowrap
   * for the desktop line break; on the narrow mobile board it was wider than
   * the column and got clipped by the board's overflow:hidden. Let it wrap
   * and size the headline to the board. */
  .hero-panel__copy h1 { font-size: clamp(34px, 9vw, 44px); line-height: 1.12; }
  .hero-panel__nb { white-space: normal; }
  .hero-panel__lede { font-size: 16px; }
  /* Drop the board's bottom padding so the cut-out sits flush with the
   * bottom edge of the tile (the board clips to its rounded corners). */
  .hero-panel__board { padding-bottom: 0; }
  .hero-panel__art img { margin-bottom: 0; }

  /* ---------- CTA BUTTONS ----------
   * Match the full-width treatment the other pages use on mobile
   * (book-a-demo session CTAs, the nav overlay). On the home page the
   * hero and pricing CTAs were hugging their text — make them stretch. */
  .hero-panel__actions { width: 100%; }
  .hero-panel__actions .btn,
  .price__cta { width: 100%; justify-content: center; }

  /* ---------- HERO STAT TILES ----------
   * Two fixes: (1) the decorative corner icons were 60px and sat on top
   * of the label text; (2) the three accreditation logos were squeezed
   * to 26px and read as tiny. Shrink + retuck the icons to a top-right
   * accent, and give the bilingual + accreditation tiles the full row so
   * their content can breathe. */
  .stats { padding: var(--sp-12) 0; }
  .stat { padding: var(--sp-5) var(--sp-4); min-height: 124px; gap: var(--sp-3); }
  .stat__number { font-size: 40px; letter-spacing: -0.04em; }
  .stat__number--word { font-size: 34px; }
  .stat__label { font-size: 16px; }

  /* Decorative icons → bolder accent tucked in the top-right, clear of text */
  .hero-panel__stats .stat__icon {
    top: var(--sp-4);
    right: var(--sp-4);
    bottom: auto;
    opacity: 1;
  }
  .hero-panel__stats .stat__icon svg { width: 40px; height: 40px; }
  .hero-panel__stats .stat__icon--cymraeg { width: 44px; height: 44px; }

  /* Bilingual + accreditations span the full row */
  .hero-panel__stats .stat--bilingual,
  .hero-panel__stats .stat--accreditations { grid-column: 1 / -1; }

  /* Accreditation logos: legible, left-aligned in a comfortable single row */
  .hero-panel__stats .stat__certs {
    justify-content: flex-start;
    gap: var(--sp-5);
    flex-wrap: nowrap;
  }
  .stat__cert-logo img { height: 48px; }

  /* ---------- MIS PARTNERS ----------
   * Was 4 cells × 104px = 416px band. Compress to ~80px each
   * (320px) so the partner band reads as a strip, not a stack. */
  .partners { padding: var(--sp-12) var(--sp-5); }
  .partners__intro {
    margin-bottom: var(--sp-8);
    text-align: left;
    align-items: flex-start;
  }
  .partners__intro .eyebrow { align-self: flex-start; }
  .partners__intro h2 { font-size: 28px; }
  .partners__intro p { font-size: 15px; }
  .partners__logo-cell {
    padding: var(--sp-4) var(--sp-4);
    min-height: 80px;
  }
  .partners__logo-cell img { max-height: 36px; }

  /* ---------- TESTIMONIAL ----------
   * 120px quote-mark looked too loud relative to a 28px quote.
   * Tighten the whole block. */
  .testimonial { padding: var(--sp-12) var(--sp-5); }
  .testimonial__mark-xl {
    font-size: 84px;
    margin-bottom: 0;
  }
  .testimonial__quote-xl {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 var(--sp-8);
  }
  .testimonial__eyebrow { margin-bottom: var(--sp-5); }
  .testimonial__byline-logo {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
  }
  .testimonial__byline-name { font-size: 18px; }
  .testimonial__byline-stat-num { font-size: 30px; }

  /* ---------- PROOF BAND ----------
   * Drop the min-height so it's a single-screen scene-change,
   * not a 380px wall. */
  .proof-band { min-height: 300px; padding-block: var(--sp-8); margin-bottom: 0; }
  .proof-band__inner { padding: var(--sp-10) 0; gap: var(--sp-4); }
  .proof-band__headline { font-size: 44px; }
  .proof-band__num { font-size: 60px; }

  /* ---------- FEATURES ----------
   * Was ~1540px tall (6 × 198 cards stacked). Trim per-card
   * padding, icon and heading so total drops to ~1050px. */
  .features { padding: var(--sp-8) var(--sp-5); margin-block: var(--sp-8); }
  .features__head { margin-bottom: var(--sp-8); }
  .features__head h2 { font-size: 28px; }
  .features__head p { font-size: 16px; }
  .feature { padding: var(--sp-5); gap: var(--sp-3); }
  .feature__icon { width: 44px; height: 44px; }
  .feature__icon svg { width: 22px; height: 22px; }
  .feature h3 { font-size: 17px; }
  .feature p { font-size: 15px; line-height: 1.5; }

  /* ---------- MODES CAROUSEL ----------
   * Slides were 560px min-height — way taller than most phones.
   * Bring them down and put the controls in a clearer band. */
  .modes { padding: var(--sp-12) 0; }
  .modes__head { margin-bottom: var(--sp-8); }
  .modes__head h2 { font-size: 28px; }
  .modes__slide {
    min-height: 0;
    padding: var(--sp-5);
  }
  .modes__slide-heading { font-size: 22px; }
  .modes__media { min-height: 200px; max-height: 240px; }
  .modes__media img,
  .modes__media video { max-height: 240px; }
  .modes__controls { margin-top: var(--sp-5); gap: var(--sp-3); }
  .modes__nav-btn { width: 44px; height: 44px; }

  /* ---------- PRICE ---------- */
  .price { padding: var(--sp-12) var(--sp-5); }
  .price__amount { font-size: 88px; }
  .price__tagline { font-size: 22px; }
  .price__guarantee {
    margin-top: var(--sp-8);
    padding: var(--sp-5);
  }

  /* ---------- FINAL CTA ---------- */
  .final-cta { padding: var(--sp-12) 0; }
  .final-cta h2 { font-size: 32px; }
  .final-cta__sub { font-size: 16px; margin-bottom: var(--sp-6); }
  .final-cta__inner .btn { width: 100%; justify-content: center; }

  /* ---------- FOOTER ----------
   * Was ~800px tall stacked. Tighten section padding,
   * inter-column gap, brand stack, and divider rhythm. */
  .footer { padding: var(--sp-8) 0 var(--sp-5); }
  .footer__grid { gap: var(--sp-6); }
  .footer__brand-stack {
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
  }
  .footer__brand-onsite { height: 44px; }
  .footer__brand-grouped { height: 28px; }
  .footer__tagline { font-size: 15px; }
  .footer__col-title { margin-bottom: var(--sp-2); }
  .footer__list { gap: var(--sp-2); }
  .footer__divider { margin: var(--sp-6) 0 var(--sp-3); }

  /* ---------- NAV (handled by the dedicated phone-nav block below) ---------- */
  .nav__overlay .btn { align-self: stretch; justify-content: center; }

  /* ============================================================
   * BOOK-A-DEMO page
   * ============================================================ */
  .bd-hero { padding: var(--sp-20) 0 var(--sp-2); }
  .bd-hero h1 { font-size: 28px; }
  .bd-hero__lede { font-size: 16px; }
  .bd-hero__inner { gap: var(--sp-4); }
  .bd-hero__photo { aspect-ratio: 4 / 3; }

  .bd-sessions { padding: var(--sp-8) 0 var(--sp-10); }
  .bd-sessions__head { margin-bottom: var(--sp-5); gap: var(--sp-2); }
  .bd-sessions__head h2 { font-size: 22px; }
  .bd-sessions__hint { font-size: 13px; }
  .bd-session { padding: var(--sp-5); gap: var(--sp-3); }
  .bd-session__cta { width: 100%; justify-content: center; }

  .bd-note { padding: 0 0 var(--sp-8); }
  .bd-note__card { padding: var(--sp-5); gap: var(--sp-3); }
  .bd-note p { font-size: 15px; }
}

/* ============================================================
 * VERY-SMALL VIEWPORTS (<= 380px) — iPhone SE / mini
 * ============================================================ */
@media (max-width: 380px) {
  .hero h1 { font-size: 28px; }
  .testimonial__quote-xl { font-size: 22px; }
  .price__amount { font-size: 76px; }
  .proof-band__num { font-size: 52px; }
  .proof-band__headline { font-size: 38px; }
  .final-cta h2 { font-size: 28px; }
  .bd-hero h1 { font-size: 26px; }
}

/* ============================================================
 * NAV — phone & small-tablet polish (< 1024px = before the
 * desktop nav links + CTA appear). The bar was 84px tall with
 * a 56px logo + "by GroupEd" text, which dominates a phone
 * viewport and visually competes with the page below.
 * ============================================================ */
@media (max-width: 1023px) {
  :root { scroll-padding-top: 76px; }

  .nav__inner {
    height: 64px;
    gap: var(--sp-3);
    /* Horizontal padding intentionally left to foundation.css (sp-5/sp-8)
     * so the logo lines up with the page content gutter at every width.
     * (Was var(--sp-4), which left the logo 16px inside the content edge
     * at tablet widths.) */
  }
  .nav__brand { gap: var(--sp-2); }
  .nav__brand img { height: 40px; }
  .nav__brand-by { font-size: 12px; }

  /* Hide the empty Primary <nav> wrapper on mobile — its
   * margin-left: auto was eating layout space even though the
   * <ul> inside is display: none. Push the toggle right manually. */
  .nav__inner > nav[aria-label="Primary"] { display: none; }
  .nav__toggle { margin-left: auto; width: 44px; height: 44px; }

  /* Overlay starts under the new shorter bar */
  .nav__overlay {
    inset: 64px 0 0 0;
    padding: var(--sp-6) var(--sp-4);
  }
  /* Hamburger ↔ X icon swap, driven by aria-expanded on the toggle */
  .nav__toggle-icon--x { display: none; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-icon--bars { display: none; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-icon--x { display: inline; }
}

/* Very small phones — drop the "by GroupEd" tagline so the bar
 * never feels cramped at 320px. */
@media (max-width: 380px) {
  .nav__brand-by { display: none; }
}

/* ============================================================
 * SAFE-AREA INSETS — iPhone notch / home-indicator
 * Prevents the bottom of the footer and the open nav overlay
 * from sitting under the home-indicator gesture bar.
 * ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer {
    padding-bottom: max(var(--sp-8), env(safe-area-inset-bottom));
  }
  .nav__overlay {
    padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  }
}

/* ============================================================
 * MOTION / DATA RESPECT
 * Drop the blurred proof-band background on data-saver, and
 * disable the aurora animations entirely on mobile to save CPU.
 * ============================================================ */
@media (max-width: 719px) {
  .price__aurora,
  .testimonial__aurora,
  .price__guarantee::before {
    animation: none;
  }
}
@media (prefers-reduced-data: reduce) {
  .proof-band__bg { display: none; }
  .proof-band { background: var(--ge-navy); }
}