.faq-page {
  color: #192d00;
}

.faq-hero {
  position: relative;
  isolation: isolate;
  height: clamp(360px, 38.7vw, 740px);
  min-height: 360px;
  overflow: hidden;
  color: #fff;
  background: #07190e;
}

.faq-hero-background,
.faq-hero-shade {
  position: absolute;
  inset: 0;
}

.faq-hero-background {
  z-index: -3;
  background: url("../assets/hero-faq.jpg") center 53% / cover no-repeat;
  transform: scale(1.025);
}

.faq-hero-shade {
  z-index: -2;
  background:
    radial-gradient(circle at 50% 52%, rgba(9, 29, 16, 0.04), rgba(1, 10, 5, 0.52) 80%),
    linear-gradient(90deg, rgba(0, 12, 5, 0.5), rgba(4, 23, 12, 0.1) 50%, rgba(0, 12, 5, 0.56));
}

.faq-page .site-header {
  top: clamp(14px, 1.7vw, 32px);
  right: clamp(14px, 1.5vw, 29px);
  left: clamp(14px, 1.5vw, 29px);
  color: #fff;
}

.faq-foliage {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

.faq-foliage img {
  display: block;
  width: 100%;
  height: auto;
}

.faq-foliage-left-top {
  top: 0;
  left: 0;
  width: clamp(220px, 20vw, 390px);
}

.faq-foliage-right-top {
  top: 0;
  right: 0;
  width: clamp(190px, 21vw, 350px);
}

.faq-foliage-left-bottom {
  bottom: 0;
  left: 0;
  width: clamp(190px, 21vw, 350px);
}

.faq-foliage-right-bottom {
  right: 0;
  bottom: 0;
  width: clamp(230px, 22vw, 420px);
}

.faq-hero-title-wrap {
  position: absolute;
  z-index: 8;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-hero-title-wrap h1 {
  margin: 0;
  color: #9bdf35;
  background: linear-gradient(180deg, #f4f5ef 0%, #e9eee2 36%, #a9e74b 70%, #62bd04 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 4px 2px rgba(0, 12, 5, 0.38));
  font-family: var(--heading-font);
  font-size: clamp(3.6rem, 6vw, 7.2rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.018em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.faq-title-parrot {
  position: absolute;
  z-index: 2;
  top: -169%;
  left: -98%;
  width: clamp(130px, 17vw, 260px);
  max-width: none;
  height: auto;
  pointer-events: none;
}

.faq-page-section {
  min-height: 0;
  color: #192d00;
  background: linear-gradient(180deg, #dceef5 0%, #f1f8fa 38%, #fff 100%);
}

.faq-page-section .faq-inner {
  padding: clamp(70px, 7vw, 115px) 0 clamp(90px, 8vw, 135px);
}

.faq-page-section .faq-title {
  font-size: clamp(3.1rem, 5.3vw, 6.2rem);
}

.faq-page-section .faq-list {
  width: min(52%, 860px);
  margin-top: clamp(42px, 4vw, 65px);
}

.faq-page-section .faq-item button {
  min-height: clamp(43px, 3.4vw, 55px);
  padding-right: clamp(10px, 1vw, 16px);
  padding-left: clamp(10px, 1vw, 16px);
  font-size: clamp(0.78rem, 0.88vw, 1rem);
}

.faq-page-section .faq-answer > div,
.faq-page-section article.faq-item.is-open .faq-answer > div {
  padding: clamp(14px, 1.4vw, 22px) clamp(10px, 1vw, 16px) clamp(20px, 1.8vw, 28px);
}

.faq-page-section .faq-answer p {
  font-size: clamp(0.68rem, 0.72vw, 0.82rem);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .faq-hero {
    height: clamp(360px, 56vw, 500px);
  }

  .faq-page-section .faq-inner {
    width: min(calc(100% - 48px), 760px);
    padding-top: 75px;
  }

  .faq-page-section .faq-list {
    width: min(100%, 680px);
  }
  .faq-section {
    padding: 0px 0px;
  }
}

@media (max-width: 600px) {
  .faq-hero {
    height: 340px;
    min-height: 340px;
  }

  .faq-hero-title-wrap {
    top: 57%;
  }

  .faq-hero-title-wrap h1 {
    font-size: clamp(3.2rem, 17vw, 4.5rem);
  }

  .faq-title-parrot {
    top: -105%;
    left: -55%;
    width: 125px;
  }

  .faq-foliage-left-top {
    left: 0;
    width: 200px;
  }

  .faq-foliage-right-top {
    right: 0;
    width: 170px;
  }

  .faq-foliage-left-bottom {
    bottom: 0;
    left: 0;
    width: 170px;
  }

  .faq-foliage-right-bottom {
    right: 0;
    bottom: 0;
    width: 210px;
  }

  .faq-page-section .faq-inner {
    width: calc(100% - 36px);
    padding: 62px 0 80px;
  }

  .faq-page-section .faq-title {
    font-size: clamp(2.8rem, 13.5vw, 4.1rem);
  }

  .faq-page-section .faq-list {
    margin-top: 34px;
  }

  .faq-page-section .faq-item button {
    min-height: 50px;
    gap: 12px;
    font-size: 0.72rem;
  }

  .faq-page-section .faq-answer p {
    font-size: 0.66rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-hero-background {
    transform: none;
  }

  .faq-foliage {
    will-change: auto;
  }
}