/* Keep desktop scroll choreography usable within shorter laptop viewports. */
@media (min-width: 821px) and (min-height: 560px) and (max-height: 800px) {
  .hero-stage .hero { min-height: 0; height: calc(100svh - 92px); }
  .hero .hero-content { padding: 32px 40px; }
  .hero h1 { font-size: clamp(42px, 7vh, 62px); }
  .hero .hero-intro { bottom: 110px; }
  .cinematic-panel { min-height: 0; height: 100svh; }
  .benefit-grid .benefit-card { padding: 24px; }
  .division-card .card-copy { padding: 8px 0; }
  .division-card .card-index { margin-bottom: 16px; }
  .division-card h3 { font-size: clamp(32px, 5.5vh, 44px); }
  .division-card .card-copy p { font-size: 14px; margin-top: 14px; }
  .how-grid .how-intro { padding-top: 20px; min-height: 0; }
  .how-intro h2 { font-size: clamp(38px, 6vh, 50px); }
  .process-stack .process-card {
    min-height: 0;
    height: calc(100svh - 100px);
    padding: 24px;
    gap: 18px;
  }
  .process-card .step-content { padding: 0; flex-shrink: 0; }
  .process-card .step-content h3 { font-size: clamp(30px, 4.8vh, 38px); margin: 10px 0 12px; letter-spacing: -1.4px; }
  .process-card .step-content p { font-size: 14px; line-height: 1.5; }
  .process-card .process-art { height: auto; min-height: 100px; flex: 1 1 auto; }
  .architecture-journey .architecture-journey-copy { position: static; }
}

@media (min-width: 821px) and (min-height: 560px) and (max-height: 800px) and (prefers-reduced-motion: reduce) {
  .process-stack .process-card { height: auto; }
  .process-card .process-art { flex: none; height: 240px; }
}