/* Gradient mesh background — appended */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.65) 0%, rgba(0,0,0,.2) 50%, transparent 100%),
    linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
  z-index: 2;
}
.hero-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.hero-bg .b1 {
  width: 720px; height: 720px;
  background: radial-gradient(circle, #266bd9 0%, rgba(38,107,217,0) 70%);
  top: -160px; left: -120px;
  animation: drift1 26s ease-in-out infinite alternate;
}
.hero-bg .b2 {
  width: 620px; height: 620px;
  background: radial-gradient(circle, #1a4f9e 0%, rgba(26,79,158,0) 70%);
  top: 30%; right: -160px;
  animation: drift2 32s ease-in-out infinite alternate;
}
.hero-bg .b3 {
  width: 540px; height: 540px;
  background: radial-gradient(circle, #266bd9 0%, rgba(38,107,217,0) 70%);
  bottom: -180px; left: 30%;
  opacity: 0.4;
  animation: drift3 38s ease-in-out infinite alternate;
}
.hero-bg .b4 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #2b86ff 0%, rgba(43,134,255,0) 70%);
  top: 10%; left: 40%;
  opacity: 0.35;
  animation: drift4 30s ease-in-out infinite alternate;
}
.hero-bg .grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
  z-index: 1;
}
@keyframes drift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(180px, 120px) scale(1.15); }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-160px, -100px) scale(1.1); }
}
@keyframes drift3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(120px, -80px) scale(1.2); }
}
@keyframes drift4 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-90px, 80px) scale(1.05); }
}

.hero { position: relative; }
.hero > .shell { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg .blob { animation: none; }
}

/* Newsletter footer block */
.footer-news {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}
.footer-news h4 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 6px;
}
.footer-news p {
  font-size: 14px;
  color: var(--muted);
  max-width: 60ch;
}
.footer-news form {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-2);
  background: #0a0a0a;
  min-width: 320px;
}
.footer-news input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
}
.footer-news input::placeholder { color: var(--dim); }
.footer-news button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 14px 18px;
  border: 0;
  cursor: none;
  transition: background .2s var(--ease);
}
.footer-news button:hover { background: #fff; color: var(--bg); }
@media (max-width: 700px) {
  .footer-news { grid-template-columns: 1fr; }
  .footer-news form { min-width: 0; width: 100%; }
}


/* ——— Logo marquee (image-based) ——— */
.marquee--logos { padding: 0; background: #000; }
.marquee--logos .marquee-track { gap: 4px; align-items: center; }
.marquee--logos .marquee-item {
  display: inline-flex; align-items: center; justify-content: center;
  height: 200px; width: 480px; flex: 0 0 auto;
  padding: 0; font-size: 0;
}
.marquee--logos .marquee-item img {
  max-height: 200px; max-width: 480px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(3.2) contrast(1.15);
  opacity: .92;
  transition: opacity .25s var(--ease), filter .25s var(--ease);
}
.marquee--logos .marquee-item:hover img {
  opacity: 1;
  filter: grayscale(1) brightness(3.6) contrast(1.2);
}

/* Comedy Clubhouse — replace box logo with text-only treatment so it doesn't read as a bright white block */
.marquee--logos .marquee-item.is-dark-bg {
  width: auto; padding: 0 8px;
}
.marquee--logos .marquee-item.is-dark-bg .cc-text {
  display: inline-block;
  font-family: var(--font-display, "League Spartan", sans-serif);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #e8e8e8;
  white-space: nowrap;
  line-height: 1;
}

@media (max-width: 700px) {
  .marquee--logos .marquee-item { height: 110px; width: 260px; }
  .marquee--logos .marquee-item img { max-height: 110px; max-width: 260px; }
  .marquee--logos .marquee-track { gap: 4px; }
  .marquee--logos .marquee-item.is-dark-bg .cc-text { font-size: 32px; }
}


/* ——— Instagram-style gallery (uniform 6-col grid) ——— */
.ig-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.ig-gallery .ig-tile {
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 0;
}
.ig-gallery .ig-tile .tag,
.ig-gallery .ig-tile .corner {
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.ig-gallery .ig-tile:hover .tag,
.ig-gallery .ig-tile:hover .corner {
  opacity: 1;
}
.ig-gallery .ig-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.55) 100%);
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.ig-gallery .ig-tile:hover::after { opacity: 1; }
.ig-gallery .ig-tile.is-blank {
  background: #0a0a0a;
}
.ig-gallery .ig-tile.is-blank::after { display: none; }

/* media-strip blank + contain variants */
.media-strip .plate.is-blank { background: #0a0a0a; }
.media-strip .plate.is-blank::after { display: none; }
.media-strip .plate.fit-contain {
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-strip .plate.fit-contain img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  object-position: center;
}
.media-strip .plate.zoom-out {
  background: #0a0a0a;
}
.media-strip .plate.zoom-out img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(0.78);
  transform-origin: center;
}
@media (max-width: 700px) {
  .ig-gallery { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .ig-gallery .ig-tile .tag,
  .ig-gallery .ig-tile .corner { opacity: 1; font-size: 9px; padding: 4px 6px; }
}

/* ——— Process cards (cleaner, less text) ——— */
.process-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.proc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0;
  min-height: 260px;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.proc-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: var(--card-2, #0d0d0d);
}
.proc-card .proc-n {
  font-family: var(--font-display, "League Spartan", sans-serif);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 24px;
}
.proc-card h4 {
  font-family: var(--font-display, "League Spartan", sans-serif);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--fg);
}
.proc-card p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 24px;
  flex: 1;
}
.proc-card .proc-dur {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
@media (max-width: 1000px) {
  .process-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .process-cards { grid-template-columns: 1fr; }
  .proc-card { min-height: 0; }
}