:root{
  --cream:#F5EEDC;
  --ink:#1A1A1A;
  --red:#D62828;
  --yellow:#FFCA28;
  --blue:#007DC3;
  --green:#3A8E4C;
  --grey:#B5B8BB;
  --muted:#5F5E5A;
  --red-dark:#993C1D;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

body{
  font-family:'Helvetica Neue', Arial, sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

/* ---------- HEADER ---------- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  background:var(--cream);
  border-bottom:3px solid var(--ink);
  position:sticky;
  top:0;
  z-index:50;
}

.brand{
  display:flex;
  align-items:center;
}

.brand img{
  height:40px;
  width:auto;
}

nav{display:flex; gap:26px;}

nav a{
  font-size:12px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  font-weight:600;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease;
}

nav a:hover, nav a:focus-visible{
  border-color:var(--red);
  outline:none;
}

nav a.active{
  border-color:var(--red);
}

.nav-toggle{
  display:none;
  background:none;
  border:2px solid var(--ink);
  border-radius:6px;
  padding:6px 10px;
  font-size:14px;
  cursor:pointer;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.btn-header{
  display:inline-block;
  background:var(--red);
  color:var(--cream);
  border:2px solid var(--ink);
  border-radius:6px;
  padding:9px 16px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  white-space:nowrap;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease;
}

.btn-header:hover, .btn-header:focus-visible, .btn-header:active{
  transform:translate(4px, 4px);
  box-shadow:0 0 0 var(--ink);
  outline:none;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:var(--ink);
  border-bottom:3px solid var(--ink);
  overflow:hidden;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero video, .hero .hero-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.55;
}

.hero .hero-fallback{
  background:linear-gradient(135deg, #2a2a2a, #111 60%);
}

.hero-content{
  position:relative;
  z-index:2;
  padding:60px 24px;
  max-width:720px;
  margin:0 auto;
}

.eyebrow{
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--yellow);
  font-weight:700;
  margin-bottom:18px;
}

h1{
  font-size:clamp(28px, 5vw, 42px);
  font-weight:700;
  color:var(--cream);
  line-height:1.15;
  margin-bottom:28px;
}

.hero-ctas{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  border-radius:6px;
  padding:13px 26px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.3px;
  border:3px solid transparent;
  cursor:pointer;
  box-shadow:5px 5px 0 var(--cream);
  transition:transform .12s ease;
}

.btn:hover, .btn:focus-visible, .btn:active{
  transform:translate(5px, 5px);
  box-shadow:0 0 0 var(--cream);
}
.btn:focus-visible{outline:3px solid var(--yellow); outline-offset:2px;}

.btn-primary{
  background:var(--red);
  border-color:var(--cream);
  color:var(--cream);
}

.btn-secondary{
  background:transparent;
  border-color:var(--cream);
  color:var(--cream);
}

/* ---------- STAT STRIP ---------- */
.stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:3px solid var(--ink);
}

.stat{
  padding:26px 18px;
  text-align:center;
  background:var(--red);
  border-right:3px solid var(--ink);
}

.stat:last-child{border-right:none;}

.stat-num{
  font-size:28px;
  font-weight:700;
  color:var(--cream);
}

.stat-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:var(--cream);
  margin-top:4px;
}

/* ---------- EVENTS ---------- */
.section{padding:48px 24px; scroll-margin-top:85px;}

.section h2{
  font-size:20px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  margin-bottom:20px;
}

.filter-bar{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
  margin-bottom:24px;
}

.filter-chip{
  flex:0 0 auto;
  background:transparent;
  border:2px solid var(--ink);
  border-radius:20px;
  padding:8px 16px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}

.filter-chip.active{
  background:var(--ink);
  color:var(--cream);
}

.filter-chip:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:2px;
}

.event-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.streams-placeholder{
  display:none;
  grid-column:1 / -1;
  text-align:center;
  padding:60px 24px;
  border:3px dashed var(--ink);
  border-radius:10px;
}

.streams-placeholder.show{
  display:block;
}

.streams-placeholder p{
  margin-top:14px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.3px;
  color:var(--muted);
}

.event-card{
  background:#fff;
  border:3px solid var(--ink);
  border-radius:10px;
  overflow:hidden;
  display:block;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .15s ease;
}

.event-card:hover, .event-card:focus-within, .event-card:active{
  transform:translate(6px, 6px);
  box-shadow:0 0 0 var(--ink);
  outline:none;
}

.event-card-link{display:block; color:inherit; text-decoration:none;}

.event-countdown{
  display:inline-block;
  background:var(--yellow);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:20px;
  padding:3px 10px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  margin-bottom:10px;
}

.event-countdown[hidden]{display:none;}

.event-actions{
  display:flex;
  gap:8px;
  padding:0 14px 14px;
}

.event-action-btn{
  flex:1;
  font-family:inherit;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  padding:9px 8px;
  border:2px solid var(--ink);
  border-radius:6px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background .12s ease, color .12s ease, transform .12s ease;
}

.event-action-btn:hover, .event-action-btn:focus-visible{
  background:var(--ink);
  color:var(--cream);
  outline:none;
}

.event-action-btn:active{transform:translate(1px, 1px);}

.event-media{
  height:220px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cream);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.4px;
  text-align:center;
  padding:0 12px;
  overflow:hidden;
}

.event-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

.event-tag{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
  background:var(--cream);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:5px;
  padding:3px 8px;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.3px;
  text-transform:uppercase;
}

.event-body{padding:12px 14px 16px;}

.event-meta{font-size:12px; color:var(--muted); margin-bottom:4px;}
.event-title{font-size:14px; font-weight:700; margin-bottom:8px;}

.event-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}

.pill{
  display:inline-block;
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:20px;
  padding:3px 10px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
}

.event-link{font-size:11px; font-weight:700; color:var(--red-dark); text-transform:uppercase; letter-spacing:0.3px;}

/* ---------- SHOP ---------- */
.shop-mono{ font-family:inherit; }

.shop-header-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:20px;
}

.shop-header-row h2{ margin-bottom:0; }

.shop-view-all{
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
}

.shop-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.shop-card{
  background:var(--cream);
  border:1px solid var(--ink);
  overflow:hidden;
}

.shop-media{
  aspect-ratio:1/1;
  height:auto;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cream);
  background:#fff;
}

.shop-media-swipe{ padding:0; overflow:hidden; }

.shop-swipe-track{
  display:flex;
  width:100%;
  height:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.shop-swipe-track::-webkit-scrollbar{ display:none; }

.shop-swipe-track img{
  flex:0 0 100%;
  width:100%;
  height:100%;
  object-fit:cover;
  scroll-snap-align:start;
}

.shop-img-worn{ object-position:center 75%; }

.shop-swipe-dots{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:2;
}

.shop-swipe-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--ink);
}

.shop-swipe-dot.active{ background:var(--ink); }

.shop-quick-add{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:2;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cream);
  border:1px solid var(--ink);
  font-family:inherit;
  font-size:16px;
  line-height:1;
  opacity:0;
  transition:opacity .15s ease;
}

.shop-card:hover .shop-quick-add, .shop-card:focus-within .shop-quick-add{ opacity:1; }

.shop-body{padding:12px 2px;}

.shop-name{
  font-family:inherit;
  font-size:13px;
  margin-bottom:4px;
}

.shop-name a{ border-bottom:1px solid transparent; }
.shop-name a:hover{ border-bottom-color:var(--ink); }

.shop-price{
  font-family:inherit;
  font-size:13px;
  color:var(--muted);
  margin-bottom:10px;
}

.shop-buy{
  display:block;
  width:100%;
  text-align:center;
  padding:10px;
  font-size:11px;
  font-family:inherit;
  border-color:var(--ink);
  box-shadow:none;
  border-radius:0;
}

.shop-buy:hover, .shop-buy:focus-visible, .shop-buy:active{
  box-shadow:none;
  transform:none;
  opacity:0.85;
}

@media (max-width:820px){
  .shop-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:520px){
  .shop-grid{grid-template-columns:1fr;}
}

/* ---------- SHOP TRUST BADGES ---------- */
.shop-trust{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--ink);
  border:1px solid var(--ink);
  margin-top:32px;
}

.shop-trust-item{
  background:var(--cream);
  padding:20px 14px;
  text-align:center;
  font-family:inherit;
}

.shop-trust-item .shop-trust-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  margin-bottom:4px;
}

.shop-trust-item .shop-trust-sub{
  font-size:10px;
  color:var(--muted);
}

@media (max-width:620px){
  .shop-trust{grid-template-columns:repeat(2, 1fr);}
}

/* ---------- PRODUCT DETAIL PAGE ---------- */
.pdp-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:32px 24px 64px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
}

@media (max-width:820px){
  .pdp-wrap{grid-template-columns:1fr; gap:28px; padding:24px 20px 48px;}
}

.pdp-gallery-main{
  position:relative;
  border:1px solid var(--ink);
  aspect-ratio:1/1;
  overflow:hidden;
  background:#fff;
}

.pdp-gallery-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}

.pdp-gallery-main img.active{ display:block; }

.pdp-gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  background:var(--cream);
  border:1px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-family:inherit;
  z-index:2;
}

.pdp-gallery-arrow-left{ left:10px; }
.pdp-gallery-arrow-right{ right:10px; }

.pdp-thumbs{
  display:flex;
  gap:8px;
  margin-top:8px;
}

.pdp-thumb{
  width:64px;
  height:64px;
  border:1px solid var(--ink);
  overflow:hidden;
  cursor:pointer;
  opacity:0.55;
  background:#fff;
}

.pdp-thumb.active{ opacity:1; outline:2px solid var(--ink); outline-offset:-2px; }
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }

.pdp-info{ font-family:inherit; }

.pdp-name{ font-size:20px; font-weight:700; margin-bottom:6px; }
.pdp-price{ font-size:16px; color:var(--muted); margin-bottom:24px; }

.pdp-size-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.4px;
  font-weight:700;
  margin-bottom:10px;
}

.pdp-sizes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}

.pdp-size-chip{
  min-width:44px;
  padding:9px 12px;
  text-align:center;
  border:1px solid var(--ink);
  background:var(--cream);
  font-family:inherit;
  font-size:12px;
  cursor:pointer;
}

.pdp-size-chip.selected{ background:var(--ink); color:var(--cream); }

.pdp-size-chip.soldout{
  color:var(--grey);
  text-decoration:line-through;
  cursor:not-allowed;
  background:transparent;
}

.pdp-buy{
  display:block;
  width:100%;
  text-align:center;
  padding:16px;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  background:var(--red);
  color:var(--cream);
  border:1px solid var(--ink);
  border-radius:0;
  box-shadow:none;
  font-family:inherit;
  margin-bottom:24px;
}

.pdp-buy:hover, .pdp-buy:focus-visible{ box-shadow:none; transform:none; opacity:0.9; }

.pdp-notes{ margin-bottom:20px; }

.pdp-notes p{
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
  padding:10px 0;
  border-top:1px solid #ddd6c4;
}

.pdp-accordion{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  margin-bottom:40px;
}

.pdp-accordion-toggle{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 2px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:var(--ink);
}

.pdp-accordion-body{
  display:none;
  padding:0 2px 16px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
}

.pdp-accordion.open .pdp-accordion-body{ display:block; }
.pdp-accordion-toggle .chevron{ transition:transform .15s ease; }
.pdp-accordion.open .pdp-accordion-toggle .chevron{ transform:rotate(180deg); }

.pdp-related{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px 64px;
}

.pdp-related h2{
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  margin-bottom:20px;
}

/* ---------- COMING SOON ---------- */
.coming-soon{
  position:relative;
  background:var(--ink);
  overflow:hidden;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-bottom:3px solid var(--ink);
}

.coming-soon-content{
  position:relative;
  z-index:2;
  padding:60px 24px;
  max-width:640px;
}

.coming-soon-badge{
  display:inline-block;
  background:var(--yellow);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:20px;
  padding:6px 16px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  margin-bottom:24px;
}

.coming-soon-content p.lead{
  color:var(--cream);
  font-size:15px;
  line-height:1.5;
  opacity:0.85;
  margin-bottom:32px;
}

.notify-form{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ---------- MODAL ---------- */
.modal-overlay{
  display:flex;
  position:fixed;
  inset:0;
  background:rgba(26,26,26,0.75);
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:100;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility 0s linear .25s;
}

.modal-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .25s ease, visibility 0s linear 0s;
}

.modal{
  position:relative;
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:12px;
  width:100%;
  max-width:480px;
  max-height:90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:8px 8px 0 var(--red);
  transform:scale(0.92);
  transition:transform .25s ease;
}

.modal-overlay.open .modal{
  transform:scale(1);
}

.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:6px;
  width:32px;
  height:32px;
  font-size:16px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  z-index:1;
}

.modal-body{
  padding:36px 28px 28px;
  text-align:center;
}

.modal-badge{
  margin-bottom:16px;
}

.modal-title{
  font-size:24px;
  font-weight:700;
  margin-bottom:10px;
}

.modal-lead{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:24px;
}

#notifyFormEl, #contactFormEl{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#notifyFormEl[hidden], #contactFormEl[hidden]{
  display:none;
}

.notify-input{
  width:100%;
  padding:13px 16px;
  font-size:16px;
  font-family:inherit;
  border:3px solid var(--ink);
  border-radius:6px;
  background:#fff;
  color:var(--ink);
}

.notify-input:focus{
  outline:3px solid var(--yellow);
  outline-offset:2px;
}

.notify-submit{
  width:100%;
  text-align:center;
  box-shadow:5px 5px 0 var(--ink);
}

.notify-submit:hover, .notify-submit:focus-visible, .notify-submit:active{
  box-shadow:0 0 0 var(--ink);
}

.notify-submit:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

.notify-success{
  padding:12px 0 4px;
}

.notify-success .modal-title{
  color:var(--red-dark);
}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--yellow);
  border-bottom:3px solid var(--ink);
  overflow:hidden;
  white-space:nowrap;
}

.marquee-track{
  display:inline-flex;
  align-items:center;
  animation:marquee-scroll 22s linear infinite;
}

.marquee-track span{
  display:inline-flex;
  align-items:center;
  padding:10px 0;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--ink);
}

.marquee-track span::before{
  content:"";
  display:inline-block;
  width:34px;
  height:14px;
  background-image:url("assets/logo.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-right:10px;
  vertical-align:middle;
}

.marquee-track span::after{
  content:"\2605";
  margin:0 24px;
  font-size:11px;
}

@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}

.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

.event-grid .event-card:nth-child(1){transition-delay:0s;}
.event-grid .event-card:nth-child(2){transition-delay:.1s;}
.event-grid .event-card:nth-child(3){transition-delay:.2s;}
.event-grid .event-card:nth-child(4){transition-delay:.3s;}
.event-grid .event-card:nth-child(5){transition-delay:.4s;}
.event-grid .event-card:nth-child(6){transition-delay:.5s;}

.team-carousel .team-card:nth-child(1){transition-delay:0s;}
.team-carousel .team-card:nth-child(2){transition-delay:.1s;}
.team-carousel .team-card:nth-child(3){transition-delay:.2s;}
.team-carousel .team-card:nth-child(4){transition-delay:.3s;}
.team-carousel .team-card:nth-child(5){transition-delay:.4s;}
.team-carousel .team-card:nth-child(6){transition-delay:.5s;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .marquee-track{animation:none;}
}

/* ---------- CONTACT ---------- */
.contact-hero{
  min-height:280px;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}

.contact-info h2, .contact-form-card h2{
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  margin-bottom:16px;
}

.contact-link{
  display:inline-block;
  font-size:20px;
  font-weight:700;
  color:var(--red-dark);
  margin-bottom:20px;
  border-bottom:3px solid var(--ink);
  padding-bottom:4px;
}

.office-hours-badge{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  margin-bottom:24px;
}

.office-hours-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  color:var(--muted);
}

.office-hours-value{
  font-size:16px;
  font-weight:700;
}

.social-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:320px;
}

.social-link{
  display:block;
  padding:12px 18px;
  border:3px solid var(--ink);
  border-radius:8px;
  font-weight:700;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.3px;
  background:#fff;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease;
}

.social-link:hover, .social-link:focus-visible, .social-link:active{
  transform:translate(5px, 5px);
  box-shadow:0 0 0 var(--ink);
}

.contact-form-card{
  background:#fff;
  border:3px solid var(--ink);
  border-radius:12px;
  padding:28px;
  align-self:start;
}

.contact-textarea{
  resize:vertical;
  font-family:inherit;
}

.form-hint{
  font-size:11px;
  color:var(--muted);
  text-align:center;
}

@media (max-width:720px){
  .contact-grid{grid-template-columns:1fr;}
}

/* ---------- TEAM CAROUSEL ---------- */
.team-section{
  background:var(--yellow);
  padding:56px 0;
  border-bottom:3px solid var(--ink);
  overflow:hidden;
}

.team-carousel-wrap{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding:0 60px;
}

.team-carousel{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:4px 0 12px;
}

.team-carousel::-webkit-scrollbar{
  display:none;
}

.team-card{
  flex:0 0 auto;
  width:220px;
  scroll-snap-align:start;
}

.team-photo{
  width:100%;
  aspect-ratio:4/5;
  border:3px solid var(--ink);
  border-radius:10px;
  overflow:hidden;
  box-shadow:5px 5px 0 var(--ink);
  background:var(--cream);
  margin-bottom:14px;
  transition:transform .15s ease;
}

.team-card:hover .team-photo, .team-card:focus-within .team-photo{
  transform:translate(5px, 5px);
  box-shadow:0 0 0 var(--ink);
}

.team-carousel .team-card:nth-child(5n+1) .team-photo{ box-shadow:5px 5px 0 var(--red); }
.team-carousel .team-card:nth-child(5n+1):hover .team-photo, .team-carousel .team-card:nth-child(5n+1):focus-within .team-photo{ box-shadow:0 0 0 var(--red); }

.team-carousel .team-card:nth-child(5n+2) .team-photo{ box-shadow:5px 5px 0 var(--blue); }
.team-carousel .team-card:nth-child(5n+2):hover .team-photo, .team-carousel .team-card:nth-child(5n+2):focus-within .team-photo{ box-shadow:0 0 0 var(--blue); }

.team-carousel .team-card:nth-child(5n+3) .team-photo{ box-shadow:5px 5px 0 var(--green); }
.team-carousel .team-card:nth-child(5n+3):hover .team-photo, .team-carousel .team-card:nth-child(5n+3):focus-within .team-photo{ box-shadow:0 0 0 var(--green); }

.team-carousel .team-card:nth-child(5n+4) .team-photo{ box-shadow:5px 5px 0 var(--red-dark); }
.team-carousel .team-card:nth-child(5n+4):hover .team-photo, .team-carousel .team-card:nth-child(5n+4):focus-within .team-photo{ box-shadow:0 0 0 var(--red-dark); }

.team-carousel .team-card:nth-child(5n+5) .team-photo{ box-shadow:5px 5px 0 var(--ink); }
.team-carousel .team-card:nth-child(5n+5):hover .team-photo, .team-carousel .team-card:nth-child(5n+5):focus-within .team-photo{ box-shadow:0 0 0 var(--ink); }

.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.team-photo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
}

.team-name{
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  margin-bottom:4px;
}

.team-role{
  font-size:12px;
  color:var(--ink);
  opacity:0.75;
  line-height:1.4;
  margin-bottom:6px;
}

.team-handle{
  font-size:12px;
  font-weight:700;
  color:var(--red-dark);
  text-decoration:underline;
}

.team-arrow{
  position:absolute;
  top:calc(50% - 20px);
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--red);
  color:var(--cream);
  border:3px solid var(--ink);
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease;
  z-index:2;
}

.team-arrow:hover, .team-arrow:focus-visible, .team-arrow:active{
  transform:translateY(-50%) translate(3px, 3px);
  box-shadow:0 0 0 var(--ink);
  outline:none;
}

.team-arrow-left{left:0;}
.team-arrow-right{right:0;}

@media (max-width:720px){
  .team-carousel-wrap{padding:0 44px;}
  .team-card{width:170px;}
  .team-arrow{width:38px; height:38px; font-size:14px;}
}

/* ---------- SONG WIDGET ---------- */
.song-widget{
  position:fixed;
  bottom:16px;
  right:16px;
  z-index:60;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
}

.song-embed{
  width:110px;
  height:80px;
  border-radius:8px;
  overflow:hidden;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  flex-shrink:0;
  background:var(--cream);
  line-height:0;
}

.song-embed #songEmbed,
.song-embed iframe{
  display:block;
  width:100% !important;
  height:100% !important;
}

.record-btn{
  position:relative;
  width:76px;
  height:76px;
  border-radius:50%;
  border:3px solid var(--cream);
  padding:0;
  background:transparent;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--yellow);
  transition:transform .12s ease;
  flex-shrink:0;
}

.record-btn:hover, .record-btn:focus-visible, .record-btn:active{
  transform:translate(4px, 4px);
  box-shadow:0 0 0 var(--yellow);
  outline:none;
}

.record-btn svg{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  animation:spin-record 5s linear infinite;
}

.record-play-icon{
  position:absolute;
  top:50%;
  left:53%;
  transform:translate(-50%, -50%);
  width:0;
  height:0;
  border-style:solid;
  border-width:9px 0 9px 14px;
  border-color:transparent transparent transparent var(--cream);
  pointer-events:none;
}

.record-pause-icon{
  position:absolute;
  top:50%;
  left:50%;
  width:4px;
  height:16px;
  background:var(--cream);
  box-shadow:9px 0 0 var(--cream);
  transform:translate(-6.5px, -50%);
  pointer-events:none;
}

.record-btn:not(.is-playing) svg{
  animation-play-state:paused;
}

@keyframes spin-record{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.music-note{
  position:absolute;
  bottom:44px;
  right:24px;
  font-size:18px;
  color:var(--yellow);
  pointer-events:none;
  z-index:61;
  animation:float-note 1.6s ease-out forwards;
}

@keyframes float-note{
  0%{transform:translate(0, 0) rotate(0deg); opacity:1;}
  100%{transform:translate(var(--note-drift, 0px), -80px) rotate(25deg); opacity:0;}
}

@media (prefers-reduced-motion:reduce){
  .music-note{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .record-btn svg{animation:none;}
}

@media (max-width:480px){
  .song-widget{
    bottom:12px;
    right:12px;
  }
  .record-btn{width:64px; height:64px;}
  .record-play-icon{border-width:8px 0 8px 12px;}
  .song-embed{width:90px; height:70px;}
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--ink);
  color:var(--cream);
  text-align:center;
  padding:24px;
  font-size:12px;
  letter-spacing:0.3px;
}

footer a{border-bottom:1px solid transparent;}
footer a:hover, footer a:focus-visible{border-color:var(--yellow);}

.footer-tagline{margin-bottom:20px;}

.footer-social{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:18px;
}

.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--cream);
  background:transparent;
  transition:transform .12s ease, color .12s ease;
}

.footer-social-link:hover, .footer-social-link:focus-visible, .footer-social-link:active{
  transform:scale(1.15);
  color:var(--yellow);
  outline:none;
}

.footer-social-link svg{
  width:19px;
  height:19px;
}

.footer-hashtag{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.4px;
  color:var(--yellow);
}

/* ---------- WELCOME POPUP ---------- */
.popup-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(26,26,26,0.72);
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.popup-overlay.open{display:flex;}

.popup-card{
  position:relative;
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:16px;
  box-shadow:8px 8px 0 var(--ink);
  max-width:380px;
  width:100%;
  padding:36px 28px 32px;
  text-align:center;
  animation:popupPop .35s ease;
}

@keyframes popupPop{
  0%{ transform:scale(0.85); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

.popup-close{
  position:absolute;
  top:10px;
  right:12px;
  background:none;
  border:none;
  font-size:26px;
  line-height:1;
  color:var(--ink);
  cursor:pointer;
  padding:4px 8px;
}
.popup-close:hover{color:var(--red);}

.popup-logo{
  width:88px;
  height:auto;
  margin:0 auto 14px;
  display:block;
}

.popup-badge{
  display:inline-block;
  background:var(--yellow);
  color:var(--ink);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  border:2px solid var(--ink);
  border-radius:20px;
  padding:4px 14px;
  margin-bottom:14px;
}

.popup-card h2{
  font-size:26px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.3px;
  margin-bottom:10px;
}

.popup-text{
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:22px;
}

.popup-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:14px;
}

.popup-input{
  width:100%;
  padding:12px 14px;
  font-size:16px;
  font-family:inherit;
  border:3px solid var(--ink);
  border-radius:6px;
  background:#fff;
  color:var(--ink);
}
.popup-input:focus-visible{outline:3px solid var(--yellow); outline-offset:2px;}

.popup-btn{
  background:var(--red);
  border-color:var(--ink);
  color:var(--cream);
  box-shadow:5px 5px 0 var(--ink);
  width:100%;
  text-align:center;
}
.popup-btn:hover, .popup-btn:focus-visible, .popup-btn:active{
  box-shadow:0 0 0 var(--ink);
}
.popup-btn:disabled{opacity:0.6; cursor:default;}

.popup-success{
  display:none;
  font-size:15px;
  font-weight:700;
  color:var(--green);
  margin-bottom:14px;
}
.popup-success.show{display:block;}

.popup-skip{
  display:inline-block;
  font-size:12.5px;
  color:var(--muted);
  text-decoration:underline;
}


/* ---------- MOTION EXTRAS ---------- */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:4px;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg, var(--red), var(--yellow));
  z-index:1100;
  pointer-events:none;
}

.hero h1 .word{
  display:inline-block;
  opacity:0;
  transform:translateY(0.6em) rotate(3deg);
  animation:wordIn .6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--i) * 0.09s + 0.15s);
}

@keyframes wordIn{
  to{ opacity:1; transform:none; }
}

.hero video, .hero .hero-fallback{
  will-change:transform;
}

.confetti-bit{
  position:fixed;
  width:9px;
  height:14px;
  border:2px solid var(--ink);
  z-index:1200;
  pointer-events:none;
  animation:confettiFall 1.5s cubic-bezier(.2,.7,.3,1) forwards;
}

@keyframes confettiFall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  100%{ transform:translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .hero h1 .word{opacity:1; transform:none; animation:none;}
  .scroll-progress, .confetti-bit{display:none;}
}

/* ---------- MOBILE ---------- */
@media (max-width:720px){
  nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--cream);
    border-bottom:3px solid var(--ink);
    flex-direction:column;
    padding:16px 24px;
    gap:16px;
  }
  nav.open{display:flex;}
  .nav-toggle{display:block;}
  .btn-header{padding:9px 12px; font-size:10px;}
  .stats{grid-template-columns:1fr 1fr;}
  .event-grid{grid-template-columns:1fr;}
  .footer-social-link svg{width:16px; height:16px;}
  .popup-card{padding:30px 22px 26px;}
  .popup-card h2{font-size:22px;}
}

@media (max-width:480px){
  footer{padding-bottom:104px;}
}

@media (max-width:360px){
  .stat{padding:22px 10px;}
  .stat-num{font-size:22px;}
}