/* FAQ section, home + services (.faq-p). Loaded last.
   Layout: the section's one centred H2 (css/headings.css, untouched) sits above a two-column grid.
   Left: one photo + ink contact block, sticky on desktop, joined as ONE unit with the section's single crafted corner.
   Right: the accordion as hairline-divided numbered rows. The open row is a white panel with an ink outline, not an orange slab.
   Open/close motion is js/motion.js initDetails (grid-rows spring, answer fade); single-open is js/site.js [data-service-faq].
   No shadows, glow or gradients. Orange is only the plus mark (it is not text). */

.faq-p__grid{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:64px;align-items:start}

/* ---------- left: photo + help, one unit ---------- */
.faq-p__aside{position:sticky;top:124px;display:flex;flex-direction:column;background:var(--ink);color:var(--white);
  border-radius:var(--r-s) var(--r-l) var(--r-s) var(--r-s);overflow:hidden}
.faq-p__photo{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.faq-p__photo picture{display:block;width:100%;height:100%}
.faq-p__photo img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.faq-p__help{padding:28px 28px 30px}
.faq-p__t{margin:0 0 10px;font:800 var(--t-card-title)/1.15 var(--font-head);text-transform:uppercase;letter-spacing:-.005em;color:var(--white)}
.faq-p__lead{margin:0 0 22px;font:500 var(--t-body)/1.55 var(--font-body);color:var(--on-dark-soft)}
.faq-p__acts{display:grid;gap:12px}
.faq-p__acts .btn{width:100%;min-height:52px;padding-inline:20px;white-space:nowrap}
body main .faq-p__acts .btn--phone svg{display:block}
.faq-p__hours{margin:18px 0 0;font:500 var(--t-caption)/1.4 var(--font-body);color:var(--on-dark-soft)}

/* ---------- right: the accordion ---------- */
body main .faq-p .faq{display:block;max-width:none;margin:0;counter-reset:faqn;border-top:2px solid var(--ink)}
body main .faq-p .faq details{position:relative;counter-increment:faqn;background:transparent;border:1px solid transparent;border-bottom-color:var(--ink-alpha-24);border-radius:0;
  transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),border-radius var(--dur-2) var(--ease-out)}
body main .faq-p .faq details+details{margin-top:-1px}
body main .faq-p .faq details[data-m-open]{z-index:1;background:var(--white);border-color:var(--ink);border-radius:var(--r-s)}

body main .faq-p .faq details>summary:not(#_):not(#_):not(#_){display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;column-gap:20px;
  min-height:84px;padding:18px 66px 18px 22px;border:0;border-radius:inherit;background:transparent;color:var(--ink);cursor:pointer;list-style:none;
  font:700 20px/1.3 var(--font-body);letter-spacing:-.005em;text-wrap:balance;transition:background-color var(--dur-2) var(--ease-out)}
body main .faq-p .faq details[data-m-open]>summary:not(#_):not(#_):not(#_){background:transparent;color:var(--ink)}
body main .faq-p .faq details>summary::-webkit-details-marker{display:none}
body main .faq-p .faq details>summary:not(#_):not(#_):not(#_)::before{content:counter(faqn,decimal-leading-zero);content:counter(faqn,decimal-leading-zero) / "";display:block;
  font:800 14px/1 var(--font-head);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ink-soft);transition:color var(--dur-2) var(--ease-out)}
body main .faq-p .faq details[data-m-open]>summary:not(#_):not(#_):not(#_)::before{color:var(--ink)}
body main .faq-p .faq details>summary.has-plus>.ico-plus{right:26px}
body main .faq-p .faq details>summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  body main .faq-p .faq details:not([data-m-open])>summary:hover{background:var(--white)}
  body main .faq-p .faq details:not([data-m-open])>summary:hover::before{color:var(--ink)}
}

/* answer: starts under the question, not under the number */
body main .faq-p .faq details>m-acc>m-in>div,body main .faq-p .faq details>div{padding:0 62px 28px 76px}
body main .faq-p .faq details p:not(#_){margin:0;font:500 18px/1.6 var(--font-body);color:var(--ink)}
body main .faq-p .faq details p:not(#_)+p:not(#_){margin-top:12px}
body main .faq-p .faq details a:not(.btn){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:700;color:var(--ink)}
body main .faq-p .faq details a:not(.btn):hover{text-decoration-thickness:2px}

/* no photo (Exterior Coatings has no outdoor job photography yet): the ink block stands alone with its one crafted corner */
.faq-p__aside--solo{border-radius:var(--r-s) var(--r-l) var(--r-s) var(--r-s)}
.faq-p__aside--solo .faq-p__help{padding:36px 30px 38px}

/* ---------- tablet: photo and help sit side by side above the accordion ---------- */
@media (max-width:1023.98px){
  .faq-p__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .faq-p__aside{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .faq-p__aside--solo{display:block}
  .faq-p__photo{aspect-ratio:auto;min-height:100%}
  .faq-p__help{align-self:center}
}

/* ---------- phone: compact photo, help block attached, accordion full width ---------- */
@media (max-width:767.98px){
  .faq-p__grid{gap:28px}
  .faq-p__aside{display:flex;border-top-right-radius:var(--r-l)}
  .faq-p__photo{aspect-ratio:16/10}
  .faq-p__help{padding:22px 20px 24px}
  .faq-p__t{font-size:20px}
  body main .faq-p .faq details>summary:not(#_):not(#_):not(#_){grid-template-columns:26px minmax(0,1fr);column-gap:14px;min-height:68px;padding:16px 46px 16px 14px;font-size:17px}
  body main .faq-p .faq details>summary.has-plus>.ico-plus{right:16px}
  body main .faq-p .faq details>summary:not(#_):not(#_):not(#_)::before{font-size:13px}
  body main .faq-p .faq details>m-acc>m-in>div,body main .faq-p .faq details>div{padding:0 18px 24px 54px}
  body main .faq-p .faq details p:not(#_){font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  body main .faq-p .faq details,body main .faq-p .faq details>summary:not(#_):not(#_):not(#_),body main .faq-p .faq details>summary:not(#_):not(#_):not(#_)::before{transition:none}
}

/* =====================================================================================================
   /faq page: the grouped .qa rows take the same numbered accordion as .faq-p (hairline rows, white open
   panel with a 1px ink outline, plus mark at the right). Numbers restart in each group. One open at a
   time is js/pages/faq.js. The "Still have questions?" block closes the page as ONE joined unit
   (photo + ink panel, the section's single crafted corner), laid out wide instead of as a sticky column.
   ===================================================================================================== */
body main .fq-group{background:var(--surface)}
body main .fq-group .fq-band{background:transparent;padding-bottom:12px}
body main .fq-group .fq-block{background:transparent}
body main .fq-group .fq-block__in{max-width:calc(960px + 2 * var(--gut));counter-reset:qan;padding-block:24px 48px}

body main .fq-group .qa{position:relative;counter-increment:qan;margin:0;background:transparent;border:1px solid transparent;border-bottom-color:var(--ink-alpha-24);border-radius:0;
  transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),border-radius var(--dur-2) var(--ease-out)}
body main .fq-group .qa:first-of-type{border-top:2px solid var(--ink)}
body main .fq-group .qa+.qa{margin-top:-1px}
body main .fq-group .qa[data-m-open]{z-index:1;background:var(--white);border-color:var(--ink);border-radius:var(--r-s)}

body main .fq-group .qa>summary:not(#_):not(#_):not(#_){display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;column-gap:20px;
  min-height:84px;padding:18px 66px 18px 22px;border:0;border-radius:inherit;background:transparent;color:var(--ink);cursor:pointer;list-style:none;
  font:700 20px/1.3 var(--font-body);letter-spacing:-.005em;text-wrap:balance;transition:background-color var(--dur-2) var(--ease-out)}
body main .fq-group .qa[open]>summary:not(#_):not(#_):not(#_),body main .fq-group .qa[open]>summary:not(#_):not(#_):not(#_):hover{background:transparent;color:var(--ink)}
body main .fq-group .qa>summary::-webkit-details-marker{display:none}
body main .fq-group .qa>summary:not(#_):not(#_):not(#_)::after{content:none;display:none}
body main .fq-group .qa>summary:not(#_):not(#_):not(#_)::before{content:counter(qan,decimal-leading-zero);content:counter(qan,decimal-leading-zero) / "";display:block;
  font:800 14px/1 var(--font-head);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ink-soft);transition:color var(--dur-2) var(--ease-out)}
body main .fq-group .qa[data-m-open]>summary:not(#_):not(#_):not(#_)::before{color:var(--ink)}
body main .fq-group .qa>summary.has-plus>.ico-plus{right:26px}
body main .fq-group .qa>summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  body main .fq-group .qa:not([data-m-open])>summary:not(#_):not(#_):not(#_):hover{background:var(--white);color:var(--ink)}
  body main .fq-group .qa:not([data-m-open])>summary:hover::before{color:var(--ink)}
}

/* answer starts under the question, not under the number */
body main .fq-group .qa__a{padding:0 62px 28px 76px;background:transparent;font:500 18px/1.6 var(--font-body);color:var(--ink)}
body main .fq-group .qa__a p{margin:0}
body main .fq-group .qa__a p+p{margin-top:12px}
body main .fq-group .qa__a p.qa__more{margin-top:16px}
body main .fq-group .qa__a a:not(.link-under){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:700;color:var(--ink)}
body main .fq-group .qa__a a:not(.link-under):hover{text-decoration-thickness:2px}

/* ---------- closing help block: photo + ink panel, wide ---------- */
body main .faq-p--ask{padding-block:72px}
body main .faq-p__aside--wide{position:static;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);max-width:1060px;margin-inline:auto}
body main .faq-p__aside--wide .faq-p__photo{position:relative;aspect-ratio:auto;min-height:400px}
body main .faq-p__aside--wide .faq-p__photo picture{position:absolute;inset:0}
body main .faq-p__aside--wide .faq-p__help{align-self:center;padding:48px 52px}
body main .faq-p__aside--wide .faq-p__t{font-size:var(--t-h3)}
body main .faq-p__aside--wide .faq-p__lead{max-width:46ch;margin-bottom:26px}
body main .faq-p__aside--wide .faq-p__acts{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:1023.98px){
  body main .faq-p__aside--wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body main .faq-p__aside--wide .faq-p__help{padding:32px 30px}
  body main .faq-p__aside--wide .faq-p__photo{min-height:320px}
  body main .faq-p__aside--wide .faq-p__acts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767.98px){
  body main .fq-group .fq-block__in{padding-block:16px 36px}
  body main .fq-group .qa>summary:not(#_):not(#_):not(#_){grid-template-columns:26px minmax(0,1fr);column-gap:14px;min-height:68px;padding:16px 46px 16px 14px;font-size:17px}
  body main .fq-group .qa>summary.has-plus>.ico-plus{right:16px}
  body main .fq-group .qa>summary:not(#_):not(#_):not(#_)::before{font-size:13px}
  body main .fq-group .qa__a{padding:0 18px 24px 54px;font-size:17px}
  body main .faq-p--ask{padding-block:48px}
  body main .faq-p__aside--wide{display:flex;flex-direction:column;border-top-right-radius:var(--r-l)}
  body main .faq-p__aside--wide .faq-p__photo{aspect-ratio:16/10;min-height:0}
  body main .faq-p__aside--wide .faq-p__help{padding:22px 20px 24px}
}
@media (prefers-reduced-motion:reduce){
  body main .fq-group .qa,body main .fq-group .qa>summary:not(#_):not(#_):not(#_),body main .fq-group .qa>summary:not(#_):not(#_):not(#_)::before{transition:none}
}