/* ==========================================================================
   TSG Revamp — home hero
   Source: Figma "TSG Revamp" (x1WyUnhQH6w6Zr33uWx0yp), frame 17:1391
   Loaded only by include/header.php, which only index.php uses.
   Everything is scoped under .hero-revamp so no other page is affected.
   ========================================================================== */

.hero-revamp{
  --tsg-haze:63,100,145;        /* Figma Ellipse 1134/1135 fill #3f6491 */
  --tsg-ink:#1e2d40;
  --tsg-steel:#8fb0d6;
  --tsg-steel-mid:#7b96bb;
  --tsg-ghost:rgba(23,36,53,.15);
  --tsg-btn-a:#3d6694;
  --tsg-btn-b:#2a4c74;
  --tsg-font:"Plus Jakarta Sans","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* replace the dark banner-11.webp backdrop with the Figma's white ground */
  background-image:none !important;
  background-color:#fff !important;
  padding-bottom:0 !important;
  position:relative;
  /* NB: no overflow:hidden here — it would clip the Services mega-menu.
     The blobs are clipped by .tsg-haze instead. */

  /* one full screen: nav + hero */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

/* ---- the two drifting shapes ------------------------------------------- */
.tsg-haze{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.tsg-blob{
  --s:clamp(640px,58vw,1180px);
  position:absolute;
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  margin-left:calc(var(--s) / -2);
  margin-top:calc(var(--s) / -2);
  will-change:transform,opacity;
  animation-timing-function:cubic-bezier(.45,.05,.55,.95);
  animation-iteration-count:infinite;
  /* a radial gradient stands in for Figma's 400px layer blur: same look,
     but it animates on the GPU instead of repainting a blur every frame */
  background:radial-gradient(closest-side,
    rgba(var(--tsg-haze),.40) 0%,
    rgba(var(--tsg-haze),.36) 15%,
    rgba(var(--tsg-haze),.29) 30%,
    rgba(var(--tsg-haze),.19) 45%,
    rgba(var(--tsg-haze),.11) 60%,
    rgba(var(--tsg-haze),.05) 74%,
    rgba(var(--tsg-haze),.018) 87%,
    rgba(var(--tsg-haze),0) 100%);
}
/* Figma anchors: left ellipse centre (0, 42%), right ellipse centre (100%, 62%) */
.tsg-blob--l{left:0;top:42%;animation-name:tsgDriftL;animation-duration:17s}
.tsg-blob--r{left:100%;top:62%;animation-name:tsgDriftR;animation-duration:23s}

/* Opacity tracks scale: the bigger a shape swells (the "closer" it reads),
   the denser it gets — so the haze darkens as it moves toward the viewer. */
@keyframes tsgDriftL{
  0%  {transform:translate3d(0,0,0) scale(1);opacity:.80}
  22% {transform:translate3d(6%,-8%,0) scale(1.16);opacity:.98}
  44% {transform:translate3d(12%,5%,0) scale(.93);opacity:.64}
  67% {transform:translate3d(4%,10%,0) scale(1.12);opacity:.94}
  85% {transform:translate3d(-5%,4%,0) scale(1.02);opacity:.83}
  100%{transform:translate3d(0,0,0) scale(1);opacity:.80}
}
@keyframes tsgDriftR{
  0%  {transform:translate3d(0,0,0) scale(1);opacity:.80}
  26% {transform:translate3d(-9%,7%,0) scale(1.14);opacity:.95}
  50% {transform:translate3d(-15%,-6%,0) scale(.92);opacity:.62}
  73% {transform:translate3d(-6%,-11%,0) scale(1.17);opacity:1}
  88% {transform:translate3d(2%,-3%,0) scale(1.03);opacity:.84}
  100%{transform:translate3d(0,0,0) scale(1);opacity:.80}
}

/* ---- nav, relit for a white ground ------------------------------------- */
/* The markup carries `wow animate__animated animate__fadeInDown`. WOW.js does
   not initialise at mobile widths, which leaves the bar parked on the
   animation's first frame — translateY(-100%), opacity 0 — i.e. off-screen.
   The nav must never depend on a scroll-triggered reveal, so pin it visible. */
.hero-revamp .header{
  position:relative;
  z-index:3;
  background:transparent;
  animation:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

.hero-revamp .wrapper{align-items:center}
.hero-revamp .header-item-left h1{margin:0;line-height:0}
.hero-revamp .header-item-left img{width:167px;max-width:100%;height:auto}

.hero-revamp .menu-section > li > a,
.hero-revamp .menu .menu-section > li > a{
  color:#1a1a1a;
  font-family:var(--tsg-font);
  font-weight:500;
  font-size:18px;
  letter-spacing:-.04em;
}
.hero-revamp .menu-section > li > a:hover,
.hero-revamp .menu-section > li > a:focus{color:var(--tsg-btn-a)}

/* Figma: phone is quiet text with a small glyph, not a bordered button */
.hero-revamp .tsg-phone{
  color:#1a1a1a !important;
  font-family:var(--tsg-font);
  font-size:16px !important;
  font-weight:500 !important;
  letter-spacing:-.03em;
  text-decoration:none;
  white-space:nowrap;
  border:0 !important;
  background:none !important;
  padding:0 !important;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.hero-revamp .tsg-phone::before,
.hero-revamp .tsg-phone::after{display:none !important}
.hero-revamp .tsg-phone i{font-size:14px;color:var(--tsg-btn-a)}
.hero-revamp .tsg-phone:hover{color:var(--tsg-btn-a) !important}

/* Figma: "Get A Quote" is a navy pill, not the site's blue square gradient */
.hero-revamp .header-item-right .btn-primary{
  background:linear-gradient(145deg,var(--tsg-btn-a),var(--tsg-btn-b)) !important;
  background-image:linear-gradient(145deg,var(--tsg-btn-a),var(--tsg-btn-b)) !important;
  border:0 !important;
  border-radius:999px !important;
  padding:.78rem 1.7rem !important;
  font-family:var(--tsg-font);
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:-.02em;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(42,76,116,.26);
  transition:transform .18s ease,box-shadow .18s ease;
}
.hero-revamp .header-item-right .btn-primary::before,
.hero-revamp .header-item-right .btn-primary::after{display:none !important}
.hero-revamp .header-item-right .btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 24px rgba(42,76,116,.34);
}

/* ---- hero ---------------------------------------------------------------*/
.tsg-hero{
  position:relative;
  z-index:1;
  flex:1;                 /* fill whatever the nav leaves of the 100vh header */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(1.5rem,3vw,3rem) 1.25rem 0;
  font-family:var(--tsg-font);
}
.tsg-hero__headline{
  margin:0 auto;
  max-width:19ch;
  text-wrap:balance;
  font-family:var(--tsg-font);
  font-size:clamp(2.1rem,4.4vw,5.25rem);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.042em;
  color:var(--tsg-ink);
}
.tsg-hero__headline .w1{color:var(--tsg-steel)}
.tsg-hero__headline .w2{color:var(--tsg-steel-mid)}
.tsg-hero__headline .w3{color:var(--tsg-ink)}
.tsg-hero__headline .w4{color:var(--tsg-steel-mid)}
.tsg-hero__headline .w5{color:var(--tsg-ghost)}

.tsg-hero__sub{
  margin:clamp(1rem,1.7vw,1.5rem) 0 0;
  color:#222;
  font-weight:500;
  letter-spacing:-.02em;
  font-size:clamp(.95rem,1.1vw,1.125rem);
}

.tsg-hero__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem,1.7vw,2rem);
  flex-wrap:wrap;
  margin-top:clamp(1.4rem,2.4vw,2.2rem);
}
.tsg-connect{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:.42rem .42rem .42rem 1.5rem;
  border-radius:999px;
  background:#fff;
  border:1.5px solid #cdd7e3;
  color:var(--tsg-ink);
  font-weight:600;
  letter-spacing:-.02em;
  text-decoration:none;
  font-size:clamp(.9rem,1vw,1.06rem);
  box-shadow:0 2px 10px rgba(30,45,64,.07);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.tsg-connect i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.1em;
  height:2.1em;
  border-radius:50%;
  background:var(--tsg-ink);
  color:#fff;
  font-style:normal;
  flex:none;
  transition:transform .25s cubic-bezier(.3,.8,.4,1);
}
.tsg-connect i svg{width:.95em;height:.95em}
.tsg-connect:hover{
  border-color:var(--tsg-btn-a);
  box-shadow:0 6px 20px rgba(30,45,64,.14);
  transform:translateY(-1px);
  color:var(--tsg-ink);
}
.tsg-connect:hover i{transform:rotate(45deg)}

.tsg-portfolio{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-decoration:none;
  color:var(--tsg-ink);
  font-weight:600;
  letter-spacing:-.02em;
  font-size:clamp(.9rem,1vw,1.06rem);
  border-bottom:1.5px solid transparent;
  padding-bottom:1px;
}
.tsg-portfolio:hover{border-bottom-color:var(--tsg-ink);color:var(--tsg-ink)}
.tsg-portfolio svg{width:.8em;height:.8em}

.tsg-hero__badges{
  display:block;
  width:clamp(300px,27vw,501px);
  height:auto;
  margin:clamp(1.6rem,2.6vw,2.4rem) auto 0;
}

/* Pinned to the foot of the hero rather than placed in flow, so it can't
   pull the headline block off centre. The bob animates the SVG, not the
   anchor, so this transform is safe. */
.tsg-hero__cue{
  position:absolute;
  left:50%;
  bottom:clamp(1.5rem,3vw,2.8rem);
  transform:translateX(-50%);
  display:block;
  width:26px;
  height:26px;
  margin:0;
  color:var(--tsg-btn-a);
}
.tsg-hero__cue svg{width:26px;height:26px;animation:tsgBob 2.6s ease-in-out infinite}
@keyframes tsgBob{
  0%,100%{transform:translateY(0);opacity:.75}
  50%{transform:translateY(7px);opacity:1}
}

@media (prefers-reduced-motion: reduce){
  .tsg-blob,
  .tsg-hero__cue svg{animation:none !important}
}

/* ---- small screens ------------------------------------------------------*/
@media (max-width:991px){
  .tsg-hero{padding-top:1.5rem;padding-bottom:4rem}
  .tsg-blob{--s:clamp(460px,120vw,900px)}
  /* larger type so the headline runs to three lines and carries the screen */
  .tsg-hero__headline{max-width:13ch;font-size:clamp(2.3rem,10.5vw,3.5rem);line-height:1.12}
  .tsg-hero__badges{width:min(86vw,360px)}

  /* One tidy row: logo left, call + menu right. The stock layout wrapped the
     logo onto its own line and pushed the trigger out of sight. */
  /* pull the bar out to the screen edges instead of the stock 40px inset */
  .hero-revamp .container-fluid{
    padding-left:16px !important;
    padding-right:16px !important;
    max-width:100% !important;
  }
  .hero-revamp .wrapper{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
  .hero-revamp .header-item-left{flex:0 0 auto;margin:0}
  .hero-revamp .header-item-left img{width:124px}
  .hero-revamp .header-item-center{order:3;flex:0 0 auto}
  .hero-revamp .header-item-right{
    flex:0 0 auto;
    display:flex !important;
    align-items:center;
    gap:.9rem;
    margin:0 0 0 auto;
    width:auto;
  }
  /* phone collapses to a tap-to-call glyph so the number can't crowd the row */
  .hero-revamp .tsg-phone{
    font-size:0 !important;
    width:38px;
    height:38px;
    justify-content:center;
    border-radius:50%;
    background:rgba(63,100,145,.10) !important;
    margin:0 !important;
  }
  /* same brightness(0) invert(1) recolour trick hid this glyph on white */
  .hero-revamp .tsg-phone,
  .hero-revamp .tsg-phone i{
    filter:none !important;
    -webkit-filter:none !important;
    mix-blend-mode:normal !important;
  }
  /* font-size:0 above hides the number; the glyph must opt back in */
  .hero-revamp .tsg-phone i,
  .hero-revamp .tsg-phone i::before{
    font-size:16px !important;
    line-height:1 !important;
    margin:0 !important;
    color:#1e2d40 !important;
  }
  /* The stock trigger draws its bars with four <span>s whose colour is set for
     the old dark banner, and they kept painting white on the new white ground.
     Draw the glyph on the button itself instead, so nothing else can win. */
  .hero-revamp .menu-mobile-trigger{
    display:block !important;
    position:relative;
    z-index:6;
    flex:0 0 auto;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    border-radius:12px;
    background-color:#1e2d40 !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:24px 24px !important;
    box-shadow:0 4px 12px rgba(30,45,64,.22);
  }
  .hero-revamp .menu-mobile-trigger span{display:none !important}
  /* menu.css paints a white ::before/::after over the button, which is why the
     dark background computed correctly but still rendered white. Kill both. */
  header.hero-revamp .header-item-right button.menu-mobile-trigger::before,
  header.hero-revamp .header-item-right button.menu-mobile-trigger::after,
  .hero-revamp .menu-mobile-trigger::before,
  .hero-revamp .menu-mobile-trigger::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }
  header.hero-revamp .header-item-right button.menu-mobile-trigger{
    background-color:#1e2d40 !important;
    border-radius:12px !important;
    width:44px !important;
    height:44px !important;
    opacity:1 !important;
    /* the button computed dark but painted white: a blend/filter was being
       applied to it. Force plain compositing. */
    mix-blend-mode:normal !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    isolation:isolate;
    -webkit-appearance:none !important;
    appearance:none !important;
    text-indent:0 !important;
    color:#fff !important;
  }
}

/* ---- the section that follows the hero ----------------------------------
   The About block's floating artwork (.mx1j / .mx2j) is positioned at
   top:-118px. The removed Awards strip used to absorb that overhang; without
   it the robot rides up over the nav, so give the section room of its own. */
.tsg-about-start{padding-top:170px;position:relative}
.tsg-about-start > .container{position:relative;z-index:1}
@media (max-width:991px){
  .tsg-about-start{padding-top:90px}
  /* the artwork is desktop decoration — it only collides on small screens */
  .tsg-about-start .mx1j,
  .tsg-about-start .mx2j{position:static;width:auto;animation:none}
}

/* Very short viewports: let the hero grow past the screen rather than
   cramming the badges and the cue into each other. */
@media (max-height:620px){
  .hero-revamp{min-height:auto}
  .tsg-hero__cue{position:static;transform:none;margin:2rem auto 1.5rem}
}