/* Breakpoints from design.json
   mobile: 0-639px
   tablet: 640-1023px
   desktop: 1024px and above */

/* ---------- Mobile refinements ---------- */
@media (max-width: 639px) {
  :root {
    --section-space: 48px;
    --page-gutter: 16px;
  }

  .brand img {
    height: 44px;
  }

  .header-inner {
    gap: var(--space-sm);
    min-height: 64px;
    padding-block: 10px;
  }

  .header-cta {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 0.8125rem;
  }

  .hero-center {
    gap: var(--space-md);
    padding-bottom: var(--space-xl);
  }

  .hero-center .cluster,
  .quote-section .cluster,
  .clearing-intro .cluster,
  .page-hero .cluster {
    width: 100%;
  }

  .hero-center .cluster .btn,
  .quote-section .cluster .btn,
  .clearing-intro .cluster .btn {
    flex: 1 1 12rem;
  }

  .page-hero {
    padding-block: var(--space-xl) var(--space-md);
  }

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

  .reach-tile {
    padding: var(--space-md) var(--space-sm);
  }

  .reach-map-frame iframe,
  .reach-map-placeholder {
    min-height: 240px;
    height: 240px;
  }

  .quote-points li {
    padding: var(--space-sm) var(--space-md);
  }

  .service-focus-grid,
  .cargo-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    gap: var(--space-lg);
  }
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  :root {
    --page-gutter: 32px;
    --section-space: 64px;
  }

  .brand img {
    height: 60px;
  }

  .form-grid,
  .customer-list,
  .about-gallery-grid,
  .reach-grid,
  .service-offerings {
    grid-template-columns: 1fr 1fr;
  }

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

  .field-span {
    grid-column: 1 / -1;
  }

  .grid-2,
  .grid-3,
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .cargo-layout,
  .audience-layout,
  .overview-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
  }

  .pillars-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .split,
  .clearing-layout,
  .quote-layout,
  .contact-layout,
  .reach {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .reach-map-frame iframe,
  .reach-map-placeholder {
    min-height: 300px;
    height: 300px;
  }

  .header-inner {
    grid-template-areas:
      "brand toggle"
      "nav nav"
      "cta cta";
  }

  .header-cta {
    width: auto;
    justify-self: start;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  :root {
    --page-gutter: 48px;
    --section-space: 80px;
  }

  .brand img {
    height: 72px;
  }

  .header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding-block: 12px;
  }

  .site-nav {
    margin-inline: auto;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .header-cta {
    width: auto;
  }

  .nav-toggle {
    display: none;
  }

  .js .site-nav,
  .site-nav {
    display: block;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .nav-link[aria-current="page"] {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--color-brand-blue);
    border-radius: 0;
  }

  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
  }

  .nav-dropdown-toggle {
    display: none;
  }

  .nav-dropdown-head {
    display: block;
  }

  .nav-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    display: none;
    min-width: 280px;
    padding: var(--space-sm);
    padding-left: var(--space-sm);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
  }

  .nav-dropdown:hover .nav-submenu,
  .nav-dropdown:focus-within .nav-submenu {
    display: grid;
  }

  .nav-submenu a {
    border-radius: var(--radius-sm);
  }

  .nav-submenu a[aria-current="page"] {
    box-shadow: none;
    background: var(--color-blue-soft);
  }

  .split,
  .cta-band,
  .clearing-layout,
  .quote-layout,
  .contact-layout,
  .reach {
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    align-items: center;
  }

  .split-portrait {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  }

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

  .reach-map-frame iframe,
  .reach-map-placeholder {
    min-height: 380px;
    height: 380px;
  }

  .quote-section {
    display: grid;
    align-items: center;
    min-height: 640px;
  }

  .media-frame-portrait {
    aspect-ratio: 4 / 5;
  }

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

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

  .cargo-layout {
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-3xl);
  }

  .audience-layout,
  .overview-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-3xl);
  }

  .overview-media .media-frame {
    min-height: 360px;
    aspect-ratio: 5 / 4;
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
    align-items: start;
  }
}

/* ---------- Below desktop: shared ---------- */
@media (max-width: 1023px) {
  .media-frame-portrait,
  .media-frame-banner {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .nav-submenu a .badge {
    margin-left: auto;
  }

  .quote-section {
    min-height: 0;
  }

  .header-cta {
    display: none;
  }

  /* Hamburger menu on all pages, including the homepage overlay header */
  .site-header.is-overlay .nav-toggle {
    display: inline-flex;
  }

  .js .site-header.is-overlay .site-nav {
    display: none;
  }

  .js .site-header.is-overlay .site-nav.is-open {
    display: block;
  }

  .nav-submenu {
    display: none;
  }

  .nav-dropdown.is-open .nav-submenu {
    display: grid;
  }
}