/*
 * QUICKFOOT responsive layer — mobile-first.
 * Base rules target compact viewports; layout is progressively enhanced at
 * 35.0625rem (tablet) and 56.3125rem (desktop).
 */

.wrap {
  width: min(calc(100% - 32px), var(--max));
}

.site-header {
  padding: 17px 16px;
}

.main-nav {
  display: none;
  position: absolute;
  inset: 100% 0 auto;
  background: var(--qf-color-deep-navy);
  padding: 24px;
  flex-direction: column;
  align-items: stretch;
}

.main-nav.open {
  display: flex;
}

.main-nav > a {
  min-height: 44px;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hero {
  min-height: 720px;
}

.hero h1 {
  font-size: 50px;
}

.hero-content > p {
  font-size: 16px;
}

.hero-foot span:nth-child(2) {
  display: none;
}

.section {
  padding: 90px 0;
}

.section-head,
.philosophy-grid,
.custom-grid {
  grid-template-columns: 1fr;
  gap: 45px;
}

.section-head {
  margin-bottom: 42px;
}

.section h2,
.philosophy h2 {
  font-size: 39px;
}

.product-grid,
.values {
  grid-template-columns: 1fr;
}

.product {
  min-height: auto;
  padding: 18px;
}

.product-visual {
  height: 210px;
}

.philosophy {
  padding: 90px 0;
}

.custom-card,
.custom-copy {
  padding: 30px;
}

.custom-card {
  min-height: 510px;
}

.values h3 {
  margin-top: 35px;
}

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

.button {
  width: 100%;
}

.contact {
  padding: 100px 0;
}

.contact h2 {
  font-size: 43px;
}

.footer-top {
  align-items: flex-start;
  gap: 25px;
  flex-direction: column;
}

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

.footer-bottom {
  flex-direction: column;
  gap: 10px;
}

.footer-top > p {
  font-size: 17px;
}

@media (min-width: 35.0625rem) {
  .wrap {
    width: min(calc(100% - 48px), var(--max));
  }

  .site-header {
    padding: 24px max(24px, calc((100vw - var(--max)) / 2));
  }

  .hero h1 {
    font-size: clamp(54px, 7.2vw, 104px);
  }

  .hero-content > p {
    font-size: clamp(17px, 1.6vw, 22px);
  }

  .hero-foot span:nth-child(2) {
    display: inline;
  }

  .actions {
    align-items: center;
    flex-direction: row;
  }

  .button {
    width: auto;
  }

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

  .product {
    padding: 25px;
  }

  .product-visual {
    height: 280px;
  }

  .custom-card,
  .custom-copy {
    padding: 42px;
  }

  .footer-bottom {
    flex-direction: row;
  }
}

@media (min-width: 56.3125rem) {
  .main-nav {
    display: flex;
    position: static;
    background: transparent;
    padding: 0;
    flex-direction: row;
    align-items: center;
  }

  .menu-toggle {
    display: none;
  }

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

  .product {
    min-height: 600px;
  }

  .product-visual {
    height: 220px;
  }

  .section-head {
    grid-template-columns: 1.45fr 0.55fr;
    gap: 80px;
    margin-bottom: 64px;
  }

  .philosophy-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 120px;
  }

  .custom-grid {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 0;
  }

  .custom-card,
  .custom-copy {
    padding: 64px;
  }

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

  .footer-top {
    align-items: center;
    flex-direction: row;
  }
}