/* Responsive rules for large desktop, tablet, and mobile layouts. */

@media (min-width:1200px) {
  .hero { padding-top:96px; padding-bottom:76px; }
  .shot-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
  .detail-gallery { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:34px; }
}

@media (min-width:721px) and (max-width:1100px) {
  .topbar { padding-left:4vw; padding-right:4vw; }
  .navlinks { gap:18px; font-size:.86rem; }
  .hero { gap:24px; padding-top:64px; }
  .contact-hero { grid-template-columns:1fr; padding-top:64px; }
  .contact-service-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .shot-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
  .detail-gallery { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; }
}

@media (max-width:720px) {
  .topbar { padding:14px 5vw; min-height:64px; }
  .wordmark { font-size:1.2rem; }
  .wordmark-logo { height:29px; width:29px; }
  .hero { padding:38px 5vw 46px; gap:12px; }
  .contact-hero { grid-template-columns:1fr; padding:44px 5vw 42px; }
  .contact-mini-details { justify-content:stretch; }
  .contact-mini-details span, .contact-mini-details a { width:100%; text-align:center; border-radius:14px; }
  .business-card-section, .contact-services { padding-top:46px; padding-bottom:48px; }
  .contact-service-grid { grid-template-columns:1fr; }
  .flip-card { width:100%; border-radius:18px; }
  .flip-card-face { border-radius:18px; }
  .business-card-actions, .contact-actions { flex-direction:column; align-items:stretch; }
  .business-card-actions .btn, .contact-actions .btn { justify-content:center; }
  .hero h1 { font-size:clamp(2.15rem, 10vw, 3rem); }
  .lede { font-size:.98rem; }
  .plate-svg { width:min(300px, 82vw); }
  .role-section { padding-top:54px; padding-bottom:56px; scroll-margin-top:70px; }
  .role-head { margin-bottom:30px; }
  .shot-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .shot { padding:10px 10px 14px; border-radius:14px; }
  .shot-badge { top:18px; right:18px; }
  .shot figcaption { font-size:.82rem; }
  .quicknav { gap:8px; margin-bottom:30px; }
  .quicknav a { padding:8px 12px; font-size:.78rem; }
  footer { align-items:flex-start; flex-direction:column; padding-top:38px; }
  .back-to-top { right:16px; bottom:16px; }
}

@media (max-width:480px) {
  .hero-ctas { flex-direction:column; align-items:stretch; }
  .hero-ctas .btn { justify-content:center; }
  .store-badges { flex-direction:column; }
  .store-badge { justify-content:center; width:100%; }
  .shot-grid { grid-template-columns:1fr; }
  .shot .phone-frame { max-height:none; }
  .roles-strip { padding-bottom:48px; }
  .theme-swatches { gap:8px; }
  .theme-swatch { flex:1 1 42%; }
}