/* 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:-.02em; }
  .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; }
}

@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; }
}

/* Desktop portfolio follows the available viewport, including display scaling. */
@media (min-width: 821px) {
  .architecture-journey .architecture-journey-panel {
    height: min(700px, calc(100svh - 120px));
    min-height: 240px;
  }
}
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .architecture-journey .architecture-journey-copy {
    position: sticky;
    top: min(100px, calc(100svh - var(--portfolio-copy-height, 600px) - 24px));
  }
}
@media (min-width: 821px) and (max-height: 800px) {
  .architecture-journey-copy h2 { font-size: clamp(38px, 7vh, 62px); }
  .architecture-journey-copy .eyebrow { margin-bottom: 22px; }
  .architecture-journey-intro { font-size: 14px; line-height: 1.6; margin-top: 18px; }
  .architecture-journey-copy .portfolio-services { margin-top: 18px; }
  .architecture-journey-copy .portfolio-services li { padding: 10px 0; }
  .architecture-journey-panel figcaption { padding: clamp(20px, 4vh, 36px); }
  .architecture-journey-panel figcaption strong { font-size: clamp(32px, 6vh, 52px); }
}