/* F18 Productions · shared site styles */
:root{--red:#D20C18;--pink:#FFFFFF;--bg:#FFFFFF;--bg2:#F5F5F3;--bg3:#F5F5F3;--ink:#111111;--line:rgba(17,17,17,.14)}
/* Header stays black with light text */
.sh{--ink:#E2E2DD;--bg:#2D2D2C;--bg2:#232322;--bg3:#1F1F1E;--line:rgba(226,226,221,.14);color:#E2E2DD}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Epilogue,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink)}a:hover{color:var(--red)}
.sh a:hover{color:var(--pink)}
img{max-width:100%;display:block}
.sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--red);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px}
.pg{width:100%;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;overflow-x:clip}
.pg [style*="max-width"]{min-width:0}
input,select,textarea,button{font-family:inherit}
input::placeholder,textarea::placeholder{color:rgba(226,226,221,.55)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[data-todo]{cursor:pointer}

/* ---------- Shared header ---------- */
.sh{position:sticky;top:0;z-index:50;background:#000;border-bottom:1px solid rgba(226,226,221,.12)}
.sh-in{max-width:1440px;margin:0 auto;height:96px;padding:0 80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sh-logo{display:flex;align-items:center;text-decoration:none}
.sh-logo img{height:44px;width:auto;display:block}
.sh-nav{display:flex;gap:40px;align-items:center;font-size:14px;font-weight:500;letter-spacing:1.2px}
.sh-nav>a,.sh-ddbtn{text-decoration:none;color:var(--ink)}
.sh-nav a.on,.sh-ddbtn.on{color:var(--pink);border-bottom:2px solid var(--red);padding-bottom:4px}
.sh-ddbtn.on{padding-bottom:2px}
.sh-dd{position:relative;display:flex;align-items:center}
.sh-ddbtn{display:flex;align-items:center;gap:8px;height:44px;padding:0;background:transparent;border:0;font:500 14px Epilogue,sans-serif;letter-spacing:1.2px;cursor:pointer}
.sh-ddbtn svg{transition:transform .2s}
.sh-ddmenu{display:none;position:absolute;top:62px;left:-24px;width:280px;padding:12px 0;background:var(--bg3);border:1px solid var(--line);border-top:3px solid var(--red);flex-direction:column}
.sh-ddmenu a{display:flex;align-items:center;height:48px;padding:0 24px;text-decoration:none}
.sh-ddmenu a.all{color:var(--pink);border-bottom:1px solid var(--line)}
.sh-dd.open .sh-ddmenu{display:flex}
.sh-dd.open .sh-ddbtn svg{transform:rotate(180deg)}
@media (hover:hover) and (min-width:961px){.sh-dd:hover .sh-ddmenu{display:flex}.sh-dd:hover::after{content:"";position:absolute;left:-24px;right:-24px;top:40px;height:24px}}
.sh-cta{display:flex;align-items:center;height:44px;padding:0 22px;background:var(--red);color:#fff;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:1px}
.sh-cta:hover{color:#fff;filter:brightness(1.1)}
.sh-cta-m,.sh-burger{display:none}
.sh-burger{background:none;border:1px solid rgba(226,226,221,.3);color:var(--ink);font:600 13px Epilogue,sans-serif;letter-spacing:1.5px;height:44px;padding:0 16px;cursor:pointer}

/* ---------- FAQ (details) ---------- */
details.faq summary{list-style:none;cursor:pointer}
details.faq summary::-webkit-details-marker{display:none}
.faq-sign::before{content:"+";font-family:'Archivo Black',sans-serif;font-size:24px;color:var(--red)}
details[open] .faq-sign::before{content:"−"}

/* ---------- Work filter ---------- */
.wcard[hidden]{display:none!important}

/* ---------- Tablet ---------- */
@media (max-width:1180px){
  .sh-in{padding:0 40px}
  .sh-nav{gap:26px;font-size:13px}
  .r-px{padding-left:40px!important;padding-right:40px!important}
  .r-mx{margin-left:40px!important;margin-right:40px!important}
  .r-g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r-g4.r-gcov{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* ---------- Mobile nav breakpoint ---------- */
@media (max-width:960px){
  .sh-in{height:72px;padding:0 20px;flex-wrap:wrap}
  .sh-in>.sh-cta{display:none}
  .sh-burger{display:block}
  .sh-nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 20px;font-size:15px}
  .sh.open .sh-in{height:auto;padding-top:14px}
  .sh.open .sh-nav{display:flex;max-height:calc(100vh - 80px);overflow:auto}
  .sh-nav>a,.sh-ddbtn{padding:16px 0;border-bottom:1px solid var(--line);height:auto;width:100%;justify-content:space-between}
  .sh-nav a.on,.sh-ddbtn.on{border-bottom:1px solid var(--line);padding-bottom:16px}
  .sh-dd{flex-direction:column;align-items:stretch}
  .sh-ddmenu{position:static;width:100%;border:0;border-left:3px solid var(--red);padding:4px 0;margin:4px 0 8px}
  .sh-cta-m{display:flex;justify-content:center;margin-top:20px;height:52px}

  .r-g3,.r-g2{grid-template-columns:minmax(0,1fr)!important}
  .r-g4{grid-template-columns:minmax(0,1fr)!important}
  .r-g4.r-gcov,.r-g3.r-gcov{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r-span{grid-column:auto!important}
  .r-g{gap:40px 20px!important}
  .r-row{flex-wrap:wrap!important}
  .r-row>*{min-width:0}
  .r-sb{align-items:flex-start!important;gap:24px 32px!important}
  .r-h{min-height:0!important}
  .r-fh{height:auto!important;min-height:280px}
  .r-w{width:auto!important;max-width:100%}
  .r-ph{min-height:260px}
  .r-media{min-height:340px;margin-right:12px}
  .r-off{right:-12px!important;bottom:-12px!important;top:12px!important;left:12px!important}
}

/* ---------- Phone ---------- */
@media (max-width:640px){
  .r-px{padding-left:20px!important;padding-right:20px!important}
  .r-mx{margin-left:20px!important;margin-right:20px!important}
  .r-py{padding-top:64px!important;padding-bottom:64px!important}
  .r-g4.r-gcov,.r-g3.r-gcov{gap:28px 14px!important}
  .r-fh{min-height:240px}
  .pg a[style*="height: 56px"],.pg a[style*="height: 52px"]{width:100%;justify-content:center;text-align:center}
  form.r-nl{flex-wrap:wrap!important;width:100%!important}
  form.r-nl input{flex:1 1 100%!important;width:100%}
  form.r-nl button{flex:1 1 100%!important;width:100%;margin-top:8px}
  .pg [style*="padding: 80px"]:not(.r-px){padding-left:24px!important;padding-right:24px!important}
  .pg [style*="padding: 32px"]{padding:24px!important}
  .pg p[style*="padding: 0px 48px 24px 0px"],.pg p[style*="padding:0 48px 24px 0"]{padding-right:0!important}
}

/* ---------- Header logo (mobile) ---------- */
@media (max-width:960px){.sh-logo img{height:34px}}

/* ---------- Effects ---------- */
/* Reveal on scroll */
.fx .rv{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.fx .rv.in{opacity:1;transform:none}
/* Glitch bars: slide in, red bars flicker like a level meter */
.fx .glitch>div{transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*35ms)}
.fx .glitch.in>div{transform:scaleX(1)}
.fx .glitch.in>div[style*="rgb(210, 12, 24)"],.fx .glitch.in>div[style*="#D20C18"]{animation:meter 2.4s steps(1) infinite;animation-delay:calc(1s + var(--i,0)*90ms)}
@keyframes meter{0%,100%{opacity:1}40%{opacity:.25}55%{opacity:1}70%{opacity:.5}}
/* Stacking sections (homepage, desktop) */
.stack>.stk{position:sticky}
/* soft top edge: each section fades in over the one before it */
.stack>.stk:not(:first-child)::before{content:"";position:absolute;left:0;right:0;top:-56px;height:56px;pointer-events:none;background:linear-gradient(to bottom,rgba(var(--stk-rgb,255,255,255),0) 0%,rgba(var(--stk-rgb,255,255,255),.35) 45%,rgba(var(--stk-rgb,255,255,255),.8) 80%,rgb(var(--stk-rgb,255,255,255)) 100%)}
.stack>.stk:not(:first-child){margin-top:80px}
/* the section being covered gently fades back */
.stack>.stk::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgb(var(--stk-rgb,255,255,255));opacity:var(--stk-fade,0);z-index:2;transition:opacity .12s linear}
/* Hover lift on cards and buttons */
.pg a[style*="border: 1px solid"],.pg a[style*="padding: 32px"]{transition:transform .25s ease,border-color .25s ease}
.pg a[style*="border: 1px solid"]:hover,.pg a[style*="padding: 32px"]:hover{transform:translateY(-6px);border-color:var(--red)!important}
.pg a[style*="height: 56px"],.pg a[style*="height: 52px"],.sh-cta{transition:filter .2s ease,transform .2s ease}
.pg a[style*="height: 56px"]:hover,.pg a[style*="height: 52px"]:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.fx .rv,.fx .glitch>div{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}}

/* Calendly embed */
.cal-embed{display:flex;flex-direction:column;gap:12px}
.cal-embed .calendly-inline-widget{background:#FFFFFF;border:1px solid rgba(17,17,17,.18)}
.cal-fallback{margin:0;font-size:14px;color:#4A4A4A}
.cal-fallback a{color:#D20C18;font-weight:600}
@media (max-width:640px){.cal-embed .calendly-inline-widget{height:1000px!important}}

/* Google Maps */
.map-box{position:relative;height:260px;background:#F5F5F3;border:1px solid rgba(17,17,17,.14);overflow:hidden}
.map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.9) contrast(.9)}
.map-label{position:absolute;left:12px;bottom:12px;padding:8px 12px;background:#D20C18;color:#fff!important;font-size:12px;font-weight:600;letter-spacing:1.2px;text-decoration:none}
.map-label:hover{filter:brightness(1.1)}
.map-pair{display:grid;grid-template-rows:1fr 1fr;gap:16px;min-height:416px}
.map-pair .map-box{height:auto;min-height:200px}

/* Cover art */
.cover{display:block;aspect-ratio:1;overflow:hidden;background:#EFEFEC}
.cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cover:hover img,.wcard:hover .cover img{transform:scale(1.04)}

/* Legal pages */
.lg-hero{padding:88px 80px 48px;display:flex;flex-direction:column;gap:24px;border-bottom:1px solid var(--line)}
.lg-eyebrow{font-size:13px;font-weight:600;letter-spacing:3px;color:#D20C18}
.lg-hero h1{margin:0;font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:clamp(48px,7.5vw,108px);line-height:.9;letter-spacing:-2px;color:var(--red)}
.lg-intro{margin:0;max-width:760px;font-size:19px;font-weight:300;line-height:1.65;color:#2B2B2B}
.lg-date{margin:0;font-size:14px;color:#6B6B6B}
.lg-wrap{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:80px;padding:72px 80px 112px}
.lg-toc{position:sticky;top:120px;align-self:start}
.lg-toc ol,.lg-toc ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.lg-toc a{text-decoration:none;color:#2B2B2B}.lg-toc a:hover{color:#D20C18}
.lg-body{max-width:780px}
.lg-sec{padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:110px}
.lg-sec:first-child{border-top:0;padding-top:0}
.lg-sec h2{margin:0 0 20px;display:flex;gap:18px;align-items:baseline;font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:28px;line-height:1.15;color:var(--ink)}
.lg-sec h2 span{font-size:16px;color:var(--red)}
.lg-sec p{margin:0 0 14px;font-size:17px;font-weight:300;line-height:1.75;color:#2B2B2B}
.lg-sec strong{font-weight:600;color:var(--ink)}
.lg-sec a{color:#D20C18}
@media (max-width:960px){.lg-wrap{grid-template-columns:1fr;gap:40px}.lg-toc{position:static}}
@media (max-width:640px){.lg-hero{padding:56px 20px 36px}.lg-wrap{padding:48px 20px 80px}.lg-sec h2{font-size:22px}}

.sh-ddmenu{background:#0d0d0d}

/* ---------- Header: Members + basket ---------- */
.sh-right{display:flex;align-items:center;gap:12px}
.sh-mem{display:flex;align-items:center;height:44px;padding:0 18px;border:1px solid rgba(226,226,221,.45);color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:1px}
.sh-mem:hover,.sh-mem.on{border-color:var(--pink);color:var(--pink)}
.sh-basket{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid rgba(226,226,221,.45);color:var(--ink);cursor:pointer}
.sh-basket:hover{border-color:var(--pink);color:var(--pink)}
.sh-count{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font:700 11px/20px Epilogue,sans-serif;text-align:center}
.sh-mem-m{display:none}
@media (max-width:1180px){.sh-nav{gap:20px}.sh-mem{padding:0 12px}}
@media (max-width:960px){
  .sh-in>.sh-right{order:2;margin-left:auto}
  .sh-burger{order:3}
  .sh-right .sh-mem,.sh-right .sh-cta{display:none}
  .sh-in>.sh-right .sh-cta{display:none}
  .sh-nav{order:4}
  .sh-mem-m{display:block!important}
}

/* ---------- Basket drawer ---------- */
.bk-lock,.bk-lock body{overflow:hidden}
.bk-shade{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.bk-panel{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:#FFFFFF;border-left:3px solid var(--red);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);z-index:91;display:flex;flex-direction:column}
.bk.open .bk-shade{opacity:1;pointer-events:auto}
.bk.open .bk-panel{transform:none}
.bk-top{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid var(--line)}
.bk-top h2{margin:0;font:400 24px 'Archivo Black','Arial Black',sans-serif;color:var(--ink)}
.bk-x{width:44px;height:44px;background:none;border:1px solid var(--line);color:var(--ink);font-size:24px;cursor:pointer}
.bk-items{flex:1;overflow:auto;padding:8px 28px}
.bk-row{display:grid;grid-template-columns:1fr auto;gap:10px 16px;padding:18px 0;border-bottom:1px solid var(--line)}
.bk-name{font:400 17px/1.3 'Archivo Black','Arial Black',sans-serif;color:var(--ink)}
.bk-name span{display:block;margin-top:4px;font:600 14px Epilogue,sans-serif;color:#D20C18}
.bk-qty{display:flex;align-items:center;gap:0;border:1px solid var(--line);height:40px;align-self:start}
.bk-qty button{width:40px;height:38px;background:none;border:0;color:var(--ink);font-size:18px;cursor:pointer}
.bk-qty b{min-width:28px;text-align:center;font-weight:600}
.bk-rm{grid-column:1;justify-self:start;background:none;border:0;padding:0;color:#6B6B6B;font:13px Epilogue,sans-serif;text-decoration:underline;cursor:pointer}
.bk-empty{padding:48px 0;text-align:center;color:#4A4A4A}
.bk-bottom{padding:20px 28px 28px;border-top:1px solid var(--line)}
.bk-total{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:#4A4A4A}
.bk-total b{font:400 28px 'Archivo Black','Arial Black',sans-serif;color:var(--ink)}
.bk-note{margin:12px 0 16px;font-size:13px;line-height:1.55;color:#6B6B6B}
.bk-go{display:flex;align-items:center;justify-content:center;width:100%;height:56px;background:var(--red);color:#fff;border:0;font:600 15px Epilogue,sans-serif;letter-spacing:1px;text-decoration:none;cursor:pointer}
.bk-go:hover{filter:brightness(1.1);color:#fff}
.bk-line{background:transparent;border:2px solid var(--ink);color:var(--ink);width:auto;padding:0 24px;display:inline-flex}
.bk-pay{margin:10px 0 0;text-align:center;font-size:12px;color:#6B6B6B}
.bk-more{display:block;margin-top:14px;text-align:center;font-size:13px;font-weight:600;color:#D20C18;text-decoration:none}
.bk-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111111;color:#FFFFFF;padding:12px 18px;font:600 14px Epilogue,sans-serif;opacity:0;pointer-events:none;transition:all .25s;z-index:95}
.bk-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Book & Members pages ---------- */
.sp-hero{padding:88px 80px 56px;display:flex;flex-direction:column;gap:24px;border-bottom:1px solid var(--line)}
.sp-eyebrow{font-size:13px;font-weight:600;letter-spacing:3px;color:#D20C18}
.sp-hero h1,.mb-copy h2{margin:0;font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:clamp(52px,8vw,112px);line-height:.9;letter-spacing:-2px;color:var(--red)}
.sp-hero>p{margin:0;max-width:640px;font-size:19px;font-weight:300;line-height:1.65;color:#2B2B2B}
.sp-small{margin:0;font-size:14px;color:#6B6B6B}.sp-small a{color:#D20C18}
.sp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:900px}
.sp-steps div{padding-top:16px;border-top:2px solid var(--red);display:flex;flex-direction:column;gap:6px}
.sp-steps b{font:400 28px 'Archivo Black','Arial Black',sans-serif;color:var(--red)}
.sp-steps span{font-size:15px;color:#2B2B2B}
.sp-group{padding:72px 80px 24px;scroll-margin-top:100px}
.sp-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.sp-head h2{margin:0;font:400 clamp(30px,3.6vw,48px)/1 'Archivo Black','Arial Black',sans-serif;color:var(--ink)}
.sp-head a{font-size:13px;font-weight:600;letter-spacing:1.5px;color:#D20C18;text-decoration:none}
.sp-note{margin:-8px 0 24px;font-size:15px;color:#4A4A4A}
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sp-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;background:#F5F5F3;border:1px solid var(--line)}
.sp-card.sp-hot{border:2px solid var(--red)}
.sp-tag{position:absolute;top:-13px;left:24px;padding:5px 10px;background:#000000;color:#FFFFFF;font-size:11px;font-weight:600;letter-spacing:1.4px}
.sp-card h3{margin:0;font:400 22px/1.15 'Archivo Black','Arial Black',sans-serif;color:var(--ink)}
.sp-card p{margin:0;flex:1;font-size:15px;line-height:1.55;color:#4A4A4A}
.sp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.sp-price{font:400 30px 'Archivo Black','Arial Black',sans-serif;color:var(--red)}
.sp-price small{font:500 13px Epilogue,sans-serif;color:#4A4A4A}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 22px;background:var(--red);color:#fff;border:0;font:600 14px Epilogue,sans-serif;letter-spacing:1px;text-decoration:none;cursor:pointer}
.sp-btn:hover{filter:brightness(1.1);color:#fff}
.sp-btn-line{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.sp-btn-line:hover{color:#D20C18;border-color:#D20C18}
#academy{padding-bottom:96px}
.mb-actions{display:flex;gap:16px;flex-wrap:wrap}
.mb-perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:72px 80px}
.mb-perks div{padding-top:20px;border-top:2px solid var(--red)}
.mb-perks b{font:400 28px 'Archivo Black','Arial Black',sans-serif;color:var(--red)}
.mb-perks h3{margin:10px 0 8px;font:400 22px 'Archivo Black','Arial Black',sans-serif;color:var(--ink)}
.mb-perks p{margin:0;font-size:15px;line-height:1.6;color:#4A4A4A}
.mb-join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:80px;padding:96px 80px 112px;background:#F5F5F3;scroll-margin-top:96px}
.mb-copy{display:flex;flex-direction:column;gap:20px}
.mb-copy h2{font-size:clamp(40px,5vw,72px)}
.mb-copy p{margin:0;font-size:17px;font-weight:300;line-height:1.65;color:#2B2B2B}
.mb-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mb-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;letter-spacing:1.2px;color:#D20C18}
.mb-form input,.mb-form select{height:52px;padding:0 16px;background:#FFFFFF;border:1px solid rgba(17,17,17,.4);color:var(--ink);font:15px Epilogue,sans-serif;letter-spacing:0}
.mb-full{grid-column:1/-1}
.mb-check{flex-direction:row!important;align-items:flex-start;gap:12px!important;font-weight:400!important;letter-spacing:0!important;color:#2B2B2B!important;font-size:15px!important;line-height:1.5}
.mb-check input{height:20px!important;width:20px;flex-shrink:0;margin-top:2px;accent-color:var(--red)}
.mb-form .sp-btn{justify-self:start}
@media (max-width:960px){.sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mb-perks{grid-template-columns:repeat(2,minmax(0,1fr))}.mb-join{grid-template-columns:1fr;gap:40px}}
@media (max-width:640px){.sp-hero{padding:56px 20px 40px}.sp-group{padding:56px 20px 16px}.sp-grid,.sp-steps,.mb-perks,.mb-form{grid-template-columns:1fr}.mb-perks{padding:56px 20px}.mb-join{padding:64px 20px 80px}.sp-btn{width:100%}}
.sh-nav>a.sh-cta-m{justify-content:center;padding:0;border-bottom:0;color:#fff}
.bk-note a{color:#D20C18}

/* Video lightbox */
.vb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px}
.vb.open{display:flex}
.vb-shade{position:absolute;inset:0;background:rgba(0,0,0,.88)}
.vb-frame{position:relative;width:min(1100px,100%);border-top:3px solid var(--red);background:#000}
.vb-frame video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.vb-x{position:absolute;top:-56px;right:0;width:44px;height:44px;background:none;border:1px solid rgba(17,17,17,.45);color:#fff;font-size:26px;cursor:pointer}
[data-video]{cursor:pointer}
[data-video] img{transition:transform .5s ease}
[data-video]:hover img{transform:scale(1.04)}
@media (max-width:960px){.pg a[data-video][aria-label]{width:100%!important;max-width:none!important;aspect-ratio:16/9;min-height:0;flex-shrink:0}}

/* Samples & Beats: compact beat rows on small screens */
@media (max-width: 960px) {
  #beats div[style*="56px minmax"] { display: grid !important; grid-template-columns: 56px auto auto minmax(0, 1fr) auto !important; grid-template-areas: "play title title title price" "play bpm key genre genre" "add add add add add" !important; gap: 6px 14px !important; align-items: center; }
  #beats div[style*="56px minmax"] > :nth-child(1) { grid-area: play; }
  #beats div[style*="56px minmax"] > :nth-child(2) { grid-area: title; font-size: 18px !important; }
  #beats div[style*="56px minmax"] > :nth-child(3) { grid-area: bpm; font-size: 13px !important; }
  #beats div[style*="56px minmax"] > :nth-child(4) { grid-area: key; font-size: 13px !important; }
  #beats div[style*="56px minmax"] > :nth-child(5) { grid-area: genre; font-size: 11px !important; }
  #beats div[style*="56px minmax"] > :nth-child(6) { grid-area: price; font-size: 22px !important; }
  #beats div[style*="56px minmax"] > :nth-child(7) { grid-area: add; margin-top: 10px; }
  #beats div[style*="56px minmax"]:first-child { display: none !important; }
}

/* Blog posts */
.post-wrap { padding-left: 80px !important; padding-right: 80px !important; }
.post-body { max-width: 760px; margin: 0 auto; color: #2B2B2B; font-size: 18px; font-weight: 300; line-height: 1.75; }
.post-body h2 { margin: 56px 0 16px; font-family: 'Archivo Black', 'Arial Black', sans-serif; font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; color: #111111; }
.post-body p { margin: 0 0 18px; }
.post-body strong { color: #111111; font-weight: 600; }
.post-body a { color: #D20C18; text-underline-offset: 3px; }
.post-body ul { margin: 0 0 20px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body li::marker { color: #D20C18; }
.post-body .post-check { list-style: none; padding: 0; }
.post-body .post-check li { position: relative; padding-left: 34px; }
.post-body .post-check li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border: 2px solid #D20C18; }
.post-table { overflow-x: auto; margin: 8px 0 24px; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 16px; }
.post-body th, .post-body td { text-align: left; padding: 14px 16px; border-bottom: 1px solid rgba(17,17,17,0.14); vertical-align: top; }
.post-body thead th { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #D20C18; border-bottom: 2px solid #D20C18; }
.post-body tbody th { font-weight: 500; color: #111111; }
.post-faq details { border-top: 1px solid rgba(17,17,17,0.18); padding: 18px 0; }
.post-faq details:last-child { border-bottom: 1px solid rgba(17,17,17,0.18); }
.post-faq summary { cursor: pointer; font-weight: 500; color: #111111; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.post-faq summary::after { content: "+"; color: #D20C18; font-weight: 600; }
.post-faq details[open] summary::after { content: "−"; }
.post-faq details p { margin: 12px 0 0; }
.post-cta { display: inline-flex; align-items: center; height: 56px; margin-top: 40px; padding: 0 28px; background: #D20C18; color: #FFFFFF !important; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.post-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(17,17,17,0.18); font-size: 14px; font-weight: 600; letter-spacing: 0.5px; }
.post-nav a { color: #111111; text-decoration: none; max-width: 48%; }
.post-nav a:last-child { text-align: right; }
@media (max-width: 960px) {
  .post-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .post-body { font-size: 17px; }
  .blog-row { gap: 16px !important; flex-wrap: wrap; }
  .blog-row > div:first-child { width: 100% !important; padding-top: 16px; }
  .blog-row > .r-fh, .blog-row > div:last-child { display: none !important; }
}

/* Blog archive: scroll box showing 3 posts at a time */
.blog-scroll { transition: max-height 0.3s ease; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #D20C18 rgba(17,17,17,0.1); position: relative; }
.blog-scroll > a { scroll-snap-align: start; }
.blog-scroll::-webkit-scrollbar { width: 6px; }
.blog-scroll::-webkit-scrollbar-track { background: rgba(17,17,17,0.1); }
.blog-scroll::-webkit-scrollbar-thumb { background: #D20C18; }
.blog-scroll:focus-visible { outline: 2px solid #D20C18; outline-offset: 4px; }
.blog-scroll-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 20px; }
.blog-scroll-count { margin-right: auto; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; color: #6B6B6B; }
.blog-scroll-nav button { width: 48px; height: 48px; background: transparent; border: 2px solid #111111; color: #111111; font-size: 18px; cursor: pointer; }
.blog-scroll-nav button:hover:not(:disabled) { border-color: #D20C18; background: #D20C18; color: #FFFFFF; }
.blog-scroll-nav button:disabled { opacity: 0.3; cursor: default; }

/* Studio galleries */
[data-gallery-track] { flex-wrap: nowrap !important; }
[data-gallery-track]::-webkit-scrollbar { display: none; }
[data-gallery-track]:focus-visible { outline: 2px solid #D20C18; outline-offset: -2px; }
[data-gallery] button:hover:not(:disabled) { background: #D20C18 !important; border-color: #D20C18 !important; }
@media (max-width: 960px) { [data-gallery] { height: auto !important; aspect-ratio: 4 / 3; } }

/* Event cards on mobile: photo full width on top, date as a row */
@media (max-width: 960px) {
  article.r-row > div[style*="max-width: 300px"] { width: 100% !important; max-width: none !important; flex: 0 0 100% !important; aspect-ratio: 16 / 9; order: -1; }
  article.r-row > div[style*="width: 180px"] { width: 100% !important; flex-direction: row !important; justify-content: flex-start !important; align-items: baseline !important; gap: 12px !important; padding: 20px 24px 0; border-right: 0 !important; box-sizing: border-box; }
}

/* Work page: show-more button under the credits list */
.w-more { align-self: center; height: 56px; padding: 0 32px; background: transparent; border: 2px solid #111111; color: #111111; font: 600 14px Epilogue, sans-serif; letter-spacing: 1.5px; cursor: pointer; }
.w-more:hover { background: #D20C18; border-color: #D20C18; color: #FFFFFF; }
.w-more[hidden] { display: none; }
@media (max-width: 960px) { #credits .wcard { gap: 16px !important; flex-wrap: nowrap !important; padding: 16px 0 !important; } #credits .r-g { gap: 0 !important; } #credits [role="group"] button { height: 40px !important; padding: 0 16px !important; font-size: 12px !important; } }

/* Reviews wall: masonry columns */
@media (max-width: 1100px) { .reviews-wall { column-count: 2 !important; } }
@media (max-width: 700px) { .reviews-wall { column-count: 1 !important; } }

/* "VAT excluded" labels next to prices */
.vat { display: inline-block; margin-left: 6px; font-family: Epilogue, sans-serif; font-size: 11px !important; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #6B6B6B; vertical-align: middle; white-space: nowrap; }
.vat-note { margin: -12px 0 24px !important; font-size: 13px !important; font-weight: 600; letter-spacing: 0.5px; color: #6B6B6B; }
.bk-pay a{color:#111111;text-decoration:underline}

/* Events: writing camp read-more + application */
details.ev-more summary::-webkit-details-marker{display:none}
details.ev-more summary:hover{color:#D20C18}
details.ev-more[open] summary span:first-child::after{content:""}
@media (max-width:900px){
  details.ev-more summary{padding:0 20px!important;height:auto!important;min-height:56px}
  details.ev-more > div{padding:16px 20px 32px!important;gap:40px!important}
  #wc-apply form{grid-template-columns:1fr!important}
  #wc-apply form > *{grid-column:auto!important}
}
#wc-apply,#wc-details,#writing-camp,#rsvp,#rsvp-details,#networking-night,#showcase-night,#showcase-details,#showcase-rsvp,#perform{scroll-margin-top:120px}
.pv-soon{opacity:.45;cursor:default!important}
#add-ons a[data-add]:hover{background:#D20C18!important;border-color:#D20C18!important;color:#fff!important}
@media (max-width:900px){#add-ons .r-row,#before-after .r-row{flex-direction:column;align-items:flex-start!important}}

/* My Account */
#account-app button.sp-btn{border:0;cursor:pointer;font-family:inherit}
#account-app button.sp-btn-line{background:transparent;border:2px solid #111;color:#111}
.acc-orders-wrap{margin-top:56px;display:flex;flex-direction:column;gap:16px;max-width:900px}
.acc-order{border:1px solid rgba(17,17,17,.14);background:#F5F5F3;padding:24px 28px;display:flex;flex-direction:column;gap:12px}
.acc-order-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.acc-order-head b{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:20px;margin-right:12px}
.acc-order-head span{color:#6B6B6B;font-size:14px}
.acc-order-total{font-family:'Archivo Black','Arial Black',sans-serif;font-size:20px;color:#D20C18;display:flex;gap:12px;align-items:center}
.acc-tag{font-family:Epilogue,sans-serif;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#111!important;border:1px solid rgba(17,17,17,.3);padding:4px 8px}
.acc-order ul{margin:0;padding-left:18px;color:#2B2B2B;font-size:16px;line-height:1.6}
.acc-order-links{display:flex;flex-wrap:wrap;gap:20px}
.acc-order-links a{color:#D20C18;font-weight:600;font-size:14px;letter-spacing:.5px}
.acc-empty{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media (max-width:700px){.acc-order-head{flex-direction:column;gap:6px}}
.acc-gift{margin-top:48px;max-width:900px;display:flex;justify-content:space-between;align-items:center;gap:32px;padding:28px 32px;background:#000;color:#fff}
.acc-gift .sp-eyebrow{color:#fff}
.acc-gift p{margin:10px 0 0;color:rgba(255,255,255,.85);font-size:16px;line-height:1.6}
.acc-gift strong{color:#fff}
.acc-code{flex-shrink:0;font-family:'Archivo Black','Arial Black',sans-serif;font-size:28px;letter-spacing:2px;color:#fff;border:2px dashed #D20C18;padding:14px 22px;cursor:pointer;user-select:all}
@media (max-width:700px){.acc-gift{flex-direction:column;align-items:flex-start}}
.acc-gift .acc-small{margin-top:8px;font-size:13px;color:rgba(255,255,255,.65)}
.acc-locked{background:#111}.acc-gift .sp-btn{flex-shrink:0;white-space:nowrap}
.acc-gift[hidden]{display:none}
.mb-why{padding:72px 80px 0}
.mb-why h2{margin:12px 0 12px;font:400 clamp(32px,4.4vw,64px)/.95 'Archivo Black','Arial Black',sans-serif;color:var(--red)}
.mb-why p{margin:0;font-size:17px;line-height:1.6;color:#2B2B2B}
.mb-perks{row-gap:48px}
@media (max-width:640px){.mb-why{padding:56px 20px 0}}
.acc-block{margin-top:56px;max-width:900px;padding-top:28px;border-top:2px solid var(--red)}
.acc-block h2{margin:10px 0 10px;font:400 clamp(26px,3vw,40px)/1 'Archivo Black','Arial Black',sans-serif;color:var(--ink)}
.acc-block>p,.acc-block .mb-full>p{margin:0 0 20px;font-size:16px;line-height:1.6;color:#4A4A4A}
.acc-dots{display:flex;gap:12px;margin:8px 0 12px}
.acc-dots span{width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--red);color:var(--red);font:400 20px 'Archivo Black','Arial Black',sans-serif}
.acc-dots span.on{background:var(--red);color:#fff}
.acc-res{display:grid;gap:12px}
.acc-res-item{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;background:#F4F4F2}
.acc-res-item b{font-size:17px;color:var(--ink)}
.acc-res-item p{margin:4px 0 0;font-size:14px;line-height:1.5;color:#4A4A4A}
.acc-soon{flex-shrink:0;font-size:12px;font-weight:700;letter-spacing:2px;color:#8A8A8A}
.acc-res-item .sp-btn{flex-shrink:0}
.acc-profile{padding-top:28px}
.acc-hint{display:block;margin-top:6px;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--red)}
.acc-save{display:flex;align-items:center;gap:20px}
.acc-save [data-acc-saved]{font-size:15px;color:#2B2B2B}
@media (max-width:640px){.acc-res-item{flex-direction:column;align-items:flex-start}.acc-save{flex-direction:column;align-items:flex-start}}
/* ---- Effects (5 Nov 2026) ---- */
.proof-band{background:#000;color:#fff;padding:72px 0 0;overflow:hidden}
.pb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:0 80px 64px}
.pb-stat{border-top:2px solid var(--red);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.pb-stat b{font:400 clamp(44px,5.5vw,80px)/1 'Archivo Black','Arial Black',sans-serif;color:var(--red);font-variant-numeric:tabular-nums}
.pb-stat>span{font-size:13px;font-weight:600;letter-spacing:2px;color:rgba(255,255,255,.8)}
.pb-marquee{display:flex;border-top:1px solid rgba(255,255,255,.15);padding:26px 0;white-space:nowrap}
.pb-track{display:flex;align-items:center;flex-shrink:0;animation:pb-scroll 60s linear infinite}
.pb-track span{font:400 clamp(24px,2.6vw,38px)/1 'Archivo Black','Arial Black',sans-serif;text-transform:uppercase;letter-spacing:-.5px;padding:0 28px}
.pb-track i{font-style:normal;color:var(--red);font-size:18px}
.pb-marquee:hover .pb-track{animation-play-state:paused}
@keyframes pb-scroll{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.pb-track{animation:none}}
@media (max-width:900px){.pb-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 20px 48px}.proof-band{padding-top:56px}}
/* Play icon on cover art */
a.cover{position:relative}
a.cover::after{content:"";position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center/22px no-repeat;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .3s ease,transform .3s ease;box-shadow:0 6px 18px rgba(0,0,0,.35)}
a.cover:hover::after,a.cover:focus-visible::after{opacity:1;transform:none}
@media (hover:none){a.cover::after{opacity:1;transform:none;width:40px;height:40px;background-size:18px}}
/* Sticky book bar on phones */
.m-bookbar{display:none}
@media (max-width:760px){
.m-bookbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#000;transform:translateY(110%);transition:transform .35s ease}
.m-bookbar.show{transform:none}
.m-bookbar a{flex:1;display:flex;align-items:center;justify-content:center;height:48px;background:var(--red);color:#fff;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:1.2px}
.m-bookbar a.alt{background:transparent;border:1.5px solid #fff}
}
/* Before & After buttons while playing */
[data-preview].playing{outline:3px solid var(--red);outline-offset:2px}
@media (min-width:961px){#perform>div:has(>img[data-perform-photo]){margin:40px 0 -30px}}
@media (max-width:960px){.r-ph:has(>img[src*="about-tracks-to-hand"]){height:auto!important;width:100%;max-width:100%;min-width:0;aspect-ratio:16/10}}
@media (max-width:960px){.r-ph:has(>img[src*="events-want-to-perform"]),.r-ph:has(>img[src*="work-artist-portrait"]){min-height:0!important;height:auto!important;aspect-ratio:4/5}}
@media (max-width:760px){.eb-split .eb-dot{display:none}.eb-split>span{display:block}.eb-split>span+span+span{margin-top:6px}}
@media (max-width:960px){.r-media:has(>[data-fit]){min-height:0!important}}
@media (max-width:960px){
[data-ar]{aspect-ratio:var(--ar)!important;height:auto!important;min-height:0!important;max-width:none!important}
.r-media:has(>[data-ar]),.r-fh:has(>[data-ar]){min-height:0!important;height:auto!important}
}
@media (max-width:960px){.r-media{min-height:0!important}.r-fh.r-row{height:auto!important}}
@media (max-width:960px){[data-ar]{width:100%!important;flex:0 0 auto!important;align-self:stretch!important;box-sizing:border-box}}
/* Upload page: "Not sure what to send?" black box */
.up-help{background:#000;margin:24px 80px 0;color:#fff}
.up-help h2{color:#fff!important}
.up-help p{color:rgba(255,255,255,.85)!important}
.up-help p a{color:#fff!important;text-decoration:underline}
.up-help a[href="/book-session"]{background:var(--red);border-color:var(--red)!important;color:#fff!important}
.up-help a[href="/contact"]{border-color:#fff!important;color:#fff!important}
@media (max-width:960px){.up-help{margin:16px 20px 0;padding:56px 24px!important}}
/* Moving black/red bars: always full strength, never faded by the scroll effect (8 Nov 2026) */
.stack>.stk.glitch::after,.stack>.glitch+.stk::before,.stack>.stk-wrap:has(>.glitch)::after{display:none!important}
/* Studio pricing cards: breathing room between the studio prices and the Book Now button on phones (8 Nov 2026) */
@media (max-width:960px){a[href^="/book-session?hours="]{margin-top:28px}}
/* Phones: photo boxes sized by width (works on every iPhone/Safari version, not just newer ones) – 8 Nov 2026 */
@media (max-width:960px){
[data-ar]{display:block!important;width:100%!important;max-width:100%!important;min-width:100%!important;height:0!important;min-height:0!important;padding:0 0 calc(100% / var(--ar)) 0!important;aspect-ratio:auto!important;flex:none!important;justify-self:stretch!important;align-self:start!important;grid-column:1/-1}
}
/* Phones: button groups never wider than their box; buttons centred and full width (8 Nov 2026) */
@media (max-width:960px){
.r-row>div[style*="flex-shrink: 0"]{flex-shrink:1!important;width:100%;min-width:0;max-width:100%}
.r-row>*{min-width:0;max-width:100%}
a[style*="height: 56px"],button[style*="height: 56px"],.sp-btn{box-sizing:border-box;max-width:100%;text-align:center;justify-content:center}
}
@media (max-width:960px){.want-v3{display:none!important}}
/* Phones: "RSVP for… / Apply for…" expand bars – more room, text and + centred in the bar (8 Nov 2026) */
@media (max-width:960px){
details.ev-more>summary{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;height:auto!important;min-height:76px;padding:22px 24px!important;gap:16px;line-height:1.4;box-sizing:border-box}
details.ev-more>summary>span:first-child{flex:1;min-width:0}
details.ev-more>summary .faq-sign{flex-shrink:0}
details.ev-more{margin-top:8px}
}
/* Phones: "Want to Perform?" form labels in black (8 Nov 2026) */
@media (max-width:960px){form[name="showcase-submission"] label{color:#111111!important}}
/* Phones: banner sections that relied on a desktop min-height get even top/bottom space (8 Nov 2026) */
@media (max-width:960px){section.r-h[style*="padding: 0px"]{padding-top:56px!important;padding-bottom:56px!important;gap:28px!important}}
/* Phones: About stats strip grows to fit its rows; moving bars get breathing room (8 Nov 2026) */
@media (max-width:960px){
section.r-h.r-mx.r-g{height:auto!important;padding:32px 0!important;row-gap:32px!important;grid-auto-rows:auto!important;align-items:start!important}
.glitch{padding-top:40px!important;padding-bottom:40px!important}
}
/* Homepage "Next event" card: gap between time/location and Apply Now (8 Nov 2026) */
@media (max-width:960px){a[href="/events#writing-camp"][style*="height: 52px"]{margin-top:24px}}
/* Phones: Calendly calendars centred in their card (8 Nov 2026) */
@media (max-width:960px){
div:has(>.cal-embed){padding:28px 12px!important}
.cal-embed{width:100%!important;display:flex;justify-content:center}
.cal-embed .calendly-inline-widget{min-width:0!important;width:100%!important;max-width:100%}
}
/* Phones: list text sits next to its red bullet instead of dropping below it (8 Nov 2026) */
@media (max-width:960px){
li.r-row{flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-start!important;justify-content:flex-start!important}
li.r-row>span:last-child{flex:1 1 auto;min-width:0}
li.r-row>span:first-child:not(:empty){flex:0 0 28px}
li.r-row>span:first-child:empty{margin-top:.6em;flex-shrink:0}
}
/* Phones: "Got a project?" red box (and any other wrapped section) centred with equal side margins (8 Nov 2026) */
@media (max-width:960px){.stk-wrap{padding:0!important}#book{margin-left:20px!important;margin-right:20px!important;width:auto!important;max-width:none!important}}
/* Phones: Artist Development "Compare plans" table fits the screen (8 Nov 2026) */
@media (max-width:960px){
table:has(th[scope="col"]){table-layout:fixed;width:100%!important}
table:has(th[scope="col"]) th,table:has(th[scope="col"]) td{padding:10px 6px!important;height:auto!important;font-size:13px!important;line-height:1.3;word-break:normal;overflow-wrap:break-word}
table:has(th[scope="col"]) thead th:first-child,table:has(th[scope="col"]) tbody th{width:40%!important;padding-left:0!important}
table:has(th[scope="col"]) thead th:not(:first-child){width:30%!important;font-size:22px!important}
table:has(th[scope="col"]) thead th div{font-size:12px!important}
table:has(th[scope="col"]) thead th div span{font-size:9px!important;letter-spacing:.8px!important}
table:has(th[scope="col"]) td span{font-size:13px!important}
table:has(th[scope="col"]) td svg{width:18px;height:18px}
}
/* Phones: Contact button in the menu full size, like the other buttons (8 Nov 2026) */
@media (max-width:960px){.sh-nav>a.sh-cta-m{flex:0 0 auto!important;height:56px!important;min-height:56px;font-size:15px;letter-spacing:1px;margin-top:24px}}

/* Before & After track list (Mixing / Mastering) */
.ab-list{display:flex;flex-direction:column;border-top:1px solid rgba(17,17,17,.14)}
.ab-row{position:relative;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:16px 24px;padding:24px 0;border-bottom:1px solid rgba(17,17,17,.14)}
.ab-num{font-family:'Arial Black','Archivo Black',sans-serif;font-size:15px;color:#D20C18;letter-spacing:1px}
.ab-title{font-family:'Arial Black','Archivo Black',sans-serif;font-size:22px;line-height:1.1;color:#111}
.ab-artist{margin-top:4px;font-size:14px;color:#6B6B6B;letter-spacing:.5px}
.ab-btns{display:flex;gap:10px}
.ab-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-width:140px;height:52px;padding:0 18px;font-family:Epilogue,sans-serif;font-size:14px;font-weight:600;letter-spacing:1.2px;cursor:pointer;border:2px solid #111;transition:background .15s,color .15s,border-color .15s}
.ab-b{background:#fff;color:#111}
.ab-a{background:#111;color:#fff}
.ab-btn.playing{background:#D20C18;border-color:#D20C18;color:#fff}
@media (max-width:760px){
  .ab-row{grid-template-columns:36px 1fr;gap:14px 12px;padding:20px 0}
  .ab-btns{grid-column:1 / -1}
  .ab-btn{flex:1;min-width:0}
  .ab-title{font-size:19px}
}
/* Mixing / Mastering: more room after the long Before & After list before the next section slides up (9 Nov 2026) */
.pg-services-mixing .stack>#before-after+.stk,.pg-services-mastering .stack>#before-after+.stk{margin-top:260px}
/* Phones: red play icons on the Before & After buttons (white while playing on red) */
/* Before & After waveform: tap or drag to move through the song */
.ab-wave{grid-column:2 / -1;grid-row:2;position:relative;height:44px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.ab-wave:focus-visible{box-shadow:0 0 0 2px #D20C18}
.ab-wave .w-l{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.ab-wave .w-l i{flex:1;min-width:1px;border-radius:1px}
.ab-wave .w-bg i{background:rgba(17,17,17,.2)}
.ab-wave .w-fg{clip-path:inset(0 100% 0 0)}
.ab-wave .w-fg i{background:#D20C18}
.ab-wave .w-head{position:absolute;top:-4px;bottom:-4px;left:0;width:2px;margin-left:-1px;background:#111;opacity:0;transition:opacity .15s}
.ab-row.on .ab-wave .w-head,.ab-wave:hover .w-head{opacity:1}
.ab-time{grid-column:1 / 2;grid-row:2;font-size:13px;font-weight:600;letter-spacing:1px;color:#6B6B6B;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .ab-wave{grid-column:1 / -1;grid-row:auto;height:40px;order:3}
  .ab-time{grid-column:1 / -1;grid-row:auto;order:4;margin-top:-6px;font-size:12px}
  .ab-btns{order:2}
}
/* Before & After play / pause icons drawn in CSS (no emoji on iPhone) */
.ab-ic{display:inline-block;width:12px;height:14px;flex:none;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.ab-btn.playing .ab-ic{width:12px;clip-path:none;background:linear-gradient(to right,currentColor 0 35%,transparent 35% 65%,currentColor 65% 100%)}
@media (max-width:760px){.ab-btn .ab-ic{color:#D20C18}.ab-btn.playing .ab-ic{color:#fff}}