/* Page-hero + service-card decorative backgrounds. Client request (2026-05-16).
   Isolated from the signed-off design CSS (intentional enhancement, kept
   separate so it's reversible and parity of untouched pages is clear).

   ACCESSIBILITY IS THE HARD CONSTRAINT:
   - All decoration is very low alpha (<= .06) and MASKED AWAY from the text
     column, so it barely shifts background luminance where words sit.
   - Body/eyebrow/headline are navy (#072956) on near-white => ~15:1 (AAA).
   - The hero lede shipped as --slate (#6E7C8A) on white = ~3.9:1, which was
     ALREADY below WCAG AA 4.5:1. Darkened here to #46566A (~7:1) so it
     passes AA/AAA even over the texture. This is an a11y fix, not just decor.
   - prefers-reduced-motion respected. Decoration is pointer-events:none and
     aria-invisible (pure CSS ::before/::after). */

/* ============ INNER-PAGE HERO (.page-hero) ============ */
.page-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero > .wrap { position: relative; z-index: 1; }

/* Faint blueprint grid — masked so it's invisible across the left/text side
   and only whispers on the right. Net luminance behind text is unchanged. */
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(7,41,86,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,41,86,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(100deg, transparent 0 46%, rgba(0,0,0,.85) 100%);
          mask-image: linear-gradient(100deg, transparent 0 46%, rgba(0,0,0,.85) 100%);
}

/* Large faded "blueprint compass" ring, parked off the right edge, well
   clear of the left-aligned headline/lede. */
.page-hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -130px; top: 50%; transform: translateY(-50%);
  width: 440px; height: 440px; border-radius: 50%;
  border: 2px solid rgba(7,41,86,.06);
  box-shadow:
    0 0 0 28px rgba(7,41,86,.025),
    inset 0 0 0 44px rgba(244,196,48,.045);
}

/* a11y: lift the lede to AA (was ~3.9:1 on white before any decor). */
.page-hero .page-hero-lede { color: #46566A; }

/* a11y: the signed-off hero eyebrow used --yellow-deep (#C99100) on white =
   ~2.8:1, a WCAG fail for text. Deepen to a darker amber (~6:1) that keeps
   the gold-accent identity but passes AA. */
.page-hero .eyebrow { color: #7A5E00; }

@media (max-width: 760px) {
  .page-hero::after { width: 280px; height: 280px; right: -120px; }
}

/* ============ SERVICE CARDS (services page only) ============ */
body.services-page .svc-card { position: relative; overflow: hidden; isolation: isolate; }
body.services-page .svc-card > * { position: relative; z-index: 1; }

/* Subtle hatched corner motif, faded out toward the content so the copy is
   never sitting on top of meaningful texture. */
body.services-page .svc-card::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -50px; bottom: -50px; width: 190px; height: 190px;
  background: repeating-linear-gradient(
    45deg, rgba(7,41,86,.05) 0 2px, transparent 2px 13px);
  -webkit-mask-image: radial-gradient(circle at bottom right, #000 0, transparent 70%);
          mask-image: radial-gradient(circle at bottom right, #000 0, transparent 70%);
  transition: background .2s ease;
}
/* On hover the card already accents yellow; echo it in the motif. */
body.services-page .svc-card:hover::before {
  background: repeating-linear-gradient(
    45deg, rgba(244,196,48,.12) 0 2px, transparent 2px 13px);
}

@media (prefers-reduced-motion: reduce) {
  body.services-page .svc-card::before { transition: none; }
}