/* =========================================================================
   HERO BANNER  -  plain CSS, no libraries (home.html)
   The site header sits on top of the banner, so set --hb-header on .hb to the
   header height: the copy, circles, arrows and badge are then centred/placed in
   the area below it, and a white band keeps the header readable.
   ========================================================================= */

:root{
  --hb-overlay:rgba(22,35,63,.10);         /* full-slide tint */
  --hb-circle-outer:rgba(22,35,64,.30);
  --hb-circle-inner:rgba(22,35,64,.50);
  --hb-grad:linear-gradient(90deg,#f7693c 0%,#c94f45 24%,#c74e45 25%,#7d3785 50%,#623098 68%,#582d9f 75%,#3928af 100%);
  --hb-arrow-ink:#3c2fc0;
  --hb-gear:url('../img/gear_badge.webp');
  --hb-slide-ms:9000ms;                    /* keep in sync with SLIDE_MS in banner.js */
  --hb-fade-ms:1000ms;
}

.hb{
  --hb-header:0px;                         /* height of the header overlaid on top of the banner */
  position:relative;
  height:100vh;
  height:100svh;
  min-height:600px;
  overflow:hidden;
  background:#16233f;
  color:#fff;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hb *,.hb *::before,.hb *::after{box-sizing:border-box;}

/* ---------- White band behind the overlaid site header ---------- */
.hb[data-overlay-header]{--hb-header:62px;}              /* keep equal to the site header height (css/theme.css .nav + .logo) */
@media (max-width:600px){ .hb[data-overlay-header]{--hb-header:56px;} }
.hb[data-overlay-header]::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:10;pointer-events:none;
  height:var(--hb-header);
  background:#fff;
}

/* ---------- Progress bar (below the header) ---------- */
.hb-progress{position:absolute;left:0;top:var(--hb-header);height:10px;width:0;background:rgba(255,255,255,.25);z-index:30;pointer-events:none;}
.hb.is-running .hb-progress{animation:hbProgress var(--hb-slide-ms) linear forwards;}
.hb.is-paused .hb-progress{animation-play-state:paused;}
@keyframes hbProgress{from{width:0;}to{width:100%;}}

/* ---------- Slides (cross-fade) ---------- */
.hb-slides{position:absolute;inset:0;}
.hb-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity var(--hb-fade-ms) ease, visibility 0s linear var(--hb-fade-ms);
}
.hb-slide.is-active{opacity:1;visibility:visible;z-index:2;transition:opacity var(--hb-fade-ms) ease;}
.hb-slide.is-leaving{visibility:visible;z-index:1;}

.hb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.hb-shade{position:absolute;inset:0;background:var(--hb-overlay);}

/* ---------- Two dark circles behind the text ---------- */
.hb-circle{
  --d:1081px;
  position:absolute;left:50%;top:calc(var(--hb-header) + (100% - var(--hb-header)) / 2);
  width:var(--d);height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius:50%;
  opacity:0;
}
.hb-circle--outer{--d:1081px;background:var(--hb-circle-outer);}
.hb-circle--inner{--d:811px;background:var(--hb-circle-inner);}
@media (max-width:1239px){ .hb-circle--outer{--d:872px;} .hb-circle--inner{--d:651px;} }
@media (max-width:1023px){ .hb-circle--outer{--d:760px;} .hb-circle--inner{--d:524px;} }
@media (max-width:777px){  .hb-circle--outer{--d:662px;} .hb-circle--inner{--d:501px;} }

/* ---------- Copy block, centred in the banner ---------- */
.hb-content{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:calc(10px + var(--hb-header)) clamp(16px,6.5vw,92px) 20px;
}
.hb-copy{width:100%;max-width:674px;text-align:center;}

.hb-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  margin:0 0 25px;
  font-size:13px;line-height:20px;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  color:#fff;
  opacity:0;
}
.hb-ico{width:18px;height:18px;flex:none;}

.hb-title{
  margin:0 auto;padding:0 0 30px;
  font-family:inherit;color:#fff;
  font-size:68px;line-height:63px;font-weight:700;letter-spacing:-2px;
}
.hb-title--narrow{max-width:470px;}
.hb-title .hb-word{display:inline-block;opacity:0;}
/* a wider column for a headline whose key phrase must stay on one line ("Workplace Experience"); phones let it wrap again */
.hb-copy--wide{max-width:820px;}
.hb-copy--wide .hb-text{max-width:28em;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;text-wrap:balance;}  /* ~28 characters-widths: this sentence breaks into two even lines at any font size */
.hb-title .hb-word--keep{white-space:nowrap;}
@media (max-width:600px){ .hb-title .hb-word--keep{white-space:normal;} }

.hb-text{
  margin:0;padding:0 90px 30px;
  font-size:18px;line-height:32px;font-weight:300;color:rgba(255,255,255,.6);
  opacity:0;
}

/* ---------- Button ---------- */
.hb-btn{
  position:relative;display:inline-block;margin-top:5px;
  padding:20px 74px 20px 46px;
  border-radius:40px;
  background:var(--hb-grad);
  color:#fff;text-decoration:none;
  font-size:18px;line-height:27px;font-weight:500;
  opacity:0;
  transition:filter .25s ease, transform .25s ease;
}
.hb-btn:hover{filter:brightness(1.08);}
.hb-btn-arrow{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:#fff;color:var(--hb-arrow-ink);
  box-shadow:0 5px 10px 0 rgba(0,0,0,.35);
  transition:transform .25s ease;
}
.hb-btn-arrow svg{width:18px;height:18px;}
.hb-btn:hover .hb-btn-arrow{transform:translateY(-50%) translateX(3px);}

/* ---------- "Request a Quote" gear badge ---------- */
.hb-badge{
  position:absolute;z-index:6;
  top:calc(var(--hb-header) + 75px);left:calc(50% + 405px);
  width:110px;height:110px;
  display:flex;flex-direction:column;align-items:center;
  padding-top:23px;
  background:var(--hb-gear) center / cover no-repeat;
  color:#fff;text-decoration:none;text-align:center;
  font-size:12px;line-height:14px;font-weight:500;text-transform:uppercase;
  opacity:0;
}
.hb-badge svg{width:24px;height:24px;margin-bottom:1px;}
@media (max-width:1239px){ .hb-badge{left:auto;right:97px;top:calc(var(--hb-header) + 60px);width:89px;height:89px;padding-top:17px;} .hb-badge svg{width:20px;height:20px;} }
@media (max-width:1023px){ .hb-badge{right:35px;top:calc(var(--hb-header) + 240px);width:92px;height:92px;font-size:10px;line-height:12px;font-weight:600;} }
@media (max-width:777px){  .hb-badge{right:16px;top:calc(var(--hb-header) + 16px);width:80px;height:80px;padding-top:14px;} .hb-badge svg{width:18px;height:18px;} }

/* ---------- Arrows ---------- */
.hb-arrow{
  position:absolute;top:calc(var(--hb-header) + (100% - var(--hb-header)) / 2);margin-top:-27px;z-index:20;
  width:54px;height:54px;padding:0;
  border:1px solid rgba(255,255,255,.2);border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s, color .3s;
}
.hb-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.hb-arrow:hover,.hb-arrow:focus-visible{background:#fff;color:#000;}
.hb-arrow--prev{left:50px;}
.hb-arrow--next{right:50px;}
@media (max-width:1023px){ .hb-arrow{display:none;} }

/* ---------- Bullets (phones only) ---------- */
.hb-bullets{position:absolute;left:0;right:0;bottom:30px;z-index:20;display:none;justify-content:center;gap:10px;}
.hb-bullet{width:12px;height:12px;padding:0;border:2px solid #fff;border-radius:50%;background:transparent;box-sizing:content-box;cursor:pointer;}
.hb-bullet[aria-selected="true"]{background:#fff;}
@media (max-width:777px){ .hb-bullets{display:flex;} }

/* =========================================================================
   Entry animations. They run each time a slide becomes .is-active.
   Delays/durations match the original timeline.
   ========================================================================= */
@keyframes hbCircle{from{opacity:0;transform:scale(.545);}to{opacity:1;transform:scale(1);}}
@keyframes hbDown{from{opacity:0;transform:translateY(-80px);}to{opacity:1;transform:none;}}
@keyframes hbUp{from{opacity:0;transform:translateY(80px);}to{opacity:1;transform:none;}}
@keyframes hbPop{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:none;}}
@keyframes hbWord{from{opacity:0;filter:blur(5px);}to{opacity:1;filter:blur(0);}}
@keyframes hbShade{from{opacity:0;}to{opacity:1;}}

.hb-shade{opacity:0;}
.hb-slide.is-active .hb-shade{animation:hbShade 300ms ease both;}

.hb-slide.is-active .hb-circle--outer{animation:hbCircle 1400ms cubic-bezier(.68,-.6,.32,1.6) 800ms both;}
.hb-slide.is-active .hb-circle--inner{animation:hbCircle 1400ms cubic-bezier(.68,-.6,.32,1.6) 300ms both;}

.hb-slide.is-active .hb-eyebrow{animation:hbDown 1500ms cubic-bezier(.45,0,.55,1) 2000ms both;}
.hb-slide.is-active .hb-title .hb-word{animation:hbWord 900ms cubic-bezier(.32,0,.67,0) both;animation-delay:calc(400ms + var(--i, 0) * 170ms);}
.hb-slide.is-active .hb-text{animation:hbUp 1500ms cubic-bezier(.45,0,.55,1) 2000ms both;}
.hb-slide.is-active .hb-btn{animation:hbUp 1200ms cubic-bezier(.45,0,.55,1) 2800ms both;}
.hb-slide.is-active .hb-badge{animation:hbPop 1100ms cubic-bezier(.34,1.56,.64,1) 3800ms both;}

/* Leaving slide keeps its final state while it fades out. */
.hb-slide.is-leaving .hb-circle,
.hb-slide.is-leaving .hb-shade,
.hb-slide.is-leaving .hb-eyebrow,
.hb-slide.is-leaving .hb-title .hb-word,
.hb-slide.is-leaving .hb-text,
.hb-slide.is-leaving .hb-btn,
.hb-slide.is-leaving .hb-badge{opacity:1;}

/* ---------- Tablet / phone type sizes ---------- */
@media (max-width:1239px){
  .hb-title{font-size:55px;line-height:51px;padding-bottom:24px;}
  .hb-title--narrow{max-width:none;}
  .hb-text{font-size:15px;line-height:26px;padding:0 74px 30px;}
}
@media (max-width:1023px){
  .hb-copy{padding:0 25px;}
  .hb-title{font-size:46px;line-height:49px;padding-bottom:21px;}
  .hb-text{font-size:15px;line-height:27px;padding:0 0 27px;margin:0 50px;}
}
@media (max-width:777px){
  .hb{min-height:720px;}
  .hb-copy{padding:0 15px;}
  .hb-eyebrow{font-size:15px;}
  .hb-title{font-size:50px;line-height:54px;letter-spacing:0;padding-bottom:22px;}
  .hb-title--narrow{max-width:401px;}
  .hb-text{font-size:20px;line-height:30px;padding:0 10px 30px;margin:0;}
  .hb-btn{font-size:20px;}
}

/* ---------- Reduced motion: show everything immediately ---------- */
@media (prefers-reduced-motion: reduce){
  .hb-slide,.hb-slide.is-active{transition:none;}
  .hb-slide.is-active .hb-shade,
  .hb-slide.is-active .hb-circle,
  .hb-slide.is-active .hb-eyebrow,
  .hb-slide.is-active .hb-title .hb-word,
  .hb-slide.is-active .hb-text,
  .hb-slide.is-active .hb-btn,
  .hb-slide.is-active .hb-badge{animation:none;opacity:1;filter:none;transform:none;}
  .hb-progress{display:none;}
}