/* User-approved shared navigation and footer refinement, 2026-10-27.
   The header overlays the first section; its reserved space belongs to the hero. */
#site-header{
 position:fixed;inset:0 0 auto;z-index:40;background:transparent;
 border:0;box-shadow:none;color:#172c4b;
 --nav-ink:#172c4b;--nav-hover:#365775;--nav-line:#63839b;
 transform:translateY(0);will-change:transform;
 transition:transform 220ms ease,color 180ms,backdrop-filter 180ms;
}
/* Keep the controls in the keyboard order while they slide above the viewport. */
#site-header.is-nav-hidden{transform:translateY(calc(-100% - 2px))}
#site-header.is-keyboard-mode:focus-within{transform:translateY(0)}
.nav-top-edge{position:fixed;inset:0 0 auto;height:12px;z-index:41;pointer-events:none}
@media(hover:hover) and (pointer:fine){.nav-top-edge.is-active{pointer-events:auto}}
#site-header.scrolled{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:blur(14px) saturate(.82);backdrop-filter:blur(14px) saturate(.82)}
#site-header[data-nav-tone="dark"]{--nav-ink:#fff;--nav-hover:#e1edf7;--nav-line:#d2e3ef;color:#fff}
#site-header .brand-registration{color:var(--nav-ink)}
#site-header .navigation>.nav-link,#site-header .navigation>.nav-dropdown>.nav-menu-toggle,#site-header .language-picker>summary{color:var(--nav-ink);text-shadow:0 1px 3px rgb(255 255 255 / .42)}
#site-header[data-nav-tone="dark"] .navigation>.nav-link,#site-header[data-nav-tone="dark"] .navigation>.nav-dropdown>.nav-menu-toggle,#site-header[data-nav-tone="dark"] .language-picker>summary{font-weight:500;text-shadow:0 1px 1px rgb(8 26 47 / .9),0 0 5px rgb(8 26 47 / .7)}
#site-header[data-nav-tone="dark"] .brand img{filter:drop-shadow(0 1px 2px rgb(8 26 47 / .5))}
#site-header .navigation>.nav-link:hover,#site-header .navigation>.nav-dropdown>.nav-menu-toggle:hover,#site-header .navigation>.nav-dropdown.open>.nav-menu-toggle{color:var(--nav-hover)}
#site-header .nav-link::after,#site-header .nav-menu-toggle::after{background:var(--nav-line)}
#site-header .menu-toggle span{background:var(--nav-ink);box-shadow:0 1px 3px rgb(255 255 255 / .25)}
#site-header .navigation>.nav-contact{
 align-self:center;justify-content:center;min-height:44px;padding:11px 18px;
 border:1px solid #7794a9;border-radius:5px;background:#829db1;color:#172c4b;
 font-weight:600;line-height:1.35;text-shadow:none;white-space:nowrap;
 transition:background-color 180ms,border-color 180ms;
}
#site-header .navigation>.nav-contact:hover{background:#536f86;border-color:#536f86;color:#fff}
#site-header[data-nav-tone] .navigation>.nav-contact{color:#172c4b;text-shadow:none}
#site-header[data-nav-tone] .navigation>.nav-contact:hover{color:#fff}
#site-header .navigation>.nav-contact::after{display:none}
#site-header a:focus-visible,#site-header button:focus-visible,#site-header summary:focus-visible{outline:2px solid var(--nav-line);outline-offset:5px}
#site-header .nav-panel,#site-header .language-menu{color:#172c4b;text-shadow:none}
#site-header .nav-panel button,#site-header .nav-panel a,#site-header .language-menu button{color:#172c4b;text-shadow:none}
#site-header.compact .navigation{background:#fff;color:#172c4b}
#site-header.compact .navigation>.nav-link,#site-header.compact .navigation>.nav-dropdown>.nav-menu-toggle{color:#172c4b;text-shadow:none}
#site-header.compact .navigation>.nav-contact{align-self:flex-start;width:auto;min-width:154px;min-height:44px;margin-top:17px;color:#172c4b;justify-content:center}
#site-header.compact .navigation>.nav-contact:hover{color:#fff}

/* Preserve the original hero content space while letting its imagery continue behind the header. */
#main>.gummy-hero{padding-top:var(--header-height);min-height:calc(390px + var(--header-height));aspect-ratio:auto}
#main>.hero{padding-top:var(--header-height);min-height:calc(680px + var(--header-height));height:min(900px,100svh)}
#main>.solutions-hero{padding-top:var(--header-height)}
#main>.about-hero{padding-top:calc(28px + var(--header-height));min-height:calc(390px + var(--header-height))}
.softgels-page #main>.gummy-hero{min-height:max(calc(360px + var(--header-height)),calc(100vw * 728 / 2160 + var(--header-height)))}
.powders-page #main>.gummy-hero,.drops-page #main>.gummy-hero,.energygels-page #main>.gummy-hero{min-height:max(calc(360px + var(--header-height)),calc(100vw / 3 + var(--header-height)))}
.oralstrips-page #main>.gummy-hero{min-height:max(calc(360px + var(--header-height)),calc(100vw * 761 / 2066 + var(--header-height)))}
@media(min-width:1600px){
 #main>.gummy-hero,#main>.about-hero{min-height:calc(420px + var(--header-height))}
 .softgels-page #main>.gummy-hero{min-height:max(calc(360px + var(--header-height)),calc(100vw * 728 / 2160 + var(--header-height)))}
 .powders-page #main>.gummy-hero,.drops-page #main>.gummy-hero,.energygels-page #main>.gummy-hero{min-height:max(calc(360px + var(--header-height)),calc(100vw / 3 + var(--header-height)))}
 .oralstrips-page #main>.gummy-hero{min-height:max(calc(360px + var(--header-height)),calc(100vw * 761 / 2066 + var(--header-height)))}
}
@media(max-width:1000px){#main>.hero{min-height:calc(650px + var(--header-height));height:auto}}
@media(max-width:900px){#main>.gummy-hero,#main>.about-hero{min-height:calc(340px + var(--header-height))}#main>.about-hero{padding-top:calc(25px + var(--header-height))}}
@media(max-width:760px){
 #main>.gummy-hero,#main>.about-hero{min-height:calc(320px + var(--header-height))}
 .tablets-page #main>.gummy-hero,.softgels-page #main>.gummy-hero,.powders-page #main>.gummy-hero,.drops-page #main>.gummy-hero,.oralstrips-page #main>.gummy-hero,.energygels-page #main>.gummy-hero{min-height:calc(330px + var(--header-height))}
 #main>.about-hero{padding-top:calc(26px + var(--header-height))}
 #main>.hero{min-height:calc(660px + var(--header-height))}
 #site-header .navigation>.nav-contact{padding-inline:20px}
}
@media(max-width:420px){#main>.hero{min-height:calc(750px + var(--header-height))}}
@media(prefers-reduced-motion:reduce){#site-header,#site-header .navigation>.nav-contact{transition:none}}