/* Shared CSS brick-wall hero background — matches the landing page hero.
   Apply .ks-brick-bg to a hero <section>; content paints above the wall. */
.ks-brick-bg {
  --brick-w: 82px;
  --brick-h: 26px;
  --mortar: 2px;
  --navy-base: #16295c;
  --navy-deep: #0a1638;
  position: relative;
  isolation: isolate;
  background-color: var(--navy-base);
}

/* brick pattern: horizontal mortar rows, offset vertical joints, faint row highlight */
.ks-brick-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--navy-base);
  background-image:
    linear-gradient(var(--navy-deep) var(--mortar), transparent var(--mortar)),
    conic-gradient(from 270deg at var(--mortar) var(--brick-h), var(--navy-deep) 90deg, transparent 0),
    conic-gradient(from 270deg at var(--mortar) var(--brick-h), var(--navy-deep) 90deg, transparent 0),
    linear-gradient(rgba(255, 255, 255, .045) 0, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size:
    100% var(--brick-h),
    var(--brick-w) calc(var(--brick-h) * 2),
    var(--brick-w) calc(var(--brick-h) * 2),
    var(--brick-w) var(--brick-h);
  background-position:
    0 0,
    0 0,
    calc(var(--brick-w) / 2) var(--brick-h),
    0 var(--mortar);
}

/* ambient brand glow + vignette */
.ks-brick-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 78% 34%, rgba(23, 70, 209, .30), transparent 60%),
    radial-gradient(760px 520px at 12% 82%, rgba(232, 65, 60, .09), transparent 60%),
    radial-gradient(760px 300px at 30% 16%, rgba(255, 233, 168, .05), transparent 70%),
    radial-gradient(ellipse 135% 105% at 50% 32%, transparent 55%, rgba(6, 14, 38, .45) 100%),
    linear-gradient(90deg, rgba(4, 10, 28, .5) 0%, rgba(4, 10, 28, .12) 42%, transparent 72%);
}