/**
 * Elementor mb-header — transparent shell + liquid glass pill (Figma)
 */

@property --mb-home-header-glass {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.mb-header,
body {
  --mb-z-header: 1000;
  --mb-space-2: 8px;
  --mb-space-3: 12px;
  --mb-space-4: 16px;
  --mb-space-5: 24px;
  --mb-space-6: 32px;
  --mb-space-9: 48px;
  --mb-radius-80: 80px;
  --mb-radius-sm: 8px;
  --mb-color-white: #ffffff;
  --mb-color-bg: #070708;
  --mb-color-text-primary: rgba(255, 255, 255, 0.92);
  --mb-color-text-secondary: rgba(255, 255, 255, 0.72);
  --mb-color-border-subtle: rgba(255, 255, 255, 0.12);
  --mb-gradient-accent: linear-gradient(26.25deg, #8104cb 0%, #ff00bb 99.992%);
  --mb-transition-fast: 0.15s ease;
  --mb-transition-base: 0.25s ease;
  --mb-shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.45);
  --mb-border-width-thin: 1px;
  --mb-header-glass-bg: rgba(255, 255, 255, 0.14);
  --mb-header-glass-blur: blur(18px) saturate(1.15);
  --mb-header-glass-border: rgba(255, 255, 255, 0.32);
  --mb-header-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --mb-header-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  --mb-glass-rim-gradient: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(255, 255, 255, 0.18) 32%,
    rgba(255, 255, 255, 0.05) 58%,
    rgba(255, 255, 255, 0.2) 100%
  );
  --mb-glass-fill-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.1) 42%,
    rgba(255, 255, 255, 0.05) 100%
  );
  --mb-glass-frost: blur(20px) saturate(1.18);
  --mb-glass-frost-mobile: blur(16px) saturate(1.12);
  --mb-glass-frame-shadow:
    0 8px 32px rgba(0, 0, 0, 0.16),
    0 2px 10px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  --mb-home-frame-inset: 12px;
  --mb-home-frame-radius: 36px;
  --mb-home-header-x: clamp(32px, 4vw, 64px);
  --mb-home-header-glass: 0;
  --mb-nav-link-stroke: 1px;
  --mb-nav-link-stroke-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    1px 0 0 #000,
    -1px 0 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
  --mb-header-icon-contrast-filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75))
    drop-shadow(1px 0 0 rgba(0, 0, 0, 0.85))
    drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.85))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.85));
}

.elementor-location-header,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.elementor-location-header .elementor-widget-container {
  background: transparent !important;
  box-shadow: none !important;
}

.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: var(--mb-z-header);
  width: 100%;
  padding: var(--mb-space-2) var(--mb-gutter);
  background: transparent !important;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}

.mb-header {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0;
  background: transparent;
}

/* Accessibility skip link — off-screen until keyboard focus */
.mb-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mb-skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 16px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  border-radius: 8px;
  background: var(--mb-dark);
  color: var(--mb-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.mb-header__pill {
  position: relative;
  max-width: var(--mb-content-max);
  margin-inline: auto;
  box-sizing: border-box;
  min-height: 3.5rem;
  border-radius: var(--mb-radius-80) !important;
  border: 1px solid var(--mb-header-glass-border) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.08) 100%
  ) !important;
  backdrop-filter: var(--mb-header-glass-blur) !important;
  -webkit-backdrop-filter: var(--mb-header-glass-blur) !important;
  box-shadow: var(--mb-header-glass-shadow), var(--mb-header-glass-inset) !important;
  isolation: isolate;
  overflow: hidden;
}

/* Games dropdown escapes pill clip (main.css :has rules load before this file) */
.mb-header__pill:has(.nav-games:hover),
.mb-header__pill:has(.nav-games:focus-within),
.mb-header__pill:has(.nav-games.is-open) {
  overflow: visible;
}

.mb-header__nav:has(.nav-games:hover),
.mb-header__nav:has(.nav-games:focus-within),
.mb-header__nav:has(.nav-games.is-open),
.mb-header__nav-list:has(.nav-games:hover),
.mb-header__nav-list:has(.nav-games:focus-within),
.mb-header__nav-list:has(.nav-games.is-open) {
  overflow: visible;
}

.elementor-location-header:has(.nav-games:hover),
.elementor-location-header:has(.nav-games:focus-within),
.elementor-location-header:has(.nav-games.is-open) {
  overflow: visible;
  z-index: calc(var(--mb-z-header) + 100);
}

/* Home hero top: black text stroke on nav links (pill stays transparent) */
body.home.mb-header-hero-top .mb-header__nav-link,
body.home.mb-header-hero-top .mb-header__nav .nav-games__trigger.mb-header__nav-link {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke-width: var(--mb-nav-link-stroke) !important;
  -webkit-text-stroke-color: #000 !important;
  text-shadow: var(--mb-nav-link-stroke-shadow) !important;
  paint-order: stroke fill !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

body.home.mb-header-hero-top .mb-header .header-action,
body.home.mb-header-hero-top .elementor-location-header .header-action {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  box-shadow: none !important;
}

body.home.mb-header-hero-top .mb-header .header-action__icon,
body.home.mb-header-hero-top .elementor-location-header .header-action__icon {
  filter: var(--mb-header-icon-contrast-filter);
}

body.home.mb-header-hero-top .mb-header .header-action__count,
body.home.mb-header-hero-top .elementor-location-header .header-action__count {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) !important;
}

.mb-header__pill::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--mb-glass-rim-gradient);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  z-index: 1;
}

body.mb-header-scrolled .elementor-location-header {
  padding-top: 0 !important;
}

body.mb-header-scrolled:not(.home) .elementor-location-header {
  background: rgba(7, 7, 8, 0.08) !important;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

body.mb-header-scrolled:not(.home) .mb-header__pill {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.08) 100%
  ) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Homepage desktop — full-width glass header cap on banner frame */
@media (min-width: 769px) {
  body.home {
    position: relative;
    background: var(--mb-dark) !important;
    padding: var(--mb-home-frame-inset) !important;
  }

  body.home.mb-header-hero-top #site-header,
  body.home.mb-header-hero-top .elementor-location-header,
  body.home #site-header,
  body.home .elementor-location-header {
    position: absolute !important;
  }

  body.home.mb-header-scrolled #site-header,
  body.home.mb-header-scrolled .elementor-location-header {
    position: fixed !important;
  }

  body.admin-bar.home .elementor-location-header {
    top: calc(32px + var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
  }

  body.home .elementor-location-header {
    position: absolute;
    top: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
    left: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
    right: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
    width: auto;
    z-index: calc(var(--mb-z-header) + 1);
    padding: 0 0 calc(var(--mb-home-frame-inset) * var(--mb-home-header-glass, 0)) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition:
      top 0.35s ease,
      left 0.35s ease,
      right 0.35s ease,
      padding 0.35s ease;
  }

  body.home.mb-header-scrolled .elementor-location-header {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  body.admin-bar.home.mb-header-scrolled .elementor-location-header {
    top: 32px !important;
  }

  body.home .elementor-location-header .e-con,
  body.home .elementor-location-header .e-con-inner,
  body.home .elementor-location-header .elementor-widget-container,
  body.home .elementor-location-header .elementor-element-0b14c22 {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
  }

  body.home .mb-header {
    width: 100%;
    padding: 0 !important;
  }

  body.home .mb-header__pill {
    --mb-glass: var(--mb-home-header-glass, 0);
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: var(--mb-space-4);
    width: 100%;
    max-width: none !important;
    min-height: auto;
    margin: 0;
    padding: 20px var(--mb-home-header-x) 16px !important;
    border: none !important;
    border-radius:
      var(--mb-home-frame-radius)
      var(--mb-home-frame-radius)
      calc(var(--mb-home-frame-radius) * var(--mb-glass))
      calc(var(--mb-home-frame-radius) * var(--mb-glass)) !important;
    background: rgba(255, 255, 255, calc(0.1 * var(--mb-glass))) !important;
    backdrop-filter: blur(calc(18px * var(--mb-glass))) saturate(calc(1 + 0.15 * var(--mb-glass))) !important;
    -webkit-backdrop-filter: blur(calc(18px * var(--mb-glass))) saturate(calc(1 + 0.15 * var(--mb-glass))) !important;
    box-shadow:
      0 calc(4px * var(--mb-glass)) calc(24px * var(--mb-glass)) rgba(0, 0, 0, calc(0.12 * var(--mb-glass))),
      inset 0 1px 0 rgba(255, 255, 255, calc(0.22 * var(--mb-glass))),
      inset 0 0 0 1px rgba(255, 255, 255, calc(0.32 * var(--mb-glass))) !important;
    overflow: hidden;
    isolation: isolate;
  }

  body.home .mb-header__pill::before {
    display: block !important;
    border-radius: inherit !important;
    opacity: var(--mb-glass);
  }

  body.home .mb-header__logo,
  body.home .mb-header__nav,
  body.home .mb-header-actions-slot,
  body.home .mb-header .header-actions {
    position: relative;
    z-index: 1;
  }

  body.home .mb-header__nav-list {
    justify-content: flex-end;
    gap: clamp(20px, 2.5vw, 32px);
  }

  body.home .mb-header__logo {
    flex: 0 0 auto;
    margin-right: auto;
  }

  body.home .mb-header__nav {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
  }

  body.home .mb-header-actions-slot,
  body.home .mb-header .header-actions {
    flex: 0 0 auto;
    margin-left: var(--mb-space-4);
  }

  body.home.mb-header-hero-top .mb-header__pill {
    justify-content: space-between !important;
    padding: 20px var(--mb-home-header-x) 16px !important;
  }

  body.home.mb-header-hero-top .mb-header__logo {
    margin-right: 0;
  }

  body.home.mb-header-hero-top .mb-header__nav {
    margin-left: auto;
    gap: clamp(24px, 3vw, 40px);
  }

  body.home.mb-header-hero-top .mb-header-actions-slot,
  body.home.mb-header-hero-top .mb-header .header-actions {
    display: none !important;
  }

  body.home .mb-header__pill:has(.nav-games:hover),
  body.home .mb-header__pill:has(.nav-games:focus-within),
  body.home .mb-header__pill:has(.nav-games.is-open) {
    overflow: visible !important;
  }

  body.home .elementor-location-header:has(.nav-games:hover),
  body.home .elementor-location-header:has(.nav-games:focus-within),
  body.home .elementor-location-header:has(.nav-games.is-open) {
    overflow: visible !important;
    z-index: calc(var(--mb-z-header, 1000) + 120) !important;
  }

  body.home #hero .hero-stage {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Homepage desktop — #site-header + hero share one liquid-glass frame (Figma) */
  body.home #site-header {
    position: absolute;
    top: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
    left: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
    right: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
    width: auto;
    z-index: calc(var(--mb-z-header) + 1);
    background: transparent !important;
    box-shadow: none !important;
    transition:
      top 0.35s ease,
      left 0.35s ease,
      right 0.35s ease;
  }

  body.admin-bar.home #site-header {
    top: calc(32px + var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
  }

  body.home.mb-header-scrolled #site-header {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  body.admin-bar.home.mb-header-scrolled #site-header {
    top: 32px !important;
  }

  body.home #site-header .header-inner {
    --mb-glass: var(--mb-home-header-glass, 0);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mb-space-4);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px var(--mb-home-header-x) 16px;
    box-sizing: border-box;
    border: none;
    border-radius:
      var(--mb-home-frame-radius)
      var(--mb-home-frame-radius)
      calc(var(--mb-home-frame-radius) * var(--mb-glass))
      calc(var(--mb-home-frame-radius) * var(--mb-glass));
    background: rgba(255, 255, 255, calc(0.1 * var(--mb-glass)));
    backdrop-filter: blur(calc(18px * var(--mb-glass))) saturate(calc(1 + 0.15 * var(--mb-glass)));
    -webkit-backdrop-filter: blur(calc(18px * var(--mb-glass))) saturate(calc(1 + 0.15 * var(--mb-glass)));
    box-shadow:
      0 calc(4px * var(--mb-glass)) calc(24px * var(--mb-glass)) rgba(0, 0, 0, calc(0.12 * var(--mb-glass))),
      inset 0 1px 0 rgba(255, 255, 255, calc(0.22 * var(--mb-glass))),
      inset 0 0 0 1px rgba(255, 255, 255, calc(0.32 * var(--mb-glass)));
    isolation: isolate;
  }

  body.home.mb-header-hero-top #site-header .header-inner {
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: none;
    justify-content: space-between;
    padding: 20px var(--mb-home-header-x) 16px;
  }

  body.home.mb-header-hero-top #site-header .site-logo {
    margin-right: 0;
  }

  body.home.mb-header-hero-top #site-header .site-nav {
    margin-left: auto;
    gap: clamp(24px, 3vw, 40px);
  }

  body.home.mb-header-scrolled #site-header .header-inner {
    border-radius: var(--mb-radius-80) !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
  }

  body.home #site-header .site-logo {
    flex: 0 0 auto;
    margin-right: auto;
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 1px #000;
    text-shadow:
      1px 0 0 #000,
      -1px 0 0 #000,
      0 1px 0 #000,
      0 -1px 0 #000,
      1px 1px 0 #000;
    paint-order: stroke fill;
  }

  body.home #site-header .site-nav {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: clamp(20px, 2.5vw, 32px);
    min-width: 0;
  }

  body.home #site-header .header-actions {
    flex: 0 0 auto;
    margin-left: var(--mb-space-4);
  }

  body.home #site-header .site-nav a,
  body.home #site-header .nav-games__trigger {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke-width: var(--mb-nav-link-stroke) !important;
    -webkit-text-stroke-color: #000 !important;
    text-shadow: var(--mb-nav-link-stroke-shadow) !important;
    paint-order: stroke fill !important;
    font-weight: 500 !important;
    font-size: 14px !important;
  }

  body.home.mb-header-hero-top #site-header .header-actions {
    display: none;
  }

  body.home.mb-header-hero-top #site-header .header-action {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(0, 0, 0, 0.18) !important;
  }

  body.home #hero .hero-composition {
    width: 100% !important;
    max-width: none !important;
    padding-top: 72px !important;
    overflow: hidden !important;
    border-radius: var(--mb-home-frame-radius) !important;
    border: 1px solid var(--mb-header-glass-border) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: var(--mb-header-glass-shadow), var(--mb-header-glass-inset) !important;
  }

  body.home #hero .hero-composition::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border-radius: inherit !important;
    background: rgba(255, 255, 255, 0.1) !important;
    pointer-events: none !important;
  }
}

/* Shell pages desktop — theme #site-header glass pill (matches homepage nav) */
@media (min-width: 769px) {
  body:not(.home) #site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--mb-z-header);
    padding: var(--mb-space-2) var(--mb-gutter);
    background: transparent !important;
    box-shadow: none !important;
    transition:
      background 0.35s ease,
      backdrop-filter 0.35s ease,
      -webkit-backdrop-filter 0.35s ease;
  }

  body.admin-bar:not(.home) #site-header {
    top: 32px;
  }

  body:not(.home) #site-header .header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mb-space-4);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    min-height: 3.5rem;
    padding: 20px var(--mb-home-header-x) 16px;
    box-sizing: border-box;
    border-radius: var(--mb-radius-80) !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.08) 100%
    ) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    isolation: isolate;
    overflow: hidden;
  }

  body:not(.home) #site-header .header-inner::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--mb-glass-rim-gradient);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 1;
    z-index: 1;
  }

  body:not(.home) #site-header .header-inner:has(.nav-games:hover),
  body:not(.home) #site-header .header-inner:has(.nav-games:focus-within),
  body:not(.home) #site-header .header-inner:has(.nav-games.is-open) {
    overflow: visible;
  }

  body:not(.home) #site-header:has(.nav-games:hover),
  body:not(.home) #site-header:has(.nav-games:focus-within),
  body:not(.home) #site-header:has(.nav-games.is-open) {
    overflow: visible;
    z-index: calc(var(--mb-z-header) + 100);
  }

  body:not(.home) #site-header .site-logo {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin-right: auto;
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 1px #000;
    text-shadow:
      1px 0 0 #000,
      -1px 0 0 #000,
      0 1px 0 #000,
      0 -1px 0 #000,
      1px 1px 0 #000;
    paint-order: stroke fill;
  }

  body:not(.home) #site-header .site-nav {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: clamp(16px, 2vw, 28px);
    min-width: 0;
    margin-left: 0;
    overflow: visible;
  }

  body:not(.home) #site-header .site-nav a,
  body:not(.home) #site-header .nav-games__trigger {
    color: var(--color-text-muted, rgba(255, 255, 255, 0.72));
    white-space: nowrap;
  }

  body:not(.home) #site-header .site-nav a:hover,
  body:not(.home) #site-header .nav-games__trigger:hover {
    color: #fff;
  }

  body:not(.home) #site-header .header-actions {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin-left: var(--mb-space-4);
  }

  body.mb-header-scrolled:not(.home) #site-header {
    background: rgba(7, 7, 8, 0.08) !important;
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
  }

  body.mb-header-scrolled:not(.home) #site-header .header-inner {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.08) 100%
    ) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  }

  body:not(.home) .mb-header__pill {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mb-space-4);
    width: 100%;
    max-width: var(--mb-content-max);
    margin-inline: auto;
  }

  body:not(.home) .mb-header__logo {
    flex: 0 0 auto;
    margin-right: auto;
  }

  body:not(.home) .mb-header__nav {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 0;
    overflow: visible;
  }

  body:not(.home) .mb-header__nav-list {
    justify-content: flex-end;
    gap: clamp(16px, 2vw, 28px);
  }

  body:not(.home) .mb-header-actions-slot,
  body:not(.home) .mb-header .header-actions {
    flex: 0 0 auto;
    margin-left: var(--mb-space-4);
  }
}

/* Homepage mobile — scroll-linked glass (same motion as desktop) */
@media (max-width: 768px) {
  body.home {
    position: relative;
  }

  body.home.mb-header-hero-top #site-header,
  body.home.mb-header-hero-top .elementor-location-header,
  body.home #site-header,
  body.home .elementor-location-header {
    position: absolute !important;
  }

  body.home.mb-header-scrolled #site-header,
  body.home.mb-header-scrolled .elementor-location-header {
    position: fixed !important;
  }

  body.home #site-header {
    position: absolute;
    top: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)) + env(safe-area-inset-top, 0px));
    left: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
    right: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
    width: auto;
    z-index: calc(var(--mb-z-header) + 1);
    padding: 0 var(--mb-gutter) calc(var(--mb-home-frame-inset) * var(--mb-home-header-glass, 0));
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.admin-bar.home #site-header {
    top: calc(32px + var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
  }

  body.home.mb-header-scrolled #site-header {
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    padding-bottom: 8px;
  }

  body.admin-bar.home.mb-header-scrolled #site-header {
    top: 32px;
  }

  body.home #site-header .header-inner {
    --mb-glass: var(--mb-home-header-glass, 0);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mb-space-4);
    width: 100%;
    max-width: none;
    min-height: 3rem;
    padding: 12px var(--mb-space-4) !important;
    border: none !important;
    border-radius:
      var(--mb-home-frame-radius)
      var(--mb-home-frame-radius)
      calc(var(--mb-home-frame-radius) * var(--mb-glass))
      calc(var(--mb-home-frame-radius) * var(--mb-glass)) !important;
    background: rgba(255, 255, 255, calc(0.14 * var(--mb-glass))) !important;
    backdrop-filter: blur(calc(20px * var(--mb-glass))) saturate(calc(1 + 0.15 * var(--mb-glass))) !important;
    -webkit-backdrop-filter: blur(calc(20px * var(--mb-glass))) saturate(calc(1 + 0.15 * var(--mb-glass))) !important;
    box-shadow:
      0 calc(8px * var(--mb-glass)) calc(28px * var(--mb-glass)) rgba(0, 0, 0, calc(0.14 * var(--mb-glass))),
      inset 0 1px 0 rgba(255, 255, 255, calc(0.28 * var(--mb-glass))) !important;
    overflow: hidden;
    isolation: isolate;
  }

  body.home.mb-header-scrolled #site-header .header-inner {
    border-radius: var(--mb-radius-80) !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
  }

  body.home.mb-header-hero-top #site-header {
    top: calc(var(--mb-home-frame-inset) + env(safe-area-inset-top, 0px));
    left: var(--mb-home-frame-inset);
    right: var(--mb-home-frame-inset);
    padding: 0;
  }

  body.home.mb-header-hero-top #site-header .header-inner {
    justify-content: space-between;
    min-height: 0;
    height: auto;
    padding: 16px 16px 10px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  body.home.mb-header-hero-top #site-header .site-nav {
    display: none;
  }

  body.home.mb-header-hero-top #site-header .menu-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  body.home.mb-header-hero-top #site-header .menu-toggle span {
    background-color: #070708;
  }

  body.home .elementor-location-header {
    position: absolute;
    top: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)) + env(safe-area-inset-top, 0px));
    left: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
    right: calc(var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
    width: auto;
    z-index: calc(var(--mb-z-header) + 1);
    padding: 0 var(--mb-gutter) calc(var(--mb-home-frame-inset) * var(--mb-home-header-glass, 0));
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.admin-bar.home .elementor-location-header {
    top: calc(32px + var(--mb-home-frame-inset) * (1 - var(--mb-home-header-glass, 0)));
  }

  body.home.mb-header-scrolled .elementor-location-header {
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    padding-bottom: 8px;
  }

  body.admin-bar.home.mb-header-scrolled .elementor-location-header {
    top: 32px;
  }

  body.home .mb-header__pill {
    --mb-glass: var(--mb-home-header-glass, 0);
    width: 100%;
    max-width: none;
    min-height: 3rem;
    padding: 12px var(--mb-space-4) !important;
    border: none !important;
    border-radius:
      var(--mb-home-frame-radius)
      var(--mb-home-frame-radius)
      calc(var(--mb-home-frame-radius) * var(--mb-glass))
      calc(var(--mb-home-frame-radius) * var(--mb-glass)) !important;
    background: rgba(255, 255, 255, calc(0.14 * var(--mb-glass))) !important;
    backdrop-filter: blur(calc(20px * var(--mb-glass))) saturate(calc(1 + 0.15 * var(--mb-glass))) !important;
    -webkit-backdrop-filter: blur(calc(20px * var(--mb-glass))) saturate(calc(1 + 0.15 * var(--mb-glass))) !important;
    box-shadow:
      0 calc(8px * var(--mb-glass)) calc(28px * var(--mb-glass)) rgba(0, 0, 0, calc(0.14 * var(--mb-glass))),
      inset 0 1px 0 rgba(255, 255, 255, calc(0.28 * var(--mb-glass))) !important;
  }

  body.home .mb-header__pill::before {
    opacity: var(--mb-glass);
  }

  body.home.mb-header-scrolled .mb-header__pill {
    border-radius: var(--mb-radius-80) !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
  }

  body.home.mb-header-hero-top .elementor-location-header {
    position: absolute !important;
    top: calc(var(--mb-home-frame-inset) + env(safe-area-inset-top, 0px));
    left: var(--mb-home-frame-inset);
    right: var(--mb-home-frame-inset);
    padding: 0;
  }

  body.home.mb-header-hero-top .mb-header__pill {
    justify-content: space-between;
    min-height: 0;
    height: auto;
    padding: 16px 16px 10px;
    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  body.home.mb-header-hero-top .mb-header__pill::before {
    display: none;
    opacity: 0;
  }

  body.home.mb-header-hero-top .mb-header__nav,
  body.home.mb-header-hero-top .mb-header-actions-slot {
    display: none;
  }

  body.home.mb-header-hero-top .mb-header__logo .mb-title-5,
  body.home.mb-header-hero-top .mb-header__logo .mb-title-5--stroke {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 1px #000;
    text-shadow:
      1px 0 0 #000,
      -1px 0 0 #000,
      0 1px 0 #000,
      0 -1px 0 #000,
      1px 1px 0 #000;
    paint-order: stroke fill;
  }

  body.home.mb-header-hero-top .mb-header__toggle span {
    background-color: #070708;
  }

  body.home.mb-header-hero-top #hero .hero-composition {
    padding-top: 52px;
  }

  body.mb-header-scrolled:not(.home) .elementor-location-header {
    background: rgba(7, 7, 8, 0.12) !important;
    backdrop-filter: blur(14px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  }
}

@media (min-width: 1440px) {
  .elementor-location-header {
    padding-block: var(--mb-space-3);
  }

  body:not(.home) .mb-header__pill,
  body:not(.home) #site-header .header-inner {
    min-height: 5.5rem;
    padding-inline: var(--mb-space-9);
  }
}

@media (max-width: 768px) {
  body:not(.home) #site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: env(safe-area-inset-top, 0px) var(--mb-gutter) 0;
    background: transparent !important;
  }

  body.admin-bar:not(.home) #site-header {
    top: 32px;
  }

  body:not(.home) #site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 3rem;
    padding: 12px 16px !important;
    border-radius: var(--mb-radius-80) !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.08) 100%
    ) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  }

  body:not(.home) #site-header .site-logo {
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 1px #000;
    text-shadow:
      1px 0 0 #000,
      -1px 0 0 #000,
      0 1px 0 #000,
      0 -1px 0 #000,
      1px 1px 0 #000;
    paint-order: stroke fill;
  }

  body:not(.home) .menu-toggle span {
    background: #070708;
  }

  body:not(.home).mb-header-scrolled #site-header {
    background: rgba(7, 7, 8, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .elementor-location-header {
    padding: var(--mb-space-2) var(--mb-gutter);
  }
}

.mb-header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.mb-header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: #070708;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    background-color 0.25s ease;
}

.mb-header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mb-header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mb-header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav open — full viewport overlay (Elementor panel sits below pill by default) */
@media (max-width: 1439px) {
  body.mb-scroll-locked .mb-header__mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: calc(
      env(safe-area-inset-top, 0px)
      + var(--mb-space-2, 8px)
      + var(--_pill-h-mobile, 3.5rem)
      + var(--mb-space-6, 32px)
    );
    padding-right: var(--mb-space-5, 24px);
    padding-bottom: var(--mb-space-6, 32px);
    padding-left: var(--mb-space-5, 24px);
    background-color: var(--mb-color-bg, #070708);
    z-index: calc(var(--mb-z-header, 1000) + 1);
  }

  body.mb-scroll-locked .elementor-location-header {
    z-index: calc(var(--mb-z-header, 1000) + 3) !important;
    background: var(--mb-color-bg, #070708) !important;
  }

  body.mb-scroll-locked .mb-header__pill {
    position: relative;
    z-index: calc(var(--mb-z-header, 1000) + 2);
    background: var(--mb-color-bg, #070708) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid var(--mb-color-border-subtle, rgba(255, 255, 255, 0.12)) !important;
    border-radius: var(--mb-radius-80, 80px) !important;
  }

  body.mb-scroll-locked .mb-header__toggle {
    position: relative;
    z-index: 1;
  }

  body.mb-scroll-locked .mb-header__toggle span,
  body.mb-scroll-locked.home.mb-header-hero-top .mb-header__toggle span {
    background-color: #fff !important;
  }

  body.mb-scroll-locked .mb-header__pill::before {
    opacity: 0 !important;
  }

  body.mb-scroll-locked.home .elementor-location-header {
    top: env(safe-area-inset-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    padding-bottom: 0 !important;
  }

  body.admin-bar.mb-scroll-locked.home .elementor-location-header {
    top: calc(32px + env(safe-area-inset-top, 0px)) !important;
  }
}