/* The FAQ page (/faq/ only): the services hero, a search field and hairline
   question rows that open in place. All on the shared tokens. */

.faq-hero {
  padding: 176px 0 72px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.faq-eyebrow { font-size: 12.5px; letter-spacing: 0.08em; }

.faq-hero h1 {
  max-width: 820px;
  margin: 18px auto 0;
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.faq-lead {
  max-width: 620px;
  margin: 20px auto 0;
  color: var(--ink);
  font-size: 17.5px;
  line-height: 1.7;
}

/* the search field ships hidden: without JS it would do nothing */
.faq-search[hidden] { display: none; }

.faq-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 520px;
  margin: 30px auto 0;
}

.faq-search-ic {
  position: absolute;
  left: 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.faq-search input {
  width: 100%;
  padding: 15px 18px 15px 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-deep);
  font-family: var(--font-sans);
  font-size: 16px;
  transition: border-color 160ms ease;
}

.faq-search input::placeholder { color: var(--muted); }
.faq-search input:focus { outline: none; border-color: var(--brand); }
.faq-search input:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

/* ---- the list ---- */
.faq-body { padding: 72px 0 104px; }

.faq-body .w { max-width: 860px; }

.faq-empty {
  margin: 0 0 32px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 15.5px;
}

.faq-empty[hidden] { display: none; }
.faq-empty a { color: var(--brand-dark); font-weight: 650; }

.faq-group[hidden] { display: none; }
.faq-group + .faq-group { margin-top: 56px; }

.faq-group h2 {
  margin: 0 0 4px;
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.faq-row[hidden] { display: none; }
.faq-row { border-top: 1px solid var(--line); }
.faq-rows .faq-row:last-of-type { border-bottom: 1px solid var(--line); }

.faq-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 6px;
  cursor: pointer;
  list-style: none;
}

.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: -2px; }

.faq-row .q {
  color: var(--ink-deep);
  font-family: var(--font-sans);
  font-size: 17.5px;
  font-weight: 650;
  line-height: 1.35;
  transition: color 160ms ease;
}

.faq-row summary:hover .q, .faq-row summary:focus-visible .q { color: var(--brand-dark); }

.faq-chev {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), stroke 160ms ease;
}

.faq-row[open] .faq-chev { transform: rotate(180deg); }
.faq-row summary:hover .faq-chev, .faq-row summary:focus-visible .faq-chev { stroke: var(--brand-dark); }

/* the answer grows into place rather than snapping: a grid row opening from
   0fr, which needs no height measuring and no JavaScript. The padding lives
   inside the clipped wrapper, or the row would bottom out at the padding's
   height and the last of the close would happen in one jump. */
.faq-a { display: grid; grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; min-height: 0; }
.faq-a p {
  margin: 0;
  padding: 0 60px 24px 6px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.faq-row[open] .faq-a { animation: faq-open 200ms ease; }
.faq-row.is-closing .faq-a { animation: faq-close 180ms ease forwards; }
.faq-row.is-closing .faq-chev { transform: rotate(0deg); }

@keyframes faq-open {
  from { grid-template-rows: 0fr; opacity: 0; }
}

@keyframes faq-close {
  to { grid-template-rows: 0fr; opacity: 0; }
}

.faq-more {
  margin: 56px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15.5px;
}

.faq-more a { color: var(--brand-dark); font-weight: 650; }
.faq-more a:hover, .faq-more a:focus-visible { text-decoration: underline; }

@media (max-width: 760px) {
  .faq-hero { padding: 148px 0 56px; }
  .faq-body { padding: 56px 0 80px; }
  .faq-group + .faq-group { margin-top: 42px; }
  .faq-row summary { padding: 18px 2px; gap: 14px; }
  .faq-row .q { font-size: 16px; }
  .faq-a p { padding: 0 34px 20px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-chev, .faq-row .q, .faq-search input { transition: none; }
  .faq-row[open] .faq-a { animation: none; }
}