:root { --brand:#9d2e21; --black:#262626; --gray:#fafafa; --tan:#d1b7af; font-family:Montserrat,sans-serif; }
*, *::before, *::after { box-sizing:border-box; }
html { margin:0; padding:0; width:100%; height:100%; overflow-x:hidden; scroll-behavior:smooth; }
body { margin:0; padding:0; width:100%; overflow-x:hidden; font-family:inherit; background:transparent; }

/* social links */
.social-links { display:flex; gap:1rem; align-items:center; justify-content:center; z-index:1000; }
.social-links a img { filter:grayscale(100%); width:30px; height:30px; opacity:.4; transition:opacity .35s ease, transform .35s ease; transform-origin:center; display:block; }
.social-links a:hover img { opacity:1; transform:scale(1.1); }
.social-links.header { z-index:60; top:1.5rem; right:2rem; }
.social-links.footer-links { flex-direction:row; justify-content:center; margin-bottom:1.5rem; }

/* header */
.site-header { position:fixed; z-index:50; width:100%; top:0; left:0; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; background:transparent; overflow:visible; }
.logo { opacity:.5; height:50px; width:auto; display:block; }
@media (max-width:800px) { .site-header { padding:.75rem 1rem; } .logo { height:40px; } }

/* hero */
.hero { position:relative; min-height:100vh; min-height:100svh; min-height:100dvh; display:flex; align-items:flex-end; padding:0 3.5rem 2.5rem; overflow:hidden; border-bottom:2px solid var(--black); }
.hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-bottom:2px solid var(--black); }
.overlay { position:relative; padding:1rem; width:min(45%,640px); animation:glitch-in 2.3s steps(3,end) forwards; margin-bottom:clamp(1.5rem,5vh,3rem); }
.overlay h1 { color:#fff; font-size:clamp(1.5rem,3vw,3rem); font-weight:300; margin:0; }
.btn-book { display:inline-block; padding:.75rem 2rem; margin-top:1rem; border:2px solid #fff; border-radius:50px; background:transparent; color:#fff; text-decoration:none; font-size:1.5rem; font-weight:300; transition:all .3s; }
.btn-book:hover { color:var(--brand); background:#fff; border-color:var(--brand); transform:scale(1.02); }
@keyframes glitch-in {
  0% { opacity:0; clip-path:inset(0 0 100% 0); transform:translate(0); }
  10% { opacity:1; clip-path:inset(0 0 80% 0); transform:translate(-5px,2px); }
  20% { clip-path:inset(20% 0 60% 0); transform:translate(5px,-2px); }
  30% { clip-path:inset(40% 0 40% 0); transform:translate(-3px,1px); }
  50% { clip-path:inset(10% 0 10% 0); transform:translate(2px,-1px); }
  70% { clip-path:inset(0 0 0 0); transform:translate(-1px); }
  100% { opacity:1; clip-path:inset(0 0 0 0); transform:translate(0); }
}
@media (max-width:800px) {
  .hero { padding:0 2rem 2rem; }
  .overlay { width:100%; padding:1rem; margin-bottom:clamp(1.25rem,6vh,2.5rem); }
  .overlay h1 { font-size:clamp(1.4rem,7vw,2.2rem); }
  .btn-book { font-size:1rem; padding:.5rem 1.5rem; }
}

/* what we do */
.what-we-do { text-align:center; padding:2rem; font-weight:200; width:100%; padding-left:0; padding-right:0; margin:0; }
.what-we-do h2 { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:200; color:var(--brand); }
.what-we-do .value-props { width:54%; margin:0 auto 2rem; font-size:20px; font-weight:200; }
.what-we-do .value-props p { margin:0 0 1rem; }
.what-we-do .value-props p:first-child { font-size:14px; font-weight:500; margin-bottom:1.25rem; }
.what-we-do .value-props p:first-child strong { font-weight:500; }
@media (max-width:800px) { .what-we-do h2 { margin-top:6rem; } .what-we-do .value-props { width:90%; } }

/* artists */
.artists { overflow:hidden; white-space:nowrap; position:relative; margin-bottom:2rem; max-width:100%; }
.artists h2 { font-weight:400; color:var(--brand); margin-bottom:3rem; margin-left:2rem; font-size:1.5em; }
.artists .carousel { display:flex; gap:2rem; width:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.artists .carousel::-webkit-scrollbar { display:none; }
.artist-card { flex:0 0 auto; width:180px; text-align:center; color:inherit; text-decoration:none; }
.artist-photo-wrapper { width:100%; height:180px; overflow:hidden; border-radius:16px; border:1px solid #000; margin-bottom:.5rem; }
.artist-photo-wrapper img { width:100%; height:100%; object-fit:cover; display:block; }
.artist-name { font-weight:200; font-size:1.25rem; }
@media (max-width:800px) {
  .artists .carousel { margin-left:2rem; scroll-snap-type:x mandatory; gap:1rem; }
  .artist-card { width:150px; scroll-snap-align:start; }
  .artist-photo-wrapper { width:150px; height:150px; }
  .artist-name { font-size:1rem; }
}

/* promotions */
.marmalade-promotions { padding:4rem 2rem; background:var(--brand); border-top:2px solid var(--black); border-bottom:2px solid var(--black); text-align:center; }
.promotions-header { margin-bottom:4rem; }
.promotions-header h2 { color:var(--tan); font-size:clamp(1.75rem,4vw,2.5rem); font-weight:400; margin:0 0 2rem; }
.promotions-header p { color:var(--tan); font-size:1.1rem; font-weight:300; width:40%; margin:0 auto; }
.promotion-highlights { display:flex; flex-wrap:wrap; gap:10rem; justify-content:center; }
.promotion { flex:1 1 400px; max-width:500px; text-align:left; }
.promotion h3 { color:var(--tan); font-weight:500; margin-bottom:1rem; }
.promotion p { color:var(--tan); font-weight:300; font-size:14px; margin:.5rem 0 1.75rem; }
.promotion iframe { border:1px solid var(--tan); width:100%; height:280px; border-radius:12px; margin-bottom:1rem; }
@media (max-width:800px) { .promotion-highlights { flex-direction:column; gap:2rem; } .promotions-header p { width:100%; } }

/* our story */
.our-story { border-top:2px solid var(--black); border-bottom:2px solid var(--black); background:var(--black); color:#fff; padding:4rem 3rem; width:100%; height:100vh; display:flex; justify-content:center; }
.story-content { display:flex; align-items:center; gap:3rem; max-width:1200px; }
.story-image { flex:1; }
.story-image img { border:1px solid var(--tan); width:75%; border-radius:12px; object-fit:cover; }
.story-text { flex:1.1; text-align:right; }
.story-text h2 { font-weight:300; margin-bottom:4rem; text-align:left; }
.story-text p { text-align:left; font-weight:200; font-size:18px; line-height:1.6; margin-bottom:1.5rem; }
.story-text a { color:#fff; }
.story-social { display:flex; align-items:center; gap:1.25rem; margin-top:2rem; justify-content:flex-start; }
.story-social a img { filter:grayscale(100%); width:28px; height:28px; opacity:.4; transition:opacity .3s ease, transform .3s ease; display:block; }
.story-social a img:hover { opacity:1; transform:scale(1.1); }
@media (max-width:800px) {
  .our-story { height:auto; flex-direction:column; padding:3rem 1.5rem; align-items:center; overflow-x:hidden; }
  .story-content { flex-direction:column; gap:2rem; align-items:center; width:100%; max-width:100%; margin:0 auto; }
  .story-image { display:flex; justify-content:center; width:100%; flex:none; margin:0 auto; padding:0; }
  .story-image img { width:100%; max-width:400px; height:auto; display:block; margin:0 auto; }
  .story-text { text-align:left; width:100%; max-width:100%; flex:none; word-wrap:break-word; overflow-wrap:break-word; padding:0; }
}

/* brands */
.brands { text-align:center; padding:1rem; background:var(--black); }
.brands-carousel { overflow:hidden; position:relative; width:auto; background:var(--black); max-width:100%; }
.brands-track { display:flex; align-items:center; gap:4rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.brands-track::-webkit-scrollbar { display:none; }
.brand-logo { flex:0 0 auto; width:200px; max-height:100px; display:flex; justify-content:center; align-items:center; }
.brand-logo img { max-width:100%; max-height:100px; object-fit:contain; filter:grayscale(100%); opacity:.8; transition:filter .3s ease, opacity .3s ease; }
.brand-logo img:hover { filter:none; opacity:1; }
@media (max-width:800px) { .brand-logo { width:100px; max-height:120px; } .brands-track { gap:2rem; width:100%; } }

/* footer */
.footer { width:100%; background:var(--black); color:#fff; text-align:center; padding:6rem 1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.copy { margin-top:1rem; font-size:.9rem; text-align:center; }
@media (max-width:800px) { .footer { padding:3rem 1rem; } }