/* LifeaaS Hero Layout Fix 1.0.0 */
/* Match the existing .wrap geometry on all three landing pages. */
.home-hero,.articles-hero,.about-hero{--lifeaas-hero-gutters:72px;--lifeaas-hero-width:min(1368px,calc(100% - var(--lifeaas-hero-gutters)))}
[data-public-visual-fix] :is(.home-hero,.articles-hero,.about-hero)>.hero-art{
  left:50%;right:auto;width:var(--lifeaas-hero-width);max-width:var(--lifeaas-hero-width);
  transform:translateX(-50%);object-position:right 20%;
  mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
}
/* Reserve real space for each icon; nested spans must not add legacy ticks. */
[data-public-visual-fix] .articles-hero .hero-values span::before{content:none;display:none}
[data-public-visual-fix] .articles-hero .hero-values>span{display:inline-flex;align-items:center;gap:8px;max-width:100%}
[data-public-visual-fix] .articles-hero .hero-values .vf-inline-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px}
[data-public-visual-fix] .articles-hero .hero-values .vf-inline-icon svg{display:block;flex:none;width:24px;height:24px}
@media(max-width:1250px){.home-hero,.articles-hero,.about-hero{--lifeaas-hero-gutters:56px}}
@media(min-width:721px){
  [data-public-visual-fix] .about-hero>.hero-neon{right:max(3.6%,calc((100% - 1368px)/2 + 36px))}
  [data-public-visual-fix] .articles-hero>.hero-neon{right:max(38%,calc((100% - 1368px)/2 + 520px))}
}
@media(max-width:720px){
  .home-hero,.articles-hero,.about-hero{--lifeaas-hero-gutters:28px}
  [data-public-visual-fix] :is(.home-hero,.articles-hero,.about-hero)>.hero-art{object-position:68% center}
  [data-public-visual-fix] .articles-hero .hero-values{gap:12px 18px}
}

/* 1.0.1: slightly larger handwritten message on the Articles hero. */
[data-public-visual-fix] .articles-hero>.hero-neon{font-size:27px}
@media(min-width:721px) and (max-width:1100px){
  [data-public-visual-fix] .articles-hero>.hero-neon{font-size:21px}
}
@media(max-width:720px){
  [data-public-visual-fix] .articles-hero>.hero-neon{font-size:23px!important}
}

/* 1.0.2: individual articles share the same content-width hero artwork. */
.article-hero{--lifeaas-hero-gutters:72px;--lifeaas-hero-width:min(1368px,calc(100% - var(--lifeaas-hero-gutters)))}
[data-public-visual-fix] .article-hero>.hero-art{
  left:50%;right:auto;width:var(--lifeaas-hero-width);max-width:var(--lifeaas-hero-width);
  transform:translateX(-50%);object-position:right 20%;
  mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
}
@media(max-width:1250px){.article-hero{--lifeaas-hero-gutters:56px}}
@media(min-width:1101px){
  [data-public-visual-fix] .article-hero>.hero-neon{right:max(36%,calc((100% - 1368px)/2 + 490px))}
}
@media(max-width:720px){
  .article-hero{--lifeaas-hero-gutters:28px}
  [data-public-visual-fix] .article-hero>.hero-art{object-position:68% center}
}
