/* ============================================================
   service-light.css
   One light band per service page (the FAQ), to break the
   all-dark rhythm before the closing CTA. Tokens only.
   ============================================================ */

.g3-sec--light { background: var(--gray-05); }
.g3-sec--light .g3-h2 { color: var(--ink-deep); }
.g3-sec--light .g3-h3 { color: var(--ink-deep); }
.g3-sec--light .g3-eyebrow { color: var(--gray-60); }
.g3-sec--light .g3-eyebrow__dash { background: var(--purple); }
.g3-sec--light p { color: var(--gray-80); }
.g3-sec--light a:not([class]) { color: var(--purple-80); }

/* FAQ accordion, inverted for the light ground */
.g3-sec--light .ao-faq { border-top-color: rgba(6,33,26,0.16); }
.g3-sec--light .ao-faq__item { border-bottom-color: rgba(6,33,26,0.16); }
.g3-sec--light .ao-faq__q { color: var(--ink-deep); }
.g3-sec--light .ao-faq__q:hover { color: var(--purple); }
.g3-sec--light .ao-faq__sign::before,
.g3-sec--light .ao-faq__sign::after { background: var(--purple); }
.g3-sec--light .ao-faq__inner p { color: var(--gray-80); }
.g3-sec--light .g3-faq { border-top-color: rgba(6,33,26,0.16); }
.g3-sec--light .g3-faq__item { border-bottom-color: rgba(6,33,26,0.16); }
.g3-sec--light .g3-faq__q { color: var(--ink-deep); }
.g3-sec--light .g3-faq__a { color: var(--gray-80); }

/* inset plate: dark photography anchored on the light ground */
.sl-fig { margin: 44px 0 0; padding: 0; border: 1px solid rgba(6,33,26,0.14); }
.sl-fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 21 / 8; object-fit: cover;
  /* Normalising grade. The plate is the only image on a service page with no
     scrim over it, so it shows its source colour raw against the light ground.
     Across 118 pages the library runs warm, and orange on a purple-and-teal
     brand reads as a mistake. Desaturate, reintroduce a controllable tint with
     sepia, then rotate that tint into the brand violet. The result is that
     plates from different shoots read as one material. */
  filter: grayscale(0.62) sepia(0.22) hue-rotate(212deg) saturate(1.35) contrast(1.05) brightness(1.04);
}

@media (max-width: 900px) { .sl-fig img { aspect-ratio: 16 / 9; } }
@media (max-width: 720px) { .sl-fig { margin-top: 32px; } }