/*
 * roadmaps.css — the shared look for the four roadmaps pages.
 *
 * Scope: every rule is namespaced .rm-* and the file is enqueued only on the four
 * roadmaps page IDs, so it can never reach the other 420 Elementor pages.
 *
 * What this file is allowed to do: position, colour, size and animate what the
 * Elementor widgets already put in the DOM. What it must never do: carry copy.
 * Every string a client might want to change lives in a widget setting.
 *
 * Colours are literals here only where the kit has no global for them (see
 * scripts/roadmaps/tokens.py). Anything with a kit global is bound on the widget
 * instead, so a kit change re-themes these pages with the rest of the site.
 */

/* Tokens live on the PAGE, not on a list of sections.
   They were scoped to `.rm-sec, .rm-hero, .rm-proof, .rm-stepper-wrap`, so the sticky
   bar -- a top-level <aside>, not one of those -- resolved every var to nothing: its
   CTA became `background:` unset with `color:#fff`, i.e. white on white, and its title
   fell back to the theme's gold. Scoping to the body class means no component added
   later can fall outside the palette. */
.rm-page {
  --rm-navy:#0A3161; --rm-navy-deep:#062042; --rm-red:#B31942; --rm-cyan:#28C1DF;
  --rm-ink:#16212B; --rm-grey:#5F6E7C; --rm-grey-l:#8C99A5;
  --rm-line:#E6EBF0; --rm-line-soft:#F0F3F6; --rm-paper:#FAFBFC; --rm-tint:#F3F7FA;
}

/* ------------------------------------------------------------------ primitives */

/* The kit sets a fixed line-height that any element not stating its own inherits.
   These pages are designed on a 1.68 body rhythm, so the family states it once here
   rather than 30 times in widget settings. */
.rm-sec p, .rm-sec li, .rm-hero p, .rm-hero li,
.rm-proof p, .rm-proof li, .rm-stepper-wrap p, .rm-stepper-wrap li { line-height:1.68; }

.rm-eyebrow p, .rm-eyebrow span {
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.4; margin:0;
}
/* the 46px rule that leads the hero kicker */
.rm-hero .rm-eyebrow span::before {
  content:""; display:inline-block; width:46px; height:1px; background:var(--rm-red);
  vertical-align:middle; margin-right:14px;
}

.rm-lede p { max-width:64ch; margin:0; }

/* Section intro rhythm, from the mockup: eyebrow 18 / heading 18 / then 52 to the
   content below. Container gaps are set to 0 so these margins are the single source
   of the spacing rather than being added to a uniform gap. */
.rm-sec-top { max-width:66ch; margin-bottom:52px; }
.rm-sec-top .rm-eyebrow { margin-bottom:18px; }
.rm-sec-top .rm-h2 { margin-bottom:18px; }

/* Buttons. Elementor 3.32+ Optimized Markup drops .elementor-button-wrapper, so these
   target .elementor-button itself rather than a wrapper that may not exist. */
.rm-btn .elementor-button {
  display:inline-flex; align-items:center; gap:10px; border-radius:2px;
  font-weight:600; font-size:15px; padding:16px 32px;
  transition:background .2s, transform .2s, color .2s, border-color .2s;
}
.rm-btn .elementor-button::after {
  content:"\2192"; display:inline-block; transition:transform .2s;
}
.rm-btn .elementor-button:hover::after { transform:translateX(4px); }

.rm-btn--solid .elementor-button { background:var(--rm-red); color:#fff; }
.rm-btn--solid .elementor-button:hover { background:#93122F; color:#fff; transform:translateY(-1px); }

.rm-btn--quiet .elementor-button {
  background:transparent; color:var(--rm-navy); padding:16px 0; border-radius:0;
  border-bottom:1px solid var(--rm-navy);
}
.rm-btn--quiet .elementor-button::after { content:none; }
.rm-btn--quiet .elementor-button:hover {
  background:transparent; color:var(--rm-red); border-bottom-color:var(--rm-red);
}

.rm-btn--light .elementor-button { background:#fff; color:var(--rm-navy); }
.rm-btn--light .elementor-button:hover { background:var(--rm-cyan); color:var(--rm-navy-deep); }

/* The field label with its short cyan rule. */
.rm-fld-label span {
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rm-navy); display:flex; align-items:center; gap:8px;
}
.rm-fld-label span::before {
  content:""; width:14px; height:2px; background:var(--rm-cyan); display:block; flex:0 0 auto;
}

/* Display heading sizes now live in widget settings (see blocks.serif_heading) --
   Elementor emits global typography at a specificity no page-stylesheet class can
   beat, so clamps here were dead code. Only the italic accent colour remains CSS,
   because it styles a span inside the heading string. */
.rm-hero-h1 em { font-style:italic; color:var(--rm-red); }
.rm-h2 em { font-style:italic; color:var(--rm-red); }
.rm-final-h2 em { font-style:italic; color:var(--rm-cyan); }

/* ----------------------------------------------------------------------- hero */

.rm-hero > .e-con-inner { padding:0; }
/* The two columns are native flex children with widths set in Elementor, so there is
   no display: rule here to lose against .e-con.e-flex. CSS only does what settings
   cannot: make the image fill the column it was given. */
.rm-hero-right { position:relative; }
.rm-hero-img { display:flex; min-height:0; }
.rm-hero-img .elementor-widget-container { display:flex; flex:1 1 auto; width:100%; }
.rm-hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
.rm-hero-badge.rm-hero-badge {
  position:absolute; left:32px; right:auto; bottom:32px;
  width:auto; max-width:290px;
  border-left:2px solid var(--rm-red); border-radius:0; box-shadow:none;
}
.rm-hero-badge-kicker span {
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.rm-hero-copy { margin-bottom:14px; }
.rm-hero-copy p { margin:0; }
.rm-hero .rm-eyebrow { margin-bottom:24px; }
.rm-hero-h1 { margin-bottom:22px; }
.rm-hero-actions { margin-top:14px; }

/* --------------------------------------------------------------- journey bar */

.rm-journey-bar {
  border:1px solid var(--rm-line); border-radius:4px; overflow:visible;
}
.rm-jb-item {
  position:relative; border-right:1px solid var(--rm-line); transition:background .25s;
}
.rm-jb-item:first-child { border-radius:4px 0 0 4px; }
.rm-jb-item:last-child  { border-radius:0 4px 4px 0; border-right:0; }
/* Stage state — "you are here". The accent is reserved for this, which is why hover
   (below) deliberately does not use it. */
.rm-jb-item--active .rm-jb-ghost span { color:rgba(255,255,255,.10); }
/* Doubled class, and it is load-bearing. These two rules sit ABOVE the base
   `.rm-jb-item::before { background:transparent }` in this file, and at equal specificity
   the LATER rule wins — so the status bar was painted transparent on every tile and the
   "you are here" accent never rendered at all. Measured, not guessed: computed ::before
   background was rgba(0,0,0,0) on both the active and the done tile. */
.rm-jb-item.rm-jb-item--active::before { background:var(--rm-red); }
.rm-jb-item.rm-jb-item--done::before { background:var(--rm-cyan); }
.rm-jb-item--active:hover { background:var(--rm-navy-deep) !important; }
.rm-jb-item--done:hover { background:var(--rm-paper) !important; }
.rm-jb-item--active:hover .rm-jb-name .elementor-heading-title { color:#fff !important; }

/* the 3px top accent — decoration only, so it is a pseudo-element rather than a node */
.rm-jb-item::before {
  content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:transparent; transition:background .25s;
}
/* The 3px rule means "you are here", not "you are pointing" — hover gets the tint and
   the red title, never the state accent. */
.rm-jb-item:hover { background:var(--rm-tint); }
.rm-jb-name .elementor-heading-title { transition:color .2s; }
.rm-jb-item:hover .rm-jb-name .elementor-heading-title { color:var(--rm-red) !important; }

.rm-jb-ghost {
  position:absolute; right:14px; bottom:-6px; z-index:0; pointer-events:none;
  user-select:none; overflow:hidden;
}
.rm-jb-ghost span {
  font-family:'DM Serif Display',Georgia,serif; font-size:78px; line-height:1;
}
.rm-jb-content { position:relative; z-index:2; }

.rm-jb-desc p { font-size:12.5px; line-height:1.55; max-width:22ch; margin:0; }

.rm-jb-tip {
  position:absolute; bottom:calc(100% + 14px); left:16px; right:16px; z-index:30;
  background:var(--rm-navy-deep); color:#fff; border-radius:4px; padding:14px 16px;
  opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 14px 30px rgba(6,32,66,.25);
}
.rm-jb-tip p { font-size:12.5px; line-height:1.55; margin:0; color:#fff; }
.rm-jb-tip::after {
  content:""; position:absolute; top:100%; left:24px;
  border:6px solid transparent; border-top-color:var(--rm-navy-deep);
}
.rm-jb-item:hover .rm-jb-tip { opacity:1; visibility:visible; transform:translateY(0); }

/* -------------------------------------------------------------- package cards */

/* .rm-pkg draws right+bottom; the grid supplies top+left so the frame closes. */
.rm-pkg-grid { border-top:1px solid var(--rm-line); border-left:1px solid var(--rm-line); }
.rm-pkg {
  position:relative; border-right:1px solid var(--rm-line);
  border-bottom:1px solid var(--rm-line);
  transition:transform .25s, box-shadow .25s;
}
.rm-pkg::before {
  content:""; position:absolute; left:0; top:-1px; height:3px; width:0;
  background:var(--rm-red); transition:width .3s ease; z-index:4;
}
.rm-pkg:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(10,49,97,.09); z-index:3; }
.rm-pkg:hover::before { width:100%; }

.rm-pkg-desc p { font-size:15px; line-height:1.62; margin:0; }
.rm-pkg-aud p {
  font-size:14px; line-height:1.62; margin:0;
  padding-bottom:24px; border-bottom:1px solid var(--rm-line-soft);
}
.rm-pkg-list ul { list-style:none; margin:0; padding:0; }
.rm-pkg-list li {
  position:relative; padding:11px 0 11px 24px; font-size:14.5px;
  color:var(--rm-ink); border-top:1px solid var(--rm-line-soft);
}
.rm-pkg-list li:first-child { border-top:0; }
.rm-pkg-list li b { color:var(--rm-navy); }
.rm-pkg-list li::before {
  content:""; position:absolute; left:1px; top:17px; width:11px; height:6px;
  border-left:1.5px solid var(--rm-red); border-bottom:1.5px solid var(--rm-red);
  transform:rotate(-45deg);
}
/* The price footnote under a package list (Launch only, today). Mockup `.price-note`:
   a hairline, then 13px italic in the muted grey — deliberately quieter than the list
   it qualifies, because it is a caveat, not an offer. */
.rm-price-note p {
  margin:0; padding-top:16px; border-top:1px solid var(--rm-line);
  font-size:13px; font-style:italic; line-height:1.55;
}
.rm-price-note { margin-top:6px; }
/* The CTA sits at the card foot however uneven the copy above it is. Doubled class
   for specificity: Elementor's own widget margin rules out-rank a single class, which
   is why the first attempt computed margin-top:0 and left the three buttons ragged. */
.rm-pkg > .rm-btn.rm-btn { margin-top:auto; padding-top:24px; }
/* Full-width identical bars — three CTAs at three content-driven widths is what stops
   the three cards reading as one system. */
.rm-pkg > .rm-btn .elementor-button {
  width:100%; justify-content:center; padding:13px 24px; font-size:14px;
}

.rm-download-row { border-top:1px solid var(--rm-line); margin-top:36px; }
.rm-download-link .elementor-button {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--rm-navy); padding:0 0 2px;
  border-bottom:1px solid var(--rm-line); border-radius:0;
  font-size:13.5px; font-weight:600;
}
.rm-download-link .elementor-button::after { content:"\2193"; font-size:12px; }
.rm-download-link .elementor-button:hover { background:transparent; color:var(--rm-red); }
.rm-download-link .elementor-button:hover::after { transform:translateY(3px); }

/* ---------------------------------------------------------------- proof strip */

.rm-proof { border-top:1px solid var(--rm-line); border-bottom:1px solid var(--rm-line); }
.rm-proof-card { position:relative; border:1px solid var(--rm-line); border-radius:3px; }
.rm-proof-card::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--rm-red);
}
.rm-proof-quote p { font-size:16px; line-height:1.55; font-style:italic; color:var(--rm-navy); margin:0; }
.rm-proof-cite cite { font-size:12.5px; font-style:normal; font-weight:600; letter-spacing:.02em; }

.rm-proof-logos-head span {
  display:block; text-align:center; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; margin:40px 0 24px;
}
.rm-proof-logos-track {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.rm-proof-logos { width:max-content; animation:rm-proofscroll 28s linear infinite; }
.rm-proof-logos-track:hover .rm-proof-logos { animation-play-state:paused; }
.rm-proof-logo { flex:0 0 auto; }
.rm-proof-logo img { height:56px; width:auto; opacity:.6; filter:grayscale(1); transition:opacity .2s; }
.rm-proof-logo img:hover { opacity:1; }
@keyframes rm-proofscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ------------------------------------------------------------- booking block */

.rm-laurie-who p { font-size:15.5px; font-weight:700; color:var(--rm-navy); margin:0; }
.rm-laurie-role p { font-size:14px; margin:0 0 20px; }
.rm-laurie-lines p { font-size:15px; margin:0; }
.rm-laurie-lines a { color:var(--rm-navy); border-bottom:1px solid var(--rm-line); }
.rm-laurie-lines a:hover { color:var(--rm-red); border-bottom-color:var(--rm-red); }
.rm-laurie-expect { border-top:1px solid var(--rm-line); }
.rm-laurie-expect-list ul { list-style:none; margin:0; padding:0; }
.rm-laurie-expect-list li {
  position:relative; padding:9px 0 9px 22px; font-size:14.5px;
  color:var(--rm-ink); border-top:1px solid var(--rm-line-soft);
}
.rm-laurie-expect-list li:first-child { border-top:0; }
.rm-laurie-expect-list li::before {
  content:""; position:absolute; left:0; top:17px; width:6px; height:6px;
  border-radius:50%; background:var(--rm-red);
}
.rm-laurie-calendar { border:1px solid var(--rm-line); border-radius:3px; }
.rm-meetings-mount .meetings-iframe-container { min-height:380px; }

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

/* Hairline rules only, sans question, red chevron on the right that rotates open --
   the stock accordion ships a boxed frame and a grey plus/minus on the left. */
.rm-faq { border-top:1px solid var(--rm-line); }
.rm-faq .e-n-accordion-item {
  border:0; border-bottom:1px solid var(--rm-line); border-radius:0; background:none;
}
.rm-faq .e-n-accordion-item-title {
  position:relative; padding:24px 44px 24px 0; border:0; background:none;
  cursor:pointer; justify-content:flex-start;
}
.rm-faq .e-n-accordion-item-title-text,
.rm-faq .e-n-accordion-item-title-header {
  font-family:'SF pro',system-ui,-apple-system,sans-serif;
  font-size:18px; font-weight:500; line-height:1.4; color:var(--rm-navy);
  transition:color .2s;
}
.rm-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
.rm-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-header {
  color:var(--rm-red);
}
/* the stock icon out, the design's chevron in */
.rm-faq .e-n-accordion-item-title-icon { display:none !important; }
.rm-faq .e-n-accordion-item-title::after {
  content:""; position:absolute; right:6px; top:30px; width:10px; height:10px;
  border-right:1.5px solid var(--rm-red); border-bottom:1.5px solid var(--rm-red);
  transform:rotate(45deg); transition:transform .25s;
}
.rm-faq details[open] > .e-n-accordion-item-title::after { transform:rotate(225deg); top:35px; }
.rm-faq .e-n-accordion-item > .e-con { border:0; background:none; }
.rm-faq-answer p { padding-right:60px; max-width:70ch; margin:0; font-size:16px; }

/* ------------------------------------------------------------ closing CTA band */

.rm-sec--deep { text-align:center; }
.rm-sec--deep .rm-eyebrow { margin-bottom:22px; }
.rm-sec--deep .rm-eyebrow span { color:var(--rm-cyan); }
.rm-final-h2 { margin-bottom:20px; }
.rm-final-blurb { margin-bottom:36px; }
.rm-final-blurb p {
  font-size:17px; color:rgba(255,255,255,.74); max-width:50ch; margin:0 auto;
}
/* The form's WIDTH is the design here, not a detail. HubSpot renders this form in a
   cross-origin iframe and lays it out from that iframe's own width: at 460px it is the
   two-column form the mockup shows; narrower, it collapses to one column and no CSS of
   ours can reach inside to argue. Elementor's `.e-con > .elementor-widget { max-width:100% }`
   outranks a single-class max-width, so the 460 never applied and the widget shrank to the
   HTML default iframe width of 300px — which is exactly the narrow single column on the
   built page. Elementor's own rule is `.elementor.elementor .e-con>.elementor-widget` — four
   classes, deliberately un-outrankable by anything sane written on the widget — so the cap
   goes on the MOUNT inside the widget, which Elementor does not style at all. No specificity
   war, no !important: the widget spans the band, the form is 460 and centred within it. */
.rm-final-form.rm-final-form { width:100%; margin:40px auto 0; text-align:left; }
.rm-final-form .hbspt-form { width:100%; max-width:460px; margin:0 auto; }
.rm-final-form iframe.hs-form-iframe { width:100%; }
/* ⚠ EVERYTHING BELOW, TO THE END OF THIS BLOCK, IS INERT — and deliberately kept.
   The form renders in a cross-origin HubSpot iframe, so no selector of ours reaches a
   label, an input or the submit button. These rules came over from the mockup, where they
   were equally inert (the mockup's form is the same iframe). They are kept because they ARE
   the design spec for the styled-form route: if the operator restyles the form inside
   HubSpot, or switches it to a non-iframe embed, this is the target — dark translucent
   fields, cyan focus, cyan required marker, red submit. Until then the form wears HubSpot's
   own styling and only its WIDTH is ours to control (see the block above). */
.rm-final-form .hs-form-field { margin-bottom:16px; }
.rm-final-form label {
  display:block; color:rgba(255,255,255,.8); font-size:12.5px; font-weight:600;
  letter-spacing:.03em; margin-bottom:7px;
}
.rm-final-form label span.hs-form-required { color:var(--rm-cyan); }
.rm-final-form input[type=text], .rm-final-form input[type=email],
.rm-final-form input[type=tel], .rm-final-form textarea, .rm-final-form select {
  width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.28);
  border-radius:2px; padding:12px 14px; color:#fff; font-size:15px; font-family:inherit;
}
.rm-final-form input:focus, .rm-final-form textarea:focus, .rm-final-form select:focus {
  outline:none; border-color:var(--rm-cyan);
}
.rm-final-form input::placeholder, .rm-final-form textarea::placeholder { color:rgba(255,255,255,.35); }
.rm-final-form select option { color:#16212B; }
.rm-final-form fieldset { max-width:100% !important; }
.rm-final-form .input { margin-right:0 !important; }
.rm-final-form ul.hs-error-msgs { list-style:none; margin-top:5px; padding:0; }
.rm-final-form ul.hs-error-msgs label { color:#ff9d9d; font-size:12px; font-weight:400; }
.rm-final-form .hs-button {
  display:inline-flex; align-items:center; gap:10px; background:var(--rm-red);
  color:#fff; border:none; padding:15px 32px; border-radius:2px; font-weight:600;
  font-size:15px; font-family:inherit; cursor:pointer; margin-top:6px;
  transition:background .2s;
}
.rm-final-form .hs-button:hover { background:#96122f; }
.rm-final-form .hs-richtext { color:rgba(255,255,255,.6); font-size:13px; }
.rm-final-form .submitted-message { color:#fff; font-size:16px; text-align:center; }

/* ------------------------------------------------------------------ sticky bar */

.rm-stickybar {
  position:fixed; left:0; right:0; bottom:0; z-index:350;
  border-top:1px solid var(--rm-line); box-shadow:0 -6px 30px rgba(10,49,97,.07);
  transform:translateY(105%); transition:transform .3s ease;
}
.rm-stickybar.rm-is-visible { transform:translateY(0); }
/* A BOXED container puts its padding on .e-con-inner, so zeroing this stripped the bar's
   14px band and left its height to be decided by whatever child stretched tallest. That
   child was the copy column: stretched to the bar, with its two text widgets growing to
   fill it, which pushed the title and subtitle 35px apart and left neither centred.
   Restore the band, let the copy hug its own content, and centre it against the button. */
.rm-stickybar > .e-con-inner { padding-top:14px; padding-bottom:14px; }
.rm-stickybar > .e-con-inner > .e-con { align-self:center; }
.rm-sticky-title, .rm-sticky-sub { flex:0 0 auto; }
/* The line box, not just the inline element. Both strings are styled on the INLINE tag
   (`span` 15px, `small` 13px) while the block around them kept the kit's 32px font size —
   and a line box is as tall as its block's STRUT, whatever the inline text does. That is
   where the 35px-tall widgets came from, and why setting only line-height made it worse
   (1.3 x 32px = 42px). Size the block to its own content, then the ratio means something. */
.rm-sticky-title .elementor-widget-container { font-size:15px; line-height:1.68; }
.rm-sticky-sub .elementor-widget-container { font-size:13px; line-height:1.68; }
/* 1.68 and no gap are the MOCKUP's numbers, not a guess: its two lines are 25.2px and
   21.8px line boxes sitting flush, in a 77px bar. Matching them lands our bar at the same
   77px with the copy centred against the button. */
.rm-stickybar > .e-con-inner > .e-con { gap:0; }
.rm-sticky-title p, .rm-sticky-sub p { margin:0; }
.rm-sticky-title span { font-size:15px; color:var(--rm-navy); font-weight:600; line-height:1.3; }
.rm-sticky-sub small { font-size:13px; line-height:1.3; }
/* Padding and size are the mockup's exact values; the line-height is what made ours 39px
   against its 48px — 14px x 1.68 is where that button's height comes from. */
.rm-stickybar .rm-btn .elementor-button { padding:12px 26px; font-size:14px; line-height:1.68; }
/* The bar is a flex row — copy left, CTA right — and the button was allowed to shrink, so
   at desktop widths a two-word label broke onto two lines inside a 153px button. (The
   narrow layout looked fine, which is why it read as a desktop-only oddity: there the bar
   stacks and the button gets its own row.) Hold the button at its natural width, let the
   copy be the part that gives, and keep the label on one line. */
.rm-stickybar .rm-btn { flex:0 0 auto; }
.rm-stickybar .rm-btn .elementor-button { white-space:nowrap; }
.rm-sticky-copy, .rm-stickybar .e-con-inner > :first-child { min-width:0; }

/* ------------------------------------------------------------ focus states */
/* Keyboard users get the same accent the mouse gets. The only :focus rule this file
   had targeted HubSpot fields inside an iframe it cannot reach — i.e. nothing. */
.rm-btn .elementor-button:focus-visible,
.rm-download-link .elementor-button:focus-visible,
.rm-laurie-lines a:focus-visible,
.rm-proof-logo a:focus-visible,
.rm-faq .e-n-accordion-item-title:focus-visible {
  outline:2px solid var(--rm-red); outline-offset:2px; border-radius:2px;
}
.rm-sec--deep .rm-btn .elementor-button:focus-visible { outline-color:var(--rm-cyan); }

/* -------------------------------------------------------- reveal on scroll */

.rm-reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rm-reveal.rm-is-in { opacity:1; transform:none; }
/* Stagger within a row so a trio arrives in sequence rather than on one frame. */
.rm-pkg:nth-child(2), .rm-proof-card:nth-child(2), .rm-jb-item:nth-child(2) { transition-delay:.07s; }
.rm-pkg:nth-child(3), .rm-proof-card:nth-child(3), .rm-jb-item:nth-child(3) { transition-delay:.14s; }

/* ------------------------------------------------------------- responsive */

/* The mockup collapses every grid at 980px. Elementor's own tablet breakpoint on
   this site is 1024 and mobile is 767, and changing those would reflow all 420
   Elementor pages — so the 981–1024 band is bridged here instead. */
@media (max-width:980px) {
  .rm-hero-left, .rm-hero-right,
  .rm-laurie-left, .rm-laurie-calendar { width:100% !important; }
  .rm-hero-left { padding:64px 0 44px !important; }
  .rm-hero-right { min-height:320px; }
  .rm-jb-item { border-right:0; border-bottom:1px solid var(--rm-line); }
  .rm-jb-item:last-child { border-bottom:0; }
  .rm-jb-item:first-child, .rm-jb-item:last-child { border-radius:4px; }
  .rm-jb-tip { display:none; }          /* no hover on touch — the copy is in .rm-jb-desc */
  .rm-proof-logos { gap:28px !important; }
  .rm-sec { padding-top:72px !important; padding-bottom:72px !important; }
}
@media (max-width:600px) {
  .rm-sticky-sub { display:none; }
  /* the design narrows the gutter below 600 — 32px is ~16% of a 390px screen */
  .rm-sec, .rm-hero, .rm-proof, .rm-stepper-wrap, .rm-stickybar {
    padding-left:20px !important; padding-right:20px !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .rm-reveal { opacity:1; transform:none; transition:none; }
  .rm-proof-logos { animation:none; flex-wrap:wrap; justify-content:center; }
  .rm-stickybar { transition:none; }
  .rm-btn .elementor-button, .rm-pkg, .rm-jb-item { transition:none; }
}

/* ------------------------------------------------- theme page title suppression */
/* The hero carries this page's only h1. Hello Elementor's own .entry-title would be a
   second one, and a duplicated visible title on top of the design. The Elementor page
   setting hide_title is the primary fix; this is the belt to that setting's braces. */
.rm-page .page-header,
.rm-page .entry-title { display:none !important; }


/* =====================================================================
   SIBLING COMPONENTS — Launch / Operate / Grow
   The hub does not use these; they live in the same stylesheet because all four
   pages share one file and one script.
   ===================================================================== */

/* ---------------------------------------------------------------- figures */
.rm-why-grid { align-items:start; }
.rm-why-copy-p p { font-size:16px; line-height:1.68; margin:0; }
.rm-figure { padding:32px 0; border-top:1px solid var(--rm-line); }
.rm-figure:last-of-type { border-bottom:1px solid var(--rm-line); }
.rm-figure-label em {
  display:block; font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; font-style:normal; color:var(--rm-grey-l);
}
.rm-figure-value .elementor-heading-title { display:block; }
.rm-figure-text span { font-size:15px; line-height:1.6; color:var(--rm-grey); }

/* ------------------------------------------------------------ process rail */
.rm-process-grid { position:relative; align-items:start; }
.rm-pstep { padding-right:28px; }
/* An OUTLINED navy numeral that fills red on hover — not a pre-filled tint chip. The
   difference matters: outlined reads as a step you have not taken yet, which is the whole
   point of a numbered rail. */
.rm-pstep-num span {
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; background:#FFFFFF;
  border:1.5px solid var(--rm-navy); color:var(--rm-navy); font-size:18px; line-height:1;
  transition:background .2s, border-color .2s, color .2s;
}
.rm-pstep:hover .rm-pstep-num span {
  background:var(--rm-red); border-color:var(--rm-red); color:#FFFFFF;
}
.rm-pstep-body p { font-size:14.5px; line-height:1.62; margin:0; }

/* ------------------------------------------------------------- risk items */
.rm-risk-item {
  border:1px solid var(--rm-line); border-radius:3px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.rm-risk-item:hover {
  border-color:#C9D6E2; box-shadow:0 14px 30px rgba(10,49,97,.07); transform:translateY(-3px);
}
.rm-rlabel span {
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rm-grey-l);
}
.rm-rconcern p {
  font-size:14px; line-height:1.6; color:var(--rm-grey-l); font-style:italic; margin:0;
  padding-bottom:12px; border-bottom:1px solid var(--rm-line-soft);
}
.rm-rfix p { font-size:14.5px; line-height:1.62; margin:0; }

/* ------------------------------------------------------- peace-of-mind grid */
.rm-peace-item {
  border:1px solid var(--rm-line); border-radius:3px; position:relative; overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.rm-peace-item::before {
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--rm-red); transition:width .3s ease;
}
.rm-peace-item:hover {
  border-color:#C9D6E2; box-shadow:0 14px 30px rgba(10,49,97,.07); transform:translateY(-3px);
}
.rm-peace-item:hover::before { width:100%; }
.rm-peace-body p { font-size:14.5px; line-height:1.62; margin:0; }

/* ------------------------------------------- horizontal scrollers (stats / vs) */
.rm-statcards, .rm-cmp-scroller {
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px;
}
.rm-statcards::-webkit-scrollbar, .rm-cmp-scroller::-webkit-scrollbar { display:none; }
.rm-statcards > *, .rm-cmp-scroller > * { scroll-snap-align:start; }

/* Doubled class for specificity. Elementor gives a container `width: var(--width)` with
   --width:100% and leaves flex-shrink at 1, so inside a nowrap row the cards COMPRESS to
   share the width instead of overflowing into a scroll -- 7 cards became 154px each and
   the rail never scrolled. A carousel that silently turns into a squeezed row is the
   failure mode worth naming: nothing errors, it just stops being a carousel. */
.rm-statcard.rm-statcard {
  position:relative; flex:0 0 340px; width:340px; max-width:82vw;
  min-height:400px; border-radius:4px; overflow:hidden; justify-content:flex-end;
}
.rm-statcard .rm-statcard-img,
.rm-statcard .rm-statcard-img .elementor-widget-container,
.rm-statcard .rm-statcard-img img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0;
}
.rm-statcard-in {
  position:relative; z-index:2;
  background:linear-gradient(180deg, rgba(6,32,66,0) 0%, rgba(6,32,66,.85) 55%, rgba(6,32,66,.95) 100%);
}
.rm-statcard-label small {
  font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rm-cyan);
}
.rm-statcard-text span { font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.8); }

/* comparison cards */
.rm-pcard.rm-pcard {
  flex:0 0 clamp(280px, 31.5%, 380px); width:auto; max-width:86vw;
  border:1px solid var(--rm-line); border-radius:3px;
  transition:border-color .25s, box-shadow .25s;
}
.rm-pcard:hover { border-color:#C9D6E2; box-shadow:0 14px 34px rgba(10,49,97,.07); }
.rm-pn span { font-family:'DM Serif Display',Georgia,serif; font-size:14px; color:var(--rm-red); }
.rm-pcard-h .elementor-heading-title { min-height:2.4em; }
.rm-pcard .rm-cmp-row.rm-cmp-row { flex:0 0 auto; width:auto; max-width:none; }

.rm-cmp-key span { font-size:12.5px; font-weight:700; letter-spacing:.04em; }
.rm-cmp-key .rm-k-us span, .rm-k-us span { color:var(--rm-navy); }
.rm-cmp-key .rm-k-them span, .rm-k-them span { color:var(--rm-grey-l); }
.rm-cmp-row { border-radius:3px; border:1px solid var(--rm-line); }
/* The two sides are told apart by FILL, not just by the chip: ours sits on a 5% red wash,
   the alternative on the cool tint behind a slightly darker rule. Measured against the
   mockup, we had white vs paper with the same hairline on both — the rail read neutral. */
.rm-cmp-row--us { background:rgba(179,25,66,.05); border-left:2px solid var(--rm-red); }
.rm-cmp-row--them { background:var(--rm-tint); border-left:2px solid #D6DEE6; }
.rm-cmp-label span { font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.rm-cmp-row--us .rm-cmp-label span { color:var(--rm-red); }
.rm-cmp-row--them .rm-cmp-label span { color:var(--rm-grey-l); }
.rm-cmp-body p { font-size:14.5px; line-height:1.6; margin:0; }

/* scroller controls — generated by roadmaps.js, styled here */
.rm-scroll-controls {
  display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:22px;
}
.rm-scroll-dots { display:flex; gap:8px; flex-wrap:wrap; }
/* The design paginates with 26x3 BARS, not round dots — a bar reads as "position along a
   track", which is what a horizontal scroller is. Matches the mockup's `.cmp-dot`. */
.rm-scroll-dot {
  width:26px; height:3px; border-radius:0; border:0; padding:0; cursor:pointer;
  background:var(--rm-line); transition:background .25s;
}
.rm-scroll-dot[aria-current="true"] { background:var(--rm-red); }
.rm-scroll-arrows { display:flex; gap:8px; }
.rm-scroll-arrow {
  width:40px; height:40px; border-radius:50%; border:1px solid var(--rm-line);
  background:#fff; color:var(--rm-navy); cursor:pointer; font-size:15px; line-height:1;
  transition:border-color .2s, color .2s, background .2s;
}
.rm-scroll-arrow:hover:not(:disabled) { border-color:var(--rm-red); color:var(--rm-red); }
.rm-scroll-arrow:disabled { opacity:.35; cursor:default; }
.rm-scroll-dot:focus-visible, .rm-scroll-arrow:focus-visible {
  outline:2px solid var(--rm-red); outline-offset:2px;
}

@media (max-width:980px) {
  .rm-pstep { padding-right:0; }
  .rm-statcard.rm-statcard { flex-basis:280px; width:280px; min-height:360px; }

}
@media (prefers-reduced-motion:reduce) {
  .rm-statcards, .rm-cmp-scroller { scroll-behavior:auto; }
  .rm-risk-item, .rm-peace-item, .rm-scroll-dot, .rm-scroll-arrow { transition:none; }
}

/* ------------------------------------------- journey status bar + comparison chips */

/* (The journey tiles' 3px status rule is already defined above, with the rest of the
   journey-bar block — it was never missing; a palette probe cannot see pseudo-elements.) */

/* The tick / cross chip that heads each comparison row. `--y` is us, `--n` is the
   alternative — the colour carries the argument, so losing them flattened the rail. */
.rm-ic {
  width:20px; height:20px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:700;
  line-height:1; margin-right:9px; vertical-align:middle; flex:0 0 20px;
}
.rm-ic--y { background:var(--rm-red); color:#FFFFFF; }
.rm-ic--n { background:#DFE5EB; color:#7C8B98; }
