/* who-we-help.css */

/* ---------- 01 asks: staggered columns ---------- */

.asks__title { max-width: 16ch; }
.asks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  margin-top: 4.5rem;
  align-items: start;
}
.ask:nth-child(2) { margin-top: 5rem; }
.ask:nth-child(3) { margin-top: 10rem; }
.ask .frame { margin-bottom: 2rem; }
.ask__q { color: var(--text); text-wrap: pretty; }
.ask__a {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--accent);
}

/* ---------- 02 how ---------- */

.how {
  background:
    radial-gradient(50% 60% at 10% 30%, rgba(143, 92, 71, 0.28), transparent 70%),
    var(--bg-raise);
  border-block: 1px solid var(--line);
}
.how__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: start;
}
.how__head { grid-column: 1 / span 5; }
.how__art { --ar: 4 / 3; margin-top: 3rem; }
.how__rows { grid-column: 7 / span 6; margin-top: 3.25rem; }

/* ---------- 03 fit ---------- */

.fit__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0.6em;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 330;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
}
.fit__list li:nth-child(even) { font-style: italic; color: var(--accent); }
.fit__list li:not(:last-child)::after { content: ","; color: var(--text-dim); font-style: normal; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- responsive ---------- */

@media (max-width: 61.99rem) {
  .how__head, .how__rows { grid-column: 1 / -1; }
  .ask:nth-child(2) { margin-top: 2.5rem; }
  .ask:nth-child(3) { margin-top: 5rem; }
}

@media (max-width: 47.99rem) {
  .asks__grid { grid-template-columns: 1fr; gap: 3.5rem; margin-top: 3rem; }
  .ask:nth-child(n) { margin-top: 0; }
  .ask .frame { max-width: 24rem; }
}