/*
Theme Name: Registry
Theme URI: https://justweb.agency/
Author: Just Web Agency
Description: A portable theme for verified-directory sites. Ships the page shell, the design system and the Customizer controls; the data and the page types come from a companion plugin, so the same theme serves any trade vertical. No vertical-specific words, colours or layout live here.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: registry
Tags: directory, custom-colors, custom-logo, custom-menu, translation-ready, accessibility-ready
*/

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS

   Every colour, radius and shadow in the theme resolves to one of these. Change
   a value here (or in the Customizer, which overrides the four brand ones at
   runtime) and it changes everywhere — that is the whole point, and the reason
   the old build drifted: nineteen page templates each carried their own copy.

   Values inherited from the profile redesign draft, deliberately, so the shell
   and the page content agree rather than being two design languages stapled
   together.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand — the four the Customizer can override */
  --rg-brand:        #1D4ED8;
  --rg-brand-dark:   #1740A8;
  --rg-deep:         #0A1535;
  --rg-deep-2:       #16224A;
  /* A drawing is a large flat area where a letterform is a thin stroke, so the
     same navy that reads as ink in type reads as a black blob in an icon.
     This is that navy lifted far enough to sit beside the text rather than
     shout over it. */
  --rg-icon:         #2E4272;

  /* Neutrals */
  --rg-ink:          #1A2230;
  --rg-muted:        #62707F;
  --rg-line:         #E7EAF0;
  --rg-bg:           #EEF2F6;
  --rg-surface:      #FFFFFF;

  /* Semantic — meaning, never decoration */
  --rg-good:         #1A9C54;
  --rg-bad:          #CF3636;
  --rg-warn:         #9A6A12;
  --rg-star:         #F5A623;

  /* Form */
  --rg-radius:       18px;
  --rg-radius-sm:    10px;
  --rg-gap:          16px;
  --rg-shadow:       0 1px 2px rgba(16, 32, 64, .06), 0 8px 24px rgba(16, 32, 64, .07);
  --rg-shadow-sm:    0 1px 2px rgba(16, 32, 64, .07);

  /* Layout */
  --rg-wrap:         1180px;
  --rg-wrap-narrow:  760px;
  --rg-nav-h:        64px;

  /* Type — the family is set by the Customizer; this is the fallback chain */
  --rg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --rg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rg-bg);
  color: var(--rg-ink);
  font-family: var(--rg-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
h2 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }

p { margin: 0 0 1em; }
/* ⚠️ LINKS ARE NOT UNDERLINED BY DEFAULT ANY MORE, AND PROSE OPTS IN.
   It was the other way round: the browser's underline stood, and every
   component on the site had to remember to say `text-decoration: none`. That is
   twenty chances to forget, and it has been forgotten three times — the whole
   home page on 29 Aug, the card and chips on Browse All the next day, and the
   Call button on every listing card, which underlined itself on hover. A
   default that has to be switched off in twenty places is the wrong default.

   Prose is the one place an underline is genuinely load-bearing: a link inside
   a paragraph needs a cue that is not colour alone, or it is invisible to a
   reader who cannot separate the two. So the containers that hold written
   copy — and only those — turn it back on, below.

   ⚠️ AND THE HOVER COLOUR ONLY APPLIES TO UNCLASSED LINKS. `a:hover` outranks
   any single class, so this rule was repainting components that had already
   chosen their own colour: the Call button's white text turned the same navy as
   the button underneath it and the label vanished on hover. A link that carries
   a class is a component and decides its own states. */
a { color: var(--rg-brand); text-decoration: none; text-underline-offset: 2px; }
a:not([class]):hover { color: var(--rg-brand-dark); }
.rg-prose a, .rg-loc-prose a, .rg-faq__a a, .rg-loc-a a { text-decoration: underline; }

/* Keyboard users must always be able to see where they are. */
:focus-visible {
  outline: 2px solid var(--rg-brand);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.rg-wrap        { max-width: var(--rg-wrap); margin: 0 auto; padding: 0 20px; }
.rg-wrap--narrow { max-width: var(--rg-wrap-narrow); }
.rg-main        { display: block; min-height: 50vh; }

/* Screen-reader-only, and the skip link that becomes visible on focus. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.rg-skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  width: auto; height: auto; clip: auto; clip-path: none;
  margin: 0; padding: 10px 18px;
  background: var(--rg-surface); color: var(--rg-ink);
  border-radius: var(--rg-radius-sm);
  box-shadow: var(--rg-shadow);
  font-weight: 600;
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   One definition. The old build had at least nine classes doing this job,
   which is most of why it looked inconsistent.
   ───────────────────────────────────────────────────────────────────────── */

.rg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--rg-radius-sm);
  background: var(--rg-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rg-btn:hover { background: var(--rg-brand-dark); color: #fff; }

.rg-btn--ghost {
  background: transparent;
  border-color: var(--rg-line);
  color: var(--rg-ink);
}
.rg-btn--ghost:hover { background: var(--rg-surface); border-color: var(--rg-brand); color: var(--rg-brand); }

.rg-btn--sm { padding: 8px 14px; font-size: 14px; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.rg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--rg-surface);
  border-bottom: 1px solid var(--rg-line);
}
.rg-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--rg-nav-h);
}

.rg-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--rg-ink);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  margin-right: auto;
}
.rg-brand img { max-height: 34px; width: auto; }
.rg-brand__mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--rg-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.rg-nav { display: flex; align-items: center; gap: 4px; }
.rg-nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* ⚠️ THE TWO EXCLUSIONS ARE LOAD-BEARING, AND THEY WORK BY NOT MATCHING —
   NOT BY WINNING. This rule styles the BAR's own links, but it is written as a
   descendant of `.rg-nav`, and everything the header contains is inside
   `.rg-nav`: the call to action, and every link in a drop-down panel. At (0,1,1)
   it silently outranked both, which painted the small-screen button black on
   blue from the day the theme shipped, and flattened the panels' three-part
   links back into blocks.

   ⚠️ RAISING THE PANEL'S SPECIFICITY TO ANSWER IT IS A TRAP. `:not(.rg-btn)`
   alone took this rule to (0,2,1), which then beat `.rg-mega .rg-mega__link` at
   (0,2,0) — the fix for the button broke the panels the same minute. An
   exclusion cannot be outbid: the rule simply does not apply, whatever anyone
   writes later.

   The stylesheet already states the principle further up, for `a:not([class])`:
   a link carrying a class is a component and owns its own states. This is that
   principle, applied where it had been forgotten. */
.rg-nav a:not(.rg-btn):not(.rg-mega__link) {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--rg-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.rg-nav a:not(.rg-btn):not(.rg-mega__link):hover { background: var(--rg-bg); color: var(--rg-brand); }
.rg-nav .current-menu-item > a,
.rg-nav .current_page_item > a,
.rg-nav .current-menu-ancestor > a { color: var(--rg-brand); font-weight: 600; }

/* ── Language switcher ──────────────────────────────────────────────────
   Two or three short words, not a flag and not a dropdown. Flags are wrong for
   languages — Spanish is not Spain here, it is a Floridian reading Spanish —
   and a dropdown hides the one thing somebody in the wrong language is looking
   for. It prints nothing at all on a single-language site.

   ⚠️ IT LIVES IN THE FOOTER, and these are only its bare bones; the look it
   actually wears is with the rest of the footer, further down. It stood in the
   header until 15 Sep, where its two words cost 137px — enough to squeeze the
   brand until the menu button covered the site's own name on a phone, and to
   push the desktop row one pixel over its width, which dropped every nav caret
   onto a second line. Timothy moved it. Do not move it back. */
.rg-lang { flex-shrink: 0; }
.rg-lang__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rg-lang__item + .rg-lang__item::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 2px;
  background: var(--rg-line);
  vertical-align: -2px;
}
.rg-lang__link {
  display: inline-block;
  padding: 4px 6px;
  border-radius: var(--rg-radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--rg-muted);
  text-decoration: none;
  white-space: nowrap;
}
a.rg-lang__link:hover,
a.rg-lang__link:focus-visible { color: var(--rg-brand); }
.rg-lang__link.is-current { color: var(--rg-ink); cursor: default; }
/* The dot marks a link that goes to that language's front page rather than to
   this page — the title attribute says so in words. */
.rg-lang__note { opacity: .55; }

.rg-header__cta { flex-shrink: 0; }
/* ⚠️ The nav carries a SECOND copy of the call to action, for the mobile panel
   where the header's own copy is hidden. Nothing hid this one on desktop, so
   the header showed "Add Your Listing" twice, side by side, on every page the
   theme draws. It is hidden here and turned back on in the mobile block. */
.rg-nav > .rg-btn { display: none; }

/* Mobile: a real disclosure button, not a checkbox hack, so it announces state. */
.rg-nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-sm);
  background: var(--rg-surface);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.rg-nav-toggle__bars { display: grid; gap: 3px; }
.rg-nav-toggle__bars span { display: block; width: 16px; height: 2px; background: var(--rg-ink); border-radius: 2px; }

@media (max-width: 880px) {
  .rg-nav-toggle { display: inline-flex; }
  .rg-header__cta { display: none; }
  .rg-nav {
    display: none;
    position: absolute;
    inset: var(--rg-nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    background: var(--rg-surface);
    border-bottom: 1px solid var(--rg-line);
    box-shadow: var(--rg-shadow);
  }
  .rg-nav.is-open { display: flex; }
  /* ⚠️ THE PANEL MUST SCROLL INSIDE ITSELF. It is absolutely positioned inside a
     STICKY header, so it travels with the header and the page's own scroll never
     reaches its foot. With five flat links that never showed; with four
     drop-downs the menu is 1,690px tall on a phone and everything below the fold
     — Gallery, Resources and the Quick Quote button — was unreachable. Measured
     on the sandbox, not reasoned: scrolled 3,000px and the menu had not moved.
     `dvh` first so the browser's own disappearing toolbar is accounted for. */
  .rg-nav {
    max-height: calc(100vh - var(--rg-nav-h));
    max-height: calc(100dvh - var(--rg-nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .rg-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .rg-nav a:not(.rg-btn):not(.rg-mega__link) { padding: 12px 8px; border-radius: 8px; font-size: 16px; }
  .rg-nav > .rg-btn { display: inline-flex; margin-top: 10px; width: 100%; }

  /* ⚠️ THE HEADER ROW IS A FIXED BUDGET, AND IT WAS OVERSPENT. Measured on a
     390px phone: brand 145 + toggle 88 + language switcher 137 + two 20px gaps
     = 410px of content in a 320px row. The language switcher does not shrink
     and the button's own word will not break, so the BRAND is what gave way —
     squeezed to 111px while its name still drew 101px of text, which ran on
     underneath the button. The button carries an opaque background, so it
     painted over the tail of the site's own name, which read as a shorter and
     unfortunate word. Reported 15 Sep. (The theme names no site: that is the
     rule this file lives under, and the reason the example is not spelled out.)
     Three rules below buy the room back; these two are the guard rail that stops
     anything ever painting over the site's own name again. */
  .rg-header__inner { gap: 12px; }
  .rg-brand { min-width: 0; }
  .rg-brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rg-nav-toggle { flex-shrink: 0; }
}

/* Below ~600px the row cannot hold the word as well as the bars. The label is
   CLIPPED, never removed — JavaScript rewrites its text to "Open menu" /
   "Close menu", and that text is the button's only accessible name, so a
   `display: none` here would leave a screen reader announcing an unnamed
   button. Clipped, it is still read aloud and still changes with the state.
   ⚠️ `position: absolute` also takes it out of the flex flow, so the button's
   own 8px gap stops counting it — which is where a third of the saving is. */
@media (max-width: 600px) {
  .rg-nav-toggle__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .rg-nav-toggle { padding: 9px 11px; }
  .rg-nav-toggle__bars span { width: 18px; }
  /* The switcher stays visible on a phone — that decision is above, and it
     stands. It just stops being the widest thing in the bar. */
  /* The last few pixels come from the row itself: a narrower gutter and a
     slightly smaller wordmark. Both are cheap; a clipped brand name is not. */
  .rg-header__inner { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .rg-brand { gap: 8px; font-size: 16px; }
}

/* ── The header's drop-down panels ───────────────────────────────────────
   Columns of links and a deep-coloured rail beside them. What goes in them is
   the directory's business; this is only the shape of it.

   ⚠️ THE PANEL IS POSITIONED AGAINST THE HEADER, NOT AGAINST ITS OWN ITEM. The
   header is already `position: sticky`, which makes it the containing block, so
   `left: 0; right: 0` spans the window rather than the width of the word
   "Cities". The list item must therefore stay unpositioned — giving it
   `position: relative` for any reason shrinks every panel to the width of its
   own label.

   ⚠️ THE PANEL SITS INSIDE `.rg-nav`, so the bar's own `.rg-nav ul` and
   `.rg-nav a` rules reach it — and at (0,1,1) they beat a plain class. That put
   the town list on one line and painted the rail's outlined button in ink on
   navy, which is invisible. Every rule below that the nav also has an opinion
   about is written as `.rg-mega .rg-mega__x`, which outranks it without
   changing a single rule the bar depends on.

   ⚠️ `hidden` DOES THE HIDING, not a class. The attribute is what the button's
   aria-expanded is describing, so the two can never disagree; a `display` rule
   further down the file would silently beat it, which is why it is stated with
   the panel and not left to the browser.
   ───────────────────────────────────────────────────────────────────────── */

/* ⚠️ IT WRAPS. On a narrow screen the panel stops floating and becomes a
   third item in this row — beside the label rather than under it, leaving
   the word "Cities" floating halfway down its own menu. It needs a line of
   its own, and the desktop panel is out of flow so wrapping costs it
   nothing. */
.rg-nav__has-mega { display: flex; align-items: center; flex-wrap: wrap; }
.rg-nav__has-mega > a { padding-right: 4px; }

/* ⚠️ AND ON A DESKTOP IT MAY NOT. The wrap above is for the narrow screen it
   was written for; on a wide one it is what a cramped row spends first. With
   the language switcher in the bar the row measured 1,141px inside 1,140px of
   usable width — one pixel — and every item shrank just enough to drop all
   three carets under their labels and break "Browse All" over two lines. The
   switcher has gone to the footer, which leaves 137px of slack; these two rules
   mean the same thing can never be true again, at any width, for any menu. */
@media (min-width: 881px) {
  .rg-nav__has-mega { flex-wrap: nowrap; }
  .rg-nav > ul > li > a { white-space: nowrap; }
}

.rg-nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--rg-muted);
  cursor: pointer;
}
.rg-nav__caret svg { width: 10px; height: 6px; transition: transform .18s ease; }
.rg-nav__caret:hover { background: var(--rg-bg); color: var(--rg-brand); }
.rg-nav__caret[aria-expanded="true"] { color: var(--rg-brand); }
.rg-nav__caret[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The whole item lights up while its panel is open, so the eye can see which
   word the sheet below belongs to. */
.rg-nav__has-mega:has(.rg-nav__caret[aria-expanded="true"]) > a {
  background: var(--rg-bg);
  color: var(--rg-brand);
}

.rg-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 90;
  background: var(--rg-surface);
  border-bottom: 1px solid var(--rg-line);
  box-shadow: 0 24px 48px rgba(10, 21, 53, .16);
}
.rg-mega[hidden] { display: none; }

.rg-mega__inner { display: grid; gap: 0; }
@media (min-width: 981px) {
  .rg-mega__inner--rail { grid-template-columns: minmax(0, 1fr) 300px; }
}

.rg-mega__cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  padding: 30px 0 26px;
}
.rg-mega__inner--rail .rg-mega__cols { padding-right: 34px; }

.rg-mega__ct {
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rg-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rg-muted);
}
.rg-mega .rg-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.rg-mega .rg-mega__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: 7px;
  color: var(--rg-ink);
  font-size: 14.5px;
  text-decoration: none;
}
.rg-mega .rg-mega__link:hover { background: var(--rg-bg); color: var(--rg-brand); }
.rg-mega__label { flex: 1; min-width: 0; }
.rg-mega__n {
  flex: none;
  font-size: 12px;
  color: var(--rg-muted);
  font-variant-numeric: tabular-nums;
}
.rg-mega .rg-mega__link:hover .rg-mega__n { color: var(--rg-brand); }

/* Same drawings as the front page's tiles, at menu size. Two classes, no
   colours — see the note over the category tiles for why they are inline SVG
   and not images. */
.rg-mega__icon { flex: none; width: 20px; height: 20px; }
.rg-mega__icon svg { width: 20px; height: 20px; }
.rg-mega__icon .rg-i-fill { fill: var(--rg-icon); }
.rg-mega__icon .rg-i-hole { fill: var(--rg-surface); }
.rg-mega .rg-mega__link:hover .rg-mega__icon .rg-i-fill { fill: var(--rg-brand); }
.rg-mega .rg-mega__link:hover .rg-mega__icon .rg-i-hole { fill: var(--rg-bg); }

.rg-mega__rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0;
  padding: 26px 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--rg-deep-2), var(--rg-deep));
  color: #fff;
}
.rg-mega__rail-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.rg-mega__rail-text { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .66); }
.rg-mega .rg-mega__rail .rg-btn { width: 100%; }
.rg-mega__stats {
  display: flex;
  gap: 22px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.rg-mega__stats b { display: block; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rg-mega__stats span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* The two buttons that only exist on a dark ground. */
.rg-btn.rg-btn--light { background: #fff; color: var(--rg-deep); }
.rg-btn.rg-btn--light:hover { background: rgba(255, 255, 255, .88); color: var(--rg-deep); }
.rg-btn.rg-btn--wire { background: transparent; border-color: rgba(255, 255, 255, .32); color: #fff; }
.rg-btn.rg-btn--wire:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Narrow: the panel stops floating and becomes part of the menu it belongs to,
   which is the only arrangement that works in a column 320px wide. */
@media (max-width: 880px) {
  .rg-nav__has-mega { justify-content: space-between; }
  .rg-nav__has-mega > a { flex: 1; }
  .rg-nav__caret { width: 44px; height: 44px; }
  .rg-mega {
    flex: 1 0 100%;
    position: static;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .rg-mega__inner { padding: 0; }
  .rg-mega__cols {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 4px 0 12px 8px;
  }
  .rg-mega__inner--rail .rg-mega__cols { padding-right: 0; }
  .rg-mega__rail { margin: 0 0 14px; }
  /* Timothy, 1 Sep: drop the counters on a phone. They are the least useful
     thing in the panel and the most vertical space per word. The buttons above
     them already say "See all 226". */
  .rg-mega__stats { display: none; }
  /* One continuous band for the open item: at this width the label and the
     caret are edge to edge, and two rounded backgrounds leave a white seam
     down the middle of what is meant to read as one row. */
  .rg-nav__has-mega:has(.rg-nav__caret[aria-expanded="true"]) > a,
  .rg-nav__has-mega:has(.rg-nav__caret[aria-expanded="true"]) > .rg-nav__caret {
    background: var(--rg-bg);
    border-radius: 0;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.rg-footer {
  margin-top: 64px;
  padding: 48px 0 32px;
  background: var(--rg-deep);
  color: rgba(255, 255, 255, .72);
  font-size: 14.5px;
}
.rg-footer__inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  /* The link columns take the greater share now that there are four of them —
     at 1fr/2fr each column came out under 200px and the longer titles wrapped. */
  .rg-footer__inner { grid-template-columns: minmax(200px, .85fr) 2.6fr; gap: 48px; }
}

.rg-footer__brand-name {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 800; font-size: 17px;
  text-decoration: none; margin-bottom: 10px;
}
.rg-footer__brand-name img { max-height: 32px; width: auto; }
.rg-footer__tagline { margin: 0; max-width: 42ch; line-height: 1.6; }

/* ── The footer's columns ──────────────────────────────────────────────────
   Was a flex row of every link at once: fourteen of them wrapping across two
   ragged lines, in no order, with Privacy sitting between Add Listing and
   Terms. The grouping is the whole point — a reader scans a heading, not a
   hedge — and it comes from the MENU'S OWN NESTING, so the theme holds no list
   of sections and Timothy rearranges them in Appearance → Menus.

   ⚠️ `auto-fit` rather than a fixed four. The columns are whatever the menu has
   — four today — and a hardcoded `repeat(4, 1fr)` would leave a gap the day a
   fifth is added or one is removed. */
.rg-footer__cols {
  display: grid; gap: 28px 24px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.rg-footer__cols > li { min-width: 0; }
.rg-footer__cols .sub-menu {
  display: flex; flex-direction: column; gap: 9px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
/* The heading. Uppercase and smaller than its links, so the eye reads it as a
   label rather than as the first item in the list. */
.rg-footer__coltitle {
  display: block; color: #fff; font-weight: 700;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
}
/* ⚠️ A top-level item that IS a link still gets the heading's look, so a column
   whose title happens to lead somewhere does not sit oddly among the others. */
.rg-footer__cols > li > a {
  display: block; color: #fff; font-weight: 700;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
}
.rg-footer__cols > li > a:hover { text-decoration: underline; }

.rg-footer__nav a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.rg-footer__nav a:hover { color: #fff; }
.rg-footer__cols .sub-menu a { font-size: 14.5px; line-height: 1.35; }

/* Two columns on a phone rather than one: four headings stacked vertically is a
   very long footer to scroll past to reach nothing. */
@media (max-width: 640px) {
  .rg-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}

/* The closing row: small print on one side, the language switcher on the other.
   The rule above them belongs to the ROW, not to the small print — it used to
   sit on the paragraph, and a paragraph in a flex row is only as wide as its own
   text, so the line stopped halfway across the page the moment anything stood
   beside it. */
.rg-footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.rg-footer__legal {
  margin: 0;
  font-size: 13.5px; color: rgba(255, 255, 255, .55);
}

/* The switcher, wearing the footer's clothes: two pills on a dark ground, the
   language you are reading filled in, the other one outlined. The globe is
   decorative and belongs to the group — a flag per language would be the wrong
   sign, for the reason stated where this component is defined. */
.rg-footer__base .rg-lang { display: flex; align-items: center; gap: 10px; }
.rg-footer__base .rg-lang::before {
  content: "🌐";
  font-size: 15px;
  line-height: 1;
  opacity: .8;
}
.rg-footer__base .rg-lang__list { gap: 8px; }
/* Pills need no divider between them. */
.rg-footer__base .rg-lang__item + .rg-lang__item::before { display: none; }
.rg-footer__base .rg-lang__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .78);
  font-size: 13.5px;
  font-weight: 600;
}
.rg-footer__base a.rg-lang__link:hover,
.rg-footer__base a.rg-lang__link:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.rg-footer__base .rg-lang__link.is-current {
  background: #fff;
  border-color: #fff;
  color: var(--rg-deep);
}
/* On a phone the row stacks, and the pills lead rather than trail. */
@media (max-width: 560px) {
  .rg-footer__base { flex-direction: column-reverse; align-items: flex-start; }
}
/* The name in the copyright line goes home — often the only way back from the
   bottom of a long page. Underlined on hover only, so the line still reads as
   small print rather than as navigation. */
.rg-footer__home { color: rgba(255, 255, 255, .8); text-decoration: none; }
.rg-footer__home:hover { color: #fff; text-decoration: underline; }
.rg-footer :focus-visible { outline-color: #fff; }

/* ── Content primitives ──────────────────────────────────────────────────── */

.rg-card {
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius);
  box-shadow: var(--rg-shadow-sm);
  padding: 22px;
}

/* ⚠️ THE SIDE PADDING IS PART OF THIS RULE — same failure as `.rg-block` below,
   one class along and it survived that fix. `.rg-wrap` sets `padding: 0 20px`
   and this shorthand lands AFTER it, so every `rg-wrap rg-page` reset its own
   side padding to zero: the blog post, the archive, search results, the static
   pages and the blog index all ran flush to the edge of a phone screen while
   every other page type kept its gutter. Timothy, 4 Sep: *"The width of posts.
   They're on mobile now end to end, from one border to another border of the
   screen."* One declaration, both axes. */
.rg-page { padding: 40px 20px 0; }
.rg-page__header { margin-bottom: 28px; }
.rg-page__lede { font-size: 18px; color: var(--rg-muted); max-width: 62ch; margin: 0; }

.rg-prose { max-width: 68ch; }
.rg-prose h2 { margin-top: 1.6em; }
.rg-prose img, .rg-prose figure { border-radius: var(--rg-radius-sm); margin: 1.5em 0; }
.rg-prose code { font-family: var(--rg-font-mono); font-size: .88em; background: var(--rg-bg); padding: 2px 6px; border-radius: 4px; }
.rg-prose blockquote {
  margin: 1.5em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--rg-brand);
  color: var(--rg-muted); font-size: 17px;
}
/* Wide things scroll inside themselves; the page never scrolls sideways. */
.rg-prose table, .rg-prose pre { display: block; max-width: 100%; overflow-x: auto; }

/* ── Bands ───────────────────────────────────────────────────────────────
   The dark strip at the top of an index, an archive or an article. It is the
   one place the deep brand colour does real work, so it is defined once and
   every page type that needs a masthead uses it.
   ───────────────────────────────────────────────────────────────────────── */

.rg-band {
  background: linear-gradient(180deg, var(--rg-deep-2), var(--rg-deep));
  color: #fff;
  padding: 40px 0;
}
.rg-band__title { color: #fff; margin: 0; }
.rg-band__lede {
  margin: 12px 0 0;
  max-width: 62ch;
  color: rgba(255, 255, 255, .74);
  font-size: 17px;
}
.rg-band__lede p:last-child { margin-bottom: 0; }
.rg-band a { color: #fff; }

/* An article masthead: text beside the lead image. */
.rg-band--article .rg-band__title { font-size: clamp(24px, 3vw, 34px); }
.rg-band__split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .rg-band__split { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
  .rg-band__split--solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
}
.rg-band__media { margin: 0; }
.rg-band__media img {
  width: 100%;
  border-radius: var(--rg-radius);
  box-shadow: 0 18px 44px rgba(10, 21, 53, .32);
}

.rg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.rg-crumbs a { color: #fff; opacity: .85; text-decoration: none; }
.rg-crumbs a:hover { opacity: 1; }

.rg-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .6);
  font-size: 14.5px;
  font-weight: 500;
}
.rg-byline__who { color: rgba(255, 255, 255, .88); font-weight: 600; }

/* ── Chips ───────────────────────────────────────────────────────────────── */

.rg-chip {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rg-brand) 10%, #fff);
  color: var(--rg-brand);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.rg-chip--dark {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
}
.rg-chip--dark:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.rg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* ── Card grid + the post card ───────────────────────────────────────────── */

.rg-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .rg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .rg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rg-grid--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.rg-postcard {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.rg-postcard:hover { box-shadow: var(--rg-shadow); transform: translateY(-3px); }
.rg-postcard__media { display: block; background: var(--rg-bg); aspect-ratio: 16 / 9; }
.rg-postcard__media img { width: 100%; height: 100%; object-fit: cover; }
.rg-postcard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 18px 20px;
}
.rg-postcard__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.34; }
.rg-postcard__title a { color: var(--rg-deep); text-decoration: none; }
.rg-postcard__title a:hover { color: var(--rg-brand); }
.rg-postcard__excerpt { margin: 0; color: var(--rg-muted); font-size: 14.5px; line-height: 1.6; }
.rg-postcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rg-line);
  font-size: 13px;
  color: var(--rg-muted);
  font-weight: 500;
}
.rg-postcard__more { color: var(--rg-brand); font-weight: 700; }

/* ── Article layout ──────────────────────────────────────────────────────── */

.rg-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) {
  .rg-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .rg-layout--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
  .rg-layout__aside { position: sticky; top: calc(var(--rg-nav-h) + 16px); }
}
.rg-layout__main { min-width: 0; }
.rg-layout__aside { display: flex; flex-direction: column; gap: 16px; }

.rg-widget { padding: 18px 20px; }
.rg-widget__title {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rg-brand);
}
.rg-widget ul { margin: 0; padding: 0; list-style: none; }
.rg-widget li + li { border-top: 1px solid var(--rg-line); }
.rg-widget li a {
  display: block;
  padding: 9px 0;
  color: var(--rg-deep);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.rg-widget li a:hover { color: var(--rg-brand); }

.rg-author {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 44px;
}
.rg-author__face { border-radius: var(--rg-radius-sm); width: 62px; height: 62px; flex-shrink: 0; }
.rg-author__name { margin: 0 0 4px; font-weight: 700; font-size: 17px; color: var(--rg-deep); }
.rg-author__bio { margin: 0; color: var(--rg-muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 620px) { .rg-author { flex-direction: column; text-align: center; } }

.rg-related { margin-top: 56px; padding: 44px 0 52px; background: var(--rg-deep); }
.rg-related__title { color: #fff; margin-bottom: 24px; }

/* ── Long-form content ───────────────────────────────────────────────────
   The prose rules an editor can rely on: whatever they put in the editor comes
   out looking like the rest of the site. Wide things scroll inside themselves
   so the page itself never scrolls sideways.
   ───────────────────────────────────────────────────────────────────────── */

.rg-prose--wide { max-width: none; }
.rg-prose { font-size: 16.5px; line-height: 1.72; }
.rg-prose > p:first-of-type { font-size: 17.5px; color: var(--rg-ink); }
.rg-prose h2 { margin: 1.7em 0 .5em; font-size: clamp(20px, 2.1vw, 24px); color: var(--rg-deep); }
.rg-prose h3 { margin: 1.5em 0 .4em; font-size: 18px; color: var(--rg-deep); }
.rg-prose ul, .rg-prose ol { margin: 0 0 1.1em; padding-left: 22px; }
.rg-prose li { margin-bottom: .5em; }
.rg-prose a { text-decoration: underline; }

.rg-prose figure { margin: 1.8em 0; }
.rg-prose figure img { width: 100%; border-radius: var(--rg-radius-sm); }
.rg-prose figcaption {
  margin-top: 8px;
  color: var(--rg-muted);
  font-size: 13.5px;
  text-align: center;
}

.rg-prose table {
  width: 100%;
  margin: 1.8em 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-sm);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
}
.rg-prose thead th, .rg-prose tr:first-child th {
  padding: 13px 16px;
  background: var(--rg-deep);
  color: #fff;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rg-prose td { padding: 12px 16px; border-top: 1px solid var(--rg-line); vertical-align: top; }
.rg-prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--rg-bg) 45%, #fff); }
.rg-prose td strong, .rg-prose td b { color: var(--rg-deep); }
/* A table is the one thing that genuinely cannot always fit. Let it scroll. */
@media (max-width: 720px) {
  .rg-prose table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── A table in an article ───────────────────────────────────────────────────
   Two wrappers, one behaviour. The block editor ships its tables inside
   `<figure class="wp-block-table">`; `registry_wrap_tables()` gives every older
   bare table a `.rg-tablewrap` of its own. Either way the WRAPPER is the scroll
   container, so the table inside it can go back to being a table.

   ⚠️ WHY THE WRAPPER AND NOT `display: block`. `display: block` on a <table>
   stops it being a table: the browser no longer sizes its columns against each
   other, so it grows to its content instead of to its container. Measured on a
   phone: 692–992px of table in a 388px window, with `white-space: nowrap` on
   top, which chopped every sentence mid-word and made a list of facts something
   you had to drag sideways to read. On a desktop it happened to fit, which is
   why it looked fine from here and wrong to Timothy.

   ⚠️⚠️ AND WORDPRESS DRAWS ITS OWN BORDERS. `wp-block-table-inline-css` — core's
   own stylesheet, printed inline on any page holding an editor table — sets
   `border: 1px solid` on every cell WITH NO COLOUR, so it resolves to
   currentColor and comes out as a dark navy grid over a design that uses one
   hairline rule between rows. It has to be turned off explicitly; it is not
   something the theme's own rules override by being more specific, because they
   never mention a cell border at all.

   ⚠️ Both class names checked against the whole theme first. `wp-block-table` is
   WordPress's; `rg-tablewrap` was unused. */
.rg-prose .wp-block-table,
.rg-prose .rg-tablewrap { margin: 1.8em 0; overflow-x: auto; }
.rg-prose .wp-block-table > table,
.rg-prose .rg-tablewrap > table {
  display: table; width: 100%; margin: 0; white-space: normal;
  border-collapse: separate; border-spacing: 0;
}
/* Core's grid off. The theme's own rule below puts one rule back between rows. */
.rg-prose .wp-block-table td, .rg-prose .wp-block-table th,
.rg-prose .rg-tablewrap td, .rg-prose .rg-tablewrap th {
  border: 0; padding: 12px 16px;
}
.rg-prose .wp-block-table td, .rg-prose .rg-tablewrap td { border-top: 1px solid var(--rg-line); }
.rg-prose .wp-block-table tr:first-child td, .rg-prose .rg-tablewrap tr:first-child td,
.rg-prose .wp-block-table thead tr:first-child th, .rg-prose .rg-tablewrap thead tr:first-child th { border-top: 0; }

/* A first row that is one cell spanning the whole table is a title, and it was
   reading as an ordinary row with the heading bolded inside it. It gets the same
   treatment the theme already gives a <thead>, so a table written either way
   looks the same. Restricted to `:only-child` so it cannot catch a real data row
   that happens to merge two cells. */
.rg-prose .wp-block-table tr:first-child td[colspan]:only-child,
.rg-prose .rg-tablewrap tr:first-child td[colspan]:only-child {
  background: var(--rg-deep); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 13px 16px;
}
.rg-prose .wp-block-table tr:first-child td[colspan]:only-child strong,
.rg-prose .rg-tablewrap tr:first-child td[colspan]:only-child strong { color: inherit; font-weight: 700; }

@media (max-width: 720px) {
  /* The label column, so the value column is not squeezed to two words. */
  .rg-prose .wp-block-table td:first-child,
  .rg-prose .rg-tablewrap td:first-child { width: 34%; }
  .rg-prose .wp-block-table td[colspan]:only-child,
  .rg-prose .rg-tablewrap td[colspan]:only-child { width: auto; }
}
.rg-prose .wp-block-table figcaption {
  margin-top: 8px; font-size: 13.5px; color: var(--rg-muted); text-align: center;
}

/* ── Pagination, search, empty states ────────────────────────────────────── */

.rg-page .pagination, .rg-page .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.rg-page .page-numbers {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-sm);
  background: var(--rg-surface);
  color: var(--rg-ink);
  font-weight: 600;
  text-decoration: none;
}
.rg-page .page-numbers.current { background: var(--rg-brand); border-color: var(--rg-brand); color: #fff; }
.rg-page .screen-reader-text { position: absolute !important; }

.rg-search { display: flex; gap: 10px; flex-wrap: wrap; }
.rg-search__field {
  flex: 1 1 220px;
  padding: 11px 14px;
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-sm);
  background: var(--rg-surface);
}
.rg-searchrow { margin-bottom: 28px; max-width: 520px; }

.rg-empty { text-align: center; padding: 48px 24px; }
.rg-empty h2 { margin-bottom: .4em; }
.rg-empty p { margin: 0 auto; max-width: 46ch; color: var(--rg-muted); }

/* An accented panel — for a call to action that should not read as body copy.
   Generic on purpose: any vertical can wrap a widget in this. */
.rg-accent {
  margin: -18px -20px;
  padding: 18px 20px;
  border-radius: var(--rg-radius);
  background: linear-gradient(160deg, var(--rg-brand), var(--rg-brand-dark));
  color: rgba(255, 255, 255, .88);
}
.rg-accent p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; }
.rg-accent .rg-btn { background: #fff; color: var(--rg-brand-dark); }
.rg-accent .rg-btn:hover { background: rgba(255, 255, 255, .88); color: var(--rg-brand-dark); }
.rg-widget:has(> .rg-accent) { padding: 18px 20px; overflow: hidden; }
.rg-widget .rg-accent .rg-widget__title { color: rgba(255, 255, 255, .8); }

/* A kicker: the small line above a heading that says what kind of page this is. */
.rg-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* The revision date on a policy page. Small, grey, and out of the way — it is
   there to be checked, not read. */
.rg-updated {
  margin: 0 0 26px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rg-muted);
}

/* ── Sectioned pages ─────────────────────────────────────────────────────
   A long page held together by alternating bands. The dark ones carry the
   deep brand colour, the light ones the page ground, and the rhythm is what
   stops a thousand words reading as a wall.
   ───────────────────────────────────────────────────────────────────────── */

.rg-band--hero { padding: 64px 0 60px; text-align: center; }
.rg-band--hero .rg-band__title { font-size: clamp(30px, 5vw, 52px); font-weight: 800; }
.rg-band--hero .rg-band__title em { font-style: normal; color: color-mix(in srgb, var(--rg-brand) 55%, #fff); }
.rg-band--hero .rg-band__lede { margin-inline: auto; text-align: center; }
.rg-band--hero .rg-kicker { text-align: center; }

/* An eyebrow with a rule either side — used only at the top of a page. */
.rg-kicker--rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.rg-kicker--rule::before, .rg-kicker--rule::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.rg-section { padding: 60px 0; }
.rg-section__title { margin: 0 0 20px; color: var(--rg-deep); }
.rg-section .rg-kicker { color: var(--rg-brand); margin-bottom: 10px; }

.rg-section--dark { background: var(--rg-deep); color: rgba(255, 255, 255, .78); }
.rg-section--dark .rg-section__title { color: #fff; }
.rg-section--dark .rg-kicker { color: color-mix(in srgb, var(--rg-brand) 50%, #fff); }
.rg-section--dark .rg-prose { color: rgba(255, 255, 255, .78); }
.rg-section--dark .rg-prose > p:first-of-type { color: rgba(255, 255, 255, .9); }
.rg-section--dark .rg-prose h2, .rg-section--dark .rg-prose h3 { color: #fff; }
.rg-section--dark .rg-prose a { color: #fff; }
.rg-section--dark .rg-prose strong, .rg-section--dark .rg-prose b { color: #fff; }
.rg-section--dark .rg-prose blockquote { border-left-color: color-mix(in srgb, var(--rg-brand) 60%, #fff); color: rgba(255, 255, 255, .82); }
.rg-section--dark .rg-prose thead th { background: rgba(255, 255, 255, .1); }
.rg-section--dark .rg-prose table { border-color: rgba(255, 255, 255, .16); }
.rg-section--dark .rg-prose td { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .78); }
.rg-section--dark .rg-prose tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .04); }

/* Numbered steps: an ordered list is the honest markup for a sequence, so the
   theme makes an ordered list look like the design rather than asking an editor
   to build one out of divs. */
.rg-section .rg-prose ol {
  list-style: none;
  counter-reset: rg-step;
  padding-left: 0;
}
.rg-section .rg-prose ol > li {
  counter-increment: rg-step;
  position: relative;
  margin-bottom: 10px;
  padding: 14px 18px 14px 54px;
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-sm);
  background: var(--rg-surface);
}
.rg-section .rg-prose ol > li::before {
  content: counter(rg-step);
  position: absolute;
  left: 16px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--rg-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.rg-section--dark .rg-prose ol > li {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .09);
}

/* ── Static-page blocks ──────────────────────────────────────────────────
   The four things a sectioned page can do that prose cannot: a comparison,
   a list of what gets checked, a coverage map and an FAQ. Class prefixes
   grepped before use — rg-faq was already the front page's and is reused
   here rather than forked, everything else is new.
   ───────────────────────────────────────────────────────────────────────── */

.rg-section--tint { background: var(--rg-bg); }

.rg-blockhead { max-width: var(--rg-wrap-narrow); margin: 0 0 30px; }
.rg-blockhead .rg-section__title { margin-bottom: 10px; }
.rg-blockhead__lede { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--rg-muted); }
.rg-section--dark .rg-blockhead__lede { color: rgba(255, 255, 255, .74); }

/* ── the comparison ──────────────────────────────────────────────────────
   Three columns on a desktop, one stack per row on a phone. The column
   captions are a legend that is hidden on narrow screens, where each answer
   carries its own inline label instead — so the comparison never depends on
   a heading that has scrolled off, and never has to scroll sideways. */

.rg-vs { margin: 0; display: grid; gap: 10px; }

.rg-vs__legend { display: none; }
.rg-vs__row {
  display: grid; gap: 4px;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-sm);
  padding: 16px 18px;
}
.rg-vs__term {
  font-weight: 700; font-size: 15px; color: var(--rg-deep);
  letter-spacing: -.01em;
}
.rg-vs__a, .rg-vs__b { margin: 0; font-size: 14.5px; line-height: 1.6; }
.rg-vs__a { color: var(--rg-muted); }
.rg-vs__b { color: var(--rg-ink); font-weight: 500; }
.rg-vs__inline {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 2px; color: var(--rg-muted);
}
.rg-vs__b .rg-vs__inline { color: var(--rg-brand); }

@media (min-width: 860px) {
  .rg-vs__legend, .rg-vs__row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 1.5fr 1.5fr;
    gap: 24px; align-items: start;
  }
  .rg-vs__legend { padding: 0 18px 4px; }
  .rg-vs__cap {
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--rg-muted);
  }
  .rg-vs__cap--b { color: var(--rg-brand); }
  .rg-vs__inline { display: none; }
  /* The winning column is tinted for its whole height, so the eye can follow
     one answer down the page without re-reading the heading each time. */
  .rg-vs__b {
    margin: -16px -18px -16px 0; padding: 16px 18px;
    background: color-mix(in srgb, var(--rg-brand) 5%, #fff);
    border-left: 2px solid color-mix(in srgb, var(--rg-brand) 30%, #fff);
    align-self: stretch;
  }
}

/* ── a section with a picture beside it ─────────────────────────────────── */

.rg-split { display: grid; gap: 34px; align-items: center; }
@media (min-width: 860px) {
  .rg-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 52px; }
  /* The flip is on the IMAGE rather than the text, so the picture stays first in
     the markup — on a phone the columns collapse and a picture that introduces
     the words should still come before them. */
  .rg-split--flip .rg-split__img { order: 2; }
}
.rg-split__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rg-radius);
  box-shadow: var(--rg-shadow);
}
.rg-split__text .rg-prose { max-width: none; }

/* ── what gets checked ───────────────────────────────────────────────────
   A source per card, its list beneath. Ticks are a ::before rather than a
   character in the markup, so a copy-paste of the page yields the words. */

.rg-checks {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Capped at three: six sources then read as two even rows instead of four and
   a stranded pair, and the lists stay narrow enough to scan down. */
@media (min-width: 900px) { .rg-checks { grid-template-columns: repeat(3, 1fr); } }
.rg-checks__src {
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-sm);
  padding: 20px;
}
.rg-checks__name {
  margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--rg-deep);
}
.rg-checks__note { margin: 0 0 12px; font-size: 13px; color: var(--rg-muted); line-height: 1.5; }
.rg-checks__list { margin: 0; padding: 0; list-style: none; }
.rg-checks__list li {
  position: relative; padding: 0 0 0 20px; margin-bottom: 7px;
  font-size: 14px; line-height: 1.5; color: var(--rg-ink);
}
.rg-checks__list li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 5px; height: 9px; border: solid var(--rg-brand);
  border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.rg-checks__foot {
  margin: 26px 0 0; text-align: center;
  font-size: 15px; font-weight: 600; color: var(--rg-deep);
}

/* ── coverage: figures beside a map ──────────────────────────────────────
   Inline SVG, no script. The paths arrive ready-projected, and the fill
   opacity of a lit area is set per-path from a density the data supplies. */

.rg-cov__grid {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
}
.rg-cov__grid--nomap { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .rg-cov__grid { grid-template-columns: 1fr; gap: 30px; }
}
.rg-cov__map { }
.rg-cov__svg { display: block; width: 100%; height: auto; }
/* ⚠️ THE DENSITY BAND HAS TO CLEAR THE BACKGROUND, NOT START AT ZERO. The
   first cut faded a lit county from 0.30 opacity, which against this navy left
   the quiet counties reading as EMPTY — the map said "we are not in Nassau"
   when we are. A lit area now starts well clear of the unlit fill and the
   ranking happens in the top half of the range, where it is still visible. */
/* An unlit area is the page's own surface, and a lit one is that surface mixed
   toward the brand colour by however busy it is. Both are OPAQUE.

   ⚠️ NOT fill-opacity, on either. An earlier cut washed the lit areas in
   see-through brand blue, which meant the colour depended on whatever band sat
   behind the map — so the same scale read strongly on white and vanished on
   navy. And putting `fill-opacity` in this rule at all is worse: a CSS
   declaration beats an SVG presentation attribute, so it painted all 67 counties
   at the base value and the map went uniformly flat, with no error anywhere. The
   density now rides in `--rg-cov-w`, which nothing here overrides. */
.rg-cov__area {
  fill: var(--rg-surface);
  stroke: var(--rg-deep);
  stroke-width: 2;
  stroke-linejoin: round;
}
.rg-cov__area.is-on {
  fill: color-mix(in srgb, var(--rg-brand) var(--rg-cov-w, 100%), var(--rg-surface));
}
.rg-cov__note {
  margin: 26px 0 0; text-align: center;
  font-size: 13.5px; color: rgba(255, 255, 255, .6);
}
/* Three across, so six figures make two clean rows beside the map rather than
   a row of four and an orphaned pair. */
.rg-cov .rg-figures__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 26px 20px; }
@media (min-width: 901px) { .rg-cov .rg-figures__grid { grid-template-columns: repeat(3, 1fr); } }
.rg-cov .rg-figure { text-align: left; }
.rg-cov .rg-figure__value { font-size: clamp(26px, 3vw, 34px); }

/* ── Figures ─────────────────────────────────────────────────────────────
   Counted, never typed. See the template.
   ───────────────────────────────────────────────────────────────────────── */

.rg-figures__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  margin: 8px 0 0;
}
.rg-figure { text-align: center; }
.rg-figure__value {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
.rg-figure__label {
  margin: 8px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}

.rg-cta { text-align: center; }
.rg-cta__body { max-width: 52ch; margin: 0 auto 22px; color: var(--rg-muted); font-size: 17px; }
.rg-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* The panel variant: an inset card rather than another full-width band, so the
   page reads as finishing. The padding is on the WRAP, not the section, because
   the section still supplies the breathing room above and below it. */
.rg-cta--panel { padding: 30px 0 70px; }
.rg-cta--panel .rg-wrap {
  background: var(--rg-deep);
  border-radius: var(--rg-radius);
  padding: 52px 32px 56px;
  box-shadow: var(--rg-shadow);
}
.rg-cta--panel .rg-section__title { color: #fff; }
.rg-cta--panel .rg-cta__body { color: rgba(255, 255, 255, .74); }
/* The button is already the brand colour, which on this navy is legible but
   quiet. Inverting it makes the one thing being asked for the brightest thing
   in the panel. */
.rg-cta--panel .rg-btn { background: #fff; color: var(--rg-deep); }
.rg-cta--panel .rg-btn:hover { background: rgba(255, 255, 255, .88); }
.rg-cta--panel .rg-btn--ghost {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38);
}
.rg-cta--panel .rg-btn--ghost:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 640px) {
  .rg-cta--panel .rg-wrap { padding: 38px 22px 42px; border-radius: var(--rg-radius-sm); }
}

/* ── The directory ───────────────────────────────────────────────────────
   Browse All: the filter bar, the count, and the load-more. The cards, the
   premium band and the place chips are the front page's own components reused
   as they are — `rg-cards`, `rg-tier-band`, `rg-places` — so there is one of
   each on the site rather than one per page that happens to show a listing.
   Prefix grepped before use: rg-dir was free.
   ───────────────────────────────────────────────────────────────────────── */

.rg-dir__hero { padding-bottom: 34px; }

/* The bar: a search box and, once something is filtered, a way out of it.
   Sticky on wider screens only — pinned to the top of a 640px-tall phone it
   costs a fifth of the viewport for the whole scroll. */
.rg-dir__bar {
  background: var(--rg-surface);
  border-bottom: 1px solid var(--rg-line);
  padding: 14px 0;
}
@media (min-width: 900px) {
  .rg-dir__bar { position: sticky; top: 0; z-index: 30; box-shadow: var(--rg-shadow-sm); }
}
.rg-dir__bar-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.rg-dir__search { flex: 1 1 260px; min-width: 0; max-width: 520px; }
.rg-dir__bar input[type="search"] {
  width: 100%; max-width: 100%;
  font: inherit; font-size: 15px;
  padding: 11px 14px;
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-sm);
  background: var(--rg-surface);
  color: var(--rg-ink);
}
.rg-dir__bar input[type="search"]:focus-visible { outline: 2px solid var(--rg-brand); outline-offset: 1px; }

/* The label is for screen readers: the placeholder says what the box is for,
   and a visible label above it would double the height of the bar. */
.rg-dir__srlabel {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


.rg-dir__clear {
  font: inherit; font-size: 13px; font-weight: 600;
  background: none; border: 0; padding: 8px 6px;
  color: var(--rg-brand); cursor: pointer;
}

.rg-dir__count { padding: 22px 20px 0; font-size: 14px; color: var(--rg-muted); }
.rg-dir__count b { color: var(--rg-deep); font-size: 16px; }

.rg-dir__band-slot { padding-top: 20px; }

.rg-dir__results { padding: 20px 20px 10px; }

/* A fetch in flight dims the grid rather than emptying it: the reader keeps
   something to look at, and a failed request leaves the old results in place
   instead of an empty page and an apology. */
.rg-dir.is-loading .rg-cards { opacity: .45; transition: opacity .12s; }

.rg-dir__empty {
  margin: 40px auto; text-align: center; max-width: 40ch;
  color: var(--rg-muted); font-size: 16px;
}
.rg-dir__more { display: flex; justify-content: center; padding: 26px 0 10px; }
.rg-dir__more .rg-btn[disabled] { opacity: .55; cursor: default; }

.rg-dir__copy { margin-top: 30px; }
.rg-dir__places { padding-top: 10px; }

/* ── Two-column pages ────────────────────────────────────────────────────── */

.rg-columns {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .rg-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-columns--one { grid-template-columns: minmax(0, 620px); }
}
.rg-column { padding: 26px 28px; }
.rg-column__title { margin: 0 0 8px; font-size: 20px; color: var(--rg-deep); }
.rg-columns__after { margin-top: 32px; max-width: none; }

/* ── Form controls ───────────────────────────────────────────────────────
   Styled by ELEMENT, not by class, and scoped to content areas. That is
   deliberate: a form arriving from a plugin shortcode knows nothing about this
   theme, and should not have to. Any form dropped into a page looks native.
   ───────────────────────────────────────────────────────────────────────── */

.rg-prose label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rg-ink);
}
.rg-prose label span { font-weight: 500; color: var(--rg-muted); }

.rg-prose input[type="text"],
.rg-prose input[type="email"],
.rg-prose input[type="tel"],
.rg-prose input[type="url"],
.rg-prose input[type="search"],
.rg-prose select,
.rg-prose textarea {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-sm);
  background: var(--rg-surface);
  color: var(--rg-ink);
  font-size: 15px;
  line-height: 1.4;
}
.rg-prose textarea { min-height: 108px; resize: vertical; }
.rg-prose input:focus, .rg-prose select:focus, .rg-prose textarea:focus {
  outline: none;
  border-color: var(--rg-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-brand) 22%, transparent);
}
.rg-prose input::placeholder, .rg-prose textarea::placeholder { color: color-mix(in srgb, var(--rg-muted) 70%, #fff); }

.rg-prose form p { margin: 0 0 16px; }
.rg-prose form p:last-child { margin-bottom: 0; }
.rg-prose form > div { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .rg-prose form > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rg-prose button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--rg-radius-sm);
  background: var(--rg-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.rg-prose button[type="submit"]:hover { background: var(--rg-brand-dark); }
.rg-prose button[type="submit"]:disabled { cursor: default; opacity: .9; }
/* State classes a form script can set; named for meaning, not colour. */
.rg-prose button.is-sent  { background: var(--rg-good); }
.rg-prose button.is-error { background: var(--rg-bad); }

/* A logo used as a mark sits at the same size as the initials block it replaces. */
.rg-brand__logo { max-height: 34px; width: auto; border-radius: 8px; }
.rg-footer__brand-name .rg-brand__logo { max-height: 32px; border-radius: 7px; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE FRONT PAGE
   Sections in the order front-page.php prints them. Every colour is a token, so
   the Customizer's brand colour reaches this page like it reaches every other.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Links here are components — cards, chips, buttons, tiles — not prose, so they
   carry no underline. The theme's default IS underlined and stays that way: it
   is the right default for running text, which is why `.rg-prose a` reinforces
   it and why the answer text below opts back in. This is one rule rather than
   `text-decoration:none` repeated down twenty selectors. */
.rg-home a { text-decoration: none; }
.rg-home .rg-faq__a a { text-decoration: underline; }

/* ⚠️ AND THE SAME RULE, COMPONENT BY COMPONENT, because the line above is a
   PAGE reset and these are SHARED components. The front page killing underlines
   wholesale is why the card, the chips and the band looked right there and
   arrived on Browse All with every link underlined — the component was relying
   on its container. A component that only looks right inside one wrapper is not
   a shared component. Prose keeps its underlines: a link in a paragraph should
   look like one. */
/* ⚠️ THE HOVER-UNDERLINE RULE THAT USED TO BE HERE IS GONE. It put a line under
   the Call and Get details buttons on every card the moment a cursor touched
   them — Timothy, 31 Aug: "no underlined bs in buttons". The `text-decoration:
   none` declarations left around the file are now redundant rather than wrong,
   since the default above is `none`; they are left alone because removing
   twenty of them is twenty chances to catch something else by accident. */

/* ⚠️ THESE SIT ON :root, NOT ON .rg-home, AND THAT IS THE POINT. They were
   scoped to the front page while it was the only thing using the chips and the
   gold badge — so the day Browse All reused those same components, outside that
   wrapper, every one of these resolved to nothing: the place chips collapsed to
   bare text and the paid badge lost its gold and rendered on transparent. The
   card, the chip and the badge are shared components, so their tokens are the
   theme's, not one page's. */
:root {
  --rg-chip-h: 38px;
  --rg-chip-gap: 8px;
  --rg-gold-1: #A9781A;
  --rg-gold-2: #E8BE55;
  --rg-gold-3: #FDEFB4;
  --rg-gold-ink: #3E2B05;
}

/* ── hero ─────────────────────────────────────────────────────────────────
   The photograph is a Customizer setting, applied as an inline custom property
   so the theme itself names no image. Without one the band is the brand
   gradient and still reads correctly.                                       */

.rg-hero {
  color: #fff;
  /* Bottom padding is small because the photograph row sits inside this section
     and brings its own space above it. Where the row does not render — fewer
     than eight photographs — the hero closes on this instead. */
  padding: 52px 0 34px;
  background-color: var(--rg-deep);
  background-image:
    linear-gradient(100deg, rgba(8, 17, 44, .94) 0%, rgba(12, 28, 68, .82) 46%, rgba(14, 34, 82, .56) 100%),
    var(--rg-hero-image, none);
  background-size: cover;
  background-position: center 12%;
  background-repeat: no-repeat;
}

.rg-hero__inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 44px;
  align-items: center;
}

.rg-hero__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 16px;
  font-size: 13.5px; font-weight: 600;
  color: rgba(255, 255, 255, .74);
}
.rg-hero__kicker > i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.rg-hero__kicker span { display: inline-flex; align-items: center; gap: 6px; }
.rg-hero__dot-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
}

.rg-hero__title { font-size: clamp(34px, 5.2vw, 52px); font-weight: 800; margin: 0 0 16px; }
.rg-hero__title em { font-style: normal; color: #7EA6FF; }
.rg-hero__intro {
  margin: 0 0 24px; max-width: 52ch;
  font-size: 16.5px; color: rgba(255, 255, 255, .74);
}

.rg-hero__search { display: flex; gap: 9px; max-width: 560px; }
/* The field and its suggestions are one positioned unit: the panel is
   absolute, and without a relative parent it would hang off the page rather
   than off the box it belongs to. */
.rg-hero__field { position: relative; flex: 1; min-width: 0; }
/* ⚠️ IT MUST STATE ITS OWN COLOURS. The hero band sets `color: #fff` and this
   input only ever said `font: inherit`, so it inherited white text onto the
   browser's white field — you could type in it and see nothing. */
.rg-hero__search input {
  width: 100%; min-width: 0; font: inherit; font-size: 15.5px;
  padding: 14px 16px; border: 0; border-radius: 11px;
  background: var(--rg-surface); color: var(--rg-ink);
}
.rg-hero__search input::placeholder { color: var(--rg-muted); opacity: 1; }

/* ── the search suggestions ───────────────────────────────────────────────
   A short list of listings under the box. It is never a search results page in
   miniature — no counts, no ratings, no thumbnails: the whole value is getting
   a reader who already knows the name onto that profile in one keystroke, and
   anything else in the row slows that down.

   z-index sits above the strip below it, which is the only thing on this page
   that could overlap it. */
.rg-suggest {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 7px);
  max-height: 340px; overflow-y: auto;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(8, 17, 44, .3);
  padding: 5px;
}
.rg-suggest[hidden] { display: none; }
.rg-suggest__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: 8px; color: var(--rg-ink);
}
.rg-suggest__item:hover,
.rg-suggest__item.is-on { background: var(--rg-bg); }
.rg-suggest__name { font-size: 14.5px; font-weight: 700; }
/* The matched run, so a reader can see why the row came back. */
.rg-suggest__name mark { background: none; color: var(--rg-brand); font-weight: 800; }
.rg-suggest__where { font-size: 12.5px; color: var(--rg-muted); }
.rg-hero__search button {
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  background: var(--rg-brand); color: #fff; border: 0;
  border-radius: 11px; padding: 14px 24px;
}

.rg-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 15px 0 0; font-size: 13.5px; }
.rg-quick > span { color: rgba(255, 255, 255, .55); font-weight: 600; }
.rg-quick a {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
  padding: 6px 13px; border-radius: 20px; font-weight: 600; color: rgba(255, 255, 255, .9);
}
.rg-quick a:hover { background: rgba(255, 255, 255, .18); }

.rg-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rg-stat {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px; padding: 17px 16px;
}
.rg-stat__n { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.rg-stat__l { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .66); margin-top: 5px; }
.rg-stat--wide {
  grid-column: 1 / -1; display: flex; gap: 12px; align-items: center;
  background: rgba(126, 166, 255, .13); border-color: rgba(126, 166, 255, .3);
}
.rg-stat--wide p { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .86); }
/* White, not the pale blue: on a tinted panel the blue mark read as one more
   piece of the tint rather than as a mark. Timothy, 30 Aug. */
.rg-stat--wide svg { width: 26px; height: 26px; flex: none; color: #fff; }

@media (max-width: 900px) {
  /* The text and the stat cards stack over what is the BRIGHT half of the
     photograph on a wide screen, so the wash turns vertical and stays dark all
     the way down. A sideways gradient left white numbers on pale water. */
  .rg-hero {
    padding: 34px 0 24px;
    background-image:
      linear-gradient(178deg, rgba(8, 17, 44, .92) 0%, rgba(10, 22, 56, .88) 52%, rgba(12, 28, 68, .84) 100%),
      var(--rg-hero-image-small, var(--rg-hero-image, none));
    background-position: center 22%;
  }
  .rg-hero__inner { grid-template-columns: 1fr; gap: 30px; }
}

/* ── the photograph row ───────────────────────────────────────────────────
   Two lines, opposite directions. The track is printed twice and moved by half
   its own width, so the seam is exactly where the copy starts and invisible.

   ⚠️ IT LIVES INSIDE THE HERO AND HAS NO BACKGROUND OF ITS OWN. It used to be
   a navy band below the hero — a second dark strip under a dark hero, with a
   seam between them — and Timothy asked for the tiles to run over the hero's
   photograph instead. So the only ground behind them is the hero's, the tiles
   carry a hairline of light so they read as photographs on a photograph, and
   the row is masked to nothing at both ends: a tile chopped in half by the edge
   of the screen looks like a bug, a tile fading out looks like a decision.

   The mask needs both spellings. Unprefixed alone is ignored by Safari, which
   is a third of this site's phone traffic, and the row hard-cuts there.       */

.rg-strip {
  overflow: hidden;
  margin-top: 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rg-strip__track {
  display: flex; gap: 10px; width: max-content;
  animation: rg-strip-slide 92s linear infinite;
}
/* .rg-strip__track--back removed 1 Sep with the second line — one track now. */
.rg-strip:hover .rg-strip__track { animation-play-state: paused; }

@keyframes rg-strip-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rg-strip__tile {
  position: relative; flex: none; display: block; overflow: hidden;
  width: 180px; height: 124px; border-radius: 14px;
  /* A photograph laid on a photograph needs an edge, or the two blur into each
     other wherever the hero's picture happens to be light. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 18px rgba(4, 10, 26, .35);
}
.rg-strip__tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.rg-strip__tile span {
  position: absolute; inset: auto 0 0 0; padding: 18px 10px 8px;
  font-size: 11.5px; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(6, 12, 30, .85));
  opacity: 0; transition: opacity .18s;
}
.rg-strip__tile:hover span,
.rg-strip__tile:focus-visible span { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rg-strip { overflow-x: auto; }
  .rg-strip__track { animation: none; }
  .rg-strip__tile span { opacity: 1; }
}
@media (max-width: 640px) {
  .rg-strip__tile { width: 132px; height: 94px; border-radius: 11px; }
  .rg-strip__track { gap: 8px; }
  .rg-strip { margin-top: 28px; }
}
/* A tile opens a lightbox, so it should say so on the way past. */
.rg-strip__tile { cursor: zoom-in; }

/* ── LIGHTBOX V2 — the photograph, and whose it is ────────────────────────
   The profile's lightbox and this one share a shape and no code: two columns,
   photograph on a dark ground, panel beside it. What is in the panel is the
   difference — there, what is in the picture; here, who built it. See the note
   in template-parts/home/lightbox.php.

   ⚠️ THE CLASS IS .rg-lb AND THE PROFILE'S IS .lightbox. They are scoped to
   different pages and neither may be renamed to "match" the other: the profile
   carries a `.lb` ratings label that an unscoped `.lb` rule once hid.        */

/* ⚠️ IT STATES ITS OWN INK, and that is not tidiness. The photograph row moved
   inside the hero on 30 Aug and the lightbox's markup went with it — and the
   hero sets `color: #fff` on everything beneath it, so the builder's name
   rendered white on a white panel. Same failure as the card on Browse All, from
   the same cause: a component that only looks right in one wrapper. */
.rg-lb {
  position: fixed; inset: 0; z-index: 900; padding: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 17, 44, .9); backdrop-filter: blur(6px);
  color: var(--rg-ink);
}
.rg-lb[hidden] { display: none; }
.rg-lb__box {
  display: grid; grid-template-columns: 1.4fr 1fr;
  width: 100%; max-width: 1000px; max-height: 92vh; overflow: auto;
  background: var(--rg-surface); border-radius: var(--rg-radius);
}
.rg-lb__img { background: var(--rg-deep); display: flex; align-items: center; justify-content: center; }
.rg-lb__img img { display: block; width: 100%; height: 100%; max-height: 74vh; object-fit: contain; }

.rg-lb__info { display: flex; flex-direction: column; padding: 26px 28px; min-width: 0; }
.rg-lb__eyebrow {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #9AA5B4;
}
.rg-lb__eyebrow[hidden] { display: none; }
.rg-lb__name { margin: 0 0 11px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--rg-ink); }
.rg-lb .rg-verified { margin-bottom: 14px; }
.rg-lb .rg-verified[hidden] { display: none; }
.rg-lb .rg-listing-card__score[hidden] { display: none; }
.rg-lb .rg-score-track em[hidden] { display: none; }
.rg-lb__shots { margin: 15px 0 0; font-size: 13.5px; color: var(--rg-muted); }
.rg-lb__shots[hidden] { display: none; }

/* The two ways onward. "See all their projects" is the primary one — it is the
   question the picture just raised. */
.rg-lb__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.rg-lb__actions .rg-action { text-decoration: none; }

.rg-lb__nav {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rg-line);
}
.rg-lb__nav button {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--rg-surface); color: var(--rg-ink);
  border: 1px solid var(--rg-line); border-radius: 8px; padding: 8px 13px;
}
.rg-lb__nav button:hover { border-color: var(--rg-brand); color: var(--rg-brand); }
.rg-lb__ct { margin-left: auto; font-size: 12px; color: var(--rg-muted); font-variant-numeric: tabular-nums; }

.rg-lb__x {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  font-size: 16px; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26);
}
.rg-lb__x:hover { background: rgba(255, 255, 255, .22); }

@media (max-width: 820px) {
  .rg-lb { padding: 0; }
  .rg-lb__box { grid-template-columns: 1fr; max-height: 100vh; border-radius: 0; }
  .rg-lb__img img { max-height: 46vh; }
  .rg-lb__info { padding: 20px 20px 24px; }
  .rg-lb__actions { grid-template-columns: 1fr; }
}

/* ── sections ─────────────────────────────────────────────────────────────── */

/* ⚠️ THE SIDE PADDING IS PART OF THIS RULE, and leaving it out was a real bug.
   `.rg-wrap` sets `padding: 0 20px` and this shorthand landed AFTER it in the
   file, so every `rg-wrap rg-block` — the listings, the categories, the places,
   the blog, the questions — reset its own side padding to zero and ran flush to
   the edge of the screen. On a phone that is a card glued to the frame with no
   gutter; on a desktop it is 20px of misalignment against the hero above it,
   which is why nobody spotted it there. Timothy, 30 Aug: the home page glues to
   the sides and the location pages do not. The location pages say
   `padding: 34px 20px 0` — one declaration, both axes. So does this now. */
.rg-block { padding: 46px 20px; }
.rg-block--tight { padding: 30px 20px; }
.rg-block__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 8px 20px; margin-bottom: 22px;
}
.rg-block__head h2 { font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; margin: 0; }
.rg-block__head p { margin: 6px 0 0; color: var(--rg-muted); font-size: 14.5px; }
.rg-block__head > a { font-size: 14px; font-weight: 700; color: var(--rg-brand); white-space: nowrap; }
.rg-block__head > a span { color: var(--rg-muted); font-weight: 600; }

/* ── the card ─────────────────────────────────────────────────────────────── */

.rg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rg-cards--4 { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rg-cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .rg-cards, .rg-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rg-cards, .rg-cards--2, .rg-cards--4 { grid-template-columns: 1fr; } }

.rg-listing-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius); box-shadow: var(--rg-shadow-sm);
}
.rg-listing-card--prem {
  border-color: var(--rg-brand);
  box-shadow: 0 0 0 1.5px var(--rg-brand), 0 10px 30px rgba(16, 32, 64, .16);
}

.rg-listing-card__media {
  display: grid; grid-template-columns: 2fr 1fr; gap: 3px;
  height: 168px; background: #DCE7F5;
}
.rg-cards--4 .rg-listing-card__media { height: 146px; }
/* ⚠️ THE COLUMNS HAVE TO BE RESET, and this is why. The base rule above sets
   `grid-template-columns: 2fr 1fr` for the photo mosaic. This modifier redeclares
   `display: grid` but NOT the tracks, so they were inherited — the plaque was
   being centred inside the FIRST track and the right third of every logo card
   sat empty, which reads as a logo shoved left and cropped. Nothing about the
   card is per-page; it is one instance and this one line was wrong for all of
   them, everywhere it has ever rendered. */
.rg-listing-card__media--logo {
  display: grid; grid-template-columns: 1fr; place-items: center;
  padding: 14px; box-shadow: inset 0 0 0 1px rgba(10, 21, 53, .1);
}
.rg-listing-card__shot, .rg-listing-card__shots { display: block; overflow: hidden; }
.rg-listing-card__shot img { width: 100%; height: 100%; object-fit: cover; }
.rg-listing-card__shots { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }
.rg-listing-card__shots img { width: 100%; height: 100%; object-fit: cover; }

.rg-plaque {
  display: grid; place-items: center; width: 100%; max-width: 230px; height: 96px;
  padding: 12px; background: #fff; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(10, 21, 53, .14);
  /* ⚠️ ONE EXPLICIT TRACK, and this is the line that makes the logo behave.
     The plaque's height is definite (96px), but an implicit `auto` row is sized
     BY its content — so a percentage height or max-height on the image inside
     has nothing to resolve against and the browser drops it. Naming the track
     `minmax(0, 1fr)` makes it exactly the content box: definite, and allowed to
     shrink below the image's intrinsic size, which `1fr` alone would not.
     Nothing escapes the plaque, whatever a builder uploads next. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
}
.rg-plaque.is-pale { background: var(--rg-deep); }
/* ⚠️ SIZE THE BOX, THEN LET object-fit DO THE WORK — do not reach for
   `max-height: 100%` here. The plaque's single grid row is auto-sized, so a
   percentage max-height has no definite height to resolve against and browsers
   drop it. The image then rendered at its intrinsic size: Robert Allard's
   300×265 logo overflowed a 72px-tall box and printed itself across the card
   body underneath. Giving the image the box and letting `contain` letterbox
   inside it holds for any logo, at any aspect ratio, forever. */
.rg-plaque img { width: 100%; height: 100%; object-fit: contain; }
.rg-plaque b { color: #fff; font-size: 26px; letter-spacing: .04em; }

.rg-listing-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 17px 17px; }
.rg-listing-card__place {
  min-height: 14px; margin-bottom: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9AA5B4;
}
.rg-listing-card__name { font-size: 17.5px; font-weight: 800; margin: 0 0 8px; }
.rg-cards--4 .rg-listing-card__name { font-size: 16.5px; }
.rg-listing-card__name a:hover { color: var(--rg-brand); }

.rg-verified {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 9px; padding: 4px 10px; border-radius: 7px;
  font-size: 11.5px; font-weight: 800;
}
.rg-verified svg { width: 13px; height: 13px; }
.rg-verified--green { background: #E6F4EC; color: #14663A; }

/* Gold is struck metal, not a tint: a five-stop gradient with a lit inner edge
   and a highlight that sweeps across it. */
.rg-verified--gold {
  position: relative; overflow: hidden; color: var(--rg-gold-ink);
  background: linear-gradient(135deg,
    var(--rg-gold-1) 0%, var(--rg-gold-2) 24%, var(--rg-gold-3) 44%, #E0B245 64%, #B5831C 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 1px 3px rgba(120, 86, 10, .35);
}
.rg-verified--gold::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .8) 48%, transparent 64%);
  transform: translateX(-130%);
  animation: rg-sheen 3.8s ease-in-out infinite;
}
@keyframes rg-sheen {
  0%, 58% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) { .rg-verified--gold::after { animation: none; opacity: 0; } }

.rg-listing-card__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 11px; font-size: 14.5px; }
.rg-stars { color: var(--rg-star); letter-spacing: 1px; }
.rg-listing-card__rating b { font-size: 16px; }
.rg-listing-card__votes { color: var(--rg-muted); font-size: 13px; }

.rg-listing-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }
/* ⚠️ FRAMED, NOT FILLED. These were a pale blue and a pale green wash —
   Timothy, 31 Aug: "makes it look cheap". He is right about why: a tint reads as
   a status badge, and "CPC licensed" is not a status we are awarding, it is a
   fact we checked. An outline says the same thing without dressing it up.
   ⚠️ `--good` therefore no longer looks different from the rest. The tone still
   arrives in the payload and nothing renders it; the day it should be visible
   again, it is a border colour here and no template changes. */
.rg-fact {
  padding: 4px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
  background: none; border: 1px solid var(--rg-line); color: var(--rg-muted);
}

.rg-listing-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; }
.rg-action {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 10px; border-radius: 11px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 700;
}
.rg-cards--4 .rg-action { font-size: 13.5px; padding: 11px 8px; }
.rg-action svg { width: 16px; height: 16px; }
/* ⚠️ THE COLOUR IS RESTATED ON HOVER, not inherited. `a:hover` used to outrank
   this and repaint the label the same navy as the button under it, so the word
   "Call" disappeared the moment you pointed at it. The default hover colour is
   scoped away from classed links now — this line is the belt to that braces,
   because a button that loses its own label is not a small bug. */
.rg-action--call { background: var(--rg-brand); color: #fff; }
.rg-action--call:hover { background: var(--rg-brand-dark); color: #fff; }
.rg-action--ghost { background: #fff; color: var(--rg-ink); border-color: #D5DCE6; }
.rg-action--ghost:hover { border-color: var(--rg-brand); color: var(--rg-brand); }

/* ⚠️ WHICH CARDS GET A BLUE BUTTON IS A TIER DECISION — Timothy, 31 Aug. A
   claimed or paying listing gets the solid blue Call; an unclaimed one gets two
   outlined buttons, because a filled primary action on a listing nobody has
   claimed promises a responsiveness we have no evidence for. The template picks
   the class; nothing here has to know what a tier is. */
.rg-action--wide { grid-column: 1 / -1; }

/* ── the band and its panel ───────────────────────────────────────────────── */

.rg-tier-band {
  background: #F4F7FC; border: 1px solid #DCE5F2;
  border-radius: 22px; padding: 18px; margin-bottom: 18px;
}
.rg-tier-band__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 0 4px 14px; font-size: 12.5px; color: var(--rg-muted);
}
.rg-tier-band__head a { color: var(--rg-brand); font-weight: 700; }

.rg-panel {
  display: flex; flex-direction: column; gap: 11px;
  padding: 20px 22px; border-radius: var(--rg-radius);
  background: var(--rg-deep); color: #fff;
}
.rg-panel h3 { font-size: 19px; font-weight: 800; margin: 0; }
.rg-panel p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .7); }
.rg-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rg-panel__list li { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35; }
.rg-panel__list b { font-size: 12.5px; font-weight: 700; color: #9DBBFF; }
.rg-panel__list span { color: rgba(255, 255, 255, .6); }
.rg-panel__more { margin-top: auto; font-size: 13.5px; font-weight: 700; color: #9DBBFF; }

/* ── reviews ──────────────────────────────────────────────────────────────── */

.rg-reviews { background: var(--rg-surface); border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line); }
.rg-reviews__rail {
  display: flex; gap: 14px; align-items: stretch;
  overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.rg-reviews__rail::-webkit-scrollbar { display: none; }
.rg-review {
  flex: 0 0 320px; width: 320px; margin: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 11px;
  padding: 18px; border-radius: 14px;
  background: #F8FAFD; border: 1px solid var(--rg-line);
}
.rg-review__top { display: flex; align-items: center; justify-content: space-between; }
.rg-review__top .rg-stars { font-size: 15px; }
.rg-review__when { font-size: 12px; font-weight: 600; color: var(--rg-muted); }
/* Cut at five lines. A long review must not set the height of every card
   beside it — the profile shows it whole. */
.rg-review blockquote {
  margin: 0; flex: 1; font-size: 14.5px; line-height: 1.6; color: #374151;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-review figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 11px; border-top: 1px solid var(--rg-line); }
.rg-review__who { font-size: 13px; font-weight: 700; }
.rg-review figcaption a { font-size: 12.5px; font-weight: 600; color: var(--rg-brand); }
@media (max-width: 600px) { .rg-review { flex-basis: 80vw; width: 80vw; } }

/* ── categories ───────────────────────────────────────────────────────────── */

/* ⚠️ minmax(0, 1fr), NOT 1fr. A bare `1fr` is `minmax(auto, 1fr)`, so a track
   refuses to shrink below its content's minimum width — and the day these tiles
   gained a 26px icon plus its gap, the two-up grid on a phone grew 36px wider
   than the screen and the whole page scrolled sideways. The label already
   carries `min-width: 0` so it can wrap; the track has to be allowed to shrink
   too, or the label never gets the chance. */
.rg-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
@media (max-width: 900px) { .rg-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rg-cats { grid-template-columns: minmax(0, 1fr); } }
.rg-cat {
  display: flex; align-items: center; gap: 13px;
  padding: 17px 18px; border-radius: 14px;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  font-size: 15px; font-weight: 600;
  transition: background-color .16s var(--rg-ease, ease), border-color .16s, color .16s;
}

/* ── THE TILE INVERTS ─────────────────────────────────────────────────────
   Timothy, 30 Aug: on hover the whole tile goes navy, the words and the shape
   of the drawing go white, and the drawing's white cut-outs go navy. That last
   half is why these icons are inlined rather than loaded as images: a
   stylesheet cannot reach inside an `<img>` to repaint anything.

   ⚠️ The icon's two parts carry CLASSES AND NO COLOURS — `rg-i-fill` for the
   shape, `rg-i-hole` for the cut-outs — so both states are decided here, in one
   place, and the file is the same file in both. Painting them navy at build
   time would have made the second state impossible.

   :focus-visible does the same thing, because these are links and a keyboard
   has to be able to see which one it is on. */
.rg-cat:hover,
.rg-cat:focus-visible {
  background: var(--rg-deep); border-color: var(--rg-deep); color: #fff;
}
.rg-cat:hover .rg-cat__n,
.rg-cat:focus-visible .rg-cat__n { background: rgba(255, 255, 255, .16); color: #fff; }

/* Fixed box, whatever the artwork's own proportions are — a set of icons that
   each size themselves puts the labels on a ragged left edge. */
.rg-cat__icon { flex: none; width: 34px; height: 34px; }
/* A step off the deepest navy: at 34px a flat #0A1535 reads as a black blob
   next to text that is lighter than it. */
.rg-cat__icon .rg-i-fill { fill: var(--rg-icon); }
.rg-cat__icon .rg-i-hole { fill: var(--rg-surface); }
.rg-cat:hover .rg-cat__icon .rg-i-fill,
.rg-cat:focus-visible .rg-cat__icon .rg-i-fill { fill: #fff; }
.rg-cat:hover .rg-cat__icon .rg-i-hole,
.rg-cat:focus-visible .rg-cat__icon .rg-i-hole { fill: var(--rg-deep); }

/* The label takes the slack so the count stays pinned right whether or not the
   tile has a drawing. */
.rg-cat__label { flex: 1; min-width: 0; }
.rg-cat__n {
  padding: 2px 8px; border-radius: 20px;
  font-size: 12px; font-weight: 700; color: var(--rg-muted); background: var(--rg-bg);
}

/* ── places ───────────────────────────────────────────────────────────────
   Clipped to exactly three rows against the chip's own height. Counting chips
   cannot work: a chip is as wide as the name in it, so a count that gives three
   rows on one screen gives three and a stray on the next.                    */

.rg-places { display: flex; flex-wrap: wrap; gap: var(--rg-chip-gap); }
.rg-places--clamp {
  max-height: calc(var(--rg-chip-h) * 3 + var(--rg-chip-gap) * 2);
  overflow: hidden;
}
.rg-place {
  display: inline-flex; align-items: center; gap: 7px;
  height: var(--rg-chip-h); padding: 0 12px;
  background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: 9px;
  font-size: 14px; font-weight: 600;
}
.rg-place i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--rg-brand); background: #EEF3FB; padding: 1px 7px; border-radius: 20px; }
.rg-place:hover { border-color: var(--rg-brand); }

/* ⚠️ `.rg-more` WAS HERE AND IS GONE. A full-width navy slab under the chips —
   heaviest object in the section, for its most secondary action, and wider than
   anything above it because a block `display:flex` link fills its container.
   "See all" now sits in the heading row and is styled by `.rg-block__head > a`,
   which is what the listings band on the same page has always used. One
   pattern, not two. */

/* The chip cloud is clipped, so the band must not also be clipped by a fade
   that hides a whole row — three rows exactly, and the heading says how many
   more there are. */

/* ── articles ─────────────────────────────────────────────────────────────
   The right column is four equal rows; the lead stretches its photograph to
   match them, so both columns end level. A fifth article breaks that.        */

.rg-blog { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .rg-blog { grid-template-columns: 1fr; } }
.rg-post {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: 16px;
}
.rg-post:hover { border-color: #C9D5E8; }
.rg-post__img { display: block; overflow: hidden; background: var(--rg-bg); }
.rg-post__img img { width: 100%; height: 100%; object-fit: cover; }
.rg-post__body { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 17px; }
.rg-post__cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rg-brand); }
.rg-post__title { font-size: 16px; font-weight: 700; line-height: 1.28; }
.rg-post__x { font-size: 14px; line-height: 1.55; color: var(--rg-muted); }
.rg-post__d { font-size: 12px; font-weight: 600; color: #9AA5B4; }

.rg-post--lead { position: relative; height: 100%; }
.rg-post__flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 10px; border-radius: 7px;
  background: var(--rg-surface); color: var(--rg-deep);
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(10, 21, 53, .2);
}
.rg-post--lead .rg-post__img { flex: 1 1 auto; min-height: 180px; }
.rg-post--lead .rg-post__title { font-size: 23px; letter-spacing: -.02em; }

.rg-blog__list { display: grid; grid-template-rows: repeat(var(--rg-blog-rows, 4), 1fr); gap: 12px; }
.rg-blog__list .rg-post { flex-direction: row; }
.rg-blog__list .rg-post__img { width: 112px; flex: none; }
.rg-blog__list .rg-post__body { padding: 11px 14px; justify-content: center; gap: 5px; }
.rg-blog__list .rg-post__title { font-size: 14.5px; }

/* ── questions ────────────────────────────────────────────────────────────
   Two columns filled DOWNWARDS — one, two, three on the left; four, five, six
   on the right. grid-auto-flow does that; a plain two-column grid would read
   one, two across the top instead.                                          */

.rg-faq {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(var(--rg-faq-rows, 3), auto);
  grid-auto-flow: column;
}
@media (max-width: 780px) {
  .rg-faq { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
.rg-faq__item { overflow: hidden; background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: 12px; }
.rg-faq__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 15px 17px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 700; line-height: 1.35;
}
.rg-faq__item summary::-webkit-details-marker { display: none; }
.rg-faq__item summary::after { content: "+"; flex: none; font-size: 19px; font-weight: 400; line-height: 1.15; color: var(--rg-muted); }
.rg-faq__item[open] summary::after { content: "\2013"; }
.rg-faq__item[open] summary { border-bottom: 1px solid var(--rg-line); }
.rg-faq__a { padding: 13px 17px 16px; font-size: 14px; color: var(--rg-muted); }
.rg-faq__a p { margin: 0; }

/* ── closing band ─────────────────────────────────────────────────────────── */

/* A CARD, NOT A BAND. It ran the full width of the screen under a page of
   rounded panels — Timothy, 30 Aug: it should be "rounded and same width as
   both FAQs". So the dark surface is the inner element, which is a `.rg-wrap`
   and therefore already exactly as wide as the questions above it. The outer
   div carries only the page's own side gutter. */
/* ⚠️ BOTH AXES IN ONE DECLARATION. This element carries `.rg-wrap` in the
   markup and `.rg-wrap` sets the 20px side gutter; a `padding: 8px 0 52px`
   here would silently reset it, which is exactly the bug that put every other
   block on this page flush against the edge of a phone. */
.rg-endcap { padding: 8px 20px 52px; }
.rg-endcap__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 26px; padding: 34px 32px; border-radius: var(--rg-radius);
  background: var(--rg-deep); color: #fff;
}
@media (max-width: 600px) {
  .rg-endcap__inner { padding: 26px 22px; gap: 18px; }
}
.rg-endcap h2 { font-size: 21px; font-weight: 800; margin: 0 0 6px; }
.rg-endcap p { margin: 0; max-width: 52ch; font-size: 15px; color: rgba(255, 255, 255, .62); }
.rg-endcap a {
  padding: 13px 26px; border-radius: 11px; white-space: nowrap;
  background: #fff; color: var(--rg-brand); font-size: 15px; font-weight: 800;
}

/* ── a place page ─────────────────────────────────────────────────────────── */
/* City and county pages. Prefix grepped before use: rg-place and rg-faq were
   already the front page's, so everything here is rg-loc-. The front page
   redefining nine of the theme's own class names once restyled the blog, the
   search results, the 404 and every static page, and nobody noticed for a day. */

.rg-loc { padding-bottom: 56px; }
.rg-loc-section { max-width: var(--rg-wrap); margin: 0 auto; padding: 34px 20px 0; }
.rg-loc-head { max-width: var(--rg-wrap); margin: 0 auto; padding: 40px 20px 6px; }

.rg-loc-eyebrow {
  margin: 0 0 9px; font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rg-brand);
}
.rg-loc-h1 {
  margin: 0 0 12px; font-size: clamp(27px, 4.2vw, 40px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1; text-wrap: balance;
}
.rg-loc-lede { margin: 0 0 16px; max-width: 68ch; font-size: 17px; line-height: 1.6; color: var(--rg-muted); }

.rg-loc-stats { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; }
.rg-loc-stat {
  font-size: 13.5px; color: var(--rg-muted);
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  border-radius: 999px; padding: 5px 13px;
}
.rg-loc-stat b { color: var(--rg-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

.rg-loc-h2 { margin: 0 0 5px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.rg-loc-sub { margin: 0 0 18px; max-width: 66ch; font-size: 14.5px; color: var(--rg-muted); }

/* the roster, and the nine it shows first */
.rg-loc-slot { display: contents; }
.rg-cards[data-rg-roster].is-clamped .rg-loc-slot--more { display: none; }
.rg-loc-more-wrap { margin: 20px 0 0; text-align: center; }
.rg-loc-more[hidden] { display: none; }

/* "also serving" — a list, never cards. A card here would carry a rank. */
.rg-loc-also-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px; grid-template-columns: 1fr;
}
@media (min-width: 620px) { .rg-loc-also-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .rg-loc-also-list { grid-template-columns: 1fr 1fr 1fr; } }
.rg-loc-also-list a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 15px; text-decoration: none; color: inherit;
  background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: var(--rg-radius-sm);
}
.rg-loc-also-list a:hover { border-color: var(--rg-brand); }
.rg-loc-also-name { font-size: 14.5px; font-weight: 700; }
.rg-loc-also-place { font-size: 12.5px; color: var(--rg-muted); }

/* nearby cities, and the county above them */
.rg-loc-tiles { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .rg-loc-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .rg-loc-tiles { grid-template-columns: repeat(6, 1fr); } }
.rg-loc-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 15px; text-decoration: none; color: inherit;
  background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: var(--rg-radius-sm);
}
.rg-loc-tile:hover { border-color: var(--rg-brand); }
.rg-loc-tile-name { font-size: 14.5px; font-weight: 700; }
.rg-loc-tile-meta { font-size: 12.5px; color: var(--rg-muted); font-variant-numeric: tabular-nums; }

.rg-loc-county {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 17px 20px; text-decoration: none; color: inherit;
  background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: var(--rg-radius);
}
.rg-loc-county:hover { border-color: var(--rg-brand); }
.rg-loc-county-name { font-size: 16px; font-weight: 800; }
.rg-loc-county-meta { font-size: 13.5px; color: var(--rg-muted); font-variant-numeric: tabular-nums; }

/* the long description — one wrapper styles copy that carries no classes */
.rg-loc-prose { max-width: 68ch; font-size: 16.5px; line-height: 1.68; }
.rg-loc-prose h2 { margin: 34px 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.rg-loc-prose h2:first-child { margin-top: 0; }
.rg-loc-prose h3 { margin: 24px 0 8px; font-size: 17.5px; font-weight: 800; }
.rg-loc-prose p { margin: 0 0 15px; }
.rg-loc-prose ul, .rg-loc-prose ol { margin: 0 0 15px; padding-left: 22px; }
.rg-loc-prose li { margin-bottom: 6px; }
.rg-loc-prose a { color: var(--rg-brand); text-decoration: underline; text-underline-offset: 2px; }
.rg-loc-prose strong { font-weight: 700; }
/* A wide table must scroll inside itself. The page body never scrolls sideways. */
.rg-loc-prose table {
  display: block; overflow-x: auto; width: 100%; margin: 0 0 18px;
  border-collapse: collapse; font-size: 15px;
}
.rg-loc-prose th, .rg-loc-prose td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rg-line); vertical-align: top;
}
.rg-loc-prose th { font-weight: 800; background: var(--rg-surface); }
.rg-loc-figure { margin: 24px 0; }
.rg-loc-figure img {
  display: block; width: 100%; max-width: 460px; height: auto;
  border: 1px solid var(--rg-line); border-radius: var(--rg-radius);
}

/* the questions */
.rg-loc-faq { display: grid; gap: 8px; max-width: 68ch; }
.rg-loc-q { background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: var(--rg-radius-sm); }
.rg-loc-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 17px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 700; line-height: 1.35;
}
.rg-loc-q summary::-webkit-details-marker { display: none; }
.rg-loc-q summary::after { content: "+"; flex: none; font-size: 19px; font-weight: 400; color: var(--rg-muted); }
.rg-loc-q[open] summary::after { content: "\2013"; }
.rg-loc-q[open] summary { border-bottom: 1px solid var(--rg-line); }
.rg-loc-a { padding: 13px 17px 16px; font-size: 14.5px; color: var(--rg-muted); }
.rg-loc-a p { margin: 0; }
.rg-loc-a a { color: var(--rg-brand); text-decoration: underline; }

/* ── the score, on its scale ──────────────────────────────────────────────── */
/* The card's headline number, in place of a third party's star average. Class
   names grepped before use. ⚠️ The track's fill is positioned by the DIRECTORY,
   not here — the published scale does not start at zero, so the percentage
   arrives pre-computed and this file must never re-derive it from the number. */

.rg-listing-card__score { display: block; }
/* ⚠️ THE SPACE UNDER THE TRACK WAS THE MEDIAN LABEL'S, and removing the label
   on 31 Aug took it with it — the chips ended up sitting on the bar with no gap
   at all. Nothing had ever declared that space; it existed because a 13px label
   with a 4px top margin happened to be there. It is a declaration now, so it
   cannot disappear again behind an unrelated change.

   Scoped to the card: the same score block is reused in the lightbox, where the
   line below it carries its own margin and would end up with both. */
.rg-listing-card .rg-listing-card__score { margin-bottom: 15px; }
.rg-score-head { display: flex; align-items: baseline; gap: 7px; }
.rg-score-head b {
  font-size: 19px; font-weight: 900; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--rg-ink);
}
.rg-score-head span { font-size: 12px; font-weight: 600; color: var(--rg-muted); }

.rg-score-track {
  position: relative; height: 6px; border-radius: 99px;
  background: var(--rg-bg); margin-top: 7px;
}
.rg-score-track i {
  position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--rg-brand);
}
/* The one mark: the middle of the directory. The ends carry no label — see the
   note in template-parts/listing-card.php. */
.rg-score-track em {
  position: absolute; top: -3px; width: 2px; height: 12px;
  background: var(--rg-muted); opacity: .55;
}
.rg-score-mid { position: relative; height: 13px; margin-top: 4px; }
.rg-score-mid span {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-size: 10.5px; color: var(--rg-muted);
}

/* the profile hero's version — same anatomy, more room */
.hf-score { min-width: 240px; }
.hf-score .hf-score-n {
  font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--rg-brand);
}
.hf-score .hf-score-l {
  font-size: 11.5px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--rg-muted); margin-top: 3px;
}
.hf-score .rg-score-track { height: 9px; margin-top: 12px; }

/* ── "also serving": a smaller card, deliberately a different shape ───────── */
/* Horizontal, so it reads as a different KIND of listing at a glance rather
   than a shrunken copy of the ranked card. Logo, score, one way in. No photo
   mosaic and no rank — the page is not claiming these are the local pick. */

.rg-mini-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .rg-mini-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .rg-mini-grid { grid-template-columns: 1fr 1fr 1fr; } }

.rg-mini {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
  padding: 11px 14px; background: var(--rg-surface);
  border: 1px solid var(--rg-line); border-radius: var(--rg-radius-sm);
}
.rg-mini:hover { border-color: var(--rg-brand); }

/* Same plaque rule as the big card: an explicit track so a tall logo is
   contained rather than clipped, and a navy ground behind a pale mark. */
.rg-mini__mark {
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  width: 54px; height: 42px; flex: none; padding: 5px; overflow: hidden;
  background: #fff; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(10, 21, 53, .1);
}
.rg-mini__mark.is-pale { background: var(--rg-deep); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.rg-mini__mark img { width: 100%; height: 100%; object-fit: contain; }
.rg-mini__mark b { font-size: 15px; font-weight: 800; color: var(--rg-muted); }
.rg-mini__mark.is-pale b { color: #fff; }

.rg-mini__body { min-width: 0; }
.rg-mini__name {
  display: block; font-size: 14px; font-weight: 700; line-height: 1.3;
  color: var(--rg-ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rg-mini__name:hover { color: var(--rg-brand); }
.rg-mini__meta { display: flex; flex-wrap: wrap; gap: 3px 9px; margin-top: 2px; font-size: 12px; color: var(--rg-muted); }
.rg-mini__score b { color: var(--rg-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.rg-mini__go {
  flex: none; font-size: 12.5px; font-weight: 700; text-decoration: none;
  color: var(--rg-brand); white-space: nowrap;
}
.rg-mini__go:hover { text-decoration: underline; }
@media (max-width: 420px) { .rg-mini__go { display: none; } }

/* ── the wider area, at the foot of the page ──────────────────────────────── */
/* Was a full-width strip with a name at one end and a count at the other —
   too big to read as a link, too empty to read as a card. Sized to its content
   now, and last on the page where a reader is looking for a way onward. */

.rg-loc-parent { padding-bottom: 8px; }
.rg-parent {
  display: inline-grid; gap: 3px; max-width: 100%;
  padding: 16px 22px; text-decoration: none; color: inherit;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius); box-shadow: var(--rg-shadow-sm);
}
.rg-parent:hover { border-color: var(--rg-brand); }
.rg-parent__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rg-muted);
}
.rg-parent__name { font-size: 17px; font-weight: 800; color: var(--rg-ink); }
.rg-parent__go {
  font-size: 13.5px; font-weight: 700; color: var(--rg-brand);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

/* a capped roster's way to the whole list */
.rg-loc-more-all { margin: 14px 0 0; font-size: 14px; }
.rg-loc-more-all a { color: var(--rg-brand); font-weight: 700; }

/* a chip that leads somewhere */
.chip--to { text-decoration: none; color: inherit; }
.chip--to:hover { border-color: var(--rg-brand); color: var(--rg-brand); }

/* ═══════════════════════════════════════════════════════════════════════════
   NOT FOUND
   Centred, short, and every way onward the site actually has. The numerals are
   decoration — the heading says what happened — so they are aria-hidden in the
   template and coloured from the brand token here rather than being a picture.
   ═══════════════════════════════════════════════════════════════════════════ */

.rg-404 {
  padding: 56px 0 64px;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rg-brand) 10%, transparent), transparent 68%);
}
.rg-404__art {
  display: block;
  width: 420px;      /* a wide illustration, not an icon — 300 drew it postage-stamp */
  max-width: 86%;
  height: auto;
  margin: 0 auto 4px;
}
.rg-404__code {
  margin: 0;
  font-size: clamp(64px, 14vw, 104px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--rg-brand);
}
.rg-404__title { margin: 6px 0 10px; font-size: clamp(21px, 4vw, 28px); color: var(--rg-deep); }
.rg-404__lede { margin: 0 auto; max-width: 46ch; color: var(--rg-muted); line-height: 1.65; }
.rg-404__search { margin: 26px auto 0; max-width: 460px; }
.rg-404__go { margin: 20px 0 0; }

.rg-404__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 34px;
  font-size: 14px;
  color: var(--rg-muted);
}
.rg-404__links-label { font-weight: 600; }
.rg-404__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rg-404__menu a { color: var(--rg-brand); font-weight: 700; text-decoration: none; }
.rg-404__menu a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE JOIN PAGE
   The one addressed to the businesses being listed.

   ⚠️ THIS IS THE OLD PAGE'S DESIGN, RE-EXPRESSED IN THE THEME'S TOKENS — and
   that is Timothy's correction of 31 Aug, not a change of mind. The first pass
   moved the page into the theme and drew it in the theme's calmest voice: pale
   cards, one weight of type, no colour. His words: *"it looks like an artifact
   created in Claude Code… it should look more like us."* He was right. That page
   is the only one on the site that has to SELL something, and a page that sells
   is allowed to raise its voice.

   So the four things he named are back — a dark hero, the two columns colour-
   coded with ticks and crosses, cards that lift off a dark ground, and a
   featured price card that is a different object from the one beside it — but
   every colour is a token, the type scale is the site's, and the hero is a
   fraction of the height of the one he called "way too big" an hour earlier.
   Mixed and normalized, which is what he asked for.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the opening ─────────────────────────────────────────────────────────
   Dark, centred, and lit from above — the same navy the site's own bands use,
   with one soft blue glow behind the heading. ⚠️ NOT the old page's 96px of
   padding and 74px type: that was a full screen of hero before a reader saw a
   word of substance, which is what "way too big" meant.                     */
.rg-join-hero {
  position: relative; overflow: hidden;
  padding: 62px 0 52px;
  background: var(--rg-deep); color: #fff;
  text-align: center;
}
.rg-join-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(59, 130, 246, .26) 0%, transparent 64%);
}
.rg-join-hero > .rg-wrap { position: relative; max-width: 900px; }
.rg-join-hero h1 {
  margin: 0 auto 16px; max-width: 18ch;
  font-size: clamp(31px, 4.8vw, 50px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.06; text-wrap: balance;
}
.rg-join-hero .rg-join-lede { margin: 0 auto 26px; max-width: 62ch; color: rgba(255, 255, 255, .72); }

/* ⚠️ THE BASE RULE FIRST. Rewriting this block once already left only the two
   SCOPED eyebrow rules — hero and dark band — and every section eyebrow in
   between rendered as plain grey sentence-case text. A component styled only
   inside its two special cases has no ordinary case. */
.rg-join-eyebrow {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rg-brand);
}

/* The eyebrow's flanking rules are the old page's, and they earn their place:
   they centre the line optically, which centred small caps otherwise fail to do. */
.rg-join-hero .rg-join-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px; color: #7EA6FF; letter-spacing: .14em;
}
.rg-join-hero .rg-join-eyebrow::before,
.rg-join-hero .rg-join-eyebrow::after {
  content: ""; display: block; width: 26px; height: 1px; background: var(--rg-brand); opacity: .55;
}

.rg-join-lede { margin: 0 0 20px; max-width: 68ch; font-size: 17px; line-height: 1.6; color: var(--rg-muted); }

.rg-join-cta { margin: 0; }
.rg-join-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 11px;
  background: var(--rg-brand); border: 1px solid var(--rg-brand); color: #fff;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 8px 22px rgba(29, 78, 216, .32);
  transition: background-color .16s, box-shadow .16s, transform .16s;
}
.rg-join-btn:hover { background: var(--rg-brand-dark); border-color: var(--rg-brand-dark); color: #fff; transform: translateY(-1px); }
.rg-join-btn--ghost {
  background: var(--rg-surface); border-color: var(--rg-line); color: var(--rg-ink); box-shadow: none;
}
.rg-join-btn--ghost:hover { background: var(--rg-surface); border-color: var(--rg-brand); color: var(--rg-brand); }

/* Green dots, because these are three things that are true rather than three
   things being claimed. */
.rg-join-trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px;
  margin: 24px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .6);
}
.rg-join-trust > i { display: none; }
.rg-join-trust span { display: inline-flex; align-items: center; gap: 8px; }
.rg-join-trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #34D399; }

/* ── the figure strip ────────────────────────────────────────────────────
   ⚠️ NONE OF THESE FOUR IS COUNTED BY THIS SITE — they describe the market the
   directory sits in, not the directory, and the payload that supplies them says
   so in as many words. The two numbers in the trust line above them ARE counted
   at render, which is the rule for any figure about us. Do not move one across
   without moving the other rule with it.

   It sits half over the hero, so the dark band and the page below it are one
   composition rather than two stacked blocks.                               */
.rg-join-figures {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-top: -34px;
}
@media (max-width: 760px) { .rg-join-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -26px; } }
.rg-join-fig {
  padding: 19px 20px; border-radius: 15px;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
}
.rg-join-fig b {
  display: block; font-size: 28px; font-weight: 800; letter-spacing: -.035em;
  line-height: 1; color: var(--rg-deep);
}
.rg-join-fig span { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.4; color: var(--rg-muted); }
/* ⚠️ SPANS THE WHOLE ROW. The strip is a 4-column grid, so without this the
   source line becomes a fifth cell and drops under the first figure, reading as
   a caption for that one number rather than for all of them. Quiet on purpose:
   it is an attribution, not a claim, and it must not compete with the figures. */
.rg-join-figures__src {
  grid-column: 1 / -1;
  margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--rg-muted);
}
.rg-join-figures__src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rg-join-figures__src a:hover, .rg-join-figures__src a:focus-visible { color: var(--rg-deep); }

/* ── a section, and its opening ──────────────────────────────────────────── */
.rg-join-sect { padding: 54px 20px; }
.rg-join-head { margin-bottom: 30px; }
.rg-join-head h2 {
  margin: 0; font-size: clamp(23px, 3vw, 32px); font-weight: 800;
  letter-spacing: -.025em; text-wrap: balance;
}
.rg-join-head .rg-join-lede { margin: 11px 0 0; font-size: 16px; }

/* ── what we are / what we are not ───────────────────────────────────────
   ⚠️ COLOUR-CODED, WITH TICKS AND CROSSES — his call, and the reason is that
   these two columns are not two lists, they are a claim and its opposite. The
   first pass told them apart with a 3px edge, which reads as decoration; a
   green tick and a red cross reads as an argument.

   ⚠️ RED. He said "green and yellow" from memory of the old page, so it was
   built amber; shown it, he was explicit that he wants red — 31 Aug. The old
   page was red too. My argument for amber was that this column lists what other
   companies do rather than bad things; his page, his call, and red is the
   stronger read.                                                            */
.rg-join-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .rg-join-cols { grid-template-columns: minmax(0, 1fr); } }
.rg-join-col { padding: 30px 28px; border-radius: 18px; }
.rg-join-col--is   { background: #F0FDF4; border: 1px solid #BBF7D0; }
.rg-join-col--isnt { background: #FEF2F2; border: 1px solid #FECACA; }
.rg-join-col__label {
  display: inline-flex; align-items: center;
  margin: 0 0 20px; padding: 5px 13px; border-radius: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.rg-join-col--is   .rg-join-col__label { color: #15803D; background: #DCFCE7; }
.rg-join-col--isnt .rg-join-col__label { color: #B91C1C; background: #FEE2E2; }
.rg-join-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 17px; }
.rg-join-col li {
  display: grid; grid-template-columns: 20px 1fr; gap: 3px 12px; align-items: start;
}
/* The mark is drawn, not typed. A "✓" glyph renders at a different weight and
   a different baseline in every font the browser might fall back to. */
.rg-join-col li::before {
  content: ""; grid-row: 1 / span 2; align-self: start; margin-top: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background-position: center; background-repeat: no-repeat; background-size: 11px;
}
.rg-join-col--is li::before {
  background-color: #DCFCE7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l4 4L19 6' stroke='%2315803D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.rg-join-col--isnt li::before {
  background-color: #FEE2E2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23B91C1C' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.rg-join-col li b { font-size: 15px; font-weight: 700; color: var(--rg-deep); }
.rg-join-col li span { grid-column: 2; font-size: 14.5px; line-height: 1.58; color: #3F4A5A; }

/* ── what premium adds ───────────────────────────────────────────────────
   A dark band, and cards that lift. Both are the old page's and both are doing
   work: the dark ground separates "what you get if you pay" from the argument
   above it, and the lift is the only movement on the page, on the one grid a
   reader is meant to browse rather than read.                               */
.rg-join-sect--dark {
  position: relative; overflow: hidden;
  background: var(--rg-deep); color: #fff;
}
.rg-join-sect--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 82% 0%, rgba(59, 130, 246, .16) 0%, transparent 62%);
}
.rg-join-sect--dark > * { position: relative; }
.rg-join-sect--dark .rg-join-eyebrow { color: #7EA6FF; }
.rg-join-sect--dark .rg-join-lede { color: rgba(255, 255, 255, .62); }

.rg-join-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .rg-join-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rg-join-cards { grid-template-columns: minmax(0, 1fr); } }
.rg-join-card {
  padding: 24px 23px; border-radius: 15px;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
  transition: background-color .18s, border-color .18s, transform .18s;
}
.rg-join-card:hover {
  background: rgba(255, 255, 255, .07); border-color: rgba(126, 166, 255, .42);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) { .rg-join-card:hover { transform: none; } }
/* The plate is the old page's `.ben-ico` — a soft blue square behind a line
   drawing. It gives the card a fixed point to start from, so nine cards of
   different text lengths still read as one grid. */
.rg-join-card__ico {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px;
  border-radius: 12px; background: rgba(59, 130, 246, .16); color: #93C5FD;
  transition: background-color .18s, color .18s;
}
.rg-join-card__ico svg { width: 21px; height: 21px; }
.rg-join-card:hover .rg-join-card__ico { background: rgba(126, 166, 255, .26); color: #C7DAFF; }
.rg-join-card h3 { margin: 0 0 9px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.rg-join-card p { margin: 0; font-size: 14px; line-height: 1.62; color: rgba(255, 255, 255, .58); }

/* ── The same grid on a LIGHT ground ───────────────────────────────────────────
   ⚠️ `.rg-join-card` ABOVE IS WRITTEN FOR THE DARK BAND ONLY — white heading,
   translucent-white body, translucent-white plate. Used anywhere else it is
   white text on a pale background, which is exactly what happened when the
   "How it actually works" section reused this grid outside the dark section.
   The dark styles stay the default because that is where the grid was born;
   this modifier makes the light case explicit rather than inherited.         */
.rg-join-cards--light .rg-join-card {
  background: #fff; border-color: var(--rg-line);
}
.rg-join-cards--light .rg-join-card:hover {
  background: #fff; border-color: var(--rg-brand);
}
.rg-join-cards--light .rg-join-card__ico {
  background: rgba(29, 78, 216, .09); color: var(--rg-brand);
}
.rg-join-cards--light .rg-join-card:hover .rg-join-card__ico {
  background: rgba(29, 78, 216, .15); color: var(--rg-brand);
}
.rg-join-cards--light .rg-join-card h3 { color: var(--rg-ink); }
.rg-join-cards--light .rg-join-card p  { color: var(--rg-muted); }

/* ── the plans ───────────────────────────────────────────────────────────
   ⚠️ THE FEATURED CARD IS A DIFFERENT OBJECT, not the same card with a blue
   border. That is what made the old table read: one is a thing you take, the
   other is a thing you buy. The column count still comes from the payload —
   two plans in a three-column grid is two cards and a hole.                 */
.rg-join-plans { display: grid; gap: 20px; align-items: stretch; }
/* ⚠️ `margin-inline: auto` — a `max-width` on a grid does not centre it, it just
   makes it narrow and leaves it against the left edge under a full-width
   heading, which is what Timothy saw. */
.rg-join-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
.rg-join-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .rg-join-plans { grid-template-columns: minmax(0, 1fr) !important; } }
.rg-join-plan {
  display: flex; flex-direction: column;
  padding: 32px 30px 34px; border-radius: 20px;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}
.rg-join-plan.is-feature {
  background: linear-gradient(180deg, var(--rg-deep) 0%, var(--rg-deep-2) 100%);
  border: 2px solid var(--rg-brand); color: #fff;
  box-shadow: 0 24px 60px rgba(37, 99, 235, .22);
}
.rg-join-plan__name {
  margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--rg-brand);
}
.is-feature .rg-join-plan__name { color: #7DD3FC; }
.rg-join-plan__tag { margin: 7px 0 0; font-size: 14px; color: var(--rg-muted); }
.is-feature .rg-join-plan__tag { color: rgba(255, 255, 255, .62); }
.rg-join-plan__amt { display: flex; align-items: baseline; gap: 7px; margin: 22px 0 0; }
.rg-join-plan__amt b { font-size: 44px; font-weight: 900; letter-spacing: -.035em; line-height: 1; color: var(--rg-deep); }
.is-feature .rg-join-plan__amt b { color: #fff; }
/* Free is green, because free is the good news on this page. */
.rg-join-plan:not(.is-feature) .rg-join-plan__amt b { color: #15803D; }
.rg-join-plan__amt span { font-size: 15px; font-weight: 600; color: var(--rg-muted); }
.is-feature .rg-join-plan__amt span { color: rgba(255, 255, 255, .55); }
.rg-join-plan__note { margin: 8px 0 24px; font-size: 13px; color: var(--rg-muted); }
.is-feature .rg-join-plan__note { color: rgba(255, 255, 255, .5); }
.rg-join-plan .rg-join-btn { width: 100%; margin-bottom: 26px; }
.is-feature .rg-join-btn { background: #fff; border-color: #fff; color: var(--rg-deep); box-shadow: none; }
.is-feature .rg-join-btn:hover { background: #E6EDFB; border-color: #E6EDFB; color: var(--rg-deep); }
.rg-join-plan__feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.rg-join-plan__feats li {
  position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.5; color: var(--rg-ink);
}
.is-feature .rg-join-plan__feats li { color: rgba(255, 255, 255, .88); }
.rg-join-plan__feats li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px;
  border-left: 2px solid var(--rg-brand); border-bottom: 2px solid var(--rg-brand);
  transform: rotate(-45deg);
}
.rg-join-plan:not(.is-feature) .rg-join-plan__feats li::before { border-color: #15803D; }
.is-feature .rg-join-plan__feats li::before { border-color: #7DD3FC; }
.rg-join-plan__feats li.is-head {
  padding-left: 0; font-weight: 700; font-size: 13.5px;
  letter-spacing: .02em; color: rgba(255, 255, 255, .55);
}
.rg-join-plan__feats li.is-head::before { content: none; }
.rg-join-foot { margin: 26px 0 0; font-size: 14.5px; color: var(--rg-muted); }

/* ── getting started ─────────────────────────────────────────────────────── */
.rg-join-steps {
  list-style: none; counter-reset: rg-join-step; margin: 0 0 28px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 780px) { .rg-join-steps { grid-template-columns: minmax(0, 1fr); } }
.rg-join-steps li {
  counter-increment: rg-join-step;
  padding: 28px 26px; border-radius: 16px;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .04);
}
.rg-join-steps li::before {
  content: counter(rg-join-step);
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px;
  border-radius: 10px; background: var(--rg-brand); color: #fff;
  font-size: 15px; font-weight: 800;
}
.rg-join-steps h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.rg-join-steps p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--rg-muted); }

/* ── questions ───────────────────────────────────────────────────────────
   ⚠️ FULL WIDTH, not clamped to a reading measure. It was 74ch, which left it
   visibly narrower than the closing card directly beneath it — Timothy, 31 Aug.
   A question is a heading with a paragraph folded behind it, not a column of
   running prose, so the measure argument does not apply.                    */
.rg-join-faq { display: grid; gap: 9px; }

.rg-join-fine { margin: 16px 0 0; font-size: 13px; color: var(--rg-muted); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PLACE INDEXES
   Two pages whose only job is to reach other pages, at two different sizes:
   twenty-two counties as cards, seventy towns as a glossary. One template, and
   the payload says which.
   ═══════════════════════════════════════════════════════════════════════════ */

.rg-index-hero { padding: 44px 0 30px; }
.rg-index-hero h1 {
  margin: 0 0 12px; max-width: 20ch;
  font-size: clamp(28px, 4.2vw, 42px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.08; text-wrap: balance;
}
.rg-index-lede { margin: 0; max-width: 66ch; font-size: 16.5px; line-height: 1.6; color: var(--rg-muted); }

.rg-index-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.rg-index-stats span {
  font-size: 13.5px; color: var(--rg-muted);
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  border-radius: 999px; padding: 6px 15px;
}
.rg-index-stats b { color: var(--rg-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

.rg-index-body { padding: 8px 20px 60px; }
.rg-index-empty { padding: 60px 0; text-align: center; color: var(--rg-muted); }

/* ── counties: cards ─────────────────────────────────────────────────────── */
.rg-index-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .rg-index-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rg-index-cards { grid-template-columns: minmax(0, 1fr); } }
.rg-index-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 19px 20px; border-radius: 14px;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.rg-index-card:hover {
  border-color: var(--rg-brand); box-shadow: 0 8px 22px rgba(16, 32, 64, .09); transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .rg-index-card:hover { transform: none; } }
.rg-index-card__name { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--rg-ink); }
.rg-index-card__n { font-size: 13px; font-weight: 600; color: var(--rg-brand); }

/* ── cities: a glossary ──────────────────────────────────────────────────
   ⚠️ THE LETTER ROW IS STICKY. Seventy towns is a page you scroll, and a jump
   control that scrolls away with the page is a control you cannot reach at the
   moment you want it. It sits under the site header, so its offset is the
   header's height plus a hair.                                             */
.rg-index-jump {
  position: sticky; top: 8px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 6px 0 30px; padding: 11px 13px;
  border-radius: 14px;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  box-shadow: 0 6px 22px rgba(15, 23, 42, .07);
}
/* The letters GROW to fill the card. Left at their own width they sat in the
   first third of a full-width panel with two thirds of nothing beside them,
   which reads as a row that failed to finish rather than as a row of eighteen.
   Growing also means the target is a comfortable size on a phone. */
.rg-index-jump a {
  flex: 1 0 auto;
  display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--rg-ink);
  font-variant-numeric: tabular-nums;
}
.rg-index-jump a:hover { background: var(--rg-deep); color: #fff; }

.rg-index-group { margin-bottom: 34px; }
/* ⚠️ scroll-margin, or the sticky row above lands on top of the heading it just
   jumped to. It is the row's height plus its offset plus breathing room. */
.rg-index-group { scroll-margin-top: 78px; }
.rg-index-group h2 {
  margin: 0 0 13px; padding-bottom: 9px;
  border-bottom: 2px solid var(--rg-line);
  font-size: 15px; font-weight: 800; letter-spacing: .1em; color: var(--rg-brand);
}

.rg-index-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .rg-index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rg-index-list { grid-template-columns: minmax(0, 1fr); } }
.rg-index-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  font-size: 14.5px; font-weight: 600; color: var(--rg-ink);
  transition: border-color .14s, background-color .14s, color .14s;
}
.rg-index-item:hover { border-color: var(--rg-brand); color: var(--rg-brand); }
/* The count is a fact, not a label, so it reads as a number and nothing else —
   seventy rows each ending in the word "builders" is seventy wasted words. */
.rg-index-item i {
  font-style: normal; font-size: 12px; font-weight: 700;
  color: var(--rg-brand); background: #EEF3FB;
  padding: 2px 8px; border-radius: 20px; font-variant-numeric: tabular-nums;
}
.rg-index-item:hover i { background: var(--rg-brand); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE GALLERY
   A curated wall of photographs with nine groups of filters beside it. The whole
   set is in the page and the browser hides what does not match — see the note at
   the top of templates/page-gallery.php for why, and for the size at which that
   stops being the right trade.
   ═══════════════════════════════════════════════════════════════════════════ */

.rg-gal__body {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 26px;
  align-items: start; padding: 8px 20px 60px;
}
@media (max-width: 980px) { .rg-gal__body { grid-template-columns: minmax(0, 1fr); } }

/* ── the filters ─────────────────────────────────────────────────────────
   Sticky, because the grid is long and a filter you have to scroll back up to
   reach is a filter you use once.

   ⚠️ AND IT SCROLLS INSIDE ITSELF, WHICH STICKY ALONE DOES NOT FIX. Nine groups
   and 41 chips stand 2,079px tall — more than twice a laptop screen — and a
   sticky element taller than the viewport simply scrolls away like anything
   else: the bottom four groups could not be reached without scrolling the grid
   past them. Capped to the screen with its own overflow, every chip is now
   reachable at any window height, and the grid scrolls independently.

   The type is a step down from the page's too. These are 41 short labels in a
   232px column, not running text — at 13px they were pushing the column taller
   than it needed to be for no gain in readability. */
/* ⚠️ THE OFFSET IS THE HEADER'S HEIGHT, AND SO IS THE CAP. The site header is
   `position: sticky; top: 0` at `--rg-nav-h` plus its own border, so a rail
   sticking at 14px sticks UNDERNEATH it — its first group hid behind the header
   the moment the page scrolled — and a cap of `100vh - 28px` is taller than the
   space actually left, so the bottom ran off the screen. Both numbers are the
   same number, named once. */
.rg-gal__side {
  --rg-gal-gap: calc(var(--rg-nav-h) + 1px + 14px);
  position: sticky; top: var(--rg-gal-gap);
  max-height: calc(100vh - var(--rg-gal-gap) - 14px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 15px 15px 16px; border-radius: 16px;
  background: var(--rg-surface); border: 1px solid var(--rg-line);
  scrollbar-width: thin;
}
.rg-gal__side[hidden] { display: none; }
/* Stays put while the rest of the rail scrolls under it, so "Clear all" is
   never the thing you have to scroll up inside a panel to find. */
.rg-gal__side-head {
  position: sticky; top: -15px; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -15px -15px 13px; padding: 15px 15px 11px;
  background: var(--rg-surface); border-bottom: 1px solid var(--rg-line);
}
.rg-gal__side-head b { font-size: 13px; font-weight: 800; }
.rg-gal__clear {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--rg-brand);
}
.rg-gal__clear[hidden] { display: none; }

.rg-gal__group + .rg-gal__group { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--rg-line); }
.rg-gal__group-name {
  margin: 0 0 7px; font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rg-muted);
}
.rg-gal__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rg-gal__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  background: var(--rg-bg); border: 1px solid transparent; color: var(--rg-ink);
  transition: background-color .14s, color .14s, border-color .14s;
}
.rg-gal__chip:hover:not(:disabled) { border-color: var(--rg-brand); }
.rg-gal__chip i {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  color: var(--rg-muted); font-variant-numeric: tabular-nums;
}
/* Chosen. */
.rg-gal__chip[aria-pressed="true"] { background: var(--rg-deep); border-color: var(--rg-deep); color: #fff; }
.rg-gal__chip[aria-pressed="true"] i { color: rgba(255, 255, 255, .7); }
/* ⚠️ A DEAD CHIP IS STRUCK THROUGH, NOT JUST FADED. Faded alone reads as "not
   chosen yet"; a line through it reads as "this would leave you nothing", which
   is what it means and the whole reason the counts are computed. */
.rg-gal__chip:disabled { opacity: .45; cursor: default; text-decoration: line-through; }

/* ── the bar above the grid ──────────────────────────────────────────────── */
.rg-gal__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px;
}
.rg-gal__toggle {
  display: none; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 9px 15px; border-radius: 10px;
  background: var(--rg-surface); border: 1px solid var(--rg-line); color: var(--rg-ink);
}
.rg-gal__toggle i {
  font-style: normal; font-size: 11px; font-weight: 800;
  background: var(--rg-brand); color: #fff; border-radius: 99px; padding: 1px 7px;
}
.rg-gal__toggle i[hidden] { display: none; }
.rg-gal__count { margin: 0; font-size: 13.5px; color: var(--rg-muted); font-variant-numeric: tabular-nums; }

.rg-gal__scope { display: inline-flex; margin-left: auto; border-radius: 10px; overflow: hidden; border: 1px solid var(--rg-line); }
.rg-gal__scope button {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border: 0; background: var(--rg-surface); color: var(--rg-ink);
}
.rg-gal__scope button + button { border-left: 1px solid var(--rg-line); }
.rg-gal__scope button[aria-pressed="true"] { background: var(--rg-deep); color: #fff; }

/* ── the wall ────────────────────────────────────────────────────────────
   ⚠️ A FIXED 4:3 BOX, NOT THE PHOTOGRAPH'S OWN RATIO. These came off other
   people's websites at every shape there is; left to themselves the rows tear.
   The width and height attributes on each image still hold the space while it
   loads, which is what stops the page jumping.                              */
.rg-gal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1180px) { .rg-gal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .rg-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } }

.rg-gal__card {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 13px; background: var(--rg-bg);
  cursor: zoom-in;
}
.rg-gal__card[hidden] { display: none; }
.rg-gal__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-gal__who {
  position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px;
  display: flex; flex-direction: column; gap: 1px;
  background: linear-gradient(transparent, rgba(6, 12, 30, .82));
  color: #fff; opacity: 0; transition: opacity .18s;
}
.rg-gal__card:hover .rg-gal__who,
.rg-gal__card:focus-visible .rg-gal__who { opacity: 1; }
.rg-gal__who b { font-size: 13px; font-weight: 700; }
.rg-gal__who i { font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .72); }
/* Without the script there is no hover story to tell — the names simply show. */
.rg-gal:not(.is-live) .rg-gal__who { opacity: 1; }

.rg-gal__empty { padding: 50px 0; text-align: center; color: var(--rg-muted); }
.rg-gal__empty[hidden] { display: none; }

/* ── the panel ───────────────────────────────────────────────────────────── */
.rg-gal__desc { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--rg-muted); }
.rg-gal__desc[hidden] { display: none; }
.rg-gal__attrs {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 4px; font-size: 13.5px;
}
.rg-gal__attrs dt { color: var(--rg-muted); }
.rg-gal__attrs dd { margin: 0; font-weight: 600; color: var(--rg-ink); }
#rg-gal-lb .rg-lb__actions { grid-template-columns: 1fr; }

@media (max-width: 980px) {
  .rg-gal__toggle { display: inline-flex; }
  .rg-gal__side {
    position: static; order: -1; margin-bottom: 4px;
    max-height: none; overflow: visible;   /* a drawer, not a column */
    display: none;
  }
  .rg-gal__side-head { position: static; margin: 0 0 13px; padding: 0 0 11px; }
  .rg-gal__side.is-open { display: block; }
}

/* ── the quote form in the lightbox ──────────────────────────────────────
   It lives in the panel so the photograph stays on screen while somebody types. It replaces the two buttons rather than sitting under
   them: a panel with a form AND the actions that opened it reads as two ways to
   do one thing.                                                            */
.rg-gal__acts { grid-template-columns: 1fr 1fr; }
.rg-gal__acts[hidden] { display: none; }
@media (max-width: 560px) { .rg-gal__acts { grid-template-columns: 1fr; } }

.rg-gal__quote { margin-top: 4px; }
.rg-gal__quote[hidden] { display: none; }
.rg-gal__quote-lede {
  margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--rg-muted);
  padding: 10px 12px; border-radius: 9px; background: var(--rg-bg);
  border-left: 3px solid var(--rg-brand);
}
.rg-gal__quote .fpz-field { margin: 0 0 10px; }
.rg-gal__quote label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--rg-muted); }
.rg-gal__quote input[type="text"],
.rg-gal__quote input[type="email"],
.rg-gal__quote input[type="tel"],
.rg-gal__quote textarea {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--rg-line); border-radius: 9px; background: var(--rg-surface); color: var(--rg-ink);
}
.rg-gal__quote input:focus, .rg-gal__quote textarea:focus {
  outline: none; border-color: var(--rg-brand); box-shadow: 0 0 0 3px rgba(29, 78, 216, .13);
}
/* The consent line is a sentence with a box in it, not a labelled field — it is
   a promise being made, so it reads like one. */
.rg-gal__consent { margin: 2px 0 14px; }
.rg-gal__consent label { display: flex; gap: 9px; align-items: flex-start; margin: 0; font-weight: 400; }
.rg-gal__consent input { margin-top: 2px; flex: none; }
.rg-gal__consent span { font-size: 12.5px; line-height: 1.5; color: var(--rg-muted); font-weight: 400; }
.rg-gal__note {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 9px;
  background: #E9F6EE; color: #14663A; font-size: 13px; line-height: 1.5;
}
.rg-gal__note[hidden] { display: none; }