/* NiallMacMillan.com — production styles
   Palette: Turquoise #2EF0F9 · Red #FF2E88 · Navy #0B0B12 · White
   Type: Archivo (display) + Inter (UI) + JetBrains Mono (labels)
*/

:root {
  --turquoise: #2EF0F9;
  --turquoise-deep: #2EF0F9;
  --red: #FF2E88;
  --red-deep: #FF2E88;
  --navy: #0B0B12;
  --navy-soft: #1A1A26;
  --paper: #FFF4EC;
  --paper-2: #FFFFFF;
  --yellow: #2EF0F9;
  --yellow-deep: #2EF0F9;
  --line: #0B0B12;
  --line-soft: #E7DFD7;
  --ink: #0B0B12;
  --muted: #5E5E78;
  --accent: var(--red);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--navy); }
.btn, .brand-mark, .nav-links a, .social-icons a, .reel, .merch-card, .stat-link, .footer-grid a, .logo-chip { color: inherit; }
.lede em, .bio em { font-style: normal; font-weight: 700; color: var(--navy); }
.sec-brands-bg .lede em, .sec-cta .lede em { color: var(--turquoise); }

/* ─── Type ──────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(48px, 6.5vw, 96px); line-height: 0.95; }
h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.0; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; font-weight: 900; }
h4 { font-size: 18px; line-height: 1.25; font-weight: 700; }

p { margin: 0 0 14px; text-wrap: pretty; }
.lede { font-size: 19px; line-height: 1.5; max-width: 60ch; }

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: 0.5;
}
.eyebrow-plain::before { display: none; }
.eyebrow-light { color: rgba(255,255,255,0.7); }

.muted { color: var(--muted); }
.center { text-align: center; }

/* ─── Layout ────────────────────────────────────────────────────────────── */

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }

section { padding: 96px 0; }
section.tight { padding: 64px 0; }
section.loose { padding: 128px 0; }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid currentColor;
}
.section-head.no-border { border-bottom: 0; padding-bottom: 0; }
.section-head .head-sub { font-size: 15px; color: var(--red); opacity: 1; max-width: 60ch; text-align: left; font-weight: 600; margin-top: 8px; }
.stats-band .section-head .head-sub, .sec-brands-bg .section-head .head-sub { color: var(--red); }

/* ─── Header / nav ─────────────────────────────────────────────────────── */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 18, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--paper);
  border-bottom: 2px solid var(--turquoise);
}
.nav-socials { display: flex; align-items: center; }
.nav-socials .social-icons { gap: 6px; }
.nav-socials .social-icons a { width: 32px; height: 32px; border: 0; }
@media (max-width: 1100px) {
  .site-nav .site-nav-inner { gap: 14px; padding: 14px 18px; }
  .site-nav .nav-links { gap: 14px; }
  .site-nav .brand-mark { font-size: 0; gap: 0; }
  .site-nav .brand-mark .brand-avatar { margin: 0; }
}
@media (max-width: 860px) {
  .site-nav .site-nav-inner { gap: 10px; }
  .site-nav .nav-links { gap: 10px; font-size: 13px; }
  .nav-socials .social-icons { gap: 2px; }
  .nav-socials .social-icons a { width: 28px; height: 28px; }
}
.site-nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.brand-mark-dot {
  width: 14px; height: 14px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--turquoise);
  box-sizing: content-box;
}
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a {
  color: var(--paper);
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 0.12s;
}
.nav-links a:hover { opacity: 1; color: var(--turquoise); }
.nav-links a.active { opacity: 1; color: var(--turquoise); }
.brand-mark:hover { color: var(--turquoise); }
.nav-spacer { flex: 1; }
.nav-cta { display: flex; gap: 10px; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.01em;
  transition: transform 0.1s, background 0.12s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--red); color: var(--paper); border-color: var(--red); }
.btn-turq    { background: var(--turquoise); color: var(--navy); border-color: var(--turquoise); }
.btn-turq:hover { background: var(--red); color: var(--paper); border-color: var(--red); }
.btn-dark    { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ghost-light { color: var(--paper); border-color: rgba(255,255,255,0.5); }
.btn-ghost-light:hover { background: var(--red); color: var(--paper); border-color: var(--red); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* ─── Live indicator ───────────────────────────────────────────────────── */

.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(208, 61, 69, 0.22);
  animation: pulse 1.6s ease-in-out infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(208, 61, 69, 0); } }

/* ─── Memphis pattern (decorative) ─────────────────────────────────────── */

.memphis-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%230e1a3a' stroke-width='3' stroke-linecap='round'><line x1='18' y1='24' x2='18' y2='42'/><line x1='52' y1='56' x2='70' y2='56'/><circle cx='106' cy='36' r='5'/><line x1='144' y1='22' x2='144' y2='40'/><circle cx='28' cy='98' r='6'/><line x1='74' y1='88' x2='92' y2='88'/><circle cx='128' cy='100' r='4' fill='%230e1a3a'/><line x1='22' y1='138' x2='22' y2='156'/><line x1='74' y1='144' x2='92' y2='144'/><circle cx='130' cy='142' r='6'/><line x1='160' y1='128' x2='160' y2='146'/></g></svg>");
  background-size: 180px;
  opacity: 0.18;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  background: var(--turquoise);
  color: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 120px 0 140px;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(56px, 7vw, 108px);
  line-height: 0.92;
}
.hero h1 em {
  font-style: normal;
  color: var(--red);
  background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%);
  padding: 0 0.04em;
}
.hero .lede {
  font-size: 20px;
  margin: 24px 0 36px;
  max-width: 520px;
}
.hero-photo {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--paper);
  box-shadow: 0 24px 64px -16px rgba(11, 11, 18, 0.45);
  max-width: 420px;
  margin: 0 auto;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ─── Marquee ───────────────────────────────────────────────────────────── */

.marquee {
  background: var(--navy);
  color: var(--turquoise);
  overflow: hidden;
  border-top: 2px solid var(--turquoise);
  border-bottom: 2px solid var(--turquoise);
}
.marquee-track {
  display: flex;
  gap: 36px;
  padding: 18px 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}
.marquee-track > span { padding: 0 16px; }
.marquee-track .dot { color: var(--red); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── Stats ─────────────────────────────────────────────────────────────── */

.stats-band {
  background: var(--navy);
  color: var(--paper);
  padding: 64px 0;
}
.stats-band h2 { color: var(--paper); }
.stats-band .eyebrow { color: rgba(255,255,255,0.7); }
.stats-band .eyebrow::before,
.sec-brands-bg .eyebrow::before { background: var(--yellow); opacity: 1; height: 2px; }
.stats-band .section-head { border-color: rgba(255,255,255,0.18); }
.stats-band .section-head .head-sub { color: rgba(255,255,255,0.7); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
}
.stat {
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat:last-child { border-right: 0; }
.stat-num {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--turquoise);
}
.stat-platform { font-size: 14px; font-weight: 600; color: var(--paper); margin-top: 4px; }
.stat-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ─── Reels grid ────────────────────────────────────────────────────────── */

.reels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.reel {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line-soft);
  isolation: isolate;
  color: var(--ink);
  display: block;
  transition: transform 0.12s, box-shadow 0.12s;
}
.reel:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(11,11,18,0.45); }
.reel-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: linear-gradient(135deg, #1A1A26, #0B0B12);
}
.reel-frame::before {
  content: "";
  position: absolute;
  width: 60%; height: 50%;
  border-radius: 50%;
  background: var(--red);
  filter: blur(40px);
  opacity: 0.55;
  top: -20%; left: -20%;
  z-index: 0;
}
.reel-frame::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 36px;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.reel-frame .reel-figure {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.reel-frame .reel-figure-silhouette {
  width: 60%; height: 70%;
  background: rgba(0,0,0,0.4);
  border-radius: 60% 60% 12% 12% / 40% 40% 4% 4%;
  position: relative;
}
.reel-frame .reel-figure-silhouette::before {
  content: "";
  position: absolute;
  top: 8%; left: 28%;
  width: 44%; height: 36%;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
}
.reel-meta {
  background: var(--paper);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  height: 78px;
}
.reel-meta b { font-weight: 600; }
.reel-views {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
}

/* ─── About ─────────────────────────────────────────────────────────────── */

.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.about-photo {
  aspect-ratio: 4 / 5;
  background: transparent;
  border: 0;
  border-radius: 0;
  position: relative;
  overflow: visible;
}
.about-photo img { object-fit: contain !important; }
.about-photo::before {
  content: none;
}
.about-photo-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line-soft) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--line-soft) 50%, transparent calc(50% + 0.5px));
}
.about-photo span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bio { font-size: 18px; line-height: 1.55; margin-bottom: 16px; }

.experience-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  border-top: 1px solid var(--line);
}
.experience-list li {
  display: grid;
  grid-template-columns: 80px 1.4fr 1fr;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.exp-year { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--red); font-weight: 600; }
.exp-title { font-size: 15px; font-weight: 600; }
.exp-detail { font-size: 13px; color: var(--muted); }

/* ─── Merch ─────────────────────────────────────────────────────────────── */

.merch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.merch-card {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: #D2FCFE;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.merch-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(11,11,18,0.45); }
.merch-img {
  position: relative;
  aspect-ratio: 1;
  background: #E7DFD7;
  border-bottom: 1px solid var(--line-soft);
}
.merch-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line-soft) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--line-soft) 50%, transparent calc(50% + 0.5px));
}
.merch-img-lbl {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.merch-img-lbl span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  background: var(--paper);
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.merch-meta { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.merch-name { font-size: 15px; font-weight: 600; }
.merch-price { font-size: 13px; color: var(--muted); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.merch-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy); background: var(--yellow);
  padding: 3px 7px; border-radius: 3px; margin-top: 4px;
  font-weight: 600;
}

/* ─── Phones (silent-reel mockups) ─────────────────────────────────────── */

.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 32px;
  background: #0B0B12;
  padding: 8px;
  box-shadow:
    0 0 0 1.5px #1A1A26,
    0 24px 48px -16px rgba(0, 0, 0, 0.55),
    0 4px 12px -2px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  background: var(--navy);
  isolation: isolate;
}
.phone-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 22px;
  background: #0B0B12;
  border-radius: 12px;
  z-index: 4;
}
.phone-status {
  position: absolute;
  top: 8px;
  left: 14px; right: 14px;
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  z-index: 4;
  pointer-events: none;
}
.phone-status span:last-child { display: flex; gap: 4px; align-items: center; }

/* "Video" content — animated gradient + brand badge + caption */
.phone-video {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--bg1, #1A1A26), var(--bg2, #0B0B12));
  overflow: hidden;
  z-index: 1;
}
.phone-video::before, .phone-video::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.6;
  pointer-events: none;
}
.phone-video::before {
  width: 180px; height: 180px;
  background: var(--accent-blob, #FF2E88);
  top: -40px; left: -40px;
  animation: blob1 8s ease-in-out infinite alternate;
}
.phone-video::after {
  width: 160px; height: 160px;
  background: var(--accent-blob2, #2EF0F9);
  bottom: -30px; right: -30px;
  animation: blob2 10s ease-in-out infinite alternate;
}
@keyframes blob1 { to { transform: translate(60px, 80px) scale(1.2); } }
@keyframes blob2 { to { transform: translate(-50px, -60px) scale(0.85); } }

.phone-figure {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-silhouette {
  width: 50%; height: 65%;
  background: rgba(0,0,0,0.35);
  border-radius: 60% 60% 12% 12% / 40% 40% 4% 4%;
  position: relative;
  animation: niall-bob 4s ease-in-out infinite;
}
.phone-silhouette::before {
  content: "";
  position: absolute;
  top: 8%; left: 28%;
  width: 44%; height: 36%;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
}
@keyframes niall-bob { 50% { transform: translateY(-6px); } }

.phone-brand-pill {
  position: absolute;
  left: 12px; right: 12px; bottom: 14px;
  z-index: 3;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: fit-content;
  max-width: calc(100% - 24px);
}
.phone-brand-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--turquoise);
}

.phone-caption {
  position: absolute;
  bottom: 80px; left: 12px; right: 60px;
  z-index: 3;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.phone-caption b { font-weight: 700; }
.phone-handle {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
  margin-bottom: 4px;
}

.phone-actions {
  position: absolute;
  right: 10px;
  bottom: 90px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.phone-actions span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
}
.phone-actions span::after {
  content: attr(data-count);
  position: absolute;
  margin-top: 30px;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.phone-progress {
  position: absolute;
  bottom: 56px; left: 12px; right: 12px;
  z-index: 3;
  height: 2px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  overflow: hidden;
}
.phone-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: 0%;
  background: var(--paper);
  animation: progress 8s linear infinite;
}
@keyframes progress { to { width: 100%; } }

.phone-bottom-bar {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  width: 100px; height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.6);
}

/* ─── Phone stage (multiple phones tiled) ──────────────────────────────── */

.phone-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  justify-items: stretch;
  max-width: 100%;
}
.phone-stage .phone { transform: none; }

/* Used as a section background — phones float behind content */
.phone-bg-wrap {
  position: relative;
  isolation: isolate;
}
.phone-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.phone-bg .phone {
  position: absolute;
  opacity: 0.7;
  transition: opacity 0.4s;
}

/* ─── Brand logo wall ──────────────────────────────────────────────────── */

.brand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.brand-cell {
  background: var(--paper);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  text-align: center;
  position: relative;
}
.brand-cell.is-dark { background: var(--navy); color: var(--paper); }
.brand-wordmark {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-transform: uppercase;
}
.brand-cell .placeholder-note {
  position: absolute;
  bottom: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brand-cell.is-dark .placeholder-note { color: rgba(255,255,255,0.4); }

/* ─── Audience bars ────────────────────────────────────────────────────── */

.audience-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 14px; }
.audience-row { display: grid; grid-template-columns: 140px 1fr 80px; align-items: center; gap: 16px; font-size: 14px; }
.audience-bar-track { height: 8px; background: rgba(0,0,0,0.08); border-radius: 4px; overflow: hidden; }
.audience-bar-fill { height: 100%; background: var(--turquoise); border-radius: 4px; }
.audience-val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--muted); text-align: right; }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */

.faq-list { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid currentColor; }
.faq-list li {
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: baseline;
}
.faq-q-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--red); font-weight: 600; letter-spacing: 0.06em; }
.faq-q { font-size: 17px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
.faq-a { font-size: 15px; line-height: 1.55; opacity: 0.85; }
.is-dark-faq .faq-list { border-color: rgba(255,255,255,0.3); }
.is-dark-faq .faq-list li { border-color: rgba(255,255,255,0.15); }
.is-dark-faq .faq-q-num { color: var(--turquoise); }

/* ─── Contact ──────────────────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-block { border-top: 2px solid currentColor; padding-top: 16px; }
.contact-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.6; margin-bottom: 8px;
}
.contact-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.contact-val { font-size: 15px; }

/* ─── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--navy);
  color: var(--paper);
  padding: 56px 0 32px;
  border-top: 2px solid var(--turquoise);
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.site-footer .brand-mark { color: var(--paper); }
.site-footer h4 { color: var(--paper); margin-bottom: 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding: 4px 0; font-size: 14px; opacity: 0.8; }
.site-footer .footer-legal {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}

/* ─── Sections, varied backgrounds ─────────────────────────────────────── */

.sec-watch { background: var(--paper); }
.sec-about { background: var(--paper-2); }
.sec-merch { background: #D2FCFE; }

.sec-brands-bg {
  background: var(--navy);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.sec-brands-bg h2 { color: var(--paper); }
.sec-brands-bg .eyebrow { color: rgba(255,255,255,0.7); }
.sec-brands-bg .section-head { border-color: rgba(255,255,255,0.2); }
.sec-brands-bg .section-head .head-sub { color: rgba(255,255,255,0.7); }

.sec-cta {
  background: var(--navy);
  color: var(--paper);
  padding: 96px 0;
}
.sec-cta h2 { color: var(--paper); font-size: clamp(40px, 5vw, 72px); margin-bottom: 18px; }
.sec-cta .lede { color: rgba(255,255,255,0.92); margin: 0 auto 32px; }
.sec-cta .btn { background: transparent; color: var(--paper); border-color: var(--paper); }
.sec-cta .btn-turq { background: var(--red); color: var(--paper); border-color: var(--red); }

/* ─── Cards (used on multiple pages) ───────────────────────────────────── */

.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 28px;
}
.card.is-dark { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.card.is-dark h3, .card.is-dark h2, .card.is-dark h4 { color: var(--paper); }
.card.is-red { background: var(--red); color: var(--paper); border-color: var(--red); }
.card.is-red h3, .card.is-red h2 { color: var(--paper); }
.card.is-turq { background: var(--turquoise); color: var(--navy); border-color: var(--turquoise); }

/* Dark surfaces: white text flips to neon pink on hover */
.btn-dark:hover { color: var(--red); border-color: var(--red); }
.card.is-dark:hover, .card.is-dark:hover h2, .card.is-dark:hover h3, .card.is-dark:hover h4 { color: var(--red); }
a.stat-link:hover .stat-platform, .stat-link:hover .stat-lbl { color: var(--red); }
.site-footer a:hover, .footer-grid a:hover { color: var(--red); }
.case-card:hover, .case-card:hover h3, .case-card:hover h4 { color: var(--red); }

/* ─── Ways panels (horizontal) ─────────────────────────────────────────── */
.ways-panels { display: flex; flex-direction: column; gap: 10px; }
.way-panel {
  position: relative; display: block; overflow: hidden;
  min-height: 132px; padding: 26px 30px;
  border-radius: 6px; text-decoration: none; color: inherit;
  transition: min-height 0.32s cubic-bezier(0.16,1,0.3,1), transform 0.32s cubic-bezier(0.16,1,0.3,1), box-shadow 0.32s;
}
.way-panel.tone-0 { background: var(--navy); color: var(--paper); }
.way-panel.tone-1 { background: var(--red); color: var(--paper); }
.way-panel.tone-2 { background: var(--turquoise); color: var(--navy); }
.way-panel.tone-3 { background: var(--ink); color: var(--paper); }
.way-panel:hover { min-height: 220px; transform: translateX(6px); box-shadow: 0 18px 40px -22px rgba(11,11,18,0.6); }
.wp-num {
  position: absolute; top: 22px; right: 26px; z-index: 3;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: 0.12em; opacity: 0.5;
}
.wp-media {
  position: absolute; right: 5%; top: 8px; bottom: 0; width: 260px; z-index: 1;
  transform: translateY(10px) scale(0.96); opacity: 0.55;
  transition: transform 0.42s cubic-bezier(0.16,1,0.3,1), opacity 0.42s;
  pointer-events: none;
}
.wp-media img { width: 100%; height: 100%; object-fit: contain; object-position: bottom right; display: block; mix-blend-mode: luminosity; }
.way-panel:hover .wp-media { transform: translateY(0) scale(1); opacity: 1; }
.way-panel:hover .wp-media img { mix-blend-mode: normal; }
.wp-body { position: relative; z-index: 2; display: block; max-width: 62%; }
.wp-title {
  display: block; font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: clamp(30px, 4.2vw, 54px); line-height: 0.98; letter-spacing: -0.02em;
  text-transform: uppercase;
}
.wp-blurb {
  display: block; margin-top: 0; max-height: 0; overflow: hidden; max-width: 46ch; font-size: 15px; line-height: 1.5;
  opacity: 0; transform: translateY(8px);
  transition: max-height 0.32s cubic-bezier(0.16,1,0.3,1), margin-top 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.28s 0.06s, transform 0.32s cubic-bezier(0.16,1,0.3,1) 0.06s;
}
.way-panel:hover .wp-blurb { opacity: 0.92; transform: translateY(0); max-height: 140px; margin-top: 12px; }
.wp-cta {
  position: absolute; left: 30px; bottom: 22px; z-index: 3;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.26s 0.12s, transform 0.3s cubic-bezier(0.16,1,0.3,1) 0.12s;
}
.way-panel:hover .wp-cta { opacity: 1; transform: translateY(0); }
.way-panel.tone-0:hover .wp-title, .way-panel.tone-3:hover .wp-title { color: var(--red); }
.way-panel.tone-0 .wp-cta, .way-panel.tone-3 .wp-cta { color: var(--red); }
.way-panel.tone-1 .wp-cta { color: var(--paper); }
.way-panel.tone-2 .wp-cta { color: var(--navy); }
.way-panel.way-soon { cursor: default; }
.way-panel.way-soon:hover { transform: none; }
@media (max-width: 720px) {
  .way-panel { min-height: 110px; padding: 20px; }
  .way-panel:hover { min-height: 210px; transform: none; }
  .wp-body { max-width: 100%; }
  .wp-media { width: 180px; height: 180px; right: -10px; opacity: 0.3; }
  .wp-cta { left: 20px; }
}

/* ─── Contact modal ────────────────────────────────────────────────────── */
.cm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,11,18,0.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: cm-fade 0.18s ease;
}
@keyframes cm-fade { from { opacity: 0 } to { opacity: 1 } }
.cm-panel {
  position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--paper); border-radius: 8px; padding: 34px 34px 30px;
  box-shadow: 0 40px 80px -30px rgba(11,11,18,0.7);
  animation: cm-rise 0.26s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cm-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.cm-close {
  position: absolute; top: 14px; right: 16px; background: none; border: 0;
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px;
}
.cm-close:hover { color: var(--red); }
.cm-title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 30px; line-height: 1.02; letter-spacing: -0.02em; margin: 10px 0 0; }
.cm-sub { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.cm-sub strong { color: var(--red); font-weight: 600; }
.cm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.cm-span { grid-column: 1 / -1; }
.cm-field { display: flex; flex-direction: column; gap: 6px; }
.cm-field > span {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.cm-field em { font-style: normal; opacity: 0.7; }
.cm-field input, .cm-field select, .cm-field textarea {
  font-family: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 11px 12px;
  background: var(--paper-2); width: 100%; box-sizing: border-box; resize: vertical;
}
.cm-field input:focus, .cm-field select:focus, .cm-field textarea:focus { outline: 2px solid var(--turquoise); outline-offset: 1px; border-color: transparent; }
.cm-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cm-note { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--muted); }
.cm-done { margin-top: 20px; font-size: 15px; line-height: 1.6; }
@media (max-width: 560px) { .cm-form { grid-template-columns: 1fr } .cm-panel { padding: 28px 20px 24px } }

/* ─── Brand grid logos + audience hover ────────────────────────────────── */
.brand-cell { transition: transform 0.16s, box-shadow 0.16s; }
.brand-cell:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(11,11,18,0.5); z-index: 1; }
.brand-logo { max-width: 74%; max-height: 46%; object-fit: contain; display: block; filter: grayscale(1) brightness(1.9) contrast(0.55); opacity: 0.85; transition: filter 0.2s, opacity 0.2s, transform 0.2s; }
.brand-logo.sq { max-width: 42%; max-height: 60%; }
.brand-cell:hover .brand-logo { filter: none; opacity: 1; transform: scale(1.04); }
.aud-card { transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s, border-color 0.22s; }
.aud-card:hover { transform: translateY(-5px); border-color: var(--turquoise); box-shadow: 0 20px 40px -26px rgba(0,0,0,0.8); }
.audience-row { transition: transform 0.18s; }
.audience-row:hover { transform: translateX(4px); }
.audience-row:hover .audience-bar-fill { background: var(--red); }
.audience-row:hover .audience-val { color: var(--turquoise); }

/* ─── Media-kit contents bar (sticky under nav) ────────────────────────── */
.mk-contents {
  position: sticky; top: var(--nav-h, 68px); z-index: 40;
  padding: 14px 0; background: rgba(255,244,236,0.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.mk-contents .btn { transition: background 0.16s, color 0.16s, border-color 0.16s; }
.mk-contents .btn.is-here { background: var(--red); color: var(--paper); border-color: var(--red); }
.mk-contents .btn.is-here span { color: var(--paper) !important; opacity: 0.75; }
.mk-contents .btn:hover { border-color: var(--red); color: var(--red); }
.mk-contents .btn.is-here:hover { color: var(--paper); }

/* ─── "Your brand here" roster cell ────────────────────────────────────── */
.brand-cell.brand-open {
  background: var(--navy); color: var(--paper); border: 0; cursor: pointer;
  flex-direction: column; gap: 6px; text-align: center; padding: 10px;
  overflow: hidden;
}
.brand-open .bo-line {
  font-family: 'Archivo', sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(13px, 1.2vw, 17px); line-height: 1.05; letter-spacing: -0.01em;
  transition: color 0.18s;
}
.brand-open .bo-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--turquoise);
  opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.24s cubic-bezier(0.16,1,0.3,1);
}
.brand-cell.brand-open:hover .bo-sub { color: var(--paper); }
.brand-cell.brand-open:hover { background: var(--red); }
.brand-cell.brand-open:hover .bo-sub { opacity: 1; transform: none; }

/* ─── Book card (inside "Wait, there's more") ──────────────────────────── */
.book-card-inner { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start; }
.book-card-inner img { width: 100%; height: auto; display: block; border: 0; filter: drop-shadow(0 16px 26px rgba(11,11,18,0.28)); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.book-card-inner img:hover { transform: translateY(-5px) rotate(-1.5deg); }
.book-sub { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; margin: 0 0 8px; letter-spacing: -0.01em; }
.book-blurb { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
.book-rate { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.book-rate div { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.book-stars { color: var(--red); font-size: 13px; letter-spacing: 0.08em; }
.book-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.book-links .btn { font-size: 13px; padding: 10px 16px; }

/* ─── Wait, there's more (film + music embeds) ─────────────────────────── */
.sec-else { background: var(--paper-2); padding: 92px 0; }
.else-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 28px; margin-top: 36px; align-items: start; }
.else-card { display: flex; flex-direction: column; gap: 14px; }
.else-card h3 { font-size: clamp(20px, 2.2vw, 28px); margin: 0; }
.else-frame { position: relative; border-radius: 6px; overflow: hidden; background: var(--ink); border: 1px solid var(--line-soft); }
.else-frame iframe { display: block; width: 100%; border: 0; }
.else-yt { aspect-ratio: 16 / 9; }
.else-yt iframe { height: 100%; }
.else-empty {
  display: grid; place-content: center; text-align: center;
  min-height: 200px; padding: 24px; color: var(--muted); background: var(--paper);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.7;
}
@media (max-width: 1100px) { .else-grid { grid-template-columns: 1fr 1fr; } .book-card { grid-column: 1 / -1; } }
@media (max-width: 900px) { .else-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ─── Tags ─────────────────────────────────────────────────────────────── */

.tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-block;
  margin: 0 4px 4px 0;
}

/* ─── Links page (linktree replacement) ─────────────────────────────────── */

.links-page {
  min-height: 100vh;
  background: var(--turquoise);
  position: relative;
  overflow: hidden;
  padding: 56px 24px 80px;
}
.links-inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.links-photo {
  width: 120px; height: 120px;
  border-radius: 50%;
  margin: 0 auto 20px;
  overflow: hidden;
  border: 6px solid var(--paper);
  box-shadow: 0 12px 32px -8px rgba(11, 11, 18, 0.4);
}
.links-photo img { width: 100%; height: 100%; object-fit: cover; }
.links-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 6px;
}
.links-bio {
  font-size: 15px;
  color: var(--navy);
  opacity: 0.85;
  margin-bottom: 28px;
}

.links-socials { display: flex; justify-content: center; gap: 12px; margin-bottom: 28px; }
.links-soc {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
  transition: transform 0.12s;
}
.links-soc:hover { transform: translateY(-2px); }

.link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
  color: var(--navy);
  text-decoration: none;
  text-align: left;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 4px 4px 0 var(--navy);
}
.link-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--navy); }
.link-card.is-feature { background: var(--red); color: var(--paper); border-color: var(--navy); }
.link-card.is-feature .link-card-meta { color: rgba(255,255,255,0.85); }
.link-card-icon {
  width: 42px; height: 42px;
  border-radius: 8px;
  background: var(--turquoise);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: 14px;
  color: var(--navy);
  flex-shrink: 0;
}
.link-card.is-feature .link-card-icon { background: var(--paper); }
.link-card-text { flex: 1; min-width: 0; }
.link-card-title { font-size: 15px; font-weight: 700; line-height: 1.2; }
.link-card-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.link-card-arrow { font-size: 20px; opacity: 0.7; }

.links-footer {
  margin-top: 32px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.6;
}

/* ─── Media kit specific ───────────────────────────────────────────────── */

.mk-hero {
  background: var(--navy);
  color: var(--paper);
  padding: 80px 0 64px;
  position: relative;
  overflow: hidden;
}
.mk-hero h1 { color: var(--paper); font-size: clamp(48px, 6vw, 88px); }
.mk-hero .eyebrow { color: var(--turquoise); }
.mk-hero .lede { color: rgba(255,255,255,0.85); }
.mk-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.mk-hero-photo { aspect-ratio: 1; max-width: 360px; border-radius: 50%; overflow: hidden; border: 6px solid var(--turquoise); margin-left: auto; }
.mk-hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.mk-section { padding: 72px 0; border-bottom: 1px solid var(--line-soft); }
.mk-section:last-child { border-bottom: 0; }

.mk-two-col { display: grid; grid-template-columns: 0.4fr 1fr; gap: 48px; align-items: start; }
.mk-two-col .mk-label h3 { margin-bottom: 8px; }
.mk-two-col .mk-label p { font-size: 14px; color: var(--muted); }

.mk-rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.mk-rate-table th, .mk-rate-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.mk-rate-table th {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.mk-rate-table tbody tr:hover { background: var(--paper-2); }
.mk-rate-table .from { color: var(--red); font-weight: 700; }
.mk-rate-table .deliverable { font-weight: 600; }

.mk-download-cta {
  background: var(--red);
  color: var(--paper);
  padding: 64px 56px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  margin: 48px 0;
}
.mk-download-cta h2 { color: var(--paper); }

/* ─── Nav avatar + hover reveal ─────────────────────────────────────────── */

.brand-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; display: block; flex: 0 0 auto;
  border: 2px solid var(--turquoise);
  transition: transform 0.2s ease, border-color 0.2s;
}
.brand-mark:hover .brand-avatar { transform: rotate(-6deg) scale(1.08); border-color: var(--yellow); }

/* Nav items reveal a one-line hint on hover: an underline sweeps in and the
   hint slides down from under the label. */
.nav-links a {
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 2px; background: var(--turquoise);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-hint {
  position: absolute; left: 0; top: calc(100% + 9px);
  white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--red);
  opacity: 0; transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover .nav-hint { opacity: 1; transform: translateY(0); }

/* ─── Stats strip (single in-line row, clickable) ───────────────────────── */

.stats-strip {
  display: flex;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  overflow: hidden;
}
.stats-strip .stat {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  padding: 22px 14px;
  border-right: 1px solid rgba(255,255,255,0.12);
  transition: background 0.18s;
}
.stats-strip .stat-icon { grid-column: 1; grid-row: 1 / span 2; }
.stats-strip .stat-num { grid-column: 2; }
.stats-strip .stat-text { grid-column: 2; }
.stats-strip .stat:last-child { border-right: 0; }
.stats-strip a.stat-link:hover { background: rgba(255,255,255,0.05); transform: none; }
.stats-strip .stat-icon { margin-bottom: 0; transition: color 0.18s, transform 0.18s; }
.stats-strip a.stat-link:hover .stat-icon { color: var(--red); transform: scale(1.14); }
.stats-strip .stat-num { font-size: clamp(26px, 2.5vw, 38px); transition: color 0.18s; }
.stats-strip a.stat-link:hover .stat-num { color: var(--red); }
.stat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stats-strip .stat-platform { margin-top: 0; font-size: 13px; }
.stats-strip .stat-lbl { font-size: 10px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
  .stats-strip { flex-wrap: wrap; }
  .stats-strip .stat { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .stats-strip .stat:last-child { border-bottom: 0; }
}

/* ─── Character cover image ─────────────────────────────────────────────── */

.char-cover { margin-top: 24px; border-radius: 4px; overflow: hidden; }
.char-cover img { width: 100%; height: auto; display: block; }

.merch-pager {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 28px;
}
.merch-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--navy); background: transparent; color: var(--navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.16s, color 0.16s, transform 0.16s, opacity 0.16s;
}
.merch-arrow:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }
.merch-arrow:disabled { opacity: 0.22; cursor: default; }
.merch-dots { display: flex; align-items: center; gap: 8px; }
.merch-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(11,11,18,0.22);
  transition: background 0.16s, transform 0.16s;
}
.merch-dot:hover { background: rgba(11,11,18,0.45); }
.merch-dot.is-on { background: var(--red); transform: scale(1.4); }

.merch-kind {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  opacity: 0.55; margin-top: 3px;
}
.merch-live {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6;
}

/* ─── Icons ─────────────────────────────────────────────────────────────── */

.icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

.social-icons { display: flex; gap: 10px; }
.social-icons a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  color: inherit; opacity: 0.75;
  transition: background 0.15s, color 0.15s, transform 0.15s, opacity 0.15s;
}
.social-icons a:hover {
  background: var(--turquoise); border-color: var(--turquoise);
  color: var(--navy); opacity: 1; transform: translateY(-2px);
}

/* ─── Reel tile additions (real stills, play, views) ────────────────────── */

.reel-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.reel-shade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(11,11,18,0.15) 0%, transparent 40%, rgba(11,11,18,0.6) 100%);
}
.reel-tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  background: var(--red); color: #fff; padding: 4px 8px; border-radius: 3px;
}
.reel-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.94); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  padding-left: 3px;
  transition: transform 0.18s, background 0.18s;
}
.reel:hover .reel-play { transform: translate(-50%, -50%) scale(1.12); background: var(--turquoise); }
.reel-views { display: inline-flex; align-items: center; gap: 5px; }

/* ─── Ways to work ─────────────────────────────────────────────────────── */
/* Compact stats under the hero */
.stats-under { background: var(--navy); color: var(--paper); padding: 0 0 22px; }
.stats-under .stats-strip { border: 0; border-top: 1px solid rgba(255,255,255,0.14); border-radius: 0; }
.stats-under .stat { padding: 14px 16px; }
.stats-under .stat-num { font-size: clamp(18px, 1.8vw, 26px); }
.stats-under .stat-platform { font-size: 12px; }
.stats-under .stat-lbl { font-size: 9px; }

/* Ways accordion */
.ways-acc { margin-top: 40px; border-top: 2px solid var(--line); }
.acc-item { border-bottom: 2px solid var(--line); }
.acc-head {
  display: flex; align-items: center; gap: 20px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 26px 8px; font-family: 'Archivo', sans-serif; color: var(--ink);
}
.acc-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--muted); }
.acc-title { font-weight: 900; font-size: clamp(24px, 3vw, 38px); letter-spacing: -0.02em; flex: 1; }
.acc-badge { position: static; }
.acc-chev { font-size: 30px; font-weight: 400; line-height: 1; color: var(--red); }
.acc-head:hover .acc-title { color: var(--red); }
.acc-body { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 0 8px 32px; align-items: start; }
.acc-img { aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; background: var(--navy); }
.acc-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.acc-text p { font-size: 17px; line-height: 1.6; max-width: 60ch; margin: 4px 0 18px; }
.acc-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.acc-skip { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); padding: 0; }
.acc-skip:hover { color: var(--ink); }
@media (max-width: 720px) { .acc-body { grid-template-columns: 1fr; } }

.sec-ways { background: var(--paper); padding: 96px 0; }
.ways-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 40px; }
.way-card { display: block; text-decoration: none; color: inherit; }
.way-img { position: relative; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden; background: var(--navy); }
.way-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.3s; }
a.way-card:hover .way-img img { transform: scale(1.04); }
.way-badge { position: absolute; top: 14px; left: 14px; background: var(--yellow, #2EF0F9); color: var(--navy); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; }
.way-card h3 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -0.02em; margin: 18px 0 8px; }
.way-card p { font-size: 14.5px; line-height: 1.55; opacity: 0.82; margin: 0; }
.way-cta { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--red); }
a.way-card:hover .way-cta { text-decoration: underline; }
.way-soon .way-img img { filter: grayscale(0.4); opacity: 0.85; }

/* ─── Logo wall ─────────────────────────────────────────────────────────── */

.logo-wall { overflow: hidden; margin: 36px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-wall-track { display: flex; gap: 14px; width: max-content; animation: marquee 14s linear infinite; }
.logo-wall:hover .logo-wall-track { animation-play-state: paused; }
.logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); border-radius: 6px; flex: 0 0 auto;
  padding: 16px 24px; min-width: 132px; min-height: 96px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.logo-chip:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 12px 28px -10px rgba(0,0,0,0.45); }
/* Wide wordmarks are capped by width; square/portrait marks get a taller
   allowance so they carry comparable optical weight instead of collapsing. */
.logo-chip img { width: auto; height: auto; max-width: 116px; max-height: 32px; object-fit: contain; display: block; }
.logo-chip img.sq { max-width: 84px; max-height: 62px; }
.logo-word {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17px;
  letter-spacing: -0.01em; color: var(--navy); white-space: nowrap; text-align: center;
}

/* ─── Case study cards ──────────────────────────────────────────────────── */

.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 44px; }
.case-card {
  background: rgba(255,255,255,0.05);
  border-top: 4px solid var(--turquoise);
  border-radius: 4px; padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.case-card.accent-red { border-top-color: var(--red); }
.case-card.accent-yellow { border-top-color: var(--yellow); }
.case-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.case-card h3 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 25px; letter-spacing: -0.02em; color: var(--paper); }
.case-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6;
}
.case-card p { font-size: 15px; line-height: 1.55; opacity: 0.85; margin: 0; }
.case-res {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--turquoise); font-weight: 600;
}
.case-card.accent-yellow .case-res { color: var(--yellow); }

/* ─── Speaking ──────────────────────────────────────────────────────────── */

.sec-speaking { padding: 104px 0; background: var(--paper-2); color: var(--navy); }
.speak-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; margin-top: 44px; }
.speak-photos { display: flex; flex-direction: column; gap: 20px; }
.speak-photos figure { margin: 0; }
.speak-photos img { width: 100%; height: auto; display: block; border-radius: 4px; }
.speak-photos figcaption {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.6; margin-top: 10px;
}
.talk-list { list-style: none; margin: 0; padding: 0; }
.talk-list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px 14px;
  padding: 20px 0; border-bottom: 1px solid rgba(11,11,18,0.12);
}
.talk-list li:first-child { padding-top: 0; }
.talk-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px; font-weight: 600; color: var(--red); padding-top: 2px;
}
.talk-list b { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; display: block; margin-bottom: 6px; }
.talk-list span:not(.talk-num) { font-size: 15px; line-height: 1.55; opacity: 0.78; display: block; }

/* ─── Characters ────────────────────────────────────────────────────────── */

.char-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-top: 40px; }
.char-card {
  position: relative; overflow: hidden; border-radius: 6px; padding: 0;
  aspect-ratio: 4/5; background: rgba(255,255,255,0.06);
  transition: transform 0.18s;
}
.char-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11,11,18,0.92) 0%, rgba(11,11,18,0.72) 26%, rgba(11,11,18,0.12) 52%, rgba(11,11,18,0) 70%);
}
.char-card.accent-red { box-shadow: inset 0 0 0 3px var(--red); }
.char-card.accent-turq { box-shadow: inset 0 0 0 3px var(--turquoise); }
.char-card:hover { transform: translateY(-3px); }
.char-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.char-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px 28px 26px; color: #fff; }
.char-card h3 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; margin-bottom: 8px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.55); }
.char-card p { font-size: 15px; line-height: 1.5; opacity: 0.95; margin: 0; max-width: 42ch; text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
.char-roster-line {
  text-align: center; margin: 28px auto 26px; max-width: 22ch; padding-bottom: 18px;
  position: relative;
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: clamp(28px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance;
}
.char-roster-line::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 120px; height: 4px; background: var(--red); border-radius: 2px;
}

.gallery-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 24px; }
.gallery-strip img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  border-radius: 3px; transition: transform 0.18s;
}
.gallery-strip img:hover { transform: scale(1.04) rotate(-1.5deg); }

/* ─── Stat additions ────────────────────────────────────────────────────── */

.stat-icon { display: block; margin-bottom: 12px; color: var(--turquoise); }
a.stat-link { text-decoration: none; color: inherit; display: block; transition: transform 0.16s; }
a.stat-link:hover { transform: translateY(-3px); }
a.stat-link:hover .stat-icon { color: var(--yellow); }

/* ─── Merch photo ───────────────────────────────────────────────────────── */

.merch-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .speak-grid { grid-template-columns: 1fr; gap: 36px; }
  .char-card { aspect-ratio: 3/4; }
  .char-body { padding: 20px; }
}

/* ─── Cursor-collage hero ──────────────────────────────────────────────── */
.collage-hero {
  position: relative; overflow: hidden;
  height: calc(100svh - 76px); min-height: 560px;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.collage-card {
  position: absolute; z-index: 1; pointer-events: none;
  border: 6px solid #fff; border-radius: 3px;
  box-shadow: 0 18px 44px -12px rgba(0,0,0,0.5);
  animation: collage-pop 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes collage-pop { from { opacity: 0; transform: translate(-50%,-50%) scale(0.6) rotate(0deg); } }
.collage-copy { position: relative; z-index: 2; text-align: center; padding: 0 24px; max-width: 900px; }
.collage-copy::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 128%; height: 150%;
  background: radial-gradient(closest-side, rgba(255,46,136,0.42), rgba(255,46,136,0.16) 58%, transparent 78%);
  pointer-events: none;
}
.collage-copy h1 {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: clamp(52px, 8.5vw, 120px); line-height: 0.98; letter-spacing: -0.03em;
  margin: 20px 0 18px; color: #fff;
  text-shadow: 0 4px 40px rgba(11,11,18,0.6);
}
.collage-copy p { font-size: clamp(17px, 2vw, 22px); font-style: italic; opacity: 0.92; margin: 0; text-shadow: 0 2px 24px rgba(11,11,18,0.7); }
.collage-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.collage-socials { display: flex; justify-content: center; margin-top: 26px; }
.collage-type { margin: 6px 0 14px; min-height: 1.6em; font-size: clamp(18px, 2.4vw, 28px); font-weight: 700; font-family: 'Archivo', sans-serif; letter-spacing: -0.01em; }
.type-chip { background: var(--turquoise); color: var(--navy); padding: 4px 12px 6px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.type-caret { display: inline-block; width: 3px; height: 1em; background: var(--navy); margin-left: 3px; vertical-align: -0.12em; animation: caret-blink 0.9s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.collage-hi { font-size: clamp(16px, 1.8vw, 20px); opacity: 0.92; margin: 0; text-shadow: 0 2px 24px rgba(11,11,18,0.7); }
.collage-copy p { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ─── Newsletter ───────────────────────────────────────────────────────── */
.sec-newsletter { background: var(--turquoise); color: var(--navy); padding: 96px 0; }
.sec-newsletter h2 { color: var(--navy); }
.nl-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.nl-form input { font: inherit; font-size: 16px; padding: 14px 18px; border: 2px solid var(--navy); border-radius: 4px; min-width: min(340px, 80vw); background: var(--paper); color: var(--navy); }
.nl-form input:focus { outline: 3px solid rgba(11,11,18,0.25); }
.nl-done { margin-top: 32px; font-weight: 700; font-size: 18px; }
.collage-hint {
  position: absolute; z-index: 2; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.55;
}
@media (hover: none) { .collage-hint { display: none; } }
@media (max-width: 720px) { .collage-hero { height: calc(100svh - 64px); min-height: 480px; } }

/* ─── Scroll-scrubbed reaction header (retired) ────────────────────────── */

.reaction-scene {
  position: relative;
  height: calc(100svh - 76px);
  background: var(--navy);
  padding: 0;
}
.reaction-pin {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--turquoise);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vh, 40px);
  padding: clamp(28px, 5vh, 56px) 24px clamp(32px, 6vh, 64px);
}
.reaction-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(208,61,69,0.0) 55%, rgba(208,61,69,0.55) 100%);
  transition: opacity 0.1s linear;
}
.reaction-stage {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  min-height: 0;
  height: min(58vh, 560px);
  aspect-ratio: 460/900;
  max-width: 92vw;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.reaction-figure {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform, filter;
}
.reaction-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 26px 34px rgba(11,11,18,0.28));
}

.reaction-caption {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  text-align: center;
  pointer-events: none;
}
.reaction-caption-text {
  display: inline-block;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 6.4vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--navy);
  text-wrap: balance;
  animation: reaction-pop 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes reaction-pop {
  from { transform: translateY(14px) scale(0.94); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.reaction-readout {
  position: absolute;
  top: 20px; left: 32px; right: 32px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.75;
}
.reaction-readout-bar {
  flex: 1;
  height: 2px;
  background: rgba(11,11,18,0.25);
  border-radius: 2px;
  overflow: hidden;
}
.reaction-readout-bar > span {
  display: block;
  height: 100%;
  background: var(--red);
}

.reaction-scrollhint {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  animation: reaction-bounce 1.6s ease-in-out infinite;
}
@keyframes reaction-bounce { 50% { transform: translate(-50%, 6px); } }

@media (max-width: 760px) {
  .reaction-scene { height: calc(100svh - 64px); }
  .reaction-readout { top: 16px; left: 18px; right: 18px; font-size: 10px; gap: 10px; }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .merch-grid, .reels-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .stat:nth-child(2) { border-right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  section { padding: 64px 0; }
  .wrap, .wrap-narrow { padding: 0 20px; }
  .hero { padding: 64px 0 80px; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo { max-width: 280px; }
  .about-grid { grid-template-columns: 1fr; }
  .merch-grid, .reels-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .phone-stage { grid-template-columns: repeat(2, 1fr); }
  .mk-hero-grid, .mk-two-col, .mk-download-cta { grid-template-columns: 1fr; }
}

/* Instagram embed tiles in the watch grid */
.ig-reel .reel-frame { aspect-ratio: 9/16; background: #0B0B12; overflow: hidden; }
.ig-reel .reel-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ig-reel:hover { transform: none; }
.phone-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; background: #0B0B12; pointer-events: none; }
.phone-bg .phone { width: 220px; }

/* ─── Phone reels feed ─────────────────────────────────────────────────── */
.phone-feed { position: absolute; inset: 0; overflow: hidden; z-index: 1; border-radius: 26px; }
.phone-track { position: absolute; inset: 0; display: flex; flex-direction: column; will-change: transform; }
.phone-track.is-sliding { transform: translateY(-100%); transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1); }
.phone-slot { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; background: #0B0B12; }
.phone-slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.18); z-index: 4; }
.phone-timer span { display: block; height: 100%; width: 100%; background: var(--paper); transform-origin: left center; animation: reel-timer linear forwards; }
@keyframes reel-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ─── Watch rail (horizontal Instagram scroller) ───────────────────────── */
.reel-rail-wrap { position: relative; margin-top: 36px; }
.reel-rail { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: 4px 2px 10px; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.reel-rail::-webkit-scrollbar { display: none; }
.reel-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.reel-rail .reel { flex: 0 0 clamp(210px, 22vw, 268px); scroll-snap-align: start; }
.rail-arrow { position: absolute; top: 40%; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--navy); background: var(--paper-2); color: var(--navy); font-size: 18px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background 0.15s, color 0.15s; }
.rail-arrow:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.rail-prev { left: -18px; }
.rail-next { right: -18px; }
@media (max-width: 860px) { .rail-prev { left: -6px; } .rail-next { right: -6px; } }

/* About photo fills the text column */
.about-grid { align-items: stretch; }
.about-photo { aspect-ratio: auto; height: 100%; min-height: 420px; }
.about-photo img { width: 100%; height: 100%; object-fit: contain !important; object-position: center; }

/* Cast images, smaller */
.char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-left: auto; margin-right: auto; gap: 20px; }
.char-card h3 { font-size: clamp(22px, 2.2vw, 30px); }
.char-card p { font-size: 14px; }
@media (max-width: 720px) { .char-grid { grid-template-columns: 1fr; } }

/* ─── Total reach headline above the platform stats ────────────────────── */
.stats-total { text-align: center; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.16); }
.stats-total-num { display: block; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(48px, 7vw, 96px); line-height: 0.92; letter-spacing: -0.03em; color: var(--turquoise); }
.stats-total-lbl { display: block; margin-top: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); opacity: 0.72; }

/* Brand logo chip over the playing clip */
.phone-logo { position: absolute; top: 34px; right: 10px; z-index: 5; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,0.94); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 7px; box-sizing: border-box; box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6); animation: logo-pop 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.phone-logo img { max-width: 32px; max-height: 32px; width: auto; height: auto; object-fit: contain; display: block; margin: auto; }
@keyframes logo-pop { from { opacity: 0; transform: translateY(-8px) scale(0.85); } to { opacity: 1; transform: none; } }

.case-card { position: relative; overflow: hidden; }
.phone-logo-text { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 9px; line-height: 1.05; letter-spacing: -0.03em; text-align: center; color: var(--navy); text-transform: uppercase; padding: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; word-break: break-word; }

/* Ways panels: same layout throughout, brand-work photo mirrored */
.way-panel.wp-mirror .wp-media img { transform: scaleX(-1); object-position: bottom left; }

/* Speaking photo swaps on hover */
.speak-shot { position: relative; display: block; border-radius: 4px; overflow: hidden; }
.speak-shot img { width: 100%; height: auto; display: block; }
.speak-shot-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
.speak-photos figure.has-hover:hover .speak-shot-alt { opacity: 1; }

/* Instagram tiles: captions share one height so the strip below is even */
.reel-meta { align-items: flex-start; }
.reel-title { line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Cast: two full-width cards, one each side */
.char-grid { max-width: none; gap: 28px; }
.char-card { aspect-ratio: 3/4; }
.char-card h3 { font-size: clamp(30px, 3.4vw, 46px); }
.char-card p { font-size: 15px; }

/* ─── Always-on subscribe tab ──────────────────────────────────────────── */
.sub-tab { position: fixed; left: 0; top: 50%; translate: 0 -50%; z-index: 60; writing-mode: vertical-rl; text-orientation: mixed; rotate: 180deg; background: var(--red); color: var(--paper); border: 0; padding: 22px 11px; border-radius: 0 8px 8px 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); transition: background 0.18s, color 0.18s; }
.sub-tab:hover { background: var(--turquoise); color: var(--navy); }
.sub-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(11,11,18,0.72); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; animation: sub-fade 0.2s ease both; }
@keyframes sub-fade { from { opacity: 0; } to { opacity: 1; } }
.sub-card { position: relative; width: min(440px, 100%); background: var(--navy); border: 2px solid var(--turquoise); border-radius: 10px; padding: 34px 30px 30px; color: var(--paper); animation: sub-rise 0.28s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes sub-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sub-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--paper); font-size: 26px; line-height: 1; cursor: pointer; opacity: 0.6; }
.sub-close:hover { opacity: 1; color: var(--red); }
.sub-title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 30px; line-height: 1.02; letter-spacing: -0.02em; }
.sub-copy { margin-top: 10px; font-size: 14px; line-height: 1.5; opacity: 0.78; }
.sub-form { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.sub-form input { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.06); color: var(--paper); font-size: 14px; }
.sub-form input::placeholder { color: rgba(255,255,255,0.45); }
.sub-form input:focus { outline: 2px solid var(--turquoise); outline-offset: 1px; }
@media (max-width: 720px) { .sub-tab { padding: 16px 9px; font-size: 10px; } }

.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mk-anchor{display:block;height:0}
.mk-unlock{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;padding:40px}
.mk-unlock-copy h3{margin:0 0 10px}
.mk-unlock-copy p{margin:0;color:var(--muted);font-size:15px;max-width:34ch}
.mk-unlock-form{margin:0}
@media (max-width:820px){.mk-unlock{grid-template-columns:1fr;padding:28px}}

/* Substack embed. Their API refuses posts from our own form, so the embed is
   the only thing that actually subscribes anyone. */
.nl-embed-wrap { margin-top: 30px; display: flex; justify-content: center; }
.nl-embed { width: 100%; max-width: 480px; border: 0; border-radius: 10px; display: block; background: transparent; }
.sub-card .nl-embed-wrap { margin-top: 18px; }
.sub-card .nl-embed { max-width: 100%; box-shadow: 0 6px 24px rgba(0,0,0,0.28); }
@media (max-width: 520px) { .nl-embed { border-radius: 8px; } }

/* The modal card is dark, but the global heading colour was overriding the
   card's inherited light colour, so this title was navy on navy. Invisible. */
.sub-card .sub-title { color: var(--paper); }

/* Crawlable fallback. Real markup for anything that does not run JavaScript.
   React replaces #app on mount, so a normal visitor never sees this. */
#nojs-content { position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; }


/* ─── Posting streak counter (sits between the two rules in the stats block) ─ */
.streak { text-align: center; margin: -4px 0 24px; }
.streak-lbl { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); opacity: 0.5; }
.streak-val { display: flex; justify-content: center; align-items: baseline; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.streak-unit { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(19px, 2vw, 28px); line-height: 1; letter-spacing: -0.02em; color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.streak-unit i { font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: 0.4em; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; margin-left: 4px; }
.streak-sub { display: block; margin-top: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--paper); opacity: 0.42; }
@media (max-width: 560px) { .streak-val { gap: 9px; } .streak-unit { font-size: 17px; } .streak-sub { font-size: 9px; letter-spacing: 0.04em; } }

/* Light-background variant, used on the media kit. */
.streak-light { margin: 26px 0 0; }
.streak-light .streak-lbl { color: var(--ink); opacity: 0.55; }
.streak-light .streak-unit { color: var(--red); }
.streak-light .streak-unit i { color: var(--ink); opacity: 0.5; }
.streak-light .streak-sub { color: var(--muted); opacity: 1; }

/* Characters cover sits flush on the black band below it. */
#about { padding-bottom: 0; }
.char-cover { border-radius: 4px 4px 0 0; }

/* Short description under an "Elsewhere" card heading. */
.else-blurb { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.else-blurb a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.else-blurb a:hover { color: var(--red); }
.else-warn { display: inline-block; margin: 0 0 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); border: 1px solid currentColor; border-radius: 99px; padding: 4px 10px; }

.char-intro { max-width: 640px; margin: 10px 0 22px; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* Media kit hero heading: one phrase per line, scaled so nothing wraps.
   Selector has to out-specify ".mk-hero h1", which sets 88px. */
.mk-hero h1.mk-hero-h1 { font-size: clamp(32px, 4.35vw, 74px); line-height: 1.03; }
.mk-hero h1.mk-hero-h1 span { display: block; white-space: nowrap; }
@media (max-width: 900px) { .mk-hero h1.mk-hero-h1 { font-size: clamp(28px, 7.4vw, 52px); } }

/* A "coming soon" panel points somewhere useful instead of dead ending. */
.wp-soon-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; position: relative; z-index: 2; }
.wp-soon-link:hover { color: var(--red); }

/* Bedtime stories: full width row at the foot of "Wait, there's more". */
.else-bedtime { grid-column: 1 / -1; }
.bedtime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bedtime-frame { background: transparent; border: 0; border-radius: 12px; }
.bedtime-frame iframe { height: 152px; }
@media (max-width: 720px) { .bedtime-grid { grid-template-columns: 1fr; gap: 14px; } }

/* Links page: real icons, sized to their containers. */
.links-soc { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.12s, color 0.14s; }
/* A global a:hover was turning the icon navy on a navy circle, so it vanished. Pink instead. */
.links-soc:hover, .links-soc:focus-visible { color: var(--red); }
.links-soc svg { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.link-card-icon { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.link-card-icon svg { width: 22px; height: 22px; display: block; flex: 0 0 auto; }


/* ─── MOBILE FIXES 13 AUG ─────────────────────────────────────────────── */

/* The footer was a 4 column grid at every width. At 389px that pushed the
   page 132px wider than the screen, which is what made it scroll sideways
   and threw the whole layout off centre. */
@media (max-width: 760px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 420px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Belt and braces: nothing may push the page sideways. */
html, body { overflow-x: hidden; max-width: 100%; }

/* Audience counts as a 2x2 grid on phones: TikTok and Instagram on top,
   Facebook and YouTube underneath. */
@media (max-width: 760px) {
  .stats-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .stats-strip .stat { border-right: 1px solid rgba(255,255,255,0.18); border-bottom: 1px solid rgba(255,255,255,0.18); }
  .stats-strip .stat:nth-child(2n) { border-right: 0; }
  .stats-strip .stat:nth-child(n+3) { border-bottom: 0; }
}

/* Ways panels on phones: text on the left, picture on the right, no overlap
   and no hover reveal, because there is no hover on a phone. */
@media (max-width: 760px) {
  .way-panel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 14px; min-height: 0; padding: 18px 16px; }
  .way-panel:hover { min-height: 0; transform: none; }
  .wp-num { order: 1; flex: 1 0 100%; position: static; display: block; margin-bottom: 8px; }
  .wp-body { order: 2; flex: 1 1 0; min-width: 0; max-width: none; }
  .wp-media { order: 3; position: static; flex: 0 0 96px; width: 96px; height: 96px; top: auto; right: auto; bottom: auto; opacity: 1; transform: none; }
  .way-panel:hover .wp-media { transform: none; }
  .wp-media img { mix-blend-mode: normal; object-position: center; }
  .wp-blurb { max-height: none; opacity: 1; transform: none; margin-top: 6px; }
  .wp-cta { order: 4; flex: 1 0 100%; position: static; display: block; margin-top: 12px; }
}

/* The subscribe tab is rotated 180deg, which flips its corners. Declaring the
   radius the other way round makes it read flat against the screen edge and
   curved on the inside, which is what it looks like it should do. */
.sub-tab { border-radius: 8px 0 0 8px; }


/* ─── MEDIA KIT MOBILE + ways panel tweaks ────────────────────────────── */

/* These two rows used to be inline 4 column grids, which could not be
   overridden and were being clipped on phones. */
.mk-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mk-steps   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 900px) {
  .mk-metrics { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mk-steps   { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .mk-steps { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Photo above the headline on a phone, not stranded below it. */
  .mk-hero-grid { display: flex; flex-direction: column; }
  .mk-hero-photo { order: -1; margin-bottom: 22px; }
  .mk-hero-photo img { width: 100%; height: auto; display: block; border-radius: 10px; }

  /* Reach by platform was a 619px wide grid inside a 338px column. */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid .stat { padding: 16px 12px; }
  .stats-grid .stat-num { font-size: 26px; }

  .mk-two-col { gap: 20px; }
  .mk-section { padding: 48px 0; }
}

/* Ways panels: the call to action must not need a hover on a phone, and the
   picture fills the right hand side properly. */
@media (max-width: 760px) {
  .way-panel .wp-cta { opacity: 1; transform: none; max-height: none; visibility: visible; }
  .wp-media { flex: 0 0 128px; width: 128px; height: auto; align-self: stretch; min-height: 118px; }
  .wp-media img { width: 100%; height: 100%; object-fit: contain; object-position: center right; }
}

/* Gated audience section: was an inline 2 column grid that overflowed phones. */
.mk-aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 900px) {
  .mk-aud-grid { grid-template-columns: 1fr; gap: 20px; }
  .audience-row { grid-template-columns: 88px 1fr 48px; gap: 10px; font-size: 13px; }
  .aud-card, .audience-list, .audience-row { min-width: 0; }
}


/* ─── RATE TABLE MOBILE ───────────────────────────────────────────────── */
/* Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content. That is what was holding the rate card table wide and
   stretching the whole media kit on a phone. */
@media (max-width: 900px) {
  .mk-two-col, .mk-two-col > *, .wrap > * { min-width: 0; }
  .card:has(> .mk-rate-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .mk-rate-table { min-width: 460px; font-size: 12px; }
  .mk-rate-table th, .mk-rate-table td { padding: 10px 10px; }
}


/* ─────────────────────────────────────────────────────────────
   WORK WITH ME  (Creator Unc)  ·  added 18 Aug 2026
   marker: WWM-BLOCK-V1
   ───────────────────────────────────────────────────────────── */

.wwm-hero {
  position: relative;
  background: var(--navy);
  color: var(--paper);
  padding: 86px 0 74px;
  border-bottom: 2px solid var(--turquoise);
  overflow: hidden;
}
.wwm-hero .wrap { position: relative; z-index: 2; }
.wwm-h1 {
  margin: 18px 0 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 6.6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.wwm-lede { margin-top: 22px; max-width: 640px; color: rgba(255, 255, 255, 0.92); }
.wwm-lede-dark { margin-top: 16px; max-width: 680px; }
.wwm-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.wwm-hero-streak { margin-top: 34px; }

.wwm-sec { padding: 74px 0; background: var(--paper-2); }
.wwm-sec-alt { background: var(--paper); }
.wwm-h2 {
  margin: 14px 0 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3.5vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.wwm-h2-light { color: var(--paper); }
.wwm-h3 {
  margin: 0 0 10px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.wwm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; align-items: start; }
.wwm-card { padding: 26px 24px; }
.wwm-card-mute { background: transparent; }

.wwm-list { list-style: none; margin: 0; padding: 0; }
.wwm-list li {
  position: relative;
  padding: 0 0 0 26px;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
}
.wwm-list li:last-child { margin-bottom: 0; }
.wwm-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
}
.wwm-list-x li::before { background: var(--muted); opacity: 0.55; }
.wwm-list-tight li { font-size: 14px; margin-bottom: 9px; }

.wwm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.wwm-step { border-top: 2px solid var(--ink); padding-top: 16px; }
.wwm-step p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--muted); }
.wwm-step-n {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 10px;
}

.wwm-why { background: var(--navy); color: var(--paper); }
.wwm-why-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; margin-top: 30px; align-items: start; }
.wwm-why-grid p { color: rgba(255, 255, 255, 0.9); line-height: 1.62; margin: 0 0 16px; }
.wwm-why-grid p:last-child { margin-bottom: 0; }
.wwm-why-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18); }
.wwm-stat { background: var(--navy); padding: 20px 18px; }
.wwm-stat b {
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  color: var(--turquoise);
  letter-spacing: -0.02em;
}
.wwm-stat i {
  display: block;
  font-style: normal;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}

.wwm-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; align-items: stretch; }
.wwm-offer { display: flex; flex-direction: column; padding: 26px 24px; }
.wwm-offer-hot { border-color: var(--red); box-shadow: 6px 6px 0 var(--red); }
.wwm-offer-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 10px;
}
.wwm-offer-name {
  margin: 14px 0 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.wwm-price { margin-top: 12px; }
.wwm-price b {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.wwm-price-alt {
  display: inline-block;
  margin-left: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--muted);
}
.wwm-price-note { display: block; margin-top: 7px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.wwm-offer-len {
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted);
}
.wwm-offer-blurb { font-size: 15px; line-height: 1.55; margin: 16px 0 18px; }
.wwm-offer-btn { margin-top: auto; justify-content: center; width: 100%; }
.wwm-offer .wwm-list { margin-bottom: 22px; }
.wwm-fine { margin-top: 24px; font-size: 13px; color: var(--muted); max-width: 620px; }

.wwm-dont { list-style: none; margin: 28px 0 0; padding: 0; max-width: 720px; }
.wwm-dont li {
  position: relative;
  padding: 16px 0 16px 40px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
  line-height: 1.5;
}
.wwm-dont li::before {
  content: "×";
  position: absolute;
  left: 6px; top: 12px;
  font-size: 22px;
  line-height: 1;
  color: var(--red);
  font-weight: 700;
}

.wwm-close { background: var(--navy); color: var(--paper); padding: 76px 0; border-top: 2px solid var(--turquoise); }

/* Booking overlay */
.wwm-modal-back {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11, 11, 18, 0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.wwm-modal {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  width: 100%; max-width: 760px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wwm-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  border-bottom: 2px solid var(--ink);
}
.wwm-modal-sub {
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.wwm-modal-x {
  border: 0; background: transparent; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--ink);
  padding: 0 4px; min-width: 44px; min-height: 44px;
}
.wwm-modal-x:hover { color: var(--red); }
.wwm-modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 420px; }
.wwm-modal-fall { padding: 14px 20px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.wwm-modal-fall a { color: var(--red); }

@media (max-width: 900px) {
  .wwm-two { grid-template-columns: 1fr; }
  .wwm-why-grid { grid-template-columns: 1fr; gap: 28px; }
  .wwm-steps { grid-template-columns: 1fr; gap: 24px; }
  .wwm-offers { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .wwm-hero { padding: 58px 0 52px; }
  .wwm-sec, .wwm-close { padding: 54px 0; }
  .wwm-hero-btns .btn { width: 100%; justify-content: center; }
  .wwm-card { padding: 22px 18px; }
  .wwm-offer { padding: 22px 18px; }
  .wwm-price b { font-size: 34px; }
  .wwm-modal-back { padding: 0; align-items: stretch; }
  .wwm-modal { max-width: none; max-height: none; height: 100%; border: 0; }
  .wwm-modal-body { min-height: 0; }
  .wwm-why-stats { grid-template-columns: 1fr 1fr; }
}

/* WWM-FIX-1 */
.wwm-hero .wwm-h1 { color: var(--paper); }
.wwm-hero-streak .streak { text-align: left; }

/* WWM-FIX-2 */
.wwm-hero-streak .streak-val { justify-content: flex-start; }
.wwm-modal-body iframe { border: 0 !important; box-shadow: none !important; margin: 0 !important; width: 100% !important; }


/* ─── WWM-BLOCK-V2 · hero photo + what we cover · 18 Aug 2026 ─── */

.wwm-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 46px; align-items: center; }
.wwm-hero-photo { position: relative; max-width: 380px; width: 100%; justify-self: end; }
.wwm-hero-photo img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--turquoise);
  box-shadow: 10px 10px 0 var(--red);
}

.wwm-cover { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; align-items: start; }
.wwm-cover-panel { padding: 30px 28px; display: flex; flex-direction: column; }
.wwm-cover-name {
  margin: 12px 0 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900; font-size: 27px; letter-spacing: -0.02em; line-height: 1.05;
}
.wwm-cover-meta {
  margin-top: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.wwm-cover-lead { font-size: 15px; line-height: 1.6; margin: 16px 0 0; }
.wwm-cover-sub {
  margin: 22px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
}
.wwm-topics { list-style: none; margin: 10px 0 0; padding: 0; }
.wwm-topics li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px; line-height: 1.5;
}
.wwm-topics li:last-child { border-bottom: 0; }
.wwm-topics b { font-family: 'Archivo', system-ui, sans-serif; font-weight: 900; margin-right: 5px; }
.wwm-cover-close { font-size: 15px; line-height: 1.6; margin: 20px 0 0; }
.wwm-cover-note { font-size: 13px; line-height: 1.55; margin: 12px 0 0; color: var(--muted); }
.wwm-cover-btn { margin-top: 22px; justify-content: center; width: 100%; }

@media (max-width: 900px) {
  .wwm-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .wwm-hero-photo { justify-self: start; max-width: 300px; }
  .wwm-cover { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wwm-hero-photo { max-width: 100%; }
  .wwm-hero-photo img { box-shadow: 7px 7px 0 var(--red); }
  .wwm-cover-panel { padding: 24px 18px; }
  .wwm-cover-name { font-size: 23px; }
}

/* WWM-FIX-3 · on a phone the square portrait eats a whole screen, so crop it to a band */
@media (max-width: 760px) {
  .wwm-hero-photo img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50% 12%;
  }
}


/* ─── WWM-BLOCK-V3 · honesty list terms + guarantee · 18 Aug 2026 ─── */

.wwm-dont b { font-family: 'Archivo', system-ui, sans-serif; font-weight: 900; margin-right: 6px; }

.wwm-guarantee {
  margin-top: 32px;
  max-width: 720px;
  background: var(--navy);
  color: var(--paper);
  border: 2px solid var(--ink);
  padding: 24px 26px;
  box-shadow: 8px 8px 0 var(--turquoise);
}
.wwm-guarantee b {
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--turquoise);
  margin-bottom: 9px;
}
.wwm-guarantee span {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 760px) {
  .wwm-guarantee { padding: 20px 18px; box-shadow: 6px 6px 0 var(--turquoise); }
  .wwm-guarantee b { font-size: 19px; }
}


/* ─── WWM-BLOCK-V4 · guarantee beside the list + a calendar that fits · 18 Aug 2026 ─── */

.wwm-dont-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 40px;
  align-items: start;
  margin-top: 28px;
}
.wwm-dont-grid .wwm-dont { margin: 0; max-width: none; }
.wwm-dont-grid .wwm-guarantee { margin-top: 6px; max-width: none; }

/* The calendar was scrolling inside a scrollbox inside the overlay, which felt
   cramped. Give the modal a real height and let the iframe fill it, so there is
   only ever one thing scrolling. */
.wwm-modal {
  max-width: 940px;
  height: min(780px, calc(100vh - 48px));
}
.wwm-modal-body {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.wwm-modal-body .tidycal-embed { display: block; width: 100%; }
.wwm-modal-body iframe {
  width: 100% !important;
  border: 0 !important;
  display: block;
}

@media (max-width: 900px) {
  .wwm-dont-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 760px) {
  .wwm-modal { height: 100%; max-height: none; }
}

/* WWM-FIX-5 · TidyCal's description block is long, so give the calendar every
   pixel of window height rather than a fixed box. */
.wwm-modal-back { padding: 14px; }
.wwm-modal { height: calc(100vh - 28px); max-height: calc(100vh - 28px); }
.wwm-modal-head { padding: 14px 20px; }
@media (max-width: 760px) {
  .wwm-modal-back { padding: 0; }
  .wwm-modal { height: 100%; max-height: none; }
}


/* ─── WWM-MOBILE-NAV · 18 Aug 2026 ───────────────────────────────
   Below 760px .nav-links was display:none, so on a phone the nav had
   no links at all. Now it wraps to a second row that scrolls sideways. */
@media (max-width: 760px) {
  .site-nav-inner { flex-wrap: wrap; row-gap: 0; }
  .nav-links {
    display: flex;
    order: 10;
    flex: 1 0 100%;
    gap: 20px;
    margin-top: 11px;
    padding: 9px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: 13px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; flex: 0 0 auto; padding-bottom: 5px; }
  .nav-hint { display: none; }
}

/* WWM-MOBILE-NAV-2 retired 18 Aug 2026, superseded by V3 */

/* WWM-MOBILE-NAV-3 · Creator Unc stays last and far right on every size.
   Tighten the phone strip so all seven labels fit without a swipe. */
@media (max-width: 760px) {
  .site-nav-inner { padding-left: 16px; padding-right: 16px; }
  .nav-links {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 8px 14px;
    font-size: 12.5px;
    letter-spacing: -0.005em;
  }
  /* it wraps onto its own line on a phone, so push it to the far right
     to match where it sits on desktop */
  .nav-links a[href="/work-with-me"] { color: var(--turquoise); opacity: 1; margin-left: auto; }
}

/* WWM-FIX-6 retired, superseded by FIX-7 */

/* WWM-FIX-7 · the calendar is now a plain iframe that fills the overlay and
   scrolls itself, so the overlay must not try to scroll or resize it. */
.wwm-modal-body {
  display: flex !important;
  overflow: hidden !important;
  min-height: 0;
  padding: 0;
}
.wwm-modal-body iframe {
  flex: 1 1 auto;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  border: 0 !important;
  display: block;
}
/* stop the page behind creeping while the overlay is open */
body[style*="overflow: hidden"] { position: relative; }


/* ─── MK-MOBILE-V2 · media kit on a phone · 23 Aug 2026 ────────────
   The campaign phones were 70px wide because mediakit.html carried an
   inline repeat(4, 1fr), which beat every stylesheet rule. That inline
   is gone now, so these actually apply. */

@media (max-width: 760px) {
  /* four phones across 393px was unreadable. Two, at 162px each. */
  .phone-stage { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* the fake 9:41 status bar is decoration and just clutter at this size */
  .phone-status { display: none; }

  /* "Paid partnership · Sony Pictures" was clipped to "Pai". Let it wrap. */
  .phone-brand-pill {
    left: 8px; right: 8px; bottom: 16px;
    width: auto; max-width: calc(100% - 16px);
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    font-size: 9.5px;
    line-height: 1.3;
    padding: 5px 9px;
  }

  /* three logo columns left every brand illegible. Two, bigger, and drop
     the wash: there is no hover on a phone so they never un-grey. */
  /* minmax(0,1fr) + min-width:0 stops a grid cell being forced wider than
     its share by a big image. Square logos carry a second class, .sq, whose
     rules beat a bare .brand-logo, so both are named here. Percentage
     max-height resolves unreliably against an aspect-ratio box, so this is
     a fixed pixel cap instead. */
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-cell { min-width: 0; overflow: hidden; padding: 14px 12px; }
  .brand-cell .brand-logo,
  .brand-cell .brand-logo.sq {
    max-width: 100%;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1) contrast(1.05);
    opacity: 1;
  }
}


/* ===== SPK-BLOCK-V1 : speaking channel (YouTube, talking) ===== */
.spk-channel {
  margin-top: 64px;
  background: var(--navy);
  color: var(--paper);
  border-radius: 6px;
  padding: 40px 40px 44px;
}
.spk-channel-head { max-width: 620px; }
.spk-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--turquoise);
  border-radius: 999px;
  padding: 6px 14px;
}
.spk-channel-h {
  color: var(--paper);
  margin: 18px 0 0;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.05;
}
.spk-channel-p {
  color: rgba(255, 244, 236, 0.78);
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
}
.spk-vids {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}
a.spk-vid {
  display: block;
  color: var(--paper);
  text-decoration: none;
  min-width: 0;
}
a.spk-vid:hover { color: var(--turquoise); }
.spk-thumb {
  position: relative;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: var(--navy-soft);
  aspect-ratio: 16 / 9;
}
.spk-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}
a.spk-vid:hover .spk-thumb img { transform: scale(1.04); }
.spk-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(11, 11, 18, 0.72);
  border: 2px solid var(--turquoise);
}
.spk-play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--turquoise);
}
.spk-vid-title {
  display: block;
  margin-top: 14px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
}
.spk-vid-date {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 244, 236, 0.5);
}
.spk-cta-row { margin-top: 34px; }
.spk-channel .btn-turq { color: var(--navy); }

@media (max-width: 900px) {
  .spk-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .spk-vids a.spk-vid:nth-child(3) { display: none; }
}
@media (max-width: 620px) {
  .spk-channel { padding: 28px 20px 32px; margin-top: 44px; }
  .spk-vids { grid-template-columns: 1fr; gap: 20px; margin-top: 26px; }
  .spk-vids a.spk-vid:nth-child(3) { display: block; }
  .spk-channel-p { font-size: 15px; }
  .spk-play { width: 44px; height: 44px; }
}
/* ===== end SPK-BLOCK-V1 ===== */


/* ===== SPK-FIX-1 : tidy the speaking cards ===== */
a.spk-vid { display: flex; flex-direction: column; height: 100%; }
.spk-vid-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.spk-vid-date { margin-top: auto; padding-top: 6px; }
/* play badge out of the way of burned-in titles */
.spk-play {
  left: auto;
  top: auto;
  right: 10px;
  bottom: 10px;
  transform: none;
  width: 40px;
  height: 40px;
}
@media (max-width: 620px) {
  .spk-play { width: 38px; height: 38px; }
}
/* ===== end SPK-FIX-1 ===== */


/* ===== SPK-FIX-2 : mobile CTA must not overflow the card ===== */
@media (max-width: 620px) {
  .spk-cta-row { margin-top: 26px; }
  .spk-cta-row .btn {
    display: block;
    width: 100%;
    text-align: center;
    white-space: normal;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 15px;
  }
}
/* ===== end SPK-FIX-2 ===== */