/* ==========================================================================
   Breakpoints, named for the content that stops fitting.
   Mobile is designed, not stacked.
   ========================================================================== */

/* 1100px — the nav links stop fitting beside the wordmark. */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__side .nav__ext { display: none; }
  /* The bar is only a mark and two controls at this width; give them room
     rather than letting them sit against each other. */
  .nav__inner { gap: var(--sp-5); }
  .nav__side { gap: var(--sp-4); }

  /* Type over image. Side by side, the headline and the photo were each
     too narrow to carry the screen. */
  .hero__main { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }
  .hero__media { justify-items: start; }
  .hero__media .frame { width: min(100%, 300px); max-height: min(34svh, 320px); }
  .intro__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .contact__grid { grid-template-columns: 1fr; }
}

/* 900px — two-column compositions lose their minimum width. The two worlds
   become one immersive branch followed by the other, media first. */
@media (max-width: 900px) {
  .world__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .world--edu .world__media { order: 0; }

  .work__item,
  .work__item:nth-child(even) { grid-template-columns: 1fr; }
  .work__item:nth-child(even) .work__media { order: 0; }

  .paths__grid { grid-template-columns: 1fr; }
  .path + .path { border-left: 0; }
  .path { min-height: clamp(20rem, 60vw, 26rem); }

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

  .service { grid-template-columns: 3rem minmax(0, 1fr); }
  .service__desc { grid-column: 2; }

  .philosophy__row,
  .philosophy__row--solve { grid-template-columns: 1fr; gap: var(--sp-2); }
  .philosophy__row--solve .philosophy__word { order: 0; }
  /* Offsets kept, scaled to the narrower column. */
  .philosophy__row--think { justify-self: start; margin-left: 12%; }
  .philosophy__row--solve { justify-self: end; text-align: right; }
}

/* 800px — the gallery leaves its editorial grid and becomes a large vertical
   sequence, which is the right shape for a phone rather than a shrunk
   masonry. Alternate items sit inset so the column still has rhythm. */
@media (max-width: 800px) {
  .gallery__item:nth-child(even) { padding-left: clamp(1rem, 8vw, 4rem); }

  /* Name and arrow share the first line; the keywords sit under the name
     rather than pushing the arrow down a row. */
  .branch { grid-template-columns: 1fr auto; row-gap: var(--sp-1); }
  .branch__name { grid-column: 1; grid-row: 1; }
  .branch__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .branch__meta { grid-column: 1; grid-row: 2; }
}

/* 620px — single-column everything; type steps down a notch. */
@media (max-width: 620px) {
  /* Stacked, the two buttons each take the full width rather than
     wrapping into an uneven pair. */
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .hero__top { flex-direction: column; gap: var(--sp-2); }
  .hero__est { text-align: left; }

  .contact__pair { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* Two columns and two rules: one under the brand block, one above the
     bottom bar. A single divider made the whole footer one long ladder. */
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); }
  .footer__grid > :first-child {
    grid-column: 1 / -1;
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--hairline);
  }
  .footer__bar { flex-direction: column; }
  .footer__bar a { margin-left: 0; margin-right: var(--sp-5); }

  .audience__item { grid-template-columns: 1fr; gap: var(--sp-2); }
  .why__body { padding-left: 0; }
  .why__row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }

  .lightbox__foot { padding-bottom: var(--sp-6); }
}

/* 380px — the tightest layout supported. */
@media (max-width: 380px) {
  .service { grid-template-columns: 1fr; gap: var(--sp-2); }
  .service__desc { grid-column: 1; }
  .work__facts div { flex-direction: column; gap: var(--sp-1); }
}

/* Coarse pointers: motion that depends on hover has nothing to respond to,
   and the heavier reveals are wasted work on a phone. */
@media (hover: none) {
  .branch:hover, .service:hover, .audience__item:hover { padding-inline: 0; }
}