/* V4: one glass surface for the floating navigation. Content stays opaque. */
.v3-site-header,
.v3-menu-dialog {
  --v4-nav-ink: var(--v4-ink, #102b3c);
  --v4-nav-blue: var(--v4-blue, #006d9b);
  --v4-nav-deep: var(--v4-blue-deep, #075f8d);
  --v4-nav-paper: #eef6fa;
  color: var(--v4-nav-ink);
}

.v3-site-header {
  background: transparent;
  border: 0;
  padding: 10px 12px;
  pointer-events: none;
}

.v3-nav-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1400px;
  min-height: 78px;
  gap: 20px;
  padding: 10px clamp(16px, 2vw, 28px);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 23px;
  background: linear-gradient(155deg, #f7fbfd, #eaf3f8);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 109, 155, .10), 0 9px 28px rgba(16, 43, 60, .11), 0 2px 5px rgba(16, 43, 60, .07);
  pointer-events: auto;
}

/* Blur is confined to the shell. Its children deliberately do not blur. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v3-nav-shell {
    background: linear-gradient(155deg, rgba(247, 251, 253, .93), rgba(234, 243, 248, .86));
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
  }
}

.v3-site-header .v3-brand {
  border-radius: 10px;
  padding-block: 2px;
}

.v3-header-call,
.v3-menu-call {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 999px;
  background-color: var(--v4-nav-deep);
  background-image: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .09) 46%, transparent 61%), linear-gradient(160deg, var(--v4-nav-blue), var(--v4-nav-deep));
  background-size: 220% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 10px rgba(7, 95, 141, .17);
  color: #fff;
  font-weight: 680;
  min-height: 50px;
  padding: 10px 16px;
  gap: 12px;
  transition: background-position 180ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.v3-header-call > span:first-child { gap: 2px; }
.v3-header-call .v3-call-channel { color: #fff; font-size: .75rem; font-weight: 450; }
.v3-header-call .v3-call-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
}

.v3-menu-toggle,
.v3-menu-close {
  border: 1px solid rgba(7, 95, 141, .43);
  border-radius: 999px;
  min-height: 50px;
  padding: 10px 17px;
  color: var(--v4-nav-deep);
  background: linear-gradient(155deg, rgba(255, 255, 255, .90), rgba(210, 231, 242, .85));
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(16, 43, 60, .05);
  font-weight: 680;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.v3-menu-toggle svg,
.v3-menu-close svg { width: 19px; height: 19px; }
.v3-menu-toggle svg path,
.v3-menu-close svg path { stroke-width: 1.9; }

/* Override earlier hover rules so touch does not retain the hover treatment. */
.v3-header-call:hover,
.v3-menu-call:hover { color: #fff; border-color: rgba(255, 255, 255, .46); background-color: var(--v4-nav-deep); }
.v3-menu-toggle:hover,
.v3-menu-close:hover { color: var(--v4-nav-deep); background: linear-gradient(155deg, rgba(255, 255, 255, .90), rgba(210, 231, 242, .85)); }

.v3-site-header a:focus-visible,
.v3-site-header button:focus-visible,
.v3-menu-dialog a:focus-visible,
.v3-menu-dialog button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--v4-nav-deep);
}

.v3-header-call:active,
.v3-menu-call:active,
.v3-menu-toggle:active,
.v3-menu-close:active { transform: translateY(1px); }

/* The full menu uses a solid material, avoiding a full-screen blur layer. */
.v3-menu-dialog {
  background: radial-gradient(ellipse at 95% 7%, rgba(0, 109, 155, .08), transparent 42%), #f7fafb;
  color: var(--v4-nav-ink);
}
.v3-menu-dialog::backdrop { background: rgba(16, 43, 60, .3); }
.v3-menu-top {
  max-width: 1400px;
  width: calc(100% - 24px);
  margin-block: 10px 0;
  min-height: 78px;
  padding: 10px clamp(16px, 2vw, 28px);
  border: 1px solid #fff;
  border-radius: 23px;
  background: linear-gradient(155deg, #f7fbfd, #eaf3f8);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 109, 155, .10), 0 5px 18px rgba(16, 43, 60, .07);
}
.v3-menu-body,
.v3-menu-bottom { max-width: 1400px; }
.v3-menu-main a { border-radius: 12px; transition: color 160ms ease, transform 160ms ease; }
.v3-menu-routes a { border-color: rgba(7, 95, 141, .16); transition: color 160ms ease, padding-inline 160ms ease; }
.v3-menu-main a,
.v3-menu-routes a,
.v3-menu-contact a,
.v3-menu-note { color: var(--v4-nav-ink); }
.v3-menu-main a[aria-current="page"],
.v3-menu-routes a[aria-current="page"] { color: var(--v4-nav-deep); }
.v3-menu-index,
.v3-menu-link-arrow,
.v3-menu-routes a span { color: var(--v4-nav-deep); }
.v3-menu-bottom { border-color: rgba(7, 95, 141, .16); }
.v3-nav-fallback a { color: var(--v4-nav-deep); }

@media (hover: hover) and (pointer: fine) {
  .v3-header-call:hover,
  .v3-menu-call:hover {
    background-position: 0 0, 0 0;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 6px 14px rgba(7, 95, 141, .24);
  }
  .v3-menu-toggle:hover,
  .v3-menu-close:hover {
    background: linear-gradient(155deg, #fff, #d5eaf5);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(16, 43, 60, .09);
  }
  .v3-menu-main a:hover { color: var(--v4-nav-deep); transform: translateX(2px); }
  .v3-menu-routes a:hover { color: var(--v4-nav-deep); padding-inline: 5px; }
}

@media (max-width: 850px) {
  .v3-nav-shell { gap: 12px; }
}
@media (max-width: 520px) {
  .v3-site-header { padding: 8px 10px; }
  .v3-nav-shell {
    min-height: 80px;
    padding: 9px 10px;
    gap: 8px;
    border-radius: 21px;
  }
  .v3-nav-shell .v3-brand img { width: 96px; }
  .v3-header-call {
    min-height: 60px;
    padding: 6px 11px;
    gap: 5px;
    font-size: .8125rem;
    line-height: 1.18;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 9px rgba(7, 95, 141, .13);
  }
  .v3-header-call .v3-call-word { display: block; }
  .v3-header-call .v3-call-channel { font-size: .6875rem; line-height: 1.2; }
  .v3-header-call .v3-call-arrow { display: none; }
  .v3-menu-toggle,
  .v3-menu-close { min-height: 48px; padding: 9px 10px; gap: 6px; font-size: .875rem; }
  .v3-menu-toggle { min-height: 60px; }
  .v3-menu-toggle svg,
  .v3-menu-close svg { width: 17px; height: 17px; }
  .v3-menu-top {
    width: calc(100% - 20px);
    min-height: 76px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 21px;
  }
  .v3-menu-top .v3-brand img { width: 100px; }
}
@media (max-width: 360px) {
  .v3-nav-shell { gap: 6px; padding-inline: 9px; }
  .v3-nav-shell .v3-brand img { width: 75px; }
  .v3-header-call { font-size: .8125rem; padding-inline: 9px; }
  .v3-menu-toggle { font-size: .8125rem; padding-inline: 9px; gap: 5px; }
}

@media (prefers-reduced-transparency: reduce) {
  .v3-nav-shell {
    background: linear-gradient(155deg, #f7fbfd, #eaf3f8);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .v3-menu-toggle,
  .v3-menu-close,
  .v3-menu-toggle:hover,
  .v3-menu-close:hover { background: linear-gradient(155deg, #fff, #d5eaf5); }
}
@media (prefers-reduced-motion: reduce) {
  .v3-site-header a,
  .v3-site-header button,
  .v3-menu-dialog a,
  .v3-menu-dialog button { transition: none; }
  .v3-header-call:hover,
  .v3-menu-call:hover,
  .v3-menu-toggle:hover,
  .v3-menu-close:hover,
  .v3-menu-main a:hover { transform: none; }
  .v3-header-call:hover,
  .v3-menu-call:hover { background-position: 120% 0, 0 0; }
  .v3-menu-routes a:hover { padding-inline: 0; }
}