/* ============================================================
   Mayfair21 — operator-brief shared stylesheet
   Loaded alongside the main /styles.css (which carries all the
   palette, type tokens and shared components — .section,
   .container, .eyebrow, .display-*, .prose, .cap-block,
   .steps-grid, .step-cell, .hero, .site-header, .site-footer).
   Only the brief-specific patterns live here.
   ============================================================ */

/* ---------- Brief hero — re-skinned per platform ----------
   Default brief hero uses the tower photograph (carries over from
   Joule). Each brief picks its own background by adding a platform-
   specific modifier class — .brief-hero-aimdm swaps in the atrium
   image, which is also the image used in the main-site Capabilities
   section so the brand carries through. */
.brief-hero {
  background-image: url('/assets/images/04-tower-african.jpg');
}
.brief-hero-aimdm {
  background-image: url('/assets/images/02-atrium.jpg');
}
.brief-hero .hero-overlay {
  /* Slightly stronger overlay than the main-site hero — the brief
     hero images are busier and the navy gradient needs to do more
     work to keep the headline legible. */
  background: linear-gradient(
    180deg,
    rgba(20, 58, 94, 0.25) 0%,
    rgba(20, 58, 94, 0.55) 50%,
    rgba(14, 41, 64, 0.92) 100%
  );
}

/* ---------- Use cases grid (3 cells, not 6) ---------- */
.use-cases-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .use-cases-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- What changes — outcome metrics on the tower section ---------- */
.brief-outcomes .lead { max-width: 760px; }

.outcomes-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 600px) {
  .outcomes-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (min-width: 900px) {
  .outcomes-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.outcome {
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(248, 245, 240, 0.04);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.outcome-figure {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--coral);
}
.outcome-label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.outcomes-note {
  margin-top: 56px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  max-width: 820px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 28px;
}

/* ---------- How it fits / How it works — reuse cap-block shell ---------- */
/* No new structure needed; .cap-block + .cap-title + .cap-body do the
   work. The .fits-blocks and .arch-blocks classes exist for future
   per-section overrides if the patterns diverge later. */

/* ---------- Pilot timeline ---------- */
.pilot-timeline {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pilot-phase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 32px 0;
  border-top: 1px solid var(--stone);
}
.pilot-phase:first-child { border-top: none; padding-top: 16px; }

@media (min-width: 700px) {
  .pilot-phase {
    grid-template-columns: 160px 1fr;
    gap: 40px;
    padding: 40px 0;
    align-items: start;
  }
}
@media (min-width: 1100px) {
  .pilot-phase { grid-template-columns: 200px 1fr; gap: 56px; }
}

.pilot-phase-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pilot-phase-weeks {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--coral);
  line-height: 1.1;
}
.pilot-phase-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--slate);
}

.pilot-phase-body { max-width: 680px; }
.pilot-phase-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.pilot-phase-body p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--charcoal);
}

/* ---------- Pilot prerequisites block ---------- */
.pilot-prereqs {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--stone);
  max-width: 820px;
}
.pilot-prereqs-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.pilot-prereqs .square-list { max-width: 720px; }

/* ---------- Mobile trims ---------- */
@media (max-width: 599px) {
  .outcome { padding: 24px 20px; }
  .pilot-phase { padding: 28px 0; }
}

/* ============================================================
   AFFECTLI BRIEF — operator-brief specific styling
   Re-skin of the affectli.pages.dev Astro source into the
   Mayfair21 design system. Original Tailwind classes mapped to
   plain CSS using Mayfair21 tokens — cyan accent in the source
   becomes coral; navy/bone/charcoal/slate align directly.
   Pages live under /briefs/affectli/ as direct mirrors of the
   Astro routes (/, /capabilities, /cases/[slug]).
   ============================================================ */

body.brief-affectli {
  background: var(--navy);
  color: var(--white);
}

/* Common section shell on the dark Affectli pages */
.affectli-section {
  padding: 96px 0;
}
@media (min-width: 900px) {
  .affectli-section { padding: 120px 0; }
}
.affectli-section-tinted {
  background: rgba(14, 41, 64, 0.45);
}
.affectli-section-bone {
  background: var(--bone);
  color: var(--charcoal);
}

/* Hero on the main /briefs/affectli/ landing page */
.affectli-hero {
  padding: 220px 0 140px;
}
@media (min-width: 900px) {
  .affectli-hero { padding: 240px 0 180px; }
}
.affectli-hero-page {
  /* Hero on the secondary /capabilities page — shorter than the main hero */
  padding: 200px 0 96px;
}

/* Hero on case study pages */
.affectli-case-hero {
  padding: 180px 0 96px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 900px) {
  .affectli-case-hero { padding: 220px 0 128px; }
}

/* Headlines */
.affectli-h1 {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--white);
  font-size: clamp(56px, 9vw, 128px);
  max-width: 14ch;
}
.affectli-h1-cap {
  /* Capabilities page lead — lighter weight for variation */
  font-weight: 200;
  font-size: clamp(40px, 7vw, 96px);
  margin-top: 32px;
}
.affectli-h2 {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--white);
  margin-top: 16px;
}
.affectli-h2-bone {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--charcoal);
  margin-top: 16px;
}

/* Lead paragraphs */
.affectli-lead {
  margin-top: 40px;
  max-width: 36rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* End-of-section "Next: X →" links */
.affectli-next {
  margin-top: 64px;
  display: flex;
  justify-content: flex-end;
}
.affectli-next-link {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--coral);
  transition: color 160ms ease;
}
.affectli-next-link:hover {
  color: var(--white);
}
.affectli-section-bone .affectli-next-link:hover {
  color: var(--navy);
}
.affectli-about-link {
  display: inline-block;
  margin-top: 40px;
}

/* Thin gradient bar punctuating section breaks on the main landing page */
.affectli-divider {
  height: 2px;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(233, 75, 75, 0.3) 0%,
    rgba(233, 75, 75, 0.15) 100%
  );
}

/* 3-column layout helper — eyebrow/title in 1/3, body in 2/3 */
.affectli-3col {
  display: grid;
  gap: 48px;
}
@media (min-width: 900px) {
  .affectli-3col {
    grid-template-columns: 1fr 2fr;
    gap: 80px;
  }
}
.affectli-3col-body { min-width: 0; }

/* Prose blocks on the landing page */
.affectli-prose {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}
.affectli-section-bone .affectli-prose,
.affectli-cap-closing .affectli-prose {
  color: var(--charcoal);
}
.affectli-prose-block {
  margin-top: 40px;
  max-width: 48rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 900px) {
  .affectli-prose-block { font-size: 18px; }
}
.affectli-prose-block strong {
  color: var(--white);
  font-weight: 600;
}

/* Case-study grid on the landing page Proof section */
.affectli-cases-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .affectli-cases-grid { grid-template-columns: 1fr 1fr; }
}
.affectli-case-card {
  display: block;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(14, 41, 64, 0.6);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.affectli-case-card:hover {
  border-color: var(--coral);
  background: rgba(14, 41, 64, 0.85);
}
.affectli-case-sector {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--coral);
}
.affectli-case-title {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  color: var(--white);
}
.affectli-case-geo {
  margin-top: 8px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.affectli-case-stat {
  margin-top: 40px;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--white);
}
.affectli-case-stat-label {
  margin-top: 12px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.affectli-case-summary {
  margin-top: 32px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}
.affectli-case-read {
  margin-top: 32px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  transition: color 160ms ease;
}
.affectli-case-card:hover .affectli-case-read {
  color: var(--coral);
}

/* ---------- /capabilities page ---------- */
.affectli-cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 56px;
}
@media (min-width: 900px) {
  .affectli-cap-grid { grid-template-columns: 1fr 1fr; }
}
.affectli-cap-group {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 32px;
}
.affectli-cap-group-title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.015em;
  color: var(--white);
}
.affectli-cap-group-blurb {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}
.affectli-cap-items {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.affectli-cap-items li {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.affectli-cap-bullet {
  color: var(--coral);
}

/* ---------- Case study pages ---------- */
.affectli-case-h1 {
  margin-top: 32px;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(40px, 6vw, 88px);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--white);
}
.affectli-case-meta {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 40px;
}
@media (min-width: 700px) {
  .affectli-case-meta { grid-template-columns: repeat(3, 1fr); }
}
.affectli-case-meta-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.affectli-case-meta-value {
  margin-top: 4px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.affectli-case-herostat {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 900px) {
  .affectli-case-herostat { margin-top: 96px; padding-top: 56px; }
}
.affectli-case-herostat-value {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(48px, 10vw, 128px);
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--white);
}
.affectli-case-herostat-label {
  margin-top: 16px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--coral);
  max-width: 36rem;
}
.affectli-case-summary-text {
  margin-top: 56px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
  max-width: 48rem;
}

/* Challenge */
.affectli-challenge-list {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .affectli-challenge-list { grid-template-columns: 1fr 1fr; }
}
.affectli-challenge-list li {
  border-left: 2px solid rgba(233, 75, 75, 0.65);
  padding-left: 20px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 900px) {
  .affectli-challenge-list li { font-size: 18px; }
}

/* Results */
.eyebrow-coral-on-bone {
  color: var(--navy);
}
.affectli-results-period {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--slate);
  max-width: 48rem;
}
.affectli-results-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 40px;
}
@media (min-width: 700px) {
  .affectli-results-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .affectli-results-grid { grid-template-columns: repeat(3, 1fr); }
}
.affectli-result {
  border-top: 1px solid rgba(20, 58, 94, 0.15);
  padding-top: 24px;
}
.affectli-result-value {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--navy);
}
.affectli-result-label {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
}

/* Prior programme outcomes (Vantage) */
.affectli-caveat {
  margin-top: 16px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  max-width: 48rem;
}
.affectli-prior-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 40px;
}
@media (min-width: 700px) {
  .affectli-prior-grid { grid-template-columns: 1fr 1fr; }
}
.affectli-prior-item {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 24px;
}
.affectli-prior-value {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--white);
}
.affectli-prior-label {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* Capability pills */
.affectli-capability-pills {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.affectli-pill {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(14, 41, 64, 0.45);
  padding: 8px 16px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.affectli-pill-coral {
  border-color: rgba(233, 75, 75, 0.45);
  color: var(--coral);
}

/* Narrative (markdown-style body copy) */
.affectli-narrative {
  max-width: 48rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
}
.affectli-narrative p + p { margin-top: 1.4em; }

/* Timeline (Vantage) */
.affectli-timeline-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 40px;
  list-style: none;
}
@media (min-width: 900px) {
  .affectli-timeline-grid { grid-template-columns: repeat(3, 1fr); }
}
.affectli-timeline-item {
  border-left: 2px solid rgba(233, 75, 75, 0.6);
  padding-left: 20px;
}
.affectli-timeline-date {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
}
.affectli-timeline-event {
  margin-top: 8px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}

/* Data integration block (Vantage) */
.affectli-data-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 900px) {
  .affectli-data-grid { grid-template-columns: 1fr 1fr; }
}
.affectli-data-item {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 24px;
}
.affectli-data-period {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
}
.affectli-data-total {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--white);
}
.affectli-data-breakdown {
  margin-top: 12px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* Scale (Pan-African) */
.affectli-scale-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 40px;
}
@media (min-width: 900px) {
  .affectli-scale-grid { grid-template-columns: 1fr 1fr; }
}
.affectli-scale-item {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 16px;
}
.affectli-scale-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.affectli-scale-value {
  margin-top: 8px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.01em;
  color: var(--white);
}

/* Impact (Vantage) */
.affectli-impact-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .affectli-impact-grid { grid-template-columns: repeat(3, 1fr); }
}
.affectli-impact-item {
  border-left: 2px solid rgba(233, 75, 75, 0.6);
  padding-left: 20px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}

/* Testimonial (used on Pan-African and Vantage, on bone bg) */
.affectli-testimonial {
  margin: 0;
  margin-top: 48px;
  max-width: 56rem;
}
.affectli-testimonial-quote {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--charcoal);
  margin: 0;
}
.affectli-testimonial-attribution {
  margin-top: 32px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Video block (Vantage) */
.affectli-video-framing {
  margin-top: 16px;
  max-width: 48rem;
}
.affectli-video-wrap {
  margin-top: 48px;
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
}
.affectli-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.affectli-pullquotes-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .affectli-pullquotes-grid { grid-template-columns: 1fr 1fr; }
}
.affectli-pullquote {
  border-left: 2px solid rgba(233, 75, 75, 0.6);
  padding-left: 20px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--white);
}

/* Back-to-cases link at bottom of each case study */
.affectli-back-link {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color 160ms ease;
}
.affectli-back-link:hover { color: var(--coral); }

/* Contact (final section on the landing page) */
.affectli-contact-h2 {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--white);
}
.affectli-contact-lead {
  margin-top: 24px;
  max-width: 36rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}
.affectli-contact-cta {
  display: inline-block;
  margin-top: 40px;
  padding: 12px 24px;
  border: 1px solid var(--coral);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--coral);
  transition: background-color 200ms ease, color 200ms ease;
}
.affectli-contact-cta:hover {
  background: var(--coral);
  color: var(--white);
}

/* The Affectli pages have their own dark theme — the global .site-footer
   below uses navy already, which is the same colour as the page body, so
   add a top border so the footer reads as a distinct surface rather than
   bleeding into the contact section above it. */
body.brief-affectli .site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   PRINT STYLESHEET — operator briefs
   Senior readers will save these as PDF or print them on paper.
   The on-screen dark theme is unusable in print (heavy ink, poor
   contrast on B/W printers). This block recasts every brief to
   white background with black text, hides navigation chrome,
   reveals link URLs inline, and avoids page breaks mid-section.
   ============================================================ */

@media print {
  @page {
    margin: 18mm;
  }

  /* Reset everything to print-safe colours */
  html, body, body.brief-affectli, body.brief {
    background: var(--white) !important;
    color: var(--charcoal) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide site chrome — nothing to navigate to on paper */
  .site-header,
  .site-footer,
  .nav-toggle,
  .header-nav,
  .affectli-divider,
  .affectli-next,
  .affectli-next-link,
  .affectli-about-link,
  .affectli-back-link,
  .affectli-contact-cta,
  .hero-ctas,
  .contact-email-line,
  .commitment-band,
  .step-cell-commitment,
  .affectli-pullquotes-grid,
  .affectli-video-wrap {
    display: none !important;
  }

  /* Replace the YouTube embed with a printable line */
  .affectli-video-framing::after {
    content: " Video on the live brief: https://www.youtube.com/watch?v=UAdIIqkAgPo";
    display: block;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--slate);
  }

  /* Force readable section backgrounds */
  .section-bone,
  .section-navy,
  .section-tower,
  .section-contact,
  .affectli-section,
  .affectli-section-tinted,
  .affectli-section-bone,
  .affectli-hero,
  .affectli-hero-page,
  .affectli-case-hero {
    background: var(--white) !important;
    color: var(--charcoal) !important;
    padding: 16px 0 !important;
  }

  /* Background images don't print — drop them */
  .hero,
  .brief-hero,
  .brief-hero-aimdm,
  .section-tower,
  .contact-bg,
  .hero-overlay,
  .contact-overlay,
  .tower-overlay {
    background-image: none !important;
  }
  .hero-overlay,
  .contact-overlay,
  .tower-overlay,
  .section-tower::after {
    display: none !important;
  }

  /* Headings stay dark and crisp */
  h1, h2, h3, h4, h5, h6,
  .hero-headline,
  .display-md,
  .display-sm,
  .affectli-h1,
  .affectli-h1-cap,
  .affectli-h2,
  .affectli-h2-bone,
  .affectli-case-h1,
  .step-title,
  .cap-title,
  .pilot-phase-title,
  .affectli-cap-group-title,
  .affectli-case-title,
  .affectli-case-meta-value,
  .affectli-case-herostat-value,
  .affectli-case-summary-text,
  .affectli-results-period,
  .affectli-h2,
  .affectli-pillar,
  .affectli-narrative,
  .affectli-narrative p,
  .affectli-prose,
  .affectli-prose-block,
  .affectli-prose-block p,
  .affectli-prose-block strong,
  .affectli-challenge-list li,
  .affectli-result-value,
  .affectli-result-label,
  .affectli-prior-value,
  .affectli-prior-label,
  .affectli-data-period,
  .affectli-data-total,
  .affectli-data-breakdown,
  .affectli-scale-value,
  .affectli-scale-label,
  .affectli-timeline-event,
  .affectli-impact-item,
  .affectli-testimonial-quote,
  .affectli-testimonial-attribution,
  .affectli-lead,
  .step-body,
  .step-number,
  .cap-body,
  .cap-platform,
  .cap-platform-name,
  .cap-close,
  .pilot-phase-body p,
  .outcome-figure,
  .outcome-label,
  .outcomes-note,
  .square-list li,
  .lead,
  .prose,
  .prose p {
    color: var(--charcoal) !important;
    background: transparent !important;
  }

  /* Keep coral as the accent in print — it's identifiable and the
     value-add of the brand inflection survives on a colour printer.
     Falls back to bold black on B/W printers via the browser's
     print-greyscale handling. */
  .accent,
  .eyebrow-coral,
  .eyebrow-coral-on-bone,
  .affectli-case-sector,
  .affectli-case-stat-label,
  .affectli-case-herostat-label,
  .affectli-cap-bullet,
  .affectli-pill-coral,
  .step-number,
  .situation-number,
  .card-number,
  .cap-platform-name,
  .pilot-phase-weeks,
  .affectli-data-period,
  .affectli-timeline-date {
    color: var(--coral) !important;
  }

  /* Reveal link URLs after the link text — useful for printed pages
     since people will want to type them in. Skips internal anchors,
     mailto:, and tel: links to avoid clutter. */
  a[href^="http"]:not(.cap-brief-link):not(.affectli-case-card)::after {
    content: " (" attr(href) ")";
    font-family: var(--mono);
    font-size: 9pt;
    color: var(--slate);
    word-wrap: break-word;
  }
  a[href^="mailto:"]::after {
    content: "";
  }

  /* Avoid page breaks inside meaningful units */
  h1, h2, h3 { page-break-after: avoid; }
  .step-cell,
  .cap-block,
  .sector-card,
  .situation,
  .outcome,
  .pilot-phase,
  .affectli-case-card,
  .affectli-cap-group,
  .affectli-result,
  .affectli-prior-item,
  .affectli-scale-item,
  .affectli-data-item,
  .affectli-timeline-item,
  .affectli-impact-item,
  .affectli-testimonial,
  blockquote,
  figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Borders go from light-on-dark to dark-on-light */
  .step-cell,
  .sector-card,
  .affectli-pill,
  .affectli-case-card,
  .affectli-result,
  .affectli-prior-item,
  .affectli-scale-item,
  .affectli-data-item,
  .affectli-cap-group {
    border-color: var(--stone) !important;
    background: transparent !important;
  }
  .affectli-challenge-list li,
  .affectli-timeline-item,
  .affectli-impact-item,
  .affectli-pullquote {
    border-left-color: var(--coral) !important;
  }

  /* Tidy spacing for paper */
  .affectli-narrative {
    max-width: 100% !important;
    font-size: 11pt !important;
    line-height: 1.55 !important;
  }
  .prose,
  .affectli-prose,
  .affectli-prose-block {
    max-width: 100% !important;
    font-size: 11pt !important;
  }
}