/* ─── Shared decoration system ────────────────────────────────────────
   Subtle background tints + decorative grid/blueprint overlays
   for breaking up large white sections across the site. Each tint
   variant is intentionally unique so adjacent sections feel distinct.
   Loaded from every page after the page's own <style> block.
─────────────────────────────────────────────────────────────────────── */

.has-decor { position: relative; overflow: hidden; }
.has-decor > .container,
.has-decor > .audit-band-inner { position: relative; z-index: 2; }

/* Six tint variants — vary the focal point, palette mix, and gradient
   axis so sections feel atmospheric, never repetitive. All very faint
   (≤ 0.08 alpha) layered on near-white so type contrast is preserved. */
.tint-a {
  background:
    radial-gradient(900px 600px at 92% 4%, rgba(24,95,165,0.07), transparent 60%),
    radial-gradient(700px 520px at 6% 96%, rgba(255,111,94,0.06), transparent 62%),
    #ffffff;
}
.tint-b {
  background:
    radial-gradient(780px 540px at 4% 8%, rgba(4,44,83,0.06), transparent 58%),
    radial-gradient(820px 580px at 96% 88%, rgba(24,95,165,0.07), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
}
.tint-c {
  background:
    radial-gradient(720px 540px at 90% 12%, rgba(255,111,94,0.05), transparent 58%),
    radial-gradient(900px 620px at 8% 92%, rgba(24,95,165,0.07), transparent 62%),
    #ffffff;
}
.tint-d {
  background:
    radial-gradient(680px 480px at 50% -10%, rgba(24,95,165,0.06), transparent 60%),
    radial-gradient(860px 600px at 50% 110%, rgba(4,44,83,0.06), transparent 62%),
    linear-gradient(180deg, #fbfaf7 0%, #ffffff 70%);
}
.tint-e {
  background:
    radial-gradient(620px 460px at 14% 24%, rgba(168,207,58,0.06), transparent 60%),
    radial-gradient(820px 580px at 84% 84%, rgba(24,95,165,0.06), transparent 62%),
    #ffffff;
}
.tint-f {
  background:
    radial-gradient(900px 600px at 78% 8%, rgba(24,95,165,0.08), transparent 60%),
    radial-gradient(560px 420px at 20% 92%, rgba(255,111,94,0.05), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
}
.tint-g {
  background:
    radial-gradient(640px 480px at 12% 6%, rgba(24,95,165,0.06), transparent 60%),
    radial-gradient(740px 560px at 88% 48%, rgba(4,44,83,0.05), transparent 62%),
    radial-gradient(520px 400px at 30% 100%, rgba(255,111,94,0.04), transparent 62%),
    #ffffff;
}
.tint-h {
  background:
    radial-gradient(820px 620px at 60% 0%, rgba(24,95,165,0.07), transparent 60%),
    radial-gradient(620px 500px at 18% 88%, rgba(168,207,58,0.05), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
}

/* Optional overlay textures — pair with a tint for added depth.
   Sit underneath the section's content via z-index. */
.has-decor .deco-grid,
.has-decor .deco-blueprint {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.has-decor .deco-grid::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(4,44,83,0.10) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0,0,0,0.85) 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0,0,0,0.85) 0%, transparent 75%);
}
.has-decor .deco-blueprint::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(4,44,83,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4,44,83,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.8) 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.8) 0%, transparent 75%);
}

/* Floating dashed orbit accents — drop one or two per section
   for low-key motion. Always pointer-events: none and z-index 1. */
.deco-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(4,44,83,0.10);
  pointer-events: none;
  z-index: 1;
}
.deco-orbit.solid { border-style: solid; border-color: rgba(24,95,165,0.08); }
.deco-orbit.coral { border-color: rgba(255,111,94,0.18); }