/* ============================================================
   THE CREATIVITY LAB — FAQ ("Questions worth asking.")
   ============================================================ */
.faq {
  position: relative;
  padding: clamp(56px, 7vw, 116px) clamp(20px, 4.5vw, 52px) clamp(80px, 11vw, 170px);
  border-top: 1px solid var(--border-subtle);
}
@media (min-width: 1800px) { .faq { max-width: 1760px; margin: 0 auto; } }

.faq-head { position: relative; padding-top: clamp(18px, 3.5vw, 48px); }
.faq-eyebrow { font-family: var(--font-label); font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; color: var(--text-secondary); }
.faq-eyebrow .idx { color: var(--text-faint); }
.faq-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.0; letter-spacing: var(--tracking-tight); color: var(--text-primary); margin-top: clamp(22px, 3vw, 40px); }
.faq-sub { margin-top: clamp(14px, 1.6vw, 20px); font-size: clamp(1rem, 1.2vw, 1.25rem); color: var(--text-muted); letter-spacing: -0.01em; max-width: 48ch; }

.faq-body { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 72px); margin-top: clamp(40px, 5vw, 76px); }
@media (min-width: 1024px) { .faq-body { grid-template-columns: minmax(260px, 360px) 1fr; gap: clamp(48px, 6vw, 100px); align-items: start; } }

.faq-contact__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1; }
.faq-contact__text { margin-top: clamp(16px, 1.8vw, 22px); font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.55; color: var(--text-muted); max-width: 34ch; }
.faq-contact__text .b { display: block; }
.faq-person { display: flex; align-items: center; gap: 14px; margin-top: clamp(26px, 3vw, 38px); }
.faq-person__img { width: 56px; height: 56px; flex: none; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 999px; }
.faq-person__name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 15px; color: var(--text-primary); }
.faq-person__role { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-top: 4px; }
.faq-cta { display: inline-flex; align-items: center; gap: 9px; position: relative; width: fit-content; margin-top: clamp(28px, 3vw, 40px); font-family: var(--font-display); font-weight: var(--fw-medium); font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--text-primary); text-decoration: none; }
.faq-cta::after { content: ""; position: absolute; left: 0; right: 24px; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0.2); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.faq-cta:hover::after { transform: scaleX(1); }
.faq-cta svg { transition: transform var(--dur) var(--ease-out); }
.faq-cta:hover svg { transform: translate(4px, -4px); }

.faq-list { border-top: 1px solid var(--border-subtle); }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 2.2vw, 28px) clamp(4px, 1vw, 16px) clamp(20px, 2.2vw, 28px) 0;
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  letter-spacing: -0.01em; color: var(--text-secondary);
  transition: color var(--dur) var(--ease-out);
}
.faq-q:hover { color: var(--text-primary); }
.faq-item.open .faq-q { color: var(--text-primary); }
.faq-icon { position: relative; flex: none; width: 18px; height: 18px; transition: transform 0.5s var(--ease-out); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: currentColor; }
.faq-icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); transition: opacity 0.5s var(--ease-out); }
.faq-item.open .faq-icon { transform: rotate(90deg); }
.faq-item.open .faq-icon::after { opacity: 0; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-out); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a__inner { overflow: hidden; }
.faq-a__text { padding: 0 clamp(40px, 5vw, 80px) clamp(22px, 2.4vw, 30px) 0; font-size: clamp(1rem, 1.1vw, 1.18rem); line-height: 1.55; letter-spacing: -0.005em; color: var(--text-muted); max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .faq-a, .faq-icon { transition: none; } }