/* --- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

/* ==========================================================================
   RS GONZALES -- SITE HEADER (site-wide chrome)
   Tokens lifted verbatim from the shipped gold standard (homepage-RSG.html
   :root block). Montserrat + DM Sans only. Green #2C7A4B. v2 dark gradient.

   SCOPE: everything is under .rsgh so this can live in the WordPress theme
   header, OUTSIDE .rsg-page (which wraps Elementor page content).
   POSITIONING: position:fixed + a spacer, NOT sticky -- .rsg-page ships
   overflow-x:hidden, and any overflow-hidden ancestor kills position:sticky.
   ========================================================================== */

/* ---------- reviewer chrome (NOT part of the deliverable) ---------------- */
html, body { margin: 0; padding: 0; }

/* ==========================================================================
   1. SHARED FOUNDATION -- tokens + primitives (all three variants)
   ========================================================================== */
.rsgh {
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --paper: #FFFFFF;
  --paper-soft: #FAFBFA;
  --sand: #F4F6F4;
  --ink-900: #111111;
  --ink-700: #262626;
  --ink-500: #6B6B6B;
  --green-500: #2C7A4B;
  --green-600: #1F5B36;
  --green-700: #143E25;
  --green-50: #E8F1EB;
  --green-100: #D3E5DA;
  --line: #E4E8E5;
  --line-2: #EEF1EE;
  --shadow-md: 0 8px 24px rgba(0,0,0,0.05);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.10);
  --shadow-mega: 0 28px 60px rgba(0,0,0,0.13);
  --radius-md: 14px;
  --radius-lg: 20px;
  --wrap: 1200px;
  --gutter: 24px;
  font-family: var(--font-body);
  color: var(--ink-900);
  line-height: 1.6;
}
.rsgh *, .rsgh *::before, .rsgh *::after { box-sizing: border-box; }
.rsgh a { color: inherit; text-decoration: none; }
.rsgh button { font: inherit; color: inherit; background: none; border: 0;
  padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.rsgh img { max-width: 100%; display: block; }
.rsgh p { margin: 0; }

/* Defensive resets. This block ships into a WordPress theme, so it sits beside
   theme + Elementor CSS. Anything a theme commonly restyles on generic tags is
   pinned here with !important -- a theme selector like `.site-header ul` (0,2,0)
   beats `.rsgh ul` (0,1,1) on specificity, and bullets or inherited underlines
   in the nav are the visible result. Kept to tags only; component properties
   are left to the normal cascade so future edits stay editable. */
.rsgh ul, .rsgh ol {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.rsgh li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.rsgh li::before, .rsgh li::marker { content: none !important; }
.rsgh a { text-decoration: none !important; }
.rsgh h3, .rsgh h4 { margin: 0; }
.rsgh button { text-transform: none; letter-spacing: normal; }

/* Icon size locks -- the WP theme injects svg{width:100%}, so every icon
   carries an explicit .ic-* class with !important. Never a blanket svg rule:
   that would flatten the wiring diagram too. */
.rsgh .ic-12 { width: 12px !important; height: 12px !important; }
.rsgh .ic-14 { width: 14px !important; height: 14px !important; }
.rsgh .ic-16 { width: 16px !important; height: 16px !important; }
.rsgh .ic-18 { width: 18px !important; height: 18px !important; }
.rsgh .ic-20 { width: 20px !important; height: 20px !important; }
.rsgh .ic-12, .rsgh .ic-14, .rsgh .ic-16, .rsgh .ic-18, .rsgh .ic-20 {
  max-width: none !important; max-height: none !important;
  min-width: 0 !important; min-height: 0 !important;
  flex-shrink: 0 !important; display: block !important;
}

.rsgh .h-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.rsgh .h-logo img { width: 152px; height: auto; }

/* --- shared button primitives (anatomy from .hpx-btn / .hpx-btn-cap) ----- */
.rsgh .h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; font-family: var(--font-display); font-size: 13.5px;
  font-weight: 700; letter-spacing: .005em; border-radius: 999px;
  white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s,
  transform .15s, border-color .15s;
}
.rsgh .h-btn-pri { background: var(--green-500); color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(44,122,75,0.25); }
/* Every hover state restates colour -- "unchanged" is not "protected" once a
   theme stylesheet is in the page. Same specificity on rest and hover. */
.rsgh .h-btn-pri:hover { background: var(--green-600); color: #FFFFFF;
  transform: translateY(-1px); box-shadow: 0 12px 26px rgba(44,122,75,0.32); }
.rsgh .h-btn-gh { background: #FFFFFF; color: var(--ink-900); border: 1.5px solid var(--ink-900); }
.rsgh .h-btn-gh:hover { background: var(--ink-900); color: #FFFFFF; border-color: var(--ink-900); }

/* capsule CTA -- pill with a circular arrow tail (the .hpx-btn-cap anatomy) */
.rsgh .h-cap {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 5px 6px 5px 18px; border-radius: 999px;
  background: var(--green-500); color: #FFFFFF;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(44,122,75,0.25);
  transition: background .18s, color .18s, box-shadow .18s, transform .18s;
}
.rsgh .h-cap .h-cap-a {
  width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF;
  color: var(--green-500); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; transition: transform .18s;
}
.rsgh .h-cap:hover { background: var(--green-600); color: #FFFFFF;
  transform: translateY(-1px); box-shadow: 0 12px 26px rgba(44,122,75,0.32); }
.rsgh .h-cap:hover .h-cap-a { transform: translateX(2px); }

/* --- shared mega-menu interior parts ------------------------------------ */
.rsgh .mg-lbl {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--green-600);
}
.rsgh .mg-lbl::before { content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-500); flex-shrink: 0; }
.rsgh .mg-pill {
  font-family: var(--font-display); font-size: 8.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: var(--green-50); color: var(--green-700); white-space: nowrap;
}
.rsgh .mg-li { display: block; border-radius: 11px; transition: background .14s; }
.rsgh .mg-li-in { display: flex; gap: 11px; padding: 9px 11px; align-items: flex-start; }
/* the text wrapper and both text lines are <span>s -- they must be blocks, or
   the name and the descriptor run together on one line */
.rsgh .mg-li-in > span:last-child { display: block; min-width: 0; }
.rsgh .mg-ic {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-50); color: var(--green-600);
  transition: background .14s, color .14s;
}
.rsgh .mg-nm { display: block; font-family: var(--font-display); font-size: 13.5px;
  font-weight: 700; color: var(--ink-900); line-height: 1.3; letter-spacing: -.006em; }
.rsgh .mg-ds { display: block; font-size: 12px; color: var(--ink-500);
  line-height: 1.42; margin-top: 3px; }

/* A 4-up column set inside a 1200px wrap gives each column ~175px -- too narrow
   for a name AND a descriptor. So the 4-up services grid is names-only (still
   fully scannable), and descriptors live in the 2-up panels and in variant C's
   two-pane index, where there is real width for them. */
.rsgh .mg-cols-4 .mg-ds { display: none; }
.rsgh .mg-cols-4 .mg-li-in { padding: 7px 9px; gap: 10px; align-items: center; }
.rsgh .mg-cols-4 .mg-ic { width: 28px; height: 28px; border-radius: 8px; }
.rsgh .mg-cols-4 .mg-nm { font-size: 13px; }

/* Two of the four group labels wrap to a second line. Without a reserved
   height the four columns start their first item at different baselines, which
   reads as a misalignment rather than as a design. */
.rsgh .mg-lbl-row { min-height: 34px; align-items: flex-start; }

/* The tallest column is shorter than the featured rail, leaving a void in the
   bottom-left. This strip spans all four columns and fills it with real links
   rather than padding. It lives INSIDE .mg-cols so variant B inherits it. */
.rsgh .mg-foot {
  grid-column: 1 / -1; margin-top: 6px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 13px 16px;
  border-radius: var(--radius-md); background: var(--sand);
  border: 1px solid var(--line);
}
.rsgh .mg-foot-t { font-family: var(--font-display); font-size: 12.5px;
  font-weight: 700; color: var(--ink-900); letter-spacing: -.005em; }
.rsgh .mg-foot-c { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rsgh .mg-foot-c a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: 999px; background: var(--paper); border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  color: var(--ink-700); transition: background .15s, color .15s, border-color .15s;
}
.rsgh .mg-foot-c a:hover { background: var(--green-500); color: #FFFFFF; border-color: var(--green-500); }
/* dark-panel (variant B) treatment of the same strip */
.rsgh-b .cs-mega .mg-foot { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.rsgh-b .cs-mega .mg-foot-t { color: #FFFFFF; }
.rsgh-b .cs-mega .mg-foot-c a { background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
.rsgh-b .cs-mega .mg-foot-c a:hover { background: var(--green-500); color: #FFFFFF; border-color: var(--green-500); }
.rsgh .mg-li:hover { background: var(--sand); }
.rsgh .mg-li:hover .mg-ic { background: var(--green-500); color: #FFFFFF; }
.rsgh .mg-li:hover .mg-nm { color: var(--green-600); }
.rsgh .mg-all {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 7px 11px; border-radius: 999px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  color: var(--green-600); background: var(--green-50);
  transition: background .15s, color .15s;
}
.rsgh .mg-all:hover { background: var(--green-500); color: #FFFFFF; }

/* --- the mega panel's real graphic: the one-engine wiring diagram -------
   Structural, not metric -- there are no invented numbers in it. */
.rsgh .mg-eng { display: block; width: 100%; height: auto; }
.rsgh .mg-trust { display: grid; gap: 9px; margin: 0; }
.rsgh .mg-trust li { display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; line-height: 1.4; }
.rsgh .mg-trust .tk { width: 16px; height: 16px; border-radius: 50%;
  background: var(--green-500); color: #FFFFFF; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; }

/* --- burger ------------------------------------------------------------- */
/* This MUST be declared here, in the first CSS block, and never in a later
   one. A media query carries no specificity, so `.rsgh .h-burger{display:none}`
   sitting after the variant blocks would outrank every
   `@media (max-width:1024px){ .rsgh-a .hd-burger{display:flex} }` -- same 0,2,0,
   later wins -- and the burger would be invisible at every width. */
.rsgh .h-burger {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: none; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-900);
  transition: background .15s, color .15s, border-color .15s;
}
.rsgh .h-burger:hover { background: var(--ink-900); color: #FFFFFF; border-color: var(--ink-900); }
.rsgh .h-burger-b { display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; position: relative; }
.rsgh .h-burger-b::before, .rsgh .h-burger-b::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px;
  border-radius: 2px; background: currentColor;
  transition: transform .22s ease, top .22s ease;
}
.rsgh .h-burger-b::before { top: -6px; }
.rsgh .h-burger-b::after { top: 6px; }

/* --- panel open/close motion (shared) ----------------------------------- */
.rsgh .mg-panel {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-9px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.rsgh .mg-panel.is-open { opacity: 1; visibility: visible;
  pointer-events: auto; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rsgh .mg-panel { transition: opacity .01s; transform: none; }
  .rsgh .mg-panel.is-open { transform: none; }
  .rsgh * { transition-duration: .01s !important; }
}

/* --- */

/* ==========================================================================
   3. VARIANT B -- "OPERATIONAL CONSOLE"
   No utility strip. The bar is a detached floating console (rounded, shadowed,
   inset from the top). The mega panel INVERTS the material: dark gradient with
   green accents, so the menu reads as an instrument, not a document.
   On scroll the console tightens and the inset shrinks.
   ========================================================================== */
.rsgh-b { position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding: 16px 0 0; transition: padding .26s ease; }
.rsgh-b .cs-shell { position: relative; max-width: var(--wrap);
  margin: 0 auto; padding: 0 var(--gutter); }
.rsgh-b .cs-bar {
  display: flex; align-items: center; gap: 22px; height: 68px;
  padding: 0 12px 0 22px; border-radius: 20px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--line);
  box-shadow: 0 10px 34px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.04);
  transition: height .26s ease, box-shadow .26s ease, border-radius .26s ease;
}
.rsgh-b .cs-logo { flex-shrink: 0; }
.rsgh-b .cs-logo img { width: 146px; height: auto; transition: width .26s ease; }
.rsgh-b .cs-nav { flex: 1; min-width: 0; display: flex; align-items: center;
  justify-content: center; gap: 4px; }
.rsgh-b .cs-item { position: relative; }
.rsgh-b .cs-lnk {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: 999px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .075em; text-transform: uppercase; color: var(--ink-700);
  white-space: nowrap; transition: background .15s, color .15s;
}
.rsgh-b .cs-lnk:hover { background: var(--sand); color: var(--green-600); }
.rsgh-b .cs-lnk .cv { color: var(--ink-500); transition: transform .2s, color .15s; }
.rsgh-b .cs-lnk:hover .cv { color: var(--green-600); }
.rsgh-b .cs-lnk[aria-expanded="true"] { background: var(--ink-900); color: #FFFFFF; }
.rsgh-b .cs-lnk[aria-expanded="true"] .cv { transform: rotate(180deg); color: #FFFFFF; }
.rsgh-b .cs-lnk[aria-current="page"] { color: var(--green-700); background: var(--green-50); }
.rsgh-b .cs-right { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.rsgh-b .cs-tel {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  color: var(--ink-900); transition: background .15s, color .15s, border-color .15s;
}
.rsgh-b .cs-tel:hover { background: var(--ink-900); color: #FFFFFF; border-color: var(--ink-900); }
.rsgh-b .cs-tel svg { color: var(--green-500); transition: color .15s; }
.rsgh-b .cs-tel:hover svg { color: #FFFFFF; }
.rsgh-b .cs-burger { display: none; }

/* --- dark mega panel ----------------------------------------------------- */
.rsgh-b .cs-mega {
  position: absolute; top: calc(100% + 10px);
  left: var(--gutter); right: var(--gutter);
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg,#0A0A0A 0%,#1F1F1F 50%,#0A0A0A 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 66px rgba(0,0,0,.4);
  color: #FFFFFF;
}
.rsgh-b .cs-mega-in { padding: 26px 26px 28px; }
.rsgh-b .cs-mega .mg-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 292px; gap: 30px;
}
.rsgh-b .cs-mega .mg-cols { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.rsgh-b .cs-mega .mg-col { min-width: 0; }
.rsgh-b .cs-mega .mg-col + .mg-col { border-left: 1px solid rgba(255,255,255,.09); padding-left: 18px; }
.rsgh-b .cs-mega .mg-lbl { color: #7FD3A1; }
.rsgh-b .cs-mega .mg-lbl::before { background: #4FBF7C; }
.rsgh-b .cs-mega .mg-lbl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rsgh-b .cs-mega .mg-lbl-row .mg-lbl { margin-bottom: 0; }
.rsgh-b .cs-mega .mg-pill { background: rgba(79,191,124,.16); color: #7FD3A1; }
.rsgh-b .cs-mega .mg-ic { background: rgba(255,255,255,.07); color: #7FD3A1; }
.rsgh-b .cs-mega .mg-nm { color: #FFFFFF; }
.rsgh-b .cs-mega .mg-ds { color: rgba(255,255,255,.56); }
.rsgh-b .cs-mega .mg-li:hover { background: rgba(255,255,255,.06); }
.rsgh-b .cs-mega .mg-li:hover .mg-ic { background: var(--green-500); color: #FFFFFF; }
.rsgh-b .cs-mega .mg-li:hover .mg-nm { color: #7FD3A1; }
.rsgh-b .cs-mega .mg-all { background: rgba(255,255,255,.08); color: #7FD3A1; }
.rsgh-b .cs-mega .mg-all:hover { background: var(--green-500); color: #FFFFFF; }
.rsgh-b .cs-mega .mg-trust li { color: rgba(255,255,255,.9); }

/* white featured rail inside the dark panel -- inverted a second time */
.rsgh-b .cs-rail {
  border-radius: 18px; padding: 20px; background: #FFFFFF; color: var(--ink-900);
  display: flex; flex-direction: column; gap: 15px;
}
.rsgh-b .cs-rail .mg-lbl { color: var(--green-600); margin-bottom: 0; }
.rsgh-b .cs-rail .mg-lbl::before { background: var(--green-500); }
.rsgh-b .cs-rail h3 { font-family: var(--font-display); font-size: 17px; font-weight: 800;
  line-height: 1.22; letter-spacing: -.018em; margin: 0; color: var(--ink-900); }
.rsgh-b .cs-rail h3 em { font-style: normal; color: var(--green-500); }
.rsgh-b .cs-rail-fig { border-radius: var(--radius-md); padding: 13px;
  background: var(--sand); border: 1px solid var(--line); }
.rsgh-b .cs-rail .mg-trust li { color: var(--ink-700); }
.rsgh-b .cs-rail .h-btn-pri { width: 100%; }

/* --- compacted state ---------------------------------------------------- */
.rsgh-b.is-stuck { padding-top: 8px; }
.rsgh-b.is-stuck .cs-bar { height: 58px; border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.05); }
.rsgh-b.is-stuck .cs-logo img { width: 132px; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .rsgh-b .cs-bar { gap: 14px; padding-left: 18px; }
  .rsgh-b .cs-lnk { padding: 9px 9px; font-size: 11px; letter-spacing: .05em; }
  .rsgh-b .cs-mega .mg-grid { grid-template-columns: minmax(0,1fr) 258px; gap: 22px; }
  .rsgh-b .cs-mega .mg-cols { gap: 13px; }
  .rsgh-b .cs-mega .mg-col + .mg-col { padding-left: 13px; }
}
@media (max-width: 1024px) {
  .rsgh-b .cs-nav, .rsgh-b .cs-right .h-cap { display: none; }
  .rsgh-b .cs-burger { display: flex; }
  .rsgh-b .cs-bar { justify-content: space-between; height: 64px; }
  .rsgh-b.is-stuck .cs-bar { height: 56px; }
}
@media (max-width: 640px) {
  .rsgh-b { padding-top: 10px; }
  .rsgh-b .cs-shell { padding: 0 14px; }
  .rsgh-b .cs-bar { height: 60px; padding: 0 8px 0 16px; border-radius: 16px; }
  .rsgh-b.is-stuck { padding-top: 6px; }
  .rsgh-b .cs-logo img { width: 128px; }
  .rsgh-b .cs-tel span { display: none; }
  .rsgh-b .cs-tel { padding: 9px 11px; }
}

/* --- */

/* ==========================================================================
   5. SHARED MOBILE DRAWER + BURGER
   One implementation for all three variants. Full-height panel, accordion
   groups, phone + CTA pinned to a footer that never scrolls away.
   Uses 100dvh where supported so iOS Safari's toolbar can't clip the footer.
   ========================================================================== */
/* NOTE: the .h-burger base rule is NOT here -- it lives in the shared
   foundation block. A media query adds no specificity, so a base
   `display:none` declared in this later block would beat every variant's
   `display:flex` at <=1024 and the burger would never appear. */

/* scrim */
.rsgh .dw-scrim {
  position: fixed; inset: 0; z-index: 940; background: rgba(10,10,10,.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s;
}
.rsgh .dw-scrim.is-open { opacity: 1; visibility: visible; }

/* panel */
.rsgh .dw {
  position: fixed; top: 0; right: 0; z-index: 950;
  width: min(408px, 100%); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--paper); box-shadow: -18px 0 54px rgba(0,0,0,.24);
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility .3s;
}
.rsgh .dw.is-open { transform: translateX(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) { .rsgh .dw { transition: visibility .01s; } }

.rsgh .dw-top {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line);
}
/* height:auto is mandatory, not decorative. The logo image element carries
   width="1000" height="250" for CLS, so a width-only rule renders it
   138x250 and vertically stretched. */
.rsgh .dw-top img { width: 138px; height: auto; }
.rsgh .dw-x {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink-900);
  transition: background .15s, color .15s, border-color .15s;
}
.rsgh .dw-x:hover { background: var(--ink-900); color: #FFFFFF; border-color: var(--ink-900); }

.rsgh .dw-strip {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 18px; background: var(--green-50);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green-700);
}
.rsgh .dw-strip i { width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-500); flex-shrink: 0; }
.rsgh .dw-strip s { text-decoration: none; opacity: .4; }

.rsgh .dw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: 8px 12px 18px; }
.rsgh .dw-grp { border-bottom: 1px solid var(--line-2); }
.rsgh .dw-grp:last-of-type { border-bottom: 0; }
.rsgh .dw-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 15px 8px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink-900); transition: color .15s;
}
.rsgh .dw-hd:hover { color: var(--green-600); }
.rsgh .dw-hd .cv { color: var(--ink-500); transition: transform .24s ease, color .15s; }
.rsgh .dw-hd[aria-expanded="true"] { color: var(--green-700); }
.rsgh .dw-hd[aria-expanded="true"] .cv { transform: rotate(180deg); color: var(--green-700); }
.rsgh .dw-sub { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease; }
.rsgh .dw-sub.is-open { grid-template-rows: 1fr; }
.rsgh .dw-sub-in { overflow: hidden; }
.rsgh .dw-sub-pad { padding: 0 0 12px; }
.rsgh .dw-cat {
  display: flex; align-items: center; gap: 8px; padding: 12px 8px 7px;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--green-600);
}
.rsgh .dw-cat::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-500); flex-shrink: 0; }
.rsgh .dw-li { display: flex; align-items: center; gap: 11px; padding: 10px 8px;
  border-radius: 11px; transition: background .14s; }
.rsgh .dw-li:hover { background: var(--sand); }
.rsgh .dw-li .mg-ic { width: 30px; height: 30px; border-radius: 8px; }
.rsgh .dw-li:hover .mg-ic { background: var(--green-500); color: #FFFFFF; }
.rsgh .dw-li-nm { font-family: var(--font-display); font-size: 13.5px;
  font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.rsgh .dw-li:hover .dw-li-nm { color: var(--green-600); }
.rsgh .dw-flat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 8px; font-family: var(--font-display); font-size: 15px;
  font-weight: 700; letter-spacing: -.01em; color: var(--ink-900);
  border-bottom: 1px solid var(--line-2); transition: color .15s;
}
.rsgh .dw-flat:hover { color: var(--green-600); }
.rsgh .dw-flat .cv { color: var(--line); }

.rsgh .dw-ft { flex-shrink: 0; padding: 14px 18px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--paper-soft);
  display: grid; gap: 9px; }
.rsgh .dw-ft .h-btn { width: 100%; padding: 14px 20px; font-size: 14px; }
.rsgh .dw-ft-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rsgh .dw-ft-tel { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.rsgh .dw-ft-tel svg { color: var(--green-500); }
.rsgh .dw-ft-crm { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 500; color: var(--ink-500); transition: color .15s; }
.rsgh .dw-ft-crm:hover { color: var(--green-600); }
.rsgh .dw-soc { display: flex; gap: 7px; }
.rsgh .dw-soc a { width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: #FFFFFF; }
.rsgh .dw-soc .fb { background: #1877F2; }
.rsgh .dw-soc .li { background: #0A66C2; }
.rsgh .dw-soc .ig { background: linear-gradient(45deg,#F09433,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888); }
.rsgh .dw-soc .yt { background: #FF0000; }

body.rsgh-lock { overflow: hidden; }

/* Below the nav breakpoint the desktop triggers are gone, so a mega panel can
   never be opened by a user -- but take it out of the layout entirely so no
   stale .is-open (from a resize mid-open, or from JS) can overflow the page. */
@media (max-width: 1024px) {
  .rsgh .mg-panel { display: none !important; }
}

/* --- */

/* ==========================================================================
   CONSOLE HEADER - 5-COLUMN SERVICES MEGA (Notion /services spec)
   Loaded AFTER p1 + p3 + p5, so it only overrides. Nothing in p1-pb is edited,
   which is what keeps the 3-variant gallery build byte-stable.

   The approved spec pairs every one of the 20 services with a one-line
   description, so the descriptions have to be visible -- which changes the
   layout maths from the 4-up gallery version:
     panel inner = 1200 wrap - 48 gutters - 52 panel padding = 1100px
     5 cols, 18px gaps (x4)                                  = 1028 / 5 = 205px
     minus item padding                                       = ~187px of text
   187px at 11.5px holds ~32 characters, so most descriptions land on two
   lines. That budget is why there is NO featured rail and NO 28px icon tile in
   this panel: either one drops the text column to ~150px and pushes the long
   descriptions to three lines, making the panel ~700px tall.
   ========================================================================== */

/* single variant - no switcher */

/* --- the 5-up grid ------------------------------------------------------- */
.rsgh-b .cs-mega-svc .cs-mega-in { padding: 24px 26px 22px; }
.rsgh-b .cs-mega-svc .mg-grid { display: block; }
.rsgh-b .svc5 {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px; align-items: start;
}
.rsgh-b .svc5-col { min-width: 0; }

/* group label: brand green + the spec's per-column glyph.
   The Notion table's green/yellow/orange/pink/blue cell colours are authoring
   aids, NOT a brand spec - amber, pink and blue are off-palette here, so every
   column reads in the one brand green and the GLYPH carries the distinction. */
.rsgh-b .svc5-lbl {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #7FD3A1;
  min-height: 42px; align-content: center;
}
.rsgh-b .svc5-lbl svg { color: var(--green-500); }
.rsgh-b .svc5-lbl-t { min-width: 0; }

/* item: no icon tile. A transparent left rail turns green on hover, which
   gives the row a hit-state without spending 38px of the text budget. */
.rsgh-b .svc5-li {
  display: block; padding: 8px 9px 8px 10px; border-radius: 9px;
  border-left: 2px solid transparent;
  transition: background .14s, border-color .14s;
}
.rsgh-b .svc5-nm {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  line-height: 1.28; letter-spacing: -.008em; color: #FFFFFF;
  transition: color .14s;
}
.rsgh-b .svc5-nm .cvr { color: rgba(255,255,255,0); transition: color .14s, transform .18s; flex-shrink: 0; }
.rsgh-b .svc5-ds {
  display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.38;
  color: rgba(255,255,255,.52); transition: color .14s;
}
.rsgh-b .svc5-li:hover { background: rgba(255,255,255,.06); border-left-color: var(--green-500); }
.rsgh-b .svc5-li:hover .svc5-nm { color: #7FD3A1; }
.rsgh-b .svc5-li:hover .svc5-ds { color: rgba(255,255,255,.72); }
.rsgh-b .svc5-li:hover .cvr { color: #7FD3A1; transform: translateX(2px); }

/* --- footer strip ------------------------------------------------------- */
.rsgh-b .cs-foot {
  margin-top: 18px; padding: 16px 18px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  /* An `auto` track collapses a width:100% SVG to its minimum, which shrank the
     diagram to ~300px and made its 8px labels illegible. Size the track. */
  display: grid; grid-template-columns: minmax(0, 1fr) 442px;
  gap: 24px; align-items: center;
}
.rsgh-b .cs-foot-l { min-width: 0; }
.rsgh-b .cs-foot-r { min-width: 0; }

/* CTA stack at the foot of column 5 - closes the void the spec's own column
   shape creates (6 items in column 3 vs 2 in column 5). */
.rsgh-b .svc5-cta {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; gap: 8px;
}
.rsgh-b .svc5-cta .h-btn { width: 100%; padding: 11px 14px; font-size: 12.5px; }
.rsgh-b .cs-foot .mg-lbl { color: #7FD3A1; margin-bottom: 7px; }
.rsgh-b .cs-foot .mg-lbl::before { background: var(--green-500); }
.rsgh-b .cs-foot h4 {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 800;
  line-height: 1.26; letter-spacing: -.015em; color: #FFFFFF; margin: 0 0 11px;
}
.rsgh-b .cs-foot h4 em { font-style: normal; color: #7FD3A1; }
.rsgh-b .cs-eng { display: block; width: 100%; max-width: 470px; height: auto; }
.rsgh-b .cs-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rsgh-b .cs-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; background: rgba(79,191,124,.13);
  border: 1px solid rgba(79,191,124,.26);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; color: #A6E0BD; white-space: nowrap;
}
.rsgh-b .cs-chip svg { color: #4FBF7C; }
.rsgh-b .cs-foot-r { display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; }
.rsgh-b .cs-foot-r .h-btn { width: 100%; }
/* ghost button on the dark panel - restates colour on hover, because an
   unchanged declaration is not a protected one once a theme is in the page */
.rsgh-b .cs-mega .h-btn-gh { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.4); }
.rsgh-b .cs-mega .h-btn-gh:hover { background: #FFFFFF; color: #0A0A0A; border-color: #FFFFFF; }

/* --- a 20-item panel is tall: never let it run off a short viewport ----- */
.rsgh-b .cs-mega { max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; }
.rsgh-b.is-stuck .cs-mega { max-height: calc(100vh - 84px); }
.rsgh-b .cs-mega::-webkit-scrollbar { width: 9px; }
.rsgh-b .cs-mega::-webkit-scrollbar-track { background: transparent; }
.rsgh-b .cs-mega::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 9px; }

/* --- responsive: 5 -> 3 -> 2 columns before the burger takes over ------- */
@media (max-width: 1240px) {
  .rsgh-b .svc5 { gap: 14px; }
  .rsgh-b .svc5-ds { font-size: 11px; }
  .rsgh-b .cs-eng { max-width: 400px; }
}
@media (max-width: 1100px) {
  /* Multicolumn FLOW, not a 3-up grid. Five groups in a 3-col grid leaves the
     sixth cell empty -- a ~430x330 void bottom-right. Multicol packs the groups
     by height with no empty cells; break-inside keeps a group whole. */
  .rsgh-b .svc5 { display: block; columns: 2; column-gap: 24px; }
  .rsgh-b .svc5-col {
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    margin-bottom: 20px;
  }
  .rsgh-b .svc5-col:last-child { margin-bottom: 0; }
  .rsgh-b .svc5-lbl { min-height: 0; }
  .rsgh-b .svc5-ds { font-size: 11.5px; }
  .rsgh-b .cs-foot { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* --- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   RS GONZALES -- GLOBAL FOOTER, RESTRAINED
   Built from rsg-ui-builder/_dmv-build/ -- edit the parts and re-run
   assemble-footer-r.ps1, never edit the output.

   This replaces the Two-Track build, which read as a sitemap rather than a
   footer. The ground, dot grid, glowing eyebrow dot, pill and marquee mechanics
   are still footer-dmv.html's. What changed is everything that made it busy:

     93 links, 9 headings   ->  25 links, 3 headings
     dual pills, 0/1/2 chips ->  ONE row of identical city pills
     9 green group icons     ->  none
     h2 44px                 ->  32px (it is a footer, not a hero)
     3 green bordered chips   ->  one quiet trust line
     green headings           ->  white headings, green kept for accent only

   THE RAGGEDNESS WAS THE REAL PROBLEM. Chip counts varied per metro, so no two
   pills shared a shape and the row read as accidental rather than designed.
   Every pill is now the same construction: pin + name. Nothing else.

   ONE MANUAL STEP BEFORE LAUNCH: paste
   outputs/footer-newsletter-ghl-custom-css.css into HighLevel
   (Sites > Forms > Styles > Advanced > Custom CSS), then Save AND Publish.
   Without it the newsletter is a white card in a dark footer.
   ========================================================================== */

.rsgr {
  --g: #45C97A;          /* on-dark accent green (yours) */
  --gd: #2C7A4B;         /* brand green-500, buttons */
  --gd2: #34925a;        /* button hover */
  --mut: #9DB0A4;
  --mut2: #7e9488;
  --line: rgba(255,255,255,.10);
  --pill-bg: rgba(255,255,255,.045);
  --pill-bd: rgba(255,255,255,.12);
  --pill-ink: #e7f1ea;
  --wrap: 1200px;
  position: relative; width: 100%;
  background: radial-gradient(120% 70% at 50% 0%,#16271c 0%,#0c160f 45%,#07110b 100%);
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow: hidden;
  padding: 64px 24px 0;
}
/* the dot grid */
.rsgr::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1.2px, transparent 1.2px);
  background-size: 28px 28px; opacity: .5; pointer-events: none;
}
/* NOTE -- `.rsgr`, NOT JUST `.rsgr *`. Inherited bug from footer-dmv.html: the
   reset there is `.rsg-dmv * { box-sizing: border-box }`, and `*` does not match
   the element it is scoped to. So the footer itself kept content-box while
   carrying `width: 100%` AND horizontal padding -- making its border box exactly
   48px wider than the viewport at EVERY width. Its own `overflow: hidden` cannot
   save it: that clips children, not the element's own box. */
.rsgr, .rsgr * { box-sizing: border-box; }
.rsgr a { text-decoration: none !important; }
.rsgr p { margin: 0; }
.rsgr img { max-width: 100%; display: block; }
/* Defensive resets -- this ships into a WordPress theme, beside theme +
   Elementor CSS, where `.site-footer ul` (0,2,0) beats `.rsgr ul` (0,1,1) and
   bullets in the nav are the visible result. */
.rsgr ul, .rsgr ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.rsgr li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.rsgr li::before, .rsgr li::marker { content: none !important; }
.rsgr h2, .rsgr h3, .rsgr h4 { margin: 0; color: #fff; }
.rsgr strong { color: #fff; }

/* Icon size locks. The WP theme injects svg{width:100%}, so every icon carries
   an explicit class with !important. Never a blanket svg rule. */
.rsgr .rfr-ic { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
.rsgr .rfr-ic-s { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }
/* declared AFTER .rfr-ic so it wins at equal specificity on the ext glyph */
.rsgr .rfr-ext { width: 11px !important; height: 11px !important;
  display: inline-block !important; vertical-align: -1px; opacity: .55; }

.rsgr .rfr-inner { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; }

/* --- masthead ---------------------------------------------------------- */
.rsgr .rfr-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px;
  align-items: end; margin-bottom: 34px;
}
.rsgr .rfr-head { max-width: 620px; }
.rsgr .rfr-ey {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--g); margin-bottom: 16px;
}
.rsgr .rfr-ey::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--g); box-shadow: 0 0 12px var(--g); flex-shrink: 0;
}
/* 32px, not the 44px this started at. A footer headline that competes with the
   page's own H1 is the single loudest thing in site-wide chrome. */
.rsgr .rfr-h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 32px;
  line-height: 1.18; letter-spacing: -.018em;
}
.rsgr .rfr-h2 em { color: var(--g); font-style: normal; }

.rsgr .rfr-ctas { display: flex; gap: 10px; flex-shrink: 0; }
.rsgr .rfr-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 22px; border-radius: 999px; background: var(--gd);
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14.5px; color: #fff;
  white-space: nowrap; transition: background .2s;
}
.rsgr .rfr-cta:hover { background: var(--gd2); }
.rsgr .rfr-cta2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(255,255,255,.26);
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14.5px; color: #fff;
  white-space: nowrap; transition: background .2s, border-color .2s;
}
.rsgr .rfr-cta2:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.rsgr .rfr-cta svg, .rsgr .rfr-cta2 svg { width: 15px !important; height: 15px !important; }

/* --- the ticker: ONE row, and every pill the same construction ---------
   The Two-Track build put SEO/AGENCY chips inside each pill, so a metro with
   two extra pages was ~2.5x the width of one with none and no two pills shared
   a shape. Uniform pills are the whole point of a pill row. */
.rsgr .rfr-marquee {
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.rsgr .rfr-row { overflow: hidden; }
.rsgr .rfr-track { display: flex; gap: 12px; width: max-content; animation: rfrL 64s linear infinite; }
@keyframes rfrL { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.rsgr .rfr-row:hover .rfr-track { animation-play-state: paused; }
.rsgr .rfr-pill {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 11px 19px; border-radius: 999px;
  background: var(--pill-bg); border: 1px solid var(--pill-bd);
  font-weight: 600; font-size: 15px; color: var(--pill-ink);
  transition: background .2s, border-color .2s, color .2s;
}
.rsgr .rfr-pill:hover { background: rgba(69,201,122,.16); border-color: var(--g); color: #fff; }
.rsgr .rfr-pin { flex-shrink: 0; width: 13px !important; height: 13px !important; opacity: .6; }

/* --- the directory band ------------------------------------------------ */
.rsgr .rfr-mid {
  position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto;
  margin-top: 46px; padding-top: 40px; border-top: 1px solid var(--line);
  /* Services is 1.7fr because its list runs 2-up: at 1.5fr each track was ~154px
     and "Google Business Profile", "Reputation Management" and "Hosting &
     Maintenance" all wrapped to two lines, which reads as two entries. ~175px
     per track puts every label on one line. Gap 34, not 40, to buy that width
     back without starving the brand column. */
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
}
.rsgr .rfr-brand { min-width: 0; }
.rsgr .rfr-logo { display: inline-block; margin-bottom: 18px; }
.rsgr .rfr-logoimg { height: 36px; width: auto; display: block; }
.rsgr .rfr-about { font-size: 14.5px; line-height: 1.65; color: var(--mut); max-width: 330px; }
.rsgr .rfr-about strong { font-weight: 700; }
/* ONE quiet line, not three green bordered chips. The 0% markup claim is
   non-negotiable content; it does not need three outlined boxes to be read. */
/* A FLEX ROW, NOT AN INLINE RUN. As inline text this wrapped mid-claim -- the
   column is ~260px and the three claims are ~330px, so it broke as
   "No Setup / Fees" and read as two separate things. Each claim is now its own
   nowrap flex item, so the line can only break BETWEEN claims. */
.rsgr .rfr-trust {
  margin-top: 18px; font-size: 12.5px; color: var(--mut2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
}
.rsgr .rfr-trust b { color: #cfe0d6; font-weight: 600; white-space: nowrap; }
/* The separator rides on the END of the claim before it. As its own flex item it
   became the first thing on the wrapped line -- a line opening with a lone
   middot reads as a typo. */
.rsgr .rfr-trust .dot { display: none; }
.rsgr .rfr-trust b:not(:last-child)::after {
  content: "\00B7"; color: rgba(255,255,255,.3); margin-left: 10px;
}
.rsgr .rfr-socials { display: flex; gap: 10px; margin-top: 22px; }
.rsgr .rfr-soc {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.06); display: flex; align-items: center;
  justify-content: center; color: #cfe0d6; transition: .2s;
}
.rsgr .rfr-soc:hover { background: var(--gd); color: #fff; }
.rsgr .rfr-soc svg { width: 17px !important; height: 17px !important; }

.rsgr .rfr-col { min-width: 0; }
/* WHITE, not green. Three green headings plus a green eyebrow plus a green em
   plus green chips plus green icons was the accent doing five jobs at once. */
.rsgr .rfr-col h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 18px;
}
.rsgr .rfr-col ul { display: flex; flex-direction: column; gap: 12px; }
.rsgr .rfr-col li a { color: var(--mut); font-size: 14.5px; transition: color .2s; }
.rsgr .rfr-col li a:hover { color: var(--g); }

/* Services carries 11 links to Company's and Get Started's 6, so as a single
   list it ran 384px deep against their 219 -- a 165px rag along the bottom of
   the footer, worse than the build this replaced. Setting it 2-up brings it to
   ~219 and the three columns end together, WITHOUT inventing a fourth heading
   or splitting the services into two semantic groups that do not exist.
   NOTE -- multicol does nothing on a flex container, so this list must go back
   to `display: block`, and the gap has to be re-expressed as a margin that
   beats the defensive `li { margin: 0 !important }` reset above. */
.rsgr .rfr-svc ul { display: block; column-count: 2; column-gap: 30px; }
.rsgr .rfr-svc li { margin-bottom: 12px !important; break-inside: avoid; }

/* --- Sarah + the newsletter -------------------------------------------- */
.rsgr .rfr-low {
  position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto;
  margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 48px;
  /* CENTRE, not start. Sarah's card is ~60px against the newsletter's ~300, and
     `align-items: start` turned that difference into a 240px hole in the
     bottom-left corner of the footer. Centred, the same difference reads as
     symmetric breathing room around a one-line founder credit. */
  align-items: center;
}
/* Sarah sits in the BRAND column, not in a band of her own. On her own row
   beside the newsletter she was ~90px tall against the form's 220, leaving a
   ~190px hole in the bottom-left of the footer -- and a founder's face parked
   in an empty half-row reads as an afterthought, which is the opposite of the
   brand rule she is there to satisfy.
   A BIO CARD, not a pull quote: her name sits ABOVE the line, because anything
   set beside a founder's face and above her name reads as her words. */
.rsgr .rfr-sig { display: flex; gap: 14px; align-items: center; max-width: 620px; }
.rsgr .rfr-sig-av { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; border: 2px solid rgba(69,201,122,.35); }
.rsgr .rfr-sig-av img { width: 52px; height: 52px; object-fit: cover; }
.rsgr .rfr-sig-b { min-width: 0; }
.rsgr .rfr-sig-n { display: block; margin-bottom: 5px;
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700;
  color: #fff; transition: color .18s; }
.rsgr .rfr-sig-n:hover { color: var(--g); }
.rsgr .rfr-sig-n span { font-weight: 500; font-size: 12.5px; color: var(--mut2); }
.rsgr .rfr-sig-q { display: block; font-size: 13px; line-height: 1.6; color: var(--mut); }

.rsgr .rfr-news-h { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: .005em; color: #fff; margin-bottom: 5px; }
.rsgr .rfr-news-sub { font-size: 13.5px; color: var(--mut); margin-bottom: 14px; line-height: 1.5; }
/* THE RESERVE GOES ON THE WRAPPER, NEVER ON THE IFRAME. form_embed.js
   absolutely-positions the iframe off-screen until the widget initialises, so a
   min-height on the iframe element reserves nothing and the column collapses. And a
   CSS min-height there is a floor the script can never resize BELOW, which
   ships permanent dead space.
   The radius is on the IFRAME, not on an overflow:hidden wrapper -- a wrapper
   that clips would cut the form off the moment form_embed.js resizes it taller. */
/* 270. MEASURED, not guessed: at 220 the live form rendered with its Subscribe
   button sliced in half. The form is two fields plus a button and it carries its
   own generous internal padding. With the resizer script gone nothing can resize
   this at runtime, so the declared height is the ONLY height -- too short crops
   the submit, and the submit is the whole point of the block.
   Only emitted when the build runs with $InlineForm = $true. */
.rsgr .rfr-embed { min-height: 270px; }
.rsgr .rfr-embed iframe {
  width: 100%; height: 270px; border: none; display: block; border-radius: 10px;
}

/* The stand-in while the dark Custom CSS is not yet pasted into HighLevel.
   An UNSTYLED GHL form is the single ugliest thing that can sit in this footer:
   its submit renders as a solid WHITE BAR and its fields as faint hairlines, and
   none of it can be reached from this stylesheet (cross-origin iframe). A brand
   CTA that opens the real form is better-looking AND works today. */
.rsgr .rfr-news-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(255,255,255,.26);
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: #fff;
  white-space: nowrap; transition: background .2s, border-color .2s;
}
.rsgr .rfr-news-cta:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

/* --- bottom bar --------------------------------------------------------- */
.rsgr .rfr-bottom {
  position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto;
  margin-top: 44px; border-top: 1px solid var(--line); padding: 22px 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap; font-size: 13.5px; color: var(--mut2);
}
.rsgr .rfr-legal { display: flex; gap: 16px 26px; flex-wrap: wrap; }
.rsgr .rfr-legal a { color: var(--mut2); transition: color .2s; }
.rsgr .rfr-legal a:hover { color: var(--g); }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .rsgr .rfr-mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
  .rsgr .rfr-brand { grid-column: 1 / -1; }
  .rsgr .rfr-about { max-width: 520px; }
}
@media (max-width: 900px) {
  .rsgr .rfr-top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rsgr .rfr-ctas { flex-wrap: wrap; }
  .rsgr .rfr-low { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rsgr .rfr-h2 { font-size: 28px; }
}
@media (max-width: 640px) {
  .rsgr { padding: 52px 20px 0; }
  .rsgr .rfr-mid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* one column of ~335px split 2-up leaves ~150px per track, and every service
     label longer than "Copywriting" wraps to two lines -- a wrapped link in a
     narrow column reads as two entries. Back to a single list. */
  .rsgr .rfr-svc ul { column-count: 1; }
  .rsgr .rfr-brand { grid-column: auto; }
  .rsgr .rfr-cta, .rsgr .rfr-cta2 { width: 100%; }
  .rsgr .rfr-h2 { font-size: 26px; }
  .rsgr .rfr-bottom { justify-content: flex-start; }
}

/* --- motion ------------------------------------------------------------- */
/* Under reduced motion the track stops AND unwraps into a static wrapped cloud
   -- stopping the animation alone would leave the row clipped at whatever frame
   it froze on, hiding most of the cities behind `overflow: hidden`. */
@media (prefers-reduced-motion: reduce) {
  .rsgr .rfr-track { animation: none !important; flex-wrap: wrap; width: auto; }
  .rsgr .rfr-row { overflow: visible; }
  .rsgr .rfr-marquee { -webkit-mask-image: none; mask-image: none; }
  .rsgr .dup { display: none !important; }
  .rsgr *, .rsgr *::before, .rsgr *::after { transition-duration: .01s !important; }
}

/* ==========================================================================
   DEFENSIVE COLOUR LOCKS -- last in the sheet, and deliberately !important
   --------------------------------------------------------------------------
   This is GLOBAL CHROME. It renders at the bottom of every page, underneath
   whatever CSS that page and the WordPress theme and Elementor bring with them,
   and it cannot choose its neighbours.

   THE CONCRETE CASE, not a hypothetical: rsg-ui-builder/outputs/pricing.html
   ships `p { color: #333 !important }` as a bare, page-wide rule. An
   !important declaration beats a normal one at ANY specificity, so
   `.rsgr .rfr-about { color: var(--mut) }` loses to it and the footer's body
   copy renders #333 on a near-black ground -- effectively invisible, and only
   on that one page, which is exactly the kind of fault that ships.

   So every text primitive in here locks its own colour. Colour ONLY -- layout
   is left alone, because a page cannot accidentally re-lay-out a scoped
   component the way it can recolour a bare element.
   ========================================================================== */
.rsgr p { color: inherit !important; }
.rsgr strong { color: #fff !important; }
.rsgr .rfr-h2, .rsgr .rfr-col h4, .rsgr .rfr-news-h { color: #fff !important; }
.rsgr .rfr-h2 em { color: var(--g) !important; }
.rsgr .rfr-ey { color: var(--g) !important; }
.rsgr .rfr-about { color: var(--mut) !important; }
.rsgr .rfr-trust { color: var(--mut2) !important; }
.rsgr .rfr-trust b { color: #cfe0d6 !important; }
.rsgr .rfr-news-sub { color: var(--mut) !important; }
.rsgr .rfr-col li a { color: var(--mut) !important; }
.rsgr .rfr-col li a:hover { color: var(--g) !important; }
.rsgr .rfr-legal a { color: var(--mut2) !important; }
.rsgr .rfr-legal a:hover { color: var(--g) !important; }
.rsgr .rfr-pill { color: var(--pill-ink) !important; }
.rsgr .rfr-pill:hover { color: #fff !important; }
.rsgr .rfr-sig-n { color: #fff !important; }
.rsgr .rfr-sig-n span { color: var(--mut2) !important; }
.rsgr .rfr-sig-q { color: var(--mut) !important; }
.rsgr .rfr-cta, .rsgr .rfr-cta2, .rsgr .rfr-news-cta { color: #fff !important; }
.rsgr .rfr-cta2:hover { color: #07110b !important; }
.rsgr .rfr-soc { color: #cfe0d6 !important; }
.rsgr .rfr-soc:hover { color: #fff !important; }