/* Shared FAQ interaction for the preview home and full FAQ page. */
html body :is(#page-home.home-scroll-page, .faq-page) [data-faq-item] {
    box-sizing: border-box;
    margin-inline: 0;
    padding-inline: 24px;
    background-color: transparent;
    transition-property: opacity, transform, background-color;
    transition-duration: .85s, 1s, .42s;
    transition-timing-function: ease, cubic-bezier(.22,1,.36,1), cubic-bezier(.25,.1,.25,1);
    transition-delay: 0s;
}
html body #page-home .home-faq.is-approach-visible [data-faq-item] {
    transition-delay: calc(.65s + var(--faq-index, 0) * 140ms), calc(.65s + var(--faq-index, 0) * 140ms), 0s;
}
html body :is(#page-home.home-scroll-page, .faq-page) [data-faq-item].faq-is-moving { overflow: hidden; }
html body .faq-page [data-faq-item] summary {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 16px;
    padding-right: 0;
    font-weight: 500;
    line-height: 1.5;
    word-break: keep-all;
}
html body .faq-page [data-faq-item] summary::before,
html body .faq-page [data-faq-item] summary::after { content: none; }
html body :is(#page-home.home-scroll-page, .faq-page, .page-services-guide .service-mini-faq, .page-support .service-mini-faq) [data-faq-q] {
    color: #ff6e2e !important;
    -webkit-text-fill-color: #ff6e2e !important;
}
html body :is(#page-home.home-scroll-page, .faq-page, .page-services-guide .service-mini-faq, .page-support .service-mini-faq) [data-faq-toggle] {
    position: relative; display: block; width: 20px; height: 20px;
}
html body :is(#page-home.home-scroll-page, .faq-page, .page-services-guide .service-mini-faq, .page-support .service-mini-faq) [data-faq-toggle]::before,
html body :is(#page-home.home-scroll-page, .faq-page, .page-services-guide .service-mini-faq, .page-support .service-mini-faq) [data-faq-toggle]::after {
    content: "";
    position: absolute; inset: 9px 2px auto; height: 2px;
    background: #ff6e2e;
    transform-origin: center;
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}
html body :is(#page-home.home-scroll-page, .faq-page, .page-services-guide .service-mini-faq, .page-support .service-mini-faq) [data-faq-toggle]::after { transform: rotate(90deg); }
html body :is(#page-home.home-scroll-page, .faq-page, .page-services-guide .service-mini-faq, .page-support .service-mini-faq) .is-open [data-faq-toggle]::after { transform: rotate(0deg); }
html body .faq-page [data-faq-item] .faq-answer { height: auto; opacity: 1; transition: none; padding-left: 42px; }
    html body :is(#page-home.home-scroll-page, .faq-page) [data-faq-item]:hover { background-color: #f5f5f5; }
@media (max-width: 700px) {
    html body :is(#page-home.home-scroll-page, .faq-page) [data-faq-item] { padding-inline: 20px; }
    html body .faq-page [data-faq-item] summary { grid-template-columns: 22px minmax(0, 1fr) 20px; gap: 10px; }
    html body .faq-page [data-faq-item] .faq-answer { padding-left: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    html body :is(#page-home.home-scroll-page, .faq-page) [data-faq-item],
    html body :is(#page-home.home-scroll-page, .faq-page, .page-services-guide .service-mini-faq, .page-support .service-mini-faq) [data-faq-toggle]::after { transition: none; }
}

/* Dark FAQ rows retain readable light text on the charcoal hover surface. */
html body:not(.light-mode) :is(#page-home.home-scroll-page, .faq-page) [data-faq-item]:hover {
    background-color: #191919;
}

/* One rounded surface contains each question and its expanding answer. */
body {
    --faq-card-bg: #191919;
    --faq-card-hover: #141414;
    --faq-card-ink: #fcfcfc;
}
body.light-mode {
    --faq-card-bg: #f8f8f8;
    --faq-card-hover: #f1f1f1;
    --faq-card-ink: #0b0b0b;
}
/* Quote remains a standalone dark page, independent of the site theme. */
#page-quote {--faq-card-bg:#191919;--faq-card-hover:#141414;--faq-card-ink:#fcfcfc}
/* Older service/guide templates must not squeeze FAQ into a single grid track. */
.page-services-guide .service-seo-blocks:has(.service-mini-faq) {grid-column:1 / -1;min-width:0}
html body :is(#page-home, .faq-page, .service-mini-faq, #page-quote) :is([data-faq-item], .quote-faq-item) {
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 10px;
    margin: 0 0 12px;
    padding: 0 24px;
    background: var(--faq-card-bg) !important;
    box-shadow: none;
    overflow: hidden;
}
/* Keep the entrance timing while giving hover its own immediate color transition. */
html body :is(#page-home.home-scroll-page .home-faq, .faq-page, .service-mini-faq, #page-quote) :is([data-faq-item], .quote-faq-item) {
    transition-property: opacity, transform, background-color;
    transition-duration: .85s, 1s, .42s;
    transition-timing-function: ease, cubic-bezier(.22,1,.36,1), cubic-bezier(.25,.1,.25,1);
}
html body :is(#page-home, .faq-page, .service-mini-faq, #page-quote) :is([data-faq-item], .quote-faq-item):last-child {margin-bottom:0}
html body :is(#page-home, .faq-page, .service-mini-faq, #page-quote) :is([data-faq-item], .quote-faq-item):hover {
    background: var(--faq-card-hover) !important;
}
html body :is(#page-home, .faq-page, .service-mini-faq, #page-quote) :is([data-faq-item] > summary, .quote-faq-question) {
    display: grid;
    grid-template-columns: 26px minmax(0,1fr) 22px;
    align-items: center;
    gap: 16px;
    padding: 22px 0;
    margin: 0;
    background: transparent;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: anywhere;
    list-style: none;
}
html body :is(.service-mini-faq, #page-quote) :is(summary,.quote-faq-question)::before,
html body :is(.service-mini-faq, #page-quote) :is(summary,.quote-faq-question)::after,
html body #page-quote :is(.quote-faq-list::before,.quote-faq-item::after) {content:none}
html body :is(#page-home,.faq-page) [data-faq-item] > :is(.home-faq-answer,.faq-answer) {
    padding: 0 38px 24px 42px;
}
html body :is(#page-home,.faq-page) [data-faq-item] > :is(.home-faq-answer,.faq-answer) p {margin:0;padding:0}
html body .service-mini-faq [data-faq-item] > p {margin:0;padding:0 38px 24px 42px}
html body :is(.service-mini-faq,#page-quote) [data-faq-q] {color:#ff6e2e!important;-webkit-text-fill-color:#ff6e2e!important;font:inherit}
html body :is(.service-mini-faq,#page-quote) [data-faq-toggle] {position:relative;display:block;width:20px;height:20px}
html body :is(.service-mini-faq,#page-quote) [data-faq-toggle]::before,
html body :is(.service-mini-faq,#page-quote) [data-faq-toggle]::after {
    content:'';position:absolute;inset:9px 2px auto;height:2px;background:#ff6e2e;
    transform-origin:center;transition:transform .4s cubic-bezier(.22,1,.36,1);
}
html body :is(.service-mini-faq,#page-quote) [data-faq-toggle]::after {transform:rotate(90deg)}
html body :is(.service-mini-faq,#page-quote) .is-open [data-faq-toggle]::after {transform:rotate(0deg)}
html body #page-quote .quote-faq-question {color:var(--faq-card-ink)}
html body :is(#page-home, .faq-page, .service-mini-faq, #page-quote) :is([data-faq-item] > summary, .quote-faq-question) {
    color: var(--faq-card-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    transition: color .3s ease;
}
html body :is(#page-home, .faq-page, .service-mini-faq, #page-quote) :is([data-faq-item] > summary, .quote-faq-question) > span:not([data-faq-q]):not([data-faq-toggle]) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}
html body :is(#page-home, .faq-page, .service-mini-faq, #page-quote) .is-open > :is(summary, .quote-faq-question) {
    color: #ff6e2e !important;
}
/* Grid tracks accommodate any answer length, including narrow screens. */
html body #page-quote .quote-faq-answer {
    display:grid;grid-template-rows:0fr;max-height:none;padding:0 38px 0 42px;
    opacity:1;transform:none;transition:grid-template-rows .48s cubic-bezier(.22,1,.36,1),padding-bottom .48s cubic-bezier(.22,1,.36,1);
}
html body #page-quote .quote-faq-item.is-open .quote-faq-answer {grid-template-rows:1fr;max-height:none;padding-bottom:24px}
html body #page-quote .quote-faq-answer > p {min-height:0;overflow:hidden}
@media(max-width:700px) {
    html body :is(#page-home,.faq-page,.service-mini-faq,#page-quote) :is([data-faq-item],.quote-faq-item) {padding-inline:20px}
    html body :is(#page-home,.faq-page,.service-mini-faq,#page-quote) :is([data-faq-item] > summary,.quote-faq-question) {
        grid-template-columns:22px minmax(0,1fr) 20px;gap:10px;padding:18px 0;
    }
    html body :is(#page-home,.faq-page) [data-faq-item] > :is(.home-faq-answer,.faq-answer),
    html body .service-mini-faq [data-faq-item] > p {padding:0 0 20px 32px}
    html body #page-quote .quote-faq-answer {padding:0 0 0 32px}
    html body #page-quote .quote-faq-item.is-open .quote-faq-answer {padding-bottom:20px}
}
@media(prefers-reduced-motion:reduce) {
    html body :is(#page-home.home-scroll-page .home-faq,.faq-page,.service-mini-faq,#page-quote) :is([data-faq-item],.quote-faq-item),
    html body :is(#page-home,.faq-page,.service-mini-faq,#page-quote) :is([data-faq-item],.quote-faq-item,summary,.quote-faq-question),
    html body :is(.service-mini-faq,#page-quote) [data-faq-toggle]::after,
    html body #page-quote :is(.quote-faq-item,.quote-faq-answer) {transition:none}
}

/* Keep estimate links discoverable in every shared FAQ answer. */
:is(#page-home, .faq-page, .service-mini-faq) .faq-text-link {
  color: #ff6e2e;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
:is(#page-home, .faq-page, .service-mini-faq) .faq-text-link:focus-visible {
  outline: 2px solid #ff6e2e;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Individual FAQ entrances; header and card queues own the start order. */
html body :is(.faq-page, .page-services-guide .service-mini-faq) .faq-sequential-item {
    opacity: 0;
    transform: translateY(26px);
    animation: none;
    transition-property: opacity, transform, background-color;
    transition-duration: .75s, .85s, .42s;
    transition-timing-function: ease, cubic-bezier(.22,1,.36,1), cubic-bezier(.25,.1,.25,1);
    transition-delay: 0s;
}
html body :is(.faq-page, .page-services-guide .service-mini-faq) .faq-sequential-item.animate {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    html body :is(.faq-page, .page-services-guide .service-mini-faq) .faq-sequential-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}