/* ==========================================================================
   Anthēs — FAQ page
   Figma page "06 FAQ", frame 21:38 (FAQ / Desktop, 1280 × 3294)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero — Figma 21:67
   Fixed 732 frame: a photo collage with three floating question chips, and
   the heading beside it. The chips are real text rather than part of the
   image, so they stay selectable and readable to a screen reader.
   -------------------------------------------------------------------------- */
.fhero { height: 732px; padding: 50px 0; overflow: hidden; }

/* This hero uses the frame's own 54px padding rather than the standard
   content column, which is what gives the heading the 559px it needs to keep
   the drawn two-line break ("The questions you / want to ask."). */
.fhero__inner {
  width: min(1172px, 100% - (2 * var(--gutter)));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 53px;
}

.fhero__collage {
  position: relative;
  flex: 0 0 560px;
  width: 560px;
  height: 531px;
}

/* The gradient panel the photo sits on */
.fhero__block {
  position: absolute;
  left: 49px;
  top: 0;
  width: 419px;
  height: 507px;
  background: linear-gradient(17.125deg, #f4a31f 0%, #db3072 99.943%);
}

/* The photo is a cut-out; these are the Figma crop values, as percentages of
   the 419 × 507 frame, so the gradient panel reads around her. */
.fhero__photo {
  position: absolute;
  left: 49px;
  top: 0.47px;
  width: 419px;
  height: 507px;
  overflow: hidden;
}
.fhero__photo img {
  position: absolute;
  left: -85.25%;
  top: -48.78%;
  width: 329.57%;
  height: 182.86%;
  max-width: none;
}

/* Floating question chips */
.fchip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12.385px;
  padding: 17.546px;
  border-radius: 15.482px;
  font-size: 16.514px;
  font-weight: 600;
  line-height: 1.11;
  letter-spacing: -0.2064px;
  filter: drop-shadow(0 1.032px 2.58px rgba(0, 0, 0, 0.1));
}

.fchip__mark {
  flex: 0 0 auto;
  width: 44.477px;
  height: 44.477px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fchip__mark img { width: auto; height: 25.667px; }

.fchip--yellow {
  left: 0;
  top: 75.47px;
  width: 221.902px;
  height: 82.568px;
  background: var(--sun-yellow);
  color: #000;
}
.fchip--yellow .fchip__mark { width: 43.432px; height: 43.432px; }
.fchip--yellow .fchip__mark img { height: 23.48px; }

.fchip--orange {
  left: 359px;
  top: 159.47px;
  width: 201px;
  height: 83px;
  background: #fe7325;
  color: #fff;
}

.fchip--purple {
  left: 69.04px;
  top: 448.06px;
  width: 219px;
  height: 82.568px;
  background: #7358e3;
  color: #fff;
}

.fhero__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.fhero__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: #6a6a6a;
}

.fhero__title {
  font-size: 67.2px;
  font-weight: var(--w-regular);
  line-height: 72.6px;
  letter-spacing: -1.21px;
  color: var(--ink);
}

.fhero__lede { font-size: 21.12px; line-height: 30.6px; color: var(--ink); }

/* --------------------------------------------------------------------------
   Q&A accordion — Figma 21:71
   Built on <details>/<summary> so it is keyboard-operable and works with
   JavaScript off.
   -------------------------------------------------------------------------- */
.qa { background: #000; padding: 61px 0; }

.qa__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.qa__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: #6a6a6a;
}

.qa__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 61px;
  letter-spacing: -0.62px;
  color: #fff;
  max-width: 900px;
}
.qa__title strong { font-weight: var(--w-bold); color: var(--iris-purple); }

.accordion { width: 100%; padding-top: 32px; }

.faq {
  border-top: 1px solid rgba(219, 218, 218, 0.25);
  padding-block: 32px;
}
.faq:last-child { border-bottom: 1px solid rgba(219, 218, 218, 0.25); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
  font-size: 27px;
  font-weight: 500;
  line-height: 23.6px;
  color: #fff;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--marigold); }

/* Chevron, drawn from the exported asset and rotated when the item is open */
.faq summary::after {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background: url("../img/faq-chevron.svg") center / 22px 22px no-repeat;
  transition: transform 220ms var(--ease-out);
}
.faq[open] summary::after { transform: rotate(180deg); }

.faq__answer {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1087px;
  font-size: 19px;
  line-height: 30.2px;
  color: #fff;
  opacity: 0.64;
}

.faq__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  list-style: decimal;
}
.faq__steps li { list-style: decimal; }

/* --------------------------------------------------------------------------
   Responsive — derived; the Figma has no artboards below 1280
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .fhero { height: auto; padding: 56px 0; }
  .fhero__inner { height: auto; gap: clamp(32px, 4vw, 53px); }
  /* No shrink — see the same note in contact.css */
  .fhero__collage {
    flex: 0 0 auto;
    width: clamp(320px, 42vw, 560px);
    height: auto;
    aspect-ratio: 560 / 531;
  }
  /* Once the collage can scale, its parts are placed proportionally */
  .fhero__block  { left: 8.75%;  top: 0;      width: 74.8%; height: 95.5%; }
  .fhero__photo  { left: 8.75%;  top: 0.09%;  width: 74.8%; height: 95.5%; }
  .fchip         { transform: scale(0.85); transform-origin: left center; }
  .fchip--yellow { left: 0;      top: 14.2%; }
  .fchip--orange { left: 64.1%;  top: 30%;   transform-origin: right center; }
  .fchip--purple { left: 12.3%;  top: 84.4%; }
  .fhero__title  { font-size: clamp(40px, 5.4vw, 67.2px); line-height: 1.08; }
  .fhero__copy   { flex: 1 1 380px; width: auto; }

  .qa__title { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.17; }
  .faq summary { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.25; }
}

@media (max-width: 900px) {
  .fhero__inner { flex-direction: column; align-items: flex-start; }
  .fhero__collage { flex: 0 0 auto; width: 100%; max-width: 560px; align-self: center; }
  .fhero__copy { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 640px) {
  .fhero { padding: 40px 0; }
  .qa { padding: 48px 0; }
  .faq { padding-block: 24px; }
  .faq summary { gap: 16px; }
  .faq__answer { font-size: 17px; line-height: 27px; }

  /* The chips crowd the photo at phone width, and the right-hand one ran
     past the collage edge — it is anchored to the right instead. */
  .fchip { transform: scale(0.72); }
  .fchip--orange { left: auto; right: 0; transform-origin: right center; }
  .fchip--purple { left: 6%; }
}