:root{
  /* Brand seeds (kept) */
  --it-purple:#4a154b; --it-blue:#64c3eb; --it-yellow:#e3b34c;
  --it-ink:#0e0f12; --it-ring:#e8ebf1;

  /* Header metrics (kept) */
  --hdr-h:78px; --hdr-h-sticky:62px;
  --logo-w:180px; --logo-w-sticky:120px;

  /* MD3 roles (fallbacks; your theme can override earlier in cascade) */
  --md-surface:#fafbfc;
  --md-surface-bright:#ffffff;
  --md-on-surface:#111316;
  --md-outline:#dbe0e8;              /* subtle hairline */
  --md-outline-variant:#c3c8d1;

  --md-primary: var(--it-purple);
  --md-on-primary:#ffffff;
  --md-primary-container:#EADDFF;
  --md-on-primary-container:#21005D;

  /* Elevation */
  --elev-0:none;
  --elev-1:0 2px 4px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.04);
  --elev-2:0 6px 18px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);

  /* State layers */
  --state-hover:.10; --state-focus:.16;

  /* Legacy site shadow (kept) */
  --it-shadow:0 10px 30px rgba(14,15,18,.10),0 6px 14px rgba(14,15,18,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --md-surface:#0f1114;
    --md-surface-bright:#14171b;
    --md-on-surface:#e7eaee;
    --md-outline:#2c3137;
    --md-outline-variant:#3a3f46;

    --md-primary: color-mix(in oklab, var(--it-purple) 72%, var(--it-blue) 28%);
    --md-on-primary:#ffffff;
    --md-primary-container:#3a2a4a;
    --md-on-primary-container:#f0eaf7;

    --elev-1:0 2px 4px rgba(0,0,0,.55);
    --elev-2:0 10px 24px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  }
}

/* ===============================
   GLASS HEADER (scoped)
   =============================== */
[data-it-glass-root]{
  position:relative; z-index:9999; width:100%;
  background: var(--md-surface-bright);
  border-bottom:1px solid var(--md-outline);
  box-shadow: var(--elev-0);
  margin-top:0 !important;
  transition: background-color .25s, height .25s, box-shadow .25s, border-color .25s, backdrop-filter .25s, -webkit-backdrop-filter .25s;
}

/* inner sizing (Elementor variants) */
[data-it-glass-root] .elementor-container,
[data-it-glass-root] .e-con-inner,
[data-it-glass-root] .e-con{
  height:var(--hdr-h);
  transition:height .25s;
}

/* logo scale */
[data-it-glass-root] .logo img,
[data-it-glass-root] .custom-logo,
[data-it-glass-root] .elementor-widget-theme-site-logo img,
[data-it-glass-root] .elementor-widget-image img{
  max-width:var(--logo-w); height:auto;
  transition:max-width .25s,height .25s;
}

/* shrink when sticky */
[data-it-glass-root].it-is-sticky .elementor-container,
[data-it-glass-root].it-is-sticky .e-con-inner,
[data-it-glass-root].it-is-sticky .e-con{ height:var(--hdr-h-sticky) !important; }
[data-it-glass-root].it-is-sticky .logo img,
[data-it-glass-root].it-is-sticky .custom-logo,
[data-it-glass-root].it-is-sticky .elementor-widget-theme-site-logo img,
[data-it-glass-root].it-is-sticky .elementor-widget-image img{ max-width:var(--logo-w-sticky) !important; }

/* ===============================
   GLASS STATE (Expressive MD3)
   =============================== */
[data-it-glass-root].it-is-glass{
  position:fixed !important; top:0; left:0; right:0;

  /* Tonal tint + glass */
  background: color-mix(in oklab, var(--md-surface-bright) 85%, transparent) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);

  /* Hairline + elevation */
  border-bottom:1px solid var(--md-outline);
  box-shadow: var(--elev-2);
}

/* Fallback when glass is unsupported: slightly more opaque */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  [data-it-glass-root].it-is-glass{
    background: color-mix(in oklab, var(--md-surface-bright) 96%, var(--md-primary) 4%) !important;
  }
}

/* Slightly stronger glass when scrolled (expressive) */
[data-it-glass-root].it-is-glass.it-is-sticky{
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 14px 30px rgba(0,0,0,.14), 0 6px 12px rgba(0,0,0,.08);
}

/* ===============================
   MENU / CTA (scoped)
   =============================== */
[data-it-glass-root] .elementor-nav-menu .menu-item > a{
  color: var(--md-on-surface);
  transition: background-color .18s, color .18s, transform .18s;
  border-radius: 12px; /* expressive shape */
  padding: 12px 14px; /* comfortable touch target; overridden by your sticky rule below */
}

/* Hover/Focus state layers (subtle, MD3) */
@media (hover:hover){
  [data-it-glass-root] .elementor-nav-menu .menu-item:hover > a{
    background: color-mix(in oklab, var(--md-primary) calc(var(--state-hover)*100%), transparent);
    color: var(--md-on-surface);
    transform: translateY(-1px);
  }
}
[data-it-glass-root] .elementor-nav-menu .menu-item > a:focus-visible{
  outline:3px solid var(--md-primary-container);
  outline-offset:2px;
}

/* Keep submenu anchors positioned (as you had) */
[data-it-glass-root] .elementor-nav-menu .sub-menu .menu-item > a{ position:relative }

/* FontAwesome angle for submenu items — recolor to primary for MD3 coherence */
[data-it-glass-root] .elementor-nav-menu .sub-menu .menu-item > a::before{
  content:"\f0da"; font-family:"Font Awesome 6 Free"; font-weight:900; display:inline-block; width:1em; margin-right:8px; line-height:1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; speak:never;
  color: var(--md-primary);
}

/* Sticky adjustments (kept) */
[data-it-glass-root].it-is-sticky .elementor-nav-menu .menu-item > a{
  font-size:14px; padding:10px 12px;
  transition: font-size .25s, padding .25s, background-color .18s, color .18s;
}

/* ===============================
   FIRST SECTION OFFSET (kept)
   =============================== */
.first-section-after-header{ scroll-margin-top: var(--hdr-h-sticky); }

/* ===============================
   RESPONSIVE HEIGHTS (kept)
   =============================== */
@media (max-width:1024px){
  :root{ --hdr-h:66px; --hdr-h-sticky:56px; --logo-w-sticky:110px }
}
@media (max-width:768px){
  :root{ --hdr-h:54px; --hdr-h-sticky:54px; --logo-w-sticky:100px }
}