/* Light glass keeps the original logo clear, then becomes more opaque on scroll. */
:root { --header-height:100px; }
html { scroll-padding-top:calc(var(--header-height) + 16px); }
.site-header {
  position:fixed; inset:0 0 auto; z-index:40; width:100%;
  height:var(--header-height); color:#25343b;
  background:transparent; border-bottom:1px solid rgba(255,255,255,.4);
  box-shadow:none;
  transition:background-color .32s ease,border-color .32s ease,box-shadow .32s ease;
}
/* Translucency spans the navigation, so the logo needs no separate backplate. */
.site-header::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,rgba(247,250,250,.9),rgba(247,250,250,.74));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:1; transition:opacity .32s ease;
}
.site-header.scrolled::before,.site-header.menu-open::before { opacity:0; }
.site-header.scrolled,.site-header.menu-open {
  height:var(--header-height); color:#25343b;
  background:rgba(255,255,255,.96); border-bottom-color:rgba(26,55,62,.09);
  box-shadow:0 6px 28px rgba(18,41,50,.09);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  transition:background-color .32s ease,border-color .32s ease,box-shadow .32s ease;
}
.site-header .brand {
  flex-shrink:0; padding:0; margin-left:0; background:transparent;
}
.site-header .header-logo { display:block; position:relative; overflow:hidden; width:166.4px; aspect-ratio:1784 / 536; }
.site-header .header-logo img { position:absolute; max-width:none; width:121.7489%; height:auto; left:-11.1547%; top:-20.1493%; }
.site-header .navlinks>a {
  position:relative; color:#34434b;
  transition:color .25s ease;
}
.site-header .navlinks>a.active,.site-header .navlinks>a:hover { color:#007d91; }
.site-header .navlinks>a.active:after { background:currentColor; }
.site-header.scrolled .navlinks>a,.site-header.menu-open .navlinks>a { color:#4b5559; }
.site-header.scrolled .navlinks>a.active,.site-header.scrolled .navlinks>a:hover,
.site-header.menu-open .navlinks>a.active,.site-header.menu-open .navlinks>a:hover { color:#007d91; }
.site-header :focus-visible { outline:2px solid #007d91; outline-offset:6px; }
.site-header .brand:focus-visible { outline-color:#007d91; outline-offset:4px; }
.site-header.scrolled :focus-visible,.site-header.menu-open :focus-visible { outline-color:#007d91; }
.site-header .menu-toggle { width:44px; height:44px; padding:10px; color:inherit; }
.site-header .menu-toggle span { width:24px; background:currentColor; transition:transform .25s,opacity .2s,background-color .25s; }
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.page-products .page-cover,.page-contact .page-cover,.page-faq .page-cover { padding-top:var(--header-height); }
#product-explorer,#questions,#inquiry-form { scroll-margin-top:0; }
@media(max-width:850px) {
  :root { --header-height:80px; }
  .site-header .header-logo { width:140px; }
}
@media(max-width:700px) {
  .site-header .navlinks { max-height:calc(100svh - var(--header-height)); overflow-y:auto; background:#fff; border-top:1px solid #edf0f0; }
  .site-header .navlinks>a { min-height:48px; padding:12px 0; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header,.site-header::before,.site-header.scrolled,.site-header.menu-open,
  .site-header .navlinks>a,.site-header .menu-toggle span { transition:none; }
}