/* ==========================================================================
   RMCRE - design system
   Light, glass-and-brass: white ground, rounded cards, soft shadows.
   Tokens below are the single source of truth; do not hard-code hex values.
   ========================================================================== */

:root{
  /* Brand */
  --rm-deep:        #073A54;  /* topbar, dark CTA bands */
  --rm-blue:        #0B5B83;  /* header links, headings, buttons, footer */
  --rm-blue-hi:     #107CB2;  /* one-off hover on the search submit */
  --rm-brass:       #AD8A4E;  /* FILL ONLY - fails AA as small text */
  --rm-brass-lt:    #C9A968;  /* rules and borders on dark */
  --rm-brass-dark:  #E3C98C;  /* small brass text ON BLUE */
  --rm-brass-light: #82632F;  /* small brass text ON WHITE */

  /* Neutrals */
  --rm-ink:      #1B2A33;
  --rm-body:     #3A4A54;
  --rm-muted:    #55636C;
  --rm-hair:     #E7EAEC;
  --rm-field:    #DDE3E7;
  --rm-off:      #F1F4F6;
  --rm-paper:    #FAFBFC;   /* "client copy required" panel */
  --rm-white:    #FFFFFF;
  --rm-on-brass: #14120F;   /* text on brass fills */

  /* Ground for hero photography and its scrims. */
  --rm-navy:     #06202E;

  /* Cool structure introduced by the v2 design. */
  --rm-divider:  #EDF0F2;   /* rules INSIDE a card, lighter than a border */
  --rm-plate:    #F1F4F6;   /* empty image plate */
  --rm-fill:     #FAFBFC;   /* input and select fill */
  --rm-soft:     #EDF2F5;   /* secondary button on white */
  --rm-soft-hi:  #DDE6EB;   /* ...its hover */

  /* Two paler brass tints for small text on blue. Both clear AA;
     #AD8A4E remains fill-only and must never carry small text. */
  --rm-brass-pale:  #EBD9AE;
  --rm-brass-paler: #FAF2DE;

  /* Radius scale. The v2 design is rounded throughout - an earlier square
     version was rejected - so every corner reads from here. */
  --rm-r-card:   10px;   /* standard card */
  --rm-r-inner:  9px;    /* card inside a 1px gradient edge - card minus the edge */
  --rm-r-panel:  10px;   /* large panel */
  --rm-r-panel-lg: 10px; /* full-width CTA panel */
  --rm-r-btn:    8px;
  --rm-r-field:  8px;
  --rm-r-sq:     8px;    /* social and icon squares */
  --rm-r-pill:   999px;  /* only things that are genuinely round: dots, avatars, round arrows */
  --rm-r-tag:    8px;    /* chips, tags and badges - rectangles with softened corners, not capsules */

  /* Depth. Long, soft, low-opacity shadows - never a hard drop. */
  --rm-sh-card:  0 18px 44px -28px rgba(6,32,46,.24);
  --rm-sh-lift:  0 26px 60px -24px rgba(6,32,46,.28), 0 2px 5px rgba(6,32,46,.05);
  --rm-sh-panel: 0 30px 70px -22px rgba(6,32,46,.34), 0 2px 6px rgba(6,32,46,.05);
  --rm-sh-deep:  0 36px 90px -32px rgba(6,32,46,.6);
  --rm-sh-btn:   0 2px 6px rgba(6,32,46,.05);

  /* Glass. Used on the header, coverage tiles, hero badge and credit bar. */
  --rm-glass:      rgba(255,255,255,.1);
  --rm-glass-hi:   rgba(255,255,255,.94);
  --rm-glass-edge: rgba(255,255,255,.22);
  --rm-glass-blur: blur(20px) saturate(140%);
  --rm-glass-inset: inset 0 1px 0 rgba(255,255,255,.3);

  /* The 1px gradient edge that wraps a feature card.
     Measured off the rendered design - the brief quotes .6 at 42%, but what
     shipped is .5 at 40% with the darker brass. */
  --rm-edge: linear-gradient(180deg, rgba(173,138,78,.5), rgba(11,91,131,.12) 40%, rgba(11,91,131,.05));

  /* Alpha-on-blue */
  --rm-w90: rgba(255,255,255,.9);
  --rm-w85: rgba(255,255,255,.85);
  --rm-w82: rgba(255,255,255,.82);
  --rm-w80: rgba(255,255,255,.8);
  --rm-w70: rgba(255,255,255,.7);
  --rm-w66: rgba(255,255,255,.66);
  --rm-w60: rgba(255,255,255,.6);
  --rm-w45: rgba(255,255,255,.45);
  --rm-w24: rgba(255,255,255,.24);
  --rm-w20: rgba(255,255,255,.2);
  --rm-w18: rgba(255,255,255,.18);
  --rm-w10: rgba(255,255,255,.1);

  /* Type */
  --rm-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --rm-sans:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rm-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Paragraph scale.
     Every piece of running prose on the site reads from these five steps, so
     the whole body scale moves together from one place. Mono labels, eyebrows,
     badges, nav and buttons are deliberately NOT on this scale - they are
     small-caps furniture, and enlarging them breaks the design. */
  --rm-p-xs: 16px;    /* tightest secondary lines - city under a firm */
  --rm-p-sm: 17px;    /* card bodies, footer, key/value rows */
  --rm-p-md: 17.5px;  /* service and principle bodies, panel notes */
  --rm-p-lg: 18px;    /* CTA copy, feature excerpts, service prose */
  --rm-p-xl: 19.5px;  /* hero ledes and article prose */

  /* Layout */
  --rm-wrap:    1280px;
  /* Fluid, exactly as the design writes it: 40px at 1440, 20px on a phone,
     scaling in between rather than stepping at a breakpoint. */
  --rm-gutter:  clamp(20px,4vw,40px);
  /* Header height, built from its parts rather than guessed.
     The hero tucks under the header by exactly this, so if the number and the
     rendered height disagree you get a white strip at the top of every page
     (too small) or the hero under the nav (too large). Deriving it means the
     two cannot drift: change the padding or the panel and the tuck follows.
     The panel height is explicit for the same reason - left to its content it
     picks up sub-pixel line-box differences. */
  --rm-header-pad:   16px;
  --rm-header-panel: 68px;   /* 10px + 48px logo + 10px */
  --rm-header:  calc(var(--rm-header-pad) * 2 + var(--rm-header-panel));
  --rm-sticky:  calc(var(--rm-header) + var(--rm-header-pad));
  --rm-anchor:  120px;

  /* Motion */
  --rm-ease: cubic-bezier(.2,.7,.2,1);

  /* Height of the WordPress admin bar, which is fixed for a logged-in editor.
     Every sticky offset adds this, so the header does not slide underneath it. */
  --rm-bar: 0px;
}

body.admin-bar{ --rm-bar:32px; }
@media screen and (max-width:782px){ body.admin-bar{ --rm-bar:46px; } }
/* Below 600px WordPress stops pinning the bar, so the offset goes away again. */
@media screen and (max-width:600px){ body.admin-bar{ --rm-bar:0px; } }

/* The one front-end trace of the admin bar links added in inc/admin.php. */
#wpadminbar .rmcre-bar-edit .ab-item{ color:#E3C98C; }

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--rm-white);
  color:var(--rm-ink);
  font-family:var(--rm-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; }
ul[class],ol[class]{ list-style:none; margin:0; padding:0; }
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:var(--rm-blue); text-decoration:none; }
a:hover{ color:var(--rm-brass-light); }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; border-top:1px solid var(--rm-hair); margin:0; }

/* Square corners everywhere, by decision. The only exception is the
   circular broker headshot, which opts back in explicitly. */

/* Focus: always visible, never removed. */
:focus-visible{
  outline:2px solid var(--rm-brass-light);
  outline-offset:2px;
}
.rm-on-dark :focus-visible,
.rm-footer :focus-visible{
  outline-color:var(--rm-brass-dark);
}

.rm-skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--rm-blue); color:var(--rm-white);
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.08em;
  text-transform:uppercase; padding:14px 22px;
}
.rm-skip:focus{ left:0; color:var(--rm-white); }

.rm-sr{
  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;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.rm-wrap{
  max-width:var(--rm-wrap);
  margin-inline:auto;
  padding-inline:var(--rm-gutter);
}

/* Section rhythm, taken from the design's own clamps rather than rounded to a
   fixed number. The two steps are deliberate: 104px is the standard gap
   between sections, 96px the slightly tighter one used where a section
   follows a band. Fluid means no hard jump at a breakpoint. */
.rm-section{ padding-block:clamp(64px,8vw,104px); }
.rm-section--tight{ padding-block:clamp(56px,7vw,96px); }
.rm-section--top{ padding-block:clamp(64px,8vw,104px) 0; }
.rm-section--bottom{ padding-block:0 clamp(56px,7vw,90px); }
/* Both modifiers on one section is not additive: each sets the whole
   padding-block shorthand, so --bottom silently zeroed the top padding that
   --top had just set. On the broker profile that put the Listings heading hard
   against the inquiry form the moment the sidebar stacked. */
.rm-section--top.rm-section--bottom{ padding-block:clamp(64px,8vw,104px) clamp(56px,7vw,90px); }
.rm-section--rule{ border-top:1px solid var(--rm-hair); padding-top:clamp(40px,5vw,56px); }

.rm-band{ background:var(--rm-off); border-block:1px solid var(--rm-hair); }
.rm-band--blue{ background:var(--rm-blue); color:var(--rm-white); }
.rm-band--deep{ background:var(--rm-deep); color:var(--rm-white); }

/* Section head: title block left, supporting note right. */
.rm-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:32px; flex-wrap:wrap; margin-bottom:clamp(26px,3.5vw,40px);
}
.rm-head__note{
  font-size:var(--rm-p-md); color:var(--rm-muted); max-width:420px; text-wrap:pretty;
}
.rm-on-dark .rm-head__note{ color:var(--rm-w66); }
/* Centred section head - the coverage band. The note sits under the h2 rather
   than beside it, and the measure is capped so it does not run the full width. */
.rm-head--center{
  display:block; text-align:center;
  margin-bottom:clamp(30px,4vw,46px);
}
.rm-head--center .rm-head__note{
  max-width:34em; margin:0 auto; text-align:center;
}

[id]{ scroll-margin-top:var(--rm-anchor); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

/* Eyebrow: mono, 11px, wide tracking, preceded by a 20px brass rule.
   Measured off the design - .2em on white, .18em on blue. */
.rm-eyebrow{
  display:flex; align-items:center; gap:9px;
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--rm-brass-light); margin-bottom:16px;
}
.rm-eyebrow::before{
  content:""; width:20px; height:1px; background:var(--rm-brass);
  display:block; flex:none;
}
.rm-eyebrow--wide{ margin-bottom:18px; }
.rm-on-dark .rm-eyebrow{ color:var(--rm-brass-dark); letter-spacing:.18em; margin-bottom:18px; }
.rm-on-dark .rm-eyebrow::before{ background:var(--rm-brass-lt); }
/* Centred variant on the coverage band carries a rule on both sides. */
.rm-eyebrow--center{ justify-content:center; }
.rm-eyebrow--center::after{
  content:""; width:20px; height:1px; background:var(--rm-brass-lt);
  display:block; flex:none;
}

.rm-label{
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rm-brass-light);
  display:block;
}
.rm-meta{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.06em;
  color:var(--rm-muted);
}
.rm-on-dark .rm-meta{ color:var(--rm-w70); }

/* Heading scale, taken from the design rather than invented.
   Tracking tightens as size grows: -.04em on the hero h1, -.038em on a
/* Interior pages run their own H1 step, smaller than the homepage hero and on
   a wider measure. Affiliates and News each take a step down again. */
.rm-h1{
  font-family:var(--rm-display); font-weight:500;
  font-size:clamp(36px,5.4vw,76px); line-height:1.01; letter-spacing:-.04em;
  color:var(--rm-white); max-width:22em; text-wrap:balance;
}
.rm-h1--md{ font-size:clamp(34px,4.6vw,62px); }
.rm-h1--sm{ font-size:clamp(36px,4.4vw,54px); }

/* H1 measure varies by page in the design - it controls where the headline
   wraps, so it is not cosmetic. Team 22em (default), About 16em, Affiliates
   and Contact 24em, Services / Town / Service detail 40em, Blog post 44em. */
.rm-h1--tight{  max-width:16em; }
.rm-h1--mid{    max-width:24em; }
.rm-h1--wide{   max-width:40em; }
.rm-h1--widest{ max-width:44em; }

/* Interior hero eyebrow: the dash rule, not the homepage's glass badge.
   Only the homepage and About carry the badge. */
.rm-hero .rm-eyebrow{
  font-size:15px; letter-spacing:.14em; margin-bottom:20px;
}
.rm-hero .rm-eyebrow::before{ width:22px; }
.rm-h2{
  font-family:var(--rm-display); font-weight:500;
  font-size:clamp(30px,4.2vw,52px); line-height:1.03; letter-spacing:-.038em;
  color:var(--rm-blue); max-width:14em; text-wrap:balance;
}
/* Coverage band: same size, wider measure because it is centred. */
.rm-h2--wide{ max-width:16em; margin-inline:auto; }
/* News section head. */
.rm-h2--md{ font-size:clamp(28px,4vw,46px); line-height:1.04; max-width:15em; }
/* About block. */
.rm-h2--sm{ font-size:clamp(28px,3.8vw,44px); line-height:1.06; letter-spacing:-.035em; max-width:none; }
/* Full-width CTA panel. */
.rm-h2--cta{ font-size:clamp(28px,3.6vw,42px); line-height:1.05; letter-spacing:-.035em; max-width:none; }
/* Result heading inside a toolbar - the smallest h2 step. */
.rm-h2--xs{ font-size:clamp(24px,2.6vw,30px); line-height:1.14; letter-spacing:-.015em; max-width:none; margin-bottom:6px; }
.rm-h3{
  font-family:var(--rm-display); font-weight:500; font-size:20px;
  line-height:1.18; letter-spacing:-.025em; color:var(--rm-blue); text-wrap:pretty;
}
.rm-on-dark .rm-h2,
.rm-on-dark .rm-h3{ color:var(--rm-white); }

/* Italic accent inside a heading: brass reads light on blue, dark on white. */
.rm-h1 em, .rm-h2 em, .rm-h3 em{ font-style:italic; color:var(--rm-brass-light); }
.rm-on-dark .rm-h1 em,
.rm-on-dark .rm-h2 em,
.rm-on-dark .rm-h3 em{ color:var(--rm-brass-dark); }

.rm-lede{
  font-size:var(--rm-p-xl); color:var(--rm-w82); max-width:40em; text-wrap:pretty;
}

/* Running copy inside a panel, sidebar or band. Templates use these instead of
   inline font sizes, so the paragraph scale above governs every one of them. */
.rm-note{
  font-size:var(--rm-p-sm); color:var(--rm-muted); line-height:1.6; text-wrap:pretty;
}
.rm-note--xs{ font-size:var(--rm-p-xs); }
.rm-note--md{ font-size:var(--rm-p-md); }
.rm-note--lg{ font-size:var(--rm-p-lg); }
.rm-note--ink{ color:var(--rm-ink); }
.rm-note--tight{ line-height:1.5; }
.rm-standfirst{
  font-family:var(--rm-display); font-weight:400; font-size:22px; line-height:1.5;
  color:var(--rm-blue); padding-bottom:30px;
  border-bottom:1px solid var(--rm-divider); margin-bottom:34px; text-wrap:pretty;
}
.rm-standfirst--lg{ font-size:23px; }

/* --------------------------------------------------------------------------
/* Button system, measured off the approved design.
   Every button is mono, uppercase, .08em, weight 500 - that part is uniform.
   What varies is size, and the design uses a distinct step per context, so
   each one is a named variant carrying that context's exact values.

   Two rules worth knowing before changing anything here:
     - Solid buttons have NO border. A 1px transparent border makes every
       solid button 2px taller than the design.
     - Outline buttons run 11.5px where their solid partner runs 12.5px.
       That asymmetry is in the design, not a mistake. */
.rm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:15px 28px; border:0; background:none;
  border-radius:var(--rm-r-btn);
  text-align:center; white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s, box-shadow .18s;
}

/* Fills */
.rm-btn--primary{ background:var(--rm-blue); color:var(--rm-white); }
.rm-btn--primary:hover{ background:var(--rm-deep); color:var(--rm-white); }
.rm-btn--brass{
  background:var(--rm-brass); color:var(--rm-on-brass);
  box-shadow:0 10px 26px -8px rgba(201,169,104,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.rm-btn--brass:hover{ background:var(--rm-brass-lt); color:var(--rm-on-brass); }
/* White on photography - the hero's second button. */
.rm-btn--white{ background:var(--rm-white); color:var(--rm-blue); }
.rm-btn--white:hover{ background:var(--rm-soft); color:var(--rm-blue); }
/* Quiet secondary inside a card, beside a primary - e.g. Call / Email. */
.rm-btn--soft{ background:var(--rm-soft); color:var(--rm-blue); }
.rm-btn--soft:hover{ background:var(--rm-soft-hi); color:var(--rm-blue); }

/* The outline button: white, hairline, faint lift, brass on hover.
   This is the "All listings ->" button that recurs on every section head. */
.rm-btn--ghost{
  font-size:15px;
  color:var(--rm-blue); border:1px solid var(--rm-field);
  background:var(--rm-white); box-shadow:var(--rm-sh-btn);
}
.rm-btn--ghost:hover{ border-color:var(--rm-brass); color:var(--rm-brass-light); background:var(--rm-white); }
.rm-btn--ghost-light{
  font-size:15px;
  color:var(--rm-white); border:1px solid var(--rm-glass-edge);
  background:var(--rm-glass); backdrop-filter:var(--rm-glass-blur);
}
.rm-btn--ghost-light:hover{ border-color:var(--rm-white); background:rgba(255,255,255,.2); color:var(--rm-white); }

/* Sizes, each taken from the context it appears in. */
.rm-btn--hero{ border-radius:8px; padding:17px 32px; }
.rm-btn--hero.rm-btn--white{ padding:17px 30px; }
.rm-btn--header{ padding:13px 22px; font-size:15px; }
.rm-btn--drawer{ padding:15px 22px; font-size:15px; }
.rm-btn--md{ padding:15px 26px; }
.rm-btn--sm{ padding:14px 22px; font-size:15px; }
.rm-btn--xs{ padding:13px 10px; font-size:15px; }
.rm-btn--news{ border-radius:8px; padding:16px 28px; }

.rm-btn--block{ display:flex; width:100%; }
.rm-btn__icon{ width:14px; height:14px; flex:none; }
.rm-btn--xs .rm-btn__icon{ width:13px; height:13px; }

/* Quiet text link with a brass underline. */
.rm-link{
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--rm-blue);
  border-bottom:1px solid var(--rm-brass); padding-bottom:3px;
  display:inline-block; white-space:nowrap;
}
.rm-link:hover{ color:var(--rm-brass-light); }
.rm-on-dark .rm-link{ color:var(--rm-brass-dark); border-bottom-color:var(--rm-brass-lt); }
.rm-on-dark .rm-link:hover{ color:var(--rm-white); }

/* --------------------------------------------------------------------------
   Header + navigation
   -------------------------------------------------------------------------- */

/* Floating glass header.
   The sticky element is a transparent 16px-padded wrapper; the visible chrome
   is the panel inside it, so the header reads as a pill floating clear of the
   page edge rather than a bar welded to the top.

   Two states. Over a photo hero it is translucent with white nav text; once
   scrolled past the hero it turns near-white with dark text. The default is
   the near-white state so that a page with no photo hero - and any page at
   all if the scroll script never runs - still has readable nav. */
/* Traditional bar: solid white, full width, sitting in normal flow at the top
   with the hero beneath it. The v2 design floated a rounded glass panel over
   the photograph and inverted the nav to white; RMCRE asked for the header and
   the hero to be separate bands, so that whole two-state treatment is gone.

   The row inside reproduces .rm-wrap exactly - same max-width, same gutter - so
   the logo and the Contact button line up with the page content below instead
   of sitting on a margin of their own. */
.rm-header{
  position:sticky; top:var(--rm-bar); z-index:70;
  padding-block:var(--rm-header-pad);
  background:var(--rm-white);
  /* The hairline is a shadow, not a border, on purpose: --rm-header is derived
     as pad*2 + panel, and a 1px border would make the real bar 101px against a
     100px token. That is exactly the mismatch that put a white strip across the
     top of every page once before. A shadow paints outside the box model. */
  box-shadow:0 1px 0 var(--rm-hair);
  transition:box-shadow .3s ease;
}
/* The scroll state used to swap the glass for white. Now it does the one thing
   a white bar still needs: lift off the white page it is covering, which
   otherwise merges with it. */
.rm-header.is-scrolled{
  box-shadow:0 1px 0 var(--rm-hair), 0 10px 30px -18px rgba(6,32,46,.42);
}
.rm-header__panel{
  max-width:var(--rm-wrap); margin-inline:auto;
  padding-inline:var(--rm-gutter);
  height:var(--rm-header-panel);
  display:flex; align-items:center; gap:22px;
}
.rm-logo{ display:block; flex:none; }
.rm-logo img{ height:48px; width:auto; }

.rm-nav{ margin-left:auto; }
.rm-nav__list{
  display:flex; gap:clamp(14px,1.7vw,28px); align-items:center;
  list-style:none; margin:0; padding:0;
}
.rm-nav__item{ position:relative; display:flex; align-items:center; }
.rm-nav__link{
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--rm-body);
  padding-bottom:5px; border-bottom:1px solid transparent;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:color .3s ease, border-color .18s ease;
}
.rm-nav__link:hover{ color:var(--rm-blue); border-bottom-color:var(--rm-brass-light); }
.rm-nav__item.is-current > .rm-nav__link{ color:var(--rm-blue); border-bottom-color:var(--rm-brass); }
.rm-nav__caret{ width:8px; height:8px; flex:none; }

.rm-nav__drop{
  display:none; position:absolute; top:100%; left:-18px; padding-top:20px; z-index:10;
}
.rm-nav__item:hover > .rm-nav__drop,
.rm-nav__item:focus-within > .rm-nav__drop{ display:block; }
.rm-nav__panel{
  border-radius:10px; border:1px solid rgba(11,91,131,.14);
  background:var(--rm-white); min-width:190px; overflow:hidden;
  box-shadow:0 24px 60px -16px rgba(6,32,46,.45);
}
/* wp_nav_menu emits a bare <ul>, which the ul[class] reset does not reach -
   so strip the markers and the 40px indent here. */
.rm-nav__panel ul,
.rm-nav__panel li{ list-style:none; margin:0; padding:0; }
/* Same family as the top-level items. Left at its own size and in sentence
   case: the uppercase and wide tracking that suit seven short nav labels would
   make "Commercial Property Brokerage Capabilities" unreadable and far too
   wide for a dropdown. */
.rm-nav__drop a{
  display:block; padding:13px 20px; border-bottom:1px solid var(--rm-divider);
  font-family:var(--rm-mono);
  font-size:15px; font-weight:500; color:var(--rm-body); white-space:nowrap;
}
.rm-nav__drop a:hover{ background:#F6F3EC; color:var(--rm-blue); }
.rm-nav__drop li.is-current > a{ color:var(--rm-blue); background:#F6F3EC; }
/* The panel has its own border; a rule under the final item doubles it. */
.rm-nav__panel li:last-child > a{ border-bottom:none; }

/* Third level, if a menu is ever built that deep. */
.rm-nav__nested{ list-style:none; margin:0; padding:0; }
.rm-nav__nested a{ padding-left:32px; }

/* The markets menu: two columns, 430px, hairline gutter between them.
   The grid goes on the <ul>, not the panel - the panel's only child is that
   list, so a grid there would leave the second column permanently empty. */
.rm-nav__panel--markets{ width:430px; }
.rm-nav__panel--markets ul{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
}
.rm-nav__panel--markets a{
  padding:11px 18px; font-family:var(--rm-mono); font-size:15px;
  font-weight:500; text-transform:none; letter-spacing:.04em;
}
/* Items fill left to right, so the odd ones sit in the left column. */
.rm-nav__panel--markets li:nth-child(odd) a{ border-right:1px solid var(--rm-divider); }

.rm-header__cta{ flex:none; }

/* Burger - a solid white pill in every state.
   It sits over both photography and white sections, so a colour that follows
   the scroll state would be wrong in one of them; and an open drawer is white
   regardless. Solid white with dark bars is the only choice correct in all
   three cases. */
.rm-burger{
  display:none; width:46px; height:46px; flex:none; padding:0;
  margin-left:auto; cursor:pointer;
  border:1px solid var(--rm-field); border-radius:var(--rm-r-btn);
  background:var(--rm-white);
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.rm-burger span{
  display:block; width:18px; height:2px; border-radius:2px;
  background:var(--rm-blue); transition:transform .3s ease, opacity .3s ease;
}
.rm-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.rm-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.rm-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */

/* Drawer - a white rounded card hanging below the header panel rather than a
   full-screen overlay, so the header pill stays visible and in place.
   Height-capped and scrollable: the Search accordion holds 21 towns and would
   otherwise run off the bottom of a phone with no way back to the close
   button. overscroll-behavior stops the page behind it rubber-banding. */
.rm-drawer{ display:none; }
.rm-drawer.is-open{ display:block; }
body.rm-locked{ overflow:hidden; }
.rm-drawer__inner{
  max-width:var(--rm-wrap); margin:10px auto 0;
  border-radius:var(--rm-r-card); border:1px solid rgba(11,91,131,.14);
  background:var(--rm-white);
  box-shadow:0 26px 60px -18px rgba(6,32,46,.4);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  max-height:calc(100vh - 118px - var(--rm-bar));
  overscroll-behavior:contain;
}
.rm-drawer__row{ border-bottom:1px solid var(--rm-divider); }
.rm-drawer__link,
.rm-drawer__toggle{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 22px; background:none; border:0; text-align:left;
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--rm-body);
}
.rm-drawer__toggle svg{
  width:12px; height:12px; flex:none; color:#9AA8B0; transition:transform .2s, color .2s;
}
.rm-drawer__toggle[aria-expanded="true"]{ color:var(--rm-blue); }
.rm-drawer__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); color:var(--rm-brass-light); }
.rm-drawer__sub{
  display:none; padding:0 0 8px;
  background:var(--rm-fill); border-top:1px solid var(--rm-divider);
}
.rm-drawer__sub.is-open{ display:block; }
.rm-drawer__sub a{
  display:block; padding:12px 22px 12px 34px;
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.05em; color:var(--rm-muted);
}
.rm-drawer__sub a:hover{ color:var(--rm-blue); }
.rm-drawer__sub--cols{ columns:2; column-gap:20px; padding-left:12px; }
.rm-drawer__sub--cols a{ break-inside:avoid; padding-left:22px; }
.rm-drawer__cta{ padding:16px; }

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   Page hero (interior pages)

   Same construction as the home hero - navy ground, photograph, two scrims,
   tucked under the floating header - but shorter, since these pages carry
   their content below rather than filling the first screen.
   -------------------------------------------------------------------------- */

.rm-hero{
  /* Sits below the header now, not under it: the traditional bar occupies its
     own band, so the old negative pull would slide the hero up beneath it. */
  position:relative;
  background:var(--rm-navy); color:var(--rm-white); overflow:hidden;
}
/* No photograph set: fall back to the brand gradient rather than flat navy,
   which reads as an unloaded image. */
.rm-hero--deep{ background:linear-gradient(150deg,#0B5B83 0%,#08476A 55%,#073A54 100%); }
.rm-hero__media{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.rm-hero__media img{ width:100%; height:100%; object-fit:cover; }
.rm-hero__inner{
  position:relative; z-index:5;
  /* The old 150-205px top reserved room for the header floating over this
     band. The header has its own band now, so that clearance is subtracted -
     the copy keeps the same distance below the header it always had. The
     floor stops a narrow viewport pushing the copy up against the white bar,
     which reads harder than the translucent panel it replaced. */
  padding-block:clamp(56px, calc(15vw - var(--rm-header)), 105px) clamp(52px,6vw,72px);
  min-height:clamp(440px,44vw,540px);
  display:flex; flex-direction:column;
  justify-content:center;
  justify-content:safe center;
}
.rm-hero__copy{ max-width:44em; }
/* 44em is a reading measure, meant for the lede paragraph under the heading.
   On the About hero there is no lede - just the eyebrow and the H1 - and that
   cap was squeezing a 94-character display heading into a 704px column: six
   lines at 1600px, which pushed the hero to 689px while every other inner page
   sat on its 540px floor. With the cap lifted the H1's own measure class does
   the limiting, which is what measure is there for. */
.rm-hero__copy--wide{ max-width:none; }

/* The news index runs its own hero padding, because the newsletter card in
   that hero needs more room above it than a line of copy does. About used to
   have an override here too: it kept the old 150-210px top padding from when
   the header floated over the hero, so once the header got its own band the
   About hero stood 37px taller than every other inner page. It now uses the
   default, which is what the client asked for. */
.rm-hero__inner--news{  padding-block:clamp(140px,14vw,195px) clamp(52px,6vw,72px); }

/* Mobile hero metrics differ per page in the design; each is its own line so
   the numbers can be checked against the file they came from. */
@media (max-width:900px){
  /* Team, Services, Affiliates, Contact, Town, Blog, Service detail */
  .rm-hero__inner{
    padding-block:clamp(120px,26vw,150px) clamp(40px,8vw,56px);
    min-height:clamp(400px,74vw,480px);
    justify-content:flex-start;
  }
  .rm-hero__inner--news{  min-height:clamp(400px,74vw,480px); }
}

/* Split hero: copy on the left, a card on the right. Used by the news index,
   where the design puts the newsletter signup up in the hero. */
.rm-hero__inner--split{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:clamp(32px,4vw,56px); align-items:center;
}
@media (max-width:900px){
  .rm-hero__inner--split{ grid-template-columns:minmax(0,1fr); gap:40px; }
}

/* The same glass badge the home hero uses. */
.rm-hero__badge{
  /* See .rm-mhero__badge - same plate removal, so the About hero eyebrow
     matches the homepage rather than being the only one still in a box. */
  display:flex; width:fit-content; align-items:center; gap:10px;
  margin-bottom:clamp(20px,2.6vw,28px);
}
.rm-hero__badge-text{
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rm-brass-pale);
}


/* --------------------------------------------------------------------------
   Home hero - rotating markets
   -------------------------------------------------------------------------- */

/* The hero tucks under the floating header by exactly the header's height, so
   the glass panel sits on photography rather than on white. */
.rm-mhero{
  /* See .rm-hero: the header is a band above this one, not a panel over it. */
  position:relative;
  background:var(--rm-navy); overflow:hidden; color:var(--rm-white);
}
.rm-mhero__layers{ position:absolute; inset:0; z-index:1; }
.rm-mhero__layer{ position:absolute; inset:0; overflow:hidden; opacity:0; z-index:1; transition:opacity 1.1s ease; }
/* Laid out 12% larger than the frame and pulled back by half of that, so the
   image is centred and the surplus is what the Ken Burns zoom travels into.
   The frame clips it. See the rmHeroZoom comment below for why the surplus
   lives in the layout rather than in the transform.

   max-width:none is load-bearing. The global reset on line 156 caps every
   image at 100% of its container, which silently clamped the width back to
   the frame while the height still resolved to 112% - a box of the wrong
   ratio, offset left, leaving bare navy down the right-hand side.

   The base scale is the no-animation fallback: a shade over 1/1.12, so it
   paints at the frame size with no sub-pixel hairline at the edges. */
.rm-mhero__layer img{
  position:absolute; top:-6%; left:-6%;
  width:112%; height:112%; max-width:none; object-fit:cover;
  transform:scale(.894);
}
.rm-mhero__layer.is-active{ opacity:1; z-index:2; }

/* Two scrims rather than one: the diagonal carries the text side, the vertical
   protects the header at the top and the search panel at the bottom. One
   gradient cannot do both without going so dark it kills the photograph. */
.rm-mhero__scrim{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(6,32,46,.88) 0%, rgba(6,32,46,.74) 38%,
    rgba(6,32,46,.3) 70%, rgba(6,32,46,.12) 100%);
}
.rm-mhero__scrim--v{
  background:linear-gradient(180deg,
    rgba(6,32,46,.72) 0%, rgba(6,32,46,.12) 30%,
    transparent 55%, rgba(6,32,46,.8) 100%);
}
/* Centred, but never at the cost of rising into the header.
   A flex box that centres content taller than itself overflows in BOTH
   directions, so a long headline pushes the badge up under the nav. "safe"
   falls back to flex-start exactly in that case; browsers without it keep
   plain centring, which is why the mobile rule below is flex-start outright -
   that is where the copy is tallest relative to the box. */
.rm-mhero__inner{
  position:relative; z-index:5;
  /* See .rm-hero__inner: header clearance subtracted, floor kept. */
  padding-block:clamp(56px, calc(15vw - var(--rm-header)), 110px) clamp(36px,4vw,52px);
  min-height:clamp(620px,68vw,780px);
  display:flex; flex-direction:column;
  justify-content:center;
  justify-content:safe center;
}
.rm-mhero__copy{ max-width:none; }

/* Glass badge above the h1, with a pulsing brass dot. */
.rm-mhero__badge{
  /* Plate removed at RMCRE's request: background, border, glass blur and inset
     shadow are all gone, so this reads as text over the photograph and the two
     buttons below carry the call to action on their own.

     Still a block-level flex box sized to its content - inline-flex would share
     a line box with the headline and the two would collide.

     The padding goes with the plate. With no box to sit inside, a left inset
     would push this text off the H1's left edge below it, which reads as a
     misalignment rather than a margin. */
  display:flex; width:fit-content; align-items:center; gap:10px;
  margin-bottom:clamp(22px,3vw,32px);
}
.rm-mhero__dot-pulse{
  width:7px; height:7px; border-radius:var(--rm-r-pill); flex:none;
  background:var(--rm-brass-dark); box-shadow:0 0 12px var(--rm-brass-lt);
  animation:rmPulse 2.4s ease-in-out infinite;
}
.rm-mhero__badge-text{
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rm-brass-pale);
}

.rm-mhero__h1{
  font-family:var(--rm-display); font-weight:500;
  font-size:clamp(38px,6vw,88px); line-height:1.01; letter-spacing:-.04em;
  color:var(--rm-white); margin:0 0 clamp(24px,3vw,36px);
  max-width:18em; text-wrap:balance;
}
/* The paragraph twin carries the same class, so it must obey hidden even
   though the class itself never sets display. Stated rather than relied upon:
   adding a display to the rule above would otherwise silently reveal both. */
.rm-mhero__h1[hidden]{ display:none; }
/* The accent is brass-on-photo, so it is a clipped gradient rather than flat
   fill. background-clip:text has no AA contrast ratio to fail, but the
   gradient still runs light-to-mid brass so it reads against the scrim. */
/* The brass accent inside a hero headline. rmcre_accent() turns *asterisks*
   into <em>, so this styles that - it is not a separate rotating element any
   more, because every slide now writes its own complete headline. */
.rm-mhero__h1 em{
  font-style:italic;
  background:linear-gradient(120deg,#F7EBCB,#C9A968 44%,#9A7736);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* If the gradient is unsupported the text would vanish, so fall back to a
   flat pale brass that clears AA on the scrim. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .rm-mhero__h1 em{ color:var(--rm-brass-pale); background:none; }
}
.rm-mhero__blurb{
  font-size:clamp(16.5px,1.45vw,19px); line-height:1.62;
  color:rgba(255,255,255,.84); max-width:46em; margin:0; text-wrap:pretty;
}
.rm-mhero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(26px,3vw,36px); }

/* Slider furniture, pinned to the bottom of the hero above a hairline.
   Right-aligned: the copy owns the left, and controls that sat under the
   buttons read as more content rather than as navigation. */
.rm-mhero__foot{
  display:flex; align-items:center; justify-content:flex-end; gap:28px;
  flex-wrap:wrap; margin-top:auto; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.2);
}
.rm-mhero__nav{ display:flex; align-items:center; gap:18px; }
.rm-mhero__dots{ display:flex; gap:8px; align-items:center; }
.rm-mhero__dot{
  height:4px; width:12px; padding:0; border:0; position:relative;
  border-radius:var(--rm-r-pill); background:rgba(255,255,255,.42);
  cursor:pointer; transition:width .3s ease, background .3s ease;
}
/* A 12x4 target is too small to hit, so pad it out invisibly. */
.rm-mhero__dot::after{ content:""; position:absolute; inset:-14px -6px; }
.rm-mhero__dot:hover{ background:rgba(255,255,255,.7); }
.rm-mhero__dot.is-active{ width:34px; background:var(--rm-brass-lt); }
.rm-mhero__dot:focus-visible{ outline:2px solid var(--rm-brass-dark); outline-offset:6px; }

.rm-mhero__arrows{ display:flex; gap:8px; }
.rm-mhero__arrow{
  width:46px; height:46px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--rm-white); font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, border-color .18s;
}
.rm-mhero__arrow:hover{ background:rgba(255,255,255,.2); border-color:var(--rm-white); }
.rm-mhero__arrow[disabled]{ opacity:.4; cursor:default; }

@media (max-width:900px){
  .rm-mhero__inner{
    padding-block:clamp(40px, calc(26vw - var(--rm-header)), 50px) 30px;
    min-height:clamp(540px,112vw,640px);
    justify-content:flex-start;
  }
  .rm-mhero__actions > .rm-btn{ flex:1 1 100%; }
  .rm-mhero__foot{ justify-content:center; padding-bottom:6px; }
  .rm-mhero__dots{ display:none; }
}

/* Transform-only. If the timer stalls, text stays readable. */
@keyframes rmPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes rmHeroWord{ from{ transform:translateY(18px); } to{ transform:none; } }
@keyframes rmHeroLine{ from{ transform:translateY(7px); } to{ transform:none; } }
/* Ken Burns.

   The scale values look odd until you know what they are compensating for.
   A transform-animated element is promoted to its own compositor layer and
   rasterised once; the GPU then scales that bitmap every frame. Any frame
   painted above 1.0 is therefore an enlarged bitmap, not a re-rendered image,
   and it goes soft no matter how large the source photograph is. The old
   1.03 -> 1.12 pair meant the hero was never once painted at its own raster
   resolution.

   So the image is laid out at 112% instead (see .rm-mhero__layer img) and the
   animation runs 1.03/1.12 -> 1.12/1.12. Identical movement on screen, but the
   top of the range is now 1.0: every frame is a reduction of the bitmap rather
   than an enlargement of it.

   It also makes sizes="112vw" on the img literally true. srcset is chosen from
   the layout box and ignores transforms, so at 100% the browser was picking a
   source for a 100vw box that then got stretched across 112vw. */
@keyframes rmHeroZoom{ from{ transform:scale(.9196); } to{ transform:scale(1); } }
.rm-mhero__layer.is-active img{ animation:rmHeroZoom 14s ease-out alternate infinite; }
.rm-mhero__h1.is-in{ animation:rmHeroWord .6s var(--rm-ease); }
.rm-mhero__blurb.is-in{ animation:rmHeroLine .6s .08s ease; }

/* Stat row */
.rm-stats{
  display:flex; gap:36px; flex-wrap:wrap;
  border-top:1px solid var(--rm-w18); margin-top:24px; padding-top:22px;
}
.rm-stat__n{ font-family:var(--rm-display); font-size:28px; line-height:1.1; color:var(--rm-white); }
.rm-stat__label{
  display:block; font-family:var(--rm-mono); font-size:15px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--rm-w60); margin-top:4px;
}
/* Wide variant used on About */
.rm-stats--grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
  border-top:1px solid var(--rm-w20); gap:0; margin:0; padding:0;
}
.rm-stats--grid .rm-stat{ padding:28px 22px 28px 0; border-bottom:1px solid var(--rm-w20); }
.rm-stats--grid .rm-stat__n{ font-size:40px; line-height:1; }
.rm-stats--grid .rm-stat__label{ font-size:15px; letter-spacing:.11em; color:var(--rm-w66); margin-top:10px; }

/* --------------------------------------------------------------------------
   Grids - fixed column counts, never auto-fit.
   A one-result grid shows one card at card width.
   -------------------------------------------------------------------------- */

/* Real gaps. Two hairline cards whose borders touch reads as a defect, so the
   1px seam the v1 grid used is gone; 20px is the design's standard gutter. */
.rm-grid{ display:grid; gap:20px; }
.rm-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.rm-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.rm-grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.rm-grid--gap-sm{ gap:18px; }
.rm-grid--gap{ gap:28px; }

@media (max-width:1000px){
  .rm-grid--3,
  .rm-grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:660px){
  .rm-grid--2,
  .rm-grid--3,
  .rm-grid--4{ grid-template-columns:minmax(0,1fr); }
}

/* Card counts per breakpoint, enforced here rather than in the query or in JS.
   The template asks for the desktop maximum and CSS hides the overflow, so the
   visible count and the column count can never disagree and leave a short row.
   Listings 6/4/3, news 3/2 - the numbers are from the design's own rules. */
.rm-grid--cap-listings > *:nth-child(n+7){ display:none; }
@media (max-width:1000px){ .rm-grid--cap-listings > *:nth-child(n+5){ display:none; } }
@media (max-width:900px){  .rm-grid--cap-listings > *:nth-child(n+4){ display:none; } }
.rm-grid--cap-news > *:nth-child(n+4){ display:none; }
@media (max-width:1000px){ .rm-grid--cap-news > *:nth-child(n+3){ display:none; } }

/* Two-column content/sidebar */
.rm-split{
  display:grid; grid-template-columns:minmax(0,1.9fr) minmax(250px,1fr);
  gap:64px; align-items:start;
}
.rm-split--even{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:56px; align-items:start; }
.rm-split--wide-gap{ gap:64px; }
.rm-split--center{ align-items:center; }
@media (max-width:900px){
  .rm-split,
  .rm-split--even{ grid-template-columns:minmax(0,1fr); gap:48px; }
}

.rm-sticky{ position:sticky; top:calc(var(--rm-sticky) + var(--rm-bar)); }
@media (max-width:900px){ .rm-sticky{ position:static; } }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

/* Rounded, softly shadowed, with a real gap between neighbours. The v1
   hairline-and-1px-seam card was rejected: two touching borders read as a
   defect. Gaps live on the grid, so a card never relies on its neighbour. */
.rm-card{
  background:var(--rm-white); border:1px solid var(--rm-hair);
  border-radius:var(--rm-r-card); box-shadow:var(--rm-sh-card);
  overflow:hidden; display:flex; flex-direction:column; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.rm-card:hover{ border-color:var(--rm-brass); color:inherit; box-shadow:var(--rm-sh-lift); }

/* Feature card: a 1px gradient edge wrapping a slightly tighter inner card.
   The wrapper carries no padding of its own beyond that 1px, so the inner
   radius must stay 3px under the outer or the corner shows a light seam. */
.rm-card--edge{
  border:none; border-radius:var(--rm-r-panel); padding:1px;
  background:var(--rm-edge); box-shadow:none; overflow:visible;
}
a.rm-card--edge:hover{ border:none; box-shadow:none; }
.rm-card--edge > .rm-card__inner{
  border-radius:var(--rm-r-inner); background:var(--rm-white);
  box-shadow:var(--rm-sh-lift); overflow:hidden;
  height:100%; display:flex; flex-direction:column;
}

.rm-card__media{ position:relative; aspect-ratio:4/3; background:var(--rm-plate); overflow:hidden; }
.rm-card__media img{ width:100%; height:100%; object-fit:cover; }
.rm-card__media--wide{ aspect-ratio:16/10; }
/* Listing media is a fixed band rather than a ratio, so a row of cards keeps
   its foot rules on one line whatever the photo's shape. */
.rm-card__media--band{ aspect-ratio:auto; height:clamp(190px,20vw,222px); }
.rm-card__media--news{ aspect-ratio:auto; height:180px; }

/* Corner tag, inset 12-14px. Never flush to a rounded corner. */
.rm-card__badge{
  position:absolute; top:14px; left:14px; z-index:3;
  border-radius:var(--rm-r-tag); padding:7px 13px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border:1px solid rgba(173,138,78,.42); color:var(--rm-brass-light);
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  box-shadow:0 4px 12px -4px rgba(6,32,46,.3); pointer-events:none;
}

.rm-card__body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.rm-card__eyebrow{
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--rm-brass-light); margin-bottom:11px;
}
.rm-card__title{
  font-family:var(--rm-display); font-weight:500; font-size:20px; line-height:1.18;
  letter-spacing:-.025em; color:var(--rm-blue); margin-bottom:12px; text-wrap:pretty;
}
.rm-card__title--sm{ font-size:19px; line-height:1.22; letter-spacing:-.022em; }
.rm-card__price{
  font-family:var(--rm-display); font-size:21px; letter-spacing:-.02em;
  color:var(--rm-blue); margin-bottom:4px;
}
.rm-card__types{ font-size:var(--rm-p-xs); color:var(--rm-muted); margin-bottom:14px; }
/* Four lines, whatever the column width. The word limit in rmcre_excerpt()
   gets close, but a narrow card can still wrap 22 words onto six lines, and
   the cards in a row have to agree with each other. Clamping here is what
   makes the grid line up; the word limit stops a 400-word excerpt being sent
   to the browser only to be hidden. */
.rm-card__excerpt{
  font-size:15px; color:var(--rm-muted); line-height:1.56;
  margin-bottom:22px; text-wrap:pretty;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:4; line-clamp:4; overflow:hidden;
}
.rm-card__spacer{ flex:1; }
.rm-card__foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  border-top:1px solid var(--rm-divider); padding-top:17px;
}
.rm-card__foot--end{ justify-content:flex-end; }
.rm-card__foot-k{ font-family:var(--rm-mono); font-size:15px; color:var(--rm-muted); }
/* Inside the foot the price sits on the baseline beside the area, so it drops
   the block margin it carries when it is its own line in the grid card. */
.rm-card__foot .rm-card__price{ margin-bottom:0; }
.rm-card__more{
  font-family:var(--rm-mono); font-size:15px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; color:var(--rm-brass-light); white-space:nowrap;
}
/* --------------------------------------------------------------------------

/* Corner badge over card media */
/* Inset 12px, never flush: a flush tag on an 18px corner shows a gap. */
.rm-badge{
  position:absolute; top:12px; left:12px; z-index:3;
  border-radius:var(--rm-r-tag);
  background:var(--rm-blue); color:var(--rm-white);
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 11px; pointer-events:none;
}
.rm-badge--brass{ background:var(--rm-brass); color:var(--rm-on-brass); font-weight:500; }

/* Broker card */
.rm-broker-card{
  background:var(--rm-white); border:1px solid var(--rm-hair);
  border-radius:var(--rm-r-card); box-shadow:var(--rm-sh-card); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.rm-broker-card:hover{
  border-color:var(--rm-brass);
  box-shadow:var(--rm-sh-lift);
  transform:translateY(-3px);
}
/* The town badge sits at the foot of the photograph, not the top.

   It was top-left, which was fine while it was 10px type. The 15px minimum
   RMCRE asked for grew it to 165x35 - about a sixth of the frame - and in a
   head-and-shoulders portrait that is exactly where the face is. Nobody is
   photographed with their chin in the bottom-left corner, so the foot of the
   frame is the one place a badge of any size stays clear.

   No object-position to go with it, on purpose: rmcre-portrait is a hard crop
   at this box's own ratio, so cover() has nothing left to crop and the property
   would do nothing. If the crop anchor ever needs moving, that belongs in
   add_image_size(). */
.rm-broker-card__media{ position:relative; aspect-ratio:4/3.4; background:var(--rm-plate); overflow:hidden; }
.rm-broker-card__media img{ width:100%; height:100%; object-fit:cover; }
.rm-broker-card__media .rm-badge{ top:auto; bottom:12px; }
.rm-broker-card__body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.rm-broker-card__name{
  font-family:var(--rm-display); font-weight:500; font-size:21px; line-height:1.22;
  letter-spacing:-.01em; color:var(--rm-blue); margin-bottom:6px; text-wrap:pretty;
}
.rm-broker-card__role{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.04em;
  color:var(--rm-brass-light); margin-bottom:12px;
}
.rm-broker-card__firm{ font-size:var(--rm-p-md); font-weight:500; color:var(--rm-ink); }
.rm-broker-card__city{ font-size:var(--rm-p-sm); color:var(--rm-muted); margin-bottom:16px; }
.rm-broker-card__bio{
  font-size:var(--rm-p-sm); color:var(--rm-muted); line-height:1.55;
  flex:1; margin-bottom:20px; text-wrap:pretty;
}
.rm-broker-card__profile{ justify-content:space-between; margin-bottom:10px; width:100%; }

/* Call/email pair. The two buttons match each other and keep an 8px gap;
   welding them with a shared border was rejected during design. */
.rm-duo{ display:flex; gap:8px; }
.rm-duo > *{ flex:1; }

/* Logo box: fixed height, contained not cropped, so any aspect ratio fits.
   The empty state stays visible on purpose - it is how the client sees which
   affiliates have not supplied a file yet. */
.rm-affiliate__logo{
  height:72px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:flex-start;
}
.rm-affiliate__logo img{
  max-height:100%; max-width:180px; width:auto; height:auto; object-fit:contain;
}
.rm-affiliate__logo.is-empty{
  border:1px dashed var(--rm-field); border-radius:var(--rm-r-field);
  background:var(--rm-fill);
}
/* Affiliate card */
.rm-affiliate{ padding:30px 28px 28px; min-height:250px; }
.rm-affiliate__name{
  font-family:var(--rm-display); font-weight:500; font-size:21px; line-height:1.2;
  letter-spacing:-.01em; margin-bottom:8px; text-wrap:pretty;
}
.rm-affiliate__contact{ font-size:var(--rm-p-sm); color:var(--rm-ink); margin-bottom:16px; }
.rm-affiliate__blurb{
  font-size:var(--rm-p-sm); color:var(--rm-muted); line-height:1.55;
  flex:1; margin-bottom:20px; text-wrap:pretty;
}
.rm-affiliate__foot{
  display:flex; flex-direction:column; gap:8px;
  padding-top:16px; border-top:1px solid var(--rm-divider);
}
.rm-affiliate__foot a{ word-break:break-word; font-size:var(--rm-p-xs); }
.rm-affiliate__tel{ font-family:var(--rm-mono); font-size:15px; }

/* Service card */
.rm-service{
  padding:34px 30px 30px; min-height:270px;
  display:flex; flex-direction:column; color:inherit;
}
.rm-service__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:24px;
}
.rm-service__num{
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.14em; color:var(--rm-brass-light);
}
.rm-service__icon{ color:var(--rm-blue); display:flex; }
.rm-service__icon svg{ width:24px; height:24px; display:block; }
.rm-service__title{
  font-family:var(--rm-display); font-weight:500; font-size:23px; line-height:1.18;
  letter-spacing:-.01em; color:var(--rm-blue); margin-bottom:12px; text-wrap:pretty;
}
.rm-service__body{ font-size:var(--rm-p-md); color:var(--rm-muted); line-height:1.6; flex:1; text-wrap:pretty; }
.rm-service__action{
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--rm-brass-light);
  margin-top:22px; padding-top:16px; border-top:1px solid var(--rm-divider);
}

/* Numbered panel (About principles) */
.rm-principle{ padding:34px 30px 32px; min-height:250px; }
.rm-principle__num{
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.16em; color:var(--rm-brass-light); margin-bottom:24px;
}
.rm-principle__title{
  font-family:var(--rm-display); font-weight:500; font-size:21px; line-height:1.2;
  letter-spacing:-.01em; color:var(--rm-blue); margin-bottom:14px; text-wrap:pretty;
}
.rm-principle__body{ font-size:var(--rm-p-md); color:var(--rm-muted); line-height:1.6; flex:1; text-wrap:pretty; }

/* Board member card */
.rm-board{ padding:26px 24px 24px; display:flex; flex-direction:column; }
.rm-board__top{ display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; }
.rm-board__avatar{
  width:64px; height:64px; flex:none; background:var(--rm-off);
  overflow:hidden; border-radius:999px; position:relative;
}
.rm-board__avatar img{ width:100%; height:100%; object-fit:cover; }
.rm-board__role{
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--rm-brass-light); margin-bottom:7px;
}
.rm-board__name{
  font-family:var(--rm-display); font-weight:500; font-size:18px; line-height:1.22;
  letter-spacing:-.01em; color:var(--rm-blue); text-wrap:pretty;
}
.rm-board__firm{ font-size:var(--rm-p-sm); color:var(--rm-ink); margin-bottom:2px; }
.rm-board__city{ font-size:var(--rm-p-xs); color:var(--rm-muted); flex:1; }

/* Office card (contact page) */
.rm-office{ padding:24px 22px; }
.rm-office__region{
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--rm-brass-light); margin-bottom:14px;
}
.rm-office__city{
  font-family:var(--rm-display); font-weight:500; font-size:18px; line-height:1.22;
  letter-spacing:-.01em; color:var(--rm-blue); margin-bottom:12px;
}
.rm-office__name{ font-size:var(--rm-p-sm); color:var(--rm-ink); }
.rm-office__firm{ font-size:var(--rm-p-xs); color:var(--rm-muted); margin-bottom:12px; }
.rm-office__tel{ font-family:var(--rm-mono); font-size:15px; }

/* Route card (contact page) */
.rm-route{ padding:32px 28px 30px; }
.rm-route__icon{ color:var(--rm-blue); margin-bottom:18px; }
.rm-route__icon svg{ width:22px; height:22px; display:block; }
.rm-route__title{
  font-family:var(--rm-display); font-weight:500; font-size:19px; line-height:1.22;
  letter-spacing:-.01em; color:var(--rm-blue); margin-bottom:8px;
}
.rm-route__body{
  font-size:var(--rm-p-sm); color:var(--rm-muted); line-height:1.55;
  flex:1; margin-bottom:16px; text-wrap:pretty;
}
.rm-route__action{
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.06em; color:var(--rm-brass-light);
}

/* News featured card - image left, copy right */
.rm-feature{
  background:var(--rm-white); outline:1px solid var(--rm-hair);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); color:inherit;
}
.rm-feature__media{ position:relative; min-height:320px; background:var(--rm-off); }
.rm-feature__media img{ width:100%; height:100%; object-fit:cover; }
.rm-feature__body{ padding:44px 42px; display:flex; flex-direction:column; justify-content:center; }
.rm-feature__title{
  font-family:var(--rm-display); font-weight:500; font-size:clamp(26px,2.8vw,34px);
  line-height:1.16; letter-spacing:-.015em; color:var(--rm-blue);
  margin-bottom:16px; text-wrap:pretty;
}
.rm-feature__excerpt{
  font-size:var(--rm-p-lg); color:var(--rm-muted); line-height:1.6;
  margin-bottom:26px; max-width:34em; text-wrap:pretty;
}
.rm-feature__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:20px; border-top:1px solid var(--rm-divider);
}
@media (max-width:820px){
  .rm-feature{ grid-template-columns:minmax(0,1fr); }
  .rm-feature__media{ min-height:0; aspect-ratio:16/9; }
  .rm-feature__body{ padding:32px 28px; }
}

/* Post card meta line */
.rm-post-card__meta{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--rm-brass-light); margin-bottom:12px;
}

/* --------------------------------------------------------------------------
   Filters, sort, pagination
   -------------------------------------------------------------------------- */

.rm-toolbar{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap; margin-bottom:26px;
}
.rm-toolbar__count{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.04em;
  color:var(--rm-muted); margin-top:6px;
}
.rm-sort{ display:flex; align-items:center; gap:10px; }
.rm-sort__label{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rm-brass-light);
}
.rm-sort select{
  border-radius:var(--rm-r-field); border:1px solid var(--rm-hair);
  background:var(--rm-white); cursor:pointer;
  font-size:15px; color:var(--rm-ink); padding:11px 13px; outline:none;
}

/* Pill chips (type filters) */
.rm-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.rm-chip{
  font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.06em; padding:11px 20px; display:inline-block;
  border-radius:var(--rm-r-tag);
  background:var(--rm-white); border:1px solid var(--rm-field); color:var(--rm-body);
  transition:background .18s, border-color .18s, color .18s;
}
.rm-chip:hover{ border-color:var(--rm-brass); color:var(--rm-blue); }
.rm-chip.is-active{ background:var(--rm-blue); border-color:var(--rm-blue); color:var(--rm-white); }

.rm-pager{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap; margin-top:28px; padding-top:22px;
  border-top:1px solid var(--rm-divider);
}
.rm-pager__note{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.04em; color:var(--rm-muted);
}
.rm-pager__links{ display:flex; gap:8px; flex-wrap:wrap; }
.rm-pager__links .page-numbers{
  display:block; padding:11px 16px;
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.04em;
  border-radius:var(--rm-r-btn); border:1px solid var(--rm-field);
  background:var(--rm-white); color:var(--rm-blue); box-shadow:var(--rm-sh-btn);
}
.rm-pager__links a.page-numbers:hover{ background:var(--rm-off); }
.rm-pager__links .page-numbers.current{
  background:var(--rm-blue); border-color:var(--rm-blue); color:var(--rm-white);
}
.rm-pager__links .page-numbers.dots{ border-color:transparent; color:var(--rm-muted); }

.rm-empty{ padding:46px 0 0; text-align:center; }
.rm-empty p{ font-family:var(--rm-mono); font-size:15px; color:var(--rm-muted); }
.rm-empty a{ border-bottom:1px solid var(--rm-brass); }

/* --------------------------------------------------------------------------
   Panels, ledgers, key/value tables
   -------------------------------------------------------------------------- */

.rm-panel{
  border:1px solid var(--rm-hair); background:var(--rm-white);
  border-radius:var(--rm-r-panel); box-shadow:var(--rm-sh-card); overflow:hidden;
}
.rm-panel__head{ padding:24px 26px 20px; border-bottom:1px solid var(--rm-divider); }
.rm-panel__body{ padding:10px 26px 22px; }
.rm-panel__pad{ padding:clamp(26px,3vw,34px); }
.rm-panel--flush{ border-top:none; }

/* Feature panel: the same 1px gradient edge the feature cards use. This is the
   "Network at a glance" box on the homepage and About. */
.rm-panel--edge{
  border:none; border-radius:var(--rm-r-panel); padding:1px;
  background:var(--rm-edge); box-shadow:none; overflow:visible;
}
.rm-panel--edge > .rm-panel__inner{
  border-radius:var(--rm-r-inner); background:var(--rm-white);
  box-shadow:var(--rm-sh-lift); padding:clamp(26px,3vw,34px);
}

.rm-kv{
  display:flex; justify-content:space-between; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--rm-divider); font-size:var(--rm-p-sm);
}
.rm-kv:last-child{ border-bottom:none; }
.rm-kv__k{ color:var(--rm-muted); flex:none; }
.rm-kv__v{ color:var(--rm-ink); text-align:right; }
.rm-kv__v a{ word-break:break-word; }
.rm-kv--mono{ font-family:var(--rm-mono); font-size:var(--rm-p-xs); }
.rm-kv--mono .rm-kv__v{ color:var(--rm-brass-light); }
/* The glance rows set their value in the display face, not mono. */
.rm-kv--display{ align-items:baseline; }
.rm-kv--display .rm-kv__k{ font-size:15px; }
.rm-kv--display .rm-kv__v{
  font-family:var(--rm-display); font-size:17px; letter-spacing:-.015em; color:var(--rm-blue);
}
.rm-kv__k--mono{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--rm-muted);
}

/* Market ledger on the homepage coverage block.
   Glass tiles rather than ruled rows: each market is its own pill that frosts
   and lifts on hover, so the list reads as a set of objects rather than a
   table. Tiles carry their own margin because they are not grid-gapped - the
   column gap has to stay tight for two columns of town names. */
.rm-ledger{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0 12px; align-content:start;
}
.rm-ledger__row{
  position:relative; display:flex; flex-direction:column;
  border-radius:8px; padding:12px 16px; margin-bottom:8px; overflow:hidden;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  color:rgba(255,255,255,.9); cursor:pointer;
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  transition:transform .22s var(--rm-ease), background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.rm-ledger__row:hover{
  background:rgba(255,255,255,.14); border-color:rgba(201,169,104,.45); transform:translateY(-2px);
}
/* The approved design gives the selected market a brass-tinted, lifted tile,
   because on desktop it marks which broker the card beside it is showing.
   RMCRE asked for every tile to read identically instead, on every width, so
   the selected state carries no styling of its own.

   Consequence, deliberately accepted: nothing now indicates which market the
   broker card is displaying. Restoring it is this block plus the brass label
   below - see the design's marketRows.rowStyle for the original values. */
/* The picker fills the tile and carries no chrome of its own. */
.rm-ledger__pick{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  width:100%; text-align:left; background:none; border:0; padding:0;
  color:inherit; font:inherit; cursor:pointer;
}
.rm-ledger__town{ font-family:var(--rm-mono); font-size:15px; letter-spacing:.03em; }
.rm-ledger__broker{ font-size:15px; letter-spacing:.01em; color:rgba(255,255,255,.75); }
.rm-ledger__broker--open{ color:var(--rm-brass-paler); }

/* Below 1000px the broker card is hidden, so each tile grows its own link.
   Only the link text is clickable there - the row itself stops being a button,
   because a whole-row tap that selects an invisible pane does nothing. */
.rm-ledger__link{
  display:none; flex:none; white-space:nowrap;
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--rm-brass-dark); padding:4px 0 4px 16px;
}
.rm-ledger__link:hover{ color:var(--rm-white); }

.rm-coverage{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:56px; align-items:stretch;
}
.rm-coverage__panes{ display:flex; flex-direction:column; min-height:0; }

/* The pane sits inside its own gradient edge, like a feature card.
   flex:1 is what makes the card match the ledger height beside it: the
   coverage grid stretches this column, and without it the shell sizes to its
   own content and stops short - which reads as a broken layout, because the
   two halves of the section are meant to align. */
.rm-pane-shell{
  border-radius:10px; padding:1px; display:flex;
  flex:1 1 auto; min-height:0; max-height:100%;
  background:linear-gradient(180deg, rgba(201,169,104,.7), rgba(255,255,255,.18) 44%, rgba(255,255,255,.08));
}
.rm-pane-shell__inner{
  border-radius:9px; background:var(--rm-white);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.45);
  overflow:hidden; flex:1; min-height:0; display:flex; flex-direction:column;
}
.rm-pane{ background:var(--rm-white); flex:1; flex-direction:column; display:none; min-height:0; }
.rm-pane.is-active{ display:flex; }
.rm-pane__media{ position:relative; flex:1 1 auto; min-height:180px; background:var(--rm-plate); }
.rm-pane__media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.rm-pane__tag{
  position:absolute; top:16px; left:16px; z-index:3;
  border-radius:var(--rm-r-tag); padding:7px 14px;
  background:var(--rm-brass); color:var(--rm-on-brass);
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; pointer-events:none;
}
.rm-pane__body{ padding:26px; display:flex; flex-direction:column; flex:0 0 auto; }
.rm-pane__name{
  font-family:var(--rm-display); font-weight:500; font-size:24px; line-height:1.14;
  letter-spacing:-.03em; color:var(--rm-blue); margin-bottom:6px;
}
.rm-pane__role{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.04em;
  color:var(--rm-brass-light); margin-bottom:12px;
}
.rm-pane__firm{ font-size:15px; color:var(--rm-ink); margin-bottom:2px; }
.rm-pane__city{ font-size:15px; color:var(--rm-muted); margin-bottom:20px; }
/* Paired buttons match each other and keep a 10px gap - never welded. */
.rm-pane__actions{
  display:flex; gap:10px; border-top:1px solid var(--rm-divider);
  padding-top:18px; margin-bottom:10px;
}
.rm-pane__actions > .rm-btn{ flex:1; }
.rm-pane--open{ align-items:center; }
.rm-pane--open .rm-pane__body{ padding:36px 30px 34px; }

@media (max-width:1000px){
  .rm-coverage{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .rm-coverage__panes{ display:none; }
  .rm-ledger{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rm-ledger__row{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:12px; cursor:default;
  }
  .rm-ledger__pick{ cursor:default; pointer-events:none; }
  .rm-ledger__row:hover{ transform:none; }
  .rm-ledger__link{ display:inline-block; }
}
@media (max-width:760px){ .rm-ledger{ grid-template-columns:minmax(0,1fr); } }

/* Town index (internal linking block) */
.rm-townlist{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 24px; }
.rm-townlist a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:13px 12px 13px 0; border-bottom:1px solid var(--rm-divider);
  font-family:var(--rm-mono); font-size:15px; color:var(--rm-body);
}
.rm-townlist a:hover{ color:var(--rm-blue); }
.rm-townlist a.is-current{ color:var(--rm-blue); font-weight:500; }
.rm-townlist__arrow{ color:var(--rm-brass-light); font-size:15px; }
@media (max-width:900px){ .rm-townlist{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .rm-townlist{ grid-template-columns:minmax(0,1fr); } }

/* Numbered benefit list (affiliates) */
.rm-numlist__row{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--rm-divider); }
.rm-numlist__n{
  font-family:var(--rm-mono); font-size:15px; color:var(--rm-brass-light);
  flex:none; padding-top:2px;
}
.rm-numlist__t{ font-size:var(--rm-p-md); color:var(--rm-body); line-height:1.5; text-wrap:pretty; }

/* Affiliation ledger (about) */
.rm-affil__row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:22px 26px; border-bottom:1px solid var(--rm-divider);
}
.rm-affil__row:last-child{ border-bottom:none; }
.rm-affil__name{ font-size:var(--rm-p-md); font-weight:500; color:var(--rm-ink); }
.rm-affil__note{ font-size:var(--rm-p-xs); color:var(--rm-muted); }
.rm-affil__tag{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rm-brass-light); white-space:nowrap;
}

/* --------------------------------------------------------------------------
   CTA bands + newsletter
   -------------------------------------------------------------------------- */

.rm-cta{
  background:var(--rm-deep); color:var(--rm-white);
  border-radius:10px; box-shadow:var(--rm-sh-deep); overflow:hidden;
  padding:clamp(40px,5.5vw,66px);
  display:grid;
  /* min() is what stops the floor becoming an overflow. A bare minmax(300px,1fr)
     keeps its 300px minimum even when the card is narrower than that, so on a
     360px phone the column stays 300 inside a 264px content box and every child
     - copy, input, button - spills past the right padding while the left holds. */
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr));
  gap:44px; align-items:center;
}
.rm-cta--blue{ background:var(--rm-blue); padding:clamp(40px,5.5vw,66px); }
.rm-cta--outline{
  background:var(--rm-white); color:inherit;
  border:1px solid var(--rm-hair); box-shadow:var(--rm-sh-card);
  padding:clamp(40px,5vw,56px);
}
.rm-cta--center{ display:block; text-align:center; padding:80px 32px; }
.rm-cta__actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.rm-cta__actions--stack{ flex-direction:column; align-items:flex-start; justify-content:center; }
.rm-cta__body{ font-size:var(--rm-p-lg); color:var(--rm-w80); max-width:34em; text-wrap:pretty; }
.rm-cta--outline .rm-cta__body{ color:var(--rm-muted); font-size:var(--rm-p-lg); }
.rm-cta--center .rm-cta__body{ margin-inline:auto; max-width:520px; }
.rm-cta--center .rm-eyebrow{ justify-content:center; }
.rm-cta--center .rm-eyebrow::before{ display:none; }
@media (max-width:700px){
  .rm-cta,
  .rm-cta--blue,
  .rm-cta--outline{ padding:40px 28px; gap:32px; }
  .rm-cta__actions{ justify-content:flex-start; }
}

/* Inline email capture */
.rm-subscribe{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
.rm-subscribe input[type="email"]{
  flex:1; min-width:210px; background:var(--rm-white);
  border-radius:8px; border:1px solid var(--rm-white); color:var(--rm-ink);
  font-size:15px; padding:16px 18px; outline:none;
}
.rm-subscribe button{ white-space:nowrap; padding:16px 28px; border-radius:8px; }
/* Stacked full-width on a phone: a 210px input beside a button leaves
   neither usable at 360px. */
@media (max-width:900px){
  .rm-subscribe{ flex-direction:column; }
  .rm-subscribe input[type="email"],
  .rm-subscribe button{ width:100%; }
}
.rm-subscribe--center{ justify-content:center; max-width:520px; margin-inline:auto; }


/* Copy sitting directly above a form needs air between the two. In the design
   the newsletter puts them side by side so the question never arises; every
   other form on the site follows a paragraph, and without this they touch. */
.rm-cta__body + .rm-subscribe,
.rm-note + .rm-form,
.rm-note + .rm-subscribe,
.rm-prose + .rm-form,
p + .rm-form,
p + .rm-subscribe,
p + .rm-signup__form{ margin-top:24px; }

/* Stacked newsletter - the grid gap covers the two-column case, but once it
   wraps to one column the form sits under the copy and needs the same air. */
@media (max-width:900px){
  .rm-cta .rm-subscribe{ margin-top:8px; }
}

.rm-signup{
  background:var(--rm-white); border-radius:var(--rm-r-panel);
  box-shadow:var(--rm-sh-lift); padding:34px 32px 32px;
}
.rm-signup__form{ display:flex; flex-direction:column; gap:14px; }
.rm-signup__pair{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.rm-signup__fine{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.03em;
  color:var(--rm-muted); margin-top:2px;
}
@media (max-width:420px){ .rm-signup__pair{ grid-template-columns:minmax(0,1fr); } }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.rm-form{ display:flex; flex-direction:column; gap:26px; }
.rm-form__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px; }
@media (max-width:620px){ .rm-form__grid{ grid-template-columns:minmax(0,1fr); } }

.rm-field__label{
  display:block; font-family:var(--rm-mono); font-weight:500; font-size:15px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--rm-brass-light); margin-bottom:10px;
}
.rm-field__label .rm-optional{ text-transform:none; letter-spacing:0; color:var(--rm-muted); }
.rm-input,
.rm-select,
.rm-textarea{
  width:100%; border-radius:8px; border:1px solid var(--rm-field);
  background:var(--rm-fill); font-size:15px; color:var(--rm-ink);
  padding:14px 16px; outline:none;
}
.rm-select{ cursor:pointer; }
.rm-textarea{ resize:vertical; min-height:130px; font-family:inherit; }
.rm-input:focus,
.rm-select:focus,
.rm-textarea:focus{ border-color:var(--rm-blue); }
.rm-input::placeholder,
.rm-textarea::placeholder{ color:#8795A0; }

/* Underlined variant used in sidebars and the newsletter panel */
.rm-input--line,
.rm-select--line,
.rm-textarea--line{
  border:0; border-bottom:1px solid var(--rm-divider); background:transparent;
  border-radius:0; padding:10px 2px; font-size:15px;
}
.rm-textarea--line{ min-height:0; }

/* File input: the field keeps the same box as every other input, and only the
   browser's own button is restyled. A fully custom control would mean hiding
   the real input behind a label, which costs the keyboard and screen-reader
   behaviour the native one already has. */
.rm-file{
  width:100%; border-radius:8px; border:1px solid var(--rm-field);
  background:var(--rm-fill); font-size:15px; color:var(--rm-ink);
  padding:11px 14px; outline:none; cursor:pointer;
}
.rm-file:focus{ border-color:var(--rm-blue); }
.rm-file::file-selector-button{
  margin-right:14px; padding:9px 16px; cursor:pointer;
  border:1px solid var(--rm-field); border-radius:var(--rm-r-btn);
  background:var(--rm-white); color:var(--rm-blue);
  font-family:var(--rm-mono); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; transition:border-color .18s, color .18s;
}
.rm-file:hover::file-selector-button{ border-color:var(--rm-brass); }

.rm-form__note{ font-size:var(--rm-p-sm); color:var(--rm-muted); }
.rm-notice{
  padding:15px 20px; border-radius:var(--rm-r-field);
  border:1px solid var(--rm-hair); background:var(--rm-off);
  font-size:var(--rm-p-md); margin-bottom:22px;
}
.rm-notice--ok{ border-color:var(--rm-blue); background:var(--rm-white); color:var(--rm-blue); }
.rm-notice--err{ border-color:#B4432F; background:#FDF5F3; color:#8E3423; }
.rm-field__error{ display:block; font-size:15px; color:#8E3423; margin-top:6px; }
.rm-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Mini form in a sidebar */
.rm-form--mini{ gap:12px; }
.rm-form--mini .rm-btn{ margin-top:6px; }

/* --------------------------------------------------------------------------
   Article prose
   -------------------------------------------------------------------------- */

.rm-prose p{ font-size:var(--rm-p-xl); line-height:1.72; color:var(--rm-body); margin-bottom:22px; }

/* Prose inside a side panel is a note, not an article.

   The article size above (19.5px at 1.72) is meant for a full-width column. In
   a 390px aside it leaves about 38 characters to a line with the lines a long
   way apart, which reads as something broken rather than something generous -
   which is exactly how RMCRE reported it. --rm-p-md is the scale's own token
   for a panel note, so that is what this uses. */
.rm-panel .rm-prose p{ font-size:var(--rm-p-md); line-height:1.62; margin-bottom:14px; }
.rm-panel .rm-prose p:last-child{ margin-bottom:0; }
.rm-prose p a{ border-bottom:1px solid var(--rm-brass-lt); }
.rm-prose h2,
.rm-prose h3{ scroll-margin-top:var(--rm-anchor); }
.rm-prose h2{
  font-family:var(--rm-display); font-weight:500; font-size:30px; line-height:1.16;
  letter-spacing:-.015em; color:var(--rm-blue); margin:48px 0 18px;
}
.rm-prose h3{
  font-family:var(--rm-display); font-weight:500; font-size:22px; line-height:1.2;
  letter-spacing:-.01em; color:var(--rm-blue); margin:36px 0 14px;
}
.rm-prose ul{ list-style:none; margin:0 0 26px; padding:0; }
.rm-prose ul li{
  font-size:var(--rm-p-xl); line-height:1.6; color:var(--rm-body);
  padding:11px 0 11px 26px; border-bottom:1px solid var(--rm-divider); position:relative;
}
.rm-prose ul li::before{
  content:""; position:absolute; left:0; top:22px;
  width:10px; height:1px; background:var(--rm-brass);
}
.rm-prose ol{ margin:0 0 26px; padding-left:22px; }
.rm-prose ol li{ font-size:var(--rm-p-xl); line-height:1.6; color:var(--rm-body); padding-left:6px; }
.rm-prose blockquote{
  border-left:2px solid var(--rm-brass); padding:6px 0 6px 24px;
  margin:0 0 26px; font-family:var(--rm-display); font-size:21px;
  line-height:1.45; color:var(--rm-blue);
}
.rm-prose img,
.rm-prose figure{ margin:0 0 26px; }
.rm-prose figcaption{
  font-family:var(--rm-mono); font-size:15px; color:var(--rm-muted); margin-top:10px;
}
.rm-prose table{ margin:0 0 26px; font-size:15px; }
.rm-prose th,
.rm-prose td{ padding:12px 14px; border:1px solid var(--rm-divider); text-align:left; }
.rm-prose th{ font-family:var(--rm-mono); font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.rm-prose > *:last-child{ margin-bottom:0; }

/* Service detail body runs one notch smaller than a news article. */
.rm-prose--service p{ font-size:var(--rm-p-lg); }
.rm-prose--service h2{ font-size:28px; margin:44px 0 16px; }
.rm-prose--service h3{ font-size:21px; margin:32px 0 12px; }
.rm-prose--service ul li{ font-size:var(--rm-p-lg); padding:12px 0 12px 26px; }
.rm-prose--service ul li::before{ top:23px; }

/* Share row */
.rm-share{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:26px 0; border-block:1px solid var(--rm-divider); margin-top:44px;
}
.rm-share__btns{ display:flex; gap:8px; }
.rm-share__btn{
  width:40px; height:40px; border-radius:var(--rm-r-sq);
  border:1px solid var(--rm-hair); background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--rm-blue);
  transition:background .18s, color .18s, border-color .18s;
}
.rm-share__btn:hover{ background:var(--rm-blue); color:var(--rm-white); border-color:var(--rm-blue); }
.rm-share__btn svg{ width:15px; height:15px; }
.rm-share__status{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.04em; color:var(--rm-muted);
}

/* --------------------------------------------------------------------------
   Single listing
   -------------------------------------------------------------------------- */

/* Gallery: one large frame with a scrolling thumbnail rail beside it.
   The rail is a fixed 168px column on desktop and turns into a horizontal
   strip below 860px, where a vertical rail would either crush the main image
   or run off the bottom of the screen. */
.rm-gal{
  display:grid; grid-template-columns:minmax(0,1fr) 168px;
  gap:10px; height:clamp(360px,46vw,560px);
}
.rm-gal__main{
  position:relative; border-radius:10px; overflow:hidden; background:var(--rm-divider);
}
.rm-gal__main img{ width:100%; height:100%; object-fit:cover; }
.rm-gal__tags{
  position:absolute; z-index:4; top:14px; left:14px;
  display:flex; gap:7px; flex-wrap:wrap; pointer-events:none;
}
.rm-gal__arrow{
  position:absolute; z-index:4; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:var(--rm-r-pill); cursor:pointer;
  border:1px solid rgba(255,255,255,.4); background:rgba(6,32,46,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--rm-white); font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, border-color .18s;
}
.rm-gal__arrow:hover{ background:rgba(6,32,46,.88); border-color:var(--rm-white); }
.rm-gal__arrow--prev{ left:14px; }
.rm-gal__arrow--next{ right:14px; }
.rm-gal__count{
  position:absolute; z-index:4; bottom:14px; right:14px;
  border-radius:var(--rm-r-tag); padding:8px 15px;
  background:rgba(6,32,46,.72); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.06em; color:var(--rm-white); pointer-events:none;
}
.rm-gal__rail{
  display:flex; flex-direction:column; gap:10px;
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:2px;
}
.rm-gal__thumb{
  flex:0 0 auto; height:110px; padding:0; cursor:pointer; position:relative;
  border-radius:8px; overflow:hidden; border:1px solid var(--rm-hair);
  background:var(--rm-divider); transition:border-color .18s;
}
.rm-gal__thumb img{ width:100%; height:100%; object-fit:cover; }
.rm-gal__thumb:hover{ border-color:var(--rm-brass); }
.rm-gal__thumb.is-active{ border-color:var(--rm-brass); box-shadow:0 0 0 2px rgba(173,138,78,.3); }
/* "+N more" sits on the last visible thumbnail. */
.rm-gal__more{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(6,32,46,.62); backdrop-filter:blur(4px);
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.06em; color:var(--rm-white);
}
@media (max-width:860px){
  .rm-gal{ grid-template-columns:minmax(0,1fr); height:auto; }
  .rm-gal__main{ aspect-ratio:16/10; }
  .rm-gal__rail{ flex-direction:row; overflow-x:auto; overflow-y:hidden; }
  .rm-gal__thumb{ height:84px; width:118px; }
}

/* Four fact tiles under the H1. Two rows of two on a phone. */
.rm-facts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.rm-fact{
  border-radius:10px; border:1px solid var(--rm-hair); background:var(--rm-white);
  box-shadow:0 14px 34px -26px rgba(6,32,46,.3); padding:18px 18px 16px;
}
.rm-fact__k{
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--rm-brass-light); margin-bottom:9px;
}
.rm-fact__v{
  font-family:var(--rm-display); font-size:clamp(19px,1.9vw,23px);
  line-height:1.12; letter-spacing:-.025em; color:var(--rm-blue);
}
@media (max-width:860px){ .rm-facts{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* Spec table: two columns of key/value rows that collapse to one. */
.rm-spec{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 36px; }
@media (max-width:620px){ .rm-spec{ grid-template-columns:minmax(0,1fr); } }

/* Content beside a sticky sidebar. */
.rm-pp-split{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);
  gap:clamp(28px,3.4vw,52px); align-items:start;
}
@media (max-width:980px){ .rm-pp-split{ grid-template-columns:minmax(0,1fr); } }

.rm-listing__price{
  font-family:var(--rm-display); font-size:30px; letter-spacing:-.025em;
  color:var(--rm-blue); line-height:1.1;
}
.rm-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.rm-tag{
  font-family:var(--rm-mono); font-size:15px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; padding:7px 13px; border-radius:var(--rm-r-tag);
  border:1px solid var(--rm-hair); color:var(--rm-body); background:var(--rm-white);
}
.rm-tag--status{ background:var(--rm-blue); border-color:var(--rm-blue); color:var(--rm-white); }
/* On photography the tag needs the glass treatment to stay legible. */
.rm-tag--glass{
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-color:rgba(173,138,78,.42); color:var(--rm-brass-light);
  box-shadow:0 4px 12px -4px rgba(6,32,46,.3);
}
.rm-files{ display:flex; flex-direction:column; }
.rm-files a{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--rm-divider); font-size:15px;
}
.rm-files a:last-child{ border-bottom:none; }
.rm-files__size{ font-family:var(--rm-mono); font-size:15px; color:var(--rm-muted); }

/* Feature list under a listing - two columns of short phrases. */
.rm-features{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0 36px; list-style:none; margin:0; padding:0;
}
.rm-features li{
  position:relative; padding:11px 0 11px 22px;
  border-bottom:1px solid var(--rm-divider);
  font-size:var(--rm-p-sm); color:var(--rm-body);
}
.rm-features li::before{
  content:""; position:absolute; left:0; top:19px;
  width:9px; height:1px; background:var(--rm-brass);
}
@media (max-width:620px){ .rm-features{ grid-template-columns:minmax(0,1fr); } }

/* Listing sidebar */
.rm-listing-aside{ margin-bottom:18px; }
.rm-aside-broker{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--rm-divider);
}
.rm-aside-broker__top{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.rm-aside-broker__shot{
  width:52px; height:52px; border-radius:var(--rm-r-pill);
  overflow:hidden; flex:none; background:var(--rm-plate);
}
.rm-aside-broker__shot img{ width:100%; height:100%; object-fit:cover; }
.rm-aside-broker__name{
  display:block; font-family:var(--rm-display); font-weight:500; font-size:18px;
  line-height:1.2; letter-spacing:-.02em; color:var(--rm-blue);
}
.rm-aside-broker__firm{ display:block; font-size:15px; color:var(--rm-muted); margin-top:2px; }
.rm-aside-broker__actions{ display:flex; gap:8px; margin-top:16px; }
.rm-aside-broker__actions > .rm-btn{ flex:1; }
.rm-listing-aside .rm-form{ margin-top:20px; padding-top:20px; border-top:1px solid var(--rm-divider); }

/* --------------------------------------------------------------------------
   Broker profile
   -------------------------------------------------------------------------- */

.rm-bp__hero{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:56px; align-items:center; position:relative; z-index:5;
  padding-block:clamp(140px,14vw,190px) clamp(52px,6vw,72px);
}
/* Glass meta strip rather than a pair of hairlines. */
.rm-bp__rule{
  display:flex; gap:0; flex-wrap:nowrap; margin-bottom:32px;
  border-radius:var(--rm-r-card); padding:2px 20px;
  border:1px solid var(--rm-glass-edge); background:rgba(255,255,255,.08);
  backdrop-filter:var(--rm-glass-blur); -webkit-backdrop-filter:var(--rm-glass-blur);
  box-shadow:var(--rm-glass-inset);
}
.rm-bp__rule > div{ padding:16px 20px 16px 0; min-width:0; flex:1 1 auto; }
.rm-bp__rule > div + div{ padding:16px 0 16px 20px; border-left:1px solid var(--rm-w24); }
.rm-bp__rule dt{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--rm-w60); margin-bottom:6px;
}
.rm-bp__rule dd{ font-size:15.5px; color:var(--rm-white); margin:0; }
.rm-bp__role{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.05em;
  color:var(--rm-brass-pale); margin-bottom:24px;
}
.rm-bp__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Circle on desktop, square on mobile. */
.rm-bp__frame{
  border:1px solid var(--rm-w24); padding:12px;
  border-radius:var(--rm-r-pill); max-width:380px; width:100%;
}
.rm-bp__crop{
  aspect-ratio:1/1; background:var(--rm-deep);
  border-radius:var(--rm-r-pill); overflow:hidden; position:relative;
}
.rm-bp__crop img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:940px){
  /* Square on mobile, per the client decision - but a card radius, not a
     hard corner, since nothing else on the page has one. */
  .rm-bp__frame{ border-radius:var(--rm-r-panel); }
  .rm-bp__crop{ border-radius:var(--rm-r-card); }
}


/* Broker social row. Square, hairline, same language as the share buttons. */
.rm-socials{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--rm-divider);
}
.rm-socials__link{
  width:38px; height:38px; flex:none;
  border:1px solid var(--rm-hair); color:var(--rm-blue);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, color .18s, border-color .18s;
}
.rm-socials__link:hover{
  background:var(--rm-blue); color:var(--rm-white); border-color:var(--rm-blue);
}
.rm-socials__link svg{ width:15px; height:15px; display:block; }

/* --------------------------------------------------------------------------
   Property search bar (homepage)
   -------------------------------------------------------------------------- */

/* The search panel floats over the bottom of the hero rather than sitting in
   the white section below it, so it is glass on photography: near-opaque white
   with a blur, lifted on a long shadow. The negative top margin is what makes
   it overlap; z-index keeps it above the hero scrims. */
.rm-search-wrap{
  position:relative; z-index:10;
  margin-top:22px; margin-bottom:0;
}
.rm-search-panel{
  border-radius:var(--rm-r-panel); padding:clamp(22px,3vw,30px);
  border:1px solid rgba(11,91,131,.12);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--rm-sh-panel), inset 0 1px 0 #FFFFFF;
}
.rm-search-panel__head{
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rm-brass-light);
}
.rm-search-panel__head::before{
  content:""; width:20px; height:1px; background:var(--rm-brass); display:block; flex:none;
}

/* auto-fit is safe here: these are form fields of equal weight, not cards, so
   a short final row reads as a form wrapping rather than as missing content. */
.rm-search{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:12px; align-items:end; background:none; border:0;
}
.rm-search__cell{ background:none; padding:0; }
.rm-search__label{
  display:block; font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--rm-muted); margin-bottom:9px;
}
.rm-search__cell input,
.rm-search__cell select{
  width:100%; border-radius:var(--rm-r-field); border:1px solid var(--rm-field);
  background:var(--rm-fill); color:var(--rm-ink); font-size:15px;
  padding:14px 16px; outline:none;
}
.rm-search__cell select{ cursor:pointer; }
.rm-search__cell input:focus,
.rm-search__cell select:focus{ border-color:var(--rm-blue); }
.rm-search__submit{
  border-radius:var(--rm-r-btn); border:0; padding:15px 28px; cursor:pointer;
  background:var(--rm-blue); color:var(--rm-white);
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  transition:background .18s;
}
.rm-search__submit:hover{ background:var(--rm-deep); }
@media (max-width:900px){
  .rm-search-wrap{ margin-top:26px; }
  .rm-search{ grid-template-columns:minmax(0,1fr); }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Footer ground echoes the hero: blue, a brass radial glow and a faint grid
   that both fade out downward so the columns sit on flat colour. */
.rm-footer{ background:var(--rm-blue); color:var(--rm-w70); position:relative; overflow:hidden; }
.rm-footer__glow,
.rm-footer__grid{ position:absolute; pointer-events:none; }
.rm-footer__glow{
  top:-220px; left:50%; transform:translateX(-50%);
  width:1100px; height:560px;
  background:radial-gradient(ellipse at center, rgba(201,169,104,.16), transparent 68%);
}
.rm-footer__grid{
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,#000,transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
}
/* The footer runs its own gutter in the design - clamp(16px,3vw,32px) against
   the sections' clamp(20px,4vw,40px) - so it sits 8px wider on each side at
   desktop. That is deliberate in the design, not the bug you saw: that was
   this rule zeroing the sides entirely and running 32px wide. */
.rm-footer__body{
  position:relative;
  padding:clamp(40px,5vw,60px) clamp(16px,3vw,32px) clamp(18px,2.5vw,26px);
}

/* Market marquee. The track holds the town list twice and translates by
   exactly -50%, so the seam lands back at the start and the loop is
   invisible. Transform-only, and it stops for reduced motion. */
.rm-marquee{ position:relative; border-bottom:1px solid rgba(255,255,255,.16); overflow:hidden; }
.rm-marquee__track{ display:flex; width:max-content; animation:rmMarch 52s linear infinite; }
.rm-marquee__set{
  display:flex; align-items:center; gap:32px;
  padding:18px 16px; white-space:nowrap; flex:0 0 auto;
}
.rm-marquee__town{
  font-family:var(--rm-display); font-size:19px;
  letter-spacing:-.02em; color:rgba(255,255,255,.88);
}
.rm-marquee__sep{ font-size:15px; color:var(--rm-brass-lt); }
@keyframes rmMarch{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --------------------------------------------------------------------------
   Mobile, taken rule for rule from the design's own media queries
   -------------------------------------------------------------------------- */

@media (max-width:900px){
  /* Section heads stack. A title and its button side by side at phone width
     leaves the title on two words a line; the design breaks them apart. */
  .rm-head{
    flex-direction:column; align-items:flex-start; gap:18px;
  }
  .rm-head--center{ gap:0; }

  /* Paired buttons go full width rather than sitting half-width beside
     each other, which is where a mono label starts truncating. */
  .rm-cta__actions > .rm-btn,
  .rm-about-actions > .rm-btn{ flex:1 1 100%; justify-content:center; }

  /* Service detail and broker profile split layouts collapse. */
  .rm-split--service{ grid-template-columns:minmax(0,1fr); gap:48px; }
}

/* The broker profile collapses earlier than the other splits - its portrait
   needs more room before the two columns get cramped. */
@media (max-width:860px){
  .rm-bp__hero{ grid-template-columns:minmax(0,1fr); gap:48px; }
}

/* Listing and affiliate card grids drop to one column at 640, twenty pixels
   later than the homepage grids, because their cards carry more text. */
@media (max-width:640px){
  .rm-grid--cards{ grid-template-columns:minmax(0,1fr); }
}

/* About's stat tiles run three steps of their own. */
@media (max-width:900px){ .rm-stats--grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .rm-stats--grid{ grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce){ .rm-marquee__track{ animation:none; } }

.rm-footer__cols{
  display:grid; grid-template-columns:1.6fr repeat(3, minmax(0,1fr));
  gap:38px; padding-bottom:clamp(34px,4vw,48px);
}
.rm-footer__logo{ height:50px; width:auto; margin-bottom:16px; }
.rm-footer__blurb{
  font-size:15px; line-height:1.6; max-width:24em;
  color:rgba(255,255,255,.8); margin-bottom:18px; text-wrap:pretty;
}
.rm-footer__address{
  font-size:15px; color:rgba(255,255,255,.8); margin-top:16px;
  font-style:normal; line-height:1.7;
}
.rm-footer h2{
  color:var(--rm-white); font-family:var(--rm-mono); font-size:15px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; font-weight:500;
}
.rm-footer__list{ display:flex; flex-direction:column; gap:10px; font-size:15px; }
.rm-footer a{ color:rgba(255,255,255,.8); }
.rm-footer a:hover{ color:var(--rm-brass-paler); }

/* Social squares - 11px radius, brass fill on hover. */
.rm-socials{ display:flex; gap:9px; }
.rm-socials a{
  width:40px; height:40px; border-radius:var(--rm-r-sq);
  border:1px solid rgba(255,255,255,.24);
  display:flex; align-items:center; justify-content:center; color:var(--rm-white);
  transition:background .18s, border-color .18s, color .18s;
}
.rm-socials a:hover{ background:var(--rm-brass); border-color:var(--rm-brass); color:var(--rm-on-brass); }
.rm-socials svg{ width:15px; height:15px; }
/* The YouTube mark is drawn wider than the others, so it needs its own size
   wherever a glyph row renders it. */
.rm-icon--yt{ width:16px; height:16px; }
/* A plain closing row, not a panel. It used to carry the same glass treatment
   as the cards - translucent fill, border, blur and a drop shadow - which read
   as a highlighted strip rather than the quiet line a copyright notice should
   be. Only a hairline above it remains, to separate it from the columns; the
   horizontal padding goes too, so it lines up with the footer content above
   instead of being inset like a box. */
.rm-footer__bar{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px;
  padding:22px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.rm-footer__copy{
  font-family:var(--rm-mono); font-size:15px;
  letter-spacing:.04em; color:rgba(255,255,255,.85);
}
/* The credit is plain text now, not a pill - same treatment RMCRE asked for
   on the hero eyebrow. The link and its hover colour stay; only the capsule
   around them goes. */
.rm-footer__chip{
  display:inline-flex; align-items:center; gap:11px;
  transition:color .18s;
}
.rm-footer__chip:hover{ color:var(--rm-brass-pale); }
.rm-footer__chip-label{
  font-family:var(--rm-mono); font-size:15px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rm-brass-paler);
}
.rm-footer__chip-name{
  font-family:var(--rm-display); font-weight:500; font-size:16px;
  letter-spacing:-.02em; color:var(--rm-white);
}
.rm-footer__chip-tld{ color:var(--rm-brass-paler); }
.rm-footer__chip:hover .rm-footer__chip-label,
.rm-footer__chip:hover .rm-footer__chip-name,
.rm-footer__chip:hover .rm-footer__chip-tld{ color:var(--rm-on-brass); }

@media (max-width:900px){
  .rm-footer__cols{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px; }
}
@media (max-width:660px){
  .rm-footer__bar{ flex-direction:column; align-items:flex-start; gap:14px; }
}
@media (max-width:560px){
  .rm-footer__cols{ gap:28px 20px; }
  /* Logo column and contact column go full width; the two link lists pair up. */
  .rm-footer__cols > :first-child,
  .rm-footer__cols > :last-child{ grid-column:1 / -1; }
}

/* --------------------------------------------------------------------------
   Images
   -------------------------------------------------------------------------- */

/* Stock-photo attribution, kept wherever a licensed image survives. */
.rm-credit{
  position:absolute; right:0; bottom:0; z-index:4;
  background:rgba(7,58,84,.72); color:var(--rm-white);
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.03em;
  padding:4px 8px;
}
.rm-credit a{ color:var(--rm-white); }

/* Empty image field: a flat off-white plate, never a stock photo. */
.rm-noimg{
  position:absolute; inset:0; background:var(--rm-off);
  display:flex; align-items:center; justify-content:center;
}
.rm-noimg svg{ width:28px; height:28px; color:#C9C6C0; }

/* --------------------------------------------------------------------------
   Responsive - header collapse
   -------------------------------------------------------------------------- */

@media (max-width:1180px){
  .rm-nav__list{ gap:22px; }
  .rm-nav__link{ font-size:15px; letter-spacing:.06em; }
  .rm-header__panel{ gap:16px; }
}
@media (max-width:900px){
  .rm-nav,
  .rm-header__cta{ display:none; }
  .rm-burger{ display:flex; }
}
@media (max-width:760px){
  :root{ --rm-anchor:100px; }
  .rm-panel__pad{ padding:22px; }
  .rm-panel__head{ padding:20px 22px 16px; }
  .rm-panel__body{ padding:8px 22px 18px; }
}

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


/* The design tightens card and panel padding at 560px, not before. */
@media (max-width:560px){
  .rm-card__body{ padding:20px; }
  .rm-panel__pad{ padding:20px; }
  .rm-panel--edge > .rm-panel__inner{ padding:20px; }
  .rm-search-panel{ padding:20px; }
}
@media print{
  .rm-header,.rm-footer,.rm-cta,.rm-share,.rm-drawer{ display:none!important; }
  body{ font-size:12pt; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; }
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.rm-crumbs{ margin-bottom:32px; }
.rm-crumbs ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  list-style:none; margin:0; padding:0;
}
.rm-crumbs li{
  font-family:var(--rm-mono); font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rm-muted);
}
.rm-crumbs li + li::before{
  content:"/"; margin-right:8px; color:var(--rm-brass-light);
}
.rm-crumbs a{ color:var(--rm-blue); }
.rm-crumbs a:hover{ color:var(--rm-brass-light); }
.rm-crumbs [aria-current]{ color:var(--rm-muted); }

/* --------------------------------------------------------------------------
   Gallery lightbox
   -------------------------------------------------------------------------- */

.rm-lightbox{
  border:0; padding:0; max-width:min(1100px, 94vw); max-height:92vh;
  background:var(--rm-white); color:var(--rm-ink);
  border-radius:var(--rm-r-panel); overflow:hidden;
}
.rm-lightbox::backdrop{ background:rgba(6,32,46,.9); }
.rm-lightbox img{ max-height:88vh; width:auto; margin-inline:auto; }
.rm-lightbox [data-rm-close]{
  position:absolute; top:0; right:0; z-index:2;
  width:44px; height:44px; border:0; border-radius:0 var(--rm-r-panel) 0 var(--rm-r-card);
  background:var(--rm-deep); color:var(--rm-white); cursor:pointer;
  font-size:22px; line-height:1;
}
.rm-lightbox:not([open]){ display:none; }

/* Article header image keeps its crop at every width. */
.rm-article__hero{ width:100%; height:100%; object-fit:cover; }

/* Application forms ------------------------------------------------------
   Checkbox and radio groups, which no other form on the site needed until
   the membership applications arrived. Laid out as a responsive column grid
   rather than a single list: twenty-one markets in one column is a scroll,
   and in a grid it is a glance. */
.rm-fieldset{
  border:0; margin:0 0 28px; padding:0;
}
.rm-fieldset legend{ padding:0; margin-bottom:12px; }
.rm-checks{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(210px,100%),1fr));
  gap:10px 20px;
}
.rm-check{
  display:flex; align-items:flex-start; gap:10px;
  font-size:15px; line-height:1.45; color:var(--rm-body); cursor:pointer;
}
.rm-check input{
  flex:none; width:17px; height:17px; margin-top:2px;
  accent-color:var(--rm-blue); cursor:pointer;
}
.rm-check span{ text-wrap:pretty; }

/* One consent row under a form rather than a grid of them - the newsletter box
   on the inquiry forms. It is fine print and reads like it, but it is still a
   control, so the box keeps its full tap target and the line keeps its height.

   The negative margin is deliberate. .rm-form is a flex column with a 26px gap,
   which would leave this floating as its own block halfway between the last
   field and the button; it belongs with the button it sits above. */
.rm-check--solo{
  font-size:14px; line-height:1.5; color:var(--rm-muted);
}
.rm-form > .rm-check--solo{ margin-bottom:-8px; }
.rm-form--mini > .rm-check--solo{ margin-bottom:-2px; font-size:13.5px; }