/*
  Breakpoints referenced across the system:
  1440+  desktop wide   (default / no query)
  1280   laptop         max-width: 1280px
  980    tablet          max-width: 980px
  768    tablet small    max-width: 768px
  620    mobile          max-width: 620px
  390    mobile small    max-width: 390px

  Component-local rules live next to the component (layout.css / components.css / pages.css).
  This file holds cross-cutting breakpoint behaviour only.
*/

@media (max-width: 1280px) {
  .hero-copy { max-width: 900px; }
  .service-detail-body { gap: 50px; }
}

@media (max-width: 980px) {
  .service-row { grid-template-columns: 1fr; row-gap: 14px; align-items: flex-start; }
  .service-row .num { order: -1; }
  .service-arrow { justify-self: start; }
  .stat-grid { row-gap: 30px; }
}

@media (max-width: 768px) {
  .refs-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .marquee-item { font-size: 17px; }
  .value-item { grid-template-columns: 44px 1fr; gap: 16px; }
  .contact-grid { padding-bottom: 60px; }
}

@media (max-width: 390px) {
  .shell { width: min(calc(100% - 32px), var(--max)); }
  .hero h1 { font-size: 42px; line-height: 1.06; }
  .year-num { font-size: 50vw; }
  .footer-brand-block .brand img { height: 34px; }
}

/* Landscape phones: hero shouldn't eat the whole viewport height */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { height: auto; min-height: 100vh; padding-top: 90px; }
}