/* ════════════════════════════════════════════════
       FUTURE CTA SECTION - scoped styles
       Structure: .future-section → .future-container → content
       Uses JAB Innovations design system tokens with green
       background variant (#5DBA63 instead of #EDE7D3).
       ════════════════════════════════════════════════ */


    /* ── SECTION (full-width) ── */
    .future-section {
      width: 100%;
      background: #5DBA63;
      border-top: 1px solid rgba(26,27,21,0.12);
      border-bottom: 1px solid rgba(26,27,21,0.12);
      position: relative;
      overflow: hidden;
      font-family: "Bitter", Georgia, serif;
      box-sizing: border-box;
    }

    /* scoped reset - only inside the section */
    .future-section *,
    .future-section *::before,
    .future-section *::after {
      box-sizing: border-box;
    }

    /* ── CONTAINER ── */
    .future-container {
      width: 100%;
      max-width: 1216px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 1;
    }

    /* ── INNER CONTENT - centered single column ── */
    .future-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 88px 0 80px;
      max-width: 880px;
      margin: 0 auto;
    }

    /* ── Quote body ──
       Serif display weight matching the JAB Founder Quote treatment.
       Bitter at 600 / 26px / line-height 1.4 / dark text. */
    .future-quote {
      font-family: "Bitter", serif;
      font-weight: 600;
      font-size: 38px;
      line-height: 1.25;
      letter-spacing: -0.4px;
      color: #1A1B15;
      margin: 0 0 24px;
      max-width: 760px;
    }

    /* ── Attribution ──
       JAB system eyebrow style, but darkened against the green
       so contrast meets WCAG. JetBrains Mono 11px / letter-spacing 3px. */
    .future-attribution {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: 3px;
      color: #1A1B15;
      text-transform: uppercase;
      margin: 0 0 56px;
    }

    /* ── Button row ── */
    .future-button-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    /* ── Outline buttons ──
       Same JAB CTA proportions: JetBrains Mono 700 / 12.5px /
       letter-spacing 1.5px / padding 16px 24px / dark border + dark text */
    .future-btn {
      font-family: "JetBrains Mono", monospace;
      font-weight: 700;
      font-size: 12.5px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 16px 32px;
      background: transparent;
      color: #1A1B15;
      border: 1.5px solid #1A1B15;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      text-decoration: none;
      min-width: 140px;
    }
    .future-btn:hover {
      background: #1A1B15;
      color: #5DBA63;
    }

    /* responsive images */
    .future-section img { max-width: 100%; height: auto; display: block; }

    /* ════════════════════════════════════════════════
       RESPONSIVE BREAKPOINTS
       (matches JAB Innovations: 992px, 640px, 380px)
       ════════════════════════════════════════════════ */

    /* Tablet - JAB system: padding 72px 0 64px */
    @media (max-width: 992px) {
      .future-container {
        padding: 0 24px;
      }
      .future-content {
        padding: 72px 0 64px;
      }
      .future-quote {
        font-size: 32px;
        line-height: 1.3;
        letter-spacing: -0.3px;
      }
      .future-attribution {
        margin-bottom: 48px;
      }
    }

    /* Mobile - JAB system: padding 56px 0 48px, stacked buttons */
    @media (max-width: 640px) {
      .future-container {
        padding: 0 20px;
      }
      .future-content {
        padding: 56px 0 48px;
      }
      .future-quote {
        font-size: 26px;
        line-height: 1.35;
        letter-spacing: -0.2px;
        margin-bottom: 20px;
      }
      .future-attribution {
        font-size: 10px;
        letter-spacing: 2.5px;
        margin-bottom: 36px;
      }
      .future-button-row {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 280px;
      }
      .future-btn {
        width: 100%;
        padding: 16px 24px;
      }
    }

    /* Small mobile */
    @media (max-width: 380px) {
      .future-quote {
        font-size: 22px;
      }
    }