/* FAQ page redesign: native <details>/<summary> accordion, replacing the
   original layout where each question sat in a cramped, mismatched
   "testimonial" speech-bubble widget paired with a separate answer column.
   Scoped to .faq-list / .faq-section-title so it can't affect any other
   page. */

/* Centers the whole block regardless of any competing widget-level CSS --
   an inline <style>.elementor-heading-title{margin:0} tag sits right in
   the page body and beats a same-specificity class rule on load order, so
   centering can't rely on the heading's own class. */
.faq-wrap {
  max-width: 900px;
  margin: 0 auto;
}

/* On mobile the hero photo above this section sits flush against the
   heading with no breathing room (desktop has enough surrounding
   whitespace from the section padding that it isn't noticeable). */
@media (max-width: 767px) {
  .faq-wrap {
    margin-top: 40px;
  }
}

.faq-section-title {
  font-family: 'Pathway Gothic One', sans-serif;
  text-transform: uppercase;
  /* !important on font-size/line-height: .elementor-kit-1176 h2 (a class +
     type selector) outranks a single class like this one, so without it
     the kit's own h2 defaults win instead -- including a typo in its
     mobile (<=767px) breakpoint, line-height: 50em (50x the font-size),
     which blew this heading's box out to ~2700px tall on mobile. Every
     other h2 on the site already carries its own !important override for
     the same reason; this one just didn't have one yet. */
  font-size: 34px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.6px;
  color: #162541;
  margin: 0 0 12px;
}

.faq-list {
  border-top: 1px solid #eee;
}

.faq-item {
  border-bottom: 1px solid #eee;
}

.faq-item__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: normal;
  color: #162541;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q:hover {
  color: #ff4157;
}

.faq-item__icon {
  flex-shrink: 0;
  color: #ff4157;
  transition: transform 0.2s ease;
  font-size: 14px;
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__a {
  padding: 0 28px 22px 4px;
  color: #7d7d7d;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.faq-item__a p {
  margin: 0 0 12px;
}

.faq-item__a a {
  color: #ff4157;
}

.faq-item__a b,
.faq-item__a strong {
  color: #162541;
}