.site-header{
  /* Neutrals */
  --n-800:#1F2225;
  --n-400:#474C51;
  --n-300:#737980;
  --n-200:#DEE2E6;
  --n-100:#D1D9E2;
  --n-50:#E5E9ED;
  --n-10:#F8F9FB;
  /* Brand */
  --brand-dark:#150F5A;
  --brand-blue:#2E5BDF;
  --cta-blue:#094EFF;
  --cta-green:#2DF258;
  --main-dark:#2B2A2B;
  --bg-blue:#EDF3FF;

  font-family:'Rubik',-apple-system,system-ui,"Segoe UI",sans-serif;
  color:var(--n-800);
  background:transparent;
  overflow:visible;
  /* Figma uses leading-[normal] for body copy and leading-[1.1] for headers;
     without this the site-wide line-height from main.css inflates every block */
  line-height:normal;
}
.site-header *,.site-header *::before,.site-header *::after{box-sizing:border-box}
.site-header img{max-width:100%}
.site-header p{margin:0}

.site-header .v4-wrap{max-width:1264px;margin:0 auto;padding:0 24px;width:100%}
.site-header .v4-wrap--wide{max-width:1200px}

.site-header .v4-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:24px;
  background:var(--cta-blue);border-radius:999px;
  padding:12px 12px 12px 32px;color:#fff;text-decoration:none;
  font-size:20px;font-weight:600;letter-spacing:-1px;white-space:nowrap;
  border:0;cursor:pointer;transition:transform .15s ease,background .15s ease
}
.site-header .v4-cta:hover{background:#0b3fd1;color:#fff;transform:translateY(-1px)}
.site-header .v4-cta__ico{
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--brand-dark);border-radius:99px;padding:8px;flex:0 0 auto
}
.site-header .v4-cta__ico img{display:block;width:24px;height:24px;transition:transform .25s ease}
.site-header .v4-cta:hover .v4-cta__ico img{transform:rotate(90deg)}
.site-header .v4-cta--18{font-size:18px;letter-spacing:-.8px;padding-left:24px}
.site-header .v4-cta--sm{font-size:16px;letter-spacing:-.8px;gap:16px;padding:8px 8px 8px 24px}
.site-header .v4-cta--sm .v4-cta__ico{width:32px;height:32px;padding:0}
.site-header .v4-cta--sm .v4-cta__ico img{width:20px;height:20px}
/* ---------- promo bar ---------- */
.site-header .v4-promo{background:var(--brand-dark);padding:8px 0;color:#fff}
.site-header .v4-promo__row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .v4-promo__left{display:flex;align-items:center;gap:8px}
.site-header .v4-promo__left img{display:block;width:20px;height:20px;flex:0 0 auto}
.site-header .v4-promo__txt{font-size:14px;font-weight:400;letter-spacing:-.8px;line-height:20px}
.site-header .v4-promo__txt a{color:var(--cta-green);text-decoration:underline}
.site-header .v4-promo__nav{display:flex;align-items:center;gap:16px}
.site-header .v4-promo__nav > a,
.site-header .v4-promo__trigger{
  display:inline-flex;align-items:center;gap:4px;
  font-family:inherit;background:none;border:0;padding:0;cursor:pointer;
  font-size:12px;font-weight:500;letter-spacing:-.7px;line-height:20px;color:#fff;text-decoration:none;
  transition:color .15s ease
}
.site-header .v4-promo__nav > a:hover,
.site-header .v4-promo__trigger:hover,
.site-header .v4-promo__item.is-open .v4-promo__trigger{color:var(--cta-green)}
.site-header .v4-promo__trigger img{display:block;width:12px;height:12px;transition:transform .2s ease}
.site-header .v4-promo__item.is-open .v4-promo__trigger img{transform:rotate(180deg)}

/* promo-bar dropdowns: right-aligned to their trigger so they can never
   run past the edge of the bar */
.site-header .v4-promo__item{position:relative;display:flex;align-items:center}
.site-header .v4-pd{
  position:absolute;top:100%;right:0;z-index:40;padding-top:12px;
  transform:translateY(-6px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s
}
.site-header .v4-promo__item.is-open .v4-pd{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.site-header .v4-pd__card{
  background:#fff;border-radius:5px;padding:12px;min-width:210px;
  box-shadow:0 8px 30px rgba(0,0,0,.18)
}
.site-header .v4-promo__item.is-off{opacity:.5;pointer-events:none}
.site-header .v4-pdi{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:6px;text-decoration:none;
  font-size:14px;font-weight:400;line-height:18px;color:#535076;
  transition:background .15s ease,color .15s ease
}
.site-header .v4-pdi:hover{background:#EEF1F4;color:var(--brand-dark)}
.site-header .v4-pdi__ico{flex:0 0 auto;color:var(--brand-blue);line-height:0}
.site-header .v4-pdi__ico svg{display:block;width:18px;height:18px}
/* the tick marks the current choice and reserves its space either way,
   so the rows don't shift when the selection changes */
.site-header .v4-pdi__on{width:15px;height:15px;margin-left:auto;flex:0 0 auto;opacity:0;color:var(--brand-blue)}
.site-header .v4-pdi.is-on{color:var(--brand-dark);font-weight:600}
.site-header .v4-pdi.is-on .v4-pdi__on{opacity:1}

/* ---------- floating pill menu ---------- */
.site-header .v4-menu{padding-top:40px}
/* Sticky nav: the pill detaches once it would scroll away and floats at the
   top on its own — no bar behind it. Fixed rather than sticky because sticky
   would be trapped inside .v4-band and stop holding a few screens down. */
.site-header .v4-menu__ph{display:none}
.site-header .v4-menu__ph.is-on{display:block}
.site-header .v4-menu.is-stuck{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:10px 0;
  animation:v4MenuDrop .3s cubic-bezier(.2,.7,.2,1)
}
/* floating free of the page, the pill needs its own lift */
.site-header .v4-menu.is-stuck .v4-menu__inner{box-shadow:0 6px 20px rgba(21,15,90,.08)}
@keyframes v4MenuDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.site-header .v4-menu.is-stuck{animation:none}}
.site-header .v4-menu__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:#fff;border:1px solid var(--n-50);border-radius:999px;
  padding:16px 16px 16px 24px;
  position:relative        /* anchor for the mega dropdowns */
}
.site-header .v4-menu__logo{display:block;text-decoration:none;line-height:0;flex:0 0 auto}
.site-header .v4-menu__logo img{display:block;width:105.268px;height:24.124px}
.site-header .v4-menu__logo span{
  display:block;margin-top:5.85px;
  font-size:6.579px;font-weight:500;letter-spacing:1.3816px;
  color:var(--brand-dark);text-align:center;white-space:nowrap
}
.site-header .v4-menu__nav{display:flex;align-items:center;gap:32px}
.site-header .v4-menu__item{display:flex;align-items:center}
/* direct children only — this rule is for the top-level nav links, and
   without the child combinator it also matched every <a> inside the
   dropdown panels and overrode their colour and layout */
.site-header .v4-menu__nav > a,
.site-header .v4-menu__trigger{
  display:inline-flex;align-items:center;gap:4px;
  font-family:inherit;background:none;border:0;padding:0;cursor:pointer;
  font-size:18px;font-weight:500;letter-spacing:-.7px;color:var(--main-dark);text-decoration:none
}
.site-header .v4-menu__nav > a:hover,
.site-header .v4-menu__trigger:hover,
.site-header .v4-menu__item.is-open .v4-menu__trigger{color:var(--cta-blue)}
.site-header .v4-menu__trigger img{display:block;width:12px;height:12px;transition:transform .2s ease}
.site-header .v4-menu__item.is-open .v4-menu__trigger img{transform:rotate(180deg)}

/* ---------- mega dropdowns ----------
   Anchored to the pill (not the trigger) and centred, so every panel
   shares one position and width instead of drifting per item — and it
   can never overflow the viewport at narrow desktop widths. */
.site-header .v4-dd{
  position:absolute;top:100%;left:50%;z-index:20;
  width:1000px;max-width:calc(100vw - 48px);
  padding-top:14px;                 /* invisible hover bridge over the gap */
  transform:translateX(-50%) translateY(-8px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s
}
/* opened by script rather than :hover, so the pointer gets a grace period
   to cross the gap — including diagonally — without the panel snapping shut */
.site-header .v4-menu__item.is-open .v4-dd{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)
}
/* Panel styling copied from the live site's .navigation__submenu
   (assets/scss/partials/_menu.scss): white card, 30px/24px padding,
   5px radius, 3-column grid with 40px/30px gutters, and the little
   white arrow pointing back up at the trigger. */
.site-header .v4-dd__card{
  position:relative;background:#fff;border-radius:5px;padding:34px 28px;
  box-shadow:0 8px 30px rgba(0,0,0,.15)
}
.site-header .v4-dd--wide .v4-dd__card{border-radius:5px 5px 0 0}
.site-header .v4-dd__card::after{
  content:"";position:absolute;top:-8px;left:var(--arrow-x,50%);
  width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;
  border-bottom:10px solid #fff;margin-left:-10px
}
/* the item padding eats into the gaps, and the negative margin pulls the
   grid back out so the text still lines up with the card's own padding */
.site-header .v4-dd__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 12px;margin:-12px -14px}
.site-header .v4-dd__grid--2{grid-template-columns:repeat(2,1fr)}
.site-header .v4-dd--narrow{width:640px;max-width:calc(100vw - 48px)}
.site-header .v4-ddi{
  display:flex;align-items:flex-start;text-decoration:none;
  padding:12px 14px;border-radius:10px;transition:background .15s ease
}
.site-header .v4-ddi:not(.v4-ddi--off):hover{background:#EEF1F4}
.site-header .v4-ddi--off{pointer-events:none}
.site-header .v4-ddi--off .v4-ddi__ico,
.site-header .v4-ddi--off .v4-ddi__d{opacity:.4}
.site-header .v4-ddi__ico{margin-right:16px;flex:0 0 auto;color:var(--brand-blue);line-height:0}
.site-header .v4-ddi__ico img{display:block;width:24px;height:24px;max-width:unset;object-fit:contain}
.site-header .v4-ddi__ico svg{display:block;width:24px;height:24px}
.site-header .v4-ddi__tx{display:flex;flex-direction:column;min-width:0}
.site-header .v4-ddi__t{
  position:relative;display:block;
  font-size:16px;font-weight:400;line-height:18px;letter-spacing:0;
  color:#535076;margin-bottom:2px;transition:color .25s ease
}
.site-header .v4-ddi:hover .v4-ddi__t{color:var(--brand-dark)}
.site-header .v4-ddi--off .v4-ddi__t > span:not(.v4-ddi__soon){opacity:.4}
.site-header .v4-ddi__d{font-size:12px;font-weight:400;line-height:14px;letter-spacing:0;color:#535076}
.site-header .v4-ddi__soon{
  background:var(--cta-blue);color:#fff;border-radius:5px;
  padding:2px 6px 1px;font-size:10px;font-weight:400;line-height:12px;
  white-space:nowrap;margin-left:8px
}
/* full-width footer bar, like the live "See all of our hosting offers" */
.site-header .v4-dd__foot{
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-dark);border-radius:0 0 5px 5px;padding:14px 24px
}
.site-header .v4-dd__all{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;letter-spacing:-.2px;color:#fff;text-decoration:none
}
.site-header .v4-dd__all svg{width:15px;height:15px;transition:transform .15s ease}
.site-header .v4-dd__all:hover svg{transform:translateX(3px)}
.site-header .v4-menu__right{display:flex;align-items:center;gap:16px}
/* cart and account share one class so their hover cannot drift apart —
   the cart's ring used to be baked into its SVG, which is why it behaved
   differently; both now draw the ring in CSS and the glyph from the sprite */
.site-header .v4-menu__icon{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:1px solid var(--n-200);border-radius:999px;background:#fff;
  color:var(--n-800);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease
}
.site-header .v4-menu__icon svg{display:block;width:24px;height:24px}
.site-header .v4-menu__icon:hover{
  background:var(--bg-blue);border-color:var(--brand-blue);
  color:var(--brand-blue);transform:translateY(-1px)
}
.site-header .v4-menu__icon:focus-visible{outline:2px solid var(--cta-blue);outline-offset:2px}
.site-header .v4-menu__dot{
  position:absolute;top:2px;right:0;width:12px;height:12px;
  border-radius:999px;background:var(--cta-green)
}
.site-header .v4-burger{display:none}


.site-header{position:relative;z-index:200}
.site-header .v4-promo{position:relative;z-index:40}
.site-header .v4-menu{position:relative;z-index:30}
.site-header .v4-menu.is-stuck{position:fixed;z-index:200}
.site-header .site-header__mobile-links{display:none}
.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid #2E5BDF;outline-offset:4px}
.site-header a[aria-current="page"],.site-header .is-active > .v4-menu__trigger{color:var(--cta-blue)}
.site-header a[aria-current="page"] .v4-ddi__t{color:var(--cta-blue);font-weight:600}
@media(max-width:1200px){
 .site-header .v4-menu__nav{gap:18px}
 .site-header .v4-menu__trigger,.site-header .v4-menu__nav > a{font-size:16px}
 .site-header .v4-menu__inner{gap:16px}
 .site-header .v4-menu__right{gap:10px}
 .site-header .v4-promo__row{gap:16px}
}
@media(max-width:1050px){
 .site-header .v4-menu__nav{display:none}
 .site-header .v4-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--n-200);border-radius:999px;background:#fff;cursor:pointer}
 .site-header .v4-burger svg{width:22px;height:22px;color:var(--n-800)}
 .site-header .v4-promo__row{flex-wrap:wrap;justify-content:center;gap:8px}
 .site-header .v4-promo__nav{flex-wrap:wrap;justify-content:center;gap:14px}
 .site-header .v4-menu.is-mobile-open .v4-menu__nav{display:flex}
 .site-header .v4-menu__nav{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:16px;background:#fff;border:1px solid var(--n-50);border-radius:16px;box-shadow:0 8px 30px #150f5a26;max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain}
 .site-header .v4-menu.is-stuck .v4-menu__nav{max-height:calc(100dvh - 110px)}
 .site-header .v4-menu__item{display:block}
 .site-header .v4-menu__trigger,.site-header .v4-menu__nav > a{width:100%;justify-content:space-between;padding:14px 8px}
 .site-header .v4-dd,.site-header .v4-dd--narrow{display:none;position:static;width:100%;padding:0;transform:none;transition:none}
 .site-header .v4-menu__item.is-open .v4-dd{display:block;transform:none}
 .site-header .v4-dd__card{padding:12px 8px;box-shadow:none}
 .site-header .v4-dd__card::after{display:none}
 .site-header .v4-dd__grid,.site-header .v4-dd__grid--2{grid-template-columns:1fr;gap:4px;margin:0}
 .site-header .v4-ddi{padding:12px 8px}
 .site-header .site-header__mobile-links{display:flex;flex-direction:column;border-top:1px solid var(--n-50);margin-top:8px;padding-top:8px}
 .site-header .site-header__mobile-links a{padding:14px 8px;color:var(--main-dark)}
}
@media(max-width:720px){
 .site-header .v4-wrap{padding-left:16px;padding-right:16px}
 .site-header .v4-promo__txt{font-size:12px}
 .site-header .v4-promo__nav > a{display:none}
 .site-header .v4-menu{padding-top:24px}
 .site-header .v4-menu.is-stuck{padding-top:10px}
 .site-header .v4-menu__inner{padding:12px 12px 12px 16px;gap:8px}
 .site-header .v4-menu__icon{display:none}
 .site-header .v4-menu__right{gap:8px}
 .site-header .v4-cta--sm{font-size:14px;padding:6px 6px 6px 16px;gap:10px}
 .site-header .v4-cta--sm .v4-cta__ico{width:28px;height:28px}
 .site-header .v4-burger{width:40px;height:40px}
}
@media(max-width:360px){
 .site-header .v4-cta--sm .v4-cta__ico{display:none}
 .site-header .v4-cta--sm{padding:10px}
}

/* Banner pages own the space behind the floating menu. The legacy negative
   margin assumed the old header height and left a white strip above the hero. */
.site-header:has(~ .banner, ~ :is(.ex2v4,.nubio-page,.wmh-page,.vps-page)) .v4-menu:not(.is-stuck){
 position:absolute;top:100%;left:0;right:0;
}
.site-header:has(~ .banner, ~ :is(.ex2v4,.nubio-page,.wmh-page,.vps-page)) .v4-menu__ph{display:none}
.site-header ~ .banner,
.site-header ~ :is(.wmh-page,.vps-page) > :is(.banner,.vps-hero),
.site-header ~ .nubio-page > .nubio-hero-zone{margin-top:0}
/* Nubio owns a nested hero grid; reserve the full floating-menu height here. */
.site-header ~ .nubio-page > .nubio-hero-zone{padding-top:122px}
@media(max-width:991px){
 .site-header ~ .banner,
 .site-header ~ :is(.wmh-page,.vps-page) > :is(.banner,.vps-hero){padding-top:160px}
}

@media(max-width:720px){
 .site-header ~ .nubio-page > .nubio-hero-zone{padding-top:90px}
}

.site-header .v4-promo__item--selector .v4-promo__trigger{font-size:14px;font-weight:700;letter-spacing:0;padding:5px 10px;border:1px solid rgba(255,255,255,.65);border-radius:5px}
.site-header .v4-promo__item--selector .v4-promo__trigger:focus-visible{outline:2px solid var(--cta-green);outline-offset:2px}
.site-header .v4-menu.is-stuck{background:#fff;padding:0;border-bottom:1px solid var(--n-50);box-shadow:0 6px 20px rgba(21,15,90,.08)}
.site-header .v4-menu.is-stuck .v4-wrap{max-width:none;width:100%;padding-left:clamp(16px,4vw,64px);padding-right:clamp(16px,4vw,64px)}
.site-header .v4-menu.is-stuck .v4-menu__inner{border:0;border-radius:0;box-shadow:none}