/* V47: consistent soft fade measured from the actual image edge.
   The sharp header is an <img> aligned right and never cropped vertically.
   A very soft full-width backdrop sits behind it so no hard vertical seam can occur. */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:4}

.culture-hero-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .22s ease;
  background:#11100e;
}
.culture-hero-backdrop{
  position:absolute;inset:-12px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  filter:blur(7px) saturate(.90) brightness(.72);
  transform:scale(1.035);
  opacity:.58;
}
.culture-hero-art{
  position:absolute;
  top:0;right:0;
  height:100%;
  width:auto;
  max-width:none;
  object-fit:contain;
  object-position:right center;
  display:block;
  opacity:.96;
  -webkit-mask-image:linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.16) 4%,
    rgba(0,0,0,.42) 10%,
    rgba(0,0,0,.72) 18%,
    #000 30%,
    #000 100%);
  mask-image:linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.16) 4%,
    rgba(0,0,0,.42) 10%,
    rgba(0,0,0,.72) 18%,
    #000 30%,
    #000 100%);
}

.hero.has-culture-header{
  min-height:252px;
  display:flex;
  align-items:flex-end;
  padding-top:0!important;
  padding-bottom:0!important;
  border-bottom:1px solid rgba(184,135,74,.45);
}
.hero.has-culture-header .culture-hero-bg{opacity:1}

.hero.has-culture-header:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(12,10,8,.88) 0%,
      rgba(12,10,8,.76) 16%,
      rgba(12,10,8,.52) 30%,
      rgba(12,10,8,.26) 48%,
      rgba(12,10,8,.12) 68%,
      rgba(12,10,8,.08) 100%),
    linear-gradient(0deg,
      rgba(10,8,6,.62) 0%,
      rgba(10,8,6,.12) 58%,
      rgba(10,8,6,.05) 100%);
}

.hero.has-culture-header .wrap{
  width:min(1380px,calc(100% - 72px))!important;
  padding:31px 0 25px;
}
.hero.has-culture-header .eyebrow{color:#e2bf82;text-shadow:0 1px 5px rgba(0,0,0,.72)}
.hero.has-culture-header h1{font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.76);margin-top:5px}
.hero.has-culture-header p{color:#eee5d8;text-shadow:0 1px 7px rgba(0,0,0,.78)}
.hero.has-culture-header .navbtn{background:rgba(18,15,12,.72);backdrop-filter:blur(2px)}

@media(max-width:1180px){
  .hero.has-culture-header .wrap{width:calc(100% - 56px)!important}
  .culture-hero-art{
    height:100%;
    opacity:.88;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 18%,#000 42%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 18%,#000 42%);
  }
}
@media(max-width:700px){
  .hero.has-culture-header{min-height:220px}
  .hero.has-culture-header .wrap{width:calc(100% - 24px)!important;padding:25px 0 21px}
  .culture-hero-art{
    right:-18%;
    height:100%;
    opacity:.56;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 20%,#000 50%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 20%,#000 50%);
  }
  .culture-hero-backdrop{opacity:.34}
}
@media(prefers-reduced-motion:reduce){.culture-hero-bg{transition:none}}