/* Independent implementation inspired by the user-supplied CodePen references. */
.preview-header {
  --glass-x: 24%;
  --glass-y: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1440px, calc(100% - 80px));
  min-height: 98px;
  padding: 14px 32px;
  grid-template-columns: 126px minmax(0, 1fr) auto;
  gap: 26px;
  isolation: isolate;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 64%);
  border-radius: 28px;
  box-shadow: 0 16px 42px rgb(25 46 68 / 10%), 0 3px 10px rgb(25 46 68 / 5%), inset 0 1px 0 rgb(255 255 255 / 95%);
}
.preview-header::before,.preview-header::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.preview-header::before {
  z-index: -2;
  background: rgb(255 255 255 / 23%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
}
.preview-header::after {
  z-index: -1;
  background: radial-gradient(ellipse at var(--glass-x) var(--glass-y), rgb(255 255 255 / 48%), transparent 56%), linear-gradient(125deg, rgb(255 255 255 / 42%), rgb(255 255 255 / 5%) 45%, rgb(201 218 233 / 16%) 78%, rgb(255 255 255 / 30%));
  box-shadow: inset 1px 2px 2px rgb(255 255 255 / 92%), inset -1px -2px 3px rgb(255 255 255 / 62%), inset 0 0 0 1px rgb(255 255 255 / 25%), inset 0 -5px 12px rgb(27 56 85 / 5%);
}
@supports (backdrop-filter: url('#lanthome-glass-refraction')) {
  @media(min-width:990px) {
    .preview-header::before { backdrop-filter: blur(9px) saturate(145%) url('#lanthome-glass-refraction'); }
  }
}
.preview-header .brand { width: 104px; height: 68px; filter: drop-shadow(0 1px 1px rgb(255 255 255 / 55%)); }
.preview-header .brand img { width: 104px; height: 68px; object-fit: contain; }
.preview-header .desktop-nav > a,.preview-header .nav-trigger {
  color: #18354f;
  text-shadow: 0 1px 0 rgb(255 255 255 / 60%);
  border-radius: 18px;
  transition: color .2s, background-color .2s, box-shadow .2s;
}
.preview-header .desktop-nav > a { padding: 10px 5px; }
.preview-header .nav-trigger { padding: 10px 5px; }
.preview-header .desktop-nav > a:hover,.preview-header .nav-trigger:hover,
.preview-header .nav-group.open > .nav-trigger {
  color: #103b78;
  background: rgb(255 255 255 / 38%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%), 0 2px 6px rgb(16 59 120 / 5%);
}
.preview-header .contact-button {
  min-width: 132px;
  padding: 12px 20px;
  font-size: 15px;
  border-radius: 22px;
  border: 1px solid rgb(255 255 255 / 32%);
  background: linear-gradient(145deg, #29558b, #103b78 60%, #103567);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 36%), 0 5px 12px rgb(16 59 120 / 15%);
}
.preview-header .contact-button:hover { background: linear-gradient(145deg, #34679f, #103b78); }
.preview-header .dropdown {
  background: rgb(250 251 249 / 89%);
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
  box-shadow: 0 16px 40px rgb(25 46 68 / 13%), inset 0 1px 1px #fff;
}
.preview-header .dropdown a { border-radius: 9px; }
.preview-header .dropdown a:hover { background: rgb(16 59 120 / 5%); }
.liquid-glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
@media(min-width:990px) {
  .preview-header .desktop-nav { gap: clamp(14px,1.5vw,22px); }
  .preview-header .desktop-nav > a,.preview-header .nav-trigger { font-size: 16px; }
}
@media(min-width:990px) and (max-width:1099px) {
  .preview-header { padding-inline: 24px; grid-template-columns: 110px minmax(0,1fr) auto; gap: 20px; }
  .preview-header .desktop-nav { gap: 12px; }
  .preview-header .desktop-nav > a,.preview-header .nav-trigger { font-size: 15px; }
}
@media(max-width:989px) {
  .preview-header { grid-template-columns: minmax(0,1fr) auto 28px; border-radius: 26px; min-height: 78px; padding: 10px 22px; gap: 18px; }
  .preview-header .brand,.preview-header .brand img { width: 84px; height: 55px; }
  .preview-header .desktop-nav {
    background: rgb(250 251 249 / 93%);
    border: 1px solid rgb(255 255 255 / 80%);
    border-radius: 24px;
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    backdrop-filter: blur(20px) saturate(130%);
    box-shadow: 0 16px 40px rgb(25 46 68 / 13%), inset 0 1px 1px #fff;
  }
  .preview-header .dropdown { background: rgb(255 255 255 / 30%); border: 0; border-left: 2px solid rgb(16 59 120 / 22%); border-radius: 0 14px 14px 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .preview-header .mobile-toggle { border-radius: 50%; width: 28px; height: 32px; }
  .preview-header .mobile-toggle:hover { background: rgb(255 255 255 / 40%); }
}
@media(max-width:600px) {
  .preview-header { width: calc(100% - 32px); min-height: 74px; padding: 10px 16px; gap: 12px; border-radius: 24px; }
  .preview-header .brand,.preview-header .brand img { width: 76px; height: 50px; }
  .preview-header .contact-button { min-width: 0; padding: 10px 12px; font-size: 12px; border-radius: 18px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .preview-header::before { background: rgb(250 251 249 / 95%); }
}
@media(prefers-reduced-transparency: reduce) {
  .preview-header::before,.preview-header .desktop-nav,.preview-header .dropdown { background: #fafbf9; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media(prefers-reduced-motion: reduce) { .preview-header::after { background: linear-gradient(125deg,#ffffff66,#ffffff11); } }
@media(forced-colors:active) { .preview-header,.preview-header .desktop-nav,.preview-header .dropdown { background: Canvas; border: 1px solid CanvasText; } .preview-header::before,.preview-header::after { display: none; } .preview-header .contact-button { background: ButtonFace; color: ButtonText!important; } }