/* ─── Tokens ─────────────────────────────────────────────────── */
    :root {
      --primary:   #0a3d62;
      --secondary: #1e90ff;
      --bg:        #f4f7fb;
      --text:      #2f3640;

      --accent-gold:  #e8b84b;
      --accent-teal:  #00c9a7;
      --accent-green: #27ae60;
      --accent-amber: #f39c12;
      --surface:      #ffffff;
      --muted:        #6b7a8d;
      --border:       #d4dde8;

      /* per-pillar theme colors (overridden inline) */
      --pillar-color: var(--secondary);
      --pillar-bg:    #e8f4ff;

      --font-display: 'Playfair Display', Georgia, serif;
      --font-body:    'DM Sans', sans-serif;

      --radius-sm: 6px;
      --radius-md: 14px;
      --radius-lg: 24px;
      --shadow-card: 0 4px 24px rgba(10,61,98,.09);
      --shadow-hover: 0 12px 40px rgba(10,61,98,.18);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }

    /* ─── Hero ───────────────────────────────────────────────────── */
    .hero {
      position: relative;
      background: var(--primary);
      overflow: hidden;
      padding: 100px 0 80px;
    }
    /* geometric accent shapes */
    .hero::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 420px; height: 420px;
      border-radius: 50%;
      background: rgba(30,144,255,.12);
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: -120px; left: 10%;
      width: 340px; height: 340px;
      border-radius: 50%;
      background: rgba(232,184,75,.08);
    }
    .hero__inner {
      position: relative;
      z-index: 2;
      max-width: 860px;
      margin: 0 auto;
      padding: 0 40px;
      text-align: center;
    }
    .hero__eyebrow {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--accent-gold);
      margin-bottom: 18px;
      opacity: 0;
      animation: fadeUp .6s .1s forwards;
    }
    .hero__title {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 5.5vw, 4.2rem);
      font-weight: 900;
      color: #fff;
      line-height: 1.08;
      margin-bottom: 24px;
      opacity: 0;
      animation: fadeUp .7s .3s forwards;
    }
    .hero__title em {
      color: var(--secondary);
      font-style: normal;
    }
    .hero__lead {
      font-size: clamp(.95rem, 1.8vw, 1.15rem);
      color: rgba(255,255,255,.72);
      max-width: 640px;
      margin: 0 auto 40px;
      opacity: 0;
      animation: fadeUp .7s .5s forwards;
    }

    /* Grand total pill */
    .hero__total {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 60px;
      padding: 14px 28px;
      opacity: 0;
      animation: fadeUp .6s .7s forwards;
    }
    .hero__total-number {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 900;
      color: var(--accent-gold);
      line-height: 1;
    }
    .hero__total-label {
      text-align: left;
      font-size: .82rem;
      color: rgba(255,255,255,.7);
      line-height: 1.35;
    }
    .hero__total-label strong {
      display: block;
      font-size: .95rem;
      color: #fff;
    }

    /* ─── Global layout ──────────────────────────────────────────── */
    .container {
      max-width: 1060px;
      margin: 0 auto;
      padding: 0 48px;
      position:relative;
    }
    .section { padding: 80px 0; }

    /* ─── Summary Stats Strip ────────────────────────────────────── */
    .stats-strip {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      background: var(--primary);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin: 0 0 72px;
    }
    .ss-item {
      text-align: center;
      padding: 32px 20px;
      border-right: 1px solid rgba(255,255,255,.1);
      position: relative;
    }
    .ss-item:last-child { border-right: none; }
    .ss-item__number {
      font-family: var(--font-display);
      font-size: 2.6rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
    }
    .ss-item__number.gold { color: var(--accent-gold); }
    .ss-item__number.teal { color: var(--accent-teal); }
    .ss-item__label {
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.55);
      margin-top: 8px;
    }

    /* ─── Pillar Cards ───────────────────────────────────────────── */
    .pillar {
      margin-bottom: 72px;
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: var(--shadow-card);
      overflow: hidden;
    }

    /* Top accent bar */
    .pillar__bar {
      height: 6px;
      background: var(--pillar-color);
    }

    .pillar__inner {
      padding: 44px 48px 48px;
    }

    /* Header row: icon + title + video */
    .pillar__header {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      margin-bottom: 32px;
    }
    .pillar__icon-wrap {
      flex-shrink: 0;
      width: 64px; height: 64px;
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.8rem;
      background: var(--pillar-bg);
    }
    .pillar__heading-group { flex: 1; }
    .pillar__tag {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--pillar-color);
      margin-bottom: 6px;
    }
    .pillar__title {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.5vw, 1.75rem);
      font-weight: 700;
      color: var(--primary);
      line-height: 1.2;
    }

    /* Reach summary row */
    .pillar__reach {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: 32px;
      padding: 18px 24px;
      background: var(--pillar-bg);
      border-radius: var(--radius-md);
    }
    .reach-item { display: flex; align-items: center; gap: 10px; }
    .reach-item__icon { font-size: 1.3rem; }
    .reach-item__text { font-size: .85rem; line-height: 1.35; }
    .reach-item__text strong { display: block; font-size: 1rem; color: var(--primary); }
    .reach-item__text span { color: var(--muted); }

    /* Body grid: metrics + changes + video */
    .pillar__body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    .pillar__metrics h4,
    .pillar__changes h4 {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 16px;
    }

    /* Metric list */
    .metric-list { list-style: none; }
    .metric-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: .9rem;
    }
    .metric-list li:last-child { border-bottom: none; }
    .metric-num {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--pillar-color);
      min-width: 52px;
      text-align: right;
    }
    .metric-desc { color: var(--text); line-height: 1.35; }

    /* Change list */
    .change-list { list-style: none; }
    .change-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 9px 0;
      font-size: .88rem;
      color: var(--text);
      border-bottom: 1px solid var(--border);
    }
    .change-list li:last-child { border-bottom: none; }
    .change-check {
      flex-shrink: 0;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: var(--pillar-color);
      display: flex; align-items: center; justify-content: center;
      font-size: .65rem;
      color: #fff;
      margin-top: 2px;
    }

    /* Video embed */
    .pillar__video {
      grid-column: 1 / -1;
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 16 / 7;
      background: #000;
      margin-top: 8px;
    }
    .pillar__video iframe {
      width: 100%; height: 100%;
      border: none;
    }

    /* ─── Closing Impact Block ───────────────────────────────────── */
    .impact-summary {
      background: linear-gradient(135deg, var(--primary) 0%, #0c4a76 100%);
      border-radius: var(--radius-lg);
      padding: 64px 56px;
      color: #fff;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .impact-summary::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 320px; height: 320px;
      border-radius: 50%;
      background: rgba(30,144,255,.1);
    }

    .impact-summary__left { position: relative; z-index: 1; }
    .impact-summary__label {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent-gold);
      margin-bottom: 12px;
    }
    .impact-summary__heading {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 900;
      line-height: 1.15;
      margin-bottom: 16px;
    }
    .impact-summary__desc {
      font-size: .95rem;
      opacity: .78;
      line-height: 1.7;
    }

    .impact-summary__right { position: relative; z-index: 1; }
    .impact-qual-list { list-style: none; }
    .impact-qual-list li {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,.12);
      font-size: .92rem;
    }
    .impact-qual-list li:last-child { border-bottom: none; }
    .qual-dot {
      flex-shrink: 0;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--accent-teal);
    }

    /* ─── Animations & Reveal ────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .55s ease, transform .55s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ─── Responsive ─────────────────────────────────────────────── */
    @media (max-width: 800px) {
      .hero__inner { padding: 0 20px; }
      /* .stats-strip { grid-template-columns: 1fr 1fr; }
      .stats-strip .ss-item:nth-child(2) { border-right: none; }
      .stats-strip .ss-item:nth-child(3) { grid-column: 1/-1; border-top: 1px solid rgba(255,255,255,.1); border-right: none; } */
      .pillar__inner { padding: 28px 20px 32px; }
      .pillar__header { flex-direction: column; gap: 14px; }
      .pillar__body { grid-template-columns: 1fr; }
      .pillar__video { aspect-ratio: 16/9; }
      .impact-summary { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; }
    }