/* =====================================================================
   SITE FAQ COMPONENT — the Home FAQ (heading with a grey tail, a supporting line,
   direct contacts, numbered questions with hairlines) on every page that loads it.
   Scoped by html.sfq, which assets/components/site-faq.js adds after mounting.
   ===================================================================== */
:root.sfq .faq { display: block !important; position: relative; isolation: isolate; }
/* frame: only the outer lines (inner lines clash with the content) */
:root.sfq .faq::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); z-index: -1; pointer-events: none;
  border-left: 1px solid rgba(17, 19, 31, .07); border-right: 1px solid rgba(17, 19, 31, .07); background-image: none !important; }
:root.sfq .faq__pin, :root.sfq .faq__list { background: transparent !important; }
:root.sfq .faq__pin { padding-left: calc(var(--pad-x) + clamp(24px, 3.4vw, 56px)) !important; padding-right: calc(var(--pad-x) + clamp(24px, 3.4vw, 56px)) !important; }

/* left side: copy on the page, no panel */
:root.sfq .faq__panel { background: none !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px 0 0 !important; min-height: 0 !important; justify-content: flex-start !important; gap: 36px !important; position: relative; overflow: visible !important; }
:root.sfq .faq__panel::before { content: none !important; }
:root.sfq .faq__panelTop { display: flex; flex-direction: column; gap: 22px; }
:root.sfq .faq .pill { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; display: inline-flex; align-items: center; gap: 8px; color: #6b7183 !important;
  font: 700 12.5px/1 "Geologica", sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase; align-self: flex-start; }
:root.sfq .faq .pill::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50% 50% 0 50%; background: #4a3dcc; }
:root.sfq .faq__title { color: #11131f !important; font-size: clamp(34px, 3.4vw, 52px) !important; line-height: 1.06 !important; letter-spacing: -.03em !important; }
/* heading voice: the tail is grey and sweeps to ink on hover */
:root.sfq .faq__title .hpg { display: inline; font-style: normal; font-weight: inherit; color: transparent !important;
  background: linear-gradient(90deg, #11131f 0 50%, #a3a8b5 50% 100%); background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; transition: background-position 1s cubic-bezier(.65, 0, .35, 1); }
:root.sfq .faq__title:hover .hpg, :root.sfq .faq__panel:hover .faq__title .hpg { background-position: 0 0; }
:root.sfq .faqx__lead { margin: 4px 0 0; max-width: 360px; font: 400 17px/1.55 Inter, sans-serif; color: #555a6b; }
:root.sfq .faqx__contact { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(17, 19, 31, .08); max-width: 360px; }
:root.sfq .faqx__contact li { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(17, 19, 31, .08); }
:root.sfq .faqx__contact small { font: 600 12px/1 "Geologica", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9aa0ae; }
:root.sfq .faqx__contact a { font: 600 16px/1.2 "Geologica", sans-serif; color: #11131f; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.65, 0, .35, 1), color .3s; }
:root.sfq .faqx__contact a:hover { color: #4a3dcc; background-size: 100% 1px; }
/* the button is the solid purple one here */
:root.sfq .faq__panel .btn.sbx, :root.sfq.sbx-on .faq__panel .btn.sbx.sbx--out { background-color: #4a3dcc !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px -8px rgba(74, 61, 204, .6) !important; }
:root.sfq .faq__panel .btn.sbx .sbx__ic { background: #fff !important; color: #4a3dcc !important; }

/* questions: numbered, outline toggles */
:root.sfq .faq__list { counter-reset: faqn; }
:root.sfq .faqItem { counter-increment: faqn; }
:root.sfq .faqItem__head { align-items: flex-start !important; }
:root.sfq .faqItem__q { display: flex; gap: 18px; align-items: baseline; }
:root.sfq .faqItem__q::before { content: counter(faqn, decimal-leading-zero); flex: none; width: 28px; font: 600 13px/1 "Geologica", sans-serif; letter-spacing: .04em; color: #9aa0ae; transform: translateY(-2px); transition: color .3s; }
:root.sfq .faqItem.is-open .faqItem__q::before, :root.sfq .faqItem__head:hover .faqItem__q::before { color: #4a3dcc; }
:root.sfq .faqItem__body { padding-left: 46px; }
:root.sfq .faqItem__toggle { background: transparent !important; color: #11131f !important; box-shadow: inset 0 0 0 1px #d9dbe5 !important; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, color .3s !important; }
:root.sfq .faqItem__head:hover .faqItem__toggle, :root.sfq .faqItem.is-open .faqItem__toggle { box-shadow: inset 0 0 0 1px #4a3dcc !important; color: #4a3dcc !important; }

@media (max-width: 900px) {
  :root.sfq .faq__pin { padding-left: calc(var(--pad-x) + 16px) !important; padding-right: calc(var(--pad-x) + 16px) !important; }
  :root.sfq .faqItem__body { padding-left: 0; }
  :root.sfq .faq__panel { padding-top: 0 !important; }
}

/* two office lines, stacked on the right of the phone row */
.faqx__phones { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.faqx__addr { text-align: right; max-width: 240px; line-height: 1.45; }