*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5;color:#111;background:#fff}
.container{width:min(1100px,92%);margin:0 auto}
header{position:sticky;top:0;background:rgba(255,255,255,0.96);backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid #eee;z-index:50}
.header-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.logo{height:48px;width:auto}
.header-contact{margin-left:auto;font-size:14px}
.header-contact a{color:inherit;text-decoration:none;margin:0 4px}
.header-cta .button{background:#111;color:#fff;padding:8px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.header-cta .button:hover{background:#c7a74d;color:#111}
.hero{min-height:56vh;display:grid;place-items:center;text-align:center;color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.55));z-index:1}
.hero-bg{position:absolute;inset:0;background:url('../images/hero_background.png') center/cover no-repeat;z-index:0}
.hero-content{position:relative;z-index:2;padding:40px 0}
.hero h1{font-size:clamp(28px,4.5vw,56px);font-weight:800;letter-spacing:.4px}
.subhead{display:block;font-size:.9em;font-weight:600;margin-top:4px}
.carousel-shell{margin:28px auto 12px;overflow-x:auto;white-space:nowrap}
.carousel{display:inline-flex;gap:16px;padding:12px 2px}
.carousel img{height:84px;width:auto;user-select:none;display:inline-block}
.section{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:40px 0;border-top:1px solid #eee}
.section:nth-child(even){grid-template-columns:.9fr 1.1fr}
.section img.scatter{width:100%;height:auto;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.testimonials blockquote{border-left:4px solid #ccc;margin:20px 0;padding-left:12px;font-style:italic;color:#333}
.testimonials footer{margin-top:6px;font-weight:700;font-style:normal}
footer{margin-top:40px;border-top:1px solid #eee}
.footer-inner{text-align:center;padding:24px 0 40px}
.footer-logo{height:56px;width:auto;display:block;margin:0 auto 8px}
.small{font-size:12px;color:#666}


/* --- Patch: Mobile header CTA alignment --- */
@media (max-width: 640px) {
  .header-inner { flex-wrap: wrap; }
  .header-contact { order: 2; width: 100%; text-align: center; font-size: 13px; margin-top: 6px; }
  .header-cta { order: 3; width: 100%; text-align: center; margin-top: 8px; }
  .header-cta .button { display: inline-block; }
}


/* === Patch3: Genre Carousel (relaxed auto-scroll + edge fades) === */
.genre-carousel{
  overflow:hidden;
  white-space:nowrap;
  width:100%;
  position:relative;
  padding:1rem 0;
}

.genre-carousel::before,
.genre-carousel::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:48px;
  pointer-events:none;
  z-index:2;
  /* subtle edge fades */
  background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.genre-carousel::before{ left:0; transform:scaleX(1); }
.genre-carousel::after{
  right:0;
  transform:scaleX(-1);
}

.scroll-content{
  display:inline-flex;
  animation:genreScroll 40s linear infinite;
}

.genre-badge{
  flex:0 0 auto;
  margin:0 1.2rem;
  background:#111;
  color:#fff;
  padding:0.8rem 1.6rem;
  border-radius:2rem;
  font-weight:600;
  font-size:1rem;
  letter-spacing:0.5px;
  white-space:nowrap;
  text-align:center;
  transition:transform .3s ease, background .3s ease;
}

.genre-badge:hover{
  transform:scale(1.06);
  background:#d32f2f;
}

@keyframes genreScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

@media (max-width:768px){
  .genre-badge{
    margin:0 .6rem;
    padding:.6rem 1.2rem;
    font-size:.95rem;
  }
}
/* === End Patch3 === */