/* ============================================================
   TABLET LANDSCAPE  ≤ 1200px
   ============================================================ */
@media (max-width: 1200px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero {
    gap: 28px;
  }

  .network-cards {
    gap: 110px;
    padding: 18px;
  }
}

/* ============================================================
   TABLET  ≤ 980px
   ============================================================ */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 56px 5% 44px;
    gap: 36px;
  }

  .hero-visual {
    min-height: 400px;
  }

  .network-cards {
    gap: 80px;
    padding: 14px;
  }

  .section-head,
  .story-block,
  .about-founder,
  .about-process,
  .contact-grid,
  .footer-main {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 64px 5%;
  }

  .metric-grid,
  .card-grid,
  .solution-grid,
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-process-visual,
  .about-founder-visual {
    min-height: 420px;
  }

  .about-process-copy h2,
  .about-founder-copy h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
  }

  .parallax-band {
    background-attachment: scroll;
    min-height: auto;
    padding: 64px 5%;
  }

  .page-hero {
    background-attachment: scroll;
  }

  .section-head {
    gap: 28px;
  }
}

/* ============================================================
   MOBILE  ≤ 720px
   ============================================================ */
@media (max-width: 720px) {
  /* --- Nav --- */
  .menu-button { display: block; }

  .site-nav {
    position: fixed;
    inset: 74px 0 auto 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 5% 20px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    z-index: 49;
  }

  body.menu-open .site-nav { display: flex; }
  .site-nav a { padding: 11px 0; font-size: 14px; }

  /* --- Hero --- */
  .hero,
  .page-hero {
    background-attachment: scroll;
  }

  .hero {
    padding: 44px 5% 36px;
    gap: 28px;
  }

  .hero-visual {
    min-height: 300px;
  }

  .hero-note {
    font-size: 12px;
  }

  /* --- Network SVG cards --- */
  .network-cards {
    gap: 56px;
    padding: 10px;
  }

  .network-card {
    padding: 8px 10px;
  }

  .network-card .card-label {
    display: none;
  }

  .network-card strong {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .network-card p {
    display: none;
  }

  /* --- Typography --- */
  h1 {
    font-size: clamp(1.5rem, 5.5vw, 2.4rem);
  }

  h2 {
    font-size: clamp(1.6rem, 5.5vw, 2.6rem);
  }

  /* --- Sections --- */
  .section {
    padding: 48px 5%;
  }

  .section-head {
    gap: 14px;
    margin-bottom: 20px;
  }

  .parallax-band {
    background-attachment: scroll;
    padding: 52px 5%;
    min-height: auto;
  }

  .page-hero {
    min-height: 42vh;
    padding: 72px 5% 44px;
  }

  /* --- Grids --- */
  .metric-grid,
  .card-grid,
  .solution-grid,
  .values-grid,
  .principles-grid {
    grid-template-columns: 1fr;
  }

  .card,
  .solution-card,
  .value-card {
    min-height: 200px;
  }

  /* --- CTA rows --- */
  .hero-actions,
  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn,
  .cta-row .btn {
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  /* --- Download panel --- */
  .download-panel {
    grid-template-columns: 1fr;
  }

  /* --- Carousel --- */
  .carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 26px;
  }

  .slider { grid-auto-columns: 86%; }

  /* --- WhatsApp float --- */
  .whatsapp-float {
    left: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }

  /* --- About pages --- */
  .about-process-visual,
  .about-founder-visual {
    min-height: 320px;
  }

  .about-founder-copy {
    padding: 32px 24px;
  }

  .about-process-copy,
  .about-process-copy h2 {
    font-size: clamp(1.7rem, 5.5vw, 2.8rem);
  }

  .process-step-card {
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 16px;
  }

  .process-step-num {
    width: 48px;
    height: 48px;
    font-size: 14px;
  }

  /* --- Contact --- */
  .contact-panel {
    padding: 24px 20px;
  }

  /* --- Footer --- */
  .footer-main {
    grid-template-columns: 1fr;
    padding: 40px 5% 24px;
    gap: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 14px 5%;
  }

  /* --- FAQ --- */
  .faq-cta-band {
    padding: 52px 5%;
  }

  .faq-item summary {
    padding: 16px 18px;
    font-size: 14px;
  }

  .faq-answer {
    padding: 0 18px 18px;
    padding-top: 14px;
  }
}

/* ============================================================
   SMALL MOBILE  ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
  .site-header {
    padding: 14px 4%;
  }

  .hero {
    padding: 36px 4% 28px;
  }

  .hero-visual {
    min-height: 260px;
  }

  .network-svg {
    width: min(290px, 88%);
  }

  .network-cards {
    gap: 40px;
    padding: 8px;
  }

  .network-card {
    padding: 6px 8px;
  }

  .network-card strong {
    font-size: 12px;
    font-family: "DM Sans", Arial, sans-serif;
  }

  h1 {
    font-size: clamp(1.35rem, 6vw, 2rem);
  }

  h2 {
    font-size: clamp(1.4rem, 6vw, 2.2rem);
  }

  .metric strong {
    font-size: 34px;
  }

  .section {
    padding: 40px 4%;
  }

  .page-hero {
    padding: 64px 4% 36px;
  }

  .parallax-band {
    padding: 44px 4%;
  }

  .slide strong {
    font-size: 20px;
    margin-top: 32px;
  }

  .about-process-visual,
  .about-founder-visual {
    min-height: 280px;
  }

  .btn {
    min-height: 44px;
    font-size: 13px;
  }

  .footer-main {
    padding: 32px 4% 20px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .network-svg .flow-line,
  .network-svg .center-ring,
  .network-svg .center-accent,
  .whatsapp-float,
  .download-icon,
  .reveal {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .deliverables-carousel .slider-track,
  .auto-slider .slider-track {
    animation: none !important;
  }
}