@media (max-width: 1080px) {
  .desktop-nav {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  .mobile-panel {
    display: flex;
  }
  .nav-cta {
    display: none;
  }
  .site-header {
    padding: 0 28px;
  }
  .hero h1 {
    letter-spacing: -2px;
  }
  .split-section,
  .dark-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .image-stack {
    min-height: auto;
  }
  .stack-main {
    width: 100%;
    height: 430px;
  }
  .stack-card {
    position: relative;
    width: 70%;
    height: 260px;
    margin-top: -80px;
  }
  .product-row,
  .products-grid,
  .recipe-grid,
  .value-grid,
  .pillars,
  .timeline {
    grid-template-columns: 1fr 1fr;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .cta-strip {
    display: block;
  }
  .cta-strip .btn {
    margin-top: 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
@media (max-width: 720px) {
  .container {
    width: min(100% - 28px, 1180px);
  }
  .section-space {
    padding: 78px 0;
  }
  .section-space-sm {
    padding: 48px 0 76px;
  }
  .site-header {
    height: 66px;
  }
  .mobile-panel {
    top: 66px;
  }
  .hero {
    min-height: 92vh;
  }
  .hero-shade {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.24),
      rgba(0, 0, 0, 0.719)
    );
  }
  .hero h1,
  .page-hero h1 {
    font-size: 44px;
    line-height: 1.02;
    letter-spacing: -1.8px;
  }
  .hero-text,
  .page-hero p {
    font-size: 16px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .btn {
    width: 100%;
    padding: 0 18px;
  }
  .section-copy h2,
  .section-head h2,
  .dark-feature h2,
  .cta-strip h2 {
    font-size: 38px;
    letter-spacing: -1.4px;
  }
  .section-head {
    display: block;
    margin-bottom: 34px;
  }
  .product-row,
  .products-grid,
  .recipe-grid,
  .value-grid,
  .pillars,
  .timeline,
  .metrics,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .product-img,
  .recipe-img {
    height: 300px;
  }
  .metric {
    padding: 30px 22px;
  }
  .dark-grid {
    gap: 38px;
  }
  .floating-card,
  .contact-form,
  .contact-card,
  .value-card,
  .timeline-item {
    padding: 28px;
  }
  .cta-strip {
    padding: 36px 24px;
  }
  .page-hero {
    padding: 128px 0 64px;
  }
  .contact-card img {
    height: 220px;
  }
  .footer-bottom {
    display: block;
  }
  .footer-bottom span {
    display: block;
    margin-top: 12px;
  }
  .brand {
    letter-spacing: 3px;
  }
  .quality-bars div {
    grid-template-columns: 1fr;
  }
  .stack-main {
    height: 330px;
  }
  .stack-card {
    width: 86%;
    height: 210px;
  }
  .scroll-cue {
    display: none;
  }
}