/* =========================================================================
   FAQ (/faq), 2026-09-30, from option A "Search the counter". The Contact
   page's kit: cream page, a white card for the answers, the ink counter
   beside it, Oswald controls, square ink buttons. Page-local, fq- prefix,
   no Tailwind utilities, so no css:build. 1rem = 10px.
   ========================================================================= */
.fq { --fq-on-ink: #FDFCF7;
    --fq-on-ink-2: rgba(253, 252, 247, .74);
    --fq-on-ink-3: rgba(253, 252, 247, .56);
    --fq-rule-ink: rgba(253, 252, 247, .16);
    padding: 5.6rem 0 10.4rem;
    background: var(--vh-cream);
    color: var(--vh-ink);
    font-family: var(--vh-body); }
.fq *, .fq *::before, .fq *::after { box-sizing: border-box; }
/* The site scrolls smoothly, but a smooth jump to /faq#digitizing aims at
   where the answer was before the fonts settle and ends up under the header.
   An instant jump lets the browser keep the answer in place as they load. */
html:has(.fq) { scroll-behavior: auto; }
.fq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38rem); gap: 4.8rem; align-items: start; max-width: 128rem; margin: 0 auto; padding: 0 3.2rem; }
.fq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fq a:focus-visible, .fq button:focus-visible, .fq summary:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 3px; }
.fq-side a:focus-visible { outline-color: var(--fq-on-ink); }

/* -- heading + search: the search box is the page's one big thing --------- */
.fq-h1 { margin: 0; font-family: var(--vh-display); font-weight: 600; font-size: 4.8rem; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.fq-lede { margin: 1.4rem 0 0; max-width: 64ch; font-size: 1.65rem; line-height: 1.55; color: var(--vh-muted); }
.fq-lede a, .fq-a__text a { color: var(--vh-ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

.fq-search { position: relative; margin-top: 3.2rem; }
.fq-search__icon { position: absolute; top: 50%; left: 1.8rem; width: 2.2rem; height: 2.2rem; transform: translateY(-50%); color: var(--vh-ink); pointer-events: none; }
.fq-search__in { display: block; width: 100%; min-height: 6.4rem; margin: 0; padding: 0 5.6rem 0 5.4rem; background: #FFFFFF; border: 1.5px solid var(--vh-ink); border-radius: 3px; font-family: var(--vh-body); font-size: 1.8rem; color: var(--vh-ink); -webkit-appearance: none; appearance: none; }
.fq-search__in::placeholder { color: var(--vh-text-faint); opacity: 1; }
.fq-search__in:focus { outline: none; box-shadow: 0 0 0 2px var(--vh-ink); }
.fq-search__in::-webkit-search-cancel-button { -webkit-appearance: none; }
.fq-search__clear { position: absolute; top: 50%; right: .8rem; display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; padding: 0; transform: translateY(-50%); background: transparent; border: 0; color: var(--vh-muted); cursor: pointer; }
.fq-search__clear svg { width: 1.8rem; height: 1.8rem; }
.fq-search__clear:hover { color: var(--vh-ink); }
.fq-search__clear[hidden] { display: none; }

.fq-chips { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.fq-chip { min-height: 4.2rem; padding: .6rem 1.4rem; background: #FFFFFF; border: 1.5px solid var(--vh-line-strong); border-radius: 3px; font-family: var(--vh-display); font-weight: 500; font-size: 1.3rem; line-height: 1.15; letter-spacing: .07em; text-transform: uppercase; color: var(--vh-ink); white-space: nowrap; cursor: pointer; transition: border-color .15s ease; }
.fq-chip:hover { border-color: var(--vh-ink); }
.fq-chip.is-on { border-color: var(--vh-ink); box-shadow: inset 0 0 0 1px var(--vh-ink); font-weight: 600; }
.fq-count { min-height: 2.2rem; margin: 1.4rem 0 0; font-size: 1.4rem; color: var(--vh-text-faint); }

/* -- the answers: one white card, topics as quiet labels ------------------ */
.fq-list { margin-top: .6rem; padding: .8rem 3.2rem 1.6rem; background: var(--vh-white); border: 1px solid var(--vh-line); border-radius: 6px; box-shadow: 0 1px 0 rgba(24, 21, 16, .03), 0 18px 40px -30px rgba(24, 21, 16, .3); }
.fq-topic[hidden], .fq-item[hidden] { display: none; }
.fq-topic__t { margin: 0; padding: 2.8rem 0 .6rem; font-family: var(--vh-display); font-weight: 500; font-size: 1.2rem; letter-spacing: .22em; text-transform: uppercase; color: var(--vh-muted); }
.fq-item { border-bottom: 1px solid var(--vh-line); }
/* /faq#digitizing lands the answer below the fixed header, not under it */
.fq-item, .fq-topic { scroll-margin-top: calc(var(--nav-height, 8rem) + 2.4rem); }
.fq-item.is-last { border-bottom: 0; }
.fq-q { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 6rem; padding: 1.4rem 0; list-style: none; cursor: pointer; font-family: var(--vh-display); font-weight: 500; font-size: 1.8rem; line-height: 1.25; letter-spacing: .015em; text-transform: uppercase; color: var(--vh-ink); }
.fq-q::-webkit-details-marker { display: none; }
.fq-q:hover > span:first-child { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.fq-pm { position: relative; flex: none; width: 1.6rem; height: 1.6rem; }
.fq-pm::before, .fq-pm::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .2s ease; }
.fq-pm::after { transform: rotate(90deg); }
.fq-item[open] .fq-pm::after { transform: rotate(0deg); }
.fq-a { padding: 0 4.8rem 2.4rem 0; }
.fq-a__text { max-width: 66ch; font-size: 1.6rem; line-height: 1.7; color: #2C271F; text-wrap: pretty; }
.fq-link { display: inline-flex; align-items: center; min-height: 3.2rem; margin-top: .8rem; padding: 0; background: none; border: 0; font-family: var(--vh-body); font-size: 1.35rem; color: var(--vh-text-faint); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; cursor: pointer; }
.fq-link:hover { color: var(--vh-ink); text-decoration-color: currentColor; }
.fq-link.is-done { color: var(--vh-ok); }
.fq-link[hidden] { display: none; }
mark.fq-hit { padding: 0 .1em; background: rgba(182, 171, 143, .5); border-radius: 2px; color: inherit; }

/* the price list inside "How much does it cost?" */
/* one grid for all the rows (the rows are display: contents), so the
   "from"s and the prices line up down the list */
.fq-prices { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto auto; align-items: baseline; gap: .3rem .8rem; max-width: 40rem; margin: 1.2rem 0 1.4rem; }
.fq-price { display: contents; }
.fq-price__nm { color: var(--vh-ink); }
.fq-price__dots { border-bottom: 1px dotted var(--vh-line-strong); transform: translateY(-.35em); }
.fq-price__fr { font-size: 1.35rem; color: var(--vh-text-faint); }
.fq-price b { font-family: var(--vh-display); font-weight: 600; font-size: 1.7rem; letter-spacing: .02em; color: var(--vh-ink); text-align: right; }

.fq-none { padding: 4rem 0 2.4rem; }
.fq-none[hidden] { display: none; }
.fq-none__t { margin: 0; font-family: var(--vh-display); font-weight: 600; font-size: 2.4rem; text-transform: uppercase; }
.fq-none__p { margin: .8rem 0 2.4rem; font-size: 1.6rem; color: var(--vh-muted); }

.fq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; min-height: 5.6rem; padding: 0 3rem; background: var(--vh-ink); border: 1.5px solid var(--vh-ink); border-radius: 0; font-family: var(--vh-display); font-weight: 600; font-size: 1.5rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--fq-on-ink); }
.fq-btn svg { width: 1.6rem; height: 1.6rem; transition: transform .2s ease; }
.fq-btn:hover svg { transform: translateX(3px); }
.fq-btn--inv { background: var(--fq-on-ink); border-color: var(--fq-on-ink); color: var(--vh-ink); }

/* -- the ink counter ------------------------------------------------------- */
.fq-side { padding: 3.6rem 3.2rem 3.2rem; background: var(--vh-ink); border-radius: 6px; color: var(--fq-on-ink); }
/* it follows you down the answers only where all of it fits on screen, so
   the button at its foot is never cut off on a laptop */
@media (min-width: 901px) and (min-height: 920px) {
    .fq-side { position: sticky; top: calc(var(--nav-height, 8rem) + 2.4rem); }
}
.fq-eb { margin: 0; font-family: var(--vh-display); font-weight: 500; font-size: 1.2rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fq-on-ink-3); }
.fq-facts { margin: 1.6rem 0 0; border-top: 1px solid var(--fq-rule-ink); }
.fq-facts > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: 1.6rem; align-items: baseline; padding: 1.3rem 0; border-bottom: 1px solid var(--fq-rule-ink); }
.fq-facts dt { font-family: var(--vh-display); font-weight: 600; font-size: 1.9rem; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--fq-on-ink); }
.fq-facts dd { margin: 0; font-size: 1.4rem; line-height: 1.45; color: var(--fq-on-ink-2); }
.fq-ask { margin-top: 3.2rem; }
.fq-ask__t { margin: 0; font-family: var(--vh-display); font-weight: 600; font-size: 2.2rem; text-transform: uppercase; }
.fq-ask__p { margin: .8rem 0 2rem; font-size: 1.45rem; line-height: 1.55; color: var(--fq-on-ink-2); }
.fq-ask .fq-btn { width: 100%; }

/* -- responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .fq-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: 3.2rem; }
}
@media (max-width: 900px) {
    .fq { padding-top: 4rem; }
    .fq-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .fq { padding: 3.2rem 0 3.2rem; }
    .fq-wrap { gap: 3.2rem; padding: 0 2rem; }
    .fq-h1 { font-size: 3.6rem; }
    .fq-lede { font-size: 1.6rem; }
    .fq-search__in { min-height: 5.6rem; font-size: 1.7rem; }
    /* the chips stay on one line and scroll sideways */
    .fq-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -2rem; padding-right: 2rem; scrollbar-width: none; }
    .fq-chips::-webkit-scrollbar { display: none; }
    .fq-list { margin-left: -2rem; margin-right: -2rem; padding: .4rem 2rem 1.2rem; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
    .fq-q { font-size: 1.65rem; min-height: 5.6rem; }
    .fq-a { padding-right: 0; }
    .fq-side { padding: 3.2rem 2.4rem 2.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fq *, .fq *::before, .fq *::after { transition: none !important; }
}