/* Homepage background hero and exact footer wordmark treatment. Added 28 July 2026. */

.hero{
  isolation:isolate;
  background-color:#07111f;
  background-image:url("../images/home-hero-team-office-desktop.webp");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 48%;
}
.hero::before{
  z-index:0;
  background:
    linear-gradient(90deg,rgba(4,11,21,.94) 0%,rgba(4,11,21,.84) 37%,rgba(4,11,21,.44) 66%,rgba(4,11,21,.12) 100%),
    linear-gradient(180deg,rgba(4,11,21,.15) 0%,rgba(4,11,21,.05) 54%,rgba(4,11,21,.72) 100%);
  background-size:auto;
  mask-image:none;
  -webkit-mask-image:none;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:auto 0 0;
  height:30%;
  background:linear-gradient(to top,rgba(3,9,18,.72),transparent);
  pointer-events:none;
}
.hero-glow{display:none!important}
.hero-grid{z-index:1}
.hero-visual{display:none!important}
.hero-copy{position:relative;z-index:2}
.hero h1{color:#fff;text-shadow:0 4px 28px rgba(0,0,0,.26)}
.hero-brand-line{
  background:linear-gradient(110deg,#f0bd3d 6%,#ffd875 45%,#e0a521 82%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.hero-description{
  border-color:#e5ae2b!important;
  background:rgba(5,14,27,.54)!important;
  border-radius:0 16px 16px 0;
  padding:13px 16px 13px 18px!important;
  box-shadow:0 18px 42px rgba(0,0,0,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hero-description .hero-text,
.hero-description .hero-support{color:#eef4fb!important}
.hero-description .hero-support{color:#d2dce8!important}
.hero-actions .btn-secondary{
  color:#07111f;
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(255,255,255,.7)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.hero-proof span{
  color:#fff!important;
  background:rgba(5,14,27,.58)!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hero-proof b{background:#f3bd34!important}

/* Keep the footer logo identical to the main black-and-gold wordmark. */
.site-footer .footer-brand img{
  width:215px;
  height:auto;
  filter:none!important;
  opacity:1!important;
  padding:10px 14px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}

@media (min-width:1051px){
  .hero{
    min-height:100svh;
    padding:78px 0 0!important;
  }
  .hero-wide-container{
    width:min(1480px,calc(100% - 72px))!important;
    min-height:calc(100svh - 78px)!important;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,780px)!important;
    align-items:center!important;
    justify-content:start;
    gap:0!important;
    min-height:calc(100svh - 78px);
  }
  .hero-copy{
    display:block!important;
    width:100%;
    max-width:780px!important;
    padding:62px 0 58px!important;
  }
  .hero h1{
    max-width:780px!important;
    font-size:clamp(3.45rem,4.8vw,5.25rem)!important;
    line-height:.98!important;
  }
  .hero-description{max-width:690px!important;margin-top:21px!important}
  .hero-actions{margin-top:24px!important;margin-bottom:0!important}
  .hero-proof{margin-top:15px!important;padding-bottom:0!important;flex-wrap:wrap!important}
}

@media (min-width:1051px) and (max-width:1320px){
  .hero-wide-container{width:min(1240px,calc(100% - 48px))!important}
  .hero-copy{max-width:690px!important;padding-top:48px!important}
  .hero h1{max-width:690px!important;font-size:clamp(3.15rem,4.45vw,4.2rem)!important}
  .hero-description{max-width:620px!important}
}

@media (min-width:1051px) and (max-height:760px){
  .hero-copy{padding-top:34px!important;padding-bottom:28px!important}
  .hero h1{font-size:clamp(2.85rem,4.1vw,3.75rem)!important}
  .hero-description{margin-top:14px!important;padding-top:10px!important;padding-bottom:10px!important}
  .hero-actions{margin-top:16px!important}
  .hero-proof{margin-top:10px!important}
}

@media (max-width:1050px){
  .hero{
    min-height:auto!important;
    padding:72px 0 0!important;
    background-image:url("../images/home-hero-logo-wall-mobile.webp");
    background-position:center 43%;
  }
  .hero::before{
    background:
      linear-gradient(180deg,rgba(4,11,21,.70) 0%,rgba(4,11,21,.80) 38%,rgba(4,11,21,.91) 100%),
      linear-gradient(90deg,rgba(4,11,21,.25),rgba(4,11,21,.15));
  }
  .hero::after{height:38%;background:linear-gradient(to top,rgba(3,9,18,.78),transparent)}
  .hero-wide-container{width:var(--container)!important;min-height:0!important}
  .hero-grid{display:block!important;min-height:0!important}
  .hero-copy{
    max-width:760px!important;
    margin-inline:auto;
    padding:58px 0 54px!important;
    text-align:center;
  }
  .hero h1{
    max-width:720px!important;
    margin-inline:auto!important;
    color:#fff;
  }
  .hero-description{
    max-width:650px!important;
    margin:20px auto 0!important;
    padding:14px 16px!important;
    border:1px solid rgba(255,255,255,.20)!important;
    border-left:1px solid rgba(255,255,255,.20)!important;
    border-radius:16px!important;
    background:rgba(5,14,27,.56)!important;
  }
  .hero-actions{justify-content:center}
  .hero-proof{max-width:650px;margin-left:auto!important;margin-right:auto!important}
}

@media (max-width:760px){
  .hero{padding-top:68px!important;background-position:center 40%}
  .hero-copy{padding:47px 0 44px!important}
  .hero h1{
    font-size:clamp(2.35rem,12vw,3.45rem)!important;
    line-height:1!important;
    letter-spacing:-.052em!important;
  }
  .hero-brand-line{display:block;margin-bottom:5px}
  .hero-description{margin-top:18px!important;padding:13px 12px!important}
  .hero-description .hero-text,
  .hero-description .hero-support{font-size:.86rem!important;line-height:1.52!important}
  .hero-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin-top:18px!important;
  }
  .hero-actions .btn{
    width:100%!important;
    min-height:49px!important;
    padding:12px 10px!important;
    font-size:.8rem;
    border-radius:13px;
  }
  .hero-proof{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-top:14px!important}
  .hero-proof span{min-height:47px;padding:9px 7px!important;font-size:.61rem!important}
  .site-footer .footer-brand img{width:190px;padding:9px 12px}
}

@media (max-width:360px){
  .hero-actions{grid-template-columns:1fr!important}
  .hero-copy{padding-top:40px!important}
}