/*
 * FAQ page (templates/page-faq.php).
 *
 * The page own rules from design/faq.html. Global rules live in site.css.
 * The rules at the end replace inline style attributes the prototype used.
 */

/* Jump chips: sticky bar that scrolls to each group */
.faq-jump{position:sticky;top:96px;z-index:20;display:flex;gap:6px;flex-wrap:wrap;padding:10px;margin-bottom:56px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px}
.faq-jump a{flex:1 1 auto;justify-content:center;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:30px;font:500 11.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);border:1px solid transparent;transition:background .35s var(--ease),color .35s,border-color .35s}
.faq-jump a:hover{border-color:var(--line)}
.faq-jump a.on{background:var(--navy);color:#fff}
.faq-jump a small{opacity:.55;font-size:11px}

/* Groups */
.fgroup{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:170px}
.fgroup:first-of-type{border-top:0;padding-top:0}
.fg-side{position:sticky;top:180px;align-self:start}
.fg-num{font:500 12px/1 var(--display);letter-spacing:.2em;color:var(--muted)}
.fg-side h2{font:400 clamp(28px,3vw,38px)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--navy);margin:16px 0 14px}
.fg-side p{font-size:14.5px;max-width:320px}
.fg-ic{width:46px;height:46px;border-radius:13px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 12px 24px -10px rgba(5,14,31,.5);margin-bottom:22px}
.fg-ic i{font-size:17px}
.fgroup .acc{border-top:1px solid #DCDFE5}
.acc-a p+p{margin-top:-12px}
.acc-a a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* Closing contact CTA */
.faq-cta{position:relative;overflow:hidden;border-radius:30px;padding:60px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.faq-cta .helm-c{position:absolute;right:-70px;bottom:-90px;width:340px;color:rgba(255,255,255,.04)}
.faq-cta h2{font:400 clamp(32px,3.8vw,48px)/.98 var(--display);text-transform:uppercase;letter-spacing:-.03em;margin:18px 0 16px}
.faq-cta p{max-width:460px;font-size:15.5px}
.faq-cta .btns{display:flex;flex-direction:column;gap:12px;align-items:stretch;position:relative}
.faq-cta .btns .btn{justify-content:space-between}

@media (max-width:1080px){
  .fgroup{grid-template-columns:1fr;gap:26px}
  .fg-side{position:static}
  .fgroup{scroll-margin-top:230px}
  .faq-cta{grid-template-columns:1fr;padding:44px 34px}
}
@media (max-width:760px){
  /* Chip bar stays sticky under the fixed header and scrolls sideways (one row, no wrapping) */
  .faq-jump{top:90px;flex-wrap:nowrap;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:6px;scrollbar-width:none;padding:6px;margin-bottom:40px;border-radius:28px;background:rgba(255,255,255,.94);box-shadow:0 10px 30px -18px rgba(10,31,68,.35)}
  .faq-jump::-webkit-scrollbar{display:none}
  .faq-jump a{white-space:nowrap;flex:none;height:44px;padding:0 14px}
  .fgroup{padding:44px 0;scroll-margin-top:160px}
  .fg-ic{margin-bottom:18px}
  .fg-side p{max-width:none}
  .acc-q{font-size:16.5px;padding:20px 0;min-height:56px}
  .acc-a p{font-size:15px;overflow-wrap:break-word}
  .acc-a .ph{-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .faq-cta{padding:36px 24px;border-radius:24px}
  .faq-cta .helm-c{width:260px;right:-80px;bottom:-70px}
  .faq-cta .btns .btn{min-width:0}
}
@media (max-width:640px){
  .faq-jump{top:82px}
}
@media (max-width:380px){
  .faq-cta{padding:32px 20px}
  .faq-cta .btns .btn{padding-inline:20px;letter-spacing:.08em}
}

/* ---------- Section chrome (inline styles in the prototype) ---------- */
.faq-cta-sec{padding-top:20px}
.faq-cta-copy{position:relative}