/* ───────────────── Hero ───────────────── */
.hero{
  /* image de fond + overlay */
  background:
    linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)),
    url('images/banner/banner.webp') no-repeat center bottom / cover fixed;
  padding:6rem 0 4rem;
  text-align:center;
  min-height:400px;
  display:flex; align-items:center; position:relative;
}

/* War Sails hero banner variant */
.hero.hero--war-sails{
  background:
    linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
    url('images/banner/banner_war_sails.webp') no-repeat center center / cover fixed;
}

.hero .container{padding:2rem 1rem}
.hero-logo{
  width:clamp(180px, 40vw, 500px);
  height:auto; margin:0 auto 2rem;
  filter:drop-shadow(0 0 10px var(--brand));
}
.hero h2{font-size:var(--step-3); margin:.25rem 0 1rem}
.hero p{font-size:var(--step-0); opacity:.9}