@media (hover: none) {
  .collection-card:hover img,
  .core-card:hover,
  .why-grid article:hover { transform: none; }
}

@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .site-header { height: 72px; padding-inline: 22px; }
  .nav { top: 72px; max-height: calc(100vh - 72px); overflow-y: auto; gap: 0; }
  .nav a { min-height: 48px; display: flex; align-items: center; padding: 0 4px; }
  .nav .nav-cta { justify-content: space-between; padding-inline: 18px; margin: 10px 0 0; }
  .menu-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .button { min-height: 48px; }
  .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .section-heading { gap: 20px; }
  .collection-card,
  .core-card,
  .why-grid article { content-visibility: auto; contain-intrinsic-size: 1px 360px; }
}

@media (max-width: 700px) {
  .brand { width: 132px; }
  .section { padding: 72px 20px; }
  .eyebrow { margin-bottom: 22px; font-size: 10px; line-height: 1.5; }
  .section-heading { margin-bottom: 36px; }
  .section-heading h2,
  .intro h2 { font-size: clamp(39px, 11.5vw, 50px); line-height: 1; }

  .hero { height: auto; min-height: 0; padding-bottom: 48px; }
  .hero-content {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    max-width: none;
    padding: 118px 20px 0;
    transform: none;
  }
  .hero h1 { max-width: 11ch; font-size: clamp(50px, 15vw, 64px); line-height: .94; }
  .hero-copy { max-width: 36ch; margin: 24px 0; font-size: 16px; }
  .hero-actions { width: 100%; gap: 12px; }
  .hero-actions .button { justify-content: space-between; width: 100%; max-width: 320px; }
  .hero-actions .text-link { width: fit-content; }
  .hero-panels {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% - 40px);
    height: 390px;
    margin: 10px auto 0;
    opacity: 1;
    transform: none;
  }
  .hero-static-panels { object-position: center; }
  .hero-shade { background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.52) 55%, rgba(255,255,255,.1) 100%); }

  .intro-grid { gap: 36px; }
  .intro-copy { font-size: 16px; }
  .stats { grid-template-columns: 1fr; gap: 0; }

  .collection-grid { gap: 10px; }
  .collection-card,
  .collection-card.featured { height: 390px; }
  .card-overlay { padding: 22px 18px; gap: 14px; }
  .card-overlay h3 { font-size: 19px; }

  .core-card { min-height: 370px; padding: 16px; }
  .core-swatch { height: 215px; min-height: 215px; }

  .tech-visual { min-height: 430px; }
  .tech-content { padding: 70px 20px; }
  .tech-features { grid-template-columns: 1fr; }
  .tech-learn { width: 100%; justify-content: space-between; }

  .application-strip > div { min-height: 115px; padding: 14px; }
  .application-image { height: 300px; }
  .process { gap: 42px; }
  .steps li { grid-template-columns: 44px 1fr; }

  .why-grid article { min-height: 210px; padding: 22px; }
  .partner-image { min-height: 390px; }
  .partner-copy { padding: 72px 20px; }
  .contact { padding-top: 84px; padding-bottom: 80px; }
  .contact h2 { font-size: clamp(48px, 14vw, 64px); }
  .contact-row { margin-top: 48px; }
  .contact-row a { min-height: 44px; display: flex; align-items: center; }
  footer { padding: 30px 20px; }

  .pet-page h2 { font-size: clamp(42px, 12vw, 58px); }
  .pet-hero { padding: 110px 20px 56px; gap: 40px; }
  .pet-hero h1 { font-size: clamp(48px, 13.8vw, 61px); }
  .pet-hero-copy > p:last-child { font-size: 16px; }
  .pet-hero-visual { height: 370px; }
  .pet-hero-visual img { transform: scale(1.08); }
  .pet-definition-grid .lead { font-size: 20px; }
  .layer-layout { gap: 28px; }
  .layer-stack { min-height: 370px; }
  .comparison-table article { padding: 24px 0; gap: 18px; }
  .comparison-use { padding: 18px; }
  .pet-eb-image { min-height: 360px; }
  .pet-eb-copy { padding: 70px 20px; }
  .pet-use-grid div { min-height: 96px; }
  .care-row { gap: 22px; margin-top: 50px; }
  .pet-cta .button { width: 100%; justify-content: space-between; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 48px; }
  .hero-panels { height: 340px; }
  .collection-card,
  .collection-card.featured { height: 350px; }
  .application-strip { grid-template-columns: 1fr; }
  .application-strip > div { border-right: 0; }
  .pet-hero h1 { font-size: 46px; }
}