/* ============================================================
   ICON — a Rebel Sites template (docs/rebel-sites/concepts/template-icon/icon.css, scoped under .ric). The loan officer
   as a brokerage of one: a night gallery, a full-bleed slideshow of homes, the brand's secondary as the metal, its primary
   as the one jewel, its tertiary as the action that wins every screen. Every colour is theme.ts `iconVars` on the root
   (both tones: `--ic-*-d` the night, `--ic-*-l` the day); this sheet picks by `[data-mode]` and never names a brand colour.
   Words over a photograph stand on the tone's plate (`.on-photo`: the night's at night, held to a white picture under it;
   the day's paper by day, held to a black one). Every rule sits under .ric and every keyframe is ric-* (css-scope).
   ============================================================ */

/* ---------------- tokens: the night (the default tone) ---------------- */
.ric {
  --ground: var(--ic-ground-d); --surface: var(--ic-surface-d); --band: var(--ic-band-d);
  --text: var(--ic-text-d); --dim: var(--ic-dim-d);
  /* the brand's inks by place (theme.ts `inks`), each held to the ground it stands on: the night (-g), its quieter band (-b),
     the raised cards (-s); the metal and the jewel as small words (AA) and as large type, marks and lines (3:1); --room-*:
     the room's own, which a raised card's edge stands on */
  --metal-g: var(--ic-metal-g-d); --metal-lg-g: var(--ic-metal-lg-g-d); --jewel-g: var(--ic-jewel-g-d); --link-g: var(--ic-link-g-d); --tl-g: var(--ic-text-link-g-d); --tl-g-words: var(--ic-text-link-g-d-words, var(--tl-g)); --tl-g-edge: var(--ic-text-link-g-d-edge, var(--tl-g-words)); --mark-g: var(--ic-mark-g-d);
  --metal-b: var(--ic-metal-b-d); --metal-lg-b: var(--ic-metal-lg-b-d); --jewel-b: var(--ic-jewel-b-d); --link-b: var(--ic-link-b-d); --tl-b: var(--ic-text-link-b-d); --tl-b-words: var(--ic-text-link-b-d-words, var(--tl-b)); --tl-b-edge: var(--ic-text-link-b-d-edge, var(--tl-b-words)); --mark-b: var(--ic-mark-b-d);
  --metal-s: var(--ic-metal-s-d); --metal-lg-s: var(--ic-metal-lg-s-d); --jewel-s: var(--ic-jewel-s-d); --link-s: var(--ic-link-s-d); --tl-s: var(--ic-text-link-s-d); --tl-s-words: var(--ic-text-link-s-d-words, var(--tl-s)); --tl-s-edge: var(--ic-text-link-s-d-edge, var(--tl-s-words)); --mark-s: var(--ic-mark-s-d);
  --metal: var(--metal-g); --metal-lg: var(--metal-lg-g); --jewel: var(--jewel-g); --link: var(--link-g); --tl: var(--tl-g); --outline-words: var(--tl-g-words, var(--tl)); --outline-edge: var(--tl-g-edge, var(--outline-words)); --jewel-mark: var(--mark-g);
  --room-metal-lg: var(--metal-lg-g); --room-mark: var(--mark-g);
  /* a main button's ring on its ground: none where its fill already stands apart (theme.ts placeInks) */
  --ring-g: var(--ic-ring-g-d); --ring-b: var(--ic-ring-b-d); --ring-s: var(--ic-ring-s-d);
  --btn-edge: var(--ring-g);
  --hair: color-mix(in srgb, var(--metal) 30%, transparent);
  --hair-strong: color-mix(in srgb, var(--metal) 55%, transparent);
  --ivory: #F2EEE7;
  /* a photograph's plate in this tone (theme.ts PLATE_ALPHA): the night's, its words ivory, each ink held to its worst case */
  --plate: var(--ic-plate); --plate-text: var(--ivory); --plate-dim: var(--ic-plate-dim);
  --plate-metal: var(--ic-metal-pl-d); --plate-metal-lg: var(--ic-metal-lg-pl-d); --plate-jewel-text: var(--ic-jewel-pl-d); --plate-link: var(--ic-link-pl-d); --plate-tl: var(--ic-text-link-pl-d); --plate-tl-words: var(--ic-text-link-pl-d-words, var(--plate-tl)); --plate-tl-edge: var(--ic-text-link-pl-d-edge, var(--plate-tl-words)); --plate-jewel: var(--ic-mark-pl-d);
  --plate-edge: var(--ic-ring-pl-d);
  --serif: var(--font-display); --sans: var(--font-body);
  --wrap: 1240px; --gutter: clamp(22px, 4vw, 48px); --bar-h: 76px;
  /* the header's column — the width the bar's brand and pages align to, published for other products so their content
     lines up with the header (CONTENT MEDIA's blog, director ruling (B) 2026-10-24). The brand and links sit inside the
     bar's own 20px-40px padding, so the column is the bar's content box (`min(1400px, 100%)` less its padding), and
     --rs-gutter is that padding each side. */
  --rs-wrap: calc(min(1400px, 100%) - 2 * var(--rs-gutter));
  --rs-gutter: clamp(20px, 3vw, 40px);
  /* how far the pinned header covers the page's top, in the page's own pixels: its measured bottom (--site-head, screen px
     from site-jumps.ts, back through --z), before the measure its usual bottom. Published like --rs-wrap so a product drawn
     inside the site (CONTENT MEDIA's blog) starts below the header, never behind it (Andrew via REBEL SITES, 2026-10-27). */
  --rs-head-over: calc(var(--site-head, calc(var(--bar-h) * var(--z, 1))) / var(--z, 1));
  --ease: cubic-bezier(.2, .6, .2, 1);
}
/* THE MATCH BUTTON RULE (theme.ts iconMatchVars): every rule below whose root reads `:where([data-match-rule])` applies only on a root
   IconChrome marks as on the rule (match-buttons.ts matchColorsOf: Explore today, an untouched Match site at the flip, never Custom or
   Pop); `:where` adds nothing to a rule's weight, so on the rule each stands exactly where it is written, and off it the page draws as it
   did before 2026-11-05. Here: the second button on its place, its fill, words and edge (`.btn-ghost` reads them) */
.ric:where([data-match-rule]) {
  --second-g: var(--ic-second-g-d); --on-second-g: var(--ic-on-second-g-d); --second-edge-g: var(--ic-second-edge-g-d);
  --second-b: var(--ic-second-b-d); --on-second-b: var(--ic-on-second-b-d); --second-edge-b: var(--ic-second-edge-b-d);
  --second-s: var(--ic-second-s-d); --on-second-s: var(--ic-on-second-s-d); --second-edge-s: var(--ic-second-edge-s-d);
  --second: var(--second-g); --on-second: var(--on-second-g); --second-edge: var(--second-edge-g);
  --plate-second: var(--ic-second-pl-d); --plate-on-second: var(--ic-on-second-pl-d); --plate-second-edge: var(--ic-second-edge-pl-d);
}
/* the day: the same rooms on the primary's near-white paper (theme.ts `paperOf`) */
.ric[data-mode="light"] {
  --ground: var(--ic-ground-l); --surface: var(--ic-surface-l); --band: var(--ic-band-l);
  --text: var(--ic-text-l); --dim: var(--ic-dim-l);
  --metal-g: var(--ic-metal-g-l); --metal-lg-g: var(--ic-metal-lg-g-l); --jewel-g: var(--ic-jewel-g-l); --link-g: var(--ic-link-g-l); --tl-g: var(--ic-text-link-g-l); --tl-g-words: var(--ic-text-link-g-l-words, var(--tl-g)); --tl-g-edge: var(--ic-text-link-g-l-edge, var(--tl-g-words)); --mark-g: var(--ic-mark-g-l);
  --metal-b: var(--ic-metal-b-l); --metal-lg-b: var(--ic-metal-lg-b-l); --jewel-b: var(--ic-jewel-b-l); --link-b: var(--ic-link-b-l); --tl-b: var(--ic-text-link-b-l); --tl-b-words: var(--ic-text-link-b-l-words, var(--tl-b)); --tl-b-edge: var(--ic-text-link-b-l-edge, var(--tl-b-words)); --mark-b: var(--ic-mark-b-l);
  --metal-s: var(--ic-metal-s-l); --metal-lg-s: var(--ic-metal-lg-s-l); --jewel-s: var(--ic-jewel-s-l); --link-s: var(--ic-link-s-l); --tl-s: var(--ic-text-link-s-l); --tl-s-words: var(--ic-text-link-s-l-words, var(--tl-s)); --tl-s-edge: var(--ic-text-link-s-l-edge, var(--tl-s-words)); --mark-s: var(--ic-mark-s-l);
  --ring-g: var(--ic-ring-g-l); --ring-b: var(--ic-ring-b-l); --ring-s: var(--ic-ring-s-l);
  /* by day the plate is the day's paper, its words the day's ink */
  --plate: var(--ic-plate-l); --plate-text: var(--ic-text-l); --plate-dim: var(--ic-plate-dim-l);
  --plate-metal: var(--ic-metal-pl-l); --plate-metal-lg: var(--ic-metal-lg-pl-l); --plate-jewel-text: var(--ic-jewel-pl-l); --plate-link: var(--ic-link-pl-l); --plate-tl: var(--ic-text-link-pl-l); --plate-tl-words: var(--ic-text-link-pl-l-words, var(--plate-tl)); --plate-tl-edge: var(--ic-text-link-pl-l-edge, var(--plate-tl-words)); --plate-jewel: var(--ic-mark-pl-l);
  --plate-edge: var(--ic-ring-pl-l);
}
.ric[data-mode="light"]:where([data-match-rule]) {
  --second-g: var(--ic-second-g-l); --on-second-g: var(--ic-on-second-g-l); --second-edge-g: var(--ic-second-edge-g-l);
  --second-b: var(--ic-second-b-l); --on-second-b: var(--ic-on-second-b-l); --second-edge-b: var(--ic-second-edge-b-l);
  --second-s: var(--ic-second-s-l); --on-second-s: var(--ic-on-second-s-l); --second-edge-s: var(--ic-second-edge-s-l);
  --plate-second: var(--ic-second-pl-l); --plate-on-second: var(--ic-on-second-pl-l); --plate-second-edge: var(--ic-second-edge-pl-l);
}
/* the quieter band (every second room, the footer): its words take the band's inks */
.ric .section-band, .ric main > .section:nth-child(even of .section), .ric main > .calc-page ~ .section:nth-child(n of .section), .ric .foot {
  --metal: var(--metal-b); --metal-lg: var(--metal-lg-b); --jewel: var(--jewel-b); --link: var(--link-b); --tl: var(--tl-b); --outline-words: var(--tl-b-words, var(--tl)); --outline-edge: var(--tl-b-edge, var(--outline-words)); --jewel-mark: var(--mark-b); --btn-edge: var(--ring-b);
  --room-metal-lg: var(--metal-lg-b); --room-mark: var(--mark-b);
}
.ric:where([data-match-rule]) .section-band, .ric:where([data-match-rule]) main > .section:nth-child(even of .section), .ric:where([data-match-rule]) main > .calc-page ~ .section:nth-child(n of .section), .ric:where([data-match-rule]) .foot {
  --second: var(--second-b); --on-second: var(--on-second-b); --second-edge: var(--second-edge-b);
}
.ric main > .calc-page ~ .section:nth-child(even of .section) {
  --metal: var(--metal-g); --metal-lg: var(--metal-lg-g); --jewel: var(--jewel-g); --link: var(--link-g); --tl: var(--tl-g); --outline-words: var(--tl-g-words, var(--tl)); --outline-edge: var(--tl-g-edge, var(--outline-words)); --jewel-mark: var(--mark-g); --btn-edge: var(--ring-g);
  --room-metal-lg: var(--metal-lg-g); --room-mark: var(--mark-g);
}
.ric:where([data-match-rule]) main > .calc-page ~ .section:nth-child(even of .section) {
  --second: var(--second-g); --on-second: var(--on-second-g); --second-edge: var(--second-edge-g);
}
/* the raised cards: their words and the lines inside them take the cards' inks (a card's own edge stands on the room: --room-*) */
.ric :is(.nav-sub, .mmenu, .numbers, .listing, .clip, .plate, .frame-pic, .frame-video, .trophy-grid, .ms-sheet, .member, .team-search-input,
  .compare-wrap, .area-card, .page-head.is-night, .page-head.bl-band, .bl-card, .bl-cta, .bl-hero, .bl-answer, .bl-author, .bl-toc) {
  --metal: var(--metal-s); --metal-lg: var(--metal-lg-s); --jewel: var(--jewel-s); --link: var(--link-s); --tl: var(--tl-s); --outline-words: var(--tl-s-words, var(--tl)); --outline-edge: var(--tl-s-edge, var(--outline-words)); --jewel-mark: var(--mark-s); --btn-edge: var(--ring-s);
}
.ric:where([data-match-rule]) :is(.nav-sub, .mmenu, .numbers, .listing, .clip, .plate, .frame-pic, .frame-video, .trophy-grid, .ms-sheet, .member, .team-search-input,
  .compare-wrap, .area-card, .page-head.is-night, .page-head.bl-band, .bl-card, .bl-cta, .bl-hero, .bl-answer, .bl-author, .bl-toc) {
  --second: var(--second-s); --on-second: var(--on-second-s); --second-edge: var(--second-edge-s);
}
/* a photograph's plate (the hero, the closer, the bar floating over them): the tone's plate (--plate-*) at 90% or more */
.ric .on-photo,
.ric:not(:has(.mmenu.is-open)):has(> main > .on-photo:first-child, > main > .calc-page:first-child) .bar:not(.is-scrolled) {
  --ground: var(--plate); --text: var(--plate-text); --dim: var(--plate-dim);
  --metal: var(--plate-metal); --metal-lg: var(--plate-metal-lg); --jewel: var(--plate-jewel-text); --link: var(--plate-link); --tl: var(--plate-tl); --outline-words: var(--plate-tl-words, var(--tl)); --outline-edge: var(--plate-tl-edge, var(--outline-words)); --jewel-mark: var(--plate-jewel);
  --btn-edge: var(--plate-edge);
  --hair: color-mix(in srgb, var(--plate-metal) 32%, transparent);
  --hair-strong: color-mix(in srgb, var(--plate-metal) 58%, transparent);
}
.ric:where([data-match-rule]) .on-photo,
.ric:where([data-match-rule]):not(:has(.mmenu.is-open)):has(> main > .on-photo:first-child, > main > .calc-page:first-child) .bar:not(.is-scrolled) {
  --second: var(--plate-second); --on-second: var(--plate-on-second); --second-edge: var(--plate-second-edge);
}
/* the night, whatever the tone: the phone's dock (the phone menu stands on the header's ground: menu-ground.css) */
.ric .mbar {
  --ground: var(--ic-ground-d); --surface: var(--ic-surface-d); --band: var(--ic-band-d);
  --text: var(--ic-text-d); --dim: var(--ic-dim-d);
  --metal-g: var(--ic-metal-g-d); --metal-lg-g: var(--ic-metal-lg-g-d); --jewel-g: var(--ic-jewel-g-d); --link-g: var(--ic-link-g-d); --tl-g: var(--ic-text-link-g-d); --tl-g-words: var(--ic-text-link-g-d-words, var(--tl-g)); --tl-g-edge: var(--ic-text-link-g-d-edge, var(--tl-g-words)); --mark-g: var(--ic-mark-g-d);
  --metal-b: var(--ic-metal-b-d); --metal-lg-b: var(--ic-metal-lg-b-d); --jewel-b: var(--ic-jewel-b-d); --link-b: var(--ic-link-b-d); --tl-b: var(--ic-text-link-b-d); --tl-b-words: var(--ic-text-link-b-d-words, var(--tl-b)); --tl-b-edge: var(--ic-text-link-b-d-edge, var(--tl-b-words)); --mark-b: var(--ic-mark-b-d);
  --metal-s: var(--ic-metal-s-d); --metal-lg-s: var(--ic-metal-lg-s-d); --jewel-s: var(--ic-jewel-s-d); --link-s: var(--ic-link-s-d); --tl-s: var(--ic-text-link-s-d); --tl-s-words: var(--ic-text-link-s-d-words, var(--tl-s)); --tl-s-edge: var(--ic-text-link-s-d-edge, var(--tl-s-words)); --mark-s: var(--ic-mark-s-d);
  --ring-g: var(--ic-ring-g-d); --ring-b: var(--ic-ring-b-d); --ring-s: var(--ic-ring-s-d);
  --metal: var(--metal-g); --metal-lg: var(--metal-lg-g); --jewel: var(--jewel-g); --link: var(--link-g); --tl: var(--tl-g); --outline-words: var(--tl-g-words, var(--tl)); --outline-edge: var(--tl-g-edge, var(--outline-words)); --jewel-mark: var(--mark-g);
  --room-metal-lg: var(--metal-lg-g); --room-mark: var(--mark-g);
  --btn-edge: var(--ring-g);
  --hair: color-mix(in srgb, var(--ic-metal-g-d) 30%, transparent);
  --hair-strong: color-mix(in srgb, var(--ic-metal-g-d) 55%, transparent);
}
.ric:where([data-match-rule]) .mbar {
  --second-g: var(--ic-second-g-d); --on-second-g: var(--ic-on-second-g-d); --second-edge-g: var(--ic-second-edge-g-d);
  --second-b: var(--ic-second-b-d); --on-second-b: var(--ic-on-second-b-d); --second-edge-b: var(--ic-second-edge-b-d);
  --second-s: var(--ic-second-s-d); --on-second-s: var(--ic-on-second-s-d); --second-edge-s: var(--ic-second-edge-s-d);
  --second: var(--second-g); --on-second: var(--on-second-g); --second-edge: var(--second-edge-g);
}

/* ---------------- base ---------------- */
.ric, .ric *, .ric *::before, .ric *::after { box-sizing: border-box; }
html:has(.ric) { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--site-stuck, calc(76px * var(--z, 1))) + 24px); }
@media (prefers-reduced-motion: no-preference) { html:has(.ric) { scroll-behavior: smooth; } }
.ric {
  position: relative; min-height: 100%;
  background: var(--ground); color: var(--text);
  font: 400 16.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .45s ease, color .45s ease;
}
:where(.ric) h1, :where(.ric) h2, :where(.ric) h3, :where(.ric) h4, :where(.ric) p, :where(.ric) ul, :where(.ric) ol, :where(.ric) figure, :where(.ric) blockquote, :where(.ric) dl, :where(.ric) dd { margin: 0; }
:where(.ric) ul, :where(.ric) ol { padding: 0; list-style: none; }
:where(.ric) img, :where(.ric) svg { display: block; max-width: 100%; }
/* a picture keeps its own shape: the width and height attributes it carries for layout never force a height a frame did not ask for */
:where(.ric) img { height: auto; }
:where(.ric) a { color: inherit; }
:where(.ric) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* the resets above weigh nothing (:where), so a blog drawn on the site keeps its own spacing; the app's own `.prose` (globals.css)
   sets its paragraphs', headings', lists' and quotes' margins and its lists' bullets at one class and one element, so inside the
   long words the resets keep that weight here, as they had it before */
.ric :where(.prose) :is(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.ric :where(.prose) :is(ul, ol) { padding: 0; list-style: none; }
.ric :focus-visible { outline: 2px solid var(--jewel-mark); outline-offset: 3px; border-radius: 1px; }
.ric [data-jump-focus]:focus { outline: none; }
.ric ::-moz-selection { background: color-mix(in srgb, var(--jewel-mark) 40%, transparent); }
.ric ::selection { background: color-mix(in srgb, var(--jewel-mark) 40%, transparent); }
.ric .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ric .skip { position: absolute; left: 16px; top: -80px; z-index: 300; background: var(--text); color: var(--ground); padding: 10px 16px; border-radius: 2px; text-decoration: none; }
.ric .skip:focus { top: 12px; }

/* ---------------- the page's entrance (templates/entrance.tsx) ----------------
   While the page's faces load (html.rs-entering, at most a second) the site is held back, never seen in the fallback faces
   re-wrapping into the real ones; ric-gate is the sheet's own limit (the site shows by 1.6s even if no timer fires). */
/* the ground under the page while it waits (<body>): the gallery's ground, mixed as theme.ts mixes it (6% of the primary into
   gallery black at night; by day the near-white paper in the primary's own hue, `paperOf`, which ground.ts writes as
   --rs-ground-top-l), never the app's
   dark canvas (as hometown's and poster's); past the page's top and bottom edges (a phone's rubber band and safe areas, a
   trackpad's overscroll) <html> shows the header's colour and the footer's instead (ground.ts, written by the entrance;
   ground.css steps between them), this ground only their fallback */
html:has(.ric) body { background-color: color-mix(in srgb, var(--rs-brand, #0D0C0C) 6%, #0D0C0C); }
html:has(.ric[data-mode="light"]) body { background-color: var(--rs-ground-top-l, #F2F2F2); }
html:has(.ric) { --rs-ground-top: var(--rs-ground-top-d, color-mix(in srgb, var(--rs-brand, #0D0C0C) 6%, #0D0C0C)); --rs-ground-bottom: var(--rs-ground-bottom-d, color-mix(in srgb, var(--rs-brand, #0D0C0C) 6%, #0D0C0C)); background-color: var(--rs-ground-top); }
html:has(.ric[data-mode="light"]) { --rs-ground-top: var(--rs-ground-top-l, #F2F2F2); --rs-ground-bottom: var(--rs-ground-bottom-l, #F2F2F2); }
html:has(.ric).rs-entering .ric { opacity: 0; visibility: hidden; animation: ric-gate 0s 1.6s forwards; }
html:has(.ric).rs-entering .ric * { animation-play-state: paused !important; }  /* important: an entrance's `animation` shorthand resets the play state, and an :is() holding a compound selector outranks this rule (it ran golden hour's, meridian's, quartz's and villa's entrances behind the gate, 2026-10-17) */
@keyframes ric-gate { to { opacity: 1; visibility: visible; } }
/* Then the gallery opens, once (the concept's build stage; Andrew, 2026-10-17: every page opens beautifully): on the lit
   wall the plate's accent line draws, and its words rise 20px into place in staged steps (line, eyebrow, headline, proof
   line, buttons, fine print), on the home hero; every page's plate, the blog's band and a person's page in a shorter
   stagger. The photograph keeps its own slow motion; nothing else moves. */
@media (prefers-reduced-motion: no-preference) {
  /* the home's build stage, in the concept's six steps */
  .ric .hero-copy > :not(.is-armed) { animation: ric-rise .8s var(--ease) both; }
  .ric .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .ric .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .ric .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .ric .hero-copy > :nth-child(5) { animation-delay: .32s; }
  .ric .hero-copy > :nth-child(n + 6) { animation-delay: .4s; }
  /* every other page opens quicker, settled within a second as the originals' pages are (a person's words only on their
     own page: the same words further down home and About are a section's, revealed when reached) */
  .ric :is(.page-plate, .bl-band .page-head-in, .ic-member .broker-words) > :not(.is-armed) { animation: ric-rise .7s var(--ease) both; }
  .ric :is(.page-plate, .bl-band .page-head-in, .ic-member .broker-words) > :nth-child(2) { animation-delay: .08s; }
  .ric :is(.page-plate, .bl-band .page-head-in, .ic-member .broker-words) > :nth-child(3) { animation-delay: .16s; }
  .ric :is(.page-plate, .bl-band .page-head-in, .ic-member .broker-words) > :nth-child(n + 4) { animation-delay: .24s; }
  /* the plate's accent line draws rather than rises (after the rules above, at least as specific) */
  .ric :is(.hero-copy, .page-plate, .bl-band .page-head-in) > .accent-rule:not(.is-armed) { transform-origin: left center; animation-name: ric-draw; }
}
/* from all but invisible, never 0: the browser does not count words that start at opacity 0 as the page's largest paint */
@keyframes ric-rise { from { opacity: .01; transform: translateY(20px); } }
@keyframes ric-draw { from { transform: scaleX(0); } }

/* ---------------- the large-screen stage ----------------
   The public stage (lib/rebel-sites/public-stage/public-stage.css, imported by chrome-kit) scales the page, and the form and
   calculator pop-ups with it, on a big window: Icon's root carries its class (`public-stage`, IconChrome), so --z, the zoom and the
   pop-up's zoom all come from that one sheet (contract §14: no template keeps its own zoom table). Every read of --z here falls
   back to 1 (`var(--z, 1)`), so a page drawn without that sheet keeps its one-screen heights. */

/* ---------------- the shared words ---------------- */
.ric .eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font: 500 12px/1.6 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--metal);
}
.ric .eyebrow::before { content: ''; flex: none; width: 26px; height: 1px; background: currentColor; }
.ric .eyebrow-plain::before { display: none; }
.ric .section { --room: var(--ground); padding: clamp(84px, 10vw, 128px) var(--gutter); background: var(--room); }
/* the rooms alternate the night and its quieter band, whatever order the owner keeps them in (every second room a band) */
.ric .section-band, .ric main > .section:nth-child(even of .section) { --room: var(--band); }
/* the calculators page's fact sheet is a night room inside its gallery kind: the rooms after it start on the band */
.ric main > .calc-page ~ .section:nth-child(n of .section) { --room: var(--band); }
.ric main > .calc-page ~ .section:nth-child(even of .section) { --room: var(--ground); }
.ric .section-in { max-width: var(--wrap); margin: 0 auto; min-width: 0; }
.ric .section-head { margin: 0 0 16px; font: 600 clamp(34px, 4.6vw, 58px)/1.1 var(--serif); letter-spacing: .004em; color: var(--text); }
.ric .section-sub { max-width: 58ch; margin: 0 0 clamp(36px, 5vw, 60px); color: var(--dim); font-size: 17px; }
.ric .section-ask { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 56px); }

/* ---------------- buttons: the front desk ---------------- */
.ric .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  /* the button fit's variables (fit.css): the size, padding and height drawn below come from these, and every variant or breakpoint sets only the variable it changes */
  --button-size: 12.5px; --button-pad: 26px; --button-pad-floor: 14px; --button-icon: 26px; --button-em: .81; --button-edge: 1px; --button-min-height: 48px;
  min-height: var(--button-min-height); padding: 0 var(--button-pad);
  font: 600 var(--button-size)/1.25 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.ric .btn svg { width: 16px; height: 16px; flex: none; }
.ric .btn-xl { --button-min-height: 56px; --button-pad: 36px; --button-size: 13px; }
.ric .btn-sm { --button-min-height: 44px; --button-pad: 20px; --button-size: 11.5px; letter-spacing: .12em; }
/* the action: the tertiary (theme.ts buttonFill: itself, or its nearest shade whose words read), its edge where its ground asks */
.ric .btn-main { background: var(--ic-btn); color: var(--ic-on-btn); border-color: var(--btn-edge); }
/* pointed at, it lifts; its colour stays, so its words keep the ratio buttonFill gave them (a brightened fill dropped white words under AA) */
.ric .btn-main:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgb(0 0 0 / .55); }
.ric .btn-main:active { transform: none; }
/* many of one button (templates/button-crowd.ts): more than three in one section are outlined in the button colour, its words the
   action's shade that reads on the place under them (--link) */
.ric .btn-main.btn-many { background: transparent; color: var(--link); border-color: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.ric .btn-main.btn-many:hover { box-shadow: inset 0 0 0 2px currentColor; }
.ric .btn-ghost { background: transparent; color: var(--text); border-color: var(--hair-strong); }
.ric .btn-ghost:hover { border-color: var(--metal); background: color-mix(in srgb, var(--ground) 40%, transparent); }
/* the second button on the Match rule (theme.ts iconMatchVars): its place's --second, --on-second and --second-edge (the 2nd as stored with
   the words that read on it, or the outlined form), in the same 1px border, size, padding and radius as the main; pointed at, it keeps them */
.ric:where([data-match-rule]) .btn-ghost { background: var(--second, transparent); color: var(--on-second, var(--text)); border-color: var(--second-edge, var(--hair-strong)); }
.ric:where([data-match-rule]) .btn-ghost:hover { border-color: var(--second-edge, var(--metal)); background: var(--second, color-mix(in srgb, var(--ground) 40%, transparent)); }
/* a call to the lead form: never smaller than the words it sits among nor under 16px, semi-bold, its colour its own variable, the button colour at 7:1
   on a light ground (theme.ts linkShade; the crowd's buttons and every other link keep theirs) (Andrew, 2026-10-30: "WHY ARE TEXT
   LINKS SO SMALL?"; cta-links.spec.ts): in its own capitals and tracking, now at that size (REBEL SITES, 2026-10-30: size and contrast, not a
   change of type style) */
.ric .text-cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 32px;
  font: 600 max(1em, 16px)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--tl);
}
.ric .text-cta svg { width: 16px; height: 16px; flex: none; transition: transform .18s ease; }
.ric .text-cta:hover svg { transform: translateX(4px); }
.ric .cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.ric .cta-left { justify-content: flex-start; }

/* stars: Google's gold (the platform law), drawn */
.ric .stars { display: inline-flex; gap: 3px; color: var(--review-star); }
.ric .stars svg { width: 14px; height: 14px; }
.ric .stars-lg svg { width: 18px; height: 18px; }
/* Google's G (the Quote Builder's own mark) on its white disc, first in every line that counts Google's reviews */
.ric .gmark { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: #fff; flex: none; }

/* ============================================================
   THE FIRM BAR
   ============================================================ */
.ric .bar {
  position: fixed; inset: 0 0 auto; z-index: 100;
  color: var(--text);
  /* fully opaque once the page moves: nothing on the page reads through a header (Andrew via REBEL SITES, 2026-10-27, every template) */
  background: var(--ground);
  border-bottom: 1px solid var(--hair);
  transition: background-color .3s ease, border-color .3s ease;
}
/* over the opening photograph it floats as the tone's glass (the night's, the ivory by day): the plate's own strength (theme.ts PLATE_ALPHA, 90%),
   so its words read over any picture, a white one included; written as an image, as every plate over a photograph is (its
   ground is the picture under it, unknown) */
.ric:not(:has(.mmenu.is-open)):has(> main > .on-photo:first-child, > main > .calc-page:first-child) .bar:not(.is-scrolled) {
  background: linear-gradient(color-mix(in srgb, var(--plate) 90%, transparent), color-mix(in srgb, var(--plate) 90%, transparent));
  border-bottom-color: var(--hair);
}
.ric:has(.mmenu.is-open) .bar { background: var(--menu-surface); }
.ric .bar-in {
  max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 40px);
  min-height: var(--bar-h); display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px);
}
.ric .bar-end { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.ric .bar-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 13px/1 var(--sans); letter-spacing: .06em; text-decoration: none; color: var(--text); }
.ric .bar-tel svg { width: 16px; height: 16px; }

/* the lockup: the officer's name is the brand, the company under it */
.ric .brand, .ric .brandmark { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: var(--text); }
.ric .brand-mark {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--hair-strong); border-radius: 50%;
  font: 600 15px/1 var(--serif); letter-spacing: .04em; color: var(--metal);
}
.ric .mark-words { display: grid; gap: 6px; line-height: 1; min-width: 0; }
.ric .mark-words > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ric .mark-words b { font: 600 15px/1.1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--text); }
.ric .mark-words > span { font: 500 10px/1.2 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }

/* the site's logo (BrandMark.tsx; LOGOS.md): both versions in one cell, switched by the ground under them */
.ric .brandmark.has-logo { min-width: 0; }
.ric .brandmark .logo, .ric [data-rs-live-logo] .logo { display: grid; align-items: center; justify-items: start; flex: none; max-width: 240px; --logo-h: var(--rs-logo-h, 36px); --logo-pad-y: 0px; --logo-pad-x: 0px; }
.ric .brandmark .logo.has-panel, .ric [data-rs-live-logo] .logo.has-panel { --logo-pad-y: calc(var(--logo-h) * .2); --logo-pad-x: calc(var(--logo-h) * .32); }
.ric .brandmark .logo-v, .ric [data-rs-live-logo] .logo-v { grid-area: 1 / 1; display: flex; align-items: center; max-width: 100%; padding: var(--logo-pad-y) var(--logo-pad-x); border-radius: 2px; visibility: hidden; }
.ric .brandmark .logo-img, .ric [data-rs-live-logo] .logo-img { height: var(--logo-h); width: auto; min-width: 0; max-width: 100%; -o-object-fit: contain; object-fit: contain; }
.ric .brandmark .logo-v.has-panel, .ric [data-rs-live-logo] .logo-v.has-panel { background: var(--logo-panel); }
/* the night (and every photograph and the menu) shows the dark version; the day's paper the light one */
.ric .logo-v.on-dark { visibility: visible; }
.ric[data-mode="light"] .bar .logo-v.on-dark, .ric[data-mode="light"] .foot .logo-v.on-dark { visibility: hidden; }
.ric[data-mode="light"] .bar .logo-v.on-light, .ric[data-mode="light"] .foot .logo-v.on-light { visibility: visible; }
/* the open menu stands on the bar's own ground (menu-ground.css), so the bar keeps the version its tone shows */
.ric .brandmark.logo-only:not([data-logo-broken]) .mark-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ric .brandmark .mark-fallback { display: none; }
.ric .brandmark[data-logo-broken] .logo { display: none; }
/* a logo the owner has just chosen, drawn live in the preview before it is saved (live-logo.ts): in place of what the mark drew
   (the monogram, the fallback, a saved logo), sized by the logo's own rules, and shown even where the saved one failed */
.ric [data-rs-live-logo] > :is(.brand-mark, .mark, .mark-fallback, .logo:not(.rs-live-logo)) { display: none; }
.ric [data-rs-live-logo][data-logo-broken] > .rs-live-logo { display: grid; }
.ric .brandmark[data-logo-broken] .mark-fallback {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border: 1px solid var(--hair-strong); border-radius: 50%; font: 600 15px/1 var(--serif); color: var(--metal);
}

/* the site's links */
.ric .nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); margin: 0 auto; }
.ric .nav-links a:where(:not(.btn)), .ric .nav-links .linkbtn, .ric .nav-drop summary {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 0;
  font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--dim); border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.ric .nav-links a:where(:not(.btn)):hover, .ric .nav-links .linkbtn:hover { color: var(--text); border-bottom-color: var(--jewel-mark); }
.ric .nav-links a:where(:not(.btn))[aria-current="page"] { color: var(--text); border-bottom-color: var(--metal-lg); }
/* a group's dropdown (chrome-kit.tsx: a <details>, so it opens before any script) */
.ric .nav-drop { position: relative; display: flex; align-items: center; gap: 4px; }
.ric .nav-drop summary { list-style: none; cursor: pointer; gap: 6px; }
.ric .nav-drop summary::-webkit-details-marker { display: none; }
.ric .nav-drop summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
.ric .nav-drop.has-page summary { min-width: 20px; justify-content: center; }
.ric .nav-sub {
  position: absolute; --drop-gap: 23px; left: -18px; min-width: 240px; display: grid; padding: 8px; border: 1px solid var(--menu-line); box-shadow: 0 24px 48px -24px rgb(0 0 0 / .6);
  transition: opacity .2s ease, translate .26s var(--ease);
}
/* Icon slides its panel with translate, in and out: the same slide as it opens (@starting-style), and the shared slide's
   transform left off so a closing panel moves by Icon's 6px alone */
.ric .nav-drop details:not([open]) .nav-sub { opacity: 0; translate: 0 -6px; transform: none; pointer-events: none; }
@starting-style { .ric .nav-drop details[open] .nav-sub { opacity: 0; translate: 0 -6px; transform: none; } }
.ric .nav-sub a:where(:not(.btn)), .ric .nav-sub .linkbtn { display: block; width: 100%; padding: 11px 12px; font: 500 14px/1.3 var(--sans); letter-spacing: .02em; text-transform: none; text-align: left; text-decoration: none; border: 0; }
.ric .nav-sub .has-rich { display: flex; align-items: flex-start; gap: 12px; }
.ric .nav-sub .nav-ico-box { flex: none; display: grid; place-items: center; width: 20px; height: 1.35em; }
.ric .nav-sub .nav-ico, .ric .mm-sub .nav-ico { width: 20px; height: 20px; flex: none; }
/* the phone menu's group: the icon 20px with no tile, on the name's first line (1lh: the row's own line height) */
.ric .mm-sub .has-rich { display: flex; align-items: flex-start; gap: 12px; }
.ric .mm-sub .nav-ico-box { flex: none; display: grid; place-items: center; width: 20px; height: 1lh; }
.ric .nav-sub .nav-sub-t, .ric .mm-sub .nav-sub-t { display: grid; gap: 2px; }
.ric .nav-sub .nav-sub-line, .ric .mm-sub .nav-sub-line { font: 400 12.5px/1.35 var(--sans); }
/* a bar a little too full draws its links closer; too full even then, they move into the menu (navFit) */
.ric .bar.is-snug .bar-in, .ric .bar.is-snug .nav-links { gap: 16px; }
.ric .bar.is-snug .mark-words > .mark-powered, .ric .bar.is-snug .bar-second { display: none; }
/* the officer's name is never cut, with a logo or alone. With the links in the bar, the brand never gives up its room to them:
   the bar overflows instead, so navFit makes it snug (no company line), then crowded (the links into the menu); a shrinking
   name never overflowed, so it was cut (70 of 180 desktop rounds beside a logo; the fixture's own name alone at 1181-1280).
   With the links in the menu (a tablet), the name beside a logo wraps between words. */
@media (min-width: 1181px) { .ric .bar .brand, .ric .bar .brandmark { flex-shrink: 0; } }
@media (min-width: 821px) and (max-width: 1180px) {
  .ric .bar .brandmark.has-logo .mark-words b, .ric .bar [data-rs-live-logo] .mark-words b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.2; }
}
.ric .bar.is-crowded .nav-links, .ric .bar.is-crowded .bar-second { display: none; }
.ric .bar.is-crowded .burger { display: grid; }
.ric:has(.bar.is-crowded) .mmenu { display: block; }

/* the burger and the phone menu (phone-menu.tsx: the whole screen in the night, the broker's links in the display face) */
.ric .burger {
  display: none; place-content: center; justify-items: center; gap: 5px; flex: none;
  width: 44px; height: 44px; border: 1px solid var(--hair-strong); border-radius: 2px; color: var(--text);
}
.ric .burger i { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.ric .burger.is-open i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ric .burger.is-open i:nth-child(2) { opacity: 0; }
.ric .burger.is-open i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.ric .mmenu {
  display: none; position: fixed; inset: 0; z-index: 99; overflow-y: auto; overscroll-behavior: contain;
  height: calc(100dvh / var(--z, 1));
  padding: calc(var(--bar-h) + 24px) var(--gutter) 40px;
  opacity: 0; translate: 0 12px; visibility: hidden;
  transition: opacity .32s var(--ease), translate .32s var(--ease), visibility 0s .32s;
}
.ric .mmenu.is-open { opacity: 1; translate: none; visibility: visible; transition: opacity .32s var(--ease), translate .32s var(--ease), visibility 0s; }
.ric .mmenu-in { display: flex; flex-direction: column; gap: 28px; max-width: var(--wrap); margin: 0 auto; }
.ric .mmenu-links { display: grid; }
.ric .mmenu-links > li { opacity: 0; translate: 0 18px; transition: opacity .3s var(--ease), translate .4s var(--ease); }
.ric .mmenu.is-open .mmenu-links > li { opacity: 1; translate: none; transition-delay: .06s; }
.ric .mmenu-links a:where(:not(.btn)), .ric .mmenu-links .linkbtn {
  display: block; width: 100%; padding: 14px 0; text-align: left; text-decoration: none;
  font: 600 clamp(28px, 7vw, 40px)/1.15 var(--serif);
  border-bottom: 1px solid var(--menu-line);
}
.ric .mm-drop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--menu-line); }
.ric .mm-drop > a, .ric .mm-drop > .linkbtn { border-bottom: 0; }
.ric .mm-drop:not(.has-page) > .mm-group { grid-column: 1 / -1; }
.ric .mm-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 14px 0; font: 600 clamp(28px, 7vw, 40px)/1.15 var(--serif); }
.ric .mm-drop.has-page .mm-group summary { justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--menu-line); }
.ric .mm-group summary::-webkit-details-marker { display: none; }
.ric .mm-group summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--metal-lg); border-bottom: 1.5px solid var(--metal-lg); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.ric .mm-group[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.ric .mm-sub { grid-column: 1 / -1; display: none; gap: 2px; padding: 0 0 16px 16px; border-left: 1px solid var(--menu-line); }
.ric .mm-group[open] + .mm-sub { display: grid; }
.ric .mm-sub a:where(:not(.btn)), .ric .mm-sub .linkbtn { display: block; padding: 10px 0; font: 500 16px/1.3 var(--sans); text-decoration: none; text-align: left; }
/* a bare link (no icon, no line under it) a 44px tap target, its words on the middle of it (review 1: a group of bare links at 390, 42px rows) */
.ric .mm-sub a:where(:not(.btn)):not(.has-rich), .ric .mm-sub .linkbtn { display: flex; align-items: center; min-height: 44px; }
.ric .mmenu-cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* the open phone menu's foot on the Match rule (REBEL SITES, 2026-11-05; ledger 5adecc3d71, Andrew: "i liked the call and text buttons side by
   side in the mobile menu"), Authority's and Hometown's layout: the main and the second button each full width, then Call and Text as ONE
   side-by-side pair, half width each, alike: Icon's own plain look (transparent, the ground's words, the metal's strong hairline), never the
   second button's fill, and pointed at it keeps it (no darker fill under one of the two) */
.ric:where([data-match-rule]) .mmenu-cta { display: grid; gap: 12px; }
.ric:where([data-match-rule]) .mmenu-cta > .btn { width: 100%; }
.ric:where([data-match-rule]) .mmenu-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ric:where([data-match-rule]) .mmenu-contact:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.ric:where([data-match-rule]) .mmenu-contact .btn { width: 100%; min-width: 0; padding: 0 10px; gap: 8px; letter-spacing: .06em; white-space: normal; text-wrap: balance; line-height: 1.15; }
.ric:where([data-match-rule]) .mmenu-contact .btn-ghost { --second: initial; --on-second: initial; --second-edge: initial; }
.ric:where([data-match-rule]) .mmenu-contact .btn-ghost:hover { background: transparent; }

/* ============================================================
   THE SLIDESHOW (hero)
   ============================================================ */
.ric .hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh / var(--z, 1));
  display: grid; align-content: end;
  padding: calc(var(--bar-h) + 28px) var(--gutter) 100px;
  background: var(--plate);
}
.ric .ic-slides, .ric .ic-slide { position: absolute; inset: 0; }
/* the slides keep their own stacking (the lit one over a still duplicate) to themselves: the plate always paints over them */
.ric .ic-slides { isolation: isolate; }
.ric .ic-slide { opacity: 0; visibility: hidden; transition: opacity 1.6s ease, visibility 0s 1.6s; }
.ric .ic-slide.is-on { opacity: 1; visibility: visible; transition: opacity 1.6s ease, visibility 0s; }
/* the second field holding the first's own photograph (Home.tsx is-same): shown still, under the first, so a click lands on the first
   and a focus on the second field rings the photograph it is */
.ric .ic-slide.is-on { z-index: 1; }
.ric .ic-slide.is-same { opacity: 1; visibility: visible; transition: none; }
/* in the preview, the second field selected or hovered lifts its photograph (the same picture) over the first, so its ring shows */
.ric[data-preview] .ic-slide.is-same:has(.rs-sel-on, .rs-sel-hover, .rs-editing) { z-index: 2; }
.ric .ic-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* the owner's motion (sections/kinds/hero.ts): zoom is the concept's ken-burns, drift a slow pan, still nothing */
@media (prefers-reduced-motion: no-preference) {
  /* each photograph moves while it is on and while it fades out under the next (`is-leaving`, hero-backdrop-runtime.ts), never
     snapping back to its first frame while it is still seen */
  .ric .hero.is-zoom .ic-slide:is(.is-on, .is-leaving) img { animation: ric-kenburns 7.5s ease-out both; }
  .ric .hero.is-drift .ic-slide:is(.is-on, .is-leaving) img { animation: ric-drift 14s ease-in-out both; }
}
/* still: the owner's choice, and a video's poster (hero-background.ts: a video holds its poster still) */
.ric .hero.is-still .ic-slide img { animation: none; }
@keyframes ric-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes ric-drift { from { transform: scale(1.08) translateX(-2%); } to { transform: scale(1.08) translateX(2%); } }
/* the gallery's own scrim (neutral, never a grade: the photographs stay true colour), or the owner's colour */
.ric .hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--plate) 92%, transparent) 0%, color-mix(in srgb, var(--plate) 46%, transparent) 34%, transparent 62%),
    linear-gradient(to bottom, color-mix(in srgb, var(--plate) 55%, transparent) 0%, transparent 22%);
}
.ric .hero-overlay { position: absolute; inset: 0; pointer-events: none; }
/* the plate floats: clear photograph under it, where the indicators keep their own rail */
.ric .hero-copy {
  position: relative; min-width: 0; max-width: min(860px, 100%);
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px) clamp(36px, 4.5vw, 64px);
  background: linear-gradient(to top, color-mix(in srgb, var(--plate) 97%, transparent), color-mix(in srgb, var(--plate) 90%, transparent));
}
.ric .accent-rule { width: 54px; height: 3px; margin-bottom: 26px; background: var(--jewel-mark); }
.ric .hero-copy .eyebrow { margin-bottom: 20px; }
.ric .hero-head { margin: 0 0 22px; font: 600 clamp(36px, 6.4vw, 96px)/1.04 var(--serif); letter-spacing: .004em; color: var(--text); }
/* a longer headline a size down, so two words still share the plate's line ("Charlotte's lender." on one, never a word alone) */
.ric .hero-head[data-len="long"] { font-size: clamp(36px, 6vw, 88px); }
.ric .hero-line { max-width: 54ch; margin: 0 0 34px; font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.65; color: var(--dim); }
.ric .hero-line.rich p + p { margin-top: .6em; }
.ric .hero-line.rich a { color: var(--text); }
.ric .hero-copy .cta-row { justify-content: flex-start; }
.ric .hero-fine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 28px; font-size: 13.5px; color: var(--dim); }
.ric .gbadge { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; color: var(--dim); text-decoration: none; }
.ric .gbadge strong { color: var(--text); font-weight: 600; }
.ric .fine-words { color: var(--dim); }
/* the slide indicators: their own rail in the photograph's strip, on the plate's own strength (90%, written as an image as every
   plate over a photograph is), so each indicator holds 3:1 in the metal over any picture; the lit one is told by its length */
.ric .ic-rail {
  position: absolute; right: var(--gutter); bottom: 30px; display: flex; gap: 8px; padding: 6px 12px;
  background: linear-gradient(color-mix(in srgb, var(--plate) 90%, transparent), color-mix(in srgb, var(--plate) 90%, transparent));
  border: 1px solid var(--hair);
}
.ric .ic-dot { position: relative; width: 32px; height: 32px; }
.ric .ic-dot::before { content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; translate: 0 -50%; background: var(--metal-lg); transition: left .25s ease, right .25s ease; }
.ric .ic-dot.is-on::before, .ric .ic-dot:hover::before { left: 2px; right: 2px; }
/* the pause button (hero-backdrop.tsx, WCAG 2.2.2) leads the rail in the metal, its mark the rail's own size; a rail whose only
   control has nothing to pause (a video left as its poster) goes with it */
.ric .hb-pause.ic-pause { position: relative; inset: auto; width: 32px; height: 32px; border: 0; border-radius: 0; background: none; color: var(--metal-lg); }
.ric .hb-pause.ic-pause:hover { background: none; color: var(--text); }
.ric .hb-pause.ic-pause:focus-visible { outline: 2px solid var(--jewel-mark); outline-offset: 0; }
.ric .ic-rail:not(:has(> :not([hidden]))) { display: none; }

/* ============================================================
   THE TROPHY NUMBERS
   ============================================================ */
/* the proof band: raised a step from the rooms around it, ruled above and below */
.ric .numbers { background: var(--surface); border-block: 1px solid var(--hair); padding: 0 var(--gutter); }
/* on the Match rule its cells keep 24px clear of the band's edges (color-rules.ts BAND_EDGE_PX), the cells' own padding that much less
   (`.stat` below), so the band is as tall as it was */
.ric:where([data-match-rule]) .numbers { padding: 24px var(--gutter); }
.ric .numbers-in { max-width: var(--wrap); margin: 0 auto; --fit-gap: 0px; --figure-em: .64; --figure-pad: 24px; --rs-hair: var(--hair); } /* a count-fitted, ruled grid (fit.css): full rules whatever the count */
/* the rules between the cells are the grid's (fit.css data-rules) */
.ric .stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-width: 0;
  padding: clamp(32px, 4vw, 46px) 18px clamp(30px, 3.6vw, 42px); text-align: center;
}
/* (the band's 24px come out of its FIRST row's tops and its LAST row's feet only; every row between keeps its own, so a band of two
   or more rows is as tall as it was too. The rows are fit.css's: three across, four for 4, 7 and 8; two on a tablet; one on a phone) */
.ric:where([data-match-rule]) .stat { --row-top: 0px; --row-foot: 0px; padding-top: calc(clamp(32px, 4vw, 46px) - var(--row-top)); padding-bottom: calc(clamp(30px, 3.6vw, 42px) - var(--row-foot)); }
.ric:where([data-match-rule]) :where(.numbers-in) > .stat:where(:nth-child(-n + 3)),
.ric:where([data-match-rule]) :where(.numbers-in[data-count="4"], .numbers-in[data-count="7"], .numbers-in[data-count="8"]) > .stat:where(:nth-child(4)) { --row-top: 24px; }
.ric:where([data-match-rule]) :where(.numbers-in) > .stat:where(:nth-child(3n + 1):nth-last-child(-n + 3)),
.ric:where([data-match-rule]) :where(.numbers-in) > :where(.stat:nth-child(3n + 1):nth-last-child(-n + 3)) ~ .stat,
.ric:where([data-match-rule]) :where(.numbers-in[data-count="4"], .numbers-in[data-count="7"], .numbers-in[data-count="8"]) > .stat:where(:nth-child(4n + 1):nth-last-child(-n + 4)),
.ric:where([data-match-rule]) :where(.numbers-in[data-count="4"], .numbers-in[data-count="7"], .numbers-in[data-count="8"]) > :where(.stat:nth-child(4n + 1):nth-last-child(-n + 4)) ~ .stat { --row-foot: 24px; }
@media (max-width: 1000px) {
  .ric:where([data-match-rule]) :where(.numbers-in) > .stat { --row-top: 0px; --row-foot: 0px; }
  .ric:where([data-match-rule]) :where(.numbers-in) > .stat:where(:nth-child(-n + 2)) { --row-top: 24px; }
  .ric:where([data-match-rule]) :where(.numbers-in) > .stat:where(:nth-child(2n + 1):nth-last-child(-n + 2)),
  .ric:where([data-match-rule]) :where(.numbers-in) > :where(.stat:nth-child(2n + 1):nth-last-child(-n + 2)) ~ .stat { --row-foot: 24px; }
}
@media (max-width: 560px) {
  .ric:where([data-match-rule]) :where(.numbers-in) > .stat { --row-top: 0px; --row-foot: 0px; }
  .ric:where([data-match-rule]) :where(.numbers-in) > .stat:where(:first-child) { --row-top: 24px; }
  .ric:where([data-match-rule]) :where(.numbers-in) > .stat:where(:last-child) { --row-foot: 24px; }
}
.ric .stat-num { --figure-size: clamp(44px, 5vw, 84px); /* --figure-em on its band: .64, the face's widest digit (measured 2026-10-30: .55 let "$20,000,000" run 2px past its cell) */ font-weight: 600; line-height: 1; font-family: var(--serif); letter-spacing: .01em; color: var(--metal-lg); }
.ric .stat-label { max-width: 24ch; font: 500 11px/1.6 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
/* a highlight with no figure: the words alone, set whole in the display face */
.ric .stat-words { gap: 0; }
/* break-word, not anywhere: a word breaks only where it cannot fit, never at the space that keeps the last two together */
.ric .stat-said { max-width: 18ch; font: 600 clamp(20px, 2vw, 26px)/1.25 var(--serif); color: var(--text); overflow-wrap: break-word; }

/* ============================================================
   THE FRONT DESK (quick start)
   ============================================================ */
.ric .desk { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.ric .desk-head { min-width: 0; }
.ric .desk-head .section-sub { margin-bottom: 34px; }
.ric .desk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ric .desk-rows { min-width: 0; --rs-hair: var(--hair); } /* rules between its rows (fit.css data-rows) */
.ric .desk-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 20px; align-items: center; width: 100%;
  padding: 26px 0; text-align: left; text-decoration: none; color: var(--text);
}
.ric .row-no { font: 600 20px/1.5 var(--serif); letter-spacing: .06em; color: var(--metal); }
/* a row whose whole is one button (the front desk): its number is the list's count, drawn by the sheet, so a click on it is a click on the row */
.ric .desk-rows { counter-reset: ic-row; }
.ric .row-no.is-count { counter-increment: ic-row; }
.ric .row-no.is-count::before { content: counter(ic-row, decimal-leading-zero); }
.ric .desk-words { display: grid; gap: 6px; min-width: 0; }
.ric .desk-t { font: 600 clamp(20px, 2vw, 24px)/1.25 var(--serif); }
.ric .desk-s { color: var(--dim); font-size: 14.5px; line-height: 1.6; }
.ric .desk-row > svg { width: 20px; height: 20px; color: var(--metal-lg); transition: transform .18s ease; }
.ric .desk-row:hover > svg { transform: translateX(4px); }

/* ============================================================
   THE PORTFOLIO (situations as listings)
   ============================================================ */
.ric .listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px; }
.ric .listing { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--hair); transition: border-color .25s ease; }
.ric .listing:hover { border-color: var(--hair-strong); }
/* the listing's photograph rests on the jewel's rule, as a press clipping hangs from its own (a mark, 3:1: --jewel-mark) */
.ric .listing-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 2px solid var(--jewel-mark); background: var(--band); }
.ric .listing-ph { position: absolute; inset: 0; display: block; }
.ric .listing-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .8s var(--ease); }
.ric .listing:hover .listing-media img { transform: scale(1.05); }
/* the program as a price-tag chip: the secondary as a fill (theme.ts buttonFill), its words the ones that read on it */
.ric .listing-tag {
  position: absolute; top: 14px; left: 14px; max-width: calc(100% - 28px);
  padding: 8px 12px; background: var(--ic-chip); color: var(--ic-on-chip);
  font: 700 10px/1.35 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.ric .listing-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 26px 26px 28px; }
.ric .listing-who { font: 500 10.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.ric .listing-title { font: 600 24px/1.2 var(--serif); color: var(--text); }
.ric .listing-desc { flex: 1; color: var(--dim); font-size: 14.5px; line-height: 1.65; }
.ric .listing-terms { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--hair); font: 600 11px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--metal); }
.ric .listing-body .text-cta { align-self: flex-start; margin-top: 4px; }

/* ============================================================
   THE LISTING DETAIL (calculators as the fact sheet)
   ============================================================ */
.ric .sheet { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
.ric .sheet-left { position: sticky; top: calc(var(--site-head, calc(76px * var(--z, 1))) / var(--z, 1) + 40px); min-width: 0; }
.ric .sheet-left .section-sub { margin-bottom: 30px; }
.ric .sheet-rows { min-width: 0; --rs-hair: var(--hair); } /* rules between its rows (fit.css data-rows) */
/* the button lives in a FIXED column: the same x and top in every row, however long the row's words run */
.ric .sheet-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 22px; align-items: start; width: 100%; /* the action column fits its button (fit.css) */
  padding: 32px 0; text-align: left; text-decoration: none; color: var(--text);
}
.ric .row-words { display: grid; gap: 8px; min-width: 0; }
.ric .row-title { font: 600 clamp(21px, 2vw, 25px)/1.2 var(--serif); }
.ric .row-desc { color: var(--dim); font-size: 14.5px; line-height: 1.6; }
.ric .btn-run { width: 100%; padding: 0 12px; margin-top: -6px; }
.ric .sheet-next { margin-top: 32px; }

/* ============================================================
   THE FIRM'S STANDARD (steps)
   ============================================================ */
.ric .standard-frame { position: relative; border: 1px solid var(--hair-strong); padding: clamp(40px, 6vw, 78px) clamp(22px, 6vw, 74px); }
.ric .tick { position: absolute; width: 14px; height: 14px; border: 0 solid var(--metal-lg); }
.ric .tick-tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.ric .tick-tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.ric .tick-bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.ric .tick-br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.ric .standard-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 84px); }
.ric .standard-head { min-width: 0; }
.ric .promise-line { margin: 4px 0 18px; font: 600 clamp(36px, 5vw, 64px)/1.08 var(--serif); color: var(--metal-lg); }
.ric .standard-body { max-width: 54ch; color: var(--dim); font-size: 16.5px; }
.ric .standard-steps { min-width: 0; }
.ric .step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-top: 1px solid var(--hair); }
.ric .step:first-child { border-top: 0; padding-top: 6px; }
.ric .step:last-child { border-bottom: 1px solid var(--hair); }
.ric .step-no { font: 600 18px/1.4 var(--serif); letter-spacing: .06em; color: var(--metal); }
.ric .step-words { min-width: 0; }
.ric .step-tag { margin-bottom: 6px; font: 600 10.5px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--metal); }
.ric .step-title { margin-bottom: 6px; font: 600 20px/1.25 var(--serif); color: var(--text); }
.ric .step-body { color: var(--dim); font-size: 14.5px; line-height: 1.6; }
/* the timeline: the steps run along one ruled line under the heading, their numerals sitting on it */
.ric .standard-frame.is-timeline .standard-grid { grid-template-columns: 1fr; gap: clamp(32px, 4vw, 52px); }
.ric .standard-frame.is-timeline .standard-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px; border-top: 1px solid var(--hair-strong); }
.ric .standard-frame.is-timeline .step { grid-template-columns: 1fr; gap: 14px; padding: 0; border: 0; }
.ric .standard-frame.is-timeline .step-no { justify-self: start; margin-top: -14px; padding-right: 12px; background: var(--room, var(--ground)); font-size: 20px; line-height: 28px; }

/* ============================================================
   THE PRESS (reviews as clippings)
   ============================================================ */
.ric .press-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-bottom: clamp(40px, 5vw, 58px); }
.ric .press-head .section-head { margin-bottom: 0; }
.ric .press-top { display: flex; align-items: center; gap: clamp(22px, 3vw, 40px); }
.ric .score { font: 600 clamp(76px, 9vw, 128px)/1 var(--serif); letter-spacing: .01em; color: var(--metal-lg); }
.ric .score-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ric .score-note { display: flex; align-items: center; gap: 10px; font: 500 11px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ric .clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 26px; }
.ric .clip {
  height: 100%; display: flex; flex-direction: column; padding: 32px 32px 28px;
  background: var(--surface); border: 1px solid var(--hair); border-top: 2px solid var(--room-mark);
}
.ric .clip blockquote { flex: 1; margin-top: 18px; font: 400 19px/1.6 var(--serif); color: var(--text); }
.ric .clip-attr { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hair); font: 500 10.5px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ric .clip-attr strong { font-weight: 600; color: var(--text); }
.ric .press-actions { margin-top: clamp(36px, 4vw, 48px); gap: 20px 28px; }
/* never a clipping alone on its row (reviews-shown.ts reviewGrid, the grid's data-cols and data-tail, laid out again as Show
   more adds clippings): one centred; two or four two across; three across on six tracks, each clipping two of them, so a
   last pair (or two pairs) stands centred at a clipping's width. A tablet sets two across (an odd last clipping centred at a
   clipping's width), a phone one */
@media (min-width: 900px) {
  .ric .clip-grid[data-cols="1"] { grid-template-columns: minmax(0, 620px); justify-content: center; }
  .ric .clip-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ric .clip-grid[data-cols="3"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ric .clip-grid[data-cols="3"] > li { grid-column: span 2; }
  .ric .clip-grid[data-tail="pair"] > li:nth-last-child(2),
  .ric .clip-grid[data-tail="pair-pair"] > li:is(:nth-last-child(4), :nth-last-child(2)) { grid-column: 2 / span 2; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .ric .clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ric .clip-grid[data-cols="1"] { grid-template-columns: minmax(0, 620px); justify-content: center; }
  .ric .clip-grid:not([data-cols="1"]) > li:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 26px) / 2); }
}
/* the clippings' gap is 20px from 820px down (below) */
@media (min-width: 600px) and (max-width: 820px) {
  .ric .clip-grid:not([data-cols="1"]) > li:last-child:nth-child(2n+1) { width: calc((100% - 20px) / 2); }
}
@media (max-width: 599px) { .ric .clip-grid { grid-template-columns: minmax(0, 1fr); } }
/* the Reviews page: the lead clipping across the page, its quote set large in the display face */
.ric .clip-lead { height: auto; margin-bottom: 26px; padding: clamp(34px, 4vw, 52px) clamp(28px, 4.4vw, 60px) clamp(28px, 3vw, 40px); }
.ric .clip.clip-lead blockquote { margin-top: 0; font: 400 clamp(23px, 2.2vw, 30px)/1.45 var(--serif); max-width: 46ch; text-wrap: pretty; }
/* a comfortable tap (44px tall) whose words sit where they did: the padding taken back from the margins around it */
.ric .clip-read { align-self: flex-start; margin-top: 6px; min-height: 0; padding-block: 14px; margin-bottom: -14px; }

/* ============================================================
   THE BROKER (about the person)
   ============================================================ */
.ric .broker { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(44px, 6vw, 88px); align-items: center; }
.ric .plate { min-width: 0; padding: 12px; background: var(--surface); border: 1px solid var(--room-mark); }
.ric .plate-ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--band); }
.ric .plate-ph img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center 20%; object-position: center 20%; }
.ric .plate-initials { display: grid; place-items: center; width: 100%; height: 100%; font: 600 clamp(64px, 8vw, 120px)/1 var(--serif); color: var(--metal-lg); }
.ric .plate-play {
  position: absolute; left: 16px; bottom: 16px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ic-btn); color: var(--ic-on-btn); border: 1px solid var(--btn-edge);
}
.ric .plate-play svg { width: 20px; height: 20px; margin-left: 3px; }
/* with its words (the owner's, the about section's video field): the action's near-square label, the play mark before them */
.ric .plate-play.has-words {
  display: inline-flex; gap: 10px; width: auto; max-width: calc(100% - 32px); height: auto; min-height: 48px; padding: 0 20px 0 16px; border-radius: 2px;
  font: 600 12px/1.25 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-align: left;
}
.ric .plate-play.has-words svg { flex: none; margin-left: 0; }
.ric .plate-cap { padding: 16px 6px 6px; text-align: center; font: 500 10px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.ric .broker-words { min-width: 0; }
.ric .broker-name { margin: 0 0 22px; font: 600 clamp(40px, 5.4vw, 72px)/1.05 var(--serif); color: var(--text); }
/* its last two words hold one line (words.tsx pairFit): a long name, the title's default, is set just small enough for the column */
.ric .broker-words { container-type: inline-size; }
.ric .broker-name[style*="--last-pair"] { font-size: min(clamp(40px, 5.4vw, 72px), calc(100cqi / (var(--last-pair) * .54))); }
.ric .broker-bio { max-width: 58ch; margin: 0 0 34px; color: var(--dim); font-size: 17px; line-height: 1.75; }
/* a person's page (person-parts.tsx): the name close over its line, licenses and rating in the template's spaced capitals, the
   bio's Read more under the bio, the ways to reach them in sentence case before the facts (REBEL SITES, 2026-11-02: one or two
   lines, not spaced capitals running to three) */
.ric .ic-member .broker-name { margin-bottom: 6px; }
.ric .ic-member .member-line.person-line { font-size: 12.5px; }
.ric .ic-member .member-line:is(.person-licenses, .person-rating) { font-size: 11px; }
/* the dot between two facts evened out against the capitals' spacing (typography.css .person-sep) */
.ric .ic-member .member-line { --person-track: .2em; }
.ric .ic-member .person-rating { margin-bottom: 4px; }
/* the bio at the template's own body leading (its 1.75 is the home page's broker lede), its Read more close under it (a block
   of its own, so the bio box's line height does not hold it down; most of its tap padding given back: about 8px from the bio's
   last line); the ways to reach them a step clear of the Read more above them, the phone's 20px between the plate and the words
   (on a phone and a tablet they follow the buttons: the rules below; Andrew, 2026-11-03) */
.ric .ic-member .person-bio .broker-bio { margin: 0; line-height: inherit; }
.ric .ic-member .person-reach { gap: 6px 22px; margin-top: 20px; margin-bottom: 36px; }
.ric .ic-member .person-reach :is(a, button) { text-transform: none; letter-spacing: .01em; }
/* .facts: the shared hook a person's page facts carry (member-rows) */
.ric .broker-facts, .ric .broker-facts.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); margin: 0 0 40px; border-block: 1px solid var(--hair); }
.ric .fact { min-width: 0; padding: 18px 18px 16px 0; }
.ric .fact dt { margin-bottom: 8px; font: 500 10.5px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.ric .fact dd { font: 600 18px/1.35 var(--serif); color: var(--metal); overflow-wrap: anywhere; }
.ric .fact dd a { display: inline-block; padding-block: 8px; margin-block: -8px; color: inherit; text-decoration: none; }
/* the fact is the email's column (typography.css sets the address to it, so it is never broken inside it wider than a phone) */
.ric .fact:has(> dd > a[href^="mailto:"][style*="--last-pair"]) { container-type: inline-size; --email-em: .64; } /* Playfair's bold letters run wider */

/* ============================================================
   THE CLOSER
   ============================================================ */
.ric .closer { position: relative; text-align: center; padding: clamp(110px, 16vw, 190px) var(--gutter); background: linear-gradient(var(--plate), var(--plate)); }
/* the photograph under its deep plate (the owner's, else Icon's night house; a click on it opens its picture): the scrim over
   it is the sheet's own layer and takes no click, the words above both */
.ric .closer-ph { position: absolute; inset: 0; overflow: hidden; }
.ric .closer-ph img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ric .closer-ph::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--plate) 90%, transparent); }
.ric .closer-in { position: relative; max-width: 900px; margin: 0 auto; }
/* the column's own blank space is the photograph under it: a click there lands on the photograph (its picture), its words and buttons take their own */
.ric .closer:has(.closer-ph) .closer-in { pointer-events: none; }
.ric .closer:has(.closer-ph) .closer-in > :not(.cta-row), .ric .closer:has(.closer-ph) .closer-in > .cta-row > * { pointer-events: auto; }
.ric .closer-head { margin: 0 0 22px; font: 600 clamp(52px, 9vw, 136px)/1.02 var(--serif); color: var(--text); }
.ric .closer-head .metal { font-style: normal; color: var(--metal-lg); }
.ric .closer-head[data-len="long"] { max-width: 22ch; margin-inline: auto; font-size: clamp(38px, 5.6vw, 84px); line-height: 1.08; }
/* the closing line holds its last two words on its line (keep-words.ts joins them; words.tsx pairFit, --last-pair: their
   characters): set no larger than its column holds them ("move, Denver." ran 20px out of a 360 phone's column at 52px) */
.ric .closer-in:has(> .closer-head[style*="--last-pair"]) { container-type: inline-size; }
.ric .closer-head[style*="--last-pair"] { font-size: min(clamp(52px, 9vw, 136px), calc(100cqi / (var(--last-pair) * .53))); }
.ric .closer-head[data-len="long"][style*="--last-pair"] { font-size: min(clamp(38px, 5.6vw, 84px), calc(100cqi / (var(--last-pair) * .53))); }
.ric .closer-sub { max-width: 52ch; margin: 0 auto 42px; color: var(--dim); font-size: 17.5px; }
.ric .closer-phone { margin-top: 40px; }
.ric .closer-phone .phone { display: inline-block; padding-block: 6px; font: 600 clamp(24px, 3vw, 32px)/1.2 var(--serif); letter-spacing: .02em; color: var(--metal-lg); text-decoration: none; }
.ric .closer-phone .phone:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ============================================================
   THE COMPLIANCE FOOTER
   ============================================================ */
.ric .foot { background: var(--band); border-top: 1px solid var(--hair); padding: clamp(52px, 6vw, 72px) var(--gutter) 44px; color: var(--dim); }
.ric .foot-in { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 36px; }
/* the footer's columns (Andrew, 2026-10-19: the centred stack with one list down its middle is gone): the brand and the office as one
   block, then the site's own links (Explore) and each of the menu's groups as columns side by side at the row's end; the legal band
   full width under them (legal-band.css). A narrow screen puts the columns under the block; a phone folds each (nav-mega.css). */
/* the row wraps (footer-facts designer review, round 2: a grid of `minmax(0, 1fr) auto` gave a menu's wide columns every pixel and
   the brand 48-211px, the name cut to "ANDR…" or printed over Explore): the brand's floor is its own words (its min-content, at
   least 240px), the columns sit at the row's end beside it while they fit, and go under it whole when they do not */
.ric .foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px 64px; }
/* the holder's own columns (an advanced footer, legal-band.css .foot-own): a track each at a computer's width, as menu groups take (FOOTER U2) */
@media (min-width: 1081px) { .ric .foot-row:has(> .foot-own) { display: grid; grid-template-columns: minmax(260px, 1.4fr); grid-auto-flow: column; grid-auto-columns: auto; -moz-column-gap: 64px; column-gap: 64px; } }
/* the menu with three or more link columns beside the holder's own columns (FOOTER, 2026-11-06): in the grid above the whole menu
   is one auto track, and a working site's four columns got about 300px of it and stacked one under another (the footer 625 to
   966px tall). So the brand takes a row, the menu the next with its columns side by side as it spreads them with no own columns,
   and the holder's columns the rows under it, a third of the row each (Foreground's rule); the gaps are the row's own */
@media (min-width: 1081px) {
  .ric .foot-row:has(> .foot-own):is(:has(.foot-groups > :nth-child(3)), :has(.foot-explore):has(.foot-groups > :nth-child(2))) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; gap: 32px 64px; }
  .ric .foot-row:has(> .foot-own):is(:has(.foot-groups > :nth-child(3)), :has(.foot-explore):has(.foot-groups > :nth-child(2))) > :is(.foot-who, .foot-links) { grid-column: 1 / -1; }
  /* the menu's columns spread across its row, as Foreground's do (left-packed they left a quarter of the row empty at its end) */
  .ric .foot-row:has(> .foot-own):is(:has(.foot-groups > :nth-child(3)), :has(.foot-explore):has(.foot-groups > :nth-child(2))) > .foot-links { justify-content: space-between; }
}
.ric .foot-who { flex: 1 1 240px; display: grid; justify-items: start; align-content: start; gap: 14px; }
/* the columns wrap among themselves (round 6, designer B1): four link columns under the brand at 901-1024 were squeezed to their
   longest word (Explore 127px wrapping "Loan Programs", "Refinance and equity" on two lines in 182px); a column that does not fit
   the row at its own width now goes under the others whole. The row's beside/under choice is unchanged: a wrapping row still
   measures as its one-line sum */
.ric .foot-links { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 48px; }
/* the holder's own columns (an advanced footer, advanced-footer.tsx .foot-own) take this footer's own column type: their lists, links
   and headings by name on the menu's rules below (a list's gap said, none, over the shared sheet's), their words the office's size and
   line (FOOTER U3, 2026-11-06) */
.ric .foot-links ul, .ric .foot-own-links ul { display: grid; justify-items: start; gap: 0; margin: 0; padding: 0; list-style: none; }
@media (max-width: 900px) {
  .ric .foot-who { min-width: 0; }
  .ric .foot-links { flex: 1 1 100%; flex-wrap: wrap; gap: 24px 48px; }
}
@media (max-width: 600px) { .ric .foot-links { display: block; } }

.ric .foot-office { display: grid; justify-items: start; gap: 2px; font-style: normal; font-size: 13.5px; line-height: 1.7; }
/* an owner's own words in the office's size and line (its own rule: the office's grid is the address's, not a block of words')
   (FOOTER U3, 2026-11-06) */
.ric .foot-own-text > :is(p, div) { font-size: 13.5px; line-height: 1.7; }
.ric .foot-office a { padding-block: 6px; color: var(--text); text-decoration: none; }
.ric .foot-links a, .ric .foot-links .linkbtn, .ric .foot-groups a, .ric .foot-groups .linkbtn, .ric .foot-own-links a {
  display: inline-block; padding: 11px 0; font: 500 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--dim);
}
.ric .foot-links a:hover, .ric .foot-links .linkbtn:hover, .ric .foot-groups a:hover, .ric .foot-own-links a:hover { color: var(--link); }
.ric .foot-groups { display: contents; }
/* the heading a step larger and heavier than its links (11px/600 over 11px/500 in the same capitals read as one list) */
.ric .foot-links h4, .ric .foot-own h4 { margin-bottom: 4px; font: 700 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
/* a heading that links keeps the heading's type (the links' rule above types every anchor in the column) and its line: the thumb's
   height comes from padding given back as a negative margin (`padding: 10px 0` alone grew the h4 from 15 to 35px and set the linked
   heading, and every link under it, 10-20px below the plain headings in its row; regression review, round 5) */
.ric .foot-links h4 a { display: inline-block; padding-block: 10px; margin-block: -10px; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; min-height: 0; }
.ric .foot-who .socials { justify-content: flex-start; }
/* the legal band across the footer's width under a hairline (legal-band.css), in the footer's quiet ink; the holders in its words' ink */
.ric .foot-compliance { justify-self: stretch; padding-top: 26px; border-top: 1px solid var(--hair); font-size: 11.5px; line-height: 1.8; color: var(--dim); }
.ric .legal { --legal-mark: 44px; gap: 16px; }
.ric .legal a, .ric .foot-own-text a { color: inherit; text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.ric .legal .legal-ids strong { color: var(--text); }
/* the official Equal Housing artwork for the footer's ground (legal-band.ts draws both; legal-eho-grounds.test): the night's band takes the white; the day's the black */
.ric .foot .legal-eho-on-light { display: none; }
.ric .foot .legal-eho-on-dark { display: block; }
.ric[data-mode="light"] .foot .legal-eho-on-light { display: block; }
.ric[data-mode="light"] .foot .legal-eho-on-dark { display: none; }
.ric .legal-ids strong { font-weight: 600; }
.ric .legal-links { border-top-color: var(--hair); gap: 0 28px; }
.ric .legal .legal-links a { text-decoration: none; }
.ric .legal .legal-links a:hover { color: var(--link); }
.ric .foot .powered { margin-top: 18px; }
.ric .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ric .socials a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--hair-strong); border-radius: 50%; color: var(--text); transition: border-color .2s ease; }
.ric .socials a:hover { border-color: var(--metal); }
.ric .socials svg { width: 16px; height: 16px; }
.ric .also-rated { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 28px; }
.ric .also-rated-label { font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ric .also-rated .also-rated-site { font-size: 13.5px; font-weight: 600; }
.ric .also-rated .also-rated-n { font-size: 14px; color: var(--dim); }
.ric .also-rated .also-rated-n b { font-family: var(--serif); font-size: 16px; color: var(--text); }

/* ============================================================
   THE PHONE'S DOCK
   ============================================================ */
.ric .mbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 110;
  display: none; grid-template-columns: 1fr auto auto; gap: 8px; padding: 8px;
  background: var(--ground); border: 1px solid var(--hair-strong);
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / .55);
  transform: translateY(140%); transition: transform .45s var(--ease);
}
.ric .mbar.is-on { transform: none; }
.ric .mbar .btn { width: 100%; min-height: 48px; padding: 0 12px; }
/* two buttons (the header's main, then its second: chrome-kit `phoneButtons`): they share the bar; a label too long for one line wraps */
.ric .mbar:has(> .btn ~ .btn) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ric .mbar:has(> .btn ~ .btn) .btn { padding: 0 6px; letter-spacing: .03em; white-space: normal; text-wrap: balance; text-align: center; line-height: 1.15; }
/* the bar's Text and Call give way to the two buttons: both live in the phone menu's pair (REBEL SITES, 2026-10-27) */
.ric .mbar:has(> .btn ~ .btn) > :not(.btn) { display: none; }
.ric .mbar .dock-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--hair-strong); color: var(--text); }
.ric .mbar .dock-icon svg { width: 20px; height: 20px; }

/* ============================================================
   THE SHARED PARTS (cinematic/IntroVideo.tsx, FacadeVideo.tsx; the app's `.prose`)
   ============================================================ */
.ric .player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--plate); border: 1px solid var(--hair); }
.ric .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ric .player .poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ric .player .poster img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ric .player .poster-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center;
  width: clamp(64px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ic-btn); color: var(--ic-on-btn); border: 1px solid var(--btn-edge);
}
.ric .player .poster-play svg { width: 36%; height: 36%; margin-left: 6%; }
/* the intro video's overlay: it opens inside the site's root (site-runtime.ts SITE_ROOT names .ric), drawn on any Icon page */
html:has(.ric) .video-ov { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; }
html:has(.ric) .video-ov .scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .82); animation: ric-ov-fade .28s ease-out both; }
html:has(.ric) .video-box { position: relative; width: min(920px, 100%); aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid rgb(242 238 231 / .3); animation: ric-ov-box .34s cubic-bezier(.2, .6, .2, 1) both; }
html:has(.ric) .video-ov[data-closing] .scrim { animation: ric-ov-fade-rev .24s ease-in both; }
html:has(.ric) .video-ov[data-closing] .video-box { animation: ric-ov-box-rev .24s ease-in both; }
@keyframes ric-ov-fade { from { opacity: 0; } }
@keyframes ric-ov-fade-rev { to { opacity: 0; } }
@keyframes ric-ov-box { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes ric-ov-box-rev { to { opacity: 0; transform: translateY(10px) scale(.98); } }
html:has(.ric) .video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
html:has(.ric) .video-box .x { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #F2EEE7; color: #0D0C0C; font-size: 26px; line-height: 1; cursor: pointer; }
.ric .prose {
  margin-top: 20px; font-size: 17px; line-height: 1.7; color: inherit;
  --tw-prose-body: currentColor; --tw-prose-headings: currentColor; --tw-prose-bold: currentColor;
  --tw-prose-links: currentColor; --tw-prose-bullets: currentColor; --tw-prose-counters: currentColor;
}

/* ============================================================
   THE INNER ROOMS (sections/Blocks.tsx, Catalog.tsx, Content.tsx, Local.tsx): every page but home opens on the page
   head, then draws its kinds as the gallery's rooms, alternating the night and its band as the home's do
   ============================================================ */
/* the About page's blocks (Andrew, 2026-10-17): the person's opening (their title, company and license under the name, their
   portrait framed in the metal beside the plate), the highlights about them as the trophy room's ruled entries, the story with its
   heading beside the words, and licensing and contact as three framed plates on the hairlines */
.ric .intro-role { margin: -14px 0 24px; font: 500 11px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.ric .page-portrait { margin: 0; aspect-ratio: 4 / 5; max-height: 620px; overflow: hidden; border: 1px solid var(--hair); padding: 10px; background: var(--surface); }
.ric .page-portrait img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center 22%; object-position: center 22%; }
.ric .lic-lede { max-width: 58ch; margin: 0; color: var(--dim); font-size: 17px; }
.ric .notes { --fit-gap: 0px; --rs-hair: var(--hair); } /* a count-fitted, ruled grid (fit.css) */
.ric .notes[data-count="1"] { max-width: 900px; }
.ric .note { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 26px 20px 28px; }
.ric .note h3 { font: 600 clamp(22px, 2vw, 27px)/1.2 var(--serif); color: var(--text); }
.ric .note p { color: var(--dim); font-size: 14.5px; line-height: 1.65; }
.ric .story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(40px, 6vw, 88px); align-items: start; }
.ric .story-side { display: grid; align-content: start; }
.ric .story > .story-body:only-child { grid-column: 2; }
.ric .story-body > p:first-child { font: 500 clamp(22px, 2.2vw, 30px)/1.35 var(--serif); color: var(--text); }
.ric .lic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ric .lic.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ric .lic.n1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.ric .lic-card { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 26px 24px; background: var(--surface); border: 1px solid var(--hair); }
.ric .lic-label { font: 500 11px/1.6 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.ric .lic-card p { color: var(--text); font-size: 15.5px; line-height: 1.6; }
.ric .lic-card a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text); text-decoration: none; }
.ric .lic-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ric .lic-sub { color: var(--dim); }
.ric .states { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ric .states li { padding: 8px 12px; border: 1px solid var(--hair); font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--text); }
.ric .lic-go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 900px) {
  .ric :is(.notes, .notes.n2, .notes.n4, .lic, .lic.n2), .ric .story { grid-template-columns: minmax(0, 1fr); }
  .ric .note + .note { border-top: 1px solid var(--hair); }
  .ric .story > .story-body:only-child { grid-column: auto; }
}
.ric .narrow { max-width: 900px; }
.ric .room-head { margin-bottom: clamp(36px, 5vw, 56px); }
.ric .room-head .section-sub { margin-bottom: 0; }
.ric .room-head .section-head:last-child { margin-bottom: 0; }
.ric .metal { font-style: normal; color: var(--metal-lg); }

/* ---------------- the page head (about.html, calculators.html): one photograph, one floating plate ---------------- */
.ric .page-head {
  position: relative; overflow: hidden;
  min-height: calc(100svh / var(--z, 1));
  display: grid; align-content: end;
  padding: calc(var(--bar-h) + 40px) var(--gutter) clamp(72px, 8vw, 100px);
  background: var(--plate);
}
.ric .page-ph { position: absolute; inset: 0; }
.ric .page-ph img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* the calculators page's photograph under its fades (the owner's, else a home of Icon's; a click on it opens its picture): the
   fades are the sheet's own layer over it and take no click */
.ric .page-head.is-drawn .page-ph::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--plate) 92%, transparent) 0%, color-mix(in srgb, var(--plate) 46%, transparent) 40%, color-mix(in srgb, var(--plate) 18%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--plate) 55%, transparent) 0%, transparent 24%);
}
.ric .page-head-in { position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto; min-width: 0; }
.ric .page-plate {
  max-width: min(820px, 100%); min-width: 0;
  padding: clamp(40px, 4.4vw, 56px) clamp(24px, 4vw, 56px) clamp(36px, 4.2vw, 52px);
  background: linear-gradient(to top, color-mix(in srgb, var(--plate) 97%, transparent), color-mix(in srgb, var(--plate) 90%, transparent));
}
.ric .page-plate .eyebrow { margin-bottom: 18px; }
.ric .page-title { margin: 0 0 18px; font: 600 clamp(36px, 5vw, 72px)/1.06 var(--serif); letter-spacing: .004em; color: var(--text); overflow-wrap: break-word; }
.ric .page-line { max-width: 52ch; margin: 0 0 30px; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.65; color: var(--dim); }
.ric .page-plate > :last-child { margin-bottom: 0; }
.ric .page-title[data-len="long"] { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.1; }
/* on a phone the heading holds its last two words on one line (words.tsx pairFit, --last-pair): set just small enough for them */
@media (max-width: 600px) {
  .ric .page-title[style*="--last-pair"] { font-size: min(36px, calc((100vw - 44px) / (var(--last-pair) * .52))); }
  .ric .page-title[style*="--last-pair"][data-len="long"] { font-size: min(32px, calc((100vw - 44px) / (var(--last-pair) * .52))); }
}
.ric .page-fine { margin-top: 22px; font-size: 13.5px; color: var(--dim); }
/* a page head whose place holds a video, a form or a calculator: the plate on the night (in either tone, the gallery's
   ground), that beside it; with nothing in the place, the plate alone */
.ric .page-head.is-night { min-height: 0; align-content: start; padding: calc(var(--bar-h) + clamp(40px, 6vw, 72px)) var(--gutter) clamp(56px, 7vw, 88px); background: var(--surface); border-bottom: 1px solid var(--hair); }
.ric .page-head.is-night .page-plate { padding: 0; background: none; }
.ric .page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.ric .page-head.no-pic .page-head-grid { grid-template-columns: minmax(0, 1fr); }
.ric .page-head-grid.has-embed { align-items: start; }

/* ---------------- the calculators page: the sub menu and the fact sheet ---------------- */
.ric .calc-tabs {
  position: sticky; top: calc(var(--site-head, calc(76px * var(--z, 1))) / var(--z, 1)); z-index: 40;
  background: var(--ground); border-bottom: 1px solid var(--hair);
}
.ric .calc-tabs ul {
  --fade-start: 0px; --fade-end: 0px;
  display: flex; flex-wrap: nowrap; gap: clamp(20px, 2.6vw, 36px); max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
}
.ric .calc-tabs ul[data-more~="start"] { --fade-start: 40px; }
.ric .calc-tabs ul[data-more~="end"] { --fade-end: 40px; }
.ric .calc-tabs li { flex: none; scroll-snap-align: center; }
.ric .calc-tabs a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 32px;
  font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; text-decoration: none; color: var(--dim);
  box-shadow: inset 0 -2px 0 transparent; transition: color .18s ease, box-shadow .18s ease;
}
.ric .calc-tabs a:hover { color: var(--text); }
.ric .calc-tabs a[aria-current="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--metal-lg); }
.ric .calc-sheet { padding-top: clamp(48px, 6vw, 80px); }
.ric .calc-rows { --rs-hair: var(--hair); } /* rules between its rows (fit.css data-rows) */
.ric .calc-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 24px; align-items: start; /* the action column fits its button (fit.css) */
  padding: clamp(28px, 3.4vw, 40px) 0;
  scroll-margin-top: calc(var(--site-stuck, 76px) / var(--z, 1) + 72px);
}
.ric .calc-label { margin-bottom: 10px; font: 500 10.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--metal); }
/* the dot between the calculator's name and the tag is drawn on the tag, so a click on it opens the tag, never the section;
   only between two words: a cleared name leaves the tag alone, never "· FREE" */
.ric .calc-label > span:not(:empty) + span:not(:empty)::before { content: '\00B7'; margin: 0 .55em; }
.ric .calc-row .row-title { display: block; margin-bottom: 14px; font-size: clamp(22px, 2.3vw, 30px); }
.ric .calc-points { display: grid; gap: 8px; }
.ric .calc-points li { position: relative; padding-left: 26px; color: var(--dim); font-size: 15px; line-height: 1.6; }
.ric .calc-points li::before { content: ''; position: absolute; left: 0; top: .8em; width: 14px; height: 1px; background: var(--metal-lg); }
.ric .calc-acts { display: grid; gap: 10px; }
.ric .calc-acts .btn-run { margin-top: 0; }

/* ---------------- the offer: the firm's standard ---------------- */
.ric .offer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.ric .offer-frame.has-pic .offer-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.ric .offer-words { min-width: 0; max-width: 760px; container-type: inline-size; }
/* the figure is set to its own column (cqi), not the viewport, so it always fits; a number never wraps */
.ric .offer-amount { margin: 10px 0 22px; font: 600 clamp(40px, 15cqi, 116px)/1 var(--serif); letter-spacing: .01em; color: var(--metal-lg); white-space: nowrap; }
.ric .offer-amount[data-len="words"] { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; white-space: normal; }
.ric .offer-words .standard-body { margin-bottom: 32px; }
.ric .offer-actions { gap: 14px 24px; }
.ric .offer-cap { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: clamp(32px, 4vw, 44px); padding-top: 18px; border-top: 1px solid var(--hair); font: 500 10.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.ric .offer-cap b { font-weight: 600; color: var(--metal); }

/* the broker's frame: a picture in the jewel's hairline, raised a step (the offer's, a callout's, a row's) */
.ric .frame-pic { min-width: 0; padding: 10px; background: var(--surface); border: 1px solid var(--room-mark); }
.ric .frame-pic img { width: 100%; height: auto; aspect-ratio: 4 / 3; -o-object-fit: cover; object-fit: cover; }

/* ---------------- the trophy cells (stats, the place's facts) ---------------- */
.ric .trophy-grid[data-count="4"] { --cols: 2; } /* four figures at this size ran over their cells four across (measured 2026-10-28) */
.ric .trophy-grid { --fit-gap: 0px; --figure-em: .64; --figure-pad: 36px; border: 1px solid var(--hair); /* a count-fitted grid of figure cells (fit.css); each cell rules itself */ background: var(--surface); overflow: hidden; }
.ric .trophy {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-width: 0;
  padding: clamp(30px, 3.6vw, 44px) 18px; text-align: center;
  box-shadow: -1px 0 0 var(--hair), 0 -1px 0 var(--hair);
}
/* a figure is one line ("up 2.5%" never leaves its number alone), set no larger than its tile holds: the grid's longest figure
   (words.tsx pairFit, --last-pair: its characters) sizes every figure alike, so "$1,104,000" in a phone's two-across tile is never
   cut by the grid's edge (it lost its "$" and its last digit at 360-390) */
.ric .trophy .stat-num { order: -1; --figure-size: clamp(36px, 5vw, 72px); white-space: nowrap; }
/* (a tile's words are never wider than 274px, the grid's 1240px over four: that also holds the figure where WebKit counts cqi in
   the big-screen stage's zoomed pixels, which cut "$1,104,000" 15px at 2560) */
.ric .trophy-src { max-width: 28ch; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.ric .trophy-src a { display: inline-block; padding-block: 6px; color: var(--link); text-underline-offset: 3px; }

/* ---------------- a row of a picture and words (a callout, a content row, an inline form) ---------------- */
.ric .pw-rows { display: grid; gap: clamp(56px, 7vw, 96px); }
.ric .pw-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5.5vw, 84px); align-items: center; }
.ric .pw-row.is-right > :first-child { order: 2; }
.ric .pw-row.no-pic { grid-template-columns: minmax(0, 1fr); }
.ric .pw-row.no-pic .pw-copy { max-width: 760px; }
.ric .pw-row.has-embed { align-items: start; }
.ric .pw-copy { min-width: 0; }
.ric .pw-num { margin-bottom: 14px; font: 600 20px/1.4 var(--serif); letter-spacing: .06em; color: var(--metal); }
.ric .pw-head { margin-bottom: 16px; font: 600 clamp(28px, 3.2vw, 42px)/1.12 var(--serif); color: var(--text); }
.ric .pw-body { max-width: 56ch; margin-bottom: 30px; color: var(--dim); font-size: 17px; line-height: 1.7; }
.ric .pw-copy .prose { margin: 0 0 28px; color: var(--dim); }
.ric .pw-copy .calc-points { margin-top: 24px; }
/* an empty list or row takes no room (contract §10: hidden, never an empty ruled box) */
.ric :is(.cta-row, .broker-facts, .calc-points, .trophy-grid, .desk-rows, .fact-rows):empty { display: none; }

/* the media slot: a video in the broker's frame; a form or a calculator on the raised sheet, keeping the loader's first height */
.ric .ms { min-width: 0; }
.ric .ms-sheet { padding: clamp(12px, 1.6vw, 20px); background: var(--surface); border: 1px solid var(--hair-strong); }
.ric .ms-embed.is-form:not(:has(iframe)) { min-height: 700px; }
.ric .ms-embed.is-calc:not(:has(iframe)) { min-height: 800px; }
.ric .ms-embed:empty { background: repeating-linear-gradient(0deg, transparent 0 55px, var(--hair) 55px 56px); }
.ric .ms-embed iframe { display: block; width: 100%; border: 0; }
.ric .frame-video { min-width: 0; padding: 10px; background: var(--surface); border: 1px solid var(--room-mark); }
.ric .frame-video .player { border: 0; }
.ric .frame-cap { margin-top: 18px; text-align: center; font: 500 10.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }

/* ---------------- the questions ---------------- */
.ric .qa { min-width: 0; border-top: 1px solid var(--hair); }
/* the questions' heading, in the sheet's narrow left column: a little smaller than a full-width one, so two words fit one line */
.ric .sheet-left:has(+ .qa) .section-head { font-size: clamp(34px, 4vw, 56px); }
.ric .qa-item { border-bottom: 1px solid var(--hair); }
.ric .qa-item summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 20px; align-items: center;
  padding: 24px 0; font: 600 clamp(19px, 1.8vw, 22px)/1.35 var(--serif); color: var(--text);
}
.ric .qa-item summary::-webkit-details-marker { display: none; }
.ric .qa-q { min-width: 0; overflow-wrap: break-word; }
.ric .qa-pm { position: relative; width: 32px; height: 32px; border: 1px solid var(--hair-strong); border-radius: 50%; transition: transform .3s var(--ease), border-color .2s ease; }
.ric .qa-pm::before, .ric .qa-pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; translate: -50% -50%; background: var(--metal-lg); }
.ric .qa-pm::after { rotate: 90deg; transition: rotate .3s var(--ease); }
.ric .qa-item[open] .qa-pm { border-color: var(--metal-lg); }
.ric .qa-item[open] .qa-pm::after { rotate: 0deg; }
.ric .qa-a { max-width: 64ch; padding: 0 52px 26px 0; color: var(--dim); font-size: 16px; line-height: 1.75; }

/* ---------------- the press wall (logos) ---------------- */
.ric .press-wall { --ink-wall: #2B2622; padding: clamp(44px, 5vw, 64px) var(--gutter); background: var(--ivory); border-block: 1px solid var(--hair); }
.ric .press-wall-t { margin-bottom: 26px; text-align: center; font: 600 11px/1.6 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-wall); }
.ric .press-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 44px; }
.ric .press-logos img { height: 40px; width: auto; max-width: 168px; -o-object-fit: contain; object-fit: contain; filter: grayscale(1); opacity: .82; transition: opacity .2s ease, filter .2s ease; }
.ric .press-logos img:hover { opacity: 1; filter: none; }

/* ---------------- long words: the app's typography plugin gives `.prose` its own grey; here it takes its room's colours ---------------- */
.ric .ic-rich .prose { margin-top: 0; color: var(--dim); }
.ric .prose p + p, .ric .prose ul, .ric .prose ol, .ric .prose blockquote { margin-top: 1em; }
.ric .prose ul { list-style: disc; padding-left: 1.2em; }
.ric .prose ol { list-style: decimal; padding-left: 1.2em; }
.ric .prose li + li { margin-top: .4em; }
.ric .prose li::marker { color: var(--metal); }
.ric .prose strong, .ric .prose b { color: var(--text); font-weight: 600; }
.ric .prose a:not(.btn) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ric .prose h2, .ric .prose h3, .ric .prose h4 { margin: 1.4em 0 .5em; font: 600 clamp(24px, 2.4vw, 30px)/1.2 var(--serif); color: var(--text); }
.ric .prose h3, .ric .prose h4 { font-size: clamp(20px, 2vw, 24px); }
.ric .prose blockquote { padding-left: 20px; border-left: 2px solid var(--jewel-mark); color: var(--text); font-family: var(--serif); font-size: 1.1em; }
.ric .prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--hair); }
.ric .prose img { height: auto; }

/* ---------------- the ask between rooms ---------------- */
.ric .ask-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 56px; align-items: center; padding: clamp(36px, 4.4vw, 60px) clamp(24px, 4.4vw, 60px); }
.ric .ask-words { min-width: 0; }
.ric .ask-head { font: 600 clamp(30px, 3.6vw, 46px)/1.12 var(--serif); color: var(--text); }
.ric .ask-words .section-sub { margin: 14px 0 0; }

/* ---------------- contact ---------------- */
.ric .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ric .contact-head, .ric .contact-side { min-width: 0; }
.ric .contact-phone { display: inline-block; margin: 6px 0 24px; padding-block: 6px; font: 600 clamp(34px, 4.4vw, 58px)/1.1 var(--serif); letter-spacing: .01em; color: var(--metal-lg); text-decoration: none; }
.ric .contact-phone:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.ric .contact-head .section-sub { margin-bottom: 0; }
.ric .contact-facts { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; }
.ric .contact-facts .fact + .fact { border-top: 1px solid var(--hair); }
.ric .fact dd address { font-style: normal; }

/* ---------------- the team, hung as portraits ---------------- */
.ric .team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 28px; }
.ric .team[data-count="1"] { grid-template-columns: minmax(0, 420px); justify-content: center; }
.ric .team[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
.ric .member { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--hair); transition: border-color .25s ease; }
.ric .member:hover { border-color: var(--hair-strong); }
.ric .member-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--band); border-bottom: 1px solid var(--hair); }
.ric .member-ph { position: absolute; inset: 0; display: block; }
.ric .member-ph img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center 20%; object-position: center 20%; }
.ric .member-initials { display: grid; place-items: center; font: 600 clamp(54px, 6vw, 84px)/1 var(--serif); color: var(--metal-lg); }
.ric .member-copy { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 22px 24px; }
.ric .member-name { font: 600 22px/1.2 var(--serif); color: var(--text); }
.ric .member-name a { display: inline-block; padding-block: 4px; margin-block: -4px; text-decoration: none; }
.ric .member-name a:hover { color: var(--metal); }
.ric .member-line { font: 500 10.5px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ric .member-langs { font-size: 13.5px; color: var(--dim); }
.ric .member-blurb { margin-top: 6px; color: var(--dim); font-size: 15px; line-height: 1.65; }
.ric .member-meet { align-self: flex-start; margin-top: 10px; }
/* the reveal over a portrait (team-card.tsx; team-card.css lays it out for every root), in the tone's glass (the plate), its
   ways in as the gallery's buttons */
.ric .team-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(to top, color-mix(in srgb, var(--plate) 94%, transparent) 10%, color-mix(in srgb, var(--plate) 55%, transparent) 70%, transparent); transition: opacity .35s ease; }
.ric .team-reveal {
  position: absolute; inset: auto 0 0; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px;
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s ease, transform .4s var(--ease);
}
@media (hover: hover) {
  .ric .has-reveal:hover .team-reveal { opacity: 1; transform: none; pointer-events: auto; }
  .ric .has-reveal:hover .team-scrim { opacity: 1; }
}
.ric .has-reveal:focus-within .team-reveal, .ric .has-reveal[data-reveal="open"] .team-reveal { opacity: 1; transform: none; pointer-events: auto; }
.ric .has-reveal:focus-within .team-scrim, .ric .has-reveal[data-reveal="open"] .team-scrim { opacity: 1; }
.ric .team-way {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0 12px; text-decoration: none;
  font: 600 12px/1.2 var(--sans); letter-spacing: .06em; color: var(--plate-text); border: 1px solid color-mix(in srgb, var(--plate-metal) 45%, transparent);
}
.ric .team-way > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ric .team-way > svg { flex: none; width: 16px; height: 16px; }
.ric .team-way.is-page, .ric .team-way.is-apply { justify-content: center; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.ric .team-way.is-page { background: var(--ic-btn); color: var(--ic-on-btn); border-color: var(--plate-edge); }
.ric .team-way.is-phone, .ric .team-way.is-email { background: color-mix(in srgb, var(--plate) 70%, transparent); }
.ric .team-contact { display: grid; gap: 6px; }
@container (max-width: 220px) {
  .ric .team-reveal { padding: 10px; gap: 6px; }
  .ric .team-contact { display: flex; justify-content: center; gap: 8px; }
  .ric .team-contact .team-way { justify-content: center; width: 40px; padding: 0; border-radius: 50%; }
  .ric .team-contact .team-way > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.ric .team-hint { display: none; }
@media (hover: none) {
  .ric .team-hint {
    position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: color-mix(in srgb, var(--plate) 82%, transparent); color: var(--plate-text); border: 1px solid color-mix(in srgb, var(--plate-metal) 45%, transparent);
    transition: transform .3s ease; pointer-events: none;
  }
  .ric .team-hint svg { width: 14px; height: 14px; }
  .ric .has-reveal[data-reveal="open"] .team-hint { transform: rotate(45deg); }
}
/* the search above a big team: a label, the box, and how many it shows */
.ric .team-search { display: grid; gap: 8px; max-width: 440px; margin: 0 auto 36px; }
.ric .team-search-label { text-align: center; font: 500 10.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.ric .team-search-box { position: relative; display: block; }
.ric .team-search-icon { position: absolute; left: 18px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; color: var(--metal-lg); }
.ric .team-search-input {
  width: 100%; min-height: 52px; padding: 0 18px 0 46px; font: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background: var(--surface); color: var(--text); border: 1px solid var(--hair-strong); border-radius: 2px;
}
.ric .team-search-input:focus { outline: 2px solid var(--jewel-mark); outline-offset: 2px; }
.ric .team-search-count { min-height: 1.5em; text-align: center; font-size: 13.5px; color: var(--dim); }
.ric .team > li[hidden] { display: none !important; }

/* a person's marks (social-icons.tsx): round hairline buttons in the metal's tone */
.ric .broker-words > .socials { justify-content: flex-start; margin: -16px 0 32px; }
.ric .social-mark { width: 16px; height: 16px; }

/* ---------------- a loan's facts, as the listing's fact sheet ---------------- */
.ric .sheet.is-solo { grid-template-columns: minmax(0, 1fr); }
.ric .sheet-left .cta-row { margin-top: 4px; }
.ric .fact-rows { min-width: 0; --rs-hair: var(--hair); } /* rules between its rows (fit.css data-rows) */
.ric .fact-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 22px; padding: 28px 0; }
.ric .fact-row .row-no { grid-row: 1 / span 2; }
.ric .fact-row .row-title { display: block; }
.ric .fact-row .row-desc { grid-column: 2; }

/* ---------------- the comparison ---------------- */
.ric .compare-wrap { overflow-x: auto; border: 1px solid var(--hair); background: var(--surface); }
.ric .compare-wrap:focus-visible { outline-offset: 2px; }
.ric .compare { width: 100%; min-width: 560px; border-collapse: collapse; }
.ric .compare th, .ric .compare td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.ric .compare thead th { font: 600 clamp(19px, 1.8vw, 23px)/1.25 var(--serif); color: var(--metal); border-bottom: 1px solid var(--hair-strong); }
.ric .compare tbody th { width: 26%; font: 500 10.5px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ric .compare td { color: var(--text); font-size: 15.5px; line-height: 1.6; }
.ric .compare tbody tr:last-child > * { border-bottom: 0; }

/* ---------------- the glossary ---------------- */
.ric .az { position: sticky; top: calc(var(--site-head, calc(76px * var(--z, 1))) / var(--z, 1)); z-index: 30; margin: 0 0 clamp(28px, 4vw, 44px); padding: 12px 0; background: var(--room, var(--ground)); border-bottom: 1px solid var(--hair); }
.ric .az ul { display: flex; flex-wrap: wrap; gap: 6px; }
.ric .az a {
  display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px;
  font: 600 15px/1 var(--serif); text-decoration: none; color: var(--text); border: 1px solid var(--hair);
  transition: border-color .18s ease, color .18s ease;
}
.ric .az a:hover { color: var(--metal); border-color: var(--metal); }
.ric .az-group { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 32px 0; border-top: 1px solid var(--hair); scroll-margin-top: calc(var(--site-stuck, 76px) / var(--z, 1) + 84px); }
.ric .az-letter { font: 600 clamp(48px, 5vw, 72px)/1 var(--serif); color: var(--metal-lg); }
.ric .az-terms { min-width: 0; }
.ric .az-terms > div { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.ric .az-terms > div:first-child { padding-top: 0; }
.ric .az-terms > div:last-child { border-bottom: 0; }
.ric .az-terms dt { font: 600 19px/1.35 var(--serif); color: var(--text); }
.ric .az-terms dd { max-width: 72ch; margin-top: 6px; color: var(--dim); font-size: 15.5px; line-height: 1.65; }

/* ---------------- videos ---------------- */
.ric .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 3.4vw, 44px); }
.ric .video-item { min-width: 0; }
.ric .video-title { margin-top: 20px; font: 600 22px/1.25 var(--serif); color: var(--text); }
.ric .video-cap { margin-top: 8px; color: var(--dim); font-size: 15px; line-height: 1.6; }

/* ---------------- the front desk's lines outside the home (resources, the site's own pages) ---------------- */
.ric .room-head + .desk-rows { margin-top: 0; }
.ric .ic-links .desk-row, .ric .ic-resources .desk-row { grid-template-columns: 48px minmax(0, 1fr) 20px; }
/* Local areas (the page links' photo-card look, opt-in): each area a listing, two to four across with equal heights: its
   photograph in the hairline frame (or, beside cards that have one, the frame's band alone), its name in the display face,
   its line, the metal arrow */
.ric .area-grid { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 24px; }
.ric .area-grid.cols-2 { --cols: 2; }
.ric .area-grid.cols-3 { --cols: 3; }
.ric .area-grid.cols-4 { --cols: 4; }
.ric .area-grid > li { display: flex; min-width: 0; }
.ric .area-card { display: flex; flex-direction: column; width: 100%; min-width: 0; text-decoration: none; text-align: start; color: var(--text); background: var(--surface); border: 1px solid var(--hair); transition: border-color .25s ease; }
.ric .area-card:hover { border-color: var(--hair-strong); }
.ric .area-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--band); border-bottom: 1px solid var(--hair); }
.ric .area-ph img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .8s var(--ease); }
.ric .area-card:hover .area-ph img { transform: scale(1.04); }
.ric .area-cap { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 14px; align-items: center; flex: 1; padding: 20px 22px 22px; }
.ric .area-name { font: 600 21px/1.25 var(--serif); }
.ric .area-line { grid-column: 1; color: var(--dim); font-size: 14.5px; line-height: 1.55; }
.ric .area-cap > svg { grid-column: 2; grid-row: 1; width: 20px; height: 20px; color: var(--metal-lg); transition: transform .18s ease; }
.ric .area-card:hover .area-cap > svg { transform: translateX(4px); }

/* ============================================================
   THE BLOG (blog/BlogPages.tsx): the index and the article open on a page head on the gallery's raised ground (no
   photograph: the articles carry their own), the articles hang as listings, the calls to action are the firm's
   framed asks, the article reads in one column, the sign-off is the broker's plate
   ============================================================ */
.ric .page-head.bl-band { min-height: 0; display: block; padding: calc(var(--bar-h) + clamp(48px, 6vw, 80px)) var(--gutter) clamp(48px, 6vw, 72px); background: var(--surface); border-bottom: 1px solid var(--hair); }
.ric .bl-band .page-title { max-width: 18ch; }
.ric .bl-band.is-post .page-title { max-width: 24ch; font-size: clamp(34px, 4.6vw, 64px); }
/* a legal page opens in the band (sections/Blocks.tsx PageIntro), its title at an article's size: the policy starts on the first screen */
.ric .bl-band.is-legal .page-title { max-width: 24ch; font-size: clamp(34px, 4.6vw, 64px); }
.ric .bl-crumbs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 20px; }
.ric .bl-crumbs a { display: inline-flex; align-items: center; min-height: 32px; font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.ric .bl-crumbs a:hover { color: var(--link); }
.ric .bl-draft { display: inline-block; margin-bottom: 16px; padding: 7px 12px; font: 600 10.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); border: 1px solid var(--hair-strong); }
.ric .bl-kick { display: inline-block; margin-bottom: 14px; font: 600 10.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--metal); text-decoration: none; }
.ric a.bl-kick { display: inline-flex; align-items: center; min-height: 32px; margin-bottom: 8px; }
.ric a.bl-kick:hover { text-decoration: underline; text-underline-offset: 4px; }
.ric .bl-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ric .bl-topics a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; text-decoration: none;
  font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--hair);
  transition: color .18s ease, border-color .18s ease;
}
.ric .bl-topics a:hover { color: var(--text); border-color: var(--hair-strong); }
.ric .bl-topics a[aria-current="page"] { background: var(--ic-btn); color: var(--ic-on-btn); border-color: var(--btn-edge); }
.ric .bl-byline { display: flex; align-items: center; gap: 14px; margin-top: 26px; font-size: 14.5px; }
.ric .bl-byline a, .ric .bl-byline b { font-weight: 600; color: var(--text); text-decoration: none; }
.ric .bl-byline a { display: inline-block; padding-block: 7px; margin-block: -7px; }
.ric .bl-byline a:hover { color: var(--link); }
.ric .bl-byline-m { color: var(--dim); }
.ric .bl-av { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 1px solid var(--jewel-mark); font: 600 15px/1 var(--serif); color: var(--metal); background: var(--band); }
.ric .bl-av img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* the index: the lead article wide, the rest as listings */
.ric .bl-card { display: flex; flex-direction: column; min-width: 0; height: 100%; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--hair); transition: border-color .25s ease; }
.ric .bl-card:hover { border-color: var(--hair-strong); }
.ric .bl-card-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--hair); background: var(--band); }
.ric .bl-card-pic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .8s var(--ease); }
.ric .bl-card:hover .bl-card-pic img { transform: scale(1.04); }
.ric .bl-card-copy { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px 24px 26px; }
.ric .bl-card-copy .bl-kick { margin-bottom: 0; }
.ric .bl-card-h { font: 600 22px/1.25 var(--serif); color: var(--text); }
.ric .bl-card-dek { flex: 1; color: var(--dim); font-size: 15px; line-height: 1.6; }
.ric .bl-meta { padding-top: 12px; border-top: 1px solid var(--hair); font: 500 10.5px/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.ric .bl-card.is-lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-bottom: 28px; }
.ric .bl-card.is-lead .bl-card-pic { aspect-ratio: auto; min-height: 340px; border-bottom: 0; border-right: 1px solid var(--hair); }
.ric .bl-card.is-lead .bl-card-copy { justify-content: center; padding: clamp(28px, 3.6vw, 48px); }
.ric .bl-card.is-lead .bl-card-h { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; }
.ric .bl-card.is-lead .bl-card-dek { flex: none; font-size: 16.5px; }
/* a lead with no picture (real articles often have none): its words alone, one column, the jewel's rule along its top */
.ric .bl-card.is-lead:not(:has(.bl-card-pic)) { grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--room-mark); }
.ric .bl-card.is-lead:not(:has(.bl-card-pic)) .bl-card-copy { max-width: 820px; }
.ric .bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px; }
.ric .bl-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.ric .bl-pager-l { font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }
.ric .bl-index { padding-top: clamp(48px, 6vw, 80px); }
.ric .bl-empty { padding: 8px 0; font-size: 17px; color: var(--dim); }
/* a call to action: the firm's framed ask, the words in the display face, the action's button beside them */
.ric .bl-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; padding: clamp(24px, 3vw, 36px); background: var(--surface); border: 1px solid var(--hair-strong); border-top: 2px solid var(--room-mark); }
.ric .bl-cta-copy { display: grid; gap: 6px; max-width: 48ch; min-width: 0; }
.ric .bl-eyebrow { font: 500 10.5px/1.6 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--metal); }
.ric .bl-cta-h { font: 600 clamp(22px, 2.4vw, 30px)/1.2 var(--serif); color: var(--text); }
.ric .bl-cta-s { color: var(--dim); font-size: 15px; line-height: 1.6; }
.ric .bl-cta-go { display: grid; justify-items: start; gap: 8px; }
.ric .bl-cta-go small { font-size: 12.5px; color: var(--dim); }
.ric .bl-side .bl-cta + .bl-cta { margin-top: 18px; }
.ric .bl-cta.is-wide { padding: clamp(30px, 4vw, 52px); }
/* the article */
.ric .bl-read { padding-top: clamp(44px, 5vw, 72px); }
.ric .bl-hero { margin: 0 0 clamp(36px, 5vw, 56px); padding: 10px; background: var(--surface); border: 1px solid var(--room-mark); }
.ric .bl-hero img { width: 100%; height: auto; aspect-ratio: 16 / 8; -o-object-fit: cover; object-fit: cover; }
.ric .bl-lay { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(36px, 5vw, 80px); align-items: start; }
.ric .bl-lay.is-solo { grid-template-columns: minmax(0, 720px); justify-content: center; }
.ric .bl-col { min-width: 0; max-width: 720px; }
.ric .bl-prose { font-size: 17.5px; line-height: 1.8; color: var(--dim); }
.ric .bl-prose > * + * { margin-top: 1.1em; }
.ric .bl-prose h2, .ric .bl-prose h3 { margin-top: 1.6em; font: 600 clamp(26px, 2.6vw, 34px)/1.2 var(--serif); color: var(--text); }
.ric .bl-prose h3 { font-size: clamp(21px, 2vw, 25px); }
.ric .bl-prose strong, .ric .bl-prose b { color: var(--text); font-weight: 600; }
.ric .bl-prose a:not(.btn) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ric .bl-prose ul { list-style: disc; padding-left: 1.2em; }
.ric .bl-prose ol { list-style: decimal; padding-left: 1.2em; }
.ric .bl-prose li + li { margin-top: .45em; }
.ric .bl-prose li::marker { color: var(--metal); }
.ric .bl-prose blockquote { padding-left: 22px; border-left: 2px solid var(--jewel-mark); font: 400 1.15em/1.6 var(--serif); color: var(--text); }
.ric .bl-answer { margin: 32px 0; padding: 22px 26px; background: var(--surface); border: 1px solid var(--hair); border-left: 2px solid var(--room-metal-lg); font-size: 17px; color: var(--text); }
.ric .bl-answer-t, .ric .bl-prose .bl-answer-t { display: block; margin-bottom: 10px; font: 600 10.5px/1.6 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--metal); }
.ric .bl-table { overflow-x: auto; margin: 28px 0; border: 1px solid var(--hair); }
.ric .bl-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.ric .bl-table th, .ric .bl-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); color: var(--text); }
.ric .bl-table th { font: 600 10.5px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--metal); }
.ric .bl-faq { margin: 28px 0; border-top: 1px solid var(--hair); }
.ric .bl-faq details { border-bottom: 1px solid var(--hair); }
.ric .bl-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 18px; align-items: center; padding: 20px 0; font: 600 19px/1.35 var(--serif); color: var(--text); }
.ric .bl-faq summary::-webkit-details-marker { display: none; }
.ric .bl-faq details > :not(summary) { padding-bottom: 18px; color: var(--dim); }
.ric .bl-pm { position: relative; width: 32px; height: 32px; border: 1px solid var(--hair-strong); border-radius: 50%; }
.ric .bl-pm::before, .ric .bl-pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; translate: -50% -50%; background: var(--metal-lg); }
.ric .bl-pm::after { rotate: 90deg; transition: rotate .3s var(--ease); }
.ric .bl-faq details[open] .bl-pm::after { rotate: 0deg; }
.ric .bl-fig { margin: 32px 0; }
.ric .bl-fig img { width: 100%; height: auto; border: 1px solid var(--hair); }
.ric .bl-fig figcaption { margin-top: 10px; font-size: 13px; color: var(--dim); }
.ric .bl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--hair); }
.ric .bl-share-t { margin-right: 6px; font: 600 10.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.ric .bl-share-i { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--hair-strong); border-radius: 50%; color: var(--text); transition: border-color .2s ease; }
.ric .bl-share-i:hover { border-color: var(--metal); }
.ric .bl-share-i svg { width: 16px; height: 16px; }
.ric .bl-author { display: flex; gap: 20px; align-items: flex-start; margin-top: 44px; padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 1px solid var(--room-mark); }
.ric .bl-author .bl-av { width: 64px; height: 64px; }
.ric .bl-author-b { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.ric .bl-author-n { font: 600 22px/1.25 var(--serif); color: var(--text); }
.ric .bl-author-n a { display: inline-block; padding-block: 4px; text-decoration: none; }
.ric .bl-author-n a:hover { color: var(--metal); }
.ric .bl-author-r { font: 500 10.5px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ric .bl-author-l { font-size: 12.5px; color: var(--dim); }
.ric .bl-author-l a { display: inline-block; padding-block: 6px; color: var(--link); }
.ric .bl-author p { margin-top: 8px; max-width: 54ch; color: var(--dim); font-size: 15px; line-height: 1.65; }
.ric .bl-author .btn { margin-top: 14px; }
.ric .bl-aside { display: grid; gap: 22px; position: sticky; top: calc((var(--site-stuck, calc(76px * var(--z, 1))) + 24px) / var(--z, 1)); min-width: 0; }
.ric .bl-aside .bl-cta { flex-direction: column; align-items: flex-start; }
.ric .bl-toc { display: grid; gap: 4px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--hair); }
.ric .bl-toc b { margin-bottom: 6px; font: 600 10.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--metal); }
.ric .bl-toc a { display: block; padding-block: 6px; color: var(--dim); font-size: 14.5px; line-height: 1.45; text-decoration: none; }
.ric .bl-toc a:hover { color: var(--text); }
/* a legal page's list on a phone is a row of pills on the page's own ground (legal-doc.css drops its card there): it takes the ground's
   inks, not the card's (its label, the card's gold, read 4.01:1 on the day's ground) */
@media (max-width: 900px) { .ric .legal-nav.bl-toc { --metal: var(--metal-g); --metal-lg: var(--metal-lg-g); --jewel: var(--jewel-g); --link: var(--link-g); --tl: var(--tl-g); --outline-words: var(--tl-g-words, var(--tl)); --outline-edge: var(--tl-g-edge, var(--outline-words)); --jewel-mark: var(--mark-g); --btn-edge: var(--ring-g); } }
@media (max-width: 900px) { .ric:where([data-match-rule]) .legal-nav.bl-toc { --second: var(--second-g); --on-second: var(--on-second-g); --second-edge: var(--second-edge-g); } }
.ric .bl-more { padding-block: clamp(56px, 7vw, 96px); }
.ric .bl-more .section-head { margin-bottom: clamp(28px, 3.6vw, 44px); }

/* ============================================================
   REVEALS: each room settles once as it arrives
   ============================================================ */
/* only what starts below the first screen waits (the runtime arms it): what is on screen at hydration stays put, and
   with JavaScript off or reduced motion nothing is ever hidden */
.ric .reveal.is-armed { opacity: 0; transform: translateY(18px); }
.ric .reveal.is-armed.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html:has(.ric) { scroll-behavior: auto; }
  .ric *, .ric *::before, .ric *::after { animation: none !important; transition: none !important; }
  html:has(.ric) .video-ov, html:has(.ric) .video-ov * { animation: none !important; }
  .ric .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   WIDTHS
   ============================================================ */
/* the nav folds into the menu once it cannot sit on one line */
@media (max-width: 1180px) {
  .ric .nav-links, .ric .bar-second { display: none; }
  .ric .burger { display: grid; }
  .ric .mmenu { display: block; }
}
@media (max-width: 1020px) {
  .ric .desk, .ric .sheet, .ric .standard-grid, .ric .broker { grid-template-columns: 1fr; }
  .ric .contact-grid, .ric .pw-row, .ric .offer-frame.has-pic .offer-grid, .ric .page-head-grid, .ric .bl-lay, .ric .bl-card.is-lead { grid-template-columns: minmax(0, 1fr); }
  /* one column gives the figure the whole width, so it keeps its voice there */
  .ric .offer-amount { font-size: clamp(40px, 20cqi, 116px); }
  .ric .pw-row.is-right > :first-child { order: 0; }
  .ric .pw-row > .frame-pic, .ric .pw-row > .frame-video { max-width: 640px; }
  .ric .bl-card.is-lead .bl-card-pic { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--hair); }
  .ric .bl-aside { position: static; }
  .ric .trophy-grid { --cols: 2; }
  .ric .trophy-grid.n-1 { --cols: 1; }
  .ric .trophy-grid.n-3 { --cols: 3; }
  .ric .calc-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 20px; }
  /* every count the owner picks, two across (a picked count's own rule outweighed this one, and kept three tiny cards a row) */
  .ric .area-grid, .ric .area-grid:is(.cols-3, .cols-4) { --cols: 2; }
  .ric .sheet-left { position: static; }
  .ric .plate { width: 100%; max-width: 440px; margin: 0 auto; }
}
/* the phone: the dock shows once the opening has scrolled away; the plate spans the photograph edge to edge */
@media (max-width: 820px) {
  .ric { --bar-h: 64px; }
  .ric .mbar { display: grid; }
  .ric .foot { padding-bottom: 104px; }
  .ric .hero { padding-bottom: 76px; }
  .ric .hero-copy { margin-inline: calc(-1 * var(--gutter)); max-width: none; padding: 40px var(--gutter) 36px; }
  .ric .hero-head { margin-bottom: 18px; }
  .ric .hero-line { margin-bottom: 26px; }
  .ric .hero-copy .cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .ric .hero-copy .cta-row .btn-xl { width: 100%; --button-min-height: 52px; }
  .ric .ic-rail { right: 16px; bottom: 16px; padding: 4px 8px; }
  /* two highlights a row: their sides a little closer, so a short one ("NMLS #1234567") holds one line */
  .ric .stat { padding-inline: 12px; }
  .ric .stat-said { font-size: 18px; }
  .ric .listing-grid, .ric .clip-grid { gap: 20px; }
  .ric .listing-media { aspect-ratio: 16 / 9; }
  .ric .listing-body { padding: 22px 22px 24px; }
  .ric .listing-title { font-size: 22px; }
  /* the numeral sits above the words; the button keeps its own fixed column on the right, top-aligned in every row */
  .ric .sheet-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no btn" "words btn"; gap: 8px 16px; padding: 26px 0; }
  .ric .sheet-row .row-no { grid-area: no; font-size: 16px; }
  .ric .sheet-row .row-words { grid-area: words; }
  .ric .sheet-row .btn-run { grid-area: btn; margin-top: 0; padding: 0 8px; }
  .ric .row-title { font-size: 21px; }
  .ric .desk-row { grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 14px; padding: 22px 0; }
  .ric .press-top { flex-wrap: wrap; }
  .ric .clip { padding: 26px 22px 22px; }
  .ric .clip blockquote { font-size: 17.5px; }
  .ric .closer { padding-block: 104px; }
  .ric .closer .cta-row { flex-direction: column; align-items: stretch; }
  .ric .closer .cta-row .btn-xl { width: 100%; --button-min-height: 52px; }
  .ric .broker-words .cta-row .btn-xl { flex: 1 1 100%; --button-min-height: 52px; }
  /* every link a thumb aims at has a 32px box at least; padding grows it, an equal negative margin gives the room back */
  .ric .foot-office a { padding-block: 8px; }
  /* the page head: the plate spans the photograph edge to edge, its button the width of the screen */
  .ric .page-head { padding-bottom: 72px; }
  .ric .page-head:not(.is-night):not(.bl-band) .page-plate { margin-inline: calc(-1 * var(--gutter)); max-width: none; padding: 36px var(--gutter) 34px; }
  .ric .page-plate .cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .ric .page-plate .cta-row .btn-xl { width: 100%; --button-min-height: 52px; }
  .ric .page-title { margin-bottom: 14px; }
  .ric .page-line { margin-bottom: 24px; }
  /* a calculator's row: its numeral and words, then its two buttons side by side under them */
  .ric .calc-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ric .calc-row .row-no { font-size: 16px; }
  .ric .calc-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ric .calc-acts .btn-run { padding: 0 10px; }
  .ric .ask-frame { grid-template-columns: minmax(0, 1fr); }
  .ric .ask-frame > .btn { width: 100%; }
  .ric .contact-grid .cta-row .btn-xl, .ric .offer-actions .btn-xl, .ric .ic-callout .cta-row .btn-xl, .ric .ic-member .cta-row .btn-xl { flex: 1 1 100%; --button-min-height: 52px; }
  .ric .qa-a { padding-right: 0; }
  .ric .az-group { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ric .fact-row { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px; padding: 22px 0; }
  .ric .trophy-grid.n-3 { --cols: 1; }
  .ric .team[data-count="2"] { grid-template-columns: minmax(0, 1fr); }
  .ric .team { gap: 20px; }
  .ric .press-logos { gap: 16px 28px; }
  .ric .press-logos img { height: 32px; max-width: 132px; }
  .ric .bl-author { flex-direction: column; }
  .ric .bl-pager { flex-wrap: wrap; }
  .ric .video-title { font-size: 20px; }
  .ric .area-grid, .ric .area-grid:is(.cols-2, .cols-3, .cols-4) { --cols: 1; gap: 18px; }
  /* a person's page on a phone opens on them: a smaller framed portrait, their name, line, licenses and rating, then their
     buttons, then the ways to reach them, then the rest */
  .ric .ic-member .plate { max-width: 260px; }
  .ric .ic-member .broker-words { display: flex; flex-direction: column; }
  .ric .ic-member .broker-words > :is(.person-team, .broker-name, .person-line, .person-licenses, .person-rating) { order: -3; }
  /* their buttons the template's 20px under the rating (the rating's own 4px left them about 10px under it) */
  .ric .ic-member .broker-words > .cta-row { order: -2; margin: 20px 0 32px; }
  .ric .ic-member .broker-words > .person-reach { order: -1; margin-top: 0; }
}
@media (max-width: 640px) {
  /* and the plate a small one over their name, so all of that holds the first screen */
  .ric .ic-member .broker { gap: 20px; }
  .ric .ic-member .plate { width: 132px; max-width: 132px; padding: 6px; margin: 0; }
  /* the ways to reach them the phone's 20px under the buttons, never against them (Andrew, 2026-11-03) */
  .ric .ic-member .broker-words > .cta-row { margin-bottom: 20px; }
  .ric .ic-member .person-reach { margin-bottom: 8px; }
  .ric .ic-member .broker-facts { margin-top: 28px; }
}
/* the bar's lockup on a phone and a small tablet (the concept's at this size, concept icon.css:1290): the brand alone beside the
   button and the menu, never squeezed by them.
   - The name: no monogram and no company line (the footer keeps both); whole, wrapping only between words (a word breaks only
     if it is wider than the bar itself), its size stepping down on the narrowest phones instead.
   - A logo: at the owner's phone height (--rs-logo-h-phone, logo.ts logoCssVars), and beside it the name and the NMLS, always
     (REBEL SITES 10-27: the logo alone left the bar nameless); the NMLS at a size a phone reads (12px, its tracking eased). Beside
     a logo on a small phone the bar's button moves to the dock and the menu (560px), and on the narrowest the logo gives up its
     size and its rule (420px), before the name or the NMLS gives up a letter.
   - The link is a 44px tap either way. */
@media (max-width: 820px) {
  .ric .brandmark .logo, .ric [data-rs-live-logo] .logo { --logo-h: var(--rs-logo-h-phone, var(--rs-logo-h, 36px)); }
  .ric .bar .brand-mark, .ric .bar .mark-words > .mark-powered, .ric .bar .brandmark[data-logo-broken] .mark-fallback { display: none; }
  .ric .bar .brand, .ric .bar .brandmark { min-height: 44px; }
  .ric .bar .mark-words b {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
    font-size: clamp(10.5px, 3.4vw, 15px); line-height: 1.2; letter-spacing: .14em;
  }
  .ric .bar .mark-words > .label { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; font-size: 12px; letter-spacing: .14em; }
  .ric .bar .brandmark .logo, .ric .bar [data-rs-live-logo] .logo { flex: 0 1 auto; min-width: 0; }
  /* the bar's button never takes the brand's room: past its cap its words wrap (two or three lines inside its 44px), so a
     30-letter button leaves a 6.7:1 logo 150px or more (22px tall) at 401 and the name its longest word; where the bar has
     room to spare (580 and up: the brand never needs more than its 240px) the cap opens, so short words stay on one line. The
     cap is never under 160px, the width the 400px rule below holds: "Get pre-approved" (157px drawn) never breaks to a word a
     line between 401 and 470, where 36vw was 144 to 169px (measured, Chromium) */
  .ric .bar-end .btn-sm { max-width: max(min(36vw, 180px), 100vw - 380px, 160px); line-height: 1.15; }
}
@media (max-width: 560px) {
  /* 16px between the lockup and what follows it (the button, or the menu button) */
  .ric .bar-in { gap: 16px; }
  /* beside a logo the bar's button moves to the dock and the menu (it waits in both), so the name and the NMLS keep every letter
     (at 480 the lockup came within 14px of it, the name on two lines) */
  .ric .bar:not(.bar-min) .bar-in:has(> :is(.brandmark.has-logo:not([data-logo-broken]), [data-rs-live-logo])) .bar-end .btn-sm { display: none; }
  .ric .bar-end .btn-sm { padding: 0 12px; font-size: 10.5px; letter-spacing: .08em; }
  .ric .mark-words b { font-size: 13px; letter-spacing: .16em; }
  .ric .mark-words > span { font-size: 9px; letter-spacing: .2em; }
}
/* the narrowest phones: on a page that opens on the slideshow, the bar keeps the name and the menu and its button moves into
   the menu (the hero's own is on screen); every other page keeps the bar's button, the first screen's one action */
@media (max-width: 400px) {
  .ric:has(> main > .hero:first-child) .bar-end .btn-sm { display: none; }
  /* room for two words on one line ("Get pre-approved"): a longer button wraps, its last two words together */
  .ric .bar-end .btn-sm { max-width: 160px; padding: 0 10px; line-height: 1.15; letter-spacing: .06em; }
  .ric .bar-end { gap: 8px; }
}
/* the narrowest phones: the logo gives up its size and the rule beside it before the name or the NMLS gives up a letter */
@media (max-width: 420px) {
  .ric .bar .brandmark, .ric .bar [data-rs-live-logo] { --lockup-gap: 12px; }
  .ric .bar .brandmark.has-logo:not([data-logo-broken]) > .logo, .ric .bar [data-rs-live-logo] > .logo { max-width: 104px; border-right: 0; padding-right: 0; }
  .ric .bar .brandmark .logo-img, .ric .bar [data-rs-live-logo] .logo-img { max-height: 28px; }
}
/* the narrowest phones (360): the button's letters and the name's a little closer, so both hold one line beside each other */
@media (max-width: 374px) {
  .ric .bar-end .btn-sm { padding: 0 8px; letter-spacing: .02em; }
  .ric .bar .mark-words b { letter-spacing: .12em; }
}
/* laptop heights: the floating plate clears the bar as well as the floor */
@media (min-width: 821px) and (max-height: 820px) {
  .ric .hero { padding-bottom: 64px; }
  .ric .hero-copy { padding-top: 44px; padding-bottom: 44px; }
  .ric .accent-rule { margin-bottom: 18px; }
  .ric .hero-head { margin-bottom: 16px; font-size: clamp(36px, min(6.4vw, 10.5vh), 96px); }
  .ric .hero-head[data-len="long"] { font-size: clamp(36px, min(6vw, 10.5vh), 88px); }
  .ric .hero-line { margin-bottom: 24px; }
  .ric .hero-fine { margin-top: 20px; }
}

/* ============================================================
   The editor's selection in the preview (templates/cinematic/edit-mode.ts), as every template draws it: hovered dashed,
   selected solid, a section's ring inside its edge, the hover's name tag, the words being edited. Preview only. A thing
   being edited is only ringed outside its edge: its own fill, shape and shadow stay.
   ============================================================ */
.ric[data-preview] .rs-sel-hover { outline: 2px dashed #e0007e; outline-offset: 2px; }
.ric[data-preview] .rs-sel-on { outline: 2px solid #e0007e; outline-offset: 2px; }
.ric[data-preview] [data-sel-section].rs-sel-hover, .ric[data-preview] [data-sel-section].rs-sel-on { outline-offset: -3px; }
.ric[data-preview] .rs-sel-tag {
  position: fixed; z-index: 2147483000; pointer-events: none; padding: 4px 8px; border-radius: 6px;
  background: #e0007e; color: #fff; font: 600 12px/1.2 system-ui, sans-serif; letter-spacing: 0; white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgb(0 0 0 / .35);
}
.ric[data-preview] .rs-sel-tag[hidden] { display: none; }
.ric[data-preview] .rs-editing { outline: 2px solid #e0007e; outline-offset: 3px; }
.ric[data-preview] .rs-editing:not([data-sel]) { border-radius: 2px; }

/* a wide dropdown (nav-draw.tsx: a long list in columns, the menu builder's columns and block): the same panel, a column's
   heading a spaced capital in the dim ink, the block on the band with the house's button */
.ric .nav-drop .nav-mega .nav-col-h { font: 500 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.ric .nav-drop .nav-mega .nav-cta { border: 1px solid var(--menu-line); }
.ric .nav-drop .nav-mega .nav-cta-h { font: 600 22px/1.15 var(--serif); }
.ric .nav-drop .nav-mega .nav-cta-line { font: 400 13.5px/1.45 var(--sans); }
.ric .mm-sub .mm-col-h { font: 500 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.ric .mm-sub .mm-cta { border: 1px solid var(--menu-line); }
.ric .mm-sub .mm-cta .nav-cta-h { font: 600 24px/1.15 var(--serif); }

/* the Loans overview (page-link-cards.tsx HubGroups; shape in page-link-hub.css): each card Icon's listing (the concept's programs, three
   across: its surface, its hairline frame, the jewel rule along its top), the name in the serif, the icon and arrow in metal */
.ric .shared-hub .hub-h { --hub-line: var(--hair); font: 600 clamp(24px, 2.2vw, 30px)/1.2 var(--serif); color: var(--text); }
.ric .hub-card { background: var(--surface); border: 1px solid var(--hair); border-top: 2px solid var(--jewel-mark); color: var(--text); transition: border-color .25s ease; }
.ric .hub-card:hover { border-color: var(--hair-strong); border-top-color: var(--jewel-mark); }
.ric .hub-name { font: 600 22px/1.2 var(--serif); }
.ric .hub-line { font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.ric .hub-card :is(.hub-ico, .hub-go) { color: var(--metal-lg); }

/* The owner's second button color (config.ts secondButtonColor, the Design pane's "Second button"; Andrew, 2026-10-21): every
   element this template draws in its second look (.btn-ghost) is filled with it: the owner's second buttons, the phone dock's, the phone menu's Call and Text and the blog's pager and share links.
   Its words take the color that reads on it (--rs-second-ink: theme.ts readableOn), and hover shades the fill away from the words
   (--rs-second-shade), so they read better still. Only on a root that carries the color (chrome-kit.tsx secondButtonAttrs): on Auto
   neither the mark nor the colors exist, so none of this applies. The :not(#…) lifts it over every ground's and hover's own rule
   for the look; a button's own color (drawn inline) still wins; many of one button keep the crowd's outline. */
.ric[data-second-button] .btn-ghost:not(.btn-many):not(#rs-second-button) {
  background-color: var(--rs-second); background-image: none; border-color: var(--rs-second); color: var(--rs-second-ink);
}
.ric[data-second-button] .btn-ghost:not(.btn-many):not(#rs-second-button):hover {
  background-color: color-mix(in srgb, var(--rs-second) 88%, var(--rs-second-shade)); border-color: color-mix(in srgb, var(--rs-second) 88%, var(--rs-second-shade));
}

/* ── The blog's sidebar modules and its subscribe box (blog-shell/BlogModules.tsx), in Icon's own type and colors ──
   Beside the text with the call to action, in the owner's order; a column holding more than the call to action scrolls
   with the page (a sticky column taller than the window hides its own end). Lines and quiet words are the ground's own ink,
   so a module reads on the paper and on a colored band alike. */
.ric .bl-aside:has(> .bl-mod) { position: static; }
.ric .bl-mod { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--hair); }
.ric .bl-mod-h { font: 600 10.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--metal); }
.ric .bl-mod-sub, .ric .bl-mod-fine { font-size: 14.5px; line-height: 1.45; color: color-mix(in srgb, currentColor 70%, transparent); }
.ric :is(.bl-mod-name, .bl-mod-more, .bl-mod-topic, .bl-mod-post, .bl-mod-sub a) { color: inherit; }
.ric .bl-mod-who { display: flex; align-items: center; gap: 14px; }
.ric .bl-mod-av { flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; border: 1px solid var(--jewel-mark); font: 600 15px/1 var(--serif); color: var(--metal); background: var(--band); }
.ric .bl-mod-av img, .ric .bl-mod-ph img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ric .bl-mod-who-b, .ric .bl-mod-post-b { display: grid; gap: 2px; min-width: 0; }
.ric .bl-mod-name { font: 600 22px/1.25 var(--serif); color: var(--text); text-decoration: none; }
.ric .bl-mod-more { justify-self: start; font-weight: 600; text-underline-offset: .2em; }
.ric .bl-mod-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ric .bl-mod-topic, .ric .bl-mod-rates > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.ric .bl-mod-topic, .ric .bl-mod-post { text-decoration: none; }
.ric .bl-mod-n { font-variant-numeric: tabular-nums; color: color-mix(in srgb, currentColor 66%, transparent); }
.ric .bl-mod-post { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 0; }
.ric .bl-mod-post:not(:has(.bl-mod-ph)) { grid-template-columns: minmax(0, 1fr); }
.ric .bl-mod-ph { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--hair); background: var(--band); }
.ric .bl-mod-post-t { font-weight: 600; line-height: 1.3; }
.ric .bl-mod-name:hover, .ric .bl-mod-topic:hover > span:first-child, .ric .bl-mod-post:hover .bl-mod-post-t { text-decoration: underline; text-underline-offset: .2em; }
.ric .bl-mod-rates { display: grid; margin: 0; }
.ric .bl-mod-rates dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ric .bl-mod > .btn { justify-self: start; }
.ric .bl-mod-frame { display: block; width: 100%; border: 0; }
.ric .bl-sub { padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 1px solid var(--room-mark); }
.ric .bl-author + .bl-sub { margin-top: 22px; }
.ric :is(.bl-index, .bl-side) > :is(.wrap, .section-in, .chapter-in) > * + :is(.bl-mod, .bl-sub) { margin-top: 22px; }
.ric :is(.bl-index, .bl-side) .bl-mod { max-width: 640px; }

/* ── An article's rail and phone drawer (blog-shell/BlogRail.tsx; the shared layout is blog-rail.css), in Icon's own surfaces:
   the bar's and drawer's paper, ink and line, how far under the header the kept group stops (the rail's old sticky top),
   and "In this article" as its own card (already framed), its entries one type step under the cards (14.5px → 13.5px). ── */
.ric .bl-rail { --bl-paper: var(--ground); --bl-ink: var(--text); --bl-line: var(--hair); }
.ric .bl-rail { --bl-rail-top: calc((var(--site-stuck, calc(76px * var(--z, 1))) + 24px) / var(--z, 1)); }
.ric .bl-rail-toc a { font-size: 13.5px; }
/* the official Equal Housing artwork on the Legal page (legal-doc.tsx draws both; legal-eho-grounds.test) for its band’s ground: the night’s ground, the day’s in the light tone */
.ric .legal-read .legal-eho-on-dark { display: block; }
.ric .legal-read .legal-eho-on-light { display: none; }
.ric[data-mode="light"] .legal-read .legal-eho-on-light { display: block; }
.ric[data-mode="light"] .legal-read .legal-eho-on-dark { display: none; }

/* ---- the button fit's gutters (fit.css): a call-to-action row measures its column as the screen less this, so the variable sits on
   the root and a place that insets its row says its own (measured at 360, twice the row's x): never on the button, whose own
   declaration would hide the place's ---- */
.ric { --button-gutter: 44px; }
.ric .offer-words .cta-row { --button-gutter: 90px; } /* the offer frame */

/* ============================================================
   THE PROPOSED COLOUR ENGINE (color-engine.ts 'proposed': the brand-colours prototype's Proposed switch only; every live page carries no
   data-color-engine and draws exactly as above). ONE ACTION COLOUR (Andrew, 2026-11-01; branch tpl/action-color ported behind the switch): a
   crowd's words and its outline are --tl, the action colour .text-cta already reads: the main button's fill wherever it reads on the place, else
   its one nearest shade (brand-engine actionColor; theme.ts emits --ic-text-link-<place> so on this engine only).
   ============================================================ */
/* ONE HUE, TWO SHADES (REBEL SITES, 2026-11-03: an outlined button is a button, not a text link): a crowd's words read --outline-words, the main button's
   color at AA, and its outline --outline-edge, the fill itself where it stands 3:1 on the ground, else that shade (brand-engine actionShades); a text link
   keeps --tl, the link shade (7:1 on a light ground). The theme emits each ground's pair beside its link variable (-words, -edge). */
.ric[data-color-engine="proposed"] .btn-main.btn-many { color: var(--outline-words); box-shadow: inset 0 0 0 1px var(--outline-edge); }
.ric[data-color-engine="proposed"] .btn-main.btn-many:hover { box-shadow: inset 0 0 0 2px var(--outline-edge); }
/* THE MATCH BUTTON RULE's crowd (match-buttons.ts crowdButton, ruling Q6; Blocks.tsx marks a crowded row's second button only under the rule): the
   second buttons beside a crowd's outlined mains take the same outline (the 1px border every button reserves), never a fill */
.ric:where([data-match-rule]) .btn-ghost.btn-many, .ric:where([data-match-rule]) .btn-ghost.btn-many:hover { background: transparent; color: var(--outline-words); border-color: var(--outline-edge); }
/* EYEBROWS ARE THE SECONDARY (Andrew, 2026-11-01; branch tpl/eyebrows ported behind the switch): a listing's line over its heading is the metal at
   its shade on the card, not the quiet words */
.ric[data-color-engine="proposed"] .listing-who { color: var(--metal); }