@layer responsive {
  /* Small phones → large phones: let hero CTAs share or fill the row */
  .hero__actions .btn {
    flex: 1 1 auto;
  }

  /* ---------- ≥ 480px ---------- */
  @media (min-width: 30rem) {
    .hero__actions .btn {
      flex: 0 0 auto;
    }

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

  /* ---------- ≥ 768px (tablet) ---------- */
  @media (min-width: 48rem) {
    .capabilities,
    .service-grid,
    .mv-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-grid--compact .service-card {
      grid-template-columns: 1fr;
      row-gap: var(--space-3);
      padding: var(--space-5);
    }

    .service-grid--compact .service-card__icon {
      grid-row: auto;
    }

    .service-grid--compact .service-card__arrow {
      display: grid;
    }

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

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

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

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

    .section-head--split {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--space-5);
    }

    .section-head--split > div {
      display: grid;
      gap: var(--space-4);
      max-width: 44rem;
    }

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

    /* Tablet: brand on its own row, three link columns wide enough for the email address. */
    .footer-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contact-aside {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
  }

  /* ---------- ≥ 1024px (desktop) ---------- */
  @media (min-width: 64rem) {
    :root {
      --header-h: 5rem;
      --header-scale: 0.825;
      --header-shift: -0.4375rem;
      --logo-h: 2.75rem;
    }

    .site-nav {
      display: block;
    }

    .site-header__cta {
      display: inline-flex;
    }

    .menu-toggle,
    .mobile-menu {
      display: none;
    }

    .hero__inner {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }

    .page-hero__inner {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .page-hero__visual {
      justify-self: end;
    }

    .capabilities {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-4);
    }

    .capability {
      grid-template-columns: 1fr;
      padding: var(--space-6) var(--space-5);
    }

    .capability__icon {
      grid-row: auto;
      margin-bottom: var(--space-3);
    }

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

    .service-card--detailed {
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: var(--space-5);
      align-items: start;
    }

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

    .story {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(3rem, 6vw, 6rem);
      align-items: start;
    }

    .story__visual {
      display: block;
      position: sticky;
      top: calc(var(--header-h) + var(--space-6));
    }

    .story__chapters {
      gap: 0;
    }

    .story-chapter {
      min-height: 62vh;
      align-content: center;
    }

    .journey-strip__list {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: var(--space-4);
    }

    .journey-strip__track,
    .journey-strip__progress {
      left: calc(100% / 12);
      right: calc(100% / 12);
      top: 1.75rem;
      bottom: auto;
      width: auto;
      height: 2px;
      margin-left: 0;
      margin-top: -1px;
    }

    .journey-strip__progress {
      background: linear-gradient(90deg, var(--color-blue-600), var(--color-cyan-500));
      transform-origin: left;
    }

    .js .journey-strip__progress {
      transform: scaleX(0);
    }

    .js .journey-strip.is-visible .journey-strip__progress {
      animation-name: bar-grow-x;
    }

    .journey-strip__step {
      grid-template-columns: 1fr;
      justify-items: center;
      align-content: start;
      row-gap: var(--space-1);
      text-align: center;
    }

    .journey-strip__marker {
      grid-row: auto;
      margin-bottom: var(--space-3);
    }

    .contact-layout {
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: var(--space-6);
    }

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

    .faq-layout {
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
      gap: clamp(2rem, 5vw, 5rem);
    }

    .faq-aside {
      position: sticky;
      top: calc(var(--header-h) + var(--space-6));
    }

    .legal-layout {
      grid-template-columns: 16rem minmax(0, 1fr);
      gap: clamp(3rem, 6vw, 6rem);
    }

    .legal-toc {
      position: sticky;
      top: calc(var(--header-h) + var(--space-6));
    }

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

    .footer-brand {
      grid-column: auto;
    }
  }

  /* ---------- ≥ 1280px ---------- */
  @media (min-width: 80rem) {
    .service-grid--compact {
      gap: var(--space-5);
    }

    .cta-band__panel {
      padding-inline: var(--space-10);
    }
  }

  /* ---------- Desktop pointer: dim sibling services ---------- */
  @media (hover: hover) and (pointer: fine) and (min-width: 64rem) {
    .service-grid--dim:has(.service-card:hover) .service-card:not(:hover) {
      opacity: 0.55;
    }
  }

  /* ---------- Phones: lighter ambient motion and no GPU-heavy blur ---------- */
  @media (max-width: 47.99rem) {
    .hero__glyphs li,
    .hero__nodes-drift,
    .hero__waves path {
      animation: none;
    }

    .editor {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: rgb(8 16 50 / 0.94);
    }
  }

  /* ---------- Touch: no hover-lift residue after taps ---------- */
  @media (hover: none) {
    .capability:hover,
    .service-card:hover,
    .value:hover,
    .tech-tile:hover,
    .feature-item:hover,
    .mv-card:hover {
      transform: none;
    }
  }
}