/**
 * @file
 * Rcomms Paragraphs – reusable paragraph component styles.
 *
 * Paragraph types: cta_banner, text_image, product_category_grid,
 * product_category_card, feature_list, feature_item, faq, faq_item,
 * gallery, app_promotion, video, hubspot_form_popup, feature_grid_with_icon,
 * feature_grid_card, step_by_step_with_links, individual_step.
 *
 * DESIGN TOKEN CONTRACT
 * ---------------------
 * This file references CSS custom properties that each site defines in its
 * own design-tokens.css. No site-specific colors are hardcoded here.
 *
 * Required color tokens:
 *   --rc-color-brand-primary       Main brand color (FAQ panels, step titles, overlay)
 *   --rc-color-brand-primary-rgb   Same as above in R, G, B format (for rgba overlay)
 *   --rc-color-brand-secondary     Dark/header variant (feature-icon-grid titles, card headers)
 *   --rc-color-brand-accent        Highlight/accent (subtitles, accent backgrounds)
 *   --rc-color-brand-blue          Editor "blue" color-class variant
 *   --rc-color-brand-green         Editor "green" color-class variant
 *   --rc-color-brand-orange        Editor "yellow/orange" color-class variant
 *   --rc-color-brand-purple        Editor "purple" color-class variant (optional)
 *   --rc-color-brand-white         White (#fff)
 *   --rc-color-text                Body text color
 *   --rc-color-text-muted          Secondary/muted text
 *   --rc-color-border              Default border color
 *
 * Required spacing tokens:
 *   --rc-paragraph-spacing          Vertical section padding; fluid clamp() scales it across viewports
 *   --rc-container-max-width        Theme container width    (e.g. 1440px)
 *
 * Required typography tokens:
 *   --rc-font-weight-light / --rc-font-weight-semibold / --rc-font-weight-bold
 *   --rc-text-heading-sm / --rc-text-heading-md / --rc-text-heading-lg / --rc-text-heading-xl
 *   --rc-text-body / --rc-text-caption
 *   --rc-line-height-tight / --rc-line-height-snug / --rc-line-height-relaxed / --rc-line-height-loose
 *   --rc-letter-spacing-wider / --rc-letter-spacing-widest
 */

/* ============================================
   SECTION WRAPPERS
   ============================================ */
.page-paragraphs-sections,
.front-sections {
  overflow-x: hidden;
}

/* Custom paragraph types: display block, no BP clearfix */
.paragraph-cta-banner,
.paragraph-product-grid,
.paragraph-text-image,
.paragraph-video,
.paragraph-faq,
.paragraph-gallery,
.paragraph-feature-list,
.paragraph-app-promotion,
.paragraph-feature-icon-grid,
.paragraph-steps,
.paragraph-hubspot-popup {
  display: block;
  table-layout: auto;
}
.paragraph-cta-banner::before,
.paragraph-cta-banner::after,
.paragraph-product-grid::before,
.paragraph-product-grid::after,
.paragraph-text-image::before,
.paragraph-text-image::after,
.paragraph-video::before,
.paragraph-video::after,
.paragraph-faq::before,
.paragraph-faq::after,
.paragraph-gallery::before,
.paragraph-gallery::after,
.paragraph-feature-list::before,
.paragraph-feature-list::after,
.paragraph-app-promotion::before,
.paragraph-app-promotion::after,
.paragraph-feature-icon-grid::before,
.paragraph-feature-icon-grid::after,
.paragraph-steps::before,
.paragraph-steps::after,
.paragraph-hubspot-popup::before,
.paragraph-hubspot-popup::after {
  display: none;
}

/* Bootstrap Paragraphs width constraints (when used alongside BP) */
.page-paragraphs-sections .paragraph[class*="paragraph--type--bp-"]:not(.paragraph--width--full),
.front-sections .paragraph[class*="paragraph--type--bp-"]:not(.paragraph--width--full) {
  max-width: var(--rc-container-max-width, 1440px);
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Quote paragraph has no .container of its own (unlike e.g. Product Grid),
   so when placed directly in an unboxed section region (front page /
   paragraphs-sections landing pages) it renders full-bleed instead of
   matching the boxed width of sibling sections. Box it here the same way
   as the BP types above. quote-style-2 is excluded: it already manages its
   own deliberate full-bleed breakout (see QUOTE variants below). */
.page-paragraphs-sections .paragraph--type--quote:not(.quote-style-2),
.front-sections .paragraph--type--quote:not(.quote-style-2) {
  max-width: var(--rc-container-max-width, 1440px);
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-paragraphs-sections .paragraph.paragraph--width--tiny,
.front-sections .paragraph.paragraph--width--tiny {
  max-width: 400px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-paragraphs-sections .paragraph.paragraph--width--narrow,
.front-sections .paragraph.paragraph--width--narrow {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-paragraphs-sections .paragraph.paragraph--width--medium,
.front-sections .paragraph.paragraph--width--medium {
  max-width: 960px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-paragraphs-sections .paragraph.paragraph--width--wide,
.front-sections .paragraph.paragraph--width--wide {
  max-width: 1320px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-paragraphs-sections .paragraph.paragraph--width--full,
.front-sections .paragraph.paragraph--width--full {
  max-width: none;
  width: 100%;
}

.paragraph--type--cta-banner,
.paragraph--type--feature-list,
.paragraph--type--feature-item,
.paragraph--type--faq,
.paragraph--type--faq-item,
.paragraph--type--gallery,
.paragraph--type--product-category-grid,
.paragraph--type--product-category-card,
.paragraph--type--text-image,
.paragraph--type--video,
.paragraph--type--add-video,
.paragraph--type--app-promotion,
.paragraph--type--feature-grid-with-icon,
.paragraph--type--step-by-step-with-links,
.paragraph--type--hubspot-form-popup {
  margin-bottom: 0;
}

/* Paragraph subtitle (appears above main title) */
.paragraph__subtitle {
  color: var(--rc-color-brand-accent, #e2a829);
  font-size: var(--rc-text-heading-md, clamp(22px, calc(20px + 0.6vw), 26px));
  font-weight: var(--rc-font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: var(--rc-letter-spacing-wider, 0.05em);
  line-height: var(--rc-line-height-tight, 1.2);
  margin-bottom: 0.5rem;
}

/* ============================================
   CTA BANNER
   ============================================ */
/* Override Bootstrap Paragraphs base styles for our custom paragraph */
.paragraph--type--cta-banner.paragraph-cta-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Banner height; token-overridable per theme/site. */
  min-height: var(--rc-cta-banner-min-height, 400px);
  position: relative;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  color: var(--rc-color-brand-white, #ffffff);
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /* Fill the available width of its container. When the section opts into
     full-bleed (field_section_width = "Full-width background", which adds
     .paragraph--full-bleed), that rule below overrides these to break out of a
     boxed content column. No !important here, so the opt-in can win cleanly. */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  table-layout: auto;
}

.paragraph-cta-banner--accent { background-color: var(--rc-color-brand-accent, #e2a829); }
.paragraph-cta-banner--yellow, .paragraph-cta-banner--orange { background-color: var(--rc-color-brand-orange, #e2a829); }
.paragraph-cta-banner--primary { background-color: var(--rc-color-brand-primary, #1d84c3); }
.paragraph-cta-banner--green, .paragraph-cta-banner--teal { background-color: var(--rc-color-brand-green, #3a9e57); }
.paragraph-cta-banner--secondary { background-color: var(--rc-color-brand-secondary, #055a8e); }
.paragraph-cta-banner--blue { background-color: var(--rc-color-brand-blue, #1d84c3); }
.paragraph-cta-banner--purple { background-color: var(--rc-color-brand-purple, #5b4f97); }

.paragraph-cta-banner__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.paragraph-cta-banner__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.paragraph-cta-banner__overlay {
  position: absolute;
  inset: 0;
  /* Neutral dark scrim for legibility over any background image. Lighter than
     a full brand-colour wash so the image still reads through. */
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.paragraph-cta-banner__content {
  position: relative;
  z-index: 2;
}

.paragraph-cta-banner__title {
  color: var(--rc-color-brand-white, #ffffff);
  margin-bottom: 1rem;
}

.paragraph-cta-banner__body {
  margin-bottom: 1.5rem;
}

/* Non-hero banner heading: match the section-heading size (the page hero keeps
   its own larger display size + Orbitron). Colour comes from the 2-axis rules. */
.paragraph-cta-banner:not(.paragraph-cta-banner--hero) .paragraph-cta-banner__title {
  font-size: var(--text-heading-xl, clamp(28px, calc(26px + 1.2vw), 38px));
  font-weight: var(--rc-font-weight-bold, 700);
  line-height: var(--rc-line-height-tight, 1.2);
}

/* Standalone (boxed) banner: let the content fill the width like a Simple —
   drop the Bootstrap .container cap and the left-alignment 50rem cap. Full-bleed
   banners keep their re-boxed content. */
.paragraph-cta-banner:not(.paragraph--full-bleed) .paragraph-cta-banner__content {
  max-width: none;
  padding-inline: 0;
}

/* ── 2-axis CTA banner styling ──────────────────────────────────────────────
   Axis 1 — background presence (--has-bg, set by the template when a banner
   image is present):
     • with bg  → white heading + body (legible over the image scrim).
     • without  → brand-blue heading + body-grey text.
   Axis 2 — button style (--btn-pill / --btn-arrow, from field_button_style):
     • pill  → solid brand-blue pill button (same in both bg states).
     • arrow → text link with a trailing →, coloured white over a bg or
               brand-blue without one.
   All colours come from design tokens. */

/* Axis 1: colour by background presence. */
.paragraph-cta-banner--has-bg .paragraph-cta-banner__title,
.paragraph-cta-banner--has-bg .paragraph-cta-banner__body,
.paragraph-cta-banner--accent .paragraph-cta-banner__title,
.paragraph-cta-banner--accent .paragraph-cta-banner__body,
.paragraph-cta-banner--primary .paragraph-cta-banner__title,
.paragraph-cta-banner--primary .paragraph-cta-banner__body,
.paragraph-cta-banner--secondary .paragraph-cta-banner__title,
.paragraph-cta-banner--secondary .paragraph-cta-banner__body,
.paragraph-cta-banner--blue .paragraph-cta-banner__title,
.paragraph-cta-banner--blue .paragraph-cta-banner__body,
.paragraph-cta-banner--green .paragraph-cta-banner__title,
.paragraph-cta-banner--green .paragraph-cta-banner__body,
.paragraph-cta-banner--yellow .paragraph-cta-banner__title,
.paragraph-cta-banner--yellow .paragraph-cta-banner__body,
.paragraph-cta-banner--orange .paragraph-cta-banner__title,
.paragraph-cta-banner--orange .paragraph-cta-banner__body,
.paragraph-cta-banner--teal .paragraph-cta-banner__title,
.paragraph-cta-banner--teal .paragraph-cta-banner__body,
.paragraph-cta-banner--purple .paragraph-cta-banner__title,
.paragraph-cta-banner--purple .paragraph-cta-banner__body {
  color: var(--rc-color-brand-white, #ffffff);
}
/* The page hero reuses these classes but is always over a background image
   (white text), yet it lacks --has-bg (that's only set by the cta_banner
   template). Exclude --hero so the no-bg rule doesn't turn the hero title blue. */
.paragraph-cta-banner:not(.paragraph-cta-banner--has-bg):not(.paragraph-cta-banner--hero):not(.paragraph-cta-banner--accent):not(.paragraph-cta-banner--primary):not(.paragraph-cta-banner--secondary):not(.paragraph-cta-banner--blue):not(.paragraph-cta-banner--green):not(.paragraph-cta-banner--yellow):not(.paragraph-cta-banner--orange):not(.paragraph-cta-banner--teal):not(.paragraph-cta-banner--purple) .paragraph-cta-banner__title {
  color: var(--rc-color-brand-tertiary, #064895);
}
.paragraph-cta-banner:not(.paragraph-cta-banner--has-bg):not(.paragraph-cta-banner--hero):not(.paragraph-cta-banner--accent):not(.paragraph-cta-banner--primary):not(.paragraph-cta-banner--secondary):not(.paragraph-cta-banner--blue):not(.paragraph-cta-banner--green):not(.paragraph-cta-banner--yellow):not(.paragraph-cta-banner--orange):not(.paragraph-cta-banner--teal):not(.paragraph-cta-banner--purple) .paragraph-cta-banner__body {
  color: var(--rc-color-text, #3b3b3b);
}

/* Axis 2 — pill: solid brand-blue button, both bg states. */
.paragraph-cta-banner--btn-pill .paragraph-cta-banner__link {
  display: inline-block;
  background-color: var(--rc-color-brand-tertiary, #064895);
  color: var(--rc-color-brand-white, #ffffff);
  font-weight: var(--rc-font-weight-bold, 700);
  border-radius: var(--rc-radius-pill, 999px);
  padding: 0.85rem 2rem;
  text-decoration: none;
}
.paragraph-cta-banner--btn-pill .paragraph-cta-banner__link:hover,
.paragraph-cta-banner--btn-pill .paragraph-cta-banner__link:focus {
  background-color: var(--rc-color-brand-primary, #1d84c3);
  color: var(--rc-color-brand-white, #ffffff);
}

/* Axis 2 — arrow: text link + trailing arrow, colour follows the bg state. */
.paragraph-cta-banner--btn-arrow .paragraph-cta-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: none;
  border: 0;
  font-weight: var(--rc-font-weight-bold, 700);
  text-decoration: none;
}
.paragraph-cta-banner--btn-arrow .paragraph-cta-banner__link::after {
  content: "\2192";
}
.paragraph-cta-banner--btn-arrow:not(.paragraph-cta-banner--has-bg) .paragraph-cta-banner__link {
  color: var(--rc-color-brand-tertiary, #064895);
}
.paragraph-cta-banner--has-bg.paragraph-cta-banner--btn-arrow .paragraph-cta-banner__link {
  color: var(--rc-color-brand-white, #ffffff);
}

/* 9-position alignment: left column */
.paragraph-cta-banner--top_left,
.paragraph-cta-banner--left,
.paragraph-cta-banner--bottom_left { text-align: left; }

.paragraph-cta-banner--top_left .paragraph-cta-banner__content *,
.paragraph-cta-banner--left .paragraph-cta-banner__content *,
.paragraph-cta-banner--bottom_left .paragraph-cta-banner__content * { text-align: left; }

.paragraph-cta-banner--top_left .paragraph-cta-banner__content,
.paragraph-cta-banner--left .paragraph-cta-banner__content,
.paragraph-cta-banner--bottom_left .paragraph-cta-banner__content {
  max-width: 50rem;
  margin-left: 0;
  margin-right: auto;
}

.paragraph-cta-banner--top_left .paragraph-cta-banner__body,
.paragraph-cta-banner--left .paragraph-cta-banner__body,
.paragraph-cta-banner--bottom_left .paragraph-cta-banner__body { max-width: none; }

.paragraph-cta-banner--top_left .btn-primary,
.paragraph-cta-banner--left .btn-primary,
.paragraph-cta-banner--bottom_left .btn-primary {
  display: block;
  width: fit-content;
  margin-left: 0;
  margin-right: auto;
}

/* 9-position alignment: center column */
.paragraph-cta-banner--top,
.paragraph-cta-banner--center,
.paragraph-cta-banner--bottom { text-align: center; }

.paragraph-cta-banner--top .paragraph-cta-banner__body,
.paragraph-cta-banner--center .paragraph-cta-banner__body,
.paragraph-cta-banner--bottom .paragraph-cta-banner__body {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

/* 9-position alignment: right column */
.paragraph-cta-banner--top_right,
.paragraph-cta-banner--right,
.paragraph-cta-banner--bottom_right { text-align: right; }

.paragraph-cta-banner--top_right .paragraph-cta-banner__content *,
.paragraph-cta-banner--right .paragraph-cta-banner__content *,
.paragraph-cta-banner--bottom_right .paragraph-cta-banner__content * { text-align: right; }

.paragraph-cta-banner--top_right .paragraph-cta-banner__content,
.paragraph-cta-banner--right .paragraph-cta-banner__content,
.paragraph-cta-banner--bottom_right .paragraph-cta-banner__content {
  max-width: 50rem;
  margin-left: auto;
  margin-right: 0;
}

.paragraph-cta-banner--top_right .paragraph-cta-banner__body,
.paragraph-cta-banner--right .paragraph-cta-banner__body,
.paragraph-cta-banner--bottom_right .paragraph-cta-banner__body { max-width: none; }

.paragraph-cta-banner--top_right .btn-primary,
.paragraph-cta-banner--right .btn-primary,
.paragraph-cta-banner--bottom_right .btn-primary {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
}

/* 9-position alignment: top row */
.paragraph-cta-banner.paragraph-cta-banner--top_left,
.paragraph-cta-banner.paragraph-cta-banner--top,
.paragraph-cta-banner.paragraph-cta-banner--top_right { justify-content: flex-start; }

/* 9-position alignment: bottom row */
.paragraph-cta-banner.paragraph-cta-banner--bottom_left,
.paragraph-cta-banner.paragraph-cta-banner--bottom,
.paragraph-cta-banner.paragraph-cta-banner--bottom_right { justify-content: flex-end; }

/* Overlay content over a background image: inset from the banner edges so the
   text/link don't touch the border (esp. corner-aligned cards like a case-study
   tile). The banner's centred block padding is dropped for image banners so the
   inset is even on all sides, driven by the content's own padding. */
.paragraph--type--cta-banner.paragraph-cta-banner--has-bg {
  padding-block: 0;
}
.paragraph-cta-banner--has-bg:not(.paragraph--full-bleed) .paragraph-cta-banner__content {
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
}

/* News Hero mode */
.paragraph-cta-banner.paragraph-cta-banner--news-hero {
  min-height: 40vh;
  padding: 1.5rem 0;
}

@media (max-width: 768px) {
  .paragraph-cta-banner.paragraph-cta-banner--news-hero {
    min-height: 25vh;
  }
}

/* ── Page Hero mode (field_is_hero) ──
   The leading, full-height banner at the top of a page: taller, with a larger
   heading/body/button. Generic defaults via tokens; a host theme adds anything
   it alone knows about — e.g. clearance for a fixed/overlapping navbar (it owns
   the navbar height) or a display font. Compound selector (repeat the class)
   raises specificity to 0,2,0 so it beats the base .--type--cta-banner width
   rule without !important. */
.paragraph-cta-banner--hero.paragraph-cta-banner--hero {
  min-height: var(--rc-cta-banner-hero-min-height, 80vh);
}

/* A hero usually sits over a photo, so use a dark scrim (darker at top for
   heading/navbar legibility) instead of the flat brand-tint overlay. */
.paragraph-cta-banner--hero .paragraph-cta-banner__overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* Larger hero typography, scaled from the heading/body tokens. */
.paragraph-cta-banner--hero .paragraph-cta-banner__title {
  font-size: var(--rc-text-heading-xl, clamp(28px, calc(26px + 1.2vw), 38px));
  line-height: var(--rc-line-height-tight, 1.2);
}
.paragraph-cta-banner--hero .paragraph-cta-banner__body {
  font-size: var(--rc-text-heading-sm, clamp(20px, calc(19px + 0.5vw), 24px));
}

/* The base .btn-primary inverts to white-on-hover, which suits a light surface.
   The hero overlay is dark, so keep the button solid with white text instead. */
.paragraph-cta-banner--hero .btn-primary:hover,
.paragraph-cta-banner--hero .btn-primary:focus {
  background-color: var(--rc-color-brand-primary, #1d84c3);
  border-color: var(--rc-color-brand-primary, #1d84c3);
  color: var(--rc-color-brand-white, #ffffff);
}

.btn-primary.cta-banner-pill {
  border-radius: 999px;
  font-size: 1.5rem;
  padding: 10px 30px;
  margin-block: 20px;
}

/* Hide the field label that Drupal adds above the paragraph field */
.page-paragraphs-sections > .field > .field--label {
  display: none;
}

/* Prevent double-rendering: hide rcomms paragraph field when it appears
   inside the node content area (it should only render full-width via
   page_paragraphs outside the .container). Belt-and-suspenders for
   hook_entity_view_alter() + render cache edge cases. */
#main-content .field--name-field-rcomms-paragraph,
#main-content .field--name-field-content-sections {
  display: none;
}
.paragraph-cta-banner__media-content {
  margin-top: 2.5rem;
  width: 76%;
  margin-inline: auto;
}

/* Drupal wraps media in .field > .field__item > article > .field > .field__item > a > img —
   force every layer to full width so the image fills the centered container. */
.paragraph-cta-banner__media-content .field,
.paragraph-cta-banner__media-content .field__item,
.paragraph-cta-banner__media-content .media,
.paragraph-cta-banner__media-content article,
.paragraph-cta-banner__media-content a {
  display: block;
  width: 100%;
  max-width: 100%;
}

.paragraph-cta-banner__media-content img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.paragraph-cta-banner__media-content iframe,
.paragraph-cta-banner__media-content video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* ============================================
   PRODUCT GRID
   ============================================ */
.paragraph--type--product-category-grid.paragraph-product-grid {
  display: block;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  table-layout: auto;
}

.paragraph-product-grid__header { margin-bottom: 2rem; text-align: inherit; }
.paragraph-product-grid__title { margin-bottom: 0; text-align: inherit; }
.paragraph-product-grid__intro { margin-bottom: 0; text-align: inherit; }
.paragraph-product-grid__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-top: 2rem;
}

a.paragraph-product-grid__card,
.paragraph-product-grid__card {
  flex: 1 1 240px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  color: var(--rc-color-brand-white, #ffffff);
  text-decoration: none;
  height: 360px;
  transition: transform 0.2s, filter 0.2s;
}

a.paragraph-product-grid__card:hover,
a.paragraph-product-grid__card:focus {
  color: var(--rc-color-brand-white, #ffffff);
  text-decoration: none;
  transform: translateY(-4px);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

/* Old full-bleed colour tile — still used by the no-image "compact" variant
   (arrow + title, whole card is the link). The image variant below
   (--white) ignores these background colours; field_color_class instead
   drives only its "Learn More" button colour. */
a.paragraph-product-grid__card--secondary { background-color: var(--rc-color-brand-secondary, #055a8e); }
a.paragraph-product-grid__card--blue { background-color: var(--rc-color-brand-blue, #1d84c3); }
a.paragraph-product-grid__card--primary { background-color: var(--rc-color-brand-primary, #1d84c3); }
a.paragraph-product-grid__card--green, a.paragraph-product-grid__card--teal { background-color: var(--rc-color-brand-green, #3a9e57); }
a.paragraph-product-grid__card--accent { background-color: var(--rc-color-brand-accent, #e2a829); }
a.paragraph-product-grid__card--yellow, a.paragraph-product-grid__card--orange { background-color: var(--rc-color-brand-orange, #e2a829); }
a.paragraph-product-grid__card--grey { background-color: var(--rc-color-gray-dark, #6c757d); }
a.paragraph-product-grid__card--purple { background-color: var(--rc-color-brand-purple, #5b4f97); }

.paragraph-product-grid__card-title {
  font-size: var(--rc-text-heading-md, clamp(22px, calc(20px + 0.6vw), 26px));
  font-weight: var(--rc-font-weight-medium, 500);
  margin: 0 0 0.5rem 0;
  line-height: var(--rc-line-height-tight, 1.2);
  flex-shrink: 0;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Compact (no-image) variant keeps the old white-on-colour uppercase look. */
a.paragraph-product-grid__card--compact .paragraph-product-grid__card-title {
  color: var(--rc-color-brand-white, #ffffff);
  text-transform: uppercase;
}

.paragraph-product-grid__card-image {
  flex-shrink: 0;
  overflow: hidden;
  min-height: 0;
}

/* Base fallback for field_body on the original tile style (only shows up
   if someone fills in the new body field on a card that isn't using
   card-style-1) — just enough padding so text doesn't sit flush against
   the card edges. .card-style-1's own rule above overrides this. */
.paragraph-product-grid__card-text {
  padding: 0 1rem;
  margin: 0 0 1rem;
}
.paragraph-product-grid__card-image .field,
.paragraph-product-grid__card-image .field__item { width: 100%; height: 100%; }
.paragraph-product-grid__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Modern white card (image + optional body + "Learn More" button) ──
   Reference: light border, image inset with rounded corners, dark bold
   title, muted body copy, brand-coloured pill button pinned to the bottom
   of the card regardless of how much title/body text is above it. */
/* card-style-1 comes from field_css_classes on the GRID
   (product_category_grid), not on each card — so it's applied here as a
   descendant selector rooted at .paragraph-product-grid.card-style-1,
   reaching every card inside that grid. Each selector below is 3+ classes
   (0,3,0+), which comfortably beats the (0,1,1) specificity of the
   a.paragraph-product-grid__card--secondary/--blue/etc. colour-tile rules
   above (the twig still always adds field_color_class), so it overrides
   the tile background/height regardless of source order. */
.paragraph-product-grid.card-style-1 .paragraph-product-grid__card {
  background-color: var(--rc-color-brand-white, #ffffff);
  border: 1px solid var(--rc-color-border, #e0e0e0);
  color: var(--rc-color-text, #3b3b3b);
  height: auto;
}
.paragraph-product-grid.card-style-1 .paragraph-product-grid__card:hover,
.paragraph-product-grid.card-style-1 .paragraph-product-grid__card:focus {
  color: var(--rc-color-text, #3b3b3b);
}
/* flex: 0 0 180px (not just height:180px) — the legacy theme CSS
   (corporateplus/css/components/paragraphs.css) sets flex: 1 on this same
   element, which sets flex-basis: 0% and lets flex-grow fill whatever
   space is left in the column layout. That makes an explicit height a
   no-op for sizing purposes (flex-basis wins), which is why each card's
   image box was growing/shrinking based on how much title/body text sat
   below it instead of staying a fixed size — the actual bug behind
   "images/heading/body not on the same line across cards". Overriding
   flex-grow/shrink/basis here (not just height) is what actually fixes it. */
.paragraph-product-grid.card-style-1 .paragraph-product-grid__card-image {
  flex: 0 0 180px;
  margin: 1rem 1rem 0;
  border-radius: 6px;
  height: 180px;
  overflow: hidden;
}
.paragraph-product-grid.card-style-1 .paragraph-product-grid__card-title {
  color: var(--rc-color-text, #3b3b3b);
  font-weight: var(--rc-font-weight-bold, 700);
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
  padding: 0 1.5rem;
  margin-top: 1rem;
}
.paragraph-product-grid.card-style-1 .paragraph-product-grid__card-text {
  color: var(--rc-color-gray-dark, #646464);
  font-size: var(--rc-text-body, var(--rc-font-size-base, clamp(17px, calc(16px + 0.3vw), 19px)));
  padding: 0 1.5rem;
  margin: 0.5rem 0 1.5rem;
}

.paragraph-product-grid--has-bg { color: var(--rc-color-brand-white, #ffffff); }
.paragraph-product-grid--secondary { background-color: var(--rc-color-brand-secondary, #055a8e); }
.paragraph-product-grid--blue { background-color: var(--rc-color-brand-blue, #1d84c3); }
.paragraph-product-grid--primary { background-color: var(--rc-color-brand-primary, #1d84c3); }
.paragraph-product-grid--green, .paragraph-product-grid--teal { background-color: var(--rc-color-brand-green, #3a9e57); }
.paragraph-product-grid--accent { background-color: var(--rc-color-brand-accent, #e2a829); }
.paragraph-product-grid--yellow, .paragraph-product-grid--orange { background-color: var(--rc-color-brand-orange, #e2a829); }
.paragraph-product-grid--grey { background-color: var(--rc-color-gray-dark, #6c757d); }
.paragraph-product-grid--purple { background-color: var(--rc-color-brand-purple, #5b4f97); }
.paragraph-product-grid--has-bg .paragraph-product-grid__title,
.paragraph-product-grid--has-bg .paragraph__subtitle,
.paragraph-product-grid--has-bg .paragraph-product-grid__intro { color: var(--rc-color-brand-white, #ffffff); }

/* ── Text alignment (field_text_align) ──
   Alignment itself uses Bootstrap's .text-start / .text-center utilities, added
   to the paragraph in the template. Here we only add what BS doesn't: when
   centered, constrain the intro to a readable column and centre it. */
.paragraph-product-grid.text-center .paragraph-product-grid__intro {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
}

/* ── Grid column count (field_grid_columns) ── */
.paragraph-product-grid--cols-2 .paragraph-product-grid__grid,
.paragraph-product-grid--cols-3 .paragraph-product-grid__grid,
.paragraph-product-grid--cols-4 .paragraph-product-grid__grid {
  display: grid;
  gap: 25px;
}
.paragraph-product-grid--cols-2 .paragraph-product-grid__grid { grid-template-columns: repeat(2, 1fr); }
.paragraph-product-grid--cols-3 .paragraph-product-grid__grid { grid-template-columns: repeat(3, 1fr); }
.paragraph-product-grid--cols-4 .paragraph-product-grid__grid { grid-template-columns: repeat(4, 1fr); }

/* Neutralise flex card sizing so cards fill the grid cell. */
.paragraph-product-grid--cols-2 .paragraph-product-grid__card,
.paragraph-product-grid--cols-3 .paragraph-product-grid__card,
.paragraph-product-grid--cols-4 .paragraph-product-grid__card {
  max-width: none;
  width: 100%;
}

@media (max-width: 768px) {
  .paragraph-product-grid--cols-2 .paragraph-product-grid__grid,
  .paragraph-product-grid--cols-3 .paragraph-product-grid__grid,
  .paragraph-product-grid--cols-4 .paragraph-product-grid__grid {
    grid-template-columns: 1fr;
  }
}

a.paragraph-product-grid__card--compact {
  height: auto;
  min-height: 140px;
  padding: 1.5rem 1.5rem;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.paragraph-product-grid__card-arrow {
  display: block;
  font-size: var(--rc-font-size-3xl, clamp(24px, calc(22px + 0.8vw), 30px));
  line-height: 1;
  margin-bottom: 0.75rem;
  color: var(--rc-color-brand-white, #ffffff);
  font-weight: var(--rc-font-weight-light, 300);
}

a.paragraph-product-grid__card--compact .paragraph-product-grid__card-title {
  background-color: transparent;
  padding: 0;
  font-size: var(--rc-font-size-base, clamp(17px, calc(16px + 0.3vw), 19px));
  text-transform: none;
  font-weight: var(--rc-font-weight-medium, 500);
  margin-bottom: 0;
  line-height: var(--rc-line-height-snug, 1.35);
}

/* ============================================
   TEXT + IMAGE
   ============================================ */
.paragraph--type--text-image.paragraph-text-image {
  display: block;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  table-layout: auto;
}


.paragraph-text-image__image img {
  max-width: 100%;
  height: auto;
  border-radius: 40px 0 40px 0;
}
/* ── CTA Button alignment within container (field_button_align) ── */
.paragraph-cta-button--left { text-align: left; }
.paragraph-cta-button--center { text-align: center; }
.paragraph-cta-button--right { text-align: right; }

.paragraph-text-image__title { margin-bottom: 1rem; text-align: left; }
.paragraph-text-image__body { margin-bottom: 1.5rem; }
.paragraph-text-image__cta { margin-top: 1rem; }

/* ── Dual-panel layout (generic structure only; look lives in the theme) ──
   Two flush, equal-height panels. Each panel's text overlay sits in normal
   flow (so it drives the panel height and never gets clipped); the image is
   absolutely positioned behind it and covers the panel. Equal heights come
   from the grid stretching both columns to the taller panel. */
.paragraph-text-image--dual.paragraph--type--text-image.paragraph-text-image {
  padding: 0;
}
.paragraph-text-image__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.paragraph-text-image__panel {
  position: relative;
  overflow: hidden;
  min-height: clamp(220px, 28vw, 420px);
}
.paragraph-text-image__panel-image {
  position: absolute;
  inset: 0;
}
/* The image field wrappers must fill the panel. The theme floats
   .field--type-image left and shrink-wraps it, which would collapse the image
   to its intrinsic width and leave a gap — undo the float/margins and force
   full width+height. Extra specificity (--dual prefix) beats the theme's
   `.node .field--type-image` (0,2,0) float rule. */
.paragraph-text-image--dual .paragraph-text-image__panel-image .field,
.paragraph-text-image--dual .paragraph-text-image__panel-image .field__item {
  width: 100%;
  height: 100%;
  float: none;
  margin: 0;
}
.paragraph-text-image--dual .paragraph-text-image__panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;              /* theme adds a bottom margin to field images */
  border-radius: 0;       /* the single-mode rounded corners don't apply here */
}
.paragraph-text-image__panel-overlay {
  position: relative;     /* above the image; drives panel height */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 768px) {
  .paragraph-text-image__panels { grid-template-columns: 1fr; }
}

/* ============================================
   VIDEO
   ============================================ */
.paragraph--type--video.paragraph-video,
.paragraph--type--add-video.paragraph-video {
  display: block;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  table-layout: auto;
}


.paragraph-video__media {
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Direct <video> rendered by paragraph--video.html.twig (uploaded file) */
.paragraph-video__player {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
  border-radius: 8px;
}

/* Fallback: if video renders via Media/DS chain (remote oEmbed, etc.) */
.paragraph-video__media iframe,
.paragraph-video__media video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  border-radius: 8px;
}

/* Drupal + Display Suite can nest several wrapper layers between our
   .paragraph-video__media div and the actual <iframe>:
     .field > .field__item > article.media > .ds-1col > .field > .field__item > iframe
   Every intermediate element must be 100% width with no max-width
   constraint so the iframe can fill the full container. */
.paragraph-video__media .media,
.paragraph-video__media .field,
.paragraph-video__media .field__item,
.paragraph-video__media .ds-1col,
.paragraph-video__media .ds-2col,
.paragraph-video__media [class*="ds-"] {
  width: 100%;
  max-width: 100%;
}

/* ============================================
   FAQ
   ============================================ */
.paragraph--type--faq.paragraph-faq {
  display: block;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  table-layout: auto;
}


.paragraph-faq__title {
  margin-bottom: 1rem;
  font-size: var(--rc-text-heading-xl, clamp(28px, calc(26px + 1.2vw), 38px));
  font-weight: var(--rc-font-weight-bold, 700);
  color: var(--rc-color-brand-primary, #1d84c3);
}
.paragraph-faq .paragraph__subtitle,
.paragraph-steps .paragraph__subtitle {
  text-align: center;
}
.paragraph-faq__intro {
  margin-bottom: 3rem;
  font-size: var(--rc-text-heading-sm, clamp(20px, calc(19px + 0.5vw), 24px));
  line-height: var(--rc-line-height-relaxed, 1.8);
  max-width: 800px;
}
.paragraph-faq__list.panel-group { margin-bottom: 0; }

.paragraph--type--faq-item.panel {
  background-color: var(--rc-color-brand-primary, #1d84c3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  margin-bottom: 1rem;
  box-shadow: none;
}
.paragraph--type--faq-item .panel-heading {
  background-color: var(--rc-color-brand-primary, #1d84c3);
  border-radius: 0;
  padding: 0;
}
.paragraph--type--faq-item .panel-title {
  font-size: var(--rc-text-heading-sm, clamp(20px, calc(19px + 0.5vw), 24px));
}

.paragraph--type--faq-item .panel-title a,
.paragraph--type--faq-item .panel-title a.collapsed {
  display: block;
  padding: 1.25rem 1.5rem;
  color: var(--rc-color-brand-white, #ffffff);
  background-color: var(--rc-color-brand-primary, #1d84c3);
  font-weight: var(--rc-font-weight-semibold, 600);
  text-decoration: none;
  transition: all 0.2s ease;
}
.paragraph--type--faq-item .panel-title a:hover,
.paragraph--type--faq-item .panel-title a:focus {
  color: var(--rc-color-brand-primary, #1d84c3);
  background-color: var(--rc-color-brand-white, #ffffff);
  text-decoration: none;
}
.paragraph--type--faq-item .panel-body {
  background-color: var(--rc-color-brand-white, #ffffff);
  color: var(--rc-color-brand-primary, #1d84c3);
  padding: 1.5rem 1.5rem 2rem;
  border-top: 1px solid rgba(var(--rc-color-brand-primary-rgb, 29, 132, 195), 0.1);
  font-size: var(--rc-text-body, var(--rc-font-size-base, clamp(17px, calc(16px + 0.3vw), 19px)));
  line-height: var(--rc-line-height-relaxed, 1.8);
}

.paragraph--type--faq-item .panel-body p:last-child {
    padding-bottom: 0;
}

/* ============================================
   GALLERY
   ============================================ */
.paragraph--type--gallery.paragraph-gallery {
  display: block;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  table-layout: auto;
}


.paragraph-gallery__header { margin-bottom: 1.5rem; align-items: center; }
.paragraph-gallery__title { margin: 0; text-align: left; }
.paragraph-gallery__view-all a {
  color: var(--rc-color-brand-secondary, #055a8e);
}
.paragraph-gallery__grid {
  margin-top: 1rem;
  width: 100%;
}

.row.paragraph-gallery__grid {
  margin-inline: 0;
}

@media (max-width: 991px) {
  .paragraph-gallery__view-all {
    text-align: left;
  }
}

/* Drupal renders field_images as .field__items > .field__item > img */
.paragraph-gallery__grid .field__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  width: 100%;
}

.paragraph-gallery__grid .field__item {
  border-radius: 8px;
  overflow: hidden;
}

.paragraph-gallery__grid .field__item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* ============================================
   FEATURE LIST
   ============================================ */
.paragraph--type--feature-list.paragraph-feature-list {
  display: block;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  color: var(--rc-color-text-muted, #707070);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 5rem;
  table-layout: auto;
}

/* Colour band: matches the legacy behaviour these modifier classes always
   had (applied unconditionally, not gated by field_section_width /
   .paragraph--full-bleed — that gate was added when these rules were ported
   to --rc-* tokens but doesn't match how the original ofes_paragraphs CSS
   behaved, and it silently broke the white-text fixes below on any instance
   that isn't set to "Full-width background": the legacy CSS still painted
   the colour band unconditionally, but every rcomms text-colour fix was
   gated behind a class that wasn't there, so none of them ever fired). */
.paragraph-feature-list--accent { background-color: var(--rc-color-brand-accent, #e2a829); }
.paragraph-feature-list--yellow,
.paragraph-feature-list--orange { background-color: var(--rc-color-brand-orange, #e2a829); }
.paragraph-feature-list--primary { background-color: var(--rc-color-brand-primary, #1d84c3); }
.paragraph-feature-list--green,
.paragraph-feature-list--teal { background-color: var(--rc-color-brand-green, #3a9e57); }
.paragraph-feature-list--secondary {
  background-color: var(--rc-color-brand-secondary, #055a8e);
  color: var(--rc-color-brand-white, #ffffff);
}
.paragraph-feature-list--blue {
  background-color: var(--rc-color-brand-blue, #1d84c3);
  color: var(--rc-color-brand-white, #ffffff);
}
.paragraph-feature-list--purple {
  background-color: var(--rc-color-brand-purple, #5b4f97);
  color: var(--rc-color-brand-white, #ffffff);
}

/* The legacy theme stylesheet (corporateplus/css/components/paragraphs.css,
   left over from ofes_paragraphs) still defines these same item-title /
   item-description / field-headline / field-title selectors at the SAME
   specificity (0,2,0) and wins the tie by load order, so its dark text
   color silently overrides the white set above — same root cause as the
   CTA banner full-bleed fix. Repeating the modifier class bumps this to
   (0,3,0), a guaranteed win regardless of source order. Scoped to only
   these three variants — the default/boxed (no colour class) heading and
   item text are untouched and keep their existing legacy-black look.
   field_body has no competing legacy rule, so it only needs the color
   added (was missing entirely, so it stayed default gray on dark
   backgrounds even though the container itself went white). */
.paragraph-feature-list--secondary.paragraph-feature-list--secondary .paragraph-feature-list__item-title,
.paragraph-feature-list--secondary.paragraph-feature-list--secondary .field--name-field-headline,
.paragraph-feature-list--secondary.paragraph-feature-list--secondary .field--name-field-title,
.paragraph-feature-list--blue.paragraph-feature-list--blue .paragraph-feature-list__item-title,
.paragraph-feature-list--blue.paragraph-feature-list--blue .field--name-field-headline,
.paragraph-feature-list--blue.paragraph-feature-list--blue .field--name-field-title,
.paragraph-feature-list--purple.paragraph-feature-list--purple .paragraph-feature-list__item-title,
.paragraph-feature-list--purple.paragraph-feature-list--purple .field--name-field-headline,
.paragraph-feature-list--purple.paragraph-feature-list--purple .field--name-field-title {
  color: var(--rc-color-brand-white, #ffffff);
}
/* Body/description text: softer than the heading, using the new
   --rc-color-text-inverse-muted token (rgba white @ 0.75) instead of solid
   white, for visual hierarchy under the white heading. */
.paragraph-feature-list--secondary.paragraph-feature-list--secondary .paragraph-feature-list__item-description,
.paragraph-feature-list--blue.paragraph-feature-list--blue .paragraph-feature-list__item-description,
.paragraph-feature-list--purple.paragraph-feature-list--purple .paragraph-feature-list__item-description,
.paragraph-feature-list--secondary .paragraph-feature-list__body,
.paragraph-feature-list--blue .paragraph-feature-list__body,
.paragraph-feature-list--purple .paragraph-feature-list__body {
  color: var(--rc-color-text-inverse-muted, rgba(255, 255, 255, 0.75));
}

.paragraph-feature-list__title { margin-bottom: 1rem; text-align: left; }
.paragraph-feature-list__body { margin-bottom: 1.5rem; color: var(--rc-color-gray-dark, #646464); }
@media (min-width: 992px) {
  .paragraph-feature-list .row {
    display: flex;
    align-items: center;
  }
}

.paragraph-feature-list__items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paragraph-feature-list__item {
  margin-bottom: 0.75rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.paragraph-feature-list__item-icon {
  align-self: center;
  flex-shrink: 0;
  width: clamp(72px, 6vw, 110px);
  height: clamp(72px, 6vw, 110px);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.paragraph-feature-list__item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.paragraph-feature-list__item-content { flex: 1; }
.paragraph-feature-list__item-title {
  font-weight: var(--rc-font-weight-bold, 700);
  margin-bottom: 0.25rem;
  font-size: var(--rc-text-heading-sm, clamp(20px, calc(19px + 0.5vw), 24px));
  margin-top: 0;
}
.paragraph-feature-list__item-description {
  font-size: var(--rc-text-body, var(--rc-font-size-base, clamp(17px, calc(16px + 0.3vw), 19px)));
  color: var(--rc-color-gray-dark, #646464);
}

/* ============================================
   APP PROMOTION
   ============================================ */
.paragraph--type--app-promotion.paragraph-app-promotion {
  display: block;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  text-align: center;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  table-layout: auto;
}


.paragraph-app-promotion__title { margin-bottom: 1rem; }
.paragraph-app-promotion__body {
  margin-bottom: 1.5rem;
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}
.paragraph-app-promotion__cta { margin-bottom: 2rem; }
.paragraph-app-promotion__screenshots {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.paragraph-app-promotion__screenshots .field__item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.paragraph-app-promotion__screenshots img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .paragraph-app-promotion__screenshots {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ============================================
   FEATURE GRID WITH ICON PARAGRAPH
   ============================================ */
/* Override Bootstrap Paragraphs base styles for our custom paragraph */
.paragraph--type--feature-grid-with-icon.paragraph-feature-icon-grid {
  display: block;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  table-layout: auto;
}

/* ---- Optional background image ---- */
.paragraph-feature-icon-grid--has-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Scrim so overlaid text stays legible. The container sits above it. */
.paragraph-feature-icon-grid__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
.paragraph-feature-icon-grid--has-bg > .container {
  position: relative;
  z-index: 1;
}


/* Header: title + intro, centered */
.paragraph-feature-icon-grid__header {
  text-align: center;
  margin-bottom: 3rem;
}

.paragraph-feature-icon-grid__title {
  margin: 0 0 1rem 0;
  color: var(--rc-color-text, #3b3b3b);
}

.paragraph-feature-icon-grid__intro {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--rc-font-size-base, clamp(17px, calc(16px + 0.3vw), 19px));
  line-height: var(--rc-line-height-relaxed, 1.8);
  color: var(--rc-color-text, #3b3b3b);
}

/* ---- Grid layout: equal items per row ----
   align-items: stretch plus height: 100% on the card (below) makes every
   card in a full row match the tallest one's height. Mobile is unaffected:
   a single-column row has only one card per line anyway. */
.paragraph-feature-icon-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem 2rem;
}

/* ---- Individual card ---- */
.paragraph--type--feature-grid-card.paragraph-feature-icon-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

/* Icon / logo image */
.paragraph-feature-icon-grid__card-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  flex-shrink: 0;
}

.paragraph-feature-icon-grid__card-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

/* Card title */
.paragraph-feature-icon-grid__card-title {
  font-size: var(--rc-text-heading-sm, clamp(20px, calc(19px + 0.5vw), 24px));
  font-weight: var(--rc-font-weight-bold, 700);
  line-height: var(--rc-line-height-tight, 1.2);
  margin: 0 0 0.5rem 0;
  color: var(--rc-color-text, #3b3b3b);
}

/* Card body text */
.paragraph-feature-icon-grid__card-body {
  font-size: var(--rc-text-body, var(--rc-font-size-base, clamp(17px, calc(16px + 0.3vw), 19px)));
  line-height: var(--rc-line-height-relaxed, 1.8);
  color: var(--rc-color-text-muted, #707070);
}

.paragraph-feature-icon-grid__card-body p {
  margin: 0;
}

/* Optional per-card CTA — generic structure only. Site themes supply the
   look (color, arrow, weight, hover). */
.paragraph-feature-icon-grid__card-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 0.75rem;
  text-decoration: none;
}

/* ---- "Boxed cards" opt-in (field_boxed_cards) ----
   Was previously wired to add the --boxed class on the wrapper but had no
   matching CSS anywhere, so the checkbox did nothing. This is the actual
   styling: each card becomes a rounded, brand-colour tile — icon/title/body
   in white on top, matching the "site card style" reference. */
.paragraph-feature-icon-grid--boxed .paragraph-feature-icon-grid__card {
  background-color: var(--rc-color-brand-primary, #1d84c3);
  color: var(--rc-color-brand-white, #ffffff);
  border-radius: 16px;
  padding: 2rem 1.5rem;
}
.paragraph-feature-icon-grid--boxed .paragraph-feature-icon-grid__card-title,
.paragraph-feature-icon-grid--boxed .paragraph-feature-icon-grid__card-body,
.paragraph-feature-icon-grid--boxed .paragraph-feature-icon-grid__card-body p {
  color: var(--rc-color-brand-white, #ffffff);
}
.paragraph-feature-icon-grid--boxed .paragraph-feature-icon-grid__card-cta {
  color: var(--rc-color-brand-white, #ffffff);
}

/* ---- Fixed column counts (field_grid_columns) ---- */
.paragraph-feature-icon-grid--cols-2 .paragraph-feature-icon-grid__grid,
.paragraph-feature-icon-grid--cols-3 .paragraph-feature-icon-grid__grid,
.paragraph-feature-icon-grid--cols-4 .paragraph-feature-icon-grid__grid {
  justify-content: stretch;
}
.paragraph-feature-icon-grid--cols-2 .paragraph-feature-icon-grid__grid { grid-template-columns: repeat(2, 1fr); }
.paragraph-feature-icon-grid--cols-3 .paragraph-feature-icon-grid__grid { grid-template-columns: repeat(3, 1fr); }
.paragraph-feature-icon-grid--cols-4 .paragraph-feature-icon-grid__grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .paragraph-feature-icon-grid--cols-2 .paragraph-feature-icon-grid__grid,
  .paragraph-feature-icon-grid--cols-3 .paragraph-feature-icon-grid__grid,
  .paragraph-feature-icon-grid--cols-4 .paragraph-feature-icon-grid__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Icon beside text (field_icon_position = beside) ---- */
.paragraph-feature-icon-grid--icon-beside .paragraph-feature-icon-grid__card {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 1.25rem;
}
.paragraph-feature-icon-grid--icon-beside .paragraph-feature-icon-grid__card-icon {
  margin: 0;
}

/* ============================================
   STEP BY STEP WITH LINKS PARAGRAPH
   ============================================ */
/* Override Bootstrap Paragraphs base styles for our custom paragraph */
.paragraph--type--step-by-step-with-links.paragraph-steps {
  display: block;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  table-layout: auto;
}


/* Header: subtitle + title + intro */
.paragraph-steps__header {
  margin-bottom: 3rem;
}

.paragraph-steps__title {
  margin: 0 0 1rem 0;
  color: var(--rc-color-brand-primary, #1d84c3);
}

.paragraph-steps__intro {
  font-size: var(--rc-text-body, var(--rc-font-size-base, clamp(17px, calc(16px + 0.3vw), 19px)));
  line-height: var(--rc-line-height-relaxed, 1.8);
  color: var(--rc-color-text, #3b3b3b);
  max-width: 700px;
}

/* Steps list */
.paragraph-steps__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---- Optional auto-numbering (field_show_numbers) ---- */
.paragraph-steps--numbered .paragraph-steps__list {
  counter-reset: rc-step;
}
.paragraph-steps--numbered .paragraph-steps__step {
  counter-increment: rc-step;
}
/* Number circle as the step's leading column (flex item before the content). */
.paragraph-steps--numbered .paragraph-steps__step::before {
  content: counter(rc-step);
  order: -1;                 /* sit before the content/CTA */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--rc-color-brand-primary, #1d84c3);
  color: var(--rc-color-brand-white, #fff);
  font-weight: var(--rc-font-weight-bold, 700);
  font-size: 1rem;
  line-height: 1;
}

/* Individual step — two-column: text left, CTA right */
.paragraph-steps__step {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--rc-color-border, #d0d0d0);
}

.paragraph-steps__step:last-child {
  border-bottom: 1px solid var(--rc-color-border, #d0d0d0);
}

/* Text content column */
.paragraph-steps__step-content {
  flex: 1;
  min-width: 0;
}

.paragraph-steps__step-title {
  font-size: var(--rc-text-heading-lg, clamp(24px, calc(22px + 0.8vw), 30px));
  font-weight: var(--rc-font-weight-bold, 700);
  line-height: var(--rc-line-height-tight, 1.2);
  color: var(--rc-color-brand-primary, #1d84c3);
  margin: 0 0 0.75rem 0;
}

.paragraph-steps__step-body {
  font-size: var(--rc-text-body, var(--rc-font-size-base, clamp(17px, calc(16px + 0.3vw), 19px)));
  line-height: var(--rc-line-height-relaxed, 1.8);
  color: var(--rc-color-text, #3b3b3b);
}

.paragraph-steps__step-body p {
  margin: 0;
}

/* CTA column */
.paragraph-steps__step-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  align-self: center;
}

.paragraph-steps__step-cta .btn-primary {
  white-space: normal;
  text-align: center;
  max-width: 220px;
}

/* Responsive: stack on mobile */
@media (max-width: 767px) {
  .paragraph-steps__step {
    flex-direction: column;
    gap: 1.5rem;
  }

  .paragraph-steps__step-cta {
    padding-top: 0;
  }

  .paragraph-steps__step-cta .btn-primary {
    max-width: none;
    width: 100%;
  }
}

/* ============================================
   HUBSPOT FORM POPUP PARAGRAPH
   ============================================ */
/* Base: minimal section (no background color selected).
   Just centered text + button on the page's existing background. */
.paragraph--type--hubspot-form-popup.paragraph-hubspot-popup {
  display: block;
  position: relative;
  padding: var(--rc-paragraph-spacing, 4rem) 0;
  overflow: hidden;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  table-layout: auto;
  text-align: center;
}


.paragraph-hubspot-popup__content {
  position: relative;
  z-index: 1;
}

.paragraph-hubspot-popup__title {
  margin-bottom: 1rem;
}

.paragraph-hubspot-popup__body {
  margin-bottom: 1.5rem;
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

.paragraph-hubspot-popup__cta {
  margin-top: 1rem;
}

/* ── Colored background variant ──
   Activated when the editor picks a background color (--has-bg). */
.paragraph-hubspot-popup--has-bg {
  color: var(--rc-color-brand-white, #ffffff);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.paragraph-hubspot-popup--has-bg .paragraph-hubspot-popup__title {
  color: var(--rc-color-brand-white, #ffffff);
}

.paragraph-hubspot-popup--secondary {
  background-color: var(--rc-color-brand-secondary, #055a8e);
}

.paragraph-hubspot-popup--blue {
  background-color: var(--rc-color-brand-blue, #1d84c3);
}

.paragraph-hubspot-popup--primary {
  background-color: var(--rc-color-brand-primary, #1d84c3);
}

.paragraph-hubspot-popup--green,
.paragraph-hubspot-popup--teal {
  background-color: var(--rc-color-brand-green, #3a9e57);
}

.paragraph-hubspot-popup--purple {
  background-color: var(--rc-color-brand-purple, #5b4f97);
}

.paragraph-hubspot-popup--accent {
  background-color: var(--rc-color-brand-accent, #e2a829);
}

.paragraph-hubspot-popup--yellow,
.paragraph-hubspot-popup--orange {
  background-color: var(--rc-color-brand-orange, #e2a829);
}

/* ============================================
   HUBSPOT MODAL (global — works for any trigger)
   ============================================ */
.hubspot-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.hubspot-modal--open {
  visibility: visible;
  opacity: 1;
}

/* Dark backdrop */
.hubspot-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* Centered white panel */
.hubspot-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--rc-color-brand-white, #fff);
  border-radius: 8px;
  padding: 2.5rem 2rem 2rem;
  width: 90vw;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* Close button */
.hubspot-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--rc-color-text-muted, #999);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.15s;
}

.hubspot-modal__close:hover,
.hubspot-modal__close:focus {
  color: var(--rc-color-text-muted, #707070);
}

/* Form container — HubSpot injects its own styles here */
.hubspot-modal__form {
  margin-top: 0.5rem;
}

/* Prevent page scroll while modal is open */
body.hubspot-modal-active {
  overflow: hidden;
}

/* Responsive: full-width on small screens */
@media (max-width: 576px) {
  .hubspot-modal__panel {
    width: 95vw;
    padding: 2rem 1.25rem 1.5rem;
    border-radius: 8px 8px 0 0;
    max-height: 85vh;
    align-self: flex-end;
  }
}

/* ============================================
   PRIMARY BUTTON
   ============================================ */
.btn-primary {
  display: inline-block;
  padding: 15px 23px;
  font-size: 18px;
  font-weight: var(--rc-font-weight-bold, 700);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border-radius: 4px;
  border: 1px solid var(--rc-color-brand-primary, #1d84c3);
  background-color: var(--rc-color-brand-primary, #1d84c3);
  color: var(--rc-color-brand-white, #ffffff);
  transition: all 0.2s ease-in-out;
  margin: 10px 0;
  text-align: center;
  cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--rc-color-brand-white, #ffffff);
  border-color: var(--rc-color-brand-primary, #1d84c3);
  color: var(--rc-color-brand-primary, #1d84c3);
  text-decoration: none;
}

/* ============================================
   CTA BUTTON OVERRIDES (paragraph-specific)
   ============================================ */
.paragraph-cta-banner--left .btn-primary {
  margin-left: 0;
  margin-right: auto;
}

/* ============================================
   FULL-WIDTH BACKGROUND, BOXED CONTENT
   Opt-in per section via field_section_width.
   The .paragraph--full-bleed class is added to the outer wrapper by
   rcomms_paragraphs_preprocess_paragraph() for TOP-LEVEL sections only.

   Mechanism: break the element out of the theme's content column to full
   viewport width, then re-box its inner content at the container width.
   Works on any theme regardless of content-column margins.

   NOTE: individual paragraph types set their own width via a compound selector
   (e.g. .paragraph--type--cta-banner.paragraph-cta-banner, specificity 0,2,0),
   and several add `width: 100% !important`. That's a SAME-specificity tie
   against a naive `.paragraph--full-bleed.paragraph--full-bleed` (also 0,2,0)
   — ties are broken by source order, which turned out to be inconsistent
   across properties in production (margins won, width/position lost). So the
   class is repeated a 3rd time here (0,3,0) to win outright, no tie possible,
   regardless of aggregation/source order. Generic — no per-type selectors.
   ============================================ */
.paragraph--full-bleed.paragraph--full-bleed.paragraph--full-bleed {
  /* !important is needed because several paragraph types set
     `width: 100% !important` on their own root rule, which would otherwise
     pin them to the content column and defeat the breakout.

     Anchor to the viewport from the element's own left edge: left:50% moves
     the start to the parent's horizontal centre, then margin-left:-50vw pulls
     it to the viewport's left edge. width:100vw fills to the right edge. This
     is symmetric regardless of how the ancestor column is padded or offset. */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw !important;
  max-width: 100vw !important;
  /* !important on the margins too: several type rules set
     `margin-left/right: 0 !important`, which would otherwise cancel the pull-
     back and shove the section to the right. */
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Re-box the inner CONTENT back to the boxed width — but NOT absolutely
   positioned layers (background image, colour overlay), which must stay
   full-bleed. We therefore target only static-flow children, excluding the
   __background and __overlay layers. A .container content child re-boxes via
   its own theme rules; this keeps non-container content boxed too. */
.paragraph--full-bleed > *:not(.paragraph-cta-banner__overlay):not(.paragraph-cta-banner__background):not(.paragraph-feature-icon-grid__overlay):not(.paragraph-text-image__panels) {
  max-width: var(--rc-container-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--rc-paragraph-spacing, 4rem);
}

/* If the content child is a Bootstrap .container it already self-boxes; don't
   double the max-width/padding on it. */
.paragraph--full-bleed > .container {
  max-width: var(--rc-container-max-width, 1440px);
  padding-inline: var(--rc-paragraph-spacing, 4rem);
}

/* ============================================================
   QUOTE — opt-in card/testimonial variants
   Requested by Joy (Slack), Sept 2026: a card-style testimonial with the
   attribution inside the box, a smaller/subtler quote mark, and an optional
   small (~100px) logo above the quote text. Opt-in only, via the CSS
   Classes field (field_css_classes) — add "quote-style-1" or
   "quote-style-2" to a Quote paragraph instance. Existing default Quote
   styling (no class added) is completely untouched by anything below.
   ============================================================ */

/* Shared between both variants: centered layout, optional logo, a smaller
   and more restrained quote mark than the default, and the name/location
   footer rendered inside the box with its own (non-default) look. */
.paragraph--type--quote.quote-style-1,
.paragraph--type--quote.quote-style-2 {
  text-align: center;
  margin-bottom: 5rem;
}

.paragraph--type--quote.quote-style-1 .paragraph-quote__logo,
.paragraph--type--quote.quote-style-2 .paragraph-quote__logo {
  width: 100px;
  margin: 0 auto 1rem;
}
.paragraph--type--quote.quote-style-1 .paragraph-quote__logo img,
.paragraph--type--quote.quote-style-2 .paragraph-quote__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Smaller, subtler quote mark than the module default (which inherits the
   full blockquote font-size and reads as oversized in Joy's reference). */
.paragraph--type--quote.quote-style-1 .blockquote p:first-of-type::before,
.paragraph--type--quote.quote-style-2 .blockquote p:first-of-type::before {
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.6;
}

.paragraph--type--quote.quote-style-1 .blockquote-footer,
.paragraph--type--quote.quote-style-2 .blockquote-footer {
  margin-top: 0.75rem;
  font-style: italic;
}

/* Style 1: light card/box (per Joy's reference image). */
.paragraph--type--quote.quote-style-1 {
  border: 1px solid var(--rc-color-border, #e0e0e0);
  border-radius: 8px;
  background-color: var(--rc-color-bg-light, #f8f9fa);
  padding: 2rem;
}
.paragraph--type--quote.quote-style-1 .blockquote p:first-of-type::before {
  color: var(--rc-color-gray-dark, #646464);
}
.paragraph--type--quote.quote-style-1 .blockquote-footer {
  color: var(--rc-color-text-muted, #707070);
}

/* Style 2: same as style 1, minus the card — solid brand-colour background
   that spans the full viewport width, edge to edge, with the quote text
   re-boxed inside so it stays readable. The Quote paragraph type doesn't
   expose field_section_width (unlike cta-banner), so this can't lean on
   the generic .paragraph--full-bleed opt-in — it does its own breakout,
   self-contained, using the same left:50%/-50vw technique. */
.paragraph--type--quote.quote-style-2 {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  border: none;
  background-color: var(--rc-color-quote-highlight-bg, rgba(29, 132, 195, 0.2));
  color: var(--rc-color-text, #3b3b3b);
  padding: 3rem 2rem;
  box-sizing: border-box;
}
.paragraph--type--quote.quote-style-2 .blockquote,
.paragraph--type--quote.quote-style-2 .blockquote-footer,
.paragraph--type--quote.quote-style-2 .paragraph-quote__logo {
  max-width: var(--rc-container-max-width, 1440px);
  margin-inline: auto;
}
.paragraph--type--quote.quote-style-2 .blockquote p:first-of-type::before {
  color: var(--rc-color-gray-dark, #646464);
}
.paragraph--type--quote.quote-style-2 .blockquote-footer {
  color: var(--rc-color-text-muted, #707070);
}