/* Small-screen stability: mobile content must not wait for scroll animation. */
@media (max-width: 800px) {
  /* The navigation is its own scroll container.  The document is locked while
     it is open, so relying on body scrolling makes the lower links unreachable. */
  .mobile-nav {
    inset: 72px 0 0;
    z-index: 990;
    justify-content: flex-start;
    gap: 20px;
    padding: 38px 22px 54px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav a { flex: 0 0 auto; }
  .mobile-languages { padding-bottom: 12px; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-content { left: 22px; right: 22px; max-width: none; }
  .hero h1 { font-size: clamp(54px, 16vw, 70px); }
  .hero-copy { max-width: 34ch; }
  /* Keep the index and the two-line principle copy on a stable grid.  The
     previous space-between layout made short headings appear to drift. */
  .principle,
  .principle:not(:first-child) {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 18px;
    justify-content: initial;
    align-items: center;
  }
  .principle h3 {
    max-width: none;
    text-align: start;
  }
  .service-list summary { grid-template-columns: 35px minmax(0, 1fr) 20px; column-gap: 8px; }
  [dir="rtl"] .hero-content { left: 22px; right: 22px; text-align: right; }
  [dir="rtl"] .hero-copy { margin-inline-start: auto; }
  [dir="rtl"] .principle h3 { text-align: start; }
  [dir="rtl"] .button span,[dir="rtl"] .text-link span,[dir="rtl"] .read-link span { margin-left: 0; margin-right: 12px; }
}