/* ============================================================
   THRILL LIFE PRODUCTIONS
   Colors pulled from brand logo:
   #090909 black · #C84540 red · #3D5870 slate
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#090909;color:#fff;
  font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}

:root{
  --bg:#090909;--surface:#111;--surface2:#181818;
  --border:#222;--red:#C84540;--red2:#A53730;
  --slate:#3D5870;--white:#fff;--gray:#808080;--lgray:#b8b8b8
}

/* ── UTILS ── */
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.divider{height:1px;background:var(--border)}

/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:68px;
  background:rgba(9,9,9,.96);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);transition:background .3s
}
.nav-container{
  max-width:1200px;margin:0 auto;padding:0 28px;height:100%;
  display:flex;align-items:center;justify-content:space-between
}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-brand img{width:40px;height:40px;object-fit:contain}
.nav-brand-name{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:16px;color:#fff;letter-spacing:.01em
}
.nav-links{display:flex;gap:36px}
.nav-links a{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);transition:color .2s
}
.nav-links a:hover,.nav-links a.active{color:#fff}

.hamburger{
  display:none;flex-direction:column;justify-content:center;
  gap:5px;background:none;border:none;cursor:pointer;padding:8px;width:38px
}
.hamburger span{
  display:block;height:2px;background:#fff;
  transition:all .25s;transform-origin:left center
}
.hamburger span:first-child{width:22px}
.hamburger span:nth-child(2){width:16px}
.hamburger span:last-child{width:22px}
.hamburger.open span:first-child{transform:rotate(45deg) translate(1px,-1px);width:22px}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:last-child{transform:rotate(-45deg) translate(1px,1px);width:22px}

.nav-mobile{
  display:none;position:fixed;top:68px;left:0;right:0;
  background:var(--surface);border-bottom:1px solid var(--border);z-index:999
}
.nav-mobile.open{display:block}
.nav-mobile a{
  display:block;padding:16px 28px;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);border-bottom:1px solid var(--border);
  transition:color .2s,background .2s
}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile a:hover{color:#fff;background:var(--surface2)}

/* ── HERO ── */
.hero{
  min-height:100vh;position:relative;display:flex;
  align-items:center;overflow:hidden;background:var(--bg)
}
.hero-bg-img{
  position:absolute;inset:0;
  background:url('/images/skyline.jpg') center/cover no-repeat;
  opacity:.13;transform:scale(1.06);will-change:transform
}
.hero-grad{
  position:absolute;inset:0;
  background:linear-gradient(
    115deg,
    rgba(9,9,9,.96) 0%,
    rgba(9,9,9,.72) 55%,
    rgba(61,88,112,.14) 100%
  )
}
.hero-record{
  position:absolute;right:-60px;top:50%;
  transform:translateY(-50%);
  width:clamp(280px,46vw,620px);height:clamp(280px,46vw,620px);
  opacity:.06;animation:spin 55s linear infinite
}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
@keyframes spin-center{to{transform:rotate(360deg)}}

.hero-content{
  position:relative;z-index:1;width:100%;
  max-width:1200px;margin:0 auto;padding:152px 28px 108px
}
.eyebrow{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin-bottom:22px
}
.hero-title{
  font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(54px,10vw,110px);
  line-height:.92;letter-spacing:-.03em;
  color:#fff;margin-bottom:28px;max-width:660px
}
.hero-title .accent{color:var(--red)}
.hero-sub{
  font-size:17px;color:var(--gray);
  max-width:460px;line-height:1.75;margin-bottom:48px
}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:all .2s;cursor:pointer;border:none;line-height:1
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red2)}
.btn-outline{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.22)
}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.05)}

/* ── SECTION ── */
section{padding:96px 0}
.sec-label{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px
}
.sec-title{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(30px,4.5vw,48px);
  letter-spacing:-.025em;line-height:1.05;color:#fff
}
.sec-sub{
  font-size:16px;color:var(--gray);
  max-width:520px;line-height:1.75;margin-top:14px
}
.section-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:56px
}

/* ── PAGE HERO (inner pages) ── */
.page-hero{
  padding:148px 0 72px;
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden
}
.page-label{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px
}
.page-hero h1{
  font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(44px,8vw,88px);
  letter-spacing:-.03em;line-height:1
}

/* ── ARTIST CARDS ── */
.artist-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px
}
.artist-card{
  background:var(--surface);border:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s
}
.artist-card:hover{border-color:var(--red);transform:translateY(-5px)}
.artist-img-wrap{
  background:var(--surface2);overflow:hidden;
  height:260px;flex-shrink:0;display:flex;align-items:center;justify-content:center
}
.artist-img-wrap img{
  width:100%;height:100%;object-fit:contain;
  filter:grayscale(20%);transition:filter .35s;padding:8px
}
.artist-card:hover .artist-img-wrap img{filter:none}
.card-body{
  padding:22px 24px;display:flex;flex-direction:column;flex:1
}
.artist-name{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:19px;margin-bottom:5px;color:#fff;transition:color .2s
}
.artist-name:hover{color:var(--red)}
.artist-lbl{
  font-size:12px;color:var(--red);font-weight:600;
  letter-spacing:.06em;margin-bottom:auto;padding-bottom:18px
}
.ext-links{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--border)
}
.ext-link{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--surface2);border:1px solid var(--border);
  padding:5px 10px;transition:background .2s,border-color .2s
}
.ext-link:hover{background:var(--red);border-color:var(--red)}

/* ── FORM SUCCESS STATE ── */
.form-success{
  display:none;text-align:center;padding:80px 24px;
  opacity:0;transition:opacity .5s
}
.form-success.visible{display:block}
.form-success.show{opacity:1}
.form-success-record{
  width:96px;height:96px;
  animation:spin-center 3s linear infinite;
  margin:0 auto 32px
}
.form-success h3{
  font-family:'Montserrat',sans-serif;font-size:26px;
  font-weight:800;color:#fff;margin-bottom:14px
}
.form-success p{color:var(--lgray);font-size:15px}

/* ── CTA BAND ── */
.cta-band{
  background:var(--surface);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:96px 28px;text-align:center
}
.cta-band .sec-sub{margin:14px auto 44px}

/* ── MERCH ── */
.merch-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;margin-bottom:72px
}
.merch-card{
  background:var(--surface);border:1px solid var(--border);
  overflow:hidden;transition:border-color .25s,transform .25s
}
.merch-card:hover{border-color:var(--red);transform:translateY(-4px)}
.merch-img-wrap{position:relative;overflow:hidden}
.merch-img-wrap img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .4s
}
.merch-card:hover .merch-img-wrap img{transform:scale(1.05)}
.merch-badge{
  position:absolute;top:12px;left:12px;
  background:var(--red);color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px
}
.merch-body{padding:16px 18px}
.merch-name{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:15px;margin-bottom:4px
}
.merch-note{font-size:12px;color:var(--gray)}
.merch-cta-box{
  text-align:center;padding:64px 28px;
  background:var(--surface2);border:1px solid var(--border)
}
.merch-cta-box h2{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(24px,3.5vw,36px);letter-spacing:-.02em;
  margin-bottom:12px
}
.merch-cta-box p{color:var(--gray);margin-bottom:32px;font-size:16px}

/* ── ABOUT ── */
.about-split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:start
}
.about-img{width:100%;border:1px solid var(--border)}
.about-body .sec-label{margin-bottom:12px}
.about-body .sec-title{margin-bottom:28px}
.about-body p{
  color:var(--lgray);font-size:16px;
  line-height:1.85;margin-bottom:20px
}
.about-body p:last-child{margin-bottom:0}

/* ── CONTACT FORM ── */
.contact-wrap{max-width:700px}
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px;margin-bottom:20px
}
.form-field{display:flex;flex-direction:column;gap:8px}
.form-field.full{grid-column:1/-1}
.form-field label{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray)
}
.form-field input,
.form-field textarea{
  background:var(--surface2);border:1px solid var(--border);
  color:#fff;padding:14px 16px;
  font-family:'Inter',sans-serif;font-size:15px;
  outline:none;transition:border-color .2s;
  resize:vertical;-webkit-appearance:none
}
.form-field input:focus,
.form-field textarea:focus{border-color:var(--red)}
.form-field textarea{min-height:148px}
.form-status{
  margin-top:16px;font-size:14px;color:var(--gray);display:none
}
.form-status.show{display:block}
.form-status.ok{color:#5aad75}
.form-status.err{color:var(--red)}

/* ── TEAM PHOTOS ── */
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:72px
}
.team-photo{
  overflow:hidden;height:420px;
}
.team-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center center;
  transition:transform .4s,filter .3s;filter:grayscale(15%)
}
.team-photo:hover img{transform:scale(1.04);filter:none}

/* ── SHARED UTILITIES ── */
.section-head{margin-bottom:56px}

/* ── ABOUT PAGE ── */
.about-motto{color:#fff;font-style:italic;margin-top:8px}
.section-head{margin-bottom:56px}
.direct-contact{margin-top:64px;padding-top:48px;border-top:1px solid var(--border)}
.direct-contact p{color:var(--lgray);font-size:16px;margin-top:12px}
.direct-contact a{color:#fff;border-bottom:1px solid var(--border);padding-bottom:2px;transition:border-color .2s}
.direct-contact a:hover{border-color:var(--red)}

/* ── FOOTER ── */
footer{
  background:var(--surface);border-top:1px solid var(--border);
  padding:40px 0
}
.footer-inner{
  display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap
}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{width:30px}
.footer-brand span{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:14px;color:#fff
}
.footer-copy{font-size:13px;color:var(--gray)}
.socials{display:flex;gap:20px}
.socials a{color:var(--gray);font-size:16px;transition:color .2s}
.socials a:hover{color:#fff}

/* ── SCROLL ANIMATION INITIAL STATES ── */
.reveal{opacity:0;transform:translateY(32px)}
.reveal-left{opacity:0;transform:translateX(-44px)}
.reveal-right{opacity:0;transform:translateX(44px)}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .merch-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .artist-grid{grid-template-columns:repeat(2,1fr)}
  .about-split{grid-template-columns:1fr;gap:48px}
}
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  section{padding:72px 0}
  .page-hero{padding:120px 0 56px}
  .section-row{flex-direction:column;align-items:flex-start}
  .merch-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .artist-grid{grid-template-columns:1fr}
  .merch-grid{grid-template-columns:1fr 1fr}
  .footer-inner{flex-direction:column;align-items:flex-start}
}