/* ==========================================================================
   Right Way Medical Billing
   Custom theme layered over Bootstrap 5.3. Mobile-first.

   Contents
     1.  Design tokens
     2.  Base and typography
     3.  Layout utilities
     4.  Buttons
     5.  Header, navigation, mega menu
     6.  Mobile navigation
     7.  Heroes and page headers
     8.  Shared section furniture
     9.  Cards, lists, checklists
     10. Stats, meters, process, steps
     11. Accordion
     12. Testimonials
     13. Forms
     14. Footer
     15. Modal and floating actions
     16. Page-specific blocks
     17. Motion preferences
   ========================================================================== */

/* ------------------------------------------------------------ 1. Tokens -- */
:root {
  /* ---------------------------------------------------------------------
     Palette hierarchy (client-directed):
       Navy      — trust, professionalism        -> primary
       Teal      — healthcare, growth, modern    -> secondary / CTA
       Light blue— cleanliness, calm, technology -> backgrounds / accents
       White     — clarity                       -> main background
       Gold      — premium highlight             -> ACCENT ONLY, sparingly

     Every pairing below is contrast-checked. The two hard rules that fall
     out of that, and which the rest of this file obeys:
       * gold-500 on white is 2.1:1 — never use gold for text on a light
         background; gold-700 (5.3:1) exists for that.
       * teal-500 on white is 3.1:1 — decorative only. Actionable teal text
         and teal button fills use teal-700 (5.5:1 with white).
     --------------------------------------------------------------------- */
  --rw-navy-950:  #071B2E;   /* deepest — footer                            */
  --rw-navy-900:  #0E2E4F;   /* primary navy — headings, header, dark bands */
  --rw-navy-800:  #143A61;
  --rw-navy-700:  #1B4C7E;
  --rw-navy-500:  #2C6BA8;

  --rw-teal-800:  #0A5F5E;   /* CTA pressed/hover                            */
  --rw-teal-700:  #0D7573;   /* CTA fill + teal text on light (AA with white)*/
  --rw-teal-600:  #10908D;   /* large text / decorative only                 */
  --rw-teal-500:  #17A2A0;   /* decorative — icons, shapes, accents          */
  --rw-teal-300:  #7ED4D2;   /* eyebrow + accents on navy                    */
  --rw-teal-100:  #E2F5F4;   /* soft icon wells                              */

  --rw-sky-200:   #D7E9F7;   /* light-blue accent                            */
  --rw-sky-100:   #EAF4FB;   /* light-blue background                        */
  --rw-sky-50:    #F6FAFD;   /* alternating section background               */

  --rw-gold-700:  #8A6608;   /* only gold that passes AA as text on white    */
  --rw-gold-600:  #B8860B;
  --rw-gold-500:  #D4AF37;   /* premium accent — rules, stars, on navy only  */
  --rw-gold-300:  #F0DFA8;
  --rw-gold-100:  #FBF5E4;

  --rw-white:     #FFFFFF;
  --rw-charcoal:  #16222E;
  --rw-gray-600:  #56677A;
  --rw-gray-300:  #C4D2DF;
  --rw-gray-100:  #E8EFF5;

  --rw-font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --rw-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --rw-radius:    14px;
  --rw-radius-lg: 22px;
  --rw-radius-sm: 9px;

  /* The logo is a stacked lock-up at roughly 1.55:1, so in a horizontal bar it
     is HEIGHT that has to be controlled — sizing it by width makes it taller
     than the header and it ends up touching both edges. Everything below is
     derived from these two values so the header can never be shorter than the
     logo plus its breathing room. */
  --rw-logo-h:    58px;
  --rw-logo-gap:  20px;   /* clear space above and below the lock-up */

  --rw-shadow-sm: 0 1px 2px rgba(7, 27, 46, .06), 0 2px 8px rgba(7, 27, 46, .05);
  --rw-shadow:    0 4px 12px rgba(7, 27, 46, .07), 0 12px 32px rgba(7, 27, 46, .07);
  --rw-shadow-lg: 0 10px 24px rgba(7, 27, 46, .10), 0 28px 64px rgba(7, 27, 46, .12);

  --rw-ease:      cubic-bezier(.22, .61, .36, 1);
  --rw-header-h:  calc(var(--rw-logo-h) + 2 * var(--rw-logo-gap));

  --rw-pad-y:     clamp(3.5rem, 7vw, 7rem);
}

/* --------------------------------------------------- 2. Base + typography */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--rw-header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--rw-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--rw-charcoal);
  background: var(--rw-white);
  overflow-x: hidden;
}

@media (min-width: 992px) {
  body { font-size: 1.05rem; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rw-font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--rw-navy-900);
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--rw-navy-700);
  text-decoration-color: rgba(13, 117, 115, .35);
  text-underline-offset: 3px;
  transition: color .2s var(--rw-ease), text-decoration-color .2s var(--rw-ease);
}
a:hover { color: var(--rw-teal-700); text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; }
.rw-img { display: block; width: 100%; height: auto; }

ul, ol { margin: 0; padding: 0; }

strong { font-weight: 600; color: var(--rw-navy-900); }

/* Visible focus everywhere — never removed, only restyled. */
:focus-visible {
  outline: 3px solid var(--rw-teal-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.rw-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 2000;
  padding: .75rem 1.25rem;
  background: var(--rw-navy-900);
  color: var(--rw-white);
  border-radius: 0 0 var(--rw-radius-sm) var(--rw-radius-sm);
  font-weight: 600;
  transition: top .2s var(--rw-ease);
}
.rw-skip:focus { top: 0; color: var(--rw-white); }

::selection { background: var(--rw-gold-300); color: var(--rw-navy-950); }

/* -------------------------------------------------- 3. Layout utilities -- */
/* Bootstrap gives .container 12px of side padding, but a .g-5 row applies -24px
   side margins. That mismatch pushes wide-gutter rows 12px past the viewport on
   every page. Matching the padding to the largest gutter we use fixes it at the
   source rather than hiding it with overflow-x. */
.container {
  max-width: 1240px;
  padding-inline: 1.5rem;
}
@media (min-width: 768px) {
  .container { padding-inline: 2rem; }
}

.section-pad { padding-block: var(--rw-pad-y); }

.bg-sky { background: var(--rw-sky-50); }

.bg-navy {
  background: var(--rw-navy-900);
  color: rgba(255, 255, 255, .84);
  position: relative;
  isolation: isolate;
}
.bg-navy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 88% 8%, rgba(23, 162, 160, .13), transparent 60%),
    radial-gradient(50% 70% at 5% 95%, rgba(23, 162, 160, .28), transparent 62%);
  pointer-events: none;
}
.bg-navy h2, .bg-navy h3 { color: var(--rw-white); }

.rw-eyebrow {
  font-family: var(--rw-font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rw-navy-700);
  margin: 0 0 .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.rw-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--rw-gold-500);
  flex: none;
}
.rw-eyebrow--light { color: var(--rw-teal-700); }
.bg-navy .rw-eyebrow, .rw-eyebrow--light { color: var(--rw-teal-300); }

.rw-section-head {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}
.rw-section-head .rw-eyebrow { justify-content: center; }
.rw-section-head--left {
  margin-inline: 0;
  text-align: left;
}
.rw-section-head--left .rw-eyebrow { justify-content: flex-start; }

.rw-section-head__title { margin-bottom: .65rem; }
.rw-section-head__title--invert { color: var(--rw-white); }
.rw-section-head--invert .rw-section-head__title { color: var(--rw-white); }
.rw-section-head--invert .rw-section-head__lead { color: rgba(255, 255, 255, .8); }

.rw-section-head__lead {
  font-size: 1.05rem;
  color: var(--rw-gray-600);
  margin: 0;
}

/* ----------------------------------------------------------- 4. Buttons -- */
.btn {
  --bs-btn-border-radius: var(--rw-radius-sm);
  font-family: var(--rw-font-head);
  font-weight: 700;
  letter-spacing: .01em;
  padding: .72rem 1.5rem;
  border-radius: var(--rw-radius-sm);
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  transition: background-color .22s var(--rw-ease), color .22s var(--rw-ease),
              border-color .22s var(--rw-ease), transform .22s var(--rw-ease),
              box-shadow .22s var(--rw-ease);
}
.btn-lg { padding: .9rem 1.9rem; font-size: 1.02rem; }

/* Primary action. Teal is the client's designated CTA colour; teal-700 is the
   lightest teal that still clears AA against white text (5.5:1), so the fill
   uses that rather than the brighter teal-500 (3.1:1, decorative only). */
.btn-rw-teal {
  background: var(--rw-teal-700);
  border-color: var(--rw-teal-700);
  color: var(--rw-white);
  box-shadow: 0 4px 14px rgba(13, 117, 115, .3);
}
.btn-rw-teal:hover,
.btn-rw-teal:focus-visible {
  background: var(--rw-teal-800);
  border-color: var(--rw-teal-800);
  color: var(--rw-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 95, 94, .38);
}

/* Secondary action — navy, for pairings where teal would compete with a
   nearby primary button. */
.btn-rw-navy {
  background: var(--rw-navy-900);
  border-color: var(--rw-navy-900);
  color: var(--rw-white);
}
.btn-rw-navy:hover,
.btn-rw-navy:focus-visible {
  background: var(--rw-teal-700);
  border-color: var(--rw-teal-700);
  color: var(--rw-white);
  transform: translateY(-2px);
}

.btn-rw-outline {
  background: transparent;
  border-color: var(--rw-gray-300);
  color: var(--rw-navy-900);
}
.btn-rw-outline:hover,
.btn-rw-outline:focus-visible {
  border-color: var(--rw-navy-900);
  background: var(--rw-navy-900);
  color: var(--rw-white);
  transform: translateY(-2px);
}

.btn-rw-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
  color: var(--rw-white);
}
.btn-rw-ghost:hover,
.btn-rw-ghost:focus-visible {
  background: var(--rw-white);
  border-color: var(--rw-white);
  color: var(--rw-navy-900);
  transform: translateY(-2px);
}

/* ------------------------------------- 5. Header, navigation, mega menu -- */
.rw-topbar {
  background: var(--rw-navy-950);
  color: rgba(255, 255, 255, .78);
  font-size: .86rem;
  padding: .5rem 0;
}
.rw-topbar__list,
.rw-topbar__social {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
}
.rw-topbar__list li { display: flex; align-items: center; gap: .45rem; }
.rw-topbar i { color: var(--rw-teal-500); font-size: .85rem; }
.rw-topbar a { color: inherit; text-decoration: none; }
.rw-topbar a:hover { color: var(--rw-teal-300); }
.rw-topbar__social { gap: .35rem; }
.rw-topbar__social a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background-color .2s var(--rw-ease);
}
.rw-topbar__social a:hover { background: rgba(23, 162, 160, .18); }
.rw-topbar__social i { color: rgba(255, 255, 255, .8); }
.rw-topbar__social a:hover i { color: var(--rw-teal-500); }

@media (max-width: 1199px) { .rw-topbar__hours { display: none; } }

.rw-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rw-gray-100);
  transition: box-shadow .25s var(--rw-ease), background-color .25s var(--rw-ease);
}
.rw-header.is-stuck {
  box-shadow: 0 4px 24px rgba(7, 27, 46, .1);
  background: rgba(255, 255, 255, .99);
}

.rw-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  /* Real padding rather than min-height alone, so the clear space around the
     lock-up survives even if something in the row grows taller than expected. */
  padding-block: var(--rw-logo-gap);
  min-height: var(--rw-header-h);
  transition: padding-block .25s var(--rw-ease), min-height .25s var(--rw-ease);
}

.rw-logo {
  display: flex;
  align-items: center;
  flex: none;
}
.rw-logo img {
  /* Height-driven: the lock-up is taller than it is wide per unit, so height is
     what determines whether it fits the bar. Width follows from the intrinsic
     ratio on the element, which also keeps the reserved space stable (no CLS). */
  height: var(--rw-logo-h);
  width: auto;
  transition: height .25s var(--rw-ease);
}

/* Scrolled state: shrink the logo, and let the derived header height follow. */
.rw-header.is-stuck { --rw-logo-h: 48px; --rw-logo-gap: 13px; }

@media (max-width: 991px)  { .rw-header { --rw-logo-h: 52px; --rw-logo-gap: 18px; } }
@media (max-width: 575px)  { .rw-header { --rw-logo-h: 46px; --rw-logo-gap: 15px; } }

.rw-nav__list {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
}
.rw-nav__item { position: static; }

.rw-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .85rem;
  font-family: var(--rw-font-head);
  font-weight: 600;
  font-size: .96rem;
  color: var(--rw-navy-900);
  text-decoration: none;
  border-radius: var(--rw-radius-sm);
  position: relative;
  transition: color .2s var(--rw-ease), background-color .2s var(--rw-ease);
}
.rw-nav__link::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .32rem;
  height: 2px;
  background: var(--rw-teal-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--rw-ease);
}
.rw-nav__link:hover,
.rw-nav__link.is-current { color: var(--rw-teal-700); }
.rw-nav__link:hover::after,
.rw-nav__link.is-current::after { transform: scaleX(1); }
.rw-nav__link i { font-size: .7rem; transition: transform .25s var(--rw-ease); }
.rw-nav__item.is-open .rw-nav__link i { transform: rotate(180deg); }

/* Mega menu: a full-width panel rather than the long single column the
   reference site used, so sixteen specialties stay scannable. */
.rw-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* Match .container padding so the panel lines up with page content. */
  padding: 0 2rem 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .24s var(--rw-ease), transform .24s var(--rw-ease), visibility .24s;
}
.rw-nav__item.is-open .rw-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rw-mega__inner {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius-lg);
  box-shadow: var(--rw-shadow-lg);
  padding: 1.5rem;
}
.rw-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
}
.rw-mega__grid--4 { grid-template-columns: repeat(4, 1fr); }

.rw-mega__card {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .8rem;
  border-radius: var(--rw-radius);
  text-decoration: none;
  color: inherit;
  transition: background-color .2s var(--rw-ease), transform .2s var(--rw-ease);
}
.rw-mega__card:hover {
  background: var(--rw-sky-50);
  transform: translateY(-2px);
  color: inherit;
}
.rw-mega__card--slim { align-items: center; padding: .65rem .7rem; }

.rw-mega__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--rw-teal-100);
  color: var(--rw-teal-700);
  font-size: 1.05rem;
  transition: background-color .2s var(--rw-ease), color .2s var(--rw-ease);
}
.rw-mega__icon--sm { width: 34px; height: 34px; font-size: .92rem; }
.rw-mega__card:hover .rw-mega__icon {
  background: var(--rw-navy-900);
  color: var(--rw-teal-500);
}
.rw-mega__text { display: block; }
.rw-mega__title {
  display: block;
  font-family: var(--rw-font-head);
  font-weight: 700;
  font-size: .92rem;
  color: var(--rw-navy-900);
  line-height: 1.3;
}
.rw-mega__desc {
  display: block;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--rw-gray-600);
  margin-top: .2rem;
}
.rw-mega__foot {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--rw-gray-100);
  text-align: center;
}
.rw-mega__foot a {
  font-family: var(--rw-font-head);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  color: var(--rw-navy-700);
}
.rw-mega__foot a:hover { color: var(--rw-teal-700); }

.rw-header__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: none;
}
.rw-header__phone {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--rw-navy-900);
}
.rw-header__phone-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rw-teal-100);
  color: var(--rw-teal-700);
  transition: background-color .2s var(--rw-ease), color .2s var(--rw-ease);
}
.rw-header__phone:hover .rw-header__phone-icon {
  background: var(--rw-navy-900);
  color: var(--rw-teal-500);
}
.rw-header__phone-text { display: flex; flex-direction: column; line-height: 1.25; }
.rw-header__phone-label { font-size: .72rem; color: var(--rw-gray-600); }
.rw-header__phone-number { font-family: var(--rw-font-head); font-weight: 700; font-size: .95rem; }

@media (max-width: 1399px) { .rw-header__phone-text { display: none; } }

.rw-burger {
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid var(--rw-gray-300);
  border-radius: var(--rw-radius-sm);
  background: var(--rw-white);
  cursor: pointer;
}
.rw-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--rw-navy-900);
  border-radius: 2px;
  transition: transform .25s var(--rw-ease), opacity .2s var(--rw-ease);
}
.rw-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rw-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------- 6. Mobile navigation -- */
.rw-mobile { position: fixed; inset: 0; z-index: 1080; }
.rw-mobile[hidden] { display: none; }

.rw-mobile__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(7, 27, 46, .55);
  opacity: 0;
  transition: opacity .3s var(--rw-ease);
}
.rw-mobile.is-open .rw-mobile__scrim { opacity: 1; }

.rw-mobile__panel {
  /* z-index above the scrim is required, not decorative: this element comes
     BEFORE .rw-mobile__scrim in the markup (the close-on-outside-click scrim
     needs to sit behind it), and with no stacking order specified, later
     siblings paint on top by default — the scrim would then intercept every
     click meant for the menu, making the whole drawer look unresponsive. */
  position: absolute;
  z-index: 2;
  inset-block: 0;
  right: 0;
  width: min(390px, 90vw);
  background: var(--rw-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .34s var(--rw-ease);
  box-shadow: -12px 0 40px rgba(7, 27, 46, .2);
}
.rw-mobile.is-open .rw-mobile__panel { transform: translateX(0); }

.rw-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rw-gray-100);
  flex: none;
}
.rw-mobile__logo img { height: 54px; width: auto; }
.rw-mobile__close {
  width: 42px;
  height: 42px;
  border: 1px solid var(--rw-gray-300);
  border-radius: var(--rw-radius-sm);
  background: var(--rw-white);
  color: var(--rw-navy-900);
  cursor: pointer;
}
.rw-mobile__close:hover { background: var(--rw-navy-900); color: var(--rw-white); }

.rw-mobile__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem 0 1rem;
}
.rw-mobile__nav ul { list-style: none; }
.rw-mobile__nav > ul > li > a,
.rw-mobile__row > a {
  display: block;
  padding: .9rem 1.25rem;
  font-family: var(--rw-font-head);
  font-weight: 700;
  color: var(--rw-navy-900);
  text-decoration: none;
  font-size: 1.02rem;
}
.rw-mobile__nav > ul > li + li { border-top: 1px solid var(--rw-gray-100); }
.rw-mobile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rw-mobile__row > a { flex: 1; }
.rw-mobile__toggle {
  width: 46px;
  height: 46px;
  margin-right: .5rem;
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius-sm);
  background: var(--rw-sky-50);
  color: var(--rw-navy-900);
  cursor: pointer;
  flex: none;
}
.rw-mobile__toggle i { transition: transform .25s var(--rw-ease); display: inline-block; }
.rw-mobile__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.rw-mobile__toggle[aria-expanded="true"] {
  background: var(--rw-navy-900);
  color: var(--rw-teal-500);
  border-color: var(--rw-navy-900);
}

/* The 0fr/1fr animated-collapse trick only constrains ONE grid row. With the
   <ul> itself as the grid container and eight <li> as direct children, only
   the first <li> landed in that explicit row — items 2 onward got their own
   auto-sized implicit rows and stayed visible at full height no matter what,
   which is why the submenu looked "always open" past the first entry and
   toggling only ever revealed that one missing item. Animating a wrapper
   around the whole list (one grid item, one row) fixes it: the entire list
   collapses and expands together. */
.rw-mobile__subwrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--rw-ease);
}
.rw-mobile__group.is-open .rw-mobile__subwrap { grid-template-rows: 1fr; }
.rw-mobile__sub {
  overflow: hidden;
  min-height: 0;         /* grid items default to min-height:auto, which would
                             otherwise refuse to shrink below content height */
  background: var(--rw-sky-50);
}
.rw-mobile__sub li a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .68rem 1.25rem .68rem 1.6rem;
  font-size: .92rem;
  color: var(--rw-charcoal);
  text-decoration: none;
}
.rw-mobile__sub li a i { color: var(--rw-teal-700); font-size: .95rem; width: 1.2em; }
.rw-mobile__sub li a:hover { background: var(--rw-white); color: var(--rw-navy-900); }

.rw-mobile__foot {
  flex: none;
  padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rw-gray-100);
  display: grid;
  gap: .7rem;
  justify-items: center;
}
.rw-mobile__call {
  font-family: var(--rw-font-head);
  font-weight: 700;
  color: var(--rw-navy-900);
  text-decoration: none;
}

body.rw-locked { overflow: hidden; }

/* ---------------------------------------- 7. Heroes and page headers ----- */
/* Light hero: white base washed with light blue, navy type, teal accents. The
   portrait sits on a teal-to-navy blob so it reads as part of the artwork
   rather than a rectangle dropped onto the page. */
.rw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--rw-white);
  color: var(--rw-charcoal);
  padding-block: clamp(2.75rem, 6vw, 5.5rem);
}
/* Radial washes rather than a linear one: a linear gradient across the whole
   band leaves a visible diagonal seam where it terminates. */
.rw-hero__wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 100% at 92% 8%, var(--rw-sky-200) 0%, rgba(215, 233, 247, 0) 62%),
    radial-gradient(90% 120% at 78% 100%, rgba(226, 245, 244, .9) 0%, rgba(226, 245, 244, 0) 60%),
    linear-gradient(180deg, var(--rw-sky-50) 0%, var(--rw-white) 100%);
}

/* Drifting medical glyphs — decorative, hidden from assistive tech. Kept in
   the gutter between the copy and the portrait so they never sit over text. */
.rw-hero__glyph {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--rw-teal-600);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(23, 162, 160, .2);
  box-shadow: 0 10px 28px rgba(14, 46, 79, .08);
  animation: rw-drift 7s ease-in-out infinite;
}
.rw-hero__glyph--a { width: 66px; height: 66px; font-size: 1.5rem;  left: 52%; top: 8%; }
.rw-hero__glyph--b { width: 54px; height: 54px; font-size: 1.2rem;  left: 47%; bottom: 5%; animation-delay: -2.5s; }
.rw-hero__glyph--c { width: 48px; height: 48px; font-size: 1.05rem; right: 3%; top: 14%; animation-delay: -4.5s; }
/* Below xl the two columns stack, so the "gutter" no longer exists. */
@media (max-width: 1399px) { .rw-hero__glyph { display: none; } }

.rw-hero__title {
  color: var(--rw-navy-900);
  margin-bottom: 1rem;
}
.rw-hero__title em {
  font-style: normal;
  color: var(--rw-teal-700);
  white-space: nowrap;
}
.rw-hero__lead {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  color: var(--rw-gray-600);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}
.rw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 2rem;
}
.rw-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  list-style: none;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rw-gray-300);
}
.rw-hero__badges li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  color: var(--rw-navy-900);
  font-weight: 500;
}
.rw-hero__badges i { color: var(--rw-teal-700); font-size: 1.1rem; }

.rw-hero__media {
  position: relative;
  max-width: 460px;
  margin-inline: auto;
}
/* The media column is a stage (blurred, tinted clinic interior in an arch) with
   the cut-out figure standing in front of it, head breaking above the arch —
   which is what stops it reading as a photo pasted into a box. */
.rw-hero__media {
  /* Room above the arch for the head to overhang into. */
  padding-top: clamp(38px, 7vw, 78px);
}
.rw-hero__stage {
  position: relative;
  z-index: 0;
  aspect-ratio: 1 / 1;
  border-radius: 46% 46% 18% 18% / 30% 30% 7% 7%;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(14, 46, 79, .18);
  /* Contains the tint's multiply blend so it cannot pick up the page behind. */
  isolation: isolate;
}
.rw-hero__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Nudged up so the blurred counter line sits behind the figure, not at her feet. */
  object-position: center 38%;
}
/* Multiply rather than a plain alpha wash. The source is a bright, low-contrast
   white room; laying a translucent dark gradient over it just averages to muddy
   grey. Multiplying keeps the room's own luminance structure while pushing the
   hue firmly into brand colour, so the clinic stays readable behind it — the
   "gradient half visible" the brief asked for.
   Browsers without blend support fall back to a solid brand gradient panel,
   which is a graceful outcome rather than a broken one. */
.rw-hero__stage-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(158deg,
      var(--rw-navy-900) 0%,
      var(--rw-teal-700) 48%,
      var(--rw-navy-950) 100%);
  mix-blend-mode: multiply;
}
/* Thin outlined echo, offset the other way, so the composition is not
   symmetrical and does not look bottom-heavy. */
.rw-hero__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 34% 34% -5% -11%;
  border-radius: 50%;
  border: 2px solid rgba(23, 162, 160, .3);
}
.rw-hero__cutout {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 84%;
  height: auto;
  max-width: none;
  /* Grounds the figure on the arch instead of leaving her floating on it. */
  filter: drop-shadow(0 18px 26px rgba(7, 27, 46, .28));
}

/* These sit above the fold, so they are visible from the first paint rather
   than waiting on a scroll-reveal that would never be triggered. */
.rw-hero__float {
  position: absolute;
  z-index: 2;
  background: var(--rw-white);
  border-radius: var(--rw-radius);
  box-shadow: var(--rw-shadow-lg);
  padding: .9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  animation: rw-drift 6s ease-in-out infinite;
}
.rw-hero__float--a { left: -12%; bottom: 20%; }
.rw-hero__float--b { right: -8%; top: 14%; animation-delay: -3s; }

@keyframes rw-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (max-width: 575px) {
  .rw-hero__float--a { left: -2%; bottom: 8%; }
  .rw-hero__float--b { right: -2%; top: 6%; }
  .rw-hero__float { padding: .6rem .8rem; }
}
.rw-hero__float-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--rw-teal-100);
  color: var(--rw-teal-700);
  font-size: 1.15rem;
}
.rw-hero__float-value {
  display: block;
  font-family: var(--rw-font-head);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--rw-navy-900);
  line-height: 1.1;
}
.rw-hero__float-label {
  display: block;
  font-size: .74rem;
  color: var(--rw-gray-600);
  line-height: 1.35;
  max-width: 12ch;
}

/* Inner page header */
.rw-pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--rw-navy-900);
  color: rgba(255, 255, 255, .84);
  padding-block: clamp(2.25rem, 5vw, 4rem);
}
.rw-pagehead__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .18;
}
.rw-pagehead__bg img { width: 100%; height: 100%; object-fit: cover; }
.rw-pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, var(--rw-navy-900) 30%, rgba(14, 46, 79, .82) 70%),
    radial-gradient(60% 90% at 88% 10%, rgba(23, 162, 160, .16), transparent 60%);
}
.rw-pagehead__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}
.rw-pagehead__blob--a {
  width: 260px; height: 260px;
  background: rgba(23, 162, 160, .22);
  top: -90px; right: 8%;
}
.rw-pagehead__blob--b {
  width: 220px; height: 220px;
  background: rgba(23, 162, 160, .35);
  bottom: -110px; left: 4%;
}
.rw-pagehead__body { max-width: 780px; }
.rw-pagehead__title { color: var(--rw-white); margin-bottom: .7rem; }
.rw-pagehead__lead {
  color: rgba(255, 255, 255, .82);
  font-size: 1.05rem;
  max-width: 62ch;
  margin: 0;
}

.rw-crumbs { margin-bottom: 1.4rem; }
.rw-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  list-style: none;
  font-size: .85rem;
}
.rw-crumbs li { display: flex; align-items: center; gap: .45rem; }
.rw-crumbs a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.rw-crumbs a:hover { color: var(--rw-teal-300); }
.rw-crumbs i { font-size: .62rem; color: rgba(255, 255, 255, .4); }
.rw-crumbs [aria-current] { color: var(--rw-teal-300); font-weight: 600; }

/* ---------------------------------------- 8. Trust strip and lead block -- */
.rw-trust {
  background: var(--rw-white);
  border-bottom: 1px solid var(--rw-gray-100);
  padding-block: 1.75rem;
}
.rw-trust__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem 2rem;
  list-style: none;
}
.rw-trust__item { display: flex; align-items: center; gap: .85rem; }
.rw-trust__icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--rw-tone-bg, var(--rw-teal-100));
  color: var(--rw-tone-fg, var(--rw-teal-700));
  font-size: 1.25rem;
}
.rw-trust__title {
  display: block;
  font-family: var(--rw-font-head);
  font-weight: 700;
  color: var(--rw-navy-900);
  line-height: 1.3;
  font-size: .98rem;
}
.rw-trust__text { display: block; font-size: .84rem; color: var(--rw-gray-600); line-height: 1.45; }

.rw-lead__media { position: relative; }
.rw-lead__media > img,
.rw-lead__media .rw-img {
  border-radius: var(--rw-radius-lg);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  box-shadow: var(--rw-shadow);
}
.rw-lead__chip {
  position: absolute;
  right: -10px;
  bottom: -20px;
  max-width: 240px;
  background: var(--rw-navy-900);
  color: var(--rw-white);
  border-radius: var(--rw-radius);
  padding: 1rem 1.15rem;
  box-shadow: var(--rw-shadow-lg);
  border-left: 4px solid var(--rw-gold-500);
}
@media (max-width: 575px) {
  .rw-lead__chip { right: 6px; bottom: -14px; max-width: 210px; padding: .8rem .9rem; }
}
.rw-lead__chip-value {
  display: block;
  font-family: var(--rw-font-head);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--rw-teal-500);
  line-height: 1.1;
}
.rw-lead__chip-label {
  display: block;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
  margin-top: .2rem;
}
.rw-lead__para { color: var(--rw-gray-600); }
.rw-lead__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

@media (max-width: 991px) {
  .rw-lead__media { margin-bottom: 2rem; }
}

/* --------------------------------------------- 9. Cards and list blocks -- */
.rw-card {
  display: block;
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius-lg);
  padding: 1.6rem;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--rw-ease), box-shadow .25s var(--rw-ease),
              border-color .25s var(--rw-ease);
}
.rw-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--rw-teal-500);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s var(--rw-ease);
}
.rw-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--rw-shadow);
  border-color: transparent;
}
.rw-card:hover::before { transform: scaleY(1); }

.rw-card { display: flex; flex-direction: column; }
.rw-card__text { flex: 1 1 auto; }
.rw-card--link { text-decoration: none; color: inherit; }
.rw-card--link:hover { color: inherit; }

.rw-card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--rw-tone-bg, var(--rw-teal-100));
  color: var(--rw-tone-fg, var(--rw-teal-700));
  font-size: 1.4rem;
  margin-bottom: 1.1rem;
  transition: background-color .25s var(--rw-ease), color .25s var(--rw-ease),
              transform .25s var(--rw-ease);
}
/* Hover inverts the well into its own tone rather than a shared navy, so the
   colour a card is identified by is reinforced instead of thrown away. */
.rw-card:hover .rw-card__icon {
  background: var(--rw-tone-fg, var(--rw-navy-900));
  color: var(--rw-white);
  transform: scale(1.06);
}
.rw-card__title { font-size: 1.1rem; margin-bottom: .5rem; }
.rw-card__text { color: var(--rw-gray-600); font-size: .95rem; margin: 0; }
.rw-card__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-family: var(--rw-font-head);
  font-weight: 700;
  font-size: .88rem;
  color: var(--rw-navy-700);
}
.rw-card__more i { transition: transform .25s var(--rw-ease); }
.rw-card:hover .rw-card__more { color: var(--rw-teal-700); }
.rw-card:hover .rw-card__more i { transform: translateX(4px); }

.rw-checklist { list-style: none; display: grid; gap: .8rem; }
.rw-checklist li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  line-height: 1.6;
}
.rw-checklist i {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: .18rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rw-navy-900);
  color: var(--rw-teal-500);
  font-size: .78rem;
}
.rw-checklist--panel {
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius-lg);
  padding: 1.6rem;
  box-shadow: var(--rw-shadow-sm);
}
.rw-checklist--panel li + li {
  padding-top: .8rem;
  border-top: 1px solid var(--rw-gray-100);
}

/* Pain-point list on service pages */
.rw-pains__list {
  list-style: none;
  display: grid;
  gap: 1rem;
  max-width: 920px;
  margin-inline: auto;
}
.rw-pains__item {
  display: flex;
  gap: 1rem;
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius);
  padding: 1.2rem 1.35rem;
  transition: transform .22s var(--rw-ease), box-shadow .22s var(--rw-ease);
}
.rw-pains__item:hover { transform: translateX(4px); box-shadow: var(--rw-shadow-sm); }
.rw-pains__mark {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--rw-navy-900);
  color: var(--rw-teal-500);
  font-weight: 700;
}
.rw-pains__title { font-size: 1.05rem; margin-bottom: .3rem; }
.rw-pains__text { color: var(--rw-gray-600); font-size: .95rem; margin: 0; }

/* Numbered "difference" list on specialty pages */
.rw-diff__lead { color: rgba(255, 255, 255, .78); }
.rw-diff__list { list-style: none; display: grid; gap: .85rem; }
.rw-diff__list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--rw-radius);
  padding: 1rem 1.2rem;
  transition: background-color .22s var(--rw-ease), transform .22s var(--rw-ease);
}
.rw-diff__list li:hover { background: rgba(255, 255, 255, .1); transform: translateX(4px); }
.rw-diff__num {
  flex: none;
  font-family: var(--rw-font-head);
  font-weight: 800;
  color: var(--rw-teal-500);
  font-size: 1rem;
  line-height: 1.6;
}
.rw-diff__text { color: rgba(255, 255, 255, .86); font-size: .96rem; }

/* --------------------------------- 10. Stats, meters, process and steps -- */
.rw-stats { padding-block: clamp(2.5rem, 5vw, 4rem); }
.rw-stats--dark { background: var(--rw-navy-900); position: relative; isolation: isolate; }
.rw-stats--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 100% at 50% 0%, rgba(23, 162, 160, .14), transparent 65%);
}
.rw-stats--light { background: var(--rw-sky-50); }

.rw-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.rw-stats__item { padding: .5rem; }
.rw-stats__grid > * + * { border-left: 1px solid rgba(255, 255, 255, .12); }
.rw-stats--light .rw-stats__grid > * + * { border-left-color: var(--rw-gray-300); }
@media (max-width: 767px) {
  .rw-stats__grid > * + * { border-left: 0; }
}

.rw-stats__value {
  font-family: var(--rw-font-head);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  line-height: 1;
  color: var(--rw-teal-500);
  margin: 0 0 .4rem;
  font-variant-numeric: tabular-nums;
}
.rw-stats--light .rw-stats__value { color: var(--rw-navy-900); }
.rw-stats__suffix { color: inherit; }
.rw-stats__label {
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  margin: 0;
  max-width: 24ch;
  margin-inline: auto;
}
.rw-stats--light .rw-stats__label { color: var(--rw-gray-600); }

.rw-meter + .rw-meter { margin-top: 1.1rem; }
.rw-meter__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .4rem;
}
.rw-meter__label { font-size: .88rem; color: var(--rw-gray-600); }
.rw-meter__val {
  font-family: var(--rw-font-head);
  font-weight: 800;
  color: var(--rw-navy-900);
  font-variant-numeric: tabular-nums;
}
.rw-meter__track {
  height: 8px;
  border-radius: 99px;
  background: var(--rw-gray-100);
  overflow: hidden;
}
.rw-meter__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--rw-teal-500);
  transition: width 1.1s var(--rw-ease);
}

.rw-why__media { position: relative; }
.rw-why__img {
  border-radius: var(--rw-radius-lg);
  overflow: hidden;
  box-shadow: var(--rw-shadow);
}
.rw-why__img img { aspect-ratio: 3 / 4; object-fit: cover; }
.rw-why__metrics {
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius-lg);
  padding: 1.4rem;
  box-shadow: var(--rw-shadow);
  margin: -3.5rem 1rem 0;
  position: relative;
}

/* Four-step process with a connecting rule */
.rw-process__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  position: relative;
}
@media (min-width: 992px) {
  .rw-process__list::before {
    content: "";
    position: absolute;
    top: 58px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--rw-gray-300) 0 8px, transparent 8px 16px);
    z-index: 0;
  }
}
.rw-process__step {
  position: relative;
  z-index: 1;
  text-align: center;
  background: var(--rw-white);
  padding: 0 .5rem;
}
.rw-process__num {
  display: block;
  font-family: var(--rw-font-head);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--rw-teal-700);
  margin-bottom: .5rem;
}
.rw-process__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rw-tone-bg, var(--rw-teal-100));
  color: var(--rw-tone-fg, var(--rw-teal-700));
  font-size: 1.5rem;
  box-shadow: 0 0 0 8px var(--rw-white), 0 0 0 10px var(--rw-gray-100);
  transition: transform .28s var(--rw-ease), background-color .25s var(--rw-ease),
              color .25s var(--rw-ease);
}
.rw-process__step:hover .rw-process__icon {
  transform: translateY(-5px) scale(1.04);
  background: var(--rw-tone-fg, var(--rw-teal-700));
  color: var(--rw-white);
}
.rw-process__title { font-size: 1.08rem; margin-bottom: .4rem; }
.rw-process__text { color: var(--rw-gray-600); font-size: .93rem; margin: 0; }

.bg-sky .rw-process__step { background: var(--rw-sky-50); }
.bg-sky .rw-process__icon { box-shadow: 0 0 0 8px var(--rw-sky-50), 0 0 0 10px var(--rw-gray-300); }

/* Long numbered workflow list */
.rw-steps__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem 2rem;
  counter-reset: step;
}
.rw-steps__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rw-steps__num {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--rw-teal-500);
  color: var(--rw-teal-500);
  font-family: var(--rw-font-head);
  font-weight: 800;
  font-size: .92rem;
  transition: background-color .25s var(--rw-ease), color .25s var(--rw-ease);
}
.rw-steps__item:hover .rw-steps__num {
  background: var(--rw-teal-500);
  color: var(--rw-navy-950);
}
.rw-steps__title { font-size: 1.02rem; color: var(--rw-white); margin-bottom: .25rem; }
.rw-steps__text { color: rgba(255, 255, 255, .78); font-size: .93rem; margin: 0; }

/* ---------------------------------------------------------- 11. Accordion */
.rw-accordion {
  display: grid;
  gap: .7rem;
}
.rw-accordion__item {
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius);
  overflow: hidden;
  transition: border-color .25s var(--rw-ease), box-shadow .25s var(--rw-ease);
}
.rw-accordion__item.is-open {
  border-color: var(--rw-teal-500);
  box-shadow: var(--rw-shadow-sm);
}
.rw-accordion__heading { margin: 0; font-size: inherit; }
.rw-accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.05rem 1.2rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--rw-font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--rw-navy-900);
  line-height: 1.4;
}
.rw-accordion__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--rw-tone-bg, var(--rw-teal-100));
  color: var(--rw-tone-fg, var(--rw-teal-700));
  font-size: 1rem;
  transition: background-color .25s var(--rw-ease), color .25s var(--rw-ease);
}
/* Open panel: fill the well with its own tone so the active row is obvious. */
.rw-accordion__item.is-open .rw-accordion__icon {
  background: var(--rw-tone-fg, var(--rw-navy-900));
  color: var(--rw-white);
}
.rw-accordion__label { flex: 1; }
.rw-accordion__chev {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rw-gray-300);
  color: var(--rw-navy-700);
  font-size: .72rem;
  transition: transform .28s var(--rw-ease), background-color .25s var(--rw-ease),
              color .25s var(--rw-ease), border-color .25s var(--rw-ease);
}
.rw-accordion__item.is-open .rw-accordion__chev {
  transform: rotate(45deg);
  background: var(--rw-teal-500);
  border-color: var(--rw-teal-500);
  color: var(--rw-navy-950);
}
.rw-accordion__panel { display: grid; grid-template-rows: 1fr; }
.rw-accordion__panel[hidden] { display: none; }
.rw-accordion__inner {
  padding: 0 1.2rem 1.2rem;
  color: var(--rw-gray-600);
  font-size: .96rem;
}
.rw-accordion--plain .rw-accordion__btn { padding-left: 1.35rem; }

.rw-faq__aside { position: sticky; top: calc(var(--rw-header-h) + 24px); }
@media (max-width: 991px) { .rw-faq__aside { position: static; } }

/* ------------------------------------------------------- 12. Testimonials */
.rw-quotes__wrap { position: relative; }
.rw-quotes__swiper { padding-bottom: .5rem; }
.rw-quotes__swiper .swiper-slide { height: auto; }

.rw-quote {
  height: 100%;
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius-lg);
  padding: 1.9rem 1.75rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow .25s var(--rw-ease), transform .25s var(--rw-ease);
}
.rw-quote:hover { box-shadow: var(--rw-shadow); transform: translateY(-4px); }
.rw-quote__stars { color: var(--rw-gold-500); font-size: .88rem; letter-spacing: .1em; margin-bottom: .9rem; }
.rw-quote__mark {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  font-size: 2.6rem;
  color: var(--rw-teal-500);
  opacity: .18;
  line-height: 1;
}
.rw-quote blockquote { margin: 0 0 1.4rem; flex: 1; }
.rw-quote blockquote p { color: var(--rw-charcoal); font-size: 1rem; margin: 0; }
.rw-quote__by {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rw-gray-100);
}
.rw-quote__avatar {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--rw-teal-500);
}
.rw-quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rw-quote__name {
  display: block;
  font-family: var(--rw-font-head);
  font-weight: 700;
  color: var(--rw-navy-900);
  line-height: 1.3;
}
.rw-quote__role { display: block; font-size: .84rem; color: var(--rw-gray-600); }

.rw-quotes__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}
.rw-quotes__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--rw-gray-300);
  background: var(--rw-white);
  color: var(--rw-navy-900);
  cursor: pointer;
  transition: background-color .22s var(--rw-ease), color .22s var(--rw-ease),
              border-color .22s var(--rw-ease), transform .22s var(--rw-ease);
}
.rw-quotes__btn:hover {
  background: var(--rw-navy-900);
  border-color: var(--rw-navy-900);
  color: var(--rw-teal-500);
  transform: translateY(-2px);
}
.rw-quotes__dots { display: flex; align-items: center; gap: .45rem; }
.rw-quotes__dots .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--rw-gray-300);
  opacity: 1;
  border-radius: 99px;
  transition: width .25s var(--rw-ease), background-color .25s var(--rw-ease);
  margin: 0;
}
.rw-quotes__dots .swiper-pagination-bullet-active {
  width: 26px;
  background: var(--rw-teal-500);
}

/* ------------------------------------------------------------- 13. Forms */
.rw-form {
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius-lg);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  box-shadow: var(--rw-shadow);
}
.rw-form__title { font-size: 1.5rem; margin-bottom: 1.4rem; }

.form-label {
  font-family: var(--rw-font-head);
  font-weight: 600;
  font-size: .88rem;
  color: var(--rw-navy-900);
  margin-bottom: .35rem;
}
.rw-req { color: var(--rw-teal-700); }

.form-control,
.form-select {
  border: 1px solid var(--rw-gray-300);
  border-radius: var(--rw-radius-sm);
  padding: .72rem .9rem;
  font-size: .96rem;
  color: var(--rw-charcoal);
  background-color: var(--rw-white);
  transition: border-color .2s var(--rw-ease), box-shadow .2s var(--rw-ease);
}
.form-control::placeholder { color: #97A29A; }
.form-control:focus,
.form-select:focus {
  border-color: var(--rw-navy-500);
  box-shadow: 0 0 0 4px rgba(23, 162, 160, .14);
  outline: none;
}
.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
  border-color: #B3261E;
  box-shadow: 0 0 0 4px rgba(179, 38, 30, .1);
}
.form-control.is-valid,
.form-select.is-valid { border-color: var(--rw-navy-500); }

.rw-field__err {
  display: none;
  margin: .35rem 0 0;
  font-size: .82rem;
  color: #B3261E;
}
.rw-field__err.is-shown { display: block; }

.rw-check .form-check-input {
  border-color: var(--rw-gray-300);
  margin-top: .28rem;
}
.rw-check .form-check-input:checked {
  background-color: var(--rw-navy-900);
  border-color: var(--rw-navy-900);
}
.rw-check .form-check-label { font-size: .9rem; color: var(--rw-gray-600); }

.rw-form__hint {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: .5rem 0 0;
  font-size: .82rem;
  color: var(--rw-gray-600);
}
.rw-form__hint i { color: var(--rw-teal-700); margin-top: .15rem; }
.rw-form__fine { margin: 1rem 0 0; font-size: .85rem; color: var(--rw-gray-600); text-align: center; }

.rw-form__msg {
  display: none;
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border-radius: var(--rw-radius-sm);
  font-size: .92rem;
}
.rw-form__msg.is-ok {
  display: block;
  background: #EAF6EE;
  color: #0A5A2A;
  border: 1px solid #B7E0C6;
}
.rw-form__msg.is-err {
  display: block;
  background: #FCEDEC;
  color: #8C1D18;
  border: 1px solid #F2C4C0;
}

/* Honeypot — off-screen rather than display:none so bots still see it */
.rw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rw-spinner {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(7, 27, 46, .25);
  border-top-color: var(--rw-navy-950);
  border-radius: 50%;
  animation: rw-spin .7s linear infinite;
}
@keyframes rw-spin { to { transform: rotate(360deg); } }
.btn.is-loading { pointer-events: none; opacity: .78; }

/* ------------------------------------------------------------ 14. Footer */
.rw-footer { background: var(--rw-navy-950); color: rgba(255, 255, 255, .72); }
.rw-footer__top {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  position: relative;
  isolation: isolate;
}
.rw-footer__top::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 70% at 85% 0%, rgba(23, 162, 160, .1), transparent 62%);
}
.rw-footer__logo { display: inline-block; margin-bottom: 1.1rem; }
.rw-footer__logo img { width: 200px; height: auto; }
.rw-footer__blurb { font-size: .93rem; line-height: 1.7; margin-bottom: 1.1rem; }

.rw-footer__badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.rw-footer__badges li {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  padding: .35rem .7rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
}
.rw-footer__badges i { color: var(--rw-teal-500); }

.rw-footer__head {
  font-family: var(--rw-font-head);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--rw-white);
  margin-bottom: 1.1rem;
  position: relative;
  padding-bottom: .6rem;
}
.rw-footer__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--rw-gold-500);
}
.rw-footer__head--tight { margin-top: 1.75rem; }

.rw-footer__links { list-style: none; display: grid; gap: .55rem; }
.rw-footer__links a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s var(--rw-ease), transform .2s var(--rw-ease);
}
.rw-footer__links a:hover { color: var(--rw-teal-500); transform: translateX(3px); }

.rw-footer__contact { list-style: none; display: grid; gap: .85rem; }
.rw-footer__contact li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.rw-footer__contact i { color: var(--rw-teal-500); margin-top: .22rem; flex: none; }
/* The email address is one long unbreakable token. In the narrow footer column
   at the lg breakpoint it pushed past the viewport, so allow it to wrap and
   stop the flex item claiming its full intrinsic width. */
.rw-footer__contact li > span,
.rw-footer__contact li > a { min-width: 0; overflow-wrap: anywhere; }
.rw-footer__contact a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.rw-footer__contact a:hover { color: var(--rw-teal-500); }

.rw-footer__note { font-size: .85rem; margin-bottom: .8rem; }
.rw-newsletter__row { display: flex; gap: .5rem; }
.rw-newsletter .form-control {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: var(--rw-white);
}
.rw-newsletter .form-control::placeholder { color: rgba(255, 255, 255, .45); }
.rw-newsletter .form-control:focus {
  background: rgba(255, 255, 255, .12);
  border-color: var(--rw-teal-500);
  box-shadow: 0 0 0 4px rgba(23, 162, 160, .16);
}
.rw-newsletter .btn { flex: none; width: 48px; padding: 0; }
.rw-newsletter .rw-form__msg { font-size: .84rem; padding: .55rem .75rem; }

.rw-footer__social { list-style: none; display: flex; gap: .5rem; }
.rw-footer__social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8);
  transition: background-color .22s var(--rw-ease), color .22s var(--rw-ease),
              transform .22s var(--rw-ease);
}
.rw-footer__social a:hover {
  background: var(--rw-teal-500);
  color: var(--rw-navy-950);
  transform: translateY(-3px);
}

.rw-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.15rem;
  font-size: .86rem;
}
.rw-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.rw-footer__bar p { margin: 0; }
.rw-footer__bar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.rw-footer__bar a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.rw-footer__bar a:hover { color: var(--rw-teal-500); }

/* ----------------------------------------- 15. CTA, modal, floating bits */
.rw-cta { padding-block: clamp(2rem, 4vw, 3rem); }
.rw-cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--rw-navy-900);
  border-radius: var(--rw-radius-lg);
  padding: clamp(1.9rem, 4vw, 3.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  border: 1px solid rgba(212, 175, 55, .3);
}
.rw-cta__glow {
  position: absolute;
  z-index: -1;
  width: 380px;
  height: 380px;
  right: -90px;
  top: -160px;
  border-radius: 50%;
  background: rgba(212, 175, 55, .18);
  filter: blur(50px);
}
.rw-cta__content { flex: 1 1 380px; }
.rw-cta__title { color: var(--rw-white); margin-bottom: .6rem; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.rw-cta__text { color: rgba(255, 255, 255, .82); margin: 0; max-width: 56ch; }
.rw-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.rw-modal { position: fixed; inset: 0; z-index: 1090; }
.rw-modal[hidden] { display: none; }
.rw-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 27, 46, .6);
  opacity: 0;
  transition: opacity .28s var(--rw-ease);
}
.rw-modal.is-open .rw-modal__scrim { opacity: 1; }
.rw-modal__dialog {
  position: relative;
  max-width: 560px;
  width: calc(100% - 2rem);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  margin: 1.5rem auto;
  background: var(--rw-white);
  border-radius: var(--rw-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--rw-shadow-lg);
  transform: translateY(18px) scale(.98);
  opacity: 0;
  transition: transform .3s var(--rw-ease), opacity .3s var(--rw-ease);
}
.rw-modal.is-open .rw-modal__dialog { transform: none; opacity: 1; }
.rw-modal__close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rw-gray-300);
  border-radius: 50%;
  background: var(--rw-white);
  color: var(--rw-navy-900);
  cursor: pointer;
  transition: background-color .2s var(--rw-ease), color .2s var(--rw-ease);
}
.rw-modal__close:hover { background: var(--rw-navy-900); color: var(--rw-white); }
.rw-modal__title { font-size: 1.5rem; margin-bottom: .5rem; }
.rw-modal__lead { color: var(--rw-gray-600); font-size: .95rem; margin-bottom: 1.25rem; }
.rw-modal__fine { margin: .9rem 0 0; font-size: .8rem; color: var(--rw-gray-600); text-align: center; }

.rw-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
  transition: transform .25s var(--rw-ease);
}
.rw-whatsapp:hover { transform: scale(1.08); color: #fff; }
.rw-whatsapp__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: rw-pulse 2.4s ease-out infinite;
}
@keyframes rw-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.rw-totop {
  position: fixed;
  right: 20px;
  bottom: 86px;
  z-index: 1050;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--rw-navy-900);
  color: var(--rw-teal-500);
  cursor: pointer;
  box-shadow: var(--rw-shadow);
  transition: transform .25s var(--rw-ease), background-color .25s var(--rw-ease);
}
.rw-totop[hidden] { display: none; }
.rw-totop:hover { background: var(--rw-teal-500); color: var(--rw-navy-950); transform: translateY(-3px); }

/* ----------------------------------------------- 16. Page-specific blocks */

/* Provider-type grid (home) */
.rw-serve__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  list-style: none;
}
.rw-serve__item {
  text-align: center;
  padding: 1.6rem 1rem;
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius-lg);
  background: var(--rw-white);
  transition: transform .25s var(--rw-ease), box-shadow .25s var(--rw-ease),
              background-color .25s var(--rw-ease);
}
.rw-serve__item:hover {
  transform: translateY(-5px);
  box-shadow: var(--rw-shadow);
  background: var(--rw-navy-900);
}
.rw-serve__icon {
  width: 58px;
  height: 58px;
  margin: 0 auto .85rem;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--rw-tone-bg, var(--rw-teal-100));
  color: var(--rw-tone-fg, var(--rw-teal-700));
  font-size: 1.5rem;
  transition: background-color .25s var(--rw-ease), color .25s var(--rw-ease);
}
.rw-serve__item:hover .rw-serve__icon {
  background: var(--rw-tone-fg, var(--rw-teal-500));
  color: var(--rw-white);
  transform: scale(1.06);
}
.rw-serve__name {
  font-family: var(--rw-font-head);
  font-weight: 700;
  font-size: .98rem;
  color: var(--rw-navy-900);
  margin: 0 0 .25rem;
  transition: color .25s var(--rw-ease);
}
.rw-serve__item:hover .rw-serve__name { color: var(--rw-white); }
.rw-serve__text { font-size: .84rem; color: var(--rw-gray-600); margin: 0; transition: color .25s var(--rw-ease); }
.rw-serve__item:hover .rw-serve__text { color: rgba(255, 255, 255, .78); }

/* Specialty pills */
.rw-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  list-style: none;
  justify-content: center;
}
.rw-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.15rem;
  border-radius: 99px;
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-300);
  color: var(--rw-navy-900);
  font-family: var(--rw-font-head);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: background-color .22s var(--rw-ease), color .22s var(--rw-ease),
              border-color .22s var(--rw-ease), transform .22s var(--rw-ease);
}
.rw-pill i { color: var(--rw-teal-700); transition: color .22s var(--rw-ease); }
.rw-pill:hover {
  background: var(--rw-navy-900);
  border-color: var(--rw-navy-900);
  color: var(--rw-white);
  transform: translateY(-3px);
}
.rw-pill:hover i { color: var(--rw-teal-500); }

/* Specialty tile grid (hub page) */
.rw-tile {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--rw-gray-100);
  border-radius: var(--rw-radius);
  background: var(--rw-white);
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--rw-ease), box-shadow .25s var(--rw-ease),
              border-color .25s var(--rw-ease);
}
.rw-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--rw-shadow);
  border-color: var(--rw-teal-500);
  color: inherit;
}
.rw-tile__icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--rw-tone-bg, var(--rw-teal-100));
  color: var(--rw-tone-fg, var(--rw-teal-700));
  font-size: 1.2rem;
  transition: background-color .25s var(--rw-ease), color .25s var(--rw-ease),
              transform .25s var(--rw-ease);
}
.rw-tile:hover .rw-tile__icon {
  background: var(--rw-tone-fg, var(--rw-navy-900));
  color: var(--rw-white);
  transform: scale(1.06);
}
.rw-tile__name {
  font-family: var(--rw-font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--rw-navy-900);
  margin: 0 0 .2rem;
  line-height: 1.3;
}
.rw-tile__text { font-size: .86rem; color: var(--rw-gray-600); margin: 0; }

/* In-house vs outsourced comparison */
.rw-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.rw-compare__col {
  border-radius: var(--rw-radius-lg);
  padding: 1.75rem;
  border: 1px solid var(--rw-gray-100);
  background: var(--rw-white);
}
.rw-compare__col--ours {
  background: var(--rw-navy-900);
  border-color: var(--rw-navy-900);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.rw-compare__col--ours::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 80% at 90% 5%, rgba(23, 162, 160, .16), transparent 62%);
}
.rw-compare__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rw-gray-100);
}
.rw-compare__col--ours .rw-compare__head { border-bottom-color: rgba(255, 255, 255, .16); }
.rw-compare__title { font-size: 1.15rem; margin: 0; }
.rw-compare__col--ours .rw-compare__title { color: var(--rw-white); }
.rw-compare__tag {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 99px;
  background: var(--rw-gold-500);
  color: var(--rw-navy-950);
}
.rw-compare__list { list-style: none; display: grid; gap: .8rem; }
.rw-compare__list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .93rem; }
.rw-compare__list i { flex: none; margin-top: .22rem; font-size: 1rem; }
.rw-compare__col--theirs .rw-compare__list li { color: var(--rw-gray-600); }
.rw-compare__col--theirs .rw-compare__list i { color: #B3261E; }
.rw-compare__col--ours .rw-compare__list li { color: rgba(255, 255, 255, .86); }
.rw-compare__col--ours .rw-compare__list i { color: var(--rw-teal-500); }

/* Values / mission cards */
.rw-value {
  height: 100%;
  padding: 1.9rem 1.6rem;
  border-radius: var(--rw-radius-lg);
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  text-align: center;
  transition: transform .25s var(--rw-ease), box-shadow .25s var(--rw-ease);
}
.rw-value:hover { transform: translateY(-5px); box-shadow: var(--rw-shadow); }
.rw-value__icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rw-tone-bg, var(--rw-teal-100));
  color: var(--rw-tone-fg, var(--rw-teal-700));
  font-size: 1.6rem;
  transition: background-color .25s var(--rw-ease), color .25s var(--rw-ease),
              transform .25s var(--rw-ease);
}
.rw-value:hover .rw-value__icon {
  background: var(--rw-tone-fg, var(--rw-navy-900));
  color: var(--rw-white);
  transform: scale(1.06);
}
.rw-value__title { font-size: 1.2rem; margin-bottom: .5rem; }
.rw-value__text { color: var(--rw-gray-600); font-size: .95rem; margin: 0; }

/* Team cards */
.rw-person {
  height: 100%;
  border-radius: var(--rw-radius-lg);
  overflow: hidden;
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  transition: transform .25s var(--rw-ease), box-shadow .25s var(--rw-ease);
}
.rw-person:hover { transform: translateY(-5px); box-shadow: var(--rw-shadow); }
.rw-person__photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--rw-gray-100); }
.rw-person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--rw-ease); }
.rw-person:hover .rw-person__photo img { transform: scale(1.05); }
.rw-person__body { padding: 1.15rem 1.25rem 1.4rem; }
.rw-person__name { font-size: 1.08rem; margin-bottom: .2rem; }
.rw-person__role { font-size: .85rem; color: var(--rw-teal-700); font-weight: 600; margin: 0 0 .6rem; }
.rw-person__text { font-size: .88rem; color: var(--rw-gray-600); margin: 0; }

/* Contact cards, hours and map */
.rw-contact-card {
  /* No height:100% here on purpose. Where a full-height card is wanted (the
     three-column trust row) the markup adds Bootstrap's .h-100 explicitly.
     Baking it into the component itself broke the sidebar on the contact page:
     three stacked cards with no shared row each resolved 100% against the
     stretched two-column row, so each ballooned to match the tall form column
     and pushed the next one further down, spilling into the sections below. */
  padding: 1.75rem 1.5rem;
  border-radius: var(--rw-radius-lg);
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-100);
  transition: transform .25s var(--rw-ease), box-shadow .25s var(--rw-ease);
}
.rw-contact-card:hover { transform: translateY(-5px); box-shadow: var(--rw-shadow); }
.rw-contact-card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--rw-tone-bg, var(--rw-teal-100));
  color: var(--rw-tone-fg, var(--rw-teal-700));
  font-size: 1.35rem;
  margin-bottom: 1rem;
  transition: background-color .25s var(--rw-ease), color .25s var(--rw-ease),
              transform .25s var(--rw-ease);
}
.rw-contact-card:hover .rw-contact-card__icon {
  background: var(--rw-tone-fg, var(--rw-navy-900));
  color: var(--rw-white);
  transform: scale(1.06);
}
.rw-contact-card__title { font-size: 1.1rem; margin-bottom: .4rem; }
.rw-contact-card__text { color: var(--rw-gray-600); font-size: .94rem; margin: 0 0 .6rem; }
.rw-contact-card a {
  font-family: var(--rw-font-head);
  font-weight: 700;
  color: var(--rw-navy-700);
  text-decoration: none;
  word-break: break-word;
}
.rw-contact-card a:hover { color: var(--rw-teal-700); }

.rw-hours { list-style: none; display: grid; gap: .6rem; }
.rw-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .93rem;
  padding-bottom: .6rem;
  border-bottom: 1px dashed var(--rw-gray-300);
}
.rw-hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.rw-hours strong { font-weight: 600; }

.rw-map {
  border-radius: var(--rw-radius-lg);
  overflow: hidden;
  border: 1px solid var(--rw-gray-100);
  box-shadow: var(--rw-shadow-sm);
  line-height: 0;
}
.rw-map iframe { width: 100%; height: 420px; border: 0; display: block; }
@media (max-width: 767px) { .rw-map iframe { height: 300px; } }

/* Thank-you and 404 */
.rw-message { text-align: center; max-width: 640px; margin-inline: auto; }
.rw-message__icon {
  width: 92px;
  height: 92px;
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rw-navy-900);
  color: var(--rw-teal-500);
  font-size: 2.4rem;
}
.rw-message__code {
  font-family: var(--rw-font-head);
  font-weight: 800;
  font-size: clamp(4.5rem, 14vw, 8rem);
  line-height: 1;
  color: var(--rw-navy-900);
  margin: 0 0 .5rem;
  letter-spacing: -.04em;
}
.rw-message__code span { color: var(--rw-gold-500); }
.rw-message__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 1.75rem;
}
.rw-nextsteps {
  list-style: none;
  display: grid;
  gap: .9rem;
  text-align: left;
  margin-top: 2.25rem;
  padding: 1.5rem;
  border-radius: var(--rw-radius-lg);
  background: var(--rw-sky-50);
  border: 1px solid var(--rw-gray-100);
}
.rw-nextsteps li { display: flex; gap: .8rem; align-items: flex-start; font-size: .95rem; }
.rw-nextsteps i {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rw-navy-900);
  color: var(--rw-teal-500);
  font-size: .78rem;
  margin-top: .12rem;
}

/* Credits table */
.rw-credits { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rw-credits th,
.rw-credits td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--rw-gray-100); }
.rw-credits th { font-family: var(--rw-font-head); color: var(--rw-navy-900); white-space: nowrap; }
.rw-credits__wrap { overflow-x: auto; }

/* Legal / prose pages */
.rw-prose { max-width: 780px; }
.rw-prose h2 { margin-top: 2.25rem; font-size: 1.5rem; }
.rw-prose h3 { margin-top: 1.5rem; font-size: 1.15rem; }
.rw-prose ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1.1rem; }
.rw-prose li { margin-bottom: .45rem; }
.rw-prose__meta { color: var(--rw-gray-600); font-size: .9rem; }

/* --------------------------------------------- 17. Motion preferences --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  .rw-whatsapp__pulse { display: none; }
}

/* Security control cards (About page) */
.rw-control {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
  padding: 1.5rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--rw-radius);
  transition: background-color .25s var(--rw-ease), transform .25s var(--rw-ease);
}
.rw-control:hover { background: rgba(255, 255, 255, .1); transform: translateY(-4px); }
.rw-control__icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rw-navy-950);
  color: var(--rw-teal-500);
  font-size: 1.25rem;
}
.rw-control__title { font-size: 1.05rem; color: var(--rw-white); margin-bottom: .35rem; }
.rw-control__text { color: rgba(255, 255, 255, .8); font-size: .93rem; margin: 0; }

/* Pill variants: left-aligned rows, and non-interactive informational pills */
.rw-pills--left { justify-content: flex-start; }
.rw-pill--static { cursor: default; }
.rw-pill--static:hover {
  background: var(--rw-white);
  border-color: var(--rw-gray-300);
  color: var(--rw-navy-900);
  transform: none;
}
.rw-pill--static:hover i { color: var(--rw-teal-700); }

/* Vendor / EHR logo grid ("Systems we already work inside").
   Logos are third-party trademarks shown for identification only. */
.rw-systems .rw-section-head { max-width: 640px; }
.rw-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rw-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 1.5rem;
  background: var(--rw-white);
  border: 1px solid var(--rw-gray-300);
  border-radius: var(--rw-radius-sm);
  transition: border-color .22s var(--rw-ease), box-shadow .22s var(--rw-ease),
              transform .22s var(--rw-ease);
}
.rw-logos li:hover {
  border-color: var(--rw-teal-300);
  box-shadow: 0 14px 30px rgba(15, 42, 54, .1);
  transform: translateY(-4px);
}
.rw-logos img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
  transition: transform .22s var(--rw-ease);
}
.rw-logos li:hover img { transform: scale(1.05); }
/* Logos with a tall / square lockup need more height to read at the same weight */
.rw-logos__img--tall { max-height: 68px; }
@media (prefers-reduced-motion: reduce) {
  .rw-logos li:hover,
  .rw-logos li:hover img { transform: none; }
}
.rw-systems__note {
  max-width: 640px;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: .8rem;
  color: var(--rw-gray-600);
}
@media (max-width: 991px) {
  .rw-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .rw-logos { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .rw-logos li { min-height: 88px; padding: 1.15rem; }
}

/* The footer social row reused on a light card (contact page). Without this the
   inherited white-on-translucent-white treatment renders invisible. */
.rw-footer__social--light a {
  background: var(--rw-teal-100);
  border-color: var(--rw-teal-300);
  color: var(--rw-teal-700);
}
.rw-footer__social--light a:hover {
  background: var(--rw-navy-900);
  border-color: var(--rw-navy-900);
  color: var(--rw-teal-500);
}

/* ---------------------------------------- Specialty tile grid (home) ----- */
/* White cards need a tinted ground to separate against — on sky-50 they are a
   1.05:1 difference, i.e. invisible without leaning entirely on shadow. */
.rw-specband { background: var(--rw-sky-100); }

.rw-spec-grid {
  --cols: 6;
  --gap: 1rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centres a short final row */
  gap: var(--gap);
}
.rw-spec-grid > li {
  flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: flex;
}
@media (max-width: 1199px) { .rw-spec-grid { --cols: 4; } }
@media (max-width: 991px)  { .rw-spec-grid { --cols: 3; } }
@media (max-width: 575px)  { .rw-spec-grid { --cols: 2; --gap: .75rem; } }

.rw-spec-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  padding: 1.4rem .8rem 1.25rem;
  background: var(--rw-white);
  border: 1px solid rgba(14, 46, 79, .05);
  border-radius: var(--rw-radius);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(14, 46, 79, .06);
  transition: transform .25s var(--rw-ease), box-shadow .25s var(--rw-ease),
              border-color .25s var(--rw-ease);
}
.rw-spec-tile:hover,
.rw-spec-tile:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(14, 46, 79, .14);
  border-color: rgba(23, 162, 160, .35);
}
.rw-spec-tile__icon {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.35rem;
  transition: transform .25s var(--rw-ease);
}
.rw-spec-tile:hover .rw-spec-tile__icon { transform: scale(1.09); }
.rw-spec-tile__name {
  font-family: var(--rw-font-head);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--rw-navy-900);
}

/* ------------------------------------------- Icon tone palette --------- */
/* Eight tints, defined once and consumed by every icon well that opts in with
   data-tone="0".."7". Declaring them as custom properties rather than as
   per-component rules means adding a tone to a new component is one line, not
   eight, and there is a single place to retune the palette.

   Every tone is verified in both states: glyph-on-tint at rest (4.7-6.9:1) and
   white-on-tone when a card is hovered (5.3-8.3:1). Kept low-saturation so the
   variety reads as considered rather than as a rainbow. */
[data-tone="0"] { --rw-tone-bg: #E2F5F4; --rw-tone-fg: #0D7573; }  /* teal    */
[data-tone="1"] { --rw-tone-bg: #E3F0FC; --rw-tone-fg: #1B5E9E; }  /* sky     */
[data-tone="2"] { --rw-tone-bg: #E8E9FB; --rw-tone-fg: #4340A8; }  /* indigo  */
[data-tone="3"] { --rw-tone-bg: #F1E8FB; --rw-tone-fg: #7A3FA8; }  /* violet  */
[data-tone="4"] { --rw-tone-bg: #FCE9EE; --rw-tone-fg: #B03257; }  /* rose    */
[data-tone="5"] { --rw-tone-bg: #FBF1DF; --rw-tone-fg: #8A6608; }  /* amber   */
[data-tone="6"] { --rw-tone-bg: #E4F4EA; --rw-tone-fg: #17683F; }  /* emerald */
[data-tone="7"] { --rw-tone-bg: #E9EEF3; --rw-tone-fg: #3D5871; }  /* slate   */

/* Any toned well. Components fall back to the single teal treatment when no
   data-tone is present, so nothing breaks where a tone is not assigned. */
.rw-spec-tile__icon {
  background: var(--rw-tone-bg, var(--rw-teal-100));
  color: var(--rw-tone-fg, var(--rw-teal-700));
}

/* ------------------------------------- Consultation booking block (home) -- */
.rw-booking { padding-block: clamp(3rem, 6vw, 5rem); }

.rw-booking__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--rw-white);
  border-radius: var(--rw-radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(7, 27, 46, .35);
}
@media (max-width: 991px) {
  .rw-booking__panel { grid-template-columns: 1fr; }
}

/* --- image side --- */
.rw-booking__aside {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  padding: clamp(1.6rem, 3vw, 2.5rem);
}
.rw-booking__aside > .rw-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rw-booking__tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 46, 79, .28) 0%, rgba(13, 117, 115, .55) 40%, rgba(7, 27, 46, .93) 72%, rgba(7, 27, 46, .96) 100%);
}
.rw-booking__aside-body { color: var(--rw-white); }
.rw-booking__badge {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 1.1rem;
  border-radius: 16px;
  background: var(--rw-white);
  color: var(--rw-teal-700);
  font-size: 1.5rem;
  box-shadow: 0 10px 26px rgba(7, 27, 46, .3);
}
.rw-booking__title {
  color: var(--rw-white);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  margin-bottom: .7rem;
}
.rw-booking__text {
  color: rgba(255, 255, 255, .9);
  font-size: .96rem;
  margin-bottom: 1.1rem;
}
.rw-booking__points { list-style: none; display: grid; gap: .5rem; }
.rw-booking__points li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .92);
}
.rw-booking__points i {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: var(--rw-white);
  font-size: .72rem;
}

/* --- form side --- */
.rw-booking__form { padding: clamp(1.5rem, 3vw, 2.6rem); }
/* The date input renders its own picker indicator; keep it on-brand. */
.rw-booking__form input[type="date"] { appearance: none; }
.rw-booking__form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s var(--rw-ease);
}
.rw-booking__form input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }