/* Grizzly Beam — /services/brand-and-messaging/
   v2 content rebuild, 2026-09-21.
   Shared: .svc-hero*, .svc-plus, .svc-closer*, .svc-sec*, .svc-cards/.svc-card,
   .svc-steps/.svc-step, .svc-faq/.svc-fq → components.css
   Page-only below: the hero and the two sections that need a size of their own. */

/* ---------- 1 · Hero ---------- */
.brm-hero { display: flex; align-items: center; justify-content: center; }
/* ---------- 6 · Three tests (ink + beam field) ----------
   Backdrop: the same beam field as "Our services" on the home page. Markup is
   components/BeamField.astro, styles (.hs__bg/.hsbg*) live in core.css;
   .svc-sec--beam only makes the section the positioning context and clips the beams.

   A single ink block between two light sections, so the field's hard bottom edge
   lands where the dark ends. */
.brm-tests { padding-block: 10rem; }

/* ---------- 8 · We started with our own brand (ink + beam field) ----------
   Same field as .brm-tests above. The two are three sections apart with a light
   band between them, so each gets its own field and its own hard bottom edge. */
.brm-own { padding-block: 9rem; }

/* ---------- 10 · FAQ (ink, no beam field) ----------
   Dark, but flat: the beam field is reserved for the two sections that make a
   claim. An accordion is a utility, and a moving background behind twelve lines
   of opening and closing copy is noise. */
.brm-faq { padding-block: 9rem; }

/* ---------- 11 · Closer ---------- */
.brm-closer { padding-block: 9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .brm-tests, .brm-own, .brm-faq { padding-block: 7rem; }
}
@media (max-width: 767px) {
  .brm-tests, .brm-own, .brm-faq { padding-block: 6rem; }
  .brm-closer { padding-block: 6rem; }
}