/* Service page sections (intro, features, related services, FAQs, stages, comparison). Loads after legacy.css. */

/* Intro section of the overview pages */
.new-intro-style {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  text-align: left;
}

.new-intro-style .left-intro h2 {
  font-size: 2.1em;
  line-height: 120%;
  font-weight: 400;
}

.new-intro-style .left-intro p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.65;
  color: #4a5158;
}

.new-intro-style .left-intro p strong {
  color: #2f343a;
}

.new-intro-style .left-intro p.left-intro__callout {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--rca-color-navy);
}

/* Larger sentence that leads into the intro button. Add class="left-intro__lead" in the Text tab. */
.new-intro-style .left-intro p.left-intro__lead {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  color: #004580;
}

.new-intro-style .left-intro p.left-intro__lead strong {
  font-weight: 700;
  color: #004580;
}

/* Optional button under the intro (the "Intro button" field). */
.service-cards__intro .left-intro__button,
.new-intro-style .left-intro p.left-intro__button {
  margin: 26px 0 0;
}

.question-box {
  background: #eef6fa;
  border: 1px solid #dbeaf3;
  border-radius: 18px;
  padding: 34px 36px;
}

.question-box .qb-row {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid #d8e6ef;
}

.question-box .qb-row.qb-row--last {
  border-bottom: none;
}

.question-box .qb-icon.rca-mark--check {
  width: 27px;
  height: 27px;
}

.question-box .qb-icon.rca-mark--check::after {
  width: 8px;
  height: 12px;
  margin-top: -3px;
}

.question-box .qb-icon.rca-mark--x {
  width: 27px;
  height: 27px;
  background: #e03616;
}

.question-box .qb-icon.rca-mark--x::before,
.question-box .qb-icon.rca-mark--x::after {
  width: 12px;
  background: #ffffff;
}

.question-box .qb-text {
  font-size: 17px;
  font-weight: 600;
  color: #1c4f7a;
  line-height: 1.45;
}
@media (max-width: 768px) {
  .new-intro-style {
    grid-template-columns: 1fr;
  }
}

.pd-approach {
  clear: both;
  padding: 40px 0 84px;
  color: #2f343a;
}

.pd-approach__head {
  max-width: 760px;
  margin: 0 auto 50px;
  text-align: center;
}

/*.pd-approach__head h2 {
  font-size: 2.1em !important;
}*/

.pd-approach__intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #5b6168;
}
.pd-approach__intro p {
  font-size: 18px;
}
.pd-approach__grid {
  display: grid;
  /*grid-template-columns: repeat(4, 1fr);*/
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 24px;
}

/* ---------- Mobile ---------- */

/* On tablets, the grid shows two columns. */
@media (max-width: 900px) {
  .pd-approach {
    padding: 64px 0 68px;
  }
  .pd-approach__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .pd-approach__title {
    font-size: 30px;
  }
}

/* On phones, the grid shows one column. */
@media (max-width: 600px) {
  .pd-approach {
    padding: 48px 0 52px;
  }
  .pd-approach__inner {
    padding: 0 22px;
  }
  .pd-approach__head {
    margin-bottom: 34px;
  }
  .pd-approach__title {
    font-size: 26px;
  }
  .pd-approach__intro {
    font-size: 16px;
  }
  .pd-approach__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* End of the overview page intro */

/* Related services */
.rca-related {
  padding: 64px 0;
}

.rca-related__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}

.rca-related__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
}

.rca-related__item {
  display: block;
  padding: 40px 0 20px;
  border-bottom: 1px solid #e6ecf0;
  text-decoration: none;
}

.rca-related__head {
  display: flex; /* Flex removes the gap before the icon. Do not change it. */
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
}

.rca-related__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 50%;
  background: #8cc814;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rca-related__icon svg {
  display: block; /* This removes the gap under an inline SVG. */
}

.rca-related__name {
  font-size: 19px;
  font-weight: 400;
  color: var(--rca-color-navy);
  line-height: 1.2;
}

.rca-related__desc {
  display: block;
  margin-bottom: 14px;

  font-weight: 400;
  color: #404040;
  line-height: 1.6;
}

.rca-related__item:hover .rca-related__link {
  text-decoration: underline;
}

/* The hover style applies only to items with a linked page, because only those are links. */
a.rca-related__item .rca-related__name {
  transition: color 0.2s ease;
}

a.rca-related__item .rca-related__icon {
  transition: transform 0.2s ease;
}

a.rca-related__item:hover .rca-related__name,
a.rca-related__item:focus-visible .rca-related__name {
  color: #29abe2;
  text-decoration: none;
}

a.rca-related__item:hover .rca-related__icon,
a.rca-related__item:focus-visible .rca-related__icon {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  a.rca-related__item .rca-related__name,
  a.rca-related__item .rca-related__icon {
    transition: none;
  }
  a.rca-related__item:hover .rca-related__icon,
  a.rca-related__item:focus-visible .rca-related__icon {
    transform: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .rca-related {
    padding: 52px 0;
  }
  .rca-related__grid {
    gap: 0 40px;
  }
}

@media (max-width: 600px) {
  .rca-related {
    padding: 40px 0;
  }
  .rca-related__inner {
    padding: 0 22px;
  }
  .rca-related__grid {
    grid-template-columns: 1fr;
  }
}
/* End of related services */

/* Sub-service FAQs */
/* The accordion itself uses the shared .accordion--solutions styles. */
.rca-faqs {
  padding: 64px 0;
}

.rca-faqs__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}

.rca-faqs__accordion .accordion-content > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .rca-faqs {
    padding: 52px 0;
  }
}

@media (max-width: 600px) {
  .rca-faqs {
    padding: 40px 0;
  }
  .rca-faqs__inner {
    padding: 0 22px;
  }
}
/* End of sub-service FAQs */

/* Icon section */
.rca-stages {
  background: #fff;
  padding: 56px 48px;
}

.rca-stages__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.rca-stages__head {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}

.rca-stages__title {
  margin: 0 0 14px;
  /*font-size: 32px;
  color: var(--rca-color-navy);
  letter-spacing: -0.01em;
  line-height: 1.15;*/
}


/* The grid fits any number of stages, so you can add or remove .rca-stage blocks. */
.rca-stages__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px 22px;
  justify-content: center;
}

.rca-stage {
  text-align: center;
  padding: 0 4px;
}

.rca-stage__icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 50px;
  margin: 0 auto 20px;
  color: #8cc814;
}

.rca-stage__icon svg {
  display: block;
}

.rca-stage__title {
  margin: 0 0 11px;
  color: var(--rca-color-navy);
  line-height: 1.25;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  .rca-stages {
    padding: 36px 22px;
  }
  /*.rca-stages__title {
    font-size: 26px;
  }*/
  .rca-stages__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 18px;
  }
}

/* End of the icon section */

/* Comparison table */

.rca-compare__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.rca-compare__head {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}

.rca-compare__title {
  margin: 0 0 16px;
  /*font-size: 34px;
  color: var(--rca-color-navy);
  letter-spacing: -0.01em;
  line-height: 1.15;*/
}


.rca-compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
}

.rca-panel {
  border-radius: 4px;
  padding: 34px 34px 36px;
}

.rca-panel--without {
  background: #f5f7f9;
  border: 1px solid #e3e8ec;
}
.rca-panel--without .rca-list__item {
  color: #6b7178;
}

.rca-panel--with {
  background: #f6fbec;
  border: 1px solid #d8ebb4;
}
.rca-panel--with .rca-list__item {
  color: #2f343a;
}

.rca-panel__eyebrow {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.rca-panel--without .rca-panel__eyebrow {
  color: #9aa4ad;
}
.rca-panel--with .rca-panel__eyebrow {
  color: #6a9a13;
}

.rca-panel__title {
  margin: 0 0 22px;
  font-size: 21px;
  line-height: 1.25;
}
.rca-panel--without .rca-panel__title {
  color: #5b6168;
}
.rca-panel--with .rca-panel__title {
  color: var(--rca-color-navy);
}

.rca-compare__close {
  max-width: 760px;
  margin: 32px auto 0 auto;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: #4a5158;
}
.rca-compare__close strong {
  color: var(--rca-color-navy);
}

/* Lists and their markers */
.rca-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.rca-list__item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 15.5px;
  line-height: 1.5;
}
.rca-list__item::before {
  content: none !important;
}

.rca-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The check mark for the "With" column */
.rca-mark--check {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #8cc814;
}
.rca-mark--check::after {
  content: '';
  width: 6px;
  height: 10px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}

/* The cross for the "Without" column */
.rca-mark--x {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #e4e8ec;
}
.rca-mark--x::before,
.rca-mark--x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: #97a1a9;
}
.rca-mark--x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.rca-mark--x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Responsive */
@media (max-width: 760px) {
  .rca-compare {
    padding: 56px 22px 52px;
  }
  /*.rca-compare__title {
    font-size: 26px;
  }*/
  .rca-compare__grid {
    grid-template-columns: 1fr;
  }
}
/* End of the comparison table */

.rca-lists {
  column-count: 2;
  column-gap: 32px;
  margin-bottom: 60px;
  margin-left: 30px;
  li {
    break-inside: avoid-column; /* An item does not split across two columns. */
    padding-bottom: 10px;
  }
  &.col-1 {
    column-count: 1;
    margin-bottom: 1rem;
  }
  &.col-2 {
    column-count: 2;
  }
  &.col-3 {
    column-count: 3;
  }
  @media (max-width: 900px) {
    column-count: 1;
  }
}

.service-items ul li {
  padding-bottom: 10px;
}
.custom-built img {
  margin-top: -60px;
}

@media (max-width: 768px) {
  .custom-built p,
  .custom-built h2 {
    text-align: center !important;
  }
  .custom-built img {
    float: none;
    display: block;
    margin: 20px auto;
  }
}
/* Build on Strategy: a two-column layout */

.build-on-strat {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.build-left {
  flex: 0 0 auto; /* The image keeps its own width. */
  max-width: 50%;
}

.build-left img {
  display: block;
  width: 100%;
  height: auto;
}

.build-right {
  flex: 1 1 0; /* The text takes the rest of the width. */
  min-width: 0; /* Without this, long content can overflow the flex row. */
}

/* On smaller screens, the text takes the full width and the image is hidden. */

@media (max-width: 970px) {
  .build-on-strat {
    flex-direction: column;
  }
  .build-right h2 {
    text-align: left;
  }
  .build-left {
    display: none;
  }
}