/* Shared final layer: all five pages use the same header and viewport rules. */
.nav .nav-cta [data-nav-label] { display: inline; }
.nav .nav-cta { flex-shrink: 0; }
.nav .nav-links a:focus-visible,
.nav button:focus-visible,
.rail-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
section[id] { scroll-margin-top: 110px; }
.phase[aria-hidden="true"], .screen[aria-hidden="true"] { visibility: hidden; }
.phase-actions { flex-wrap: wrap; }
.phase-actions .btn { white-space: normal; height: auto; padding-block: 12px; }
.footer-col, .footer-grid > *, .tp-shell > * { min-width: 0; }
.footer-col a { overflow-wrap: anywhere; }
.screen { scrollbar-width: thin; scrollbar-color: #86b7ca55 transparent; }

@media (min-width: 1021px) and (min-height: 701px) {
  :root body .glass { height: min(600px, calc(100svh - 180px)); min-height: 0; }
  :root body .screen-wrap { height: calc(100% - 48px); }
  :root body .screen { overflow: auto; }
}
@media (min-width: 1021px) and (min-height: 701px) and (max-height: 820px) {
  :root body .phase { gap: 12px; }
  :root body .phase h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.06; }
  :root body .phase p { font-size: 16px; line-height: 1.45; }
  :root body .phase-actions .btn { min-height: 46px; }
}

@media (min-width: 1021px) and (min-height: 701px) {
  .ad-page .phase { width: 49%; }
  .ad-page .phase h1 { font-size: clamp(40px, 4.4vw, 68px); }
}

@media (max-width: 1020px) {
  .nav .mobile-menu-toggle { width: 44px; height: 44px; justify-items: center; }
  .nav .nav-links.is-open a { display: flex; }
  .nav .nav-inner { max-width: none; gap: 4px; }
}

@media (max-width: 680px) {
  .nav .nav-inner { transform: none; left: 88px; right: 108px; margin: 0; width: auto; justify-content: center; padding: 0 4px; }
  .nav .nav-cta { font-size: 11px; padding: 0 10px; min-height: 40px; gap: 0; }
  .nav .nav-cta > [aria-hidden] { display: none; }
  .nav .language-switch { right: 16px; }
  .nav .lang-toggle { padding-inline: 8px; }
  .nav .nav-links.is-open { position: fixed; top: 76px; left: 16px; right: 16px; width: auto; transform: none; max-height: calc(100dvh - 92px); overflow-y: auto; }
}
@media (max-width: 374px) {
  .nav .nav-inner { left: 88px; right: auto; width: 48px; }
  .nav .nav-cta { display: none; }
}

@media (max-width: 1020px), (max-height: 700px) {
  :root body .hero-scroll { height: 440svh; }
  :root body .hero-pin { position: sticky; top: 0; height: 100svh; min-height: 100svh; }
  :root body .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(680px, calc(100% - 32px));
    height: 100svh;
    min-height: 100svh;
    padding: 104px 0 20px;
    gap: 16px;
    align-content: start;
  }
  :root body .phase {
    position: relative; inset: auto;
    grid-area: 1 / 1;
    align-self: start;
    width: 100%; max-width: none;
    transform: none !important;
    gap: 14px;
  }
  :root body .phase h1 { font-size: clamp(28px, 5.8vw, 44px); line-height: 1.08; max-width: 100%; }
  :root body .phase p { font-size: 16px; line-height: 1.5; max-width: 100%; }
  :root body .phase-tag { display: inline-flex; max-width: 100%; white-space: normal; }
  :root body .phase-actions { flex-wrap: wrap; gap: 10px; }
  :root body .phase-actions .btn { min-height: 44px; line-height: 1.35; }
  :root body .glass {
    position: relative; inset: auto;
    grid-area: 3 / 1;
    width: 100%; max-width: 100%;
    height: 100%; min-height: 0;
    padding: 12px;
    transform: none !important;
    margin: 0;
  }
  :root body .glass-head { display: flex; gap: 8px; }
  :root body .screen-wrap { display: grid; height: calc(100% - 38px); min-height: 0; margin-top: 10px; }
  :root body .screen { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; min-height: 0; overflow: auto; }
  :root body .service-rail {
    position: relative; inset: auto;
    grid-area: 2 / 1;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%; max-width: 100%;
    transform: none; margin: 0;
    padding: 5px; gap: 3px;
  }
  :root body .rail-item { min-width: 0; min-height: 44px; padding: 8px 4px; font-size: 12px; white-space: normal; text-align: center; justify-content: center; }
  :root body .scroll-meter { display: none; }
  :root body .veil { background: linear-gradient(180deg, #040b12ed, #040b12bc 70%, #040b1290); }
  :root body .giant-word { display: none; }
}
@media (max-width: 680px) {
  :root body .hero-content { padding-top: 96px; gap: 12px; }
  :root body .phase h1 { font-size: clamp(28px, 7.5vw, 38px); }
  :root body .phase p { font-size: 15px; }
}
/* Keep both the copy and showcase reachable on short phones and in landscape.
   Overflowing content scrolls locally, then naturally chains to the hero timeline. */
@media (max-width: 680px) and (max-height: 740px) {
  :root body .hero-content { grid-template-rows: minmax(0, 1fr) auto clamp(150px, 26svh, 190px); }
  :root body .phase { min-height: 0; align-self: stretch; overflow-y: auto; }
}
@media (min-width: 681px) and (max-height: 700px) {
  :root body .hero-content {
    width: calc(100% - 40px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding-top: 88px;
    gap: 12px 20px;
  }
  :root body .phase { min-height: 0; align-self: stretch; overflow-y: auto; }
  :root body .phase h1 { font-size: 28px; }
  :root body .glass { grid-area: 1 / 2; }
  :root body .service-rail { grid-area: 2 / 1 / 3 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}