.navbar-top.style-two {
  position: relative !important;
  z-index: 20 !important;
  min-height: 42px;
  display: flex;
  align-items: center;
}

.navbar-area.style-four {
  position: relative !important;
  z-index: 19 !important;
  margin-top: 0 !important;
  background: transparent !important;
}

.navbar-area.style-four,
.navbar-area.style-four .container,
.navbar-area.style-four .navbar-wrapper,
.navbar-area.style-four .menu-area,
.navbar-area.style-four .main-menu-wrap {
  background: transparent !important;
}

.navbar-area.style-four .navbar-wrapper {
  min-height: 122px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.navbar-area.style-four .navbar-brand {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.navbar-area.style-four .navbar-brand img {
  max-width: 108px !important;
  max-height: 92px !important;
  margin: 0 !important;
}

.navbar-area.style-four .menu > ul > li > a,
.navbar-area.style-four .menu-section > li > a,
.navbar-area.style-four .other-options .option-item .search-btn i {
  color: #fff !important;
}

.navbar-area.style-four .menu > ul > li > a.active,
.navbar-area.style-four .menu > ul > li > a:hover,
.navbar-area.style-four .menu-section > li > a.active,
.navbar-area.style-four .menu-section > li > a:hover {
  color: var(--rrbp-mint, #B9F8B1) !important;
}

/* The banner was 505px tall with 236px of top padding for a one-word page
   name - it pushed the real content most of a screen down. The bar is 131px,
   so 150px of top padding clears it with room to spare. */
.breadcrumb-area.style-one {
  min-height: 0;
  display: flex;
  align-items: center;
  margin-top: -122px !important;
  padding: 158px 0 52px !important;
  overflow: hidden;
}

.breadcrumb-area.style-one .br-bg {
  z-index: 0;
  height: calc(100% + 20px);
}

.breadcrumb-area.style-one .br-bg::after {
  z-index: 1;
  pointer-events: none;
}

.breadcrumb-area.style-one > .container {
  position: relative;
  z-index: 3;
}

.breadcrumb-area.style-one .rrbp-breadcrumb-title,
.breadcrumb-area.style-one .br-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  clip-path: none !important;
}

.breadcrumb-area.style-one .rrbp-breadcrumb-title {
  color: #fff !important;
  font-weight: 800;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  margin: 0 0 12px;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}

.breadcrumb-area.style-one .br-menu li,
.breadcrumb-area.style-one .br-menu li a {
  color: #fff !important;
}

.breadcrumb-area.style-one .br-menu li::after {
  color: rgba(255, 255, 255, 0.72) !important;
}

.testimonial-card .client-info-wrap {
  display: none !important;
}

.job-feature-card.style-one {
  min-height: 265px;
}

.job-feature-card.style-one p {
  display: block !important;
}

.rrbp-career-application-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  max-width: 980px;
  margin: 48px auto 78px !important;
  padding: 34px 40px !important;
}

.rrbp-career-application-panel p {
  max-width: 760px;
  margin-bottom: 0;
}

.rrbp-contact-section .container.style-one {
  padding-top: 84px !important;
  padding-bottom: 84px !important;
}

.rrbp-contact-section .row.pb-90 {
  align-items: stretch;
  padding-bottom: 64px !important;
}

.rrbp-contact-form {
  height: 100%;
  padding: 52px 64px 58px !important;
}

.rrbp-contact-form .form-group {
  margin-bottom: 34px !important;
}

.cursor,
.cursor-inner {
  display: none !important;
}

@media (min-width: 992px) {
  .navbar-area.style-one .navbar-wrapper,
  .navbar-area.style-four .navbar-wrapper {
    position: relative !important;
  }

  .navbar-area.style-one .menu-area,
  .navbar-area.style-one .menu,
  .navbar-area.style-one .menu-section,
  .navbar-area.style-one .menu-section > li,
  .navbar-area.style-four .menu-area,
  .navbar-area.style-four .menu,
  .navbar-area.style-four .menu-section,
  .navbar-area.style-four .menu-section > li {
    position: static !important;
  }

  .navbar-area.style-one .menu-section > li.menu-item-has-children > a,
  .navbar-area.style-four .menu-section > li.menu-item-has-children > a {
    position: relative !important;
  }

  .navbar-area.style-one .menu-section > li.menu-item-has-children > a::after,
  .navbar-area.style-four .menu-section > li.menu-item-has-children > a::after {
    content: "";
    position: absolute;
    left: -18px;
    right: -18px;
    top: 100%;
    height: 74px;
  }

  .navbar-area.style-one .menu-section > li > .rrbp-mega-menu,
  .navbar-area.style-four .menu-section > li > .rrbp-mega-menu {
    position: absolute !important;
    top: calc(100% - 1px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(940px, calc(100vw - 64px)) !important;
    min-width: min(940px, calc(100vw - 64px)) !important;
    max-width: calc(100vw - 64px) !important;
    max-height: calc(100vh - 180px) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(190px, 1fr)) !important;
    gap: 24px 42px !important;
    padding: 28px 34px 30px !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 26px 70px rgba(0, 31, 34, 0.18) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 80;
  }

  .navbar-area.style-one .menu-section > li:hover > .rrbp-mega-menu,
  .navbar-area.style-one .menu-section > li:focus-within > .rrbp-mega-menu,
  .navbar-area.style-four .menu-section > li:hover > .rrbp-mega-menu,
  .navbar-area.style-four .menu-section > li:focus-within > .rrbp-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.rrbp-mega-menu .rrbp-mega-group {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
}

.rrbp-mega-title {
  display: block;
  color: #111;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
  text-transform: uppercase;
  white-space: normal !important;
}

.rrbp-mega-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * A rule under every item turned the mega menu into a stack of divider lines,
 * which reads as a bug rather than a menu. The theme highlights list items
 * with a soft filled pill on hover, so use that instead of borders.
 */
.rrbp-mega-links li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

.rrbp-mega-links li + li {
  margin-top: 2px !important;
}

.rrbp-mega-links a {
  color: var(--paraColor, #888787) !important;
  display: block !important;
  padding: 9px 12px !important;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.4;
  white-space: normal !important;
  /* The theme draws the divider on the anchor, not the li. */
  border-bottom: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.rrbp-mega-links a:hover {
  color: var(--primaryColor, #00252C) !important;
  background-color: var(--ashColor, #F5F5F5) !important;
}

.case-card.style-one .case-info h3,
.case-card.style-one .job-info h3,
.case-card.style-one .case-outcome-box h3 {
  color: #1E2B2C !important;
}

.case-card.style-one .case-info > p,
.case-card.style-one .job-info span {
  color: #72777F !important;
}

.rrbp-home .service-area.style-one {
  height: auto !important;
  min-height: 0;
  /* Clear space under the cards. At 0 the "Discover more" button sat exactly
     on the section's edge and was sliced off wherever the copy wrapped to an
     extra line. */
  padding-bottom: 56px !important;
  background-color: #053738;
}

.rrbp-home .service-area.style-one .service-bg {
  bottom: 0;
  overflow: hidden;
}

.rrbp-home .service-area.style-one .service-bg::after {
  height: 100% !important;
}

.rrbp-home .service-card.style-one h3,
.rrbp-home .service-card.style-one.active h3,
.rrbp-home .service-card.style-one:hover h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 37, 44, 0.42);
}

.rrbp-home .service-card.style-one p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.rrbp-home .service-card.style-one.active p,
.rrbp-home .service-card.style-one:hover p {
  color: #ffffff !important;
  font-weight: 500;
  text-shadow: 0 2px 18px rgba(0, 37, 44, 0.42);
}

.rrbp-home .service-card.style-one.active .btn,
.rrbp-home .service-card.style-one:hover .btn {
  opacity: 1;
  visibility: visible;
}

.rrbp-home .service-area.style-one .service-bg img,
.rrbp-home .promo-area.style-one .promo-bg img {
  transform: none !important;
}

.rrbp-home .service-slider-one {
  overflow: hidden;
  padding-bottom: 0;
  max-height: 520px;
}

.rrbp-home .service-slider-one .swiper-wrapper {
  align-items: stretch;
}

.rrbp-home .service-card.style-one,
.rrbp-home .service-card.style-one.active,
.rrbp-home .service-card.style-one:hover {
  min-height: 520px;
  height: 520px;
  transform: none !important;
}

.rrbp-home .service-card.style-one h3,
.rrbp-home .service-card.style-one.active h3,
.rrbp-home .service-card.style-one:hover h3 {
  margin: 42px 0 22px !important;
}

.rrbp-home .service-card.style-one p,
.rrbp-home .service-card.style-one .btn {
  opacity: 1 !important;
  visibility: visible !important;
}

/*
 * These cards carry .col-lg-4, so three of them shared the 776px content
 * column - 261px each, about 210px of measure once the padding is off, which
 * put four lines under a heading like "IFSCA Capital Market Intermediaries
 * compliance audit". The column is the constraint here, not the viewport, so
 * the row sizes itself off its own width instead of the breakpoint: two cards
 * while it is narrow, three wherever there is genuinely room for three.
 */
.rrbp-service-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 0 24px;
  align-items: stretch;
}

.rrbp-service-card-row > [class*="col-"] {
  display: flex;
  width: auto;
  max-width: none;
  flex: 1 1 auto;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 575.98px) {
  .rrbp-service-card-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rrbp-service-card {
  width: 100%;
  min-height: 245px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.rrbp-service-card .features-list li {
  color: var(--paraColor, #777);
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 10px;
  padding-left: 20px;
}

.rrbp-service-card .features-list li::before {
  top: 8px;
}

.rrbp-service-section {
  margin-top: 36px;
}

.mail-link {
  display: none !important;
  pointer-events: none !important;
}

.rrbp-home .home-blog-placeholder {
  display: none !important;
}

.rrbp-home .promo-area.style-one {
  min-height: 620px;
  padding-bottom: 135px !important;
}

.rrbp-home .promo-area.style-one .promo-box {
  margin-bottom: 0;
}

.rrbp-home .cta-area.style-two {
  clear: both;
  margin-top: -155px !important;
  padding-bottom: 76px !important;
  position: relative !important;
  z-index: 4 !important;
}

.rrbp-home .cta-area.style-two .cta-box {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1280px;
  position: relative;
  z-index: 4;
}

.rrbp-home .move-text-wrapper.style-one + .container.pt-120 {
  padding-top: 72px !important;
}

.rrbp-home .testimonial-area.style-two .container.style-one.pt-120 {
  padding-top: 78px !important;
}

.rrbp-home .move-text-wrapper.style-one {
  margin-top: 0 !important;
  position: relative;
  z-index: 3;
}

.rrbp-home .move-text-wrapper.style-one .move-text {
  min-height: 150px;
  display: flex;
  align-items: center;
}

.rrbp-home .footer-area.style-one {
  clear: both;
  position: relative;
  z-index: 1;
}

.rrbp-blog-empty {
  max-width: 850px;
  margin: 0 auto;
  padding: 80px 24px 96px;
}

.rrbp-section-kicker {
  color: var(--primaryColor, #00252C);
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.rrbp-update-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.rrbp-update-topics span {
  background: #fff;
  border: 1px solid rgba(0, 61, 64, 0.1);
  border-radius: 999px;
  color: #2d2d2d;
  font-weight: 700;
  padding: 13px 20px;
}

.pb-55 {
  padding-bottom: 55px !important;
}

.rrbp-career-cta-panel {
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
  margin: 0 auto 110px;
  padding: 56px 64px;
}

.rrbp-career-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(185, 248, 177, 0.23), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.rrbp-career-cta-copy,
.rrbp-career-cta-panel .btn {
  position: relative;
  z-index: 1;
}

.rrbp-career-cta-copy p {
  max-width: 720px;
}

@media (max-width: 991px) {
  .navbar-top.style-two {
    min-height: auto;
  }

  .navbar-area.style-four .navbar-wrapper {
    min-height: 82px !important;
  }

  .navbar-area.style-four .navbar-brand img {
    max-height: 74px !important;
  }

  .breadcrumb-area.style-one {
    min-height: 330px;
    margin-top: -82px !important;
    padding: 160px 0 72px !important;
  }

  .rrbp-career-application-panel {
    grid-template-columns: 1fr;
    margin: 36px auto 60px !important;
  }

  .rrbp-contact-form {
    padding: 40px 28px 46px !important;
  }

  .menu-section > li > .rrbp-mega-menu {
    position: static;
    transform: none;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px !important;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .rrbp-career-cta-panel {
    grid-template-columns: 1fr;
    padding: 42px 28px;
    margin-bottom: 76px;
  }

  .rrbp-home .promo-area.style-one {
    min-height: 560px;
    padding-bottom: 110px !important;
  }

  .rrbp-home .cta-area.style-two {
    margin-top: -118px !important;
    padding-bottom: 64px !important;
  }

  .rrbp-home .cta-area.style-two .cta-box {
    max-width: calc(100% - 32px);
  }

  .rrbp-home .service-slider-one {
    max-height: 480px;
  }

  .rrbp-home .service-card.style-one,
  .rrbp-home .service-card.style-one.active,
  .rrbp-home .service-card.style-one:hover {
    min-height: 480px;
    height: 480px;
  }

  .rrbp-home .move-text-wrapper.style-one .move-text {
    min-height: 128px;
  }
}

@media (max-width: 575px) {
  .breadcrumb-area.style-one {
    min-height: 290px;
    padding: 62px 0 58px !important;
  }

  .breadcrumb-area.style-one .rrbp-breadcrumb-title {
    font-size: clamp(42px, 16vw, 64px);
  }

  .rrbp-home .promo-area.style-one {
    min-height: 520px;
    padding-bottom: 90px !important;
  }

  .rrbp-home .cta-area.style-two {
    margin-top: -88px !important;
    padding-bottom: 48px !important;
  }

  .rrbp-home .cta-area.style-two .cta-box {
    max-width: calc(100% - 24px);
  }

  .rrbp-home .service-slider-one {
    max-height: 440px;
  }

  .rrbp-home .service-card.style-one,
  .rrbp-home .service-card.style-one.active,
  .rrbp-home .service-card.style-one:hover {
    min-height: 440px;
    height: 440px;
  }

  .rrbp-home .move-text-wrapper.style-one .move-text {
    min-height: 108px;
  }
}

.rrbp-public-card.case-card.style-one,
.rrbp-career-live .service-card.style-three {
  height: calc(100% - 25px);
  display: flex;
  flex-direction: column;
}

.rrbp-public-card.case-card.style-one h3 a {
  color: #1E2B2C !important;
}

.rrbp-public-card.case-card.style-one .text-para,
.rrbp-career-live .service-card.style-three .text-para {
  color: #72777F !important;
}

.rrbp-public-card.case-card.style-one .btn,
.rrbp-career-live .service-card.style-three .btn {
  width: fit-content;
  max-width: 100%;
  margin-top: auto;
  overflow: visible;
  white-space: nowrap;
}

.rrbp-public-card.case-card.style-one .btn .btn-text,
.rrbp-career-live .service-card.style-three .btn .btn-text {
  min-height: 54px;
  padding: 0 30px;
  white-space: nowrap;
}

.rrbp-public-card.case-card.style-one .btn .btn-icon-one,
.rrbp-public-card.case-card.style-one .btn .btn-icon-two,
.rrbp-career-live .service-card.style-three .btn .btn-icon-one,
.rrbp-career-live .service-card.style-three .btn .btn-icon-two {
  flex: 0 0 54px;
  color: #000000;
}

.rrbp-blog-empty {
  max-width: 1040px;
  margin: 0 auto;
}

.rrbp-generated-post {
  max-width: 980px;
  margin: 0 auto;
}

.rrbp-career-live {
  padding-bottom: 80px;
}

.rrbp-career-live .service-card.style-three {
  min-height: 310px;
}

/* =========================================================
   1. GLOBAL FONT READABILITY SCALE UP
   ========================================================= */
html {
  font-size: 106.25%; /* Scales base font from 16px to 17px */
}

body {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
}

p, .text-para {
  font-size: 1.06rem !important;
  line-height: 1.65 !important;
}

.fs-14 { font-size: 15px !important; }
.fs-15 { font-size: 16px !important; }
.fs-16 { font-size: 17.5px !important; }
.fs-18, .fs-xxl-18 { font-size: 19px !important; }
.fs-20 { font-size: 21px !important; }
.fs-24 { font-size: 25px !important; }

ul li, ol li {
  font-size: 1.05rem;
  line-height: 1.6;
}

.menu > ul > li > a, .menu-section > li > a {
  font-size: 16.5px !important;
}

.footer-widget p, .footer-widget-title, .footer-menu li a {
  font-size: 1.05rem !important;
}

/* =========================================================
   1. SERVICE CHIPS NAV (EXROX THEME STYLE)
   ========================================================= */
.rrbp-service-nav {
  padding: 60px 0 35px !important;
}


/* =========================================================
   2. PORTAL SERVICES BANNER (EXROX NATIVE MOVE-TEXT)
   ========================================================= */
.rrbp-portal-ribbon {
  /* The brand green, not the soft tint: this band is the one horizontal line
     of colour between the hero and the page, and it is where the mark's green
     belongs. White on it is 3.4:1, which clears AA for the 19px bold below
     but would not at 17px - hence the size bump with it. */
  background: #599C24;
  padding: 14px 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.rrbp-ribbon-track {
  display: flex;
  width: max-content;
  gap: 28px;
  animation: rrbpRibbonScroll 25s linear infinite;
  align-items: center;
}

.rrbp-portal-ribbon:hover .rrbp-ribbon-track {
  animation-play-state: paused;
}

@keyframes rrbpRibbonScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.rrbp-ribbon-item {
  font-size: 19px;
  font-weight: 700;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.rrbp-ribbon-item:hover {
  color: var(--secondaryColor, #B9F8B1);
}

.rrbp-ribbon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  display: inline-block;
}

/* =========================================================
   3. FOOTER CIRCULAR WALL CLOCKS (REALISTIC DIAL WITH SECOND HAND)
   ========================================================= */


.rrbp-clock-svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* =========================================================
   4. SERVICE SLIDER OVERLAP & LAYOUT IMBALANCE FIX
   ========================================================= */
/*
 * An earlier pass tried to park the arrows in a row beneath the slider, but the
 * theme keeps them position:absolute, so the wrapper collapsed to zero height
 * and the buttons pinned to its top edge - below the cards, out of reach. The
 * arrows now sit at the slider edges instead, so this wrapper must NOT create a
 * containing block.
 */
.service-area.style-one .slider-btn.style-four {
  /*
   * Lives between the heading and the slider in the markup. Swiper needs
   * overflow:hidden on .service-slider-one, which clipped any arrow placed
   * outside the card row, so these cannot live inside it.
   * Wide screens: lifted out of flow to sit level with the heading.
   * Narrow screens: left in flow, so it drops under the heading instead of
   * landing on top of it.
   */
  position: absolute;
  top: 150px;
  right: 60px;
  width: auto !important;
  display: flex !important;
  gap: 12px;
  margin: 0 !important;
  z-index: 6;
}

@media (max-width: 991.98px) {
  .service-area.style-one .slider-btn.style-four {
    position: static;
    justify-content: flex-start !important;
    margin: 0 0 28px !important;
    padding-left: 15px;
  }
}
/* =========================================================
   5. ABOUT PAGE TEAM CARDS & LINKEDIN OVERLAY
   ========================================================= */
.team-card.style-one .team-info {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.team-card.style-one .team-info > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.team-card.style-one .team-info h3 {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 19px !important;
  margin-bottom: 4px !important;
}

.team-card.style-one .linkedin-link {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  background-color: #0077b5 !important;
  color: #ffffff !important;
  font-size: 18px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 119, 181, 0.35);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.team-card.style-one .linkedin-link:hover {
  background-color: #005582 !important;
  transform: scale(1.1);
  color: #ffffff !important;
}


/* =========================================================
   7. CONTACT US DUAL ADDRESS & DUAL MAP LAYOUT
   ========================================================= */
.rrbp-contact-dual-section {
  padding: 60px 0 90px;
}

.rrbp-office-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #eef1f6;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rrbp-office-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(56, 67, 160, 0.1);
}

.rrbp-office-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f7;
}

.rrbp-office-icon {
  width: 50px;
  height: 50px;
  background: rgba(56, 67, 160, 0.1);
  color: #00252C;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.rrbp-office-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a1c23;
}

.rrbp-office-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #00252C;
  background: #eef0ff;
  padding: 3px 10px;
  border-radius: 6px;
  margin-top: 4px;
}

.rrbp-office-details {
  margin-bottom: 22px;
  flex-grow: 1;
}

.rrbp-office-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  color: #4a505e;
  font-size: 16px;
  line-height: 1.5;
}

.rrbp-office-detail-item i {
  color: #00252C;
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.rrbp-office-map-frame {
  width: 100%;
  height: 280px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e7f0;
  margin-top: auto;
}

.rrbp-office-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================================================
   RRBP COMPONENTS - built on the exrox tokens, not alongside them.

   Reference values measured from the live theme:
     eyebrow  .section-subtitle  19px / 400 / #000000
     heading  .section-title     40px / lh 52px
     card     .case-card         #fff, 20px radius, 50px pad
     CTA      pill #B9F8B1 + #91D089 circle, both 54px tall
     body     DM Sans 18px / lh 29.7 / #888787
   ========================================================= */

/* ---------------------------------------------------------
   A. Sticky news stack

   The stack broke because cards stick at a shared top offset while having
   different heights, so a taller card's tail protruded below the card meant
   to cover it (measured: an 868px card under an 808px card left 60px
   bleeding through). Uniform height plus an explicit z-index ladder fixes
   both the bleed and the paint order.
   --------------------------------------------------------- */
.case-card-wrap.style-one {
  position: relative;
}

.case-card-wrap.style-one > .case-card {
  position: sticky;
  top: 100px;
  /* An opaque background is what lets one card actually hide the last. */
  background-color: #fff;
}

.case-card-wrap.style-one > .case-card:nth-child(1) { z-index: 1; }
.case-card-wrap.style-one > .case-card:nth-child(2) { z-index: 2; }
.case-card-wrap.style-one > .case-card:nth-child(3) { z-index: 3; }
.case-card-wrap.style-one > .case-card:nth-child(4) { z-index: 4; }
.case-card-wrap.style-one > .case-card:nth-child(5) { z-index: 5; }
.case-card-wrap.style-one > .case-card:nth-child(6) { z-index: 6; }
.case-card-wrap.style-one > .case-card:nth-child(7) { z-index: 7; }
.case-card-wrap.style-one > .case-card:nth-child(8) { z-index: 8; }

/* ---------------------------------------------------------
   B. News card
   --------------------------------------------------------- */
.rrbp-news-card {
  /* Uniform height is what keeps the stack from bleeding. */
  min-height: 560px;
  display: flex;
  align-items: center;
  box-shadow: 0 -18px 40px rgba(0, 37, 44, 0.07);
}

.rrbp-news-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*
 * style-4d99433f74be2ed9.css carries
 *   .case-card h3, .service-card h3 { color:#fff !important }
 * which suits the theme's dark cards but renders these white news cards
 * invisible-on-white. Matching the !important is the only way to win, and this
 * sheet loads last so equal specificity resolves in our favour.
 */
.rrbp-news-card .rrbp-news-body h3 {
  font-family: var(--secondaryFont, "Rethink Sans", sans-serif);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.36;
  color: var(--titleColor, #000000) !important;
  margin: 0;
}

.rrbp-news-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  /* Reserving the box removes layout shift while the image decodes. */
  aspect-ratio: 4 / 3;
  background: var(--ashColor, #f5f5f5);
}

.rrbp-news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rrbp-news-counter {
  position: absolute;
  right: 26px;
  bottom: 20px;
  font-family: var(--secondaryFont, "Rethink Sans", sans-serif);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* Matches .section-subtitle instead of inventing a new eyebrow style. */
.rrbp-eyebrow {
  display: block;
  font-family: var(--primaryFont, "DM Sans", sans-serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--titleColor, #000000);
  margin-bottom: 12px;
}

.rrbp-news-source {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rrbp-news-source-logo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--ashColor, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--secondaryFont, "Rethink Sans", sans-serif);
  font-weight: 800;
  font-size: 15px;
  color: var(--primaryColor, #00252C);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.rrbp-news-authority {
  font-size: 17px;
  font-weight: 700;
  color: var(--titleColor, #000000);
  line-height: 1.35;
  margin: 0 0 3px;
}

.rrbp-news-meta {
  font-size: 14px;
  color: var(--grayColor, #99A8AB);
  display: block;
}

.rrbp-news-summary {
  font-size: 17px;
  line-height: 1.68;
  color: var(--paraColor, #888787);
  margin: 0;
  /* Clamping is what keeps every card the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rrbp-news-takeaways {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rrbp-news-chip {
  font-size: 14px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 50px;
  background: var(--ashColor, #f5f5f5);
  color: var(--titleColor, #000000);
  white-space: nowrap;
}

.rrbp-news-chip:nth-child(2) {
  background: var(--secondaryColor, #B9F8B1);
  color: #1E2B2C;
}

.rrbp-news-chip:nth-child(3) {
  background: var(--primaryColor, #00252C);
  color: #fff;
}

/* ---------------------------------------------------------
   C. Blog article typography

   The generated post used to be one undifferentiated .text-para block, which
   is why it read as plain text. This gives admin-authored HTML a real scale.
   --------------------------------------------------------- */
.rrbp-article {
  max-width: 78ch;
  margin: 0 auto;
}

.rrbp-article-hero {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 36px;
  background: var(--ashColor, #f5f5f5);
}

.rrbp-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 15px;
  color: var(--grayColor, #99A8AB);
  margin-bottom: 18px;
}

.rrbp-article-meta .rrbp-news-chip {
  font-size: 13px;
  padding: 6px 14px;
}

.rrbp-article h1,
.rrbp-article h2.rrbp-article-title {
  font-family: var(--secondaryFont, "Rethink Sans", sans-serif);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.18;
  color: var(--titleColor, #000000);
  margin: 0 0 22px;
}

.rrbp-article-lead {
  font-size: 20px;
  line-height: 1.62;
  color: var(--titleColor, #000000);
  margin: 0 0 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rrbp-article-body {
  font-size: 18px;
  line-height: 1.78;
  color: var(--paraColor, #888787);
}

.rrbp-article-body > *:first-child {
  margin-top: 0;
}

.rrbp-article-body h2 {
  font-family: var(--secondaryFont, "Rethink Sans", sans-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--titleColor, #000000);
  margin: 46px 0 16px;
  line-height: 1.3;
}

.rrbp-article-body h3 {
  font-family: var(--secondaryFont, "Rethink Sans", sans-serif);
  font-size: 23px;
  font-weight: 700;
  color: var(--titleColor, #000000);
  margin: 34px 0 12px;
  line-height: 1.35;
}

.rrbp-article-body p {
  margin: 0 0 22px;
}

.rrbp-article-body ul,
.rrbp-article-body ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.rrbp-article-body li {
  margin-bottom: 11px;
  padding-left: 4px;
}

.rrbp-article-body li::marker {
  color: #599C24;
  font-weight: 700;
}

.rrbp-article-body a {
  color: #599C24;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rrbp-article-body blockquote {
  margin: 32px 0;
  padding: 26px 30px;
  background: var(--ashColor, #f5f5f5);
  border-left: 4px solid #599C24;
  border-radius: 0 14px 14px 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--titleColor, #000000);
}

.rrbp-article-body blockquote p:last-child {
  margin-bottom: 0;
}

.rrbp-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 12px 0 26px;
}

.rrbp-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: 16px;
}

.rrbp-article-body th,
.rrbp-article-body td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px 15px;
  text-align: left;
}

.rrbp-article-body th {
  background: var(--ashColor, #f5f5f5);
  color: var(--titleColor, #000000);
  font-weight: 700;
}

/* Wide tables scroll in place instead of widening the page. */
.rrbp-table-scroll {
  overflow-x: auto;
  margin: 0 0 26px;
}

.rrbp-article-body code {
  background: var(--ashColor, #f5f5f5);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.9em;
}

.rrbp-article-footer {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.rrbp-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------------------------------------------------------
   D. Blog index cards - equal height, image box reserved
   --------------------------------------------------------- */
.rrbp-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.rrbp-post-card-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--ashColor, #f5f5f5);
}

.rrbp-post-card-body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
}

.rrbp-post-card-body h3 {
  font-size: 21px;
  line-height: 1.38;
  margin: 0;
}

.rrbp-post-card-body h3 a {
  color: var(--titleColor, #000000);
  text-decoration: none;
  transition: color ease 0.35s;
}

.rrbp-post-card-body h3 a:hover {
  color: #599C24;
}

.rrbp-post-card-excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: var(--paraColor, #888787);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rrbp-post-card-cta {
  margin-top: auto;
  padding-top: 6px;
}

/* ---------------------------------------------------------
   E. Career cards
   --------------------------------------------------------- */
.rrbp-job-card {
  background: #fff;
  border-radius: 20px;
  padding: 34px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid transparent;
  transition: var(--transition, all ease 0.5s);
}

.rrbp-job-card:hover {
  border-color: #599C24;
  transform: translateY(-4px);
}

.rrbp-job-card h3 {
  font-size: 22px;
  line-height: 1.35;
  margin: 0;
  color: var(--titleColor, #000000);
}

.rrbp-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rrbp-job-tag {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  background: var(--ashColor, #f5f5f5);
  color: var(--titleColor, #000000);
}

.rrbp-job-tag.is-primary {
  background: var(--secondaryColor, #B9F8B1);
  color: #1E2B2C;
}

.rrbp-job-summary {
  font-size: 16px;
  line-height: 1.68;
  color: var(--paraColor, #888787);
  margin: 0;
}

.rrbp-job-cta {
  margin-top: auto;
  padding-top: 8px;
}

.rrbp-empty-state {
  background: #fff;
  border-radius: 20px;
  padding: 60px 40px;
  text-align: center;
}

.rrbp-empty-state p {
  color: var(--paraColor, #888787);
  font-size: 17px;
  margin: 10px 0 0;
}

/* ---------------------------------------------------------
   F. Responsive
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  .rrbp-news-card {
    min-height: 0;
  }

  /* Below the wide breakpoint the cards stack normally; sticky overlap on a
     short viewport hides content instead of revealing it. */
  .case-card-wrap.style-one > .case-card {
    position: relative;
    top: auto;
    box-shadow: none;
  }

  .rrbp-news-counter {
    font-size: 42px;
  }
}

@media (max-width: 767px) {
  .rrbp-article-lead {
    font-size: 18px;
  }

  .rrbp-article-body {
    font-size: 17px;
  }

  .rrbp-article-body h2 {
    font-size: 26px;
    margin-top: 36px;
  }

  .rrbp-article-body h3 {
    font-size: 21px;
  }

  .rrbp-news-media {
    aspect-ratio: 16 / 10;
  }

  .rrbp-job-card,
  .rrbp-post-card-body {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rrbp-job-card:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------
   G. Footer

   The lone LinkedIn icon rendered in Bootstrap's default link blue
   (rgb(13,110,253)) on a #043138 disc - near-invisible against the footer and
   off-brand. Given it is now the only social link, it earns a real target.
   --------------------------------------------------------- */
.footer-area .social-profile.style-one a {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(185, 248, 177, 0.35);
  color: var(--secondaryColor, #B9F8B1) !important;
  font-size: 19px;
  transition: var(--transition, all ease 0.5s);
}

.footer-area .social-profile.style-one a:hover {
  background: var(--secondaryColor, #B9F8B1);
  border-color: var(--secondaryColor, #B9F8B1);
  color: #00252C !important;
}

/* Sits under the oversized RRBP wordmark, so give it breathing room. */
.footer-area .social-profile.style-one {
  margin-top: 18px;
}

.footer-area .footer-bottom {
  margin-top: 40px;
  padding: 26px 0 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-area .footer-bottom-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: flex-end;
}

.footer-area .footer-bottom-menu li + li {
  position: relative;
  padding-left: 22px;
}

.footer-area .footer-bottom-menu li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.28);
}

.footer-area .footer-bottom-menu a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: var(--transition, all ease 0.5s);
}

.footer-area .footer-bottom-menu a:hover {
  color: var(--secondaryColor, #B9F8B1);
}

/* Clock captions: the flag emoji were stripped because Windows renders
   regional-indicator pairs as bare letters. */
.rrbp-wall-clock-caption {
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .footer-area .footer-bottom-menu {
    justify-content: center;
  }

  .footer-area .social-profile.style-one {
    justify-content: center;
    display: flex;
  }
}

/* ---------------------------------------------------------
   H. "Why choose RRBP" capability cards

   One anatomy across all three: icon, title, lead, three proof points. The
   previous cards each had a different shape and two carried stock photos that
   did not depict the service.
   --------------------------------------------------------- */
.rrbp-why-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px 34px;
}

.rrbp-why-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondaryColor, #B9F8B1);
  color: #00252C;
  font-size: 29px;
  line-height: 1;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.rrbp-why-card.is-dark .rrbp-why-icon {
  background: rgba(185, 248, 177, 0.16);
  color: var(--secondaryColor, #B9F8B1);
}

.rrbp-why-title {
  font-family: var(--secondaryFont, "Rethink Sans", sans-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--titleColor, #000000) !important;
}

.rrbp-why-card.is-dark .rrbp-why-title {
  color: #fff !important;
}

.rrbp-why-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--paraColor, #888787);
  margin: 0;
}

.rrbp-why-card.is-dark .rrbp-why-lead {
  color: rgba(255, 255, 255, 0.72);
}

.rrbp-why-list {
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.rrbp-why-list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--titleColor, #000000);
}

.rrbp-why-card.is-dark .rrbp-why-list li {
  color: rgba(255, 255, 255, 0.9);
}

/* Check mark drawn in CSS so there is no icon font dependency here. */
.rrbp-why-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 11px;
  border: solid #599C24;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------------------------------------------------------
   I. Sector chips

   Static, non-interactive capability markers. They are not links, so they are
   marked up as a plain list rather than anchors - a chip that looks clickable
   but is not is worse than one that never invited the click.
   --------------------------------------------------------- */
.rrbp-sectors {
  padding: 100px 0;
  background: var(--ashColor, #f5f5f5);
}

.rrbp-sector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rrbp-sector-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0, 37, 44, 0.09);
  border-radius: 50px;
  padding: 13px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--titleColor, #000000);
  transition: var(--transition, all ease 0.5s);
}

.rrbp-sector-chip:hover {
  border-color: #599C24;
  transform: translateY(-2px);
}

/* The glyph colour is set further down, on the mint disc, where it has to
   stay dark: the brand green on that mint is 2.8:1. */
.rrbp-sector-chip i {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 767px) {
  .rrbp-sectors {
    padding: 70px 0;
  }

  .rrbp-sector-grid {
    justify-content: flex-start;
  }

  .rrbp-sector-chip {
    font-size: 15px;
    padding: 11px 17px;
  }

  .rrbp-why-card {
    padding: 32px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rrbp-sector-chip:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------
   J. Touch targets

   The mega-menu links collapse into the off-canvas drawer on mobile at 25px
   tall, well under a comfortable touch target. Padding is added only at mobile
   widths so the desktop dropdown keeps its compact rhythm.
   --------------------------------------------------------- */
@media (max-width: 991px) {
  .rrbp-mega-links a,
  .footer-menu.style-one a,
  .footer-bottom-menu a {
    display: block;
    padding-top: 9px;
    padding-bottom: 9px;
    min-height: 44px;
  }

  .rrbp-mega-links li {
    padding-bottom: 0 !important;
  }
}

/* ---------------------------------------------------------
   K. Type scale

   The hero headline sat at 40px on a 1440px viewport, so the slide read as an
   image with a caption. Sizes are fluid via clamp() rather than fixed bumps:
   the lower bound preserves the current mobile rendering exactly, so nothing
   reflows on small screens, and only wide viewports gain size.
   --------------------------------------------------------- */
.hero-area.style-one .hero-content h1,
.hero-area.style-one .hero-content h2 {
  font-size: clamp(38px, 4.2vw, 62px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em;
  margin-bottom: 26px;
}

.hero-area.style-one .hero-content .fs-xxl-18,
.hero-area.style-one .hero-content p {
  font-size: clamp(19px, 1.35vw, 22px) !important;
  line-height: 1.6 !important;
}

/* Supporting stat block on the right of the slide. */
.hero-area.style-one .counter-card .fs-xxl-18,
.hero-area.style-one .counter-card p {
  font-size: clamp(17px, 1.15vw, 19px) !important;
}

/* Section headings across the site, same fluid treatment. */
.section-title.style-one,
.section-title.style-two {
  font-size: clamp(30px, 2.9vw, 46px) !important;
  line-height: 1.22 !important;
}

.section-subtitle,
.rrbp-eyebrow {
  font-size: clamp(17px, 1.25vw, 20px) !important;
}

/* Body copy: a small lift that stays within the theme's rhythm. */
.text-para,
.fs-xxl-18 {
  font-size: clamp(17px, 1.2vw, 19.5px);
  line-height: 1.68;
}

.rrbp-why-lead,
.rrbp-news-summary,
.rrbp-job-summary {
  font-size: clamp(16.5px, 1.15vw, 18.5px);
}

.rrbp-news-body h3 {
  font-size: clamp(22px, 1.75vw, 28px) !important;
}

.rrbp-why-title {
  font-size: clamp(21px, 1.6vw, 26px);
}

.rrbp-why-list li,
.rrbp-sector-chip {
  font-size: clamp(15.5px, 1.1vw, 17px);
}

/* Service detail pages read as long-form, so they get the same lift. */
.rrbp-service-detail h1,
.rrbp-service-detail > .single-para > h2 {
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.18;
}

.rrbp-service-section h5 {
  font-size: clamp(23px, 1.9vw, 30px);
}

.rrbp-service-card h3 {
  font-size: clamp(19px, 1.45vw, 23px) !important;
}

.rrbp-service-card p,
.rrbp-service-card .features-list li {
  font-size: clamp(16px, 1.1vw, 17.5px);
  line-height: 1.62;
}

/* ---------------------------------------------------------
   L. Navbar three-column alignment

   The wrapper was flex + space-between with mx-auto on the menu. That centres
   the menu only when the brand and the CTA cluster are the same width; they are
   98px and 301px, so the menu sat 101px left of true centre. A 1fr/auto/1fr
   grid centres the middle column regardless of what flanks it.
   --------------------------------------------------------- */
@media (min-width: 992px) {
  .navbar-area .navbar-wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .navbar-area .navbar-wrapper > .navbar-brand {
    justify-self: start;
  }

  .navbar-area .navbar-wrapper > .menu-area {
    justify-self: center;
    margin: 0 !important;
  }

  .navbar-area .navbar-wrapper > .other-options {
    justify-self: end;
  }
}

/* ---------------------------------------------------------
   M. Chip grids

   Both chip groups were flex-wrap + justify-center, so each row packed a
   different number of differently sized chips (rows of 5/6/3, widths 137-314px)
   and read as ragged. A fixed-track grid gives every chip the same width, so
   rows line up into columns.
   --------------------------------------------------------- */
.rrbp-sector-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 14px;
  max-width: 1180px;
  margin-inline: auto;
}

.rrbp-sector-chip {
  /* Larger than before: these read as too small at 13px padding / 16px text. */
  justify-content: flex-start;
  padding: 18px 24px;
  font-size: 17px;
  min-height: 62px;
  gap: 12px;
}

.rrbp-sector-chip i {
  font-size: 21px;
}


/*
 * .btn-text is the theme CTA class, so it arrives with its own pill - border,
 * 999px radius, white fill - plus 34px/52px side padding. Inside these chips
 * that nested a second pill within the first and left ~111px for the label,
 * so all fifteen wrapped onto two lines. Here it is only the label.
 */

/* A 62px disc inside an 84px chip left the label almost no room. */


@media (max-width: 991px) {
  .rrbp-sector-grid {
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  }

}

@media (max-width: 575px) {
  .rrbp-sector-grid,

  .rrbp-sector-chip {
    padding: 15px 20px;
    min-height: 56px;
    font-size: 16px;
  }
}

/* ---------------------------------------------------------
   N. Events
   --------------------------------------------------------- */
.rrbp-events-page {
  padding: 0 0 40px;
}

.rrbp-event-group-title {
  font-family: var(--secondaryFont, "Rethink Sans", sans-serif);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 700;
  color: var(--titleColor, #000000);
  margin: 20px 0 26px;
}

.rrbp-event-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid transparent;
  transition: var(--transition, all ease 0.5s);
}

.rrbp-event-card:hover {
  border-color: #599C24;
  transform: translateY(-4px);
}

.rrbp-event-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ashColor, #f5f5f5);
}

.rrbp-event-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Past events stay listed but are visually de-emphasised. */
.rrbp-event-card.is-past .rrbp-event-media img {
  filter: grayscale(0.75);
}

.rrbp-event-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 37, 44, 0.86);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
}

.rrbp-event-body {
  padding: 26px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.rrbp-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 14px;
  color: var(--grayColor, #99A8AB);
}

.rrbp-event-meta span {
  position: relative;
}

.rrbp-event-meta span + span::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

.rrbp-event-body h3 {
  font-family: var(--secondaryFont, "Rethink Sans", sans-serif);
  font-size: clamp(19px, 1.45vw, 23px);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  color: var(--titleColor, #000000) !important;
}

.rrbp-event-summary {
  font-size: 16px;
  line-height: 1.65;
  color: var(--paraColor, #888787);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rrbp-event-cta {
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 767px) {
  .rrbp-event-body {
    padding: 22px 22px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rrbp-event-card:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------
   O. Mobile navbar / hero collision

   The theme's mobile rules pull content up by 68px
   (.hero-area.style-one and .breadcrumb-area.style-one both carry
   margin-top:-68px inside @media max-width:767px) because it assumes a 68px
   navbar. An override sheet forces .navbar-area{min-height:122px!important} at
   every width, so on a phone the fixed 123px bar sat directly on top of the
   hero heading.

   Fixed by bringing the mobile navbar back to a sane height and giving the
   hero and breadcrumb enough clearance to sit below it.
   --------------------------------------------------------- */
@media (max-width: 991px) {
  .navbar-area {
    min-height: 78px !important;
  }

  .navbar-area .navbar-wrapper {
    min-height: 78px !important;
  }

  .navbar-area.style-four .navbar-wrapper {
    min-height: 78px !important;
  }

  .navbar-area .navbar-brand img {
    max-width: 76px !important;
    max-height: 62px !important;
  }
}

@media (max-width: 767px) {
  /* Match the pull-up to the real bar height, then clear it. */
  .hero-area.style-one {
    margin-top: -78px !important;
  }

  .hero-area.style-one .hero-content {
    padding-top: 104px;
  }

  .breadcrumb-area.style-one {
    margin-top: -78px !important;
    padding: 150px 0 64px !important;
    min-height: 0;
  }

  .breadcrumb-area.style-one .rrbp-breadcrumb-title {
    font-size: clamp(34px, 9vw, 46px);
  }
}

/* The footer is ordinary flow content; the fixed bar must never sit over it. */
.footer-area {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   P. Sector chips - more presence, more breathing room

   They read as weaker than the clickable service chips because they were
   tighter and flatter. Same rhythm as the service chips now, with the icon in
   a tinted disc so the row has the same visual weight.
   --------------------------------------------------------- */
.rrbp-sector-grid {
  gap: 20px !important;
}

.rrbp-sector-chip {
  gap: 14px;
  padding: 20px 26px;
  min-height: 74px;
  border-radius: 60px;
  box-shadow: 0 4px 16px rgba(0, 37, 44, 0.05);
}

.rrbp-sector-chip i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--secondaryColor, #B9F8B1);
  color: #00252C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.rrbp-sector-chip:hover {
  box-shadow: 0 10px 26px rgba(0, 37, 44, 0.1);
}

@media (max-width: 575px) {
  .rrbp-sector-chip {
    padding: 15px 20px;
    min-height: 64px;
  }

  .rrbp-sector-chip i {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}


/* ---------------------------------------------------------
   Q. Footer link separators

   The pipe separators are drawn with li + li::before. When the row wraps on a
   phone the separator lands at the start of a new line with nothing before it,
   so they are dropped below the wrap point and spacing carries the rhythm.
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .footer-area .footer-bottom-menu {
    gap: 6px 20px;
  }

  .footer-area .footer-bottom-menu li + li {
    padding-left: 0;
  }

  .footer-area .footer-bottom-menu li + li::before {
    display: none;
  }
}

/* ---------------------------------------------------------
   R. "Why Trust RRBP Advisors" — theme-native rebuild

   Was: inline style="background:rgba(255,255,255,.06)" glass cards, Bootstrap
   rounded-4/p-4, arbitrary fs-28/fs-15, .sub-title eyebrow, and a hotlinked
   Unsplash background. Now uses the site's own tokens, radius and local image.
   --------------------------------------------------------- */
.rrbp-trust-area {
  padding: 110px 0;
  background:
    linear-gradient(rgba(0, 37, 44, 0.9), rgba(0, 37, 44, 0.95)),
    url("../img/gift_city_alt.jpg") center / cover no-repeat;
}

.rrbp-eyebrow.is-ondark {
  color: var(--secondaryColor, #B9F8B1);
}

.rrbp-trust-title {
  color: #fff !important;
}

.rrbp-trust-lead {
  color: rgba(255, 255, 255, 0.76);
  margin: 0;
}

/* Same anatomy as .rrbp-why-card so the two trust sections read as a pair. */
.rrbp-trust-card {
  width: 100%;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(185, 248, 177, 0.18);
  transition: var(--transition, all ease 0.5s);
}

.rrbp-trust-card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--secondaryColor, #B9F8B1);
  transform: translateY(-4px);
}

.rrbp-trust-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(185, 248, 177, 0.16);
  color: var(--secondaryColor, #B9F8B1);
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.rrbp-trust-card-title {
  font-family: var(--secondaryFont, "Rethink Sans", sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.32;
  color: #fff !important;
  margin: 0;
}

.rrbp-trust-card-text {
  font-size: 16px;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.rrbp-trust-cta {
  margin-top: 22px;
  padding: 30px 38px;
  background: var(--secondaryColor, #B9F8B1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.rrbp-trust-cta p {
  font-size: 18px;
  font-weight: 600;
  color: #00252C;
  max-width: 60ch;
}

@media (max-width: 767px) {
  .rrbp-trust-area {
    padding: 72px 0;
  }

  .rrbp-trust-cta {
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rrbp-trust-card:hover {
    transform: none;
  }
}

/* =========================================================
   S. Client visual review — 2026-08-20
   ========================================================= */

/* --- 1. Hero type scale -------------------------------------------------
   Copy is short ("Navigate Complexity. Deliver Results."), so at 62px the
   heading occupied 212px of an 1127px hero and the image read as the whole
   section. Scaled up and the measure widened. */
.hero-area.style-one .hero-content h1,
.hero-area.style-one .hero-content h2 {
  /* Capped at 76px: the longest slide ("Certified Regulatory Experts In GIFT
     City IFSC") runs to three lines, and at 92px the first line slid under the
     123px fixed navbar. */
  font-size: clamp(42px, 4.6vw, 76px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.018em;
  margin-bottom: 28px;
}

.hero-area.style-one .hero-content {
  max-width: 880px;
  /* Clear the fixed navbar even on the tallest slide. */
  padding-top: 96px;
}

@media (max-width: 1199px) {
  .hero-area.style-one .hero-content {
    padding-top: 64px;
  }
}

.hero-area.style-one .hero-content p,
.hero-area.style-one .hero-content .fs-xxl-18 {
  font-size: clamp(17px, 1.25vw, 21px) !important;
  line-height: 1.68 !important;
  max-width: 60ch;
}

/* --- 2. Slide counter ---------------------------------------------------
   "03 / 03" is a builder-demo affordance; the slider already auto-advances. */
.hero-pagination,
.hero-area .swiper-pagination-fraction {
  display: none !important;
}

/* --- 3. "Certified regulatory experts" layout ---------------------------
   The left image was 533x300 from a 2000x1125 source, so it sat short against
   a 639px-tall text column and left a visible gap above and below. Giving it a
   real aspect ratio and full column height balances the two sides. */
.about-area.style-one .about-img-wrap {
  height: 100%;
  min-height: 420px;
}

.about-area.style-one .about-img-wrap img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center;
}

/* The decorative asterisk overlapped the copy at wide widths. */
.about-area.style-one .about-shape {
  max-width: 58px;
  opacity: 0.5;
}

.about-area.style-one .counter-card-wrap {
  gap: 18px 34px;
  margin-top: 6px;
}

/* --- 4. Section headings -----------------------------------------------
   Give the promoted "Why choose" heading the same rhythm as its siblings. */
.container.style-one > .row > [class*="col-"] > .section-title.style-one {
  margin-bottom: 45px;
}

/* --- 5. Trust section balance ------------------------------------------
   Cards carry mb-30 and the CTA adds its own margin, so equal padding read as
   bottom-heavy. Top raised, bottom trimmed by the amount the children add. */
.rrbp-trust-area {
  padding: 118px 0 88px;
}

.rrbp-trust-cta {
  margin-top: 14px;
}

/* --- 6. Testimonial slider --------------------------------------------
   The heading block ran to 281px on its own (pt-120 plus title-anim spacing)
   which pushed the cards to the bottom of the section, and there were no
   navigation controls at all for eight slides. */
.testimonial-area.style-two .container.style-one.pt-120 {
  padding-top: 78px !important;
}

.testimonial-area.style-two .container.style-one .section-title {
  margin-bottom: 18px !important;
}

.testimonial-area.style-two .container-fluid.style-two {
  padding-bottom: 10px;
}

.rrbp-slider-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

.rrbp-slider-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(0, 37, 44, 0.16);
  background: #fff;
  color: var(--primaryColor, #00252C);
  font-size: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition, all ease 0.5s);
}

.rrbp-slider-btn:hover {
  background: var(--secondaryColor, #B9F8B1);
  border-color: var(--secondaryColor, #B9F8B1);
}

.rrbp-slider-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --- 7. Sector chips: one line each ------------------------------------
   The fixed grid forced two-line labels ("Fund Management / Entities"). Back to
   a centred flex row where each chip is exactly as wide as its label needs, with
   generous gaps so the group still reads as substantial. */
.rrbp-sector-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 20px;
  max-width: 1240px;
  margin-inline: auto;
}

.rrbp-sector-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 16px 28px 16px 20px;
  min-height: 68px;
}

/* --- 8. Footer space ---------------------------------------------------
   The container capped at 1330px inside a 1585px viewport, leaving 127px dead
   on each side while the services list wrapped. Wider container, and the clocks
   scaled up with more gap so they fill the space beside the wordmark. */
.footer-area .container.style-one {
  max-width: min(1560px, calc(100% - 72px)) !important;
}

.footer-area .footer-menu.style-one {
  column-gap: 44px;
}

.footer-area .footer-menu.style-one li {
  white-space: normal;
}


@media (max-width: 767px) {
  .about-area.style-one .about-img-wrap,
  .about-area.style-one .about-img-wrap img {
    min-height: 260px;
  }

  .rrbp-trust-area {
    padding: 74px 0 58px;
  }

  .rrbp-sector-chip {
    padding: 13px 20px 13px 16px;
    min-height: 58px;
  }

  .footer-area .container.style-one {
    max-width: calc(100% - 32px) !important;
  }

}

/* --- 3b. "Certified regulatory experts" spacing -------------------------
   With the green founders box and its marquee removed, the heading block kept
   the tall margins it needed to clear them, leaving a gap under Discover More
   and an unbalanced pair of columns. */
.about-area.style-one .container.style-one > .row:first-child {
  margin-bottom: 6px;
}

.about-area.style-one .section-title.style-one {
  margin-bottom: 24px !important;
}

.about-area.style-one .btn.style-one {
  margin-bottom: 8px;
}

.about-area.style-one {
  padding-top: 70px;
  padding-bottom: 80px;
}

/* Both columns now stretch, so the image and the copy share a baseline. */
.about-area.style-one .container.style-one > .row:last-child {
  align-items: center;
}

.about-area.style-one .col-lg-7 {
  padding-left: 48px;
}

.about-area.style-one .counter-card-wrap {
  margin-top: 26px;
}

@media (max-width: 991px) {
  .about-area.style-one .col-lg-7 {
    padding-left: 12px;
  }
}

/* --- 3c. About section gap trim ----------------------------------------
   Measured after removing the founders box: 117px dead space between the
   Discover More button and the image (the rotating asterisk was in normal flow
   and contributed 57px of height), and 184px trailing because the 420px image
   outran the ~326px text column. */
.about-area.style-one .about-shape {
  /* Stays in normal flow so the theme scroll animation keeps driving it. */
  margin-top: -18px;
  margin-bottom: -22px;
  pointer-events: none;
}

.about-area.style-one .container.style-one > .row:first-child {
  position: relative;
  margin-bottom: 0;
}

.about-area.style-one .about-img-wrap,
.about-area.style-one .about-img-wrap img {
  min-height: 376px;
}

.about-area.style-one {
  padding-bottom: 64px;
}

@media (max-width: 767px) {
  .about-area.style-one .about-shape {
    display: none;
  }
}

/* --- 7b. Chip wrapping on small screens --------------------------------
   One-line chips are the point on desktop, but "Alternative Investment Funds"
   cannot fit a 390px viewport, and nowrap pushed it 4px past the edge. Below
   the small breakpoint the label is allowed to wrap and the chip goes
   full-width, which keeps the row tidy instead of overflowing. */
@media (max-width: 575px) {
  .rrbp-sector-chip {
    white-space: normal;
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .rrbp-sector-grid {
    gap: 12px;
  }
}

/* =========================================================
   T. Client visual review round 2 — 2026-08-20
   ========================================================= */

/* --- Testimonial: close the gap above the cards ------------------------
   The heading block still reserved ~280px because .title-anim adds perspective
   spacing and the section carried pt-120 on top of it. */
.testimonial-area.style-two .container.style-one.pt-120 {
  padding-top: 56px !important;
  padding-bottom: 0 !important;
}

.testimonial-area.style-two .container.style-one .row {
  margin-bottom: 0;
}

/* 6px was right when the heading was 33px and a slider sat directly under it.
   The heading is 42px now and the cards are static, so it needs real space. */
.testimonial-area.style-two .container.style-one .section-title.title-anim {
  margin-bottom: 46px !important;
}

.testimonial-area.style-two .container-fluid.style-two {
  padding-top: 0;
}

.testimonial-area.style-two {
  padding-bottom: 78px;
}


/* --- Mega menu: keep the hover alive across the gap ---------------------
   Moving the pointer from the nav link down to the panel crossed a dead strip,
   so the menu closed before it could be used. The bridge now spans the whole
   item and the panel opens flush against the bar. */
@media (min-width: 992px) {
  .navbar-area .menu-section > li.menu-item-has-children {
    padding-bottom: 0;
  }

  .navbar-area .menu-section > li.menu-item-has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 46px;
    pointer-events: auto;
  }

  .navbar-area .menu-section > li > .rrbp-mega-menu {
    top: 100% !important;
    margin-top: 0 !important;
    /* Stay open while the pointer is anywhere over the item or the panel. */
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  }

  .navbar-area .menu-section > li:hover > .rrbp-mega-menu,
  .navbar-area .menu-section > li:focus-within > .rrbp-mega-menu {
    transition: opacity 0.18s ease, visibility 0s linear 0s;
  }
}

/* --- Footer: use the space beside the wordmark -------------------------- */
.footer-area .footer-top .row {
  --bs-gutter-x: 56px;
}

.footer-area .footer-menu.style-one {
  column-gap: 56px;
}


/* --- "Why Trust RRBP Advisors" v2 --------------------------------------
   The first pass sat on a washed grey-green photo tint that matched nothing
   else on the page. The site's only other dark surface is the navbar
   (#00252C), so this now uses that exact colour as a flat ground with the
   mint accent doing the work, and no photograph competing behind the text.
   ----------------------------------------------------------------------- */
.rrbp-trust-area {
  background: var(--primaryColor, #00252C) !important;
  position: relative;
  isolation: isolate;
}

/* A soft mint bloom instead of a background photo: same palette, no noise. */
.rrbp-trust-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(680px circle at 12% 0%, rgba(185, 248, 177, 0.16), transparent 62%),
    radial-gradient(520px circle at 88% 100%, rgba(145, 208, 137, 0.13), transparent 60%);
  pointer-events: none;
}

/* Hairline rule echoing the footer's divider, so the block feels native. */
.rrbp-trust-area::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185, 248, 177, 0.34), transparent);
}

.rrbp-trust-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

/* Mint edge on hover, matching the service-card treatment. */
.rrbp-trust-card::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 2px;
  background: var(--secondaryColor, #B9F8B1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}

.rrbp-trust-card:hover::before {
  transform: scaleX(1);
}

.rrbp-trust-card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(185, 248, 177, 0.4);
}

.rrbp-trust-icon {
  background: var(--secondaryColor, #B9F8B1);
  color: #00252C;
}

.rrbp-trust-lead {
  color: rgba(255, 255, 255, 0.7);
}

/* CTA reads as a band, not a floating pill, matching the compliance ribbon. */
.rrbp-trust-cta {
  background: var(--secondaryColor, #B9F8B1);
  margin-top: 26px;
  padding: 26px 40px;
}

@media (prefers-reduced-motion: reduce) {
  .rrbp-trust-card::before {
    transition: none;
  }
}

/* ---------------------------------------------------------
   U. Services listing cards — corrected

   The previous attempt used `.service-card.style-three img`, which matched the
   checkmark bullets and the button arrow icons as well as the cover photo and
   blew them up to card size. Every selector here targets the media wrapper
   only; the icons inside .feature-list and .btn are never touched.
   --------------------------------------------------------- */
.service-card.style-three {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff !important;
  border: 1px solid rgba(0, 37, 44, 0.12);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 0 !important;
  transition: var(--transition, all ease 0.5s);
}

.service-card.style-three:hover {
  border-color: #599C24;
  box-shadow: 0 14px 34px rgba(0, 37, 44, 0.09);
}

/* Fixed media box: only the cover images inside .service-img. */
.service-card.style-three > .service-img {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ashColor, #f5f5f5);
  border-radius: 0;
}

.service-card.style-three > .service-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body fills the rest so the CTA lines up across the row. */
.service-card.style-three > .service-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px;
  background: #fff;
}

.service-card.style-three > .service-info > .btn {
  margin-top: auto;
}

/* Restore the bullet icons the previous rule destroyed. */
.service-card.style-three .feature-list.style-one li > img {
  width: 16px !important;
  height: 14px !important;
  object-fit: contain;
  top: 9px;
}

.service-card.style-three .btn img {
  width: 14px !important;
  height: 10px !important;
  object-fit: contain;
}

/* Real gaps between cards, replacing the mb-45 the flex column swallowed. */
.service-area .row:has(.service-card.style-three),
.row:has(> [class*="col-"] > .service-card.style-three) {
  --bs-gutter-x: 30px;
  row-gap: 30px;
}

/*
 * Zeroing that mb-45 also took away the only thing holding the last row off
 * the section's edge: the grid has 72px of padding above it and had none
 * below, so the bottom row of cards sat flush on the boundary and the next
 * section's white started against them. Match the top.
 */
.service-area:has(.service-card.style-three) {
  padding-bottom: 72px;
}

@media (max-width: 767.98px) {
  .service-area:has(.service-card.style-three) {
    padding-bottom: 48px;
  }
}

.row > [class*="col-"]:has(> .service-card.style-three) {
  display: flex;
}

/* ---------------------------------------------------------
   V. Sticky navbar veil

   .navbar-area carries background:transparent!important, and the theme rule
   that paints the scrolled state was not reliably winning. Stated explicitly
   here (this sheet loads last) so content never shows through the bar.
   --------------------------------------------------------- */
/* The sticky bar is defined once, in BD. */

/* The bar is lifted to <body>, so nothing can trap its stacking any more. */
body > .navbar-area {
  z-index: 9999 !important;
}

/* The dropdown must clear every section beneath it. */
.navbar-area .rrbp-mega-menu {
  z-index: 10000 !important;
}

/* ---------------------------------------------------------
   W. Footer: close the two dead bands

   Row 1: the brand column is col-xxl-5 (41%) but only holds a logo, a phone
   number and an email, so a wide empty band sat between it and Services.
   Row 2: the clocks column carries offset-xxl-1, which pushed it right and
   left a second gap beside the RRBP wordmark.

   Both are rebalanced so Services and the clocks move left into that space.
   --------------------------------------------------------- */
@media (min-width: 1200px) {
  .footer-area .footer-top .row > [class*="col-xxl-5"] {
    flex: 0 0 auto;
    width: 27%;
  }

  .footer-area .footer-top .row > [class*="col-xxl-4"] {
    flex: 0 0 auto;
    width: 40%;
    padding-left: 0 !important;
  }

  .footer-area .footer-top .row > [class*="col-xxl-3"] {
    flex: 0 0 auto;
    width: 33%;
  }

  /* Services list gets the reclaimed width, so entries stop wrapping. */
  .footer-area .footer-menu.style-one {
    column-gap: 48px;
  }

  /* Row 2: drop the offset and let the clocks start beside the wordmark. */
  .footer-area [class*="offset-xxl-1"] {
    margin-left: 0 !important;
  }

  .footer-area .col-md-7.pe-xxl-0 {
    flex: 0 0 auto;
    width: 46%;
  }

  .footer-area [class*="col-xl-4"][class*="offset-xxl-1"] {
    flex: 0 0 auto;
    width: 54%;
    padding-left: 0 !important;
  }
}

/* The back-to-top button is fixed at right:30px and is 46px wide, so it landed
   on the last item of the footer bottom bar ("Email RRBP"). Reserve its lane,
   and widen the menu column so the three links still fit on one row. */
@media (min-width: 992px) {
  .footer-area .footer-bottom .col-md-7 {
    flex: 0 0 auto;
    width: 42%;
  }

  .footer-area .footer-bottom .col-md-5 {
    flex: 0 0 auto;
    width: 58%;
  }

  .footer-area .footer-bottom-menu {
    padding-right: 76px;
    white-space: nowrap;
  }
}

/* The news card is padded, but the .row inside it carries Bootstrap's negative
   gutter margins, so it spilled past the card edge and pushed 4px of page
   scroll on narrow screens. Inside a padded card the gutters buy nothing. */
/*
 * Zeroing the row margin keeps this card from pushing page scroll, but zeroing
 * the column padding as well removed the gutter, so the image sat flush against
 * the headline with no breathing space. Keep the margin at 0 and give the
 * columns their padding back - that padding IS the gap between image and text,
 * and being inside the row it cannot cause overflow.
 */
.rrbp-news-card > .row {
  margin-left: 0;
  margin-right: 0;
}

.rrbp-news-card > .row > [class*="col-"] {
  padding-left: 26px;
  padding-right: 26px;
}

@media (max-width: 767.98px) {
  /* Stacked on phones, so the gutter becomes vertical space instead. */
  .rrbp-news-card > .row > [class*="col-"] {
    padding-left: 18px;
    padding-right: 18px;
  }

  .rrbp-news-card .rrbp-news-media {
    margin-bottom: 22px;
  }
}

/* Gutter mismatch: .container pads 12.75px (--bs-gutter-x: 1.5rem) but the
   theme's rows use a 30px gutter, so their -15px margins stuck out ~2px each
   side and put a horizontal scrollbar on phones. Above 992px the container's
   max-width absorbs it; below, match the padding to the row gutter. */
@media (max-width: 991.98px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ---------------------------------------------------------
   X. Home services slider: eyebrow, arrows, section spacing

   The scraped markup pre-split these headings into line wrappers, so the
   eyebrow <small> ended up inline with the first line ("RRBP Advisors
   SERVICES  Expert accounting and...") instead of sitting above it.
   --------------------------------------------------------- */
/* The testimonial heading is centred now, so its eyebrow is defined once in
   AW instead; this left-alignment belongs only to the services heading. */
.service-area .section-title small {
  /* Beats the markup s own .d-inline-block utility. */
  display: block !important;
  /* The markup also carries .text-md-center, which centred the eyebrow away
     from its own left-aligned heading once it became a block. */
  text-align: left !important;
  margin-bottom: 12px;
  opacity: 0.85;
  letter-spacing: 0.04em;
}

/* Theme reveals these only while the cursor is over the slider, so nothing
   told a visitor - or any touch device - that the row scrolls. The theme also
   pins them position:absolute at top:65%, which put them over the card copy;
   static lets the wrapper place them instead. */
.service-area .slider-btn .prev-btn,
.service-area .slider-btn .next-btn {
  position: static !important;
  top: auto !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.service-area .slider-btn .prev-btn:hover,
.service-area .slider-btn .next-btn:hover {
  background-color: var(--secondaryColor);
}

/* The trust section ended flush against the slider's full-bleed photo, with no
   break between them. Extend the dark ground before the image starts. */
.rrbp-trust-area {
  padding-bottom: 100px;
}

/* ---------------------------------------------------------
   Y. Footer clocks below desktop

   Three 106px dials plus a 34px gap need 386px but the column offers ~369px,
   so the third wrapped onto its own line and sat alone against the right edge,
   which read as a broken footer on phones. Fit all three on one row.
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
  .footer-area [class*="col-xl-4"][class*="offset-xxl-1"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------------------------------------------------------
   Z. Marquee portal links + services card title alignment
   --------------------------------------------------------- */

/* The ribbon items became anchors, so they need the anchor states the theme
   would otherwise give them (underline, inherited link colour). */
.rrbp-ribbon-track a.rrbp-ribbon-item {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* This hover was --optionalColor on a band that WAS --optionalColor, so the
   link vanished under the cursor. */
.rrbp-ribbon-track a.rrbp-ribbon-item:hover,
.rrbp-ribbon-track a.rrbp-ribbon-item:focus-visible {
  color: var(--secondaryColor, #B9F8B1);
  opacity: 1;
}

/* Titles ran one or two lines depending on the service name, so the feature
   lists and CTAs below them sat at different heights across a row. Reserve two
   lines for every title so each row lines up. */
@media (min-width: 768px) {
  .service-card.style-three .service-card-content h3,
  .service-card.style-three h3 {
    min-height: calc(2 * 1.36em);
    display: flex;
    align-items: flex-start;
  }
}

/*
 * Clamping these to two lines cut real headlines mid-title with an ellipsis
 * ("...Second Amendment..."), which is worse than an uneven row - a regulator
 * circular name is not something to truncate. Show the title in full and only
 * reserve a two-line minimum so short and long cards still align.
 */
.rrbp-news-card h3,
.service-slider-one .swiper-slide h3 {
  min-height: calc(2 * 1.35em);
}

/* The clickable service cards carry inline SVG icons at mixed natural sizes -
   some 71x81 portrait, some 80x80 square - drawn with object-fit: cover, so
   they rendered at different heights and the portrait ones looked squeezed
   next to the square ones. The non-clickable cards use one consistent square,
   so match that: a fixed square box with contain, which never distorts.
   Scoped to the card's own icon; the 14x10 tick and arrow icons live inside
   lists and buttons and are untouched. */
.service-card.style-one > img {
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
  object-position: left center;
}

/* =========================================================
   AA. Batch: hero height, service chips, marquee, carousel, footer
   ========================================================= */

/* Hero ran 995px against a 900px viewport, so the fold sat below the screen
   and the page opened with a scroll. Bring it inside the viewport and scale
   the headline to match. */
@media (min-width: 992px) {
  /* The height comes from the swiper, not the section padding: the slide was
     995px while the copy inside is only 260px. Sizing the slider is what
     actually shortens the hero. */
  .hero-area.style-one .hero-slider-one,
  .hero-area.style-one .hero-slider-one .swiper-slide {
    /* min-height, never height: a hard height clipped 240px of slide content. */
    height: auto !important;
    min-height: 620px !important;
  }

  .hero-area.style-one .hero-content h1,
  .hero-area.style-one .hero-content h2 {
    font-size: 48px !important;
    line-height: 1.14 !important;
    margin-bottom: 22px !important;
  }
}

@media (max-width: 991.98px) {
  .hero-area.style-one .hero-slider-one,
  .hero-area.style-one .hero-slider-one .swiper-slide {
    height: auto !important;
    min-height: 440px !important;
  }

  .hero-area.style-one .hero-content h1,
  .hero-area.style-one .hero-content h2 {
    font-size: 34px !important;
    line-height: 1.18 !important;
  }
}

/* The chip grid left wide dead bands between buttons. Tighten the gaps and let
   the columns size to the content rather than a fixed 295px track. */
/* The chip label is nowrap, so each chip has a ~295px minimum (the profile
   labels are longer than the old ad-hoc ones). Fixed column
   counts created narrower tracks and the chips overflowed them - that is what
   put horizontal scroll on phones and tablets. auto-fit picks the count that
   actually fits, so the track is never smaller than the chip. */

@media (max-width: 359.98px) {

  /* Below 360px even one chip cannot hold its label on one line. */
}


/* Marquee sat in grey on a mint band, which was hard to read; white reads
   cleanly and the dark ink on hover marks the item you are pointing at. */
.rrbp-ribbon-track .rrbp-ribbon-item {
  color: #ffffff !important;
}

.rrbp-ribbon-track a.rrbp-ribbon-item:hover,
.rrbp-ribbon-track a.rrbp-ribbon-item:focus-visible {
  color: var(--primaryColor, #00252C) !important;
}

/* The services carousel was 822px tall, so on a laptop the cards were cut off
   and needed a scroll of their own. */
@media (min-width: 992px) {
  .service-area.style-one .container.style-one {
    padding-top: 80px !important;
  }

  .service-area.style-one .service-slider-one .swiper-slide .service-card {
    min-height: 0 !important;
  }
}

/* The oversized RRBP wordmark added a whole band of dead footer height. */
.footer-area .logo-text {
  display: none !important;
}

/* The floating stat card was sized for the old 995px hero; at 620px it spilled
   past the section and was clipped mid-sentence. Compact it to fit. */
@media (min-width: 992px) {
  .hero-area.style-one .stat-card.style-three {
    padding: 18px 22px 20px !important;
  }

  .hero-area.style-one .stat-card.style-three h2,
  .hero-area.style-one .stat-card.style-three h3 {
    font-size: 40px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .hero-area.style-one .stat-card.style-three p,
  .hero-area.style-one .stat-card.style-three span {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .hero-area.style-one .stat-card.style-three img,
  .hero-area.style-one .stat-card.style-three .rounded-circle {
    width: 34px !important;
    height: 34px !important;
  }
}

/* =========================================================
   AB. Service detail pages: sidebar left, content right
   ========================================================= */
@media (min-width: 1200px) {
  .rrbp-service-layout {
    /* The sidebar column comes second in the markup; ordering it first keeps
       the source order intact for screen readers while showing it on the left. */
    display: flex;
    flex-wrap: wrap;
  }

  .rrbp-service-layout > [class*="col-xxl-7"] {
    order: 2;
  }

  .rrbp-service-layout > [class*="offset-xxl-1"] {
    order: 1;
    /* The offset pushed the sidebar right when it sat on the right-hand side. */
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 34px;
  }
}

/* The sidebar now carries the full service list, so it needs to scroll with
   the page rather than run past the footer. */
.rrbp-service-layout .sidebar .service-list {
  max-height: none;
}

.rrbp-service-layout .sidebar .service-list li.is-current > span {
  display: block;
  font-weight: 600;
  color: var(--primaryColor, #00252C);
}

.rrbp-service-layout .sidebar .service-list li.is-current {
  border-left: 3px solid #599C24;
  padding-left: 12px;
  margin-left: -15px;
}

/* With the oversized wordmark gone, its column was an empty half-width band
   with the clocks stranded on the right. Drop the empty column and let the
   dials use the whole row. */
.footer-area .col-md-7.pe-xxl-0 {
  display: none !important;
}

@media (min-width: 1200px) {
  .footer-area [class*="col-xl-4"][class*="offset-xxl-1"] {
    width: 100% !important;
    padding-left: 0 !important;
  }
}

/* =========================================================
   AC. Missing spacing utilities

   The theme ships pt-120 / pb-90 / ptb-120 but not pt-90 or pb-70, and the
   markup uses both. A class that is not defined silently yields zero padding,
   which is why several sections butted straight against the one above with no
   breathing room at the start or end.
   ========================================================= */
.pt-90 {
  padding-top: 90px;
}

.pb-70 {
  padding-bottom: 70px;
}

@media (max-width: 991.98px) {
  .pt-90 {
    padding-top: 60px;
  }

  .pb-70 {
    padding-bottom: 45px;
  }
}

/* =========================================================
   AD. Balance fixes: mega menu, services carousel, about row
   ========================================================= */

/* The menu now carries ten groups. In three columns that is four rows and a
   720px panel; five columns fits it in two. The width and column count are set
   by a .navbar-area.style-* rule, so this has to match that specificity. */
@media (min-width: 1200px) {
  .navbar-area.style-one .menu-section > li > .rrbp-mega-menu,
  .navbar-area.style-four .menu-section > li > .rrbp-mega-menu {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: min(1240px, calc(100vw - 60px)) !important;
    min-width: min(1240px, calc(100vw - 60px)) !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-area.style-one .menu-section > li > .rrbp-mega-menu,
  .navbar-area.style-four .menu-section > li > .rrbp-mega-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Carousel: 520px cards under a 137px heading left 125px of dead space and a
   section taller than it needs to be. Bring the card down and close the gap. */
@media (min-width: 992px) {
  .service-area.style-one .service-slider-one,
  .service-area.style-one .service-slider-one .swiper-slide,
  .service-area.style-one .service-slider-one .service-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .service-area.style-one .service-slider-one .service-card {
    padding-block: 26px !important;
  }

  .service-area.style-one .container.style-one {
    padding-top: 64px !important;
  }
}

/* About row: the image sat vertically centred against a taller text column,
   opening a band above it, and the three counters wrapped 2 + 1 leaving an
   empty slot beside the third. Stretch both columns so the picture ends level
   with the copy, and fit all three counters on one row. */
@media (min-width: 992px) {
  .about-area.style-one .row.align-items-center {
    align-items: stretch !important;
  }

  .about-area.style-one .about-img-wrap {
    margin-top: 0 !important;
  }

  .about-area.style-one .counter-card-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px;
    justify-content: flex-start !important;
  }

  .about-area.style-one .counter-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
  }
}

/* The sector chips size to their own text, so the last row held a single
   orphan hanging on the left. Centre each wrapped row instead. */
.rrbp-sector-grid {
  justify-content: center !important;
}

/* The news card ran ~150px taller than either of its columns. Let it size to
   its content rather than hold a fixed block of empty space. */
.rrbp-news-card {
  min-height: 0 !important;
}

.rrbp-news-card > .row {
  align-items: stretch !important;
}

.rrbp-news-card .rrbp-news-media {
  height: 100%;
}

.rrbp-news-card .rrbp-news-media img {
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   AE. Density pass: navbar, mega menu, chips, cards, spacing, footer
   ========================================================= */

/* Navbar: the 96px logo was setting a 123px bar. Trim the logo and let the bar
   breathe on its own padding rather than on the mark's height. */
@media (min-width: 992px) {
  .navbar-area .navbar-brand img,
  .navbar-area .logo img {
    max-height: 66px !important;
    width: auto !important;
  }

  .navbar-area .menu-area {
    padding-block: 12px !important;
  }
}

@media (max-width: 991.98px) {
  .navbar-area .navbar-brand img,
  .navbar-area .logo img {
    max-height: 52px !important;
    width: auto !important;
  }
}

/* Mega menu: it read as a plain white sheet bolted onto the page. Give it the
   theme's mint top rule and rounded card treatment, tighten the padding, and
   size it to its content so it never grows its own scrollbar. */
@media (min-width: 992px) {
  .navbar-area.style-one .menu-section > li > .rrbp-mega-menu,
  .navbar-area.style-four .menu-section > li > .rrbp-mega-menu {
    padding: 26px 30px 24px !important;
    gap: 18px 30px !important;
    max-height: none !important;
    overflow: visible !important;
    border-top: 3px solid #599C24 !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 24px 60px rgba(0, 31, 34, 0.16) !important;
  }
}

.rrbp-mega-title {
  color: var(--primaryColor, #00252C) !important;
  font-size: 13px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 8px;
  margin-bottom: 6px !important;
  border-bottom: 1px solid rgba(145, 208, 137, 0.35);
  display: block;
}

/* Service chips: a flat outline on white read as unfinished. Match the theme's
   soft card - mint icon disc, light ground, and a mint wash on hover. */


/* KPO jurisdiction cards had no border, fill or shadow, so they read as loose
   text rather than cards. */
.rrbp-kpo-area .rrbp-why-card {
  border: 1px solid rgba(0, 37, 44, 0.08) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 31, 34, 0.04) !important;
  padding: 28px 26px !important;
}

/* Section rhythm: 90-120px top and bottom on adjacent sections stacked into
   200px+ seams. Bring every section to a consistent breathing space. */
@media (min-width: 992px) {
  .ptb-120 { padding-top: 72px !important; padding-bottom: 72px !important; }
  .pt-120 { padding-top: 72px !important; }
  .pb-120 { padding-bottom: 72px !important; }
  .pt-115 { padding-top: 72px !important; }
  .pt-90 { padding-top: 56px !important; }
  .pb-90 { padding-bottom: 56px !important; }
  .pb-70 { padding-bottom: 56px !important; }

  .rrbp-trust-area { padding-top: 72px !important; padding-bottom: 72px !important; }
  .rrbp-sectors { padding-top: 72px !important; padding-bottom: 72px !important; }
  .testimonial-area.style-two { padding-bottom: 72px !important; margin-bottom: 0 !important; }
  .rrbp-service-nav { padding-top: 48px !important; padding-bottom: 28px !important; }
}

@media (max-width: 991.98px) {
  .ptb-120 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .pt-120, .pt-115 { padding-top: 48px !important; }
  .pb-120 { padding-bottom: 48px !important; }
  .rrbp-trust-area, .rrbp-sectors { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* Footer: four dials now, larger, with the label centred over them and the
   surrounding dead space trimmed. */


.footer-area .footer-widget-title {
  text-align: center;
}

.footer-area .footer-menu.style-one {
  justify-content: center;
}

/* WhatsApp button, above the back-to-top control. */
.rrbp-whatsapp {
  position: fixed;
  right: 30px;
  bottom: 92px;
  z-index: 98;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.38);
  transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.rrbp-whatsapp:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.48);
}

/* Dimmed while it sits over readable content, so it never buries a line. */
.rrbp-whatsapp.is-dimmed {
  opacity: 0.28;
}

.rrbp-whatsapp.is-dimmed:hover {
  opacity: 1;
}

@media (max-width: 575.98px) {
  .rrbp-whatsapp {
    right: 18px;
    bottom: 80px;
    width: 46px;
    height: 46px;
  }
}

/* The bar's height comes from min-height:122px on .navbar-area and
   .navbar-wrapper, not from the logo, so trimming the mark alone changed
   nothing. Lower both, and the menu row with them. */
@media (min-width: 992px) {
  .navbar-area.style-one,
  .navbar-area.style-four {
    min-height: 88px !important;
  }

  .navbar-area .navbar-wrapper {
    min-height: 88px !important;
  }

  .navbar-area .menu-area {
    padding-block: 8px !important;
  }

  .navbar-area .menu-section > li > a {
    padding-block: 22px !important;
  }
}

/* Four dials at col-md-3 are exactly 25% each, so an 18px gap tipped the row
   past 100% and the fourth wrapped. The columns carry their own gutter. */


/* Sections that pad their bottom but not their top open flush against whatever
   is above them - the "Why Choose RRBP Advisors?" band on /about/ is the one
   that shows it worst. Give each the same breathing space it already has below. */
.wh-area.style-two,
.about-area.style-two,
.testimonial-area.style-two,
.rrbp-career-live,
.rrbp-events-page {
  padding-top: 72px !important;
}

@media (max-width: 991.98px) {
  .wh-area.style-two,
  .about-area.style-two,
  .testimonial-area.style-two,
  .rrbp-career-live,
  .rrbp-events-page {
    padding-top: 48px !important;
  }
}

/* Inner pages carry their own .navbar-area.style-four rules for the wrapper
   min-height and the logo cap, which outrank the generic ones above, so the
   bar stayed at 123px there while the home bar came down to 89px. */
@media (min-width: 992px) {
  .navbar-area.style-one .navbar-wrapper,
  .navbar-area.style-four .navbar-wrapper {
    min-height: 88px !important;
  }

  .navbar-area.style-one .navbar-brand img,
  .navbar-area.style-four .navbar-brand img {
    max-height: 66px !important;
    height: auto !important;
    width: auto !important;
  }
}

@media (max-width: 991.98px) {
  .navbar-area.style-one .navbar-brand img,
  .navbar-area.style-four .navbar-brand img {
    max-height: 52px !important;
    height: auto !important;
    width: auto !important;
  }
}

/* =========================================================
   AF. Home landing: hero fold and the scrolled navbar colour
   ========================================================= */

/* The scrolled bar used to be painted solid here to stop it greying on the
   way back up. That is now handled in BD, which keeps the short,
   property-scoped transition that was the real fix. */

/* The hero's height came from .hero-slide-item's 260px top padding, not from
   the slider, so it stood 871px tall whatever the screen was. On a 1080p
   laptop (viewport ~720-800px) that pushed the green stats tape entirely below
   the fold, and the page opened with no hint that it scrolls. Trim the padding
   so the tape clears the fold, and keep a viewport-relative floor so tall
   screens still get a full-bleed hero rather than a letterboxed one. */
@media (min-width: 992px) {
  /* The hero starts 100px behind the bar, so its own height has to come in
     under the fold by the height of the tape. The slide content is only about
     360px tall, so a measured box centred on its content is safe here - the
     earlier attempt clipped only because the content was still top-anchored
     against a hard height. */
  /* The tallest slide's right column is a 227px stat card carrying 66px and
     60px of margin plus a 178px paragraph block - 531px in all, which is what
     kept the hero tall. Halving the card's margins takes the column to 453px
     and lets the box close to 590px without clipping anything. */
  .hero-area.style-one .stat-card.style-three {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  .hero-area.style-one .hero-slider-one,
  .hero-area.style-one .hero-slider-one .swiper-wrapper,
  .hero-area.style-one .hero-slider-one .swiper-slide,
  .hero-area.style-one .hero-slide-item {
    /* --rrbp-hero-h is measured in assets/rrbp-live-content.js: viewport,
       less the real height of the green strip, plus however far the hero
       starts behind the fixed bar. Landing shows the hero and the strip and
       nothing after them. The fallback is the widescreen figure. */
    height: var(--rrbp-hero-h, 746px) !important;
    min-height: 0 !important;
  }

  .hero-area.style-one .hero-slide-item {
    display: flex !important;
    align-items: center !important;
    /* The block is centred inside what is left after this padding, so a
       190px top pad guarantees it starts below the 89px bar at every height
       in the clamp. */
    padding-top: 190px !important;
    padding-bottom: 50px !important;
  }

  .hero-area.style-one .hero-slide-item > .container {
    width: 100%;
  }

  /* Bootstrap columns stretch, so the 109px headline sat at the top of a
     453px column and ended up behind the fixed bar. Centre the columns
     against each other instead. */
  .hero-area.style-one .hero-slide-item .row {
    align-items: center !important;
  }

  .hero-area.style-one .hero-content {
    padding-top: 0 !important;
  }
}

/* A 1366x768 laptop gives about 640px of viewport. Nav (89) + hero copy (429)
   + tape (111) is 629 of that, so the fold only works there if the stat card
   gives some height back. Compact it rather than letting the tape fall off. */
@media (min-width: 992px) and (max-height: 719px) {
  /* Height still comes from the measurement; only the padding tightens, so
     the copy keeps clear of the bar inside a shorter box. */
  .hero-area.style-one .hero-slide-item {
    padding-top: 176px !important;
    padding-bottom: 26px !important;
  }

  .hero-area.style-one .stat-card.style-three {
    padding: 14px 18px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  /* The avatar row is decoration; the numbers and the sentence are the point. */
  .hero-area.style-one .stat-card.style-three .client-list {
    display: none !important;
  }

  .hero-area.style-one .hero-para p {
    margin-bottom: 18px !important;
  }
}

/* =========================================================
   AG. News & Regulatory Updates: a news grid
   ========================================================= */


.rrbp-coverage-area,
.rrbp-engagement-area {
  padding-top: 72px;
  padding-bottom: 72px;
}

.rrbp-mandate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}

.rrbp-mandate-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 37, 44, 0.09);
  border-radius: 18px;
  padding: 30px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.rrbp-mandate-card:hover {
  transform: translateY(-4px);
  border-color: rgba(145, 208, 137, 0.6);
  box-shadow: 0 18px 40px rgba(0, 37, 44, 0.1);
}

.rrbp-mandate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--secondaryColor, #B9F8B1);
  color: #00252C;
  font-size: 24px;
}

.rrbp-mandate-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  color: var(--titleColor, #000000);
}

.rrbp-mandate-strap {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brandGreenInk, #4A821E);
}

.rrbp-mandate-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--paraColor, #888787);
}

.rrbp-mandate-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #599C24;
}

.rrbp-mandate-list li:last-child {
  margin-bottom: 0;
}

/* Five numbered steps that stay on one row on a desktop and stack below it. */
.rrbp-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
  counter-reset: none;
}

.rrbp-step {
  padding: 26px 22px;
  border-radius: 16px;
  background: var(--ashColor, #f5f5f5);
  border-top: 3px solid var(--secondaryColor, #B9F8B1);
}

.rrbp-step-number {
  display: block;
  margin-bottom: 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 37, 44, 0.22);
}

.rrbp-step-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--titleColor, #000000);
}

.rrbp-step-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paraColor, #888787);
}

/* Month rule on the /news/ archive. */
.rrbp-news-month {
  margin: 46px 0 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 37, 44, 0.12);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--titleColor, #000000);
}

.rrbp-news-month:first-child {
  margin-top: 0;
}

/* Client segments band, home page. It follows the ash sectors band, so it is
   white - two grey bands in a row read as one long grey block. */
.rrbp-segments {
  padding-top: 72px;
  padding-bottom: 72px;
  background: #fff;
}

/*
 * Five across on a desktop, as asked. auto-fit with a 240px floor gave four
 * and an orphan at 1280 and three-and-two at 1024, so the count is stated per
 * breakpoint instead. Five is prime, so below the width where all five fit
 * the only split without a lone card is three-and-two, then a single column.
 */
.rrbp-segment-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1199.98px) {
  .rrbp-segment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .rrbp-segment-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rrbp-segment-card {
  background: #fff;
  border: 1px solid rgba(0, 37, 44, 0.09);
  border-radius: 16px;
  padding: 26px 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.rrbp-segment-card:hover {
  transform: translateY(-4px);
  border-color: rgba(145, 208, 137, 0.6);
  box-shadow: 0 16px 36px rgba(0, 37, 44, 0.09);
}

.rrbp-segment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--secondaryColor, #B9F8B1);
  color: #00252C;
  font-size: 21px;
}

.rrbp-segment-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--titleColor, #000000);
}

.rrbp-segment-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paraColor, #888787);
}

/* An earlier pass sized the mobile dial box at 68px while a later rule forced
   the SVG inside it to 84px, so every clock spilled 16px out of its own box.
   Match the two. */


/* =========================================================
   AI. About: the vision/mission panel
   ========================================================= */

/* The dark panel held a heading, then 216px of empty teal, then a photo that
   started 55px left of the panel and was cropped by its overflow:hidden. Lay
   it out as a column so the photo fills whatever the heading leaves. */
.about-area.style-two .about-img-wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px;
}

.about-area.style-two .about-img-wrap .about-img {
  width: 100% !important;
  /* The theme caps this image at 85% for its own offset composition, which
     left a dead band down the right of the panel once it was centred. */
  max-width: 100% !important;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  object-fit: cover;
  border-radius: 14px;
}

.about-area.style-two .about-img-wrap h3 {
  margin-bottom: 0 !important;
}

/* Trust Builders sat a 170x113 thumbnail next to a four-line list, so the
   heading floated well above the picture. Give the two columns real weight and
   top-align them. */
.about-area.style-two .features-wrap {
  align-items: flex-start !important;
  gap: 22px;
}

.about-area.style-two .feature-img {
  flex: 0 0 208px;
  width: 208px !important;
  height: auto !important;
}

.about-area.style-two .feature-img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.about-area.style-two .feature-info {
  flex: 1 1 0;
  min-width: 0;
}

/* The two cards sit side by side, so equal heights read as one row. */
.about-area.style-two .about-content .row > [class*="col-md-6"] {
  display: flex;
}

.about-area.style-two .about-content .row > [class*="col-md-6"] > .about-card {
  width: 100%;
}

/* =========================================================
   AJ. News: headline ticker and lead story
   ========================================================= */

/* The strip a news page runs above its stories. Same marquee mechanics as the
   portal ribbon so it reads as part of the theme. */
.rrbp-news-ticker {
  display: flex;
  align-items: stretch;
  margin-bottom: 34px;
  border: 1px solid rgba(0, 37, 44, 0.1);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.rrbp-ticker-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #00252C;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The viewport clips; the track is what moves. */
.rrbp-ticker-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 11px 0;
}

.rrbp-ticker-track {
  display: flex;
  align-items: center;
  gap: 46px;
  width: max-content;
  animation: rrbp-ticker-scroll 65s linear infinite;
}

.rrbp-news-ticker:hover .rrbp-ticker-track {
  animation-play-state: paused;
}

/* The run is rendered twice, so shifting by exactly half loops seamlessly. */
@keyframes rrbp-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.rrbp-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--titleColor, #000000);
  text-decoration: none;
}

.rrbp-ticker-item:hover {
  color: #00252C;
  text-decoration: underline;
}

.rrbp-ticker-source {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--secondaryColor, #B9F8B1);
  color: #00252C;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .rrbp-ticker-track {
    animation: none;
  }

  .rrbp-ticker-viewport {
    overflow-x: auto;
  }
}

.rrbp-form-status {
  margin-bottom: 22px;
  padding: 13px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.rrbp-form-status.is-ok {
  background: rgba(145, 208, 137, 0.18);
  border: 1px solid rgba(145, 208, 137, 0.55);
  color: #17532a;
}

.rrbp-form-status.is-error {
  background: rgba(214, 69, 69, 0.08);
  border: 1px solid rgba(214, 69, 69, 0.35);
  color: #8c2b2b;
}

/* Off-screen rather than display:none - some bots skip hidden inputs. */
.rrbp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Trust Builders: a 208px picture beside a list leaves the list 60px on a
   360px phone, and the text spills out of it. Stack the two below tablet. */
@media (max-width: 767.98px) {
  .about-area.style-two .features-wrap {
    flex-direction: column;
  }

  .about-area.style-two .feature-img {
    flex: 0 0 auto;
    width: 100% !important;
  }
}

/* =========================================================
   AK. Service tiles (home "RRBP Services")
   ========================================================= */

/* This grid had picked up twenty-one competing rules across four earlier
   passes - pill radii fighting card radii, three different icon sizes, an
   arrow that floated away from its label. All of them are gone; the markup
   moved to .rrbp-svc-tile so nothing can reach back in, and this is the whole
   definition. Cards, matching the mandate and segment grids elsewhere. */
.rrbp-svc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 16px;
}

.rrbp-svc-tile {
  display: grid;
  grid-template-columns: 42px 1fr 18px;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid rgba(0, 37, 44, 0.1);
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.rrbp-svc-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(145, 208, 137, 0.75);
  box-shadow: 0 12px 26px rgba(0, 37, 44, 0.09);
}

.rrbp-svc-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--secondaryColor, #B9F8B1);
  color: #00252C;
  font-size: 20px;
  line-height: 1;
  transition: background 0.2s ease;
}

.rrbp-svc-tile:hover .rrbp-svc-tile-icon {
  background: #599C24;
}

/* Two lines maximum: the longest label is "Direct tax - Income-tax Act, 2025",
   and letting it run to three made neighbouring tiles uneven. */
.rrbp-svc-tile-label {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--titleColor, #000000);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rrbp-svc-tile:hover .rrbp-svc-tile-label {
  color: #00252C;
}

.rrbp-svc-tile-arrow {
  font-size: 17px;
  line-height: 1;
  color: rgba(0, 37, 44, 0.32);
  transition: transform 0.2s ease, color 0.2s ease;
}

.rrbp-svc-tile:hover .rrbp-svc-tile-arrow {
  transform: translateX(3px);
  color: #00252C;
}

@media (max-width: 575.98px) {
  .rrbp-svc-tiles {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rrbp-svc-tile {
    min-height: 66px;
    padding: 12px 14px;
  }
}

/* Testimonials heading. The theme's title-anim splits the heading into line
   divs before the browser can balance it, so the fix is to give it a width
   where the natural break falls sensibly rather than orphaning a word. */
/*
 * One line on a desktop. title-anim measures the heading before it splits it,
 * so a second line is not counted in the layout and the slider rides up over
 * the text - which is what the overlap was. Sizing it to fit avoids both.
 */
/* The 1040px cap and the 33px size were both there to stop the old slider
   riding up over a second line. The slider is gone - it is three static cards
   now - so the heading can share the card row's own measure and its peers'
   size. Capped at 1040 it sat 145px inside the cards on each side, which is
   what read as off-balance. */
.testimonial-area .section-title {
  max-width: 100%;
  line-height: 1.24;
}

@media (max-width: 767.98px) {
  .testimonial-area .section-title {
    font-size: 27px !important;
  }
}

/* The slider now owns the full row; it was sized to sit beside a panel. */
.testimonial-area .col-12 > .testimonial-slider-one {
  width: 100%;
}

/* Testimonial cards were running to 370px for three lines of quote, because
   the swiper sizes every slide to the tallest. Let them be quote-sized. */
.testimonial-area .testimonial-card.style-one {
  min-height: 0;
  padding: 26px 28px 28px;
}

/*
 * Even cards. The swiper sets the wrapper to the tallest slide but aligns to
 * flex-start, so a two-line quote sat 29px shorter than a three-line one and
 * the row looked ragged. Stretch the track and let each card fill it.
 */
.testimonial-area .testimonial-slider-one .swiper-wrapper {
  align-items: stretch;
  /* Swiper's autoHeight writes an inline height once, measured against the
     old taller card, and never recalculates - which left 200px of dead space
     under a three-line quote. Let the content set it; stretch keeps the row
     even. */
  height: auto !important;
}

.testimonial-area .testimonial-slider-one .swiper-slide {
  height: auto;
  display: flex;
}

.testimonial-area .testimonial-slider-one .swiper-slide > .testimonial-card {
  width: 100%;
}

.testimonial-area .testimonial-card.style-one p {
  margin-bottom: 0;
}

/* Breathing room between the heading and the slider: title-anim leaves the
   heading's own margin collapsed, so the first row of cards sat on the text. */
.testimonial-area .container.style-one + .container-fluid {
  margin-top: 42px;
}

.testimonial-area .section-title {
  margin-bottom: 0 !important;
}

/* =========================================================
   AL. No decorative underlines
   ========================================================= */

/*
 * The theme draws a hand-sketched scribble under every .sub-title via an
 * ::after carrying a base64 PNG. It reads as informal, which is wrong for a
 * regulatory advisory firm, so it goes everywhere it appears.
 *
 * Underlines on links inside article bodies stay: those are functional, and
 * removing them would leave a link indistinguishable from body text.
 */
.sub-title::after,
.sub-title::before,
.section-title .sub-title::after,
.section-subtitle::after {
  content: none !important;
  background-image: none !important;
  display: none !important;
}

/* =========================================================
   AM. Alignment pass: equal columns, even cards, no orphan lines
   ========================================================= */

/* A section lead sentence, sitting under a centred section title. */
.rrbp-section-lead {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 17px;
  line-height: 1.65;
  color: var(--paraColor, #888787);
}

/*
 * Image-beside-text rows were letting the picture run to its natural height
 * while the copy ran to its own - 376px against 518px on the About intro - so
 * the two columns never lined up at the bottom. Stretch the row and make the
 * image fill its column.
 */
.wh-area .row.align-items-center,
.rrbp-kpo-area .row.align-items-center {
  align-items: stretch !important;
}

.about-area .row.align-items-center > [class*="col-"] > .about-img-wrap,
.about-area .row.align-items-center > [class*="col-"] > .img-container {
  height: 100%;
}

.about-area .row.align-items-center > [class*="col-"] > .about-img-wrap > img,
.about-area .row.align-items-center > [class*="col-"] > .img-container > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The three figures were floating apart on a wide row and bunching on a narrow
   one. An even grid keeps them on one baseline at every width. */
.counter-card-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

.counter-card-wrap .counter-card {
  text-align: left !important;
  margin-bottom: 0 !important;
}

@media (max-width: 575.98px) {
  .counter-card-wrap {
    grid-template-columns: 1fr 1fr;
  }
}

/*
 * "Foreign investors & MNCs" wrapped to two lines while its neighbours held
 * one, so the body copy started at a different height in every card. Reserving
 * two lines puts every card's paragraph on the same line.
 */
.rrbp-segment-title,
.rrbp-mandate-title {
  /* Two lines are reserved so every card's paragraph starts on the same line;
     the title itself stays top-aligned so the titles line up too. */
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}

.rrbp-segment-card,
.rrbp-mandate-card,
.rrbp-svc-tile {
  height: 100%;
}

/* Balance the wrap so a heading never drops a single word onto its own line. */
.rrbp-segment-title,
.rrbp-mandate-title,
.rrbp-step-title,
.section-title {
  text-wrap: balance;
}

/* Testimonials read thin at 220px for a three-line quote. */
.testimonial-area .testimonial-card.style-one {
  min-height: 260px;
  padding: 32px 32px 34px;
}

.testimonial-area .testimonial-card.style-one p {
  font-size: 16.5px;
  line-height: 1.65;
}

/* =========================================================
   AN. Footer contact block
   ========================================================= */

/*
 * Two phone numbers stacked with 18px of margin each and no icons read as a
 * loose list of digits. Tighten them and give each line its own mark.
 */
.footer-area .contact-num {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px !important;
  font-size: 17px;
}

.footer-area .contact-num + .contact-num {
  margin-bottom: 14px !important;
}

.footer-area .contact-mail {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.footer-area .contact-num::before,
.footer-area .contact-mail::before {
  font-family: "remixicon";
  font-style: normal;
  font-weight: normal;
  font-size: 17px;
  line-height: 1;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(185, 248, 177, 0.16);
  color: var(--secondaryColor, #B9F8B1);
}

.footer-area .contact-num::before {
  content: "\efec"; /* ri-phone-line */
}

.footer-area .contact-mail::before {
  content: "\eef6"; /* ri-mail-line */
}

/* =========================================================
   AO. Service carousel: never clip a card
   ========================================================= */

/*
 * The section is overflow:hidden and the slide height is whatever the swiper
 * measured once. At 1600px the cards happened to fit exactly; narrower, the
 * copy wraps to another line, the card grows and the "Discover more" button
 * was sliced off at the section edge. Let the slides size to their content and
 * keep clear space under them.
 */
.service-area.style-one .swiper-wrapper {
  align-items: stretch;
  height: auto !important;
}

.service-area.style-one .swiper-slide {
  height: auto !important;
  display: flex;
}

.service-area.style-one .service-card {
  width: 100%;
  height: auto !important;
  display: flex;
  flex-direction: column;
}

/* The button sits at the foot of every card, so the row reads level. */
.service-area.style-one .service-card > .btn {
  margin-top: auto;
}

/* =========================================================
   AP. Service index: a list, not a wall of boxes
   ========================================================= */

/*
 * The boxed tiles were rejected as too decorative. This is the same twenty
 * links as a plain index - four columns, hairline rules, no chips or borders -
 * which is how a professional firm lists its practice areas.
 */
.rrbp-svc-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 44px;
  max-width: 1180px;
  margin: 0 auto;
}

.rrbp-svc-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 0;
  padding: 17px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(0, 37, 44, 0.11);
  border-radius: 0;
  text-decoration: none;
  transition: border-color 0.2s ease, padding-left 0.2s ease;
}

.rrbp-svc-tile:hover {
  transform: none;
  box-shadow: none;
  padding-left: 8px;
  border-bottom-color: #599C24;
}

/* The mint icon chips were the loudest part of the old treatment. */
.rrbp-svc-tile-icon {
  display: none;
}

.rrbp-svc-tile-label {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--titleColor, #000000);
  display: block;
  -webkit-line-clamp: initial;
  overflow: visible;
}

.rrbp-svc-tile:hover .rrbp-svc-tile-label {
  color: #00252C;
}

.rrbp-svc-tile-arrow {
  flex: 0 0 auto;
  font-size: 15px;
  color: rgba(0, 37, 44, 0.28);
}

.rrbp-svc-tile:hover .rrbp-svc-tile-arrow {
  color: #599C24;
  transform: translateX(3px);
}

@media (max-width: 1199.98px) {
  .rrbp-svc-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 34px;
  }
}

@media (max-width: 767.98px) {
  .rrbp-svc-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 26px;
  }
}

@media (max-width: 479.98px) {
  .rrbp-svc-tiles {
    grid-template-columns: 1fr;
  }
}

/* The contact block and the clock row were a screen apart. */

.footer-area .footer-widget .contact-mail {
  margin-bottom: 0;
}

/* =========================================================
   AQ. Hero copy alignment
   ========================================================= */

/*
 * .hero-para carries margin-left:168px from the theme, where it sat in an
 * offset right-hand column. Now that it lives under the headline that indent
 * pushed the strapline and button 168px to the right of the title.
 */
.hero-area.style-one .hero-content .hero-para {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 640px;
}

.hero-area.style-one .hero-content h1,
.hero-area.style-one .hero-content h2,
.hero-area.style-one .hero-content .hero-para p {
  max-width: 640px;
}


/* =========================================================
   AR. Services carousel: fit one screen
   ========================================================= */

/*
 * The section ran 853px against roughly 811px of usable height under the
 * sticky bar, so the bottom of it was always off-screen. The heading block was
 * 313px of that and the cards 484px; both are trimmed rather than the section
 * being clipped, so nothing is cut.
 */
@media (min-width: 992px) {
  .service-area.style-one .container.style-one {
    padding-top: 40px !important;
  }

  .service-area.style-one .section-title.style-one {
    font-size: 34px !important;
    line-height: 1.26 !important;
    margin-bottom: 34px !important;
    max-width: 900px;
  }

  .service-area.style-one .service-card {
    padding: 22px 24px 24px !important;
  }

  .service-area.style-one .service-card > img {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 14px !important;
  }

  .service-area.style-one .service-card h3 {
    font-size: 21px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  .service-area.style-one .service-card p {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
    /* Four lines is enough for a one-sentence summary and keeps the row even. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .rrbp-home .service-area.style-one {
    padding-bottom: 8px !important;
  }
}

/* Short screens - a 1366x768 or 1536x864 laptop leaves 550-640px usable - need
   another 80px back. The summary drops to three lines and the heading to two.
   The breakpoint is 760px because 730px sat just above 719 and overshot. */
@media (min-width: 992px) and (max-height: 760px) {
  .service-area.style-one .container.style-one {
    padding-top: 28px !important;
  }

  .service-area.style-one .section-title.style-one {
    font-size: 28px !important;
    margin-bottom: 24px !important;
  }

  .service-area.style-one .service-card {
    padding: 18px 20px 20px !important;
  }

  .service-area.style-one .service-card > img {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 10px !important;
  }

  .service-area.style-one .service-card h3 {
    font-size: 19px !important;
    margin-bottom: 8px !important;
  }

  .service-area.style-one .service-card p {
    font-size: 14.5px !important;
    margin-bottom: 14px !important;
    -webkit-line-clamp: 3;
  }

  .rrbp-home .service-area.style-one {
    padding-bottom: 6px !important;
  }
}

/* Six dials share one row from md up; below that they wrap two or three to a
   row, so the dial has to shrink with the column or it pushes the page wide. */


/* =========================================================
   AS. Footer dials - the single definition
   ========================================================= */

/*
 * Nine separate rules across six earlier passes were all sizing this element,
 * each overriding the last, which is why the six-dial row kept pushing the
 * page sideways on a phone. They are all gone; this is the whole thing.
 *
 * Six dials share one row from md up. Below that they wrap, so the dial has to
 * shrink with its column or the row is wider than the screen.
 */
/*
 * Fluid, not fixed. The footer column is a different width on different pages -
 * about 50px on contactus at 360px against 150px on the home page - so a fixed
 * dial overflowed its own column and pushed the page sideways. It fills the
 * column and caps at the size below.
 */
.rrbp-wall-clock,
.rrbp-wall-clock .rrbp-clock-svg {
  width: 100% !important;
  height: auto !important;
  max-width: 82px !important;
  aspect-ratio: 1 / 1;
}

@media (min-width: 576px) {
.rrbp-wall-clock,
.rrbp-wall-clock .rrbp-clock-svg {
    max-width: 96px !important;
  }
}

@media (min-width: 992px) {
.rrbp-wall-clock,
.rrbp-wall-clock .rrbp-clock-svg {
    max-width: 112px !important;
  }
}

.rrbp-wall-clock {
  max-width: 100%;
  /* The dial is capped at 112px inside a 211px grid column, so as a plain
     block it sat against the left edge while the caption below it centred in
     the full column - the label never lined up under its own clock. */
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   AT. Services carousel: a marquee you can push
   ========================================================= */

/*
 * The row is a scroll container, not a transformed track. A CSS keyframe owns
 * the transform outright, so the cards could not be dragged; scrollLeft can be
 * advanced by the animation loop and by a finger alike. Touch panning is then
 * the browser's own.
 */
.service-area.style-one .swiper.rrbp-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.service-area.style-one .swiper.rrbp-marquee::-webkit-scrollbar {
  display: none;
}

.service-area.style-one .swiper.rrbp-marquee.is-grabbing {
  cursor: grabbing;
}

.service-area.style-one .swiper.rrbp-marquee .swiper-wrapper {
  display: flex;
  align-items: stretch;
  width: max-content;
  transform: none;
  gap: 22px;
}

.service-area.style-one .swiper.rrbp-marquee .swiper-slide {
  flex: 0 0 auto;
  width: 340px;
  height: auto;
  margin: 0 !important;
}

/* Dragging must not select the card text under the cursor. */
.service-area.style-one .swiper.rrbp-marquee.is-grabbing .swiper-slide {
  user-select: none;
}

/* The arrows drove Swiper, which no longer runs this row. */
.service-area.style-one .slider-btn,
.service-area.style-one .slider-btn.style-four,
.service-area.style-one .prev-btn,
.service-area.style-one .next-btn {
  display: none !important;
}

/* The band of dead ground under the cards. */
.rrbp-home .service-area.style-one {
  padding-bottom: 0 !important;
}

@media (max-width: 575.98px) {
  .service-area.style-one .swiper.rrbp-marquee .swiper-slide {
    width: 280px;
  }
}

/* =========================================================
   AU. News & Updates: two tickers, no cards
   ========================================================= */

/*
 * The card grid was rejected outright - the client wants this to read like a
 * wire service. The headlines run left across the top and the full list climbs
 * two columns underneath, both on the same marquee mechanics as the portal
 * ribbon, so there is no script here that can stall.
 */
.rrbp-newswall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 30px;
  margin-bottom: 34px;
}

/* A hairline between the columns, the way a paper sets two columns of type. */
@media (min-width: 768px) {
  .rrbp-newsfeed + .rrbp-newsfeed {
    border-left: 1px solid rgba(0, 37, 44, 0.08);
    padding-left: 30px;
  }
}

.rrbp-newsfeed {
  position: relative;
  height: clamp(300px, 44vh, 420px);
  overflow: hidden;
  /* Rows fade in at the top edge and out at the bottom, so headlines appear to
     surface rather than being sliced off by a hard border. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
}

.rrbp-newsfeed-track {
  display: flex;
  flex-direction: column;
  animation: rrbp-newsfeed-climb var(--rrbp-feed-time, 34s) linear infinite;
}

/* The run is rendered twice, so shifting by exactly half loops seamlessly. */
@keyframes rrbp-newsfeed-climb {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -50%, 0); }
}

.rrbp-newsfeed:hover .rrbp-newsfeed-track,
.rrbp-newsfeed:focus-within .rrbp-newsfeed-track {
  animation-play-state: paused;
}

.rrbp-newsrow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 12px;
  border-bottom: 1px solid rgba(0, 37, 44, 0.08);
  text-decoration: none;
  transition: background-color 0.22s ease;
}

.rrbp-newsrow:hover {
  background: rgba(185, 248, 177, 0.16);
}

.rrbp-newsrow-tag {
  flex: 0 0 auto;
  min-width: 46px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--secondaryColor, #B9F8B1);
  color: #00252C;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.5;
}

.rrbp-newsrow-text {
  display: block;
  min-width: 0;
}

.rrbp-newsrow-head {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.42;
  color: var(--titleColor, #000000);
  transition: color 0.22s ease;
}

.rrbp-newsrow:hover .rrbp-newsrow-head {
  color: #00252C;
}

.rrbp-newsrow-meta {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--paraColor, #888787);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rrbp-newsgrid-foot {
  display: flex;
  justify-content: center;
  margin-top: 42px;
}

/* The /news/ archive: the same rows, standing still. */
.rrbp-newslist {
  margin-bottom: 40px;
}

.rrbp-newslist .rrbp-newsrow {
  padding-left: 0;
  padding-right: 12px;
}

@media (max-width: 767.98px) {
  .rrbp-newswall {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Two stacked columns at 440px each was 880px of scrolling news on a phone. */
  .rrbp-newsfeed {
    height: clamp(240px, 34vh, 300px);
  }

  .rrbp-newsrow {
    padding: 13px 12px;
  }

  .rrbp-newsrow-head {
    font-size: 15px;
  }

  /* Room to wrap beats an ellipsis after the publisher's first word. */
  .rrbp-newsrow-meta {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rrbp-newsfeed-track {
    animation: none;
  }

  .rrbp-newsfeed {
    height: auto;
    overflow-y: auto;
    max-height: 420px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Without the climb the second copy is only repetition. */
  .rrbp-newsfeed-track > [aria-hidden="true"] {
    display: none;
  }
}

/* =========================================================
   AV. The stats strip under the hero
   ========================================================= */

/*
 * Three figures spread across 1345px by justify-content:between left two holes
 * of dead mint between them and pinned the outer two against the page edge.
 * Equal thirds with a hairline between reads as one instrument panel, which is
 * what a stats strip is.
 *
 * Done with flex-basis rather than a grid: the markup carries Bootstrap's
 * .d-flex, whose display is !important, so "display: grid" here would silently
 * lose and the thirds would only look even by accident.
 */
.promo-card-wrap.style-one {
  gap: 0;
  align-items: stretch;
}

.promo-card.style-one {
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 20px;
  text-align: left;
}

/* The tape is the brand green itself, not the mint tint. Black on #599C24 is
   6.2:1, so the figures and their labels stay readable at their own sizes;
   white would have been 3.4:1 and failed on the 19px labels. */
.bg_secondary:has(> .container > .promo-card-wrap.style-one),
.promo-card-wrap.style-one {
  background: #599C24 !important;
}

/* White on #599C24 is 3.38:1. That clears AA for the 40px figures outright,
   and for the labels once they are bold at 19px - which is the large-text
   threshold. Regular weight there would have failed. */
.promo-card.style-one > span,
.promo-card.style-one > p {
  color: #FFFFFF !important;
}

.promo-card.style-one > p {
  font-weight: 700;
}

.promo-card.style-one + .promo-card.style-one {
  border-left: 1px solid rgba(0, 0, 0, 0.22);
}

/* A fixed box for the figure, right-aligned: "140+" and "4" then end at the
   same place, so the three labels start on one line as well. */
.promo-card.style-one > span {
  flex: 0 0 auto;
  min-width: 84px;
  text-align: right;
  line-height: 1;
}

.promo-card.style-one > p {
  flex: 0 1 auto;
  margin-bottom: 0;
}

/* One line each, but only where a third of the container is actually wide
   enough: at 1024 "CAs, CSs, CPAs & specialists" held on one line by pushing
   51px past its own cell and out of the page. */
@media (min-width: 1200px) {
  .promo-card.style-one > p {
    white-space: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .promo-card.style-one {
    padding: 6px 10px;
  }

  .promo-card.style-one > span {
    min-width: 0;
  }
}

/* At 1920 and up the theme pads the second and third cards by 85px and 100px,
   which is what pushed them wider than the first and broke the thirds. */
@media (min-width: 1920px) {
  .promo-card-wrap.style-one .promo-card:nth-child(2),
  .promo-card-wrap.style-one .promo-card:nth-child(3) {
    padding-left: 20px;
  }
}

/* Stacked on a phone, where the divider belongs above each row. */
@media (max-width: 767.98px) {
  .promo-card.style-one {
    flex: 1 1 100%;
    justify-content: flex-start;
    padding: 12px 4px;
  }

  .promo-card.style-one > span {
    min-width: 68px;
  }

  .promo-card.style-one + .promo-card.style-one {
    border-left: 0;
    border-top: 1px solid rgba(0, 37, 44, 0.16);
  }
}

/* =========================================================
   AW. Testimonials: one centred row
   ========================================================= */

/*
 * The slider sat in a .container-fluid while its heading sat in a .container,
 * so the cards started 111px left of the heading and ran off the right edge.
 * Three quotes do not need a carousel; three equal cards in the same container
 * fix the alignment, the repetition and the uneven heights at once.
 */
.testimonial-area.style-two .testimonial-card.style-one {
  height: 100%;
  padding: 34px 32px;
  background: #fff;
  border: 1px solid rgba(0, 37, 44, 0.08);
  box-shadow: 0 2px 14px rgba(0, 31, 34, 0.05);
}

.testimonial-area.style-two .testimonial-card.style-one .rating {
  margin-bottom: 18px;
}

.testimonial-area.style-two .testimonial-card.style-one p {
  font-size: 17px;
  line-height: 1.62;
}

/* A theme rule caps the title at 1040px; without auto margins the centred
   text sat in a block flush to the left of the cards. */
.testimonial-area.style-two .section-title.style-one {
  margin-left: auto;
  margin-right: auto;
}

.testimonial-area.style-two .section-title.style-one small {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.06em;
  color: var(--paraColor, #888787);
}

/* =========================================================
   AX. Footer clocks: one labelled band
   ========================================================= */

/*
 * The dials used to sit in the footer's narrow right-hand column beside a
 * wordmark that later CSS had collapsed to 0x0, so they rendered as a strip
 * adrift under a column of dead space. They now have their own band above the
 * bottom bar, with the same hairline that bar uses.
 */
.rrbp-clock-band {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.rrbp-clock-band-title {
  display: block;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Six equal columns across the whole band. As a centred flex cluster the
   dials sat in the middle with about 350px of dead footer either side, while
   the hairline above them ran the full width - so the row read as squeezed
   with gaps bolted on each end. A grid spreads them edge to edge and makes
   every gap identical. */
.rrbp-clock-band-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  gap: 24px 12px;
}

.rrbp-clock-cell {
  width: 100%;
  text-align: center;
}

/* The flag sits on the caption's baseline, not above it. */
.rrbp-clock-flag {
  width: 20px;
  height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

@media (max-width: 991.98px) {
  .rrbp-clock-band-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575.98px) {
  .rrbp-clock-band {
    margin-top: 26px;
    padding-top: 24px;
  }

  /* Two across on a phone keeps "09:26:22 AM" on one line under the dial. */
  .rrbp-clock-band-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
  }
}

/* =========================================================
   AY. Global reporting & Why Trust: the same anatomy
   ========================================================= */

/*
 * Both sections read as bolted-on because their rhythm did not match the rest
 * of the page: KPO opened left-aligned with no eyebrow while every other band
 * is centred, and the Trust cards sat at 4.5% white on the dark ground, which
 * is below the point where a card looks like a card. The palette was never the
 * problem; the hierarchy was.
 */
.rrbp-kpo-area .rrbp-why-card,
.rrbp-trust-card {
  padding: 30px 28px !important;
  border-radius: 20px;
  gap: 12px;
}

.rrbp-kpo-area .rrbp-why-icon,
.rrbp-trust-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  font-size: 25px !important;
}

.rrbp-kpo-area .rrbp-why-title,
.rrbp-trust-card-title {
  font-size: 20px !important;
  line-height: 1.32 !important;
  margin: 0 0 2px !important;
}

.rrbp-kpo-area .rrbp-why-list li,
.rrbp-trust-card-text {
  font-size: 15.5px !important;
  line-height: 1.62 !important;
}

/* The mint edge the service cards use, on both rows. */
.rrbp-kpo-area .rrbp-why-card {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.rrbp-kpo-area .rrbp-why-card::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 2px;
  background: #599C24;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}

.rrbp-kpo-area .rrbp-why-card:hover::before {
  transform: scaleX(1);
}

.rrbp-kpo-area .rrbp-why-card:hover {
  border-color: rgba(145, 208, 137, 0.55) !important;
  box-shadow: 0 16px 38px rgba(0, 37, 44, 0.09) !important;
}

/* A card at 4.5% white on #00252C is a rectangle, not a card. */
.rrbp-trust-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(185, 248, 177, 0.16);
}

.rrbp-trust-lead,
.rrbp-trust-card-text {
  color: rgba(255, 255, 255, 0.74) !important;
}

/* The lead ran the full eight columns and broke with two words on line two. */
.rrbp-kpo-area .row.text-center > [class*="col-"] > p,
.rrbp-trust-area .rrbp-trust-lead,
[data-rrbp-live="news"] .row.text-center > [class*="col-"] > p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  /* Evens the line lengths so the last line is never one orphan word. */
  text-wrap: balance;
}

/* The CTA band: one row, centred on itself, not a tall mint slab. */
.rrbp-trust-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  padding: 22px 34px !important;
  margin-top: 34px !important;
}

.rrbp-trust-cta p {
  flex: 1 1 520px;
  max-width: 780px;
  font-size: 17px;
  line-height: 1.5;
  text-wrap: balance;
}

@media (max-width: 575.98px) {
  .rrbp-trust-cta {
    justify-content: flex-start;
    padding: 22px 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rrbp-kpo-area .rrbp-why-card::before {
    transition: none;
  }
}

/* =========================================================
   AZ. About: paired images share a height
   ========================================================= */

/*
 * The two pictures under "Why Choose RRBP Advisors?" are 1024x600 and
 * 1600x1067, so at half width they rendered 182px and 207px tall and their
 * bottoms never lined up - and because both are lazy, whichever arrived second
 * reflowed the block. A fixed ratio settles both: the box is reserved before
 * the file lands, and the crop makes the heights identical whatever is in it.
 */
.wh-area .wh-title .row .img-container {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.wh-area .wh-title .row .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   BA. About: the vision/mission block at full width
   ========================================================= */

/*
 * The decorative panel that used to sit beside this block is gone, so Mission,
 * Vision and Values run as three equal cards across the row and Trust Builders
 * sits underneath them. Left as one column the list filled a third of the
 * width and left the rest of the card empty, so it runs in two.
 */
@media (min-width: 768px) {
  .about-area.style-two .feature-list.style-one {
    columns: 2;
    column-gap: 44px;
  }

  .about-area.style-two .feature-list.style-one li {
    break-inside: avoid;
  }
}

/*
 * The theme reserves 30px of indent for an <img> tick that this markup never
 * carried, so every line sat behind an invisible marker. This is the same
 * check .rrbp-why-list draws, so the two lists match.
 */
.about-area.style-two .feature-list.style-one li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 6px;
  height: 11px;
  border: solid #599C24;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.about-area.style-two .features-wrap {
  margin-top: 8px;
}

.about-area.style-two .feature-info h3 {
  margin-bottom: 14px;
}


/* =========================================================
   BB. Two fixes that outlived the recolour
   ========================================================= */

/* Body links fell through to Bootstrap's #0D6EFD - off-brand, and 4.2:1 on
   the ash ground. Scoped to prose: a first pass used
   `.container a:not([class])` and underlined the navbar and footer too. */
.rrbp-article-body a,
.single-para a,
.privacy-content a,
.rrbp-service-detail a,
.terms-content a {
  color: var(--primaryColor, #00252C);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The footer menu ran at --grayColor, 3.6:1 on the dark ground. */
.footer-area .footer-menu.style-one li a,
.footer-area .copyright-text,
.footer-area .footer-bottom-menu li a {
  color: rgba(255, 255, 255, 0.78);
}

.footer-area .footer-menu.style-one li a:hover,
.footer-area .footer-bottom-menu li a:hover {
  color: var(--secondaryColor, #B9F8B1);
}

/* =========================================================
   BD. A glass navbar, and a lighter hand on the photographs
   ========================================================= */

/*
 * The sticky bar was rgba(...,0.86): opaque enough to be a slab sitting on the
 * page rather than a bar floating over it. At 0.72 with a real blur you can
 * see the content travel underneath, which is what makes a sticky header feel
 * attached to the page. White on it is 7.4:1 over white content and better
 * over anything darker, so nothing is traded for the transparency.
 */
.navbar-area.is-sticky,
.navbar-area.sticky,
.navbar-area.style-one.is-sticky,
.navbar-area.style-one.sticky,
.navbar-area.style-four.is-sticky,
.navbar-area.style-four.sticky {
  background: rgba(0, 37, 44, 0.72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.18);
  /* Property-scoped, not "all": a 0.5s all-transition was what left a
     haze on screen for a second after the class had gone. */
  transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Safari and Firefox without backdrop-filter would get a see-through bar with
   text over live content, so those fall back to a solid surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar-area.is-sticky,
  .navbar-area.sticky {
    background: rgba(0, 37, 44, 0.94) !important;
  }
}

/* The photo scrim is the theme's own again: it only looked like a wash
   while the surface colour was purple. */

/* =========================================================
   BF. Where each colour actually earns its place
   ========================================================= */

/*
 * The page was reading as one flat light green because #91D089 was doing every
 * accent job, and on a white ground it is 1.8:1 - present in the CSS, invisible
 * on screen. The three greens now split by contrast, not by taste:
 *
 *   #91D089  light green   only on the DARK bands, where it has 8.6:1
 *   #599C24  brand green   graphics on a LIGHT ground - icons, rules, hover
 *                          edges, bullets. 3.4:1, which clears the 3:1 that
 *                          non-text needs and is what makes them visible
 *   #4A821E  green ink     green TEXT on white, 5.2:1. Neither of the two
 *                          above can carry body-size text on a light ground
 *
 * Purple is deliberately small: the chips, the ticker pill and the focus ring.
 * It appears where the eye is already stopping, so the mark's second colour is
 * present without competing with the green for the page.
 */
:root {
  --brandGreenInk: #4A821E;
  --brandPurple: #2E3192;
}

/* --- purple, in the small parts ---------------------------------------- */

/* The source chips beside every headline: purple on the mint, 8:1. */
.rrbp-ticker-source,
.rrbp-newsrow-tag {
  color: var(--brandPurple, #2E3192);
}

/* The "Latest" pill that opens the ticker. */
.rrbp-ticker-label {
  background: var(--brandPurple, #2E3192);
}

/* The keyboard focus ring, site-wide. Invisible to a mouse user, and the site
   had no visible focus state at all before this. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  /* !important because this sheet is not the last of the twenty-six the page
     loads, and the theme zeroes the outline further down the cascade. */
  outline: 3px solid var(--brandPurple, #2E3192) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* On the dark bands the ring has to be the light tint to be seen at all. */
.footer-area a:focus-visible,
.navbar-area a:focus-visible,
.rrbp-trust-area a:focus-visible,
.cta-box a:focus-visible {
  outline-color: var(--secondaryColor, #B9F8B1) !important;
}

/* Back-to-top: purple on hover, the one piece of chrome that follows you down
   the page. */
.back-to-top:hover,
.scroll-top:hover,
#backToTop:hover {
  border-color: var(--brandPurple, #2E3192);
  color: var(--brandPurple, #2E3192);
}

/* =========================================================
   BG. Call-to-action buttons in brand purple (all pages)
   ========================================================= */

/*
 * Scoped to .rrbp-home so the rest of the site keeps the green button while
 * this is being judged. Purple carries the CTA well here because it is the one
 * thing on the page that is NOT green - the tape, the ribbon, the icon discs
 * and the check marks are all green, so a green button competes with its own
 * surroundings for attention. White on #2E3192 is 10.7:1.
 *
 * The area involved is a few hundred square pixels per button, which is why
 * it reads as an accent rather than the purple field that was rejected.
 *
 * Nothing here touches a photograph: the hero scrim and the services band
 * overlay stay exactly as they are.
 */
/* !important because style-4d99433f74be2ed9.css sets these from --rrbp-mint
   with !important of its own, site-wide. */
.btn.style-one .btn-icon-one,
.btn.style-one .btn-icon-two {
  background-color: var(--brandPurple, #2E3192) !important;
}

.btn.style-one .btn-text {
  background-color: var(--brandPurple, #2E3192) !important;
  color: #FFFFFF !important;
}

/*
 * The arrows are base64 SVGs with the fill baked in at #393737, so they cannot
 * be recoloured by a property. brightness(0) crushes them to black and
 * invert(1) lifts that to white - the only way to flip a monochrome <img>.
 */
.btn.style-one .btn-icon-one img,
.btn.style-one .btn-icon-two img {
  filter: brightness(0) invert(1);
}

/* Where the arrow is an icon font rather than an image. */
.btn.style-one .btn-icon-one i,
.btn.style-one .btn-icon-two i {
  color: #FFFFFF;
}

.btn.style-one:hover .btn-icon-one,
.btn.style-one:hover .btn-icon-two,
.btn.style-one:hover .btn-text {
  background-color: #252873 !important;
}

/* Theme flips the label to black on hover; keep it white on the purple. */
.btn.style-one:hover .btn-text {
  color: #FFFFFF !important;
}

/* =========================================================
   BH. Purple where it has a ground to sit on; borders on the carousel
   ========================================================= */

/*
 * The two bands. Both were carrying the brand green; white on #2E3192 is
 * 10.7:1 against 3.4:1 on the green, so the purple is the better ground for
 * white type as well as the change that was asked for.
 */
.bg_secondary:has(> .container > .promo-card-wrap.style-one),
.promo-card-wrap.style-one {
  background: var(--brandPurple, #2E3192) !important;
}

.rrbp-portal-ribbon {
  background: var(--brandPurple, #2E3192);
}

/*
 * Icons: only the ones that sit ON something.
 *
 * The KPO and Trust cards put their glyph on a light-green disc, so the DISC
 * takes the purple and the glyph flips to white. The carousel cards have no
 * disc - the glyph is the artwork itself - so those are left exactly as they
 * are. Recolouring them would have meant recolouring the drawing.
 */
.rrbp-kpo-area .rrbp-why-icon,
.rrbp-trust-icon {
  background: var(--brandPurple, #2E3192) !important;
  color: #FFFFFF !important;
}

/*
 * The carousel cards had no edge at all, so they read as text floating on the
 * photograph rather than as cards. A hairline defines them; it doubles on
 * hover so the card you are pointing at is unambiguous.
 */
.rrbp-home .service-area.style-one .service-card.style-one {
  border: 1px solid rgba(255, 255, 255, 0.38);
  transition: border-color 0.25s ease, border-width 0s;
}

/* No padding compensation needed: the cards are border-box, so the second
   pixel comes out of the content box and the card does not grow or nudge its
   neighbours along the track. */
.rrbp-home .service-area.style-one .service-card.style-one:hover,
.rrbp-home .service-area.style-one .service-card.style-one.active {
  border: 2px solid var(--secondaryColor, #B9F8B1);
}