.site-header { position: relative; z-index: 50; border-bottom: 1px solid var(--colour-graphite); background: var(--colour-field-paper); color: var(--colour-graphite); }
.site-header__coordinate { border-bottom: 1px solid var(--colour-rule-grey); background: var(--colour-graphite); color: var(--colour-paper-bright); }
.site-header__coordinate-inner { display: flex; min-height: 1.8rem; align-items: center; justify-content: space-between; gap: var(--space-4); font-family: var(--font-heading); font-size: var(--text-meta); font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.site-header__coordinate-inner span:last-child::before { display: inline-block; width: .42rem; height: .42rem; margin-right: var(--space-2); background: var(--colour-signal-orange); content: ""; }
.site-header__main { background-size: 2rem 2rem; }
.site-header__main-inner { display: flex; min-height: 4.75rem; align-items: center; gap: var(--space-4); }
.site-header__brand { display: inline-flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: .65rem; color: var(--colour-graphite); text-decoration: none; }
.site-header__brand:hover { color: var(--colour-graphite); }
.site-header__logo { width: 2.625rem; height: 2.625rem; flex: 0 0 2.625rem; object-fit: contain; }
.site-header__brand-text { display: grid; min-width: 0; line-height: 1; }
.site-header__brand-name, .site-header__brand-subtitle { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.site-header__brand-name { font-size: .9375rem; letter-spacing: .055em; }
.site-header__brand-subtitle { margin-top: .22rem; color: var(--colour-graphite-soft); font-size: .5625rem; letter-spacing: .16em; }
.site-header__navigation { min-width: 0; flex: 1 1 auto; }
.site-header__nav-list { display: flex; align-items: center; justify-content: flex-end; gap: clamp(.45rem, 1vw, .9rem); margin: 0; padding: 0; list-style: none; }
.site-header__nav-list li, .site-header__nav-list li + li { display: flex; margin: 0; padding: 0; }
.site-header__nav-list a { position: relative; display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--colour-graphite); font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; letter-spacing: .055em; line-height: 1; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.site-header__nav-list a::after { position: absolute; right: 0; bottom: .2rem; left: 0; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--colour-signal-orange); content: ""; transition: transform var(--transition-fast); }
.site-header__nav-list a:hover::after, .site-header__nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.site-header__nav-list a span, .site-header__mobile-heading, .site-header__mobile-cta, .site-header__nav-contact { display: none; }
.site-header__database { flex: 0 0 auto; min-height: 2.5rem; padding-inline: .7rem; font-size: .8125rem; white-space: nowrap; }
.site-header__toggle { display: none; }
.site-header__ticker { overflow: hidden; border-top: 1px solid var(--colour-rule-grey); background: var(--colour-paper-bright); }
.site-header__ticker-inner { display: flex; min-height: 2.2rem; align-items: center; gap: var(--space-4); }
.site-header__ticker-label { flex: 0 0 auto; padding-right: var(--space-3); border-right: 2px solid var(--colour-signal-orange); color: var(--colour-graphite); font-family: var(--font-heading); font-size: var(--text-meta); font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.site-header__ticker-track { display: flex; min-width: 0; align-items: center; gap: var(--space-3); overflow-x: auto; scrollbar-width: thin; color: var(--colour-graphite-soft); font-family: var(--font-heading); font-size: var(--text-meta); font-weight: 700; letter-spacing: .1em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.site-header__ticker-track b { color: var(--colour-signal-orange); }
@media (max-width: 72rem) { .site-header__nav-list { gap: .55rem; } .site-header__nav-list a { font-size: .75rem; } .site-header__database { font-size: .75rem; } }
@media (max-width: 62rem) { .site-header__main-inner { min-height: 4.5rem; justify-content: space-between; } .site-header__toggle { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .6rem; padding: .5rem .65rem; border: 1px solid var(--colour-graphite); border-radius: var(--radius-control); background: var(--colour-paper-bright); color: var(--colour-graphite); font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase; } .site-header__toggle-icon { display: grid; width: 1.1rem; gap: 3px; } .site-header__toggle-icon span { display: block; height: 2px; background: currentColor; transition: transform var(--transition-fast), opacity var(--transition-fast); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-icon span:first-child { transform: translateY(5px) rotate(45deg); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-icon span:nth-child(2) { opacity: 0; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-icon span:last-child { transform: translateY(-5px) rotate(-45deg); } .site-header__database { display: none; } .site-header__navigation { position: absolute; z-index: 60; top: 100%; right: 0; left: 0; display: grid; max-height: 0; overflow: hidden; border-top: 0 solid var(--colour-graphite); background: var(--colour-paper-bright); box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; transition: max-height var(--transition-standard), opacity var(--transition-standard), border-width var(--transition-standard); } .site-header__navigation.is-open { max-height: min(75vh, 42rem); overflow-y: auto; border-top-width: 2px; opacity: 1; pointer-events: auto; } .site-header__mobile-heading { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--container-padding); border-bottom: var(--border); color: var(--colour-graphite); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; letter-spacing: .1em; line-height: 1; text-transform: uppercase; } .site-header__mobile-heading span { color: var(--colour-signal-orange); } .site-header__nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0 var(--container-padding); } .site-header__nav-list li, .site-header__nav-list li + li { min-width: 0; border-bottom: var(--border); } .site-header__nav-list a { width: 100%; min-height: 3.25rem; gap: var(--space-2); font-size: var(--text-label); } .site-header__nav-list a span { display: inline-block; color: var(--colour-signal-orange); font-size: var(--text-meta); letter-spacing: .08em; } .site-header__nav-list a::after { top: .5rem; right: auto; bottom: .5rem; left: 0; width: 2px; height: auto; transform: scaleY(0); } .site-header__nav-list a:hover::after, .site-header__nav-list a[aria-current="page"]::after { transform: scaleY(1); } .site-header__nav-contact { display: flex; } .site-header__mobile-cta { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; margin: var(--space-4) var(--container-padding); padding: var(--space-3) var(--space-4); border: 1px solid var(--colour-signal-orange); background: var(--colour-signal-orange); color: var(--colour-paper-bright); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; letter-spacing: .07em; line-height: 1; text-decoration: none; text-transform: uppercase; } }
@media (max-width: 40rem) { .site-header__coordinate-inner span:last-child { display: none; } .site-header__coordinate-inner { min-height: 1.65rem; } .site-header__main-inner { min-height: 4.15rem; gap: var(--space-2); } .site-header__logo { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; } .site-header__brand { gap: .5rem; } .site-header__brand-name { font-size: .8125rem; } .site-header__brand-subtitle { font-size: .5rem; } .site-header__toggle-label { font-size: .6875rem; } .site-header__toggle { padding-inline: .5rem; } .site-header__nav-list { grid-template-columns: 1fr; } .site-header__ticker-inner { gap: var(--space-3); } }
@media (prefers-reduced-motion: reduce) { .site-header__navigation, .site-header__toggle-icon span, .site-header__nav-list a::after { transition: none; } }