/* =========================================================================
   <FAQHero /> — /faq §1
   Build Packet 32 §4 — Deep Navy hero, eyebrow + headline + sub.
   Premium reskin: Anybody display face + gold accents + self-contained
   geometric accent layer (no external cluster dependency).
   ========================================================================= */

.faqp-hero {
  /* Local display token — the brand display face used across service pages. */
  --faqp-display: "Anybody", "Inter Tight", var(--font-display);

  position: relative;
  background: var(--color-primary);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Ambient navy glow — warm gold top-right, cool wash bottom-left. */
.faqp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 560px at 82% 18%, rgba(232, 180, 0, 0.10), transparent 70%),
    radial-gradient(900px 500px at 8% 95%, rgba(255, 255, 255, 0.03), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Self-contained geometric accent — a gold ring + a faint dotted field in the
   top-right negative space. Decorative only; sits behind the copy. */
.faqp-hero__geo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.faqp-hero__geo span { position: absolute; display: block; }

.faqp-hero__geo .g-ring {
  top: -60px;
  right: -40px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(232, 180, 0, 0.22);
}
.faqp-hero__geo .g-ring::after {
  content: "";
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  border: 1px solid rgba(232, 180, 0, 0.10);
}
.faqp-hero__geo .g-dots {
  top: 120px;
  right: 64px;
  width: 132px;
  height: 88px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: 0.7;
}
.faqp-hero__geo .g-plus {
  top: 220px;
  right: 230px;
  width: 18px;
  height: 18px;
}
.faqp-hero__geo .g-plus::before,
.faqp-hero__geo .g-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(232, 180, 0, 0.55);
  border-radius: 1px;
}
.faqp-hero__geo .g-plus::before { width: 18px; height: 2px; transform: translate(-50%, -50%); }
.faqp-hero__geo .g-plus::after  { width: 2px; height: 18px; transform: translate(-50%, -50%); }

.faqp-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 124px var(--container-pad) 64px;
}

.faqp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.faqp-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}

.faqp-hero__title {
  margin: 0 0 24px;
  font-family: var(--faqp-display);
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;       /* Anybody runs wide — tighten at display size */
  color: #fff;
  text-wrap: balance;
}
.faqp-hero__title em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 800;
}

.faqp-hero__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.74);
  max-width: 60ch;
  text-wrap: pretty;
}

/* Tiny meta strip — question count + read time. Quiet, monospace. */
.faqp-hero__meta {
  margin-top: 38px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.48);
}
.faqp-hero__meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(232, 180, 0, 0.6);
}

@media (max-width: 640px) {
  .faqp-hero__inner { padding: 100px 20px 48px; }
  .faqp-hero__geo .g-ring { width: 200px; height: 200px; top: -50px; right: -50px; }
  .faqp-hero__geo .g-dots { right: 24px; top: 96px; }
  .faqp-hero__geo .g-plus { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Static decorative layer — nothing animates, but keep parity. */
  .faqp-hero__geo { opacity: 0.9; }
}