/* ==========================================================================
   Formium Alliance — Seamless header (SAMPLE, easy to remove)
   At the top of the page the header has no bar, border or glass: logo, links and
   Login sit directly on the page. Once scrolled (site adds .header-six-scroll
   past 100px) the compact glass pill fades in. To revert, delete the two tags
   that load formium-header-seamless.css / .js — nothing else was changed.
   ========================================================================== */

/* The glass layers fade in with the scroll state. The tint/border appears at once;
   the heavy SVG distortion only fades in AFTER the bar has finished resizing, so
   it never has to re-render a moving, changing-size area (that was the glitch). */
header .header-six::after { transition: opacity .5s var(--hdr-ease, ease); }
header .header-six::before { transition: opacity .4s ease .5s; }
header .header-six:not(.header-six-scroll)::before,
header .header-six:not(.header-six-scroll)::after { opacity: 0; }
header .header-six:not(.header-six-scroll)::before { transition: opacity .15s ease 0s; }

/* at the top, line the content up with the page container (no pill padding) */
@media (min-width: 1024px) {
  header .header-six:not(.header-six-scroll) { padding-left: 0 !important; padding-right: 0 !important; }
  header .header-six:not(.header-six-scroll) > .pl-3 { padding-left: 0 !important; }
  header .header-six:not(.header-six-scroll) > div:last-child { padding-right: 0 !important; }
}

/* the side containers' padding changes with the state too: ease it in step with the bar */
header .header-six > .pl-3, header .header-six > div:last-child {
  transition: padding var(--hdr-dur, .65s) var(--hdr-ease, cubic-bezier(.22, 1, .36, 1));
}

/* colour AND size changes ease together (a colour-only transition here used to make
   font-size / logo size snap on the first frame) */
header .header-six nav .nav-item-link-white,
header .header-six > .pl-3 img,
header .header-six .btn-v2-white,
header .header-six .btn-v2-white svg path { transition: all var(--hdr-dur, .65s) var(--hdr-ease, cubic-bezier(.22, 1, .36, 1)); }
header .header-six nav ul { transition: gap var(--hdr-dur, .65s) var(--hdr-ease, cubic-bezier(.22, 1, .36, 1)); }

/* ---------- Pages whose top section is LIGHT: dark header content until scrolled ---------- */
html.fa-tone-light header .header-six:not(.header-six-scroll) nav .nav-item-link-white { color: #0a0a0a !important; }
html.fa-tone-light header .header-six:not(.header-six-scroll) > .pl-3 img { filter: invert(1); }
html.fa-tone-light header .header-six:not(.header-six-scroll) .btn-v2-white { color: #0a0a0a !important; }
html.fa-tone-light header .header-six:not(.header-six-scroll) .btn-v2-white svg path { fill: #0a0a0a !important; }
html.fa-tone-light header .header-six:not(.header-six-scroll) .btn-v2-white::before { opacity: 0; }
html.fa-tone-light header .header-six:not(.header-six-scroll) .btn-v2-white::after {
  background: rgba(10, 10, 10, 0.03); border-color: rgba(10, 10, 10, 0.2); box-shadow: none;
}

/* ---------- Mobile / tablet menu button (three lines): minimal ----------
   Thin, short lines and just a hairline ring. (seamless.js still gives the button the
   site's glass class so the ring picks up the glass family; its heavy tint/distortion
   is switched off here on purpose.) */
header .header-six .nav-hamburger { position: relative; } /* keeps the site's 44px tap area; the visible ring is drawn smaller below */
/* 1px bars on whole-pixel positions: crisp and identical at every screen density */
header .header-six .nav-hamburger span:not(.sr-only) {
  position: absolute; left: 13.5px; width: 17px !important; height: 1px !important; border-radius: 1px;
  background: #fff !important; transition: background .4s ease, width .35s cubic-bezier(.22, 1, .36, 1);
}
header .header-six .nav-hamburger span:not(.sr-only):nth-of-type(2) { top: 15px; }
header .header-six .nav-hamburger span:not(.sr-only):nth-of-type(3) { top: 21px; }
header .header-six .nav-hamburger span:not(.sr-only):nth-of-type(4) { top: 27px; width: 11px !important; }   /* shorter last line */
header .header-six .nav-hamburger:hover span:not(.sr-only):nth-of-type(4),
header .header-six .nav-hamburger:active span:not(.sr-only):nth-of-type(4) { width: 17px !important; }
html.fa-tone-light header .header-six:not(.header-six-scroll) .nav-hamburger span:not(.sr-only) { background: #0a0a0a !important; }
/* hairline ring only */
header .header-six .nav-hamburger.btn-v2-white::before { opacity: 0 !important; }
header .header-six .nav-hamburger.btn-v2-white::after { inset: 4px !important; }
header .header-six .nav-hamburger.btn-v2-white::after {
  background: transparent !important; box-shadow: none !important; border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
html.fa-tone-light header .header-six:not(.header-six-scroll) .nav-hamburger.btn-v2-white::after { border-color: rgba(10, 10, 10, 0.14) !important; }
header .header-six .nav-hamburger.btn-v2-white:hover { transform: none; }

/* ---------- Safari / Firefox: real frosted glass where the SVG distortion cannot run ----------
   Chrome/Edge keep the site's liquid-glass distortion untouched. */
html.fa-nosvg header .header-six::before {
  -webkit-backdrop-filter: blur(12px) saturate(1.6) !important; backdrop-filter: blur(12px) saturate(1.6) !important; filter: none !important;
}
html.fa-nosvg .btn-v2-white::before, html.fa-nosvg .btn-white::before, html.fa-nosvg .btn-outline-white::before {
  -webkit-backdrop-filter: blur(8px) saturate(1.5) !important; backdrop-filter: blur(8px) saturate(1.5) !important; filter: none !important;
}