/* =========================================
   Rainmaker Sales — site-specific styles
   Layered on top of frontend.css
   ========================================= */

/* The brand is declared as core theme tokens and the --rm-* names are aliases
   onto them, so every --rm-* usage below follows a published theme without
   being rewritten. Declare a brand colour here as a literal and it stops
   following: that is the one way to break this file's relationship with
   Theme Studio.

   These values are the fallback, not the source of truth. The layout injects a
   theme's token block AFTER this stylesheet, so a theme wins on source order
   and these apply only when none is active. Keep them anyway — without them
   core's own defaults apply and a themeless render comes back Motley orange.

   --rm-green-dark is only ever the hover/active partner of --rm-green; keep
   them in step or hover states stop reading as the same colour.

   Contrast: --rm-green is the design's own value and carries white text at
   1.56:1, below the 4.5:1 WCAG AA needs for text and the 3:1 for UI. Anything
   here that pairs it with #fff (nav CTA pill, .btn-primary, back-to-top) is
   knowingly below standard and is a design decision to revisit, not a bug to
   patch locally — changing one usage alone would just split the palette. */
:root {
  --color-primary:          #1C3A72;
  --color-primary-hover:    #162F5E;
  --color-secondary:        #a6d19e;
  --color-secondary-hover:  #8DB286;
  --color-text:             #0D1E37;
  --color-bg-alt:           #F7FBFC;

  /* Companions of --color-primary, and they only work as a set. -rgb is what
     core's brand-tinted shadows interpolate (rgba(var(--color-primary-rgb),…));
     leave it on the packaged value and the featured pricing plan keeps an
     orange glow under a navy border. -tint is the pale wash behind primary
     surfaces, and is the site's grey band. */
  --color-primary-rgb:      28, 58, 114;
  --color-primary-tint:     #EBF0F5;

  /* --color-dark is core's nav/footer dark. The header and footer are restyled
     below, so what it still reaches here is form labels and the skip link;
     leaving it packaged renders those in Motley's warm grey on a navy site. */
  --color-dark:             #0D1E37;
  --color-border:           #EBEBEB;

  --rm-navy:       var(--color-primary);
  --rm-green:      var(--color-secondary);
  --rm-green-dark: var(--color-secondary-hover);
  --rm-ink:        var(--color-text);
  --rm-mute:       var(--color-bg-alt);
}

body {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: var(--rm-ink);
}

/* =========================================
   Header
   ========================================= */

.site-header {
  width: 100%;
  height: 140px;
  background: #ffffff;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding: 0;
  margin: 0;
  position: relative;
}

.site-header .header-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}

.site-header .header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header .header-logo a {
  display: block;
  line-height: 0;
}

.site-header .logo-img {
  width: 326px;
  height: 120px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.site-header .header-nav {
  display: flex;
  align-items: center;
}

.site-header .header-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-header .header-nav ul li a,
.site-header .header-nav ul li .nav-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rm-ink);
  text-decoration: none;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.site-header .header-nav ul li .nav-label {
  display: block;
  padding: 0.75rem 1.15rem;
  cursor: pointer;
}

/* A nav heading that owns a dropdown is a <button>, not a <span>: a <span> is not
   focusable, so the dropdown was unreachable by keyboard. Strip the UA button
   chrome so it still reads as a nav label. Typography comes from the rules above,
   which are element-agnostic, so only the box and alignment need resetting here.
   border is zeroed rather than set, because the mobile block further down re-adds
   border-bottom and must keep winning. */
.site-header .header-nav ul li button.nav-label {
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: inherit;
  line-height: inherit;
  width: 100%;
}

/* The dropdown is revealed by :focus-within (see .has-dropdown:focus-within
   below), which is what makes the button alone sufficient — but that gives no
   visible focus ring of its own, and removing the outline would fail 2.4.7. */
.site-header .header-nav ul li button.nav-label:focus-visible {
  outline: 2px solid var(--rm-ink);
  outline-offset: -2px;
}

.site-header .header-nav ul li a:hover,
.site-header .header-nav ul li.has-dropdown:hover > .nav-label {
  opacity: 0.6;
  background: transparent;
  color: var(--rm-ink);
}

/* Active page — override frontend.css default (primary background) */
.site-header .header-nav ul li.nav-item.active > a,
.site-header .header-nav ul li.nav-item.active > .nav-label {
  background: transparent;
  color: var(--rm-green);
  position: relative;
}

.site-header .header-nav ul li.nav-item.active > a::after,
.site-header .header-nav ul li.nav-item.active > .nav-label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--rm-green);
}

.site-header .header-nav ul li.nav-item.active > a:hover,
.site-header .header-nav ul li.nav-item.active.has-dropdown:hover > .nav-label {
  opacity: 1;
  color: var(--rm-green);
}

/* CTA Contact pill never gets the underline */
.site-header .header-nav ul li.nav-item.active > a.nav-cta::after {
  display: none;
}

/* =========================================
   Header dropdown (Services etc.)
   ========================================= */

.site-header .header-nav ul li.nav-item {
  position: relative;
}

.site-header .header-nav .nav-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  line-height: 1;
  vertical-align: 1px;
}

.site-header .header-nav .nav-dropdown {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  min-width: 240px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(13, 30, 55, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 100;
}

.site-header .header-nav ul li.nav-item.has-dropdown:hover > .nav-dropdown,
.site-header .header-nav ul li.nav-item.has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-header .header-nav .nav-dropdown li {
  list-style: none;
  width: 100%;
}

.site-header .header-nav .nav-dropdown li a {
  display: block;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--rm-ink);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.site-header .header-nav .nav-dropdown li a:hover {
  background: var(--rm-mute);
  color: var(--rm-green);
  opacity: 1;
}

/* Draft/inactive nav item indicator (admin preview) */
.site-header .header-nav ul li.nav-item.inactive > a {
  opacity: 0.5;
}

.site-header .header-nav ul li a.nav-cta {
  display: inline-block;
  background: var(--rm-green);
  color: #fff;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.site-header .header-nav ul li a.nav-cta:hover {
  background: var(--rm-green-dark);
  color: #fff;
  opacity: 1;
}

/* Active state for CTA: keep the green pill, no override */
.site-header .header-nav ul li.nav-item.active > a.nav-cta {
  background: var(--rm-green);
  color: #fff;
}

.site-header .header-nav ul li.nav-item.active > a.nav-cta:hover {
  background: var(--rm-green-dark);
  color: #fff;
}

/* Hamburger */
.site-header .hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.site-header .hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.site-header .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header .hamburger.open span:nth-child(2) { opacity: 0; }
.site-header .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================
   Footer
   ========================================= */

.site-footer {
  background: transparent;
  color: var(--rm-ink);
  padding: 0;
  margin: 0;
  margin-top: 0;
  font-size: inherit;
}

/* Override frontend.css generic .footer-col a colour for our links */
.site-footer .footer-col a {
  color: var(--rm-ink);
}

.site-footer .footer-col a:hover {
  color: var(--rm-green);
}

.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Main body */
.site-footer .footer-main {
  background: var(--rm-mute);
  padding: 60px 0 50px;
}

.site-footer .footer-main .footer-inner {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.site-footer .footer-brand {
  flex: 0 0 280px;
}

.site-footer .footer-logo-link {
  display: block;
  line-height: 0;
  margin-bottom: 24px;
}

.site-footer .footer-logo {
  width: 200px;
  height: auto;
}

.site-footer .footer-address {
  font-style: normal;
  font-size: 14px;
  color: var(--rm-ink);
  line-height: 2.1;
  margin: 0;
}

.site-footer .footer-col {
  flex: 1;
}

.site-footer .footer-heading,
.site-footer .footer-col h4.footer-heading,
.site-footer h4.footer-heading {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rm-green);
  letter-spacing: 0.12em;
  margin: 0 0 20px 0;
  padding: 0;
  border: 0;
  border-bottom: 0;
  display: block;
  background: transparent;
}

.site-footer .footer-links {
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
}

.site-footer .footer-links li {
  margin-bottom: 13px;
}

.site-footer .footer-links li a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--rm-ink);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.site-footer .footer-links li a:hover {
  color: var(--rm-green);
}

.site-footer .footer-links li a[href^="mailto"],
.site-footer .footer-links li a[href^="tel"] {
  text-transform: none;
}

.site-footer .footer-social {
  display: flex;
  gap: 8px;
}

.site-footer .footer-social-btn {
  width: 40px;
  height: 40px;
  background: var(--rm-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s;
}

.site-footer .footer-social-btn:hover {
  background: var(--color-primary-hover);
}

/* Legal bar */
.site-footer .footer-legal {
  background: var(--rm-mute);
  border-top: 1px solid #DDE0DA;
  padding: 18px 0;
}

.site-footer .footer-legal-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-footer .footer-legal-links {
  display: flex;
  gap: 28px;
}

.site-footer .footer-legal-links a {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--rm-ink);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.site-footer .footer-legal-links a:hover {
  color: var(--rm-green);
}

.site-footer .footer-copyright {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--rm-ink);
  margin: 0;
}

/* Core's agency credit bar. Its colours are set in Site Settings (navy bar,
   white mark, the old 65% white words as a solid colour); these line it up
   with the footer rows above rather than core's container. */
.site-footer .agency-credit__inner {
  max-width: 1200px;
  padding: 0 20px;
}

.site-footer .agency-credit__link {
  font-family: 'Inter', sans-serif;
}

/* =========================================
   Back to Top
   ========================================= */

.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rm-green);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.2s;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* Lucide chevron-up, painted as a mask rather than a background image: the SVG
   is stroked in currentColor, and currentColor in a data: URI resolves against
   the image's own document, not the button's — as a background it would come
   out black on the green disc. A mask uses alpha only, so background-color
   here is the colour that shows. */
.back-to-top::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: #fff;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tdXAtaWNvbiBsdWNpZGUtY2hldnJvbi11cCI+PHBhdGggZD0ibTE4IDE1LTYtNi02IDYiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tdXAtaWNvbiBsdWNpZGUtY2hldnJvbi11cCI+PHBhdGggZD0ibTE4IDE1LTYtNi02IDYiLz48L3N2Zz4=");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 22px 22px;
  mask-size: 22px 22px;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--rm-green-dark);
}

/* =========================================
   Responsive — 1000px (header collapse)
   ========================================= */

/* 1000px–1200px — keep desktop layout but tighten nav spacing
   so the full-size logo and the menu both fit without overflow */
@media (max-width: 1200px) and (min-width: 1001px) {
  .site-header .header-container {
    gap: 16px;
    padding: 0 20px;
  }

  .site-header .header-nav ul {
    gap: 18px;
  }

  .site-header .header-nav ul li a {
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .site-header .header-nav ul li a.nav-cta {
    padding: 9px 18px;
  }
}

/* 1000px–1108px — shrink logo to 270 to give the nav more room */
@media (max-width: 1108px) and (min-width: 1001px) {
  .site-header .logo-img {
    width: 270px;
    height: auto;
  }
}

@media (max-width: 1000px) {

  .site-header {
    height: auto;
    min-height: 80px;
  }

  .site-header .header-container {
    flex-wrap: wrap;
    padding: 0 16px;
    align-items: center;
    min-height: 80px;
    gap: 0;
  }

  .site-header .logo-img {
    width: 225px;
    height: auto;
  }

  .site-header .hamburger {
    display: flex;
  }

  .site-header .header-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    transition: max-height 0.4s ease, opacity 0.25s ease, padding 0.4s ease;
  }

  .site-header .header-nav.open {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    opacity: 1;
    padding: 16px 0;
  }

  .site-header .header-nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .site-header .header-nav ul li {
    width: 100%;
  }

  .site-header .header-nav ul li a,
  .site-header .header-nav ul li .nav-label {
    display: block;
    padding: 12px 16px;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
  }

  .site-header .header-nav ul li a:hover {
    background: #f9f9f9;
    opacity: 1;
  }

  /* Keep the green pill CTA on mobile too (matches desktop) */
  .site-header .header-nav ul li a.nav-cta {
    display: inline-block;
    background: var(--rm-green);
    color: #fff;
    border-radius: 50px;
    padding: 10px 22px;
    margin: 12px 16px;
    border-bottom: 0;
  }

  .site-header .header-nav ul li a.nav-cta:hover {
    background: var(--rm-green-dark);
    color: #fff;
  }

  /* Active state on mobile — green text for regular items, no underline */
  .site-header .header-nav ul li.nav-item.active > a {
    background: none;
    color: var(--rm-green);
  }

  /* CTA active state keeps the green pill */
  .site-header .header-nav ul li.nav-item.active > a.nav-cta {
    background: var(--rm-green);
    color: #fff;
  }

  .site-header .header-nav ul li.nav-item.active > a::after {
    display: none;
  }

  /* Mobile dropdown — render inline, no hover layer */
  .site-header .header-nav ul li.nav-item.has-dropdown > .nav-dropdown,
  .site-header .header-nav ul li.nav-item.has-dropdown:hover > .nav-dropdown,
  .site-header .header-nav ul li.nav-item.has-dropdown:focus-within > .nav-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: #fafafa;
    padding: 0;
    min-width: 0;
    width: 100%;
  }

  .site-header .header-nav .nav-dropdown li a {
    padding: 12px 32px;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
  }

  .site-header .header-nav .nav-caret {
    display: none;
  }

  /* Footer 2x2 */
  .site-footer .footer-main .footer-inner {
    flex-wrap: wrap;
    gap: 40px 30px;
  }

  .site-footer .footer-brand,
  .site-footer .footer-col {
    flex: 0 0 calc(50% - 15px);
  }
}

/* =========================================
   Responsive — 768px (footer stack)
   ========================================= */

@media (max-width: 768px) {
  .site-footer .footer-main .footer-inner { flex-direction: column; gap: 36px; }
  .site-footer .footer-brand { flex: none; width: 100%; }
  .site-footer .footer-col { flex: none; width: 100%; }
  .site-footer .footer-legal-inner { flex-direction: column; gap: 12px; text-align: center; }
  .site-footer .footer-legal-links { flex-wrap: wrap; justify-content: center; }
}

/* =========================================
   Inner page blocks (Figma 9RY81KlPOOj5Lot9gLqTUw)

   Values here mirror the approved static prototype at
   Z:\05_Projects\Rainmaker Sales\Website\Test — same type scale, spacing,
   radii and full-bleed bands. Change one without the other and they drift.

   These rules hang off the custom_class set on each block design_options by
   RainmakerContentSeeder. The rm-* class on a block is load-bearing: clear it
   in the admin Design tab and the block drops to unstyled core layout.
   ========================================= */

/* Blocks own their own vertical rhythm (prototype: 90px section padding), so
   the container must not add its own or the bands double up. */
.page-body { padding: 0; }
.page-body > .container { max-width: 1200px; padding: 0 20px; }

.page-body .builder-block { margin: 0; padding: 90px 0; }

/* Green eyebrow above a heading, in both the forms it takes on this site.
   `.builder-block__eyebrow` is core's own public_eyebrow field, used wherever the
   block is full width; `.rm-eyebrow` is a class typed into rich text, which is
   the only option on a two-column block, where core would emit the field above
   the whole row instead of inside the text column.

   Both must resolve here or the two look different on the same page. `.page-body`
   is load-bearing on the first: core's `.builder-block__eyebrow` in frontend.css
   sets its own size, spacing and colour, and a bare class selector only ties. */
.page-body .builder-block__eyebrow,
.page-body .rm-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rm-green);
  margin: 0 0 14px;
}

.page-body .builder-block__heading {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0 0 20px;
}

.page-body .cms-content p { color: #4a5568; margin-bottom: 20px; }

/* Prototype .btn-speak — italic green pill. */
.page-body .cms-content .btn-primary,
.page-body .builder-block .btn-primary {
  display: inline-block;
  background: var(--rm-green);
  color: #fff;
  padding: 13px 30px;
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.page-body .cms-content .btn-primary:hover { background: var(--rm-green-dark); color: #fff; }

/* ── Services intro + cards: one row, copy 36% and cards beside it ──
   The two are separate sibling blocks (core wraps each individually), so the
   pair is floated rather than gridded — there is no shared parent to grid on. */

.rm-intro-pair {
  float: left;
  width: 36%;
  padding-right: 80px;
  padding-bottom: 0;
}

.rm-cards { overflow: hidden; }
.rm-cards + .builder-block { clear: both; }

/* ── Navy feature cards, stacked (prototype .services-right) ──────── */

.rm-cards .builder-icon-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rm-cards .builder-icon-grid__item {
  position: relative;
  background: var(--rm-navy);
  border-radius: 24px;
  padding: 24px 96px 24px 28px;
  text-align: left;
}

.rm-cards .builder-icon-grid__title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0 0 8px;
}

.rm-cards .builder-icon-grid__desc {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* Green disc and chevron are decorative, so generated rather than an image an
   editor could clear. Matches prototype .service-card-arrow at 52px. */
.rm-cards .builder-icon-grid__item::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--rm-green);
  color: #fff;
  font-size: 30px;
  line-height: 50px;
  text-align: center;
  padding-left: 2px;
}

.rm-cards .builder-icon-grid__icon { display: none; }

/* ── Alternating image + text (prototype .alt-section) ────────────── */

.rm-split .content-row-grid {
  display: flex;
  align-items: center;
  gap: 70px;
}

.rm-split .cms-content { flex: 0 0 44%; }
.rm-split .builder-block__image { flex: 1; }

.rm-split .builder-block__image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* The heading sits above the flex row, so it takes the same 44% measure to
   line up with the copy beneath it. */
.rm-split .builder-block__heading {
  font-size: 58px;
  line-height: 1.0;
  letter-spacing: -0.01em;
  max-width: 44%;
}

/* Grey alternating band (prototype .alt-section.grey-bg). Full-bleed inside a
   fixed-width container: the padding restores the gutter the negative margin
   just cancelled. */
.rm-panel-soft,
.rm-steps,
.rm-cta {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 20px);
  padding-right: calc(50vw - 50% + 20px);
}

.rm-panel-soft { background: var(--color-primary-tint); }

/* ── Navy mission panel (about page) ──────────────────────────────── */

.rm-panel-navy {
  background: var(--rm-navy);
  border-radius: 40px;
  padding: 64px 72px;
  color: #fff;
}

.rm-panel-navy .builder-block__heading { color: #fff; }
.rm-panel-navy .cms-content p { color: rgba(255, 255, 255, 0.92); }

/* ── Numbered impact list (icon_grid + counters) ──────────────────── */

.rm-numbered .builder-icon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  counter-reset: rm-step;
}

.rm-numbered .builder-icon-grid__item {
  counter-increment: rm-step;
  display: grid;
  grid-template-columns: 76px 3px 1fr;
  gap: 22px;
  align-items: start;
  text-align: left;
}

/* Numbering is generated, not typed, so reordering in the admin renumbers. */
.rm-numbered .builder-icon-grid__item::before {
  content: counter(rm-step, decimal-leading-zero);
  font-size: 52px;
  font-weight: 300;
  line-height: 1;
  color: var(--rm-navy);
}

.rm-numbered .builder-icon-grid__item::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  min-height: 54px;
  background: var(--rm-green);
  border-radius: 2px;
}

.rm-numbered .builder-icon-grid__title,
.rm-numbered .builder-icon-grid__desc { grid-column: 3; }

.rm-numbered .builder-icon-grid__title {
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0 0 6px;
}

.rm-numbered .builder-icon-grid__desc { margin: 0; }
.rm-numbered .builder-icon-grid__icon { display: none; }

/* ── 5-step framework ─────────────────────────────────────────────── */

.rm-steps { background: var(--color-primary-tint); }

.rm-steps .builder-block__heading {
  font-size: 30px;
  font-weight: 400;
  color: var(--rm-green);
}

/* Inverted on purpose: core renders the accent span AFTER the plain heading and
   the design's green half comes first, so the base colour is the accent one and
   the span carries the body colour. */
.rm-steps .builder-block__heading-accent {
  color: var(--rm-navy);
  font-weight: 800;
}

.rm-steps .builder-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  counter-reset: rm-framework;
}

.rm-steps .builder-icon-grid__item { counter-increment: rm-framework; text-align: center; }

.rm-steps .builder-icon-grid__item::before {
  content: counter(rm-framework, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--rm-navy);
  color: #fff;
  font-size: 36px;
  font-weight: 300;
}

.rm-steps .builder-icon-grid__title {
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0 0 12px;
}

.rm-steps .builder-icon-grid__desc { font-size: 15px; margin: 0; }

/* The disc holds the step's icon where there is one and the step NUMBER where
   there is not, so an item with no artwork degrades to the numbering the
   framework is named after rather than to an empty circle. :has() is what picks
   between them: the counter ::before above is suppressed the moment an icon is
   set, and comes back on its own if it is cleared. */
.rm-steps .builder-icon-grid__item:has(.builder-icon-grid__icon)::before { content: none; }

.rm-steps .builder-icon-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--rm-navy);
}

/* The artwork is white-on-transparent, straight from the design, so it only
   reads against the navy disc. Contain, never cover: these are line icons and
   cropping one loses the shape that identifies the step. */
.rm-steps .builder-icon-grid__icon img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
}

/* ── CTA band (prototype .cta-banner) ─────────────────────────────── */

.rm-cta { background: var(--rm-navy); padding-top: 60px; padding-bottom: 60px; }

.rm-cta .builder-cta { background: none; padding: 0; border-radius: 0; }

/* max-width and text-align are overrides, not decoration: core caps __inner at
   720px and centres it, which forces the heading and button onto separate
   centred lines instead of the design's split row. */
.rm-cta .builder-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  max-width: none;
  text-align: left;
}

/* The green half of the heading, rendered as a span inside the h2 by core's
   Heading highlight field, so both halves stay one flex item on one line. */
.rm-cta .builder-cta__heading-accent {
  font-weight: 700;
  color: var(--rm-green);
}

.rm-cta .builder-cta h2,
.rm-cta .builder-cta h3 {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.rm-cta .builder-cta .btn-primary {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50px;
  padding: 13px 36px;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  color: #fff;
}

.rm-cta .builder-cta .btn-primary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* ── Contact details and form (Figma 103:36) ──────────────────────────
   One form_text block: the contact column is its rich text, the panel on the
   right is a real CmsForm rendered by core. Everything below restyles core's
   own element names (.content-row-grid, .cms-form-wrap, .form-group) so the
   client can edit the fields, the intro line and the button wording in
   Forms & Submissions and this page follows.

   Values mirror the prototype (Z:\05_Projects\Rainmaker Sales\Website\Test),
   which is the Figma frame scaled to a 1200px container. The one deliberate
   departure is the Send button's min-width: the prototype lets it shrink to
   its text, the design draws it 280px in a 1585px content width. */

.rm-contact .content-row-grid {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 80px;
  align-items: start;
}

/* .page-body is load-bearing here, not tidiness: core's
   `.page-body .cms-content h2` is 0,2,1 and a bare `.rm-contact
   .rm-contact-title` at 0,2,0 loses to it, rendering this heading at core's
   1.35rem instead of the design's 52px. */
.page-body .rm-contact .rm-contact-title {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0 0 44px;
}

.rm-contact .rm-contact-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rm-green);
  margin: 34px 0 6px;
}

.rm-contact .rm-contact-value {
  font-size: 21px;
  font-weight: 800;
  color: var(--rm-navy);
  margin: 0;
  word-break: break-word;
}

.rm-contact .rm-contact-value a { color: inherit; text-decoration: none; }
.rm-contact .rm-contact-value a:hover { color: var(--rm-green); }

/* Follow-us row. The icon is a mask over the link's own text, so clearing
   .rm-social in the admin degrades to two readable text links rather than to
   nothing — inline SVG cannot be used here because the cms purifier profile
   strips it the first time the block is saved. */
.rm-contact .rm-contact-social {
  display: flex;
  gap: 10px;
  margin: 0;
}

.rm-contact .rm-social {
  width: 34px;
  height: 34px;
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background-color: var(--rm-navy);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 26px 26px;
  mask-size: 26px 26px;
}

.rm-contact .rm-social:hover { background-color: var(--rm-green); }

.rm-contact .rm-social--facebook {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H15C13.67 2 12.4 2.53 11.46 3.46C10.53 4.4 10 5.67 10 7V10H7V14H10V22H14V14H17L18 10H14V7C14 6.47 14.53 6 15 6H18V2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H15C13.67 2 12.4 2.53 11.46 3.46C10.53 4.4 10 5.67 10 7V10H7V14H10V22H14V14H17L18 10H14V7C14 6.47 14.53 6 15 6H18V2Z'/%3E%3C/svg%3E");
}

.rm-contact .rm-social--linkedin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 8C17.59 8 19.12 8.63 20.24 9.76C21.37 10.88 22 12.41 22 14V21H18V14C18 13.47 17.79 12.96 17.41 12.59C17.04 12.21 16.53 12 16 12C15.47 12 14.96 12.21 14.59 12.59C14.21 12.96 14 13.47 14 14V21H10V14C10 12.41 10.63 10.88 11.76 9.76C12.88 8.63 14.41 8 16 8Z'/%3E%3Cpath d='M6 9H2V21H6V9Z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 8C17.59 8 19.12 8.63 20.24 9.76C21.37 10.88 22 12.41 22 14V21H18V14C18 13.47 17.79 12.96 17.41 12.59C17.04 12.21 16.53 12 16 12C15.47 12 14.96 12.21 14.59 12.59C14.21 12.96 14 13.47 14 14V21H10V14C10 12.41 10.63 10.88 11.76 9.76C12.88 8.63 14.41 8 16 8Z'/%3E%3Cpath d='M6 9H2V21H6V9Z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
}

/* The form panel. */
.rm-contact .cms-form-wrap {
  margin-top: 0;
  background: var(--rm-mute);
  border-radius: 16px;
  padding: 52px 56px;
}

/* The form's own Intro line (v15.20), styled as the page's green eyebrow so it
   reads as one with "Connect With Our Sales Experts" opposite it. */
.rm-contact .cms-form__intro {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rm-green);
  margin: 0 0 30px;
}

.rm-contact .form-group { margin-bottom: 20px; }

/* The design has no visible field labels — the placeholder carries the name.
   Hidden, not removed: the label stays in the accessibility tree, so the
   control still has a name for screen readers and voice control. [for] is what
   scopes this to the field label; a checkbox's wrapping label has no for. */
.rm-contact .form-group > label[for] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rm-contact .form-group input,
.rm-contact .form-group textarea {
  width: 100%;
  display: block;
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 26px 30px;
  font-family: inherit;
  font-size: 16px;
  color: var(--rm-ink);
  box-shadow: none;
}

.rm-contact .form-group textarea { min-height: 160px; resize: vertical; }

.rm-contact .form-group input::placeholder,
.rm-contact .form-group textarea::placeholder {
  color: var(--rm-ink);
  opacity: 1;
}

/* The fields have no border, so the focus ring is the only thing that shows
   which one has the caret. Inset so it cannot be clipped by the panel. */
.rm-contact .form-group input:focus,
.rm-contact .form-group textarea:focus {
  outline: 2px solid var(--rm-green);
  outline-offset: -2px;
  border: none;
  box-shadow: none;
}

.rm-contact .form-error { font-size: 13px; margin-top: 6px; }

.rm-contact .form-actions { margin-top: 12px; }

/* Inherits the green pill from `.page-body .builder-block .btn-primary`; a
   <button> needs the font and cursor stating, and the design draws it far
   wider than its four letters. */
.rm-contact .form-actions .btn-primary {
  font-family: inherit;
  cursor: pointer;
  min-width: 205px;
  padding-block: 16px;
  text-align: center;
}

.rm-contact .form-actions .btn-primary:hover { background: var(--rm-green-dark); }

/* ── Case study detail ────────────────────────────────────────────── */

/* The green section heading. `.page-body .cms-content` is load-bearing and is
   not decoration: this class is 0,1,0 on its own and core's
   `.page-body .cms-content h3` sets a font-size at 0,2,1, so the bare class
   kept its colour and lost its size, rendering every section heading at core's
   ~18px instead of the design's 26px. */
.page-body .cms-content .rm-case-heading {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--rm-green);
  margin: 48px 0 18px;
}

.page-body .cms-content .rm-case-heading:first-child { margin-top: 0; }

.rm-case-stats .builder-stat__value { font-weight: 300; color: var(--rm-navy); }

.rm-case-stats .builder-stat__label {
  font-weight: 800;
  text-transform: uppercase;
  color: var(--rm-navy);
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .rm-intro-pair { float: none; width: auto; padding-right: 0; padding-bottom: 40px; }
  .rm-cards { padding-top: 0; }
  .rm-steps .builder-icon-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 20px; }
  .rm-contact .content-row-grid { grid-template-columns: 1fr; gap: 44px; }
  .page-body .rm-contact .rm-contact-title { font-size: 42px; margin-bottom: 34px; }
}

@media (max-width: 768px) {
  .page-body .builder-block { padding: 60px 0; }
  .page-body .builder-block__heading { font-size: 32px; }

  .rm-split .content-row-grid { flex-direction: column; gap: 40px; }
  .rm-split .cms-content, .rm-split .builder-block__image { flex: none; width: 100%; }
  .rm-split .builder-block__image img { height: 260px; }
  .rm-split .builder-block__heading { font-size: 38px; max-width: 100%; }

  .rm-panel-navy { padding: 40px 26px; border-radius: 24px; }

  .rm-numbered .builder-icon-grid__item { grid-template-columns: 52px 3px 1fr; gap: 14px; }
  .rm-numbered .builder-icon-grid__item::before { font-size: 34px; }
  .rm-numbered .builder-icon-grid__title { font-size: 20px; }

  .rm-steps .builder-icon-grid { grid-template-columns: 1fr; }
  .rm-steps .builder-block__heading { font-size: 22px; }

  .rm-cta { padding-top: 44px; padding-bottom: 44px; }
  .rm-cta .builder-cta__inner { flex-direction: column; text-align: center; }
  .rm-cta .builder-cta h2, .rm-cta .builder-cta h3 { font-size: 24px; }

  .page-body .rm-contact .rm-contact-title { font-size: 34px; }
  .rm-contact .rm-contact-value { font-size: 17px; }
  .rm-contact .cms-form-wrap { padding: 32px 24px; }
  .rm-contact .form-group input,
  .rm-contact .form-group textarea { padding: 20px 22px; }
  .rm-contact .form-actions .btn-primary { min-width: 0; width: 100%; }
}


/* =========================================
   Home page

   Every section is a structured, editable block. There is no raw HTML on this
   page: the hero was the last one, and v15.18 replaced it with core's
   `split_hero` block so the client can edit their own page opener.

   Two layers:

   1. Core block element names (`.builder-hero__*`, `.builder-cta__*`,
      `.testimonial-card *`) restyled to the design. Core owns the structure;
      this file owns the skin.

   2. `u-rm-*` — registered layout utilities (config/cms.php => block_utilities).
      These style core's own block markup, so the content stays editable and an
      editor can see and re-apply each one as a labelled checkbox in the block
      Design tab.

   Values are copied from the signed-off prototype
   (Z:\05_Projects\Rainmaker Sales\Website\Test\css\style.css), not re-derived.
   See CMS-Dev/Documentation/DESIGN-TO-CMS.md.

   The prototype's four slider dots under the testimonials come from the
   Content List's Carousel style: five testimonials two at a time is four
   stops. See the testimonial rules below.
   ========================================= */

/* Full-bleed WITHOUT vw.
   ----------------------
   100vw counts the classic scrollbar; the layout box does not. Anything bled
   with `calc(50% - 50vw)` therefore sits a scrollbar-width too far right, is
   clipped on the left by body{overflow-x:clip}, and stops short of the right
   edge. It reads as "the bands are shifted and don't reach the edge".

   So this page does not bleed anything. The block container is unwrapped to
   full width, and every block puts the 1160px design grid back with its own
   horizontal padding. A band's background is then genuinely edge to edge
   because the element itself is, and no viewport unit is involved.

   --rm-edge is the distance from the page edge to the grid, i.e. the container
   margin plus its 20px gutter. Every element using it shares the same
   containing-block width (the unwrapped container), so the percentage resolves
   to the same value in each — that is what makes one expression safe to reuse. */

body:has(.builder-block--split_hero) .page-body > .container {
  max-width: none;
  width: 100%;
  padding: 0;
}

/* The hero butts straight up under the header; core's body padding would
   otherwise open a white strip above the navy. */
body:has(.builder-block--split_hero) .page-body { padding-top: 0; }

/* Core renders a page H1 above the body. The split_hero block supplies the
   visible one (its "main heading" toggle is on), so this duplicate is hidden
   from sight but left in the document rather than removed. */
body:has(.builder-block--split_hero) .page-body-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body:has(.builder-block--split_hero) .page-hero { display: none; }

/* Each block spans the full page and restores the grid with its own gutter.
   Only the horizontal padding is set here: vertical padding is each band's own
   rhythm, and a blanket `padding: 0` at this specificity (0,3,1) would beat
   every .u-rm-* utility (0,1,0) and silently flatten all of it. */
body:has(.builder-block--split_hero) .page-body .builder-block {
  margin: 0;
  padding-block: 0;
  padding-inline: max(20px, calc(50% - 580px));
}

/* Each band then re-states its own rhythm at THIS specificity. The inner-page
   rule `.page-body .builder-block { padding: 90px 0 }` (0,2,0) outranks a bare
   .u-rm-* utility (0,1,0), so without these the navy bands render at 90px
   instead of 60px and the hero gets 90px of white above it. */
body:has(.builder-block--split_hero) .page-body .builder-block.u-rm-band-grey { padding-block: 90px; }
body:has(.builder-block--split_hero) .page-body .builder-block.u-rm-band-navy { padding-block: 60px; }
/* The services row is on white, so it carries no band class and would otherwise
   get no vertical rhythm at all — its copy butts straight against the hero. */
body:has(.builder-block--split_hero) .page-body .builder-block.u-rm-cards-navy { padding-block: 90px; }
body:has(.builder-block--split_hero) .page-body .builder-block.u-rm-display:not(.u-rm-band-grey):not(.u-rm-band-navy) { padding-block: 90px; }

/* Core bleeds split_hero itself with 100vw, which is the very thing this page
   avoids. The container is already full width here, so the hero needs no bleed
   at all — and its own __inner re-centres the copy on the grid. */
body:has(.builder-block--split_hero) .page-body .builder-block--split_hero {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* ── 1. Hero (core's split_hero block, branded) ────────────────────── */

/* Values ported from the prototype's .hero-section, which the block's own
   element names now carry. Core supplies the structure and the bleed; this is
   the Rainmaker skin on top of it. */

.builder-hero {
  background: var(--color-primary);
  min-height: 580px;
}

.builder-hero__media { width: 65%; }

/* The gradient is what makes the photo read as bleeding into the navy rather
   than sitting in a box. Without it the copy collides with the image edge.
   Core ships a plainer default scrim; these are the prototype's stops. */
.builder-hero__media::before {
  background: linear-gradient(
    to right,
    var(--color-primary) 0%,
    rgba(var(--color-primary-rgb), 0.90) 20%,
    rgba(var(--color-primary-rgb), 0.30) 38%,
    rgba(var(--color-primary-rgb), 0.0) 48%
  );
}

.builder-hero__media img {
  object-position: center top;
}

.builder-hero__inner {
  max-width: 1200px;
  padding: 80px 20px;
  min-height: 580px;
}

.builder-hero__text { flex: 0 0 50%; max-width: 580px; }

.builder-hero__badge { gap: 10px; margin-bottom: 28px; }

.builder-hero__badge-photo,
picture.builder-hero__badge-photo img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.builder-hero__badge-stars {
  color: #F5C518;
  font-size: 13px;
  letter-spacing: 3px;
}

.builder-hero__badge-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  opacity: 1;
  max-width: 210px;
}

/* The tagline is the opener's SECOND LINE, in white, at the heading's own
   size: Heading = the green line, Tagline = the white line, both edited in the
   block. It is the only route to a two-colour opener on this site: the Heading
   field is escaped on output, so a <span> typed into it renders as text, and
   the block has no accent field. The cost is that the tagline is no longer a
   small sub-line here; a genuine sub-line belongs in Supporting Text. The
   admin's own hint under the box ("the short line under the heading")
   describes core, not this site. */
.builder-hero__heading,
.builder-hero__tagline {
  font-family: 'Inter', sans-serif;
  font-size: 92px;
  font-weight: 800;
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 28px 0;
}

.builder-hero__heading { color: var(--rm-green); }
.builder-hero__tagline { color: #ffffff; }

/* The two lines butt together so they read as one heading; the 28px gap to
   the body sits on whichever renders last, so a hero with no tagline keeps
   the same rhythm. */
.builder-hero__heading:has(+ .builder-hero__tagline) { margin-bottom: 0; }

.builder-hero__body {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
  margin-bottom: 36px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.75;
}

.builder-hero__actions { gap: 14px; }

.builder-hero__actions .btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: all 0.2s;
}

/* The first button is the outline one and the second the solid green, matching
   the prototype's order. Core renders button 1 as .btn-outline and button 2 as
   .btn-primary, so the mapping is by class rather than by position. */
.builder-hero__actions .btn-outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  background: transparent;
}

.builder-hero__actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

.builder-hero__actions .btn-primary { background: var(--rm-green); color: #fff; border-color: var(--rm-green); }
.builder-hero__actions .btn-primary:hover { background: var(--rm-green-dark); border-color: var(--rm-green-dark); color: #fff; }

/* ── 2. Registered utilities ──────────────────────────────────────── */

/* u-rm-band-grey / u-rm-band-navy — full-width colour band. padding-block only:
   the horizontal gutter comes from the shared block rule above, and using the
   `padding` shorthand here would zero it. */
.u-rm-band-grey { background: var(--color-primary-tint); padding-block: 90px; }
.u-rm-band-navy { background: var(--color-primary); padding-block: 60px; }

/* The services row: core's icon_grid intro column (v15.19), which replaced a
   text block and an icon_grid floated together by the retired rm-pair-left
   utility. One block now, so deleting or reordering it moves the whole row and
   there is nothing to orphan.

   Core's default is a 4fr/6fr grid with a 2.5rem gap; the prototype is 38/62
   with 80px, so only those two values are overridden. The block already carries
   the page's edge gutter from the shared rule above, so the row measures
   against the 1160px grid without any arithmetic of its own. */
.u-rm-cards-navy .builder-icon-grid-row {
  grid-template-columns: 38fr 62fr;
  gap: 80px;
  margin: 0;
}

.u-rm-cards-navy .builder-icon-grid__intro h2 {
  font-size: 46px;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 20px;
}

.u-rm-cards-navy .builder-icon-grid__intro p { color: #555; margin-bottom: 32px; }

/* u-rm-cards-navy — icon_grid as the navy cards with a green chevron disc.
   The disc is decorative, so it is generated rather than an image an editor
   could clear. Prototype .service-card-arrow, 52px. */
.u-rm-cards-navy .builder-icon-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.u-rm-cards-navy .builder-icon-grid__item {
  position: relative;
  background: var(--color-primary);
  border-radius: 24px;
  padding: 24px 96px 24px 28px;
  text-align: left;
}

.u-rm-cards-navy .builder-icon-grid__title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0 0 8px;
}

.u-rm-cards-navy .builder-icon-grid__desc {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.u-rm-cards-navy .builder-icon-grid__item::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--rm-green);
  color: #fff;
  font-size: 30px;
  line-height: 50px;
  text-align: center;
  padding-left: 2px;
}

.u-rm-cards-navy .builder-icon-grid__icon { display: none; }

/* An alternating section keeps the 90px rhythm whether or not it sits on a
   band. Excluded when it does, or the band's own padding stacks on top. */
.u-rm-display:not(.u-rm-band-grey):not(.u-rm-band-navy) { padding-block: 90px; }

/* u-rm-display — the oversized alternating-section heading, authored inside the
   block content so it sits in the text column rather than above the row. */
.u-rm-display .cms-content h2 {
  font-size: 58px;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}

.u-rm-display .cms-content p { color: #4a5568; margin-bottom: 32px; }

/* image_text laid out to the prototype's .alt-section proportions. */
.u-rm-display .content-row-grid,
.u-rm-video .content-row-grid {
  display: flex;
  align-items: center;
  gap: 70px;
}

.u-rm-display .cms-content,
.u-rm-video .cms-content { flex: 0 0 44%; }

.u-rm-display .builder-block__image,
.u-rm-video .builder-block__image { flex: 1; position: relative; }

.u-rm-display .builder-block__image img,
.u-rm-video .builder-block__image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* Stacked pair, to the prototype's .alt-image-stack proportions: the main photo
   at 76%x88% from the top left, the inset at 58%x62% overlapping the bottom
   right. Both are absolutely placed inside a fixed 420px box.

   The 420px height above is set on EVERY img inside .builder-block__image, so
   without these overrides it hits the inset too and blows it up to the size of
   the main photo — which reads as one photo covering another rather than a
   deliberate pair. */
.u-rm-display .builder-block__image--stacked {
  height: 420px;
  padding: 0;
}

.u-rm-display .builder-block__image--stacked > picture,
.u-rm-display .builder-block__image--stacked > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 76%;
  height: 88%;
  display: block;
}

.u-rm-display .builder-block__image--stacked > picture > img {
  width: 100%;
  height: 100%;
}

.u-rm-display .builder-block__image--stacked .builder-block__image-inset {
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 62%;
  border: 5px solid #fff;
  border-radius: 16px;
  overflow: hidden;
}

.u-rm-display .builder-block__image--stacked .builder-block__image-inset > img {
  border-radius: 12px;
}

/* u-rm-video — decorative play disc over the image. Decorative on purpose: it
   is not wired to a player, so it is a pseudo-element rather than a control
   that would announce itself to a screen reader as an actionable button. */
.u-rm-video .builder-block__image::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  z-index: 2;
}

.u-rm-video .builder-block__image::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 22px solid var(--color-text);
  z-index: 3;
}

/* Eyebrow + button inside block content on this page. */
body:has(.builder-block--split_hero) .page-body .rm-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rm-green);
  letter-spacing: 0.14em;
  margin: 0 0 14px;
}

body:has(.builder-block--split_hero) .page-body .cms-content .btn-primary {
  display: inline-block;
  background: var(--rm-green);
  color: #fff;
  padding: 13px 30px;
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

body:has(.builder-block--split_hero) .page-body .cms-content .btn-primary:hover { background: var(--rm-green-dark); color: #fff; }

/* CTA band inside u-rm-band-navy. */
.u-rm-band-navy .builder-cta { background: none; padding: 0; border-radius: 0; }

/* max-width and text-align are overrides, not decoration: core caps __inner at
   720px and centres .builder-cta, which forces the heading and button onto
   separate centred lines instead of the prototype's split row. */
.u-rm-band-navy .builder-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  max-width: none;
  text-align: left;
}

/* The green half of the heading. It is the block's Heading highlight field,
   rendered as a span inside the h2, so both halves are one flex item and stay
   on one line. */
.u-rm-band-navy .builder-cta__heading-accent {
  font-weight: 700;
  color: var(--rm-green);
}

.u-rm-band-navy .builder-cta h2,
.u-rm-band-navy .builder-cta h3 {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.u-rm-band-navy .builder-cta .btn-primary {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50px;
  padding: 13px 36px;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.u-rm-band-navy .builder-cta .btn-primary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* Testimonials feed inside the grey band. The heading is two-tone: the plain
   half is the block's Page heading, the green half its Heading highlight. */
.u-rm-band-grey .builder-block__heading {
  font-size: 28px;
  font-weight: 400;
  color: var(--rm-green);
  text-transform: uppercase;
  margin: 0 0 48px;
}

.u-rm-band-grey .builder-block__heading-accent {
  font-weight: 800;
  color: var(--color-text);
}

/* ── Responsive (prototype breakpoint: 768px) ─────────────────────── */

@media (max-width: 1000px) {
  /* The services row stacks earlier than core's 768px, because 38% of the grid
     is too narrow for the heading before that. Core's own stacking rules take
     over below 768px; this just brings the break forward. */
  .u-rm-cards-navy .builder-icon-grid-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .builder-hero { min-height: unset; }

  .builder-hero__inner {
    flex-direction: column;
    padding: 44px 16px 60px;
    min-height: unset;
  }

  .builder-hero__media { width: 100%; }

  .builder-hero__media::before {
    background: linear-gradient(
      to bottom,
      rgba(var(--color-primary-rgb), 0.25) 0%,
      var(--color-primary) 75%
    );
  }

  .builder-hero__text { flex: none; width: 100%; max-width: 100%; }
  .builder-hero__heading,
  .builder-hero__tagline { font-size: 56px; }
  /* The quote is the first thing to go: at this width it wraps to four lines
     and pushes the headline below the fold. Photo and stars still carry it. */
  .builder-hero__badge-text { display: none; }

  /* padding-block, not the shorthand: the shorthand would zero the edge gutter
     these blocks depend on. Scoped to match the base rules above, which are
     0,4,1 — a media query does not raise specificity, so a bare .u-rm-* here
     would simply lose to them and mobile would keep the desktop rhythm. */
  body:has(.builder-block--split_hero) .page-body .builder-block.u-rm-band-grey { padding-block: 60px; }
  body:has(.builder-block--split_hero) .page-body .builder-block.u-rm-band-navy { padding-block: 44px; }
  body:has(.builder-block--split_hero) .page-body .builder-block.u-rm-display:not(.u-rm-band-grey):not(.u-rm-band-navy) { padding-block: 60px; }
  .u-rm-cards-navy .builder-icon-grid__intro h2 { font-size: 32px; }

  .u-rm-display .content-row-grid,
  .u-rm-video .content-row-grid { flex-direction: column; gap: 40px; }

  .u-rm-display .cms-content, .u-rm-video .cms-content,
  .u-rm-display .builder-block__image, .u-rm-video .builder-block__image { flex: none; width: 100%; }

  .u-rm-display .cms-content h2 { font-size: 38px; }

  .u-rm-display .builder-block__image img,
  .u-rm-video .builder-block__image img { height: 260px; }

  .u-rm-band-navy .builder-cta__inner { flex-direction: column; text-align: center; }
  .u-rm-band-navy .builder-cta h2, .u-rm-band-navy .builder-cta h3 { font-size: 24px; }
}

/* Testimonial feed styled to the prototype's .stories-section. Core's feed
   emits .testimonial-card > .rating + .quote + .testimonial-card__avatar +
   .author > .role — a flat list in that order, so the prototype's own class
   names do not apply here. These are the equivalents. */

/* Core gives the section a top rule and 2rem of padding; the band supplies
   both, so they would double up. */
.u-rm-band-grey .content-section { padding: 0; border-top: 0; }

.u-rm-band-grey .content-section > .container {
  max-width: 1200px;
  padding: 0;
  display: flex;
  gap: 60px;
}

/* Grid rather than flow: the byline is a two-column arrangement (photo beside
   stars-over-name) built from four flat siblings with no wrapper to nest. The
   photo spans both byline rows, which is what puts it centred against them. */
.u-rm-band-grey .testimonial-card {
  flex: 1;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 16px;
}

.u-rm-band-grey .testimonial-card .quote {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 16px;
  line-height: 1.75;
  font-style: italic;
  color: var(--color-text);
  margin-bottom: 28px;
}

.u-rm-band-grey .testimonial-card__avatar,
.u-rm-band-grey picture.testimonial-card__avatar {
  grid-column: 1;
  grid-row: 2 / span 2;
  align-self: center;
  width: 52px;
  height: 52px;
  margin: 0;
}

/* Core emits .rating BEFORE .quote; the design wants it under, beside the
   photo. Grid placement moves it without touching core's markup order. */
.u-rm-band-grey .testimonial-card .rating {
  grid-column: 2;
  grid-row: 2;
  color: var(--rm-green);
  font-size: 14px;
  letter-spacing: 4px;
  margin: 0 0 6px;
  align-self: end;
}

.u-rm-band-grey .testimonial-card .author {
  grid-column: 2;
  grid-row: 3;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  align-self: start;
}

.u-rm-band-grey .testimonial-card .role { font-weight: 400; }

@media (max-width: 768px) {
  .u-rm-band-grey .content-section > .container { flex-direction: column; gap: 40px; }
}

/* Testimonials as a carousel (Content List Style: Carousel, core 26.09.128).
   Two across and 60px apart, as the design's pair. The carousel is the
   container's only child in the flex row above, so it has to take the row's
   width: left to size itself it measures its own track and runs off the band. */
.u-rm-band-grey .content-section > .container > .builder-carousel { flex: 1; min-width: 0; margin: 0; }
.u-rm-band-grey .builder-carousel__track { gap: 60px; }
/* Core's slide width has a 1rem gap baked into it, so changing the gap alone
   pushes the second card off the row. Restated here for 60px. */
.u-rm-band-grey .builder-carousel__slide { flex-basis: calc((100% - 60px) / 2); }
/* Every byline on one line across the row, whatever the length of each quote. */
.u-rm-band-grey .builder-carousel .testimonial-card { grid-template-rows: 1fr auto auto; }
/* The design's slider indicator, as drawn on Services: current green, the rest navy. */
.u-rm-band-grey .builder-carousel__dot { background: var(--rm-navy); }
.u-rm-band-grey .builder-carousel__dot.is-active,
.u-rm-band-grey .builder-carousel__dot:hover { background: var(--rm-green); }
.u-rm-band-grey .builder-carousel__prev,
.u-rm-band-grey .builder-carousel__next { color: var(--rm-navy); }

@media (max-width: 768px) {
  .u-rm-band-grey .builder-carousel__track { gap: 24px; }
  .u-rm-band-grey .builder-carousel__slide { flex-basis: 85%; }
}


/* =========================================
   FAQs page (Figma 103:176)

   A section index page, not a Page: /faqs is rendered by frontend/faq.blade.php,
   which drops its own <details> list as soon as the section page carries builder
   blocks. So the four blocks the seeder puts there ARE the page, and the FAQ rows
   come from a content_feed of type `faqs` — the same records the client edits
   under FAQs in the admin, not a second copy typed into an accordion block.

   Row metrics are the signed-off prototype's (.faq-list / .faq-q / .faq-toggle in
   Z:\05_Projects\Rainmaker Sales\Website\Test\css\style.css), mapped onto the
   <details class="faq-item"> > <summary> + .faq-answer that core actually emits.
   ========================================= */

/* Same full-width treatment the home page uses, for the same reason: the grey
   testimonial band and the navy CTA have to reach both page edges, and doing
   that with calc(50% - 50vw) counts the scrollbar and lands ~17px off. The
   container is unwrapped instead and each block puts the grid back itself.
   Keyed off the path, not a block type, because a block is content and can move.

   Both spellings, because the two environments disagree: section_faqs_slug is
   'faqs' here and empty on the live server, where it falls back to core's 'faq'
   default. Matching only one silently styles nothing on the other. :is() keeps
   the specificity identical to a single attribute selector, so the 0,4,1 scoping
   below still outranks core's .page-body .builder-block rhythm. */
body:is([data-path="faq"],[data-path="faqs"]) .page-body > .container {
  max-width: none;
  width: 100%;
  padding: 0;
}

body:is([data-path="faq"],[data-path="faqs"]) .page-body .builder-block {
  margin: 0;
  padding-block: 0;
  padding-inline: max(20px, calc(50% - 580px));
}

/* Each band re-states its rhythm at this specificity (0,4,1). A bare .rm-faq-*
   class is 0,1,0 and loses to core's .page-body .builder-block { padding: 90px 0 }
   at 0,2,0, which would put 90px between the heading and the rows. */
body:is([data-path="faq"],[data-path="faqs"]) .page-body .builder-block.rm-faq-intro { padding-block: 90px 0; }
body:is([data-path="faq"],[data-path="faqs"]) .page-body .builder-block.rm-faq-list  { padding-block: 0 90px; }
body:is([data-path="faq"],[data-path="faqs"]) .page-body .builder-block.u-rm-band-grey { padding-block: 90px; }
body:is([data-path="faq"],[data-path="faqs"]) .page-body .builder-block.u-rm-band-navy { padding-block: 60px; }

/* The page opens on the shared inner-page banner (see "Shared inner-page banner"
   below), which carries the visible title. Core's H1 stays in the accessibility
   tree as the document heading, hidden here exactly as on the other banner pages. */

body:is([data-path="faq"],[data-path="faqs"]) .page-body-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Intro: eyebrow, heading, standfirst ──────────────────────────── */

/* The heading is the block's public_heading, so this targets core's
   `.builder-block__heading` rather than an h2 in the body. `.page-body` is
   load-bearing: the site's own `.page-body .builder-block__heading` sets 46px at
   0,2,0 further up this file, and a bare `.rm-faq-intro .builder-block__heading`
   would only tie it. */
.page-body .rm-faq-intro .builder-block__heading {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0 0 24px;
}

.rm-faq-intro .cms-content p {
  color: var(--rm-ink);
  max-width: 1000px;
  margin-bottom: 0;
}

/* ── The rows ─────────────────────────────────────────────────────── */

/* Core wraps a feed in .content-section > .container, which is a second grid
   inside the one the block already established. Flatten both or the rows sit in
   a narrower column than the heading above them. */
.rm-faq-list .content-section {
  padding: 0;
  border-top: 0;
}

.rm-faq-list .content-section > .container {
  max-width: none;
  padding: 0;
}

.rm-faq-list details.faq-item {
  border-top: 1px solid #e2e8ee;
}

.rm-faq-list details.faq-item:last-child {
  border-bottom: 1px solid #e2e8ee;
}

/* Row metrics are the Figma frame's own, divided by the ratio between its
   1403px grid and the CMS's 1160px one (0.827) — so 28px padding becomes 23,
   the 59px tile becomes 48, and the row keeps the design's proportions rather
   than the tighter ones the prototype settled on. The page-wide type (eyebrow,
   h2, body) still follows the site, because those are shared with five other
   pages; the row is the only component this page does not share. */
/* min-height, not taller padding: the tile is absolutely positioned so it adds
   nothing to the row box, and without a floor the row collapses to whatever one
   line of text needs (74px against the design's 95px) with the tile overhanging
   its own row. 48 tile + 23 + 23 = 94. Flex centres the question against the
   tile; the padding still governs a question that wraps to two lines. */
.rm-faq-list details.faq-item > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 94px;
  list-style: none;
  cursor: pointer;
  padding: 23px 100px 23px 26px;
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--rm-navy);
}

/* Safari still paints the disclosure triangle through list-style alone. */
.rm-faq-list details.faq-item > summary::-webkit-details-marker { display: none; }

.rm-faq-list details.faq-item > summary:focus-visible {
  outline: 2px solid var(--rm-navy);
  outline-offset: -2px;
}

/* The green tile. Decorative, so generated rather than markup an editor could
   clear — and core emits nothing inside <summary> to hang it on anyway. */
.rm-faq-list details.faq-item > summary::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 37px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--rm-green);
}

/* Both bars of the + are one element: two gradients, so open state only has to
   collapse the vertical one to leave a -. A second pseudo-element is already
   spent on the tile. Collapsing a background-size is animatable, which a swapped
   glyph or a rotated element would not be at this cost. */
.rm-faq-list details.faq-item > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 61px;
  transform: translate(50%, -50%);
  width: 16px;
  height: 16px;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 16px 3px, 3px 16px;
  background-position: center, center;
  background-repeat: no-repeat;
}

.rm-faq-list details.faq-item[open] > summary::after {
  background-size: 16px 3px, 0 0;
}

/* ── Open / close animation ───────────────────────────────────────── */

/* <details> has no animatable state of its own. The browser flips the content
   between rendered and not, so there is nothing to interpolate: a height cannot
   go from a keyword to a length, and the content stops being rendered the instant
   the attribute is removed. Two things opt in:

     ::details-content     gives the content a box to animate (summary excluded)
     allow-discrete        defers content-visibility to the END of the close,
                           instead of hiding everything before it can move

   The box is collapsed with a GRID ROW, 0fr → 1fr, not with block-size 0 → auto.
   Animating to `auto` needs `interpolate-size: allow-keywords`, which is
   Chromium-only: gated on it, Firefox and Safari fell out of the @supports
   condition entirely and got core's instant toggle, so the animation only
   existed in one engine. A flexible track resolves against the item's own
   content, needs no keyword, and animates in all three.

   The answer's bottom padding has to be transitioned away with the track. A
   flexible track drives the item's HEIGHT to zero and padding cannot compress,
   so the row bottoms out 26px short and then drops the last of it in one frame
   when content-visibility finally hides the box — a close that animates most of
   the way and snaps at the end. Moving that space to a margin does not help;
   it is still counted.

   The @supports gate is load-bearing, and not only for the animation. Inside it
   the rule below cancels core's `.faq-answer { display: none }` (frontend.css),
   because a discrete display flip collapses the content on the first frame and
   no amount of transitioning ::details-content can outrun it — that is what made
   the close snap while the open animated. Cancelling it is only safe where the
   browser hides the content via ::details-content instead. Ungated, a browser
   without that support would render all twenty answers permanently open.

   Reduced-motion is the inner guard rather than an override, so the animation is
   never registered at all for anyone who has asked not to see it, and they keep
   core's instant toggle. */
@supports selector(details::details-content) {
  @media (prefers-reduced-motion: no-preference) {

    /* min-height is the pair to the 0fr track: a grid item's automatic minimum
       size is its min-content height, so without this the row refuses to
       collapse below one line of the answer. */
    .rm-faq-list details.faq-item .faq-answer {
      display: block;
      min-height: 0;
      overflow: hidden;
      transition: padding-block-end 380ms cubic-bezier(0.33, 0, 0.15, 1);
    }

    .rm-faq-list details.faq-item:not([open]) .faq-answer { padding-block-end: 0; }

    /* The easing has to SPREAD the travel, not front-load it. A one-line answer
       moves the row about 50px, so a curve whose second control point sits at
       x: 0 covers 60% of that in the first 40ms and the rest is too small to see
       — the row reads as a snap however long the duration says it is. This curve
       holds a near-constant velocity through the middle and settles at the end,
       which is what makes a short distance look like motion. */
    .rm-faq-list details.faq-item::details-content {
      display: grid;
      grid-template-rows: 0fr;
      overflow: hidden;
      opacity: 0;
      transition:
        grid-template-rows 380ms cubic-bezier(0.33, 0, 0.15, 1),
        opacity 160ms ease-out,
        content-visibility 380ms allow-discrete;
    }

    .rm-faq-list details.faq-item[open]::details-content {
      grid-template-rows: 1fr;
      opacity: 1;
      /* Later than the box, so the answer fades in behind the row opening rather
         than arriving before there is room for it. */
      transition:
        grid-template-rows 380ms cubic-bezier(0.33, 0, 0.15, 1),
        opacity 260ms ease-in 90ms,
        content-visibility 380ms allow-discrete;
    }

    .rm-faq-list details.faq-item > summary::after {
      transition: background-size 300ms cubic-bezier(0.33, 0, 0.15, 1);
    }

    .rm-faq-list details.faq-item > summary::before {
      transition: background-color 200ms ease;
    }
  }
}

.rm-faq-list details.faq-item > summary:hover::before {
  background: var(--rm-green-dark);
}

.rm-faq-list details.faq-item .faq-answer {
  padding: 0 100px 26px 29px;
  color: var(--rm-ink);
  font-size: 15px;
  line-height: 1.75;
}

.rm-faq-list details.faq-item .faq-answer p {
  color: var(--rm-ink);
  margin: 0 0 16px;
}

.rm-faq-list details.faq-item .faq-answer p:last-child { margin-bottom: 0; }

/* Scoped to 0,4,1 to match the desktop rules above. A media query does not raise
   specificity, so a bare .rm-faq-* here would simply never win. */
@media (max-width: 768px) {
  body:is([data-path="faq"],[data-path="faqs"]) .page-body .builder-block.rm-faq-intro { padding-block: 56px 0; }
  body:is([data-path="faq"],[data-path="faqs"]) .page-body .builder-block.rm-faq-list  { padding-block: 0 56px; }
  body:is([data-path="faq"],[data-path="faqs"]) .page-body .builder-block.u-rm-band-grey { padding-block: 56px; }
  body:is([data-path="faq"],[data-path="faqs"]) .page-body .builder-block.u-rm-band-navy { padding-block: 44px; }

  .page-body .rm-faq-intro .builder-block__heading { font-size: 32px; }

  .rm-faq-list details.faq-item > summary {
    font-size: 15px;
    min-height: 74px;
    padding: 18px 62px 18px 16px;
  }

  .rm-faq-list details.faq-item > summary::before {
    width: 38px;
    height: 38px;
    right: 12px;
  }

  .rm-faq-list details.faq-item > summary::after { right: 31px; }

  .rm-faq-list details.faq-item .faq-answer { padding: 0 62px 20px 16px; }
}


/* =========================================
   About page (Figma 72:377)

   Same construction as the FAQs page: the container is unwrapped and each block
   restores the 1160px grid with its own gutter, so the grey and navy bands reach
   the page edges without calc(50% - 50vw) and its scrollbar offset.

   Headings come from the block CONTENT, not public_heading, because core renders
   public_heading above the block body and the design puts the eyebrow first.
   That is why these rules target `.cms-content h2`, not `.builder-block__heading`.
   ========================================= */

body[data-path="about-us"] .page-body > .container {
  max-width: none;
  width: 100%;
  padding: 0;
}

body[data-path="about-us"] .page-body .builder-block {
  margin: 0;
  padding-block: 0;
  padding-inline: max(20px, calc(50% - 580px));
}

body[data-path="about-us"] .page-body .builder-block.rm-about-split   { padding-block: 90px; }
body[data-path="about-us"] .page-body .builder-block.rm-about-mission { padding-block: 0 90px; }
body[data-path="about-us"] .page-body .builder-block.rm-about-belief  { padding-block: 90px; }
body[data-path="about-us"] .page-body .builder-block.rm-about-impact  { padding-block: 90px; }
body[data-path="about-us"] .page-body .builder-block.u-rm-band-grey   { padding-block: 90px; }
body[data-path="about-us"] .page-body .builder-block.u-rm-band-navy   { padding-block: 60px; }

/* Shared inner-page banner
   -----------------------

   Every inner page in the design opens on the same banner: photo, dark navy
   tint, a green uppercase heading on the 1160px grid and a white standfirst
   under it. One rule set, one path list — a page joins it by being added here.

   :is() takes the specificity of its heaviest argument, so this list stays at
   the same weight as the single-path selector it replaced no matter how long it
   gets. Home is absent on purpose: it hides .page-hero outright. FAQs is in
   under both spellings, for the same reason as its own rules above.

   To add a page: put its path in BOTH lists below, and set hero_image,
   hero_heading and hero_caption on it in the seeder. */

/* The banner already carries the page title in the design's own treatment. Core's
   separate heading strip below it repeated the same words in the theme's primary
   colour — hidden from sight, kept in the document so the page still has exactly
   one h1 in the accessibility tree. */
body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-body-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Core emits static-hero__heading / __caption inside a .static-hero that centres
   itself via a --align-center modifier. The design is left-aligned on the grid,
   so the alignment modifier is overridden rather than the page re-configured:
   hero_overlay_align is an editor field, and a page whose layout depends on it
   breaks the moment someone changes it. */
body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero.static-hero {
  display: flex;
  align-items: center;
  text-align: left;
}

body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero .static-hero__heading,
body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero .static-hero__caption {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 20px;
  text-align: left;
}

/* The right padding is the line-break control, not decoration: the design wraps
   these headings over two to four lines in roughly half the grid, and the element
   is doing double duty as the grid-aligning box (max-width + auto margins above),
   so there is no inner wrapper to put a max-width on. Padding narrows the text
   column while the box stays on the grid. */
body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero .static-hero__heading {
  color: var(--rm-green);
  font-size: 58px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding-inline: 20px 45%;
}

body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero .static-hero__caption {
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  opacity: 1;
  padding-inline: 20px 45%;
}

/* The design fits the banner photo to the banner's HEIGHT and pins it right,
   with navy wherever the photo does not reach: the whole group stays in view
   and the left is clear for the heading. Core's `cover` fills the WIDTH
   instead, so a 2:1 photo in a banner four or five times wider than it is tall
   is enlarged until only a strip through its middle shows and the heads are
   cut off. Its left and right positions then do nothing, because the photo
   already spans the width exactly.

   !important is load-bearing: core writes the editor's Banner image size and
   position into an #id rule in an inline <style>, which beats any class
   selector here. Those two fields are overridden on these pages for the same
   reason the alignment is above: the design has one banner treatment, and a
   page that depends on an editor setting breaks when someone changes it. The
   tint goes with them, because the design's photo is not darkened and the text
   sits on the overlay's solid navy, not on the photo. Banner height is left to
   the editor; the design's frame is 1440 wide with a banner of about 427px,
   which the 400px Standard matches closely enough.

   The navy is also the whole ground of a banner with no photo, where the
   heading is green and the caption white. */
body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero.static-hero {
  background-color: var(--rm-navy);
  background-size: auto 100% !important;
  background-position: right center !important;
}

body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero.static-hero::before {
  display: none;
}

/* The design's navy fade and three concentric circles, drawn once as an SVG
   measured from the designer's banner exports and laid over whatever photo an
   editor uploads, so a plain photo matches without anyone preparing the image.

   It sits UNDER core's tint, the order the exports were composited in: the tint
   is the ::before, and z-index 1 lifts it over this ::after. The banner's
   .container carries z-index 1 too and comes later in the tree, so the text
   stays on top. `center / cover` matches the photo's own inline sizing, which is
   what keeps the circles where the design puts them at every width.

   Every banner takes it, including a designer's export that already has it
   baked in: the circles land exactly on the baked ones, so the only effect is
   a slightly deeper fade across the middle band, and the page needs no change
   when its raw photo replaces the export. */
.page-hero.static-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/misc/rm-hero-overlay.svg') center / cover no-repeat;
  pointer-events: none;
}

.page-hero.static-hero::before { z-index: 1; }

/* Once the banner is wider than the design's 1920x570 shape at its height (1347px
   wide at 400px tall), a centred overlay stretched to the full width ends its
   fade short of the photo, which is pinned right at its own height, and leaves
   a hard edge between the navy and the photo's pale left side. Here the overlay
   is pinned right at the banner's height too, so fade and photo keep the
   design's relationship at any width. The wide SVG is the same drawing with its
   navy carried 3000 units further left, so the extra width reads as more navy
   rather than a seam.

   Not below 1348px: pinned right there, the overlay's solid navy is cropped off
   the left and the heading lands on the fade and the photo's edge. Centred and
   pinned are the same picture at exactly 1347px, which is why the switch shows
   no jump. The 1348 assumes the 400px Standard height; a taller banner switches
   with a small shift. */
@media (min-width: 1348px) {
  body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero.static-hero::after {
    background: url('../images/misc/rm-hero-overlay-wide.svg') right center / auto 100% no-repeat;
  }
}

/* Shared section type
   ------------------- */

/* Section headings authored inside block content rather than on
   public_heading, because core renders public_heading above the block body
   and the design puts the eyebrow first. .page-body is load-bearing: core's
   own `.page-body .cms-content h2` is 0,2,1 and a bare path-scoped rule at
   0,2,1 would only tie, leaving the heading at core's 1.35rem in orange. */
body:is([data-path="about-us"],[data-path="services"]) .page-body .cms-content h2 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0 0 24px;
}

/* Who We Are / Our Belief: copy beside a photo
   -------------------------------------------- */

.rm-about-split .content-row-grid,
.rm-about-belief .content-row-grid {
  display: flex;
  align-items: center;
  gap: 70px;
}

.rm-about-split .cms-content,
.rm-about-belief .cms-content { flex: 0 0 46%; }

.rm-about-split .builder-block__image,
.rm-about-belief .builder-block__image { flex: 1; }

.rm-about-split .builder-block__image img,
.rm-about-belief .builder-block__image img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* Our Mission: navy panel
   ----------------------- */

/* The texture is a separate layer, not the panel's own background-image. The PNG
   is opaque, so painting it at `cover` behind the copy hides the navy completely
   and the panel comes out as a photo. It has to sit ON the navy at part opacity,
   which a background-image cannot do — hence the pseudo-element, exactly as the
   prototype does it. overflow keeps the arcs inside the 40px radius; the z-index
   pair keeps the copy above them. */
.rm-about-mission .cms-content {
  position: relative;
  background: var(--rm-navy);
  border-radius: 40px;
  padding: 70px 80px;
  overflow: hidden;
}

.rm-about-mission .cms-content::before {
  content: "";
  position: absolute;
  inset: -8% 0 0 2%;
  background: url('../images/sections/blue-circles.png') center / cover no-repeat;
  /* The arcs are a faint accent in the design, not a photo. The PNG is pale and
     opaque, so anything near full opacity reads as a washed-out grey panel with
     navy corners rather than a navy panel with arcs on it. */
  opacity: 0.14;
  z-index: 1;
}

.rm-about-mission .cms-content > * {
  position: relative;
  z-index: 2;
}

body[data-path="about-us"] .page-body .rm-about-mission .cms-content h2 { color: #fff; }
.rm-about-mission .cms-content p { color: rgba(255, 255, 255, 0.92); }
.rm-about-mission .cms-content .rm-eyebrow { color: var(--rm-green); }

/* Our Impact: copy left, numbered services right
   ---------------------------------------------- */

.rm-about-impact .builder-icon-grid-row {
  grid-template-columns: 42fr 58fr;
  gap: 80px;
  margin: 0;
}

.rm-about-impact .builder-icon-grid {
  display: flex;
  flex-direction: column;
  gap: 34px;
  /* Restarts per render, so the numerals always read 01..04 however many items
     an editor adds or removes. Never type a number into a title. */
  counter-reset: rm-impact;
}

/* Three columns: numeral, green rule, copy. Numeral and rule are generated
   because core's item emits only an icon, a title and a desc — and a numeral an
   editor could edit would drift out of sequence. */
.rm-about-impact .builder-icon-grid__item {
  display: grid;
  grid-template-columns: 68px 3px 1fr;
  column-gap: 22px;
  align-items: start;
  counter-increment: rm-impact;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}

.rm-about-impact .builder-icon-grid__item::before {
  content: counter(rm-impact, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 52px;
  font-weight: 300;
  line-height: 1;
  color: var(--rm-navy);
}

.rm-about-impact .builder-icon-grid__item::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-height: 56px;
  background: var(--rm-green);
  border-radius: 2px;
}

.rm-about-impact .builder-icon-grid__icon { display: none; }

.rm-about-impact .builder-icon-grid__title {
  grid-column: 3;
  grid-row: 1;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0 0 8px;
}

.rm-about-impact .builder-icon-grid__desc {
  grid-column: 3;
  grid-row: 2;
  color: var(--rm-ink);
  margin: 0;
}

@media (max-width: 1000px) {
  .rm-about-split .content-row-grid,
  .rm-about-belief .content-row-grid { flex-direction: column; gap: 40px; }

  .rm-about-split .cms-content,
  .rm-about-belief .cms-content { flex: none; width: 100%; }

  .rm-about-impact .builder-icon-grid-row { grid-template-columns: 1fr; gap: 48px; }
}

/* Scoped to match the desktop rules above: a media query adds no specificity, so
   a bare .rm-about-* here would lose to the 0,4,1 selectors and never apply. */
@media (max-width: 768px) {
  body[data-path="about-us"] .page-body .builder-block.rm-about-split   { padding-block: 56px; }
  body[data-path="about-us"] .page-body .builder-block.rm-about-mission { padding-block: 0 56px; }
  body[data-path="about-us"] .page-body .builder-block.rm-about-belief  { padding-block: 56px; }
  body[data-path="about-us"] .page-body .builder-block.rm-about-impact  { padding-block: 56px; }
  body[data-path="about-us"] .page-body .builder-block.u-rm-band-grey   { padding-block: 56px; }
  body[data-path="about-us"] .page-body .builder-block.u-rm-band-navy   { padding-block: 44px; }

  /* Same path list as the shared banner rules above; a media query does not
     raise specificity, so this has to be scoped identically or it never
     applies. Add a page to both. */
  body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero .static-hero__heading { font-size: 32px; }
  body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero .static-hero__heading,
  body:is([data-path="about-us"],[data-path="contact"],[data-path="case-studies"],[data-path="services"],[data-path="articles"],[data-path="faq"],[data-path="faqs"]) .page-hero .static-hero__caption { padding-inline: 20px; }

  body:is([data-path="about-us"],[data-path="services"]) .page-body .cms-content h2 { font-size: 32px; }

  .rm-about-mission .cms-content { padding: 44px 28px; border-radius: 24px; }

  .rm-about-split .builder-block__image img,
  .rm-about-belief .builder-block__image img { height: 260px; }

  .rm-about-impact .builder-icon-grid__item { grid-template-columns: 52px 3px 1fr; column-gap: 14px; }
  .rm-about-impact .builder-icon-grid__item::before { font-size: 36px; }
  .rm-about-impact .builder-icon-grid__title { font-size: 21px; }
}


/* =========================================
   Contact page (Figma 103:36)

   Same construction as the About and FAQs pages: the block container is
   unwrapped to full width and each block restores the 1160px grid with its own
   gutter, so the navy CTA band reaches the page edges without
   calc(50% - 50vw) and the scrollbar offset that brings with it.

   The section's two columns and the form panel are styled up in the shared
   inner-page block rules (.rm-contact), because they are block styling rather
   than page layout. This section is only the page's bands and rhythm.
   ========================================= */

body[data-path="contact"] .page-body > .container {
  max-width: none;
  width: 100%;
  padding: 0;
}

/* The gutter each block gives back, now that the container no longer supplies
   one. Scoped to 0,3,1 so it beats core's `.page-body .builder-block` shorthand
   at 0,2,0 — a bare `.rm-cta { padding-inline: … }` at 0,1,0 would lose and the
   page would render edge to edge with no gutter at all. */
body[data-path="contact"] .page-body .builder-block {
  padding-inline: max(20px, calc(50% - 580px));
}

/* Each band re-states its own vertical rhythm at 0,4,1 for the same reason:
   core's shorthand sets padding-block as well, so leaving these off does not
   fall back to the design's spacing, it falls back to core's 90px. */
body[data-path="contact"] .page-body .builder-block.rm-contact { padding-block: 90px; }
body[data-path="contact"] .page-body .builder-block.rm-cta     { padding-block: 60px; }

@media (max-width: 768px) {
  body[data-path="contact"] .page-body .builder-block.rm-contact { padding-block: 56px; }
  body[data-path="contact"] .page-body .builder-block.rm-cta     { padding-block: 44px; }
}


/* =========================================
   Case studies (Figma 92:503 listing, 92:774 detail) and Articles

   Both pages restyle core element names only. The cards are a content_feed of
   the same records the client edits under Case Studies, and each card's
   standfirst and numbers come from the record's own subtitle and stats fields
   (v15.21), not from anything typed into this site.

   ARTICLES SHARE THIS FRAME. There is no Articles page in the design, so
   /articles and every article under it are styled by these same rules rather
   than by a copy of them: a change here is a change to both, which is the
   point. Two differences, both further down — an article card carries the
   post's date where a study carries its standfirst, and it has no headline
   numbers, because those are a field on a CaseStudy record and a BlogPost has
   nothing equivalent.

   Same full-bleed construction as the About, FAQs and Contact pages: the block
   container is unwrapped and each block restores the 1160px grid with its own
   gutter, so the grey and navy bands reach the page edges without
   calc(50% - 50vw) and its scrollbar offset.

   The ^= selector matches a listing (/case-studies, /articles) and every item
   under it (/case-studies/slug) at once; rules for one or the other are scoped
   further. :is() takes the specificity of its heaviest argument, so pairing the
   two paths costs nothing.
   ========================================= */

/* :has() guards the one page here that may have no blocks at all: an article
   written as a single rich-text body renders .cms-content straight into this
   container, and unwrapping it unconditionally would run that text from window
   edge to window edge with no gutter to stop it. */
body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body > .container:has(.builder-block) {
  max-width: none;
  width: 100%;
  padding: 0;
}

body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block {
  padding-inline: max(20px, calc(50% - 580px));
}

/* Core wraps a feed in .content-section, which carries a 2px rule above it and
   its own vertical padding. Both are core's default listing chrome and neither
   is in the design: the rule reads as a stray divider under the banner, and the
   padding stacks on top of the block's own rhythm. */
body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .content-section {
  border-top: none;
  padding: 0;
}

/* The pagination well reserves 2rem top and bottom whether or not there are
   pages to show, which on four studies is 64px of empty space above the CTA.
   :not(:has(*)) rather than :empty — Laravel's paginator renders nothing for a
   single page but Blade still leaves whitespace inside the div, and :empty does
   not match an element containing a whitespace text node. */
body:is([data-path="case-studies"],[data-path="articles"]) .page-body .pagination-wrap:not(:has(*)) { display: none; }

/* Each band re-states its rhythm at 0,4,1: core's `.page-body .builder-block`
   shorthand sets padding-block too, so omitting these does not fall back to the
   design's spacing, it falls back to core's 90px. */
body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block.rm-case-list    { padding-block: 90px; }
body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block.rm-article-list { padding-block: 90px; }
body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block.rm-case-body    { padding-block: 90px 60px; }
body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block.u-rm-band-grey  { padding-block: 90px; }
body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block.u-rm-band-navy  { padding-block: 60px; }

/* Core's Back links above and below a case study or an article. The design has
   neither, and the breadcrumb plus the nav already cover getting out of here.
   Hidden rather than removed, because removing them is a core template edit. */
body:is([data-path^="case-studies/"],[data-path^="articles/"]) .page-body .back-top,
body:is([data-path^="case-studies/"],[data-path^="articles/"]) .page-body > .container > p:last-child { display: none; }

/* ── Listing cards ────────────────────────────────────────────────── */

/* The feed wraps itself in a second .container inside the one already unwrapped
   above. Left alone it re-imposes a 1200px box inside a full-width parent, and
   the cards sit in a column narrower than the bands under them. */
body:is([data-path="case-studies"],[data-path="articles"]) .content-section > .container { max-width: none; padding: 0; }

.rm-case-list .card-grid,
.rm-article-list .card-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.rm-case-list .card,
.rm-article-list .card {
  background: var(--rm-mute);
  border: none;
  border-radius: 16px;
  box-shadow: none;
  overflow: visible;
}

/* Core lifts a card on hover. These are panels in the design, not lifting
   tiles, and the shadow reads as a mistake against a flat pale ground. */
.rm-case-list .card:hover,
.rm-article-list .card:hover { box-shadow: none; transform: none; }

.rm-case-list .card-body,
.rm-article-list .card-body { padding: 44px 40px 40px; }

/* "CASE STUDY" / "ARTICLE" above every title. Identical on every card of a kind
   and not something an editor would ever set per item, so it is generated: it
   labels the card type rather than carrying content. */
.rm-case-list .card-body h3::before,
.rm-article-list .card-body h3::before {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rm-green);
  margin-bottom: 14px;
}

.rm-case-list .card-body h3::before { content: "Case Study"; }
.rm-article-list .card-body h3::before { content: "Article"; }

.rm-case-list .card-body h3,
.rm-article-list .card-body h3 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.rm-case-list .card-body h3 a,
.rm-article-list .card-body h3 a { color: var(--rm-navy); text-decoration: none; }
.rm-case-list .card-body h3 a:hover,
.rm-article-list .card-body h3 a:hover { color: var(--rm-green); }

.rm-case-list .card-body .card-subtitle {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rm-navy);
  margin: 0 0 16px;
}

/* An article card carries its date and read time where a study carries its
   standfirst. Core's own `.card-grid .card .card-body > .card-meta` is 0,4,0
   and sets colour, size and display of its own, so this has to out-weigh it
   rather than merely follow it. */
.rm-article-list .card-grid .card .card-body > .card-meta {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0 0 16px;
}

.rm-case-list .card-body p,
.rm-article-list .card-body p { font-size: 15px; line-height: 1.7; color: #4a5568; }

.rm-case-list .card-actions,
.rm-article-list .card-actions { margin: 32px 0 0; }

.rm-case-list .card-actions .btn-outline,
.rm-article-list .card-actions .btn-outline {
  display: inline-block;
  background: var(--rm-green);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 13px 30px;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  text-decoration: none;
}

.rm-case-list .card-actions .btn-outline:hover,
.rm-article-list .card-actions .btn-outline:hover { background: var(--rm-green-dark); color: #fff; }

/* ── Headline stats, both places ──────────────────────────────────── */

/* The rule between value and label is a border on the label, not an element of
   its own: core emits dt then dd with nothing between them to style. */
.case-study-stats { display: flex; flex-direction: column; margin: 0; }

.case-study-stat {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.case-study-stat__value {
  font-weight: 300;
  color: var(--rm-navy);
  text-transform: uppercase;
  padding-right: 18px;
}

.case-study-stat__label {
  font-weight: 800;
  color: var(--rm-navy);
  text-transform: uppercase;
  border-left: 2px solid var(--rm-navy);
  padding-left: 18px;
  margin: 0;
}

.case-study-stats--card { gap: 14px; margin: 26px 0 0; }
.case-study-stats--card .case-study-stat__value { font-size: 20px; }
.case-study-stats--card .case-study-stat__label { font-size: 17px; line-height: 1.2; }

.case-study-stats--aside { gap: 26px; }
.case-study-stats--aside .case-study-stat__value { font-size: 28px; }
.case-study-stats--aside .case-study-stat__label { font-size: 22px; line-height: 1.15; }

/* ── Case study and article detail ────────────────────────────────── */

/* No banner in the design: the page opens on the eyebrow and the title. An
   article is held to the same shape, so a photograph uploaded to one is not
   shown — the same trade already made on case studies. */
body:is([data-path^="case-studies/"],[data-path^="articles/"]) .page-hero { display: none; }

body:is([data-path^="case-studies/"],[data-path^="articles/"]) .page-body-heading {
  padding: 90px 0 0;
  background: none;
}

body:is([data-path^="case-studies/"],[data-path^="articles/"]) .page-body-heading > .container {
  max-width: 1200px;
  padding-inline: 20px;
}

/* Two anchors for one eyebrow: core wraps a case study's title in
   .page-body-heading__text so its stats can sit alongside, and gives an article
   no wrapper at all because it has no stats to place. */
body[data-path^="case-studies/"] .page-body-heading__text::before,
body[data-path^="articles/"] .page-body-heading h1::before {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rm-green);
  margin-bottom: 14px;
}

body[data-path^="case-studies/"] .page-body-heading__text::before { content: "Case Study"; }
body[data-path^="articles/"] .page-body-heading h1::before { content: "Article"; }

/* A case study's body is one long block; an article's is a stack of short ones,
   and core pads every block 90px top AND bottom — so two paragraphs of the same
   piece end up 180px apart. The rhythm is restated once and downward: each
   block pays for the gap beneath it, and the heading pays for the gap above the
   first one. Must stay after the .page-body-heading shorthand above, which sets
   padding-bottom to 0.

   padding-BLOCK, never `padding: 0`: this sits at 0,3,1 and a blanket reset
   would also flatten the grey and navy bands, whose own rhythm is set at 0,4,1
   further up and has to keep winning. */
body[data-path^="articles/"] .page-body-heading { padding-bottom: 50px; }
body[data-path^="articles/"] .page-body .builder-block { padding-block: 0 60px; }

body:is([data-path^="case-studies/"],[data-path^="articles/"]) .page-body-heading h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0;
}

body[data-path^="case-studies/"] .page-body-subtitle {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 14px 0 0;
}

/* The article's date and read time stand in for a study's standfirst, set
   smaller because it is a fact about the post rather than a line of copy. */
body[data-path^="articles/"] .page-body-heading .card-meta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 16px 0 0;
}

/* Core's stats rail is 320px, which wraps "ANNUAL TURNOVER" onto two lines and
   "SALES FUNCTION REDESIGN" onto three. The design gives the pair roughly 480px
   and lets the title column wrap instead, which is the right way round: the
   labels are set large and uppercase and read badly broken. */
@media (min-width: 900px) {
  body[data-path^="case-studies/"] .page-body-heading > .container:has(.case-study-stats) {
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 60px;
  }
}


/* The body runs at roughly half width in the design, with the right-hand column
   left empty below the stats. Capping the text column rather than gridding the
   whole page is what keeps the bands below able to bleed.

   A case study's body is a seeded block and can be named; an article's is
   whatever the client wrote, so the cap is hung on the two shapes that are a
   single running column: one rich-text field straight in the container, or a
   text block. NOT on .cms-content generally — a two-column or an image+text
   block is also built from .cms-content, and capping those caps each column
   inside its own half of the grid. */
body[data-path^="case-studies/"] .rm-case-body .cms-content,
body[data-path^="articles/"] .page-body > .container > .cms-content,
body[data-path^="articles/"] .page-body .builder-block--text .cms-content { max-width: 55%; }

body[data-path^="case-studies/"] .rm-case-body .rm-case-intro { margin-bottom: 30px; }

body[data-path^="case-studies/"] .rm-case-body .cms-content h2 {
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0 0 34px;
  line-height: 1.35;
}

/* An article's headings are the same two treatments as a case study's, in the
   opposite order, and deliberately so. A case study is seeded: its h2 is a
   standfirst and its section headings are h3s carrying .rm-case-heading. An
   article is typed by the client, who will reach for h2 for a section heading
   and expect it to be the larger of the two — so h2 takes the green treatment
   and h3 the navy one. Matching the case study element for element would have
   given every article sub-heading in small navy caps and made h3 bigger than
   the h2 above it. */
body[data-path^="articles/"] .page-body .cms-content h2 {
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--rm-green);
  margin: 48px 0 18px;
  line-height: 1.2;
}

body[data-path^="articles/"] .page-body .cms-content h2:first-child { margin-top: 0; }

body[data-path^="articles/"] .page-body .cms-content h3 {
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 34px 0 16px;
  line-height: 1.35;
}

body[data-path^="case-studies/"] .rm-case-body .cms-content p,
body[data-path^="case-studies/"] .rm-case-body .cms-content li,
body[data-path^="articles/"] .page-body .cms-content p,
body[data-path^="articles/"] .page-body .cms-content li {
  font-size: 15px;
  line-height: 1.75;
  color: #4a5568;
}

body[data-path^="case-studies/"] .rm-case-body .cms-content ul,
body[data-path^="articles/"] .page-body .cms-content ul { margin: 0 0 20px 18px; }

@media (max-width: 1000px) {
  .rm-case-list .card-grid,
  .rm-article-list .card-grid { grid-template-columns: 1fr; }
  body[data-path^="case-studies/"] .rm-case-body .cms-content,
  body[data-path^="articles/"] .page-body > .container > .cms-content,
  body[data-path^="articles/"] .page-body .builder-block--text .cms-content { max-width: none; }
}

@media (max-width: 768px) {
  body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block.rm-case-list    { padding-block: 56px; }
  body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block.rm-article-list { padding-block: 56px; }
  body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block.rm-case-body    { padding-block: 56px 40px; }
  body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block.u-rm-band-grey  { padding-block: 56px; }
  body:is([data-path^="case-studies"],[data-path^="articles"]) .page-body .builder-block.u-rm-band-navy  { padding-block: 44px; }

  .rm-case-list .card-body,
  .rm-article-list .card-body { padding: 32px 26px; }
  .rm-case-list .card-body h3,
  .rm-article-list .card-body h3 { font-size: 26px; }

  body:is([data-path^="case-studies/"],[data-path^="articles/"]) .page-body-heading { padding-top: 56px; }
  body:is([data-path^="case-studies/"],[data-path^="articles/"]) .page-body-heading h1 { font-size: 30px; }

  .case-study-stats--aside .case-study-stat__value { font-size: 22px; }
  .case-study-stats--aside .case-study-stat__label { font-size: 17px; }
}


/* =========================================
   Services (Figma 89:36)

   Same full-bleed construction as the other inner pages: the block container is
   unwrapped and each block restores the 1160px grid with its own gutter.

   The four cards are a content_feed of the Service records, so each card's copy
   is the same `excerpt` its own page renders. Nothing on this page is typed
   twice.

   `^=` covers /services and every service under it.
   ========================================= */

body[data-path^="services"] .page-body > .container {
  max-width: none;
  width: 100%;
  padding: 0;
}

body[data-path^="services"] .page-body .builder-block {
  padding-inline: max(20px, calc(50% - 580px));
}

/* Core's feed chrome: a 2px rule above the section and its own vertical
   padding, neither of which is in the design and both of which stack on top of
   the block's own rhythm. */
body[data-path^="services"] .page-body .content-section {
  border-top: none;
  padding: 0;
}

body[data-path^="services"] .page-body .builder-block.rm-intro    { padding-block: 90px; }
body[data-path^="services"] .page-body .builder-block.rm-steps    { padding-block: 90px; }
body[data-path^="services"] .page-body .builder-block.rm-svc-list { padding-block: 90px; }
body[data-path^="services"] .page-body .builder-block.u-rm-band-grey { padding-block: 90px; }
body[data-path^="services"] .page-body .builder-block.u-rm-band-navy { padding-block: 60px; }


/* The intro is an image_text block so the hexagon can be swapped in the admin.
   Core grids it 1fr/1fr; the design gives the copy roughly two thirds and lets
   the graphic sit smaller beside it. */
.rm-intro .content-row-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 60px;
  align-items: center;
}

.rm-intro .builder-block__image img {
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-inline: auto;
  display: block;
  border-radius: 0;
}

@media (max-width: 1000px) {
  .rm-intro .content-row-grid { grid-template-columns: 1fr; gap: 36px; }
  .rm-intro .builder-block__image img { max-width: 260px; }
}

/* ── Service cards ────────────────────────────────────────────────── */

/* The feed opens a second .container inside the one unwrapped above; left alone
   the cards sit in a narrower column than the bands around them. */
body[data-path="services"] .content-section > .container { max-width: none; padding: 0; }

/* Every length below is the Figma frame's own, scaled by 1160/1640 — the design
   lays the two cards out across 1640px of a 1920px frame and the site grid is
   1160px wide. Change one side without the other and the card stops matching. */
.rm-svc-list .card-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
  align-items: start;
}

.rm-svc-list .card {
  background: var(--rm-mute);
  border: none;
  border-radius: 16px;
  box-shadow: none;
  overflow: visible;
  display: block;
}

.rm-svc-list .card:hover { box-shadow: none; transform: none; }

.rm-svc-list .card-body { padding: 45px 53px 42px; }

/* The icon disc. Core emits the service image as a plain .card-image above the
   body, so the disc is drawn on the image itself rather than on a wrapper that
   does not exist.

   Floated, not stacked: the design sets the disc beside the eyebrow and title
   and drops the copy back to full width beneath it. .card-body establishes no
   block formatting context, so the float from its previous sibling intrudes
   into its lines, which is what puts the heading alongside the disc. The
   paragraph then clears it.

   margin-top is doing two jobs and both matter. A float's MARGIN box is what
   text flows around, so the 29px pushes the visible disc down to sit level with
   the two-line title while the eyebrow, which starts higher, is still indented
   past it — that indent is the design's, and it disappears if this becomes
   padding or a transform. margin-right sets the gap to the title.

   margin-left stays 0: the disc sits INSIDE .card-body, so the design's 53px
   inset is already spent as that element's padding. Repeating it here indents
   the disc past the paragraph beneath it and steals 53px from the title, which
   is enough to push a two-line title onto three.

   scale-down, NOT contain: the design draws each icon at its own size inside a
   shared disc (the audit sheet is the smallest, the hexagon the largest), and
   `contain` erases that by blowing every one up to fill the box. Each SVG file
   instead carries the design's size as its own width/height, so scale-down
   renders it at exactly that and only intervenes for artwork too big for the
   disc. Re-export an icon and it arrives at Figma's raw size — rescale it, or
   it lands a third too large. */
.rm-svc-list .card-image {
  float: left;
  width: 98px;
  height: 98px;
  object-fit: scale-down;
  padding: 14px;
  margin: 29px 17px 0 0;
  background: var(--rm-green);
  border-radius: 50%;
}

.rm-svc-list .card-body { overflow: visible; }
.rm-svc-list .card-body p { clear: left; padding-top: 16px; }

.rm-svc-list .card-body h3::before {
  content: "Rainmaker Service";
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  text-transform: uppercase;
  color: var(--rm-green);
  margin-bottom: 13px;
}

/* Inter Black. The weight is requested in the fonts override hook, not by the
   theme, whose allow-list stops at 700 — drop it there and the browser
   synthesises a fake bold that is visibly lighter and wider. */
.rm-svc-list .card-body h3 {
  font-size: 41px;
  font-weight: 900;
  line-height: 44px;
  text-transform: uppercase;
  margin: 0 0 19px;
}

.rm-svc-list .card-body h3 a { color: var(--rm-navy); text-decoration: none; }
.rm-svc-list .card-body h3 a:hover { color: var(--rm-green); }

.rm-svc-list .card-body p {
  font-size: 15px;
  line-height: 1.7;
  color: #4a5568;
  margin: 0;
}

.rm-svc-list .card-actions { margin: 21px 0 0; }

/* Sized by min-width rather than horizontal padding so every card's pill is the
   design's 198px whatever its label runs to. */
.rm-svc-list .card-actions .btn-outline {
  display: inline-block;
  min-width: 198px;
  height: 47px;
  padding: 0 24px;
  background: var(--rm-green);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  line-height: 47px;
  text-align: center;
  text-decoration: none;
}

.rm-svc-list .card-actions .btn-outline:hover { background: var(--rm-green-dark); color: #fff; }

/* ── Service detail ───────────────────────────────────────────────── */

/* No banner in the design's service cards, and the page's copy is the excerpt,
   which core prints ONLY when there is no hero. Hiding a hero here would not be
   enough — the record has to have none, which the seeder enforces. */
body[data-path^="services/"] .page-body-heading { padding: 90px 0 0; background: none; }

body[data-path^="services/"] .page-body-heading > .container {
  max-width: 1200px;
  padding-inline: 20px;
}

body[data-path^="services/"] .page-body-heading h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0;
  max-width: 55%;
}

body[data-path^="services/"] .page-body-heading .excerpt {
  max-width: 55%;
  font-size: 15px;
  line-height: 1.75;
  color: #4a5568;
  margin: 26px 0 0;
}

/* The design's second paragraph is a block on the service's own page, not part
   of the excerpt: excerpt is varchar(500) and the pair runs to about 650. */
body[data-path^="services/"] .rm-svc-detail .cms-content { max-width: 55%; }

body[data-path^="services/"] .rm-svc-detail .cms-content p {
  font-size: 15px;
  line-height: 1.75;
  color: #4a5568;
  margin: 0;
}

body[data-path^="services/"] .page-body .builder-block.rm-svc-detail { padding-block: 30px 90px; }

@media (max-width: 1000px) {
  body[data-path^="services/"] .rm-svc-detail .cms-content { max-width: none; }
  .rm-svc-list .card-grid { grid-template-columns: 1fr; }
  body[data-path^="services/"] .page-body-heading h1,
  body[data-path^="services/"] .page-body-heading .excerpt { max-width: none; }
}

@media (max-width: 768px) {
  body[data-path^="services"] .page-body .builder-block.rm-intro    { padding-block: 56px; }
  body[data-path^="services"] .page-body .builder-block.rm-steps    { padding-block: 56px; }
  body[data-path^="services"] .page-body .builder-block.rm-svc-list { padding-block: 56px; }
  body[data-path^="services"] .page-body .builder-block.u-rm-band-grey { padding-block: 56px; }
  body[data-path^="services"] .page-body .builder-block.u-rm-band-navy { padding-block: 44px; }

  .rm-svc-list .card-body { padding: 32px 26px; }
  .rm-svc-list .card-body h3 { font-size: 26px; }
  .rm-svc-list .card-image { margin: 32px 0 -14px 26px; width: 84px; height: 84px; padding: 18px; }

  body[data-path^="services/"] .page-body-heading { padding-top: 56px; }
  body[data-path^="services/"] .page-body-heading h1 { font-size: 30px; }
}

/* =========================================
   Long-form prose (Figma node 261:3)

   A plain one-column page: title, green section headings, copy. No banner, no
   bands, no CTA. The design's frame is the case-study construction with the
   body opened out to full width and the stats rail removed.

   Two entry points, one rule set. The `rm-prose` utility puts it on any block
   an editor ticks; the path list puts it on the legal pages, which render the
   raw `content` field and so have no block to hang a utility on.

   HEADING LEVELS DIFFER FROM ARTICLES AND CASE STUDIES, and the reason is the
   document shape rather than a second opinion. Those two carry a sub-title
   under the h1, so their sections start at h3 and h2 is the sub-title. A plain
   page has no sub-title, so its sections start at h2 — which is what
   `config/legal-templates.php` authors. Green always means "section heading";
   only the level it lands on moves.
   ========================================= */

/* `.page-body` is load-bearing on both selectors: core's
   `.page-body .cms-content h2` is 0,2,1, so a bare `.u-rm-prose .cms-content h2`
   at 0,2,0 loses and the heading stays core-sized in the theme's primary
   colour. Values are the Figma frame's own over the ratio between its 1595px
   text column and the CMS's 1160px one (0.727), which is where the 26px the
   case studies already use comes from. */
.page-body .u-rm-prose .cms-content h2,
body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body .cms-content h2 {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--rm-green);
  margin: 48px 0 18px;
}

.page-body .u-rm-prose .cms-content h2:first-child,
body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body .cms-content h2:first-child {
  margin-top: 0;
}

/* Subordinate to a green section heading, so it takes the site's small navy
   label rather than a smaller green one — two greens a size apart read as the
   same level. */
.page-body .u-rm-prose .cms-content h3,
body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body .cms-content h3 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 34px 0 14px;
}

/* Core indents 1.5rem against the design's 30px on a 1595px column, and opens
   a 0.3rem gap between items the design keeps on one 1.6 rhythm. */
.page-body .u-rm-prose .cms-content :is(ul, ol),
body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body .cms-content :is(ul, ol) {
  margin: 0 0 20px 22px;
}

.page-body .u-rm-prose .cms-content li,
body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body .cms-content li {
  margin-bottom: 0;
  line-height: 1.6;
}

/* ── Legal pages: the opener ──────────────────────────────────────────
   Nothing to hide above this: static-hero returns early when a page has no
   hero image, so these three emit no banner and the page opens here. Same
   90px-then-eyebrow-then-title rhythm as the case study and service openers,
   because it is the same construction. */
/* Deliberately NOT scoped to a path list. Every page on this site either hides
   `.page-body-heading` because its banner supplies the h1 (home, faqs, about,
   contact, services, case studies, articles) or shows it as this opener, so the
   generic rule is the accurate statement and there is no third case to guard.

   It also has to be generic: the 404 and 403 pages need this exact opener and
   cannot be reached by a path selector, because `data-path` carries the address
   the visitor typed, not the page that answered. The hide rules all carry a
   path or a :has() and so outrank this at 0,2,1 against 0,1,0. */
.page-body-heading {
  padding: 90px 0 0;
  background: none;
}

.page-body-heading > .container {
  max-width: 1200px;
  padding-inline: 20px;
}

/* "Legal", not the page title. The design's eyebrow carries the page name, but
   a Page's `.page-body-heading` holds the title in the h1 itself with no
   separate element for attr() to read, and an eyebrow repeating the h1 word for
   word is noise. Generated for the same reason "Case Study" is: it labels the
   page type, it is identical on all three, and it is not a field an editor can
   clear by accident. */
body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body-heading h1::before {
  content: "Legal";
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rm-green);
  margin-bottom: 14px;
}

/* Generic for the same reason the opener above is: the 404 and 403 pages need
   this heading and no path selector can reach them. The section detail pages
   (services/, case-studies/, articles/) restate it at 0,2,1 and still win. */
.page-body-heading h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--rm-navy);
  margin: 0;
}

/* Blocks own the page rhythm here (`.page-body` is padding: 0), so a page
   rendering the raw `content` field has no `.builder-block` to supply it and
   its copy butts straight onto the heading and the footer. This covers only
   that gap, which is why it is the smaller 40px.

   Privacy and Terms are on blocks now; Cookie Policy is still generated on the
   raw `content` field, so both paths have to keep working. The `:has()` guard
   is what stops the fallback stacking on top of the block's own 90px on a page
   that has been converted. */
body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body {
  padding: 40px 0 90px;
}

body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body:has(.builder-block) {
  padding: 0;
}

/* Restated in full because a media query does not raise specificity: these have
   to match the desktop selectors element for element or they never apply. */
@media (max-width: 768px) {
  .page-body-heading { padding-top: 56px; }
  .page-body-heading h1 { font-size: 30px; }
  body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body { padding: 32px 0 56px; }
  body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body:has(.builder-block) { padding: 0; }

  .page-body .u-rm-prose .cms-content h2,
  body:is([data-path="privacy"],[data-path="terms"],[data-path="cookie-policy"]) .page-body .cms-content h2 {
    font-size: 22px;
    margin: 36px 0 14px;
  }

  .page-body .cms-content .rm-case-heading { font-size: 22px; margin: 36px 0 14px; }
}