@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500;600&display=swap');

:root{--ink:#0b0b0c;--ink-2:#101012;--card:#121214;--ivory:#f3efe7;--muted:rgba(243,239,231,.6);--gold:#c4a15e;--rule:rgba(243,239,231,.1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--ivory);font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.section{padding:72px max(7vw,30px)}header{height:76px;position:fixed;z-index:20;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 4.2%;font-size:8px;letter-spacing:.19em;text-transform:uppercase;transition:.3s}header.is-scrolled{background:rgba(11,11,12,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}.brand{font-family:Fraunces,serif;font-size:11px;letter-spacing:.16em;white-space:nowrap;display:flex;gap:8px;align-items:center}.equalizer{display:flex;align-items:center;gap:1px;height:12px}.equalizer i{display:block;width:1px;background:#d6d0c3}.equalizer i:nth-child(1),.equalizer i:nth-child(5){height:4px}.equalizer i:nth-child(2),.equalizer i:nth-child(4){height:8px}.equalizer i:nth-child(3){height:12px}nav{display:flex;gap:27px;color:rgba(243,239,231,.57)}nav a:last-child{color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:9px}.header-cta,.gold-button{border:1px solid var(--gold);border-radius:30px;padding:12px 21px;font-size:8px;letter-spacing:.17em;text-transform:uppercase;transition:.25s}.header-cta:hover{background:var(--gold);color:var(--ink)}.menu-toggle,.mobile-menu{display:none}.hero{height:582px;min-height:582px;position:relative;overflow:hidden;background:#090909;text-align:center}.orbit{position:absolute;border:1px solid rgba(196,161,94,.06);border-radius:50%;left:50%;top:48%;transform:translate(-50%,-50%)}.orbit-one{width:510px;height:510px}.orbit-two{width:730px;height:730px}.hero-content{position:relative;z-index:3;padding-top:86px;display:flex;align-items:center;flex-direction:column}.booking-badge{margin:0 0 24px;border:1px solid rgba(196,161,94,.5);border-radius:20px;padding:7px 12px;color:var(--gold);font-size:7px;letter-spacing:.17em}.hero h1{margin:0;font-family:Fraunces,Georgia,serif;font-weight:400;font-size:62px;line-height:.91;letter-spacing:-.055em}.hero h1 span{display:block;color:var(--gold)}.hero-copy{width:350px;max-width:90vw;margin:20px 0 23px;color:var(--muted);font-size:9px;line-height:1.65}.gold-button{background:#d0a754;color:#16120b;border:0;padding:13px 25px;font-size:7px;font-weight:600;z-index:4}.gold-button:hover,.form-bottom button:hover{background:var(--ivory);transform:translateY(-2px)}.hero-image{position:absolute;z-index:1;width:395px;height:274px;bottom:0;left:50%;transform:translateX(-50%);overflow:hidden}.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(9,9,9,.2),#090909 100%)}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 54%;filter:grayscale(1) contrast(1.2) brightness(.7)}.hero-meta{position:absolute;z-index:2;bottom:63px;text-align:left;font-size:7px;line-height:1.7;letter-spacing:.17em;color:var(--muted)}.hero-meta b{display:block;color:var(--gold);font-size:7px;margin-bottom:9px}.hero-meta.left{left:7vw}.hero-meta.right{right:7vw;text-align:right}.stats{height:64px;background:#080808;display:grid;grid-template-columns:repeat(4,1fr);padding:0 13.5%}.stats div{display:flex;flex-direction:column;justify-content:center;align-items:center;border-right:1px solid rgba(255,255,255,.04)}.stats div:first-child{border-left:1px solid rgba(255,255,255,.04)}.stats strong{font:400 20px/1 Fraunces,serif}.stats span,.venues{font-size:6px;letter-spacing:.18em;color:var(--muted);margin-top:5px}.venues{height:53px;padding:0 7vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.025);gap:35px;white-space:nowrap;overflow:auto}.venues span{color:var(--gold)}.venues b{font-weight:500}.section-intro{position:relative;margin-bottom:30px}.eyebrow{font-size:7px;letter-spacing:.19em;color:var(--muted);margin:0 0 23px}.eyebrow:after{content:"";display:inline-block;vertical-align:middle;width:30px;border-top:1px solid var(--rule);margin-left:11px}h2{font:400 39px/.98 Fraunces,Georgia,serif;letter-spacing:-.045em;margin:0}.side-note{position:absolute;right:0;bottom:1px;color:var(--gold);font-size:7px;letter-spacing:.18em}.side-note:after{content:"";display:inline-block;width:30px;border-top:1px solid var(--rule);vertical-align:middle;margin-left:12px}.services{padding-top:64px;padding-bottom:55px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.service-card{min-height:208px;padding:21px 16px 15px;border:1px solid rgba(243,239,231,.075);background:var(--card);transition:.25s}.service-card:hover{transform:translateY(-3px);border-color:rgba(196,161,94,.35)}.service-card small,.set-info small{color:var(--gold);font-size:6px;letter-spacing:.17em}.service-card h3{font:400 17px Fraunces,serif;margin:20px 0 11px;letter-spacing:-.035em}.service-card p{font-size:8px;line-height:1.65;color:var(--muted);min-height:44px;margin:0 0 10px}.service-card dl,.booking-info dl{margin:0}.service-card dl div{display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding:7px 0 3px;font-size:6px;letter-spacing:.12em}.service-card dt,.booking-info dt{color:var(--muted)}.service-card dd{margin:0;font-size:7px;letter-spacing:0}.recorded{background:var(--ink-2);padding-top:64px;padding-bottom:69px}.set-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.set-card{height:182px;position:relative;overflow:hidden}.set-card img{height:100%;width:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.56);transition:.4s}.set-card:hover img{transform:scale(1.04)}.live-one img{object-position:30% 54%}.live-two img{object-position:55% 54%}.live-three img{object-position:76% 54%}.set-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.93),rgba(0,0,0,.05))}.play{position:absolute;right:13px;top:13px;width:27px;height:27px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:8px;padding-left:2px}.set-info{position:absolute;left:14px;bottom:12px;right:14px}.set-info h3{font:400 17px Fraunces,serif;margin:8px 0}.set-info span,.set-info time{font-size:6px;letter-spacing:.13em;color:var(--muted)}.set-info time{float:right}.booking{display:grid;grid-template-columns:31% 1fr;gap:88px;padding-top:65px;padding-bottom:65px}.booking h2{font-size:40px}.intro-copy{max-width:275px;color:var(--muted);font-size:9px;line-height:1.9;margin:18px 0}.booking-info dl div{border-top:1px solid var(--rule);padding:12px 0}.booking-info dt{font-size:6px;letter-spacing:.17em;margin-bottom:8px}.booking-info dd{margin:0;font-size:9px}.booking form{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:17px}.booking label{color:rgba(243,239,231,.5);font-size:6px;letter-spacing:.17em}.booking input,.booking select,.booking textarea{width:100%;display:block;background:transparent;color:var(--ivory);border:0;border-bottom:1px solid var(--rule);outline:none;border-radius:0;padding:11px 0 8px;font-size:9px;letter-spacing:0}.booking select{appearance:auto}.booking input:focus,.booking select:focus,.booking textarea:focus{border-color:var(--gold)}.booking input::placeholder,.booking textarea::placeholder{color:var(--muted);opacity:1}.booking .textarea{grid-column:1/-1}.booking textarea{height:51px;resize:vertical}.form-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-top:1px}.form-bottom small{font-size:6px;letter-spacing:.15em;color:var(--muted)}.form-bottom button,.form-success button{background:#d0a754;border:0;color:#16120b;padding:13px 22px;font-size:7px;letter-spacing:.16em;transition:.2s}.form-success{padding:40px;border:1px solid var(--rule);align-self:start}.form-success h3{font:400 35px Fraunces,serif;margin:0 0 12px}.form-success p:not(.eyebrow){font-size:10px;color:var(--muted);line-height:1.7;max-width:350px}.form-success button{margin-top:20px;background:transparent;border:1px solid var(--gold);color:var(--ivory)}footer{height:62px;border-top:1px solid var(--rule);padding:0 7vw;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:6px;letter-spacing:.13em}footer div{display:flex;gap:18px}@media(max-width:1100px){.service-grid{grid-template-columns:repeat(2,1fr)}.set-grid{grid-template-columns:repeat(2,1fr)}.booking{grid-template-columns:1fr;gap:45px}}@media(max-width:767px){.section{padding-left:20px;padding-right:20px}header{padding:0 20px;height:64px}nav,.header-cta{display:none}.menu-toggle{display:flex;background:transparent;border:0;flex-direction:column;gap:6px;padding:8px}.menu-toggle span{display:block;width:23px;border-top:1px solid var(--ivory)}.mobile-menu{position:fixed;z-index:50;inset:0;background:#090909;padding:25px 20px;flex-direction:column;justify-content:center;gap:20px}.mobile-menu.open{display:flex}.mobile-menu a:not(.brand){font:400 43px Fraunces,serif}.menu-close{position:absolute;right:20px;top:17px;color:var(--ivory);background:transparent;border:0;font-size:31px}.mobile-menu .brand{position:absolute;left:20px;top:25px}.hero{height:650px;min-height:650px}.orbit-one{width:410px;height:410px}.orbit-two{width:620px;height:620px}.hero-content{padding-top:102px}.hero h1{font-size:50px}.hero-copy{font-size:9px;width:310px;margin-top:21px}.hero-image{width:90vw;height:307px}.hero-meta{display:none}.stats{padding:0;grid-template-columns:repeat(2,1fr);height:112px}.stats div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.04)}.venues{padding:0 20px;justify-content:flex-start}.section-intro{margin-bottom:27px}.services{padding-top:52px}.service-grid,.set-grid{grid-template-columns:1fr}.service-card{min-height:195px}.side-note{display:none}h2{font-size:35px}.recorded{padding-top:52px}.set-card{height:195px}.booking{padding-top:55px;gap:38px}.booking form{grid-template-columns:1fr;gap:18px}.booking .textarea,.form-bottom{grid-column:auto}.form-bottom{align-items:flex-start;gap:20px;flex-direction:column}.form-bottom button{width:100%;min-height:44px}.booking h2{font-size:36px}footer{height:auto;min-height:85px;padding:20px;align-items:flex-start;gap:12px;flex-direction:column}footer div{gap:13px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* Reference-geometry desktop pass: matches the supplied 1600 × 3733 artwork. */
@media(min-width:1101px){
  header{height:105px;padding:0 4.1%;font-size:9px}header nav{gap:35px}.brand{font-size:13px;gap:10px}.equalizer{height:16px}.equalizer i:nth-child(1),.equalizer i:nth-child(5){height:6px}.equalizer i:nth-child(2),.equalizer i:nth-child(4){height:11px}.equalizer i:nth-child(3){height:16px}.header-cta{width:206px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px}
  .hero{height:1060px;min-height:1060px;background:radial-gradient(circle at 50% -5%,#1b1b1f 0,#111113 23%,#0b0b0c 58%);}
  .orbit{top:54%;border-color:rgba(196,161,94,.075)}.orbit-one{width:1020px;height:1020px}.orbit-two{width:1350px;height:1350px}
  .hero-content{padding-top:158px}.booking-badge{width:283px;height:39px;display:flex;align-items:center;justify-content:center;margin:0 0 43px;padding:0;font-size:8px}
  .hero h1{font-size:112px;line-height:.84;letter-spacing:-.06em}.hero-copy{width:510px;margin:48px 0 40px;font-size:12px;line-height:1.7}.gold-button{width:229px;height:58px;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px}
  .hero-image{width:720px;height:550px}.hero-image:after{background:linear-gradient(to bottom,rgba(11,11,12,.08) 0,rgba(11,11,12,.05) 64%,#0b0b0c 100%)}.hero-image img{object-position:center 52%;filter:grayscale(1) contrast(1.25) brightness(.72)}
  .hero-meta{bottom:122px;font-size:9px;line-height:1.75}.hero-meta b{font-size:9px;margin-bottom:13px}.hero-meta.left{left:7vw}.hero-meta.right{right:7vw}
  .stats{height:128px;padding:0 18.5%}.stats strong{font-size:30px}.stats span{font-size:8px;margin-top:12px}.venues{height:86px;margin-top:0;padding:0 7vw;font-size:8px;gap:42px}
  .section{padding-left:7vw;padding-right:7vw}.section-intro{margin-bottom:80px}.eyebrow{font-size:8px;margin-bottom:32px}.eyebrow:after{width:54px;margin-left:17px}h2{font-size:49px}.side-note{font-size:8px;bottom:2px}.side-note:after{width:54px;margin-left:17px}
  .services{height:772px;padding-top:112px;padding-bottom:109px}.service-grid{gap:16px}.service-card{height:380px;min-height:380px;padding:38px 28px 25px}.service-card small,.set-info small{font-size:8px}.service-card h3{font-size:23px;margin:37px 0 18px}.service-card p{font-size:11px;line-height:1.75;min-height:80px;margin-bottom:19px}.service-card dl div{padding:15px 0 12px;font-size:8px}.service-card dd{font-size:9px}
  .recorded{height:723px;padding-top:112px;padding-bottom:110px}.recorded .section-intro{margin-bottom:75px}.set-grid{gap:22px}.set-card{height:335px}.play{right:23px;top:23px;width:45px;height:45px;font-size:11px}.set-info{left:24px;right:24px;bottom:22px}.set-info h3{font-size:23px;margin:13px 0}.set-info span,.set-info time{font-size:8px}.live-one img{object-position:22% 52%}.live-two img{object-position:54% 52%}.live-three img{object-position:78% 52%}
  .booking{height:845px;padding-top:112px;padding-bottom:112px;grid-template-columns:38% 1fr;gap:90px}.booking h2{font-size:50px}.intro-copy{max-width:390px;font-size:11px;line-height:1.85;margin:26px 0 32px}.booking-info dl div{padding:18px 0}.booking-info dt{font-size:8px;margin-bottom:12px}.booking-info dd{font-size:11px}.booking form{column-gap:32px;row-gap:29px}.booking label{font-size:8px}.booking input,.booking select,.booking textarea{padding:17px 0 14px;font-size:11px}.booking textarea{height:92px}.form-bottom{padding-top:4px}.form-bottom small{font-size:8px}.form-bottom button{width:174px;height:58px;padding:0;font-size:8px}.form-success{padding:55px}.form-success h3{font-size:50px}.form-success p:not(.eyebrow){font-size:12px}
  footer{height:119px;font-size:8px}footer div{gap:28px}
}

@media(max-width:767px){
  header .brand{min-height:44px;display:flex}.menu-toggle,.menu-close{width:44px;height:44px;align-items:center;justify-content:center}.menu-close{display:flex}
  .gold-button{min-height:44px;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:center}.hero-image{height:350px}.hero-image img{object-position:center 82%}
  .play{width:44px;height:44px;right:14px;top:14px}.set-card{height:210px}
  .booking input,.booking select{min-height:44px}.booking textarea{min-height:80px}
  footer a{min-height:44px;display:inline-flex;align-items:center}footer div{width:100%;justify-content:space-between}
  section[id]{scroll-margin-top:64px}
}

@media(min-width:1101px){
  header nav{position:absolute;left:50%;transform:translateX(-50%);gap:42px}.brand{transform:scaleX(1.45);transform-origin:left center}
  .hero{background:radial-gradient(circle at 50% -5%,rgba(27,27,31,.92) 0,rgba(17,17,19,.5) 29%,transparent 62%),linear-gradient(#111113 0,#0b0b0c 32%)}
  .booking-badge{margin-bottom:31px}.hero-copy{margin-top:28px;transform:scaleX(1.055)}
  .live-one img{transform:scale(1.65)}.live-one:hover img{transform:scale(1.69)}
  .booking .eyebrow{margin-bottom:32px}.booking .intro-copy{margin-bottom:37px}.booking form{row-gap:30px}.booking textarea{height:85px}
}

@media(min-width:1101px){
  .booking-badge{margin-bottom:39px}
  .hero h1{line-height:.965;transform:scaleX(1.18);transform-origin:center top}
  .hero h1 span{transform:scaleX(1.055)}
  .hero-copy{width:510px;margin:24px 0 39px;font-size:14px;line-height:2}
  .section-intro{margin-bottom:60px}.eyebrow{margin-bottom:48px}h2{font-size:53px}
  .service-card h3{margin-top:31px}.service-card p{font-size:12px;line-height:1.7;margin-bottom:12px}
  .recorded .section-intro{margin-bottom:55px}.recorded h2{font-size:54px}
  .live-one img{transform:scale(1.35);transform-origin:left center}.live-two img{transform:scale(1.65);transform-origin:62% center}.live-three img{transform:scale(1.35);transform-origin:right center}
  .live-one:hover img{transform:scale(1.39)}.live-two:hover img{transform:scale(1.69)}.live-three:hover img{transform:scale(1.39)}
  .booking{grid-template-columns:430px 1fr;gap:162px;padding-top:112px}.booking h2{font-size:52px}.booking form{row-gap:35px;transform:translateY(-9px)}.booking label{font-size:9px}.booking input,.booking select,.booking textarea{font-size:14px}.booking-info dd{font-size:14px}.intro-copy{font-size:13px}
}

@media(min-width:1101px){
  .booking-badge{margin-bottom:31px}.hero-copy{margin:28px 0 39px}
  .live-one img{transform:scale(1.65)}.live-one:hover img{transform:scale(1.69)}
  .booking .eyebrow{margin-bottom:32px}.booking .intro-copy{margin-bottom:37px}.booking form{row-gap:30px}.booking textarea{height:85px}
}

html{scrollbar-width:none}::-webkit-scrollbar{width:0;height:0}

/* Professional interaction and enquiry states */
body{transition:opacity .55s ease}html.js body:not(.is-ready){opacity:0}.menu-open{overflow:hidden}
.booking-info a,.form-success a,.form-status a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(196,161,94,.45);transition:border-color .25s,color .25s}.booking-info a:hover,.form-success a:hover,.form-status a:hover{color:#c4a15e;border-color:#c4a15e}
header nav a{position:relative}header nav a:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:1px;background:#c4a15e;transform:scaleX(0);transform-origin:right;transition:transform .3s ease}header nav a:hover:after,header nav a.active:after{transform:scaleX(1);transform-origin:left}
.gold-button,.header-cta,.form-bottom button{transition:transform .22s ease,background-color .25s,color .25s,border-color .25s,box-shadow .25s}.gold-button:hover,.form-bottom button:hover{background:#d5b66f;box-shadow:0 10px 34px rgba(196,161,94,.18)}.header-cta:hover{background:#c4a15e;color:#0b0b0c}
.reveal-ready{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.2,.75,.25,1) var(--reveal-delay,0ms),transform .9s cubic-bezier(.2,.75,.25,1) var(--reveal-delay,0ms)}.reveal-ready.is-revealed{opacity:1;transform:none}
.service-card{overflow:hidden;transition:border-color .35s,background-color .35s,transform .35s}.service-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(196,161,94,.08),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none}.service-card:hover{border-color:rgba(196,161,94,.33);background:#151517;transform:translateY(-5px)}.service-card:hover:before{opacity:1}
.set-card .play{transition:background .3s,border-color .3s,transform .3s}.set-card:hover .play,.set-card.is-playing .play{background:#c4a15e;border-color:#c4a15e;color:#0b0b0c;transform:scale(1.06)}.set-card.is-playing img{animation:set-pulse 3.2s ease-in-out infinite alternate}.set-card.is-playing .set-overlay{background:linear-gradient(to top,rgba(11,11,12,.9),rgba(11,11,12,.12))}
.booking label{position:relative}.field-error{position:absolute;left:0;bottom:-13px;color:#d99b8f;font:500 7px/1.2 Inter,sans-serif;letter-spacing:.08em;text-transform:none}.booking input.is-invalid,.booking select.is-invalid,.booking textarea.is-invalid{border-color:#b8665b}.booking input.is-valid,.booking select.is-valid,.booking textarea.is-valid{border-color:rgba(196,161,94,.32)}.website-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-status{display:none;grid-column:1/-1;color:#d99b8f;font-size:11px;line-height:1.5}.form-status:not(:empty){display:block}.form-bottom button:disabled{cursor:wait;opacity:.72}.form-bottom button.is-sending span:after{content:"";display:inline-block;width:4px;height:4px;margin-left:8px;border-radius:50%;background:currentColor;animation:sending-dot .75s ease-in-out infinite alternate}
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:9px;height:52px;padding:0 18px 0 14px;border:1px solid rgba(196,161,94,.45);border-radius:999px;background:rgba(11,11,12,.88);color:#f3efe7;text-decoration:none;box-shadow:0 12px 40px rgba(0,0,0,.35);backdrop-filter:blur(14px);font:600 8px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:transform .3s,background .3s,border-color .3s}.whatsapp-float svg{width:22px;height:22px;fill:#c4a15e}.whatsapp-float:hover{transform:translateY(-4px);background:#c4a15e;color:#0b0b0c;border-color:#c4a15e}.whatsapp-float:hover svg{fill:#0b0b0c}
@media(min-width:768px){footer div{padding-right:145px}}
.hero-content{animation:hero-rise .9s cubic-bezier(.2,.75,.25,1) both}.hero-image{animation:hero-image-in 1.2s .15s cubic-bezier(.2,.75,.25,1) both}.orbit-one{animation:orbit-drift 15s ease-in-out infinite alternate}.orbit-two{animation:orbit-drift 20s -4s ease-in-out infinite alternate-reverse}.equalizer i{animation:eq 1.3s ease-in-out infinite alternate}.equalizer i:nth-child(2){animation-delay:-.4s}.equalizer i:nth-child(3){animation-delay:-.8s}.equalizer i:nth-child(4){animation-delay:-.25s}.equalizer i:nth-child(5){animation-delay:-.65s}
@keyframes hero-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes hero-image-in{from{opacity:0;transform:translateX(-50%) scale(.96)}to{opacity:1;transform:translateX(-50%) scale(1)}}@keyframes orbit-drift{from{transform:translate(-50%,-50%) scale(.99)}to{transform:translate(-50%,-50%) scale(1.015)}}@keyframes eq{to{transform:scaleY(.55)}}@keyframes set-pulse{to{filter:grayscale(1) contrast(1.18) brightness(.72);transform:scale(1.7)}}@keyframes sending-dot{to{opacity:.2;transform:translateY(-3px)}}
@media(max-width:767px){.whatsapp-float{right:14px;bottom:14px;width:52px;padding:0;justify-content:center}.whatsapp-float span{display:none}.field-error{bottom:-11px}.service-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal-ready{opacity:1;transform:none}}

/* Mobile editorial refinement */
header:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:#c4a15e;transform:scaleX(var(--page-progress,0));transform-origin:left;opacity:.58;pointer-events:none}
@media(max-width:767px){
  .hero-copy{width:min(350px,calc(100vw - 42px));font-size:11px;line-height:1.55}
  .service-card{height:auto;min-height:246px;padding:26px 18px 20px}.service-card h3{font-size:19px;margin:25px 0 15px}.service-card p{font-size:10.5px;line-height:1.55;min-height:63px;margin-bottom:15px}.service-card dl div{padding:11px 0 9px}.service-card dt{font-size:7.5px}.service-card dd{font-size:9.5px}
  .intro-copy{font-size:11px;line-height:1.7}.booking-info dd{font-size:11px}.booking input,.booking select,.booking textarea{font-size:13px}.booking label{font-size:7.5px}.form-bottom small{font-size:7px}
  footer{font-size:7px}.mobile-menu a.mobile-whatsapp{display:inline-flex;width:max-content;margin-top:18px;padding:14px 18px;border:1px solid rgba(196,161,94,.42);border-radius:999px;color:#c4a15e;font-family:Inter,sans-serif;font-size:10px;font-weight:600;line-height:1.2;letter-spacing:.16em;text-transform:uppercase}
  .whatsapp-float{top:10px;right:68px;bottom:auto;width:44px;height:44px;opacity:1;pointer-events:auto;transform:none;background:rgba(11,11,12,.72);transition:opacity .25s,background .3s,border-color .3s}.whatsapp-float.is-visible{opacity:1;pointer-events:auto;transform:none}.menu-open .whatsapp-float{opacity:0;pointer-events:none}
}
@media(min-width:400px) and (max-width:767px){.hero h1{font-size:56px}.hero-copy{font-size:11.5px}}

/* ---------------------------------------------------------------------------
   Full-bleed hero banner
   desktop : images/dj-kim-hero-desktop.png  (1672x941, landscape)
   mobile  : images/dj-kim-hero-mobile.png   (941x1672, portrait, <=767px)

   The <picture> now fills the hero edge to edge instead of sitting in a
   centred panel. Colour is kept (the artwork is lit cyan/magenta) with only a
   light grade; legibility comes from the scrim in .hero-image:after rather
   than from desaturating the photograph.
   Appended last so it overrides the panel geometry at every breakpoint.
   --------------------------------------------------------------------------- */
.hero-image{
  position:absolute;
  inset:0;
  left:0;
  width:100%;
  height:100%;
  transform:none;
  z-index:1;
  overflow:hidden;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:saturate(.92) contrast(1.06) brightness(.6);
}

/* Scrim: darkens the top-centre behind the headline, holds the mid-frame back
   just enough for the CTA, then settles into the page background. */
.hero-image:after{
  background:
    radial-gradient(115% 72% at 50% 20%,
      rgba(11,11,12,.88) 0%,
      rgba(11,11,12,.58) 40%,
      rgba(11,11,12,.14) 72%,
      rgba(11,11,12,0) 100%),
    linear-gradient(to bottom,
      rgba(11,11,12,.72) 0%,
      rgba(11,11,12,.30) 28%,
      rgba(11,11,12,.34) 56%,
      rgba(11,11,12,.86) 88%,
      #0b0b0c 100%);
}

/* Entrance animation without the old centring offset (was translateX(-50%)). */
@keyframes hero-image-in{
  from{opacity:0;transform:scale(1.045)}
  to{opacity:1;transform:scale(1)}
}

/* Portrait art is taller than the mobile hero, so bias the crop upward to keep
   the decks and raised arm in frame rather than centring on the crowd. */
@media(max-width:767px){
  .hero-image img{object-position:center 38%;filter:saturate(.92) contrast(1.06) brightness(.54)}
}

/* ===========================================================================
   Motion pass — hero reveal + scroll-triggered reveals

   NOTE ON `translate` vs `transform`
   Several hero elements already carry a design-critical `transform`
   (.hero h1 -> scaleX(1.18), .hero h1 span -> scaleX(1.055),
    .hero-copy -> scaleX(1.055), .gold-button:hover -> translateY(-2px)).
   Animating `transform` here would overwrite those. These animations use the
   independent `translate` property instead, which composes with `transform`
   rather than replacing it, so the letterform stretching and hover lift all
   survive.
   =========================================================================== */

/* --- Hero entrance — ported from the supplied reference -------------------
   Reference timeline on cubic-bezier(.16,1,.3,1):
     headline line 1  masked slide-up translateY(105%) -> 0   1.3s  delay 0
     headline line 2  same                                    1.3s  delay .12s
     image frame      clip-path inset(100% 0 0 0) -> inset(0) 1.8s  delay .2s
     image            scale(1.16) -> scale(1)                 3s    delay .2s
     eyebrow / meta   opacity 0 -> 1                          1.4s  delays .6s+

   Only the motion is ported. The banner keeps its colour grade rather than the
   reference full grayscale, which is a separate decision from the animation. */

.hero{--ease:cubic-bezier(.16,1,.3,1)}

/* Each headline line rides up out of its own mask.
   The reference headline ("DJ KIM / LDN") has no descenders so it can mask
   flush; "Rhythm." has a y, and line-height here is .84-.965, so the mask is
   padded below the baseline and pulled back with an equal negative margin —
   the descender survives at rest and layout is unmoved. The start offset is
   130% rather than the reference 105% so the glyph tops stay hidden inside
   that extra padding before they travel. */
.hero-content{animation:none}
.hero h1{animation:none}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
.hero h1 b.ln{font-weight:inherit}
.hero h1 .ln i{
  display:block;
  font-style:normal;
  transform:translateY(130%);
  animation:hero-up 1.3s var(--ease) forwards;
}
.hero h1 .ln:nth-child(2) i{animation-delay:.12s}
@keyframes hero-up{to{transform:translateY(0)}}

/* Curtain wipe up, then a long zoom-out settle behind it. */
.hero-image{
  clip-path:inset(100% 0 0 0);
  animation:hero-frame 1.8s var(--ease) .2s forwards;
}
@keyframes hero-frame{to{clip-path:inset(0 0 0 0)}}

.hero-image img{
  transform:scale(1.16);
  animation:hero-zoom 3s var(--ease) .2s forwards;
}
@keyframes hero-zoom{to{transform:scale(1)}}

/* Everything else is a straight opacity fade, as in the reference. */
.hero .booking-badge,
.hero .hero-copy,
.hero-content .gold-button,
.hero .hero-meta{
  opacity:0;
  animation:hero-fade 1.4s var(--ease) var(--d,.6s) forwards;
}
.hero .booking-badge{--d:.6s}
.hero .hero-copy{--d:.8s}
.hero-content .gold-button{--d:1s}
.hero .hero-meta.left{--d:1.2s}
.hero .hero-meta.right{--d:1.3s}
@keyframes hero-fade{to{opacity:1}}

/* Parallax is written to `translate` inline by site.js; it composes with the
   `transform` scale above instead of overwriting it. */
.hero-image img,.hero-content{will-change:translate}

/* --- Scroll-triggered reveals --------------------------------------------- */

/* Zoom variant, used only where the element has no competing transform. */
.reveal-zoom.reveal-ready{translate:0 24px;scale:.975;transform:none}
.reveal-zoom.reveal-ready.is-revealed{translate:none;scale:1}
.reveal-zoom.reveal-ready{
  transition:opacity .8s cubic-bezier(.2,.75,.25,1) var(--reveal-delay,0ms),
             translate .95s cubic-bezier(.2,.75,.25,1) var(--reveal-delay,0ms),
             scale .95s cubic-bezier(.2,.75,.25,1) var(--reveal-delay,0ms);
}

/* Counters are animated by site.js; fix the digit width so they don't jitter. */
.stats strong{font-variant-numeric:tabular-nums}

/* --- Crowd reactions -------------------------------------------------------
   Two portrait (9:16) clips shot on a phone. Presented at their native
   orientation rather than cropped to landscape, framed to echo .set-card. */

.crowd{padding-top:64px;padding-bottom:69px}
.crowd-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  max-width:660px;
  margin:0 auto;
}
.crowd-card{margin:0}

.crowd-media{
  position:relative;
  aspect-ratio:9/16;
  overflow:hidden;
  background:#0f0f11;
  border:1px solid rgba(243,239,231,.075);
}
.crowd-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.95) contrast(1.04) brightness(.86);
  transition:filter .35s ease,transform .5s ease;
}
.crowd-card:hover .crowd-video{filter:saturate(1) contrast(1.05) brightness(.95);transform:scale(1.02)}

/* Bottom scrim so the caption and control stay legible over the footage. */
.crowd-media:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,12,.78) 0,rgba(11,11,12,.06) 42%,transparent 70%);
}

.crowd-sound{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 13px 0 11px;
  border:1px solid rgba(196,161,94,.5);
  border-radius:999px;
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(10px);
  color:var(--ivory);
  font:600 7px/1 Inter,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;
}
.crowd-sound:hover{background:var(--gold);border-color:var(--gold);color:#16120b}

/* Muted shows volume-x, sound-on shows volume-2 (Lucide), driven by the
   button’s aria-pressed state. */
.crowd-sound .icon{width:13px;height:13px}
.crowd-sound .icon-state-pause{display:none}
.crowd-sound[aria-pressed="true"] .icon-state-play{display:none}
.crowd-sound[aria-pressed="true"] .icon-state-pause{display:block}

.crowd-card figcaption{padding:15px 2px 0}
.crowd-card figcaption small{
  display:block;
  color:var(--gold);
  font-size:6px;
  letter-spacing:.17em;
}
.crowd-card figcaption h3{
  font:400 17px Fraunces,serif;
  letter-spacing:-.035em;
  margin:9px 0 0;
}

@media(min-width:1101px){
  .crowd{height:auto;padding-top:112px;padding-bottom:110px}
  .crowd .section-intro{margin-bottom:75px}
  .crowd-grid{gap:30px;max-width:860px}
  .crowd-sound{min-height:40px;padding:0 17px 0 14px;font-size:8px;left:16px;bottom:16px}
  .crowd-card figcaption{padding-top:20px}
  .crowd-card figcaption small{font-size:8px}
  .crowd-card figcaption h3{font-size:23px;margin-top:12px}
}

@media(max-width:767px){
  .crowd{padding-top:52px}
  .crowd-grid{grid-template-columns:1fr;gap:30px;max-width:340px}
  .crowd-sound{min-height:44px}
  .crowd-card:hover .crowd-video{transform:none}
}

/* --- Icons ----------------------------------------------------------------
   Lucide (UI) + Simple Icons (WhatsApp mark), inlined as a <symbol> sprite at
   the top of <body> and referenced with <use>. Replaces the glyphs that were
   standing in for icons: ▶ × ● ↗.

   fill: Lucide symbols carry their own fill="none", and an element’s own
   presentation attribute beats an inherited value, so the currentColor below
   only ever reaches the fill-based brand mark. */
.icon{
  width:1em;
  height:1em;
  display:block;
  flex:none;
  fill:currentColor;
  pointer-events:none;
}

/* Play / pause on the set cards. The button already toggled aria-pressed and
   its aria-label; the icon now follows it instead of staying a static glyph. */
.play{
  display:flex;
  align-items:center;
  justify-content:center;
  /* Buttons carry a UA default of padding:1px 6px. Zeroing only padding-left
     left 6px on the right, so flex centring put the icon ~3px off-centre.
     Reset the whole box; the glyph is then centred by the flex container. */
  padding:0;
  line-height:0;
}

/* Same UA padding applies to the close button. */
.menu-close{padding:0;line-height:0}
.play .icon{width:11px;height:11px}
/* Lucide draws its play glyph 1 unit (of 24) right of the viewBox centre — an
   optical nudge meant for a filled triangle. This one is a stroked outline, so
   its mass reads evenly and that nudge just looks off-centre inside the circle.
   -1/24 of the icon width cancels it, and being a percentage it holds at every
   icon size. */
.play .icon-state-play{transform:translateX(-4.1667%)}
.play .icon-state-pause{display:none}
.play[aria-pressed="true"] .icon-state-play{display:none}
.play[aria-pressed="true"] .icon-state-pause{display:block}

.menu-close .icon{width:22px;height:22px}

/* Hero availability dot. Lucide’s dot is a hairline circle, so it is drawn
   with a heavier stroke to read as a filled indicator at this size. */
.booking-badge{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.booking-badge .icon-dot{width:12px;height:12px;stroke-width:5}

.mobile-whatsapp{align-items:center;gap:9px}
.mobile-whatsapp .icon{width:14px;height:14px}

@media(min-width:1101px){
  .play .icon{width:15px;height:15px}
  .booking-badge .icon-dot{width:13px;height:13px}
}
@media(max-width:767px){
  .play .icon{width:15px;height:15px}
}

/* --- Reduced motion -------------------------------------------------------
   The global reduced-motion block earlier in this file is less specific than
   the rules above, so restate the opt-outs here: no wipe, no zoom, no slide,
   everything at its resting state. */
@media(prefers-reduced-motion:reduce){
  .reveal-zoom.reveal-ready{opacity:1;translate:none;scale:1}
  .hero .booking-badge,.hero .hero-copy,.hero-content .gold-button,.hero .hero-meta,
  .hero h1 .ln i,.hero-image,.hero-image img{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    translate:none!important;
  }
  /* Unmask the headline and the banner rather than leaving them clipped. */
  .hero-image{clip-path:none!important}
  .hero h1 .ln{overflow:visible}
  /* Keep the banner grade — only motion is disabled. */
  .hero-image img{filter:saturate(.92) contrast(1.06) brightness(.6)}
  .hero-image img,.hero-content{will-change:auto}
}
