/* ============================================================
   Rondo brand chrome — shared new-site template layer.
   Injected by /assets/js/brand-chrome.js on every public page:
   dark branded header, unified footer, warm page ground.
   Tokens: docs/BRAND_GUIDELINES_2026-09.md. Namespaced .rb-*.
   ============================================================ */
/* The licensed heading face, so --rb-display below resolves to it for a
   VISITOR and not only on a machine that has the family installed.
   brand-site.css has named these two families since it shipped and declared
   neither, so every page carrying the brand chrome has been falling back to
   Helvetica on every device that is not a Rondo designer's; index.html and
   common.css each declared their own copy, which is why the home page looked
   right and the rest did not. Served from the frontend source of truth by the
   /assets/fonts/:file route in server.js — the same files the app bundles
   (Retail Power Type Foundry, PTF-2063). `swap`, so a 110 KB display face
   never holds up first paint. */
@font-face {
  font-family: 'Base Neue Expanded Extra Bold';
  src: url('/assets/fonts/BaseNeue-ExpandedExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Base Neue Expanded';
  src: url('/assets/fonts/BaseNeue-ExpandedExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Base Neue Expanded';
  src: url('/assets/fonts/BaseNeue-ExpandedBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Base Neue Expanded';
  src: url('/assets/fonts/BaseNeue-ExpandedMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --rb-green: #006A29;
  --rb-aqua: #08655C;
  --rb-dark: #0B2119;
  --rb-charcoal: #111111;
  --rb-beige: #D0CAAC;
  --rb-warm: #F4F1E6;
  --rb-stone: #6B6F6A;
  --rb-night: linear-gradient(160deg, #006A29 0%, #0B2119 55%, #111111 100%);
  --rb-field: linear-gradient(135deg, #D0CAAC 0%, #08655C 55%, #006A29 100%);
  --rb-display: 'Base Neue Expanded Extra Bold', 'Base Neue Expanded', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

body.rb-on { background: var(--rb-warm); }
/* Hidden legacy chrome (the injector adds .rb-legacy-hidden) */
.rb-legacy-hidden { display: none !important; }

/* ---------- Header ---------- */
.rb-header { background: var(--rb-night); color: var(--rb-warm); position: sticky; top: 0; z-index: 900; box-shadow: 0 6px 24px -12px rgba(11, 33, 25, .55); }
.rb-header-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); padding: 10px clamp(16px, 3vw, 32px); }
.rb-header .rb-logo { display: flex; align-items: center; flex-shrink: 0; }
.rb-header .rb-logo img { height: 56px; width: auto; filter: brightness(0) invert(1); display: block; }
.rb-header a.rb-link { color: #cfe0d2; font-size: 12px; letter-spacing: .18em; font-weight: 700; text-decoration: none; text-transform: uppercase; padding: 6px 2px; }
.rb-header a.rb-link:hover { color: #fff; }
.rb-header a.rb-link.rb-active { color: #fff; border-bottom: 2px solid var(--rb-beige); }
.rb-header a.rb-login { margin-left: auto; color: #cfe0d2; font-size: 12px; letter-spacing: .18em; font-weight: 700; text-decoration: none; text-transform: uppercase; padding: 6px 2px; white-space: nowrap; }
.rb-header a.rb-login:hover { color: #fff; }
.rb-header .rb-cta { background: var(--rb-warm); color: var(--rb-dark); font-weight: 800; font-size: 12.5px; letter-spacing: .08em; border-radius: 10px; padding: 11px 20px; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.rb-header .rb-cta:hover { filter: brightness(1.04); }
.rb-burger { display: none; margin-left: auto; background: transparent; border: 1px solid rgba(244,241,230,.4); color: var(--rb-warm); border-radius: 9px; width: 42px; height: 38px; font-size: 18px; cursor: pointer; }
@media (max-width: 860px) {
  .rb-header a.rb-link { display: none; }
  .rb-header a.rb-login { display: none; }
  .rb-header .rb-cta { display: none; }
  .rb-burger { display: block; }
  .rb-header.rb-open a.rb-link, .rb-header.rb-open a.rb-login, .rb-header.rb-open .rb-cta { display: block; }
  .rb-header.rb-open a.rb-login { width: 100%; padding: 10px 2px; border-bottom: 1px solid rgba(244,241,230,.12); }
  .rb-header.rb-open .rb-header-inner { flex-wrap: wrap; }
  .rb-header.rb-open a.rb-link { width: 100%; padding: 10px 2px; border-bottom: 1px solid rgba(244,241,230,.12); }
  .rb-header.rb-open .rb-cta { margin: 10px 0 4px; text-align: center; width: 100%; }
}

/* ---------- Page title band (optional, via data-rb-title) ---------- */
.rb-band { background: var(--rb-night); color: var(--rb-warm); padding: clamp(30px, 5vw, 60px) clamp(16px, 3vw, 32px) clamp(26px, 4vw, 50px); margin-top: -1px; }
.rb-band-inner { max-width: 1180px; margin: 0 auto; }
.rb-band .rb-eyebrow { font-size: 11px; letter-spacing: .3em; color: var(--rb-beige); font-weight: 700; text-transform: uppercase; }
.rb-band h1 { font-family: var(--rb-display); font-size: clamp(28px, 4.6vw, 54px); text-transform: uppercase; font-weight: 800; letter-spacing: .005em; line-height: .98; margin: 10px 0 0; }

/* ---------- Footer ---------- */
.rb-footer { background: var(--rb-charcoal); color: #9aa39c; padding: clamp(40px, 6vw, 64px) clamp(16px, 3vw, 32px) 30px; margin-top: 60px; }
.rb-footer-inner { max-width: 1180px; margin: 0 auto; }
.rb-footer .rb-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; }
.rb-footer .rb-logo img { height: 44px; filter: brightness(0) invert(1); opacity: .95; }
.rb-footer .rb-brandline { color: var(--rb-beige); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; margin: 12px 0 8px; font-family: var(--rb-display); }
.rb-footer h4 { color: #fff; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; }
.rb-footer a { display: block; font-size: 13.5px; padding: 4px 0; color: #9aa39c; text-decoration: none; }
.rb-footer a:hover { color: #fff; }
.rb-footer .rb-base { border-top: 1px solid #232823; margin-top: 32px; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.rb-footer .rb-base a { display: inline; padding: 0; }
@media (max-width: 780px) { .rb-footer .rb-cols { grid-template-columns: 1fr 1fr; } }