.official-header,.topbar{--nav-surface:#fff;--nav-text:#102c45;--nav-muted:#375762;--nav-action:#00676d;--nav-on-action:#fff;--nav-line:rgba(11,41,56,.2)}
.official-header[data-theme="dark"],.topbar[data-theme="dark"]{--nav-text:#fff;--nav-muted:#d0e4e5;--nav-action:#d0eeea;--nav-on-action:#0b2938;--nav-line:rgba(255,255,255,.24)}
body .topbar{background:var(--nav-surface)!important;border-bottom-color:var(--nav-line)!important;color:var(--nav-text);transition:none}
body .shark-routebar a,body .topbar .brand,body .topbar nav a,body .topbar nav a:last-child{color:var(--nav-text)!important}
body .shark-routebar a:last-child,body .shark-mobile-consult,body .topbar .header-contact{background:var(--nav-action)!important;color:var(--nav-on-action)!important}
body .topbar nav a[aria-current="page"]{color:var(--nav-text)!important;text-decoration:underline;text-underline-offset:7px}
body .topbar nav a::after{background:var(--nav-action)}
body .official-header-menu-icon g[fill]{fill:var(--nav-text)}
body .official-header-menu-close-label{color:var(--nav-on-action)!important;font-size:12px}
body .official-header-menu-modal{background:var(--nav-surface)!important;color:var(--nav-text)!important;transition:none}
body .official-header-menu-modal .menu-title,body .official-header-menu-modal .menu-item a{color:var(--nav-text)!important}
body .official-header-menu-modal .menu-desc{color:var(--nav-muted)!important}
body .official-header-menu-modal .menu-item{border-top-color:var(--nav-line)}
body .official-header-menu-modal .menu-bottom-banner-inner{color:var(--nav-text)!important}
body .official-header[data-theme="dark"] .official-header-logo-img{--img:url('/assets/brand-logo-light.svg?v=20261007-sharkomode-1')!important}
body .topbar[data-theme="dark"] .brand::before{background:#9ee2e0}
.official-header-logo{cursor:pointer}
.official-header a:focus-visible,.official-header [tabindex]:focus-visible,.topbar a:focus-visible{outline:2px solid var(--nav-text);outline-offset:4px}
@media(prefers-reduced-motion:reduce){body .official-header-inner,body .topbar,body .official-header-menu-modal{transition:none}}
body .official-header-menu-mask{background:var(--nav-surface)!important}
body .official-header-menu-close-label{color:var(--nav-text)!important;left:-12px!important}

/* Let the animated home scene continue behind the navigation. Keep the
   reading header and expanded menu opaque so their content stays legible. */
body .official-header-inner{min-height:52px;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--nav-text);transition:none}
body .official-header .border-color{--width:212px!important;--height:48px!important;--img-width:210px!important;--img-height:32px!important;flex-shrink:0}
body .official-header-logo{min-width:0!important}
body .shark-routebar a:last-child{min-height:48px;padding-inline:20px}
body .official-header-menu{width:48px!important;height:48px!important;flex-shrink:0;box-sizing:border-box;background:transparent!important;color:var(--nav-text)!important;border:1px solid var(--nav-line)!important;border-radius:8px!important}
body .official-header-menu-icon{width:18px!important;height:18px!important}
body .official-header-menu:hover{border-color:var(--nav-text)!important}
body .shark-routebar a:not(:last-child):hover{text-decoration:underline;text-underline-offset:6px}
body.shark-reading .official-header{top:0}
body.shark-reading .official-header-inner{padding-block:12px!important;background:var(--nav-surface)!important}
@media(max-width:768px){
 body .official-header-inner{gap:12px!important;min-height:44px;padding-block:0!important}
 body .official-header .border-color{--width:148px!important;--height:44px!important;--img-width:146px!important;--img-height:23px!important}
 body .official-header-menu{width:44px!important;height:44px!important}
 body .shark-mobile-consult{min-height:44px;white-space:nowrap}
 body.shark-reading .official-header-inner{padding-block:12px!important}
}
@media(max-width:360px){
 body .official-header-inner{gap:8px!important}
 body .official-header .border-color{--width:130px!important;--img-width:128px!important;--img-height:20px!important}
}