/* Shared header for every page (home, scenarios, product map), plus the
   page-to-page slide. The header markup is identical on all three pages so
   it stays put while the content underneath changes. */
.site-header {
  --hdr-brand: #76063C;
  --hdr-brand-bg: rgba(118, 6, 60, 0.07);
  --hdr-text: #5B6770;
  --hdr-line: #e5e2db;
  position: sticky; top: 0; z-index: 100;
  height: 60px;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--hdr-line);
  font-family: 'Montserrat', system-ui, sans-serif;
  view-transition-name: site-header;
}
.site-header .hdr {
  max-width: 1040px; height: 100%; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
}
.site-header .brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.site-header .brand img { height: 30px; width: auto; display: block; }
.site-header .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-header .nav a {
  font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--hdr-text); text-decoration: none;
  padding: 7px 13px; border-radius: 50px; white-space: nowrap;
}
.site-header .nav a:hover { color: var(--hdr-brand); background: var(--hdr-brand-bg); }
.site-header .nav a[aria-current="page"] {
  color: var(--hdr-brand); background: var(--hdr-brand-bg); box-shadow: inset 0 0 0 1.5px var(--hdr-brand);
}
.site-header .ext {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--hdr-text); text-decoration: none;
  padding: 7px 12px; border-left: 1px solid var(--hdr-line);
}
.site-header .ext:hover { color: var(--hdr-brand); }
.site-header .ext svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 720px) {
  .site-header .hdr { padding: 0 16px; gap: 8px; }
  .site-header .ext span { display: none; }   /* icon only */
  .site-header .ext { padding: 7px 4px 7px 10px; }
  .site-header .ext svg { width: 18px; height: 18px; }
}
@media (max-width: 420px) {
  .site-header .brand img { height: 20px; }
  .site-header .nav { gap: 0; }
  .site-header .nav a { font-size: 12.5px; padding: 6px 8px; }
}

/* --- Page-to-page slide (View Transitions; ignored where unsupported) --- */
@view-transition { navigation: auto; }
@keyframes vt-out-left  { to   { transform: translateX(-48px); opacity: 0; } }
@keyframes vt-in-right  { from { transform: translateX(48px);  opacity: 0; } }
@keyframes vt-out-right { to   { transform: translateX(48px);  opacity: 0; } }
@keyframes vt-in-left   { from { transform: translateX(-48px); opacity: 0; } }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
html:active-view-transition-type(forward)::view-transition-old(root)  { animation: 220ms ease-in both vt-out-left; }
html:active-view-transition-type(forward)::view-transition-new(root)  { animation: 280ms ease-out both vt-in-right; }
html:active-view-transition-type(backward)::view-transition-old(root) { animation: 220ms ease-in both vt-out-right; }
html:active-view-transition-type(backward)::view-transition-new(root) { animation: 280ms ease-out both vt-in-left; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}