/* Section 10, FAQ: "Ask box" (confirmed 11 Oct). Same pattern as the service pages: a small heading, then
   three numbered themes of three questions each, as native <details> (every answer is in the HTML, open or
   closed), with an ask box that filters them. Hover rule: the hit area (summary / details) never moves;
   only what is inside it does, so hovers cannot flicker. */
@font-face { font-family: "IBM Plex Mono"; src: url(brandfonts/IBMPlexMono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
.fq { --px: clamp(24px, 7vw, 120px); position: relative; isolation: isolate; overflow-x: clip; background: var(--bg); color: var(--ink); padding: clamp(100px, 14vh, 160px) var(--px) clamp(90px, 12vh, 130px); }
.fq[data-tone="dark"] { --bg: #17110E; --ink: #F1E9DE; --muted: #B3A392; --accent: #CDA85F; --accent-text: #CDA85F; --rule: rgba(205,168,95,.22); --line: rgba(241,233,222,.12); --panel: #201915; --panel2: #2A211B; --grid: rgba(205,168,95,.07); }
.fq[data-tone="light"] { --bg: #FAFAF8; --ink: #17110E; --muted: #5F5A55; --accent: #A9853D; --accent-text: #7A5A16; --rule: rgba(23,17,14,.14); --line: rgba(23,17,14,.1); --panel: #FFFFFF; --panel2: #F3EFE8; --grid: rgba(23,17,14,.055); }
.fq::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%); }
.fq-wrap { max-width: 1400px; margin: 0 auto; }
.fq-h { margin: 0 0 clamp(30px, 5vh, 52px); font: 700 clamp(1.2rem, 2vw, 1.6rem)/1.2 var(--serif); color: var(--muted); letter-spacing: -0.01em; }
.fq-t { min-width: 0; }
.fq-th { position: relative; display: flex; align-items: baseline; gap: 12px; padding-top: 16px; }
.fq-th::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) calc(var(--i, 0) * .12s); }
.fq.in .fq-th::before, .fq.rm .fq-th::before { transform: scaleX(1); }
.fq-n { font: 600 .82rem/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--accent-text); }
.fq-th h3 { margin: 0; font: 700 1.1rem/1.25 var(--serif); letter-spacing: -0.015em; }
.fq-th p { margin: 3px 0 0; font-size: .82rem; color: var(--muted); }
.fq-qs { margin-top: 14px; }
.fq-q { border-bottom: 1px solid var(--line); }
.fq-q summary { list-style: none; display: flex; align-items: flex-start; gap: 12px; padding: 15px 0; cursor: pointer; }
.fq-q summary::-webkit-details-marker { display: none; }
.fq-q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.fq-q h4 { flex: 1; margin: 0; font: 700 1.02rem/1.38 var(--serif); letter-spacing: -0.01em; transition: transform .35s var(--ease), color .3s; }
.fq-k { display: none; }
.fq-m { position: relative; flex: none; width: 14px; height: 14px; margin-top: .3em; transition: transform .4s var(--ease); }
.fq-m::before, .fq-m::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--accent); }
.fq-m::after { transform: rotate(90deg); transition: transform .4s var(--ease); }
.fq-q[open]:not(.closing) .fq-m { transform: rotate(180deg); } .fq-q[open]:not(.closing) .fq-m::after { transform: rotate(0deg); }
.fq-a { overflow: hidden; }
.fq-a p { margin: 0; padding: 0 26px 18px 0; font-size: .97rem; line-height: 1.65; color: var(--ink); opacity: .86; }
.fq-q[open]:not(.closing) h4 { color: var(--accent-text); }
@media (hover: hover) { .fq-q summary:hover h4 { color: var(--accent-text); transform: translateX(4px); } }
.fq-foot { margin: clamp(32px, 5vh, 48px) 0 0; color: var(--muted); }
.fq-foot a { color: var(--accent-text); font-weight: 600; text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1px no-repeat; transition: background-size .4s var(--ease); padding-bottom: 2px; }
@media (hover: hover) { .fq-foot a:hover { background-size: 100% 2px; } }
/* items rise in: the details is still; its contents move */
.fq-q > * { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fq-q > summary { opacity: 0; transform: translateY(14px); transition-delay: calc(var(--i, 0) * .12s + var(--j, 0) * .07s + .2s); }
.fq.in .fq-q > summary { opacity: 1; transform: none; }

/* ---------- three themed columns ---------- */
.fq-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 56px); align-items: start; }

/* ---------- k6 Ask box: type and the questions filter, matches light up ---------- */
.fq-ask { position: relative; display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 0 clamp(34px, 6vh, 56px); padding: 6px 8px 6px 20px; border: 1px solid var(--rule); border-radius: 99px; background: var(--panel); transition: border-color .3s, box-shadow .3s; }
.fq-ask:focus-within { border-color: #CDA85F; box-shadow: 0 0 0 4px rgba(205,168,95,.15); }
.fq-ask svg { flex: none; width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 2; }
.fq-ask input { flex: 1; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: none; color: var(--ink); font: 400 1.02rem/1.2 var(--sans); }
.fq-ask input::placeholder { color: var(--muted); }
.fq-ask output { flex: none; padding: 8px 14px; border-radius: 99px; background: var(--panel2); color: var(--muted); font: 600 .78rem/1 var(--sans); white-space: nowrap; }
.fq .fq-q mark { background: rgba(205,168,95,.32); color: inherit; border-radius: 3px; padding: 0 2px; }
.fq .fq-q.out { display: none; }
.fq .fq-t.empty .fq-th { opacity: .35; }
.fq .fq-t.empty .fq-qs::after { content: "No match in this theme"; display: block; padding: 15px 0; color: var(--muted); font-size: .9rem; }
.fq-none { display: none; margin: 0 0 24px; color: var(--muted); }
.fq-none.on { display: block; }

.fq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 860px) { .fq-themes { grid-template-columns: 1fr; } .fq-ask output { display: none; } }
@media (prefers-reduced-motion: reduce) { .fq *, .fq *::before, .fq *::after { animation: none !important; transition: none !important; } .fq .fq-q > summary { opacity: 1 !important; transform: none !important; } }

@media (pointer: coarse) { .fq-foot a { display: inline-block; padding: 10px 0; margin: -10px 0; } }   /* finger-sized (11 Oct) */