/* =============================================================
   cosmos-production.css — Cosmos Production brand theme
   Requires: base.css, brand-shared.css

   Personality: Bold, high-energy, theatrical.
   Palette: Deep charcoal black bg, crimson red accent, warm whites.
   Typography: DM Serif Display headlines for gravitas, Inter body.
   ============================================================= */

/* ── Brand CSS variables for this page ── */
.page--events {
  --brand-accent:      #C0392B;
  --brand-accent-dark: #96281B;
  --brand-bg:          #140C0B;        /* very dark warm black */
  --brand-about-bg:    #fdf9f8;        /* warm off-white */
  --brand-services-bg: #1A0D0C;        /* dark warm panel */
  --brand-card-bg:     rgba(255,255,255,0.04);
}

/* ── Nav accent ── */
.site-header--events {
  background-color: #100907;
  border-bottom-color: rgba(192, 57, 43, 0.25);
}

/* ── Hero ── */
.brand-hero--events {
  background-color: #140C0B;
}

/* Warm red radial glow behind content */
.brand-hero--events::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -5%;
  width: 55%;
  height: 70%;
  background: radial-gradient(ellipse, rgba(192, 57, 43, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── About section ── */
.brand-about--events {
  background-color: #fdf9f8;
}

.brand-about--events .brand-about__heading {
  color: var(--color-events);
}

/* ── Services section ── */
.brand-services--events {
  background-color: #140C0B;
  color: #ffffff;
}

.brand-services--events .brand-services__heading {
  color: #ffffff;
}

.brand-services--events .services-grid__item {
  background-color: rgba(255, 255, 255, 0.04);
  border-left-color: var(--color-events);
}

.brand-services--events .services-grid__icon {
  color: var(--color-events);
}

.brand-services--events .services-grid__title {
  color: #ffffff;
}

.brand-services--events .services-grid__desc {
  color: rgba(255, 255, 255, 0.65);
}

/* ── Contact section ── */
.brand-contact-section--events {
  background-color: #0e0706;
  border-top: 1px solid rgba(192, 57, 43, 0.2);
}

.contact-btn--events {
  background-color: var(--color-events);
}

.contact-btn--events:hover {
  background-color: var(--color-events-dark);
}