/* ===================================================================
   FAQs page  (Figma: Dev-Ready 10705-68058)
   Sections: Hero (Header/62) + FAQ (reuses shared .faq) + CTA (CTA/1)
   Loads on top of tokens.css + iip.css. Responsive block at bottom.
   =================================================================== */

/* ---- Hero (Header / 62) — full-bleed photo, left copy ------------- */
.faqs-hero {
  position: relative;
  display: flex;
  align-items: center;
  /* 567px at the 1440 Figma frame; fluid down, capped up */
  min-height: clamp(460px, 39.4vw, 567px);
  padding: 96px 0;
  /* Crop from the Figma node's recorded transform (10705:68090): rendered
     width 113.96% of the frame, x offset 0, y 43.1% — knobs: zoom ↑ = bigger
     subject, y ↑ = image slides up. Width-driven so it covers at any height
     for viewports ≥ ~884px (desktop band only; tablet/mobile re-crop below).
     No >=1600 freeze (deliberate): the asset is only 1672px wide and a px cap
     would leave flat bars on ultrawide; upscale at 1920 is ~15% (soft mosaic). */
  background: #2a1856 url("../assets/brand/faqs-hero-bg.webp?v=2") 0% 43.1% / 113.96% auto no-repeat;
}
/* Left scrim so the white copy stays legible over the pink mosaic. */
.faqs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,13,40,0.62) 0%, rgba(15,13,40,0.30) 38%, rgba(15,13,40,0) 62%);
  pointer-events: none;
}
/* Copy aligns to the nav gutter (same clamp as .nav__inner), not the
   centred .wrap — matches the design's hard-left copy at every width. */
.faqs-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  padding-inline: clamp(24px, 6vw, 88px);
}
.faqs-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 768px;
}
.faqs-hero__eyebrow {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}
.faqs-hero__title {
  margin: 0;
  font-family: "Archivo Black", "Google Sans Flex", sans-serif;
  font-weight: 400;
  /* vw slope hits the Figma 75px at ~1280px; floor hits the Figma mobile 36px */
  font-size: clamp(36px, 5.86vw, 75px);
  /* Figma desktop: 16px eyebrow→title gap vs the column's 24px */
  margin-top: -8px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  text-wrap: wrap;
}
.faqs-hero__text {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}
.faqs-hero__actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

/* ---- CTA (CTA / 1) — "Ready to get started?" text + photo -------- */
.faqs-cta { background: #fff; padding: clamp(64px, 9vw, 112px) 0; }
.faqs-cta__inner { display: flex; gap: 80px; align-items: center; }
.faqs-cta__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.faqs-cta__content { display: flex; flex-direction: column; gap: 24px; }
.faqs-cta__heading {
  margin: 0;
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  font-weight: 700;
  line-height: 1.1;
  color: var(--deep-orange);
}
.faqs-cta__text { margin: 0; font-size: 18px; line-height: 1.5; color: var(--deep-blue); }
.faqs-cta__actions { display: flex; gap: 16px; }
/* Breakout composition (Figma 10705-68144): the rounded office box + woman
   are baked into one transparent PNG whose head overflows above the box.
   Container footprint = the 600x400 box (so it centres with the copy); the
   image is anchored to the box bottom and pokes ~57px above the top edge. */
.faqs-cta__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 600 / 400;
}
.faqs-cta__media img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* ---- FAQ v2: grouped questions + routing links --------------------- */
/* Page-scoped spacing/colour tweaks on top of the shared .faq component
   (.faq/.faq__head are reused by many pages — override here, not iip.css). */
.faqs-faq { padding-top: 96px; }
.faqs-faq .faq__head h2 { margin-bottom: 24px; }
.faqs-faq .faq__head { margin-bottom: 64px; }
/* h3 wrapper keeps heading semantics without touching button layout */
.faq-qh { margin: 0; display: contents; }
.faq-group-heading {
  margin: 48px 0 4px;
  padding: 0 30px;
  font-size: calc(clamp(24px, 2.2vw, 28px) * var(--heading-scale));
  font-weight: 700;
  color: var(--deep-orange);
}
#faq-list .faq-group-heading:first-child { margin-top: 0; }
.faq-a-inner p:not(:last-child) { padding-bottom: 12px; }
.faq-a-inner .faq-more a { color: var(--deep-orange); font-weight: 600; text-decoration: none; }
.faq-a-inner .faq-more a:hover { text-decoration: underline; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1100px) {
  /* Figma tablet frame 834x534 (11639:2425): copy vertically centred; crop
     zoom 122.71% / x 8.34% / y 99% from the node's recorded transform. */
  .faqs-hero {
    min-height: min(64vw, 534px);
    align-items: center;
    padding: 48px 0;
    background-size: 122.71% auto;
    background-position: 8.34% 99%;
  }
  .faqs-hero__eyebrow { font-size: 18px; letter-spacing: 0.9px; }
  .faqs-hero__title { margin-top: 0; } /* tablet/mobile use the uniform 24px gap */
  .faqs-hero__text { max-width: 392px; } /* Figma wrap: "…most asked / questions…" */
}

@media (max-width: 900px) {
  /* CTA stacks + centres. Extra gap because the breakout head overflows
     ~40px above the image box into this gap. */
  .faqs-cta__inner { flex-direction: column; gap: 80px; }
  .faqs-cta__col { align-items: center; text-align: center; }
  .faqs-cta__content { align-items: center; }
  .faqs-cta__actions { justify-content: center; }
  .faqs-cta__media { width: 100%; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 640px) {
  /* Figma mobile frame 393x534 (11639:2417): dedicated composed asset
     (mirrored export), zoom 207.77% / x 36.3% / y 99.6% from the node. */
  .faqs-hero {
    min-height: min(136vw, 560px);
    padding: 64px 0;
    background-image: url("../assets/brand/faqs-hero-bg-mobile.webp");
    background-size: 207.77% auto;
    background-position: 36.3% 99.6%;
  }
  .faqs-hero__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .faqs-hero__text { max-width: 320px; } /* Figma wrap: "…our most / asked…" */
  .faqs-hero__actions { flex-wrap: wrap; }
  .faqs-hero__actions .cx-btn { height: 36px; }
}