.site-header { position: sticky; z-index: 900; top: 0; width: 100%; color: var(--color-cream-200); }
.site-header__topbar { height: 1.875rem; border-bottom: 1px solid rgb(53 80 90 / 75%); background: var(--color-navy-950); }
.site-header__topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.site-header__topbar p, .site-header__location { margin: 0; color: var(--color-cream-200); font-size: .62rem; font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.site-header__row { height: 4.125rem; border-bottom: 1px solid transparent; background: rgb(11 23 32 / 91%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: height var(--transition-base), border-color var(--transition-base); }
.site-header--scrolled .site-header__row { height: 3.5rem; border-bottom-color: var(--color-copper-500); }
.site-header__inner { display: flex; align-items: center; gap: clamp(.75rem, 1.5vw, 1.5rem); height: 100%; }
.site-header__brand { display: inline-flex; flex: 0 1 auto; align-items: center; gap: .65rem; min-width: 0; color: var(--color-cream-50); text-decoration: none; white-space: nowrap; }
.site-header__logo { width: 2.625rem; height: 2.625rem; flex: 0 0 2.625rem; object-fit: contain; transition: width var(--transition-base), height var(--transition-base); }
.site-header--scrolled .site-header__logo { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; }
.site-header__brand-name { overflow: hidden; font-family: var(--font-heading); font-size: 1.5625rem; letter-spacing: -.03em; text-overflow: ellipsis; }
.site-header__nav { flex: 1 1 auto; min-width: 0; }
.site-header__nav-list { display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 1.1vw, 1.1rem); margin: 0; padding: 0; list-style: none; }
.site-header__nav-list li, .site-header__nav-list li + li { margin: 0; padding: 0; }
.site-header__nav-list a { position: relative; display: block; padding-block: .4rem; color: var(--color-cream-200); font-size: .675rem; font-weight: 700; letter-spacing: .075em; line-height: 1.2; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.site-header__nav-list a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; content: ""; background: var(--color-copper-500); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); }
.site-header__nav-list a:hover::after, .site-header__nav-list a:focus-visible::after { transform: scaleX(1); }
.site-header__cta { flex: 0 0 auto; min-height: 2.375rem; padding: .55rem .8rem; font-size: .61rem; white-space: nowrap; }
.site-header__toggle, .site-header__mobile-brand, .site-header__mobile-footer { display: none; }

@media (max-width: 1080px) { .site-header__nav-list { gap: .65rem; } .site-header__nav-list a { font-size: .61rem; letter-spacing: .055em; } .site-header__cta { padding-inline: .65rem; font-size: .56rem; } }
@media (max-width: 900px) { body.site-header-menu-open { position: fixed; width: 100%; overflow: hidden; } .site-header__topbar { display: none; } .site-header__row, .site-header--scrolled .site-header__row { height: 4.5rem; } .site-header__inner { justify-content: space-between; } .site-header__logo { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; } .site-header__brand-name { font-size: 1.3125rem; } .site-header__cta { margin-left: auto; } .site-header__toggle { position: relative; z-index: 2; display: grid; width: 2.875rem; height: 2.875rem; flex: 0 0 2.875rem; align-content: center; gap: .32rem; padding: .65rem; border: 1px solid var(--color-line-light); background: transparent; color: var(--color-cream-200); } .site-header__toggle span { display: block; width: 100%; height: 1px; background: currentColor; transition: transform var(--transition-base), opacity var(--transition-base); } .site-header--menu-open .site-header__toggle span:nth-child(1) { transform: translateY(.42rem) rotate(45deg); } .site-header--menu-open .site-header__toggle span:nth-child(2) { opacity: 0; } .site-header--menu-open .site-header__toggle span:nth-child(3) { transform: translateY(-.42rem) rotate(-45deg); } .site-header__nav { position: fixed; z-index: 1; inset: 0; display: flex; flex-direction: column; min-height: 100dvh; padding: 7rem max(1.25rem, calc((100vw - 88vw) / 2)) 2rem; overflow-y: auto; background: var(--color-navy-950); opacity: 0; pointer-events: none; transform: translateY(-1rem); transition: opacity var(--transition-base), transform var(--transition-base); } .site-header--menu-open .site-header__nav { opacity: 1; pointer-events: auto; transform: translateY(0); } .site-header__mobile-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); color: var(--color-cream-50); font-family: var(--font-heading); font-size: 2rem; } .site-header__mobile-brand img { width: 3.5rem; height: 3.5rem; object-fit: contain; } .site-header__nav-list { display: grid; align-items: stretch; justify-content: stretch; gap: 0; margin: 0; } .site-header__nav-list li:nth-child(4), .site-header__nav-list li:nth-child(5), .site-header__nav-list li:nth-child(6), .site-header__nav-list li:nth-child(7) { background: var(--color-petrol-700); } .site-header__nav-list a { padding: .82rem 1rem; border-bottom: 1px solid var(--color-line-light); color: var(--color-cream-50); font-family: var(--font-heading); font-size: clamp(1.55rem, 5vw, 2.2rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; text-transform: none; } .site-header__nav-list a::after { bottom: .4rem; left: 1rem; width: 2.5rem; } .site-header__mobile-footer { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; padding-top: var(--space-6); color: var(--color-cream-200); font-size: var(--text-meta); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .site-header__mobile-footer a { color: inherit; text-decoration: none; } }
@media (max-width: 560px) { .site-header__cta { display: none; } .site-header__nav { padding-inline: 1.25rem; } }