/* FAQ boxes, site-wide (Sept 26, 2026).
   Joseph liked the pricing page's questions ("click the little plus button... those boxes")
   and asked for every FAQ on the site to match. One component, used by the homepage, the FAQ
   page, the nine service pages, pricing and the FAQ section of every blog post:

     <div class="qa-grid">                     two independent columns (qa-single: one)
       <div class="qa-col">
         <details class="qa-item">
           <summary><span class="qa-q">Question</span><span class="qa-icon" aria-hidden="true"></span></summary>
           <div class="qa-a">answer HTML</div>
         </details>
       </div>
     </div>

   Closed: a quiet sand box with a round plus. Open: the box turns navy, the plus turns into a
   gold x, links go gold. Native details, so it works without JavaScript and every answer stays
   in the served HTML for search and the FAQPage JSON-LD. Answer styles are scoped to [open]
   (answers only render when open), which also lifts them above the page-level paragraph rules
   (one-ground's .one-ground.service-editorial main p, the blog's .post p, the homepage .faqs). */

.qa-grid{--qa-navy:#0c1a2d;--qa-gold:#d7b486;--qa-gold-text:#7d5f33;--qa-quiet:#f5f1e9;
  --qa-edge:#ebe4d7;--qa-rule:#d8ceba;--qa-muted:#4a5568;--qa-on-navy:#d5dae2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  max-width:1120px;margin:52px auto 0;align-items:start;text-align:left}
.qa-grid.qa-single{grid-template-columns:minmax(0,1fr);max-width:none;margin:28px 0 0}
.qa-col{display:flex;flex-direction:column;gap:16px;min-width:0}

/* section heading, centred like the pricing page */
main .qa-wrap>.qa-title{font-family:"Editor's Note",Georgia,serif;font-weight:300;
  font-size:clamp(36px,3.6vw,52px);line-height:1.08;letter-spacing:-.02em;color:#0c1a2d;
  margin:0 auto;max-width:18ch;padding:0;text-align:center;text-wrap:balance}
main .qa-wrap>.qa-title+.qa-sub{margin:18px auto 0;max-width:36em;text-align:center;
  font-size:17px;line-height:1.6;color:#4a5568}

/* the box */
.qa-grid .qa-item{margin:0;padding:0;background:var(--qa-quiet);border:1px solid var(--qa-edge);
  border-radius:14px;transition:background-color .25s ease,border-color .25s ease}
.qa-grid .qa-item>summary{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:80px;margin:0;padding:18px 22px 18px 26px;cursor:pointer;list-style:none;border-radius:14px;
  background:none;border:0}
.qa-grid .qa-item>summary::-webkit-details-marker{display:none}
.qa-grid .qa-item>summary::marker{content:""}
.qa-grid .qa-item>summary::before,.qa-grid .qa-item>summary::after{content:none}
main .qa-grid .qa-item>summary>.qa-q{margin:0;padding:0;font:500 17px/1.4 "General Sans",system-ui,sans-serif;
  letter-spacing:0;color:var(--qa-navy);text-align:left;text-wrap:pretty}
.qa-grid .qa-icon{position:relative;flex:0 0 36px;width:36px;height:36px;border-radius:50%;
  background:#fffdf8;border:1px solid var(--qa-rule);
  transition:transform .3s ease,background-color .25s ease,border-color .25s ease}
.qa-grid .qa-icon::before,.qa-grid .qa-icon::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:var(--qa-navy);border-radius:1px;
  transition:background-color .25s ease}
.qa-grid .qa-icon::after{transform:rotate(90deg)}
.qa-grid .qa-item:not([open])>summary:hover .qa-icon{border-color:var(--qa-gold-text)}
.qa-grid .qa-item>summary:focus-visible{outline:2px solid var(--qa-navy);outline-offset:3px}

/* open */
.qa-grid .qa-item[open]{background:var(--qa-navy);border-color:var(--qa-navy)}
main .qa-grid .qa-item[open]>summary>.qa-q{color:#fcfcf9}
.qa-grid .qa-item[open] .qa-icon{transform:rotate(45deg);background:var(--qa-gold);border-color:var(--qa-gold)}
.qa-grid .qa-item[open] .qa-icon::before,.qa-grid .qa-item[open] .qa-icon::after{background:var(--qa-navy)}
.qa-grid .qa-item[open]>summary:focus-visible{outline-color:var(--qa-gold)}

/* the answer */
main .qa-grid .qa-item[open]>.qa-a{display:block;margin:0;padding:0 26px 26px;max-width:none;color:var(--qa-on-navy);
  animation:qa-open .28s ease both}
main .qa-grid .qa-item[open] .qa-a p{margin:0 0 14px;padding:0;font-size:16px;line-height:1.68;
  color:var(--qa-on-navy);max-width:none}
main .qa-grid .qa-item[open] .qa-a p:last-child{margin-bottom:0}
main .qa-grid .qa-item[open] .qa-a ul,main .qa-grid .qa-item[open] .qa-a ol{margin:6px 0 18px;padding:0;
  list-style:none;columns:auto;display:block;max-width:none;font-size:16px;color:var(--qa-on-navy)}
main .qa-grid .qa-item[open] .qa-a ul:last-child,main .qa-grid .qa-item[open] .qa-a ol:last-child{margin-bottom:0}
main .qa-grid .qa-item[open] .qa-a li{position:relative;margin:0;padding:10px 0 10px 18px;font-size:16px;line-height:1.55;
  color:var(--qa-on-navy);border:0;border-bottom:1px solid rgba(252,252,249,.12);break-inside:avoid}
main .qa-grid .qa-item[open] .qa-a li:last-child{border-bottom:0}
main .qa-grid .qa-item[open] .qa-a li::before{content:"";position:absolute;left:2px;top:19px;width:5px;height:5px;
  border:0;border-radius:50%;background:var(--qa-gold)}
main .qa-grid .qa-item[open] .qa-a li::marker{content:""}
main .qa-grid .qa-item[open] .qa-a a{color:var(--qa-gold);text-decoration:underline;
  text-decoration-color:rgba(215,180,134,.45);text-underline-offset:3px}
main .qa-grid .qa-item[open] .qa-a a:hover{text-decoration-color:var(--qa-gold)}
main .qa-grid .qa-item[open] .qa-a a:focus-visible{outline:2px solid var(--qa-gold);outline-offset:2px;border-radius:2px}
main .qa-grid .qa-item[open] .qa-a a.arrow-link{display:inline-flex;margin:14px 0 0;text-decoration:none;
  border-bottom:1px solid rgba(215,180,134,.45)}
main .qa-grid .qa-item[open] .qa-a strong,main .qa-grid .qa-item[open] .qa-a b{color:#fcfcf9;font-weight:500}
@keyframes qa-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* per page: the service pages give the questions more room around the hairline; the homepage
   sits on its cool off-light (#f3f3f3), so its closed boxes are white cards, the site's rule for
   cards on off-light, instead of sand. */
.one-ground.service-readable main>section.service-questions{padding-bottom:88px}
.one-ground main>section.service-questions>.qa-wrap{padding-top:64px}
section.faqs .qa-grid{--qa-quiet:#fff;--qa-edge:#e3e3df}

/* narrower screens */
@media(max-width:860px){
  .qa-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .qa-col{gap:12px}
}
@media(max-width:760px){
  .one-ground.service-readable main>section.service-questions{padding-bottom:64px}
  .one-ground main>section.service-questions>.qa-wrap{padding-top:44px}
  .qa-grid{margin-top:38px}
  .qa-grid.qa-single{margin-top:22px}
  .qa-grid .qa-item>summary{min-height:72px;padding:16px 16px 16px 20px;gap:16px}
  main .qa-grid .qa-item>summary>.qa-q{font-size:16.5px}
  .qa-grid .qa-icon{flex-basis:32px;width:32px;height:32px}
  main .qa-grid .qa-item[open]>.qa-a{padding:0 20px 22px}
}
@media(prefers-reduced-motion:reduce){
  .qa-grid .qa-item,.qa-grid .qa-icon,.qa-grid .qa-icon::before,.qa-grid .qa-icon::after{transition:none}
  main .qa-grid .qa-item[open]>.qa-a{animation:none}
}
/* print every answer, open or not, in ink on paper */
@media print{
  .qa-grid{display:block}
  .qa-grid .qa-item{background:none!important;border:0;border-top:1px solid #999;border-radius:0}
  .qa-grid .qa-item::details-content{content-visibility:visible}
  .qa-grid .qa-item>.qa-a{display:block!important;padding:0 0 12px!important}
  .qa-grid .qa-icon{display:none}
  main .qa-grid .qa-item .qa-q,main .qa-grid .qa-item .qa-a,main .qa-grid .qa-item .qa-a p,
  main .qa-grid .qa-item .qa-a li,main .qa-grid .qa-item .qa-a a{color:#000!important}
}