/* ============================================================================
   Kevin Wiles Music — Landing Page (Cinematic)
   Stylesheet. Loaded from the <helmet> block in the .dc.html file.

   Layout itself lives in inline styles on the elements (Design Canvas
   convention). This file carries: tokens, base rules, keyframes, hover /
   transition behaviour, and every responsive override.

   Overrides in the RESPONSIVE section need !important because they are
   fighting inline style attributes — that is expected here, not a smell.
   ============================================================================ */

/* ============================================================
   TOKENS
   Real values are written by componentDidMount() from the
   accentMode prop; these are the pre-hydration defaults so the
   page never flashes the wrong accent.
   ============================================================ */
:root {
  --kw2-accent: hsl(220, 71%, 35%);
  --kw2-accent-text: hsl(220, 71%, 62%);
  --kw2-ink: #F5F5F7;
  --kw2-muted: #9CA3AF;
  --kw2-bg: #0A0A0C;
  --kw2-nav-h: 74px;
}

/* ============================================================
   BASE — document defaults
   ============================================================ */
* { box-sizing: border-box; }
body { margin: 0; background: var(--kw2-bg); }
a { color: inherit; }
::selection { background: rgba(59, 130, 246, 0.35); }
::-webkit-scrollbar { display: none; }

/* The site uses the normal system cursor. Interactive elements get the
   pointer hand they would get on any other website. */
a, button, [onClick], .kw2-card, .kw2-track-row, .kw2-gallery-fig { cursor: pointer; }

/* Keyboard focus must stay visible now that there is no cursor styling. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--kw2-accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes kw2-grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}
@keyframes kw2-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes kw2-marquee-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes kw2-bloom {
  from { filter: brightness(0.82); }
  to   { filter: brightness(1.16); }
}
@keyframes kw2-wave {
  0%, 100% { transform: scaleY(0.55); opacity: 0.65; }
  50%      { transform: scaleY(1);    opacity: 1; }
}
@keyframes kw2-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kw2-accent) 55%, transparent); }
  50%      { box-shadow: 0 0 0 18px transparent; }
}

/* ============================================================
   ATMOSPHERE — film grain, drifting hero background
   ============================================================ */
/* Dialled back from 0.05 / 0.4s. The fast, heavy grain was reading as an
   effect in its own right instead of as film texture. */
.kw2-grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 3; opacity: 0.028;
  mix-blend-mode: overlay;
  animation: kw2-grain-shift 0.9s steps(3) infinite;
}
/* The hero bloom breathes very slowly so the empty background is not static.
   Only `filter` is animated here — GSAP owns this element's transform and
   opacity for the scroll parallax, and two writers on one property fight. */
#kw2-hero-glow { animation: kw2-bloom 11s ease-in-out infinite alternate; }

/* ============================================================
   HERO — split-text characters, tilted photo strip
   ============================================================ */
.kw2-char {
  display: inline-block; opacity: 0;
  transform: translateY(0.4em);
  will-change: transform, opacity;
}
.hero-photo { transition: transform 0.4s ease-out; }
.hero-photo:hover { transform: scale(1.06) rotate(0deg) !important; }

/* ============================================================
   NAV

   Layout is a three-column grid: brand | links | actions, with the outer
   columns both 1fr. That is what puts the link group at the true centre of
   the viewport rather than merely between its neighbours, so the centring
   holds even though the brand and the CTA are different widths.
   ============================================================ */
.kw2-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 16px 48px;

  /* Angled gradient rather than a flat fill, with a lit top edge and a
     darker underside so the bar reads as a solid object with depth. */
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent) 0%, transparent 42%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--kw2-accent) 62%, #05070d) 0%,
      var(--kw2-accent) 46%,
      color-mix(in srgb, var(--kw2-accent) 55%, #05070d) 100%);
  border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.34);
}

.kw2-nav-brand {
  justify-self: start;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.kw2-nav-brand img { height: 34px; width: auto; flex: none; display: block; }
.kw2-nav-brand-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 17px;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--kw2-ink);
}

.kw2-nav-links {
  justify-self: center;
  display: flex; align-items: center; gap: 34px;
}

.kw2-nav-end {
  justify-self: end;
  display: flex; align-items: center; gap: 14px;
}

.kw2-nav-cta {
  font-size: 13px; font-weight: 600;
  padding: 10px 22px;
  border-radius: 100px;
  background: var(--kw2-ink);
  color: var(--kw2-accent);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.kw2-nav-cta:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38); }

/* Underline that grows on hover / active section */
.kw2-nav-link {
  position: relative;
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--kw2-ink);
  white-space: nowrap;
}
.kw2-nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--kw2-ink);
  transition: width 0.3s ease;
}
.kw2-nav-link:hover::after,
.kw2-nav-link.kw2-active::after { width: 100%; }
.kw2-nav-link.kw2-active { opacity: 0.75; }

/* Hamburger + slide-down panel. Both are desktop-hidden and switched on
   inside the RESPONSIVE section below. */
/* Column flex, NOT grid. A grid here creates three implicit rows that stretch
   to fill the 44px button, which spreads the bars ~16px apart and leaves the
   open state's 7px translate far short of forming an X. Flex keeps each bar
   at its own 2px height, so with a 5px gap the stack is 16px and the outer
   bars sit exactly 7px either side of centre — which is what the open state
   translates by. Change the height or gap and that 7px must change with it. */
.kw2-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px; flex: none;
  padding: 0;
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, #fff 8%, transparent);
  cursor: pointer;
  transition: background 0.32s ease, border-color 0.32s ease,
              transform 0.32s cubic-bezier(.16, 1, .3, 1);
}
.kw2-burger:hover {
  background: color-mix(in srgb, #fff 17%, transparent);
  border-color: color-mix(in srgb, #fff 38%, transparent);
}
.kw2-burger:active { transform: scale(0.93); }

/* Open state inverts to a solid pill with the accent X, matching the
   "Listen Now" button so the two read as the same family. */
.kw2-burger[data-open="true"] {
  background: var(--kw2-ink);
  border-color: var(--kw2-ink);
}

.kw2-burger span {
  display: block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--kw2-ink);
  transition: transform 0.42s cubic-bezier(.16, 1, .3, 1),
              width 0.42s cubic-bezier(.16, 1, .3, 1),
              opacity 0.22s ease,
              background 0.32s ease;
}
/* Shorter bottom bar gives the closed icon some character instead of three
   identical rules; it grows back to full width to complete the X. */
.kw2-burger span:nth-child(3) { width: 13px; }

.kw2-burger[data-open="true"] span { background: var(--kw2-accent); }
.kw2-burger[data-open="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kw2-burger[data-open="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.kw2-burger[data-open="true"] span:nth-child(3) { width: 20px; transform: translateY(-7px) rotate(-45deg); }

.kw2-mobile-menu {
  display: none;
  position: fixed; top: var(--kw2-nav-h); left: 0; right: 0; z-index: 59;
  flex-direction: column;
  background: var(--kw2-accent);
  border-top: 1px solid rgba(245, 245, 247, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(.16, 1, .3, 1), opacity 0.25s ease;
}
.kw2-mobile-menu[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.kw2-mobile-menu a {
  padding: 16px 24px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--kw2-ink); text-decoration: none;
  border-bottom: 1px solid rgba(245, 245, 247, 0.12);
}
.kw2-mobile-menu a:last-child { border-bottom: none; }
/* flex, not block: the icon is an SVG with display:block, so on a plain
   block anchor it drops onto a line of its own and text-align cannot pull it
   back up. Same reason .kw2-stat-go is inline-flex. */
.kw2-mobile-menu .kw2-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 20px 18px;
  padding: 14px 20px;
  border: none; border-radius: 100px;
  background: var(--kw2-ink);
  color: var(--kw2-accent);
  font-weight: 600;
}

/* Condensed state once the page has scrolled past the hero: the bar tightens,
   darkens and picks up a blur so content reads through it cleanly. */
.kw2-nav {
  transition: padding 0.35s cubic-bezier(.16, 1, .3, 1),
              box-shadow 0.35s ease;
}
/* No backdrop-filter here on purpose. The bar's own background is opaque, so
   a blur has nothing to show through and buys nothing visually, while adding
   a compositing cost and a real risk of the whole bar failing to paint. */
.kw2-nav.kw2-nav-scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 7%, transparent) 0%, transparent 42%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--kw2-accent) 46%, #05070d) 0%,
      color-mix(in srgb, var(--kw2-accent) 78%, #05070d) 46%,
      color-mix(in srgb, var(--kw2-accent) 40%, #05070d) 100%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}
.kw2-nav-brand img { transition: height 0.35s cubic-bezier(.16, 1, .3, 1); }
.kw2-nav.kw2-nav-scrolled .kw2-nav-brand img { height: 28px; }

/* ============================================================
   ICONS

   Every icon on the page is an inline SVG on a 24x24 grid, drawn in
   currentColor so it inherits whatever it sits in. These replaced the
   character glyphs the page used to use (▶ ↗ → ← ↑), which rendered in
   whatever the system font decided, at inconsistent weights and baselines,
   and sat slightly off-centre in round buttons.
   ============================================================ */
/* Sized in em, not px, so an icon always tracks the text it sits beside.
   Fixed px sizes looked balanced next to the desktop type and then far too
   heavy once the same button shrank on a phone. */
.kw2-ico {
  flex: none;
  display: block;
  width: 0.95em; height: 0.95em;
}
.kw2-ico-sm { width: 0.85em; height: 0.85em; }

/* A filled triangle carries more visual weight than a stroked arrow in the
   same box, so it is set smaller to match. */
.kw2-ico-play { width: 0.8em; height: 0.8em; }

/* Icon-only contexts (the play discs over artwork) have no meaningful text
   size to inherit from, so those stay in px. */
.kw2-ico-play-lg { width: 26px; height: 26px; margin-left: 3px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.kw2-glow { position: relative; overflow: hidden; transition: box-shadow 0.3s ease; }
.kw2-glow:hover { box-shadow: 0 0 24px rgba(232, 176, 74, 0.5); }

/* Light sweeps across the primary buttons on hover. */
.kw2-glow::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.65s cubic-bezier(.16, 1, .3, 1);
}
.kw2-glow:hover::after { left: 130%; }
.kw2-outline-btn { transition: background 0.3s ease, border-color 0.3s ease; }
.kw2-outline-btn:hover {
  background: rgba(245, 245, 247, 0.1);
  border-color: rgba(245, 245, 247, 0.6) !important;
}

/* ============================================================
   STREAM & FOLLOW — social link rows
   ============================================================ */
.kw2-social { transition: border-color 0.3s ease, background 0.3s ease; }
.kw2-social:hover {
  border-color: color-mix(in srgb, var(--kw2-accent-text) 60%, transparent) !important;
  background: color-mix(in srgb, var(--kw2-accent) 8%, transparent);
}
.kw2-social-badge { transition: background 0.3s ease, color 0.3s ease; }
.kw2-social:hover .kw2-social-badge { background: var(--kw2-accent); color: var(--kw2-ink); }
.kw2-social-arrow { transition: transform 0.3s ease, color 0.3s ease; }
.kw2-social:hover .kw2-social-arrow { transform: translateX(4px); color: var(--kw2-accent-text); }

/* ============================================================
   PLATFORM STATS

   Each card carries its platform's own brand colour through --p, used only
   on the glyph, the wave and the hover edge. The page accent stays blue —
   three full-colour cards would fight the rest of the site.
   ============================================================ */
.kw2-stats { padding: 96px 48px; }
.kw2-stats-inner { max-width: 1220px; margin: 0 auto; }

.kw2-stats-head { text-align: center; margin-bottom: 52px; }
.kw2-kicker {
  font-size: 12px; letter-spacing: 0.18em; font-weight: 600;
  color: var(--kw2-accent-text);
  margin-bottom: 10px;
}
.kw2-stats-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 0;
}

.kw2-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.kw2-stat {
  --p: var(--kw2-accent-text);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--kw2-ink);
  background: linear-gradient(165deg,
    rgba(245, 245, 247, 0.055) 0%,
    rgba(245, 245, 247, 0.015) 60%,
    transparent 100%);
  border: 1px solid rgba(245, 245, 247, 0.1);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(.16, 1, .3, 1),
              border-color 0.4s ease,
              box-shadow 0.5s ease;
}

/* Brand-tinted bloom that only shows on hover. */
.kw2-stat::before {
  content: "";
  position: absolute; inset: -1px;
  background: radial-gradient(ellipse 70% 60% at 50% 0%,
    color-mix(in srgb, var(--p) 22%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.kw2-stat:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--p) 45%, transparent);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
}
.kw2-stat:hover::before { opacity: 1; }

.kw2-stat-yt { --p: #FF0033; }
.kw2-stat-sp { --p: #1DB954; }
.kw2-stat-tt { --p: #25F4EE; }

.kw2-stat-top {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 26px;
}
.kw2-stat-glyph {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--p);
  background: color-mix(in srgb, var(--p) 13%, transparent);
  transition: background 0.4s ease, transform 0.4s cubic-bezier(.16, 1, .3, 1);
}
.kw2-stat-glyph svg { width: 19px; height: 19px; display: block; }
.kw2-stat:hover .kw2-stat-glyph {
  background: color-mix(in srgb, var(--p) 24%, transparent);
  transform: scale(1.08);
}
.kw2-stat-name {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kw2-muted);
}

.kw2-stat-value {
  position: relative;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kw2-stat-metric {
  position: relative;
  margin-top: 9px;
  font-size: 13px;
  color: var(--kw2-muted);
}

/* Ornamental waveform. Deliberately not a chart: the bars carry no data and
   must not be read as one. */
.kw2-stat-wave {
  position: relative;
  display: flex; align-items: flex-end; gap: 4px;
  height: 40px;
  margin: 24px 0 20px;
}
.kw2-stat-wave span {
  flex: 1;
  min-height: 4px;
  border-radius: 2px;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--p) 70%, transparent),
    color-mix(in srgb, var(--p) 18%, transparent));
  transform-origin: bottom;
  animation: kw2-wave 2.4s ease-in-out infinite;
}
.kw2-stat-wave span:nth-child(1)  { height: 40%; animation-delay: 0s; }
.kw2-stat-wave span:nth-child(2)  { height: 68%; animation-delay: -0.9s; }
.kw2-stat-wave span:nth-child(3)  { height: 32%; animation-delay: -1.7s; }
.kw2-stat-wave span:nth-child(4)  { height: 84%; animation-delay: -0.4s; }
.kw2-stat-wave span:nth-child(5)  { height: 52%; animation-delay: -2.1s; }
.kw2-stat-wave span:nth-child(6)  { height: 96%; animation-delay: -1.2s; }
.kw2-stat-wave span:nth-child(7)  { height: 44%; animation-delay: -0.2s; }
.kw2-stat-wave span:nth-child(8)  { height: 76%; animation-delay: -1.9s; }
.kw2-stat-wave span:nth-child(9)  { height: 36%; animation-delay: -0.7s; }
.kw2-stat-wave span:nth-child(10) { height: 88%; animation-delay: -2.3s; }
.kw2-stat-wave span:nth-child(11) { height: 48%; animation-delay: -1.5s; }
.kw2-stat-wave span:nth-child(12) { height: 64%; animation-delay: -0.55s; }

.kw2-stat-go {
  position: relative;
  margin-top: auto;
  /* inline-flex, or the block-level SVG drops onto its own line */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px; font-weight: 600;
  color: var(--kw2-muted);
  transition: color 0.35s ease, transform 0.35s ease;
}
.kw2-stat:hover .kw2-stat-go {
  color: var(--p);
  transform: translateX(4px);
}

/* Overall totals strip under the three platform cards. It stays flatter than
   the cards — it is a summary of them, not a fourth competing block — but it
   earns its own presence from an accent bloom, a lit top edge and hairline
   dividers rather than from another set of borders and fills. */
.kw2-totals {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 20px;
  padding: 38px 24px 34px;
  border-radius: 16px;
  border: 1px solid rgba(245, 245, 247, 0.1);
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 0% 0%,
      color-mix(in srgb, var(--kw2-accent) 32%, transparent) 0%, transparent 58%),
    radial-gradient(90% 130% at 100% 100%,
      color-mix(in srgb, var(--kw2-accent-text) 12%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, rgba(245, 245, 247, 0.05), rgba(245, 245, 247, 0.012));
}

/* Lit top edge, brightest in the middle. */
.kw2-totals::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--kw2-accent-text) 75%, transparent) 50%,
    transparent);
}

.kw2-total {
  position: relative;
  text-align: center;
  padding: 2px 16px;
}

/* Hairline between columns. Applied to the second item onward so it never
   dangles off the end of the row. */
.kw2-total + .kw2-total::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 52px;
  background: linear-gradient(to bottom,
    transparent, rgba(245, 245, 247, 0.18), transparent);
}

.kw2-total-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--kw2-ink);
}

/* Numbers fade from white into the accent. Behind @supports because the
   fallback for an unsupported background-clip is invisible text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kw2-total-value {
    background-image: linear-gradient(178deg,
      var(--kw2-ink) 34%,
      color-mix(in srgb, var(--kw2-accent-text) 80%, var(--kw2-ink)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.kw2-total-label {
  margin-top: 11px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--kw2-muted);
  transition: color 0.35s ease;
}
.kw2-total:hover .kw2-total-label { color: var(--kw2-accent-text); }

/* ============================================================
   IMAGERY — gallery tiles and release cards (zoom on hover)
   ============================================================ */
.kw2-gallery-fig img,
.kw2-gallery-fig image-slot {
  transition: transform 0.7s cubic-bezier(.16, 1, .3, 1);
  filter: grayscale(0.25) contrast(1.1) saturate(0.9) brightness(0.95);
}
.kw2-gallery-fig:hover img,
.kw2-gallery-fig:hover image-slot { transform: scale(1.07); }

.kw2-card-fig img,
.kw2-card-fig image-slot { transition: transform 0.6s cubic-bezier(.16, 1, .3, 1); }
.kw2-card:hover .kw2-card-fig img,
.kw2-card:hover .kw2-card-fig image-slot { transform: scale(1.08); }
.kw2-card:hover .kw2-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* No transition here on purpose: gsap.quickTo drives this transform every
   frame, and a CSS transition on top of that is what made the tilt stutter. */
.kw2-tilt {
  will-change: transform;
  transform-style: preserve-3d;
}

/* Featured video — the play button breathes so it reads as clickable. */
.kw2-featured-play { animation: kw2-pulse 2.6s ease-in-out infinite; }
.kw2-featured:hover .kw2-featured-play { animation-play-state: paused; transform: translate(-50%, -50%) scale(1.12) !important; }
.kw2-featured .kw2-featured-play { transition: transform 0.35s cubic-bezier(.16, 1, .3, 1); }
.kw2-featured img { transition: transform 0.9s cubic-bezier(.16, 1, .3, 1); }
.kw2-featured:hover img { transform: scale(1.04); }

/* ============================================================
   FORM STATUS — inline result line under each form
   ============================================================ */
.kw2-form-status {
  margin: 14px 0 0;
  font-size: 14px;
  min-height: 1.2em;      /* reserve the line so nothing jumps on submit */
  color: var(--kw2-muted);
}
.kw2-form-status[data-state="ok"]    { color: var(--kw2-accent-text); }
.kw2-form-status[data-state="busy"]  { color: var(--kw2-muted); }
.kw2-form-status[data-state="error"] { color: #F87171; }

form button[type="submit"]:disabled { opacity: 0.55; cursor: default; }

/* ============================================================
   VIDEO LIST — rows slide toward the reader on hover
   ============================================================ */
.kw2-track-row {
  transition: background 0.25s ease, padding-left 0.25s ease;
}
.kw2-track-row::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--kw2-accent-text);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.kw2-track-row:hover::before { transform: scaleY(1); }
.kw2-track-row:hover {
  background: rgba(245, 245, 247, 0.04);
  padding-left: 18px !important;
}
.kw2-track-row:hover .kw2-track-title { color: var(--kw2-accent-text); }
.kw2-track-title { transition: color 0.25s ease; }

/* ============================================================
   MARQUEE BANDS

   Two ribbons crossing: a filled one leaning left and scrolling left, and an
   outlined one leaning right and scrolling right. Opposing angle AND opposing
   direction is what sells the cross; matching either one makes them look like
   a mistake. The filled band sits on top so the overlap has a clear winner.

   Speeds are deliberately slow (34s / 44s). The original 18s scroll read as
   busy, and two bands moving fast would be worse.
   ============================================================ */
.kw2-bands {
  position: relative;
  z-index: 4;
  width: 100%;
  margin-top: 54px;
}

.kw2-band {
  position: relative;
  width: 132vw;
  left: -16vw;
  overflow: hidden;
  padding: 13px 0;
}

.kw2-band-track {
  display: flex;
  width: max-content;
  animation: kw2-marquee 34s linear infinite;
}
.kw2-band-track-rev { animation: kw2-marquee-rev 44s linear infinite; }

.kw2-band-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 20px;
  white-space: nowrap;
  padding-right: 40px;
}

/* Filled ribbon, leaning left */
.kw2-band-solid {
  z-index: 2;
  transform: rotate(-1.4deg);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--kw2-accent) 68%, #05070d) 0%,
    var(--kw2-accent) 48%,
    color-mix(in srgb, var(--kw2-accent) 60%, #05070d) 100%);
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.45);
}
.kw2-band-solid .kw2-band-text { color: var(--kw2-ink); }

/* Outlined ribbon, leaning right so the two ribbons cross. It passes behind
   the filled one; the hollow lettering echoes the footer wordmark and keeps a
   second heavy blue bar off the page. */
.kw2-band-outline {
  z-index: 1;
  transform: rotate(1.9deg);
  margin-top: -21px;
  background: rgba(10, 10, 12, 0.82);
  border-top: 1px solid color-mix(in srgb, var(--kw2-accent-text) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--kw2-accent-text) 40%, transparent);
}
.kw2-band-outline .kw2-band-text {
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--kw2-ink) 55%, transparent);
}

/* ============================================================================
   RESPONSIVE
   Desktop (>1024px) is the original design and is left untouched.
   ============================================================================ */

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1024px) {
  .kw2-section        { padding-left: 32px !important; padding-right: 32px !important; }
  .kw2-about          { gap: 48px !important; }
  .kw2-disco,
  .kw2-contact        { gap: 40px !important; }
  .kw2-press-grid     { gap: 32px !important; }
  /* Carousel arrows sit outside the track and would clip; touch can swipe. */
  .kw2-carousel-btn   { display: none !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  /* Nav collapses to the hamburger. Two columns now: brand | actions. */
  .kw2-nav            { grid-template-columns: 1fr auto; padding: 14px 20px; gap: 14px; }
  .kw2-nav-links      { display: none; }
  .kw2-burger         { display: flex; }
  .kw2-mobile-menu    { display: flex; }
  .kw2-nav-cta        { padding: 9px 16px; font-size: 12px; }

  /* Two-column blocks stack */
  .kw2-about,
  .kw2-disco,
  .kw2-contact        { grid-template-columns: 1fr !important; }
  .kw2-about-photo    { max-width: 420px; }
  .kw2-social-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .kw2-press-grid     { grid-template-columns: repeat(2, 1fr) !important; }

  /* Stats go 3 -> 1: at two-up the third card is left stranded on its own
     row, which looks like a mistake. */
  .kw2-stats          { padding: 76px 32px; }
  .kw2-stats-grid     { grid-template-columns: 1fr; gap: 16px; }
  .kw2-stat           { padding: 26px 24px 22px; }
  .kw2-stats-head     { margin-bottom: 38px; }
  /* Totals go 4 -> 2; four across is unreadable at this width. With two
     columns the divider must only sit between the pair, so it is switched to
     the even items — on the 4-up layout every item but the first has one. */
  .kw2-totals         { grid-template-columns: repeat(2, 1fr); row-gap: 30px; padding: 30px 16px 26px; }
  .kw2-total + .kw2-total::before { content: none; }
  .kw2-total:nth-child(even)::before {
    content: ""; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 46px;
    background: linear-gradient(to bottom, transparent, rgba(245, 245, 247, 0.18), transparent);
  }
}

@media (max-width: 420px) {
  /* One column at the very bottom end; two 5-digit numbers side by side get
     too tight once the padding is this small. */
  .kw2-totals         { grid-template-columns: 1fr; row-gap: 26px; }
  .kw2-total:nth-child(even)::before { content: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
  .kw2-section        { padding-top: 64px !important; padding-bottom: 64px !important;
                        padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero */
  #hero               { padding: 110px 20px 48px !important; min-height: auto !important; }
  .kw2-hero-title     { font-size: clamp(34px, 11vw, 64px) !important; }
  .kw2-hero-sub       { font-size: 11px !important; letter-spacing: 0.16em !important; }
  .kw2-hero-badge     { margin-bottom: 20px !important; font-size: 10px !important; }
  .kw2-hero-strip     { gap: 10px !important; margin-top: 26px !important; }
  .kw2-hero-strip .hero-photo { width: 84px !important; }
  .kw2-hero-copy      { font-size: 15px !important; margin: 32px 0 26px !important; }
  .kw2-hero-cta       { flex-direction: column !important; width: 100%; max-width: 300px; gap: 12px !important; }
  .kw2-hero-cta a     { width: 100%; justify-content: center;
                        font-size: 14px !important;
                        padding: 15px 22px !important;
                        gap: 9px !important; }
  .kw2-bands          { margin-top: 38px; }
  .kw2-band           { padding: 9px 0; }
  .kw2-band-text      { font-size: 15px; padding-right: 28px; }
  /* Shallower angles at phone width: the steep lean wastes vertical space
     and pushes the lettering out of the ribbon. */
  .kw2-band-solid     { transform: rotate(-1deg); }
  .kw2-band-outline   { transform: rotate(1.3deg); margin-top: -15px; }

  /* Grids collapse to a single column */
  .kw2-social-grid,
  .kw2-press-grid     { grid-template-columns: 1fr !important; gap: 14px !important; }
  .kw2-press-grid     { gap: 32px !important; }
  .kw2-gallery-grid   { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Section headings */
  .kw2-sec-head       { flex-wrap: wrap !important; gap: 12px !important; margin-bottom: 32px !important; }

  /* Releases carousel — cards shrink to nearly full width */
  .kw2-card           { flex: 0 0 78vw !important; }
  #kw2-releases-track { gap: 16px !important; }

  /* Featured video is too letterboxed at 16/7 on a phone */
  .kw2-featured       { aspect-ratio: 16 / 10 !important; }

  /* Show listings wrap onto three rows with a full-width ticket button */
  .kw2-show-row       { flex-wrap: wrap !important; gap: 6px 14px !important; padding: 18px 4px !important; }
  .kw2-show-row .kw2-show-date  { width: auto !important; font-size: 16px !important; }
  .kw2-show-row .kw2-show-city  { flex: 1 1 auto !important; font-size: 15px !important; }
  .kw2-show-row .kw2-show-venue { flex: 1 1 100% !important; font-size: 13px !important; }
  .kw2-show-row .kw2-show-btn   { flex: 1 1 100% !important; text-align: center; margin-top: 8px; }

  /* Track rows */
  .kw2-track-row      { gap: 10px !important; padding: 14px 6px !important; }
  .kw2-track-title    { font-size: 14px !important; }

  /* Forms stack */
  .kw2-news-form      { flex-direction: column !important; }
  .kw2-news-form button { width: 100%; }
  .kw2-contact-names  { grid-template-columns: 1fr !important; }
  .kw2-contact form button { width: 100% !important; }

  /* FAQ */
  .kw2-faq-q          { font-size: 15px !important; padding: 18px 0 !important; }

  /* Footer */
  .kw2-footer         { padding: 48px 20px 32px !important; }
  .kw2-footer-bottom  { justify-content: center !important; text-align: center; }

  /* Back-to-top sits tighter into the corner on a phone */
  #kw2-top            { bottom: 16px !important; right: 16px !important;
                        width: 42px !important; height: 42px !important; }
}

/* ---------- Small phone ---------- */
@media (max-width: 560px) {
  /* Logo + wordmark + CTA + burger no longer fit on one line, and the burger
     was the thing being pushed off the edge. The CTA moves into the menu. */
  .kw2-nav            { padding: 12px 16px; gap: 10px; }
  .kw2-nav-cta        { display: none; }
  .kw2-nav-brand-text { font-size: 15px; }
  .kw2-nav-brand img  { height: 30px; }
  .kw2-nav.kw2-nav-scrolled .kw2-nav-brand img { height: 26px; }
}

@media (max-width: 480px) {
  .kw2-hero-strip .hero-photo { width: 72px !important; }
  .kw2-gallery-grid   { gap: 8px !important; }
  .kw2-card           { flex: 0 0 84vw !important; }
  .kw2-section        { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .kw2-grain,
  #kw2-hero-glow,
  .kw2-stat-wave span,
  .kw2-featured-play { animation: none !important; }
  .kw2-band-track     { animation-duration: 110s !important; }
  .kw2-band-track-rev { animation-duration: 130s !important; }
}