/* Project breakpoints: 1200, 1024, 768, 480 and 375px */
@media (max-width: 75rem) {
  :root { --container-wide: 70rem; }
}

@media (max-width: 64rem) {
  :root { --container-wide: 60rem; }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-header { min-height: 5rem; }
  .site-header__brand img { width: 8.5rem; }
  .menu-toggle { display: inline-flex; }

  .site-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    padding: var(--space-6) var(--gutter) var(--space-7);
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
  }

  .js .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100svh - 5rem);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }

  .js .site-header.is-menu-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav__list { align-items: stretch; flex-direction: column; gap: 0; }
  .site-nav__list li { border-bottom: 1px solid var(--color-border); }
  .site-nav__list a { display: block; padding-block: 0.9rem; font-size: var(--text-base); }
  .site-nav__list a::after { display: none; }
  .site-nav__cta { width: 100%; min-height: 3rem; }
  .hero { min-height: calc(100svh - 5rem); }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.72fr); gap: var(--space-7); }
  .hero__actions { align-items: flex-start; flex-direction: column; }
  .business-problems__intro { gap: var(--space-7); }
  .digital-partner__inner { grid-template-columns: minmax(0, 0.8fr) minmax(28rem, 1.2fr); gap: var(--space-7); }
  .service-pillars__intro { gap: var(--space-7); }
  .service-pillar { min-height: 32rem; }
  .why-workmates__inner { grid-template-columns: minmax(0, 0.72fr) minmax(28rem, 1.28fr); gap: var(--space-7); }
  .process-overview__intro { gap: var(--space-7); }
  .process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .process-steps li { min-height: 17rem; border-top: 1px solid var(--color-navy); border-bottom: 1px solid var(--color-border); }
  .process-steps li:nth-child(4) { border-left: 1px solid var(--color-border); }
  .client-fit__inner { grid-template-columns: minmax(0, 0.8fr) minmax(28rem, 1.2fr); gap: var(--space-7); }
  .site-footer__main { grid-template-columns: minmax(14rem, 0.55fr) minmax(30rem, 1.45fr); gap: var(--space-7); }
}

@media (max-width: 48rem) {
  :root { --gutter: 1.25rem; --space-section: 4.5rem; }
  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero__content { max-width: 42rem; }
  .hero__actions { gap: var(--space-4); }
  .hero-visual { width: 100%; max-width: 42rem; min-height: 25rem; }
  .hero-visual img { height: 25rem; }
  .business-problems__intro { grid-template-columns: 1fr; align-items: start; }
  .problem-conclusion { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6); }
  .digital-partner__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .digital-partner__statement { position: static; }
  .service-pillars__intro { grid-template-columns: 1fr; align-items: start; }
  .service-pillars__grid { grid-template-columns: 1fr; border-bottom: 0; }
  .service-pillar { min-height: auto; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
  .service-pillar__number { margin-block-end: var(--space-6); }
  .service-pillar .text-link { margin-block-start: var(--space-5); }
  .why-workmates__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .why-workmates__intro { position: static; }
  .process-overview__intro { grid-template-columns: 1fr; align-items: start; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps li { min-height: auto; padding-block: var(--space-6); border-left: 1px solid var(--color-border); }
  .process-steps__number { margin-block-end: var(--space-5); }
  .client-fit__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .final-cta__inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .site-footer__main { grid-template-columns: 1fr; gap: var(--space-8); }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-7); }
  .layout-example { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
  .action-row { align-items: stretch; flex-direction: column; }
  .action-row .button { width: 100%; }
  .action-row .text-link { align-self: flex-start; margin-block-start: var(--space-2); }
}

@media (max-width: 30rem) {
  :root { --gutter: 1rem; }
  .hero__actions .button { width: 100%; }
  .hero-visual { min-height: 21rem; box-shadow: .75rem .75rem 0 rgba(11, 31, 51, 0.08); }
  .hero-visual img { height: 21rem; }
  .problem-list li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); }
  .problem-conclusion { padding: var(--space-5); }
  .partner-principles { grid-template-columns: 1fr; }
  .partner-principles article { min-height: auto; }
  .partner-principles span { margin-bottom: var(--space-7); padding-bottom: 0; }
  .why-list li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); }
  .fit-principles li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); }
  .client-fit__note { padding: var(--space-4); }
  .final-cta__action .button { width: 100%; }
  .site-footer__nav { grid-template-columns: 1fr; }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; }
  .swatch-grid { grid-template-columns: 1fr; }
  .logo-surface { padding: var(--space-5); }
}

@media (max-width: 23.4375rem) {
  .button { width: 100%; }
}