/* ============================================================
   Ricky's Gutters: design tokens
   Single source of truth for color, type, and spacing.
   Palette sampled from the logo: navy #003A93 dominates, with an
   electric-blue-to-cyan ramp. There is no yellow in the logo, which
   is why --rg-action is reserved for actions only.
   Do not hardcode these values anywhere else.
   ============================================================ */
:root {
  /* Brand blues */
  --rg-navy:        #003A93;
  --rg-navy-deep:   #002766;
  --rg-navy-ink:    #001B4A;
  --rg-blue:        #0050F0;
  --rg-blue-mid:    #1470EA;
  --rg-cyan:        #00C8FF;
  --rg-cyan-light:  #7FDBFF;

  /* Action. Allowed in exactly six places: header phone button,
     hero phone button, quote-form Continue, about-section call button,
     mobile sticky call bar, and the closing CTA band's call button. That
     last one is the page's final ask, which is what this color is for.
     Do not add a seventh. */
  --rg-action:      #F9A825;
  --rg-action-hover:#E59712;
  --rg-action-ink:  #12263F;

  /* Surfaces */
  --rg-surface:     #FFFFFF;
  --rg-surface-alt: #EEF5FF;
  --rg-border:      #D7E6FB;
  --rg-border-cool: #C8D6EA;
  --rg-hairline:    #DDE5F2;

  /* Text */
  --rg-text:        #002766;
  --rg-text-body:   #2C4A75;
  --rg-text-muted:  #5A6E8C;
  --rg-on-dark:     #FFFFFF;
  --rg-on-dark-dim: rgba(255,255,255,.82);

  /* Type */
  --rg-font-head:   "Archivo", system-ui, sans-serif;
  --rg-font-body:   "Roboto", system-ui, sans-serif;

  /* Fluid type scale: desktop targets from the design, floored for mobile */
  --rg-h1:      clamp(2.125rem, 1.15rem + 3.9vw, 4.25rem);   /* 34 → 68px */
  --rg-h2:      clamp(1.75rem,  1.25rem + 2.0vw, 2.75rem);   /* 28 → 44px */
  --rg-h3:      clamp(1.25rem,  1.05rem + 0.8vw, 1.625rem);
  --rg-body:    clamp(1.0625rem, 1.0rem + 0.2vw, 1.1875rem); /* 17 → 19px */
  --rg-helper:  0.9375rem;
  --rg-eyebrow: 0.8125rem;

  /* Radius / elevation */
  --rg-r-sm: 8px;
  --rg-r-md: 10px;
  --rg-r-lg: 16px;
  --rg-r-pill: 999px;
  --rg-shadow-card: 0 30px 60px rgba(0,20,56,.5);
  --rg-shadow-soft: 0 4px 20px rgba(0,20,56,.12);

  /* Layout */
  --rg-max: 1440px;
  --rg-gutter: 40px;

  /* Minimum tap target: the audience skews older, do not shrink this */
  --rg-tap: 56px;
}

@media (max-width: 750px) {
  :root { --rg-gutter: 16px; }
}
@media (max-width: 320px) {
  :root { --rg-gutter: 10px; }
}

/* ---------- minimal reset ----------
   Replaces the old base.css reset, which also carried a large amount of
   now-unused component CSS for the retired homepage sections. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body {
  width: 100%;
  overflow-x: hidden;
  font-family: var(--rg-font-body);
  font-size: var(--rg-body);
  line-height: 1.6;
  color: var(--rg-text-body);
  background: var(--rg-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--rg-navy); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--rg-font-head); line-height: 1.15; }
:focus-visible { outline: 3px solid var(--rg-cyan); outline-offset: 2px; }

/* ---------- overlay scrollbar ----------
   Chrome's classic scrollbar always reserves layout width, so the page gets
   narrowed by it. js/rg-scrollbar.js hides the native bar and draws this one
   on top of the content instead. Nothing reflows when it appears, and it
   never eats into the layout.

   The hide rule is scoped to the class the script sets, so if the script does
   not run, whether from no JS, a touch pointer, or a page too short to
   scroll, the native scrollbar is left exactly as it was. */

html.rg-overlayscroll { scrollbar-width: none; }
html.rg-overlayscroll::-webkit-scrollbar { width: 0; height: 0; }

.rg-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: 14px;
  /* The strip itself must never swallow a click meant for the page. Only the
     thumb takes pointer events. */
  pointer-events: none;
}
.rg-scrollbar__thumb {
  position: absolute;
  top: 0;
  right: 3px;
  width: 8px;
  min-height: 40px;
  border-radius: var(--rg-r-pill);
  pointer-events: auto;
  /* Dark fill with a faint light ring, so it stays legible over the white
     sections and the navy ones both. */
  background: rgba(4, 18, 40, .42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
  transition: background 160ms ease, width 160ms ease, right 160ms ease;
}
.rg-scrollbar__thumb:hover,
.rg-scrollbar.is-dragging .rg-scrollbar__thumb {
  width: 12px;
  right: 1px;
  background: rgba(4, 18, 40, .74);
}
.rg-scrollbar.is-dragging .rg-scrollbar__thumb { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .rg-scrollbar__thumb { transition: none; }
}