/* Opening screens share the visible viewport; artwork uses the remaining space. */
.hero { height: 100svh; min-height: 0; }
.advantages.section { height: 100svh; min-height: 0; }
@media (max-width: 720px) {
  .hero { height: 100svh; min-height: 0; }
  .hero .site-header { flex: 0 0 clamp(60px, 10svh, 72px); min-height: 0; }
  .hero-copy.shell { flex: 0 0 auto; padding-block: clamp(20px, 4svh, 38px) 16px; }
  .hero .hero-art { flex: 1 1 0; height: auto; min-height: 0; background-size: auto 100%; }
  .advantages.section { padding-block: clamp(18px, 3.5svh, 36px); }
  .advantages-heading { margin-bottom: clamp(16px, 3svh, 28px); }
  .advantages-grid li { padding-block: clamp(10px, 2svh, 18px); }
  .advantages-photo img { max-width: min(190px, 27svh); }
}
@media (max-width: 720px) and (max-height: 640px) {
  .hero .eyebrow { margin-bottom: 16px; }
  .hero .hero-actions { margin-top: 18px; }
  .advantages-heading .section-index { margin-bottom: 10px; }
  .advantages h2 { font-size: clamp(30px, 8.8vw, 36px); }
  .advantages-layout { column-gap: 16px; }
  .advantages-grid .advantage-stat { padding-bottom: 12px; }
  .advantages-grid .advantage-reach { gap: 16px; }
  .advantages-photo { padding-bottom: 16px; gap: 8px; }
}
@media (min-width: 721px) and (max-height: 700px) {
  .advantages.section { padding-block: 24px; }
  .advantages-heading { margin-bottom: 24px; }
  .advantages-heading .section-index { margin-bottom: 12px; }
  .advantages h2 { font-size: clamp(42px, 8svh, 64px); }
  .advantages-grid li { min-height: 90px; padding-block: 14px; }
  .advantage-stat strong { font-size: clamp(48px, 9svh, 64px); }
}