/* ==========================================================================
   Responsive — mobile-first overrides.
   Breakpoints: 1920 / 1440 / 1024 (tablet) / 900 (nav) / 768 (large phone)
                / 560 (phone) / 400 (small phone)
   ========================================================================== */

/* ===== Ultra-wide & wide ========================================== */
@media (min-width: 1920px) { :root { --container-max: 1440px; } }

/* ===== Tablet (≤1024) ============================================== */
@media (max-width: 1024px) {
  /* symmetric, slightly tighter band on tablet */
  :root { --section-y: 56px; --section-y-end: 56px; }
  .hero { padding-top: 120px; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero__media { aspect-ratio: 16 / 10; }
  .hero__sub { max-width: 60ch; }

  .split { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.25rem); }
  .split--reverse .split__media { order: 0; }
  /* Let section images keep their natural ratio on mobile (no square crop) */
  .split__media { min-height: 0; }
  #opportunity .split__media { aspect-ratio: 16 / 10; }

  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stats-row--six { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-6); }
  .stats-row--six .figure { padding-left: 0; border-left: 0; }
  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .tm-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .eco { grid-template-columns: 1fr; gap: var(--space-6); }
  .mediawall__grid { grid-template-columns: repeat(3, 1fr); }
  .contact__panel { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer__brand-col { grid-column: 1 / -1; }
}

/* ===== Nav → off-canvas (≤1024) ================================== */
@media (max-width: 1024px) {
  .nav__menu {
    position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-4) var(--gutter) var(--space-6);
    background: rgba(248,245,239,0.98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--hairline);
    transform: translateY(-120%); opacity: 0; visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .nav.is-open .nav__menu { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__menu .nav__link { padding-block: var(--space-4); border-top: 1px solid var(--hairline); }
  .nav__menu .nav__link:first-child { border-top: 0; }
  .nav__toggle { display: grid; }
  .nav__actions .btn--nav-cta { display: none; }
}

/* ===== Large phone (≤768) ========================================= */
@media (max-width: 768px) {
  :root { --section-y: clamp(3rem, 2.25rem + 3vw, 3.75rem); --section-y-end: clamp(3rem, 2.25rem + 3vw, 3.75rem); }

  /* ===== Mobile hero — handcrafted vertical rhythm & proportions =====
     Generous space under the nav, then a deliberate increasing cadence:
     heading →16–20px→ subtitle →24px→ description →32px→ CTA →36–40px→ image */
  .hero { padding-top: calc(74px + clamp(1.75rem, 8vw, 3rem)); padding-bottom: var(--section-y-end); }
  /* The decorative blue blob is a fixed 460px radial — too large/ messy on a phone */
  .hero__bg { display: none; }
  .hero__grid { gap: clamp(2.25rem, 8vw, 2.5rem); }
  /* Contained image with rounded corners + soft shadow — same treatment as The Opportunity */
  .hero__media { min-height: 0; aspect-ratio: 4 / 3; }
  /* Favour the top of the collage so the lead figure's head keeps headroom (crop from bottom) */
  .hero__media .media__img { object-position: center top; }

  /* Centered hero copy on mobile (heading, subtitle, description, CTA) */
  .hero__copy { text-align: center; }
  .hero__title { letter-spacing: -0.02em; }
  .hero__line--lead > span { font-size: clamp(1.85rem, 6.8vw, 2.35rem); line-height: 1.1; }
  .hero__line--sub { margin-top: clamp(0.75rem, 3vw, 1rem); }
  .hero__line--sub > span { font-size: clamp(1.15rem, 4.4vw, 1.5rem); line-height: 1.25; }

  .hero__sub { margin-top: var(--space-5); max-width: 40ch; margin-inline: auto; line-height: 1.6; }
  .hero__cta { margin-top: var(--space-6); flex-direction: column; align-items: stretch; }
  /* CTA label sized to fit on one line across phones */
  .hero__cta .btn { width: 100%; min-height: 54px; white-space: normal; line-height: 1.25;
    font-size: clamp(0.66rem, 3.25vw, 0.9rem); padding-block: 0.9rem; padding-inline: 1rem; box-shadow: var(--shadow-md); }

  .section__head { margin-bottom: var(--space-6); }
  .stats-row { grid-template-columns: repeat(2, 1fr); margin-top: var(--space-6); }
  .stats-row--six { grid-template-columns: repeat(2, 1fr); }
  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .revwall { grid-template-columns: 1fr; }
  .plates { grid-template-columns: 1fr 1fr; }
  .mediawall__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ===== Phone (≤560) =============================================== */
@media (max-width: 560px) {
  /* Keep the team 2-up so 20 profiles don't become an endless single column */
  .tm-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .outcomes { grid-template-columns: 1fr; }
  /* Partner plates → single clean column on phones (long roles can't fit a 2-up cell) */
  .plates { grid-template-columns: 1fr; }
  .plate { min-height: 0; padding: var(--space-5) var(--space-6); }
  .mediawall__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .contact__panel { padding: var(--space-6) var(--space-5); }
  /* Cookie banner: actions row was flex-shrink:0, so its 3 nowrap buttons
     overflowed past the banner's own edge instead of wrapping. Let it wrap
     onto its own full-width row so every button stays on-screen. */
  .cookie { padding: var(--space-4); }
  .cookie__banner { flex-direction: column; align-items: stretch; padding: var(--space-4); }
  .cookie__actions { flex: 1 1 100%; width: 100%; }
  .cookie__actions .btn { flex: 1 1 auto; min-width: 0; }
}

/* ===== Small phone (≤400) ========================================= */
@media (max-width: 400px) {
  .stats-row { grid-template-columns: 1fr; }
  .stats-row--six { grid-template-columns: 1fr; }
  .mediawall__grid { grid-template-columns: 1fr; }
}