/* Shared Bespoke Glass rail and Gel controls for the site header. */
/* Place the header blur behind the controls so the open menu can sample the page. */
header:has(> .brand[data-bbb-polished]) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
header:has(> .brand[data-bbb-polished])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(42, 32, 17, .61), rgba(8, 10, 11, .66) 62%);
  -webkit-backdrop-filter: blur(14px) saturate(1.16);
  backdrop-filter: blur(14px) saturate(1.16);
}
header .brand[data-bbb-polished] ~ :is(nav, .menu) {
  background: radial-gradient(ellipse at 22% -25%, rgba(255, 235, 190, .18), transparent 66%),
              linear-gradient(155deg, rgba(142, 117, 80, .17), rgba(23, 24, 25, .21) 54%, rgba(103, 81, 50, .16));
  border-color: rgba(239, 217, 168, .43);
  box-shadow: inset 0 1px 1px rgba(255, 244, 213, .34), inset 0 -3px 6px rgba(7, 7, 8, .36), 0 4px 14px rgba(0, 0, 0, .24);
}
header .brand[data-bbb-polished] ~ .nav-cta {
  --gel-pressure: 164, 246, 208;
  color: #f2f8e9;
  background: radial-gradient(ellipse at 26% -28%, rgba(206, 255, 230, .60), transparent 65%),
              radial-gradient(ellipse at 78% 122%, rgba(63, 193, 153, .36), transparent 64%),
              linear-gradient(160deg, rgba(34, 113, 86, .61), rgba(12, 53, 42, .76) 58%, rgba(15, 80, 59, .64));
  border-color: rgba(231, 224, 178, .61);
  box-shadow: inset 0 1px 2px rgba(235, 255, 233, .51), inset 0 0 0 2px rgba(189, 242, 208, .10),
              inset 0 -5px 9px -4px rgba(0, 24, 17, .72), 0 4px 14px rgba(6, 30, 23, .38);
  min-height: 44px !important;
  transform: none;
}
header .brand[data-bbb-polished] ~ .nav-cta > span {
  background: radial-gradient(ellipse at 30% 0%, #fff9e2, transparent 58%),
              linear-gradient(145deg, #fff3cb, #e7c674 67%, #bc903f);
  box-shadow: inset 0 1px 1px #fff5d6, inset 0 -2px 4px rgba(128, 88, 31, .34), 0 2px 5px rgba(0, 0, 0, .36);
}
header .brand[data-bbb-polished] ~ .menu {
  --gel-pressure: 255, 226, 161;
  color: #fae8b6;
  border-radius: 15px;
  min-width: 44px;
  min-height: 44px;
}
header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu) {
  transform-origin: center;
  transition: box-shadow .18s ease, filter .18s ease;
}
header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu):is(:hover, [aria-expanded="true"]) {
  filter: brightness(1.12);
}
header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu):active,
header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu).gel-down {
  filter: brightness(1.2);
  box-shadow: inset 4px 0 10px rgba(var(--gel-pressure), .34), inset -4px 0 10px rgba(var(--gel-pressure), .26), inset 0 -3px 6px rgba(5, 8, 5, .40);
}
header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu):focus-visible,
header .brand[data-bbb-polished] ~ nav a:focus-visible {
  outline: 2px solid #f6dda0;
  outline-offset: 2px;
}
footer .footer-top img[data-bbb-footer-logo] {
  display: block;
  height: auto;
  max-width: 100%;
  /* Keep the mark above the decorative viewport fade. */
  position: relative;
  z-index: 7;
  filter: brightness(1.07) drop-shadow(0 1px 5px rgba(231, 189, 101, .20));
}
#site-footer { scroll-margin-top: 76px; }

@keyframes header-gel-press { to { scale: 1.04 .92; } }
@keyframes header-gel-release {
  0%, 15% { scale: 1.04 .92; }
  62% { scale: .995 1.01; }
  100% { scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu).gel-down {
    animation: header-gel-press .085s ease-out forwards !important;
  }
  header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu).gel-up {
    animation: header-gel-release .23s cubic-bezier(.2, .75, .3, 1) both !important;
  }
}

header nav .nav-bub { display: none; }
@media (min-width: 841px) {
  header .brand[data-bbb-polished] ~ nav.has-gel-lens {
    position: relative;
    isolation: isolate;
    background: radial-gradient(115px 36px at var(--rail-light-x, 50%) 5%,
                  rgba(244, 203, 129, var(--rail-light, 0)), transparent 100%),
                linear-gradient(170deg, rgba(124, 101, 65, .18), rgba(19, 22, 23, .31) 55%, rgba(74, 58, 36, .19));
    border-color: rgba(231, 205, 153, .34);
    box-shadow: inset 0 1px 1px rgba(255, 239, 200, .23), inset 0 -3px 6px rgba(4, 5, 7, .40),
                0 5px 16px rgba(0, 0, 0, .18);
  }
  header nav.has-gel-lens.gel-hovering { --rail-light: .19; }
  header nav.has-gel-lens a {
    position: relative;
    z-index: 1;
  }
  header nav.has-gel-lens a:is(:hover, :focus-visible, [aria-current="page"]) {
    background: transparent;
    box-shadow: none;
    color: #fff1c9;
  }
  header nav.has-gel-lens a[aria-current="page"] .soon-tag {
    background: rgba(33, 24, 13, .65);
  }
  header nav.has-gel-lens .nav-bub {
    display: block;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    z-index: 0;
    width: 0;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    translate: var(--bx, 0px) 0;
    background: radial-gradient(ellipse at var(--gel-light-x, 36%) var(--gel-light-y, 12%),
                  rgba(255, 234, 183, var(--lens-light, .22)), transparent 70%),
                linear-gradient(180deg, rgba(255, 229, 165, .14), rgba(255, 229, 165, .035) 54%, rgba(255, 216, 140, .15));
    box-shadow: inset 0 0 0 1px rgba(247, 223, 165, .32), inset 0 1px 2px rgba(255, 245, 216, .48),
                inset 0 -4px 7px rgba(206, 164, 88, .19), 0 2px 7px rgba(0, 0, 0, .32);
    transition: opacity .13s ease-out;
  }
  header nav.has-gel-lens .nav-bub.has-position {
    transition: translate .34s cubic-bezier(.24,.75,.26,1), width .34s cubic-bezier(.24,.75,.26,1),
                opacity .13s ease-out, scale .16s ease-out;
  }
  header nav.has-gel-lens.gel-hovering .nav-bub { --lens-light: .38; }
  header nav.has-gel-lens .nav-bub.on { opacity: 1; }
  header nav.has-gel-lens .nav-bub.sq {
    scale: 1.018 .86;
    box-shadow: inset 3px 0 9px rgba(255, 233, 179, .34), inset -3px 0 9px rgba(255, 233, 179, .29),
                inset 0 0 0 1px rgba(245, 217, 148, .40);
  }
}

/* Keep the full rail off narrow tablets, where its longest label crowds the CTA. */
@media (min-width: 761px) and (max-width: 840px) {
  header .brand[data-bbb-polished] ~ .nav-cta { margin-left: auto; }
  header .brand[data-bbb-polished] ~ .menu { display: block; }
  header .brand[data-bbb-polished] ~ nav {
    display: none !important;
    position: absolute;
    top: calc(100% + 6px);
    left: 12px;
    right: 12px;
    margin: 0;
    padding: 8px;
    border-radius: 22px;
    flex-direction: column;
    align-items: stretch;
    z-index: 60;
  }
  header .brand[data-bbb-polished] ~ nav.open { display: flex !important; }
  header .brand[data-bbb-polished] ~ nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 15px;
  }
}
@media (max-width: 840px) {
  header .brand[data-bbb-polished] ~ nav {
    max-height: calc(100dvh - 106px);
    overflow-y: auto;
  }
  header .brand[data-bbb-polished] ~ nav a { flex-shrink: 0; }
  header .brand[data-bbb-polished] ~ nav a+a { border-top: 0; }
  header:has(> .brand[data-bbb-polished] ~ nav.open)::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(9, 10, 10, .80);
  }
  header .brand[data-bbb-polished] ~ nav.open {
    background: #231e19;
    box-shadow: inset 0 1px 2px rgba(255, 243, 213, .46), inset 0 0 0 2px rgba(255, 237, 200, .06),
                inset 0 -5px 10px rgba(6, 7, 9, .28), 0 14px 30px rgba(0, 0, 0, .35);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    header .brand[data-bbb-polished] ~ nav.open {
      background: radial-gradient(ellipse at 84% -20%, rgba(250, 224, 172, .26), transparent 57%),
                  linear-gradient(153deg, rgba(47, 42, 34, .31), rgba(17, 21, 25, .36) 56%, rgba(50, 38, 23, .40));
      -webkit-backdrop-filter: blur(10px) saturate(1.24) brightness(.53);
      backdrop-filter: blur(10px) saturate(1.24) brightness(.53);
    }
  }
}
/* The navigation and button are hit targets above a shared glass contour. */
.menu-gel-surface { display: none; }
@media (max-width: 840px) {
  header .brand[data-bbb-polished] ~ nav.open.gel-connected {
    right: var(--gel-menu-inset, 12px);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  header .brand[data-bbb-polished] ~ nav.open.gel-connected ~ .menu {
    position: relative;
    z-index: 61;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  header .brand[data-bbb-polished] ~ nav.open.gel-connected ~ .menu-gel-surface {
    display: block;
    position: absolute;
    inset: 0 0 auto;
    z-index: 59;
    pointer-events: none;
  }
  .menu-gel-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: var(--menu-gel-outline);
    background: #231e19;
  }
  .menu-gel-surface svg { position: relative; display: block; }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .menu-gel-surface::before {
      background: radial-gradient(ellipse at 85% 0%, rgba(255, 230, 186, .24), transparent 57%),
                  linear-gradient(153deg, rgba(47, 42, 34, .31), rgba(17, 21, 25, .36) 56%, rgba(50, 38, 23, .40));
      -webkit-backdrop-filter: blur(10px) saturate(1.24) brightness(.53);
      backdrop-filter: blur(10px) saturate(1.24) brightness(.53);
    }
  }
  header .brand[data-bbb-polished] ~ nav.gel-disclosing {
    pointer-events: none;
  }
  header .brand[data-bbb-polished] ~ nav.gel-disclosing:not(.gel-row-exit) a:not(:focus-visible) {
    opacity: 0;
  }
}
@media (max-width: 840px) and (prefers-reduced-motion: no-preference) {
  header .brand[data-bbb-polished] ~ nav.open.gel-connected a:not(:focus-visible) {
    translate: 0 0;
    scale: 1;
    transform-origin: left center;
    transition: opacity .14s ease-out, translate .19s cubic-bezier(.22,.8,.28,1),
                scale .19s cubic-bezier(.22,.8,.28,1);
    transition-delay: var(--gel-row-delay, 0ms);
  }
  nav.gel-connected a:nth-of-type(2) { --gel-row-delay: 18ms; }
  nav.gel-connected a:nth-of-type(3) { --gel-row-delay: 36ms; }
  nav.gel-connected a:nth-of-type(4) { --gel-row-delay: 54ms; }
  nav.gel-connected a:nth-of-type(5) { --gel-row-delay: 72ms; }
  nav.gel-connected a:nth-of-type(n+6) { --gel-row-delay: 90ms; }
  header .brand[data-bbb-polished] ~ nav.open.gel-connected.gel-row-exit a {
    opacity: 0;
    transition: opacity 78ms ease-in-out;
    transition-delay: calc(70ms - var(--gel-row-delay, 0ms) * 7 / 9);
  }
  header .brand[data-bbb-polished] ~ nav.open.gel-disclosing:not(.gel-row-exit) a:not(:focus-visible) {
    translate: 0 6px;
    scale: .985;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu),
  header nav.has-gel-lens .nav-bub,
  header nav.has-gel-lens .nav-bub.has-position { transition: none; }
  header nav.has-gel-lens .nav-bub.sq { scale: 1; }
}
@media (prefers-reduced-transparency: reduce) {
  header:has(> .brand[data-bbb-polished])::before,
  header:has(> .brand[data-bbb-polished] ~ nav.open)::before {
    background: #15120e;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  header .brand[data-bbb-polished] ~ nav,
  header .brand[data-bbb-polished] ~ nav.open,
  header .brand[data-bbb-polished] ~ .menu {
    background: #211a13;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  header .brand[data-bbb-polished] ~ .nav-cta {
    background: #184632;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  header .brand[data-bbb-polished] ~ nav.has-gel-lens { background: #211a13; }
  header nav.has-gel-lens .nav-bub { background: #4b3922; }
  header nav.has-gel-lens.gel-hovering .nav-bub { background: #584226; }
  .menu-gel-surface::before {
    background: #211a13;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}