/* =====================================================================
   Roaming Rehab - shared chrome

   The home page carries its own CSS inside the page itself, moved
   across from Weebly untouched. This file holds only the parts Weebly
   used to supply: the header navigation, the footer, and the hero's
   background photograph.

   Design tokens are taken from the live site, not from the print
   brand guide. The site's teal is var(--rr-teal), which is not the #00A8B3
   used on letterhead.
   ===================================================================== */

:root {
  --rr-teal:       #00A2B4;   /* sampled from the logo */
  --rr-teal-dark:  #067884;   /* the logo's darker shading */
  --rr-teal-light: #e8f6fa;
  --rr-dark:       #1B3A44;
  --rr-black:      #1a1a1a;
  --rr-muted:      #4a5568;
  --rr-off-white:  #f7fbfc;
  --rr-white:      #ffffff;
  --rr-text:       rgb(42, 42, 42);
  --rr-max:        1100px;
  --rr-r:          4px;
  --rr-ease:       0.3s ease;
  --rr-ui:         'Roboto', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--rr-white); }

.skip { position: absolute; left: -9999px; }

/* for table captions and column headers that screen readers need
   but that would look like clutter on the page */
.rr-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip:focus {
  left: 16px; top: 16px; z-index: 999;
  background: var(--rr-dark); color: #fff;
  padding: 12px 18px; border-radius: var(--rr-r);
  font-family: var(--rr-ui);
}

/* ---------- header ---------- */

.rr-nav {
  background: var(--rr-white);
  border-bottom: 1px solid #e3ecef;
  font-family: var(--rr-ui);
  position: relative;
  z-index: 20;
}

.rr-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.rr-nav-brand { text-decoration: none; display: block; line-height: 0; }
.rr-nav-brand img {
  display: block;
  width: auto;
  height: 54px;
}

.rr-nav-check,
.rr-nav-burger { display: none; }

.rr-nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.rr-nav-links a {
  color: var(--rr-dark);
  text-decoration: none;
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: border-color var(--rr-ease), color var(--rr-ease);
}
.rr-nav-links a:hover,
.rr-nav-links a:focus-visible { border-bottom-color: var(--rr-teal); }

.rr-nav-phone {
  background: var(--rr-black);
  color: var(--rr-white) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.8rem !important;
  padding: 0 20px;
  border-radius: var(--rr-r);
  border-bottom: 0 !important;
}
.rr-nav-phone:hover, .rr-nav-phone:focus-visible { background: var(--rr-teal); }

/* ---------- nav dropdowns ---------- */

.rr-has-sub { position: relative; display: flex; align-items: center; }

.rr-sub-btn {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rr-dark);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: border-color var(--rr-ease);
}
.rr-has-sub:hover .rr-sub-btn,
.rr-has-sub:focus-within .rr-sub-btn { border-bottom-color: var(--rr-teal); }

.rr-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--rr-ease);
}
.rr-has-sub:hover .rr-caret,
.rr-has-sub:focus-within .rr-caret { transform: rotate(180deg); }

.rr-sub {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 238px;
  background: var(--rr-white);
  border: 1px solid #e3ecef;
  border-top: 3px solid var(--rr-teal);
  border-radius: var(--rr-r);
  box-shadow: 0 10px 28px rgba(27, 58, 68, 0.14);
  padding: 6px 0;
  display: none;
  z-index: 40;
}
.rr-has-sub:hover .rr-sub,
.rr-has-sub:focus-within .rr-sub { display: block; }

.rr-sub a {
  display: block;
  padding: 12px 20px;
  min-height: 0;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  border-bottom: 0;
  white-space: nowrap;
}
.rr-sub a:hover, .rr-sub a:focus-visible {
  background: var(--rr-teal-light);
  color: var(--rr-teal-dark);
  border-bottom: 0;
}

/* phones only: justify plain body paragraphs */
@media (max-width: 600px) {
  .rr-inner > p:not([class]),
  .rr-split-text > p:not([class]),
  .rr-prose p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* ---------- footer additions ---------- */

.rr-foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid #dfeaee;
}
.rr-foot-nav a { font-size: 0.86rem; }

.rr-social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
}
.rr-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--rr-white);
  border: 1px solid #dfeaee;
  transition: background var(--rr-ease), border-color var(--rr-ease);
}
.rr-social svg { width: 20px; height: 20px; fill: var(--rr-dark); transition: fill var(--rr-ease); }
.rr-social a:hover, .rr-social a:focus-visible { background: var(--rr-teal); border-color: var(--rr-teal); }
.rr-social a:hover svg, .rr-social a:focus-visible svg { fill: var(--rr-white); }

.rr-agewise { margin-bottom: 22px; }
.rr-agewise a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--rr-teal-dark);
  border: 1px solid #dfeaee;
  border-radius: var(--rr-r);
  background: var(--rr-white);
  padding: 9px 16px;
  min-height: 44px;
}
.rr-agewise a:hover, .rr-agewise a:focus-visible { border-color: var(--rr-teal); text-decoration: none; }
.rr-agewise img { height: 42px; width: auto; display: block; }

/* phone and small tablet: collapse the links behind a button */
@media (max-width: 1180px) {
  .rr-nav-burger {
    display: block;
    margin-left: auto;
    width: 44px; height: 44px;
    padding: 11px 9px;
    cursor: pointer;
  }
  .rr-nav-burger span {
    display: block;
    height: 2px;
    background: var(--rr-dark);
    margin: 5px 0;
    border-radius: 2px;
  }
  /* keep the logo and burger at the top when the menu opens */
  .rr-nav-inner { align-items: flex-start; }
  .rr-nav-links {
    display: none;
    width: 100%;
    margin: 10px 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .rr-nav-check:checked ~ .rr-nav-links { display: flex; }
  .rr-nav-links a {
    border-bottom: 1px solid #eef3f5;
    padding: 4px 0;
  }
  .rr-nav-phone {
    margin-top: 10px;
    justify-content: center;
    border-bottom: 0;
  }
}

/* ---------- hero background ----------
   The hero markup sets its own background to transparent because
   Weebly was painting the photograph behind it. This supplies it.
   The home page uses Derek's own Colorado summit photo; any other
   page overrides --rr-hero-img and --rr-hero-pos on the section
   itself. The gradient on top keeps text readable over a bright
   sky or a light wall. */

.rr-hero {
  background-color: var(--rr-dark) !important;
  background-image:
    linear-gradient(rgba(27, 58, 68, 0.45), rgba(27, 58, 68, 0.65)),
    var(--rr-hero-img, url('/images/hero-summit-colorado.jpg')) !important;
  background-size: cover !important;
  background-position: var(--rr-hero-pos, center 55%) !important;
  background-repeat: no-repeat !important;
}

/* ---------- footer ---------- */

.rr-foot {
  border-top: 3px solid var(--rr-teal);
  background: var(--rr-off-white);
  font-family: var(--rr-ui);
  color: var(--rr-muted);
  font-size: 0.88rem;
  text-align: center;
  padding: 36px 24px;
}
.rr-foot-inner { max-width: var(--rr-max); margin: 0 auto; }
.rr-foot p { margin: 0 0 6px; }
.rr-foot a { color: var(--rr-muted); text-decoration: none; }
.rr-foot a:hover, .rr-foot a:focus-visible { color: var(--rr-teal-dark); text-decoration: underline; }
.rr-foot-name { color: var(--rr-dark); font-weight: 700; }
.rr-foot-est {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rr-teal-dark);
  margin-top: 16px;
}
.rr-foot-links { margin-top: 14px; }
.rr-foot-sep { color: #cbd9de; padding: 0 6px; }

@media (max-width: 1180px) {
  .rr-nav-burger em {
    display: none;
  }
  .rr-has-sub { display: block; width: 100%; }
  .rr-sub-btn {
    width: 100%;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #eef3f5;
  }
  .rr-sub {
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 6px 0;
    border-radius: 0;
  }
  /* tap to open: site.js toggles .is-open, hover and focus do not open it here */
  .rr-has-sub:hover .rr-sub,
  .rr-has-sub:focus-within .rr-sub { display: none; }
  .rr-has-sub.is-open .rr-sub { display: block; }
  .rr-has-sub:hover .rr-caret,
  .rr-has-sub:focus-within .rr-caret { transform: none; }
  .rr-has-sub.is-open .rr-caret { transform: rotate(180deg); }
  .rr-sub a { padding: 9px 0 9px 18px; color: var(--rr-muted); }
  .rr-foot-nav { gap: 4px 14px; }
  .rr-nav-brand img { height: 44px; }
  .rr-nav-over .rr-nav-links {
    background: rgba(10, 22, 32, 0.95);
    border-radius: var(--rr-r);
    padding: 8px 16px 14px;
  }
  .rr-nav-over .rr-sub-btn,
  .rr-nav-over .rr-nav-links a { border-bottom-color: rgba(255,255,255,0.14); }
  .rr-nav-over .rr-sub a { color: #cfe3ea; }
  .rr-nav-over + main .rr-hero { padding-top: 104px; }
}

/* ---------- nav laid over the hero photo ----------
   On the home page the header sits on top of the hero image rather than
   in its own white band above it, so the photograph runs to the top of
   the window. Links go white, and a soft gradient keeps them readable
   over the sky. Pages without a hero keep the plain white bar. */

.rr-nav-over {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(rgba(10, 22, 32, 0.55), rgba(10, 22, 32, 0));
  border-bottom: 0;
}
.rr-nav-over .rr-nav-links a,
.rr-nav-over .rr-sub-btn { color: var(--rr-white); }
.rr-nav-over .rr-nav-links a:hover,
.rr-nav-over .rr-nav-links a:focus-visible { border-bottom-color: var(--rr-white); }
.rr-nav-over .rr-has-sub:hover .rr-sub-btn,
.rr-nav-over .rr-has-sub:focus-within .rr-sub-btn { border-bottom-color: var(--rr-white); }
.rr-nav-over .rr-nav-phone { background: var(--rr-teal); }
.rr-nav-over .rr-nav-phone:hover,
.rr-nav-over .rr-nav-phone:focus-visible { background: var(--rr-white); color: var(--rr-dark) !important; }
.rr-nav-over .rr-nav-burger span { background: var(--rr-white); }
/* the dropdown panel itself stays a white card so it is readable */
.rr-nav-over .rr-sub a { color: var(--rr-dark); }

/* the hero needs headroom so the logo is not hidden under the bar */
.rr-nav-over + main .rr-hero { padding-top: 124px; }

/* =====================================================================
   PAGE SECTIONS

   Lifted out of the home page so every page can use the same parts:
   sections, headings, buttons, call-to-action bands, split layouts,
   service cards, the map frame, the conditions grid and the FAQ
   accordion. This came across from Weebly as inline CSS; the only
   change is that the colour tokens were removed, because they are
   now declared once at the top of this file.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
  html, body { margin: 0; padding: 0; }

  .rr-hero {
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 52px 24px 72px;
    box-sizing: border-box;
  }

  .rr-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
  }

  /* H1 as eyebrow text — semantically H1, visually small label */
  .rr-hero-h1 {
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 18px;
    line-height: 1.5;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  }

  /* Logo — landscape format, wider than tall */
  .rr-hero-logo {
    max-width: 520px;
    width: 78%;
    height: auto;
    display: block;
    margin: 0 auto 40px;
    filter: drop-shadow(0 4px 28px rgba(0,0,0,0.25));
  }

  /* Button row */
  .rr-hero-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  /* All buttons: solid black */
  .rr-hbtn {
    display: inline-block;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 36px;
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .rr-hbtn:hover {
    background: transparent !important;
    border-color: #1a1a1a !important;
    color: #1a1a1a !important;
  }

  /* Fade-in */
  .js .rr-fade { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .js .rr-fade.in { opacity: 1; transform: none; }

  @media (max-width: 600px) {
    .rr-hero { min-height: 360px; padding: 40px 20px 52px; }
    .rr-hero-logo { max-width: 300px; width: 88%; margin-bottom: 28px; }
    .rr-hero-btns { flex-direction: column; align-items: center; gap: 10px; }
    .rr-hbtn { width: 220px; text-align: center; padding: 14px 20px; font-size: 12px; }
  }

@import url('https://fonts.googleapis.com/css2?family=Droid+Serif:ital,wght@0,400;0,700;1,400&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
  html, body { margin: 0; padding: 0; }
  .rr-page { font-family: Birdseye, system-ui, -apple-system, sans-serif; color: var(--rr-text); }
  .rr-inner { max-width: var(--rr-max); margin: 0 auto; padding: 0 32px; }
  .rr-section     { padding: 72px 0; background: var(--rr-white); }
  .rr-section-alt { background: var(--rr-off-white); }
  /* Headings */
  .rr-section h2, .rr-section-alt h2 {
    font-family: "Droid Serif", Lora, Georgia, serif;
    font-size: clamp(22px, 2.6vw, 34px); font-weight: 400;
    line-height: 1.2; margin: 0 0 18px; color: rgb(42,42,42);
  }
  .rr-section h3, .rr-section-alt h3 {
    font-family: "Droid Serif", Lora, Georgia, serif;
    font-size: 18px; font-weight: 700; margin: 0 0 8px; color: rgb(42,42,42);
  }
  .rr-section p, .rr-section-alt p { font-size: 16px; line-height: 1.75; margin: 0 0 14px; }
  .rr-section ul, .rr-section-alt ul { font-size: 15px; line-height: 1.7; padding-left: 18px; margin: 0 0 12px; }
  .rr-section li, .rr-section-alt li { margin-bottom: 5px; }
  /* Heading accents */
  .rr-accent::before { content: ''; display: block; width: 36px; height: 3px; background: var(--rr-teal); margin-bottom: 14px; }
  .rr-accent-center::before { content: ''; display: block; width: 36px; height: 3px; background: var(--rr-teal); margin: 0 auto 16px; }
  .rr-label { display: block; font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rr-teal); margin-bottom: 10px; }
  /* Buttons — full inline style applied on every element */
  .rr-btn { display: inline-block !important; margin-top: 24px; padding: 14px 30px !important; background: #1a1a1a !important; color: #ffffff !important; text-decoration: none !important; font-family: 'Roboto', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border-radius: 0 !important; border: none !important; cursor: pointer; transition: background 0.3s ease; }
  .rr-btn:hover { background: var(--rr-teal) !important; }
  /* CTA bands */
  .rr-cta { background: var(--rr-teal); padding: 64px 32px; text-align: center; }
  .rr-cta-dark { background: var(--rr-teal-dark); }
  /* The home page carried these as inline !important styles, because it was
     fighting Weebly's stylesheet. Declared here, any page can use the band. */
  .rr-cta h2 {
    font-family: 'Droid Serif', Lora, Georgia, serif;
    color: #ffffff;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 400;
    margin: 0 0 12px;
  }
  .rr-cta p { color: rgba(255,255,255,0.92); max-width: 56ch; margin: 0 auto; }
  .rr-cta a:not(.rr-cta-phone):not(.rr-btn) { color: #ffffff; }
  .rr-cta-phone { display: block; color: #ffffff; font-size: 24px; font-weight: 700; margin: 16px auto; text-decoration: none; letter-spacing: 0.02em; }
  .rr-cta-phone:hover { color: rgba(255,255,255,0.8); }
  /* Two-column split */
  .rr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
  .rr-split-img { position: relative; border-radius: var(--rr-r); overflow: hidden; min-height: 380px; }
  .rr-split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .rr-split-text { display: flex; flex-direction: column; justify-content: center; }
  .rr-split-text h2 { margin-top: 0; }
  /* Callout */
  .rr-callout { background: var(--rr-teal-light); border-left: 4px solid var(--rr-teal); padding: 18px 22px; border-radius: 0 var(--rr-r) var(--rr-r) 0; margin: 22px 0; }
  .rr-callout p { margin: 0; font-size: 15px; line-height: 1.65; }
  .rr-callout a { color: var(--rr-teal-dark); font-weight: 600; }
  /* Services grid — 5-card 3+2 centered layout */
  .rr-services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 32px; }
  .rr-service-card { background: var(--rr-white); border-top: 3px solid var(--rr-teal); border-radius: 0 0 var(--rr-r) var(--rr-r); padding: 24px 22px; box-shadow: 0 2px 12px rgba(43,157,181,0.08); text-decoration: none; color: var(--rr-text); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; grid-column: span 2; }
  .rr-service-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(43,157,181,0.15); }
  .rr-service-card:nth-child(4) { grid-column: 2 / span 2; }
  .rr-service-card:nth-child(5) { grid-column: 4 / span 2; }
  .rr-service-icon { margin-bottom: 14px; }
  .rr-service-card h3 { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rr-teal); margin: 0 0 10px; }
  .rr-service-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--rr-muted); flex: 1; }
  .rr-service-link { font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rr-teal); text-decoration: none; margin-top: 16px; display: block; }
  .rr-service-link::after { content: ' \2192'; }
  /* Google Maps */
  .rr-map { padding: 72px 0; background: var(--rr-off-white); }
  .rr-map-inner { max-width: var(--rr-max); margin: 0 auto; padding: 0 32px; }
  .rr-map-frame { width: 100%; height: 420px; border: 0; border-radius: var(--rr-r); display: block; box-shadow: 0 2px 16px rgba(0,0,0,0.1); }
  /* Conditions grid */
  .rr-conditions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; margin-top: 24px; list-style: none; padding: 0; }
  .rr-conditions li { font-size: 15px; line-height: 1.6; padding: 8px 0; border-bottom: 1px solid #dde8eb; color: var(--rr-text); display: flex; align-items: baseline; gap: 8px; }
  .rr-conditions li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--rr-teal); flex-shrink: 0; margin-top: 1px; }
  /* FAQ */
  .rr-faq-list { max-width: 800px; margin: 32px auto 0; }
  .rr-faq-item { border-bottom: 1px solid #d4e8ee; }
  .rr-faq-item:first-child { border-top: 1px solid #d4e8ee; }
  .rr-faq-btn { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: 16px; font-weight: 600; color: rgb(42,42,42); font-family: inherit; line-height: 1.4; position: relative; transition: color 0.3s ease; display: block; }
  .rr-faq-btn:hover { color: var(--rr-teal); }
  .rr-faq-btn::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 300; color: var(--rr-teal); line-height: 1; }
  .rr-faq-btn.open::after { content: '\2212'; }
  .rr-faq-ans { display: none; padding: 2px 44px 20px 0; font-size: 15px; line-height: 1.75; color: var(--rr-muted); }
  .rr-faq-ans.open { display: block; }
  /* Disclaimer */
  .rr-disclaimer { padding: 28px 24px; }
  .rr-disclaimer p { max-width: var(--rr-max); margin: 0 auto; font-size: 13px; line-height: 1.65; color: #4a5568; text-align: center; }
  /* Scroll fade */
  .js .rr-fade { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .js .rr-fade.in { opacity: 1; transform: none; }
  /* Responsive */
  @media (max-width: 768px) {
    .rr-phil-grid { grid-template-columns: 1fr !important; }
    .rr-split     { grid-template-columns: 1fr; gap: 28px; }
    .rr-split-img { order: -1; min-height: 240px; aspect-ratio: 4/3; }
    .rr-inner     { padding: 0 20px; }
    .rr-section   { padding: 48px 0; }
    .rr-services  { grid-template-columns: repeat(2, 1fr); }
    .rr-service-card,
    .rr-service-card:nth-child(4),
    .rr-service-card:nth-child(5) { grid-column: span 1; }
    .rr-map-frame { height: 300px; }
    .rr-map-inner { padding: 0 20px; }
    .rr-conditions { grid-template-columns: 1fr 1fr; }
    .rr-btn { display: block !important; text-align: center !important; }
  }


  /* ---- OUR PHILOSOPHY BACKGROUND ---- */
  .rr-phil-section {
    position: relative;
    padding: 80px 0 88px;
    background-image: url('/images/sunrise-ridge-colorado.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .rr-phil-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 32, 0.74);
    pointer-events: none;
  }
  .rr-phil-section > .rr-inner {
    position: relative;
    z-index: 1;
  }
  /* Force white text throughout philosophy section — beats Weebly cascade */
  .rr-phil-section p,
  .rr-phil-section h2,
  .rr-phil-section span:not(.rr-label),
  .rr-phil-section blockquote {
    color: #ffffff !important;
  }
  .rr-phil-section .rr-label {
    color: #ffffff !important;
  }

  /* About section — couple photo, CSS bg avoids Weebly src attr length limits */
  /* background-position shifted to center 70% to show faces not sky */
  .rr-about-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  /* Philosophy pillar grid — mobile */
  @media (max-width: 600px) {
    .rr-phil-grid-cell { padding: 28px 24px !important; }
  }
  @media (max-width: 480px) {
    .rr-services { grid-template-columns: 1fr; }
    .rr-service-card,
    .rr-service-card:nth-child(4),
    .rr-service-card:nth-child(5) { grid-column: 1; }
    .rr-conditions { grid-template-columns: 1fr; }
  }

@media (max-width: 860px) {
    .rr-phil-grid { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 480px) {
    .rr-phil-grid { grid-template-columns: 1fr !important; }
  }

/* =====================================================================
   CONTACT PAGE
   ===================================================================== */

/* The Google Form embed. Google's iframe has a fixed height, so this
   wrapper keeps it from overflowing on a phone and gives it a frame
   that matches the rest of the site. */
.rr-formwrap {
  margin-top: 28px;
  background: var(--rr-white);
  border: 1px solid #dfeaee;
  border-top: 3px solid var(--rr-teal);
  border-radius: var(--rr-r);
  overflow: hidden;
}
.rr-formwrap iframe {
  display: block;
  width: 100%;
  height: 980px;
  border: 0;
}
/* Google's form needs more vertical room once the fields stack on a phone */
@media (max-width: 600px) {
  .rr-formwrap iframe { height: 1180px; }
}

.rr-form-placeholder {
  padding: 40px 28px;
  text-align: center;
  color: var(--rr-muted);
}
.rr-form-placeholder p { margin: 0 0 10px; }

.rr-formnote {
  margin-top: 16px;
  font-size: 0.92rem;
  color: var(--rr-muted);
}

.rr-contact-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 32px;
}
@media (min-width: 620px)  { .rr-contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rr-contact-grid { grid-template-columns: repeat(4, 1fr); } }

.rr-contact-card {
  background: var(--rr-white);
  border: 1px solid #dfeaee;
  border-top: 3px solid var(--rr-teal);
  border-radius: var(--rr-r);
  padding: 24px 22px;
}
.rr-contact-card h3 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rr-teal-dark);
  margin: 0 0 12px;
}
.rr-contact-card p { margin: 0 0 8px; }
.rr-contact-card p:last-child { margin-bottom: 0; font-size: 0.92rem; color: var(--rr-muted); }
.rr-contact-big {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rr-dark);
  text-decoration: none;
}
.rr-contact-big:hover, .rr-contact-big:focus-visible { color: var(--rr-teal-dark); }

.rr-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  max-width: 68ch;
}
.rr-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 58px;
  margin-bottom: 28px;
}
.rr-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rr-teal);
  color: var(--rr-white);
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================================
   PAGE HEADER BAND

   For pages that are not the home page. Gives them a proper top instead
   of starting cold with text under the nav. The photograph is optional:
   drop a file at /images/<page>-header.jpg and set it on that page's
   class. Without one, the teal gradient below stands in and nothing
   looks broken.
   ===================================================================== */

.rr-pagehead {
  background-color: var(--rr-dark);
  background-image: linear-gradient(135deg, var(--rr-teal-dark), var(--rr-dark));
  background-size: cover;
  background-position: center 45%;
  padding: 72px 24px 64px;
  text-align: center;
}
.rr-pagehead-inner { max-width: var(--rr-max); margin: 0 auto; }

.rr-pagehead-eyebrow {
  display: block;
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 14px;
}
.rr-pagehead-h1 {
  font-family: 'Droid Serif', Lora, Georgia, serif;
  font-weight: 400;
  color: #ffffff;
  font-size: clamp(28px, 4.5vw, 46px);
  margin: 0 0 14px;
  line-height: 1.2;
}
.rr-pagehead-sub {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  max-width: 54ch;
  margin: 0 auto;
}

/* Once a photo exists, this darkens it enough for the text to stay legible. */
.rr-pagehead-photo {
  background-image:
    linear-gradient(rgba(10, 22, 32, 0.62), rgba(10, 22, 32, 0.72)),
    var(--rr-pagehead-img);
}

@media (max-width: 600px) {
  .rr-pagehead { padding: 52px 20px 46px; }
}

/* =====================================================================
   SERVICE PAGE COMPONENTS

   Lifted out of the physical-therapy page so every service page can
   use the same parts: the photo hero with its eyebrow and serif
   headline, the centred intro, benefit cards, challenge rows, the
   three-up scope grid, the two-column condition list and the dark
   NEO band. Came across from Weebly as inline CSS. The only changes
   are that the colour tokens were removed, because they are declared
   once at the top of this file, and the icon colours now inherit
   from the parent so a theme change carries through.
   ===================================================================== */

  /* ---------- photo hero, text variant ---------- */

  .rr-hero-text { max-width: 740px; margin: 0 auto; }
  .rr-hero-text h1 {
    margin: 0 0 14px;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  }
  .rr-hero-text h2 {
    margin: 0 0 28px;
    font-family: 'Droid Serif', Lora, Georgia, serif;
    font-size: clamp(22px, 2.8vw, 38px);
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
  }

  /* ---------- centred intro ---------- */

  .rr-intro { padding: 64px 0 56px; background: var(--rr-white); border-top: 3px solid var(--rr-teal); }
  .rr-intro-inner { max-width: 720px; margin: 0 auto; padding: 0 32px; text-align: center; }
  .rr-intro-inner p { font-size: 18px; line-height: 1.85; color: #2a3f47; margin: 0 0 24px; }
  .rr-intro-inner p:last-child { margin-bottom: 0; }

  /* ---------- benefit cards ---------- */

  .rr-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 32px; }
  .rr-benefit-card {
    flex: 0 0 calc(33.333% - 14px);
    min-width: 220px;
    background: var(--rr-white);
    border-top: 3px solid var(--rr-teal);
    border-radius: 0 0 var(--rr-r) var(--rr-r);
    padding: 24px 22px;
    box-shadow: 0 2px 12px rgba(0, 162, 180, 0.07);
  }
  .rr-benefit-icon { margin-bottom: 14px; color: var(--rr-teal); line-height: 0; }
  .rr-benefit-card h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--rr-teal);
    margin: 0 0 10px;
  }
  .rr-benefit-card p { margin: 0; font-size: 15px; line-height: 1.65; }

  /* ---------- challenge rows ---------- */

  .rr-challenge { display: flex; gap: 22px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid #e2eef1; }
  .rr-challenge:last-child { border-bottom: none; }
  .rr-ch-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    background: var(--rr-teal-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--rr-teal);
  }
  .rr-ch-body h3 { margin: 0 0 6px; font-size: 17px; }
  .rr-ch-body p  { margin: 0; font-size: 15px; line-height: 1.7; }

  /* ---------- scope of care grid ---------- */

  .rr-tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; }
  /* a lone item on the last row sits in the middle column rather than
     stretching across, which looks lopsided on the seven-item OT grid */
  @media (min-width: 900px) {
    .rr-tech-grid { grid-template-columns: repeat(3, 1fr); }
    .rr-tech-grid .rr-tech-item:last-child:nth-child(3n+1) { grid-column: 2; }
  }
  .rr-tech-item {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 20px;
    background: var(--rr-white);
    border-radius: var(--rr-r);
    box-shadow: 0 2px 8px rgba(0, 162, 180, 0.06);
    border-left: 3px solid var(--rr-teal);
  }
  .rr-tech-icon { flex-shrink: 0; margin-top: 2px; color: var(--rr-teal); line-height: 0; }
  .rr-tech-item strong {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rr-teal);
    margin-bottom: 5px;
  }
  .rr-tech-item p { margin: 0; font-size: 14px; line-height: 1.6; }

  /* ---------- two-column dot list ---------- */

  .rr-2col-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; margin: 20px 0; font-size: 15px; line-height: 1.6; padding: 0; }
  .rr-2col-list li { list-style: none; padding-left: 16px; position: relative; }
  .rr-2col-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--rr-teal); }

  /* ---------- NEO band ---------- */

  .rr-neo { background: var(--rr-dark); padding: 60px 0; }
  .rr-neo-inner { max-width: var(--rr-max); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
  .rr-neo-img { position: relative; }
  .rr-neo-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    background: var(--rr-dark);
    display: block;
    border-radius: var(--rr-r);
  }
  .rr-neo-copy { color: #ffffff; }
  .rr-neo-copy p { font-size: 16px; line-height: 1.75; margin: 0 0 12px; color: #ffffff; }
  .rr-neo-copy strong { color: #ffffff; }
  .rr-neo-copy a { color: var(--rr-teal); font-weight: 600; text-decoration: none; }
  .rr-neo-copy a:hover, .rr-neo-copy a:focus-visible { text-decoration: underline; }

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

  @media (max-width: 768px) {
    .rr-intro-inner { padding: 0 20px; }
    .rr-benefit-card { flex: 0 0 calc(50% - 10px); }
    .rr-tech-grid { grid-template-columns: 1fr; }
    .rr-2col-list { grid-template-columns: 1fr; }
    .rr-neo-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
    .rr-neo-img { order: 1; position: static; width: 100%; }
    .rr-neo-img img { position: static; width: 100%; height: auto; object-fit: unset; }
    .rr-neo-copy { order: 2; width: 100%; }
  }

  @media (max-width: 480px) {
    .rr-benefit-card { flex: 0 0 100%; }
  }

  /* ---------- comparison table ---------- */

  .rr-compare { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15px; }
  .rr-compare th {
    background: var(--rr-teal);
    color: #ffffff;
    padding: 14px 16px;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .rr-compare th:first-child { width: 22%; }
  .rr-compare td { padding: 14px 16px; border-bottom: 1px solid #d4e8ee; vertical-align: top; line-height: 1.55; }
  .rr-compare tr:last-child td { border-bottom: none; }
  .rr-compare tr:nth-child(even) td { background: rgba(0, 162, 180, 0.05); }
  .rr-compare .rr-compare-feat {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: var(--rr-dark);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .rr-compare .rr-good { color: var(--rr-teal-dark); font-weight: 600; }

  @media (max-width: 768px) {
    .rr-compare thead { display: none; }
    .rr-compare, .rr-compare tbody, .rr-compare tr, .rr-compare td { display: block; }
    .rr-compare tr { border-bottom: 2px solid var(--rr-teal); margin-bottom: 16px; border-radius: var(--rr-r); overflow: hidden; }
    .rr-compare td { border-bottom: 1px solid #d4e8ee; padding: 10px 14px; }
    .rr-compare td::before {
      content: attr(data-label);
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--rr-teal);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
    }
    .rr-compare .rr-compare-feat::before { display: none; }
    .rr-compare .rr-compare-feat { background: var(--rr-dark); color: #ffffff; padding: 10px 14px; font-size: 12px; }
  }

/* =====================================================================
   AGING IN PLACE COMPONENTS

   The stat callout under the intro and the home-modification card grid.
   Lifted out of the aging-in-place page so other pages can use them.
   ===================================================================== */

  /* ---------- stat callout under a centred intro ---------- */

  .rr-intro-stat {
    display: inline-block;
    margin: 28px auto 0;
    padding: 18px 36px;
    background: var(--rr-teal-light);
    border-radius: var(--rr-r);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rr-teal-dark);
    font-weight: 700;
    line-height: 1.5;
  }
  .rr-intro-stat strong {
    font-size: 28px;
    display: block;
    margin-bottom: 4px;
    font-family: 'Droid Serif', Georgia, serif;
    letter-spacing: 0;
  }

  /* ---------- home modification cards ---------- */

  .rr-mods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 16px;
    margin-top: 28px;
  }
  .rr-mod {
    border-top: 3px solid var(--rr-teal);
    padding: 20px 18px;
    background: var(--rr-white);
    border-radius: 0 0 var(--rr-r) var(--rr-r);
    box-shadow: 0 2px 8px rgba(0, 162, 180, 0.06);
  }
  .rr-mod-icon { margin-bottom: 10px; color: var(--rr-teal); line-height: 0; }
  .rr-mod h3 {
    margin: 0 0 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rr-teal);
  }
  .rr-mod ul { font-size: 13px; margin: 0; padding-left: 16px; line-height: 1.6; }
  .rr-mod li { margin-bottom: 4px; }

  /* ---------- stacked challenge rows wrapper ---------- */

  .rr-challenges { margin-top: 32px; }

  @media (max-width: 768px) {
    .rr-mods { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .rr-mods { grid-template-columns: 1fr; }
  }

/* =====================================================================
   STAT ROW

   Three short facts side by side inside a split-section text column.
   Used on the Lakewood page; available to any page that wants it.
   ===================================================================== */

  .rr-stat-row { display: flex; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
  .rr-stat {
    flex: 1;
    min-width: 140px;
    background: var(--rr-teal-light);
    border-radius: var(--rr-r);
    padding: 22px;
    text-align: center;
  }
  .rr-stat-num {
    display: block;
    font-family: 'Droid Serif', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--rr-teal);
    margin-bottom: 6px;
    line-height: 1.2;
  }
  .rr-stat-label { font-size: 13px; line-height: 1.5; color: #2a3f47; }

  @media (max-width: 768px) {
    .rr-stat-row { gap: 12px; }
  }

  /* =====================================================================
     TEAM PAGE COMPONENTS
     Card grid, PT/OT filter, bio modal with tabs, diploma lightbox.
     Lifted from the Weebly embed and retuned to the site tokens: square
     corners (--rr-r), the logo teal, and the shared muted/text colors.
     ===================================================================== */

  .rr-team { max-width: var(--rr-max); margin: 0 auto; color: var(--rr-text); }

  .rr-team__filters {
    display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 24px;
  }
  .rr-filter {
    border: 1.5px solid rgba(0, 162, 180, 0.45);
    background: var(--rr-white);
    color: var(--rr-teal-dark);
    padding: 9px 20px;
    border-radius: var(--rr-r);
    cursor: pointer;
    font-family: var(--rr-ui);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
  }
  .rr-filter:hover { border-color: var(--rr-teal); background: var(--rr-teal-light); }
  .rr-filter.is-active { background: var(--rr-teal); border-color: var(--rr-teal); color: #ffffff; }
  .rr-filter:focus-visible { outline: 2px solid var(--rr-teal); outline-offset: 2px; }

  .rr-team__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  @media (max-width: 1000px) { .rr-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 760px)  { .rr-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 430px)  { .rr-team__grid { grid-template-columns: 1fr; } }

  /* ---------- card ---------- */

  .rr-card {
    position: relative;
    background: var(--rr-white);
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-top: 3px solid var(--rr-teal);
    border-radius: 0 0 var(--rr-r) var(--rr-r);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.2s ease;
  }
  .rr-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 162, 180, 0.15); }
  .rr-card:focus-visible { outline: 2px solid var(--rr-teal); outline-offset: 2px; }
  .rr-card__img { aspect-ratio: 1 / 1; background: var(--rr-teal-light); overflow: hidden; }
  .rr-card__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.4s ease;
  }
  .rr-card:hover .rr-card__img img { transform: scale(1.04); }
  .rr-card__body { padding: 14px 14px 34px; }
  .rr-card__name { margin: 0 0 3px; font-size: 16px; font-weight: 700; line-height: 1.3; }
  .rr-card__role { margin: 0; font-size: 13px; color: var(--rr-teal-dark); font-weight: 600; }

  .rr-card::after {
    content: "View profile";
    position: absolute;
    bottom: 12px; right: 14px;
    color: var(--rr-teal-dark);
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
    transition: opacity 0.2s;
  }
  .rr-card:hover::after { opacity: 1; }

  .rr-hidden { display: none !important; }

  /* ---------- modal ---------- */

  .rr-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
  .rr-modal.is-open {
    display: flex; align-items: flex-start; justify-content: center; padding: 28px 12px;
  }
  .rr-modal__overlay { position: fixed; inset: 0; background: rgba(27, 58, 68, 0.62); }
  .rr-modal__dialog {
    position: relative; z-index: 1;
    width: 100%; max-width: 780px;
    background: var(--rr-white);
    border-radius: var(--rr-r);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
    max-height: calc(100vh - 56px);
    display: flex; flex-direction: column;
  }
  .rr-modal__header {
    display: flex; gap: 16px; align-items: center;
    padding: 20px 56px 18px 20px;
    background: var(--rr-teal-light);
    border-bottom: 1px solid rgba(0, 162, 180, 0.18);
    flex-shrink: 0;
  }
  .rr-modal__imgwrap {
    width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
    border: 3px solid var(--rr-white);
    box-shadow: 0 2px 12px rgba(0, 162, 180, 0.25);
    flex-shrink: 0;
  }
  .rr-modal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rr-modal__name {
    margin: 0 0 2px;
    font-family: 'Droid Serif', Georgia, serif;
    font-size: 21px; font-weight: 700; line-height: 1.25;
  }
  .rr-modal__role { margin: 0; font-size: 13px; color: var(--rr-teal-dark); font-weight: 600; }
  .rr-modal__close {
    position: absolute; top: 12px; right: 14px;
    width: 34px; height: 34px;
    border: none; background: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    font-size: 22px; line-height: 34px; text-align: center;
    cursor: pointer; color: #444444;
    transition: background 0.15s;
    z-index: 2;
  }
  .rr-modal__close:hover { background: var(--rr-white); }
  body.rr-modal-lock { overflow: hidden; }

  /* ---------- tabs ---------- */

  .rr-tabs {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    background: var(--rr-white);
    flex-shrink: 0;
  }
  .rr-tab {
    flex: 1; padding: 13px 0;
    background: none; border: none;
    border-bottom: 3px solid transparent;
    font-family: var(--rr-ui);
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--rr-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
  }
  .rr-tab.is-active { color: var(--rr-teal-dark); border-bottom-color: var(--rr-teal); }
  .rr-tab:hover:not(.is-active) { color: var(--rr-teal-dark); }

  .rr-modal__body { overflow-y: auto; flex: 1; }
  .rr-panel { display: none; padding: 20px 22px 26px; }
  .rr-panel.is-active { display: block; }
  .rr-panel--bio { font-size: 15px; line-height: 1.7; color: var(--rr-text); }
  .rr-panel--creds { padding: 18px 22px 26px; }

  /* ---------- credential sections ---------- */

  .rr-csec { margin-bottom: 20px; }
  .rr-csec:last-child { margin-bottom: 0; }
  .rr-csec__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .rr-csec__icon {
    width: 28px; height: 28px;
    border-radius: var(--rr-r);
    background: var(--rr-teal-light);
    color: var(--rr-teal-dark);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .rr-csec__icon svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .rr-csec__label {
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--rr-teal-dark);
  }

  .rr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .rr-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f4f6f8;
    border: 1px solid #e2e6ea;
    border-radius: var(--rr-r);
    padding: 6px 12px;
    font-size: 13px; line-height: 1.35;
    color: var(--rr-text);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
  }
  .rr-chip--link {
    background: var(--rr-teal-light);
    border-color: rgba(0, 162, 180, 0.3);
    color: var(--rr-teal-dark);
    cursor: pointer;
  }
  .rr-chip--link:hover { background: #d7eff5; border-color: var(--rr-teal); }
  .rr-chip--link svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
  }

  .rr-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 7px;
  }
  .rr-list li {
    font-size: 13px; line-height: 1.5;
    color: var(--rr-text);
    padding-left: 15px; position: relative;
  }
  .rr-list li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--rr-teal);
  }
  .rr-list li a { color: var(--rr-teal-dark); text-decoration: underline; text-underline-offset: 2px; }
  .rr-list li a:hover { color: var(--rr-teal); }

  /* ---------- diploma thumbnail and lightbox ---------- */

  .rr-diploma-wrap { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
  .rr-diploma-thumb {
    position: relative; display: block; padding: 0;
    width: 160px;
    border: 2px solid rgba(0, 162, 180, 0.25);
    border-radius: var(--rr-r);
    overflow: hidden; cursor: pointer;
    background: #f8f9fa;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .rr-diploma-thumb:hover { border-color: var(--rr-teal); box-shadow: 0 4px 16px rgba(0, 162, 180, 0.2); }
  .rr-diploma-thumb img { width: 100%; height: auto; display: block; }
  .rr-diploma-thumb__overlay {
    position: absolute; inset: 0;
    background: rgba(0, 162, 180, 0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
  }
  .rr-diploma-thumb:hover .rr-diploma-thumb__overlay { opacity: 1; }
  .rr-diploma-label { font-size: 12px; color: var(--rr-muted); line-height: 1.4; max-width: 220px; margin: 0; }

  .rr-lightbox {
    display: none; position: fixed; inset: 0; z-index: 19999;
    background: rgba(0, 0, 0, 0.88);
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .rr-lightbox.is-open { display: flex; }
  .rr-lightbox__img {
    max-width: 100%; max-height: 90vh;
    border-radius: var(--rr-r);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  }
  .rr-lightbox__close {
    position: fixed; top: 14px; right: 16px;
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, 0.15); border: none; border-radius: 50%;
    color: #ffffff; font-size: 28px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
  }
  .rr-lightbox__close:hover { background: rgba(255, 255, 255, 0.3); }

  @media (max-width: 560px) {
    .rr-modal.is-open { padding: 0; align-items: stretch; }
    .rr-modal__dialog { max-height: 100vh; border-radius: 0; }
    .rr-modal__header { padding: 18px 50px 16px 16px; }
    .rr-modal__imgwrap { width: 64px; height: 64px; }
    .rr-modal__name { font-size: 18px; }
    .rr-panel, .rr-panel--creds { padding: 18px 16px 24px; }
  }

  /* =====================================================================
     CAREERS PAGE
     ===================================================================== */

  .rr-hero-badges { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
  .rr-hero-badge {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #ffffff;
    border-radius: 999px;
    padding: 6px 15px;
    font-family: var(--rr-ui);
    font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  }

  .rr-btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
  .rr-btn-row .rr-btn { margin-top: 0 !important; }

  .rr-copybtn {
    display: inline-block;
    padding: 14px 30px;
    background: transparent;
    color: var(--rr-teal-dark);
    border: 2px solid var(--rr-teal);
    font-family: var(--rr-ui);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .rr-copybtn:hover { background: var(--rr-teal-light); }
  .rr-copybtn.is-copied { background: var(--rr-teal); border-color: var(--rr-teal); color: #ffffff; }

  .rr-pay {
    display: inline-block;
    background: var(--rr-teal-light);
    border: 1px solid rgba(0, 162, 180, 0.3);
    border-radius: var(--rr-r);
    color: var(--rr-teal-dark);
    padding: 6px 12px;
    margin-bottom: 12px;
    font-size: 14px; font-weight: 700;
  }

  .rr-tech-icon.rr-num {
    font-family: 'Droid Serif', Georgia, serif;
    font-size: 15px; font-weight: 700;
    color: var(--rr-teal-dark);
  }

  .rr-glassdoor { margin-top: 28px; }
  .rr-glassdoor img { max-width: 273px; height: auto; border: 0; display: block; }

  .rr-eeo { padding: 26px 24px 40px; }
  .rr-eeo p {
    max-width: var(--rr-max); margin: 0 auto;
    font-size: 13px; line-height: 1.65; color: var(--rr-muted); text-align: center;
  }

  /* =====================================================================
     BLOG

     Article typography for the Mobility Matters posts and the card grid
     on the blog index. Post bodies are plain h2, p, ul, ol and a, so
     these rules carry the whole look.
     ===================================================================== */

  .rr-prose { max-width: 720px; margin: 0 auto; }
  .rr-prose p { font-size: 17px; line-height: 1.8; margin: 0 0 18px; }
  .rr-prose h2 {
    font-family: 'Droid Serif', Lora, Georgia, serif;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400; line-height: 1.25;
    margin: 40px 0 14px; color: rgb(42,42,42);
  }
  .rr-prose h2:first-child { margin-top: 0; }
  .rr-prose ul, .rr-prose ol { font-size: 17px; line-height: 1.75; padding-left: 24px; margin: 0 0 20px; }
  .rr-prose li { margin-bottom: 8px; }
  .rr-prose a { color: var(--rr-teal-dark); font-weight: 600; }
  .rr-prose a:hover, .rr-prose a:focus-visible { text-decoration: underline; }
  .rr-prose blockquote {
    margin: 0 0 20px; padding: 14px 20px;
    border-left: 4px solid var(--rr-teal); background: var(--rr-teal-light);
  }
  .rr-section .rr-post-meta { margin: 0 0 32px; font-size: 14px; color: var(--rr-muted); max-width: 720px; margin-left: auto; margin-right: auto; }
  .rr-post-meta a { color: var(--rr-teal-dark); font-weight: 600; }
  .rr-section .rr-post-back { max-width: 720px; margin: 36px auto 0; font-size: 15px; }
  .rr-post-back a { color: var(--rr-teal-dark); font-weight: 600; }

  .rr-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 32px; }
  .rr-blog-card {
    display: flex; flex-direction: column;
    background: var(--rr-white);
    border-top: 3px solid var(--rr-teal);
    border-radius: 0 0 var(--rr-r) var(--rr-r);
    padding: 24px 22px;
    box-shadow: 0 2px 12px rgba(0,162,180,0.08);
  }
  .rr-blog-date { font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rr-teal-dark); margin-bottom: 10px; }
  .rr-blog-card h2 { font-family: 'Droid Serif', Lora, Georgia, serif; font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
  .rr-blog-card h2 a { color: rgb(42,42,42); text-decoration: none; }
  .rr-blog-card h2 a:hover, .rr-blog-card h2 a:focus-visible { color: var(--rr-teal-dark); }
  .rr-blog-card p { font-size: 15px; line-height: 1.65; margin: 0 0 14px; }
  .rr-blog-more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--rr-teal-dark); text-decoration: none; }
  .rr-blog-more:hover, .rr-blog-more:focus-visible { text-decoration: underline; }

  /* =====================================================================
     ROAMERS (staff tool page)

     Tiles that link out to the team's tools, an events list loaded by
     js/roamers.js, and a collapsible how-to. Uses the site tokens and the
     site's square corners.
     ===================================================================== */

  .rr-roam { max-width: 900px; margin: 0 auto; }
  .rr-roam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  .rr-roam-tile {
    display: flex; flex-direction: column; min-height: 152px;
    padding: 20px 20px 18px;
    border: 1px solid #e2eef1; border-radius: var(--rr-r);
    background: var(--rr-white);
    text-decoration: none;
    transition: transform var(--rr-ease), box-shadow var(--rr-ease), border-color var(--rr-ease);
  }
  .rr-roam-tile:hover, .rr-roam-tile:focus-visible {
    transform: translateY(-2px); border-color: var(--rr-teal);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  }
  .rr-roam-icon { color: var(--rr-teal); line-height: 0; margin-bottom: 12px; }
  .rr-roam-icon svg { width: 26px; height: 26px; display: block; }
  .rr-roam-title { font-size: 19px; font-weight: 700; color: var(--rr-dark); line-height: 1.25; margin-bottom: 6px; }
  .rr-roam-desc { font-size: 14px; line-height: 1.5; color: var(--rr-muted); flex: 1; }
  .rr-roam-cta { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--rr-teal-dark); }
  .rr-roam-primary { background: var(--rr-dark); border-color: var(--rr-dark); }
  .rr-roam-primary .rr-roam-icon, .rr-roam-primary .rr-roam-cta { color: #8ee3ea; }
  .rr-roam-primary .rr-roam-title { color: var(--rr-white); }
  .rr-roam-primary .rr-roam-desc { color: rgba(255,255,255,0.85); }

  .rr-roam-events, .rr-roam-acc, .rr-roam-tip { margin-top: 16px; }
  .rr-roam-events { padding: 20px; border: 1px solid #e2eef1; border-radius: var(--rr-r); background: var(--rr-white); }
  .rr-roam-events h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--rr-dark); }
  .rr-roam-msg { margin: 0; font-size: 14px; line-height: 1.55; color: var(--rr-muted); }
  .rr-ev { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid #eef3f5; }
  .rr-ev:first-child { border-top: 0; padding-top: 2px; }
  .rr-ev-date { flex: 0 0 56px; text-align: center; padding: 6px 0 7px; border: 1px solid #e2eef1; border-radius: var(--rr-r); background: var(--rr-off-white); align-self: flex-start; }
  .rr-ev-mon { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; color: var(--rr-teal-dark); }
  .rr-ev-day { display: block; font-size: 21px; font-weight: 700; line-height: 1.15; color: var(--rr-dark); }
  .rr-ev-title { font-size: 16px; font-weight: 700; color: var(--rr-dark); line-height: 1.3; }
  .rr-ev-meta { font-size: 13.5px; line-height: 1.5; color: var(--rr-muted); margin-top: 2px; }
  .rr-ev-notes { font-size: 13.5px; line-height: 1.5; color: var(--rr-muted); margin-top: 4px; }

  .rr-roam-acc { border: 1px solid #e2eef1; border-radius: var(--rr-r); background: var(--rr-white); }
  .rr-roam-acc > summary { cursor: pointer; padding: 16px 44px 16px 20px; font-size: 16px; font-weight: 700; color: var(--rr-dark); list-style: none; position: relative; }
  .rr-roam-acc > summary::-webkit-details-marker { display: none; }
  .rr-roam-acc > summary::after {
    content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--rr-teal); border-bottom: 2px solid var(--rr-teal);
    transform: rotate(45deg); transition: transform 0.15s ease;
  }
  .rr-roam-acc[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
  .rr-roam-acc[open] > summary { border-bottom: 1px solid #e2eef1; }
  .rr-roam-acc-body { padding: 6px 20px 20px; font-size: 15px; line-height: 1.65; color: var(--rr-muted); }
  .rr-roam-acc-body h4 { margin: 20px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--rr-teal-dark); }
  .rr-roam-acc-body p { margin: 0 0 10px; }
  .rr-roam-acc-body ol, .rr-roam-acc-body ul { margin: 0 0 10px; padding-left: 20px; }
  .rr-roam-acc-body li { margin-bottom: 6px; }
  .rr-roam-acc-body a { color: var(--rr-teal-dark); font-weight: 600; }
  .rr-roam-acc-body .rr-roam-warn { padding: 11px 14px; background: #fff5f5; border-left: 3px solid #d64545; color: #8f2f2f; font-weight: 600; }

  .rr-roam-tip { padding: 16px 18px; border-left: 3px solid var(--rr-teal); background: var(--rr-teal-light); border-radius: 0 var(--rr-r) var(--rr-r) 0; font-size: 14px; line-height: 1.55; color: var(--rr-muted); }
  .rr-roam-tip strong { display: block; color: var(--rr-dark); margin-bottom: 4px; }
  .rr-roam-tip span { display: block; }
  .rr-roam-note { margin-top: 7px; font-size: 13px; }

  @media (max-width: 640px) {
    .rr-roam-grid { grid-template-columns: 1fr; gap: 10px; }
    .rr-roam-tile { min-height: 0; padding: 16px; }
    .rr-roam-primary { min-height: 130px; }
  }

  /* Blog search: Pagefind's box, themed with the site tokens. */
  .rr-blog-search {
    --pagefind-ui-primary: var(--rr-teal-dark);
    --pagefind-ui-text: var(--rr-text);
    --pagefind-ui-background: var(--rr-white);
    --pagefind-ui-border: #cfe0e5;
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: var(--rr-r);
    --pagefind-ui-font: 'Roboto', system-ui, sans-serif;
    max-width: 720px; margin: 0 auto 8px;
  }

/* Photo helpers: store product images, patient story cards, photo strips, blog figures */
.rr-card-img{display:block;width:100%;height:180px;object-fit:contain;margin-bottom:14px;border-radius:var(--rr-r)}
.rr-card-dark{background:#000}
.rr-card-photo{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;margin-bottom:12px;border-radius:var(--rr-r)}
.rr-photo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:28px 0}
.rr-photo-row img{width:100%;height:100%;object-fit:cover;border-radius:var(--rr-r)}
.rr-photo-wide{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:var(--rr-r)}
.rr-figure{margin:28px 0;text-align:center}
.rr-figure img,.rr-prose img{max-width:100%;height:auto;border-radius:var(--rr-r)}
.rr-figure-row{display:flex;flex-wrap:wrap;gap:16px;margin:28px 0}
.rr-figure-row .rr-figure{flex:1 1 200px;margin:0}

/* =====================================================================
   ROCKSTARS CAROUSEL (/rockstars/)
   A scroll-snap strip with the middle tile enlarged. The pop-up is a
   native <dialog>. Behaviour lives in js/rockstars.js.
   ===================================================================== */

.rs-stage { background: var(--rr-dark); overflow: hidden; padding-bottom: 56px; }
.rs-head { text-align: center; max-width: 640px; margin: 0 auto 8px; }
.rs-head .rr-label { color: #9fe3ec; }
.rs-head h2 { color: #fff; }
.rs-head p { color: rgba(255, 255, 255, 0.85); }

.rs-carousel { position: relative; margin-top: 12px; }
.rs-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 44px calc(50% - var(--rs-w) / 2) 40px;
  --rs-w: min(340px, 74vw);
}
.rs-track::-webkit-scrollbar { display: none; }
.rs-track:focus { outline: none; }

.rs-tile {
  position: relative;
  flex: 0 0 var(--rs-w);
  aspect-ratio: 4 / 5;
  scroll-snap-align: center;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rr-r);
  background: var(--rr-teal-dark);
  color: #fff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--rr-ui);
  transform: scale(0.82);
  opacity: 0.5;
  filter: saturate(0.6);
  transition: transform 0.45s ease, opacity 0.45s ease, filter 0.45s ease, box-shadow 0.45s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.rs-tile.is-active {
  transform: scale(1.08);
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 3px var(--rr-teal), 8px 10px 0 var(--rr-teal), 0 18px 40px rgba(0, 0, 0, 0.45);
}
.rs-tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rs-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 32, 0) 38%, rgba(10, 22, 32, 0.92) 100%);
}

.rs-tile-badge {
  position: absolute;
  top: 14px;
  left: -34px;
  z-index: 2;
  width: 140px;
  padding: 4px 0;
  text-align: center;
  transform: rotate(-38deg);
  background: var(--rr-teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rs-tile-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 20px 18px; }
.rs-tile-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fe3ec;
  margin-bottom: 4px;
}
.rs-tile-tag {
  display: block;
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 3px 3px 0 var(--rr-teal-dark);
}
.rs-tile-go {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rs-tile:hover .rs-tile-go,
.rs-tile.is-active .rs-tile-go { background: #fff; color: var(--rr-dark); }

.rs-tile-join { display: block; background: linear-gradient(135deg, var(--rr-teal), var(--rr-teal-dark)); }
.rs-tile-join::after { display: none; }
.rs-tile-join .rs-tile-text { top: 0; display: flex; flex-direction: column; justify-content: center; padding: 28px; }
.rs-tile-join .rs-tile-name { color: rgba(255, 255, 255, 0.9); }

.rs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(27, 58, 68, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rs-arrow:hover { background: var(--rr-teal); }
.rs-arrow svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rs-prev { left: max(10px, calc(50% - 360px)); }
.rs-next { right: max(10px, calc(50% - 360px)); }

.rs-dots { display: flex; justify-content: center; gap: 10px; }
.rs-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.rs-dot.is-active { background: var(--rr-teal); border-color: var(--rr-teal); transform: scale(1.25); }

/* pop-up */
body.rs-lock { overflow: hidden; }
.rs-modal {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--rr-r);
  background: #fff;
  color: var(--rr-text);
  overflow-y: auto;
}
.rs-modal::backdrop { background: rgba(27, 58, 68, 0.72); }
.rs-modal-box { position: relative; }
.rs-modal-head { background: var(--rr-dark); color: #fff; padding: 28px 64px 24px 28px; border-bottom: 4px solid var(--rr-teal); }
.rs-modal-tag {
  display: block;
  font-family: var(--rr-ui);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  text-shadow: 3px 3px 0 var(--rr-teal-dark);
  margin-bottom: 10px;
  order: 2;
}
.rs-modal-title {
  margin: 0;
  font-family: var(--rr-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fe3ec;
}
.rs-modal-head { display: flex; flex-direction: column; }
.rs-modal-title { order: 1; margin-bottom: 8px; }
.rs-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.rs-modal-close:hover { background: var(--rr-teal); }
.rs-modal-body { padding: 24px 28px 32px; }
.rs-sub { font-size: 1.05rem; margin: 28px 0 12px; color: var(--rr-dark); }
.rs-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rs-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: var(--rr-r); display: block; }
.rs-videos { display: grid; gap: 14px; }
.rs-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--rr-r); overflow: hidden; }
.rs-video iframe, .rs-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 700px) {
  .rs-arrow { display: none; }
  .rs-modal-head { padding: 22px 60px 18px 20px; }
  .rs-modal-body { padding: 20px 20px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-tile { transition: none; }
}

/* =====================================================================
   Member area (/members/)
   App shell: sidebar on the left, content on a pale teal field with a
   white band behind the welcome line. Used only by members.njk.
   ===================================================================== */
.rr-app-body { background: var(--rr-teal-light); margin: 0; }
.rr-app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; font-family: var(--rr-ui); color: var(--rr-text); }
.rr-app p, .rr-app li, .rr-app dd, .rr-app td { font-family: var(--rr-ui); }
.rr-app a { color: var(--rr-teal-dark); }

/* sidebar */
.rr-app-side { background: var(--rr-white); border-right: 1px solid #d8e6ea; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.rr-app-brand { display: block; background: var(--rr-teal); padding: 14px 24px; }
.rr-app-brand img { display: block; height: 64px; width: auto; margin: 0 auto; }
.rr-app-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; }
.rr-app-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--rr-r); color: var(--rr-muted); font: 500 15px var(--rr-ui); text-decoration: none; }
.rr-app-nav a:hover { background: var(--rr-teal-light); color: var(--rr-dark); }
.rr-app-nav a.is-active { background: var(--rr-teal-dark); color: var(--rr-white); }
.rr-app-nav svg { flex: none; }
.rr-app-out { margin-top: auto; padding: 14px 24px 22px; border-top: 1px solid #e3edf0; font-size: 13px; color: var(--rr-muted); }
.rr-app-out strong { display: block; color: var(--rr-dark); font-size: 14px; }
.rr-app-out a { display: inline-block; margin-top: 6px; font-weight: 500; }

/* main field */
.rr-app-main { min-width: 0; position: relative; }
.rr-app-band { position: absolute; inset: 0 0 auto 0; height: 230px; background: var(--rr-white); border-bottom: 1px solid #d8e6ea; }
.rr-app-content { position: relative; max-width: 1040px; margin: 0 auto; padding: 36px 28px 64px; }
.rr-app-welcome { margin: 0 0 22px; }
.rr-app-welcome span { display: block; font-size: 18px; color: var(--rr-muted); }
.rr-app-welcome h1 { margin: 2px 0 0; font: 700 36px/1.15 var(--rr-ui); color: var(--rr-dark); }
.rr-app-welcome p { margin: 8px 0 0; max-width: 640px; color: var(--rr-muted); font-size: 16px; line-height: 1.55; }

/* cards */
.rr-app-card { background: var(--rr-white); border: 1px solid #d8e6ea; border-radius: var(--rr-r); box-shadow: 0 2px 10px rgba(27,58,68,.07); padding: 22px 24px; margin-bottom: 22px; }
.rr-app-card > h2, .rr-app-h2 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #e3edf0; font: 700 21px var(--rr-ui); color: var(--rr-dark); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rr-app-card > h2 a, .rr-app-h2 a { margin-left: auto; font-size: 14px; font-weight: 500; }
.rr-app-card h3 { margin: 0 0 6px; font: 700 17px var(--rr-ui); color: var(--rr-dark); }
.rr-app-card p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.rr-app-card p:last-child { margin-bottom: 0; }
.rr-app-sub { margin: 26px 0 12px; font: 700 13px var(--rr-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--rr-teal-dark); }
.rr-app-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.rr-app-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-bottom: 22px; }
.rr-app-cols > .rr-app-card { margin-bottom: 0; }
.rr-app-note { margin: 16px 0 0; font-size: 13px; color: var(--rr-muted); }
.rr-app .rr-btn { margin-top: 0; }
.rr-app-link { font-weight: 500; text-decoration: none; }
.rr-app-link:hover { text-decoration: underline; }
.rr-app-btn2 { display: inline-block; padding: 12px 22px; border: 1px solid var(--rr-teal-dark); border-radius: 0; background: var(--rr-white); color: var(--rr-teal-dark); font: 700 12px var(--rr-ui); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.rr-app-btn2:hover { background: var(--rr-teal-light); }

/* feature strip with a photo and a button */
.rr-app-feature { display: flex; align-items: center; gap: 20px; padding: 14px 20px 14px 14px; }
.rr-app-feature img { width: 92px; height: 76px; object-fit: cover; border-radius: var(--rr-r); flex: none; }
.rr-app-feature h2 { border: 0; padding: 0; margin: 0 0 4px; font: 700 20px var(--rr-ui); color: var(--rr-dark); }
.rr-app-feature p { margin: 0; color: var(--rr-teal-dark); }
.rr-app-feature > :last-child { margin-left: auto; flex: none; }

/* tier badge and locked state */
.rr-tag { display: inline-block; padding: 3px 8px; border-radius: var(--rr-r); background: var(--rr-teal-light); color: var(--rr-teal-dark); font: 700 11px var(--rr-ui); letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.rr-tag-lock { background: #eef1f3; color: var(--rr-muted); }
.rr-locked { background: repeating-linear-gradient(135deg, #fbfdfd 0 12px, #f4f8f9 12px 24px); }
.rr-locked h3, .rr-locked p { color: var(--rr-muted); }

/* progress bar */
.rr-meter { height: 10px; background: #e3edf0; border-radius: 99px; overflow: hidden; margin: 10px 0 6px; }
.rr-meter span { display: block; height: 100%; background: var(--rr-teal); border-radius: 99px; }
.rr-meter-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--rr-muted); }

/* class rows */
.rr-app-day { margin: 0 0 4px; font-size: 17px; color: var(--rr-muted); }
.rr-class { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid #e3edf0; }
.rr-class:last-of-type { border-bottom: 0; }
.rr-class time { display: block; font-weight: 500; font-size: 14px; color: var(--rr-muted); }
.rr-class h3 { margin: 4px 0 0; }
.rr-app-card .rr-class-by { margin: 0 0 10px; font-size: 14px; color: var(--rr-muted); }
.rr-class-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; font-size: 13px; }
.rr-class-meta dt { color: var(--rr-muted); }
.rr-class-meta dd { margin: 2px 0 0; font-weight: 500; color: var(--rr-dark); }
.rr-class-act { grid-row: 1; grid-column: 2; }

/* intensity bars, 1 to 3 */
.rr-int { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; vertical-align: middle; margin-right: 6px; }
.rr-int i { display: block; width: 4px; background: #c9d8dd; border-radius: 1px; }
.rr-int i:nth-child(1) { height: 6px; }
.rr-int i:nth-child(2) { height: 10px; }
.rr-int i:nth-child(3) { height: 14px; }
.rr-int[data-level="1"] i:nth-child(-n+1), .rr-int[data-level="2"] i:nth-child(-n+2), .rr-int[data-level="3"] i { background: var(--rr-teal-dark); }

/* class structure strip */
.rr-format { display: grid; grid-template-columns: 1fr 3fr 1.6fr 1fr; gap: 4px; margin: 6px 0 4px; }
.rr-format div { padding: 10px 12px; background: var(--rr-teal-light); border-top: 4px solid var(--rr-teal); font-size: 13px; color: var(--rr-muted); }
.rr-format div:nth-child(2) { border-top-color: var(--rr-teal-dark); }
.rr-format div:nth-child(3) { border-top-color: var(--rr-dark); }
.rr-format strong { display: block; font-size: 14px; color: var(--rr-dark); }

/* video cards */
.rr-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.rr-vid { display: flex; flex-direction: column; background: var(--rr-white); border: 1px solid #d8e6ea; border-radius: var(--rr-r); overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 10px rgba(27,58,68,.06); }
.rr-app a.rr-vid { color: inherit; }
.rr-vid:hover { border-color: var(--rr-teal); }
.rr-vid-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rr-dark); }
.rr-vid-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; }
.rr-vid-thumb b { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; background: rgba(27,58,68,.85); color: #fff; font: 500 12px var(--rr-ui); border-radius: var(--rr-r); }
.rr-vid-thumb svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; }
.rr-vid-body { padding: 12px 14px 14px; }
.rr-vid-body h3 { margin: 0 0 6px; font: 700 15px/1.3 var(--rr-ui); color: var(--rr-dark); }
.rr-vid-body p { margin: 0; font-size: 13px; color: var(--rr-muted); }
.rr-vid[hidden] { display: none; }
.rr-app-rec .rr-vid { margin-bottom: 12px; }

/* filter chips */
.rr-mfilters { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 18px; }
.rr-mfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rr-mfilter > span { font-size: 13px; color: var(--rr-muted); margin-right: 2px; }
.rr-mchip { padding: 7px 12px; border: 1px solid #c9d8dd; border-radius: 99px; background: var(--rr-white); color: var(--rr-dark); font: 500 13px var(--rr-ui); cursor: pointer; }
.rr-mchip:hover { border-color: var(--rr-teal); }
.rr-mchip[aria-pressed="true"] { background: var(--rr-teal-dark); border-color: var(--rr-teal-dark); color: #fff; }
.rr-vids-empty { display: none; padding: 20px 0; color: var(--rr-muted); }
.rr-vids-empty.show { display: block; }

/* simple lists inside cards */
.rr-app-list { list-style: none; margin: 0; padding: 0; }
.rr-app-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef3f5; font-size: 15px; }
.rr-app-list li:last-child { border-bottom: 0; }
.rr-app-list li > :last-child:not(:first-child) { margin-left: auto; }
.rr-app-list svg { color: var(--rr-teal); flex: none; }
.rr-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.rr-check input { width: 18px; height: 18px; accent-color: var(--rr-teal-dark); }

/* agenda (My Schedule) */
.rr-agenda { display: grid; grid-template-columns: 100px 1fr; gap: 0 18px; margin: 0; }
.rr-agenda dt { padding: 14px 0; border-bottom: 1px solid #eef3f5; font-weight: 700; color: var(--rr-dark); font-size: 14px; }
.rr-agenda dt span { display: block; font-weight: 400; color: var(--rr-muted); }
.rr-agenda dd { margin: 0; padding: 14px 0; border-bottom: 1px solid #eef3f5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.rr-agenda dd strong { color: var(--rr-dark); }
.rr-agenda dd .rr-app-link { margin-left: auto; font-size: 14px; }

/* stat tiles (progress) */
.rr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rr-tile { padding: 14px 16px; border: 1px solid #d8e6ea; border-radius: var(--rr-r); background: var(--rr-off-white); }
.rr-tile span { display: block; font-size: 13px; color: var(--rr-muted); }
.rr-tile strong { display: block; margin-top: 4px; font-size: 24px; color: var(--rr-dark); }
.rr-tile em { font-style: normal; font-size: 12px; color: var(--rr-muted); }

/* forms */
.rr-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; align-items: end; }
.rr-form label, .rr-field { display: grid; gap: 5px; font-size: 13px; color: var(--rr-muted); }
.rr-form input, .rr-form select, .rr-field input, .rr-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #c9d8dd; border-radius: var(--rr-r); font: 400 15px var(--rr-ui); color: var(--rr-text); background: #fff; }
.rr-form input:focus, .rr-form select:focus, .rr-field input:focus, .rr-field textarea:focus { outline: 2px solid var(--rr-teal); outline-offset: 1px; border-color: var(--rr-teal); }
.rr-form .rr-btn { padding: 13px 20px !important; }
.rr-table-wrap { overflow-x: auto; }
.rr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rr-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid #d8e6ea; color: var(--rr-muted); font-weight: 500; }
.rr-table td { padding: 10px; border-bottom: 1px solid #eef3f5; }
.rr-rpe { display: grid; grid-template-columns: 70px 1fr; gap: 10px 14px; margin: 0; font-size: 14px; }
.rr-rpe dt { font-weight: 700; color: var(--rr-teal-dark); }
.rr-rpe dd { margin: 0; color: var(--rr-muted); }

/* plan comparison (My Plan) */
.rr-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.rr-plan { display: flex; flex-direction: column; border: 1px solid #d8e6ea; border-top: 4px solid #c9d8dd; border-radius: var(--rr-r); padding: 20px; background: #fff; }
.rr-plan.is-current { border-top-color: var(--rr-teal); box-shadow: 0 4px 16px rgba(0,162,180,.14); }
.rr-plan h3 { margin: 0; }
.rr-app-card .rr-plan-price { margin: 6px 0 12px; font-size: 28px; font-weight: 700; color: var(--rr-dark); }
.rr-plan-price small { font-size: 14px; font-weight: 400; color: var(--rr-muted); }
.rr-plan ul { margin: 0 0 18px; padding-left: 18px; font-size: 14px; line-height: 1.6; flex: 1; }

/* steps (Start Here) */
.rr-msteps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 16px; }
.rr-msteps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.rr-msteps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--rr-teal); color: #fff; font-weight: 700; }
.rr-msteps h3 { margin: 8px 0 4px; }
.rr-video-ph { display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(rgba(27,58,68,.55), rgba(27,58,68,.7)), url("/images/therapist-with-client-dumbbell.jpg") center / cover; color: #fff; border-radius: var(--rr-r); text-align: center; font-size: 15px; }
.rr-video-ph svg { display: block; margin: 0 auto 8px; }

/* sign-in page */
.rr-login { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: linear-gradient(rgba(27,58,68,.72), rgba(27,58,68,.8)), url("/images/hero-summit-colorado.jpg") center / cover; font-family: var(--rr-ui); }
.rr-login-card { width: 100%; max-width: 420px; background: #fff; border-radius: var(--rr-r); box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow: hidden; }
.rr-login-top { background: var(--rr-teal); padding: 18px; text-align: center; }
.rr-login-top img { height: 70px; width: auto; }
.rr-login-body { padding: 28px 30px 30px; }
.rr-login-body h1 { margin: 0 0 6px; font: 700 26px var(--rr-ui); color: var(--rr-dark); }
.rr-login-body p { margin: 0 0 18px; font: 400 15px/1.55 var(--rr-ui); color: var(--rr-muted); }
.rr-login-body a { color: var(--rr-teal-dark); }
.rr-login-body form { display: grid; gap: 14px; }
.rr-login-body .rr-btn { width: 100%; text-align: center; padding: 15px !important; }
.rr-login-sent { display: none; }
.rr-login.is-sent .rr-login-form { display: none; }
.rr-login.is-sent .rr-login-sent { display: block; }
.rr-login-body .rr-login-foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #e3edf0; font-size: 14px; }

@media (max-width: 900px) {
  .rr-app { grid-template-columns: minmax(0, 1fr); }
  .rr-app-side { z-index: 5; height: auto; flex-direction: row; align-items: center; overflow: visible; border-right: 0; border-bottom: 1px solid #d8e6ea; }
  .rr-app-brand { padding: 8px 12px; flex: none; }
  .rr-app-brand img { height: 40px; }
  .rr-app-nav { flex-direction: row; overflow-x: auto; padding: 6px 8px; flex: 1; min-width: 0; scrollbar-width: thin; }
  .rr-app-nav a { white-space: nowrap; padding: 9px 11px; font-size: 14px; }
  .rr-app-out { display: none; }
  .rr-app-grid { grid-template-columns: 1fr; }
  .rr-app-content { padding: 24px 16px 48px; }
  .rr-app-welcome h1 { font-size: 30px; }
  .rr-app-band { height: 190px; }
}
@media (max-width: 560px) {
  .rr-app-feature { flex-wrap: wrap; }
  .rr-app-feature > :last-child { margin-left: 0; }
  .rr-format { grid-template-columns: 1fr 1fr; }
  .rr-agenda { grid-template-columns: 1fr; }
  .rr-agenda dt { border-bottom: 0; padding-bottom: 0; }
  .rr-class { grid-template-columns: 1fr; }
  .rr-class-act { grid-row: auto; grid-column: 1; }
}
.rr-app-card .rr-field-act { margin-top: 12px; }
.rr-app-list-left li > :last-child:not(:first-child) { margin-left: 0; }