/* ── SOLIDARITY MESSAGES PAGE ──────────────────────────────
       Design system: navy #0C0A3E · lime #CCFF33 · purple #A89CED
                      cream #EEEBD3 · DM Sans 800/700/400
    ─────────────────────────────────────────────────────────── */

    /* ── HERO ──────────────────────────────────────────────── */
    .sl-hero {
      background: #0C0A3E;
      padding: 72px 24px 80px;
      position: relative;
      overflow: hidden;
      min-height: 520px;
      display: flex;
      align-items: flex-end;
    }

    /* Subtle texture: offset grid of faint lime dots */
    .sl-hero-texture {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(204,255,51,0.12) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
    }

    .sl-hero-inner {
      position: relative;
      z-index: 1;
      max-width: 900px;
      margin: 0 auto;
      width: 100%;
    }

    .sl-back {
      display: inline-block;
      font: 600 12px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(168,156,237,0.8);
      text-decoration: none;
      margin-bottom: 40px;
      transition: color 0.15s;
    }
    .sl-back:hover { color: #A89CED; }

    .sl-label {
      font: 600 11px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #A89CED;
      display: block;
      margin-bottom: 20px;
    }
    .sl-label--dark  { color: #A89CED; }
    .sl-label--muted { color: rgba(238,235,211,0.4); }

    .sl-title {
      font: 800 clamp(52px,11vw,100px)/0.85 'DM Sans', sans-serif !important;
      color: #CCFF33 !important;
      letter-spacing: -0.045em !important;
      margin: 0 0 32px !important;
    }

    .sl-tagline {
      font: 400 19px/1.5 'DM Sans', sans-serif !important;
      color: rgba(238,235,211,0.65) !important;
      max-width: 540px;
      margin: 0 0 48px !important;
    }

    .sl-hero-count {
      display: inline-flex;
      align-items: baseline;
      gap: 14px;
      background: rgba(204,255,51,0.08);
      border: 1px solid rgba(204,255,51,0.25);
      padding: 20px 32px;
    }
    .sl-count-num {
      font: 800 48px/1 'DM Sans', sans-serif;
      color: #CCFF33 !important;
      letter-spacing: -0.04em;
    }
    .sl-count-label {
      font: 600 13px/1.2 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(238,235,211,0.55);
      max-width: 120px;
    }

    /* ── STATS STRIP ────────────────────────────────────────── */
    .sl-strip {
      background: #CCFF33;
      overflow-x: auto;
    }
    .sl-strip-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      align-items: stretch;
      min-height: 96px;
    }
    .sl-strip-stat {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 28px 16px;
      text-align: center;
      min-width: 160px;
    }
    .sl-strip-num {
      font: 800 36px/1 'DM Sans', sans-serif;
      color: #0C0A3E;
      letter-spacing: -0.04em;
      display: block;
    }
    .sl-strip-label {
      font: 500 11px/1.3 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(12,10,62,0.55);
      margin-top: 6px;
      display: block;
    }
    .sl-strip-divider {
      width: 1px;
      background: rgba(12,10,62,0.12);
      align-self: stretch;
      flex-shrink: 0;
    }

    /* ── SHARED SECTION / CONTENT ───────────────────────────── */
    .sl-section { padding: 80px 24px; }
    .sl-section--cream  { background: #EEEBD3; }
    .sl-section--white  { background: #ffffff; }
    .sl-section--navy   { background: #0C0A3E; }

    .sl-content {
      max-width: 900px;
      margin: 0 auto;
    }

    .sl-content h2 {
      font: 800 clamp(32px,5vw,48px)/0.9 'DM Sans', sans-serif !important;
      color: #0C0A3E !important;
      letter-spacing: -0.04em !important;
      margin: 8px 0 24px !important;
    }
    .sl-h2--light {
      color: #CCFF33 !important;
    }

    .sl-content p {
      font: 400 18px/1.6 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.75) !important;
      margin: 0 0 16px !important;
    }
    .sl-p--light {
      color: rgba(238,235,211,0.65) !important;
    }

    /* ── ACTIONS GALLERY ────────────────────────────────────── */
    .sl-actions-gallery {
      max-width: 1100px;
      margin: 56px auto 0;
      padding: 0 24px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .sl-action {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 0;
      background: #EEEBD3;
      transition: transform 0.2s cubic-bezier(0.16,1,0.3,1),
                  box-shadow 0.2s cubic-bezier(0.16,1,0.3,1);
    }
    .sl-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(12,10,62,0.10);
    }

    /* Alternate: right-aligned count */
    .sl-action--right {
      grid-template-columns: 1fr 180px;
      background: #fff;
    }
    .sl-action--right .sl-action-count {
      order: 2;
      border-left: 3px solid #0C0A3E;
      border-right: none;
      background: #0C0A3E;
    }
    .sl-action--right .sl-action-body {
      order: 1;
    }

    /* Featured: lime accent */
    .sl-action--featured {
      background: #0C0A3E;
    }
    .sl-action--featured .sl-action-count {
      background: #CCFF33;
      border-color: #CCFF33 !important;
    }
    .sl-action--featured .sl-action-count .sl-action-num {
      color: #0C0A3E;
    }
    .sl-action--featured .sl-action-count .sl-action-unit {
      color: rgba(12,10,62,0.55);
    }
    .sl-action--featured .sl-action-body {
      background: #0C0A3E;
    }
    .sl-action--featured .sl-action-body h3 {
      color: #CCFF33 !important;
    }
    .sl-action--featured .sl-action-body p {
      color: rgba(238,235,211,0.7) !important;
    }
    .sl-action--featured .sl-action-meta .sl-action-tag {
      color: #A89CED;
    }
    .sl-action--featured .sl-action-meta .sl-action-year {
      color: rgba(238,235,211,0.4);
    }
    .sl-action--featured .sl-action-fill {
      background: #CCFF33 !important;
    }

    .sl-action-count {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
      background: #0C0A3E;
      border-right: 3px solid #CCFF33;
      text-align: center;
    }
    .sl-action-num {
      font: 800 clamp(40px,6vw,64px)/1 'DM Sans', sans-serif;
      color: #CCFF33 !important;
      letter-spacing: -0.045em;
      display: block;
    }
    .sl-action-unit {
      font: 600 10px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(238,235,211,0.4);
      margin-top: 8px;
      display: block;
    }

    .sl-action-body {
      padding: 36px 40px;
    }
    .sl-action-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .sl-action-tag {
      font: 600 10px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #A89CED;
    }
    .sl-action-year {
      font: 500 10px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(12,10,62,0.35);
    }
    .sl-action-body h3 {
      font: 800 clamp(22px,3vw,30px)/1 'DM Sans', sans-serif !important;
      color: #0C0A3E !important;
      letter-spacing: -0.03em !important;
      margin: 0 0 14px !important;
    }
    .sl-action-body p {
      font: 400 16px/1.6 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.7) !important;
      margin: 0 0 12px !important;
    }

    /* Progress bar */
    .sl-action-bar {
      height: 3px;
      background: rgba(12,10,62,0.08);
      margin-top: 24px;
      overflow: hidden;
    }
    .sl-action-fill {
      height: 100%;
      background: #A89CED;
      transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
    }

    /* ── MESSAGE CARDS ──────────────────────────────────────── */
    .sl-messages-grid {
      max-width: 1100px;
      margin: 56px auto 0;
      padding: 0 24px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }

    .sl-msg {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(238,235,211,0.08);
      border-left: 3px solid #A89CED;
      padding: 32px 28px;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
      transition: border-left-color 0.2s, background 0.2s;
    }
    .sl-msg:hover {
      background: rgba(255,255,255,0.07);
      border-left-color: #CCFF33 !important;
    }

    /* Rotate accent colours */
    .sl-msg--2 { border-left-color: #CCFF33 !important; }
    .sl-msg--3 { border-left-color: rgba(238,235,211,0.3); }
    .sl-msg--4 { border-left-color: #A89CED; }
    .sl-msg--5 { border-left-color: #CCFF33 !important; }
    .sl-msg--6 { border-left-color: rgba(238,235,211,0.3); }

    .sl-msg p {
      font: 400 16px/1.65 'DM Sans', sans-serif !important;
      color: rgba(238,235,211,0.8) !important;
      margin: 0 !important;
      font-style: italic;
    }
    .sl-msg footer {
      margin-top: auto;
    }
    .sl-msg cite {
      font: 600 11px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(238,235,211,0.3);
      font-style: normal;
    }

    /* ── WHY IT WORKS ───────────────────────────────────────── */
    .sl-why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-top: 48px;
    }
    .sl-why-item {
      border-top: 2px solid #A89CED;
      padding-top: 24px;
    }
    .sl-why-num {
      font: 800 32px/1 'DM Sans', sans-serif;
      color: #A89CED;
      letter-spacing: -0.04em;
      display: block;
      margin-bottom: 16px;
    }
    .sl-why-item h3 {
      font: 700 20px/1.1 'DM Sans', sans-serif !important;
      color: #0C0A3E !important;
      letter-spacing: -0.025em !important;
      margin: 0 0 12px !important;
    }
    .sl-why-item p {
      font: 400 15px/1.6 'DM Sans', sans-serif !important;
      color: rgba(12,10,62,0.65) !important;
      margin: 0 !important;
    }

    /* ── CTA ────────────────────────────────────────────────── */
    .std-cta { background: #0C0A3E; padding: 80px 24px; }
    .std-cta-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }
    .sl-cta {
      background: #0C0A3E;
      padding: 96px 24px;
      position: relative;
      overflow: hidden;
    }
    .sl-cta::before {
      content: '';
      position: absolute;
      bottom: -80px;
      right: -80px;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: rgba(204,255,51,0.06);
      pointer-events: none;
    }
    .sl-cta-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 48px;
      align-items: center;
    }
    .sl-cta-text h2 {
      color: #CCFF33 !important;
      margin-bottom: 20px !important;
    }
    .sl-cta-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
      flex-shrink: 0;
    }
    .sl-btn-primary {
      display: inline-block;
      background: #CCFF33;
      color: #0C0A3E;
      font: 700 13px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 20px 40px;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.2s;
    }
    .sl-btn-primary:hover { background: #ffffff; }
    .sl-btn-ghost {
      display: inline-block;
      color: rgba(238,235,211,0.45);
      font: 600 11px/1 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-decoration: none;
      transition: color 0.15s;
      padding: 8px 0;
    }
    .sl-btn-ghost:hover { color: #EEEBD3; }

    /* ── FOOTER OVERRIDE ────────────────────────────────────── */
    footer[data-elementor-type="footer"],
    .elementor-location-footer {
      background: #0C0A3E !important;
      color: #EEEBD3 !important;
    }
    footer[data-elementor-type="footer"] p,
    footer[data-elementor-type="footer"] a,
    footer[data-elementor-type="footer"] span,
    footer[data-elementor-type="footer"] div {
      color: rgba(238,235,211,0.7) !important;
    }
    footer[data-elementor-type="footer"] a:hover { color: #CCFF33 !important; }

    /* ── RESPONSIVE ─────────────────────────────────────────── */
    @media (max-width: 900px) {
      .sl-messages-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .sl-why-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .sl-cta-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .sl-cta-buttons {
        flex-direction: row;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 700px) {
      .sl-hero { min-height: auto; padding: 64px 20px 72px; }
      .sl-title {
        font-size: clamp(44px, 14vw, 72px) !important;
      }
      .sl-hero-count {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
      }
      .sl-strip-inner {
        flex-wrap: wrap;
      }
      .sl-strip-stat { min-width: 45%; }
      .sl-strip-divider { display: none; }

      .sl-action {
        grid-template-columns: 1fr;
      }
      .sl-action--right {
        grid-template-columns: 1fr;
      }
      .sl-action--right .sl-action-count {
        order: 1;
        border-left: none;
        border-bottom: 3px solid #CCFF33;
      }
      .sl-action--right .sl-action-body { order: 2; }
      .sl-action-count {
        padding: 28px 24px;
        border-right: none;
        border-bottom: 3px solid #CCFF33;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        align-items: baseline;
      }
      .sl-action-body { padding: 24px; }

      .sl-messages-grid {
        grid-template-columns: 1fr;
      }

      .sl-cta-buttons {
        flex-direction: column;
      }
    }