html, body{
  margin:0;
  padding:0;
  height:100%;
  background:#000;
  overflow:hidden;
  font-family:Arial, sans-serif;
}

.hero{
  position:relative;
  width:100%;
  height:100vh;      /* fallback */
  height:100svh;     /* iOS safe viewport */
  overflow:hidden;
  background:#000;
}

/* DESKTOP DEFAULT: textured sides + full poster */
.hero::before{
  content:"";
  position:absolute;
  inset:-8%;
  background:url('../img/hero.png') center center / cover no-repeat;
  filter: blur(22px) saturate(1.05) contrast(1.08) brightness(0.78);
  transform: scale(1.18);
  opacity: 0.95;
  z-index:1;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url('../img/grain.svg');
  background-repeat: repeat;
  background-size: 420px 420px;
  opacity: 0.28;
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:3;
}

.hero-img{
  position:relative;
  z-index:2;
  height:100vh;
  width:auto;
  display:block;
  margin:0 auto;
}

.cta{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:4;

  padding: 12px 26px;
  background: rgba(179,0,0,0.92);
  color:#fff;
  text-decoration:none;
  font-size:18px;
  font-weight:800;
  letter-spacing:0.6px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 26px rgba(0,0,0,0.6);
}

.cta:hover{
  background: rgba(210,0,0,0.92);
}

/* ✅ MOBILE: immersive full-bleed poster (no framed look) */
@media (max-width: 768px){
  .hero-img{
    width:100%;
    height:100vh;     /* fallback */
    height:100svh;    /* key fix for iPhone Chrome cutoff */
    object-fit: cover;
    object-position: center top;
    margin:0;
  }
}

  /* Keep texture but reduce intensity so it doesn't muddy */
  .hero::before{
    filter: blur(18px) saturate(1.05) contrast(1.05) brightness(0.70);
    opacity: 0.65;
  }

  .hero::after{
    opacity: 0.22;
    background-size: 360px 360px;
  }

  /* Smaller CTA on mobile */
  .cta{
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
  }
}