/* ─── FAQ ACCORDION ─── */
  .faq-section {
    background: var(--white);
    padding: 6rem 7vw;
  }

  .faq-header {
    max-width: 65rem;
    margin: 0 auto 3rem;
    text-align: center;
  }

  .faq-header .section-tag {
    justify-content: center;
  }

  .faq-header .section-tag::before {
    display: none;
  }

  .faq-subtitle {
    margin-top: 1.2rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(26, 51, 32, 0.6);
    font-weight: 300;
  }

  .faq-container {
    max-width: 65rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .faq-view-all-wrap {
    text-align: center;
    margin-top: 1.5rem;
  }

  .faq-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--forest);
    color: var(--cream);
    padding: 0.85rem 2rem;
    border-radius: 2px;
    font-size: 0.78rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.25s, transform 0.2s, gap 0.25s;
  }

  .faq-view-all-btn:hover {
    background: var(--moss);
    transform: translateY(-1px);
    gap: 0.9rem;
  }

  .faq-item {
    background: transparent;
    border-bottom: 1px solid rgba(26, 51, 32, 0.12);
    transition: all 0.3s ease;
  }

  .faq-item:last-child {
    border-bottom: none;
  }

  .faq-item.active {
    background: transparent;
  }

  .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--forest);
  }

  .faq-question:hover {
    background: transparent;
  }

  .faq-question span:first-child {
    flex: 1;
    letter-spacing: 0.005em;
    line-height: 1.5;
  }

  /* plus / close icon built with pseudo-elements so it can animate from + to × */
  .faq-icon {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(26, 51, 32, 0.06);
    color: var(--forest);
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform 0.45s cubic-bezier(0.2, 0.85, 0.2, 1), background 0.2s ease, color 0.2s ease;
  }

  .faq-icon::before,
  .faq-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 1.8px;
    background: currentColor;
    border-radius: 2px;
    transform-origin: center center;
    transition: background 0.2s ease, transform 0.45s cubic-bezier(0.2, 0.85, 0.2, 1);
    backface-visibility: hidden;
    will-change: transform, background;
  }

  .faq-icon::before {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .faq-item.active .faq-icon {
    color: var(--white);
    background: var(--forest);
    /* spin then end rotated 45deg (360 + 45 = 405deg) */
    transform: rotate(405deg);
  }

  @media screen and (max-width: 640px) {
    .faq-icon {
      width: 26px;
      height: 26px;
    }

    .faq-icon::before,
    .faq-icon::after {
      width: 10px;
      height: 1.7px;
    }
  }

  /* Collapse content: let Bootstrap animate the parent .collapse height
     and only animate padding on the inner answer block so visual spacing
     remains smooth and matches the existing design. */
  .faq-answer {
    padding: 0;
    transition: padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* When the collapse is shown (or our `.active` class is present),
     add the bottom padding for spacing. Bootstrap will animate height
     on the parent collapse element for a smooth open/close. */
  .faq-item.active .faq-answer,
  .faq-container .collapse.show .faq-answer {
    padding: 0 0 1.5rem 0;
  }

  /* Minimal Bootstrap-like collapse styles (keep design unchanged but enable
     the Bootstrap JS height animation). These emulate Bootstrap's collapse
     and collapsing classes so the JS can animate height smoothly without
     including the full Bootstrap stylesheet. */
  /* Scoped collapse styles — only apply inside the FAQ accordion container */
  .faqAccordion .collapse {
    display: none;
  }
  .faqAccordion .collapse.show {
    display: block;
  }
  .faqAccordion .collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
  }

  .faq-answer p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(26, 51, 32, 0.7);
    font-weight: 300;
    margin: 0;
  }

  @media screen and (max-width: 640px) {
    .faq-section {
      padding: 5rem 5vw;
    }

    .faq-container {
      max-width: 100%;
    }

    .faq-question {
      padding: 1.2rem 0;
      font-size: 0.95rem;
      gap: 1rem;
    }

    .faq-answer {
      padding: 0 !important;
    }

    .faq-item.active .faq-answer {
      padding: 0 0 1.2rem 0 !important;
    }

    .faq-icon {
      width: 22px;
      height: 22px;
    }

    .faq-view-all-btn {
      min-width: 150px;
    }
  }

  @media (max-width: 900px) {
    .faq-section {
        padding: 4rem 3vw;
    }
}