/*
 * EaseThat canonical public hero system — V6.14.23
 * Loaded after style.css. Public non-home heroes only.
 * The homepage and staff/admin portal heroes are intentionally excluded.
 */
:root{
  --et-public-hero-copy:804px;
}

body .public-hero.public-hero{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:34px 0!important;
  border:0!important;
  background:#03162f!important;
  color:#fff!important;
}
body .public-hero.public-hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:url("hero-wave-clean.webp") 72% center/cover no-repeat!important;
  opacity:.90!important;
  transform:scale(1.02)!important;
  pointer-events:none!important;
}
body .public-hero.public-hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:radial-gradient(circle at 70% 50%,rgba(0,196,200,.08),transparent 33%),linear-gradient(90deg,#03162f 0%,rgba(3,22,47,.99) 35%,rgba(3,22,47,.76) 60%,rgba(3,22,47,.24) 100%)!important;
  pointer-events:none!important;
}

/* Match the exact site-wide .wrap geometry used by the header, homepage
   hero and normal page sections. This is the alignment reference for every
   public non-home hero. */
body .public-hero.public-hero > .wrap{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  float:none!important;
  box-sizing:border-box!important;
  width:min(1200px,calc(100% - 40px))!important;
  max-width:1200px!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Eyebrow, heading, supporting copy and CTA all share exactly the same
   content boundary. */
body .public-hero.public-hero > .wrap > .eyebrow,
body .public-hero.public-hero > .wrap > h1,
body .public-hero.public-hero > .wrap > p:not(.eyebrow),
body .public-hero.public-hero > .wrap > .hub-breadcrumb,
body .public-hero.public-hero > .wrap > .brand-hero-breadcrumb,
body .public-hero.public-hero > .wrap > .hub-hero-actions,
body .public-hero.public-hero > .wrap > .shop-hero-actions,
body .public-hero.public-hero > .wrap > .case-detail-hero{
  box-sizing:border-box!important;
  width:min(67%,var(--et-public-hero-copy))!important;
  max-width:var(--et-public-hero-copy)!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  float:none!important;
}
body .public-hero.public-hero .case-detail-hero > *{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

body .public-hero.public-hero .eyebrow{
  margin:0 0 12px!important;
  padding:0!important;
  color:#72e4db!important;
  font-size:11px!important;
  line-height:1.35!important;
  letter-spacing:.11em!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}
body .public-hero.public-hero h1,
body .public-hero.public-hero .case-detail-hero h1{
  margin:0 0 16px!important;
  padding:0!important;
  color:#fff!important;
  font-size:clamp(46px,4.45vw,56px)!important;
  line-height:1.055!important;
  letter-spacing:-.035em!important;
  font-weight:700!important;
  text-align:left!important;
  text-wrap:balance;
}
body .public-hero.public-hero > .wrap > p:not(.eyebrow),
body .public-hero.public-hero .case-detail-hero > p{
  margin:0!important;
  padding:0!important;
  color:#eef4fa!important;
  font-size:18px!important;
  line-height:1.52!important;
  letter-spacing:0!important;
  font-weight:400!important;
  text-align:left!important;
  text-wrap:balance;
}
body .public-hero.public-hero .hub-hero-actions,
body .public-hero.public-hero .shop-hero-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:12px!important;
  margin-top:22px!important;
  margin-bottom:0!important;
}
body .public-hero.public-hero .hub-breadcrumb,
body .public-hero.public-hero .brand-hero-breadcrumb{
  margin-top:0!important;
  margin-bottom:12px!important;
}
body .public-hero.public-hero .case-detail-meta{margin:0 0 12px!important;}
body .public-hero.public-hero .case-detail-hero > strong{display:block!important;margin-top:14px!important;}

@media (min-width:768px) and (max-width:999px){
  body .public-hero.public-hero{padding:30px 0!important;}
  body .public-hero.public-hero h1,
  body .public-hero.public-hero .case-detail-hero h1{
    font-size:clamp(42px,5.4vw,50px)!important;
    line-height:1.07!important;
  }
  body .public-hero.public-hero > .wrap > p:not(.eyebrow),
  body .public-hero.public-hero .case-detail-hero > p{font-size:17px!important;}
}
@media (max-width:767px){
  body .public-hero.public-hero > .wrap{
    width:min(100% - 28px,1200px)!important;
    max-width:1200px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body .public-hero.public-hero{padding:20px 0!important;}
  body .public-hero.public-hero::before{background-position:64% center!important;}
  body .public-hero.public-hero > .wrap > .eyebrow,
  body .public-hero.public-hero > .wrap > h1,
  body .public-hero.public-hero > .wrap > p:not(.eyebrow),
  body .public-hero.public-hero > .wrap > .hub-breadcrumb,
  body .public-hero.public-hero > .wrap > .brand-hero-breadcrumb,
  body .public-hero.public-hero > .wrap > .hub-hero-actions,
  body .public-hero.public-hero > .wrap > .shop-hero-actions,
  body .public-hero.public-hero > .wrap > .case-detail-hero{
    width:100%!important;
    max-width:none!important;
  }
  body .public-hero.public-hero h1,
  body .public-hero.public-hero .case-detail-hero h1{
    margin-bottom:14px!important;
    font-size:clamp(34px,10vw,42px)!important;
    line-height:1.08!important;
    letter-spacing:-.028em!important;
  }
  body .public-hero.public-hero > .wrap > p:not(.eyebrow),
  body .public-hero.public-hero .case-detail-hero > p{
    font-size:16px!important;
    line-height:1.55!important;
  }
  body .public-hero.public-hero .hub-hero-actions,
  body .public-hero.public-hero .shop-hero-actions{margin-top:18px!important;}
}