:root { --site-primary: #D6FF3F; --site-on-primary: #11130B; --site-secondary: #20231D; --site-on-secondary: #F4F2E9; --site-background: #10110F; --site-on-background: #F4F2E9; --site-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --site-font-heading: "Arial Black", Impact, ui-sans-serif, sans-serif; --site-heading-scale: 1; --site-spacing-scale: 1; --site-radius-scale: 1; --site-decoration-opacity: 1; color-scheme: light dark; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0px; background: var(--site-background); color: var(--site-on-background); font-family: var(--site-font-body); }

.site-root { min-height: 100vh; width: 100%; background-color: light-dark(var(--site-background), var(--site-background)); color: var(--site-on-background); overflow: hidden; border-radius: 0px; }

a { color: inherit; text-decoration: none; }

button { font: inherit; }

.wrap { width: min(1180px, 100% - 48px); margin: 0px auto; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(24px * var(--site-spacing-scale)) 0; border-bottom: 1px solid rgba(244, 242, 233, 0.15); position: relative; z-index: 2; }

.brand { font-weight: 950; letter-spacing: -0.07em; font-size: 20px; }

.brand span { color: var(--site-primary); }

.nav { display: flex; align-items: center; gap: 30px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(201, 201, 192); }

.nav a:hover { color: var(--site-primary); }

.nav-cta { padding: 12px 17px; background: var(--site-primary); font-weight: 800; border-radius: calc(3px * var(--site-radius-scale)); color: var(--site-on-primary) !important; }

.menu-btn { display: none; border: 1px solid rgba(244, 242, 233, 0.25); color: var(--site-on-background); background: transparent; padding: 9px 12px; }

.hero { position: relative; min-height: 690px; display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: 30px; padding: 78px 0px 86px; }

.hero::before { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; right: -170px; top: 10px; background: radial-gradient(circle, rgba(214, 255, 63, 0.16), rgba(214, 255, 63, 0) 68%); opacity: var(--site-decoration-opacity); pointer-events: none; }

.kicker { display: flex; align-items: center; gap: 12px; color: var(--site-primary); font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }

.kicker::before { content: ""; width: 32px; height: 1px; background: var(--site-primary); }

h1, h2, h3, p { margin-top: 0px; }

h1 { font-family: var(--site-font-heading); text-transform: uppercase; font-size: clamp(68px, 9.1vw, 126px); line-height: 0.83; letter-spacing: -0.085em; margin: 28px 0px; max-width: 680px; }

h1 .outline { color: transparent; -webkit-text-stroke: 1.5px var(--site-on-background); }

.hero-copy { max-width: 460px; color: rgb(185, 187, 176); font-size: 16px; line-height: 1.75; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; font-size: 11px; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; border: 1px solid rgba(244, 242, 233, 0.35); transition: transform 0.2s, background 0.2s; }

.btn:hover { transform: translateY(-3px); }

.btn-primary { background: var(--site-primary); color: var(--site-on-primary); border-color: var(--site-primary); }

.hero-art { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center; }

.art-frame { width: min(100%, 470px); aspect-ratio: 0.82 / 1; position: relative; background: linear-gradient(145deg, rgb(52, 56, 44), rgb(23, 26, 21) 52%, rgb(41, 45, 35)); overflow: hidden; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: rgba(0, 0, 0, 0.35) 25px 30px 90px; }

.art-frame::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(214, 255, 63, 0.16), transparent 45%), radial-gradient(at 54% 38%, rgba(214, 255, 63, 0.13), transparent 46%); }

.art-frame.has-photo::before { content: none; }

.art-frame.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.art-stamp { position: absolute; right: -18px; bottom: 38px; width: 124px; height: 124px; border-radius: 50%; background: var(--site-primary); color: rgb(20, 22, 13); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 950; font-size: 12px; line-height: 1.25; letter-spacing: 0.08em; transform: rotate(10deg); border: 7px solid rgb(16, 17, 15); }

.marquee { background: var(--site-primary); color: rgb(20, 22, 13); overflow: hidden; white-space: nowrap; padding: 17px 0px; font-family: var(--site-font-heading); font-size: 20px; letter-spacing: 0.04em; }

.marquee span { display: inline-block; padding-left: 30px; }

.marquee b { padding: 0px 28px; font-size: 15px; }

.section { padding: 100px 0px; }

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 42px; }

.eyebrow { color: var(--site-primary); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; font-weight: 900; margin-bottom: 15px; }

h2 { font-family: var(--site-font-heading); text-transform: uppercase; font-size: clamp(42px, 6vw, 72px); letter-spacing: -0.07em; line-height: 0.9; margin-bottom: 0px; }

.section-note { color: rgb(174, 176, 165); line-height: 1.65; max-width: 330px; font-size: 13px; margin: 0px; }

.music-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; }

.feature-card { min-height: 340px; padding: 30px; background: var(--site-secondary); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255, 255, 255, 0.09); }

.feature-card::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -85px; top: -95px; border: 1px solid rgba(214, 255, 63, 0.28); box-shadow: rgba(214, 255, 63, 0.024) 0px 0px 0px 24px, rgba(214, 255, 63, 0.02) 0px 0px 0px 48px; opacity: var(--site-decoration-opacity); }

.play-mark { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--site-primary); color: rgb(17, 19, 11); font-size: 20px; position: relative; z-index: 1; }

button.play-mark { border: 0; cursor: pointer; font-family: inherit; transition: transform 0.2s ease; }

button.play-mark:hover, button.play-mark:focus-visible { transform: scale(1.08); }

.feature-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; background: rgb(0, 0, 0); }

.card-index { color: var(--site-primary); font-size: 10px; letter-spacing: 0.2em; font-weight: 900; }

.feature-card h3 { font-family: var(--site-font-heading); font-size: 34px; line-height: 0.95; letter-spacing: -0.05em; text-transform: uppercase; max-width: 420px; margin: 16px 0px 10px; position: relative; z-index: 1; }

.feature-card p { color: rgb(184, 186, 175); font-size: 13px; line-height: 1.6; max-width: 420px; margin: 0px; position: relative; z-index: 1; }

.small-cards { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }

.small-card { background: rgb(218, 219, 209); color: rgb(23, 25, 18); padding: 25px; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; }

.small-card.dark { background: rgb(38, 42, 34); color: rgb(244, 242, 233); border: 1px solid rgba(255, 255, 255, 0.1); }

.small-card h3 { font-family: var(--site-font-heading); text-transform: uppercase; font-size: 27px; line-height: 0.95; letter-spacing: -0.05em; margin: 12px 0px 0px; }

.small-card .card-index { color: rgb(109, 125, 36); }

.small-card.dark .card-index { color: var(--site-primary); }

.about { background: rgb(218, 219, 209); color: rgb(23, 25, 18); }

.about-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: center; }

.about-art { min-height: 390px; background: linear-gradient(145deg, rgb(168, 177, 124), rgb(76, 87, 64) 55%, rgb(37, 43, 32)); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }

.about-art::before { content: "SAX"; font-family: var(--site-font-heading); font-size: clamp(80px, 13vw, 160px); color: rgba(244, 242, 233, 0.16); letter-spacing: -0.1em; transform: rotate(-90deg); position: absolute; }

.about-art.has-photo { aspect-ratio: 4 / 5; background: rgb(37, 43, 32); }

.about-art.has-photo::before { content: none; }

.about-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(1); }

.about-art .circle { width: 210px; height: 210px; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 50%; display: grid; place-items: center; color: rgb(244, 242, 233); font-size: 11px; letter-spacing: 0.22em; text-align: center; line-height: 1.6; z-index: 1; }

.about h2 { max-width: 570px; }

.about-copy { color: rgb(78, 81, 71); line-height: 1.8; font-size: 15px; margin: 28px 0px; max-width: 590px; }

.text-link { display: inline-flex; gap: 14px; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 900; border-bottom: 1px solid; padding-bottom: 9px; }

.gigs { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }

.gig-list { border-top: 1px solid rgba(244, 242, 233, 0.22); }

.gig { display: grid; grid-template-columns: 70px 1fr auto; gap: 18px; align-items: center; padding: 22px 0px; border-bottom: 1px solid rgba(244, 242, 233, 0.22); }

.gig-date { color: var(--site-primary); font-weight: 900; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }

.gig h3 { font-size: 16px; margin: 0px 0px 5px; }

.gig p { margin: 0px; color: rgb(174, 176, 165); font-size: 12px; }

.gig-tag { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid rgba(244, 242, 233, 0.25); padding: 8px 10px; color: rgb(214, 216, 206); }

.booking-card { padding: 34px; background: var(--site-secondary); border: 1px solid rgba(255, 255, 255, 0.1); }

.booking-card h3 { font-family: var(--site-font-heading); font-size: 39px; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.06em; margin: 0px 0px 20px; }

.booking-card p { color: rgb(184, 186, 175); font-size: 13px; line-height: 1.7; }

.booking-card .btn { margin-top: 14px; }

.video-panel { background: rgb(36, 40, 32); min-height: 360px; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }

.video-panel::before { content: "LIVE"; position: absolute; font-family: var(--site-font-heading); font-size: clamp(130px, 24vw, 300px); letter-spacing: -0.1em; color: rgba(255, 255, 255, 0.035); }

.video-content { position: relative; z-index: 1; padding: 30px; }

.video-content .play-mark { margin: 0px auto 20px; }

.video-content h3 { font-family: var(--site-font-heading); font-size: clamp(30px, 5vw, 52px); text-transform: uppercase; letter-spacing: -0.06em; margin: 0px 0px 10px; }

.video-content p { color: rgb(184, 186, 175); font-size: 13px; margin: 0px; }

.contact { background: var(--site-primary); color: rgb(20, 22, 13); padding: 90px 0px; }

.contact-layout { display: flex; align-items: end; justify-content: space-between; gap: 35px; }

.contact .eyebrow { color: rgb(63, 77, 19); }

.contact h2 { max-width: 730px; font-size: clamp(48px, 8vw, 100px); }

.contact .btn { border-color: rgb(20, 22, 13); color: rgb(20, 22, 13); }

.contact .btn:hover { background: rgb(20, 22, 13); color: var(--site-primary); }

.footer { padding: 28px 0px; display: flex; justify-content: space-between; gap: 20px; color: rgb(150, 153, 141); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

.footer strong { color: rgb(244, 242, 233); }

.socials { display: flex; gap: 20px; }

@media (max-width: 800px) {
  .nav { display: none; position: absolute; top: 70px; left: 0px; right: 0px; padding: 20px; background: rgb(32, 35, 29); flex-direction: column; align-items: flex-start; gap: 20px; }
  .nav.open { display: flex; }
  .menu-btn { display: block; }
  .hero { grid-template-columns: 1fr; padding: 65px 0px 55px; }
  .hero-art { min-height: 440px; }
  .art-frame { max-width: 390px; }
  .music-grid, .about-layout, .gigs { grid-template-columns: 1fr; }
  .about-layout { gap: 35px; }
  .about-art { min-height: 300px; }
  .section { padding: 72px 0px; }
  .section-head { align-items: start; flex-direction: column; }
  .contact-layout { align-items: start; flex-direction: column; }
}

@media (max-width: 480px) {
  .wrap { width: min(100% - 32px, 1180px); }
  h1 { font-size: 68px; }
  .hero-art { min-height: 370px; }
  .art-stamp { width: 98px; height: 98px; right: -4px; font-size: 10px; }
  .gig { grid-template-columns: 52px 1fr; }
  .gig-tag { grid-column: 2; justify-self: start; }
  .footer { flex-direction: column; }
}
/* Booking form */
.contact-layout { align-items: start; }

.booking-form { width: min(100%, 460px); display: grid; gap: 14px; }

.booking-form .hidden { display: none; }

.booking-form label { display: grid; gap: 7px; font-size: 10px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(63, 77, 19); }

.booking-form input, .booking-form select, .booking-form textarea { width: 100%; font: inherit; font-size: 15px; letter-spacing: normal; text-transform: none; font-weight: 500; color: rgb(20, 22, 13); background: rgba(255, 255, 255, 0.35); border: 1px solid rgb(20, 22, 13); border-radius: 0px; padding: 13px 14px; }

.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus { outline: 2px solid rgb(20, 22, 13); outline-offset: 2px; }

.booking-form textarea { min-height: 120px; resize: vertical; }

.booking-form .btn { justify-self: start; background: rgb(20, 22, 13); color: var(--site-primary); cursor: pointer; }

.booking-form .btn:disabled { opacity: 0.6; cursor: wait; }

.form-status { min-height: 1.4em; margin: 0px; font-size: 13px; font-weight: 700; }