/* Shared FAQ block (template-parts/ss-faq.php, inc/ss-faq.php; README-CS2 "Shared FAQ component").
   One panel, questions as rows split by thin dividers, gold + turning to an x, open row = gold left bar + tint,
   one open at a time (assets/js/ss-faq.js), all closed on load, 200ms max. 900px column.
   Tones (option ss_faq_tone, staging override ?faq=navy|light):
     navy  (default, Mike 2026-09-27 "do D please") = the whole block in a navy panel on the grey band
     light (option B) = white rows panel on the grey band
   .ss-faq--dark = the section itself is navy (city pages): navy tone uses the lighter card navy for its panel. */
.ss-faq{--faq-band:var(--ss-ground);--faq-head:var(--ss-ink);--faq-ink:var(--ss-ink);--faq-ink2:var(--ss-ink-2);--faq-panel:#fff;--faq-bd:var(--ss-line);--faq-div:var(--ss-line);--faq-open:#fffcf2;--faq-bar:var(--ss-gold-pale);--faq-link:var(--ss-navy);--faq-box:transparent;--faq-bpad:0px;
  background:var(--faq-band);padding:104px 0;color:var(--faq-ink);font-size:16px;line-height:1.6}
.ss-faq--dark{--faq-band:var(--ss-navy-section,var(--ss-navy-deep));--faq-head:#fff;--faq-ink:#fff;--faq-ink2:rgba(255,255,255,.8);--faq-panel:var(--ss-navy-card,var(--ss-navy));--faq-bd:rgba(255,255,255,.14);--faq-div:rgba(255,255,255,.1);--faq-open:rgba(255,255,255,.05);--faq-bar:var(--ss-gold);--faq-link:#fff}
.ss-faq--navy{--faq-box:var(--ss-navy-section,var(--ss-navy-deep));--faq-bpad:56px;--faq-head:#fff;--faq-ink:#fff;--faq-ink2:rgba(255,255,255,.8);--faq-panel:var(--ss-navy-card,var(--ss-navy));--faq-bd:rgba(255,255,255,.12);--faq-div:rgba(255,255,255,.1);--faq-open:rgba(255,255,255,.05);--faq-bar:var(--ss-gold);--faq-link:#fff}
.ss-faq--navy.ss-faq--dark{--faq-box:var(--ss-navy-card,var(--ss-navy));--faq-panel:rgba(255,255,255,.045);--faq-bd:rgba(255,255,255,.16)}
.ss-faq *,.ss-faq *::before,.ss-faq *::after{box-sizing:border-box}
.ss-faq__w{max-width:calc(900px + 2 * var(--faq-bpad) + 48px);margin:0 auto;padding:0 24px}
.ss-faq__box{background:var(--faq-box);border-radius:24px;padding:var(--faq-bpad)}
.ss-faq__head{display:grid;gap:14px;justify-items:center;text-align:center;max-width:640px;margin:0 auto 40px}
.ss-faq--navy .ss-faq__head{margin-bottom:32px}
.ss-faq .ss-eyebrow{margin:0;color:var(--ss-gold)}
.ss-faq:not(.ss-faq--navy):not(.ss-faq--dark) .ss-eyebrow{border-color:rgba(var(--ss-gold-rgb),.6);background:var(--ss-gold-soft);color:var(--ss-navy-deep)}
.ss-faq .ss-faq__h{margin:0;font-size:clamp(30px,4vw,46px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--faq-head);text-wrap:balance}
.ss-faq .ss-faq__lede{margin:0;color:var(--faq-ink2);font-size:17px}
.ss-faq__panel{max-width:900px;margin:0 auto;background:var(--faq-panel);border:1px solid var(--faq-bd);border-radius:16px;overflow:hidden;text-align:left}
.ss-faq__q{position:relative;min-width:0;transition:background-color .2s}
.ss-faq__q+.ss-faq__q{border-top:1px solid var(--faq-div)}
.ss-faq__q::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:background-color .2s}
.ss-faq__q.is-open{background:var(--faq-open)}
.ss-faq__q.is-open::before{background:var(--faq-bar)}
.ss-faq .ss-faq__qh{margin:0;font:inherit;letter-spacing:0;color:inherit}
.ss-faq__btn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;width:100%;padding:17px 22px;cursor:pointer;font-family:inherit;font-weight:700;font-size:17px;line-height:1.35;color:var(--faq-ink);-webkit-tap-highlight-color:transparent}
.ss-faq__btn:focus:not(:focus-visible){outline:none}
.ss-faq__btn:focus-visible{outline:3px solid var(--ss-gold);outline-offset:-3px}
.ss-faq__plus{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ss-gold);color:var(--ss-navy-deep);flex:none;transition:transform .2s}
.ss-faq__plus svg{width:12px;height:12px;display:block}
.ss-faq__q.is-open .ss-faq__plus{transform:rotate(45deg)}
.ss-faq__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
.ss-faq__q.is-open>.ss-faq__body{grid-template-rows:1fr}
.ss-faq__body>div{overflow:hidden;min-height:0}
.ss-faq__q:not(.is-open)>.ss-faq__body>div{visibility:hidden;transition:visibility 0s .2s}
.ss-faq .ss-faq__a{padding:0 64px 20px 22px;color:var(--faq-ink2);font-size:15.5px;line-height:1.65}
.ss-faq .ss-faq__a p{margin:0 0 10px;color:inherit;font-size:inherit;line-height:inherit}
.ss-faq .ss-faq__a>:last-child{margin-bottom:0}
.ss-faq .ss-faq__a ul{margin:6px 0 10px 18px;padding:0}
.ss-faq .ss-faq__a li{margin:4px 0}
.ss-faq .ss-faq__a strong,.ss-faq .ss-faq__a b{color:var(--faq-ink)}
.ss-faq .ss-faq__a a{color:var(--faq-link);text-decoration:underline;text-decoration-color:var(--ss-gold);text-underline-offset:3px}
.ss-faq .ss-faq__a a:hover{color:var(--faq-ink)}
.ss-faq .ss-faq__a .ex2-faq-src{margin-top:10px;font-size:13px;opacity:.8}
/* bare = rows panel only (team single "Off the clock": head + section come from the page) */
.ss-faq--bare{background:none;padding:0;color:var(--faq-ink)}
@media (max-width:600px){
  .ss-faq{padding:68px 0}
  .ss-faq--bare{padding:0}
  .ss-faq__w{padding:0 16px}
  .ss-faq--navy .ss-faq__box{padding:36px 14px 14px;border-radius:20px}
  .ss-faq__head{margin-bottom:28px}
  .ss-faq__btn{padding:15px 16px;gap:12px;font-size:16px}
  .ss-faq__plus{width:26px;height:26px}
  .ss-faq .ss-faq__a{padding:0 16px 16px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.ss-faq__q,.ss-faq__q::before,.ss-faq__plus,.ss-faq__body,.ss-faq__body>div{transition:none!important}}

/* ==== Section seams (engine rule; Mike 2026-09-29): the FAQ side of the shared seam rule (see the block at the end of
   services-hub-v2.css). After a family section at its default padding, the FAQ band starts 68px down (44px at <=760) so the
   navy box sits ~136px under the last card. The services-hub reports grid (#svc2-reports, 40px bottom by design) keeps
   the full 104px; page overrides (#subv2-faq, .hv2 #faq, .seo2 #seo-faq, .svc2--ppc-marketing #svc2-faq) keep theirs. */
:where(.sv2-sec:not(#svc2-reports),.pc-sec,.hv2-sec,.co2-sec,.loc2-sec,.ex2-sec,.mop-section)+section.ss-faq,
:where(.sv2-sec:not(#svc2-reports),.pc-sec,.hv2-sec,.co2-sec,.loc2-sec,.ex2-sec,.mop-section)+:where(link,script,style)+section.ss-faq{padding-top:68px}
@media (max-width:760px){
:where(.sv2-sec:not(#svc2-reports),.pc-sec,.hv2-sec,.co2-sec,.loc2-sec,.ex2-sec,.mop-section)+section.ss-faq,
:where(.sv2-sec:not(#svc2-reports),.pc-sec,.hv2-sec,.co2-sec,.loc2-sec,.ex2-sec,.mop-section)+:where(link,script,style)+section.ss-faq{padding-top:44px}
}