/* ==========================================================================
   RESPONSIVE — loaded last, so it wins the cascade. Most sizing in this
   system is already fluid via clamp()/container queries in the files above;
   this file only holds structural changes (grid → single column, hiding).
   ========================================================================== */

@media (max-width: 980px){
  .work-grid{ grid-template-columns: 1fr; }
  .work-grid--secondary{ grid-template-columns: 1fr 1fr; }
  .impact-themes{ grid-template-columns: 1fr; gap: var(--story-gap); }
  .impact-grid--labels{ flex-direction: column; align-items: center; gap: var(--card-gap); }
  .overview-row{ grid-template-columns: 1fr; gap: .3rem; }
  .logo-strip{ justify-content: center; }
  .hero-grid-v2{ grid-template-columns: 1fr; }
  .overview-cards{ grid-template-columns: 1fr; }
  .principle-grid{ grid-template-columns: 1fr 1fr; }
  .principle-grid--5col{ grid-template-columns: 1fr 1fr; }
  .compare-grid{ grid-template-columns: 1fr; }
  .component-gallery{ grid-template-columns: repeat(2, 1fr); }
  .component-gallery--3col{ grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 760px){
  .story-section--split .container{ grid-template-columns: 1fr !important; }
  .two-col-media{ grid-template-columns: 1fr !important; }
  .two-col{ grid-template-columns: 1fr !important; }
  .story-section--split .story-media{ position: static !important; margin-top: var(--card-gap); }
}

@media (max-width: 640px){
  .cta-row{ flex-direction: column; align-items: stretch; }
  .decision, .example-card{ padding: 1.2rem 1.4rem; }
  .component-gallery--3col{ grid-template-columns: 1fr; max-width: 260px; margin-inline: auto; }
  .principle-grid--5col{ grid-template-columns: 1fr; }
  .work-grid--secondary{ grid-template-columns: 1fr; }

  /* Career highlights: strict 2x2 grid instead of an uneven flex wrap
     (card widths differ with label length, so 1-2-1 rows would otherwise show up). */
  .impact-grid--wide{
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--card-gap) var(--card-gap); justify-items: center;
  }
}