/* ============================================================================
   MUSICMIX ENTERTAINMENT — mmx.css
   One stylesheet for the whole site (cached after first page load).

   HOW THIS FILE IS ORGANISED
   01 Brand tokens ......... colours, type, spacing — change brand here only
   02 Base + reset
   03 Layout + typography scale
   04 Buttons
   05 Header + vertical overlay menu
   06 Hero + the console (signature element)
   07 Sections, cards, grids
   08 Ecosystem module
   09 Process steps
   10 Services
   11 Roster grid + act pages
   12 Forms
   13 Footer
   14 Motion, focus, print, responsive

   SIBLING NOTE: type scale, spacing rhythm, nav pill and card language are
   deliberately shared with pressplaytickets.com. Only the palette changes.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   01 BRAND TOKENS  ← 99% of brand changes happen in this block
   ------------------------------------------------------------------------ */
:root{
  /* Core surfaces — near-black with a violet bias (Press Play uses #0E0E11) */
  --bg:#0B0A10;
  --surface:#141220;
  --surface2:#1B1828;
  --line:#292437;

  /* Ink */
  --txt:#FFFFFF;
  --dim:#948CA8;          /* muted body / labels */
  --dimmer:#6A6480;       /* captions, legal */

  /* MUSICMIX purple.
     --brand is the exact purple from the logo file (mmx-2026.svg). It is very
     deep, so on a near-black page it fails contrast as text — it is used for
     solid brand moments only. --g1/--g2 are brightened extensions of the same
     hue for gradients and type; --accent is the readable link tint. */
  --brand:#6E02CC;        /* OFFICIAL logo purple */
  --g1:#9B30F5;           /* gradient start */
  --g2:#D63BFF;           /* gradient end   */
  --accent:#A45CFF;       /* links, hovers, rules — 5.2:1 on --bg */
  --accent-soft:rgba(164,92,255,.14);
  --paper:#F0EAF5;        /* off-white from the logo file */

  /* Sibling brand colours — used ONLY in the ecosystem module.
     Swap --viq if VenueIQ's official hex differs. */
  --pp:#FF4645;           /* Press Play Tickets (official gradient start) */
  --pp2:#FC6132;          /* Press Play gradient end */
  --viq:#22D3EE;          /* VenueIQ */

  /* Type — Inter throughout, matching Press Play. There is deliberately no
     second typeface on this site: labels and eyebrows are Inter, set small,
     letterspaced and uppercase — and HEAVY (800). Light or medium weights at
     small sizes read as generic Helvetica; the site's character comes from
     keeping the weight up. Do not reintroduce a monospace stack. */
  /* HEADINGS + LABELS — Inter. Do not change: this is the big bold title face.
     ANY element at font-weight 700 or above must set font-family:var(--font).
     The body face (Montserrat) is only loaded to 600 — heavier than that gets
     faked by the browser and looks thin and wrong. */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --label:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* BODY COPY — matches the Yacht Rock Show site. Gotham is used if it is
     installed or self-hosted; Montserrat is the loaded web fallback and is the
     closest widely-available match (same geometric, round, wide skeleton).
     To self-host Gotham, drop the woff2 files in assets/fonts/ and add an
     @font-face block — the stack below will pick it up with no other edits. */
  /* Montserrat only. "Gotham" was in this stack and, on a machine where Gotham
     is installed, the family resolved to a BOLD cut and set the whole site in
     bold. If you want real Gotham, self-host the Book weight with @font-face
     and add it here — do not rely on a locally installed family name. */
  --body:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* Type width. Inter has no width axis, so the 3% widening is a horizontal
     scale on text elements only — images and layout boxes are untouched.
     Set to 1 to switch it off. */
  --type-stretch:1.03;

  /* Metrics */
  --max:1180px;
  --gutter:clamp(20px,5vw,64px);
  /* Respects the iPhone notch and rounded corners, especially in landscape. */
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --radius:16px;
  --radius-sm:10px;
  /* Taller bar so the full logo lockup fits — the "entertainment" line is
     only ~19% of the artwork height, so the mark has to be ~50px tall before
     that line is legible. Shrinks on small screens (see the media queries). */
  --header-h:88px;
}

/* ---------------------------------------------------------------------------
   02 BASE
   ------------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;   /* iOS must not inflate type in landscape */
  /* Kills the sideways drag on iPhone. overflow-x:hidden on <body> alone does
     not stop it in iOS Safari — the guard has to be on <html> as well. clip is
     the correct modern value (it does not create a scroll container, so
     position:sticky keeps working); hidden is the fallback for Safari < 16. */
  overflow-x:hidden;
}
body{
  font-family:var(--body);
  font-weight:400;              /* explicit — never inherit a heavier default */
  background:var(--bg);
  color:var(--txt);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}            /* set while the menu overlay is open */
img,svg,video,iframe{display:block;max-width:100%}

/* Only image-bearing grid cells need min-width relaxed — applying it globally
   let every column shrink below its content and wrecked headline wrapping. */
.grid > .frame,.grid > * > .frame{min-width:0}

/* Long unbroken strings (URLs, act names) wrap instead of overflowing. */
h1,h2,h3,h4,p,li,a,.lead{overflow-wrap:break-word}

/* Removes the 300ms tap delay and the grey flash on iOS. */
a,button,summary,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* ---------------------------------------------------------------------------
   03 LAYOUT + TYPE SCALE
   ------------------------------------------------------------------------ */
.wrap{max-width:var(--max);margin:0 auto;
  padding-left:calc(var(--gutter) + var(--safe-l));
  padding-right:calc(var(--gutter) + var(--safe-r))}
.section{padding:clamp(64px,9vw,120px) 0}
.section--tight{padding:clamp(44px,6vw,76px) 0}
.section--line{border-top:1px solid var(--line)}
.narrow{max-width:760px}
.center{text-align:center}
.center .narrow{margin-left:auto;margin-right:auto}

/* Eyebrow: small uppercase label above a heading — used site-wide as the
   structural marker (console/channel-label language, not decoration). */
.eyebrow{
  font-family:var(--label);
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
  display:flex;align-items:center;gap:12px;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--g1),var(--g2));flex:none}
.center .eyebrow,.eyebrow.center{justify-content:center}

h1,h2,h3,h4{font-family:var(--font);line-height:1.05;letter-spacing:-.035em;font-weight:800}
/* Display sizes: heavier and tighter than the body scale — the Press Play
   hero treatment. Line 1 stays white, line 2 takes the gradient (.grad). */
h1{font-size:clamp(44px,7.6vw,88px);font-weight:900;line-height:.93;letter-spacing:-.045em}
h2{font-size:clamp(32px,5.2vw,60px);font-weight:900;line-height:.96;letter-spacing:-.04em}
h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;line-height:1.2}
h4{font-size:17px;letter-spacing:-.01em;line-height:1.3}

/* 3% horizontal widening — applied to type, never to images or containers.
   transform-origin keeps left-aligned text on the grid and centred text centred. */
/* The 3% widening applies to DISPLAY type only — headlines, labels, stats.
   Applying it to paragraphs was what made body copy read spaced out: every
   glyph got wider and the gaps opened with them. Body text is left alone. */
h1,h2,h3,h4,.eyebrow,.nav-list a,.ftr h5,.stat b,.stat span{
  transform:scaleX(var(--type-stretch));
  transform-origin:left center;
}
.center h1,.center h2,.center h3,.center p,.center .eyebrow,
.cta-band h2,.cta-band p,.cta-band .lead{transform-origin:center}

.lead{font-size:clamp(16px,1.6vw,19px);font-weight:400;color:var(--dim);max-width:62ch}
/* Body tracking is pulled tight to compensate for --type-stretch, which
   widens each glyph and would otherwise leave the text looking spaced out. */
p,li,cite{font-weight:400}
p,li,.lead,cite,label{letter-spacing:-.004em}
.lead strong{color:var(--txt);font-weight:600}
p+p{margin-top:16px}

/* Gradient text — the house accent treatment (mirrors Press Play) */
/* Gradient type. Runs DOWNWARD, and the colour ramp is stretched to 300% of
   the text height so the shift is gradual rather than a hard sweep. Used on
   the second line of every page headline and on the section subtitles. */
.grad{
  background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 100%);
  background-size:100% 300%;
  background-position:0 18%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------------------------------------------------------------------------
   04 BUTTONS
   ------------------------------------------------------------------------ */
.btn{
  font-family:var(--font);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  padding:12px 24px;border-radius:99px;white-space:nowrap;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:linear-gradient(120deg,var(--g1),var(--g2));color:#fff}
.btn--ghost{border:1px solid var(--line);color:var(--txt)}
.btn--ghost:hover{border-color:var(--accent);background:var(--accent-soft)}
.btn--sm{padding:9px 18px;font-size:13px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Quiet text link with an animated rule */
.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--accent);
}
.tlink span{transition:transform .18s ease}
.tlink:hover span{transform:translateX(4px)}

/* ---------------------------------------------------------------------------
   05 HEADER + VERTICAL OVERLAY MENU
   ------------------------------------------------------------------------ */
.hdr{
  position:sticky;top:0;z-index:80;
  background:rgba(11,10,16,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr-in{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--max);margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
}
.brand{display:flex;align-items:center;gap:10px;line-height:0;flex:none}
/* Header / menu use the WORDMARK crop (mmx-wordmark.svg) — the purple
   "entertainment" line in the full lockup is unreadable below ~40px. */
/* Header + overlay menu use the FULL lockup (mmx-logo.svg). */
.brand img,.brand svg{height:clamp(38px,4.6vw,50px);width:auto}
/* Footer uses the FULL lockup (mmx-logo.svg) where it has room to breathe. */
.brand--full img{height:auto;width:clamp(200px,18vw,240px)}
.hdr-right{display:flex;align-items:center;gap:14px}

/* Menu trigger — three rules that collapse into two on hover (fader handles) */
.menu-btn{display:flex;align-items:center;gap:11px;padding:8px 4px}
.menu-btn .lbl{
  font-family:var(--label);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  transition:color .15s ease;
}
.menu-btn:hover .lbl{color:var(--txt)}
.menu-bars{width:22px;display:grid;gap:5px}
.menu-bars i{display:block;height:2px;background:var(--txt);transition:transform .25s ease,width .25s ease}
.menu-bars i:nth-child(2){width:14px;margin-left:auto}
.menu-btn:hover .menu-bars i:nth-child(2){width:22px}

/* The overlay: full-screen, items stacked vertically (Paquin-style takeover) */
.nav-overlay{
  position:fixed;inset:0;z-index:90;
  background:var(--bg);
  display:grid;grid-template-rows:var(--header-h) 1fr;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.nav-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.nav-overlay::after{ /* soft violet wash from the lower left */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 8% 100%,rgba(110,2,204,.30),transparent 62%);
}
.nav-top{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--max);width:100%;margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
  border-bottom:1px solid var(--line);position:relative;z-index:2;
}
.nav-close{display:flex;align-items:center;gap:11px}
.nav-close .lbl{font-family:var(--label);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.nav-close .x{position:relative;width:22px;height:16px}
.nav-close .x i{position:absolute;top:7px;left:0;width:22px;height:2px;background:var(--txt);transition:transform .2s ease}
.nav-close .x i:first-child{transform:rotate(45deg)}
.nav-close .x i:last-child{transform:rotate(-45deg)}
.nav-close:hover .x i:first-child{transform:rotate(135deg)}
.nav-close:hover .x i:last-child{transform:rotate(45deg)}

.nav-body{
  position:relative;z-index:2;
  max-width:var(--max);width:100%;margin:0 auto;
  padding:clamp(28px,5vw,60px) var(--gutter) 40px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,5vw,64px);align-content:start;
  overflow-y:auto;
}
.nav-list{display:flex;flex-direction:column}
.nav-list a{
  /* MENU = PAGE HEADINGS. Identical face, weight, tracking and case to the h1/h2
     display type: Inter, weight 900, sentence case (Home, About, Services...),
     tracking -.045em. Do NOT set text-transform here and do NOT point this at
     the body face — the menu is display type, not body type. */
  font-family:var(--font);
  position:relative;
  display:flex;align-items:baseline;gap:16px;
  padding:clamp(9px,1.4vw,15px) 0;
  font-size:clamp(30px,5.2vw,58px);font-weight:900;letter-spacing:-.045em;line-height:.96;
  text-transform:none;color:var(--txt);
  border-bottom:1px solid var(--line);
  transition:color .18s ease,padding-left .22s ease;
}
.nav-list a .idx{
  font-family:var(--label);font-size:11px;font-weight:800;letter-spacing:.16em;
  color:var(--dimmer);transition:color .18s ease;flex:none;
}
.nav-list a:hover,.nav-list a:focus-visible,.nav-list a[aria-current="page"]{
  color:transparent;background:linear-gradient(100deg,var(--g1),var(--g2));
  -webkit-background-clip:text;background-clip:text;
  padding-left:10px;
}
.nav-list a:hover .idx,.nav-list a[aria-current="page"] .idx{color:var(--accent)}

/* Right rail of the overlay: the ecosystem + direct contact */
.nav-rail{display:flex;flex-direction:column;gap:30px;padding-top:6px}
.nav-rail h5{
  font-family:var(--label);font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:14px;
}
.nav-rail ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.nav-rail li a{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--dim);transition:color .15s ease}
.nav-rail li a:hover{color:var(--txt)}
.nav-rail li a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.nav-rail li a.is-pp::before{background:var(--pp)}
.nav-rail li a.is-viq::before{background:var(--viq)}
.nav-rail p{font-size:14px;color:var(--dim)}

/* ---------------------------------------------------------------------------
   06 HERO + THE CONSOLE  (signature element)
   ------------------------------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;
  min-height:clamp(540px,84vh,860px);
  display:flex;align-items:flex-end;
  padding:clamp(90px,12vw,150px) 0 clamp(46px,7vw,80px);
}
/* Photo layer — three slides crossfading behind the copy (see mmx.js). */
.hero-media{position:absolute;inset:0;z-index:0}
.hero-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-slide.is-on{opacity:1}
.hero-media::after{ /* keeps the headline legible over any photograph */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(11,10,16,.95) 0%,rgba(11,10,16,.80) 44%,rgba(11,10,16,.28) 100%),
    linear-gradient(180deg,rgba(11,10,16,.80) 0%,rgba(11,10,16,0) 34%,rgba(11,10,16,.92) 100%);
}
/* Artist credit chip — top right, updates with the photo. */
.hero-chip{
  position:absolute;z-index:3;
  top:clamp(20px,4vw,36px);right:var(--gutter);
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:99px;
  background:rgba(11,10,16,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  font-family:var(--label);font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  transition:opacity .45s ease;
}
.hero-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);flex:none}
.hero-in{position:relative;z-index:2;width:100%}
.hero-copy{max-width:min(780px,74%)}
.hero h1{margin-bottom:18px}
/* The line that sits between the headline and the paragraph. */
.hero-tag{
  font-family:var(--font);
  font-size:clamp(18px,2.1vw,25px);font-weight:700;letter-spacing:-.02em;
  color:var(--txt);margin-bottom:16px;
}
.hero .lead{max-width:54ch}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;
  font-family:var(--label);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.hero-meta b{color:var(--txt);font-weight:500}

/* ---------------------------------------------------------------------------
   07 SECTIONS, CARDS, GRIDS
   ------------------------------------------------------------------------ */
.grid{display:grid;gap:clamp(14px,1.6vw,20px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,8vw,128px)}
/* Two columns of unequal height sit centred on each other, not pinned to the
   top. The :has() rule catches picture-beside-copy automatically; .grid--mid
   forces it anywhere else (and covers browsers without :has()).
   NOTE: do not add inline align-items to these blocks — an inline style beats
   this rule and the column silently jumps back to the top. */
.grid--2:has(> .frame),
.grid--mid{align-items:center}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* Five columns are narrow, so the stat headline steps down a size to stop
   longer entries wrapping awkwardly against the shorter ones. */
.grid--5 .stat b{font-size:clamp(19px,2.2vw,27px)}
.grid--5 .stat span{font-size:9.5px;letter-spacing:.14em}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}
.sec-hd .lead{margin-top:14px}

/* Capability cards carry a colour bar per channel — booking, promotion,
   marketing, production, media, skills. Colours set inline with --c1/--c2. */
.card--bar{position:relative;overflow:hidden;padding-top:clamp(30px,3.4vw,40px)}
.card--bar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:10px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
}
.card--bar .kicker{color:var(--c1)}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);
  transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
.card:hover{border-color:#3a3350;transform:translateY(-2px)}
.card h3{margin-bottom:10px}
.card p{font-size:15px;color:var(--dim)}
.card .kicker{
  font-family:var(--label);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dimmer);display:block;margin-bottom:14px;
}

/* Feature card — image-led, in the manner of the DWP service cards: colour
   bar, photo bleeding to all three top edges, then the copy block.
   NOTE: this must stay AFTER the .card rules above — same specificity, so
   whichever comes last wins. Moving it up re-introduces the card padding. */
.card--feature{padding:0;display:flex;flex-direction:column;overflow:hidden}
.card--feature .frame{
  border:0;margin:0;aspect-ratio:16/10;
  /* top corners follow the card radius; the colour bar sits over them */
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.card--feature .frame::after{content:none}          /* no grain over a real photo */
.card--feature .frame img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card--feature:hover .frame img{transform:scale(1.05)}
.card-body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.card-body .kicker{
  font-family:var(--label);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  display:block;margin-bottom:14px;
}
.card-body h3{margin-bottom:10px}
.card-body p{font-size:15px;color:var(--dim)}
.card-body .tlink{margin-top:auto;padding-top:18px}
/* Kill the bar's padding reservation — on a feature card the photo starts
   immediately and the bar overlays its top edge. */
.card--feature.card--bar{padding-top:0}
.card--feature.card--bar::before{z-index:3;border-radius:var(--radius) var(--radius) 0 0}

/* Tag list — the "what's included" chip rows used across Services */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;list-style:none}
.tags li{
  font-family:var(--label);font-size:12.5px;font-weight:700;letter-spacing:.005em;
  color:var(--dim);background:var(--surface2);border:1px solid var(--line);
  padding:6px 11px;border-radius:99px;
}

/* Stat / capability rows */
.stat{border-top:1px solid var(--line);padding-top:18px}
/* Accreditation marks — monoline, drawn to echo each real logo. */
.stat svg{height:30px;width:auto;stroke:var(--accent);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px;display:block;color:var(--accent)}
.stat b{font-family:var(--font);display:block;font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.stat span{font-family:var(--label);font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)}

/* Image frame: violet placeholder shows through until real art is dropped in.
   JS removes any <img class="swap"> that fails to load (see mmx.js). */
.frame{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(135deg,#241b3d,#120f1c 60%,#2a1338);
  border:1px solid var(--line);
}
.frame::after{ /* subtle grain so empty frames don't read as flat blocks */
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:3px 3px;
}
.frame img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
/* frame--contain: show the WHOLE photo rather than cropping to fill. Use where
   the shot must not lose anyone at the edges — posed band photos, for example. */
.frame--contain{background:linear-gradient(135deg,#241b3d,#120f1c 60%,#2a1338)}
.frame--contain img{object-fit:contain}
/* Placeholder frame for an act with no photo yet: the name, ghosted.
   Delete data-name and the frame--name class once a real image is dropped in. */
/* The ghost act-name is OFF by default and only appears once mmx.js confirms
   the image actually failed (.no-photo). Previously it was on by default and
   hidden on load — so any image that loaded without firing a load event the
   script could see (cached, lazy, slow) left the placeholder showing over a
   perfectly good photo. Failing closed is safer: a slow image shows an empty
   frame for a moment, a genuinely missing one shows its name. */
.frame--contain::before{content:none}
.frame--name::before{content:none}
.frame--name.no-photo::before{
  content:attr(data-name);position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:10%;
  font-family:var(--font);
  font-size:clamp(17px,2.1vw,26px);font-weight:900;letter-spacing:-.03em;line-height:1.05;
  color:rgba(255,255,255,.17);text-transform:uppercase;
}
.frame--wide{aspect-ratio:16/9}
.frame--sq{aspect-ratio:1/1}
.frame--tall{aspect-ratio:4/5}

/* ---------------------------------------------------------------------------
   BRAND PARTNERS
   A slow, continuous drift rather than a static block — the row eases in on
   scroll, then glides. Set in the body face at its lightest weight, wide and
   open, so it reads as a quiet credit line rather than a badge wall.
   The list is duplicated in the markup (aria-hidden on the copy) so the loop
   is seamless. Hover pauses it; reduced-motion stops it entirely.
   ------------------------------------------------------------------------ */
.partners-stage{
  position:relative;overflow:hidden;display:flex;
  width:100%;
  padding:clamp(6px,1vw,14px) 0;
  /* soft fade at both edges so names arrive and leave rather than pop */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.partners{
  /* flex-end, not center: every name lands on the same baseline whether or not
     the item above it has a logo. Centre alignment made short items float. */
  list-style:none;display:flex;align-items:flex-end;flex:none;
  gap:clamp(34px,5vw,80px);
  padding-right:clamp(34px,5vw,80px);   /* keeps the seam evenly spaced */
  animation:partners-drift 90s linear infinite;
}
.partners-stage:hover .partners{animation-play-state:paused}
.partners li{
  /* Logo sits ABOVE the name; both stay visible. When a logo file is missing
     the image is removed and the name simply stands on its own. */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;
  font-family:var(--body);
  font-size:clamp(12px,1.36vw,17px);   /* 20% down from 15/1.7/21 */
  font-weight:300;                     /* unchanged */
  text-transform:uppercase;
  letter-spacing:-.015em;   /* Montserrat is already wide — open tracking on top
                               of it reads as gaps between letters, not elegance */
  color:var(--dim);
  white-space:nowrap;
  opacity:.72;
  transition:opacity .5s ease,color .5s ease;
}
.partners li:hover{opacity:1;color:var(--txt)}

/* --- Real logos, when you have them ---------------------------------------
   Each name can carry an <img class="swap partner-logo">. If the file exists
   it loads and the text name hides; if it is missing the image is removed and
   the name stays. So the row works today with type only, and upgrades to logos
   one file at a time with no markup change.
   Use each brand's OFFICIAL white / one-colour reversed logo — do not redraw
   or recolour a mark yourself. Files go in assets/img/partners/.
   Every logo is normalised to the same optical height so a wide wordmark and
   a tall crest sit as equals. */
/* Hidden by default. mmx.js adds .has-logo to the <li> only once the file has
   genuinely loaded, so a missing logo never reserves space, never flashes, and
   never renders its alt text as stray words in the row. */
.partner-logo{display:none}
.partners li.has-logo .partner-logo{
  display:block;
  height:clamp(30px,3.4vw,44px);width:auto;max-width:210px;object-fit:contain;
  /* UNIFORM WHITE KNOCKOUT.
     brightness(0) crushes every colour in the file to black; invert(1) flips
     that to pure white. Alpha is untouched, so the logo's own shape survives
     exactly — a red wordmark, a gold crest and a black-and-white lockup all
     come out as the same clean white mark at the same optical size.
     This is the standard one-colour reversed treatment brand guidelines
     permit, applied mechanically to the official file. Nothing is redrawn.
     Hover restores the real colours. */
  filter:brightness(0) invert(1);
  opacity:.62;
  transition:opacity .5s ease,filter .5s ease;
}
.partners li:hover .partner-logo{opacity:1;filter:none}

/* If a particular logo must always appear in its real colours (some brands
   require it), add class="partner-logo keep-colour" to that one image. */
.partner-logo.keep-colour{filter:none;opacity:.85}
.partners li:hover .partner-logo.keep-colour{opacity:1}
/* With a logo above it the name reads as a caption, so it steps down a size. */
.partners li.has-logo{gap:clamp(8px,1vw,13px)}
.partners li.has-logo .partner-name{font-size:clamp(10px,0.96vw,12px);opacity:.85}
.partners li.has-logo .partner-name{font-size:clamp(10px,0.96vw,12px);opacity:.85}

/* Each list shifts by its own full width; with two identical lists the seam
   is invisible and the loop never restarts visibly. */
@keyframes partners-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-100%,0,0)}
}

/* The whole block eases up slowly on first view — cinematic, not snappy. */
.partners-stage.rv{transition:opacity 1.6s ease,transform 1.6s ease}

@media (prefers-reduced-motion:reduce){
  .partners{animation:none;flex-wrap:wrap;justify-content:center;padding-right:0}
  .partners-stage{-webkit-mask-image:none;mask-image:none;flex-wrap:wrap;justify-content:center}
  .partners[aria-hidden="true"]{display:none}
}

/* A single readable column of prose — used on the act pages now that the
   specs table is gone. Capped so lines don't run too long to track. */
/* Reading measure is capped on the paragraphs themselves, not the block, so
   the prose shares its left edge with the video and gallery below it. */
.prose{max-width:none}
.prose .lead{max-width:68ch}

/* Quote */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.4vw,28px)}
.quote p{font-size:16px;line-height:1.55}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:18px}
.quote .who img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex:none}
.quote .who cite{margin-top:0}
.quote cite{display:block;margin-top:16px;font-style:normal;font-family:var(--label);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}

/* ---------------------------------------------------------------------------
   08 ECOSYSTEM MODULE
   Each company keeps its own colour; MUSICMIX sits first as the parent.
   ------------------------------------------------------------------------ */
.eco{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.eco-card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,30px);
  padding-top:clamp(30px,3.4vw,40px);
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s ease,transform .2s ease;
}
.eco-card:hover{transform:translateY(-3px);border-color:#3a3350}
.eco-card::before{ /* colour bar identifies the company */
  content:"";position:absolute;top:0;left:0;right:0;height:10px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
}
.eco-card--mmx{--c1:var(--g1);--c2:var(--g2)}
.eco-card--pp{--c1:var(--pp);--c2:var(--pp2)}
.eco-card--viq{--c1:var(--viq);--c2:#5B8DEF}
/* All three marks sit in the same 32px box so they read as equals.
   VenueIQ's file has padding baked in, so it gets an optical bump. */
.eco-logo{height:32px;display:flex;align-items:center}
.eco-logo img{height:100%;width:auto;max-width:190px;object-fit:contain}
.eco-logo--viq img{height:124%}
/* Press Play's lockup includes an icon, so its wordmark reads smaller in the
   same box — a small bump evens the three marks out optically. */
.eco-logo--pp img{height:112%}
.eco-card .role{font-family:var(--label);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)}
.eco-card h3{font-size:22px}
.eco-card p{font-size:15px;color:var(--dim);flex:1}
.eco-card .tlink{color:var(--c1)}

/* ---------------------------------------------------------------------------
   09 PROCESS STEPS — numbered because the order is real (match→sell)
   ------------------------------------------------------------------------ */
.steps{counter-reset:step;display:grid;gap:0}
.step{
  counter-increment:step;
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(16px,3vw,40px);align-items:start;
  padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{
  content:"0" counter(step);
  font-family:var(--label);font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--accent);padding-top:6px;
}
.step h3{margin-bottom:0}
.step p{font-size:15px;color:var(--dim)}

/* ---------------------------------------------------------------------------
   10 SERVICES
   ------------------------------------------------------------------------ */
.svc{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(40px,6vw,76px) 0;border-top:1px solid var(--line);
}
.svc:first-of-type{border-top:0}
.svc h2{margin-bottom:14px}
.svc .promise{font-family:var(--font);font-size:clamp(17px,2vw,22px);font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.svc .promise .grad{display:inline}
.svc-side{display:flex;flex-direction:column;gap:18px}
.svc-note{border-left:2px solid var(--accent);padding-left:16px}
.svc-note b{display:block;font-size:15px;margin-bottom:4px}
.svc-note span{font-size:14px;color:var(--dim)}

/* ---------------------------------------------------------------------------
   11 ROSTER
   ------------------------------------------------------------------------ */
.roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.act{display:flex;flex-direction:column;gap:14px}
.act .frame{aspect-ratio:4/5;transition:transform .3s ease}
.act:hover .frame{transform:translateY(-3px)}
.act .frame img{transition:transform .5s ease,opacity .3s ease}
.act:hover .frame img{transform:scale(1.03)}
.act h3{font-size:20px}
.act .genre{font-family:var(--label);font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);margin-top:-6px}
.act p{font-size:14.5px;color:var(--dim)}

/* Act logo in the hero. Sits INSIDE the h1 with the act name as alt text, so
   the heading stays semantic and no text is hidden from search engines.
   Both max-width and max-height are capped: these logos range from a squarish
   script mark to a very wide wordmark, and constraining one axis alone lets
   the tall ones dominate the hero. */
.act-logo{
  display:block;width:auto;height:auto;
  max-width:min(100%,480px);
  max-height:clamp(88px,13vw,158px);
  margin-bottom:4px;
}
/* Optical sizing. A blocky all-caps mark fills its bounding box, while a script
   with swashes and two stacked lines does not — so matching the BOX height makes
   the caps look nearly twice as big. This class drops the cap for solid caps
   marks (ABBA Revisited) so its letterforms sit at the same visual weight as
   the Brass Transit and Yacht Rock scripts. */
.act-logo--caps{max-height:clamp(64px,9.4vw,114px)}
/* And the mirror problem: a very wide single-line wordmark (Motown 2 Mars is
   4.3:1) hits the WIDTH cap long before the height cap, so at full width its
   letters tower over the scripts. Narrowing the width cap brings it into line. */
.act-logo--wide{max-width:min(100%,350px)}

/* Act detail page */
.act-hero{position:relative;padding:clamp(36px,5vw,64px) 0 clamp(30px,4vw,48px)}
.act-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.act-hero .frame{aspect-ratio:4/3}
.back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  font-family:var(--label);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.back:hover{color:var(--txt)}
.specs{list-style:none;display:grid;gap:0;margin-top:8px}
.specs li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:13px 0;border-top:1px solid var(--line);font-size:15px}
.specs li:last-child{border-bottom:1px solid var(--line)}
.specs b{font-family:var(--label);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);padding-top:3px}

/* --- Act page: video, gallery, EPK, prev/next -------------------------------
   Click-to-play video facade: the YouTube thumbnail loads as a plain image and
   the iframe is only created on click (see mmx.js). Nothing from YouTube is
   requested until the visitor asks for it, so the page stays fast. */
.video{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--line);background:#0F0D18;
  cursor:pointer;
}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.video:hover img{transform:scale(1.03);opacity:.85}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.video-play i{
  width:clamp(62px,7vw,86px);height:clamp(62px,7vw,86px);border-radius:50%;
  background:linear-gradient(120deg,var(--g1),var(--g2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 50px -14px rgba(110,2,204,.9);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.video:hover .video-play i{transform:scale(1.08)}
.video-play i::after{
  content:"";margin-left:5px;
  border-left:clamp(18px,2vw,24px) solid #fff;
  border-top:clamp(11px,1.3vw,15px) solid transparent;
  border-bottom:clamp(11px,1.3vw,15px) solid transparent;
}
.video-cap{
  margin-top:14px;font-size:14px;color:var(--dimmer);
}

/* Prev / next act — purple circles, one on each side of the act name. */
.actnav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-top:1px solid var(--line);padding-top:clamp(22px,3vw,32px);
  margin-top:clamp(34px,5vw,60px);
}
.actnav a{display:flex;align-items:center;gap:14px;max-width:46%}
.actnav a:last-child{flex-direction:row-reverse;text-align:right}
.actnav .circle{
  flex:none;width:clamp(46px,5vw,58px);height:clamp(46px,5vw,58px);border-radius:50%;
  background:linear-gradient(120deg,var(--g1),var(--g2));
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.actnav a:hover .circle{transform:scale(1.09);box-shadow:0 14px 36px -10px rgba(110,2,204,.9)}
.actnav .circle svg{width:20px;height:20px;stroke:#fff;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.actnav .lbl{display:block;font-family:var(--label);font-size:10px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);margin-bottom:5px}
.actnav .nm{display:block;font-family:var(--font);font-size:clamp(15px,1.8vw,20px);
  font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--txt)}
.actnav a:hover .nm{color:var(--accent)}

@media (max-width:640px){
  .actnav .nm{font-size:14px}
  .actnav .lbl{font-size:9px;letter-spacing:.14em}
}

/* ---------------------------------------------------------------------------
   12 FORMS
   ------------------------------------------------------------------------ */
.form{display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--label);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:15px;color:var(--txt);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 14px;width:100%;transition:border-color .15s ease,background .15s ease;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);background:var(--surface2)}
.field input::placeholder,.field textarea::placeholder{color:var(--dimmer)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* honeypot */
.form-note{font-size:13px;color:var(--dimmer)}
.form-msg{display:none;font-size:14px;border-radius:var(--radius-sm);padding:13px 15px}
.form-msg.ok{display:block;background:var(--accent-soft);border:1px solid var(--accent);color:#fff}
.form-msg.err{display:block;background:rgba(255,70,69,.12);border:1px solid var(--pp);color:#fff}

/* ---------------------------------------------------------------------------
   13 FOOTER
   ------------------------------------------------------------------------ */
.ftr{border-top:1px solid var(--line);background:#08070C;padding:clamp(44px,6vw,72px) 0 30px}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.ftr-brand .brand{margin-bottom:16px}
.ftr-brand p{font-size:14px;color:var(--dim);max-width:38ch}
.ftr h5{font-family:var(--font);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txt);margin-bottom:16px}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ftr ul a{font-size:14.5px;color:var(--dim);transition:color .15s ease}
.ftr ul a:hover{color:var(--txt)}
.ftr-btm{
  margin-top:clamp(34px,5vw,54px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--dimmer);
}
.ftr-btm a:hover{color:var(--txt)}
.social{display:flex;gap:10px}
.social a{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--label);font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--dim);
  transition:border-color .15s ease,color .15s ease;
}
.social a:hover{border-color:var(--accent);color:var(--txt)}

/* Ambient violet wash — now lives on the testimonials section. */
.section--wash{
  background:
    radial-gradient(70% 130% at 20% 0%,rgba(110,2,204,.32),transparent 62%),
    radial-gradient(60% 120% at 85% 100%,rgba(214,59,255,.14),transparent 60%);
}

/* CTA band above the footer — photograph behind the type. */
.cta-band{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);
  background:#100C1A;
  padding:clamp(64px,8vw,104px) 0;text-align:center;
}
.cta-media{position:absolute;inset:0;z-index:0}
.cta-media img{width:100%;height:100%;object-fit:cover;opacity:.5}
.cta-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,10,16,.72),rgba(11,10,16,.86)),
    radial-gradient(70% 120% at 50% 0%,rgba(110,2,204,.42),transparent 66%);
}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{max-width:16ch;margin:0 auto 18px}
.cta-band .lead{margin:0 auto;text-align:center}

/* ---------------------------------------------------------------------------
   14 MOTION, FOCUS, RESPONSIVE
   ------------------------------------------------------------------------ */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}

/* Scroll reveal (JS adds .in when the element enters the viewport) */
/* FAIL-SAFE REVEALS.
   The .js class is set by a one-line inline script in <head>, so it is only
   ever present when JavaScript is actually running. That means content is
   visible by default and the fade is a progressive enhancement — if the script
   breaks, the page still shows everything instead of going blank. */
.rv{opacity:1}
.js .rv{opacity:0;transition:opacity .7s ease}
.js .rv.in{opacity:1}

/* Same reasoning for the hero: without JS the first slide still shows. */
.no-js .hero-slide:first-child{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1}
}

/* --- Tablet ------------------------------------------------------------- */
@media (max-width:980px){
  .hero-copy{max-width:100%}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--3,.eco{grid-template-columns:1fr}
  .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc,.act-hero-in{grid-template-columns:1fr}
  .step{grid-template-columns:44px minmax(0,1fr);row-gap:10px}
  .step p{grid-column:2}
  .nav-body{grid-template-columns:1fr;gap:36px}
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Phone -------------------------------------------------------------- */
@media (max-width:640px){
  .grid--2,.grid--4,.roster,.form-row{grid-template-columns:1fr}
  .grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hdr-right .btn{display:none}          /* CTA lives inside the menu on phones */
  :root{--header-h:72px}
  .brand img,.brand svg{height:36px}
  .hero{min-height:clamp(480px,78vh,620px)}
  .hero-chip{font-size:9.5px;padding:7px 12px;letter-spacing:.14em}
  .specs li{grid-template-columns:1fr;gap:4px}
  .ftr-top{grid-template-columns:1fr;gap:30px}
  .ftr-btm{flex-direction:column;align-items:flex-start}
}

/* --- Print -------------------------------------------------------------- */
@media print{
  .hdr,.nav-overlay,.cta-band{display:none}
  body{background:#fff;color:#000}
}


.who-initial{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(120deg,var(--g1),var(--g2));
  font-family:var(--font);font-size:16px;font-weight:800;color:#fff;letter-spacing:0;
}

/* VenueIQ set as type. There is no local logo file for it, and drawing a mark
   from memory would be inventing artwork — so it is typography, not a guess.
   Drop a real assets/img/viq-logo.svg in and swap this span for an <img>. */
.eco-wordmark{
  display:inline-block;font-family:var(--font);
  font-size:26px;font-weight:900;letter-spacing:-.03em;
  color:#5BE0E6;line-height:1;
}

/* ---------------------------------------------------------------------------
   SLIDESHOW
   A .frame containing several <img class="slide">. mmx.js cross-fades them on
   a timer. Purely additive: if the script does not run, the first slide is
   still visible, so the block never goes blank.

   TO ADD AN IMAGE: drop the file in assets/img/ and add one more
   <img class="slide" src="..." alt="..."> inside the .slideshow div.
   No other change needed — the script counts whatever is there.
   ------------------------------------------------------------------------ */
.slideshow{position:relative}
.slideshow .slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;
}
.slideshow .slide:first-child{opacity:1}   /* visible with no JS */
.slideshow .slide.is-on{opacity:1}
.js .slideshow .slide:first-child:not(.is-on){opacity:0}
@media (prefers-reduced-motion:reduce){
  .slideshow .slide{transition:none}
}