/* Mobile-first refinements for the custom homepage composition. */
.hero-fig-frame {
  background:
    linear-gradient(90deg, rgba(226, 35, 31, .08) 1px, transparent 1px),
    linear-gradient(rgba(226, 35, 31, .08) 1px, transparent 1px),
    var(--paper-2);
  background-size: 48px 48px;
}

@media (max-width: 900px) {
  .hero { padding: 74px 0 70px; }
  .hero-grid { gap: 64px; }
  .hero-copy { order: 1; }
  .hero-fig { order: 2; }
  .hero-fig-frame { aspect-ratio: 16 / 10; }
  .hero-fig-panel { padding: 18px 20px; }
}

@media (max-width: 620px) {
  .hero { padding: 56px 0 52px; }
  .hero-grid { gap: 48px; }
  .hero-copy h1 { font-size: clamp(3rem, 15vw, 4.5rem); max-width: 9ch; }
  .hero-lead { font-size: 1rem; }
  .hero-ctas { align-items: stretch; }
  .hero-ctas .btn-call, .hero-ctas .btn-text { width: 100%; justify-content: center; }
  .hero-fig-frame { aspect-ratio: 4 / 3; }
  .hero-fig-panel { position: absolute; inset: auto 12px 12px; }
  .hero-fig-tag { right: 10px; top: 10px; }
}