/* =====================================================================
   FAQ page.

   .v-sec__eyebrow/__title/__lead, .v-btn, and the closing CTA (.v-fc,
   the same white/animated-grid pattern used on Home/About/Services)
   all come from site.css. .v-wrap is defined here at the site's
   standard 1240px (every other page's sections.css repeats this same
   rule locally, no shared base exists) so this page's content column
   lines up with Home/About/Services/Contact instead of running its
   own narrower width.

   Each category is its own full-bleed section (.v-faqcat), all light
   (dark stays reserved for the hero/closing-CTA bookends, matching
   every other page); .v-faqcat--alt is a faint off-white tint on
   every other category so consecutive bands still read as distinct
   bands rather than one continuous flat page. The open/close
   mechanics are the same grid-template-rows 0fr -> 1fr trick as
   Services' .v-dd, JS-toggled via .is-open rather than native
   <details>, so it animates.
   ===================================================================== */

.v-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4rem); position: relative; z-index: 1; }

.v-faqp-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #04120c 0%, #06231a 50%, #04120c 100%);
  color: rgba(255,255,255,0.78);
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(3.5rem, 6vw, 5rem);
  text-align: center;
}
.v-faqp-hero::before {
  content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 0 0, rgba(16,158,117,0.16) 1.5px, transparent 1.6px),
    linear-gradient(rgba(20,96,75,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,96,75,0.06) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 22%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, black 22%, transparent 78%);
  animation: v-faqp-grid 34s linear infinite;
}
@keyframes v-faqp-grid {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px, 48px 48px; }
}
.v-faqp-hero .v-sec__eyebrow { color: #14E185; }
.v-faqp-hero .v-sec__title   { color: #ffffff; }
.v-faqp-hero .v-sec__title .em { color: #14E185; }
.v-faqp-hero .v-sec__lead    { color: rgba(255,255,255,0.74); }
.v-faqp__link { color: #14E185; text-decoration: underline; text-underline-offset: 3px; }
.v-faqp__link:hover { color: #9dffd0; }

/* --- category bands ---
   All light, matching the site's dominant content-section tone (dark
   is reserved for hero/closing-CTA bookends, same as every other
   page). .v-faqcat--alt is a faint off-white tint on every other
   category (1, 3 = alt) so consecutive bands still read as distinct
   without going dark. */
.v-faqcat {
  position: relative; overflow: hidden; isolation: isolate;
  background: #ffffff; color: #46584f;
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  text-align: center;
}
.v-faqcat::before {
  content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(20,96,75,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,96,75,0.11) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(180deg, transparent, black 10%, black 90%, transparent);
  animation: v-faqcat-grid 40s linear infinite;
}
@keyframes v-faqcat-grid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 56px, 56px 56px; }
}
.v-faqcat .v-sec__eyebrow { color: #0b7a58; }
.v-faqcat .v-sec__title   { color: #0e1f19; }

.v-faqcat--alt { background: #f4f8f6; }

.v-faqcat__list {
  max-width: 800px; margin: clamp(1.6rem, 2.6vw, 2.2rem) auto 0;
  text-align: left;
}

.v-faqp__q {
  border-radius: 16px;
  background: #f4f8f6;
  border: 1px solid rgba(14,31,25,0.08);
  transition: border-color 300ms ease, background 300ms ease;
}
.v-faqp__q + .v-faqp__q { margin-top: 10px; }
.v-faqp__q:hover { border-color: rgba(16,158,117,0.35); }
.v-faqp__q.is-open { background: rgba(16,158,117,0.08); border-color: rgba(16,158,117,0.4); }

.v-faqcat--alt .v-faqp__q {
  background: #ffffff; border-color: rgba(14,31,25,0.13);
  box-shadow: 0 1px 3px rgba(14,31,25,0.05);
}
.v-faqcat--alt .v-faqp__q.is-open { background: rgba(16,158,117,0.08); }

.v-faqp__qh { margin: 0; }
.v-faqp__qbtn {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: clamp(15px, 1.8vw, 20px) clamp(18px, 2.2vw, 24px);
  cursor: pointer; border: none; background: none; text-align: left;
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(0.92rem, 1.1vw, 1.04rem); line-height: 1.3; letter-spacing: -0.005em;
  color: #0e1f19;
}
.v-faqp__qbtn:focus-visible { outline: 2px solid rgba(16,158,117,0.6); outline-offset: -3px; border-radius: 16px; }

.v-faqp__sign {
  margin-left: auto; flex: none; position: relative;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(16,158,117,0.4);
  transition: background 320ms ease, border-color 320ms ease, transform 420ms cubic-bezier(.22,1,.28,1);
}
.v-faqp__sign::before, .v-faqp__sign::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 2px; border-radius: 2px; background: #109e75;
  transform: translate(-50%, -50%);
  transition: transform 420ms cubic-bezier(.22, 1, .28, 1), background 320ms ease;
}
.v-faqp__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.v-faqp__q.is-open .v-faqp__sign { background: #109e75; border-color: #109e75; transform: rotate(180deg); }
.v-faqp__q.is-open .v-faqp__sign::before,
.v-faqp__q.is-open .v-faqp__sign::after { background: #ffffff; }
.v-faqp__q.is-open .v-faqp__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Opening/closing animation: grid-rows 0fr -> 1fr rather than height:auto,
   which cannot be transitioned. The inner wrapper clips overflow so the
   answer text does not spill mid-animation. */
.v-faqp__collapse {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(.22, 1, .28, 1);
}
.v-faqp__q.is-open .v-faqp__collapse { grid-template-rows: 1fr; }
.v-faqp__collapse__in { overflow: hidden; min-height: 0; }

.v-faqp__a {
  padding: 0 clamp(18px, 2.2vw, 24px) clamp(16px, 2vw, 20px);
  font-family: "Montserrat", Arial, sans-serif; font-weight: 400;
  font-size: clamp(0.9rem, 1vw, 0.98rem); line-height: 1.72;
  color: #46584f; margin: 0; max-width: 74ch;
}

@media (prefers-reduced-motion: reduce) {
  .v-faqp-hero::before, .v-faqcat::before { animation: none; }
  .v-faqp__q, .v-faqp__sign, .v-faqp__sign::before, .v-faqp__sign::after,
  .v-faqp__collapse { transition: none; }
}

@media (max-width: 640px) {
  .v-faqp__qbtn { align-items: flex-start; }
}