:root { --site-header-height: 8.4rem; }
.site-header { position: relative; z-index: 900; min-height: var(--site-header-height); padding-top: .75rem; background: var(--color-pearl-white); }
.site-header__topline { width: min(100% - (var(--container-padding) * 2), var(--container-max)); margin: 0 auto .45rem; overflow: hidden; color: var(--color-mediterranean-blue); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; line-height: 1.2; text-align: right; white-space: nowrap; }
.site-header__topline span { margin-inline: .25rem; color: var(--color-coral); }
.site-header__shell { position: relative; width: min(100% - 2.5rem, var(--container-max)); margin-inline: auto; }
.site-header__bar { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; padding: .5rem .75rem .5rem 1rem; border: 1px solid var(--color-mediterranean-blue); border-radius: var(--radius-lg); background: var(--color-pearl-white); box-shadow: 0 4px 12px rgb(18 55 70 / 4%); }
.site-header__brand { display: inline-flex; flex: 0 1 auto; align-items: center; gap: .65rem; min-width: 0; color: var(--color-deep-harbour); text-decoration: none; }
.site-header__logo { flex: 0 0 2.625rem; width: 2.625rem; height: 2.625rem; object-fit: contain; }
.site-header__brand-copy { display: grid; min-width: 0; gap: .08rem; }
.site-header__brand-copy strong { overflow: hidden; font-size: 1.125rem; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.site-header__brand-copy small { color: var(--color-text-muted); font-size: .6875rem; line-height: 1.15; white-space: nowrap; }
.site-header__navigation { min-width: 0; margin-left: auto; }
.site-header__primary-list { display: flex; align-items: center; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.site-header__primary-list li, .site-header__primary-list li + li { margin: 0; padding: 0; }
.site-header__primary-list a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-deep-harbour); font-size: .875rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.site-header__primary-list a:hover { color: var(--color-mediterranean-blue); }
.site-header__search { flex: 0 0 auto; min-height: 2.75rem; padding-inline: .85rem; font-size: .875rem; white-space: nowrap; }
.site-header__toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: .55rem; border: 1px solid var(--color-mediterranean-blue); border-radius: var(--radius-sm); background: var(--color-pearl-white); }
.site-header__toggle span { display: block; width: 1.25rem; height: 2px; margin: 2px 0; background: var(--color-mediterranean-blue); transition: transform 180ms ease, opacity 180ms ease; }
.site-header__mobile-directory { display: none; }
.site-header--scrolled { position: sticky; top: 0; min-height: 5.5rem; padding-top: .5rem; background: rgb(248 247 242 / 88%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header--scrolled .site-header__topline { display: none; }
.site-header--scrolled .site-header__bar { min-height: 4.25rem; border-color: var(--color-brushed-silver); background: rgb(248 247 242 / 82%); box-shadow: var(--shadow-floating); }
@media (max-width: 68.75rem) { :root { --site-header-height: 5.75rem; } .site-header { position: sticky; top: 0; min-height: var(--site-header-height); padding-top: .5rem; background: rgb(248 247 242 / 88%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .site-header__topline { display: none; } .site-header__shell { width: min(100% - 1.5rem, var(--container-max)); } .site-header__bar { min-height: 4.25rem; border-color: var(--color-brushed-silver); box-shadow: var(--shadow-floating); } .site-header__navigation { position: fixed; z-index: 899; top: var(--site-header-height); right: 0; bottom: 0; left: 0; display: block; width: 100vw; max-width: 100vw; padding: 1.25rem max(1.125rem, calc((100vw - var(--container-max)) / 2)); overflow-y: auto; overflow-x: hidden; visibility: hidden; background: var(--color-pearl-white); opacity: 0; transform: translateY(-.5rem); transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease; } .site-header--menu-open .site-header__navigation { visibility: visible; opacity: 1; transform: translateY(0); height:100vh} .site-header__primary-list { display: none; } .site-header__mobile-directory { display: grid; gap: .5rem; max-width: 48rem; margin-inline: auto; } .site-header__mobile-directory a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .75rem; min-height: 4.5rem; padding: .75rem; border-bottom: 1px solid var(--color-brushed-silver); color: var(--color-deep-harbour); text-decoration: none; } .site-header__mobile-directory span { grid-row: span 2; color: var(--color-coral); font-size: .75rem; font-weight: 700; letter-spacing: .08em; } .site-header__mobile-directory strong { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; line-height: 1; } .site-header__mobile-directory small { color: var(--color-text-muted); font-size: .8125rem; line-height: 1.25; } .site-header__mobile-directory a:focus-visible { position: relative; z-index: 1; } .site-header__search { margin-left: auto; } .site-header__toggle { display: inline-flex; flex: 0 0 auto; flex-direction:column} .site-header--menu-open .site-header__toggle span:nth-child(1) { transform: translateY(6px) 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(-6px) rotate(-45deg); } .site-header-menu-open { overflow: hidden; } }
@media (max-width: 37.5rem) { .site-header__bar { gap: .55rem; padding-inline: .65rem; } .site-header__logo { flex-basis: 2.25rem; width: 2.25rem; height: 2.25rem; } .site-header__brand-copy strong { font-size: 1rem; } .site-header__brand-copy small { display: none; } .site-header__search { display: none; } .site-header__brand { margin-right: auto; } .site-header__navigation { padding-inline: 1.125rem; } }
@media (prefers-reduced-motion: reduce) { .site-header__navigation, .site-header__toggle span { transition: none; } }