@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Archivo+Narrow:wght@400;500;600;700&display=swap');

/* ============================================================
   R*CKSTAR — COLOR TOKENS
   ============================================================ */
:root {
  --rs-soft-black: #101820;
  --rs-red: #ff0000;
  --rs-yellow: #edff00;
  --rs-turquoise: #11a7a0;
  --rs-silver: #e1e1e1;
  --rs-white: #ffffff;

  --neutral-950: #0a0e13;
  --neutral-900: #101820;
  --neutral-800: #1b242e;
  --neutral-700: #2b3640;
  --neutral-600: #45525e;
  --neutral-500: #6b7884;
  --neutral-400: #97a3ad;
  --neutral-300: #c2cad1;
  --neutral-200: #e1e1e1;
  --neutral-100: #eff0f1;
  --neutral-50:  #f7f8f8;

  --red-700: #b30000;
  --red-600: #d60000;
  --red-500: #ff0000;
  --red-400: #ff3b3b;
  --red-300: #ff7a7a;
  --red-100: #ffe5e5;

  --yellow-500: #edff00;
  --yellow-600: #d2e000;
  --turquoise-500: #11a7a0;
  --turquoise-600: #0d847e;
  --turquoise-100: #d6f1ef;

  /* Surfaces (dark by default) */
  --surface-page: var(--rs-soft-black);
  --surface-raised: var(--neutral-800);
  --surface-card: var(--neutral-800);
  --surface-inset: var(--neutral-950);
  --surface-inverse: var(--rs-white);
  --surface-overlay: rgba(10, 14, 19, 0.72);

  --text-primary: var(--rs-white);
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-muted: rgba(255, 255, 255, 0.44);
  --text-on-accent: var(--rs-white);
  --text-on-yellow: var(--rs-soft-black);
  --text-inverse: var(--rs-soft-black);
  --text-link: var(--rs-red);

  --accent: var(--rs-red);
  --accent-hover: var(--red-600);
  --accent-press: var(--red-700);
  --accent-subtle: rgba(255, 0, 0, 0.12);
  --star-color: var(--rs-red);

  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-default: rgba(255, 255, 255, 0.20);
  --border-strong: rgba(255, 255, 255, 0.40);
  --border-accent: var(--rs-red);

  --success: var(--turquoise-500);
  --warning: var(--yellow-500);
  --danger: var(--rs-red);
  --info: var(--turquoise-500);

  --focus-ring: var(--yellow-500);
}

.rs-light {
  --surface-page: var(--rs-white);
  --surface-raised: var(--rs-white);
  --surface-card: var(--rs-white);
  --surface-inset: var(--neutral-50);
  --surface-inverse: var(--rs-soft-black);
  --text-primary: var(--rs-soft-black);
  --text-secondary: rgba(16, 24, 32, 0.66);
  --text-muted: rgba(16, 24, 32, 0.44);
  --text-inverse: var(--rs-white);
  --border-subtle: rgba(16, 24, 32, 0.10);
  --border-default: rgba(16, 24, 32, 0.18);
  --border-strong: rgba(16, 24, 32, 0.40);
  color: var(--text-primary);
  background: var(--surface-page);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  --font-display: 'Anton', 'Helvetica Now Comp', 'Arial Narrow', sans-serif;
  --font-heading: 'Archivo Narrow', 'Helvetica Now Cond', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', 'Helvetica Now Text', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.04em;
  --tracking-caps: 0.08em;

  --leading-display: 0.92;
  --leading-heading: 1.02;
  --leading-snug: 1.18;
  --leading-body: 1.55;

  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 21px;
  --text-xl: 26px;
  --text-2xl: 33px;
  --text-3xl: 44px;
  --text-4xl: 60px;
  --text-5xl: 82px;
  --text-6xl: 112px;
  --text-7xl: 150px;

  --display-font: var(--font-display);
  --display-weight: var(--fw-regular);
  --display-tracking: var(--tracking-display);
  --display-leading: var(--leading-display);
  --heading-font: var(--font-heading);
  --heading-weight: var(--fw-bold);
  --heading-tracking: var(--tracking-tight);
  --body-font: var(--font-body);
  --body-weight: var(--fw-regular);
  --body-leading: var(--leading-body);
  --label-font: var(--font-body);
  --label-weight: var(--fw-semibold);
  --label-tracking: var(--tracking-caps);
}

/* ============================================================
   SPACING & SIZING TOKENS
   ============================================================ */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --section-y: clamp(64px, 9vw, 160px);
  --container-max: 1280px;
  --container-pad: clamp(20px, 5vw, 80px);
  --gutter: 24px;

  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 56px;
  --control-h-xl: 64px;
}

/* ============================================================
   EFFECTS (radius, borders, shadows, motion)
   ============================================================ */
:root {
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --radius-control: var(--radius-sm);
  --radius-card: var(--radius-none);

  --border-hairline: 1px;
  --border-medium: 1.5px;
  --border-bold: 2px;
  --border-heavy: 3px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(10, 14, 19, 0.35);
  --shadow-md: 0 8px 24px rgba(10, 14, 19, 0.45);
  --shadow-lg: 0 24px 60px rgba(10, 14, 19, 0.55);
  --shadow-accent: 0 8px 28px rgba(255, 0, 0, 0.35);

  --focus-width: 2px;
  --focus-offset: 2px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

/* ============================================================
   BASE LAYER
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-bold); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rs-red); color: #fff; }
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.rs-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-transform: uppercase;
}
.rs-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-heading);
  text-transform: uppercase;
}
.rs-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

/* THE ASTERISK — brand mark, recolorable mask */
:root {
  --rs-asterisk-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDkgMzA2IiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IlIqQ0tTVEFSIGFzdGVyaXNrIj48cGF0aCBmaWxsPSIjRkZGRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzQsNSkiIGQ9Ik0wIDAgQzAuMjc4NTk4NjMgMC43NTY1MTg1NSAwLjU1NzE5NzI3IDEuNTEzMDM3MTEgMC44NDQyMzgyOCAyLjI5MjQ4MDQ3IEM4LjcxNTE2NDk5IDIzLjYzNTgyNTczIDE2LjczODA3OTEyIDQ0LjkyMDQ4Mzg0IDI0LjgxMjUgNjYuMTg3NSBDMjUuMTkwNDE1NjEgNjcuMTgyODg5MTQgMjUuMTkwNDE1NjEgNjcuMTgyODg5MTQgMjUuNTc1OTY1ODggNjguMTk4Mzg3MTUgQzI4LjcxNTI1NzMgNzYuNDY2MzcxOTEgMzEuODU2NjQ5MTkgODQuNzMzNTU3NjMgMzUgOTMgQzM1LjY2IDkzIDM2LjMyIDkzIDM3IDkzIEMzOC45MTQ3NTI0NiA5MC44MDk1NDc0MiA0MC43MTcwMjIwMyA4OC42MDY5MjQyOSA0Mi41IDg2LjMxMjUgQzQzLjAzODk4OTI2IDg1LjYyODQxMDY0IDQzLjU3Nzk3ODUyIDg0Ljk0NDMyMTI5IDQ0LjEzMzMwMDc4IDg0LjIzOTUwMTk1IEM0NS43NjMyOTg4IDgyLjE2NTU5MjY1IDQ3LjM4MzYzODMgODAuMDg0NTQ5MjMgNDkgNzggQzQ5LjQzNDA5MTggNzcuNDQwMjI0NjEgNDkuODY4MTgzNTkgNzYuODgwNDQ5MjIgNTAuMzE1NDI5NjkgNzYuMzAzNzEwOTQgQzUyLjMyMTA3NDM0IDczLjcxMTEyNzQzIDU0LjMxNjg2MjY4IDcxLjExMTA4NDc0IDU2LjMwODU5Mzc1IDY4LjUwNzgxMjUgQzY0LjA1NjMyODgxIDU4LjM5MDgzODI3IDcxLjkxNzE5OTIgNDguMzU5NDY1MTMgNzkuODAwNzgxMjUgMzguMzQ4MTQ0NTMgQzg0LjMwMjE3NjI5IDMyLjYyNzA3MDAzIDg4Ljc2NzYwNzA4IDI2Ljg3ODExMzY0IDkzLjIzMDQ2ODc1IDIxLjEyNjk1MzEyIEM5Ni4xMjczMzYzMyAxNy4zOTYyMzk0OSA5OS4wMzU5MTE5MyAxMy42Nzc3OTk2OSAxMDIgMTAgQzEwNS45NzUyNjIyNCAxMS42MDA2NzU2IDEwOC42NDAyMDMwNCAxNC4zNzE0MzU1NiAxMTEuNTk0NzI2NTYgMTcuMzY3Njc1NzggQzExMi4xNDE1MTA2MiAxNy45MTQxNjc3OSAxMTIuNjg4Mjk0NjggMTguNDYwNjU5NzkgMTEzLjI1MTY0Nzk1IDE5LjAyMzcxMjE2IEMxMTUuMDUyNzU2NDkgMjAuODI2MjEwOTMgMTE2Ljg0NjY4MjQ3IDIyLjYzNTY4Mzk2IDExOC42NDA2MjUgMjQuNDQ1MzEyNSBDMTE5Ljg5MDAwNDk1IDI1LjY5ODQyMzY3IDEyMS4xMzk4MjgwMSAyNi45NTEwOTMxOSAxMjIuMzkwMDc1NjggMjguMjAzMzM4NjIgQzEyNS42NzU4Njg3MiAzMS40OTY3NTk1NSAxMjguOTU1NjEwNyAzNC43OTYxNDI5MSAxMzIuMjM0MTMwODYgMzguMDk2ODAxNzYgQzEzNS41ODIxNDI1MyA0MS40NjUyODk5NCAxMzguOTM1ODM5MDcgNDQuODI4MTA3NiAxNDIuMjg5MDYyNSA0OC4xOTE0MDYyNSBDMTQ4Ljg2NDk1Mjk2IDU0Ljc4ODczMTc2IDE1NS40MzQ0NjUxNiA2MS4zOTIzNjk4MyAxNjIgNjggQzE2MC45MTE5MTk0NCA3MS4yNjQyNDE2OSAxNjAuMzk2MDAyMjcgNzEuNzI1ODYwNjYgMTU3Ljc0NjA5Mzc1IDczLjY3OTY4NzUgQzE1Ny4wNjQ1ODI1MiA3NC4xODk2NzI4NSAxNTYuMzgzMDcxMjkgNzQuNjk5NjU4MiAxNTUuNjgwOTA4MiA3NS4yMjUwOTc2NiBDMTU0Ljk0MDU4MzUgNzUuNzY5NTY1NDMgMTU0LjIwMDI1ODc5IDc2LjMxNDAzMzIgMTUzLjQzNzUgNzYuODc1IEMxNTEuODc2MDUyOTUgNzguMDQ0ODA3MzEgMTUwLjMxNjE5NDI0IDc5LjIxNjczNzI4IDE0OC43NTc4MTI1IDgwLjM5MDYyNSBDMTQ3Ljk2Mjc4MzIgODAuOTg5Mzk0NTMgMTQ3LjE2Nzc1MzkxIDgxLjU4ODE2NDA2IDE0Ni4zNDg2MzI4MSA4Mi4yMDUwNzgxMiBDMTQyLjc3NDU1ODQ2IDg0LjkzNjUzMjg3IDEzOS4yOTAwOTgxOCA4Ny43NzIzMzI5NCAxMzUuODEyNSA5MC42MjUgQzEyOS4xNzkzMzYzMyA5Ni4wNTQ4NjMxNSAxMjIuNDczNzAxOTcgMTAxLjM4MTIwNDc5IDExNS43MTc3NzM0NCAxMDYuNjU3MjI2NTYgQzExMi44MDcyODM0NiAxMDguOTMyMzM5NTMgMTA5LjkwNDExMDc0IDExMS4yMTY3NTQxNiAxMDcgMTEzLjUgQzEwNS44NDExNTcwMyAxMTQuNDEwMTcwNTEgMTA0LjY4MjMwMjg1IDExNS4zMjAzMjY3NCAxMDMuNTIzNDM3NSAxMTYuMjMwNDY4NzUgQzEwMS4xMTAwNjk4NiAxMTguMTI2NDkzNDYgOTguNjk4OTE1NzIgMTIwLjAyNTI5MTk4IDk2LjI4OTA2MjUgMTIxLjkyNTc4MTI1IEM5MC4yNDQ0MjQ5MyAxMjYuNjg5NzQ4MTggODQuMTg3MzIwMSAxMzEuNDIxMzgzMTMgNzggMTM2IEM4MC44Njk2Mzk1MyAxMzcuOTEzMDkzMDIgODMuMjUwODkyMzcgMTM4LjkxOTQwOTU0IDg2LjQ3OTk4MDQ3IDE0MC4wNzIwMjE0OCBDODcuNjA3NDE2NjkgMTQwLjQ3NjgyMjM2IDg4LjczNDg1MjkxIDE0MC44ODE2MjMyMyA4OS44OTY0NTM4NiAxNDEuMjk4NjkwOCBDOTEuMTI0Mjk1OTYgMTQxLjczNTA4Mzc3IDkyLjM1MjEzODA2IDE0Mi4xNzE0NzY3NSA5My42MTcxODc1IDE0Mi42MjEwOTM3NSBDOTQuOTExMjE2NTkgMTQzLjA4NDY5NjQxIDk2LjIwNTA4NzcyIDE0My41NDg3NDAxOSA5Ny40OTg4MDk4MSAxNDQuMDEzMTk4ODUgQzEwMC45Mjg5NjE5NiAxNDUuMjQzNzE3NzUgMTA0LjM2MDY3NjIxIDE0Ni40Njk4MTM1MSAxMDcuNzkyOTA3NzEgMTQ3LjY5NDUxOTA0IEMxMTMuODQwMzExMDcgMTQ5Ljg1MjQ5NTIxIDExOS44ODU5NzQxNiAxNTIuMDE1MzA0NzcgMTI1LjkyOTY4NzUgMTU0LjE4MzU5Mzc1IEMxMjYuNTg5NzQ1NDEgMTU0LjQyMDI2MTM0IDEyNy4yNDk4MDMzMSAxNTQuNjU2OTI4OTQgMTI3LjkyOTg2Mjk4IDE1NC45MDA3NjgyOCBDMTQyLjM1ODAyMTUgMTYwLjA3OTY0OTM0IDE1Ni42ODkyMDY5NiAxNjUuNTA2MDQ5MDggMTcxIDE3MSBDMTY1LjU1MzUwMTQ2IDE4My40MTA5MDQwOCAxNTkuODkyODM3MjcgMTk1LjcwMjY3Mjk2IDE1NC4wNjI1IDIwNy45Mzc1IEMxNTMuMzA3NzMzNzQgMjA5LjUyNTI5MTMxIDE1Mi41NTMxNzYyOSAyMTEuMTEzMTgxODkgMTUxLjc5ODgyODEyIDIxMi43MDExNzE4OCBDMTUwLjMwMDYzNTgxIDIxNS44NTQ0Nzc3MiAxNDguODAxMzQxMTggMjE5LjAwNzI1NTc2IDE0Ny4zMDEyNjk1MyAyMjIuMTU5NjY3OTcgQzE0My41MjM1OTMyIDIzMC4xMDE0MjI2IDEzOS43NjI2Mjc3NSAyMzguMDUxMTA3OTEgMTM2IDI0NiBDMTMwLjE3NDE3Njk4IDI0Mi44NTE0Mzg1MiAxMjQuNTUyMTgxNDUgMjM5LjUxODI1MzI2IDExOS4wMzkwNjI1IDIzNS44NTE1NjI1IEMxMTguMzAyNTQ5NTkgMjM1LjM2NTU4MDkgMTE3LjU2NjAzNjY4IDIzNC44Nzk1OTkzIDExNi44MDcyMDUyIDIzNC4zNzg4OTA5OSBDMTE1LjIyOTIzODI3IDIzMy4zMzcxMjQzMiAxMTMuNjUyMjM5NTggMjMyLjI5Mzg4OTggMTEyLjA3NjE0MTM2IDIzMS4yNDkyOTgxIEMxMDkuNTg2ODMzNTEgMjI5LjU5OTcwODIxIDEwNy4wOTQ3MDExNCAyMjcuOTU0NDY2NiAxMDQuNjAxODA2NjQgMjI2LjMxMDMwMjczIEM5Ny42OTE2OTg2OCAyMjEuNzUxNDAwOTkgOTAuNzg3MjIwMDkgMjE3LjE4NDAwOTk4IDgzLjg4NTI1MzkxIDIxMi42MTI3OTI5NyBDNzkuODM3MjM5MzkgMjA5LjkzMTg3NDA5IDc1Ljc4NjU4MzE3IDIwNy4yNTQ5ODgyNCA3MS43MzQzMTM5NiAyMDQuNTgwNTA1MzcgQzY5LjQ3MzAzNjY3IDIwMy4wODU5ODY4MiA2Ny4yMTUyNTc2OSAyMDEuNTg2MjgzMzggNjQuOTU3NTE5NTMgMjAwLjA4NjQyNTc4IEM2My41NzQ3MjU2OCAxOTkuMTczMjI3ODUgNjIuMTkxNzU5OTQgMTk4LjI2MDI5MDEzIDYwLjgwODU5Mzc1IDE5Ny4zNDc2NTYyNSBDNjAuMTg5NDI1ODEgMTk2LjkzNDIyNDcgNTkuNTcwMjU3ODcgMTk2LjUyMDc5MzE1IDU4LjkzMjMyNzI3IDE5Ni4wOTQ4MzMzNyBDNTUuNzA4MzIwMjkgMTkzLjk3NjE5MjIxIDUyLjU5NTYxOTc3IDE5Mi4zNzI3NjAzMSA0OSAxOTEgQzQ4Ljg4OTQ2NzkzIDE5Mi4yNjIzMTk0OSA0OC43Nzg5MzU4NSAxOTMuNTI0NjM4OTggNDguNjY1MDU0MzIgMTk0LjgyNTIxMDU3IEM0Ny42MjI1MTMwOCAyMDYuNzI4NTY5MzIgNDYuNTc3OTYyMDEgMjE4LjYzMTc1MDIxIDQ1LjUzMTQ0OTMyIDIzMC41MzQ3NjA0OCBDNDQuOTkzNTA4MzYgMjM2LjY1NDAyNjQxIDQ0LjQ1NjI3MjYgMjQyLjc3MzM1MjU1IDQzLjkyMDY1NDMgMjQ4Ljg5MjgyMjI3IEM0My40MDM2MDkwNyAyNTQuNzk5NzkzNzQgNDIuODg0NzAzOCAyNjAuNzA2NTk5MTQgNDIuMzY0NTE1MyAyNjYuNjEzMjk0NiBDNDIuMTY2NTAyNDUgMjY4Ljg2NTQzOTIyIDQxLjk2OTE1NjgzIDI3MS4xMTc2NDI2MiA0MS43NzI0OTMzNiAyNzMuMzY5OTA1NDcgQzQxLjQ5NjY2NzUxIDI3Ni41Mjc0NDI3NSA0MS4yMTg0NTc3NSAyNzkuNjg0NzYxNjYgNDAuOTM5Njk3MjcgMjgyLjg0MjA0MTAyIEM0MC44NTkxMzU4OSAyODMuNzcwNjQ5NDEgNDAuNzc4NTc0NTIgMjg0LjY5OTI1NzgxIDQwLjY5NTU3MTkgMjg1LjY1NjAwNTg2IEM0MC4yNjgyNTc1NCAyOTAuNDY1ODg3OCAzOS43MzUwODEyNSAyOTUuMjI3MTY5OTcgMzkgMzAwIEMzMC4wNDI1ODYxMSAyOTkuMzEzMDAwNyAyMS4zNTYxNzY0NSAyOTcuNjI4Mzk3MTMgMTIuNTYyNSAyOTUuODc1IEMxMC45ODk4MTAyMSAyOTUuNTY0NjE2MzYgOS40MTcwNTUxMiAyOTUuMjU0NTYzNDIgNy44NDQyMzgyOCAyOTQuOTQ0ODI0MjIgQzQuNTY5MjM1ODEgMjk0LjI5ODgzMDY2IDEuMjk0ODgzMDIgMjkzLjY0OTY2OTg5IC0xLjk3OTAwMzkxIDI5Mi45OTgwNDY4OCBDLTYuMTc5MDA5MjUgMjkyLjE2MjI0MzI1IC0xMC4zODAzMjQ4MyAyOTEuMzMzMjU1NjYgLTE0LjU4MjEwNzU0IDI5MC41MDY0MzkyMSBDLTE3LjgyMDA5MjI5IDI4OS44Njg3MjczMyAtMjEuMDU3NDkyNDUgMjg5LjIyODA4OTYzIC0yNC4yOTQ3MDgyNSAyODguNTg2NDg2ODIgQy0yNS44NDQ3NDY0NiAyODguMjc5NTIwMDIgLTI3LjM5NDkzNzQgMjg3Ljk3MzMyMzQyIC0yOC45NDUyODE5OCAyODcuNjY3OTA3NzEgQy0zMS4xMDIxMjc2MSAyODcuMjQyNDI4NzYgLTMzLjI1ODE4NTcxIDI4Ni44MTMxNjk3NSAtMzUuNDE0MDYyNSAyODYuMzgyODEyNSBDLTM3LjI1NDExODY1IDI4Ni4wMTc2MDQ5OCAtMzcuMjU0MTE4NjUgMjg2LjAxNzYwNDk4IC0zOS4xMzEzNDc2NiAyODUuNjQ1MDE5NTMgQy00MiAyODUgLTQyIDI4NSAtNDQgMjg0IEMtNDIuNTc2ODAwMTIgMjc2LjkwMDA3NDE1IC00MC40OTc2MzA5NyAyNzAuMjE5NjQwODMgLTM4LjEwNTQ2ODc1IDI2My4zOTA2MjUgQy0zNy43MjEzMDI5NSAyNjIuMjgxMzQxNCAtMzcuMzM3MTM3MTUgMjYxLjE3MjA1NzggLTM2Ljk0MTMyOTk2IDI2MC4wMjkxNTk1NSBDLTM1LjY5NDk0NDMxIDI1Ni40MzQzODYzNSAtMzQuNDQxNDAzNTggMjUyLjg0MjE1NyAtMzMuMTg3NSAyNDkuMjUgQy0zMi4zMjc5MzQ2IDI0Ni43NzY1NzEyNyAtMzEuNDY4NzI0NCAyNDQuMzAzMDE5MDcgLTMwLjYwOTg2MzI4IDI0MS44MjkzNDU3IEMtMjguMDgwNTI1NTYgMjM0LjU1MDM0ODY3IC0yNS41NDExMzA2OSAyMjcuMjc0ODg2NzQgLTIzIDIyMCBDLTIyLjI4Mjk5MTUgMjE3Ljk0NTE2Njc5IC0yMS41NjYwMjkwNiAyMTUuODkwMzE3NTEgLTIwLjg0OTEyMTA5IDIxMy44MzU0NDkyMiBDLTE5LjAyODE2NTg3IDIwOC42MTgxNDg5MiAtMTcuMjAzMTkxNDMgMjAzLjQwMjI2ODc5IC0xNS4zNzUgMTk4LjE4NzUgQy0xNS4xMDE4Mjk1MyAxOTcuNDA3NzM4MDQgLTE0LjgyODY1OTA2IDE5Ni42Mjc5NzYwNyAtMTQuNTQ3MjEwNjkgMTk1LjgyNDU4NDk2IEMtMTMuNzkwODg2MzcgMTkzLjY2NzY0NjE1IC0xMy4wMzI2MDEyOSAxOTEuNTExNDA5NTYgLTEyLjI3MzQzNzUgMTg5LjM1NTQ2ODc1IEMtMTEuODU0OTc1NTkgMTg4LjE2NTkwNTc2IC0xMS40MzY1MTM2NyAxODYuOTc2MzQyNzcgLTExLjAwNTM3MTA5IDE4NS43NTA3MzI0MiBDLTEwIDE4MyAtMTAgMTgzIC05IDE4MSBDLTkuNzQ0OTE2OTkgMTgxLjI0ODMwNTY2IC0xMC40ODk4MzM5OCAxODEuNDk2NjExMzMgLTExLjI1NzMyNDIyIDE4MS43NTI0NDE0MSBDLTEyLjM0NTQ1NDEgMTgyLjExNTE1MTM3IC0xMy40MzM1ODM5OCAxODIuNDc3ODYxMzMgLTE0LjU1NDY4NzUgMTgyLjg1MTU2MjUgQy0xNS4xNzQ3ODE5NSAxODMuMDU4MzA1OTcgLTE1Ljc5NDg3NjQgMTgzLjI2NTA0OTQ0IC0xNi40MzM3NjE2IDE4My40NzgwNTc4NiBDLTIwLjExODg4MDAzIDE4NC43MDY2MjU1NyAtMjMuODA0MjU0MDEgMTg1LjkzNDQxOTY4IC0yNy40ODk5OTAyMyAxODcuMTYxMTMyODEgQy0zNi43NjM4Njc3OSAxOTAuMjQ4ODQ2ODYgLTQ2LjAzNDc2NDc5IDE5My4zNDUyNjk3NiAtNTUuMzAxMzc2MzQgMTk2LjQ1NDcxNzY0IEMtNjEuMjg1NzQxOTggMTk4LjQ2MjcyMzY3IC02Ny4yNzExMzczMyAyMDAuNDY3NjQxNiAtNzMuMjU3MTEwNiAyMDIuNDcwODQ5OTkgQy03Ny4wNDM1MzUyNyAyMDMuNzM4MTk2NTYgLTgwLjgyOTM2MjgyIDIwNS4wMDcyNzM5MiAtODQuNjEzOTUyNjQgMjA2LjI4MDA5MDMzIEMtODguMjM3MDU1NzggMjA3LjQ5ODU1ODY4IC05MS44NjE1NTYwOSAyMDguNzEyNzc3NjEgLTk1LjQ4NzExNTg2IDIwOS45MjM5MTU4NiBDLTk2Ljg0NDA4NTUyIDIxMC4zNzgwODAzNyAtOTguMjAwNTI3OTcgMjEwLjgzMzgyMzM2IC05OS41NTY0MTc0NyAyMTEuMjkxMjAyNTUgQy0xMDEuNDI2OTIyNTMgMjExLjkyMTkyMTY1IC0xMDMuMjk5NDcyNzcgMjEyLjU0NjU2NTcxIC0xMDUuMTcyMTE5MTQgMjEzLjE3MDg5ODQ0IEMtMTA2LjIyOTM1Njg0IDIxMy41MjU1MzE2MiAtMTA3LjI4NjU5NDU0IDIxMy44ODAxNjQ3OSAtMTA4LjM3NTg2OTc1IDIxNC4yNDU1NDQ0MyBDLTExMSAyMTUgLTExMSAyMTUgLTExNCAyMTUgQy0xMTkuMjggMTg3Ljk0IC0xMjQuNTYgMTYwLjg4IC0xMzAgMTMzIEMtMTI3LjAxNTAxMjcyIDEzMS4wMTAwMDg0OCAtMTI2LjE5OTYwNzUxIDEzMC43MjEzMjQ5IC0xMjIuODIwNzU1IDEzMC40OTM3NDM5IEMtMTIxLjk2OTk0ODU4IDEzMC40MzIwOTU0OSAtMTIxLjExOTE0MjE1IDEzMC4zNzA0NDcwOCAtMTIwLjI0MjU1MzcxIDEzMC4zMDY5MzA1NCBDLTExOC44NDY5MjIgMTMwLjIxOTUzMzYyIC0xMTguODQ2OTIyIDEzMC4yMTk1MzM2MiAtMTE3LjQyMzA5NTcgMTMwLjEzMDM3MTA5IEMtMTE2LjQ0MDY0Mzc3IDEzMC4wNjE4MDQwNSAtMTE1LjQ1ODE5MTgzIDEyOS45OTMyMzcgLTExNC40NDU5Njg2MyAxMjkuOTIyNTkyMTYgQy0xMTEuMTg5NzY0NjcgMTI5LjY5NzU3NTEgLTEwNy45MzI4NjA5NyAxMjkuNDg1MzY5NjYgLTEwNC42NzU3ODEyNSAxMjkuMjczNDM3NSBDLTEwMi40MTIzMjExNyAxMjkuMTIwMDU1MiAtMTAwLjE0ODkwOTE0IDEyOC45NjU5NjIyMSAtOTcuODg1NTQzODIgMTI4LjgxMTE4Nzc0IEMtOTMuMTM1Mzg1OTcgMTI4LjQ4ODE3MzU2IC04OC4zODQ4ODgxNCAxMjguMTcwOTkwMjEgLTgzLjYzNDAzMzIgMTI3Ljg1ODM5ODQ0IEMtNzcuNTU1MTU1NTUgMTI3LjQ1ODM2MTQ4IC03MS40NzcwMDkyMSAxMjcuMDQ4MzIwNTEgLTY1LjM5OTA2MDI1IDEyNi42MzQ0MzU2NSBDLTU5LjU5NTcwNTM5IDEyNi4yMzk3MTQ2NCAtNTMuNzkyMDA0OTUgMTI1Ljg1MDE5MDg0IC00Ny45ODgyODEyNSAxMjUuNDYwOTM3NSBDLTQ2LjMzMjkyNTc5IDEyNS4zNDkyMTc3IC00Ni4zMzI5MjU3OSAxMjUuMzQ5MjE3NyAtNDQuNjQ0MTI4OCAxMjUuMjM1MjQwOTQgQy00MS41MDQyMjY3NyAxMjUuMDI0MjQ1NjIgLTM4LjM2NDEwMjIzIDEyNC44MTY5NjE1NSAtMzUuMjIzODc2OTUgMTI0LjYxMDgzOTg0IEMtMzQuMzAzNTc2OTcgMTI0LjU0ODUyNjc2IC0zMy4zODMyNzY5OCAxMjQuNDg2MjEzNjggLTMyLjQzNTA4OTExIDEyNC40MjIwMTIzMyBDLTI3LjI3NjgwMjcgMTI0LjA4Nzk3Njc2IC0yMi4xNjkxNTY4MSAxMjMuOTQxMjgzODUgLTE3IDEyNCBDLTIxLjIyNDMxNzExIDExNy41NTkzMDkzOCAtMjUuNDU0OTQ1NzEgMTExLjEyMjc3OTg0IC0yOS42ODc1IDEwNC42ODc1IEMtMzAuMzI3Mzg4NjEgMTAzLjcxNDAyNjE4IC0zMC45NjcyNzcyMiAxMDIuNzQwNTUyMzcgLTMxLjYyNjU1NjQgMTAxLjczNzU3OTM1IEMtMzkuMTQwMzU1MjYgOTAuMzEyNDM5ODkgLTQ2LjcwMDE2NTYgNzguOTIxODEyNDMgLTU0LjM4MjgxMjUgNjcuNjA5Mzc1IEMtNTUuMDUyOTI4NjIgNjYuNjIxNjU2MDQgLTU1LjcyMzA0NDc0IDY1LjYzMzkzNzA3IC01Ni40MTM0Njc0MSA2NC42MTYyODcyMyBDLTU5LjY1MTczMjgxIDU5Ljg0NTg4MzQyIC02Mi44OTg0NjAwNSA1NS4wODE1Mzk5OSAtNjYuMTU2OTgyNDIgNTAuMzI0OTUxMTcgQy02Ny4zMzAxMzc4OSA0OC42MDA5MDAxIC02OC41MDMwODI0OCA0Ni44NzY3MDU1IC02OS42NzU3ODEyNSA0NS4xNTIzNDM3NSBDLTcwLjIxODEyNDA4IDQ0LjM2Njg0MTQzIC03MC43NjA0NjY5MiA0My41ODEzMzkxMSAtNzEuMzE5MjQ0MzggNDIuNzcyMDMzNjkgQy03MS44MDcyNjUzMiA0Mi4wNTE4MzA0NCAtNzIuMjk1Mjg2MjUgNDEuMzMxNjI3MiAtNzIuNzk4MDk1NyA0MC41ODk1OTk2MSBDLTczLjIyNTgwNzY1IDM5Ljk2NTA4NDA4IC03My42NTM1MTk1OSAzOS4zNDA1Njg1NCAtNzQuMDk0MTkyNSAzOC42OTcxMjgzIEMtNzUgMzcgLTc1IDM3IC03NSAzNCBDLTU2LjQ3OTcyMTQyIDI0Ljk3MTQ1ODM0IC0zNy45MTUwNTEyMyAxNi4wNjIxODY0MyAtMTkuMTg2NTIzNDQgNy40NzIxNjc5NyBDLTE2LjkyMzQzODUyIDYuNDI2NjI2OSAtMTQuNjY2OTAxODYgNS4zNjY4NjAwOSAtMTIuNDE1MDM5MDYgNC4yOTczNjMyOCBDLTExLjI0OTQwNDMgMy43NDY3NzI0NiAtMTAuMDgzNzY5NTMgMy4xOTYxODE2NCAtOC44ODI4MTI1IDIuNjI4OTA2MjUgQy03LjgyNzIzMTQ1IDIuMTI1NjA3OTEgLTYuNzcxNjUwMzkgMS42MjIzMDk1NyAtNS42ODQwODIwMyAxLjEwMzc1OTc3IEMtMyAwIC0zIDAgMCAwIFogIj48L3BhdGg+PC9zdmc+");
}
.rs-star {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--star-color, var(--rs-red));
  vertical-align: -0.06em;
  -webkit-mask: var(--rs-asterisk-mask) center / contain no-repeat;
  mask: var(--rs-asterisk-mask) center / contain no-repeat;
}
.rs-star--straight { transform: none; }
.rs-star--tilt { transform: rotate(18deg); }
.rs-star--yellow { background: var(--rs-yellow); }
.rs-star--turquoise { background: var(--rs-turquoise); }
.rs-star--white { background: #fff; }

/* THE WORDMARK */
.rs-wordmark {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.02em;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--text-primary);
}
.rs-wordmark .rs-star {
  width: 0.74em;
  height: 0.74em;
  margin: 0 0.02em;
  align-self: flex-start;
  transform: none;
}

.rs-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   PAGE CSS
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  padding-inline: var(--space-6);
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-lg { height: var(--control-h-lg); padding-inline: var(--space-8); font-size: var(--text-base); }
.btn-accent { background: var(--accent); color: var(--text-on-accent); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-accent:active { background: var(--accent-press); transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--rs-white); color: var(--text-inverse); border-color: var(--rs-white); }
.btn-ghost:active { transform: translateY(1px); }
.btn-on-accent { background: var(--rs-white); color: var(--rs-red); }
.btn-on-accent:hover { background: var(--rs-soft-black); color: var(--rs-white); }
.btn-on-accent:active { transform: translateY(1px); }
.btn-on-accent-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-on-accent-ghost:hover { background: #fff; color: var(--rs-red); border-color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}
.link-arrow span { transition: transform var(--dur-base) var(--ease-out); color: var(--accent); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover span { transform: translateX(4px); }

/* ---- Header ---- */
#site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: background var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
#site-header.scrolled {
  background: var(--surface-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--border-subtle);
}
.hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 76px;
}
.hdr-logo { font-size: 26px; }
.desktop-nav { display: flex; gap: var(--space-8); }
.desktop-nav a {
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.desktop-nav a:hover { color: var(--text-primary); }
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.menu-btn span { display: block; height: 2px; background: var(--text-primary); }

/* ---- Mobile menu ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--rs-soft-black);
  padding: 96px var(--container-pad) var(--space-12);
  display: flex;
  flex-direction: column;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: var(--space-6); }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  text-transform: uppercase;
  color: var(--text-primary);
}
.mobile-menu .mm-cta {
  font-family: var(--font-body);
  font-size: var(--text-base);
  align-self: flex-start;
  margin-top: var(--space-6);
  color: var(--text-on-accent);
}
#mmenu-close {
  position: absolute;
  top: 22px;
  right: var(--container-pad);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-size: 22px;
  cursor: pointer;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media, .hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-fallback {
  background: var(--surface-page);
  display: none;
}
.hero.no-video .hero-media { display: none; }
.hero.no-video .hero-fallback { display: block; }
.hero-fallback::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vmin;
  height: 60vmin;
  transform: translate(-50%, -50%);
  background: var(--accent);
  -webkit-mask: var(--rs-asterisk-mask) center / contain no-repeat;
  mask: var(--rs-asterisk-mask) center / contain no-repeat;
  opacity: .9;
  animation: rs-spin 40s linear infinite;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,24,32,.35) 0%, rgba(16,24,32,.5) 55%, rgba(16,24,32,.92) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-bottom: var(--section-y);
  padding-top: 140px;
}
.hero-title {
  font-size: clamp(56px, 11vw, 150px);
  margin: var(--space-4) 0 var(--space-6);
}
.hero-sub {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: clamp(var(--text-md), 2.4vw, var(--text-xl));
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); }

@keyframes rs-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---- Sections ---- */
.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--border-subtle);
}
.sec-head { margin-bottom: var(--space-12); }
.sec-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.sec-title { font-size: clamp(36px, 6vw, var(--text-5xl)); margin-top: var(--space-3); }
.rs-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---- Audiences ---- */
.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.aud-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.aud-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.aud-h { font-size: var(--text-2xl); }
.aud-p { color: var(--text-secondary); }
.aud-card .link-arrow { margin-top: auto; }

/* ---- Services ---- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.card--feature { border-top: var(--border-heavy) solid var(--accent); }
.svc-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.svc-h { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.svc-p { color: var(--text-secondary); font-size: var(--text-sm); }
.svc-more {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}
.svc-more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.svc-more-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-sm);
}
.svc-more-list .rs-star { width: .8em; height: .8em; }
.svc-more-list li a { display: inline-flex; align-items: center; gap: var(--space-2); transition: color var(--dur-fast) var(--ease-out); }
.svc-more-list li a:hover { color: var(--accent); }

/* ---- Placeholders ---- */
.ph {
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ph-portrait { aspect-ratio: 3 / 4; }
.ph-wide { aspect-ratio: 16 / 10; }

/* ---- Roster ---- */
.roster-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.artist-card { position: relative; display: block; }
.artist-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-base) var(--ease-out);
}
.artist-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.artist-card:hover .artist-img { transform: scale(1.07); }
.artist-card:hover .artist-media { border-color: var(--accent); }
.artist-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 24, 32, 0.88) 0%, rgba(16, 24, 32, 0.1) 50%, rgba(16, 24, 32, 0) 70%);
  pointer-events: none;
}
.artist-label {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  color: #fff;
  font-size: var(--text-lg);
  line-height: 1.04;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* ---- Journal ---- */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.article-card { display: flex; flex-direction: column; gap: var(--space-3); }
.art-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-base) var(--ease-out);
}
.article-card:hover .art-img { border-color: var(--accent); }
.art-cat { color: var(--accent); margin-top: var(--space-2); }
.art-title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.article-card .link-arrow { margin-top: auto; font-size: var(--text-xs); }

/* ---- CTA band ---- */
.cta-band { background: var(--accent); color: #fff; padding-block: var(--section-y); }
.cta-inner { text-align: center; max-width: 760px; }
.cta-eyebrow { color: #fff; opacity: .85; }
.cta-title { font-size: clamp(48px, 9vw, var(--text-6xl)); margin: var(--space-3) 0 var(--space-5); }
.cta-sub { font-size: var(--text-md); margin-bottom: var(--space-8); opacity: .92; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

/* ---- Footer ---- */
.site-footer { background: var(--surface-inset); padding-top: var(--space-20); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: var(--space-10);
  padding-bottom: var(--space-16);
}
.footer-logo { font-size: 30px; }
.footer-tag { color: var(--text-secondary); margin-top: var(--space-4); max-width: 36ch; }
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-h { margin-bottom: var(--space-2); }
.footer-col a { color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--text-primary); }
.footer-loc { color: var(--text-muted); }
.footer-social { margin-top: var(--space-1); display: flex; align-items: center; gap: var(--space-3); }
.footer-social a { color: var(--text-secondary); display: inline-flex; transition: color var(--dur-fast) var(--ease-out); }
.footer-social a:hover { color: var(--accent); }
.footer-social svg { width: 20px; height: 20px; fill: currentColor; }
.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---- Modal ---- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-6); }
.modal[hidden] { display: none; }
.modal-scrim { position: absolute; inset: 0; background: var(--surface-overlay); backdrop-filter: blur(2px); }
.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-top: var(--border-heavy) solid var(--accent);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10);
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
}
.modal-title { font-size: var(--text-2xl); margin: var(--space-2) 0 var(--space-6); }
.apply-form { display: flex; flex-direction: column; gap: var(--space-4); }
.apply-form[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label {
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field input, .field textarea {
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
}
.field input:focus, .field textarea:focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; border-color: transparent; }
.modal-submit { margin-top: var(--space-2); }
.apply-success { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) 0; }
.apply-success[hidden] { display: none; }
.apply-success p { color: var(--text-secondary); }

/* ---- Scroll reveal (progressive enhancement: only hidden when JS is active) ---- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .roster-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1000px) {
  .desktop-nav, .desktop-cta { display: none !important; }
  .menu-btn { display: flex !important; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .aud-grid, .journal-grid { grid-template-columns: 1fr; }
  .roster-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-fallback::before { width: 90vmin; height: 90vmin; }
}
@media (max-width: 620px) {
  .svc-grid { grid-template-columns: 1fr; }
  .roster-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hdr-inner { height: 64px; }
  .sec-head--row { align-items: flex-start; }
  .artist-label { font-size: var(--text-base); left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fallback::before { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
}


/* ============================================================
   PHASE 4 — listing tools, artist detail, news article
   ============================================================ */
.roster-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-8); }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-secondary); background: transparent;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  padding: 8px 16px; min-height: 36px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.roster-search {
  background: var(--surface-inset); border: 1px solid var(--border-default); border-radius: var(--radius-control);
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base);
  padding: 10px 16px; min-height: 44px; min-width: 240px;
}
.roster-search:focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }
.roster-empty { color: var(--text-muted); padding: var(--space-12) 0; text-align: center; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-bottom: var(--space-8); }
.breadcrumb a { color: var(--text-secondary); display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .rs-star { width: .8em; height: .8em; }

/* Artist detail */
.artist-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.artist-detail-media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--border-subtle); display: block; }
.artist-detail-title { font-size: clamp(40px, 6vw, var(--text-5xl)); margin: var(--space-3) 0 var(--space-6); }
.artist-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0; }
.artist-detail-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* Prose (rich text from WP) */
.prose { color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-body); max-width: 70ch; }
.prose p { margin: 0 0 var(--space-4); }
.prose h2, .prose h3 { color: var(--text-primary); font-family: var(--font-heading); text-transform: uppercase; margin: var(--space-8) 0 var(--space-3); }
.prose a { color: var(--accent); text-decoration: underline; }
.prose img { max-width: 100%; height: auto; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 var(--space-4); }

/* News article */
.article-detail { max-width: 860px; }
.article-title { font-size: clamp(36px, 6vw, var(--text-5xl)); margin-top: var(--space-2); }
.article-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--border-subtle); display: block; margin: var(--space-8) 0; }
.article-head { margin-bottom: var(--space-4); }
.article-foot { margin-top: var(--space-12); }

@media (max-width: 900px) {
  .artist-detail-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .roster-tools { flex-direction: column; align-items: stretch; }
  .roster-search { width: 100%; }
}

/* ============================================================
   WordPress content pages + Contact
   ============================================================ */
.wp-prose { max-width: 880px; }
.wp-prose figure { margin: 0 0 var(--space-3); }
.wp-prose img { width: 100%; max-width: 560px; height: auto; display: block; border: 1px solid var(--border-subtle); }
.wp-prose h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-3xl); margin: 0 0 var(--space-6); }
.wp-prose h3 { margin-top: var(--space-6); font-size: var(--text-xl); }
.wp-prose h3 + p { color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-sm); }
.wp-page-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-16); align-items: start; }
.contact-rail { display: flex; flex-direction: column; gap: var(--space-8); }
.contact-block { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-link { font-size: var(--text-md); color: var(--text-primary); }
.contact-link:hover { color: var(--accent); }
.contact-addr { color: var(--text-secondary); line-height: var(--leading-snug); }
.contact-select {
  background: var(--surface-inset); border: 1px solid var(--border-default); border-radius: var(--radius-control);
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); padding: 10px 14px; min-height: 44px;
}
.contact-select:focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* ============================================================
   Dropdown navigation
   ============================================================ */
.nav-item.has-dd { position: relative; display: inline-flex; align-items: center; }
.nav-trigger {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-secondary); background: transparent; border: none; cursor: pointer;
  padding: 8px 0; transition: color var(--dur-fast) var(--ease-out);
}
.nav-item.has-dd:hover .nav-trigger { color: var(--text-primary); }
.dd {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 210px; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md);
  padding: var(--space-2) 0; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; z-index: var(--z-header);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.nav-item.has-dd:hover .dd,
.nav-item.has-dd:focus-within .dd { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dd a {
  padding: 10px 18px; font-weight: var(--fw-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); white-space: nowrap;
}
.dd a:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }

/* Mobile menu groups + tighter sizing (more items now) */
.mobile-menu { overflow-y: auto; }
.mobile-menu nav a { font-size: var(--text-lg); }
.mm-group {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent);
  margin: var(--space-5) 0 var(--space-1);
}
.mm-group:first-child { margin-top: 0; }

/* ============================================================
   Team grid + WP content cards (designed page layouts)
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.team-card { display: flex; flex-direction: column; gap: var(--space-2); }
.team-media { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid var(--border-subtle); background: var(--surface-inset); }
.team-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; filter: grayscale(1) contrast(1.04); transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.team-card:hover .team-media img { transform: scale(1.05); filter: grayscale(0); }
.team-name { font-size: var(--text-lg); margin-top: var(--space-1); }
.team-role { color: var(--text-muted); }

.wp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin: var(--space-8) 0; }
.wp-card { display: flex; flex-direction: column; gap: var(--space-2); }
.wp-card-media { display: block; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--border-subtle); background: var(--surface-inset); }
.wp-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.wp-card:hover .wp-card-media img { transform: scale(1.06); }
.wp-card:hover .wp-card-media { border-color: var(--accent); }
.wp-card-name { font-size: var(--text-md); margin-top: var(--space-1); }
.wp-card-role { color: var(--text-muted); }

/* prose pages: full width, but keep text at a readable measure; calmer headings */
.wp-prose { max-width: none; }
.wp-prose > p, .wp-prose > ul, .wp-prose > ol, .wp-prose > blockquote { max-width: 68ch; }
.wp-prose h2 { font-family: var(--font-heading); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-size: var(--text-2xl); margin: var(--space-10) 0 var(--space-4); }
.wp-prose h3 { font-size: var(--text-lg); }
.wp-prose figure { margin: 0 0 var(--space-6); }
.wp-prose figure img { max-width: 720px; }

@media (max-width: 1000px) { .team-grid, .wp-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .team-grid, .wp-cards { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Nav alignment fix
   ============================================================ */
.desktop-nav { align-items: center; }
.nav-item.has-dd { align-items: center; }
.nav-trigger { line-height: 1; padding: 6px 0; display: inline-flex; align-items: center; }
.desktop-nav > a { display: inline-flex; align-items: center; line-height: 1; }

/* ============================================================
   Editorial text pages (what-we-do, writers, music-label, jobs)
   ============================================================ */
.editorial { max-width: 880px; }
.editorial .wp-lead { font-size: clamp(var(--text-lg), 2.4vw, var(--text-2xl)); line-height: 1.3; color: var(--text-primary); margin-bottom: var(--space-10); max-width: 26ch; font-family: var(--font-heading); font-weight: var(--fw-bold); }
.editorial h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-tight);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); line-height: .98;
  margin: var(--space-16) 0 var(--space-5); padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle); display: flex; align-items: flex-start; gap: var(--space-3);
}
.editorial h2::before { content: ""; width: .5em; height: .5em; flex: none; margin-top: .18em; background: var(--accent); -webkit-mask: var(--rs-asterisk-mask) center/contain no-repeat; mask: var(--rs-asterisk-mask) center/contain no-repeat; }
.editorial h3 { font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-2); }
.editorial p { color: var(--text-secondary); margin: 0 0 var(--space-4); max-width: 68ch; }
.editorial ul, .editorial ol { color: var(--text-secondary); max-width: 68ch; margin: 0 0 var(--space-4); padding-left: 0; list-style: none; }
.editorial ul li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-2); }
.editorial ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--accent); -webkit-mask: var(--rs-asterisk-mask) center/contain no-repeat; mask: var(--rs-asterisk-mask) center/contain no-repeat; }
.editorial figure { margin: var(--space-6) 0; }
.editorial figure img { width: 100%; max-width: 720px; height: auto; border: 1px solid var(--border-subtle); }

/* ============================================================
   Cookie banner
   ============================================================ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-toast);
  background: var(--surface-raised); border-top: var(--border-heavy) solid var(--accent);
  box-shadow: var(--shadow-lg); padding: var(--space-5) 0;
}
.cookie-banner[hidden] { display: none; }
.cookie-inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; justify-content: space-between; }
.cookie-text { max-width: 60ch; color: var(--text-secondary); font-size: var(--text-sm); }
.cookie-text strong { color: var(--text-primary); }
.cookie-text a { color: var(--accent); text-decoration: underline; }
.cookie-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cookie-actions .btn { height: var(--control-h-md); }
@media (max-width: 620px) { .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } }

/* ============================================================
   Section background video (Who we build for)
   ============================================================ */
.aud-section { position: relative; overflow: hidden; border-top: 1px solid var(--border-subtle); }
.aud-section .sec-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; pointer-events: none; }
.aud-section .sec-bgvideo-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, var(--surface-page) 0%, rgba(16,24,32,.55) 50%, var(--surface-page) 100%); pointer-events: none; }
html.light .aud-section .sec-bgvideo-scrim { background: linear-gradient(180deg, var(--surface-page) 0%, rgba(255,255,255,.6) 50%, var(--surface-page) 100%); }
html.light .aud-section .sec-bgvideo { opacity: .12; }
.aud-inner { position: relative; z-index: 1; }

/* ============================================================
   LIGHT MODE (design-system .rs-light scope, applied at root)
   ============================================================ */
html.light {
  --surface-page: var(--rs-white);
  --surface-raised: var(--rs-white);
  --surface-card: var(--rs-white);
  --surface-inset: var(--neutral-50);
  --surface-inverse: var(--rs-soft-black);
  --surface-overlay: rgba(255, 255, 255, 0.82);
  --text-primary: var(--rs-soft-black);
  --text-secondary: rgba(16, 24, 32, 0.66);
  --text-muted: rgba(16, 24, 32, 0.44);
  --text-on-accent: var(--rs-white);
  --text-inverse: var(--rs-white);
  --border-subtle: rgba(16, 24, 32, 0.10);
  --border-default: rgba(16, 24, 32, 0.18);
  --border-strong: rgba(16, 24, 32, 0.40);
}
/* ghost button needs a dark fill on light backgrounds */
html.light .btn-ghost:hover { background: var(--rs-soft-black); color: var(--rs-white); border-color: var(--rs-soft-black); }
/* dropdown panel + card placeholders read better with a subtle tint on light */
html.light .dd { background: var(--rs-white); }
html.light .ph, html.light .artist-media, html.light .team-media, html.light .wp-card-media { background: var(--neutral-100); }

/* ============================================================
   Theme toggle button
   ============================================================ */
.theme-toggle {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-control);
  color: var(--text-primary); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
html:not(.light) .theme-toggle .icon-sun { display: none; }
html.light .theme-toggle .icon-moon { display: none; }

/* filter: allow hiding artist cards (display:block was overriding [hidden]) */
.artist-card[hidden] { display: none !important; }

/* --- make the asterisk bg video clearly visible on the audiences section --- */
.aud-section .sec-bgvideo { opacity: .5; }
.aud-section .sec-bgvideo-scrim { background: linear-gradient(180deg, var(--surface-page) 0%, rgba(16,24,32,.35) 45%, rgba(16,24,32,.78) 100%); }
html.light .aud-section .sec-bgvideo { opacity: .35; }

/* --- light mode: translucent grey header so nav reads over dark hero --- */
html.light #site-header { background: rgba(43, 54, 64, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.10); }
html.light #site-header .desktop-nav a, html.light #site-header .nav-trigger { color: rgba(255,255,255,0.82); }
html.light #site-header .desktop-nav a:hover, html.light #site-header .nav-item.has-dd:hover .nav-trigger { color: #fff; }
html.light #site-header .hdr-logo { color: #fff; }
html.light #site-header .theme-toggle { color: #fff; border-color: rgba(255,255,255,0.4); }
html.light #site-header.scrolled { background: var(--surface-overlay); }
html.light #site-header.scrolled .desktop-nav a, html.light #site-header.scrolled .nav-trigger { color: var(--text-secondary); }
html.light #site-header.scrolled .hdr-logo { color: var(--text-primary); }
html.light #site-header.scrolled .theme-toggle { color: var(--text-primary); border-color: var(--border-default); }

/* --- hero headline asterisk: smaller + top-aligned (design-system wordmark recipe) --- */
.hero-title .rs-star { width: .6em; height: .6em; vertical-align: .16em; }

/* --- hero text always white (hero is always over the dark video, both themes) --- */
.hero-title { color: #fff; }
.hero-inner .hero-sub { color: rgba(255,255,255,.72); }
html.light .hero-title { color: #fff; }
html.light .hero-inner .hero-sub { color: rgba(255,255,255,.72); }

/* --- nudge hero asterisk up a touch more --- */
.hero-title .rs-star { vertical-align: .24em; }

/* prevent horizontal scroll from side-slide reveals */
main { overflow-x: clip; }

/* --- Full 360 section background video --- */
.svc-section { position: relative; overflow: hidden; border-top: 1px solid var(--border-subtle); }
.svc-section .sec-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; pointer-events: none; }
.svc-section .sec-bgvideo-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, var(--surface-page) 0%, rgba(16,24,32,.62) 50%, var(--surface-page) 100%); pointer-events: none; }
.svc-inner { position: relative; z-index: 1; }
html.light .svc-section .sec-bgvideo { opacity: .26; }
html.light .svc-section .sec-bgvideo-scrim { background: linear-gradient(180deg, var(--surface-page) 0%, rgba(255,255,255,.66) 50%, var(--surface-page) 100%); }

/* --- mobile menu is always dark — force light text in both themes --- */
.mobile-menu nav a { color: #fff; }
#mmenu-close { color: #fff; }
html.light .mobile-menu nav a { color: #fff; }
html.light #mmenu-close { color: #fff; border-color: rgba(255,255,255,.4); }
html.light .mobile-menu .mm-cta { color: #fff; }

/* --- compact mobile menu --- */
.mobile-menu { padding-top: 84px; }
.mobile-menu nav { gap: var(--space-2); }
.mobile-menu nav a { font-size: var(--text-md); }
.mm-group { margin: var(--space-4) 0 2px; }
.mm-group:first-child { margin-top: 0; }
.mobile-menu .mm-cta { margin-top: var(--space-4); font-size: var(--text-sm); }

/* ============================================================
   Structural pages: What we do / Jobs / Music Label
   ============================================================ */
/* Full-bleed image hero */
.wwd-hero {
  position: relative;
  min-height: clamp(360px, 56vh, 600px);
  display: flex; align-items: flex-end;
  padding-block: var(--space-16) var(--space-12);
  background: var(--wwd-hero-img) center/cover no-repeat, var(--surface-inset);
  border-bottom: var(--border-heavy) solid var(--accent);
}
.wwd-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,24,32,.35) 0%, rgba(16,24,32,.82) 100%); pointer-events: none; }
.wwd-hero-inner { position: relative; z-index: 1; }
.wwd-hero .rs-eyebrow { color: #fff; opacity: .9; }
.wwd-hero-title { color: #fff; font-size: clamp(48px, 10vw, var(--text-6xl)); margin-top: var(--space-3); }
.wwd-hero-sub { color: #fff; opacity: .9; margin-top: var(--space-4); max-width: 46ch; font-size: var(--text-md); }
.wwd-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); padding: 0; }
.wwd-links li { display: inline-flex; align-items: center; gap: var(--space-2); color: #fff; opacity: .92; font-family: var(--font-heading); text-transform: uppercase; font-size: var(--text-sm); letter-spacing: .04em; }
.wwd-links .rs-star { width: .7em; height: .7em; }

/* Image + text row */
.wwd-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.wwd-row--rev .wwd-media { order: 2; }
.wwd-media { margin: 0; overflow: hidden; }
.wwd-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; border: 1px solid var(--border-subtle); }
.wwd-body .rs-eyebrow { color: var(--accent); }
.wwd-h { font-size: clamp(30px, 4.6vw, var(--text-4xl)); margin: var(--space-3) 0 var(--space-5); }
.wwd-body p { color: var(--text-secondary); max-width: 56ch; margin: 0 0 var(--space-4); }
.wwd-list { list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.wwd-list li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-3); color: var(--text-primary); }
.wwd-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; background: var(--accent); -webkit-mask: var(--rs-asterisk-mask) center/contain no-repeat; mask: var(--rs-asterisk-mask) center/contain no-repeat; }
.wwd-list--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }

/* Centered statement / quote band */
.wwd-statement { padding-block: var(--section-y); background: var(--surface-inset); border-block: 1px solid var(--border-subtle); text-align: center; }
.wwd-statement .rs-eyebrow { color: var(--accent); }
.wwd-statement-line { font-size: clamp(30px, 5.5vw, var(--text-5xl)); margin: var(--space-4) auto var(--space-5); max-width: 18ch; }
.wwd-quote { color: var(--text-secondary); max-width: 60ch; margin: 0 auto; font-size: var(--text-md); }
.wwd-statement .link-arrow { margin-top: var(--space-6); }

/* Narrow prose block */
.wwd-narrow { max-width: 760px; }
.wwd-narrow p { color: var(--text-secondary); margin: 0 0 var(--space-5); }
.wwd-narrow .wwd-h { color: var(--text-primary); }
.wwd-narrow-lead { color: var(--text-secondary); max-width: 70ch; font-size: var(--text-md); margin-bottom: var(--space-8); }

/* Jobs: values grid + vacancies */
.jobs-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.jobs-list { list-style: none; padding: 0; margin: var(--space-8) 0 0; border-top: 1px solid var(--border-subtle); }
.jobs-list-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-subtle); }
.jobs-role { font-size: var(--text-lg); text-transform: uppercase; }
.jobs-note { color: var(--accent); margin-left: auto; }

/* Music Label hero split + columns */
.ml-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.ml-hero-title { font-size: clamp(40px, 7vw, var(--text-5xl)); margin: var(--space-3) 0 var(--space-6); }
.ml-lead { color: var(--text-secondary); font-size: var(--text-md); max-width: 56ch; }
.ml-hero-mark { margin: 0; }
.ml-hero-mark img { width: 100%; height: auto; max-width: 460px; }
.ml-banner { margin: 0 0 var(--space-12); overflow: hidden; border: 1px solid var(--border-subtle); }
.ml-banner img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.ml-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); margin-top: var(--space-10); }
.ml-col-h { text-transform: uppercase; font-size: var(--text-lg); margin-bottom: var(--space-4); }
/* Supanova brand mark sits in an image row — contain, not crop */
.ml-mark-media img { object-fit: contain; background: #ececec; padding: clamp(24px, 5vw, 56px); aspect-ratio: 5 / 4; }

/* Writers roster rows */
.wr-team .wwd-row { margin-top: var(--space-16); }
.wr-team .sec-head { margin-bottom: 0; }
.wr-media { align-self: stretch; }
.wr-media img { aspect-ratio: 4 / 5; max-height: 560px; }
.wr-team .wwd-body p { max-width: 60ch; }
/* Partner logo wall */
.wr-partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.wr-partner { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border-subtle); padding: clamp(20px, 4vw, 44px); min-height: 140px; }
.wr-partner img { max-width: 100%; max-height: 110px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 720px) { .wr-partners { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .wwd-row, .ml-hero, .ml-cols { grid-template-columns: 1fr; }
  .wr-team .wwd-row { margin-top: var(--space-10); }
  .wr-media img { aspect-ratio: 4 / 3; max-height: 460px; }
  .wwd-row--rev .wwd-media { order: 0; }
  .jobs-values { grid-template-columns: 1fr 1fr; }
  .ml-hero-mark { order: -1; max-width: 320px; }
}
@media (max-width: 620px) {
  .wwd-list--cols { grid-template-columns: 1fr; }
  .jobs-values { grid-template-columns: 1fr; }
  .jobs-list-item { flex-wrap: wrap; gap: var(--space-2); }
  .jobs-note { margin-left: 0; }
}