/* ===== Hiring Point service gate — split-screen chooser ===== */
.hpg{position:fixed;inset:0;z-index:9999;display:none}
.hpg.is-open{display:block}
html.hpg-lock,body.hpg-lock{overflow:hidden}

.hpg-panels{display:flex;width:100%;height:100%;position:relative}
.hpg-panels::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.06) 50%,rgba(255,255,255,.28))}
.hpg-panel{position:relative;flex:1;border:0;padding:0;cursor:pointer;overflow:hidden;
  background-size:cover;background-position:center;transition:flex-grow .5s cubic-bezier(.22,1,.36,1);color:#fff;
  display:flex;align-items:flex-end;justify-content:center}
.hpg-panel::before{content:"";position:absolute;inset:0;transition:opacity .4s}
.hpg-panel--clean::before{background:linear-gradient(180deg,rgba(9,22,48,.35) 0%,rgba(9,22,48,.62) 55%,rgba(9,22,48,.9) 100%),linear-gradient(90deg,rgba(21,45,80,.45),transparent 60%)}
.hpg-panel--beauty::before{background:linear-gradient(180deg,rgba(60,18,42,.28) 0%,rgba(90,22,58,.55) 55%,rgba(70,16,46,.88) 100%),linear-gradient(270deg,rgba(150,30,86,.4),transparent 60%)}
.hpg-panel:hover{flex-grow:1.35}
.hpg-panel:hover::before{opacity:.82}
.hpg-panel:not(:hover) .hpg-panel-in{opacity:.94}

.hpg-panel-in{position:relative;z-index:2;text-align:center;padding:0 24px clamp(48px,8vh,96px);max-width:440px;transition:transform .4s,opacity .4s}
.hpg-panel:hover .hpg-panel-in{transform:translateY(-8px)}
.hpg-ic{width:62px;height:62px;margin:0 auto 18px;border-radius:17px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.hpg-panel h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.9rem,3.2vw,2.6rem);margin:0;line-height:1.05;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hpg-panel p{margin:10px 0 0;font-size:clamp(.95rem,1.3vw,1.05rem);color:rgba(255,255,255,.88);line-height:1.5}
.hpg-go{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:13px 26px;border-radius:999px;
  font-weight:700;font-size:.98rem;transition:.25s;border:1px solid rgba(255,255,255,.5)}
.hpg-panel--clean .hpg-go{background:rgba(47,111,219,.92);border-color:transparent;box-shadow:0 18px 40px -18px rgba(47,111,219,.9)}
.hpg-panel--beauty .hpg-go{background:rgba(226,61,122,.95);border-color:transparent;box-shadow:0 18px 40px -18px rgba(226,61,122,.9)}
.hpg-panel:hover .hpg-go{transform:translateY(-1px)}
.hpg-go svg{transition:transform .25s}
.hpg-panel:hover .hpg-go svg{transform:translateX(4px)}

/* centred brand lockup */
.hpg-brand{position:absolute;top:0;left:0;right:0;z-index:5;text-align:center;padding:clamp(26px,5vh,54px) 20px clamp(44px,9vh,90px);pointer-events:none;
  background:linear-gradient(180deg,rgba(9,18,38,.62) 0%,rgba(9,18,38,.34) 48%,rgba(9,18,38,0) 100%)}
.hpg-logo{height:48px;width:auto;display:block;margin:0 auto;filter:drop-shadow(0 4px 16px rgba(0,0,0,.45))}
.hpg-tag{margin:14px auto 0;max-width:560px;color:#fff;font-size:clamp(14px,1.7vw,17px);line-height:1.5;
  text-shadow:0 2px 14px rgba(0,0,0,.55)}
.hpg-tag b{font-weight:800}
.hpg-or{position:absolute;top:50%;left:50%;z-index:6;transform:translate(-50%,-50%);pointer-events:none;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);color:#13244a;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;box-shadow:0 10px 34px -10px rgba(0,0,0,.6)}

/* mobile: stack */
@media(max-width:760px){
  .hpg-panels{flex-direction:column}
  .hpg-panel{flex:1 1 50%;align-items:center}
  .hpg-panel:hover{flex-grow:1}
  .hpg-panel-in{padding:clamp(20px,4vh,40px) 20px}
  .hpg-panel--clean .hpg-panel-in{padding-top:clamp(120px,20vh,160px)}
  .hpg-or{width:50px;height:50px;font-size:13px}
  .hpg-brand{padding-top:22px}
  .hpg-logo{height:40px}
}

/* vertical-aware content: show only the active vertical's copy on shared pages */
body:not(.hpv-beauty) [data-v="beauty"]{display:none!important}
body.hpv-beauty [data-v="clean"]{display:none!important}

/* switch chip in nav — inherits the nav link colour so it adapts to light/dark headers */
.hp-switch{display:inline-flex;align-items:center;gap:6px;font-size:13px!important;font-weight:700!important;
  padding:7px 13px;border-radius:999px;border:1.5px solid currentColor;opacity:.9;transition:.2s;cursor:pointer}
.hp-switch:hover{opacity:1;background:rgba(128,128,128,.14)}