/* Final responsive sizing pass: compact, readable typography and cards on tablets/phones. */

@media (max-width: 1024px) {
  .hero h1,
  .final-cta h2 {
    font-size: clamp(44px, 7vw, 64px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
  }

  .collection .section-intro h2,
  .design-copy h2,
  .process .section-intro h2,
  .studio-copy h2 {
    font-size: clamp(36px, 5vw, 48px) !important;
    line-height: 1.04 !important;
  }

  #collection .product-card,
  #collection .product-card-featured,
  #collection .product-card-wide,
  #collection .product-card:nth-child(n) {
    flex-basis: clamp(17rem, 38vw, 19rem) !important;
    grid-template-rows: 10.5rem minmax(0, 1fr) !important;
    height: 26rem !important;
    min-height: 26rem !important;
    max-height: 26rem !important;
  }

  #collection .product-card-media,
  #collection .product-card:nth-child(n) .product-card-media {
    height: 10.5rem !important;
    min-height: 10.5rem !important;
  }

  #collection .product-card-content,
  #collection .product-card:nth-child(n) .product-card-content {
    padding: 1rem !important;
    gap: .7rem !important;
  }

  #collection .product-card h3,
  #collection .product-card:nth-child(n) h3 {
    font-size: 18px !important;
    line-height: 1.18 !important;
    min-height: 2.5rem !important;
  }

  #collection .product-card-copy p,
  #collection .product-card:nth-child(n) .product-card-copy p {
    font-size: 14px !important;
    line-height: 1.45 !important;
    min-height: 4.1rem !important;
  }

  #collection .product-link,
  #collection .product-card:nth-child(n) .product-link {
    min-height: 44px !important;
    font-size: 15px !important;
    padding: .72rem 1rem !important;
  }

  .process-card h3,
  .choice-copy strong,
  .service-copy > strong {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  .process-card p,
  .choice-copy small,
  .service-copy > small,
  .section-intro > p,
  .design-copy > p:not(.kicker),
  .studio-copy > p:last-child {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 700px) {
  .page-shell,
  .section-shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero h1,
  .final-cta h2 {
    font-size: clamp(38px, 10.5vw, 48px) !important;
    line-height: 1 !important;
    max-width: 10.5ch !important;
  }

  .collection .section-intro h2,
  .design-copy h2,
  .process .section-intro h2,
  .studio-copy h2 {
    font-size: clamp(30px, 8.5vw, 38px) !important;
    line-height: 1.06 !important;
  }

  .hero-text,
  .section-intro > p,
  .design-copy > p:not(.kicker),
  .studio-copy > p:last-child,
  .final-cta p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  #collection .product-carousel-toolbar {
    margin-bottom: .65rem !important;
  }

  #collection .product-carousel-control {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  #collection .product-grid {
    gap: .75rem !important;
    scroll-padding-inline: 0 !important;
  }

  #collection .product-card,
  #collection .product-card-featured,
  #collection .product-card-wide,
  #collection .product-card:nth-child(n) {
    flex-basis: min(76vw, 17.5rem) !important;
    grid-template-rows: 9rem minmax(0, 1fr) !important;
    height: 23.5rem !important;
    min-height: 23.5rem !important;
    max-height: 23.5rem !important;
    border-radius: 1rem !important;
  }

  #collection .product-card-media,
  #collection .product-card:nth-child(n) .product-card-media {
    height: 9rem !important;
    min-height: 9rem !important;
  }

  #collection .product-card-content,
  #collection .product-card:nth-child(n) .product-card-content {
    padding: .9rem !important;
    gap: .55rem !important;
  }

  #collection .product-card h3,
  #collection .product-card:nth-child(n) h3 {
    font-size: 17px !important;
    line-height: 1.18 !important;
    min-height: 2.35rem !important;
  }

  #collection .product-card-copy p,
  #collection .product-card:nth-child(n) .product-card-copy p {
    font-size: 13.5px !important;
    line-height: 1.42 !important;
    min-height: 3.8rem !important;
  }

  #collection .product-link,
  #collection .product-card:nth-child(n) .product-link {
    width: 100% !important;
    min-height: 42px !important;
    font-size: 14px !important;
    padding: .65rem .8rem !important;
  }

  .dialog-copy h2,
  .inquiry-dialog .dialog-copy h2 {
    font-size: 28px !important;
    line-height: 1.08 !important;
  }

  .choice-section-heading h3,
  .configurator-head h3,
  .configurator-intro h3,
  .form-section-head h3,
  .inquiry-dialog .configurator-intro h3,
  .inquiry-dialog .choice-section-heading h3,
  .inquiry-dialog .form-section-head h3 {
    font-size: 21px !important;
    line-height: 1.18 !important;
  }

  .choice-copy strong,
  .service-copy > strong,
  .process-card h3 {
    font-size: 17px !important;
  }

  .choice-copy small,
  .service-copy > small,
  .process-card p,
  .configurator-summary,
  .form-section-head p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 390px) {
  .hero h1,
  .final-cta h2 {
    font-size: 36px !important;
  }

  .collection .section-intro h2,
  .design-copy h2,
  .process .section-intro h2,
  .studio-copy h2 {
    font-size: 29px !important;
  }

  #collection .product-card,
  #collection .product-card-featured,
  #collection .product-card-wide,
  #collection .product-card:nth-child(n) {
    flex-basis: min(78vw, 16.75rem) !important;
    grid-template-rows: 8.5rem minmax(0, 1fr) !important;
    height: 22.5rem !important;
    min-height: 22.5rem !important;
    max-height: 22.5rem !important;
  }

  #collection .product-card-media,
  #collection .product-card:nth-child(n) .product-card-media {
    height: 8.5rem !important;
    min-height: 8.5rem !important;
  }

  #collection .product-card h3,
  #collection .product-card:nth-child(n) h3 {
    font-size: 16px !important;
  }

  #collection .product-card-copy p,
  #collection .product-card:nth-child(n) .product-card-copy p {
    font-size: 13px !important;
  }
}