/* =========================================================
   Responsive rules for the inner-page components defined in
   components.css. (Homepage component media queries live
   alongside their base rules in style.css, unchanged.)
========================================================= */

@media (max-width: 900px){
  .page-hero-inner{ grid-template-columns: 1fr; }
  .page-hero .framed-media,
  .page-hero .mockup-wrap{ max-width: 520px; }

  .story-grid{ grid-template-columns: 1fr; }
  .story-media .framed-media{ max-width: 520px; margin: 0 auto; aspect-ratio: 4/2.6; }

  .contact-layout{ grid-template-columns: 1fr; }

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

@media (max-width: 700px){
  .page-hero{ padding-top: 128px; }
  .contact-info-list{ gap: 20px; }
}

@media (max-width: 560px){
  .page-breadcrumb{ font-size: 11.5px; }
  .contact-form-panel{ padding: 26px; }

  .feature-grid{ grid-template-columns: 1fr; }
  .service-showcase-cap{ flex-direction: column; align-items: flex-start; }
}