.site-header { position: relative; z-index: 100; background: var(--color-pearl-white); color: var(--color-petrol-blue); }
.site-header__top-rule { height: 2px; background: var(--color-petrol-blue); }
.site-header__info { border-bottom: 1px solid var(--color-brushed-aluminium); }
.site-header__info-inner { display: flex; width: min(100% - (var(--gutter) * 2), var(--container-max)); min-height: 2rem; align-items: center; justify-content: space-between; gap: var(--space-4); margin-inline: auto; }
.site-header__info p, .site-header__location { margin: 0; font-size: var(--font-size-micro); font-weight: 600; letter-spacing: var(--tracking-micro); line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.site-header__info p span { margin-inline: 0.25rem; color: var(--color-terracotta); }
.site-header__bar { border-bottom: 1px solid var(--color-brushed-aluminium); }
.site-header__inner { display: flex; width: min(100% - (var(--gutter) * 2), var(--container-max)); min-height: 4.75rem; align-items: center; gap: var(--space-5); margin-inline: auto; }
.site-header__brand { display: inline-flex; min-width: 0; align-items: center; gap: 0.625rem; flex: 0 0 auto; color: var(--color-petrol-blue); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1; text-decoration: none; white-space: nowrap; }
.site-header__brand img { width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; object-fit: contain; }
.site-header__navigation { min-width: 0; flex: 1 1 auto; }
.site-header__primary-links { display: flex; min-width: 0; align-items: center; justify-content: center; gap: clamp(0.75rem, 1.45vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.site-header__primary-links li, .site-header__primary-links li + li { display: flex; min-width: 0; margin: 0; padding: 0; }
.site-header__primary-links a { position: relative; display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--color-petrol-blue); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.2; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.site-header__primary-links a::after { position: absolute; bottom: 0.45rem; left: 0; width: 0; height: 1px; background: var(--color-terracotta); content: ""; transition: width var(--transition-fast); }
.site-header__primary-links a:hover::after, .site-header__primary-links a:focus-visible::after { width: 1.5rem; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.site-header__status { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--color-petrol-blue); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.07em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.site-header__status > span { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--color-eucalyptus-green); }
.site-header__cta { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0.6875rem 0.875rem; border: 1px solid var(--color-terracotta); border-radius: var(--radius-control); color: var(--color-petrol-blue); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.site-header__cta:hover { transform: translateY(-2px); background: var(--color-terracotta); color: var(--color-pearl-white); }
.site-header__toggle, .site-header__mobile-intro, .site-header__mobile-cta { display: none; }
@media (max-width: 74.9375rem) { .site-header__inner { min-height: 4.5rem; justify-content: space-between; } .site-header__toggle { position: relative; z-index: 2; display: inline-flex; width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; flex-direction: column; gap: 0.3125rem; padding: 0; border: 1px solid var(--color-petrol-blue); border-radius: var(--radius-control); background: var(--color-pearl-white); color: var(--color-petrol-blue); } .site-header__toggle span { display: block; width: 1.125rem; height: 1px; background: currentColor; transition: transform var(--transition-fast), opacity var(--transition-fast); } .site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.40625rem) rotate(45deg); } .site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.40625rem) rotate(-45deg); } .site-header__actions { display: none; } .site-header__navigation { position: fixed; z-index: 1; inset: 0; display: flex; width: 100vw; min-height: 100dvh; padding: calc(2rem + env(safe-area-inset-top)) var(--gutter) calc(2rem + env(safe-area-inset-bottom)); overflow-y: auto; flex-direction: column; justify-content: center; background: var(--color-pearl-white); opacity: 0; pointer-events: none; transform: translateY(-1rem); transition: opacity var(--transition-menu), transform var(--transition-menu); } .site-header__navigation.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } .site-header__mobile-intro { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); } .site-header__mobile-intro img { width: 8rem; height: 7rem; border-radius: var(--radius-panel); object-fit: cover; object-position: center; } .site-header__mobile-intro p { margin: 0; color: var(--color-ink); font-size: var(--font-size-small); } .site-header__primary-links { align-items: stretch; justify-content: flex-start; flex-direction: column; gap: 0; } .site-header__primary-links li { border-top: 1px solid var(--color-terracotta); } .site-header__primary-links li:last-child { border-bottom: 1px solid var(--color-terracotta); } .site-header__primary-links a { min-height: 3.75rem; font-family: var(--font-heading); font-size: clamp(2rem, 7vw, 3.25rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1; text-transform: none; } .site-header__primary-links a::after { display: none; } .site-header__mobile-cta { display: inline-flex; width: 100%; margin-top: var(--space-6); } .site-menu-open { overflow: hidden; } }
@media (max-width: 47.9375rem) { .site-header__info-inner { min-height: 1.875rem; justify-content: center; overflow-x: auto; } .site-header__location { display: none; } .site-header__info p { font-size: 0.5625rem; } .site-header__inner { min-height: 4.25rem; gap: var(--space-3); } .site-header__brand { gap: 0.5rem; font-size: 1rem; } .site-header__brand img { width: 2rem; height: 2rem; flex-basis: 2rem; } .site-header__navigation { padding-top: calc(5.5rem + env(safe-area-inset-top)); justify-content: flex-start; } }