/* =============================================================================
   SECOND WIND - RESPONSIVE (mobile-first campaign feel)
   ============================================================================= */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .card-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .primary-nav { display: none; }
  .nav-toggle { display: grid; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; aspect-ratio: 16/10; max-height: 42vh; }
  .pdp { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
  .pdp-story { grid-template-columns: 1fr; }
  .modal { grid-template-columns: 1fr; max-height: 94dvh; }
  .modal__media { max-height: 40dvh; }
  .modal__media img { max-height: 40dvh; }
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; display: none; }
  .filters.open { display: block; }
  .filter-toggle { display: inline-flex; }
  .coll-hero, .coll-band { grid-template-columns: 1fr; }
  .coll-band:nth-child(even) { direction: ltr; }
  .coll-hero__media, .coll-band__media { min-height: 240px; }
  .sticky-atc { display: flex; }
}

@media (max-width: 700px) {
  :root {
    --fs-display: clamp(2.65rem, 13vw, 4.5rem);
    --fs-h1: clamp(2rem, 10vw, 3rem);
    --section-y: 3rem;
    --gutter: 1rem;
  }
  .header-inner { height: 60px; }
  .brand-logo img { height: 27px; max-width: 150px; }
  .header-actions { margin-left: auto; }
  .hero { padding-block: 1.25rem 3rem; }
  .hero__grid { gap: 1.5rem; }
  .hero__media { max-height: 36vh; border-radius: var(--r-md); }
  .hero__sub { margin-top: var(--s4); }
  .hero__cta, .hero__paths { margin-top: var(--s5); }
  .card-grid, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .pcard__title { font-size: 1rem; }
  .pcard__body { padding-top: 0.65rem; }
  #home-social { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-top { grid-template-columns: 1fr; gap: var(--s5); }
  /* .sec-head__title and .sec-head p are capped at 50% for the two-column
     desktop layout. Below 700px the header stacks, so the cap squeezed every
     section heading into half the screen and wrapped it early. Released here. */
  .sec-head { flex-direction: column; align-items: flex-start; }
  .sec-head__title { max-width: 100%; }
  .sec-head p { width: 100%; }
  .field-row { grid-template-columns: 1fr; }
  .pdp-gallery { grid-template-columns: 1fr; }
  .pdp-thumbs { flex-direction: row; order: 2; }
  .pdp-thumb { width: 64px; }
  /* Three stats since the design-count tile was removed (2026-09-03 client
     feedback). A 2-column grid leaves the third item stranded on its own row,
     so narrow screens get one full-width column instead. */
  .trust { grid-template-columns: 1fr; gap: var(--s5); }
  .trust__item { padding: 0; }
  .msg-grid { grid-template-columns: 1fr 1fr; }
  .msg-tile__name { font-size: 1.3rem; }
  .drawer { width: 100vw; }
}

@media (max-width: 420px) {
  .card-grid, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr 1fr; }
  .card-grid { gap: 0.7rem; }
  .pcard__theme { font-size: 0.7rem; }
  .pcard__meta { align-items: flex-start; gap: 0.25rem; flex-direction: column; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* Larger screens: comfortable max width already handled by --container */
@media (min-width: 1400px) {
  :root { --container: 1320px; }
}

/* The hero brand panel is a desktop composition device: it sits behind the
   product image at the right edge. Below 900px the grid is single-column and
   the image is full-width, so the panel has nothing to anchor to. The hero
   keeps its tinted band and brand rule instead. */
@media (max-width: 900px) {
  .hero__plate { display: none; }
}