/* Village Trimlight — FAQ (accordion). Site tokens: #0c71c3, square corners. */

#vtl-faq { --b:#0c71c3; --ink:#1a1a1a; --mute:#6d7378; --line:#dadada; --bg:#f4f6f8; --or:#f38e31;
  font-family:inherit; color:var(--ink); }
#vtl-faq *,#vtl-faq *::before,#vtl-faq *::after { box-sizing:border-box; }

/* controls */
#vtl-faq .faq-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 10px; }
#vtl-faq .faq-search { flex:1 1 300px; max-width:440px; padding:13px 16px; font-size:15px;
  font-family:inherit; color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:0; -webkit-appearance:none; }
#vtl-faq .faq-search:focus { outline:none; border-color:var(--b); box-shadow:0 0 0 3px rgba(12,113,195,.18); }
#vtl-faq .faq-toggle { font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:12px 18px; background:#fff; color:var(--mute);
  border:1px solid var(--line); border-radius:0; cursor:pointer; transition:all .15s; }
#vtl-faq .faq-toggle:hover { color:var(--b); border-color:var(--b); }
#vtl-faq .faq-toggle:focus-visible { outline:2px solid var(--b); outline-offset:2px; }
#vtl-faq .faq-count { display:block; font-size:13px; color:var(--mute); margin:0 0 26px;
  font-variant-numeric:tabular-nums; }

/* jump nav */
#vtl-faq .faq-jump { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 34px; }
#vtl-faq .faq-jump a { font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:10px 15px; background:#fff; color:var(--mute); border:1px solid var(--line);
  text-decoration:none; transition:all .15s; }
#vtl-faq .faq-jump a:hover { color:var(--b); border-color:var(--b); }

/* sections */
#vtl-faq .faq-sec { margin:0 0 36px; scroll-margin-top:110px; }
#vtl-faq .faq-sec-h { font-size:13px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--b); margin:0 0 14px; padding-bottom:9px; border-bottom:2px solid var(--line); }
#vtl-faq .faq-items { border:1px solid var(--line); border-bottom:none; }

/* --- accordion --- */
#vtl-faq .faq-item { background:#fff; border-bottom:1px solid var(--line); }

#vtl-faq .faq-q { list-style:none; cursor:pointer; padding:18px 52px 18px 22px; position:relative;
  font-size:16.5px; font-weight:700; line-height:1.4; color:var(--ink);
  transition:background .12s, color .12s; }
#vtl-faq .faq-q::-webkit-details-marker { display:none; }
#vtl-faq .faq-q::marker { content:""; }
#vtl-faq .faq-q:hover { background:var(--bg); color:var(--b); }
#vtl-faq .faq-q:focus-visible { outline:2px solid var(--b); outline-offset:-2px; }

/* chevron */
#vtl-faq .faq-q::after { content:""; position:absolute; right:22px; top:50%; width:9px; height:9px;
  margin-top:-6px; border-right:2px solid var(--b); border-bottom:2px solid var(--b);
  transform:rotate(45deg); transition:transform .18s ease; }
#vtl-faq .faq-item[open] > .faq-q::after { transform:rotate(-135deg); margin-top:-2px; }
#vtl-faq .faq-item[open] > .faq-q { color:var(--b); background:var(--bg); }

#vtl-faq .faq-a-wrap { padding:2px 52px 20px 22px; border-top:1px solid transparent; }
#vtl-faq .faq-a { font-size:15px; line-height:1.7; color:#4c5257; margin:0; }
#vtl-faq .faq-a + .faq-a { margin-top:11px; }
#vtl-faq .faq-a strong { color:var(--ink); font-weight:600; }
#vtl-faq .faq-a a { color:var(--b); font-weight:600; }

@media (prefers-reduced-motion:no-preference) {
  #vtl-faq .faq-item[open] > .faq-a-wrap { animation:vtlFaqIn .18s ease-out; }
  @keyframes vtlFaqIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
}

#vtl-faq .faq-empty { display:none; padding:30px 0; font-size:15px; color:var(--mute); }

/* spec strip */
#vtl-faq .faq-specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin:0 0 34px; }
#vtl-faq .faq-spec { background:#fff; padding:18px 20px; display:flex; flex-direction:column; gap:3px; }
#vtl-faq .faq-spec-v { font-size:22px; font-weight:700; line-height:1.1; color:var(--b);
  font-variant-numeric:tabular-nums; }
#vtl-faq .faq-spec-l { font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mute); }

/* CTA */
#vtl-faq .faq-cta { margin:40px 0 0; padding:28px 26px; background:var(--b); color:#fff;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
#vtl-faq .faq-cta h3 { margin:0; font-size:22px; font-weight:700; line-height:1.3; color:#fff; }
#vtl-faq .faq-cta p { margin:0; font-size:15.5px; line-height:1.6; color:#e6f1fa; max-width:62ch; }
#vtl-faq .faq-btn { display:inline-block; margin-top:6px; padding:14px 34px; background:#fff;
  color:var(--b); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:2px solid #fff; transition:background .15s,color .15s; }
#vtl-faq .faq-btn:hover { background:transparent; color:#fff; }
#vtl-faq .faq-btn:focus-visible { outline:3px solid #fff; outline-offset:3px; }

@media (max-width:600px) {
  #vtl-faq .faq-q { font-size:15.5px; padding:16px 44px 16px 16px; }
  #vtl-faq .faq-q::after { right:17px; }
  #vtl-faq .faq-a-wrap { padding:2px 20px 18px 16px; }
  #vtl-faq .faq-cta { padding:24px 20px; }
}