/*
 * One shared technical grid for every homepage section.
 * Section background colors and atmospheric artwork remain section-owned.
 */
body.home {
  --mws-home-grid-size: 32px;
  --mws-home-grid-dot-size: 5px;
  --mws-home-grid-line-light: rgba(17, 19, 18, 0.045);
  --mws-home-grid-dot-light: rgba(17, 19, 18, 0.09);
  --mws-home-grid-line-dark: rgba(255, 255, 255, 0.045);
  --mws-home-grid-dot-dark: rgba(255, 255, 255, 0.09);
}

body.home .mws-hero,
body.home .mws-featured-work,
body.home .mws-process-map__canvas,
body.home .mws-final-cta {
  --mws-home-grid-line: var(--mws-home-grid-line-light);
  --mws-home-grid-dot: var(--mws-home-grid-dot-light);
}

body.home .mws-services-home {
  --mws-home-grid-line: var(--mws-home-grid-line-dark);
  --mws-home-grid-dot: var(--mws-home-grid-dot-dark);
}

body.home .mws-hero::before,
body.home .mws-services-home::before,
body.home .mws-featured-work::before {
  background-image:
    linear-gradient(var(--mws-home-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mws-home-grid-line) 1px, transparent 1px),
    radial-gradient(var(--mws-home-grid-dot) 0.55px, transparent 0.65px);
  background-position: 0 0, 0 0, 1px 1px;
  background-size:
    var(--mws-home-grid-size) var(--mws-home-grid-size),
    var(--mws-home-grid-size) var(--mws-home-grid-size),
    var(--mws-home-grid-dot-size) var(--mws-home-grid-dot-size);
  mask-image: none;
  opacity: 1;
}

/* Featured Work keeps its warm atmosphere; its grid now comes from ::before. */
body.home .mws-featured-work {
  background:
    radial-gradient(circle at 94% 10%, rgba(255, 178, 63, 0.23), transparent 25%),
    radial-gradient(circle at 6% 72%, rgba(255, 212, 59, 0.18), transparent 28%),
    var(--mws-paper);
}

body.home .mws-process-map__canvas,
body.home .mws-final-cta {
  background-image:
    linear-gradient(var(--mws-home-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mws-home-grid-line) 1px, transparent 1px),
    radial-gradient(var(--mws-home-grid-dot) 0.55px, transparent 0.65px);
  background-position: 0 0, 0 0, 1px 1px;
  background-size:
    var(--mws-home-grid-size) var(--mws-home-grid-size),
    var(--mws-home-grid-size) var(--mws-home-grid-size),
    var(--mws-home-grid-dot-size) var(--mws-home-grid-dot-size);
}