/* ==========================================================================
   Responsive — each range re-composes the layout rather than shrinking it.
   Ranges: <=1180 drawer nav · <=1024 spreads unstack · <=900 process/criteria
   ·<=640 phone · <=380 small phone
   ========================================================================== */

@media (max-width: 1180px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .header__actions .btn--line { display: none; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- <= 1024px : the asymmetric spreads become single columns ------------- */

@media (max-width: 1024px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4rem); }
  .about__statement { position: static; }

  /* Side by side, the statement and its photographs keep the spread's feel */
  .about__media {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    gap: 1rem;
    padding: 0;
  }

  .about__media-inset { position: static; width: 100%; border: 0; }

  .chapter__head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .chapter__head--split .chapter__lead { margin-top: var(--space-4); }

  .testimonial__foot { grid-template-columns: minmax(0, 1fr); }
  .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- <= 900px : the process turns vertical -------------------------------- */

@media (max-width: 900px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero__credit { display: none; }

  /* The copy now covers most of the frame, so the photograph drops back
     further behind it than it needs to on a wide screen. */
  .hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(4, 10, 19, 0.78) 0%,
      rgba(4, 10, 19, 0.52) 12%,
      rgba(4, 10, 19, 0.88) 34%,
      rgba(4, 10, 19, 0.96) 100%
    );
  }

  /* Cover on a narrow, tall box magnifies whatever is at the centre of a
     wide backdrop — usually a face. Push it down further still. */
  .chapter--photo .chapter__veil {
    background: linear-gradient(
      to bottom,
      rgba(4, 10, 19, 0.96) 0%,
      rgba(4, 10, 19, 0.93) 45%,
      rgba(4, 10, 19, 0.97) 100%
    );
  }

  /* The stages stack into a ruled list; each keeps its own marker */
  .process { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stage { padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
  .stage::before { inset-inline: 0; }

  .feature__img { aspect-ratio: 4 / 3; }
  .feature__body-inner { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .feature__meta { text-align: start; flex-direction: row; align-items: baseline; gap: 0.75rem; }
}

/* ---- <= 640px : phone ------------------------------------------------------ */

@media (max-width: 640px) {
  .header__actions .btn--primary { display: none; }

  .brand__mark { height: 2.5rem; }
  .brand__wordmark { height: 1.6rem; }

  .hero { min-height: min(92svh, 760px); padding-block: 7rem 2.5rem; }
  .hero__title { max-width: none; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }

  .about__media { grid-template-columns: minmax(0, 1fr); }
  .about__media-inset { display: none; }

  .criteria { grid-template-columns: minmax(0, 1fr); }

  /* Three per row rather than two: seventeen logos in a two-wide column
     turns the wall into a list. */
  .wall { column-gap: 1.5rem; row-gap: 2rem; }
  .wall img { width: 6.25rem; height: 2.6rem; }

  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__bar { justify-content: flex-start; }

  .project { flex-basis: min(74vw, 17rem); }

  /* The label would sit over content at this width */
  .whatsapp-float { padding: 0.55rem; gap: 0; }
  .whatsapp-float__label { display: none; }
  .whatsapp-float__icon { width: 2.65rem; height: 2.65rem; }
  .whatsapp-float__icon svg { width: 1.45rem; height: 1.45rem; }

  .community__cta .btn { flex-wrap: wrap; width: 100%; row-gap: 0.15rem; }
  .community__number { padding-inline-start: 0; border-inline-start: 0; }
}

@media (max-width: 380px) {
  :root { --fs-body: 1rem; }
  .brand__wordmark { display: none; }
  .project { flex-basis: 80vw; }
}

/* ---- Coarse pointer -------------------------------------------------------- */

@media (hover: none) {
  .value::before { opacity: 0.4; }
}

@media print {
  .header, .whatsapp-float, .gallery__foot, .hero__credit { display: none !important; }
  body { background: #fff; color: #000; }
}