/* =========================================================================
   <FAQ /> — Website Design & Development §8
   Navy elevated band, dark accordion. White triggers, lime +/× icon.
   ========================================================================= */

.cwd-faq {
  position: relative;
  isolation: isolate;        /* host the .vh-geo side accents behind content */
  overflow: hidden;          /* clip the gutter shapes to the section */
  background: #0C1E46;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cwd-faq__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 112px var(--container-pad);
}

.cwd-faq__head { max-width: 720px; margin: 0 0 44px; }
.cwd-faq__eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cwd-faq__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.cwd-faq__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,0.70);
}

.cwd-faq__list { border-top: 1px solid rgba(255,255,255,0.10); }
.cwd-faq__item { border-bottom: 1px solid rgba(255,255,255,0.10); }

.cwd-faq__trigger {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 6px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: #fff;
  transition: color 220ms var(--ease-out-soft);
}
.cwd-faq__trigger:hover { color: var(--color-accent); }
.cwd-faq__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.cwd-faq__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  position: relative;
  display: inline-block;
}
.cwd-faq__icon::before,
.cwd-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 220ms var(--ease-out-soft);
}
.cwd-faq__icon::before { transform: translate(-50%, -50%); }
.cwd-faq__icon::after  { transform: translate(-50%, -50%) rotate(90deg); }
.cwd-faq__item.is-open .cwd-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.cwd-faq__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 240ms var(--ease-out-soft);
}
.cwd-faq__answer {
  margin: 0;
  padding: 0 6px 26px 6px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
  max-width: 70ch;
}

@media (max-width: 780px) {
  .cwd-faq__inner { padding: 88px var(--container-pad); }
  .cwd-faq__trigger { font-size: 17px; padding: 22px 2px; }
}
@media (max-width: 540px) {
  .cwd-faq__inner { padding: 72px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cwd-faq__panel,
  .cwd-faq__icon::before,
  .cwd-faq__icon::after { transition: none; }
}

/* ============================ READABILITY (custom-websites page only) ===================
   Body/smaller text slightly larger + higher contrast. cwd-faq.css loads after the other cwd-*
   section files, so these win the cascade for .cwd-* without touching them; testimonials use
   higher specificity (.st-grid ...) to beat svc-testimonials.css which loads later. All in-scope
   sections are white-on-navy. Headings, eyebrows, shared footer + gold .fcta are left alone.
   Aligns with UI-UX-PRO-MAX: base 16px body, 4.5:1 contrast.
   ===================================================================================== */
.cwd-hero__sub      { font-size: clamp(17px, 1.45vw, 20px); color: rgba(255, 255, 255, 0.82); }
.cwd-intro__lede    { font-size: clamp(17px, 1.4vw, 19px);  color: rgba(255, 255, 255, 0.82); }
.cwd-why__intro-body p { font-size: clamp(16px, 1.3vw, 18px); color: rgba(255, 255, 255, 0.82); }
.cwd-platforms__lede{ font-size: clamp(17px, 1.35vw, 19px); color: rgba(255, 255, 255, 0.82); }
.cwd-faq__sub       { font-size: clamp(17px, 1.35vw, 19px); color: rgba(255, 255, 255, 0.80); }
.cwd-faq__answer    { font-size: 17px; color: rgba(255, 255, 255, 0.82); }
/* weak microcopy lifted */
.cwd-hero__cta-sub  { color: rgba(255, 255, 255, 0.66); }
.cwd-hero__stat-label { color: rgba(255, 255, 255, 0.66); }
.cwd-step__desc     { font-size: 15px; color: rgba(255, 255, 255, 0.76); }
.cwd-platform__desc { font-size: 15px; color: rgba(255, 255, 255, 0.76); }
.cwd-intro__chips li { color: rgba(255, 255, 255, 0.9); }
/* testimonials (this page only; higher specificity beats svc-testimonials.css) */
.st-grid .st-card__text { font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.st-grid .st-card__role { color: rgba(255, 255, 255, 0.64); }
.st-inner .st-lead      { color: rgba(255, 255, 255, 0.82); }