/* The Fair questions page (/faq). Loaded by faq.html only, on top of the shared shell and the
 * editorial layout. Questions are native <details> elements, so every answer opens and closes
 * without a script, and a link to /faq#faq-cost can open its answer (assets/faq.js).
 * Colours come from the shell tokens, so light and dark follow the rest of the site. */
.faq-page .faq-lead{max-width:68ch}
.faq-jump{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 8px}
.faq-jump a{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font:600 .88rem var(--body);text-decoration:none;color:var(--ink);background:var(--surface);transition:border-color .2s,color .2s}
.faq-jump a:hover{border-color:var(--signal);color:var(--signal-text)}
.faq-group{margin:0 0 46px;scroll-margin-top:110px}
.faq-page .faq-group h2{font-size:clamp(1.5rem,2.3vw,2rem);margin:0 0 12px}
.fq{border-top:1px solid var(--line);scroll-margin-top:110px}
.fq:last-of-type{border-bottom:1px solid var(--line)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4px;min-height:48px;font:400 clamp(1.1rem,1.6vw,1.3rem)/1.3 var(--display);color:var(--ink)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--signal-text);border-bottom:2px solid var(--signal-text);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s}
.fq[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.fq summary:hover{color:var(--signal-text)}
.fq-a{padding:0 4px 18px}
.faq-page .fq-a p{max-width:70ch;color:var(--ink-soft);font-size:1.02rem;margin:0 0 14px}
.fq-steps{margin:0 0 14px;padding-left:1.3em;max-width:70ch;color:var(--ink-soft);font-size:1.02rem;display:grid;gap:6px}
.faq-page .fq-a .fq-proof{font-weight:600;font-size:.94rem}
.fq-a .fq-proof a{color:var(--signal-text);text-underline-offset:3px}
.faq-ask{margin:50px 0 10px;padding:26px 28px;border-radius:18px;background:var(--surface-sunk);border:1px solid var(--line);display:grid;gap:12px;max-width:760px}
.faq-page .faq-ask h2{font-size:1.6rem;margin:0}
.faq-page .faq-ask p{margin:0}
.faq-ask .direct{display:flex;flex-wrap:wrap;gap:8px 28px;font-weight:600}
.faq-ask .btn{justify-self:start}
@media (prefers-reduced-motion:reduce){.fq summary::after,.faq-jump a{transition:none}}
@media (max-width:560px){.faq-ask{padding:22px 18px}.faq-jump a{padding:8px 13px}}

/* 8 October 2026 ideas review. Each chip shows its question count, a link under the chips jumps
   to the ask card and one at the end of each topic jumps back, a long answer opens with a bold
   short answer, every answer can be linked to, the answer a link pointed at is outlined, the
   "Is it right" topic ends with a booking prompt, and the ask card labels its phone and email.
   On a phone the chips sit in one row that scrolls sideways (assets/faq.js lifts the fade at the end). */
.faq-jump{scroll-margin-top:110px}
.faq-count{margin-left:4px;color:var(--ink-soft);font-weight:500}
.faq-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.faq-more{display:block;width:fit-content;max-width:100%;margin-top:10px;color:var(--signal-text);font-size:.94rem;font-weight:600;text-underline-offset:4px}
.faq-group > .faq-more{margin-top:14px}
.faq-page .fq-a .fq-short{color:var(--ink);font-weight:600;border-left:3px solid var(--signal);padding-left:14px}
.faq-page .fq-a .fq-share{margin:0;font-size:.86rem}
.fq-share a{color:var(--ink-soft);text-underline-offset:3px}
.fq:target{border:1px solid var(--signal);border-radius:14px;padding-inline:16px;background:color-mix(in srgb,var(--signal) 8%,transparent)}
/* glass.js turns every answer into a glass card, whose border and fill outrank the rule above. */
.faq-page .fq.bp-glass.bp-glass:target{padding-inline:0;border-radius:24px;border-color:var(--signal);background:color-mix(in srgb,var(--signal) 12%,var(--glass));box-shadow:inset 0 0 0 1px var(--signal),var(--glass-shadow)}
.faq-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.faq-page .faq-cta p{margin:0;font-family:var(--display);font-size:1.15rem;color:var(--ink)}
.faq-ask .direct small{display:block;font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.faq-ask .direct a{overflow-wrap:anywhere}
@media (max-width:640px){
  .faq-jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;contain:paint;padding:6px 6px 8px;margin:22px -6px 0;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .faq-jump::-webkit-scrollbar{display:none}
  .faq-jump.is-end,.faq-jump:focus-within{-webkit-mask-image:none;mask-image:none}
  .faq-jump a{flex:none;white-space:nowrap}
}

/* Tap targets on phones and touch tablets (9 October 2026): the topic chips, "Back to the topics", "Ask me directly" and the phone and email in the closing box get a 44px tall tap area. */
@media (max-width:640px), (pointer:coarse) and (max-width:1024px){
  .faq-jump a{display:inline-flex;align-items:center;gap:.25em;min-height:44px}
  .faq-more{box-sizing:border-box;min-height:44px;padding-block:10px;margin-top:0}
  .faq-group > .faq-more{margin-top:4px}
  .faq-ask .direct a{display:inline-flex;align-items:center;min-height:44px}
  /* final audit pass: "Link to this answer" (18px) and the links that close an answer (19px) */
  .fq-a .fq-share a,.fq-a .fq-proof a{display:inline-flex;align-items:center;min-height:44px}
}

/* 11 October 2026, motion pick B43: the topic chips stay stuck just under the header for the whole
   page, so another topic is always one tap away. They sit straight after the opening section rather
   than inside it (a sticky row only sticks inside its own parent), so the space under the opening
   moves to the "Ask me directly" link below them. Once they are stuck, assets/faq.js adds .is-stuck,
   which gives them a frosted bar to sit on; assets/motion/work.js adds the ring that follows the
   topic being read. Jumping to a topic or an answer leaves room for the row as well as the header. */
.faq-page .service-hero{padding-bottom:0}
.faq-page > .faq-more{margin-bottom:40px}
.faq-page > .faq-jump{position:sticky;top:calc(var(--site-header-height,82px) + 6px);z-index:20;border:1px solid transparent;transition:background-color .25s,border-color .25s,box-shadow .25s}
.faq-page > .faq-jump.is-stuck{background:color-mix(in oklch,var(--surface) 84%,transparent);border-color:var(--line);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.faq-page .faq-group,.faq-page .fq{scroll-margin-top:var(--faq-row-room,64px)}
@media (min-width:641px){
  .faq-page > .faq-jump{width:fit-content;max-width:calc(100% + 18px);box-sizing:border-box;padding:8px;margin-inline:-9px;border-radius:22px}
}
@media (max-width:800px){.faq-page > .faq-more{margin-bottom:34px}}
@media (max-width:640px){.faq-page > .faq-jump.is-stuck{border-radius:16px}}
@media (prefers-reduced-motion:reduce){.faq-page > .faq-jump{transition:none}}