/* Shared navigation: transparent hero, returned solid header, full-screen mobile menu. */
.header {
  --header-ink: var(--ink);
  --header-height: 100px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  color: var(--header-ink);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform .38s cubic-bezier(.22,.61,.36,1), background-color .25s, color .2s, border-color .25s;
}
.header--hero-dark { --header-ink: var(--light); }
.header--solid { background: var(--light); border-color: var(--line); }
.header.is-scrolled, .header.menu-open {
  --header-ink: var(--light);
  background: var(--dark);
  border-color: #f2f3ef26;
}
.header.is-scrolled { --header-height: 80px; }
.header.header-hidden { transform: translateY(-101%); visibility: hidden; transition: transform .38s cubic-bezier(.22,.61,.36,1), visibility 0s .38s; }
.header.menu-open { transform: none; visibility: visible; }
.main-nav {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 40px;
  transition: height .25s;
}
.header .logo { position: relative; display: block; width: 220px; height: 55px; margin-right: auto; flex-shrink: 0; }
.header .logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-light { visibility: hidden; }
.header--hero-dark .logo-dark, .header.is-scrolled .logo-dark, .header.menu-open .logo-dark { visibility: hidden; }
.header--hero-dark .logo-light, .header.is-scrolled .logo-light, .header.menu-open .logo-light { visibility: visible; }
.navigation-panel { display: flex; align-items: center; gap: 40px; }
.nav-list { display: flex; align-items: center; list-style: none; gap: 30px; margin: 0; padding: 0; }
.nav-list a {
  position: relative;
  display: block;
  padding: 15px 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: inherit;
  transition: opacity .18s;
}
.nav-list a::after {
  content: '';
  position: absolute;
  inset: auto 0 7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.nav-list a:hover::after, .nav-list a:focus-visible::after, .nav-list a.active::after { transform: scaleX(1); }
.header a:focus-visible, .header button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.nav-quote { flex-shrink: 0; }
.mobile-menu-btn { display: none; }
/* Continue the hero surface behind the header while retaining its content clearance. */
.hero { margin-top: 0; padding-top: 100px; min-height: 820px; }
.site-inner:not(.page-404) main { padding-top: 0; }
.site-inner .page-hero { padding-top: 180px; }
@media (min-width: 1600px) { .hero { min-height: 880px; } }
@media (max-width: 1100px) {
  .header .logo { width: 180px; height: 45px; }
  .main-nav, .navigation-panel { gap: 24px; }
  .nav-list { gap: 20px; }
  .nav-list a { font-size: 16px; }
  .nav-quote { gap: 20px; padding-inline: 20px; }
  .hero { min-height: 790px; }
}
@media (max-width: 960px) {
  .header, .header.is-scrolled { --header-height: 80px; }
  .header .logo { width: 190px; height: 47.5px; }
  .main-nav { justify-content: space-between; gap: 20px; }
  .mobile-menu-btn {
    display: block; position: relative; flex-shrink: 0;
    width: 48px; height: 48px; padding: 0;
    border: 0; background: transparent; color: inherit;
  }
  .mobile-menu-btn span, .mobile-menu-btn span::before, .mobile-menu-btn span::after {
    position: absolute; display: block; height: 1.5px; width: 26px;
    content: ''; background: currentColor;
    transition: transform .25s, top .25s, background-color .15s;
  }
  .mobile-menu-btn span { left: 11px; top: 23px; }
  .mobile-menu-btn span::before { left: 0; top: -7px; }
  .mobile-menu-btn span::after { left: 0; top: 7px; }
  .mobile-menu-btn.active span { background: transparent; }
  .mobile-menu-btn.active span::before { top: 0; transform: rotate(45deg); }
  .mobile-menu-btn.active span::after { top: 0; transform: rotate(-45deg); }
  .navigation-panel {
    position: fixed;
    inset: var(--header-height) 0 0;
    height: calc(100dvh - var(--header-height));
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: clamp(28px,6vh,64px) var(--gutter) max(32px,env(safe-area-inset-bottom));
    gap: 40px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--dark); color: var(--light);
    visibility: hidden; opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity .26s, transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s .32s;
  }
  .menu-open .navigation-panel { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .nav-list { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-list li { border-bottom: 1px solid #f2f3ef26; }
  .nav-list li:first-child { border-top: 1px solid #f2f3ef26; }
  .nav-list a {
    min-height: 64px; padding: 18px 0;
    font-size: clamp(32px,5vw,48px); font-weight: 400; line-height: 1.15; letter-spacing: -.045em;
  }
  .nav-list a::after { display: none; }
  .nav-list a.active { color: #96c4e5; }
  .nav-list a:hover { opacity: .75; }
  .menu-open .nav-list li { animation: navigation-enter .32s both; }
  .menu-open .nav-list li:nth-child(2) { animation-delay: .025s; }
  .menu-open .nav-list li:nth-child(3) { animation-delay: .05s; }
  .menu-open .nav-list li:nth-child(4) { animation-delay: .075s; }
  .menu-open .nav-list li:nth-child(5) { animation-delay: .1s; }
  .nav-quote { margin-top: auto; width: 100%; }
  html.navigation-open, .navigation-open body { overflow: hidden; }
  .hero { padding-top: 80px; }
  .site-inner .page-hero { padding-top: 144px; }
}
@media (max-width: 800px) { .hero { min-height: 800px; } }
@media (max-width: 640px) { .site-inner .page-hero { padding-top: 128px; } }
@media (max-width: 540px) {
  .header .logo { width: 180px; height: 45px; }
  .header.is-scrolled:not(.menu-open) { --header-height: 72px; }
  .hero { min-height: 780px; }
}
@media (max-width: 960px) and (max-height: 600px) {
  .navigation-panel { padding-top: 20px; gap: 24px; }
  .nav-list a { min-height: 54px; padding-block: 12px; font-size: 30px; }
}
@keyframes navigation-enter { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .header, .main-nav, .navigation-panel, .mobile-menu-btn span, .mobile-menu-btn span::before, .mobile-menu-btn span::after { transition: none; }
  .menu-open .nav-list li { animation: none; }
}