/* Header mega menu: one white panel that expands from under the header and swaps content per item.
   Compact by design: about a quarter of the viewport. */
.mg { position: fixed; left: 0; right: 0; top: 0; z-index: 58; background: var(--paper); color: var(--ink); padding-top: var(--hdr); height: calc(var(--hdr) + clamp(200px, 25vh, 260px)); clip-path: inset(0 0 100% 0); visibility: hidden; box-shadow: 0 30px 60px -40px rgba(10, 11, 16, .35); border-bottom: 1px solid var(--line); }
.mg.on { visibility: visible; }
.mg-in { max-width: var(--wrap); margin: 0 auto; padding: 22px var(--gut) 24px; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 36px; align-items: stretch; }
.mg-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.mg-tile { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.mg-tile .im { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); max-height: calc(clamp(200px, 25vh, 260px) - 92px); }
.mg-tile .im img { width: 100%; height: 100%; object-fit: cover; }
.mg-tile b { font: 400 .95rem/1.2 var(--f-display); }
.mg-tile small { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.mg-tile:hover b { color: var(--navy); }
.mg-links { border-left: 1px solid var(--line); padding-left: 28px; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; }
.mg-links a { font-size: .9rem; color: var(--ink-2); padding: 6px 0; }
.mg-links a:hover { color: var(--navy); }
.mg-dim { position: fixed; inset: 0; z-index: 57; background: rgba(5, 6, 10, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.mg-dim.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.hdr.mg-open { background: var(--paper) !important; color: var(--ink) !important; border-bottom-color: transparent !important; }
.hdr.mg-open .brand .lg-light { display: block !important; } .hdr.mg-open .brand .lg-dark { display: none !important; }
:root[data-theme="dark"] .hdr.mg-open .brand .lg-light { display: none !important; } :root[data-theme="dark"] .hdr.mg-open .brand .lg-dark { display: block !important; }
.hdr.mg-open .btn-ink { background: var(--ink) !important; color: var(--paper) !important; }
.nav > a.hov::after { transform: scaleX(1); }
@media (max-width: 980px) { .mg, .mg-dim { display: none; } }

/* ---------- home hero: four hub cities, crossfading, with progress tabs ---------- */
.hero-media .sl { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); overflow: hidden; }
.hero-media .sl.on { opacity: 1; }
.hero-media .sl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.58) saturate(.95); transform: scale(1.1); }
.hero-media .sl.on img { animation: kb 9s linear forwards; }
@keyframes kb { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero.calm .hero-media .sl.on img { animation: none; transform: none; }
.hero-tabs button { text-align: left; padding: 0 18px 4px 0; display: flex; flex-direction: column; gap: 6px; color: #fff; opacity: .55; transition: opacity .4s; position: relative; }
.hero-tabs button + button { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .16); }
.hero-tabs button[aria-selected="true"], .hero-tabs button:hover { opacity: 1; }
.hero-tabs .bar { display: block; height: 2px; background: rgba(255, 255, 255, .18); margin: 0 0 12px; position: relative; overflow: hidden; }
.hero-tabs .bar b { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.hero-tabs button[aria-selected="true"] .bar b { animation: hbar 7s linear forwards; }
.hero.calm .hero-tabs button[aria-selected="true"] .bar b { animation: none; transform: scaleX(1); }
@keyframes hbar { to { transform: scaleX(1); } }
.hero-tabs b { font: 400 1.05rem/1.2 var(--f-display); }
.hero-tabs span { font-size: .8rem; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.hero-foot.hero-tabs { border-top: 0; }
@media (max-width: 640px) { .hero-tabs button:nth-child(3) { padding-left: 0; border-left: 0; } .hero-tabs button { padding-top: 8px; } }
@media (max-width: 980px) { .hero-c { padding-bottom: 84px; } }