/* ==========================================================================
   repeatservice-site.css  ·  v2 (native-elements build)

   HOW TO INSTALL — no PHP, no file uploads:
     WordPress admin -> Appearance -> Customize -> Additional CSS
     Select all, paste this entire file, click Publish.

   The two @import lines below load the fonts, so there is nothing else to set up.
   They must stay at the very top: CSS ignores an @import that appears after any
   rule. (Comments above them are fine.)

   Two things to know about Additional CSS:
     - It is stored per theme. If you switch themes you will need to paste it again.
     - It applies site-wide, which is what this needs. Do NOT put it in WPBakery's
       "Page Settings -> Custom CSS" - that is per-page, and other pages would then
       render as unstyled text.

   v2: the page uses NO Raw HTML, NO JavaScript, and NO images. Every device
   (dispatch board, coverage bars, year band with its clip-path demand curve,
   audit artifact, callout, header, footer) is class-based markup inside
   vc_column_text, so all of its styling lives in this file.
   ========================================================================== */

@import url("https://api.fontshare.com/v2/css?f%5B%5D=satoshi@400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

/* --------------------------------------------------------------------------
   1. TOKENS  (verbatim from the source page)
   -------------------------------------------------------------------------- */
:root {
  --ink: #22262b;
  --muted: #5a6169;
  --paper: #faf9f6;
  --teal: #0f766e;
  --teal-soft: #85b8b2;

  --ink-deep: #171a1e;
  --ink-line: #2e343a;
  --teal-deep: #0b5a54;
  --teal-glow: rgba(15, 118, 110, 0.28);
  --teal-wash: #edf4f3;
  --on-dark: #faf9f6;
  --on-dark-mute: #a8aeb4;
  --white: #ffffff;

  --grey-900: #22262b; --grey-800: #34393f; --grey-700: #474d54;
  --grey-600: #5a6169; --grey-500: #7b828a; --grey-400: #9ca3ab;
  --grey-300: #c3c8cd; --grey-200: #e2e4e6; --grey-100: #eeefef;
  --grey-050: #f4f3f0;

  --teal-900: #0b5a54; --teal-700: #0f766e; --teal-500: #2c9188;
  --teal-300: #85b8b2; --teal-100: #d7e8e5; --teal-050: #edf4f3;

  /* Ember: the one warm signal, off-board only. Never "booked", never a CTA. */
  --ember-700: #8c631f; --ember-500: #b8873a; --ember-100: #f2e6cf;

  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-tertiary: var(--grey-500);
  --text-inverse: var(--on-dark);
  --text-inverse-mute: var(--on-dark-mute);
  --text-accent: var(--teal);
  --text-link: var(--teal);
  --text-link-hover: var(--teal-deep);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--grey-050);
  --surface-ink-gradient: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
  --surface-teal-gradient: linear-gradient(180deg, #12837a 0%, var(--teal) 100%);

  --border-hairline: rgba(34, 38, 43, 0.12);
  --border-default: rgba(34, 38, 43, 0.18);
  --border-strong: var(--ink);
  --border-grid-dark: var(--ink-line);
  --border-on-dark: rgba(250, 249, 246, 0.16);

  --board-ground: var(--ink);
  --board-rule: var(--ink-line);
  --board-slot-empty: rgba(250, 249, 246, 0.03);
  --board-job-existing: var(--muted);
  --board-job-booked: var(--teal);
  --board-glow: var(--teal-glow);

  --font-sans: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 900;

  --text-hero: clamp(40px, 4.6vw, 64px);
  --text-section: clamp(28px, 2.7vw, 38px);
  --text-quote: clamp(30px, 3.4vw, 48px);
  --text-figure: clamp(38px, 4vw, 56px);
  --text-figure-sm: clamp(28px, 2.4vw, 34px);
  --text-sub: clamp(18px, 1.5vw, 21px);
  --text-body: 18px;
  --text-caption: 14px;
  --text-grid: 13px;
  --text-grid-sm: 11px;

  --leading-hero: 1.02; --leading-tight: 1.1; --leading-snug: 1.2; --leading-body: 1.65;
  --tracking-hero: -0.02em; --tracking-section: -0.015em; --tracking-grid: 0.06em;

  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px;--space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-28: 112px; --space-32: 128px; --space-36: 140px;

  --measure-prose: 720px;
  --container-max: 1240px;
  --gutter-page-lg: clamp(24px, 4vw, 56px);
  --section-y: clamp(72px, 9vw, 128px);
  --section-y-tight: clamp(72px, 8vw, 112px);

  --radius-sm: 4px; --radius-button: 8px; --radius-card: 10px; --radius-slot: 3px;
  --rule-thick: 2px;

  --shadow-card: 0 2px 8px rgba(34, 38, 43, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(34, 38, 43, 0.10);
  --shadow-on-teal: 0 8px 28px rgba(0, 0, 0, 0.16);
  --shadow-artifact: 0 24px 60px rgba(34, 38, 43, 0.22);
  --lift-hover: translateY(-2px);

  --duration-hover: 160ms; --duration-slot: 260ms; --duration-bar: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-control: background-color var(--duration-hover) var(--ease-out),
    color var(--duration-hover) var(--ease-out),
    border-color var(--duration-hover) var(--ease-out),
    box-shadow var(--duration-hover) var(--ease-out),
    transform var(--duration-hover) var(--ease-out);
}

/* --------------------------------------------------------------------------
   2. BASE  (scoped to the page body so the theme's chrome is left alone)
   -------------------------------------------------------------------------- */
.rs-section, .rs-section *, .rs-section *::before, .rs-section *::after,
.rs-hero, .rs-hero *, .rs-hdr, .rs-hdr *, .rs-ftr, .rs-ftr * { box-sizing: border-box; }

.rs-section, .rs-hero, .rs-hdr, .rs-ftr {
  color: var(--text-primary);
  font: var(--weight-regular) var(--text-body) / var(--leading-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rs-section h1, .rs-section h2, .rs-section h3, .rs-hero h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-section);
  color: inherit;
}
.rs-section p, .rs-hero p, .rs-ftr p { margin: 0; text-wrap: pretty; }
.rs-section strong, .rs-hero strong { font-weight: 700; }
.rs-section a { color: var(--text-link); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rs-section a:hover { color: var(--text-link-hover); }
.rs-section :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rs-section ::selection { background: var(--teal); color: #fff; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .rsb-anim .rsb-b { opacity: 1 !important; animation: none !important; }
  .rs-section *, .rs-hero *, .rs-section *::before, .rs-section *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. SECTION SCAFFOLD
   Rows are emitted as full_width="stretch_row_content_no_spaces", so the
   container width and gutters are owned here, not by the theme.
   -------------------------------------------------------------------------- */
.rs-section { padding: var(--section-y) 0; }
.rs-section.rs-tight { padding: var(--section-y-tight) 0; }
.rs-section.rs-band { padding: var(--space-16) 0; }

.rs-section > .wpb_column > .vc_column-inner,
.rs-hero-row > .wpb_column > .vc_column-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter-page-lg);
  padding-right: var(--gutter-page-lg);
}
.rs-hero-row > .wpb_column > .vc_column-inner { max-width: none; padding: 0; }

.rs-ground-paper { background: var(--paper); color: var(--ink); }
.rs-ground-ink   { background: var(--surface-ink-gradient); color: var(--on-dark); }
.rs-ground-teal  { background: var(--surface-teal-gradient); color: var(--on-dark); }
.rs-ground-wash  { background: var(--teal-wash); color: var(--ink); }
.rs-ground-sunken{ background: var(--grey-050); color: var(--ink);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline); }

.rs-ground-ink h1, .rs-ground-ink h2, .rs-ground-ink h3,
.rs-ground-teal h1, .rs-ground-teal h2, .rs-ground-teal h3 { color: var(--on-dark); }

/* WPBakery wraps vc_column_text content in .wpb_wrapper. This lets layout classes
   applied via el_class (rs-chips, rs-stat, rs-secrule, rs-fact-head) see their real
   children as flex items. Selectors that use ">" need the wrapper variant too. */
.rs-section .wpb_text_column > .wpb_wrapper,
.rs-hdr .wpb_text_column > .wpb_wrapper,
.rs-ftr .wpb_text_column > .wpb_wrapper { display: contents; }

/* Kill WPBakery's default 35px element margin; spacing is explicit below. */
.rs-hero .wpb_content_element, .rs-hdr .wpb_content_element,
.rs-ftr .wpb_content_element,
.rs-section .wpb_content_element,
.rs-section .wpb_text_column,
.rs-section .vc_btn3-container,
.rs-section .wpb_single_image { margin-bottom: 0; }
.rs-section .vc_row-has-fill > .vc_column_container > .vc_column-inner { padding-top: 0; }

/* Spacing utilities (token scale) */
.rs-mt-2{margin-top:var(--space-2)}   .rs-mt-3{margin-top:var(--space-3)}
.rs-mt-4{margin-top:var(--space-4)}   .rs-mt-5{margin-top:var(--space-5)}
.rs-mt-6{margin-top:var(--space-6)}   .rs-mt-8{margin-top:var(--space-8)}
.rs-mt-10{margin-top:var(--space-10)} .rs-mt-12{margin-top:var(--space-12)}
.rs-mt-16{margin-top:var(--space-16)} .rs-mt-20{margin-top:var(--space-20)}
.rs-mb-2{margin-bottom:var(--space-2)}   .rs-mb-3{margin-bottom:var(--space-3)}
.rs-mb-4{margin-bottom:var(--space-4)}   .rs-mb-5{margin-bottom:var(--space-5)}
.rs-mb-6{margin-bottom:var(--space-6)}   .rs-mb-8{margin-bottom:var(--space-8)}
.rs-mb-10{margin-bottom:var(--space-10)} .rs-mb-12{margin-bottom:var(--space-12)}
.rs-mb-16{margin-bottom:var(--space-16)} .rs-mb-20{margin-bottom:var(--space-20)}

/* --------------------------------------------------------------------------
   4. TYPE
   Sizes live here, never in font_container - the scale is fluid.
   -------------------------------------------------------------------------- */
.rs-h1, .rs-h1 h1 { font: var(--weight-bold) var(--text-hero)/var(--leading-hero) var(--font-sans);
  letter-spacing: var(--tracking-hero); }
.rs-h2, .rs-h2 h2 { font: var(--weight-bold) var(--text-section)/var(--leading-tight) var(--font-sans);
  letter-spacing: var(--tracking-section); }
.rs-h3, .rs-h3 h3 { font: var(--weight-bold) 22px/1.2 var(--font-sans);
  letter-spacing: var(--tracking-section); }
.rs-h3-lg, .rs-h3-lg h3 { font: var(--weight-bold) 28px/1.15 var(--font-sans);
  letter-spacing: var(--tracking-section); }
.rs-h3-md, .rs-h3-md h3 { font: var(--weight-bold) 24px/1.2 var(--font-sans);
  letter-spacing: var(--tracking-section); }

.rs-section .rs-sub, .rs-hero .rs-sub { font: var(--weight-medium) var(--text-sub)/1.4 var(--font-sans); }
.rs-section .rs-body { font: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans); }
.rs-section .rs-caption { font: var(--weight-regular) var(--text-caption)/1.5 var(--font-sans); }
.rs-section .rs-muted { color: var(--muted); }
.rs-hero .rs-muted { color: var(--on-dark-mute); }
.rs-on-dark-strong { color: var(--on-dark); }
.rs-dim { color: rgba(250, 249, 246, 0.72); }
.rs-ground-ink .rs-muted, .rs-ground-teal .rs-muted { color: var(--on-dark-mute); }
.rs-section .rs-italic { font-style: italic; }
.rs-mono, .rs-section .rs-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.rs-block { display: block; }
.rs-lead, .rs-lead p { font: var(--weight-bold) clamp(24px, 2.2vw, 30px)/1.25 var(--font-sans);
  letter-spacing: var(--tracking-section); }

/* Prose stack */
.rs-prose { max-width: var(--measure-prose); }
.rs-prose > * + *,
.rs-prose > .wpb_wrapper > * + * { margin-top: var(--space-6); }
.rs-rule-top { padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); }
.rs-ground-ink .rs-rule-top { border-top-color: var(--ink-line); }
.rs-ground-teal .rs-rule-top { border-top-color: rgba(250,249,246,0.24); }

/* Measure caps - applied to the element and to a heading inside it */
.rs-meas-14, .rs-meas-14 h1, .rs-meas-14 h2 { max-width: 14ch; }
.rs-meas-16, .rs-meas-16 h1, .rs-meas-16 h2 { max-width: 16ch; }
.rs-meas-18, .rs-meas-18 h1, .rs-meas-18 h2 { max-width: 18ch; }
.rs-meas-20, .rs-meas-20 h1, .rs-meas-20 h2 { max-width: 20ch; }
.rs-meas-34 { max-width: 34ch; }
.rs-meas-40 { max-width: 40ch; }
.rs-meas-42 { max-width: 42ch; }
.rs-meas-46 { max-width: 46ch; }
.rs-meas-56 { max-width: 56ch; }
.rs-meas-62 { max-width: 62ch; }
.rs-meas-68 { max-width: 68ch; }
.rs-meas-72 { max-width: 72ch; }

/* All-caps is permitted ONLY on these mono grid labels. */
.rs-grid-label {
  display: inline-block;
  font: var(--weight-medium) var(--text-grid)/1.2 var(--font-mono);
  letter-spacing: var(--tracking-grid);
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rs-grid-label.rs-sm { font-size: var(--text-grid-sm); }
.rs-grid-label.rs-teal { color: var(--teal); }
.rs-grid-label.rs-strong { color: var(--ink); }
.rs-ground-ink .rs-grid-label, .rs-ground-teal .rs-grid-label { color: var(--on-dark-mute); }
.rs-ground-teal .rs-grid-label.rs-bright { color: rgba(250,249,246,0.82); }

/* Wordmark - type, not a drawn logo */
.rs-wordmark { display: inline-flex; font: var(--weight-bold) 20px/1 var(--font-sans);
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.rs-wordmark span { color: var(--teal); }
.rs-wordmark.rs-inverse { color: var(--on-dark); }
.rs-wordmark.rs-inverse span { color: var(--teal-soft); }

/* --------------------------------------------------------------------------
   5. SECTION RULE  (02 . THE PROBLEM)
   -------------------------------------------------------------------------- */
.rs-secrule {
  display: flex; align-items: baseline; gap: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}
.rs-secrule--dark { border-bottom-color: var(--border-grid-dark); }

/* --------------------------------------------------------------------------
   6. BUTTONS  (three variants only)
   -------------------------------------------------------------------------- */
.rs-section .rs-btn .vc_btn3.vc_btn3-style-custom,
.rs-hero .rs-btn .vc_btn3.vc_btn3-style-custom,
.rs-hdr .rs-btn .vc_btn3.vc_btn3-style-custom {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 36px;
  font: var(--weight-medium) 17px/1 var(--font-sans);
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--transition-control);
  background-image: none;
}
.rs-btn-md .vc_btn3.vc_btn3-style-custom { padding: 14px 28px; font-size: var(--text-caption); }
.rs-btn .vc_btn3:hover { transform: var(--lift-hover); box-shadow: var(--shadow-card-hover); }

.rs-btn-teal .vc_btn3 { background-color: var(--teal) !important; color: var(--white) !important; }
.rs-btn-teal .vc_btn3:hover { background-color: var(--teal-deep) !important; }
.rs-btn-white .vc_btn3 { background-color: var(--white) !important; color: var(--ink) !important; }
.rs-btn-white .vc_btn3:hover { background-color: var(--paper) !important; }
.rs-btn-outline .vc_btn3 { background-color: transparent !important;
  color: var(--on-dark) !important; border-color: var(--border-on-dark) !important; }
.rs-btn-outline .vc_btn3:hover { background-color: rgba(250,249,246,0.08) !important;
  box-shadow: none; }

/* --------------------------------------------------------------------------
   7. CHIPS
   -------------------------------------------------------------------------- */
.rs-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rs-chip {
  display: inline-flex; align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font: var(--weight-medium) var(--text-grid)/1.2 var(--font-mono);
  letter-spacing: var(--tracking-grid);
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(34,38,43,0.05);
  color: var(--muted);
  border: 1px solid var(--border-hairline);
}
.rs-chip--teal { background: var(--teal-100); color: var(--teal-900); border-color: rgba(15,118,110,0.22); }
.rs-chip--ink { background: var(--ink); color: var(--on-dark); border-color: transparent; }
.rs-chip--ondark { background: rgba(250,249,246,0.08); color: var(--on-dark); border-color: rgba(250,249,246,0.18); }
.rs-chip--onteal { background: rgba(255,255,255,0.14); color: var(--white); border-color: rgba(255,255,255,0.24); }

/* --------------------------------------------------------------------------
   8. CARDS  (pattern A - native WPBakery columns)
   Applied to the COLUMN, styled on its .vc_column-inner.
   -------------------------------------------------------------------------- */
.rs-card > .vc_column-inner {
  position: relative;
  height: 100%;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  overflow: hidden;
}
.rs-ground-teal .rs-card > .vc_column-inner { box-shadow: var(--shadow-on-teal); }
.rs-card--rule > .vc_column-inner { padding-top: calc(var(--space-8) + var(--rule-thick)); }
.rs-card--rule > .vc_column-inner::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: var(--rule-thick); background: var(--teal);
}
.rs-card--ink > .vc_column-inner { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.rs-card--ink h3 { color: var(--on-dark); }
.rs-card > .vc_column-inner > .wpb_wrapper > * + * { margin-top: var(--space-5); }
.rs-card > .vc_column-inner > .wpb_wrapper > .wpb_text_column + .wpb_text_column { margin-top: var(--space-4); }
.rs-cards > .wpb_column { margin-bottom: var(--space-6); }
@media (min-width: 901px) { .rs-cards > .wpb_column { margin-bottom: 0; } }
/* Design gutter is 24px; WPBakery ships 30px. */
.rs-cards { margin-left: -12px; margin-right: -12px; }
.rs-cards > .wpb_column { padding-left: 12px; padding-right: 12px; }

/* Step cards (01 / 02 / 03) */
.rs-stepnum { display: block; font: var(--weight-medium) 40px/1 var(--font-mono);
  color: var(--teal); font-variant-numeric: tabular-nums; }

/* Teal-wash callout strip */
.rs-callout {
  background: var(--teal-wash);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-8);
  display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap;
}
.rs-callout p { flex: 1; min-width: 32ch; }

/* --------------------------------------------------------------------------
   9. STAT BLOCKS
   -------------------------------------------------------------------------- */
.rs-stat { display: flex; flex-direction: column; gap: var(--space-3); }
.rs-stat .rs-figure { font: var(--weight-medium) var(--text-figure)/1 var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--ink); }
.rs-stat--sm .rs-figure { font-size: var(--text-figure-sm); }
.rs-stat .rs-figure.rs-teal { color: var(--teal); }
.rs-ground-ink .rs-stat .rs-figure { color: var(--on-dark); }
.rs-stats-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }

/* --------------------------------------------------------------------------
   10. SPLIT BULLETS
   -------------------------------------------------------------------------- */
.rs-bullets { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-4); }
.rs-bullets li {
  font: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans);
  padding-left: var(--space-5);
  border-left: 2px solid var(--teal);
  color: var(--ink);
}
.rs-bullets li span { color: var(--muted); }
.rs-bullets--dark li { border-left-color: rgba(250,249,246,0.32); color: var(--on-dark); }
.rs-bullets--dark li span { color: var(--on-dark-mute); }

/* --------------------------------------------------------------------------
   11. COMPARE TABLE
   -------------------------------------------------------------------------- */
.rs-compare { width: 100%; }
.rs-compare-head, .rs-compare-row { display: grid; grid-template-columns: 1fr 1fr; }
.rs-compare-head { border-bottom: 1px solid var(--ink); }
.rs-compare-head > div:first-child { padding: 0 var(--space-5) var(--space-3) 0; }
.rs-compare-head > div:last-child { padding: 0 0 var(--space-3) var(--space-5);
  border-left: 1px solid var(--border-hairline); }
.rs-compare-row { border-bottom: 1px solid var(--border-hairline); }
.rs-compare-row:last-child { border-bottom: 0; }
.rs-compare-row > div:first-child { padding: var(--space-4) var(--space-5) var(--space-4) 0;
  font: var(--weight-regular) var(--text-caption)/1.5 var(--font-sans); color: var(--muted); }
.rs-compare-row > div:last-child { padding: var(--space-4) 0 var(--space-4) var(--space-5);
  border-left: 1px solid var(--border-hairline);
  font: var(--weight-medium) var(--text-caption)/1.5 var(--font-sans); color: var(--ink); }

/* --------------------------------------------------------------------------
   12. FACT ROW
   -------------------------------------------------------------------------- */
.rs-factrow { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr 1.3fr;
  border-top: 1px solid var(--border-hairline); }
.rs-factrow > div { display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-5);
  border-right: 1px solid var(--border-hairline); }
.rs-factrow > div:first-child { padding-left: 0; }
.rs-factrow > div:last-child { border-right: 0; padding-right: 0; }
.rs-factrow .rs-fact-value { font: var(--weight-medium) 17px/1.35 var(--font-sans); color: var(--ink); }
.rs-fact-head { display: flex; align-items: baseline; gap: var(--space-6); flex-wrap: wrap; }
.rs-fact-head .rs-chip { margin-left: auto; }

/* --------------------------------------------------------------------------
   13. FLOW LINE  (Need -> Segment -> Offer -> Channel -> Revenue)
   -------------------------------------------------------------------------- */
.rs-flow-wrap { padding: var(--space-5) 0;
  border-top: 1px solid rgba(15,118,110,0.22);
  border-bottom: 1px solid rgba(15,118,110,0.22); }
.rs-flow { display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: nowrap; overflow-x: auto; }
.rs-flow span {
  font: var(--weight-medium) var(--text-grid)/1.2 var(--font-mono);
  letter-spacing: var(--tracking-grid); text-transform: uppercase;
  color: var(--ink); padding: 8px 0; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.rs-flow span.rs-arrow { color: var(--muted); border-bottom: 0; padding: 0; }
.rs-flow span.rs-last { color: var(--teal); border-bottom-color: var(--teal); }

/* --------------------------------------------------------------------------
   14. PULL QUOTE
   -------------------------------------------------------------------------- */
.rs-quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rs-quote span {
  font: var(--weight-bold) var(--text-quote)/var(--leading-tight) var(--font-sans);
  letter-spacing: var(--tracking-section); color: var(--on-dark);
}
.rs-quote span.rs-quote-2 { color: var(--teal-soft); }

/* --------------------------------------------------------------------------
   15. DISPATCH BOARD
   Grid placement comes from .rsb-r* / .rsb-c* classes, never inline styles
   (inline grid-row / grid-column does not survive sanitization).
   -------------------------------------------------------------------------- */
.rsb { background: var(--board-ground); }
.rsb-grid { display: grid;
  border-top: 1px solid var(--board-rule); border-left: 1px solid var(--board-rule); }

.rsb--w5 { grid-template-columns: 92px repeat(5, minmax(140px, 1fr)); }
.rsb--w4 { grid-template-columns: 92px repeat(4, minmax(130px, 1fr)); }
.rsb--h68 { grid-template-rows: 34px repeat(5, 68px); }
.rsb--h46 { grid-template-rows: 34px repeat(3, 46px); }

.rsb-head, .rsb-rowlab { display: flex; align-items: center; padding: 0 10px;
  border-right: 1px solid var(--board-rule); border-bottom: 1px solid var(--board-rule); }
.rsb-corner, .rsb-slot { border-right: 1px solid var(--board-rule);
  border-bottom: 1px solid var(--board-rule); }
.rsb-slot { background: var(--board-slot-empty); }
.rsb-lab { font: var(--weight-medium) var(--text-grid-sm)/1.2 var(--font-mono);
  letter-spacing: var(--tracking-grid); text-transform: uppercase; color: var(--on-dark-mute); }

.rsb-job { margin: 5px; padding: 8px 10px; display: flex; align-items: center;
  border-radius: var(--radius-slot);
  font: var(--weight-medium) var(--text-grid-sm)/1.2 var(--font-mono);
  letter-spacing: 0.02em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsb-e { background: var(--board-job-existing); color: rgba(250,249,246,0.82); }
.rsb-b { background: var(--board-job-booked); color: var(--white); }

/* Placement. Row 1 of the grid is the header row, so data starts at line 2. */
.rsb-c0{grid-column:1}
.rsb-c1{grid-column:2}.rsb-c2{grid-column:3}.rsb-c3{grid-column:4}
.rsb-c4{grid-column:5}.rsb-c5{grid-column:6}
.rsb-r1{grid-row:2}.rsb-r2{grid-row:3}.rsb-r3{grid-row:4}
.rsb-r4{grid-row:5}.rsb-r5{grid-row:6}

/* Animated moment 1 of 3: booked jobs land on a stagger. CSS only, no JS. */
@keyframes rs-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes rs-land { 0% { box-shadow: 0 0 0 10px var(--board-glow); }
                     100% { box-shadow: 0 0 0 0 rgba(15,118,110,0); } }
.rsb-anim .rsb-b { opacity: 0;
  animation: rs-in var(--duration-slot) var(--ease-out) both,
             rs-land var(--duration-slot) var(--ease-out) both; }
.rsb-anim .rsb-d1{animation-delay:650ms,650ms}
.rsb-anim .rsb-d2{animation-delay:750ms,750ms}
.rsb-anim .rsb-d3{animation-delay:850ms,850ms}
.rsb-anim .rsb-d4{animation-delay:950ms,950ms}
.rsb-anim .rsb-d5{animation-delay:1050ms,1050ms}
.rsb-anim .rsb-d6{animation-delay:1150ms,1150ms}
.rsb-anim .rsb-d7{animation-delay:1250ms,1250ms}
.rsb-anim .rsb-d8{animation-delay:1350ms,1350ms}
.rsb-anim .rsb-d9{animation-delay:1450ms,1450ms}
.rsb-anim .rsb-d10{animation-delay:1550ms,1550ms}

/* --------------------------------------------------------------------------
   16. COVERAGE BARS
   Bar lengths are classes: inline width does not survive sanitization.
   Scaled against 2,147 total records. The gap between the bars is the argument,
   so they render at full length with no scroll trigger and no JS.
   -------------------------------------------------------------------------- */
.rs-cb { display: flex; flex-direction: column; gap: var(--space-6); }
.rs-cb-row { display: flex; flex-direction: column; gap: var(--space-2); }
.rs-cb-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.rs-cb-val { font: var(--weight-regular) var(--text-caption)/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--teal); }
.rs-cb-val.rs-soft { color: var(--teal-soft); }
.rs-cb-val.rs-dim2 { color: var(--muted); }
.rs-cb-track { height: 16px; background: rgba(34,38,43,0.06); }
.rs-cb-fill { height: 100%; background: var(--teal); }
.rs-cb-fill.rs-soft { background: var(--teal-soft); }
.rs-cb-fill.rs-dim2 { background: var(--muted); }
.rs-cb-w1 { width: 99.67%; }   /* 2,140  mailing address */
.rs-cb-w2 { width: 69.96%; }   /* 1,502  mobile number   */
.rs-cb-w3 { width: 31.86%; }   /*   684  email address   */
.rs-cb-w4 { width: 14.53%; }   /*   312  unusable        */

/* --------------------------------------------------------------------------
   17. YEAR BAND
   The demand curve is a PNG placed with vc_single_image - SVG is stripped.
   The band still reads correctly if the image is never uploaded.
   -------------------------------------------------------------------------- */
.rs-yb-scroll { overflow-x: auto; }
.rs-yb-inner { width: 100%; }

/* Demand curve. No image and no SVG: one div, clipped to the polyline.
   Percentage coordinates stretch with the box exactly the way the source SVG's
   preserveAspectRatio="none" did, so the shape is identical at any width.
   x = (i + 0.5) * (100/12);  y = (92 - demand * 82 - 4) / 92, -/+ 0.82% for the
   ~1.5px stroke.  Demand: .86 .72 .34 .3 .55 .84 1 .96 .6 .38 .8 .7 */
.rs-yb-curve { position: relative; height: 92px; }
.rs-yb-curve .rs-grid-label { position: absolute; top: 0; left: 0; }
.rs-yb-line { display: none; }
@supports (clip-path: polygon(0 0, 1px 0, 0 1px)) {
  .rs-yb-line { display: block; position: absolute; inset: 0;
    background: var(--teal-soft);
    -webkit-clip-path: polygon(4.167% 18.180%, 12.500% 30.658%, 20.833% 64.528%, 29.167% 68.093%, 37.500% 45.810%, 45.833% 19.963%, 54.167% 5.702%, 62.500% 9.267%, 70.833% 41.354%, 79.167% 60.963%, 87.500% 23.528%, 95.833% 32.441%, 95.833% 34.081%, 87.500% 25.168%, 79.167% 62.603%, 70.833% 42.994%, 62.500% 10.907%, 54.167% 7.342%, 45.833% 21.603%, 37.500% 47.450%, 29.167% 69.733%, 20.833% 66.168%, 12.500% 32.298%, 4.167% 19.820%);
    clip-path: polygon(4.167% 18.180%, 12.500% 30.658%, 20.833% 64.528%, 29.167% 68.093%, 37.500% 45.810%, 45.833% 19.963%, 54.167% 5.702%, 62.500% 9.267%, 70.833% 41.354%, 79.167% 60.963%, 87.500% 23.528%, 95.833% 32.441%, 95.833% 34.081%, 87.500% 25.168%, 79.167% 62.603%, 70.833% 42.994%, 62.500% 10.907%, 54.167% 7.342%, 45.833% 21.603%, 37.500% 47.450%, 29.167% 69.733%, 20.833% 66.168%, 12.500% 32.298%, 4.167% 19.820%); }
}

.rs-yb-grid { display: grid; grid-template-columns: repeat(12, 1fr);
  border-top: 1px solid var(--border-grid-dark); }
.rs-yb-col { border-right: 1px solid var(--border-grid-dark);
  padding: 10px 8px 14px; display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 118px; }
.rs-yb-col:last-child { border-right: 0; }
.rs-yb-camp { background: var(--teal); color: var(--white); border-radius: var(--radius-slot);
  padding: 8px; font: var(--weight-medium) var(--text-grid-sm)/1.3 var(--font-mono);
  letter-spacing: 0.02em; text-transform: uppercase; }
.rs-yb-empty { flex: 1; background: rgba(250,249,246,0.03); border-radius: var(--radius-slot); }

/* --------------------------------------------------------------------------
   18. AUDIT ARTIFACT
   -------------------------------------------------------------------------- */
.rs-ar { position: relative; perspective: 1600px; }
.rs-ar-back { position: absolute; top: -18px; left: 34px; right: -22px; bottom: 26px;
  background: var(--white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); transform: rotateY(-4deg) rotateX(1.2deg); }
.rs-ar-front { position: relative; background: var(--white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-artifact); transform: rotateY(-4deg) rotateX(1.2deg);
  transform-origin: left center; padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-6); }
.rs-ar-top { display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-hairline); }
.rs-ar-mark { font: var(--weight-bold) 17px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
.rs-ar-mark span { color: var(--teal); }
.rs-ar-title { display: flex; flex-direction: column; gap: var(--space-2); }
.rs-ar-title h3 { font: var(--weight-bold) 26px/1.15 var(--font-sans); color: var(--ink); margin: 0; }
.rs-ar-head, .rs-ar-row { display: grid;
  grid-template-columns: 1.5fr 0.7fr 1.5fr 0.9fr 1.1fr; gap: var(--space-4); }
.rs-ar-head { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-strong); }
.rs-ar-row { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline);
  align-items: center; }
.rs-ar-row.rs-ar-last { border-bottom: 0; }
.rs-ar-seg { font: var(--weight-medium) 15px/1.3 var(--font-sans); color: var(--ink); }
.rs-ar-num { font: var(--weight-regular) var(--text-caption)/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--ink); }
.rs-ar-num.rs-teal { color: var(--teal); }
.rs-ar-num.rs-dim2 { color: var(--muted); }
.rs-ar-cap { font: var(--weight-regular) var(--text-caption)/1.5 var(--font-sans); color: var(--muted); }

/* --------------------------------------------------------------------------
   19. FAQ  (native vc_tta_accordion, restyled to the hairline design)
   -------------------------------------------------------------------------- */
.rs-faq { max-width: 940px; }
.rs-faq .vc_tta-panels, .rs-faq .vc_tta-panel, .rs-faq .vc_tta-panel-body,
.rs-faq .vc_tta-panel-heading { background: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; }
.rs-faq .vc_tta-panels { border-top: 1px solid var(--border-hairline) !important; }
.rs-faq .vc_tta-panel { border-bottom: 1px solid var(--border-hairline) !important; }
.rs-faq .vc_tta-panel-title > a { padding: var(--space-5) 0 !important;
  font: var(--weight-bold) 19px/1.35 var(--font-sans) !important;
  letter-spacing: -0.01em; color: var(--ink) !important; text-decoration: none; }
.rs-faq .vc_tta-panel.vc_active .vc_tta-panel-title > a { color: var(--teal) !important; }
.rs-faq .vc_tta-controls-icon::before, .rs-faq .vc_tta-controls-icon::after {
  border-color: var(--muted) !important; }
.rs-faq .vc_tta-panel.vc_active .vc_tta-controls-icon::before,
.rs-faq .vc_tta-panel.vc_active .vc_tta-controls-icon::after {
  border-color: var(--teal) !important; }
.rs-faq .vc_tta-panel-body { padding: 0 0 var(--space-6) 0 !important; max-width: 68ch; }
.rs-faq .vc_tta-panel-body p {
  font: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans);
  color: var(--muted); }
.rs-faq .vc_tta-panel-body p + p { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   20. HERO  (native columns; the board bleeds off the right viewport edge)
   -------------------------------------------------------------------------- */
.rs-hero { background: var(--surface-ink-gradient); color: var(--on-dark);
  min-height: 100vh; align-items: center; overflow: hidden; }
.rs-hero h1 { color: var(--on-dark); }
.rs-hero-copy > .vc_column-inner {
  padding-left: max(var(--gutter-page-lg),
    calc((100vw - var(--container-max)) / 2 + var(--gutter-page-lg))) !important;
  padding-right: var(--space-8) !important;
  padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
.rs-hero-copy > .vc_column-inner > .wpb_wrapper > * + * { margin-top: var(--space-8); }
.rs-hero-board > .vc_column-inner { padding: 0 !important; overflow: hidden; }
.rs-hero-board .rsb-grid { min-width: 860px; }

/* --------------------------------------------------------------------------
   21. HEADER / FOOTER  (static bands - no fixed positioning, no JS)
   -------------------------------------------------------------------------- */
.rs-hdr { background: var(--ink); }
.rs-hdr > .wpb_column > .vc_column-inner,
.rs-ftr > .wpb_column > .vc_column-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding-left: var(--gutter-page-lg) !important;
  padding-right: var(--gutter-page-lg) !important; }
.rs-hdr-left > .vc_column-inner > .wpb_wrapper,
.rs-hdr-right > .vc_column-inner > .wpb_wrapper {
  display: flex; align-items: center; gap: var(--space-6); min-height: 76px; }
.rs-hdr-right > .vc_column-inner > .wpb_wrapper { justify-content: flex-end; }
.rs-hdr .rs-wordmark { font-size: 22px; }
.rs-hdr-tel { font: var(--weight-regular) var(--text-caption)/1.4 var(--font-mono);
  color: var(--on-dark-mute); text-decoration: none; }
.rs-hdr-tel:hover { color: var(--on-dark); }

.rs-ftr { background: var(--ink-deep); color: var(--on-dark-mute);
  padding: var(--space-8) 0; }
.rs-ftr-bar { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.rs-ftr-bar .rs-legal { font: var(--weight-regular) var(--text-caption)/1.4 var(--font-mono);
  margin-left: auto; color: var(--on-dark-mute); }
.rs-ftr-bar a { font: var(--weight-regular) var(--text-caption)/1.4 var(--font-mono);
  color: var(--on-dark-mute); text-decoration: none; }
.rs-ftr-bar a:hover { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   22. FOUNDER / PHOTO
   -------------------------------------------------------------------------- */
.rs-photo .wpb_single_image img { border-radius: var(--radius-card); display: block; }
.rs-photo-slot { width: 240px; height: 240px; border-radius: var(--radius-card);
  border: 1px solid var(--border-hairline);
  background: repeating-linear-gradient(135deg, rgba(34,38,43,0.05) 0 1px, transparent 1px 10px),
    var(--grey-050);
  display: flex; align-items: flex-end; padding: var(--space-3); }

/* --------------------------------------------------------------------------
   23. CONTACT
   -------------------------------------------------------------------------- */
.rs-contact { overflow: hidden; padding-bottom: 0 !important; }
/* If a horizontal scrollbar ever appears, add: body { overflow-x: hidden; } */
.rs-contact-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.rs-contact-links a { font: var(--weight-regular) var(--text-caption)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-grid); color: var(--teal-soft); text-decoration: none; }
.rs-contact-links a:first-child { text-transform: uppercase; }
.rs-contact-links a:hover { color: var(--white); }
.rs-contact-board > .vc_column-inner { opacity: 0.85;
  margin-right: calc(var(--gutter-page-lg) * -2); overflow: hidden; }

/* --------------------------------------------------------------------------
   24. SPLIT ROWS  (text only - never on a row whose columns are cards)
   -------------------------------------------------------------------------- */
.rs-split > .wpb_column > .vc_column-inner { padding-left: 0; padding-right: 0; }
.rs-split > .wpb_column:first-child > .vc_column-inner { padding-right: var(--space-16); }
.rs-split-lg > .wpb_column:first-child > .vc_column-inner { padding-right: var(--space-20); }
.rs-split-sm > .wpb_column:first-child > .vc_column-inner { padding-right: var(--space-12); }

/* --------------------------------------------------------------------------
   25. ONE BREAKPOINT: 900px
   Every two- and three-column grid becomes a stack.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .rs-section .vc_inner > .wpb_column { width: 100% !important; }
  .rs-split > .wpb_column > .vc_column-inner,
  .rs-split-lg > .wpb_column > .vc_column-inner,
  .rs-split-sm > .wpb_column > .vc_column-inner { padding-right: 0; }
  .rs-split > .wpb_column:first-child > .vc_column-inner { margin-bottom: var(--space-12); }

  .rs-hero { min-height: 0; display: block; }
  .rs-hero > .wpb_column { width: 100% !important; }
  .rs-hero-copy > .vc_column-inner {
    padding-left: var(--gutter-page-lg) !important;
    padding-right: var(--gutter-page-lg) !important; }
  .rs-hero-board > .vc_column-inner { padding-left: var(--gutter-page-lg) !important; }
  .rs-hero-board .rsb-grid { min-width: 700px; }

  .rs-compare-head, .rs-compare-row { grid-template-columns: 1fr; }
  .rs-compare-head > div:last-child, .rs-compare-row > div:last-child {
    border-left: 0; padding-left: 0; }
  .rs-compare-head > div:first-child { padding-right: 0; }
  .rs-compare-row > div:first-child { padding-right: 0; padding-bottom: var(--space-2); }

  .rs-factrow { grid-template-columns: 1fr; }
  .rs-factrow > div { border-right: 0; border-bottom: 1px solid var(--border-hairline);
    padding-left: 0; padding-right: 0; }
  .rs-factrow > div:last-child { border-bottom: 0; }

  .rs-stats-2 { grid-template-columns: 1fr; }
  .rs-contact-board > .vc_column-inner { margin-right: calc(var(--gutter-page-lg) * -1);
    padding-bottom: var(--space-16); }
  .rs-callout { padding: var(--space-5) var(--space-6); }
  .rs-callout p { min-width: 0; }

  .rs-yb-inner { min-width: 760px; }

  .rs-ar { perspective: none; }
  .rs-ar-back { display: none; }
  .rs-ar-front { transform: none; padding: var(--space-5); }
  .rs-ar-head { display: none; }
  .rs-ar-row { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
}