/* Gap we close — shipped E (Eric pick).
   Classroom photo wash + color-coded stats (cool muted 1 in 8 vs navy/gold 80%).
   Same copy/stats as live. No bar chart of non-comparable metrics. */

#gap-we-close {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  overflow: hidden;
}

#gap-we-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/hh-classroom-help.jpg") center 35% / cover no-repeat;
}

#gap-we-close::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Wash keeps type AA; photo reads as atmosphere, not a hero */
  background:
    linear-gradient(105deg,
      rgba(255, 255, 255, .88) 0%,
      rgba(255, 255, 255, .84) 46%,
      rgba(217, 231, 242, .72) 100%),
    linear-gradient(180deg, rgba(28, 53, 94, .10), rgba(28, 53, 94, .06));
}

#gap-we-close .gap-grid {
  align-items: start;
}

#gap-we-close .eyebrow {
  /* Matches approved E comps. Brand orange eyebrow on light wash. */
  color: var(--orange-deep);
}

#gap-we-close .gap-copy h2,
#gap-we-close .gap-src,
#gap-we-close .gap-fig-l {
  text-wrap: balance;
}

#gap-we-close .gap-copy .lead {
  max-width: 42ch;
  text-wrap: pretty; /* prefer pretty over balance for long EN/ES leads */
}

#gap-we-close .gap-src {
  margin-top: .85rem;
  max-width: 46ch;
  color: #5A6B7D; /* ≥4.5:1 on the light wash */
}

#gap-we-close .gap-figures {
  gap: 1rem;
}

#gap-we-close .gap-fig {
  padding: clamp(1.25rem, 1rem + 1vw, 1.7rem) clamp(1.3rem, 1rem + 1.1vw, 1.85rem);
  border-radius: 16px;
  border: 1px solid rgba(28, 53, 94, .12);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(2px);
  box-shadow: none;
}

#gap-we-close .gap-fig-n {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

#gap-we-close .gap-fig-n--muted {
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.6rem);
  color: #5A6B7D; /* muted cool on light card — large text ≥3:1 */
}

#gap-we-close .gap-fig-l {
  margin: .45rem 0 0;
  max-width: none; /* avoid orphan last words from 34ch cap */
  color: var(--ink-soft);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.35;
}

/* Result: navy panel + gold numeral (brand fills; large-text AA on navy) */
#gap-we-close .gap-fig--result {
  background: var(--navy);
  border-color: transparent;
  box-shadow: 0 16px 36px -18px rgba(28, 53, 94, .5);
}

#gap-we-close .gap-fig--result .gap-fig-n {
  color: var(--gold); /* ~6.95:1 on navy at large size */
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  letter-spacing: -.03em;
}

#gap-we-close .gap-fig--result .gap-fig-l {
  color: rgba(255, 255, 255, .92); /* white on navy ≥ AA */
}

@media (max-width: 860px) {
  #gap-we-close::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(217, 231, 242, .9));
  }
  #gap-we-close .gap-copy .lead,
  #gap-we-close .gap-src {
    max-width: none;
  }
}