/* Section backgrounds (opt-in: <body class="... ac-sections">).
   Replaces the fixed cyan and coral glow layer with flat charcoal and near-black bands.
   Three variations run in turn down the page, each with one faint glow on a single edge. */
body.ac-sections {
  --sec-charcoal: #1A1A1A;
  --sec-black: #0F1010;
  --sec-glow: rgba(55, 214, 206, .07);
  background: var(--sec-charcoal);
}
body.ac-sections .ac-bgfx,
body.ac-sections .ac-glow { display: none; }
/* the bands reach the screen edges with 100vw, which includes a desktop scrollbar, so main clips them */
body.ac-sections main { overflow-x: clip; }
body.ac-sections main > * { position: relative; isolation: isolate; }
body.ac-sections main > *::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
}
/* 1 charcoal, glow on the top edge */
body.ac-sections main > :nth-child(3n+1)::before {
  background: radial-gradient(70% 180px at 50% 0, var(--sec-glow), transparent), var(--sec-charcoal);
}
/* 2 near-black, glow on the bottom edge */
body.ac-sections main > :nth-child(3n+2)::before {
  background: radial-gradient(70% 180px at 50% 100%, var(--sec-glow), transparent), var(--sec-black);
}
/* 3 near-black, glow on the top edge */
body.ac-sections main > :nth-child(3n+3)::before {
  background: radial-gradient(70% 180px at 50% 0, var(--sec-glow), transparent), var(--sec-black);
}
/* Home page: its own glow layer and the video hero sit outside the band system */
body.ac-sections .bgfx,
body.ac-sections .glow { display: none; }
body.ac-sections main > .hero::before { content: none; }
/* The nav's glass used to pick up the teal page gradient; the charcoal bands made it read flat grey.
   Every page except home gets the home hero's teal under the same glass, so the nav looks the same site-wide. */
body.ac-sections:not(.is-home) .site-nav.nav {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)),
    linear-gradient(120deg, #10201E, #0C3A36);
}
/* Hand-built pages: some sections leaned on their neighbour's padding when the page was one continuous
   background. As separate bands, each needs its own breathing room top and bottom, and no margin gap
   between bands. */
body.ac-sections:not(.ac-page) main > .pillars,
body.ac-sections:not(.ac-page) main > .framing,
body.ac-sections:not(.ac-page) main > .zig,
body.ac-sections:not(.ac-page) main > .offer,
body.ac-sections:not(.ac-page) main > .compliance { padding-top: var(--section-y); padding-bottom: var(--section-y); margin-top: 0; margin-bottom: 0; }
body.ac-sections:not(.ac-page) main > .block.flush-top { padding-top: var(--section-y); }
/* Long-read pages (blog posts, podcast articles, privacy, terms): the body continues the hero's band
   rather than starting a new one right under it. */
body.ac-sections main > .op-post::before,
body.ac-sections main > .article-main::before,
body.ac-sections main > .article-list-grid::before { content: none; }
/* The template's "tight" section (right after the hero on the older service, location and resource pages)
   becomes its own band, so it gets the standard section padding too. */
body.ac-sections main > .seo-section--tight { padding-top: var(--section-y); }
/* Closing CTA and FAQ on the template pages: as bands they need the standard section padding and no
   margin gaps, or the CTA card sits cramped against its band edges. */
body.ac-sections main > .seo-cta,
body.ac-sections main > .seo-faq { margin-top: 0; margin-bottom: 0; padding-top: var(--section-y); padding-bottom: var(--section-y); }