/*
Theme Name: KMBRK
Theme URI: https://www.kmbrk.com/
Author: DJ KMBRK
Description: A lean, fast, Elementor-free theme for DJ KMBRK. Custom front page, dark editorial blog, Event + LocalBusiness schema. No page builder, no jQuery, no external CSS.
Version: 1.11.3
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: kmbrk
*/

:root{
  --ink:#0B0B0C; --stage:#141417; --line:#26262B;
  --chalk:#F2F1EE; --haze:#8A8A93; --siren:#E62329;      /* fills, buttons, rules */
  --siren-text:#F04B4F; /* text. #E62329 is only 4.34:1 on ink, which fails WCAG AA */
  --display:"Big Shoulders Display","Big Shoulders","Archivo Black",Haettenschweiler,Impact,sans-serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pad:20px; --maxw:1360px;
  --barh:calc(64px + env(safe-area-inset-bottom));
  --tap:48px;                       /* minimum touch target, everywhere */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* The sticky header is 102px tall. Without this, scrolling to #book lands the
   top of the section UNDERNEATH the header, and the visitor sees the middle of
   a form with no heading. Applies to every anchor on the site. */
section[id],[id="book"],[id="work"],[id="sets"],[id="reviews"],[id="events"],[id="rates"],[id="about"]{scroll-margin-top:110px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:var(--ink);color:var(--chalk);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:var(--barh);overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--siren);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{padding:48px 0}

.eyebrow{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--haze)}
.section-head{padding-bottom:16px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.section-head h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:38px;line-height:.9;margin-top:8px}
.section-head .eyebrow{display:block}

/* Buttons, never below 48px on touch */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 22px;font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;border-radius:2px;cursor:pointer;transition:background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.btn-primary{background:var(--siren);color:#fff}
.btn-primary:active{background:#C41B21}
.btn-ghost{background:rgba(11,11,12,.4);color:var(--chalk);border-color:#4A4A54;backdrop-filter:blur(6px)}
.btn-block{width:100%}

/* ---------- NAV ---------- */
.topbar{position:sticky;top:0;z-index:60}
.utility{background:#0F0F11;border-bottom:1px solid var(--line);overflow:hidden;max-height:40px;transition:max-height .35s ease,border-color .35s}
.topbar.stuck .utility{max-height:0;border-bottom-color:transparent}
.utility-in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:40px;font-size:11px;color:var(--haze);white-space:nowrap}
.u-status{letter-spacing:.03em;text-transform:uppercase;font-weight:600;font-size:10.5px}
.u-status{color:var(--haze)}
.u-loc{display:none}
.u-tel{font-weight:600;color:var(--chalk)}
.nav{background:rgba(11,11,12,.72);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s}
.topbar.stuck .nav{border-bottom-color:var(--line);background:rgba(11,11,12,.97)}
/* Live availability signal, the highest-converting thing an event vendor can put in a header */
.booking{display:none;align-items:center;gap:8px;margin-left:26px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--haze)}
.booking i{width:7px;height:7px;border-radius:50%;background:#3BD16F;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(59,209,111,.55)}70%,100%{box-shadow:0 0 0 7px rgba(59,209,111,0)}}
.nav-in{display:flex;align-items:center;height:62px;transition:height .3s}
.topbar.stuck .nav-in{height:60px}
/* The stuck header is shorter than the logo, so the logo shrinks with it. */
.nav-logo img{transition:height .3s}
.topbar.stuck .nav-logo img{height:42px}
.nav-logo img{height:50px;width:auto}
.nav-links{display:none}
.nav .btn{display:none}
/* Force the horizontal nav off on anything below the desktop breakpoint, with
   !important so a stale inlined/critical-CSS snapshot can't resurrect it and
   overlap the logo on a phone. The nav only ever shows in the 1200px block. */
@media(max-width:1239px){
  .nav-links{display:none!important}
  .nav .btn{display:none!important}
}
@media(min-width:1240px){
  .burger,.drawer-nav{display:none!important}
}
.burger{margin-left:auto;width:var(--tap);height:var(--tap);display:grid;place-items:center;background:none;border:0;cursor:pointer;margin-right:-12px}
.burger i{display:block;width:22px;height:2px;background:var(--chalk);position:relative;transition:.25s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--chalk);transition:.25s}
.burger i::before{top:-7px} .burger i::after{top:7px}
.menu-open .burger i{background:transparent}
.menu-open .burger i::before{top:0;transform:rotate(45deg)}
.menu-open .burger i::after{top:0;transform:rotate(-45deg)}
.drawer-nav li{list-style:none;margin:0;padding:0}
.drawer-nav{position:fixed;inset:0;z-index:55;background:var(--ink);padding:calc(112px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;overflow-y:auto}
.menu-open .drawer-nav{transform:none}
/* A faint brand glow bleeding up from the bottom, so the open menu reads as a
   designed space rather than a black panel. */
.drawer-nav::before{content:"";position:absolute;left:-20%;bottom:-10%;width:80%;height:55%;
  background:radial-gradient(circle,rgba(230,35,41,.14),transparent 68%);pointer-events:none}
.drawer-nav > *{position:relative}

/* Each item: a red index number + the label. No bullets, no default anything. */
.drawer-nav a:not(.btn){display:flex;align-items:baseline;gap:16px;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:clamp(34px,10vw,46px);line-height:1.05;letter-spacing:-.01em;
  color:var(--chalk);padding:16px 0;border-bottom:1px solid var(--line);position:relative;
  /* start hidden; the stagger animation reveals them when the menu opens */
  opacity:0;transform:translateX(24px)}
.drawer-nav a:not(.btn)::before{counter-increment:navnum;content:counter(navnum,decimal-leading-zero);
  font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--siren-text);
  transform:translateY(-.6em);min-width:26px}
.drawer-nav{counter-reset:navnum}
/* red sweep on the active/tapped item, matching the desktop nav language */
.drawer-nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--siren);transition:width .3s cubic-bezier(.16,1,.3,1)}
.drawer-nav a:not(.btn):active::after,.drawer-nav a.current-menu-item::after{width:100%}

/* Staggered entrance: when the menu opens, items rise in one after another. */
.menu-open .drawer-nav a:not(.btn){animation:drawerIn .5s cubic-bezier(.16,1,.3,1) forwards}
.menu-open .drawer-nav li:nth-child(1) a{animation-delay:.06s}
.menu-open .drawer-nav li:nth-child(2) a{animation-delay:.11s}
.menu-open .drawer-nav li:nth-child(3) a{animation-delay:.16s}
.menu-open .drawer-nav li:nth-child(4) a{animation-delay:.21s}
.menu-open .drawer-nav li:nth-child(5) a{animation-delay:.26s}
.menu-open .drawer-nav li:nth-child(6) a{animation-delay:.31s}
.menu-open .drawer-nav li:nth-child(7) a{animation-delay:.36s}
.menu-open .drawer-nav li:nth-child(8) a{animation-delay:.41s}
@keyframes drawerIn{to{opacity:1;transform:none}}

/* The book button and a small contact footer, so the open menu feels complete. */
.drawer-nav .btn{margin-top:32px;opacity:0;animation:drawerIn .5s cubic-bezier(.16,1,.3,1) .46s forwards}
.drawer-foot{margin-top:24px;display:flex;flex-direction:column;gap:6px;opacity:0;
  animation:drawerIn .5s ease .52s forwards}
.drawer-foot a{font-family:var(--body);font-size:15px;font-weight:600;color:var(--chalk);
  text-transform:none;letter-spacing:0;padding:0;border:0;display:inline}
.drawer-foot span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}

/* ---------- HERO: type + a live waveform ---------- */
.hero{position:relative;background:var(--ink);overflow:hidden;padding:30px 0 44px;display:flex;align-items:center;min-height:auto}

/* MOBILE ORDER.
   The proof column, 5.0, the stars, and six client names, is 246px tall. Sat
   between the headline and the date check, it pushed the single most valuable
   element on this site to 706px on a phone with a 660px screen. Nobody scrolled
   to it, because nobody knew it was there.
   So on mobile the ask comes BEFORE the proof. Nothing is lost: the rating is
   already in the utility bar at the very top of every page. */
.hero-in{display:flex;flex-direction:column}
.hero-top{display:contents}
.hero-in > h1{order:1}
.hero-in > .wave{order:2}
.hero-in > .wave-hint{order:3}
.hero-in > .hero-sub{order:4}
.hero-in > .datecheck{order:5}
.hero-in > .hero-meta{order:6;margin-top:36px;padding-top:26px;border-top:1px solid #26262B}
/* The light in the room. Pure CSS, no image, no request, no bytes.
   Centred on the waveform, and it comes up when a mix plays. */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 42%;opacity:1}
/* Three scrims, each doing one job:
   left  , the headline sits on darkness, never on a face
   top   , the brand line and the proof column stay legible
   bottom, the waveform and the CTAs sit on solid ink              */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(100deg, rgba(11,11,12,.96) 0%, rgba(11,11,12,.86) 34%, rgba(11,11,12,.30) 64%, rgba(11,11,12,.10) 100%),
  linear-gradient(to bottom, rgba(11,11,12,.78) 0%, rgba(11,11,12,.24) 26%, rgba(11,11,12,0) 46%),
  linear-gradient(to top, var(--ink) 3%, rgba(11,11,12,.72) 30%, rgba(11,11,12,0) 58%)}
/* The music is the light source. Comes up when a mix plays. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 80% at 30% 78%, rgba(230,35,41,.15) 0%, rgba(230,35,41,.05) 36%, transparent 70%);
  opacity:.4;transition:opacity 1.1s ease}
.hero.playing::before{opacity:1}
.hero-in{position:relative;z-index:2}
/* Landing pages use their own featured image. For a centered portrait, keep the
   face centered and dark-weight the BOTTOM so the headline and CTAs sit below the
   face rather than over it. The face stays clear in the upper-center. */
.hero--landing::before{content:"";display:block;position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,.2) 34%,rgba(11,11,12,.72) 72%,rgba(11,11,12,.95) 100%)}
/* Face centered horizontally, focal point kept high so it isn't cropped. */
.hero--landing .hero-bg{object-position:50% 24%}
/* Push the hero content to the bottom so text lands below the face. */
.hero--landing .hero-in{align-self:flex-end;padding-bottom:8px}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
/* The name, above the hook. It sits inside the H1 so a crawler reads
   brand + keyword + promise as one heading, and so a human reading the page
   for four seconds leaves knowing what to type into Google later. */
.h1-brand{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,4.4vw,34px);line-height:1;letter-spacing:.02em;color:var(--chalk);margin-bottom:12px}
.h1-brand::after{content:"";display:block;width:44px;height:3px;background:var(--siren);margin-top:10px}
.h1-kicker{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--haze);margin-bottom:14px}
.h1-main{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(54px,15vw,214px);line-height:.82;letter-spacing:-.02em}
.hero-top{display:block}
.hero-meta{display:none}
.h1-main .ln{display:block;overflow:hidden;padding-bottom:.03em}
.h1-main .ln span{display:block;transform:translateY(102%);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
.h1-main .ln:nth-child(2) span{animation-delay:.1s}
@keyframes rise{to{transform:translateY(0)}}

.wave{display:flex;align-items:center;gap:2px;width:100%;height:76px;margin:22px 0 4px;
  padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wave b{flex:1 1 0;min-width:2px;border-radius:3px;background:#3A3A44;transform-origin:center;
  transition:background .35s ease,transform .35s ease}
/* Idle breathing: a slow, low-contrast pulse so the waveform reads as alive and
   clickable, not as a static ornament. This is the only cue a mobile user gets,
   since there is no hover on touch. It stops the moment music plays. */
.hero:not(.playing) .wave b{animation:wv-idle 2.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes wv-idle{0%,100%{transform:scaleY(.7);background:#3A3A44}50%{transform:scaleY(.92);background:#4A3438}}
.wave:hover b{background:#6E3339;animation:none}
.wave:hover b:nth-child(3n){transform:scaleY(1.18)}
.hero.playing .wave b{background:var(--siren);animation:wv 1.05s ease-in-out infinite;animation-delay:var(--d)}
@keyframes wv{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.3)}}
/* The play cue. Bigger, with a real triangle, and it sits on a pill so it reads
   as an action, not a caption. */
.wave-hint{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chalk);transition:color .3s;
  cursor:pointer}
.wave-hint::before{content:"";width:0;height:0;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--siren-text);
  transition:transform .3s}
.wave-hint::after{content:"Press play to hear a set";color:var(--haze);font-weight:600;
  letter-spacing:.14em}
.hero.playing .wave-hint::before{border-width:6px;border-color:var(--siren-text);border-radius:1px}
.hero.playing .wave-hint::after{content:"Now playing";color:var(--siren-text)}

.hero-sub{margin-top:22px;max-width:44ch;color:#C9C8C5;font-size:16px}
.hero-sub b{color:var(--chalk);font-weight:600}
.hero-cta{display:flex;flex-direction:column;gap:10px;margin-top:26px}
@media(min-width:1000px){
  .hero{min-height:min(88vh,840px);padding:0}
  /* Headline left, proof right, waveform underneath spanning both.
     The proof column is FIXED at 280px. Left on `auto` it sized itself to the
     longest client name ("National Black MBA Association, Chicago Chapter"),
     stole the headline's width, and forced "SITS DOWN." onto two lines. */
  .hero{padding:44px 0 52px;min-height:78svh}
  .hero-in{display:block}
  .hero-top{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:56px}
  .hero-in > .hero-meta{margin-top:0;padding-top:0;border-top:0}
  .hero-meta{position:relative;display:flex;flex-direction:column;gap:30px;text-align:right;padding-top:6px}
  /* The client list was sitting on top of somebody's face. Give it a soft panel
     of its own so the names stay legible without punching a hole in the photo. */
  .hero-meta::before{content:"";position:absolute;inset:-22px -22px -22px -30px;z-index:-1;
    background:radial-gradient(120% 100% at 80% 40%, rgba(11,11,12,.88) 0%, rgba(11,11,12,.62) 55%, transparent 100%)}
  /* Sized to fit beside that 280px column on ONE line, at every width from
     1000px up. Verified against the real font metrics, not by eye. */
  .h1-main{font-size:min(12.5vw,196px)}
  .hero:not(.hero--landing) .h1-main .ln{white-space:nowrap}
  .hm-rating b{display:block;font-family:var(--display);font-weight:900;font-size:76px;line-height:.9}
  .hm-rating .stars{display:block;color:var(--siren-text);letter-spacing:4px;font-size:15px;margin-top:2px}
  .hm-rating em{display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--haze);margin-top:8px}
  .hm-clients{border-top:1px solid #2E2E36;padding-top:18px}
  .hm-clients .eyebrow{display:block;margin-bottom:12px}
  .hm-clients ul{list-style:none}
  .hm-clients li{font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:18px;line-height:1.3;color:#B9B8B5;text-wrap:balance}
  .hm-clients li + li{margin-top:4px}
  .wave{height:140px;gap:3px;margin:34px 0 6px}
  .hero-sub{font-size:17px;margin-top:26px}
  .hero-cta{flex-direction:row;margin-top:32px}
}
/* ---------- PROOF ---------- */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.stats{display:grid;grid-template-columns:1fr 1fr}
.stat{padding:26px 16px;text-align:center;border-bottom:1px solid var(--line)}
.stat:nth-child(odd){border-right:1px solid var(--line)}
.stat:nth-child(n+3){border-bottom:0}
.stat b{display:block;font-family:var(--display);font-weight:900;font-size:44px;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.stat span{display:block;margin-top:8px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}

.rating{display:flex;align-items:center;justify-content:center;gap:16px;padding:30px var(--pad)}
.rating-score{font-family:var(--display);font-weight:900;font-size:56px;line-height:1}
.rating-meta .stars{color:var(--siren);letter-spacing:4px;font-size:15px}
.rating-meta span{display:block;margin-top:4px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}
/* ---------- THE DATE CHECK ----------
   The highest-value element on the site. One field, above the fold, asking the
   only question a booking actually turns on. */
.datecheck{margin-top:30px;max-width:520px}
.datecheck label{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:26px;line-height:1;color:var(--chalk);margin-bottom:12px}
.dc-row{display:flex;gap:10px}
.dc-row input[type=date]{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid #3A3A42;
  color:var(--chalk);font:inherit;font-size:16px;padding:15px 16px;border-radius:2px;
  transition:border-color .2s,background .2s}
.dc-row input[type=date]:focus{outline:none;border-color:var(--siren);background:rgba(255,255,255,.09)}
.dc-row input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55;cursor:pointer}
.dc-row .btn{flex:0 0 auto;white-space:nowrap}

/* Custom calendar: the branded date picker that replaces the bare native input.
   The native input is hidden but kept as the value holder + no-JS fallback. */
/* The trigger and the hidden native input share this box. */
.cal-field{position:relative;flex:1;min-width:0}
/* Invisible, but exactly the size and position of the visible trigger, so
   "Please fill out this field" anchors to the control the user can see. */
.cal-native-hidden{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  pointer-events:none;border:0;padding:0;margin:0}
.cal-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.06);border:1px solid #3A3A42;border-radius:3px;
  padding:0 16px;height:52px;font-family:var(--body);font-size:16px;color:var(--haze);
  cursor:pointer;transition:border-color .2s,background .2s,color .2s;text-align:left}
.cal-trigger.has-val{color:var(--chalk);font-weight:600}
.cal-trigger:hover,.cal-trigger.is-open{border-color:var(--siren);background:rgba(255,255,255,.09);color:var(--chalk)}
.cal-trigger .cal-ico{color:var(--siren-text);transition:transform .25s}
.cal-trigger.is-open .cal-ico{transform:rotate(180deg)}

.cal-pop{position:absolute;z-index:70;margin-top:8px;width:300px;max-width:calc(100vw - 40px);
  background:#141417;border:1px solid var(--line);border-radius:6px;padding:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);animation:calIn .18s ease}
@keyframes calIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:16px;
  letter-spacing:.02em;color:var(--chalk)}
.cal-nav{width:34px;height:34px;display:grid;place-items:center;background:none;border:1px solid var(--line);
  border-radius:4px;color:var(--chalk);font-size:18px;cursor:pointer;transition:border-color .2s,background .2s}
.cal-nav:hover:not(:disabled){border-color:var(--siren);background:rgba(230,35,41,.12)}
.cal-nav:disabled{opacity:.28;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--haze);
  padding:4px 0 8px}
.cal-day{aspect-ratio:1;display:grid;place-items:center;background:none;border:0;border-radius:4px;
  font-family:var(--body);font-size:14px;color:var(--chalk);cursor:pointer;transition:background .15s,color .15s}
.cal-day:hover:not(.is-off){background:var(--siren);color:#fff}
.cal-day.is-wknd:not(.is-off){color:var(--siren-text);font-weight:700}
.cal-day.is-sel{background:var(--siren);color:#fff;font-weight:700}
.cal-day.is-off{color:#3A3A42;cursor:default}
/* On mobile the calendar centers on screen as a sheet, sized to fit with room to
   spare so no week is ever clipped, and the trigger fills the column width. */
@media(max-width:560px){
  .cal-field{width:100%;flex:none}
  .cal-trigger{width:100%;height:56px;font-size:17px}
  .cal-pop{position:fixed;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);
    width:calc(100vw - 32px);max-width:380px;max-height:calc(100vh - 40px);overflow-y:auto;margin:0;
    padding:18px}
  .cal-day{font-size:16px}
  .cal-title{font-size:18px}
  .cal-nav{width:40px;height:40px;font-size:20px}
  @keyframes calIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
}
.dc-note{margin-top:12px;font-size:13px;color:var(--haze);line-height:1.6}
.dc-note a{color:var(--chalk);border-bottom:1px solid #3A3A42}
.dc-note a:hover{border-bottom-color:var(--siren)}
.dc-play{background:none;border:0;padding:0;margin-left:6px;color:var(--siren-text);
  font:inherit;font-size:13px;cursor:pointer}
.dc-play:hover{color:var(--chalk)}
@media(max-width:520px){
  .dc-row{flex-direction:column}
  .dc-row .btn{width:100%}
}

/* ---------- PRICE ----------
   Published, not hidden. The filter IS the feature. */
.rates{list-style:none;display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
.rates > li{position:relative;background:var(--stage);border:1px solid var(--line);
  padding:28px 26px 30px;border-radius:3px;transition:border-color .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.rates > li:hover{border-color:#3A3A44;transform:translateY(-3px)}
/* The wedding tier is the one to book. Give it the red edge and the "most booked"
   flag so the eye lands there first, anchoring, done on purpose. */
.rates > li.r-featured{border-color:var(--siren);background:linear-gradient(180deg,rgba(230,35,41,.06),transparent 60%),var(--stage)}
.rates > li.r-featured::before{content:"Most booked";position:absolute;top:-1px;right:20px;transform:translateY(-50%);
  font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--siren);padding:5px 10px;border-radius:2px}
.r-label{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.06em;color:var(--haze);margin-bottom:14px}
.r-price{display:flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:900;
  font-size:clamp(44px,8vw,58px);line-height:.9;color:var(--chalk);margin-bottom:14px}
.r-price em{font-style:normal;font-family:var(--body);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--haze)}
.r-note{display:block;font-size:14px;line-height:1.6;color:#B9B8B5}
.r-cta{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-family:var(--body);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--siren-text)}
/* The fourth cell: what's included. Deliberately not styled like a price card:
   no giant number, no red edge. It reads as the closing reassurance, and it
   fills the slot three prices would otherwise leave black. */
.rates > li.r-includes{background:rgba(255,255,255,.015);border:1px solid var(--line);padding:26px 28px}
.r-inc-list li{background:none;border:0}
.r-includes .r-label{margin-bottom:20px;color:var(--haze)}
.r-inc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
@media(min-width:560px){
  .r-inc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px}
}
@media(min-width:1100px){
  /* All five in one clean row on wide screens: no orphaned 3+2 split. Below
     this width they sit two-up, which divides five as 2/2/1 evenly enough. */
  .r-inc-list{grid-template-columns:repeat(5,1fr);gap:0 28px}
  .r-inc-list li{padding-left:24px;font-size:13px}
}
.r-inc-list li{position:relative;padding-left:26px;font-size:14px;line-height:1.45;color:#C4C3C0}
.r-inc-list li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:7px;
  border-left:2px solid var(--siren-text);border-bottom:2px solid var(--siren-text);
  transform:rotate(-45deg)}
.rates > li:hover .r-cta{color:var(--chalk)}
.rates-foot{margin-top:26px;font-size:15px;line-height:1.7;color:var(--haze);max-width:none}
.rates-foot strong{color:var(--chalk);font-weight:600}
@media(min-width:680px){
  .rates{grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
  /* The three prices are the top row. The includes panel spans all three columns
     underneath, so it reads as a footnote to the prices, not a fourth price. */
  .rates .r-includes{grid-column:1 / -1}
}

/* ---------- THE EDGE ----------
   The one section that says what nothing else does: why him and not the other
   200. A big claim, set large, with the explanation small beside it. */
.edge{padding:64px 0 60px;border-bottom:1px solid var(--line)}
.edge-h{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,6vw,72px);line-height:.94;color:var(--chalk);
  max-width:14ch;margin:0 0 26px;text-wrap:balance}
.edge-body{max-width:60ch}
.edge-body p{font-size:clamp(16px,2vw,19px);line-height:1.6;color:#C9C8C5;margin:0 0 16px}
.edge-line{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,2.4vw,23px);line-height:1.25;color:var(--chalk)!important;
  letter-spacing:.01em;margin:22px 0 22px!important}
.edge-line::before{content:"";display:block;width:44px;height:3px;background:var(--siren);margin-bottom:16px}
.edge-genres{font-size:14px!important;color:var(--haze)!important;letter-spacing:.01em}
@media(min-width:900px){
  .edge-in{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
  .edge-h{margin-bottom:0;position:sticky;top:120px}
}

.clients{padding:40px var(--pad) 42px}
.clients ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px;align-items:center;max-width:var(--maxw);margin:0 auto}
.clients li{display:grid;place-items:center;min-height:64px}
/* Normalize the logos to a consistent optical size and a single flat tint so the
   row reads as an intentional trust bar. Each logo fills its cell up to a max
   height and width, keeping proportions; the filter flattens them to one grey. */
.clients img{width:100%;height:auto;max-height:56px;max-width:150px;object-fit:contain;
  filter:grayscale(1) brightness(0) invert(.72);opacity:.85;
  transition:filter .25s,opacity .25s}
.clients li:hover img{filter:grayscale(1) brightness(0) invert(1);opacity:1}
.clients-note{margin-top:28px;text-align:center;font-size:13px;color:var(--haze)}
.clients-note b{color:var(--chalk);font-weight:600}

/* ---------- SETS ---------- */
.mixes{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.mix{background:var(--stage);padding:24px 20px;display:flex;flex-direction:column;gap:10px;cursor:pointer;min-height:var(--tap)}
.mix:active{background:#1C1C21}
.mix-meta{display:flex;justify-content:space-between;align-items:center}
.mix-len{font-size:12px;color:var(--haze)}
.mix h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:30px;line-height:.95}
.mix p{font-size:14px;color:var(--haze);line-height:1.5}
.mix-play{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--siren)}

/* ---------- ABOUT ---------- */
.about-portrait{aspect-ratio:4/5;background:#0D0D0F;border:1px solid var(--line);margin-bottom:28px;overflow:hidden}
.about-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.about-copy p{color:#C4C3C0;margin-bottom:16px}
.about-copy strong{color:var(--chalk);font-weight:600}
.rule-list{list-style:none;margin-top:auto;padding-top:30px;border-top:1px solid var(--line);
  display:flex;flex-direction:column}
.rule-list li{padding:20px 0;border-bottom:1px solid var(--line);font-size:15px}
.rule-list em{font-style:normal;color:var(--chalk);font-weight:600}
/* Admin-only diagnostic. Never shown to a visitor (gated by current_user_can). */
.reviews-admin-note{background:#2A1F00;border:1px solid #6b5200;color:#F0D98A;
  padding:16px 18px;border-radius:3px;margin-bottom:24px;font-size:14px;line-height:1.6}
.reviews-admin-note strong{color:#FFE9A8}
.rule-list .k{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--haze);margin-bottom:4px}

/* ---------- CASE STUDIES ---------- */
.cases{display:grid;gap:20px}
.case{border:1px solid var(--line);overflow:hidden}
.case-img{aspect-ratio:16/10;overflow:hidden;background:var(--stage)}
.case-img img{width:100%;height:100%;object-fit:cover}
.case-body{padding:20px}
.case h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1;margin:8px 0 4px}
.case .venue{font-size:12px;color:var(--haze);margin-bottom:12px}
.case p{font-size:14px;color:#B9B8B5;line-height:1.55}

/* ---------- REVIEWS, swipeable on phones ---------- */
.reviews{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(var(--pad)*-1);padding:0 var(--pad) 6px}
.reviews::-webkit-scrollbar{display:none}
.review{flex:0 0 82%;scroll-snap-align:start;border:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;gap:14px}
.review .stars{color:var(--siren);letter-spacing:3px;font-size:13px}
.review blockquote{font-size:16px;line-height:1.55}
.review cite{margin-top:auto;font-style:normal}
.review .who{display:block;font-weight:600;font-size:15px}
.review .what{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--haze);margin-top:4px}
.swipe-hint{margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}
.unverified{color:#6B6B73;font-style:italic}

/* ---------- BOOK ---------- */
.book{background:var(--stage);border-top:1px solid var(--line)}
.book-lede h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:38px;line-height:.9;margin-bottom:14px}
.book-lede p{color:var(--haze);margin-bottom:20px}
.range{font-size:14px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.range b{color:var(--chalk);font-weight:600}
.contact-row{display:flex;flex-direction:column;gap:10px;margin-bottom:36px}
.steps{display:flex;gap:8px;margin-bottom:20px}
.step-dot{flex:1;height:2px;background:var(--line)}
.step-dot.on{background:var(--siren)}
.step-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--haze);margin-bottom:12px}
.fields{display:grid;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}
/* 16px minimum stops iOS from zooming the viewport on focus */
.field input,.field select,.field textarea{background:#0B0B0C;border:1px solid var(--line);color:var(--chalk);padding:14px;font-family:var(--body);font-size:16px;border-radius:2px;min-height:var(--tap);width:100%;appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--siren);outline:none}
.field textarea{min-height:104px;resize:vertical}
.form-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.form-note{font-size:12px;color:var(--haze);text-align:center}
/* No JS? Both steps show and the form still posts. Progressive enhancement. */
.book-form.js #step2{display:none}
.book-form.js.is2 #step1{display:none}
.book-form.js.is2 #step2{display:block}
.form-error{padding:14px 16px;margin-bottom:20px;border:1px solid var(--siren);
  background:rgba(230,35,41,.08);font-size:14px}
.book-sent{border:1px solid var(--line);padding:36px 28px;align-self:start}
.book-sent h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:44px;line-height:.95;margin-bottom:12px}
.book-sent p{color:var(--haze);margin-bottom:22px;max-width:42ch}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--line);padding:32px 0;font-size:13px;color:var(--haze)}
.foot nav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:18px}

/* ---------- SIGNATURE: persistent set player ---------- */
.player{position:fixed;left:0;right:0;bottom:0;z-index:80;height:var(--barh);padding-bottom:env(safe-area-inset-bottom);background:rgba(13,13,15,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.player-in{display:flex;align-items:center;gap:12px;height:64px;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.pbtn{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--siren);border:0;cursor:pointer;display:grid;place-items:center}
.pbtn svg{width:15px;height:15px;fill:#fff}
.pbtn .ic-pause{display:none}
.player.playing .pbtn .ic-play{display:none}
.player.playing .pbtn .ic-pause{display:block}
.eq{display:none;align-items:flex-end;gap:3px;height:22px}
.eq i{display:block;width:3px;height:5px;background:#44444C}
.player.playing .eq i{background:var(--siren);animation:bounce .9s ease-in-out infinite}
.player.playing .eq i:nth-child(2){animation-delay:.12s}
.player.playing .eq i:nth-child(3){animation-delay:.28s}
.player.playing .eq i:nth-child(4){animation-delay:.05s}
.player.playing .eq i:nth-child(5){animation-delay:.34s}
@keyframes bounce{0%,100%{height:5px}50%{height:20px}}
.p-meta{min-width:0;flex:1}
.p-now{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--haze)}
.p-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-actions{display:flex;gap:8px;margin-left:auto;flex:0 0 auto}
.p-actions .btn{min-height:42px;padding:0 14px;font-size:11px;letter-spacing:.02em}
.drawer{position:fixed;left:0;right:0;bottom:var(--barh);z-index:79;background:var(--stage);border-top:1px solid var(--line);transform:translateY(101%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.drawer.open{transform:translateY(0)}
/* When the expanded player (with the Mixcloud embed) is open, it adds ~144px
   above the base bar. Reserve that extra space at the bottom of the page so the
   footer and last section aren't hidden behind it while a mix plays. */
body.player-open{padding-bottom:calc(var(--barh) + 156px)}
.drawer-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--pad)}
.drawer iframe{width:100%;height:120px;border:0;display:block}

.band{position:relative;padding:0;min-height:56svh;display:flex;align-items:center;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.62) 55%,rgba(11,11,12,.25) 100%)}
.band-in{position:relative;z-index:1;width:100%}
.band-line{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,7vw,86px);line-height:.92;letter-spacing:-.01em;text-shadow:0 4px 40px rgba(0,0,0,.6)}

/* ONE grid does the work of the old case studies + gallery */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{position:relative;overflow:hidden;background:var(--stage);aspect-ratio:1;display:block}
.cell img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cell:hover img{transform:scale(1.05)}
.cell .cap{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;
  background:linear-gradient(to top,rgba(8,8,10,.94) 12%,rgba(8,8,10,.55) 55%,transparent)}
.cell .cap h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1;margin:5px 0 3px}
.cell .cap em{font-style:normal;font-size:11px;color:var(--haze);letter-spacing:.04em}
/* MOBILE: 2 columns. The feature runs full width, and so does the last cell , 
   otherwise six items leave a hole in the bottom right. */
.f-wide{grid-column:span 2;aspect-ratio:16/10}
.grid .cell:last-child{grid-column:span 2;aspect-ratio:16/10}

/* "See all photos" is a full-width strip under the grid, not a cell. As a cell
   it had to be there or the layout broke, which is exactly what happened when
   the gallery page was unset. A strip can come and go without leaving a hole. */
.f-more{grid-column:1/-1;aspect-ratio:auto;display:grid;place-items:center;text-align:center;padding:26px 16px}
.f-more span{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;line-height:1.1;color:var(--haze)}
.f-more:hover span{color:var(--siren)}

@media(min-width:700px){
  /* DESKTOP: 6 columns, tiled so SIX items fill it exactly.
       row 1   [ feature x4 ][ 2 ]
       row 2   [ feature     ][ 3 ]
       row 3   [ 4 ][ 5 ][ 6 ]
     The feature spans two rows, so it reads as the hero of the section and the
     grid closes cleanly with no dead cell. */
  /* DESKTOP: 6 columns, tiled so SIX items fill it exactly and NO cell is ever
     empty. The first item is the feature whether or not anyone remembered to
     tick the box, a layout that depends on an editor setting a checkbox is a
     layout that will one day render a grey hole on the homepage. It just did.

       row 1  [ 1 . . . ][ 2 ]
       row 2  [ 1 . . . ][ 3 ]
       row 3  [ 4 ][ 5 ][ 6 ]                                            */
  .grid{grid-template-columns:repeat(6,1fr);grid-auto-flow:dense}
  .grid .cell,.grid .cell:last-child{grid-column:span 2;grid-row:auto;aspect-ratio:3/2}
  .grid .cell:first-child,
  .grid .f-wide{grid-column:span 4;grid-row:span 2;aspect-ratio:auto}
  .cell .cap h3{font-size:25px}
  .f-more span{font-size:21px}
}
/* Upcoming dates as cards. A single full-width row per event left a lot of dead
   space on the right, so two columns on desktop fill the measure and let the
   flyer be big enough to actually read. */
.events{list-style:none;display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
/* The flyer. Somebody designed it; let it do its job. */
.ev-flyer{display:block;width:104px;flex:0 0 104px;position:relative;
  padding:0;background:none;border:0;cursor:zoom-in;-webkit-tap-highlight-color:transparent;
  overflow:hidden;border-radius:3px}
.ev-flyer img{display:block;width:104px;height:139px;object-fit:cover;border:1px solid var(--line);
  border-radius:3px;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s}
.ev-flyer:hover img{transform:scale(1.04);border-color:var(--siren)}
/* A "View" chip that fades in on hover so the flyer reads as openable. */
.ev-zoom{position:absolute;left:50%;bottom:8px;transform:translateX(-50%) translateY(4px);
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:var(--siren);color:#fff;padding:3px 8px;border-radius:2px;
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.ev-flyer:hover .ev-zoom,.ev-flyer:focus-visible .ev-zoom{opacity:1;transform:translateX(-50%)}
.events-none{color:var(--haze);font-size:15px;padding:6px 0 2px}

/* Card internals: date sits as a small red marker above the name, venue below,
   ticket CTA pinned at the bottom so cards of different heights stay tidy. */

/* Two columns on desktop. A single full-width row per date wasted the right
   half of the measure; two columns fill it and keep the section compact. */
@media(min-width:820px){
  .events{grid-template-columns:1fr 1fr;gap:16px}
}

/* ---------- PAST DATES ----------
   A native <details>. No JavaScript, keyboard accessible, collapsed by default,
   and it costs the page nothing until somebody actually wants it. */
.past{margin-top:34px;border-top:1px solid var(--line);padding-top:22px}
.past summary{display:flex;align-items:baseline;gap:12px;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:19px;
  color:var(--haze);transition:color .2s;padding:4px 0}
.past summary::-webkit-details-marker{display:none}
.past summary::after{content:"+";margin-left:auto;font-size:22px;line-height:1;color:var(--haze);transition:transform .25s,color .2s}
.past[open] summary::after{transform:rotate(45deg);color:var(--siren-text)}
.past summary:hover{color:var(--chalk)}
.past summary:hover::after{color:var(--siren-text)}
.past summary em{font-family:var(--body);font-style:normal;font-weight:500;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:#5E5E68}

.flyers{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px 14px;margin-top:26px}
.flyers li{min-width:0}
.fl-btn{display:block;width:100%;padding:0;background:none;border:0;cursor:zoom-in;
  -webkit-tap-highlight-color:transparent}
.fl-btn img{transition:transform .3s ease,border-color .3s}
.fl-btn:hover img{transform:scale(1.03);border-color:var(--siren)}
.flyers img,.flyer-blank{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border:1px solid var(--line);background:var(--stage)}
.flyer-blank{display:grid;place-content:center;text-align:center;font-family:var(--display);
  font-weight:700;text-transform:uppercase;font-size:13px;color:var(--haze);letter-spacing:.1em}
.flyer-blank b{display:block;font-size:34px;line-height:1;color:#5E5E68;letter-spacing:0}
.fl-cap{display:block;margin-top:9px;min-width:0}
.fl-cap b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:15px;line-height:1.15;color:#B9B8B5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-cap i{display:block;font-style:normal;font-size:11px;color:var(--haze);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-cap time{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5E5E68;margin-top:3px}
@media(min-width:640px){ .flyers{grid-template-columns:repeat(4,1fr);gap:24px 18px} }
@media(min-width:1000px){ .flyers{grid-template-columns:repeat(6,1fr)} }

.events li{display:flex;align-items:flex-start;gap:18px;
  background:var(--stage);border:1px solid var(--line);border-radius:4px;
  padding:16px;transition:border-color .25s,background .25s;position:relative}
/* The text column. Everything after the flyer stacks here with tight, even
   spacing, instead of being spread apart by grid rows matching the flyer height. */
.ev-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;flex:1}
.events li:hover{border-color:#3A3A44;background:#17171B}
.ev-date{font-family:var(--body);font-weight:800;text-transform:uppercase;font-size:11px;
  line-height:1;color:var(--siren-text);white-space:nowrap;letter-spacing:.16em}
.ev-main{display:flex;flex-direction:column;gap:3px;min-width:0;width:100%}
.ev-name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1.02;display:block;letter-spacing:-.01em}
/* Venue gets real breathing room and a location marker, so where the set is
   reads as information rather than a footnote under the title. */
.ev-venue{display:flex;align-items:center;gap:6px;font-size:13.5px;color:#B9B8B5;
  margin-top:2px;letter-spacing:.01em}
.ev-venue::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--siren);flex:0 0 5px}
/* Optional one-line note (21+, free before 10pm, rooftop). Quieter than the
   venue so it reads as a footnote, not a second headline. */
.ev-note{font-size:12.5px;color:var(--haze);letter-spacing:.01em;margin-top:1px}
.ev-cta{margin-top:8px;display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border:1px solid var(--line);border-radius:3px;
  transition:border-color .2s,background .2s,color .2s;
  font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--chalk)}
.ev-cta:hover{border-color:var(--siren);background:rgba(230,35,41,.14);color:#fff}
.events-empty{padding:24px 0;color:var(--haze)}
@media(min-width:700px){
  .events li{padding:18px}
  .events li:not(:has(.ev-flyer)){grid-template-columns:120px 1fr auto}
  .ev-flyer{grid-row:auto}
  .ev-date{font-size:24px}
  .ev-cta{grid-column:3;margin-top:0}
}
/* The reveal only hides content once we KNOW JavaScript is alive. Without this
   guard, a blocked or broken script leaves most of the page at opacity:0 and
   the visitor sees an empty site. Fail visible, never fail blank. */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .hero.playing .wave b{animation:none}
  .h1-main .ln span{animation:none;transform:none}
}

/* ================= TABLET ================= */
@media(min-width:700px){
  :root{--pad:40px}
  section{padding:52px 0}
  .section-head{display:flex;align-items:baseline;gap:20px;padding-bottom:18px;margin-bottom:36px}
  .section-head h2{font-size:52px;margin-top:0;order:1}
  .section-head .eyebrow{margin-left:auto;order:2}
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat{border-bottom:0!important;border-right:1px solid var(--line)}
  .stat:last-child{border-right:0}
  .stat b{font-size:48px}
  .clients ul{grid-template-columns:repeat(6,1fr);gap:34px}
  .mixes,.cases{grid-template-columns:1fr 1fr}
  /* With only one mix, the two-column grid leaves a dead empty panel. Let a lone
     mix span full width until a second is added. */
  .mixes:has(.mix:only-child){grid-template-columns:1fr}
  .hero-cta{flex-direction:row}
  .contact-row{flex-direction:row}
  .form-actions{flex-direction:row;align-items:center}
  .btn-block{width:auto}
  .form-note{text-align:left}
}

/* ================= DESKTOP ================= */
@media(min-width:1000px){
  :root{--pad:56px;--barh:72px}
  body{font-size:17px}
  section{padding:56px 0}
  .nav-in{height:82px}
  /* Was 42px. Your mark IS your name, and at 42px nobody could read it. The
     Mr. SharePoint header gets this right and this one did not. */
  .nav-logo img{height:64px}
  /* Was 14px in --haze (5.75:1). Legible in a screenshot, tiring on a laptop in
     a bright room, which is where a bride actually reads this. Now 15px, heavier,
     and #C9C8C5 at 12.7:1. */
  /* The nav items were showing the browser's default list bullet, which reads as
     a radio-button selector ("pick one"), not a menu. Kill the markers. */
  .nav-links ul{list-style:none;margin:0;padding:0;display:flex;gap:30px}
  .nav-links li{list-style:none;margin:0}
  .nav-links li::marker{content:""}
  /* Nav STYLING lives here at 1000px, but the nav stays hidden until 1200px
     (see the dedicated block below) because the full nav needs ~1210px of width.
     Below that the burger handles it, so the logo never collides with "Home". */
  .nav-links a{position:relative;color:var(--haze);padding:6px 0;transition:color .2s}
  .nav-links a:hover{color:var(--chalk)}
  /* A red rule that draws in from the left. The only nav ornament on the site,
     and it uses the one colour the brand owns. */
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
    background:var(--siren);transition:width .25s cubic-bezier(.16,1,.3,1)}
  .nav-links a:hover::after,
  .nav-links .current-menu-item > a::after,
  .nav-links a.is-active::after{width:100%}
  /* Once scroll-spy marks a link active, the static current-page underline (Home)
     yields, so only one item is ever lit. Without this, Home stays underlined
     alongside whatever section you scrolled to. */
  .nav-links:has(a.is-active) .current-menu-item > a::after,
  .nav-links.spy-on .current-menu-item > a::after{width:0}
  .nav-links a.is-active{color:var(--chalk)}
  .nav-links:has(a.is-active) .current-menu-item > a,
  .nav-links.spy-on .current-menu-item > a{color:var(--haze)}
  .nav-links .current-menu-item > a{color:var(--chalk)}
  .booking{display:inline-flex}
  .u-loc{display:inline}
  .section-head h2{font-size:64px}
  .stat b{font-size:56px}
  .about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:stretch}
  .about-copy{display:flex;flex-direction:column}
  .about-portrait{margin-bottom:0;height:100%}
  .rule-list li{display:flex;gap:20px;align-items:baseline}
  .rule-list em{font-style:normal;color:var(--chalk);font-weight:600}
.reviews-live{margin-top:8px}
/* Admin-only diagnostic. Never shown to a visitor (gated by current_user_can). */
.reviews-admin-note{background:#2A1F00;border:1px solid #6b5200;color:#F0D98A;
  padding:16px 18px;border-radius:3px;margin-bottom:24px;font-size:14px;line-height:1.6}
.reviews-admin-note strong{color:#FFE9A8}
.rule-list .k{flex:0 0 134px;margin-bottom:0}
    .mix{padding:32px 28px}
  .mix h3{font-size:34px}
  .cases{grid-template-columns:repeat(2,1fr);gap:24px}
  .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;overflow:visible;margin:0;padding:0}
  .review{flex:1}
  .swipe-hint{display:none}
  .book-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:72px}
  .fields{grid-template-columns:1fr 1fr}
  .field.full{grid-column:1/-1}
  .foot-in{display:flex;align-items:center;gap:20px}
  .foot nav{margin:0 0 0 auto}
  .eq{display:flex}
  .p-actions .btn{min-height:40px;padding:0 20px;font-size:12px}
}
@media(min-width:1240px){
  /* The full nav needs ~1210px; below this the burger covers it. */
  .nav-links{display:flex!important;gap:26px;margin-left:auto;font-size:16px;font-weight:600;letter-spacing:.01em;list-style:none}
  .nav .btn{display:inline-flex!important;min-height:42px;padding:0 20px;font-size:12px;margin-left:20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .h1-main .ln span{transform:none}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   BLOG ,  where RankScore publishes. Same design language, built to read.
   ========================================================================== */
.page-hero{border-bottom:1px solid var(--line);padding:56px 0 40px}
/* 404: aligns to the same container origin as the header and everything else. */
.notfound{padding:90px 0 120px}
.notfound .eyebrow{display:block;margin-bottom:16px;color:var(--haze)}
.notfound-h{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(64px,13vw,150px);line-height:.82;letter-spacing:-.02em;color:var(--chalk);margin:0}
.notfound-p{margin-top:20px;font-size:19px;color:var(--haze)}
.notfound-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.page-hero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(44px,9vw,104px);line-height:.86;letter-spacing:-.02em}
.page-hero .eyebrow{display:block;margin-bottom:14px}
.page-hero p{margin-top:16px;color:var(--haze);max-width:52ch}
/* The FAQ intro is a single sentence meant to sit on one line on desktop, so it
   gets no width cap and is forced not to wrap. On phones (where one line will not
   fit) it wraps normally. !important overrides the inherited .page-hero p cap. */
.page-intro{max-width:none!important;white-space:nowrap}
@media(max-width:640px){
  .page-intro{white-space:normal}
}
.page-intro a{color:var(--siren-text);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.page-intro a:hover{color:var(--chalk)}

.post-list{list-style:none;border-top:1px solid var(--line)}
.post-list li{border-bottom:1px solid var(--line)}
.post-list a{display:grid;gap:6px;padding:26px 0;transition:opacity .2s}
.post-list a:hover{opacity:.7}
.post-list .meta{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--haze)}
.post-list h2{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,4.5vw,40px);line-height:1}
.post-list .excerpt{color:#B9B8B5;font-size:15px;max-width:64ch}
@media(min-width:900px){
  .post-list a{grid-template-columns:150px 1fr;gap:32px;align-items:baseline;padding:30px 0}
  .post-list .meta{padding-top:6px}
}

/* Long-form reading column. Deliberately narrower than the site grid. */
/* Landing layout: a capped reading column + a sticky booking rail. The 68ch cap
   stays (long text at full width is hard to read); the rail uses the space that
   cap used to leave empty, and keeps the ask in view the whole scroll. */
.lp-layout{display:block}
.prose{max-width:68ch;font-size:18px;line-height:1.72;color:#CFCECB}
@media(min-width:960px){
  .lp-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start}
  .prose{max-width:none}
  .lp-rail{position:sticky;top:130px}
}
.lp-card{background:var(--stage);border:1px solid var(--line);border-radius:4px;padding:26px 24px 24px;margin-top:40px}
@media(min-width:960px){ .lp-card{margin-top:0} }
.lp-rating{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;margin-bottom:16px}
.lp-rating b{font-family:var(--display);font-weight:900;font-size:32px;line-height:1;color:var(--chalk)}
.lp-rating i{color:var(--siren);font-style:normal;font-size:15px;letter-spacing:1px}
.lp-rating em{flex-basis:100%;font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--haze)}
.lp-line{font-size:15px;line-height:1.55;color:#C4C3C0;margin-bottom:18px}
.lp-card .btn{margin-bottom:10px}
.lp-reply{display:block;text-align:left;font-size:12px;color:var(--haze);margin-top:6px}
.prose > * + *{margin-top:1.15em}
.prose h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:34px;line-height:1;color:var(--chalk);margin-top:2em}
.prose h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:25px;line-height:1.05;color:var(--chalk);margin-top:1.6em}
.prose a{color:var(--chalk);border-bottom:1px solid var(--siren)}
.prose a:hover{color:var(--siren-text)}
.prose strong{color:var(--chalk);font-weight:600}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.5em}
.prose ul li::marker{color:var(--siren)}

/* Pricing tables on landing pages. Left as bare HTML they render as default
   browser tables, the one place these pages look unstyled. This turns them into
   the same kind of price rows the rest of the site uses: label left, number
   right, a hairline between each, the number in the display face. */
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prose table tr{border-bottom:1px solid var(--line)}
.prose table tr:last-child{border-bottom:0}
.prose table th,.prose table td{padding:16px 4px;text-align:left;vertical-align:baseline}
.prose table th{font-weight:500;color:#C4C3C0;font-size:16px}
.prose table td{text-align:right;white-space:nowrap;padding-left:24px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:20px;letter-spacing:.01em;color:var(--chalk)}

/* FAQ accordions. Native <details>: real expand/collapse with zero JavaScript,
   keyboard-accessible, and Google can still read the collapsed answers for SEO.
   A JS widget would hide the content from search; this does not. */
.prose details.faq{border-bottom:1px solid var(--line);margin:0}
.prose details.faq + details.faq{margin-top:0}
.prose details.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(17px,2.2vw,21px);
  line-height:1.25;letter-spacing:.01em;color:#C9C8C5;transition:color .2s}
.prose details.faq summary::-webkit-details-marker{display:none}
.prose details.faq summary:hover{color:var(--chalk)}
/* the +/x toggle */
.prose details.faq summary::after{content:"";position:absolute;right:6px;top:26px;
  width:15px;height:15px;
  background:
    linear-gradient(var(--siren),var(--siren)) center/15px 2px no-repeat,
    linear-gradient(var(--siren),var(--siren)) center/2px 15px no-repeat;
  transition:transform .28s cubic-bezier(.16,1,.3,1)}
.prose details.faq[open] summary{color:var(--chalk)}
.prose details.faq[open] summary::after{transform:rotate(135deg)}
.prose details.faq .faq-a{padding:0 44px 24px 0;animation:faq-in .3s ease}
.prose details.faq .faq-a p{margin:0 0 12px;font-size:17px;line-height:1.65;color:#B9B8B5}
.prose details.faq .faq-a p:last-child{margin-bottom:0}
.prose details.faq .faq-a ul{margin:8px 0 0;padding-left:1.2em}
.prose details.faq .faq-a li{color:#B9B8B5}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* the category heading above each accordion group */
.prose .faq-group{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:14px;letter-spacing:.14em;color:var(--haze);
  margin:44px 0 6px;padding-bottom:0;border:0}
.prose .faq-group:first-of-type{margin-top:8px}
.prose blockquote{border-left:2px solid var(--siren);padding-left:22px;font-size:21px;
  line-height:1.5;color:var(--chalk)}
.prose img,.prose figure img{width:100%;height:auto;border:1px solid var(--line)}
.prose figcaption,.wp-caption-text{font-size:13px;color:var(--haze);margin-top:8px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--stage);border:1px solid var(--line);padding:2px 6px;border-radius:2px}
.prose pre{background:var(--stage);border:1px solid var(--line);padding:20px;overflow-x:auto}
.prose pre code{background:none;border:0;padding:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:var(--stage);font-weight:600;color:var(--chalk)}

.post-foot{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.post-foot .btn{margin-left:auto}
.pagination{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
.pagination .page-numbers{display:grid;place-items:center;min-width:var(--tap);height:var(--tap);
  padding:0 14px;border:1px solid var(--line);font-size:14px;font-weight:600}
.pagination .current,.pagination a:hover{border-color:var(--siren);color:var(--chalk)}

/* Blog CTA, every article ends by asking for the booking. */
.post-cta{margin-top:64px;padding:36px 28px;background:var(--stage);border:1px solid var(--line)}
.post-cta h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:34px;line-height:.95;margin-bottom:10px}
.post-cta p{color:var(--haze);margin-bottom:22px;max-width:46ch}
.post-cta .row{display:flex;flex-wrap:wrap;gap:10px}

/* WordPress core */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:10px;left:10px;z-index:200;width:auto;height:auto;clip:auto;
  background:var(--siren);color:#fff;padding:12px 18px;font-weight:700}
.alignwide{max-width:none}
.aligncenter{margin-left:auto;margin-right:auto}
.admin-bar .topbar{top:32px}
@media(max-width:782px){.admin-bar .topbar{top:46px}}

/* ==========================================================================
   PAGES ,  new pages you create in wp-admin
   ========================================================================== */

/* Landing hero: shorter than the homepage, one line of type, no waveform. */
.hero--landing{min-height:auto;padding:64px 0 56px}
.hero--landing .h1-main{font-size:clamp(40px,7vw,104px);line-height:.9;text-wrap:balance}
.hero--landing .h1-main .ln{white-space:normal}
.hero--landing .hero-cta{margin-top:28px;max-width:520px}
/* On phones the text spans the full width, so use a stronger bottom-weighted
   scrim (text sits low) and keep the face high and centered above it. */
@media(max-width:999px){
  .hero--landing::before{background:linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.35) 30%,rgba(11,11,12,.9) 100%)}
  .hero--landing .hero-bg{object-position:50% 18%}
}
@media(min-width:1000px){
  .hero--landing{min-height:66vh;padding:0}
  .hero--landing .hero-cta{flex-direction:row}
}

/* Full-width template. Content owns the grid; blocks can breathe. */
.page-content{padding:48px 0 96px}
.page-content > *{margin-bottom:1.2em}
.page-content > .alignwide{max-width:none;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1)}
.page-content > .alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}

/* ==========================================================================
   GUTENBERG CORE BLOCKS, on a dark page
   ========================================================================== */
.wp-block-heading{font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.95;color:var(--chalk);letter-spacing:-.01em}
h2.wp-block-heading{font-size:clamp(30px,4.4vw,52px);margin-top:1.6em}
h3.wp-block-heading{font-size:clamp(23px,3vw,32px);margin-top:1.4em}

.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 26px;background:var(--siren);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:2px}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--chalk);border:1px solid #4A4A54}

.wp-block-columns{display:flex;flex-wrap:wrap;gap:28px}
.wp-block-column{flex:1 1 260px;min-width:0}
@media(max-width:781px){.wp-block-columns{flex-direction:column}}

.wp-block-group{max-width:100%}
.wp-block-separator{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.wp-block-image img{width:100%;height:auto;border:1px solid var(--line)}
.wp-block-quote{border-left:2px solid var(--siren);padding-left:22px;font-size:21px;line-height:1.5;color:var(--chalk)}
.wp-block-pullquote{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0;text-align:center}
.wp-block-table td,.wp-block-table th{border:1px solid var(--line);padding:10px 12px}
.wp-block-table th{background:var(--stage);color:var(--chalk)}
.wp-block-cover{min-height:360px;display:grid;place-items:center;position:relative;overflow:hidden}
.wp-block-cover .wp-block-cover__inner-container{position:relative;z-index:1;text-align:center;padding:32px}
.wp-block-list li::marker{color:var(--siren)}
.wp-block-embed iframe{width:100%;border:0}
.wp-block-code{background:var(--stage);border:1px solid var(--line);padding:20px;overflow-x:auto}

/* Brand palette, wired to the editor colour picker */
.has-ink-background-color{background-color:var(--ink)}
.has-stage-background-color{background-color:var(--stage)}
.has-siren-background-color{background-color:var(--siren)}
.has-ink-color{color:var(--ink)}
.has-chalk-color{color:var(--chalk)}
.has-haze-color{color:var(--haze)}
.has-siren-color{color:var(--siren)}
.has-small-font-size{font-size:14px}
.has-normal-font-size{font-size:17px}
.has-large-font-size{font-size:22px}
.has-display-font-size{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:44px;line-height:1}


/* ==========================================================================
   FLYER LIGHTBOX , full-size poster viewer
   ========================================================================== */
/* Hidden by default. Shown ONLY via .is-open , do not rely on the [hidden]
   attribute here, because display:grid would override it and trap the user. */
.lb{display:none}
.lb.is-open{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(6,6,7,.95);backdrop-filter:blur(8px);padding:20px;
  animation:lbIn .18s ease;cursor:zoom-out}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
body.lb-open{overflow:hidden}
/* Posters deserve room: fill the viewport far more generously than before. */
.lb-fig{margin:0;max-width:min(96vw,900px);max-height:92vh;display:flex;
  flex-direction:column;align-items:center;gap:14px;cursor:default}
.lb-img{max-width:100%;max-height:84vh;width:auto;height:auto;display:block;
  border:1px solid var(--line);border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.6);
  cursor:default}
.lb-cap{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--haze);
  text-align:center;max-width:60ch}
.lb-close{position:absolute;top:16px;right:18px;width:44px;height:44px;display:grid;
  place-items:center;background:none;border:1px solid var(--line);border-radius:4px;
  color:var(--chalk);font-size:26px;line-height:1;cursor:pointer;
  transition:border-color .2s,background .2s}
.lb-close:hover{border-color:var(--siren);background:rgba(230,35,41,.14)}
@media(max-width:560px){
  .lb{padding:14px}
  .lb-close{top:10px;right:10px}
}

/* Required-field marker. Red so it reads at a glance against the muted labels,
   and aria-hidden in the markup because the input's own required attribute is
   what a screen reader announces. */
.req{color:var(--siren-text);font-weight:700;margin-left:2px}
.req-note{margin-left:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--haze);font-weight:600}

/* Validation state for a calendar-backed date field. The native input is
   invisible, so the error has to live on the trigger the user can actually see. */
.cal-field.has-error .cal-trigger{border-color:var(--siren);background:rgba(230,35,41,.10)}
.cal-field.has-error::after{content:"Pick a date to continue";display:block;margin-top:6px;
  font-size:12px;color:var(--siren-text)}