:root{
  --hero-min: 75vh;
  --hero-text-shadow: 0 2px 8px rgba(0,0,0,.12); 
  --hero-brightness: 1.22;  
  --hero-contrast: 0.96;
  --hero-saturate: 1.03;
}

.hero{
  position:relative;
  min-height:var(--hero-min);
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}

.hero__bg{
  position:absolute;
  inset:0;
  /*background-image:url('../../images/hero.webp');*/
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;            
  transform:scale(1);
  will-change:transform;
  animation:heroZoom 18s ease-in-out both;
  filter:
    brightness(var(--hero-brightness))
    contrast(var(--hero-contrast))
    saturate(var(--hero-saturate));
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,.16));
  pointer-events:none;
}

.hero__content{
  position:relative;
  z-index:1;
  color:#fff;
  text-shadow:var(--hero-text-shadow);
  padding: clamp(10px, 2vw, 20px);
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin-inline:auto;
  max-width:min(1100px, 92vw);

  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  outline:none;
  box-shadow:none;
  border-radius:0;
}

.hero__title{
  margin:0;
  font-weight:400;         
  letter-spacing:.2px;
  line-height:1.1;
}
.hero__title--main{
  font-size:clamp(28px, 4.4vw, 64px);
  margin-bottom:.2rem;
  font-weight:400;          
}
.hero__title--sub{
  font-size:clamp(18px, 3.2vw, 40px);
  margin-bottom:.6rem;
  font-weight:300;          
  opacity:.98;
}
.hero__tagline{
  margin:0;
  font-size:clamp(13px, 1.25vw, 18px);
  font-weight:300;
  color:rgba(255,255,255,.96);
}

@media (max-width:1200px){
  :root{ --hero-min:64vh; }
}
@media (max-width:992px){
  :root{ --hero-min:58vh; }
}
@media (max-width:576px){
  :root{ --hero-min:52vh; }
  .hero__bg{ background-position:center 42%; }
}

@keyframes heroZoom{
  0%{ transform:scale(1.06); }
  50%{ transform:scale(1.10); }
  100%{ transform:scale(1.04); }
}
@media (prefers-reduced-motion:reduce){
  .hero__bg{ animation:none; transform:scale(1.03); }
  *{ transition:none !important; }
}

@media (min-resolution: 2dppx){
  .hero__bg{ image-rendering:auto; }
}