/* STYX V2 — mobile */

@media (max-width: 1099px) {
  :root {
    --header-h: 64px;
    --fs-h1: clamp(2.35rem, 7.5vw, 2.85rem);
    --fs-h2: clamp(1.875rem, 5.5vw, 2.35rem);
  }
}

@media (max-width: 899px) {
  .hero {
    min-height: auto;
    padding-top: 1.5rem;
    padding-bottom: 0;
  }

  .hero-grid {
    gap: 1.75rem;
  }

  .hero__copy {
    order: 1;
    max-width: none;
  }

  .hero__media {
    order: 2;
    margin: 0 calc(-1 * var(--pad-x));
    border-radius: 0;
    min-height: 48svh;
  }

  .hero__media img {
    min-height: 48svh;
    max-height: 55svh;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__actions .btn--text {
    justify-content: flex-start;
  }

  .meta-strip__inner {
    grid-template-columns: 1fr 1fr;
  }

  .meta-strip__inner p {
    text-align: left;
    padding: 1.1rem 0.85rem;
  }

  .meta-strip__inner p:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .meta-strip__inner p:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .meta-strip__inner p:nth-child(2),
  .meta-strip__inner p:nth-child(4) {
    border-right: 0;
  }

  .products__head h2,
  .mfg__copy h2,
  .b2b__head h2,
  .feature__copy h2,
  .about__inner h2,
  .inquiry__copy h2 {
    max-width: none;
  }

  .cat--large {
    min-height: 280px;
  }

  .bleed img {
    height: min(58vh, 520px);
  }

  .feature__media {
    order: -1;
  }

  .feature__media img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767px) {
  .products__grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  /* large then 2-up for smalls via nested approach: use grid when 3 cats */
  .products__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }

  .cat--large {
    grid-column: 1 / -1;
    min-height: 260px;
  }

  .cat--small {
    min-height: 180px;
  }

  .mfg__media img {
    aspect-ratio: 4 / 3;
  }

  .principles li,
  .b2b__grid li,
  .process__steps li {
    padding-block: 1.25rem;
  }

  .inquiry-form .btn {
    min-height: 54px;
  }

}

@media (max-width: 429px) {
  .hero__media img {
    min-height: 45svh;
  }

  .meta-strip__inner p {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
}