/* FAQ SECTION (t1890u; a normal section of the home page since t1894, after Meet the Team). Every selector is scoped under #faq; nothing here can reach the rest of the page, the nav or the menu.
   t1894: the separate-view rules (#faq[hidden], the "Back to home" link) were removed; the section is visible in the continuous scroll. The look is otherwise unchanged.
   References (layout and style judgement only; no photo, brand or copy taken): Superpower for the accordion (plain rows, hairline dividers, a quiet plus that turns into an accent minus,
   generous row height, minimal type); Face Formula and David for the split (an image column beside the questions).
   Identity: Geist (var(--font)), the site's ink #0A0A0A, the site's Phase 1 blue #406DE5 as the one accent (open state and focus ring). Light surface #F7F7F7 under a black band that
   carries the fixed nav, so the transparent nav at the top always sits on black and the page reads as a clean light sheet after the dark hero.
   Type scale and rhythm (8px base): answer 16px / 1.6 (the reading size) -> question 19px / 1.35 weight 500 (about 1.2x, enough to lead without shouting) -> title 44px / 1.08 weight 500,
   tracking -0.02em (2.75x, deliberately below the hero's 55px so the FAQ is a secondary page). Rows are at least 72px tall (24px padding), the title sits 40px above the list,
   answers are capped at 62ch and indented 0 so they align with the question text. Phones: 17px questions, 15.5px answers, 30-36px title, 64px rows.
   t1896u (Tavio: the questions and answers appear too small): questions 19px -> 23px desktop and 17px -> 19px at 899px and below; answers 16px -> 18px desktop and 15.5px -> 17px at 899px and below.
   Line-heights (1.35 questions, 1.6 answers), the row padding (24px / 20px), the 72px / 64px minimum row heights, the 24px / 16px icon gaps and the answer padding are unchanged: at the new sizes a one-line
   question is 31px / 26px of text inside the padding (79px / 66px rows, above the minimums), so nothing is cramped; the open answers have no height or max-height, the grid row simply grows with the text.
   The heading is unchanged in size (44px desktop / 30-36px narrow, already larger than the questions); its text is "Frequently Asked Questions" in the markup, with no text-transform. */

#faq { --fq-surface: #F7F7F7; --fq-ink: #0A0A0A; --fq-text: #4B4E53; --fq-mute: #6B6E73; --fq-line: rgba(10, 10, 10, .12); --fq-accent: #406DE5; --fq-band: 104px;
  display: block; min-height: 100vh; min-height: 100svh; background: #000; color: var(--fq-ink); font-family: var(--font); }
#faq .faq-band { height: var(--fq-band); background: #000; }
#faq .faq-surface { min-height: calc(100svh - var(--fq-band)); padding: clamp(56px, 7vw, 104px) var(--gutter) clamp(72px, 9vw, 128px); background: var(--fq-surface); }
#faq .faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 72px); align-items: start; max-width: 1352px; margin: 0 auto; }

/* Image column: square corners like the site's controls; sticky so it stays beside the questions while answers open; black behind it, the same black as the hero. */
#faq .faq-media { position: sticky; top: 120px; margin: 0; aspect-ratio: 4 / 5; max-height: calc(100svh - 168px); overflow: hidden; background: #000; }
#faq .faq-still { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; }
#faq .faq-ph { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; border: 1px dashed rgba(10, 10, 10, .28); background: #ECECEC;
  color: var(--fq-mute); font-size: 13px; font-weight: 500; letter-spacing: .02em; }
#faq .faq-media.is-missing { background: #ECECEC; }
#faq .faq-media.is-missing .faq-still { display: none; }
#faq .faq-media.is-missing .faq-ph { display: flex; }

/* Text column */
#faq .faq-title { margin: 0 0 40px; color: var(--fq-ink); font-size: clamp(32px, 3.05vw, 44px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; }
#faq .faq-title:focus { outline: none; }   /* programmatic focus target (tabindex -1; announced, no ring) */

/* Accordion: hairline above the first row and below every row; the whole row is the button. */
#faq .faq-list { border-top: 1px solid var(--fq-line); }
#faq .faq-item { border-bottom: 1px solid var(--fq-line); }
#faq .faq-h { margin: 0; font: inherit; }
#faq .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 72px; margin: 0; padding: 24px 0; border: 0; border-radius: 0;
  background: none; color: var(--fq-ink); font: 500 23px/1.35 var(--font); letter-spacing: -0.005em; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
#faq .faq-qt { min-width: 0; }
#faq .faq-ic { position: relative; flex: none; width: 16px; height: 16px; color: var(--fq-ink); transition: color .2s; }
#faq .faq-ic::before, #faq .faq-ic::after { content: ""; position: absolute; left: 0; top: 7.25px; width: 16px; height: 1.5px; background: currentColor;
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1), opacity 220ms cubic-bezier(.22, .61, .36, 1); }
#faq .faq-ic::after { transform: rotate(90deg); }
#faq .faq-q:hover .faq-ic { color: var(--fq-accent); }
#faq .faq-item.is-open .faq-ic { color: var(--fq-accent); }
#faq .faq-item.is-open .faq-ic::after { transform: rotate(0deg); opacity: 0; }   /* plus -> minus */

/* Answer panel: a subtle height reveal (grid rows 0fr -> 1fr). Closed panels are visibility:hidden, so they are out of the accessibility tree and the tab order. */
#faq .faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 240ms cubic-bezier(.22, .61, .36, 1), visibility 0s linear 240ms; }
#faq .faq-item.is-open .faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 240ms cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s; }
#faq .faq-a-in { min-height: 0; overflow: hidden; }
#faq .faq-slot { max-width: 62ch; padding: 0 40px 16px 0; color: var(--fq-text); font-size: 18px; font-weight: 400; line-height: 1.6; }
#faq .faq-slot p { margin: 0 0 12px; }
#faq .faq-slot p:last-child { margin-bottom: 0; }

/* Focus: the page-wide ring is white (built for the dark hero), so the FAQ uses the accent blue, clearly visible on the light surface. */
#faq :focus-visible { outline: 2px solid var(--fq-accent); outline-offset: 4px; }
#faq .faq-q:focus-visible { outline-offset: 2px; }

/* Phones and narrow windows: one column, questions first, a modest image band after the list. */
@media (max-width: 899.98px) {
  #faq { --fq-band: 88px; }
  #faq .faq-surface { padding: 40px var(--s-gutter) 72px; }
  #faq .faq-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  #faq .faq-media { position: relative; top: auto; order: 2; aspect-ratio: 16 / 9; max-height: 240px; }
  #faq .faq-still { object-fit: contain; object-position: 50% 50%; }
  #faq .faq-title { margin: 0 0 28px; font-size: clamp(30px, 8vw, 36px); }
  #faq .faq-q { gap: 16px; min-height: 64px; padding: 20px 0; font-size: 19px; }
  #faq .faq-slot { padding: 0 0 16px; font-size: 17px; }
}

/* Reduced motion: the panels and the icon switch instantly. */
@media (prefers-reduced-motion: reduce) {
  #faq .faq-a, #faq .faq-item.is-open .faq-a, #faq .faq-ic, #faq .faq-ic::before, #faq .faq-ic::after { transition: none; }
}