/* ==========================================================================
   CFX NETWORK — SERVICES PAGES (services.css)
   Matches "Our services — PR works" [1440x4386] & "Media & films" [1440x5738]
   ========================================================================== */

/* ── 1. Service Division Introduction Hero ──────────────────────────────── */
.cfx-service-hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: end;
}

.cfx-service-hero-summary {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

/* ── 2. Featured Campaigns Pair (PR Works) ──────────────────────────────── */
.cfx-featured-campaign-card {
  background-color: var(--cfx-surface);
  border: 1px solid var(--cfx-rule-strong);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cfx-featured-campaign-overlay {
  background-color: var(--cfx-paper);
  border: 1px solid var(--cfx-rule);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cfx-featured-campaign-overlay h3 {
  font-size: 1.5rem;
}

.cfx-featured-campaign-meta {
  font-size: 0.875rem;
  color: var(--cfx-ink-muted);
  margin-bottom: 6px;
}

/* ── 3. Capabilities Grid (PR & Film Production Capabilities) ───────────── */
.cfx-capability-card {
  background-color: var(--cfx-surface);
  border: 1px solid var(--cfx-rule-strong);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--cfx-transition-fast), transform var(--cfx-transition-fast);
}

.cfx-capability-card:hover {
  border-color: var(--cfx-ink);
  transform: translateY(-2px);
}

.cfx-capability-card h3 {
  font-size: 1.5625rem;
}

.cfx-capability-card p {
  font-size: 0.96875rem;
  color: var(--cfx-ink-secondary);
}

/* ── 4. Production Approach ("From concept to final cut.") ──────────────── */
.cfx-production-approach-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}

.cfx-production-stages {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cfx-production-stage-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cfx-rule-strong);
}

.cfx-production-stage-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cfx-production-stage-row h3 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

/* ── 5. Film to Campaign Crossover ("From film to a bigger conversation.") */
.cfx-crossover-section {
  background-color: var(--cfx-obsidian);
  color: #FFFFFF;
}

.cfx-crossover-section .cfx-eyebrow,
.cfx-crossover-section h2,
.cfx-crossover-section h3 {
  color: #FFFFFF !important;
}

.cfx-crossover-section .cfx-lead,
.cfx-crossover-section p {
  color: rgba(255, 255, 255, 0.82);
}

.cfx-crossover-card {
  background-color: var(--cfx-charcoal);
  border: 1px solid var(--cfx-rule-dark-strong);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cfx-crossover-card h3 {
  color: #FFFFFF;
}

/* ── 6. Services Hub Overview Cards (/our-services/) ────────────────────── */
.cfx-services-hub-card {
  background-color: var(--cfx-surface);
  border: 1px solid var(--cfx-rule-strong);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}