/* ==========================================================================
   Ruhaama Design System
   --------------------------------------------------------------------------
   One set of tokens and primitives shared by the public marketplace, the Buyer
   Portal and the Member Portal, so the four surfaces read as one platform.

   Direction, per the Digital Platform Concept Note section 15 — "quiet
   premium": institutional, calm and contemporary. Deep green brand colour,
   warm off-white grounds, a restrained earth/gold accent, real estate
   photography, and an 8px spacing logic. No decorative motion.

   Accessibility is a requirement, not a finish: colour is never the only
   carrier of meaning, focus is always visible, and contrast targets WCAG 2.2 AA.
   ========================================================================== */

:root {
    /* --- Brand ------------------------------------------------------- */
    --rr-green-900: #0d3b24;
    --rr-green-800: #12492d;
    --rr-green-700: #17593a;   /* primary */
    --rr-green-600: #1f6d47;
    --rr-green-500: #2c8659;
    --rr-green-100: #e3efe8;
    --rr-green-050: #f2f8f4;

    /* Restrained earth/gold accent — used sparingly, never as a CTA ground */
    --rr-gold-700: #8a6a24;
    --rr-gold-500: #b8912f;   /* for light grounds */
    --rr-gold-300: #ddb85f;   /* for dark grounds: gold-500 measures 4.27:1 on
                                 green-900, which is short of the 4.5:1 AA
                                 threshold for text this size */
    --rr-gold-100: #f6efdc;

    /* --- Neutrals: warm off-white, not cold grey --------------------- */
    --rr-ink-900: #1a1c1a;
    --rr-ink-700: #383c39;
    --rr-ink-500: #5d635f;
    --rr-ink-300: #8d938f;
    --rr-line:    #e2e0d9;
    --rr-surface: #ffffff;
    --rr-ground:  #faf8f4;   /* warm cream page ground */
    --rr-ground-2:#f4f1ea;

    /* --- Status. Each is always paired with a text label ------------- */
    --rr-available-bg: #e3efe8;  --rr-available-fg: #12492d;
    --rr-reserved-bg:  #fbf0d9;  --rr-reserved-fg:  #7a5a12;
    --rr-sold-bg:      #efe9e7;  --rr-sold-fg:      #5e4b46;
    --rr-soon-bg:      #e6eef4;  --rr-soon-fg:      #1f4a68;
    --rr-danger-bg:    #fbe9e7;  --rr-danger-fg:    #8c2f22;

    /* --- Spacing: 8px logic ------------------------------------------ */
    --rr-1: 4px;   --rr-2: 8px;   --rr-3: 12px;  --rr-4: 16px;
    --rr-5: 24px;  --rr-6: 32px;  --rr-7: 48px;  --rr-8: 64px;  --rr-9: 96px;

    /* --- Radii, elevation, motion ------------------------------------ */
    --rr-radius-sm: 4px;
    --rr-radius:    8px;
    --rr-radius-lg: 14px;
    --rr-shadow-1: 0 1px 2px rgba(26, 28, 26, .06), 0 1px 3px rgba(26, 28, 26, .05);
    --rr-shadow-2: 0 4px 12px rgba(26, 28, 26, .08);
    --rr-ease: 160ms cubic-bezier(.4, 0, .2, 1);

    /* --- Type -------------------------------------------------------- */
    --rr-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /*
        The display face follows the logo.

        The Ruhaama mark is a bold geometric sans with a double-storey "a", an
        angled leg on the R and a spurred u. Headings were set in Fraunces, a
        characterful serif, which said something quite different from the logo
        directly above it — the mark read as modern and geometric, the headings
        as editorial.

        Figtree is the closest freely-licensed match to the mark's letterforms:
        same construction of the a and its tail, same R leg, same spur on the u.
        The fallback stack is a sans now too, so a page rendered before the
        webfont arrives does not flash a serif and then reflow into a sans.
    */
    --rr-font-display: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rr-measure: 68ch;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
   Border-box, scoped to .rr so it cannot disturb the legacy Bootstrap 3 pages
   that share this document. Without it every .rr-input — width:100% plus
   32px of horizontal padding and a border — renders wider than its column and
   spills out of the card containing it. That was visible on the homepage
   site-visit form and would have affected every form on the platform.
*/
.rr, .rr *, .rr *::before, .rr *::after { box-sizing: border-box; }

.rr {
    font-family: var(--rr-font-sans);
    color: var(--rr-ink-900);
    background: var(--rr-ground);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.rr h1, .rr h2, .rr h3 {
    font-family: var(--rr-font-display);
    /* 700, and tracked slightly tighter: Fraunces at 600 carried enough weight
       as a serif, but a geometric sans needs more to echo a logo set at 800,
       and the mark itself is set tight. */
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.16;
    color: var(--rr-green-900);
    margin: 0 0 var(--rr-3);
}

.rr h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.rr h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
.rr h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); }
.rr p  { margin: 0 0 var(--rr-4); max-width: var(--rr-measure); }

.rr .rr-lede { font-size: 1.125rem; color: var(--rr-ink-700); }
.rr .rr-muted { color: var(--rr-ink-500); }
.rr .rr-small { font-size: .875rem; }

/* Focus is always visible. Never remove this. */
.rr :focus-visible {
    outline: 3px solid var(--rr-gold-500);
    outline-offset: 2px;
    border-radius: var(--rr-radius-sm);
}

/* Keyboard users must be able to reach content directly. */
.rr-skip-link {
    position: absolute; left: -9999px;
    background: var(--rr-green-700); color: #fff;
    padding: var(--rr-3) var(--rr-4); border-radius: 0 0 var(--rr-radius) 0;
    z-index: 200;
}
.rr-skip-link:focus { left: 0; top: 0; }

/* ==========================================================================
   Layout
   ========================================================================== */

.rr-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--rr-4); }
.rr-container--narrow { max-width: 820px; }
.rr-section { padding: var(--rr-8) 0; }
.rr-section--tight { padding: var(--rr-6) 0; }
.rr-stack > * + * { margin-top: var(--rr-4); }

.rr-grid { display: grid; gap: var(--rr-5); }
/* A genuine two-up. auto-fit was giving three columns on a 1200px container,
   which orphaned the fourth card of a four-card set and split form rows
   unpredictably. Two columns, then one below 720px. */
.rr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .rr-grid--2 { grid-template-columns: 1fr; } }
.rr-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

/*
    Grid and flex children may shrink below their content's intrinsic width.

    They default to min-width:auto, and a text input's intrinsic minimum is its
    size attribute — about twenty characters, near enough 200px before padding.
    On the contact form that forced a single column to 445px inside a 360px
    phone and pushed the whole page sideways. min-width:0 lets the column be as
    narrow as the screen; the input then honours its own width:100%.
*/
.rr-grid > *, .rr-stats > *, .rr-split > *, .rr-filters > *,
.rr-contact > *, .rr-passport > *, .rr-portal > *, .rr-doclist > *,
.rr-gallery > *, .rr-steps > *, .rr-step > *, .rr-saved-item > *,
.rr-figurecard__grid > *, .rr-people > *, .rr-about-rudep > * { min-width: 0; }

/* Long unbroken strings — a reference, a URL, an email address — must wrap
   rather than widen the page that contains them.

   Deliberately NOT applied to table cells. A table already has a scrolling
   container (.rr-table-wrap); telling its cells to break anywhere made them
   squeeze instead of scroll, so a five-column table on a phone rendered
   "Cancel" one letter per line and a price as "9,00 / 0,00 / 0". */
.rr-dl dd, .rr-doc__title { overflow-wrap: anywhere; }
.rr-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.rr-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--rr-2);
    min-height: 44px;                     /* mobile tap target */
    padding: var(--rr-3) var(--rr-5);
    border: 1px solid transparent;
    border-radius: var(--rr-radius);
    font: inherit; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer;
    transition: background var(--rr-ease), border-color var(--rr-ease), color var(--rr-ease);
}
.rr-btn--primary { background: var(--rr-green-700); color: #fff; }
.rr-btn--primary:hover { background: var(--rr-green-800); color: #fff; }
.rr-btn--secondary { background: var(--rr-surface); color: var(--rr-green-800); border-color: var(--rr-line); }
.rr-btn--secondary:hover { border-color: var(--rr-green-500); }
.rr-btn--ghost { background: transparent; color: var(--rr-green-800); }
.rr-btn--ghost:hover { background: var(--rr-green-050); }
.rr-btn--block { width: 100%; }
.rr-btn[disabled], .rr-btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; pointer-events: none;
}
.rr-btn.is-loading { position: relative; color: transparent; }
.rr-btn.is-loading::after {
    content: ""; position: absolute; width: 16px; height: 16px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: rr-spin .7s linear infinite;
    color: #fff;
}
@keyframes rr-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Cards
   ========================================================================== */

.rr-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg);
    overflow: hidden;
    box-shadow: var(--rr-shadow-1);
    transition: box-shadow var(--rr-ease), transform var(--rr-ease);
}
.rr-card--interactive:hover { box-shadow: var(--rr-shadow-2); transform: translateY(-2px); }
.rr-card__media { aspect-ratio: 4 / 3; background: var(--rr-ground-2); position: relative; }
.rr-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rr-card__body { padding: var(--rr-4) var(--rr-5) var(--rr-5); }
.rr-card__title { font-family: var(--rr-font-display); font-weight: 700; letter-spacing: -0.015em; font-size: 1.2rem; margin: 0 0 var(--rr-1); color: var(--rr-green-900); }
.rr-card__meta { font-size: .875rem; color: var(--rr-ink-500); margin-bottom: var(--rr-3); }
.rr-card__price { font-size: 1.35rem; font-weight: 700; color: var(--rr-green-800); }
.rr-card__price small { font-size: .7em; font-weight: 600; color: var(--rr-ink-500); margin-left: 2px; }

/* Placeholder when a plot has no photograph yet — never a broken image. */
.rr-card__media--empty {
    display: grid; place-items: center;
    color: var(--rr-ink-300); font-size: .8rem; letter-spacing: .04em;
    text-transform: uppercase;
    background: repeating-linear-gradient(45deg, var(--rr-ground-2), var(--rr-ground-2) 12px, #efece4 12px, #efece4 24px);
}

/* ==========================================================================
   Status badges — colour ALWAYS accompanied by the word (WCAG 1.4.1)
   ========================================================================== */

.rr-badge {
    display: inline-flex; align-items: center; gap: var(--rr-1);
    padding: 3px 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 600; letter-spacing: .01em;
    white-space: nowrap;
}
.rr-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rr-badge--available { background: var(--rr-available-bg); color: var(--rr-available-fg); }
.rr-badge--reserved  { background: var(--rr-reserved-bg);  color: var(--rr-reserved-fg); }
.rr-badge--sold      { background: var(--rr-sold-bg);      color: var(--rr-sold-fg); }
.rr-badge--soon      { background: var(--rr-soon-bg);      color: var(--rr-soon-fg); }
.rr-badge--neutral   { background: var(--rr-ground-2);     color: var(--rr-ink-700); }
/* The dot is a status indicator. A neutral badge is a label — a document type,
   a tenure — so it should not borrow the vocabulary of availability. */
.rr-badge--neutral::before { display: none; }

/* ==========================================================================
   Forms
   ========================================================================== */

.rr-field { margin-bottom: var(--rr-4); }
.rr-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: var(--rr-2); color: var(--rr-ink-900); }
.rr-hint  { font-size: .82rem; color: var(--rr-ink-500); margin-top: var(--rr-1); }
.rr-input, .rr-select, .rr-textarea {
    /* min-width:0 as well as width:100%. A control's intrinsic minimum comes
       from its size attribute, and inside a grid or flex parent that minimum
       wins over the declared width — which is how a form ended up wider than
       the phone it was on. */
    width: 100%; min-width: 0; max-width: 100%;
    /* 44px is the smallest target a thumb reliably hits. */
    min-height: 44px;
    padding: var(--rr-3) var(--rr-4);
    font: inherit; color: var(--rr-ink-900);
    background: var(--rr-surface);
    border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius);
    transition: border-color var(--rr-ease), box-shadow var(--rr-ease);
}
.rr-input:focus, .rr-select:focus, .rr-textarea:focus {
    border-color: var(--rr-green-500);
    box-shadow: 0 0 0 3px var(--rr-green-100);
    outline: none;
}
.rr-input[aria-invalid="true"] { border-color: var(--rr-danger-fg); }
.rr-error { color: var(--rr-danger-fg); font-size: .85rem; margin-top: var(--rr-1); }
.rr-textarea { min-height: 120px; resize: vertical; }

/* ==========================================================================
   Feedback: alerts, empty states, skeletons
   ========================================================================== */

/*
    An alert is a paragraph, not two columns.

    display:flex made each run of text its own flex item, so "Online payment is
    not switched on yet." became a narrow left column with the rest beside it —
    on a phone, five words stacked one per line. Alerts are read as a sentence
    and are laid out as one; a strong opening clause stays inline where it
    belongs.
*/
.rr-alert {
    padding: var(--rr-4); border-radius: var(--rr-radius);
    border: 1px solid transparent; margin-bottom: var(--rr-4);
    line-height: 1.55;
}
.rr-alert > strong { margin-right: .25em; }
.rr-alert--success { background: var(--rr-available-bg); color: var(--rr-available-fg); border-color: #bcd8c7; }
.rr-alert--error   { background: var(--rr-danger-bg);    color: var(--rr-danger-fg);    border-color: #edc4bd; }
.rr-alert--info    { background: var(--rr-soon-bg);      color: var(--rr-soon-fg);      border-color: #c3d6e3; }
.rr-alert--warning { background: var(--rr-reserved-bg);  color: var(--rr-reserved-fg);  border-color: #e6d3a4; }

/* An empty result is a state to design, not a blank page. */
.rr-empty {
    text-align: center; padding: var(--rr-8) var(--rr-5);
    background: var(--rr-surface);
    border: 1px dashed var(--rr-line);
    border-radius: var(--rr-radius-lg);
}
.rr-empty__title { font-family: var(--rr-font-display); font-size: 1.25rem; color: var(--rr-green-900); margin-bottom: var(--rr-2); }
.rr-empty__body { color: var(--rr-ink-500); max-width: 46ch; margin: 0 auto var(--rr-5); }

.rr-skeleton {
    background: linear-gradient(90deg, var(--rr-ground-2) 25%, #efece4 37%, var(--rr-ground-2) 63%);
    background-size: 400% 100%;
    animation: rr-shimmer 1.4s ease infinite;
    border-radius: var(--rr-radius-sm);
}
@keyframes rr-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ==========================================================================
   Data list — a definition list used by the Plot Passport
   ========================================================================== */

.rr-dl { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: var(--rr-3) var(--rr-4); margin: 0; }
/* Below 560px a 140px label column leaves under 200px for the value beside it,
   which wraps a price across two lines. Stacked, each gets the full width. */
@media (max-width: 560px) {
    .rr-dl, .rr-dl__row { grid-template-columns: 1fr; gap: var(--rr-1); }
    .rr-dl__row { margin-bottom: var(--rr-3); }
}
.rr-dl dt { color: var(--rr-ink-500); font-size: .9rem; }
.rr-dl dd { margin: 0; font-weight: 500; }
.rr-dl__row { display: contents; }

/* ==========================================================================
   Sticky mobile action bar — Browse / Reserve / Book Visit / Pay
   ========================================================================== */

.rr-actionbar {
    position: sticky; bottom: 0; z-index: 40;
    display: flex; gap: var(--rr-3);
    padding: var(--rr-3) var(--rr-4);
    padding-bottom: calc(var(--rr-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--rr-line);
    backdrop-filter: blur(8px);
}
/* On a phone the buttons stack and fill the width rather than being squeezed
   side by side into three lines of wrapped label each. */
@media (max-width: 767px) {
    .rr-actionbar { flex-direction: column; align-items: stretch; }
    .rr-actionbar .rr-btn { width: 100%; justify-content: center; }
    .rr-actionbar form { display: contents; }
}
@media (min-width: 768px) { .rr-actionbar { position: static; background: none; border: 0; padding: 0; backdrop-filter: none; } }

/* ==========================================================================
   Tables
   ========================================================================== */

.rr-table-wrap { overflow-x: auto; border: 1px solid var(--rr-line); border-radius: var(--rr-radius-lg); background: var(--rr-surface); }
.rr-table {
    width: 100%; border-collapse: collapse; font-size: .93rem;
    /* Below this the columns stop being readable, so the wrap scrolls instead
       of the cells collapsing on top of each other. */
    min-width: 560px;
}
.rr-table th, .rr-table td { padding: var(--rr-3) var(--rr-4); text-align: left; border-bottom: 1px solid var(--rr-line); }
.rr-table th { background: var(--rr-ground-2); font-weight: 600; color: var(--rr-ink-700); white-space: nowrap; }
/* An action in a table cell is one word, not a column of letters. */
.rr-table td .rr-btn, .rr-table td button, .rr-table td a { white-space: nowrap; }

/* The scroll is only useful if it is discoverable. */
@media (max-width: 720px) {
    .rr-table-wrap { position: relative; }
    .rr-table-wrap::after {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
        pointer-events: none; border-radius: 0 var(--rr-radius-lg) var(--rr-radius-lg) 0;
        background: linear-gradient(to right, rgba(255,255,255,0), var(--rr-surface));
    }
}

/* A totals row is shaded across its whole width. Left to the th rule alone the
   label cell was tinted and the figure beside it was not, so the row looked
   broken in half. */
.rr-table tfoot td,
.rr-table tfoot th { background: var(--rr-ground-2); border-bottom: 0; border-top: 2px solid var(--rr-line); }
.rr-table tbody tr:last-child td { border-bottom: 0; }
.rr-table .rr-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Respect the user's motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .rr *, .rr *::before, .rr *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   Site chrome: header, navigation, footer
   ========================================================================== */

.rr-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rr-line);
}
.rr-header__inner {
    display: flex; align-items: center; gap: var(--rr-5);
    min-height: 72px;
}
.rr-header__brand { display: flex; align-items: center; flex-shrink: 0; }
.rr-header__brand img { display: block; height: 48px; width: auto; }

.rr-nav { display: none; gap: var(--rr-5); margin-left: auto; }
.rr-nav a {
    color: var(--rr-ink-700); text-decoration: none;
    font-weight: 500; font-size: .95rem;
    padding: var(--rr-2) 0; border-bottom: 2px solid transparent;
}
.rr-nav a:hover { color: var(--rr-green-700); }
.rr-nav a[aria-current="page"] { color: var(--rr-green-800); border-bottom-color: var(--rr-green-700); }

.rr-header__actions { display: none; margin-left: var(--rr-4); }

/* --- Nav dropdown --------------------------------------------------------
   The panel is positioned, not toggled with display:none, so that a keyboard
   user tabbing into it still moves focus somewhere real. It is hidden with
   opacity + visibility, and visibility:hidden removes it from the tab order
   in every browser that matters. */
.rr-menu { position: relative; }
.rr-menu__trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: var(--rr-2) 0;
    border-bottom: 2px solid transparent;
    font: inherit; font-weight: 500; font-size: .95rem;
    color: var(--rr-ink-700); cursor: pointer;
}
.rr-menu__trigger:hover { color: var(--rr-green-700); }
.rr-menu__trigger[aria-current="page"] { color: var(--rr-green-800); border-bottom-color: var(--rr-green-700); }
.rr-menu__caret {
    width: 7px; height: 7px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform var(--rr-ease);
}
.rr-menu.is-open .rr-menu__caret { transform: rotate(-135deg); margin-top: 2px; }

.rr-menu__panel {
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
    min-width: 250px; padding: var(--rr-2);
    background: var(--rr-surface);
    border: 1px solid var(--rr-line); border-radius: var(--rr-radius-lg);
    box-shadow: var(--rr-shadow-2);
    display: grid; gap: 1px;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity var(--rr-ease), transform var(--rr-ease), visibility var(--rr-ease);
}
.rr-menu.is-open .rr-menu__panel { opacity: 1; visibility: visible; transform: none; }
/* A hoverable gap between trigger and panel, so the pointer can cross it. */
.rr-menu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.rr-menu__panel a {
    padding: var(--rr-2) var(--rr-3); border-radius: var(--rr-radius-sm);
    color: var(--rr-ink-700); text-decoration: none; font-size: .92rem; font-weight: 500;
    white-space: nowrap;
}
.rr-menu__panel a:hover { background: var(--rr-green-050); color: var(--rr-green-800); }
.rr-menu__panel a:first-child { font-weight: 600; color: var(--rr-green-800); }

/* No JavaScript: show the group inline rather than hiding it for ever. */
.no-js .rr-menu__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; }

.rr-nav-toggle {
    margin-left: auto; display: grid; gap: 5px;
    width: 44px; height: 44px; padding: 10px;
    background: none; border: 0; cursor: pointer;
}
.rr-nav-toggle span { display: block; height: 2px; background: var(--rr-ink-900); border-radius: 2px; }

/*
    The mobile menu, closed until it is opened.

    This was "display: grid" unconditionally, which OVERRIDES the hidden
    attribute — hidden only works because the user-agent stylesheet gives it
    display:none, and any author rule beats that. So every page on every phone
    opened with the whole navigation expanded, pushing the content of the page
    below it off the screen, and the hamburger's JS (which sets .hidden) did
    nothing visible at all.

    Scoped to :not([hidden]) so the attribute stays the single source of truth
    for whether the menu is open, and the script keeps working unchanged.
*/
.rr-mobile-nav:not([hidden]) { display: grid; }
.rr-mobile-nav {
    border-top: 1px solid var(--rr-line); background: var(--rr-surface);
    /* A long menu on a short phone must scroll rather than run off the end. */
    max-height: calc(100dvh - 72px); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.rr-mobile-nav__group {
    margin: var(--rr-3) 0 var(--rr-1); padding: 0 var(--rr-4);
    font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rr-ink-500);   /* ink-300 measures 3.13:1 here, short of AA */
}
.rr-mobile-nav .rr-mobile-nav__sub { padding-left: var(--rr-6); font-weight: 400; }
.rr-mobile-nav a {
    padding: var(--rr-4); color: var(--rr-ink-900);
    text-decoration: none; font-weight: 500;
    border-bottom: 1px solid var(--rr-line);
}

@media (min-width: 900px) {
    .rr-nav { display: flex; }
    .rr-header__actions { display: block; }
    .rr-nav-toggle, .rr-mobile-nav { display: none !important; }
}

.rr-footer { background: var(--rr-green-900); color: #d9e5dd; margin-top: var(--rr-9); }
.rr-footer__inner {
    display: grid; gap: var(--rr-6);
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    padding-top: var(--rr-8); padding-bottom: var(--rr-6);
}
/* `.rr h3` is (0,1,1) and beats a lone class at (0,1,0), so this heading was
   losing to the global heading colour and rendering in --rr-green-900 on a
   --rr-green-900 footer: invisible since the layout was written. The extra
   class is what makes it win. */
.rr .rr-footer__title { font-family: var(--rr-font-display); color: #fff; font-size: 1.15rem; margin: 0 0 var(--rr-3); }
.rr-footer__heading { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rr-gold-300); margin: 0 0 var(--rr-3); }
.rr-footer a { display: block; color: #d9e5dd; text-decoration: none; padding: var(--rr-1) 0; font-size: .93rem; }
.rr-footer a:hover { color: #fff; text-decoration: underline; }
.rr-footer .rr-muted { color: #a7bcaf; }
.rr-footer__legal { border-top: 1px solid rgba(255,255,255,.12); padding: var(--rr-4) var(--rr-4) var(--rr-6); }
.rr-footer__legal p { margin: 0; }

/* ==========================================================================
   Marketplace-specific
   ========================================================================== */

.rr-hero { background: var(--rr-green-900); color: #fff; padding: var(--rr-9) 0 var(--rr-8); }
.rr-hero h1 { color: #fff; max-width: 18ch; }
.rr-hero p { color: #cadbd1; font-size: 1.15rem; max-width: 52ch; }
.rr-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rr-3); margin-top: var(--rr-5); }

.rr-pagehead { background: var(--rr-ground-2); border-bottom: 1px solid var(--rr-line); padding: var(--rr-7) 0 var(--rr-6); }
.rr-crumbs { font-size: .85rem; color: var(--rr-ink-500); margin-bottom: var(--rr-2); }
.rr-crumbs a { color: var(--rr-ink-500); }

.rr-filters {
    display: grid; gap: var(--rr-3);
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    align-items: end;
    background: var(--rr-surface);
    border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg);
    padding: var(--rr-4);
    margin-bottom: var(--rr-6);
}
.rr-filters .rr-field { margin: 0; }
.rr-filters__actions { display: flex; gap: var(--rr-2); }

.rr-resultbar { display: flex; flex-wrap: wrap; gap: var(--rr-3); justify-content: space-between; align-items: baseline; margin-bottom: var(--rr-4); }

.rr-passport { display: grid; gap: var(--rr-7); grid-template-columns: 1fr; }
@media (min-width: 960px) { .rr-passport { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.rr-passport__aside {
    background: var(--rr-surface); border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg); padding: var(--rr-5);
    position: sticky; top: 96px;
}
.rr-passport__price { font-size: 2rem; font-weight: 700; color: var(--rr-green-800); line-height: 1.1; }

.rr-gallery { display: grid; gap: var(--rr-3); grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.rr-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--rr-radius); display: block; }

.rr-steps { counter-reset: step; display: grid; gap: var(--rr-5); }
.rr-step { display: grid; grid-template-columns: 48px 1fr; gap: var(--rr-4); align-items: start; }
.rr-step__num {
    counter-increment: step; display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--rr-green-100); color: var(--rr-green-800);
    font-weight: 700; font-family: var(--rr-font-display);
}
.rr-step__num::before { content: counter(step); }
.rr-step h3 { margin-bottom: var(--rr-1); }

.rr-pagination { display: flex; gap: var(--rr-2); flex-wrap: wrap; justify-content: center; margin-top: var(--rr-6); }
.rr-pagination a, .rr-pagination span {
    min-width: 44px; min-height: 44px; padding: 0 var(--rr-3);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rr-line); border-radius: var(--rr-radius);
    background: var(--rr-surface); color: var(--rr-ink-700); text-decoration: none;
}
.rr-pagination .active span { background: var(--rr-green-700); border-color: var(--rr-green-700); color: #fff; }
.rr-pagination .disabled span { opacity: .45; }

/* ==========================================================================
   Portal chrome — shared by the Buyer and Member portals
   ========================================================================== */

.rr-portal { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 900px) { .rr-portal { grid-template-columns: 264px 1fr; } }

.rr-sidebar {
    background: var(--rr-green-900); color: #cfdfd6;
    padding: var(--rr-5) var(--rr-4);
    display: flex; flex-direction: column; gap: var(--rr-5);
}
.rr-sidebar__brand { display: flex; align-items: center; gap: var(--rr-3); }
.rr-sidebar__brand img { height: 40px; width: auto; }
.rr-sidebar nav { display: grid; gap: 2px; }
.rr-sidebar nav a {
    display: flex; align-items: center; gap: var(--rr-3);
    padding: var(--rr-3) var(--rr-4); border-radius: var(--rr-radius);
    color: #cfdfd6; text-decoration: none; font-weight: 500; font-size: .95rem;
}
.rr-sidebar nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.rr-sidebar nav a[aria-current="page"] { background: var(--rr-green-700); color: #fff; }

/* --- Grouped sidebar navigation ------------------------------------------
   Native <details>, so a group opens with no script and the browser supplies
   the keyboard and screen-reader behaviour. The group holding the current page
   is rendered already open.
   ------------------------------------------------------------------------- */

.rr-sidenav__group { border-radius: var(--rr-radius); }

.rr-sidenav__summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--rr-3);
    padding: var(--rr-3) var(--rr-4); border-radius: var(--rr-radius);
    color: #cfdfd6; font-weight: 500; font-size: .95rem;
    cursor: pointer; list-style: none;
}
.rr-sidenav__summary::-webkit-details-marker { display: none; }
.rr-sidenav__summary::marker { content: ""; }
.rr-sidenav__summary:hover { background: rgba(255,255,255,.07); color: #fff; }
/* Focus must be visible on a dark ground too: this is the only way to open a
   group from the keyboard. */
.rr-sidenav__summary:focus-visible { outline: 3px solid var(--rr-gold-300); outline-offset: -3px; }

.rr-sidenav__caret {
    width: 7px; height: 7px; flex: 0 0 auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin-top: -3px;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
.rr-sidenav__group[open] > .rr-sidenav__summary { color: #fff; }
.rr-sidenav__group[open] .rr-sidenav__caret { transform: rotate(-135deg); margin-top: 2px; }

.rr-sidenav__links { display: grid; gap: 2px; padding: 2px 0 var(--rr-2); }
.rr-sidenav__links a {
    /* Indented, and marked with a rule down the left, so a child link is
       visibly inside its group rather than merely below it. */
    margin-left: var(--rr-4);
    padding-left: var(--rr-4);
    border-left: 2px solid rgba(255,255,255,.12);
    border-radius: 0 var(--rr-radius) var(--rr-radius) 0;
    font-size: .9rem; font-weight: 400;
}
.rr-sidenav__links a[aria-current="page"] { border-left-color: var(--rr-gold-300); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
    .rr-sidenav__group[open] > .rr-sidenav__links {
        animation: rr-sidenav-open .24s cubic-bezier(.2, .7, .3, 1) both;
    }
}
@keyframes rr-sidenav-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Sign out is set apart rather than sitting in the list as a peer of the
   pages: it leaves, it does not navigate. */
.rr-sidenav__out {
    margin-top: var(--rr-3); padding-top: var(--rr-4);
    border-top: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
}
.rr-sidenav__out:hover { background: transparent; color: #fff; text-decoration: underline; }

/* --- The sidebar on a phone -------------------------------------------------
   Below 900px it stops being a column beside the content and becomes a bar
   above it, with the navigation behind a button. It used to be the whole
   sidebar stacked on top, so a phone user scrolled past every link in the
   portal before reaching the page they had asked for — worst on a ledger,
   where an open group pushed the records themselves some 800px down.

   The open state is a class on the sidebar rather than the hidden attribute:
   hidden would have to be undone again at the desktop breakpoint, and a CSS
   rule fighting an attribute is exactly how the public site's menu came to be
   permanently open on every phone.
   -------------------------------------------------------------------------- */

.rr-sidebar__bar { display: none; }

/* The counterpart to the phone bar: the brand shown where the bar is not. */
.rr-sidebar__brand--wide { display: flex; }

@media (max-width: 899px) {
    /*
        Two rows: the bar takes what it needs, the content takes the rest.

        Without this the portal is a grid with min-height:100vh and two auto
        rows, so on a page shorter than the viewport the spare height is shared
        between them — and the sidebar, now only a bar, was stretched into a
        blank green band a hundred and fifty pixels deep.
    */
    .rr-portal { grid-template-rows: auto 1fr; }

    .rr-sidebar {
        position: sticky; top: 0; z-index: 40;
        padding: 0; gap: 0;
        /* Never stretched by the row it sits in. */
        align-self: start;
    }

    .rr-sidebar__bar {
        display: flex; align-items: center; gap: var(--rr-3);
        padding: var(--rr-3) var(--rr-4);
        /* The bar is exactly as wide as the screen, never wider: its children
           shrink rather than pushing the menu button past the edge. */
        min-width: 0; max-width: 100%;
    }
    .rr-sidebar__bar > * { min-width: 0; }
    .rr-sidebar__bar .rr-sidebar__brand { margin: 0; }
    .rr-sidebar__bar .rr-sidebar__brand img { height: 34px; width: auto; }

    .rr-sidebar__barwho {
        margin-left: auto; color: #cfdfd6; font-size: .85rem;
        /* A long name must not push the button off the edge. */
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .rr-sidebar__toggle {
        flex: 0 0 auto; margin-left: var(--rr-2);
        /* 44px: the smallest thing a thumb reliably hits. */
        width: 44px; height: 44px; padding: 10px;
        background: none; border: 0; cursor: pointer;
    }
    .rr-sidebar__toggleicon { display: grid; gap: 5px; }
    .rr-sidebar__toggleicon span { display: block; height: 2px; background: #cfdfd6; border-radius: 2px; }
    .rr-sidebar__toggle:focus-visible { outline: 3px solid var(--rr-gold-300); outline-offset: -3px; }

    /* Closed by default. The name and number card is part of the menu on a
       phone — the bar already shows who is signed in. */
    .rr-sidebar nav,
    .rr-sidebar .rr-sidebar__who,
    .rr-sidebar .rr-sidebar__brand--wide,
    .rr-sidebar .rr-portal-switch { display: none; }

    .rr-sidebar.is-open nav { display: grid; }
    .rr-sidebar.is-open .rr-sidebar__who,
    .rr-sidebar.is-open .rr-portal-switch { display: block; }

    .rr-sidebar.is-open {
        padding-bottom: var(--rr-4);
        /* Never taller than the screen: a long menu scrolls inside itself
           rather than running off the end of it. */
        max-height: 100dvh; overflow-y: auto;
    }
    .rr-sidebar.is-open nav,
    .rr-sidebar.is-open .rr-sidebar__who,
    .rr-sidebar.is-open .rr-portal-switch { margin-left: var(--rr-4); margin-right: var(--rr-4); }

    .rr-sidebar.is-open .rr-sidebar__toggleicon span:first-child { display: none; }
}

/* Shown only to a person who genuinely holds both roles. */
.rr-portal-switch {
    margin-top: auto; padding: var(--rr-4);
    background: rgba(255,255,255,.06); border-radius: var(--rr-radius);
    font-size: .85rem;
}
.rr-portal-switch strong { display: block; color: #fff; margin-bottom: var(--rr-2); }
.rr-portal-switch a { color: var(--rr-gold-500); }

.rr-portal__main { padding: var(--rr-6) 0 var(--rr-9); }
.rr-portal__head { margin-bottom: var(--rr-6); }

/* 200px columns could not hold a ten-digit UGX figure at 1.75rem, so values
   such as 3,000,000,000 rendered outside the card. Wider columns, and a value
   size that scales with the viewport rather than a fixed one. */
.rr-stats { display: grid; gap: var(--rr-4); grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.rr-stat {
    background: var(--rr-surface); border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg); padding: var(--rr-5);
    min-width: 0;
}
.rr-stat__label { font-size: .82rem; color: var(--rr-ink-500); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--rr-2); }
.rr-stat__value {
    font-size: clamp(1.3rem, .9rem + .9vw, 1.7rem);
    font-weight: 700; color: var(--rr-green-800); line-height: 1.15; margin: 0;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.rr-stat__value small { font-size: .5em; font-weight: 600; color: var(--rr-ink-500); }
/* A qualifier under a figure -- what part of it is still owed, which of the
   instalments differs. The figure alone would otherwise say something not
   quite true. */
.rr-stat__note { font-size: .78rem; color: var(--rr-ink-500); margin: var(--rr-1) 0 0; line-height: 1.35; }

/* The sign-in chooser: two cards of equal height whose buttons line up along
   the bottom whatever length the explanation above them runs to. */
.rr-signin { display: flex; flex-direction: column; height: 100%; }
.rr-signin__actions {
    display: flex; flex-wrap: wrap; gap: var(--rr-3);
    margin: var(--rr-2) 0 var(--rr-4);
}

/* ==========================================================================
   Homepage
   --------------------------------------------------------------------------
   The public homepage is the one screen most visitors see, and it is the only
   place the brand gets a full-bleed photograph. Everything here is scoped to
   .rr-home-* so it cannot leak into the portals.
   ========================================================================== */

/* A button that sits on a photograph or a dark ground. Solid white outline
   rather than a translucent fill, so it stays legible over any image. */
.rr-btn--onDark {
    background: transparent; color: #fff;
    border-color: rgba(255,255,255,.75);
}
.rr-btn--onDark:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* --- Hero ---------------------------------------------------------------- */

.rr-home-hero {
    position: relative;
    background: var(--rr-green-900);
    color: #fff;
    display: flex; align-items: flex-end;
    min-height: min(78vh, 660px);
    overflow: hidden;
}
.rr-home-hero__media { position: absolute; inset: 0; }
.rr-home-hero__media img {
    width: 100%; height: 100%; object-fit: cover;
    /* Focus on the horizon rather than the foreground grass. */
    object-position: center 58%;
}
/*
   The scrim is a gradient rather than a flat wash: it is heaviest exactly
   where the text sits and clears to almost nothing at the top, so the
   photograph is still a photograph. Contrast at the headline measures well
   past 7:1 against white.
*/
.rr-home-hero__media::after {
    content: ""; position: absolute; inset: 0;
    /*
       Two scrims rather than one flat wash. The horizontal one darkens only
       the column the text occupies, so the right-hand two-thirds of the
       photograph keeps its colour; the vertical one seats the whole frame and
       carries the bottom edge into the band below. Measured contrast at the
       headline is above 12:1.
    */
    background:
        linear-gradient(
            to right,
            rgba(8, 34, 20, .90) 0%,
            rgba(8, 34, 20, .78) 30%,
            rgba(8, 34, 20, .34) 58%,
            rgba(8, 34, 20, .10) 82%,
            rgba(8, 34, 20, .04) 100%
        ),
        linear-gradient(
            to top,
            rgba(8, 34, 20, .72) 0%,
            rgba(8, 34, 20, .34) 28%,
            rgba(8, 34, 20, .06) 62%,
            rgba(8, 34, 20, .22) 100%
        );
}
.rr-home-hero__inner {
    position: relative;
    padding-top: var(--rr-9);
    padding-bottom: var(--rr-8);
}
.rr-home-hero__eyebrow {
    margin: 0 0 var(--rr-3);
    font-size: .8rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--rr-gold-300);
}
.rr .rr-home-hero h1 {
    color: #fff;
    font-size: clamp(2.35rem, 6vw, 4rem);
    line-height: 1.05;
    max-width: 15ch;
    margin: 0 0 var(--rr-4);
    text-wrap: balance;
}
.rr .rr-home-hero__lede {
    color: #dbe8e0;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    max-width: 52ch;
    margin: 0;
}

/* --- Live inventory ------------------------------------------------------ */

.rr-home-facts { background: var(--rr-green-800); color: #fff; }
.rr-home-facts__grid {
    display: grid; gap: var(--rr-5);
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    text-align: center;
}
.rr .rr-home-facts__num {
    margin: 0; font-family: var(--rr-font-display);
    font-size: 2.25rem; font-weight: 600; line-height: 1.1; color: #fff;
    font-variant-numeric: tabular-nums;
}
.rr .rr-home-facts__label {
    margin: var(--rr-1) 0 0; color: #b9cec2;
    font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
}
.rr .rr-home-facts__notice { margin: 0; color: #dbe8e0; text-align: center; }
.rr-home-facts__notice a { color: #fff; }

/* --- Section headings with a trailing action ----------------------------- */

.rr-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--rr-4); flex-wrap: wrap;
    margin-bottom: var(--rr-6);
}
.rr .rr-section-head h2 { margin: 0; }
/* On its own beside a heading, a ghost button reads as loose text. Give it an
   edge and a direction marker so it is recognisably something to press. */
.rr-section-head .rr-btn--ghost {
    border-color: var(--rr-line);
    padding-inline: var(--rr-4);
}
.rr-section-head .rr-btn--ghost::after { content: "\2192"; font-weight: 400; }
.rr-section-head .rr-btn--ghost:hover { border-color: var(--rr-green-500); }

/* --- Condensed "how it works" -------------------------------------------- */

.rr-ministep { }
.rr-ministep__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--rr-green-100); color: var(--rr-green-800);
    font-weight: 700; font-size: .95rem;
    margin-bottom: var(--rr-3);
}
.rr .rr-ministep h3 { margin: 0 0 var(--rr-2); font-size: 1.05rem; }
.rr .rr-ministep p { margin: 0; color: var(--rr-ink-500); }

/* --- Trust ---------------------------------------------------------------- */

.rr-home-trust { background: var(--rr-green-050); }
.rr-home-trust__grid {
    display: grid; gap: var(--rr-7);
    grid-template-columns: 1fr 1fr; align-items: center;
}
.rr .rr-home-trust h2 { margin-top: 0; }
.rr .rr-home-trust p { max-width: 54ch; }
.rr-home-trust .rr-btn { margin-top: var(--rr-3); }
.rr-home-trust__figure { margin: 0; }
.rr-home-trust__figure img {
    width: 100%; height: 380px; object-fit: cover;
    border-radius: var(--rr-radius-lg);
    box-shadow: var(--rr-shadow-2);
}
.rr-home-trust__figure figcaption { margin-top: var(--rr-2); }

/* --- Site visit form ------------------------------------------------------ */

.rr-home-visit { background: var(--rr-ground-2); }
.rr .rr-home-visit h2 { margin-top: 0; }
.rr-home-visit__form {
    margin-top: var(--rr-6);
    background: var(--rr-surface);
    border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg);
    padding: var(--rr-6);
    box-shadow: var(--rr-shadow-1);
}
.rr-home-visit__form .rr-field { margin-bottom: var(--rr-5); }
/* Inside a grid the row gap already separates the fields; a margin on top of
   it makes the two rows sit unevenly against each other. */
.rr-home-visit__form .rr-grid { margin-bottom: var(--rr-5); }
.rr-home-visit__form .rr-grid .rr-field { margin-bottom: 0; }

@media (max-width: 860px) {
    .rr-home-trust__grid { grid-template-columns: 1fr; }
    .rr-home-trust__figure { order: -1; }
    .rr-home-trust__figure img { height: 260px; }
    .rr-home-hero { min-height: 0; }
    .rr-home-hero__inner { padding-top: var(--rr-8); padding-bottom: var(--rr-7); }
    .rr-home-visit__form { padding: var(--rr-5); }
}

/* ==========================================================================
   About and Contact
   ========================================================================== */

.rr-about-hero { padding-bottom: var(--rr-7); }

.rr-about-list { margin: 0 0 var(--rr-4); padding-left: var(--rr-5); color: var(--rr-ink-700); }
.rr-about-list li { margin-bottom: var(--rr-2); }

.rr-about-rudep {
    display: grid; gap: var(--rr-7);
    grid-template-columns: 1.6fr 1fr; align-items: start;
}
.rr .rr-about-rudep h2 { margin-top: 0; }
.rr-about-fees { position: sticky; top: var(--rr-5); }
.rr-about-fees dd { font-weight: 700; color: var(--rr-green-800); font-variant-numeric: tabular-nums; }

/* Board of directors. Portraits are a fixed aspect so a mixed set of source
   photographs still lines up as a grid. */
/* ==========================================================================
   Split section: copy on one side, a figure on the other
   ========================================================================== */

.rr-split { display: grid; gap: var(--rr-6); align-items: center; }
.rr-split__text > :first-child { margin-top: 0; }
.rr-split__figure { min-width: 0; }

@media (min-width: 900px) {
    /* The text keeps the larger share: this is a page to read, and the figure
       is there to support it rather than compete with it. */
    .rr-split { grid-template-columns: 1.15fr .85fr; gap: var(--rr-7); }

    /* Except where the figure is made of long numbers, which need the room:
       a nine-figure sum in a narrow column breaks across two lines mid-number,
       and "3,000,000,0 / 00" is not a number anybody can read. */
    .rr-split--even { grid-template-columns: 1fr 1fr; }
}

/* An inline SVG figure. Sized by its container, never by the viewBox. */
.rr-figure-svg { display: block; width: 100%; height: auto; }

/* A figure made of numbers rather than a drawing. */
.rr-figurecard {
    background: var(--rr-surface); border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg); padding: var(--rr-5);
    box-shadow: var(--rr-shadow-1);
}
.rr-figurecard__grid {
    display: grid; gap: var(--rr-5);
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.rr-figurecard__note {
    margin: var(--rr-5) 0 0; padding-top: var(--rr-4);
    border-top: 1px solid var(--rr-line);
    font-size: .82rem; color: var(--rr-ink-500); line-height: 1.5;
}
/* Never broken across lines: a sum is one word however long it is. */
.rr-figurecard .rr-stat__value {
    font-size: clamp(1.05rem, .75rem + .6vw, 1.35rem);
    white-space: nowrap;
}

/* ==========================================================================
   Accordion — native <details>, no script
   ========================================================================== */

.rr-accordion { display: grid; gap: var(--rr-3); }
.rr-accordion__item {
    background: var(--rr-surface); border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg); overflow: hidden;
}
.rr-accordion__item[open] { box-shadow: var(--rr-shadow-1); }

.rr-accordion__summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--rr-4);
    padding: var(--rr-4) var(--rr-5);
    cursor: pointer; list-style: none;
    font-family: var(--rr-font-display); font-size: 1.05rem;
    color: var(--rr-green-800);
}
/* The default disclosure triangle, gone in both engines, replaced below. */
.rr-accordion__summary::-webkit-details-marker { display: none; }
.rr-accordion__summary::marker { content: ""; }

.rr-accordion__summary:hover { background: var(--rr-green-050); }
/* Focus has to be visible: this is the only way to operate it from a keyboard. */
.rr-accordion__summary:focus-visible {
    outline: 3px solid var(--rr-green-700); outline-offset: -3px;
}

.rr-accordion__title { min-width: 0; }

/* A plus that becomes a minus. Two bars, one of which rotates away. */
.rr-accordion__marker {
    position: relative; flex: 0 0 auto; width: 18px; height: 18px;
}
.rr-accordion__marker::before,
.rr-accordion__marker::after {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 18px; height: 2px; border-radius: 2px;
    background: var(--rr-green-700);
}
/* Vertical, so the two bars read as a plus. Open, it turns to lie flat. */
.rr-accordion__marker::after { transform: rotate(90deg); }

.rr-accordion__body { padding: 0 var(--rr-5) var(--rr-5); }
.rr-accordion__body p { margin: 0; }

/*
   Opening the panel.

   A <details> element snaps open with no transition of its own, so the panel
   is animated rather than the element: it slides down and fades in from just
   above its resting position. The animation runs on open only — closing stays
   instant, because an element that lingers while collapsing makes a page feel
   slow rather than lively.

   grid-template-rows on the item itself would animate the height too, but it
   fights the browser's own open/close and behaves badly in Safari; this is the
   version that works the same in every engine.
*/
@media (prefers-reduced-motion: no-preference) {
    .rr-accordion__item[open] .rr-accordion__body {
        animation: rr-accordion-open .32s cubic-bezier(.2, .7, .3, 1) both;
    }
    .rr-accordion__marker::before,
    .rr-accordion__marker::after { transition: transform .28s cubic-bezier(.2, .7, .3, 1); }
    .rr-accordion__item { transition: box-shadow var(--rr-ease), border-color var(--rr-ease); }
}

@keyframes rr-accordion-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* The whole plus rotates as it becomes a minus, rather than one bar vanishing. */
.rr-accordion__item[open] .rr-accordion__marker::before { transform: rotate(180deg); }
.rr-accordion__item[open] .rr-accordion__marker::after  { transform: rotate(180deg); }
.rr-accordion__item[open] { border-color: var(--rr-green-100); }

.rr-people {
    display: grid; gap: var(--rr-5);
    /* 260px gives four across a 1200px container, so the seven-person board
       falls 4 + 3 rather than 5 + 2. */
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/*
   The board in two rows: the three officers across a third each, then the four
   members across a quarter each. Explicit column counts rather than auto-fill,
   because the split carries meaning — who holds an office and who does not —
   and must not reflow into 2 + 5 on an awkward width.
*/
.rr-people--lead { grid-template-columns: 1fr; }
.rr-people--rest { grid-template-columns: repeat(2, 1fr); margin-top: var(--rr-5); }

@media (min-width: 620px) {
    .rr-people--lead { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
    .rr-people--rest { grid-template-columns: repeat(4, 1fr); }
}

/* The officers are shown larger, so their portraits get a wider crop. */
.rr-people--lead .rr-person img { aspect-ratio: 4 / 5; }
.rr-people--lead .rr-person strong { font-size: 1.08rem; }
.rr-person { margin: 0; }
.rr-person img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top;
    border-radius: var(--rr-radius-lg); background: var(--rr-ground-2);
    box-shadow: var(--rr-shadow-1);
}
.rr-person figcaption { margin-top: var(--rr-3); display: grid; gap: 2px; }
.rr-person strong { color: var(--rr-ink-900); }

/* ==========================================================================
   Long-form prose — the guides
   ========================================================================== */

/* A measure of roughly 70 characters. Longer and the eye loses the start of
   the next line; these are pages people actually read to the end. */
.rr-prose { max-width: 68ch; }
.rr-prose > * + * { margin-top: var(--rr-4); }
.rr-prose h2 {
    font-size: clamp(1.3rem, 1rem + .7vw, 1.6rem);
    margin-top: var(--rr-7); color: var(--rr-green-800);
}
.rr-prose h2 + p, .rr-prose h2 + ul, .rr-prose h2 + ol { margin-top: var(--rr-3); }
.rr-prose p, .rr-prose li { line-height: 1.68; }
.rr-prose ul, .rr-prose ol { padding-left: var(--rr-5); display: grid; gap: var(--rr-2); }
.rr-prose__lead {
    font-size: 1.1rem; color: var(--rr-ink-700);
    border-left: 3px solid var(--rr-green-500);
    padding-left: var(--rr-4);
}
.rr-prose strong { color: var(--rr-green-900); }

.rr-callout {
    background: var(--rr-green-050); border: 1px solid var(--rr-green-100);
    border-radius: var(--rr-radius-lg); padding: var(--rr-5);
}
.rr-callout--tight { margin-top: var(--rr-6); padding: var(--rr-4) var(--rr-5); }

.rr-guide-more { margin-top: var(--rr-7); padding-top: var(--rr-5); border-top: 1px solid var(--rr-line); }
.rr-guide-more ul { list-style: none; padding: 0; display: grid; gap: var(--rr-3); margin: var(--rr-3) 0 0; }

/* The whole card is the target, so a thumb has something to hit. */
.rr-guide-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.rr-guide-link:hover .rr-card__title { color: var(--rr-green-600); }
.rr-guide-link:focus-visible { outline: 3px solid var(--rr-gold-500); outline-offset: 2px; border-radius: var(--rr-radius-lg); }

/* A row of buttons that is simply a row of buttons. Distinct from
   .rr-actionbar, which is a sticky footer for a form's primary action. */
.rr-buttonrow { display: flex; flex-wrap: wrap; gap: var(--rr-3); }
@media (max-width: 560px) {
    .rr-buttonrow { flex-direction: column; align-items: stretch; }
    .rr-buttonrow .rr-btn { width: 100%; justify-content: center; }
}

/* Plots on the member dashboard: separated from the membership figures above
   it, because the two are different accounts of the same person. */
.rr-plotmodule {
    margin-bottom: var(--rr-7); padding-top: var(--rr-6);
    border-top: 1px solid var(--rr-line);
}

/* ==========================================================================
   Welcome-back summary, raised once on signing in
   ========================================================================== */

.rr-welcome {
    width: min(520px, 92vw);
    padding: var(--rr-6);
    border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg);
    background: var(--rr-surface);
    box-shadow: var(--rr-shadow-2);
    margin: auto;
    color: var(--rr-ink-700);
}
.rr-welcome::backdrop { background: rgba(13, 59, 36, .55); }

.rr-welcome__title {
    margin: 0; font-size: 1.4rem; color: var(--rr-green-800);
}
.rr-welcome__who { margin: var(--rr-1) 0 var(--rr-5); color: var(--rr-ink-500); font-size: .9rem; }
.rr-welcome__lead { margin: 0 0 var(--rr-3); }

.rr-welcome__list { margin: 0 0 var(--rr-5); padding-left: var(--rr-5); display: grid; gap: var(--rr-3); }
.rr-welcome__list li { line-height: 1.5; }

.rr-welcome__actions { display: flex; flex-wrap: wrap; gap: var(--rr-3); }

@media (prefers-reduced-motion: no-preference) {
    .rr-welcome[open] { animation: rr-preview-in .22s cubic-bezier(.2, .7, .3, 1) both; }
}

/* ==========================================================================
   Document preview dialog
   ========================================================================== */

.rr-preview {
    width: min(940px, 92vw);
    height: min(86vh, 900px);
    padding: 0;
    border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg);
    background: var(--rr-surface);
    box-shadow: var(--rr-shadow-2);
    /* A dialog is centred by the browser, but only once it has no margin
       fighting it. */
    margin: auto;
    overflow: hidden;
    /* A column, so the frame takes whatever the header leaves rather than
       being told a pixel height that has to be kept in step with it by hand. */
    flex-direction: column;
}
.rr-preview[open] { display: flex; }
.rr-preview::backdrop { background: rgba(13, 59, 36, .55); }

.rr-preview__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--rr-4); flex: 0 0 auto;
    padding: var(--rr-4) var(--rr-5);
    border-bottom: 1px solid var(--rr-line);
    background: var(--rr-ground);
}
.rr-preview__title {
    margin: 0; font-size: 1.05rem; color: var(--rr-green-800);
    /* A long document title must not push the buttons off the edge. */
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rr-preview__actions { display: flex; gap: var(--rr-2); flex: 0 0 auto; }

.rr-preview__frame {
    display: block; width: 100%; border: 0;
    flex: 1 1 auto; min-height: 0;
    background: var(--rr-ground-2);
}

/* Sits behind the frame: visible only if the frame renders nothing. */
.rr-preview__fallback {
    position: absolute; left: 0; right: 0; top: 50%;
    margin: 0; padding: var(--rr-5);
    text-align: center; z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
    .rr-preview[open] { animation: rr-preview-in .22s cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes rr-preview-in {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

.rr-gallery-grid {
    display: grid; gap: var(--rr-4);
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.rr-gallery-grid img {
    width: 100%; height: 220px; object-fit: cover;
    border-radius: var(--rr-radius); background: var(--rr-ground-2);
}

.rr-contact { display: grid; gap: var(--rr-7); grid-template-columns: 1.4fr 1fr; align-items: start; }
.rr .rr-contact h2 { margin-top: 0; }
.rr-contact__form { margin-top: var(--rr-5); }
.rr-contact__form .rr-field { margin-bottom: var(--rr-4); }
.rr-contact__form .rr-grid .rr-field { margin-bottom: var(--rr-3); }
.rr-contact__aside {
    background: var(--rr-green-050); border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg); padding: var(--rr-6);
}

@media (max-width: 860px) {
    .rr-about-rudep, .rr-contact { grid-template-columns: 1fr; }
    .rr-about-fees { position: static; }
}

/* ==========================================================================
   Homepage, part two: quick search, trust strip, buying journey, FAQ
   ========================================================================== */

/* --- Compact search ------------------------------------------------------- */

.rr-quicksearch { background: var(--rr-green-800); padding: var(--rr-5) 0; }
.rr-quicksearch__form {
    display: grid; gap: var(--rr-4); align-items: end;
    grid-template-columns: 1.4fr 1fr 1fr auto;
}
.rr-quicksearch .rr-field { margin: 0; }
.rr-quicksearch .rr-label { color: #cadbd1; font-size: .82rem; }
.rr-quicksearch .rr-btn { min-height: 44px; }

/* --- Trust strip ---------------------------------------------------------- */

.rr-trustbar { background: var(--rr-surface); border-bottom: 1px solid var(--rr-line); }
.rr-trustbar__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--rr-5);
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.rr .rr-trustbar h3 {
    font-family: var(--rr-font-sans); font-size: .95rem; font-weight: 700;
    letter-spacing: 0; margin: 0 0 var(--rr-2);
    padding-top: var(--rr-3); border-top: 2px solid var(--rr-gold-500);
}
.rr .rr-trustbar p { margin: 0; color: var(--rr-ink-500); max-width: 34ch; }

/* --- The six-stage buying journey ----------------------------------------
   A numbered list that reads as a sequence rather than six unrelated cards:
   the connecting rule runs behind the markers and stops at the last one. */

/*
   The buying journey, laid out as a reverse S.

   Wide screens get 1-2-3 across the top and 4-5-6 across the bottom running
   back the other way, so the six stages read as one path rather than as six
   boxes. Grid placement does the reversing; the markup stays in order 1..6, so
   reading order, tab order and the single-column phone layout need no special
   handling at all.

   Every connector carries an arrowhead. A row that runs right to left has to
   say so — ascending numbers on their own do not overcome the habit of reading
   left to right, and a "how it works" diagram that has to be puzzled out has
   failed at the one thing it is for.
*/
.rr-journey {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--rr-6) var(--rr-5);
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.rr-journey__step { position: relative; }
.rr-journey__num {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--rr-green-700); color: #fff;
    font-weight: 700; font-size: 1rem;
    margin-bottom: var(--rr-3);
    box-shadow: 0 0 0 5px var(--rr-ground);
}
.rr .rr-journey h3 { margin: 0 0 var(--rr-2); font-size: 1.05rem; }
.rr .rr-journey p { margin: 0; color: var(--rr-ink-500); }

/* --- Serpentine, three across ------------------------------------------ */
@media (min-width: 900px) {
    .rr-journey--serpentine {
        /* A fourth, empty column reserves a lane for the U-turn at the end of
           the first row. Without it the only route from step 3 to step 4 — they
           share a column — runs straight down through step 3's own paragraph,
           which reads as a mistake rather than as a path. */
        grid-template-columns: repeat(3, 1fr) 52px;
        column-gap: var(--rr-7);
        row-gap: var(--rr-8);
    }

    /* The second row runs back the other way, so 4 sits directly below 3. */
    .rr-journey--serpentine > :nth-child(4) { grid-column: 3; grid-row: 2; }
    .rr-journey--serpentine > :nth-child(5) { grid-column: 2; grid-row: 2; }
    .rr-journey--serpentine > :nth-child(6) { grid-column: 1; grid-row: 2; }

    /*
       Fallback rails, used only until the curve is drawn.

       The script computes an SVG path from the real marker positions; these
       straight rules stand in for it if the script never runs, so the steps are
       still visibly connected. .has-curve on the wrapper hides them.

       Travel is 1>2>3, then down, then 4>5>6 leaning left, so the rail always
       sits in the gutter the path is about to cross: to the RIGHT of 1 and 2,
       and to the LEFT of 4 and 5. Step 3 turns downward and 6 is the end.
    */
    .rr-journey--serpentine > :nth-child(1)::before,
    .rr-journey--serpentine > :nth-child(2)::before,
    .rr-journey--serpentine > :nth-child(4)::before,
    .rr-journey--serpentine > :nth-child(5)::before {
        content: ""; position: absolute; top: 18px; height: 2px;
        background: var(--rr-green-100);
    }
    .rr-journey--serpentine > :nth-child(1)::before,
    .rr-journey--serpentine > :nth-child(2)::before { left: 46px; right: calc(var(--rr-7) * -1); }
    .rr-journey--serpentine > :nth-child(4)::before,
    .rr-journey--serpentine > :nth-child(5)::before {
        right: calc(100% + 8px); left: calc(-100% - var(--rr-7) + 46px);
    }

}

/* Below 900px the path is simply a vertical timeline, in document order. */
.rr-journey__turn { display: none; }

@media (max-width: 899px) {
    .rr-journey--serpentine { grid-template-columns: 1fr; row-gap: var(--rr-5); }
    .rr-journey--serpentine > li { padding-left: 56px; }
    .rr-journey--serpentine > li .rr-journey__num { position: absolute; left: 0; top: 0; margin: 0; }
    .rr-journey--serpentine > li:not(:last-child)::before {
        content: ""; position: absolute; left: 18px; top: 38px; bottom: calc(var(--rr-5) * -1);
        width: 2px; background: var(--rr-green-100);
    }
}

/* --- FAQ ------------------------------------------------------------------ */

.rr-faq-section { background: var(--rr-green-050); }
.rr-faq {
    display: grid; gap: var(--rr-3);
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    align-items: start;
}
.rr-faq__item {
    background: var(--rr-surface);
    border: 1px solid var(--rr-line); border-radius: var(--rr-radius-lg);
    padding: var(--rr-4) var(--rr-5);
}
.rr-faq__item summary {
    cursor: pointer; font-weight: 600; color: var(--rr-green-900);
    list-style: none; display: flex; align-items: flex-start; gap: var(--rr-3);
}
.rr-faq__item summary::-webkit-details-marker { display: none; }
.rr-faq__item summary::before {
    content: "+"; flex: 0 0 auto;
    font-weight: 400; font-size: 1.25rem; line-height: 1.2;
    color: var(--rr-green-600); transition: transform var(--rr-ease);
}
.rr-faq__item[open] summary::before { content: "\2212"; }
.rr .rr-faq__item p { margin: var(--rr-3) 0 0 27px; color: var(--rr-ink-700); }

.rr-home-visit__alt { margin-top: var(--rr-5); text-align: center; }

@media (max-width: 860px) {
    .rr-quicksearch__form { grid-template-columns: 1fr; }
    .rr-quicksearch .rr-btn { width: 100%; }
    .rr-journey__step::before { display: none; }
}

/* ==========================================================================
   Resource Centre
   ========================================================================== */

.rr-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Guide cards: the buyer education that already exists as real pages. */
.rr-guide {
    display: block; text-decoration: none;
    background: var(--rr-surface); border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg); padding: var(--rr-5);
    transition: border-color var(--rr-ease), box-shadow var(--rr-ease);
}
.rr-guide:hover { border-color: var(--rr-green-500); box-shadow: var(--rr-shadow-2); }
.rr .rr-guide__title { font-size: 1.1rem; margin: 0 0 var(--rr-2); }
.rr .rr-guide p { color: var(--rr-ink-500); margin: 0 0 var(--rr-4); }
.rr-guide__go { color: var(--rr-green-700); font-weight: 600; font-size: .9rem; }

/* Document list. A list rather than a table: each row is one document with a
   single action, and that reflows onto a phone without a horizontal scroll. */
.rr-doclist { list-style: none; margin: var(--rr-5) 0 0; padding: 0; display: grid; gap: var(--rr-3); }
.rr-doc {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: var(--rr-4); align-items: center;
    background: var(--rr-surface); border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg); padding: var(--rr-4) var(--rr-5);
}
.rr-doc__icon {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 56px; flex: 0 0 auto;
    background: var(--rr-green-050); border: 1px solid var(--rr-green-100);
    border-radius: var(--rr-radius-sm);
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    color: var(--rr-green-700);
}
.rr .rr-doc__title { font-size: 1.05rem; margin: 0 0 var(--rr-1); }
.rr .rr-doc__detail { margin: 0 0 var(--rr-2); color: var(--rr-ink-700); }
.rr .rr-doc__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--rr-3); align-items: center; }

/* --- Pagination ----------------------------------------------------------- */

.rr-pagination {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: var(--rr-2); margin-top: var(--rr-7);
}
.rr-pagination__pages { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--rr-2); }
.rr-pagination__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; min-height: 42px; padding: 0 var(--rr-3);
    border: 1px solid var(--rr-line); border-radius: var(--rr-radius);
    background: var(--rr-surface); color: var(--rr-ink-700);
    text-decoration: none; font-weight: 600; font-size: .9rem;
    transition: border-color var(--rr-ease), background var(--rr-ease);
}
.rr-pagination__link:hover { border-color: var(--rr-green-500); color: var(--rr-green-800); }
.rr-pagination__link.is-current {
    background: var(--rr-green-700); border-color: var(--rr-green-700); color: #fff;
}
.rr-pagination__link.is-disabled { opacity: .45; pointer-events: none; }
.rr-pagination__gap { display: inline-flex; align-items: center; min-height: 42px; padding: 0 var(--rr-2); color: var(--rr-ink-300); }

@media (max-width: 720px) {
    .rr-doc { grid-template-columns: auto 1fr; }
    .rr-doc__action { grid-column: 1 / -1; }
    .rr-doc__action .rr-btn { width: 100%; }
}

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   The Concept Note asks for "minimal animation" and says polish should come
   from hierarchy and consistency rather than visual noise. So: things settle
   into place as you reach them, surfaces respond when you point at them, and
   nothing bounces, spins or slides across the screen.

   Every rule here is inside a motion-safe guard. Anyone whose system asks for
   reduced motion gets the finished layout with no movement at all — that is a
   stated preference, not a nice-to-have.
   ========================================================================== */

/* Placeholder photography sits under a label so it is never mistaken for a
   photograph of the specific plot. */
.rr-card__media { position: relative; overflow: hidden; }
.rr-card__media-note {
    position: absolute; left: var(--rr-3); bottom: var(--rr-3);
    background: rgba(8, 34, 20, .72); color: #fff;
    padding: 4px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    backdrop-filter: blur(3px);
}
.rr-plot-fallback { margin: 0 0 var(--rr-6); }
.rr-plot-fallback img {
    width: 100%; height: 380px; object-fit: cover;
    border-radius: var(--rr-radius-lg);
}
.rr-plot-fallback figcaption { margin-top: var(--rr-3); }

@media (prefers-reduced-motion: no-preference) {

    html { scroll-behavior: smooth; }
    /* The header is sticky, so an anchor would otherwise land underneath it. */
    :target, [id] { scroll-margin-top: 96px; }

    /* --- Reveal on scroll -------------------------------------------------
       Applied by script, never by the stylesheet alone: if the script does not
       run, .rr-reveal is never added and everything is simply visible. */
    .rr-reveal {
        opacity: 0; transform: translateY(18px);
        transition: opacity .55s cubic-bezier(.2, .6, .2, 1),
                    transform .55s cubic-bezier(.2, .6, .2, 1);
    }
    .rr-reveal.is-in { opacity: 1; transform: none; }
    /* Children of a revealed group arrive just behind their parent, in order. */
    .rr-reveal[style*="--rr-delay"] { transition-delay: var(--rr-delay); }

    /* --- Cards ------------------------------------------------------------ */
    .rr-card {
        transition: transform var(--rr-ease), box-shadow var(--rr-ease), border-color var(--rr-ease);
    }
    .rr-card--interactive:hover { transform: translateY(-3px); }
    .rr-card__media img { transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
    .rr-card--interactive:hover .rr-card__media img { transform: scale(1.045); }

    /* --- Buttons and links ------------------------------------------------ */
    .rr-btn { transition: background var(--rr-ease), border-color var(--rr-ease),
                          color var(--rr-ease), transform var(--rr-ease), box-shadow var(--rr-ease); }
    .rr-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(23, 89, 58, .28); }
    .rr-btn:active { transform: translateY(0); }

    /* The nav underline grows from the middle rather than blinking on. */
    .rr-nav a, .rr-menu__trigger { position: relative; border-bottom-color: transparent; }
    .rr-nav a::after, .rr-menu__trigger::after {
        content: ""; position: absolute; left: 50%; right: 50%; bottom: -2px;
        height: 2px; background: var(--rr-green-700);
        transition: left var(--rr-ease), right var(--rr-ease);
    }
    .rr-nav a:hover::after, .rr-menu__trigger:hover::after,
    .rr-nav a[aria-current="page"]::after, .rr-menu__trigger[aria-current="page"]::after {
        left: 0; right: 0;
    }

    /* --- Hero -------------------------------------------------------------
       A very slow drift on the photograph. Two per cent over twenty seconds is
       below the threshold at which it reads as movement; it just stops the
       image feeling like a flat backdrop. */
    .rr-home-hero__media img { animation: rr-drift 26s ease-in-out infinite alternate; }
    @keyframes rr-drift { from { transform: scale(1); } to { transform: scale(1.05); } }

    .rr-home-hero__eyebrow, .rr-home-hero h1, .rr-home-hero__lede, .rr-home-hero .rr-hero__actions {
        animation: rr-rise .7s cubic-bezier(.2, .6, .2, 1) both;
    }
    .rr-home-hero h1              { animation-delay: .06s; }
    .rr-home-hero__lede           { animation-delay: .12s; }
    .rr-home-hero .rr-hero__actions { animation-delay: .18s; }
    @keyframes rr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    /* --- FAQ -------------------------------------------------------------- */
    .rr-faq__item { transition: border-color var(--rr-ease), box-shadow var(--rr-ease); }
    .rr-faq__item:hover { border-color: var(--rr-green-500); }
    .rr-faq__item[open] { box-shadow: var(--rr-shadow-1); }
    .rr-faq__item[open] p { animation: rr-rise .3s ease both; }

    /* --- Document rows and guides ----------------------------------------- */
    .rr-doc { transition: border-color var(--rr-ease), transform var(--rr-ease); }
    .rr-doc:hover { border-color: var(--rr-green-500); transform: translateX(2px); }
    .rr-guide { transition: border-color var(--rr-ease), box-shadow var(--rr-ease), transform var(--rr-ease); }
    .rr-guide:hover { transform: translateY(-3px); }
    .rr-guide__go { transition: letter-spacing var(--rr-ease); }
    .rr-guide:hover .rr-guide__go { letter-spacing: .01em; }

    /* --- Board portraits --------------------------------------------------- */
    .rr-person img { transition: transform .5s cubic-bezier(.2,.6,.2,1), box-shadow var(--rr-ease); }
    .rr-person:hover img { transform: translateY(-4px); box-shadow: var(--rr-shadow-2); }

    /* --- Gallery ----------------------------------------------------------- */
    .rr-gallery-grid img { transition: transform .5s cubic-bezier(.2,.6,.2,1), filter var(--rr-ease); }
    .rr-gallery-grid img:hover { transform: scale(1.02); }
}

/* ==========================================================================
   Brand marks, and the ways to reach a person
   ========================================================================== */

.rr-home-hero__logo {
    display: block; height: 82px; width: auto;
    margin: 0 0 var(--rr-5);
    /* A soft drop shadow so the white mark holds its edge wherever the
       photograph behind it happens to be light. */
    filter: drop-shadow(0 2px 10px rgba(8, 34, 20, .55));
}

.rr-footer__logo { display: block; height: 64px; width: auto; margin: 0 0 var(--rr-4); opacity: .95; }

/* --- Call, WhatsApp, message ---------------------------------------------
   Three equal targets rather than one sentence with links buried in it. Each
   is a whole card, so it is a comfortable tap target on a phone. */
.rr-contact-options { margin-top: var(--rr-7); }
.rr .rr-contact-options__lead {
    margin: 0 0 var(--rr-4); text-align: center;
    font-weight: 600; color: var(--rr-green-900);
}
.rr-contact-options__grid {
    display: grid; gap: var(--rr-3);
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.rr-contact-option {
    display: flex; align-items: center; gap: var(--rr-4);
    padding: var(--rr-4) var(--rr-5);
    background: var(--rr-surface);
    border: 1px solid var(--rr-line); border-radius: var(--rr-radius-lg);
    text-decoration: none; color: inherit;
    transition: border-color var(--rr-ease), box-shadow var(--rr-ease), transform var(--rr-ease);
}
.rr-contact-option:hover { border-color: var(--rr-green-500); box-shadow: var(--rr-shadow-1); }
.rr-contact-option__icon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--rr-green-050); color: var(--rr-green-700);
}
.rr-contact-option__icon svg { width: 20px; height: 20px; }
.rr-contact-option__body { display: grid; gap: 2px; min-width: 0; }
.rr-contact-option__body strong { color: var(--rr-green-900); }

@media (prefers-reduced-motion: no-preference) {
    .rr-contact-option:hover { transform: translateY(-2px); }
    .rr-contact-option__icon { transition: background var(--rr-ease), color var(--rr-ease); }
    .rr-contact-option:hover .rr-contact-option__icon { background: var(--rr-green-700); color: #fff; }
}

@media (max-width: 860px) {
    .rr-home-hero__logo { height: 62px; margin-bottom: var(--rr-4); }
}

/* ==========================================================================
   The buying journey's connecting curve
   --------------------------------------------------------------------------
   An SVG drawn behind the steps from their real marker positions. The number
   circles carry a ring in the page's ground colour, so the curve appears to
   pass behind them and stop cleanly at each one.
   ========================================================================== */

.rr-journey-wrap { position: relative; }

.rr-journey__path {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    overflow: visible; pointer-events: none;
}

.rr-journey__link {
    fill: none;
    /* green-100 was invisible against a warm cream ground. A mid green held
       back to half opacity reads as a route without competing with the text
       it passes behind. */
    stroke: var(--rr-green-500);
    stroke-opacity: .5;
    stroke-width: 2.5;
    stroke-linecap: round;
    /*
        Deliberately NOT vector-effect: non-scaling-stroke.

        It makes stroke-dasharray measure in device pixels rather than user
        units, so on a 2x display every path drew to exactly half its length and
        the route stopped dead halfway along. The svg is sized to the block with
        a matching viewBox, so the scale is 1:1 and the stroke needs no help.
    */
}
.rr-journey__arrow { fill: var(--rr-green-600); }

/* Once the script has drawn the real path, the straight stand-in goes. */
.rr-journey-wrap.has-curve .rr-journey--serpentine > li::before,
.rr-journey-wrap.has-curve .rr-journey--serpentine > li::after { display: none; }

@media (prefers-reduced-motion: no-preference) {
    /* Each link draws itself along its own length, in order, once the block is
       reached. The delays are set per element by the script. */
    .rr-journey__link {
        transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .2, 1);
    }
    .rr-journey__arrow { transition: opacity .4s ease; }
    .rr-journey-wrap.is-drawn .rr-journey__link  { stroke-dashoffset: 0 !important; }
    .rr-journey-wrap.is-drawn .rr-journey__arrow { opacity: 1 !important; }
}

/* On a narrow screen the steps stack, and the same code draws a snaking
   vertical line instead. The CSS fallback rail is a straight one. */
@media (max-width: 899px) {
    .rr-journey-wrap.has-curve .rr-journey--serpentine > li:not(:last-child)::before { display: none; }
}

/* Transfer progress on a property card. Deliberately set apart from the money
   figures above it, because payment status and legal transfer are different
   facts and the layout should not let them blur into one. */
.rr-transfer {
    margin-top: var(--rr-5); padding-top: var(--rr-4);
    border-top: 1px solid var(--rr-line);
}
.rr .rr-transfer__head {
    font-family: var(--rr-font-sans); font-size: .82rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--rr-ink-500);
    margin: 0 0 var(--rr-2);
}
.rr .rr-transfer__stage { margin: 0 0 var(--rr-1); font-weight: 600; color: var(--rr-green-800); }

/* --- "What to do next" -----------------------------------------------------
   Sits above the figures, because a dashboard should lead with what needs
   doing rather than with what has already happened. Urgency is carried by a
   word in the text as well as the edge colour — never colour alone. */
.rr-nextup {
    background: var(--rr-surface); border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg); padding: var(--rr-5);
    margin-bottom: var(--rr-6);
}
.rr .rr-nextup__head {
    font-family: var(--rr-font-sans); font-size: .82rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--rr-ink-500);
    margin: 0 0 var(--rr-4);
}
.rr-nextup__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rr-3); }
.rr-nextup__item {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--rr-4); flex-wrap: wrap;
    padding: var(--rr-3) var(--rr-4);
    border-left: 3px solid var(--rr-line);
    background: var(--rr-ground);
    border-radius: 0 var(--rr-radius) var(--rr-radius) 0;
}
.rr-nextup__item--now  { border-left-color: var(--rr-reserved-fg); }
.rr-nextup__item--soon { border-left-color: var(--rr-gold-500); }
.rr-nextup__item--none { border-left-color: var(--rr-green-500); }
.rr .rr-nextup__text { margin: 0 0 2px; font-weight: 600; color: var(--rr-ink-900); }

/* --- Payment progress ------------------------------------------------------
   A bar is a summary, never the fact: the percentage is written beside it in
   words as well, because a bar cannot be read by a screen reader or by anyone
   who cannot judge a length precisely. */
.rr-progress {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: var(--rr-ground-2); border: 1px solid var(--rr-line);
    margin: var(--rr-4) 0 var(--rr-2);
}
.rr-progress > span { display: block; height: 100%; background: var(--rr-green-600); }

.rr-payform { margin-top: var(--rr-5); padding-top: var(--rr-5); border-top: 1px solid var(--rr-line); }
.rr-payform .rr-field { max-width: 320px; }

/* A compact button for table rows, where a full-height control would make every
   row taller than its content needs. */
.rr-btn--sm { min-height: 32px; padding: 0 var(--rr-3); font-size: .82rem; }

.rr-pending-save { display: flex; align-items: center; justify-content: space-between; gap: var(--rr-4); flex-wrap: wrap; }
.rr-saved-item { display: grid; gap: var(--rr-2); align-content: start; }

/* "Save this plot" on the catalogue. A secondary action to Reserve, so it is a
   quiet control rather than a competing one. */
.rr-save-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .85rem; font-weight: 600; color: var(--rr-green-700);
    text-decoration: none;
}
.rr-save-link:hover { text-decoration: underline; }
.rr-save-link::before { content: "\2606"; font-size: 1.1em; line-height: 1; }

.rr-visit-actions { margin-top: var(--rr-5); padding-top: var(--rr-4); border-top: 1px solid var(--rr-line); }
.rr-visit-actions summary { cursor: pointer; font-weight: 600; color: var(--rr-green-700); font-size: .92rem; }
.rr-visit-actions .rr-field { max-width: 280px; }

/* --- Member price, compare and save on a card ------------------------------ */

.rr .rr-card__memberprice {
    margin: var(--rr-1) 0 0; font-size: .85rem; font-weight: 600;
    color: var(--rr-green-700);
}

/* The same statement on the plot's own page, where the decision is made. */
.rr .rr-passport__memberprice {
    margin: var(--rr-2) 0 0; font-size: .95rem; font-weight: 600;
    color: var(--rr-green-700);
}

.rr-card__tools {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--rr-3);
    padding: var(--rr-3) var(--rr-5);
    border-top: 1px solid var(--rr-line);
}
/*
    Compare and Save are the two things a reader does from a card, and on a
    phone they were a 16px checkbox and a 21px link — well under the ~44px a
    thumb reliably hits, so both were a game of chance next to each other.

    The box and the star stay their drawn size; it is the TARGET that grows,
    through vertical padding and a min-height on the label and the link. The
    card looks the same and is twice as easy to use.
*/
.rr-compare-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: var(--rr-2) 0;
    font-size: .85rem; font-weight: 600; color: var(--rr-ink-700); cursor: pointer;
}
.rr-compare-toggle input { width: 20px; height: 20px; accent-color: var(--rr-green-700); }
.rr-card__tools .rr-save-link { min-height: 44px; padding: var(--rr-2) 0; }
.rr-save-link--sm::before { font-size: 1em; }

/* The row itself keeps its height from the targets inside it rather than
   adding padding on top of them. */
.rr-card__tools { padding-top: 0; padding-bottom: 0; }

/* The comparison tray. Fixed to the foot of the window while plots are picked,
   so the choice travels with the reader down a long catalogue. */
.rr-compare-tray {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--rr-green-900); color: #fff;
    padding: var(--rr-4) 0;
    box-shadow: 0 -4px 20px rgba(8, 34, 20, .28);
}
.rr-compare-tray[hidden] { display: none !important; }
.rr-compare-tray__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--rr-4); flex-wrap: wrap;
}
.rr-compare-tray__count { margin: 0; font-weight: 600; }
.rr-compare-tray__names { margin: 0; font-size: .85rem; color: #b9cec2; }

/* Comparison table. Scrolls inside itself rather than pushing the page wide. */
.rr-compare-wrap { overflow-x: auto; }
.rr-compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.rr-compare-table th, .rr-compare-table td {
    padding: var(--rr-3) var(--rr-4); border-bottom: 1px solid var(--rr-line);
    text-align: left; vertical-align: top;
}
.rr-compare-table thead th { background: var(--rr-green-050); color: var(--rr-green-900); }
.rr-compare-table tbody th { width: 200px; color: var(--rr-ink-500); font-weight: 500; }

/* Recently viewed. A quiet strip, never competing with the catalogue itself. */
.rr-recent { border-top: 1px solid var(--rr-line); }
.rr-recent__list { display: flex; gap: var(--rr-4); overflow-x: auto; padding-bottom: var(--rr-2); list-style: none; margin: 0; }
.rr-recent__item {
    flex: 0 0 auto; width: 200px;
    background: var(--rr-surface); border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius); padding: var(--rr-3) var(--rr-4);
}
.rr-recent__item a { color: var(--rr-green-800); text-decoration: none; font-weight: 600; font-size: .92rem; }
.rr-recent__item a:hover { text-decoration: underline; }

/* --- Share ---------------------------------------------------------------- */
.rr-share {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--rr-3);
    margin-top: var(--rr-5); padding-top: var(--rr-4);
    border-top: 1px solid var(--rr-line);
}
.rr-share__label { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rr-ink-500); }
.rr-share__link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: .88rem; font-weight: 600;
    color: var(--rr-green-700); text-decoration: none;
}
.rr-share__link:hover { text-decoration: underline; }

/* --- Estate plan -----------------------------------------------------------
   A schematic of the parcels on an estate. Status is carried by a word inside
   every tile as well as by its colour, because colour alone communicates
   nothing to a reader who cannot distinguish it. */
.rr-estateplan {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--rr-3);
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
.rr-parcel a {
    display: grid; gap: 2px; align-content: start;
    min-height: 116px; padding: var(--rr-4);
    border-radius: var(--rr-radius); border: 1px solid var(--rr-line);
    background: var(--rr-surface); text-decoration: none;
    transition: transform var(--rr-ease), box-shadow var(--rr-ease);
}
.rr-parcel a:hover { box-shadow: var(--rr-shadow-2); }
.rr-parcel__no     { font-weight: 700; color: var(--rr-green-900); }
.rr-parcel__meta   { font-size: .8rem; color: var(--rr-ink-500); }
.rr-parcel__status { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: var(--rr-2); }
.rr-parcel__price  { font-size: .85rem; font-weight: 600; color: var(--rr-ink-700); }

.rr-parcel.is-available a { border-color: #bcd8c7; background: var(--rr-available-bg); }
.rr-parcel.is-available .rr-parcel__status { color: var(--rr-available-fg); }
.rr-parcel.is-reserved  a { border-color: #e6d3a4; background: var(--rr-reserved-bg); }
.rr-parcel.is-reserved  .rr-parcel__status { color: var(--rr-reserved-fg); }
.rr-parcel.is-sold      a { border-color: #ddd2ce; background: var(--rr-sold-bg); }
.rr-parcel.is-sold      .rr-parcel__status { color: var(--rr-sold-fg); }
.rr-parcel.is-soon      a { border-color: #c3d6e3; background: var(--rr-soon-bg); }
.rr-parcel.is-soon      .rr-parcel__status { color: var(--rr-soon-fg); }

@media (prefers-reduced-motion: no-preference) {
    .rr-parcel a:hover { transform: translateY(-2px); }
}

/* --- Member portal ---------------------------------------------------------- */

.rr-sidebar__who {
    margin: 0 0 var(--rr-5); padding: 0 var(--rr-4);
    color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.3;
}
.rr-sidebar__who span { display: block; font-weight: 400; font-size: .82rem; color: #a7bcaf; margin-top: 2px; }

/* Support access. Deliberately loud: someone is looking at another person's
   financial records, and both of them should know it. */
.rr-support-banner {
    background: var(--rr-reserved-fg); color: #fff;
    padding: var(--rr-3) var(--rr-5);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--rr-4); flex-wrap: wrap; font-size: .9rem;
}
.rr-support-banner a { color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* --- Tabs ------------------------------------------------------------------
   Real links with their own URLs, not JavaScript panels: a member can bookmark
   the banking tab, and the browser's back button behaves. */
.rr-tabs { display: flex; gap: var(--rr-1); flex-wrap: wrap; border-bottom: 1px solid var(--rr-line); margin-bottom: var(--rr-6); }

/*
    On a phone the tabs scroll sideways rather than wrapping.

    Wrapped, the last tab dropped onto a line of its own under the rule, which
    reads as a heading rather than as one of a set. A single scrolling row keeps
    them recognisably one control, and the cut-off edge is itself the hint that
    there is more to the right.
*/
@media (max-width: 640px) {
    .rr-tabs {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        /* Each tap lands squarely on a tab rather than between two. */
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .rr-tabs::-webkit-scrollbar { display: none; }
    .rr-tab { flex: 0 0 auto; scroll-snap-align: start; }
}
.rr-tab {
    padding: var(--rr-3) var(--rr-4); text-decoration: none;
    color: var(--rr-ink-500); font-weight: 600; font-size: .95rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rr-tab:hover { color: var(--rr-green-700); }
.rr-tab.is-current { color: var(--rr-green-800); border-bottom-color: var(--rr-green-700); }

.rr-check { display: inline-flex; align-items: center; gap: var(--rr-3); cursor: pointer; font-weight: 500; }
.rr-check input { width: 18px; height: 18px; accent-color: var(--rr-green-700); }

/* ---------------------------------------------------------------- inbox ---
   The in-app message list, and the unread badge that leads to it.

   The badge is the only element in the portal whose job is to be noticed, so
   it is the accent colour and nothing else in the sidebar is. It disappears
   entirely at zero rather than showing a "0": a badge that is always there is
   a badge nobody reads.
*/
.rr-sidenav__inbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rr-2);
}

.rr-sidenav__count {
    flex: 0 0 auto;
    min-width: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--rr-gold-500);
    color: #1c1600;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
}

/* The bell on the mobile bar. Hidden on wide screens, where the sidebar's own
   Inbox link is always visible and a second control would be noise.

   No auto margin of its own: .rr-sidebar__barwho already carries one, so the
   name, the bell and the menu button travel to the right edge as a group.
   Giving the bell its own would only matter on a bar with no name, and would
   then strand the name on the left of every bar that has one. */
.rr-sidebar__bell {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    /* 44px, the same target as the menu button beside it. */
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--rr-radius);
    color: #fff;
    text-decoration: none;
}

.rr-sidebar__bell:hover,
.rr-sidebar__bell:focus-visible { background: rgba(255, 255, 255, .12); }

.rr-sidebar__belldot {
    position: absolute;
    top: .25rem;
    right: .2rem;
    min-width: 1.05rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: var(--rr-gold-500);
    color: #1c1600;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}

/* 899px, matching .rr-sidebar__bar exactly. At 900px the bar itself is still
   display:none, so a bell shown one pixel early would float over the page
   attached to nothing. */
@media (max-width: 899px) {
    .rr-sidebar__bell { display: flex; }
}

.rr-inbox {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rr-3);
}

.rr-inbox__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rr-3);
    padding: var(--rr-4);
    background: var(--rr-surface);
    border: 1px solid var(--rr-line);
    border-radius: var(--rr-radius-lg);
}

/* Unread is shown twice on purpose — a coloured rail and a "New" chip. Colour
   alone would leave the distinction invisible to a reader who cannot see it. */
.rr-inbox__item.is-unread { border-color: var(--rr-green-100); }

.rr-inbox__mark {
    width: 4px;
    border-radius: 999px;
    background: transparent;
}

.rr-inbox__item.is-unread .rr-inbox__mark { background: var(--rr-green-500); }

.rr-inbox__title {
    margin: 0;
    font-family: var(--rr-font-display);
    font-weight: 700;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    gap: var(--rr-2);
    flex-wrap: wrap;
}

.rr-inbox__text  { margin: var(--rr-2) 0 0; color: var(--rr-ink-500); }
.rr-inbox__meta  { margin: var(--rr-2) 0 0; font-size: .82rem; color: var(--rr-ink-300); }
.rr-inbox__actions {
    margin: var(--rr-3) 0 0;
    display: flex;
    gap: var(--rr-2);
    flex-wrap: wrap;
    align-items: center;
}
.rr-inbox__actions:empty { display: none; }