/* HERO background slider, content stays fully opaque */
.hero{position:relative; overflow:hidden;}
.hero-slider{position:absolute; inset:0; z-index:0;}
.hero-slide{position:absolute; inset:0; background-position:center; background-size:cover; opacity:0; transition:opacity 800ms ease;}
.hero-slide.show{opacity:1;}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); z-index:1; pointer-events:none;}
/* Arrows */
.hero-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); color:#fff; width:44px; height:44px; line-height:42px; text-align:center; border-radius:999px; cursor:pointer; backdrop-filter:blur(4px);}
.hero-nav:hover{background:rgba(0,0,0,.55);}
.hero-prev{left:16px;}
.hero-next{right:16px;}
/* Ensure existing hero content sits above slides but below arrows */
.hero > *:not(.hero-slider):not(.hero-nav){position:relative; z-index:2;}
/* Header translucency & blur; hero image extends behind header */
header, .site-header, .header{background:rgba(0,0,0,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}