/* ==========================================================================
   FAQ: "Clear answers" (after unfixedstudio.framer.website)
   The giant title with a short line on the right, a rule, FAQ | Your
   question, then the questions on the right and "Can't spot your query?"
   with Contact on the left, held on screen while the list scrolls by.
   A row is a question, a hairline and an ink square with a +. The copy and
   the order come from tools/faq/build.py (edit them there).
   The motion, in order:
   - In view (faq.js): the title's lines rise, the rule draws across, the
     line and labels follow; each row rises as it arrives and its hairline
     draws.
   - Hover: the question slides in a touch and the + turns a quarter (which
     lands it back on a +).
   - Open (one at a time): the row fills with ink and grows a margin, the
     question dips out and comes back white, the square turns into a bone
     x, and the answer unfolds under it. Closing runs it back.
   - More questions: the other groups show, playing in as they arrive;
     Fewer questions fades them and folds them away again. While they show,
     a second Fewer questions waits under Contact (wide screens), and on
     phones the row pins to the foot of the screen.
   ========================================================================== */

.faq {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 7vh, 88px) var(--gutter) clamp(96px, 16vh, 180px);
  background: var(--bone);
}

/* Paper grain, as on the rest of the page. */
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/textures/grain.webp") repeat;
  background-size: 160px 160px;
  opacity: 0.55;
  pointer-events: none;
}

.faq > * {
  position: relative;
}

/* ------------------------------------------------------------------ head */

.faq__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px clamp(32px, 4vw, 80px);
}

.faq__title {
  font-size: clamp(3.25rem, 8.6vw, 11.5rem);
  font-stretch: var(--wdth-display);
  font-weight: 500;
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-synthesis: none;
}

/* One mask per line (they rise in). The padding keeps the caps' edges. */
.faq__line {
  display: block;
  overflow: clip;
  padding: 0.06em 0.02em 0.02em;
  margin: -0.06em -0.02em -0.02em;
}

.faq__line > span,
.faq__ask-line > span {
  display: inline-block;
}

.faq__blurb {
  max-width: 38ch;
  padding-bottom: 0.35em;
  font-size: clamp(0.8125rem, 0.74rem + 0.22vw, 1rem);
  font-weight: 450;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
}

.faq__rule {
  height: 1px;
  margin-top: clamp(18px, 2vw, 32px);
  background: rgb(17 17 17 / 0.8);
  transform-origin: 0 50%;
}

.faq__top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(14px, 1.4vw, 22px);
  font-size: clamp(0.6875rem, 0.62rem + 0.18vw, 0.8125rem);
}

/* ------------------------------------------------------------------ body */

/* The questions take the right half; "Can't spot your query?" sits in the
   left, and is held under the header while a long list scrolls by. */
.faq__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 80px);
  margin-top: clamp(40px, 7vh, 88px);
}

.faq__lists {
  grid-column: 2;
  grid-row: 1;
}

.faq__aside {
  position: sticky;
  top: calc(var(--header-compact) + clamp(24px, 4vh, 48px));
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.faq__ask {
  font-size: clamp(2rem, 3.3vw, 4.25rem);
  font-weight: 450;
  line-height: 0.96;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.faq__ask-line {
  display: block;
  overflow: clip;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

/* Contact: underlined, with an ink square holding the arrow. It goes to the
   contact page. Hover runs the line out and back in, and the
   arrow turns down into the page, like "Work with us". */
.faq__contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 1.8vw, 28px);
  padding: 4px 0 5px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}

.faq__contact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
}

.faq__contact-box {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  color: var(--bone);
  background: var(--ink);
}

.faq__contact-box svg {
  width: 10px;
  height: 10px;
  transition: rotate 420ms var(--ease-out);
}

@keyframes faq-redraw {
  0% {
    transform-origin: 100% 50%;
    scale: 1 1;
  }
  45% {
    transform-origin: 100% 50%;
    scale: 0 1;
  }
  55% {
    transform-origin: 0 50%;
    scale: 0 1;
  }
  100% {
    transform-origin: 0 50%;
    scale: 1 1;
  }
}

/* ------------------------------------------------------------------ rows */

.faq__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq__h {
  margin: 0;
  font: inherit;
}

.faq__item {
  position: relative;
  border-radius: 4px;
  transition:
    background-color 360ms ease,
    padding 560ms var(--ease-drawer);
}

/* The hairline under a row (its own layer, so it can draw in). */
.faq__item::after,
.faq__more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgb(17 17 17 / 0.22);
  transform-origin: 0 50%;
  transition: opacity 300ms ease;
}

.faq__q,
.faq__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: clamp(54px, 3.2vw, 64px);
  padding: 12px 0;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.faq__q-text,
.faq__more-text {
  font-size: clamp(1rem, 0.94rem + 0.14vw, 1.125rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  color: var(--ink);
  /* The colour swaps while the question has dipped out (.is-flip). */
  transition:
    translate 500ms var(--ease-out),
    color 0ms linear 170ms;
}

/* The ink square and its +. Open, it turns into a bone square with an x. */
.faq__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--bone);
  background: var(--ink);
  transition:
    rotate 520ms var(--ease-out),
    scale 220ms var(--ease-out),
    background-color 300ms ease,
    color 300ms ease;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  margin: -0.75px 0 0 -5px;
  border-radius: 1px;
  background: currentColor;
  transition: rotate 520ms var(--ease-out);
}

.faq__icon::after {
  rotate: 90deg;
}

.faq__q:active .faq__icon,
.faq__more:active .faq__icon {
  scale: 0.88;
}

.faq__q:focus-visible,
.faq__more:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ open */

.faq__item.is-open {
  padding-inline: clamp(14px, 1.3vw, 24px);
  background: var(--ink);
}

.faq__item.is-open::after {
  opacity: 0;
}

.faq__item.is-open .faq__q-text {
  color: var(--bone);
}

.faq__item.is-open .faq__q:focus-visible {
  outline-color: var(--bone);
  outline-offset: 2px;
}

/* The square turns on (a half turn, so it lands upright, the same way as the
   hover's quarter) while its + turns into an x. */
.faq__item.is-open .faq__icon {
  rotate: 180deg;
  color: var(--ink);
  background: var(--bone);
  transition:
    rotate 700ms cubic-bezier(0.34, 1.45, 0.5, 1),
    scale 220ms var(--ease-out),
    background-color 300ms ease,
    color 300ms ease;
}

.faq__item.is-open .faq__icon::before {
  rotate: 45deg;
}

.faq__item.is-open .faq__icon::after {
  rotate: 135deg;
}

.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after {
  transition: rotate 700ms cubic-bezier(0.34, 1.45, 0.5, 1);
}

/* The question dips out while the row turns, and comes back in its new colour. */
.faq__item.is-flip .faq__q-text {
  animation: faq-dip 460ms ease;
}

@keyframes faq-dip {
  0%,
  100% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

/* The answer unfolds to its own height (grid rows 0fr -> 1fr: no measuring).
   Without JS every answer shows, on the paper. */
.faq__a {
  display: grid;
  grid-template-rows: 1fr;
}

.faq__a-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__a-text {
  max-width: 62ch;
  padding: 0 clamp(40px, 4vw, 72px) clamp(18px, 1.6vw, 26px) 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.12vw, 1.0625rem);
  line-height: 1.55;
  color: var(--text-mute);
  text-wrap: pretty;
}

.faq__a-text a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.js .faq__a {
  grid-template-rows: 0fr;
  transition: grid-template-rows 480ms var(--ease-drawer);
}

.js .faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
  transition-duration: 620ms;
}

.js .faq__a-text {
  color: var(--on-ink-mute);
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 200ms ease,
    translate 400ms var(--ease-out);
}

.js .faq__a-text a {
  color: var(--bone);
}

.js .faq__item.is-open .faq__a-text {
  opacity: 1;
  translate: none;
  transition:
    opacity 500ms ease 160ms,
    translate 800ms var(--ease-out) 160ms;
}

/* ------------------------------------------------------------------ groups, more */

.faq__group-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: clamp(44px, 6vh, 72px);
  padding-bottom: 10px;
  font-size: 0.75rem;
  color: var(--text-mute);
}

/* A row like the others, with an outlined square, under the list: "More
   questions" shows the other groups and becomes "Fewer questions" (its +
   flattens to a -), which fades them and folds them away. */
.faq__more {
  position: relative;
}

.faq__more[aria-expanded="true"] .faq__more-show,
.faq__more:not([aria-expanded="true"]) .faq__more-hide {
  display: none;
}

.faq__more[aria-expanded="true"] .faq__icon::after {
  rotate: 0deg;
}

.faq__rest {
  transition: opacity 240ms ease;
}

.faq__rest.is-folding {
  opacity: 0;
}

.faq__more-text {
  font-weight: 500;
}

.faq__more-n {
  margin-left: 4px;
  font-size: 0.6875rem;
  color: var(--text-mute);
  vertical-align: 0.35em;
}

.faq__icon--line {
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink);
}

.no-js .faq__more {
  display: none;
}

/* ------------------------------------------------------------------ hover */

@media (hover: hover) and (pointer: fine) {
  .faq__item:not(.is-open) .faq__q:hover .faq__q-text,
  .faq__more:hover .faq__more-text {
    translate: 10px 0;
  }

  /* A quarter turn lands back on a +: a tick that says "this opens". */
  .faq__item:not(.is-open) .faq__q:hover .faq__icon,
  .faq__more:hover .faq__icon {
    rotate: 90deg;
  }

  /* A - takes a half turn, so it stays a -. */
  .faq__more[aria-expanded="true"]:hover .faq__icon {
    rotate: 180deg;
  }

  .faq__contact:hover::after {
    animation: faq-redraw 800ms var(--ease-out);
  }

  .faq__contact:hover .faq__contact-box svg {
    rotate: 45deg;
  }
}

.faq__contact:focus-visible .faq__contact-box svg {
  rotate: 45deg;
}

/* Fewer questions, under Contact: only while the other groups show
   (.is-more), so a long list can be folded away from wherever you are. The
   aside is held on screen, so it's always to hand. Contact's look, with an
   outlined square holding a - (the row's own sign). */
.faq__fewer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 14px;
  padding: 4px 0 5px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-mute);
  -webkit-tap-highlight-color: transparent;
  visibility: hidden;
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity 240ms ease,
    translate 400ms var(--ease-out),
    color 200ms ease,
    visibility 0ms linear 400ms;
}

.faq.is-more .faq__fewer {
  visibility: visible;
  opacity: 1;
  translate: none;
  transition:
    opacity 500ms ease 120ms,
    translate 800ms var(--ease-out) 120ms,
    color 200ms ease,
    visibility 0ms;
}

.faq__fewer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform-origin: 0 50%;
}

.faq__fewer-box {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px currentColor;
}

.faq__fewer-box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1.5px;
  margin: -0.75px 0 0 -4px;
  border-radius: 1px;
  background: currentColor;
}

.faq__fewer:hover,
.faq__fewer:focus-visible {
  color: var(--ink);
}

.faq__fewer:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .faq__fewer:hover::after {
    animation: faq-redraw 800ms var(--ease-out);
  }
}

.no-js .faq__fewer {
  display: none;
}

/* ------------------------------------------------------------------ narrow */

/* Tablets: the questions get a little more of the width. */
@media (max-width: 1199px) {
  .faq__body {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

/* Phones and portrait tablets: one column. The line goes under the title,
   and "Can't spot your query?" closes the list instead of leading it. */
@media (max-width: 899px) {
  .faq__head,
  .faq__body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* "ANSWERS" is about 6.4em wide: fill the width, never past it. */
  .faq__title {
    font-size: min(4.5rem, calc((100vw - 2 * var(--gutter)) / 6.6));
  }

  .faq__blurb {
    max-width: 36ch;
    padding-bottom: 0;
  }

  .faq__lists,
  .faq__aside {
    grid-column: 1;
    grid-row: auto;
  }

  .faq__aside {
    position: static;
    margin-top: clamp(56px, 10vh, 88px);
  }

  .faq__a-text {
    padding-right: 20px;
  }

  /* The aside comes after the list here, so its Fewer questions would be at
     the far end: instead the row under the list pins to the foot of the
     screen while the other groups show, and lands back in place under them. */
  .faq__fewer {
    display: none;
  }

  .faq.is-more .faq__more {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--bone);
    box-shadow: 0 -1px 0 rgb(17 17 17 / 0.22);
  }

  .faq.is-more .faq__more::after {
    opacity: 0;
  }
}

/* ------------------------------------------------------------------ reveal
   Armed by faq.js only when there's motion to play; without it (or without
   JS) everything simply shows. --d staggers rows that arrive together. */

.faq.is-armed .faq__line > span,
.faq.is-armed .faq__ask-line > span {
  translate: 0 105%;
}

.faq.is-armed .faq__rule {
  scale: 0 1;
}

.faq.is-armed .faq__blurb,
.faq.is-armed .faq__top,
.faq.is-armed .faq__contact {
  opacity: 0;
  translate: 0 14px;
}

.faq.is-armed .faq__intro.is-in .faq__line > span {
  translate: none;
  transition: translate 1150ms var(--ease-out) calc(var(--l, 0) * 90ms);
}

.faq.is-armed .faq__intro.is-in .faq__rule {
  scale: 1 1;
  transition: scale 1400ms var(--ease-out) 120ms;
}

.faq.is-armed .faq__intro.is-in .faq__blurb,
.faq.is-armed .faq__intro.is-in .faq__top {
  opacity: 1;
  translate: none;
  transition:
    opacity 700ms ease 320ms,
    translate 1000ms var(--ease-out) 320ms;
}

.faq.is-armed .faq__intro.is-in .faq__top {
  transition-delay: 460ms;
}

.faq.is-armed .faq__aside.is-in .faq__ask-line > span {
  translate: none;
  transition: translate 1100ms var(--ease-out) calc(var(--l, 0) * 80ms);
}

.faq.is-armed .faq__aside.is-in .faq__contact {
  opacity: 1;
  translate: none;
  transition:
    opacity 600ms ease 300ms,
    translate 900ms var(--ease-out) 300ms;
}

.faq.is-armed .faq__item,
.faq.is-armed .faq__group-title,
.faq.is-armed .faq__more {
  opacity: 0;
  translate: 0 22px;
}

.faq.is-armed .faq__item::after,
.faq.is-armed .faq__more::after {
  scale: 0 1;
}

.faq.is-armed .faq__group-title.is-in,
.faq.is-armed .faq__more.is-in {
  opacity: 1;
  translate: none;
  transition:
    opacity 600ms ease var(--d, 0ms),
    translate 900ms var(--ease-out) var(--d, 0ms);
}

.faq.is-armed .faq__item.is-in {
  opacity: 1;
  translate: none;
  transition:
    background-color 360ms ease,
    padding 560ms var(--ease-drawer),
    opacity 600ms ease var(--d, 0ms),
    translate 900ms var(--ease-out) var(--d, 0ms);
}

.faq.is-armed .faq__item.is-in::after,
.faq.is-armed .faq__more.is-in::after {
  scale: 1 1;
  transition:
    opacity 300ms ease,
    scale 1100ms var(--ease-out) calc(var(--d, 0ms) + 80ms);
}

@media (prefers-reduced-motion: reduce) {
  .faq *,
  .faq *::before,
  .faq *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* Phones: the site's section rhythm (--sec-top / --sec-bot / --sec-end, tokens.css),
   so every gap between two sections reads the same. */
@media (max-width: 719px) {
  .faq {
    padding-top: var(--sec-top);
    padding-bottom: var(--sec-bot);
  }
}