/* Pronto Group menu: links Lead Pronto to its sister company Pronto One.
   The dot over the label marks it as new until the menu is first opened; it is
   positioned over the label, so nothing on the bar moves when it fades. */
.pg-label{position:relative;display:inline-block}
.pg-dot{position:absolute;top:-4px;right:-9px;width:8px;height:8px;border-radius:50%;background:#04D2BB;
  box-shadow:0 0 0 2px var(--white);opacity:0;transform:scale(.4);pointer-events:none;
  transition:opacity 250ms ease,transform 250ms cubic-bezier(.23,1,.32,1)}
html.pg-new .pg-dot{opacity:1;transform:none;animation:pg-turn 24s linear infinite}
/* Pronto One's six colourways, one at a time, holding on each */
@keyframes pg-turn{
  0%,13%{background:#04D2BB} 16.7%,30%{background:#FFCF47} 33.3%,46%{background:#EF4810}
  50%,63%{background:#F76164} 66.7%,80%{background:#5476FF} 83.3%,96%{background:#00C4FF} 100%{background:#04D2BB}}
.menu-btn{position:relative}
.menu-btn>.pg-dot{top:9px;right:7px;box-shadow:0 0 0 2px #052A24}
.site-header.scrolled .menu-btn>.pg-dot{box-shadow:0 0 0 2px var(--white)}
.mnav-grp .pg-dot{box-shadow:none}

/* With one more item the bar needs tighter gaps just above the 1024px collapse */
@media (min-width:1025px) and (max-width:1100px){.nav-pill{gap:12px;padding-inline:14px}}

/* Desktop dropdown: the last menu on the bar, so it opens to the left of its button */
.nav-item .dropdown.mega.mega-group{min-width:480px;left:auto;right:-28px;transform:translateY(6px)}
.nav-item:hover .dropdown.mega.mega-group,.nav-item .dropdown.mega.mega-group.open{transform:translateY(0)}
@media (max-width:1120px){
  .nav-item .dropdown.mega.mega-group{width:480px;left:auto;right:-20px;transform:translateY(6px)}
  .nav-item:hover .dropdown.mega.mega-group,.nav-item .dropdown.mega.mega-group.open{transform:translateY(0)}
}
.mega-group .mega-item{gap:14px}
.mega-group .mega-item--here,.mega-group .mega-item--here:hover{background:#EFF5F4}
.mega-group .mega-item--here .m-ico,.mega-group .mega-item--here:hover .m-ico{background:var(--green-deep)}
.mega-item .m-ico.m-ico--lp,.mega-item:hover .m-ico.m-ico--lp{background:var(--green-deep)}
.mega-item .m-ico.m-ico--p1,.mega-item:hover .m-ico.m-ico--p1{background:#07090B}
.m-ico--lp svg{width:17px!important;height:auto!important}
.m-ico--p1 svg{width:27px!important;height:auto!important}
.pg-here{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;
  background:var(--white);box-shadow:inset 0 0 0 1px rgba(0,38,32,.14);font-size:var(--text-sm);font-weight:600;color:var(--green-deep);white-space:nowrap}
.pg-here::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.pg-go{margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;background:var(--mist);display:inline-flex;align-items:center;justify-content:center;color:var(--green-deep)}
.pg-go svg{width:15px;height:15px;transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.mega-group .mega-item:hover .pg-go{background:var(--white)}
@media (hover:hover) and (pointer:fine){.mega-group .mega-item:hover .pg-go svg{transform:translate(2px,-2px)}}

/* Phone menu rows */
.mnav-group--pg .mnav-ico.m-ico--lp{background:var(--green-deep)}
.mnav-group--pg .mnav-ico.m-ico--p1{background:#07090B}
.mnav-group--pg .pg-here{margin-left:auto;height:26px}

@media (prefers-reduced-motion:reduce){
  html.pg-new .pg-dot{animation:none}
  .pg-dot,.pg-go svg{transition:none}
}