/* === Red Barn Media Group - Reliable Comfort Services === */


/* ========== CUSTOM PROPERTIES ========== */
:root {
  /* Brand Colors (Figma: Sea / Red / Dark Red / Deep Ocean).
     Each *-hover token is a 15% white tint of its base — lighter on hover. */
  --color-sea: #01A0C6;
  --color-sea-hover: #27AECF;                /* 15% white tint of #01A0C6 */
  --color-red: #F40102;
  --color-red-hover: #F62728;                /* 15% white tint of #F40102 */
  --color-dark-red: #9F010A;
  --color-dark-red-hover: #AD272F;           /* 15% white tint of #9F010A */
  --color-deep-ocean: #140149;
  --color-deep-ocean-hover: #372764;         /* 15% white tint of #140149 */

  /* Pale cool surface (cards, icon frames) — pale tint of Sea.
     Replaces the base template's pale-blue light surface. */
  --color-sea-pale: #E6F6F9;

  /* Near-black dark text / outline (neutral, scheme-agnostic) */
  --color-dark-outline: #050808;
  --color-dark-outline-hover: #2A2D2D;

  /* Brand Gradients (Figma: "Red Rising" = Red→Dark Red, "Blue Sea" = Sea→Deep Ocean).
     Five angle variants each (0 / 45 / 90 / 134 / 180 degrees). */
  --gradient-red-rising-0:   linear-gradient(0deg,   var(--color-red) 0%, var(--color-dark-red) 100%);
  --gradient-red-rising-45:  linear-gradient(45deg,  var(--color-red) 0%, var(--color-dark-red) 100%);
  --gradient-red-rising-90:  linear-gradient(90deg,  var(--color-red) 0%, var(--color-dark-red) 100%);
  --gradient-red-rising-134: linear-gradient(134deg, var(--color-red) 0%, var(--color-dark-red) 100%);
  --gradient-red-rising-180: linear-gradient(180deg, var(--color-red) 0%, var(--color-dark-red) 100%);
  --gradient-blue-sea-0:     linear-gradient(0deg,   var(--color-sea) 0%, var(--color-deep-ocean) 100%);
  --gradient-blue-sea-45:    linear-gradient(45deg,  var(--color-sea) 0%, var(--color-deep-ocean) 100%);
  --gradient-blue-sea-90:    linear-gradient(90deg,  var(--color-sea) 0%, var(--color-deep-ocean) 100%);
  --gradient-blue-sea-134:   linear-gradient(134deg, var(--color-sea) 0%, var(--color-deep-ocean) 100%);
  --gradient-blue-sea-180:   linear-gradient(180deg, var(--color-sea) 0%, var(--color-deep-ocean) 100%);

  /* Vertical continuum stops — used to span Process + Considerations as one
     gradient. Deep Ocean at top → Sea at bottom; mid is the linear midpoint
     so the section boundary reads as a clean handoff. */
  --gradient-ocean-top: #140149;
  --gradient-ocean-mid: #0B5088;
  --gradient-ocean-bottom: #01A0C6;

  /* Generic */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Neutrals */
  --color-gray-50: #EEF0F5;
  --color-gray-100: #E5E7EA;
  --color-gray-200: #DDDEE1;
  --color-gray-300: #CCCED6;
  --color-gray-400: #C1C3CB;
  --color-gray-500: #A9ABB4;
  --color-gray-600: #8D919A;
  --color-gray-700: #656870;

  /* Dark Mode */
  --color-00dp: #121212;
  --color-01dp: #1E1E1E;
  --color-02dp: #222222;
  --color-03dp: #252525;
  --color-04dp: #272727;
  --color-06dp: #2C2C2C;
  --color-08dp: #2E2E2E;
  --color-12dp: #333333;
  --color-16dp: #353535;
  --color-24dp: #383838;

  /* Typography — Futura for headings + overline (weights 600/700);
     Inter for body copy (weights 400/500/600). */
  --font-futura: futura-100, sans-serif;
  --font-inter: inter-18pt, sans-serif;
  --font-weight-heavy: 900;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Layout */
  --menu-height: 7.5rem;
  --menu-height-shrink: 6rem;
  --hero-height: 500px;
  --transition-standard: 0.25s;
  --border-radius-standard: 1rem;
  --box-shadow-dropdown: 0 3rem 3rem rgba(0, 0, 0, 0.175);
  --overlay-opacity: 0.3;
  --overlay-opacity-sub: 0.75;
}
/* ========== END CUSTOM PROPERTIES ========== */


/* ========== BASE STYLES ========== */
html, body {
  width: 100%;
  height: 100%;
  overflow-x: clip;
}

body {
  color: var(--color-00dp);
  font-family: var(--font-inter);
  font-weight: var(--font-weight-regular);
  background-color: var(--color-white);
  position: relative;
}
/* ========== END BASE STYLES ========== */


/* ========== TYPOGRAPHY ========== */
/* Fluid type scale: sizes scale with viewport width.
   Reference viewport = 1600px (where 1vw = 16px = 1rem),
   so each Xrem target is paired with Xvw as the clamp preferred value.
   Line-heights are unitless ratios so they scale with the font-size. */

/* Heading Defaults — Futura */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

/* Body Defaults — Inter */
p, ul li, ol li, table {
  font-family: var(--font-inter);
  font-size: clamp(0.875rem, 1vw, 1rem);           /* 14→16 */
  line-height: 1.5;                                 /* 24/16 */
  font-weight: var(--font-weight-regular);
}

/* Legacy Size Utilities */
.fs-7 { font-size: clamp(0.8125rem, 0.875vw, 0.875rem); }
.fs-8 { font-size: clamp(0.6875rem, 0.75vw,  0.75rem);  }
.fs-xxl { font-size: 3rem; }

/* Label Utilities — Futura SemiBold, Uppercase */
.label-lg, .label-md {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}
.label-lg { font-size: clamp(0.875rem,  1vw,     1rem);     line-height: 1.125; } /* 14→16 / 18 */
.label-md { font-size: clamp(0.75rem,   0.875vw, 0.875rem); line-height: 1.143; } /* 12→14 / 16 */

/* Overline Utility — Futura */
.overline-lg {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-regular);
  font-size: clamp(0.875rem, 1.125vw, 1.125rem);
  line-height: 1.333;
} /* 14→18 / 24 */

/* Weight Utilities */
.bold    { font-weight: var(--font-weight-bold); }
.regular { font-weight: var(--font-weight-regular); }

strong { font-weight: var(--font-weight-bold); }
/* ========== END TYPOGRAPHY ========== */


/* ========== MENU & NAVIGATION ========== */

/* Menu container — white, fixed-top. Drop shadow (Figma: 0 0 8px #00000033)
   appears only once scrolled (.shrink-menu added by custom.js at scroll > 50). */
.menu-container {
  background: var(--color-white);
  margin-top: 0 !important;
  transition: box-shadow var(--transition-standard);
}
.menu-container.shrink-menu {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Container is the mega-dropdown's positioning anchor (position: relative so a
   .position-static dropdown li resolves its containing block to the container,
   letting the mega panel span the full container width below the menu). */
.rcs-menu-padding { position: relative; }

/* --- Desktop logo --- */
.rcs-logo-desktop {
  width: 219px;
  height: 130px;
  transition: width var(--transition-standard), height var(--transition-standard);
}
.shrink-menu .rcs-logo-desktop {
  width: 165px;
  height: 98px;
}

/* --- Desktop two-tier stack: sub-nav (top) over the main nav pill --- */
.rcs-nav-stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

/* Sub Nav — right-aligned utility links, Deep Ocean on white */
.rcs-subnav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding-right: 0.5rem;
}
.rcs-subnav .dropdown-toggle::after { display: none; } /* FA chevron via .has-dropdown instead */

.rcs-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: 0;
  color: var(--color-deep-ocean);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 0.75rem;
  line-height: 1.167;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-standard);
}
.rcs-subnav-link:is(:hover, :focus, :active) { color: var(--color-sea); }

/* --- Main nav row: gradient pill (links) + Request Service button --- */
.rcs-nav-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Blue Sea gradient pill holding the primary nav links */
.rcs-nav-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  background-image: var(--gradient-blue-sea-180);
  border-radius: 300px;
  padding: 0.25rem 1.25rem;
  transition: all var(--transition-standard);
}
.rcs-nav-bar .navbar { position: static; width: 100%; }
.rcs-nav-bar .navbar-nav {
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.rcs-nav-bar .nav-link {
  color: var(--color-white);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 0.875rem;
  line-height: 1.143;
  text-transform: uppercase;
  padding: 0.5rem 0.5rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.rcs-nav-bar .nav-link:is(:hover, :active) { color: var(--color-sea-pale); }
.rcs-nav-bar .has-dropdown::after { color: var(--color-white); }
/* Open toggle: override Bootstrap's dark .show/.active navbar color (reads black) with pale blue */
.rcs-nav-bar .navbar-nav .nav-link:is(.show, .active),
.rcs-nav-bar .navbar-nav .nav-link:is(.show, .active)::after { color: var(--color-sea-pale); }

/* Request Service button keeps the pill's full height, no bottom margin */
.rcs-nav-request .btn { margin-bottom: 0; padding-block: 0.75rem; }

/* --- Shared dropdown caret (FA angle-down) --- */
.dropdown-toggle:not(.has-dropdown)::after { border: 0 !important; margin: 0 !important; }
.has-dropdown { align-items: center; gap: 0.25em; }
.has-dropdown::after {
  content: '\f107'; /* angle-down */
  font-family: 'Font Awesome 7 Sharp';
  border: 0;
  margin-left: 0;
  font-size: inherit;
  vertical-align: middle;
}

/* --- Dropdown menus (simple + mega) --- */
.dropdown-menu {
  background: var(--color-white);
  border: 0;
  box-shadow: var(--box-shadow-dropdown);
  border-radius: 1rem;
  padding: 0.5rem;
}
.dropdown-menu .dropdown-item {
  color: var(--color-deep-ocean);
  font-family: var(--font-inter);
  font-weight: var(--font-weight-medium);
  font-size: 0.95rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.dropdown-menu .dropdown-item:is(:hover, :focus, :active) {
  background-color: var(--color-sea-pale);
  color: var(--color-deep-ocean);
}

/* Mega dropdown spans the container width, dropping just below the menu */
.navbar-expand-xl .navbar-nav .dropdown-menu.mega-dropdown {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  width: auto;
  margin-top: 0.5rem;
}

/* Mega Dropdown — outer row is a plain wrapper around heading + service cards */
.rcs-mega-dropdown-row { background-color: transparent; border-radius: 0; }

/* Each service silo (Air Conditioning, Furnace, etc.) renders as a card */
.rcs-mega-dropdown-group {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: 0.75rem;
  padding: 1rem;
  height: 100%;
  transition-duration: var(--transition-standard);
}
.rcs-mega-dropdown-group:is(:hover, :focus-within) {
  background-color: var(--color-sea-pale);
  border-color: var(--color-sea);
}
.rcs-mega-dropdown-group p { color: var(--color-00dp); transition-duration: var(--transition-standard); }

/* Card links: 1px underline fills left→right on hover, retracts rightward on leave */
.rcs-mega-dropdown-group a { position: relative; display: inline-block; }
.rcs-mega-dropdown-group a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-standard) ease;
}
.rcs-mega-dropdown-group a:is(:hover, :focus)::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The mobile-bar toggler sits outside any .navbar element, so Bootstrap's
   --bs-navbar-toggler-border-color is undefined, which invalidates the
   .navbar-toggler `border` shorthand. Stub it so the shorthand is valid;
   .btn-outline-deep-ocean + .border-2 then provide the visible 2px border. */
.rcs-mobile-btn-bar .navbar-toggler {
  --bs-navbar-toggler-border-color: transparent;
}

/* ========== MOBILE OFFCANVAS ========== */
.rcs-offcanvas {
  background: var(--color-deep-ocean);
  max-width: 85vw;
  width: 400px;
}

.rcs-offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.75rem 1rem;
}

.rcs-offcanvas-logo {
  max-height: 45px;
  width: auto;
}

.rcs-offcanvas-nav .nav-link {
  color: var(--color-gray-50);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-heavy);
  font-size: 1rem;
  line-height: 1.125rem;
  text-transform: uppercase;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--transition-standard), color var(--transition-standard);
}

.rcs-offcanvas-nav .nav-link:hover,
.rcs-offcanvas-nav .nav-link:focus,
.rcs-offcanvas-nav .nav-link[aria-expanded="true"] {
  color: var(--color-sea);
  background: rgba(255, 255, 255, 0.05);
}

.rcs-oc-chevron {
  font-size: 0.75rem;
  transition: transform var(--transition-standard);
}

.rcs-offcanvas-nav .nav-link[aria-expanded="true"] .rcs-oc-chevron {
  transform: rotate(180deg);
}

.rcs-offcanvas-subnav {
  background: rgba(0, 0, 0, 0.2);
}

.rcs-offcanvas-subnav > .nav-item > .nav-link {
  padding-left: 2rem;
  font-size: 0.9rem;
}

.rcs-offcanvas-subnav-inner {
  background: rgba(0, 0, 0, 0.25);
}

.rcs-offcanvas-subnav-inner .nav-link {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-heavy);
  font-size: 0.9rem;
  line-height: 1.375rem;
  text-transform: uppercase;
  padding: 0.65rem 1rem 0.65rem 3rem;
}

.rcs-offcanvas-footer {
  padding: 1rem;
  background: var(--color-deep-ocean-hover);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rcs-offcanvas-footer .btn {
  font-size: 0.85rem;
  padding: 0.65rem 0.5rem;
  margin-bottom: 0;
}
/* ========== END MOBILE OFFCANVAS ========== */
/* ========== END MENU & NAVIGATION ========== */


/* ========== HERO ========== (styles consolidated in the “RCS HERO INTRO” block below) */








/* ========== BUTTONS ========== */
.btn {
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  border-radius: 50rem;
  margin-bottom: 0.5rem;
}

/* Deep Ocean (primary structural brand button) */
.btn-deep-ocean {
  color: var(--color-white);
  background: var(--color-deep-ocean);
  border-color: var(--color-deep-ocean);
}
.btn-deep-ocean:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: var(--color-deep-ocean-hover);
  border-color: var(--color-deep-ocean);
}
.btn-outline-deep-ocean {
  color: var(--color-deep-ocean);
  background: transparent;
  border-color: var(--color-deep-ocean);
}
.btn-outline-deep-ocean:is(:hover, :focus, :active) {
  color: var(--color-deep-ocean-hover);
  background: transparent;
  border-color: var(--color-deep-ocean);
}

/* Sea (bright cyan accent) */
.btn-sea {
  color: var(--color-white);
  background: var(--color-sea);
  border-color: var(--color-sea);
}
.btn-sea:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: var(--color-sea-hover);
  border-color: var(--color-sea);
}
.btn-outline-sea {
  color: var(--color-sea);
  background: transparent;
  border-color: var(--color-sea);
}
.btn-outline-sea:is(:hover, :focus, :active) {
  color: var(--color-sea-hover);
  background: transparent;
  border-color: var(--color-sea);
}

/* Red (primary CTA / action) */
.btn-red {
  color: var(--color-white);
  background: var(--color-red);
  border-color: var(--color-red);
}
.btn-red:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: var(--color-red-hover);
  border-color: var(--color-red);
}
.btn-outline-red {
  color: var(--color-red);
  background: transparent;
  border-color: var(--color-red);
}
.btn-outline-red:is(:hover, :focus, :active) {
  color: var(--color-red-hover);
  background: transparent;
  border-color: var(--color-red);
}

/* Dark Red (deep CTA — Red Rising partner; safe white text) */
.btn-dark-red {
  color: var(--color-white);
  background: var(--color-dark-red);
  border-color: var(--color-dark-red);
}
.btn-dark-red:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: var(--color-dark-red-hover);
  border-color: var(--color-dark-red);
}
.btn-outline-dark-red {
  color: var(--color-dark-red);
  background: transparent;
  border-color: var(--color-dark-red);
}
.btn-outline-dark-red:is(:hover, :focus, :active) {
  color: var(--color-dark-red-hover);
  background: transparent;
  border-color: var(--color-dark-red);
}
/* White */
.btn-white {
  color: var(--color-deep-ocean);
  background: var(--color-white);
  border-color: var(--color-white);
}
.btn-white:is(:hover, :focus, :active) {
  color: var(--color-deep-ocean);
  background: var(--color-gray-50);
  border-color: var(--color-white);
}
.btn-outline-white {
  color: var(--color-white);
  background: transparent;
  border-color: var(--color-white);
}
.btn-outline-white:is(:hover, :focus, :active) {
  color: var(--color-gray-50);
  background: transparent;
  border-color: var(--color-white);
}

/* 00dp (Dark) */
.btn-00dp {
  color: var(--color-white);
  background: var(--color-00dp);
  border-color: var(--color-00dp);
}
.btn-00dp:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: var(--color-01dp);
  border-color: var(--color-00dp);
}
/* Translucent Sea-Pale (hero emergency CTA — glass over gradient) */
.btn-translucent-sea-pale {
  color: var(--color-sea-pale);
  background: rgba(230, 246, 249, 0.35);
  border-color: var(--color-sea-pale);
  border-width: 2px;
}
.btn-translucent-sea-pale:is(:hover, :focus, :active) {
  color: var(--color-sea-pale);
  background: rgba(230, 246, 249, 0.5);
  border-color: var(--color-sea-pale);
}
/* ========== END BUTTONS ========== */


/* ========== COLOR UTILITIES ========== */
/* Text */
.text-sea            { color: var(--color-sea); }
.text-red            { color: var(--color-red); }
.text-dark-red       { color: var(--color-dark-red); }
.text-deep-ocean     { color: var(--color-deep-ocean); }
.text-sea-pale       { color: var(--color-sea-pale); }
.text-dark-outline   { color: var(--color-dark-outline); }
.text-white          { color: var(--color-white); }
.text-gray-50        { color: var(--color-gray-50); }
.text-gray-100       { color: var(--color-gray-100); }
.text-00dp           { color: var(--color-00dp); }
.text-666            { color: #666666; }

/* Background */
.bg-sea              { background-color: var(--color-sea); }
.bg-red              { background-color: var(--color-red); }
.bg-dark-red         { background-color: var(--color-dark-red); }
.bg-deep-ocean       { background-color: var(--color-deep-ocean); }
.bg-deep-ocean-hover { background-color: var(--color-deep-ocean-hover); }
.bg-sea-pale         { background-color: var(--color-sea-pale); }
.bg-white            { background-color: var(--color-white); }

/* Brand gradient backgrounds at fixed angles (Figma: Red Rising / Blue Sea) */
.bg-gradient-red-rising-0   { background-image: var(--gradient-red-rising-0); }
.bg-gradient-red-rising-45  { background-image: var(--gradient-red-rising-45); }
.bg-gradient-red-rising-90  { background-image: var(--gradient-red-rising-90); }
.bg-gradient-red-rising-134 { background-image: var(--gradient-red-rising-134); }
.bg-gradient-red-rising-180 { background-image: var(--gradient-red-rising-180); }
.bg-gradient-blue-sea-0     { background-image: var(--gradient-blue-sea-0); }
.bg-gradient-blue-sea-45    { background-image: var(--gradient-blue-sea-45); }
.bg-gradient-blue-sea-90    { background-image: var(--gradient-blue-sea-90); }
.bg-gradient-blue-sea-134   { background-image: var(--gradient-blue-sea-134); }
.bg-gradient-blue-sea-180   { background-image: var(--gradient-blue-sea-180); }
/* ========== END COLOR UTILITIES ========== */


/* ========== COMPONENTS ========== */

/* Cards */
.card {
  border-radius: 0;
  margin-bottom: 1.5rem;
}
.card.h-100 { margin-bottom: 0; }
.card .card-body { padding: 1.5rem; }

/* Bold list items inherit the surrounding text color so they stay legible on
   any background (light sections → dark text, dark/gradient sections → light text).
   Emphasis comes from font-weight, not a fixed color. */
ul li strong {
  color: inherit;
}

/* Accordion */
.accordion-button [class*="fa-"] {
  transition: transform 0.3s ease-in-out;
}

.accordion-button:not(.collapsed) [class*="fa-"] {
  transform: rotate(180deg);
}

.accordion-item, .accordion-header, .accordion-button {
  background: transparent;
  border: none;
  color: var(--color-deep-ocean);
}

.accordion-item {
  border-bottom: 0.25px solid var(--color-deep-ocean-hover);
}

.accordion-button { font-size: 1rem; }
.accordion-body { font-size: 0.8rem; }

.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-button,
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion-button:not(.collapsed) {
  color: var(--color-deep-ocean);
  box-shadow: none;
}

.accordion-button::after {
  display: none !important;
}

/* Accordion Icon Toggle — collapsed: show plus, hide minus */
.accordion-button .fa-circle-minus,
.accordion-button.collapsed .fa-circle-minus {
  display: none !important;
}

.accordion-button .fa-circle-plus,
.accordion-button.collapsed .fa-circle-plus {
  display: inline-block !important;
}

/* Accordion Icon Toggle — expanded: show minus, hide plus */
.accordion-button:not(.collapsed) .fa-circle-minus {
  display: inline-block !important;
}

.accordion-button:not(.collapsed) .fa-circle-plus {
  display: none !important;
}

/* Icon Stacked */
.icon-stacked {
  display: inline-flex;
  position: relative;
  width: 2em;
  height: 2em;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  transition: box-shadow var(--transition-standard);
  color: var(--color-white);
}

.icon-stacked::before {
  font-family: "Font Awesome 7 Sharp";
  font-weight: 900;
  content: "\f111";
  font-size: 2em;
  position: absolute;
  line-height: 1;
  color: var(--color-deep-ocean);
}

.icon-stacked > i,
.icon-stacked > svg {
  position: relative;
  z-index: 1;
  font-size: 1em;
}

/* Light base */
.icon-stacked.light-base {
  color: var(--color-deep-ocean);
}

.icon-stacked.light-base::before {
  color: var(--color-white);
}

/* Square shape — swaps fa-circle backdrop for fa-square */
.icon-stacked.square {
  border-radius: 0;
}

.icon-stacked.square::before {
  content: "\f0c8"; /* fa-square */
}

/* Sizes */
.icon-stacked.xs  { font-size: 0.5rem; }
.icon-stacked.sm  { font-size: 0.75rem; }
.icon-stacked.md  { font-size: 1rem; }
.icon-stacked.lg  { font-size: 1.5rem; }
.icon-stacked.xl  { font-size: 2rem; }
.icon-stacked.xxl { font-size: 3rem; }

/* Standalone icon size utility (single <i>, not stacked) */
.rcs-icon-3xl { font-size: 3rem; }

.icon-stacked.shadow::before {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.icon-stacked.hoverable {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.icon-stacked.hoverable:hover {
  transform: scale(1.1);
}

.icon-stacked.hoverable:active {
  transform: scale(0.95);
}

/* ========== END COMPONENTS ========== */

/* ========== LINK UTILITIES ========== */
em, u {
  font-style: inherit !important;
  text-decoration: inherit !important;
}

a { text-decoration: none; }

a.link-sea         { color: var(--color-sea); }
a.link-sea:is(:hover, :focus, :active)         { color: var(--color-sea-hover); }
a.link-red         { color: var(--color-red); }
a.link-red:is(:hover, :focus, :active)         { color: var(--color-red-hover); }
a.link-dark-red    { color: var(--color-dark-red); }
a.link-dark-red:is(:hover, :focus, :active)    { color: var(--color-dark-red-hover); }
a.link-deep-ocean  { color: var(--color-deep-ocean); }
a.link-deep-ocean:is(:hover, :focus, :active)  { color: var(--color-deep-ocean-hover); }
/* For inline links on dark / blue-gradient backgrounds (sea/deep-ocean blues fail contrast there). */
a.link-light       { color: var(--color-white); text-decoration: underline; }
a.link-light:is(:hover, :focus, :active)       { color: var(--color-sea-pale); }

[id] {
  scroll-margin-top: 200px; /* based on menu height */
}


/* ========== RCS FOOTER ========== */
.rcs-footer {
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  color: var(--color-00dp);
  background-color: var(--color-gray-50);
}

/* Subtle glass-stroke card around each text column (Figma "Glass Stroke") */
.rcs-footer-card {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--border-radius-standard);
  padding: 1.25rem;
}

.rcs-footer-logo-img {
  width: 100%;
  max-width: 280px;
  height: auto;
}

.rcs-footer-heading {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-red);
  margin-bottom: 0.75rem;
}

.rcs-footer-links {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.rcs-footer-links li + li {
  margin-top: 0.25rem;
}

.rcs-footer .rcs-footer-link {
  color: var(--color-00dp);
  text-decoration: none;
  font-family: var(--font-inter);
  font-weight: var(--font-weight-regular);
  transition: color var(--transition-standard);
}

.rcs-footer .rcs-footer-link:is(:hover, :focus-visible) {
  color: var(--color-red);
  text-decoration: underline;
}

.rcs-footer-contact-item + .rcs-footer-contact-item {
  margin-top: 1rem;
}

.rcs-footer-contact-label {
  color: var(--color-00dp);
  margin-bottom: 0.25rem;
}

.rcs-footer-address {
  font-style: normal;
  font-family: var(--font-inter);
  color: var(--color-00dp);
  margin-bottom: 0;
}

.rcs-footer-socials {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.rcs-footer .rcs-footer-social-link {
  color: var(--color-00dp);
  text-decoration: none;
  transition: color var(--transition-standard);
}

.rcs-footer .rcs-footer-social-link:is(:hover, :focus-visible) {
  color: var(--color-red);
}

/* Decorative pill cluster off the right edge — mirror of .rcs-services-pills,
   anchored to the footer's lower-right and clipped by .rcs-footer overflow. */
.rcs-footer-pills {
  position: absolute;
  right: 0;
  bottom: 2rem;
  z-index: 0;
  width: clamp(6rem, 16vw, 17.125rem);
  aspect-ratio: 274 / 261;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 274 261'%3E%3Cpath d='M274 0H148.5a28.5 28.5 0 0 0 0 57H274Z' fill='%23f40102'/%3E%3Cpath d='M274 102H28.5a28.5 28.5 0 0 0 0 57H274Z' fill='%23f40102'/%3E%3Cpath d='M274 204H148.5a28.5 28.5 0 0 0 0 57H274Z' fill='%2301a0c6'/%3E%3C/svg%3E");
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .rcs-footer { padding: 3rem 0; }
  .rcs-footer-pills { display: none; }
}
/* ========== END RCS FOOTER ========== */


/* ========== MEDIA QUERIES ========== */

/* --- Desktop pill tightens below 1400px so all links fit on one row --- */
@media (max-width: 1399.98px) {
  .rcs-nav-bar { padding-inline: 1rem; }
  .rcs-nav-bar .nav-link { font-size: 0.8125rem; padding-inline: 0.375rem; }
}

/* --- Below XL: desktop two-tier hides; mobile bar + offcanvas take over --- */
@media (max-width: 1199.98px) {
  .rcs-mobile-btn-bar { padding: 0.65rem 0.25rem; }
  /* ~48px tap targets on the hamburger + phone CTA */
  .rcs-mobile-btn-bar .btn { padding-top: 0.75rem; padding-bottom: 0.75rem; }

  /* Mobile logo — centered in the bar */
  .rcs-logo {
    display: block;
    width: 150px;
    height: 89px;
    margin: 0 auto;
    background: url(../img/rcs-logo.svg) center / contain no-repeat;
    transition: width var(--transition-standard), height var(--transition-standard);
  }
  .shrink-menu .rcs-logo { width: 128px; height: 76px; }
}

/* --- Medium screens and below --- */
@media (max-width: 991.98px) {
  .rcs-menu-padding { padding-inline: 1rem; }
}

/* --- Extra small mobile --- */
@media (max-width: 450px) {
  .rcs-menu-padding { padding-inline: 0.5rem; }
}


/* (Old TRUST SIGNALS template block removed — leftover from a prior brand
   swap. The active RCS Trust Closer rules live at the end of this file.) */

/* ========== WCAG AA CONTRAST GUARDS ==========
   --color-sea (#01A0C6, 3.07:1 on white) and its hover (#27AECF)
   fail 4.5:1 against every light surface in the palette
   (white, sea-pale, gray-50…gray-400). Within those
   parents, swap .text-sea / .border-sea
   utility children to deep-ocean so foreground stays
   readable. Existing exception at .btn-deep-ocean keeps
   sea on dark surfaces. */
/* Parent classes wrapped in :where() so this override sits at
   specificity (0,1,0). That keeps the .btn-deep-ocean
   .text-sea exception above (0,1,1) — and any
   .btn-* color modifier — winning over this rule, so icons
   inside dark buttons are never recolored. */
:where(
  .menu-container,
  .navbar-expand-xl .navbar-nav .dropdown-menu,
  .rcs-mega-dropdown-row,
  .rcs-opening, .rcs-opening-form-card,
  .rcs-service-tag, .rcs-service-image-bar, .rcs-service-content,
  .rcs-town-card, .rcs-sa-location-item,
  .rcs-footer,
  .bg-white, .bg-sea-pale,
  .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300, .bg-gray-400
) .text-sea {
  color: var(--color-deep-ocean);
}

:where(
  .menu-container,
  .navbar-expand-xl .navbar-nav .dropdown-menu,
  .rcs-mega-dropdown-row,
  .rcs-opening, .rcs-opening-form-card,
  .rcs-service-tag, .rcs-service-image-bar, .rcs-service-content,
  .rcs-town-card, .rcs-sa-location-item,
  .rcs-footer,
  .bg-white, .bg-sea-pale,
  .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300, .bg-gray-400
) .border-sea {
  border-color: var(--color-deep-ocean);
}
/* ========== END WCAG AA CONTRAST GUARDS ========== */


/* ========== DEFAULT LINK COLOR BY PARENT BG ==========
   Anchors with no color rule inherit the right contrast pair
   from their nearest bg-bearing ancestor. :where() keeps
   specificity at (0,0,1), so any class on the link itself
   (e.g. .link-sea, .btn-*) wins automatically. */

/* Light surfaces — navy text. body is included as the site-wide default
   (body bg is white); darker bg-* and component classes below override
   via source order, so a bare <a> inside .bg-deep-ocean still wins
   the dark treatment. */
:where(
  body,
  .bg-white, .bg-sea-pale,
  .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300, .bg-gray-400,
  .menu-container,
  .navbar-expand-xl .navbar-nav .dropdown-menu,
  .rcs-mega-dropdown-row,
  .rcs-opening, .rcs-opening-form-card,
  .rcs-service-tag, .rcs-service-image-bar, .rcs-service-content,
  .rcs-town-card, .rcs-sa-location-item,
  .rcs-footer
) a:where(:not(.btn)) {
  color: var(--color-deep-ocean);
}
:where(
  body,
  .bg-white, .bg-sea-pale,
  .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300, .bg-gray-400,
  .menu-container,
  .navbar-expand-xl .navbar-nav .dropdown-menu,
  .rcs-mega-dropdown-row,
  .rcs-opening, .rcs-opening-form-card,
  .rcs-service-tag, .rcs-service-image-bar, .rcs-service-content,
  .rcs-town-card, .rcs-sa-location-item,
  .rcs-footer
) a:where(:not(.btn)):where(:hover, :focus-visible) {
  color: var(--color-deep-ocean-hover);
}

/* Mid surfaces (gray-500/700) — white text, sea on hover */
:where(.bg-gray-500, .bg-gray-700, .rcs-sa-callout) a:where(:not(.btn)) {
  color: var(--color-white);
}
:where(.bg-gray-500, .bg-gray-700, .rcs-sa-callout) a:where(:not(.btn)):where(:hover, :focus-visible) {
  color: var(--color-sea);
}

/* Dark/navy surfaces — sea text. Includes the
   image-darkened hero and brand component classes that paint navy. */
:where(
  .bg-deep-ocean, .bg-deep-ocean-hover,
  .bg-dark-outline, .bg-dark-outline-hover,
  .bg-00dp, .bg-black,
  [class*="bg-gradient-blue-sea"],
  .rcs-hero-intro,
  .rcs-trust, .rcs-trust-card
) a:where(:not(.btn)) {
  color: var(--color-sea);
}
:where(
  .bg-deep-ocean, .bg-deep-ocean-hover,
  .bg-dark-outline, .bg-dark-outline-hover,
  .bg-00dp, .bg-black,
  [class*="bg-gradient-blue-sea"],
  .rcs-hero-intro,
  .rcs-trust, .rcs-trust-card
) a:where(:not(.btn)):where(:hover, :focus-visible) {
  color: var(--color-sea-hover);
}

/* Sea surface — deep-ocean text, dark-outline on hover */
:where(.bg-sea) a:where(:not(.btn)) {
  color: var(--color-deep-ocean);
}
:where(.bg-sea) a:where(:not(.btn)):where(:hover, :focus-visible) {
  color: var(--color-dark-outline);
}

/* Red surfaces (Red / Dark Red / Red Rising gradient) — white text,
   sea-pale on hover. Kept separate from the sea-link group above so cyan
   links never sit on a red field. */
:where(.bg-red, .bg-dark-red, [class*="bg-gradient-red-rising"]) a:where(:not(.btn)) {
  color: var(--color-white);
}
:where(.bg-red, .bg-dark-red, [class*="bg-gradient-red-rising"]) a:where(:not(.btn)):where(:hover, :focus-visible) {
  color: var(--color-sea-pale);
}
/* ========== END DEFAULT LINK COLOR BY PARENT BG ========== */


/* ========== RCS HERO INTRO ========== */
/* No top padding: syncHeroMargin() in custom.js sets margin-top to the live
   menu height, so the hero rests flush at the base of the fixed menu. */
.rcs-hero-intro {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Full-bleed shell: the hero art runs wider than the .container the menu uses,
   matching the near-edge-to-edge Figma image. Capped at the 1600px design ref. */
.rcs-hero-shell {
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2vw, 1.5rem);
}

/* Rounded photo card; text is bottom-anchored over the baked-in gradient */
.rcs-hero-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(420px, 60vw, 675px);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 3rem);
  border-radius: 1.5rem;
}

/* Photo fills the card */
.rcs-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Figma gradient overlay (the photos ship clean) — Deep Ocean at the bottom
   fading to a faint light tint up top, keeping the white text legible */
.rcs-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(0deg, rgba(20, 1, 73, 0.62) 12%, rgba(205, 205, 205, 0.286) 99%);
  pointer-events: none;
}

/* Content sits above the photo */
.rcs-hero-intro .rcs-hero-content {
  position: relative;
  z-index: 10;
}

/* Kicker above the H1 — Futura Bold 32/40 (no exact match in the type scale) */
.rcs-hero-overline {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.25;
  text-transform: uppercase;
}

/* Lead paragraph reading-width cap (Figma ~1014px) */
.rcs-hero-lead { max-width: 63.375rem; }

/* ========== HOUSECALL PRO LEAD FORM ========== */
/* Styling for hcp-lead-form.php. These values are LOAD-BEARING — read the
   constraints block in that file before changing any of them.
     • width:100% is not redundant. Both form cards (.rcs-opening-form on
       sub-pages, .rcs-form-card on /contact) are flex columns, and a flex item
       that isn't explicitly sized collapses to the iframe's intrinsic 300px
       default instead of filling the card.
     • height:1120px is the PRE-RESIZE reservation that stops the page shifting
       on load. Housecall Pro's script then sets an inline height (~870px) via
       JS, and an inline style outranks this rule, so auto-resize still wins.
   The only inline style left in the PHP is the per-call max-width, which is a
   function parameter rather than styling. */
.rcs-hcp-form {
  width: 100%;
  margin-inline: auto;
}
#hcp-lead-iframe {
  width: 100%;
  height: 1120px;
  border: 0;
  display: block;
  border-radius: .75rem;
  background: #fff;
}
/* ========== END HOUSECALL PRO LEAD FORM ========== */

/* Elfsight Google Reviews badge in the hero trust row. The widget injects
   asynchronously, so without a reserved box it starts at 0x0 and snaps to full
   size on hydrate — shifting the BBB badge beside it and the hero content above
   it, right inside the LCP window. Measured at a fixed 229x50 (identical at
   390px and 1512px viewports), so the reservation is exact rather than padded.
   Re-measure if the Elfsight widget layout is ever changed in their dashboard. */
.rcs-hero-reviews {
  min-width: 229px;
  min-height: 50px;
}
/* ========== END RCS HERO INTRO ========== */


/* ========== RCS INTRO (About Us opening block) ========== */
.rcs-intro {
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Intro photo: natural aspect at full column width; row uses align-items-center
   to vertically center the photo against the taller copy column. */
.rcs-intro-img {
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
}
/* ========== END RCS INTRO ========== */


/* ========== RCS OPENING SECTION ========== */
.rcs-opening {
  background-color: var(--color-white);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Form card — Deep Ocean surface holding the include() form */
.rcs-form-card {
  background-color: var(--color-deep-ocean);
  border: 2px solid var(--color-sea);
  border-radius: 1.25rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  height: 100%;
  overflow: hidden;
}

/* Form card footer — alternative-path CTAs (book online, call now) on a
   sea-pale panel that contrasts against the deep-ocean card body. Negative
   margins pull the panel out to the card's full inner width and bottom edge so
   it reads as a true attached footer; bottom-corner radii match the card. */
.rcs-form-card-footer {
  margin: clamp(1.5rem, 2.5vw, 2rem) calc(-1 * clamp(1.5rem, 2.5vw, 2rem)) calc(-1 * clamp(1.5rem, 2.5vw, 2rem));
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 2.5vw, 2rem);
  background-color: var(--color-sea-pale);
}

.rcs-form-card-footer-callout {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Overline pill — Sea chip with Futura text */
.rcs-overline-pill {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-sea);
  color: var(--color-white);
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
}

/* Advantage cards — Neutral-50 tile with a title + top-right FA icon (or a brand
   logo). On hover the icon flips FA Regular → Solid and fills with a Blue Sea
   gradient (icon cards only; logo cards carry no FA icon). */
.rcs-advantage-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  min-height: 6.625rem;
  padding: 1.25rem;
  background-color: var(--color-gray-50);
  border-radius: 0.75rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

/* Inline variant — logo beside the text (LG Pro, TVA) */
.rcs-advantage-card-inline {
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
}

/* Title left, icon top-right */
.rcs-advantage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.rcs-advantage-icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-deep-ocean);
}
.rcs-advantage-icon .fa-solid { display: none; }

.rcs-advantage-title { margin: 0; color: var(--color-deep-ocean); }
.rcs-advantage-body  { margin: 0; color: var(--color-00dp); }

/* Brand logos */
.rcs-advantage-logo {
  flex: 0 0 auto;
  display: block;
  max-width: 100%;
  height: auto;
}

/* Hover — Regular → Solid + Blue Sea gradient fill on the icon */
.rcs-advantage-card:is(:hover, :focus-within) .rcs-advantage-icon .fa-regular { display: none; }
.rcs-advantage-card:is(:hover, :focus-within) .rcs-advantage-icon .fa-solid {
  display: inline-block;
  background-image: var(--gradient-blue-sea-134);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ========== END RCS OPENING SECTION ========== */


/* ========== RCS PILLARS (What We Stand By) ========== */
.rcs-pillars {
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Three joined panels — gray by default; the hovered panel flips to white */
.rcs-pillars-overview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rcs-pillar { display: flex; flex-direction: column; }

/* Icon tab — rounded-top tongue on the panel's top-left */
.rcs-pillar-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 72px;
  border-radius: 3.125rem 3.125rem 0 0;
  background-color: var(--color-gray-300);
  transition: background-color var(--transition-standard);
}
.rcs-pillar-tab i {
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-white);
  transition: color var(--transition-standard);
}

.rcs-pillar-body {
  flex: 1 1 auto;
  min-height: 280px;
  padding: clamp(1.75rem, 2.5vw, 2.5rem) clamp(1.5rem, 3vw, 3.125rem);
  background-color: var(--color-gray-300);
  border-left: 2px solid transparent;
  border-radius: 0 1.25rem 1.25rem 1.25rem;
  transition: background-color var(--transition-standard), box-shadow var(--transition-standard);
}
.rcs-pillar-title { margin: 0; color: var(--color-gray-700); transition: color var(--transition-standard); }
.rcs-pillar-text  { color: var(--color-gray-700); transition: color var(--transition-standard); }

/* Hover — panel flips white, icon + title to Deep Ocean, body text to 00dp */
.rcs-pillar:is(:hover, :focus-within) { position: relative; z-index: 1; }
.rcs-pillar:is(:hover, :focus-within) .rcs-pillar-tab { background-color: var(--color-white); }
.rcs-pillar:is(:hover, :focus-within) .rcs-pillar-tab i { color: var(--color-deep-ocean); }
.rcs-pillar:is(:hover, :focus-within) .rcs-pillar-body {
  background-color: var(--color-white);
}
.rcs-pillar:is(:hover, :focus-within) .rcs-pillar-title { color: var(--color-deep-ocean); }
.rcs-pillar:is(:hover, :focus-within) .rcs-pillar-text  { color: var(--color-00dp); }

/* lg+ — the panels join into one rounded bar */
@media (min-width: 992px) {
  .rcs-pillars-overview { flex-direction: row; gap: 0; }
  .rcs-pillar { flex: 1 1 0; }
  .rcs-pillar-body { border-radius: 0; }
  .rcs-pillar:not(:first-child) .rcs-pillar-body { border-left-color: var(--color-gray-400); }
  .rcs-pillar:first-child .rcs-pillar-body { border-bottom-left-radius: 1.25rem; }
  .rcs-pillar:last-child  .rcs-pillar-body { border-top-right-radius: 1.25rem; border-bottom-right-radius: 1.25rem; }
}
/* ========== END RCS PILLARS ========== */


/* ========== RCS REVIEWS (Hear From Our Neighbors) ========== */
.rcs-reviews {
  padding-block: clamp(2.5rem, 5vw, 5rem);
}
/* ========== END RCS REVIEWS ========== */


/* ========== RCS SERVICES SECTION ========== */
.rcs-services {
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-50);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}
/* Keep section content above the decorative pills */
.rcs-services > .container { position: relative; z-index: 1; }

/* Decorative pill shapes off the right edge — SVG; shrink with the viewport so
   they barely overlap content on narrower screens. Two Red + one Sea, rounded
   on the left, running off the right edge. */
.rcs-services-pills {
  position: absolute;
  top: 3.5rem;
  right: 0;
  z-index: 0;
  width: clamp(6rem, 16vw, 17.125rem);
  aspect-ratio: 274 / 261;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 274 261'%3E%3Cpath d='M274 0H148.5a28.5 28.5 0 0 0 0 57H274Z' fill='%23f40102'/%3E%3Cpath d='M274 102H28.5a28.5 28.5 0 0 0 0 57H274Z' fill='%23f40102'/%3E%3Cpath d='M274 204H148.5a28.5 28.5 0 0 0 0 57H274Z' fill='%2301a0c6'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Service card — Blue Sea gradient tile: photo + badge, copy, read-more, CTA */
.rcs-service-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 0.625rem;
  background-image: var(--gradient-blue-sea-180);
  border-radius: 1.25rem;
}

/* Photo header with red icon badge top-left */
.rcs-service-img {
  position: relative;
  height: 137px;
  border-radius: 1.25rem;
  overflow: hidden;
}
.rcs-service-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rcs-service-badge {
  position: absolute;
  top: 0.875rem;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: 1.5rem;
}
/* Badge icon flips FA Regular → Solid on card hover (weight swap, webfont kit) */
.rcs-service-card:is(:hover, :focus-within) .rcs-service-badge i { font-weight: 900; }

/* Card body — text block + CTA stack */
.rcs-service-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0.625rem;
}
.rcs-service-card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  line-height: 2rem;
  text-transform: uppercase;
  color: var(--color-gray-50);
}

/* Copy is clamped to 3 lines until Read More expands the card */
.rcs-service-copy {
  margin: 0;
  color: var(--color-white);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcs-service-text:has(.rcs-service-more.show) .rcs-service-copy {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.rcs-service-list {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  color: var(--color-white);
}
.rcs-service-list li { margin-bottom: 0.25rem; }

/* CTA stack pinned to the bottom of the card */
.rcs-service-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: auto;
}

/* Read More — plain text toggle with plus / minus, Bootstrap collapse */
.rcs-readmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: transparent;
  border: 0;
  color: var(--color-white);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 0.625rem;
  line-height: 0.75rem;
  text-transform: uppercase;
}
.rcs-readmore-btn .rcs-readmore-hide { display: none; }
.rcs-readmore-btn[aria-expanded="true"] .rcs-readmore-show { display: none; }
.rcs-readmore-btn[aria-expanded="true"] .rcs-readmore-hide { display: inline-flex; }

/* Service action pill — light Neutral-50 surface, Deep Ocean text */
.rcs-service-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-gray-50);
  color: var(--color-deep-ocean);
  border: 0;
  border-radius: 50px;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.125;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-standard);
}
.rcs-service-btn:is(:hover, :focus) {
  background-color: var(--color-white);
  color: var(--color-deep-ocean);
}

/* Dropdown menu for the multi-page services */
.rcs-service-card .dropdown-menu {
  min-width: 100%;
  border: 0;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 0.5rem;
}
.rcs-service-card .dropdown-item {
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-inter);
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  color: var(--color-deep-ocean);
}
.rcs-service-card .dropdown-item:is(:hover, :focus, :active) {
  background-color: var(--color-sea-pale);
  color: var(--color-deep-ocean);
}
/* ========== END RCS SERVICES SECTION ========== */


/* ========== RCS FIREPLACE SECTION ========== */
.rcs-fireplace {
  background-color: var(--color-deep-ocean);
}

/* Card wrap — single rounded surface housing the trigger + collapsible body */
.rcs-fireplace-card-wrap {
  background-color: var(--color-sea-pale);
  border: 1px solid var(--color-gray-50);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: background-color var(--transition-standard);
}

.rcs-fireplace-card-wrap:hover,
.rcs-fireplace-card-wrap:focus-within {
  background-color: var(--color-white);
}

/* Trigger — full-width button, transparent so the wrap surface shows through */
.rcs-fireplace-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.rcs-fireplace-card-title {
  margin: 0;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.125rem;
  text-transform: uppercase;
  color: var(--color-deep-ocean);
}

.rcs-fireplace-card-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-deep-ocean);
  font-size: 1rem;
  line-height: 1;
}

/* Plus when collapsed, minus when expanded — specificity beats FA's `.fa-regular { display: inline-block }` */
.rcs-fireplace-card .fa-circle-minus { display: none; }
.rcs-fireplace-card[aria-expanded="true"] .fa-circle-plus { display: none; }
.rcs-fireplace-card[aria-expanded="true"] .fa-circle-minus { display: inline-block; }

/* Collapse body — sits flush under the trigger inside the same wrap */
.rcs-fireplace-card-body {
  padding: 0 1.25rem 0.875rem;
}
/* ========== END RCS FIREPLACE SECTION ========== */


/* ========== RCS ABOUT US SECTION ========== */
.rcs-about {
  background-color: var(--color-white);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Reviews header — wraps cleanly on narrow viewports */
.rcs-about-reviews-header h3 { line-height: 1.2; }

/* Accordion — pill-shaped items; one open at a time via data-bs-parent.
   Bootstrap CSS variables are set on .accordion so first/last item border-radius
   doesn't get auto-clipped to the framework default. */
.rcs-about-accordion {
  --bs-accordion-border-radius: 3000px;
  --bs-accordion-inner-border-radius: 3000px;
  --bs-accordion-bg: var(--color-sea-pale);
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-color: var(--color-deep-ocean);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--color-deep-ocean);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(1, 160, 198, 0.25);
}

/* Background lives on the ITEM (not the button) so the accordion body sits
   inside the same pill — the pill expands smoothly when the body shows.
   Border-radius starts at 50rem (full pill) and eases down to 1rem when
   expanded so the taller, content-filled card reads as a rounded card. */
.rcs-about-accordion .accordion-item {
  background-color: var(--color-sea-pale);
  border: 0;
  margin-bottom: 0.5rem;
  border-radius: 2rem;
  transition: border-radius 0.2s ease;
}

.rcs-about-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-radius: 1rem;
}

.rcs-about-accordion .accordion-item:last-child { margin-bottom: 0; }

/* Override the global `.accordion-button:not(.collapsed) [class*="fa-"]
   { transform: rotate(180deg) }` rule defined upstream — we don't want any
   rotation on the icon badges or the circle-plus toggle in this section. */
.rcs-about-accordion .accordion-button [class*="fa-"],
.rcs-about-accordion .accordion-button:not(.collapsed) [class*="fa-"] {
  transform: none;
  transition: none;
}

.rcs-about-accordion .accordion-header { margin: 0; }

.rcs-about-accordion .accordion-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 1.25rem;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
}

.rcs-about-accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--color-deep-ocean);
  box-shadow: none;
}

/* Hide Bootstrap's default chevron — we render our own circle-plus / minus */
.rcs-about-accordion .accordion-button::after {
  content: none;
  display: none;
}

/* Left-side icon badge: sea circle with white FA icon */
.rcs-about-accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-sea);
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1;
}

/* Regular variant by default; swap to Solid on hover OR when expanded.
   4-class specificity beats FA's `.fa-regular { display: inline-block }`. */
.rcs-about-accordion .accordion-button .rcs-about-accordion-icon .fa-solid { display: none; }
.rcs-about-accordion .accordion-button .rcs-about-accordion-icon .fa-regular { display: inline-block; }

.rcs-about-accordion .accordion-button:hover .rcs-about-accordion-icon .fa-regular,
.rcs-about-accordion .accordion-button:not(.collapsed) .rcs-about-accordion-icon .fa-regular { display: none; }

.rcs-about-accordion .accordion-button:hover .rcs-about-accordion-icon .fa-solid,
.rcs-about-accordion .accordion-button:not(.collapsed) .rcs-about-accordion-icon .fa-solid { display: inline-block; }

.rcs-about-accordion-text {
  flex: 1 1 auto;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.4;
  text-transform: uppercase;
}

/* Right-side toggle indicator — circle-plus collapsed, circle-minus expanded.
   Pure visibility swap, no rotation. */
.rcs-about-accordion-toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--color-deep-ocean);
  font-size: 1.125rem;
  line-height: 1;
}

.rcs-about-accordion .accordion-button .rcs-about-accordion-toggle .fa-circle-minus { display: none; }
.rcs-about-accordion .accordion-button:not(.collapsed) .rcs-about-accordion-toggle .fa-circle-plus { display: none; }
.rcs-about-accordion .accordion-button:not(.collapsed) .rcs-about-accordion-toggle .fa-circle-minus { display: inline-block; }

/* Body sits inside the pill. Indented to align under the title (past the icon). */
.rcs-about-accordion .accordion-body {
  padding: 0 1.25rem 0.875rem 4rem;
  background-color: transparent;
}

/* Photo marquee — endless horizontal scroll over stationary light polka-dot bg
   (sparse sea circles on white, matching the Figma design — NOT the
   dense dark hero polka pattern). */
.rcs-about-marquee {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  background-color: var(--color-white);
  background-image: radial-gradient(circle, var(--color-sea-pale) 38px, transparent 40px);
  background-size: 220px 220px;
  background-position: 0 0;
  padding-block: 2rem;
  padding-bottom: 2.5rem;
}

.rcs-about-marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: rcs-about-scroll 60s linear infinite;
}

.rcs-about-marquee:hover .rcs-about-marquee-track {
  animation-play-state: paused;
}

/* Items match the source photos' 3:4 portrait orientation. */
.rcs-about-marquee-item {
  flex: 0 0 auto;
  height: clamp(260px, 28vw, 400px);
  aspect-ratio: 3 / 4;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  background-color: var(--color-sea-pale);
}

.rcs-about-marquee-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes rcs-about-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rcs-about-marquee-track { animation: none; }
}
/* ========== END RCS ABOUT US SECTION ========== */


/* ========== RCS FINANCING SECTION ========== */
.rcs-financing {
  background-color: var(--color-deep-ocean);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

.rcs-financing-icon {
  max-width: 100%;
  height: auto;
}

/* Benefits card — sea surface holding the 3×2 benefit grid */
.rcs-financing-benefits {
  background-color: var(--color-sea);
  border-radius: 1.25rem;
  padding: clamp(1rem, 1.5vw, 1.25rem);
}

/* Individual benefit cell */
.rcs-financing-benefit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  height: 100%;
}

.rcs-financing-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background-color: var(--color-deep-ocean);
  color: var(--color-white);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.rcs-financing-benefit-title {
  margin: 0;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.125rem;
  text-transform: uppercase;
  color: var(--color-white);
}

.rcs-financing-benefit-body {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 0.875rem;
  line-height: 1.571;
  color: var(--color-white);
}

/* Financing partner card — Wisetack & Synchrony — sea-pale surface */
.rcs-financing-option {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: var(--color-sea-pale);
  border-radius: 1.25rem;
  padding: 1.25rem;
}

.rcs-financing-option-logo {
  height: 2rem;
  width: auto;
  max-width: 60%;
  align-self: flex-start;
}
/* ========== END RCS FINANCING SECTION ========== */


/* ========== RCS MAINTENANCE SECTION ========== */
/* Deep Ocean section. Half-circle white border at the bottom edge sits on
   ::after, above content. */
.rcs-maintenance {
  background-color: var(--color-deep-ocean);
  padding-block: 5rem;
}

.rcs-maintenance > .container {
  position: relative;
  z-index: 1;
}

/* Left card — Comfort Plan (sea-pale surface) */
.rcs-maintenance-plan-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: var(--color-sea-pale);
  border-radius: 1.25rem;
  padding: 1.25rem;
}

.rcs-maintenance-plan-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem;
  background-color: rgba(1, 160, 198, 0.15);
  border-radius: 1.25rem;
}

.rcs-maintenance-plan-price {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background-color: var(--color-sea);
  border-radius: 3000px;
  color: var(--color-white);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 0.875rem;
  line-height: 1;
  text-transform: uppercase;
}

.rcs-maintenance-plan-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rcs-maintenance-plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rcs-maintenance-plan-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-dark-outline);
  font-size: 1rem;
  line-height: 1.5;
}

.rcs-maintenance-plan-list .fa-circle-check {
  color: var(--color-sea);
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* Right card — Maintenance overview (sea surface) */
.rcs-maintenance-overview-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background-color: var(--color-sea);
  border-radius: 1.25rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  justify-content: center;
}

.rcs-maintenance-overview-icon {
  max-width: 100%;
  height: auto;
  align-self: flex-start;
  margin-bottom: 1rem;
}

/* Overline pill — deep-ocean surface (sea card needs a darker pill) */
.rcs-maintenance-overview-overline {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.25rem 1rem;
  background-color: var(--color-deep-ocean);
  color: var(--color-white);
  border-radius: 0.5rem;
}
/* ========== END RCS MAINTENANCE SECTION ========== */


/* ========== RCS SERVICE AREA SECTION ========== */
.rcs-service-area {
  background-color: var(--color-white);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Map image — rounded to match the project's card radius */
.rcs-service-area-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

/* Location pill — deep-ocean surface, sea icon badge on the left.
   Anchor (linked communities) and div (current-location pill) share the
   layout/typography; only the bg + cursor differ. */
.rcs-service-area-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background-color: var(--color-deep-ocean);
  border-radius: 3000px;
  color: var(--color-white);
  text-decoration: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  transition: filter var(--transition-standard);
}

a.rcs-service-area-pill:is(:hover, :focus-visible) {
  color: var(--color-white);
  text-decoration: none;
  filter: brightness(1.08);
}

/* Current location (Monroe) — Classic Gradient bg, no link/cursor */
.rcs-service-area-pill-current {
  background: linear-gradient(63deg, var(--color-deep-ocean) 22.7%, var(--color-sea) 77.3%);
  cursor: default;
}

.rcs-service-area-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-sea);
  flex-shrink: 0;
}

.rcs-service-area-pill-text {
  flex: 1 1 auto;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 0.875rem;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Don't See Your Location?" callout — sea-pale surface with the curve
   SVG anchored to the bottom-right corner. */
.rcs-service-area-callout {
  position: relative;
  background-color: var(--color-sea-pale);
  border-radius: 1.25rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.rcs-service-area-callout-content {
  position: relative;
  z-index: 1;
  max-width: 60%;
}

.rcs-service-area-callout-curve {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45%;
  max-width: 320px;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

@media (max-width: 575.98px) {
  .rcs-service-area-callout-content { max-width: none; }
  .rcs-service-area-callout-curve { display: none; }
}
/* ========== END RCS SERVICE AREA SECTION ========== */


/* ========== RCS SPECIALS & PROMOS SECTION ========== */
.rcs-promos {
  background-color: var(--color-white);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Promo "ticket" card — gradient header + light body, dashed bottom for tear-off vibe */
.rcs-promo-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-sea-pale);
  border-radius: 1.25rem;
  border-bottom: 4px dashed var(--color-white);
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.rcs-promo-card-header {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-deep-ocean);
  border-bottom: 2px dashed var(--color-sea-pale);
}

.rcs-promo-card-heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rcs-promo-card-amount {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: clamp(2.25rem, 3.5vw, 3.5rem);
  line-height: 1.143;
  text-transform: uppercase;
}

.rcs-promo-card-subtitle {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.375rem, 2vw, 2rem);
  line-height: 1.25;
  text-transform: uppercase;
}

.rcs-promo-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  text-align: center;
  flex: 1 1 auto;
}

.rcs-promo-card-text {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: var(--font-weight-semibold);
  font-size: 1.125rem;
  line-height: 1.444;
  color: var(--color-dark-outline);
}

.rcs-promo-card-disclaimer {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 0.75rem;
  line-height: 1.667;
  color: var(--color-dark-outline);
}
/* ========== END RCS SPECIALS & PROMOS SECTION ========== */


/* ========== RCS FAQ SECTION ========== */
.rcs-faq {
  background-color: var(--color-deep-ocean);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Accordion — minimal style: white text on deep-ocean, sea-pale underline */
.rcs-faq-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-color: var(--color-white);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--color-white);
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 0.625rem;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0.5rem;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(1, 160, 198, 0.25);
}

.rcs-faq-accordion .accordion-item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-sea-pale);
}

.rcs-faq-accordion .accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
}

.rcs-faq-accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--color-white);
  box-shadow: none;
}

/* Hide Bootstrap's default chevron — we render our own circle-plus / minus */
.rcs-faq-accordion .accordion-button::after {
  content: none;
  display: none;
}

.rcs-faq-text {
  flex: 1 1 auto;
  font-family: var(--font-inter);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.444;
  color: var(--color-white);
  text-transform: none;
}

.rcs-faq-toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--color-sea);
  font-size: 1rem;
  line-height: 1;
}

/* Plus collapsed, minus expanded — visibility swap, no rotation. Override the
   global .accordion-button:not(.collapsed) [class*="fa-"] { rotate(180deg) }. */
.rcs-faq-accordion .accordion-button [class*="fa-"],
.rcs-faq-accordion .accordion-button:not(.collapsed) [class*="fa-"] {
  transform: none;
  transition: none;
}

.rcs-faq-accordion .accordion-button .fa-circle-minus { display: none; }
.rcs-faq-accordion .accordion-button:not(.collapsed) .fa-circle-plus { display: none; }
.rcs-faq-accordion .accordion-button:not(.collapsed) .fa-circle-minus { display: inline-block; }

.rcs-faq-accordion .accordion-body {
  color: var(--color-sea-pale);
  font-family: var(--font-inter);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.rcs-faq-accordion .accordion-body a {
  color: var(--color-sea);
  text-decoration: underline;
}

.rcs-faq-accordion .accordion-body a:hover,
.rcs-faq-accordion .accordion-body a:focus {
  color: var(--color-white);
}
/* ========== END RCS FAQ SECTION ========== */


/* ========== RCS TRUST CLOSER SECTION ========== */
/* Vertical gradient — deep ocean bottom → mid blue top. */
.rcs-trust {
  background-color: var(--color-deep-ocean);
  background-image: linear-gradient(to top, var(--color-deep-ocean) 0%, var(--gradient-ocean-mid) 100%);
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* Compiled van + shapes banner — anchored bottom-right, lg+ only */
.rcs-trust-image {
  display: none;
}

@media (min-width: 992px) {
  .rcs-trust-image {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
    max-width: 720px;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }
  .rcs-trust > .container {
    position: relative;
    z-index: 1;
  }
}

/* Card wrap — single rounded surface housing the trigger + collapsible body.
   Same expansion pattern as the Fireplace cards. */
.rcs-trust-card-wrap {
  background-color: var(--color-sea-pale);
  border: 1px solid var(--color-gray-50);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: background-color var(--transition-standard);
}

.rcs-trust-card-wrap:hover,
.rcs-trust-card-wrap:focus-within {
  background-color: var(--color-white);
}

.rcs-trust-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

/* Sea badge with white solid icon at the top of the card */
.rcs-trust-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-sea);
  color: var(--color-white);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.rcs-trust-card-title {
  margin: 0;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.125rem;
  text-transform: uppercase;
  color: var(--color-deep-ocean);
}

.rcs-trust-card-toggle {
  display: inline-flex;
  align-items: center;
  color: var(--color-deep-ocean);
  font-size: 1rem;
  line-height: 1;
}

/* Plus collapsed, minus expanded — visibility swap, no rotation */
.rcs-trust-card .fa-circle-minus { display: none; }
.rcs-trust-card[aria-expanded="true"] .fa-circle-plus { display: none; }
.rcs-trust-card[aria-expanded="true"] .fa-circle-minus { display: inline-block; }

/* Collapse body — sits flush under the trigger inside the same wrap */
.rcs-trust-card-body {
  padding: 0 1rem 0.875rem;
  background-color: transparent;
}
/* ========== END RCS TRUST CLOSER SECTION ========== */


/* ========== RCS FEATURED PRODUCTS SECTION ========== */
.rcs-products {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Decorative pill shapes off the LEFT edge — mirror of .rcs-services-pills.
   One Red + two Sea, rounded on the right, running off the left edge. */
.rcs-products-pills {
  position: absolute;
  top: clamp(2rem, 6.5vw, 5rem);
  left: 0;
  z-index: 0;
  width: clamp(6rem, 16vw, 17.125rem);
  aspect-ratio: 274 / 261;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 274 261'%3E%3Cpath d='M0 0H125.5a28.5 28.5 0 0 1 0 57H0Z' fill='%23f40102'/%3E%3Cpath d='M0 102H245.5a28.5 28.5 0 0 1 0 57H0Z' fill='%2301a0c6'/%3E%3Cpath d='M0 204H125.5a28.5 28.5 0 0 1 0 57H0Z' fill='%2301a0c6'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Product card — Neutral-50 tile, centered content, full-width red CTA pinned to base */
.rcs-product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  padding: 1.875rem 2.5rem;
  text-align: center;
  background-color: var(--color-gray-50);
  border-radius: 0.75rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

/* Reserve two lines so the photos align across cards regardless of title length */
.rcs-product-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  margin: 0;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 1.5rem;
  line-height: 2rem;
  text-transform: uppercase;
  color: var(--color-black);
}

/* Transparent product PNG sits contained + centered in a fixed-height box */
.rcs-product-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(220px, 26vw, 323px);
}
.rcs-product-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Absorb extra height so the CTA buttons share a baseline across cards */
.rcs-product-copy {
  flex: 1 1 auto;
  margin: 0;
}

.rcs-brand-heading {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.25;
}

/* Brand logo marquee — full-bleed endless scroll, edges faded via mask */
.rcs-brand-marquee {
  position: relative;
  overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.rcs-brand-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.75rem);
  width: max-content;
  animation: rcs-brand-scroll 45s linear infinite;
}

.rcs-brand-marquee:hover .rcs-brand-marquee-track {
  animation-play-state: paused;
}

.rcs-brand-logo {
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: clamp(2.5rem, 4.5vw, 3.5rem);
  max-width: clamp(8rem, 13vw, 10rem);
  object-fit: contain;
}

/* Extra-wide wordmarks (e.g. Honeywell) — tighter width cap so they don't
   dominate the strip; object-fit: contain keeps them proportional. */
.rcs-brand-logo-narrow {
  max-width: clamp(5.5rem, 9vw, 7rem);
}

@keyframes rcs-brand-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* No motion → static, wrapped, centered logo grid (one set is enough) */
@media (prefers-reduced-motion: reduce) {
  .rcs-brand-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .rcs-brand-marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* ========== END RCS FEATURED PRODUCTS SECTION ========== */


/* ========== RCS MAINTENANCE / PLANS TABBED SECTION ========== */
.rcs-tabbed {
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Tab bar — equal-width folder tabs, rounded tops, bottom-aligned */
.rcs-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.rcs-tabs .nav-item { flex: 1 1 0; min-width: 0; }

.rcs-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 1rem 1.25rem 1.25rem;
  border: 0;
  border-radius: 0.75rem 0.75rem 0 0;
  background-color: var(--color-gray-50);
  color: var(--color-gray-600);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.125;
  text-transform: uppercase;
  text-align: left;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  transition: background-color var(--transition-standard), color var(--transition-standard);
}
.rcs-tab i { font-size: 1.5rem; flex-shrink: 0; }
.rcs-tab:is(:hover, :focus-visible) { color: var(--color-deep-ocean); }
.rcs-tab.active {
  background-color: var(--color-deep-ocean);
  color: var(--color-white);
}

/* Tab panel — neutral surface; deep-ocean top rule connects to the active tab */
.rcs-tab-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--color-gray-50);
  border-top: 6px solid var(--color-deep-ocean);
  border-radius: 0 0 0.75rem 0.75rem;
}

/* Cap header line length; left-aligned per design */
.rcs-tab-header { max-width: 56rem; }

.rcs-tab-body,
.rcs-tab-ctas { margin-top: clamp(1.5rem, 3vw, 2.125rem); }

.rcs-tab-col-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  line-height: 2rem;
  text-transform: uppercase;
  color: var(--color-deep-ocean);
}

/* Icon + copy benefit row */
.rcs-tab-benefit {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-block: 0.75rem;
}
.rcs-tab-benefit-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  border: 2px solid var(--color-deep-ocean);
  color: var(--color-deep-ocean);
  font-size: 1.125rem;
  transition: background-color var(--transition-standard), border-color var(--transition-standard), color var(--transition-standard);
}
/* Hover/focus — icon fills red, glyph turns solid white (webfont weight swap) */
.rcs-tab-benefit:is(:hover, :focus-within) .rcs-tab-benefit-icon {
  border-color: var(--color-red);
  background-color: var(--color-red);
  color: var(--color-white);
}
.rcs-tab-benefit:is(:hover, :focus-within) .rcs-tab-benefit-icon i { font-weight: 900; }
.rcs-tab-benefit-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.125;
  text-transform: uppercase;
  color: var(--color-00dp);
}
.rcs-tab-benefit-text {
  font-size: 0.875rem;
  line-height: 1.571;
  color: var(--color-00dp);
}

/* Vertical card (financing partners, warranties) */
.rcs-tab-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 1.5rem;
  background-color: var(--color-white);
  border-radius: 0.75rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.rcs-tab-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-deep-ocean);
  color: var(--color-white);
  font-size: 1.25rem;
  transition: background-color var(--transition-standard);
}
/* Hover/focus — icon shifts deep-ocean → red, glyph turns solid */
.rcs-tab-card:is(:hover, :focus-within) .rcs-tab-card-icon { background-color: var(--color-red); }
.rcs-tab-card:is(:hover, :focus-within) .rcs-tab-card-icon i { font-weight: 900; }
.rcs-tab-card-title {
  margin: 0;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.125;
  text-transform: uppercase;
  color: var(--color-deep-ocean);
}
.rcs-tab-card-text { margin: 0; font-size: 0.875rem; line-height: 1.571; }
.rcs-tab-card .link-sea { margin-top: auto; }   /* pin link to card base */

/* Optional bottom banner (Blue Sea gradient) */
.rcs-tab-banner {
  margin-top: clamp(1.5rem, 3vw, 2.125rem);
  padding: clamp(1.25rem, 2.5vw, 1.875rem);
  border-radius: 1.25rem;
  color: var(--color-white);
}
.rcs-tab-banner-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  line-height: 2rem;
  text-transform: uppercase;
  color: var(--color-white);
}
.rcs-tab-banner p { margin: 0; color: var(--color-white); }

/* Stack tabs below lg — full-width, fully rounded */
@media (max-width: 991.98px) {
  .rcs-tabs { flex-direction: column; align-items: stretch; }
  .rcs-tab { border-radius: 0.75rem; }
  .rcs-tab-panel { border-radius: 0.75rem; }
}
/* ========== END RCS MAINTENANCE / PLANS TABBED SECTION ========== */


/* ========== RCS COMMUNITY INVOLVEMENT SECTION ========== */
.rcs-community {
  background-color: var(--color-gray-50);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}
/* Team photo fills its column (cover); min-height keeps it visible when stacked */
.rcs-community-img {
  width: 100%;
  height: 100%;
  min-height: 14rem;
  object-fit: cover;
  border-radius: 1.25rem;
}
/* ========== END RCS COMMUNITY INVOLVEMENT SECTION ========== */


/* ========== RCS SERVICE AREA SECTION ========== */
.rcs-service-area {
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Map banner — rounded to match the card language */
.rcs-area-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
}

/* Additional Communities callout — Blue Sea gradient card under the map */
.rcs-area-callout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.375rem;
  padding: 1.75rem;
  border-radius: 1.25rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  color: var(--color-white);
}

/* 24px Futura section subhead (color set via utility) */
.rcs-area-heading {
  margin: 0;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  line-height: 2rem;
  text-transform: uppercase;
}

/* Stacked location pills */
.rcs-area-locations {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rcs-area-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 50rem;
  background-color: var(--color-deep-ocean);
  color: var(--color-gray-50);
  text-decoration: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}
/* Hover/focus — slide right; icon glyph swaps solid → regular (webfont kit) */
.rcs-area-pill:is(:hover, :focus-visible) {
  color: var(--color-gray-50);
  transform: translateX(0.5rem);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
.rcs-area-pill:is(:hover, :focus-visible) .rcs-area-icon i { font-weight: 400; }
/* Home base — Red Rising gradient + deep-ocean icon */
.rcs-area-pill-home {
  background-image: var(--gradient-red-rising-90);
}
.rcs-area-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-red);
  color: var(--color-gray-50);
  font-size: 1rem;
}
.rcs-area-icon-home {
  background-color: var(--color-deep-ocean);
}
.rcs-area-pill .label-md { margin-bottom: 0; }
/* Optional per-location description (sub-page service-area overrides) */
.rcs-area-pill-copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.rcs-area-pill-text {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.3;
}
/* ========== END RCS SERVICE AREA SECTION ========== */


/* ========== RCS OPENING / COMMITMENT + ESTIMATE FORM SECTION ========== */
.rcs-opening {
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-50);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Decorative pills off the LEFT edge (Red + Sea, rounded right) */
.rcs-opening-pills {
  position: absolute;
  left: 0;
  bottom: clamp(2rem, 6vw, 5rem);
  z-index: 0;
  width: clamp(5rem, 12vw, 12rem);
  aspect-ratio: 274 / 159;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 274 159'%3E%3Cpath d='M0 0H110a28.5 28.5 0 0 1 0 57H0Z' fill='%23f40102'/%3E%3Cpath d='M0 102H185a28.5 28.5 0 0 1 0 57H0Z' fill='%2301a0c6'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Banner image above the form */
.rcs-opening-img {
  flex-shrink: 0;
  width: 100%;
  height: 9.1875rem;
  object-fit: cover;
  border-radius: 1.25rem;
}

/* Estimate form card — Blue Sea gradient; grows to align with the copy column */
.rcs-opening-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: 1.25rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.rcs-opening-form-title {
  margin: 0 0 1.5rem;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Shared short-form submit button (template class, undefined in RCS) —
   mapped to the Sea brand so the contact form button is styled site-wide. */
.btn-light-blue {
  color: var(--color-white);
  background: var(--color-sea);
  border-color: var(--color-sea);
}
.btn-light-blue:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: var(--color-sea-hover);
  border-color: var(--color-sea);
}

/* Why-choose-us advantage cards — gradient icon rail + white body */
.rcs-why-card {
  display: flex;
  height: 100%;
  min-height: 11rem;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}
/* Hover/focus — lift up; icon glyph swaps regular → solid (webfont kit) */
.rcs-why-card:is(:hover, :focus-within) {
  transform: translateY(-0.5rem);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
.rcs-why-card:is(:hover, :focus-within) .rcs-why-card-icon i { font-weight: 900; }

.rcs-why-card-icon {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 1.25rem;
  background-image: var(--gradient-blue-sea-180);
  color: var(--color-white);
  font-size: 2rem;
}
.rcs-why-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.25rem;
  background-color: var(--color-white);
}
.rcs-why-card-title {
  margin: 0;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  font-size: 0.875rem;
  line-height: 1.143;
  text-transform: uppercase;
  color: var(--color-deep-ocean);
}
.rcs-why-card-text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.667;
  color: var(--color-00dp);
}
/* ========== END RCS OPENING / COMMITMENT + ESTIMATE FORM SECTION ========== */


/* ========== RCS FAQ SECTION ========== */
.rcs-faq {
  background-color: var(--color-gray-50);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* Each Q/A row — deep-ocean rule under the question */
.rcs-faq-item {
  border-bottom: 1px solid var(--color-deep-ocean);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
.rcs-faq-header { margin: 0; }

/* Question trigger — transparent button, question left, plus/minus right */
.rcs-faq-btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 0 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.rcs-faq-q {
  font-family: var(--font-inter);
  font-weight: var(--font-weight-semibold);
  font-size: 1.125rem;
  line-height: 1.444;
  color: var(--color-deep-ocean);
  transition: color var(--transition-standard);
}
.rcs-faq-icon {
  flex-shrink: 0;
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-deep-ocean);
  transition: color var(--transition-standard);
}
/* Plus when collapsed, minus when expanded */
.rcs-faq-icon .fa-circle-minus { display: none; }
.rcs-faq-btn[aria-expanded="true"] .fa-circle-plus { display: none; }
.rcs-faq-btn[aria-expanded="true"] .fa-circle-minus { display: inline-block; }
/* Hover/focus affordance */
.rcs-faq-btn:is(:hover, :focus-visible) .rcs-faq-q,
.rcs-faq-btn:is(:hover, :focus-visible) .rcs-faq-icon { color: var(--color-red); }

.rcs-faq-answer {
  padding-top: 0.5rem;
  color: var(--color-00dp);
}

/* ========== END RCS FAQ SECTION ========== */


/* ========== RCS SUB-PAGE COMPONENTS ========== */

/* Hero trust chips — translucent glass pills over the hero image */
.rcs-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.5rem;
}
.rcs-hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 50rem;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--color-white);
}
.rcs-hero-trust-item i { color: var(--color-sea-pale); font-size: 1rem; }

/* Feature cards (Why Choose Us) — white tile, gradient icon badge, hover lift */
.rcs-feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  height: 100%;
  padding: 1.75rem;
  background-color: var(--color-white);
  border-radius: 1rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}
.rcs-feature-card:is(:hover, :focus-within) {
  transform: translateY(-0.5rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.14);
}
.rcs-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background-image: var(--gradient-blue-sea-134);
  color: var(--color-white);
  font-size: 1.5rem;
}
.rcs-feature-icon .fa-solid { display: none; }
.rcs-feature-card:is(:hover, :focus-within) .rcs-feature-icon { background-image: var(--gradient-red-rising-134); }
.rcs-feature-card:is(:hover, :focus-within) .rcs-feature-icon .fa-regular { display: none; }
.rcs-feature-card:is(:hover, :focus-within) .rcs-feature-icon .fa-solid { display: inline-block; }
.rcs-feature-title {
  margin: 0;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--color-deep-ocean);
}
.rcs-feature-text { margin: 0; color: var(--color-00dp); }

/* Process stepper — numbered timeline with a connecting rail + collapsible detail */
.rcs-process-item {
  position: relative;
  display: flex;
  gap: 1.25rem;
}
.rcs-process-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 3rem;
  bottom: -0.25rem;
  width: 2px;
  background: linear-gradient(var(--color-sea), rgba(1, 160, 198, 0.12));
}
.rcs-process-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-image: var(--gradient-blue-sea-134);
  color: var(--color-white);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem;
}
.rcs-process-main {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 1.5rem;
}
.rcs-process-trigger {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.rcs-process-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--color-deep-ocean);
  transition: color var(--transition-standard);
}
.rcs-process-toggle {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-sea);
  transition: color var(--transition-standard);
}
.rcs-process-toggle .fa-circle-minus { display: none; }
.rcs-process-trigger[aria-expanded="true"] .fa-circle-plus { display: none; }
.rcs-process-trigger[aria-expanded="true"] .fa-circle-minus { display: inline-block; }
.rcs-process-trigger:is(:hover, :focus-visible) .rcs-process-title,
.rcs-process-trigger:is(:hover, :focus-visible) .rcs-process-toggle { color: var(--color-red); }
.rcs-process-body { padding-top: 0.25rem; }
.rcs-process-check {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
}
.rcs-process-check li {
  display: flex;
  gap: 0.625rem;
  color: var(--color-00dp);
}
.rcs-process-check li i {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--color-sea);
}
@media (min-width: 768px) {
  .rcs-process-check { grid-template-columns: 1fr 1fr; }
}
/* ========== END RCS SUB-PAGE COMPONENTS ========== */

/* ========== RCS BREADCRUMBS ========== */
/* Gradient pill that echoes the main-nav pill; rcs-logomark.svg is the Home anchor. */
.rcs-breadcrumb {
  padding-top: 1.5rem;
  margin-bottom: 2rem;
}
/* When the breadcrumb follows the hero, tighten the gap to match the 2rem
   margin below the breadcrumb (hero bottom padding → 2rem, no extra top padding). */
.rcs-hero-intro:has(+ .rcs-breadcrumb) { padding-bottom: 2rem; }
.rcs-hero-intro + .rcs-breadcrumb { padding-top: 0; }
.rcs-breadcrumb-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0.4rem 1.15rem 0.4rem 0.4rem;
  background-image: var(--gradient-blue-sea-180);
  border-radius: 300px;
  width: 100%;
}
.rcs-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-futura);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-white);
}
.rcs-breadcrumb-sep {
  font-size: 0.7rem;
  margin: 0 0.4rem 0 0;
  color: rgba(255, 255, 255, 0.55);
}
.rcs-breadcrumb-link {
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition-standard);
}
.rcs-breadcrumb-link:is(:hover, :focus) {
  color: var(--color-white);
  text-decoration: underline;
}
.rcs-breadcrumb-current .rcs-breadcrumb-text,
.rcs-breadcrumb-text {
  color: var(--color-white);
  font-weight: 700;
}
.rcs-breadcrumb-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 5px 6px;
  background: var(--color-white);
  border-radius: 50%;
  transition: transform var(--transition-standard);
}
.rcs-breadcrumb-home-link:is(:hover, :focus) {
  transform: scale(1.06);
}
.rcs-breadcrumb-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* ========== END RCS BREADCRUMBS ========== */

/* ========== RCS SERVICES DIRECTORY (top-of-page link pool) ========== */
.rcs-dir-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-deep-ocean);
}
.rcs-dir-group-title i { color: var(--color-sea); }
.rcs-dir-sublinks {
  list-style: none;
  margin: 0;
  margin-top: auto;          /* pin the action links to the card base */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
}
.rcs-dir-sublink {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-sea);
  text-decoration: none;
  transition: color var(--transition-standard);
}
.rcs-dir-sublink:is(:hover, :focus) { color: var(--color-sea-hover); text-decoration: underline; }
/* ========== END RCS SERVICES DIRECTORY ========== */