/* ===== REE Header Navigation ===== */
:root{
  --reeH-blue:#2665E2;
  --reeH-violet:#C26DE6;
  --reeH-text:#F5F5F5;
  --reeH-dark:#0A1320;
  --reeH-dd-bg:#FFFFFF;
  --reeH-dd-last:#F5F5F5;
  --reeH-radius-s:8px;
  --reeH-header-h:72px;
  --reeH-grad:linear-gradient(90deg,rgba(27,40,72,1) 0%, rgba(10,18,32,1) 100%);
  --reeH-sep-grad:linear-gradient(90deg,#2665E2 0%, #C26DE6 100%);
}

.ree-hnav, .ree-hnav *{box-sizing:border-box}
.ree-hnav{
  position:fixed; inset:0 0 auto 0; height:var(--reeH-header-h);
  z-index:9999; background:var(--reeH-grad);
  display:flex; align-items:center; box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition: transform .25s ease; /* for mobile hide/show */
}
.ree-hnav__wrap{
  width:100%; padding:0 80px;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:24px;
  position:relative; z-index:0;
}
.ree-hnav__logo img{width:170px;height:auto;display:block;transition:filter .25s ease}

/* Desktop nav */
.ree-hnav__nav{display:flex;justify-content:center}
.ree-hnav__list{display:flex;align-items:center;justify-content:center;gap:40px;list-style:none;margin:0;padding:0}
.ree-hnav__item{position:relative}
.ree-hnav__link{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font:400 14px/28px Roboto,system-ui,Arial,sans-serif;
  color:var(--reeH-text);text-decoration:none;white-space:nowrap
}
.ree-hnav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;width:0;margin:0 auto;
  background:linear-gradient(90deg,#2665E2 0%, #C26DE6 100%);transition:width .3s ease
}
.ree-hnav__link:hover::after{width:100%}
.ree-hnav__item--hasdd>.ree-hnav__link::after{display:none}
.ree-hnav__chev{transition:transform .18s ease;transform-origin:50% 45%}
.ree-hnav__item--hasdd:is(:hover,:focus-within) .ree-hnav__chev{transform:rotate(180deg)}
.ree-hnav__item--hasdd::after{content:"";position:absolute;left:-10px;right:-10px;height:12px;top:100%}

/* --- ACTIVE PAGE UNDERLINE (white), desktop --- */
.ree-hnav__item.is-current > .ree-hnav__link::after,
.ree-hnav__link[aria-current="page"]::after{
  width:100%;
  background:#ffffff;
}

/* Dropdown (desktop) */
.ree-hnav__dd{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  min-width:246px;background:var(--reeH-dd-bg);border:1px solid #E5E5E5;
  border-radius:18px;box-shadow:0 22px 46px rgba(0,0,0,.32);
  padding:0;opacity:0;pointer-events:none;overflow:hidden;
  transition:opacity .18s ease, transform .18s ease
}
.ree-hnav__item--hasdd:is(:hover,:focus-within)>.ree-hnav__dd{
  opacity:1;pointer-events:auto;transform:translate(-50%,0)
}
.ree-hnav__dd-item{
  position:relative;
  display:flex;align-items:center;justify-content:center;padding:14px 18px;
  font:600 14px/1 Roboto,system-ui,Arial,sans-serif;color:var(--reeH-dark);
  text-decoration:none;transition:background .18s ease,color .18s ease;text-align:center
}
.ree-hnav__dd-item:hover{color:#f5f5f5;background:linear-gradient(90deg,#2665E2 0%, #C26DE6 100%)}
.ree-hnav__dd-sep{display:block;height:1px;width:100%;background:var(--reeH-sep-grad)}
.ree-hnav__dd-item--addon{background:var(--reeH-dd-last);color:var(--reeH-dark)}
.ree-hnav__dd-item--addon:hover{background:linear-gradient(90deg,#2665E2 0%, #C26DE6 100%);color:#fff}
.ree-hnav__badge{background:rgba(10,18,32,.5);color:#fff;font:700 9px/1 Roboto,system-ui,Arial,sans-serif;padding:6px 10px;border-radius:56px;margin-left:8px}

/* CTA */
.ree-hnav__cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 24px;border-radius:8px;background:#2665E2;color:#fff;
  text-decoration:none;overflow:hidden;box-shadow:0 10px 24px -12px rgba(0,0,0,.35)
}
.ree-hnav__cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2665E2 0%, #C26DE6 100%);opacity:0;transition:opacity .35s ease}
.ree-hnav__cta:hover::before,.ree-hnav__cta:focus-visible::before{opacity:1}
.ree-hnav__cta-label{position:relative;z-index:1;font:700 14px/1 Roboto,system-ui,Arial,sans-serif;color:#F5F5F5}

/* Burger (mobile trigger) — 18px icon + glow + fallbacks */
.ree-hnav__burger{
  display:none;
  appearance:none;
  background:transparent;
  border:0;
  padding:10px;
  margin:0;
  line-height:0;
  color:#f5f5f5;
  cursor:pointer;
  grid-column:3;
  justify-self:end;
}
.ree-hnav__burger:hover{ filter: brightness(1.08); }

/* Base fallback: svg as background-image (icon carries the animated glow) */
.ree-hnav__burger-icon{
  width:18px; height:18px; display:block;
  background-image:url('https://6291954.fs1.hubspotusercontent-na1.net/hubfs/6291954/Rebrained/Reeinvented/Website/Icons/Navigation%20Menu%20Icon.svg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter: invert(96%) sepia(2%) saturate(180%) hue-rotate(180deg) brightness(105%) contrast(90%)
          drop-shadow(0 0 6px rgba(245,245,245,.22));
  animation: iconGlowPulse 2.6s ease-in-out infinite;
  transition: filter .2s ease;
}
.ree-hnav__burger:hover .ree-hnav__burger-icon{
  filter: invert(96%) sepia(2%) saturate(180%) hue-rotate(180deg) brightness(105%) contrast(90%)
          drop-shadow(0 0 12px rgba(245,245,245,.5));
}

/* If mask is supported, use true color + the same animated glow */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .ree-hnav__burger-icon{
    background-image:none;
    background-color:#f5f5f5;
    -webkit-mask-image:var(--burger-icon, url('https://6291954.fs1.hubspotusercontent-na1.net/hubfs/6291954/Rebrained/Reeinvented/Website/Icons/Navigation%20Menu%20Icon.svg'));
            mask-image:var(--burger-icon, url('https://6291954.fs1.hubspotusercontent-na1.net/hubfs/6291954/Rebrained/Reeinvented/Website/Icons/Navigation%20Menu%20Icon.svg'));
    -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
    -webkit-mask-position:center;        mask-position:center;
    -webkit-mask-size:contain;           mask-size:contain;
    filter: drop-shadow(0 0 6px rgba(245,245,245,.22));
    animation: iconGlowPulse 2.6s ease-in-out infinite;
  }
  .ree-hnav__burger:hover .ree-hnav__burger-icon{ filter: drop-shadow(0 0 12px rgba(245,245,245,.5)); }
}

/* ===== Mobile off-canvas ===== */
.ree-hnav__mobile{
  position:fixed; inset:0; 
  z-index:2; 
  pointer-events:none;
}
.ree-hnav__mobile-inner{
  position:absolute; top:0; bottom:0; right:0; width:min(86vw,420px);
  background:#fff; transform:translateX(100%); transition:transform .25s ease;
  box-shadow:-10px 0 30px rgba(0,0,0,.25); display:flex; flex-direction:column; 
  padding:20px; z-index:2;
  overflow:hidden;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.ree-hnav__mobile-scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.4); opacity:0; transition:opacity .2s ease;
  z-index:1;
}

/* open state */
.ree-hnav__mobile[aria-hidden="false"]{pointer-events:auto}
.ree-hnav__mobile[aria-hidden="false"] .ree-hnav__mobile-inner{transform:translateX(0)}
.ree-hnav__mobile[aria-hidden="false"] .ree-hnav__mobile-scrim{opacity:1}

/* Hide header background when menu is open */
.ree-hnav.is-menu-open{
  box-shadow:none;
}

.ree-hnav__mobile-close{align-self:flex-end;background:transparent;border:0;font:700 28px/1 system-ui,Arial,sans-serif;color:#0A1320}

/* Mobile list (SCROLLABLE) */
.ree-mnav{
  list-style:none; margin:10px 0 0; padding:0 4px 12px 0;
  display:flex; flex-direction:column; gap:6px;
  flex:1 1 auto; 
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.ree-mnav__item{display:block}
.ree-mnav__link{display:block;padding:12px 4px;font:500 16px/1.2 Roboto,system-ui,Arial,sans-serif;color:#0A1320;text-decoration:none}
.ree-mnav__item--hasdd{border-top:1px solid #eee;padding-top:6px;margin-top:6px}
.ree-mnav__toggle{width:100%;text-align:left;background:#f7f7f9;border:1px solid #eee;border-radius:8px;padding:12px 10px;font:600 15px/1.2 Roboto,system-ui,Arial,sans-serif;position:relative}
.ree-mnav__dd{list-style:none;margin:6px 0 0 0;padding:0 0 0 10px;display:none}
.ree-mnav__dd[aria-hidden="false"]{display:block}
.ree-mnav__dd-link{display:block;padding:10px 4px;font:400 15px/1.2 Roboto,system-ui,Arial,sans-serif;color:#0A1320;text-decoration:none}
.ree-mnav__dd-link.is-addon{background:#f5f5f7;border-radius:6px}
.ree-mnav__badge{display:inline-block;margin-left:8px;background:#0A1320;color:#fff;border-radius:56px;padding:4px 8px;font:700 10px/1 Roboto,system-ui,Arial,sans-serif}
.ree-mnav__cta{margin-top:14px}

/* ===== Responsive (force to avoid collisions) ===== */
@media (max-width:1200px){
  .ree-hnav__wrap{padding-left:20px; padding-right:10px;}
  header.ree-hnav .ree-hnav__nav,
  header.ree-hnav .ree-hnav__cta-wrap{ display:none !important; }
  header.ree-hnav .ree-hnav__burger{
    display:inline-flex !important;
    align-items:center; justify-content:center;
  }
  .ree-hnav.is-hidden{ transform: translateY(-110%); }
}

/* Kill any legacy bars if present */
.ree-hnav__burger-bar{ display:none !important; }

/* Right-align helpers */
.ree-hnav__logo { grid-column: 1; }
.ree-hnav__nav  { grid-column: 2; }
.ree-hnav__cta-wrap,
.ree-hnav__burger { grid-column: 3; justify-self: end; }

/* ====== GLOW ANIMATIONS ====== */
@keyframes iconGlowPulse{
  0%,100%{ filter: drop-shadow(0 0 6px rgba(245,245,245,.22)); }
  50%    { filter: drop-shadow(0 0 14px rgba(245,245,245,.44)); }
}
@keyframes logoGlow{
  0%,100% { filter: drop-shadow(0 0 4px rgba(245,245,245,.20)); }
  50%     { filter: drop-shadow(0 0 10px rgba(245,245,245,.50)); }
}
.ree-hnav__logo:hover img,
.ree-hnav__logo:focus-visible img,
.ree-hnav__logo:active img{
  animation: logoGlow 2.4s ease-in-out infinite;
}

/* === Hamburger icon halo (Safari-friendly), on the ICON itself === */
.ree-hnav__burger-icon{
  position: relative;
  width: 18px;
  height: 18px;
}
.ree-hnav__burger-icon::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  background: radial-gradient(closest-side, rgba(245,245,245,.70), rgba(245,245,245,0));
  opacity:.65;
  transform: scale(.92);
  animation: reeIconHalo 2.1s ease-in-out infinite;
}
.ree-hnav__burger:hover .ree-hnav__burger-icon::before{ opacity:.95; }
@media (hover:none){
  .ree-hnav__burger-icon::before{
    inset:-10px; opacity:.8; animation-duration:1.9s;
  }
}
@keyframes reeIconHalo{
  0%,100%{ opacity:.55; transform:scale(.90); }
  50%    { opacity:1;   transform:scale(1.12); }
}

/* ============================================================
   MENU EFFECTS kept from prior steps (active colors for proto/solu)
   ============================================================ */

/* Desktop dropdown items: ACTIVE = solid color (no hover effect on them) */
.ree-hnav__item--proto .ree-hnav__dd-item.is-current,
.ree-hnav__item--proto .ree-hnav__dd-item[aria-current="page"]{
  background:#2665E2 !important; color:#fff;
}
.ree-hnav__item--solu .ree-hnav__dd-item.is-current,
.ree-hnav__item--solu .ree-hnav__dd-item[aria-current="page"]{
  background:#A942EF !important; color:#fff;
}

/* Mobile menu: hover on dropdown links (unchanged) */
.ree-mnav__dd-link:hover{
  color:#fff;
  background:linear-gradient(90deg,#2665E2 0%, #C26DE6 100%);
  border-radius:8px;
}

/* Mobile menu: ACTIVE dropdown links = solid (no hover change) */
.ree-mnav__item--proto .ree-mnav__dd-link.is-current,
.ree-mnav__item--proto .ree-mnav__dd-link[aria-current="page"]{
  background:#2665E2 !important; color:#fff; border-radius:8px;
}
.ree-mnav__item--solu .ree-mnav__dd-link.is-current,
.ree-mnav__item--solu .ree-mnav__dd-link[aria-current="page"]{
  background:#A942EF !important; color:#fff; border-radius:8px;
}

/* Mobile section headers (AI-Driven …): color instead of underline when active */
.ree-mnav__item--proto .ree-mnav__toggle.is-current{
  background:#2665E2; color:#fff; border-color:transparent;
}
.ree-mnav__item--solu .ree-mnav__toggle.is-current{
  background:#A942EF; color:#fff; border-color:transparent;
}
/* remove underline on active toggles */
.ree-mnav__toggle.is-current::after{ display:none !important; }

/* === NEW: underline for ACTIVE top-level links in the mobile menu === */
.ree-mnav__link{ position:relative; }
.ree-mnav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; width:0; margin:0 auto;
  background:var(--reeH-sep-grad); transition:width .3s ease;
}
.ree-mnav__link:hover::after,
.ree-mnav__link:focus-visible::after{ width:100%; }
.ree-mnav__link.is-current::after,
.ree-mnav__link[aria-current="page"]::after{ width:100%; }

/* ===== Dropdown stacking so underlines/separators don't clash ===== */
.ree-hnav__dd{ display:block; }
.ree-hnav__dd-item{ position:relative; z-index:1; width:100%; }
.ree-hnav__dd-sep{ position:relative; z-index:0; }

.ree-hnav__item--proto.is-current > .ree-hnav__link::after,
.ree-hnav__item--solu.is-current > .ree-hnav__link::after {
  width:100%;
  background:#ffffff; /* same as active underline */
}

/* ===== Fix: active underline on dropdown triggers (center-out, not under chevron) ===== */
/* Make the trigger's ::after usable for animation (but hidden by default so
   non-active triggers still don't show a hover underline). */
.ree-hnav__item--hasdd > .ree-hnav__link::after{
  display:block;              /* override earlier display:none */
  position:absolute;
  left:0;
  right:18px;                 /* keep 18px clear for chevron area */
  bottom:0;
  height:1px;
  margin:0;
  background:#fff;            /* active underline color */
  transform-origin:center;    /* center-out effect */
  transform:scaleX(0);        /* hidden by default */
  opacity:0;
  transition:transform .35s ease, opacity .2s ease;
}

/* When the dropdown group is active, reveal & animate the underline */
.ree-hnav__item--hasdd.is-current > .ree-hnav__link::after,
.ree-hnav__item--hasdd > .ree-hnav__link[aria-current="page"]::after{
  opacity:1;
  transform:scaleX(1);
}

/* Keep non-active triggers from showing any hover underline */
.ree-hnav__item--hasdd:not(.is-current) > .ree-hnav__link:hover::after,
.ree-hnav__item--hasdd:not(.is-current) > .ree-hnav__link:focus-visible::after{
  opacity:0;
  transform:scaleX(0);
}

/* === FIX: underline only under the text (exclude chevron) === */
.ree-hnav__item--hasdd > .ree-hnav__link::after{
  right:18px !important;                 /* 12px chevron + 6px gap */
}

/* Active state for dropdown triggers: use left/right, not width */
.ree-hnav__item--hasdd.is-current > .ree-hnav__link::after,
.ree-hnav__item--hasdd > .ree-hnav__link[aria-current="page"]::after{
  left:0 !important;
  right:18px !important;
  width:auto !important;                 /* CRITICAL: cancel width:100% */
  margin:0 !important;
  background:#fff !important;
  transform-origin:center !important;
  transform:scaleX(1) !important;
  opacity:1 !important;
}

/* Keep hover from re-expanding under the chevron */
.ree-hnav__item--hasdd.is-current > .ree-hnav__link:hover::after,
.ree-hnav__item--hasdd.is-current > .ree-hnav__link:focus-visible::after{
  left:0 !important;
  right:18px !important;
  width:auto !important;
}