/* =========================================================
   WITSTUNERS HEADER
   FILE 1 — SHARED + DESKTOP
========================================================= */

#wts-header-v4{
  --wts-pink:#FF2768;
  --wts-pink-light:#FFF1F5;
  --wts-dark:#071225;
  --wts-text:#1F2933;
  --wts-muted:#667085;
  --wts-border:#E7EAF0;
  --wts-surface:#FAFAFC;
  --wts-white:#FFFFFF;

  position:sticky;
  top:0;
  z-index:9999;
  width:100%;

  background:rgba(250,250,252,.94);
  border-bottom:1px solid rgba(231,234,240,.92);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}

#wts-header-v4 *,
#wts-header-v4 *::before,
#wts-header-v4 *::after{
  box-sizing:border-box;
}

/* =========================================================
   MAIN NAVIGATION BAR
========================================================= */

#wts-header-v4 .wts-nav-wrap{
  position:relative;
  z-index:30;

  max-width:1360px;
  height:92px;

  margin:0 auto;
  padding:0 54px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:42px;
}

/* =========================================================
   LOGO
========================================================= */

#wts-header-v4 .wts-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
  text-decoration:none;
}

#wts-header-v4 .wts-logo img{
  display:block;
  width:auto;
  height:72px;
  max-width:100%;
}

/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

#wts-header-v4 .wts-nav-links{
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:38px;
}

#wts-header-v4 .wts-menu-trigger{
  position:relative;

  height:100%;
  padding:0;

  border:0;
  outline:0;
  background:transparent;

  color:var(--wts-text);

  font-family:inherit;
  font-size:13px;
  line-height:1;
  font-weight:850;
  letter-spacing:1.7px;
  text-transform:uppercase;

  display:flex;
  align-items:center;
  gap:9px;

  cursor:pointer;

  transition:
    color .24s ease,
    transform .24s ease;
}

/* Animated active underline */

#wts-header-v4 .wts-menu-trigger::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:17px;

  height:2px;
  border-radius:999px;

  background:var(--wts-pink);

  transform:scaleX(0);
  transform-origin:center;

  transition:
    transform .32s cubic-bezier(.22,1,.36,1);
}

#wts-header-v4 .wts-menu-trigger:hover,
#wts-header-v4 .wts-menu-trigger:focus-visible,
#wts-header-v4 .wts-menu-trigger.is-active{
  color:var(--wts-pink);
}

#wts-header-v4 .wts-menu-trigger:hover::after,
#wts-header-v4 .wts-menu-trigger:focus-visible::after,
#wts-header-v4 .wts-menu-trigger.is-active::after{
  transform:scaleX(1);
}

/* Modern chevron */

#wts-header-v4 .wts-triangle{
  width:7px;
  height:7px;

  border:0;
  border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;

  transform:
    translateY(-2px)
    rotate(45deg);

  transition:
    transform .3s cubic-bezier(.22,1,.36,1);
}

#wts-header-v4 .wts-menu-trigger.is-active .wts-triangle{
  transform:
    translateY(2px)
    rotate(225deg);
}

/* =========================================================
   DESKTOP REVIEW BUTTON — SOLID PINK
========================================================= */

#wts-header-v4 .wts-review-btn{
  min-height:54px;
  padding:0 30px;

  border:0;
  border-radius:16px;

  background:#FF2768;
  color:#FFFFFF;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  text-decoration:none;
  white-space:nowrap;

  font-size:13px;
  line-height:1;
  font-weight:900;
  letter-spacing:1.25px;
  text-transform:uppercase;

  box-shadow:
    0 12px 30px rgba(255,39,104,.18);

  transition:
    background .24s ease,
    transform .24s ease,
    box-shadow .24s ease;
}

#wts-header-v4 .wts-review-btn:hover{

  transform:translateY(-2px);
}

#wts-header-v4 .wts-review-btn::after{
  content:"→";

  display:inline-block;

  font-size:17px;
  line-height:1;

  transition:
    transform .25s cubic-bezier(.22,1,.36,1);
}

#wts-header-v4 .wts-review-btn:hover::after{
  transform:translateX(5px);
}

/* =========================================================
   DESKTOP MEGA MENU SHELL
========================================================= */

/* =========================================================
   DESKTOP MEGA MENU
========================================================= */

#wts-header-v4 .wts-mega{

    position:absolute;
    top:92px;
    left:0;
    right:0;
    z-index:20;

    max-height:calc(100vh - 92px);

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior:contain;

    isolation:isolate;

    /* Premium frosted surface */

    background:#FCFCFD;

    border-top:1px solid rgba(255,39,104,.14);
    border-bottom:1px solid rgba(228,232,238,.95);

    box-shadow:
        0 18px 60px rgba(7,18,37,.08),
        0 40px 100px rgba(7,18,37,.08),
        inset 0 1px 0 rgba(255,255,255,.95);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:
        translateY(-14px)
        scale(.992);

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .34s cubic-bezier(.22,1,.36,1);
}

/* Solid backing layer */

#wts-header-v4 .wts-mega::before{

    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    background:
        linear-gradient(
            180deg,
            #FAFAFC 0%,
            #FFFFFF 100%
        );

    opacity:.94;

    pointer-events:none;

}

/* Open */

#wts-header-v4 .wts-mega.is-open{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:
        translateY(0)
        scale(1);

}
/* =========================================================
   STAGGERED MEGA-MENU ENTRANCE
========================================================= */

#wts-header-v4 .wts-mega-head,
#wts-header-v4 .wts-simple-item,
#wts-header-v4 .wts-role-col,
#wts-header-v4 .wts-mega-footer{
  opacity:0;
  transform:translateY(13px);

  transition:
    opacity .34s ease,
    transform .44s cubic-bezier(.22,1,.36,1);
}

#wts-header-v4 .wts-mega.is-open .wts-mega-head{
  opacity:1;
  transform:translateY(0);
  transition-delay:.04s;
}

#wts-header-v4 .wts-mega.is-open .wts-simple-item:nth-child(1),
#wts-header-v4 .wts-mega.is-open .wts-role-col:nth-child(1){
  opacity:1;
  transform:translateY(0);
  transition-delay:.08s;
}

#wts-header-v4 .wts-mega.is-open .wts-simple-item:nth-child(2),
#wts-header-v4 .wts-mega.is-open .wts-role-col:nth-child(2){
  opacity:1;
  transform:translateY(0);
  transition-delay:.12s;
}

#wts-header-v4 .wts-mega.is-open .wts-simple-item:nth-child(3),
#wts-header-v4 .wts-mega.is-open .wts-role-col:nth-child(3){
  opacity:1;
  transform:translateY(0);
  transition-delay:.16s;
}

#wts-header-v4 .wts-mega.is-open .wts-mega-footer{
  opacity:1;
  transform:translateY(0);
  transition-delay:.2s;
}
/* =========================================================
   MEGA MENU HEADER
========================================================= */

#wts-header-v4 .wts-mega-head{
  display:flex;
  align-items:center;
  gap:26px;

  padding-bottom:34px;

  border-bottom:1px solid var(--wts-border);
}

#wts-header-v4 .wts-mega-head h2{
  max-width:900px;

  font-size:21px;
  line-height:1.2;
  letter-spacing:-.035em;
  font-weight:750;
}

#wts-header-v4 .wts-head-icon,
#wts-header-v4 .wts-role-icon{
  width:62px;
  height:62px;
  flex-shrink:0;

  border:1px solid rgba(255,39,104,.10);
  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      #FFF8FA,
      #FFEAF1
    );

  box-shadow:
    0 12px 30px rgba(255,39,104,.07);

  display:flex;
  align-items:center;
  justify-content:center;
}

#wts-header-v4 svg{
  width:28px;
  height:28px;

  fill:none;
  stroke:var(--wts-pink);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#wts-header-v4 .wts-label{
  margin-bottom:8px;

  color:var(--wts-pink);

  font-size:12px;
  line-height:1;
  font-weight:950;
  letter-spacing:2px;
  text-transform:uppercase;
}

#wts-header-v4 h2{
  margin:0;

  color:#111827;

  font-size:21px;
  line-height:1.25;
  letter-spacing:-.035em;
  font-weight:700;
}
/* =========================================================

   DESKTOP MEGA MENU INNER CONTAINER

========================================================= */

#wts-header-v4 .wts-mega-inner{

  width:min(100%,1480px);

  margin:0 auto;

  padding:

    52px

    68px

    46px;

}


/* =========================================================

   SIMPLE THREE-COLUMN MEGA MENU

========================================================= */

#wts-header-v4 .wts-simple-grid{

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:28px;

  padding-top:38px;

}

#wts-header-v4 .wts-simple-item{

  position:relative;

  min-height:162px;

  padding:28px 28px 30px;

  border:1px solid var(--wts-border);

  border-radius:22px;

  background:#FFFFFF;

  text-decoration:none;

  display:grid;

  grid-template-columns:48px minmax(0,1fr);

  align-content:start;

  gap:20px;

  box-shadow:

    0 12px 30px rgba(16,24,40,.035);

  transition:

    border-color .25s ease,

    box-shadow .25s ease,

    transform .25s ease;

}

#wts-header-v4 .wts-simple-item:last-child{

  border-right:1px solid var(--wts-border);

}

#wts-header-v4 .wts-simple-item:hover{

  background:#FFFFFF;

  border-color:rgba(255,39,104,.24);

  transform:translateY(-4px);

  box-shadow:

    0 22px 50px rgba(16,24,40,.07);

}

/* =========================================================

   ROLE-BASED LEARNING PATH MENU

========================================================= */

#wts-header-v4 .wts-role-grid{

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:34px;

  padding-top:38px;

}

#wts-header-v4 .wts-role-col{

  padding:0;

  border-right:0;

}

#wts-header-v4 .wts-role-col:first-child{

  padding-left:0;

}

#wts-header-v4 .wts-role-col + .wts-role-col{

  padding-left:34px;

  border-left:1px solid var(--wts-border);

}

#wts-header-v4 .wts-role-col.no-line{

  padding-right:0;

  border-right:0;

}

#wts-header-v4 .wts-role-head{

  margin-bottom:22px;

  display:flex;

  align-items:center;

  gap:18px;

}

/* =========================================================
   MENU ITEMS
========================================================= */

#wts-header-v4 .wts-path-item{

  position:relative;

  min-height:100px;

  padding:19px 14px;

  border-bottom:1px solid var(--wts-border);

  border-radius:14px;

  text-decoration:none;

  display:grid;

  grid-template-columns:42px minmax(0,1fr);

  gap:15px;

  transition:

    background .24s ease,

    transform .24s ease;

}
/* Role card headings */

#wts-header-v4 .wts-simple-item > div > strong{
    font-size:16px;
    line-height:1.3;
}

/* =========================================================
   ITEM ICONS
========================================================= */

#wts-header-v4 .wts-item-icon{
  width:38px;
  height:38px;

  border-radius:12px;

  background:rgba(255,39,104,.07);

  display:flex;
  align-items:center;
  justify-content:center;

  transition:
    background .24s ease,
    transform .24s ease,
    box-shadow .24s ease;
}

#wts-header-v4 .wts-item-icon svg{
  width:23px;
  height:23px;
}

#wts-header-v4 .wts-simple-item:hover .wts-item-icon,
#wts-header-v4 .wts-path-item:hover .wts-item-icon{
  background:rgba(255,39,104,.13);

  transform:
    translateY(-2px)
    scale(1.045);

  box-shadow:
    0 10px 24px rgba(255,39,104,.10);
}

/* =========================================================
   ITEM TYPOGRAPHY
========================================================= */
#wts-header-v4 .wts-path-item strong,

#wts-header-v4 .wts-simple-item strong{

  display:block;

  margin-bottom:8px;

  color:#111827;

  font-size:17px;

  line-height:1.3;

  font-weight:850;

  transition:color .22s ease;

}

#wts-header-v4 .wts-path-item p,

#wts-header-v4 .wts-simple-item p{

  margin:0;

  color:#5F6978;

  font-size:14.5px;

  line-height:1.6;

  font-weight:500;

}

/* =========================================================
   MEGA MENU FOOTER — CENTRED PROMINENT CTA
========================================================= */

#wts-header-v4 .wts-mega-footer{
  margin-top:44px;

  padding:
    32px
    0
    8px;

  border-top:1px solid var(--wts-border);

  text-align:center;
}

#wts-header-v4 .wts-mega-footer span{
  display:block;

  margin-bottom:12px;

  color:#667085;

  font-size:15px;
  line-height:1.4;
  font-weight:700;
}

#wts-header-v4 .wts-mega-footer a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:46px;

  padding:0 24px;

  border-radius:999px;

  background:#FFF1F5;
  color:var(--wts-pink);

  text-decoration:none;

  font-size:15px;
  line-height:1;
  font-weight:950;

  letter-spacing:.01em;

  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

#wts-header-v4 .wts-mega-footer a:hover{
  background:var(--wts-pink);
  color:#FFFFFF;

  transform:translateY(-2px);

  box-shadow:
    0 12px 28px rgba(255,39,104,.18);

  text-decoration:none;
}

/* =========================================================
   MOBILE COMPONENTS HIDDEN ON DESKTOP
========================================================= */

#wts-header-v4 .wts-mobile-toggle,
#wts-header-v4 .wts-mobile-panel{
  display:none;
}

/* =========================================================
   INTERMEDIATE DESKTOP WIDTH
========================================================= */

@media(min-width:1101px) and (max-width:1250px){

  #wts-header-v4 .wts-nav-wrap{

    padding:0 30px;

    gap:28px;

  }

  #wts-header-v4 .wts-nav-links{

    gap:25px;

  }

  #wts-header-v4 .wts-menu-trigger{

    font-size:12px;

    letter-spacing:1.35px;

  }

  #wts-header-v4 .wts-review-btn{

    padding:0 24px;

  }

  #wts-header-v4 .wts-mega-inner{

    padding:

      44px

      34px

      40px;

  }

  #wts-header-v4 .wts-simple-grid{

    gap:20px;

  }

  #wts-header-v4 .wts-simple-item{

    padding:24px;

  }

  #wts-header-v4 .wts-role-grid{

    gap:24px;

  }

  #wts-header-v4 .wts-role-col + .wts-role-col{

    padding-left:24px;

  }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  #wts-header-v4 *,
  #wts-header-v4 *::before,
  #wts-header-v4 *::after{
    animation:none !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* =========================================================
   DESKTOP ROLE TITLES
========================================================= */

@media(min-width:1101px){

  #wts-header-v4 .wts-role-head h3{
    margin:0 !important;

    font-size:20px !important;
    line-height:1.2 !important;
    font-weight:850 !important;
    letter-spacing:-.025em !important;
    text-transform:none !important;

    color:#1F2933 !important;
  }

}