/***** FONTS *****/
/*---------------*/

div[role="main"].container-fluid .richtext h1 {
  font-size: 46px;
  line-height: 120%;
  font-weight: 900;
  font-family: Guardian;
  color: #00175a;
}

/* Mirror mobile spacing and full-width behavior from vd--steps-wrapper */
@media (max-width: 768px) {
  .vd--hero-corporate > .container > .row > .col-md-12 > div,
  .vd--benefits-image-left > .container > .row > .col-md-12 > div,
  .vd--benefits-content > .container > .row > .col-md-12 > div,
  .vd--benefits-content-text > .container > .row > .col-md-12 > div {
    flex-wrap: wrap;
    justify-content: center;
  }

  .vd--hero-corporate > .container > .row > .col-md-12 > div > .grid,
  .vd--benefits-image-left > .container > .row > .col-md-12 > div > .grid,
  .vd--benefits-content > .container > .row > .col-md-12 > div > .grid,
  .vd--benefits-content-text > .container > .row > .col-md-12 > div > .grid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Global mobile gutters: 16px for all sections except hero */
@media (max-width: 768px) {
  .vd--section:not(.vd--hero-corporate) > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Neutralize framework negative gutters on rows */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Steps wrapper: remove container padding on mobile */
  .vd--steps-wrapper > .container,
  .vd--steps-wrapper .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Grid small width: remove container padding on mobile */
  .vd--grid-small-width > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hide hero background image on mobile */
  .vd--hero-corporate .card-img-bg {
    background-image: none !important;
  }

  /* Mobile hero height */
  .vd--hero-corporate-mobile {
    min-height: 240px !important;
  }
  .vd--hero-corporate-mobile .card-img-bg {
    height: 240px !important;
  }

  /* Hero content left: no top margin on mobile */
  .vd--hero-corporate .vd--hero-content-left {
    margin-top: 0 !important;
  }
}
/* ---------------------------------------------
   Reinforce mobile centering and full-width for hero and benefits
---------------------------------------------- */
@media (max-width: 768px) {
  /* Hero: center text and fill container width */
  .vd--hero-corporate .vd--hero-content-left > .container,
  .vd--hero-corporate .vd--content-text > .container,
  .vd--hero-corporate .vd--content-text .richtext,
  .vd--hero-corporate .vd--mobile-middle-align,
  .vd--hero-corporate .vd--mobile-middle-align .richtext {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .vd--hero-corporate .vd--button-dark .btn,
  .vd--hero-corporate .vd--button-dark .btn-sm {
    display: inline-block;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Benefits: ensure the grid with content and the text block span full width */
  .vd--benefits-image-left .grid:has(.vd--benefits-content),
  .vd--benefits-image-left .grid:has(.vd--benefits-content-text),
  .vd--benefits-content,
  .vd--benefits-content-text {
    width: 100% !important;
    max-width: 100% !important;
  }
  .vd--benefits-content > .container,
  .vd--benefits-content-text > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0;
    padding-right: 0;
  }
  .vd--benefits-content .richtext,
  .vd--benefits-content-text .richtext {
    text-align: center !important;
  }

  /* Zero out padding on columns with margin-0-tb on mobile */
  .col-md-12.margin-0-tb {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Center benefits-content-text copy on mobile */
  .vd--benefits-content-text > .container > .row > .col-md-12 > div {
    align-items: center;
  }
  .vd--benefits-content-text .richtext,
  .vd--benefits-content-text .richtext p,
  .vd--benefits-content-text .richtext h1,
  .vd--benefits-content-text .richtext h2,
  .vd--benefits-content-text .richtext h3,
  .vd--benefits-content-text .richtext h4 {
    text-align: center !important;
  }
}

div[role="main"].container-fluid .richtext h2 {
  font-size: 40px;
  line-height: 120%;
  font-weight: 900;
  font-family: Guardian;
  color: #00175a;
}

div[role="main"].container-fluid .richtext h3 {
  font-size: 34px;
  line-height: 120%;
  font-weight: 500;
  font-family: BentonSans;
}

div[role="main"].container-fluid .richtext h3.small {
  font-size: 24px;
  line-height: 120%;
  font-weight: 500;
  font-family: BentonSans;
}

div[role="main"].container-fluid .richtext h4 {
  font-size: 24px;
  line-height: 120%;
  font-weight: 300;
  font-family: BentonSans;
}

/* Body Text */
div[role="main"].container-fluid .richtext p {
  font-size: 16px;
  line-height: 150%;
}

/* Mobile */
@media (max-width: 768px) {
  div[role="main"].container-fluid .richtext h1 {
    font-size: 40px;
    font-weight: 900;
  }

  div[role="main"].container-fluid .richtext h2 {
    font-size: 36px;
    font-weight: 900;
  }

  div[role="main"].container-fluid .richtext h3 {
    font-size: 28px;
    font-weight: 900;
  }

  div[role="main"].container-fluid .richtext h3.small {
    font-size: 24px;
  }

  div[role="main"].container-fluid .richtext h4 {
    font-size: 20px;
  }

  .heading-6-g {
    font-size: 36px;
  }
}

/***** SPACING *****/
/*-----------------*/

/* Main Container */
div[role="main"].container-fluid.pad-0-lr .tab-content.pad-responsive-lr {
  padding: 0;
}

/***** HERO *****/
/*-----------------*/

.vd--hero-corporate .container {
  width: 100%;
}
.vd--hero-corporate .vd--hero-content-left {
  max-width: 540px;
  margin-top: 80px;
  margin-bottom: 80px;
}
.vd--hero-corporate .vd--hero-content-left .container {
  padding: 32px;
}

.vd--hero-corporate .vd--hero-content-left .dls-white-bg {
  border-radius: 8px;
}
.vd--hero-corporate .vd--content-text .container {
  padding: 0 0 24px 0;
}
/* .vd--hero-corporate .vd--hero-content-left .parbase .btncomp {
  margin-bottom: 0 !important;
  margin-bottom: 0 !important;
  background: #00175a;
  padding: 19px 25px;
  border-radius: 8px;
} */

.vd--hero-corporate .vd--hero-content-left .parbase h1 {
  padding-bottom: 12px;
}
.vd--hero-corporate .card-img-bg.hidden-md-up {
  background-size: cover;
  background-attachment: scroll;
  background-position: right;
}
@media (max-width: 768px) {
  .vd--hero-corporate .vd--hero-content-left {
    margin-top: 170px;
    margin-bottom: 0 !important;
  }
  .vd--hero-corporate .card-img-bg.hidden-md-up {
    height: 180px;
    text-align: center;
    background-repeat: no-repeat;
  }

  .vd--hero-corporate .container {
    margin: 0 !important;
    padding: 0;
  }
  .vd--hero-corporate .vd--hero-content-left .dls-white-bg {
    border-radius: 0;
  }
  .vd--mobile-middle-align {
    text-align: center;
  }
  .vd--button-dark .btn-sm {
    margin: auto;
  }
  .vd--mobile-middle-align .richtext h1 {
    font-size: 40px !important;
  }
  .vd--button-dark .btn-sm {
    margin: auto;
  }
}

/***** SECTION BENEFITS *****/

.vd--round-corners .card-img-bg.dls-white-bg {
  border-radius: 12px;
}

.vd--benefits-image-left > .container > .row > .col-md-12 > div {
  display: flex;
  gap: 40px;
  align-items: center;
}

.vd--benefits-image-left .vd--round-corners {
  height: auto !important;
}

.vd--benefits-content-text > .container {
  padding: 0 !important;
}
.vd--benefits-content-text .heading-4 {
  font-size: 32px;
  font-weight: 300;
  color: #001659;
}

.vd--benefits-content-text p {
  font-size: 14px;
  margin: 24px 0;
}
.vd--benefits-wrapper > .container > .row > .col-md-12 > div {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}
.vd--benefits-wrapper > .container > .row > .col-md-12 > div .grid {
  flex: 1 1 calc(50% - 16px);
  background-color: #fff;
  border-radius: 12px;
}
.vd--benefits-wrapper .vd--benefit {
  padding: 26px;
}
.vd--benefits-wrapper .vd--benefit > .container {
  padding: 0 !important;
}
.vd--benefits-wrapper
  .vd--section
  .vd--round-corners
  > .card-img-bg.dls-white-bg {
  height: 255px !important;
}
.vd--benefit.vd--round-corners .vd--card-icon-headline {
  margin-bottom: 10px;
}
.vd--benefit.vd--round-corners ul {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 768px) {
  .vd--benefits-wrapper > .container > .row > .col-md-12 > div {
    flex-direction: column;
  }
}
/*-----------------*/

.aem-GridColumn--default--12:nth-child(5)
  .vd--section
  > .container
  .vd--step.vd--round-corners
  .richtext.parbase
  a {
  position: absolute;
}

.aem-GridColumn--default--12:nth-child(5)
  .vd--section
  > .container
  > .row.pad-3-t.pad-3-b
  > .col-md-12.margin-0-tb
  > div
  .richtext:first-of-type
  h2 {
  margin-bottom: 70px;
}

.vd--steps-wrapper > .container > .row > .col-md-12 > div {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.vd--steps-wrapper > .container > .row > .col-md-12 > div > .grid {
  /* let cards be fluid; base at ~300px and wrap as needed */
  max-width: none !important;
  width: auto;
}

.vd--step .vd--steps-number {
  width: 32px;
}
.vd--steps-wrapper .vd--step > .container > .row > .col-md-12 > div {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.vd--step > .container {
  padding: 0;
}
.vd--step {
  padding: 20px;
}
.vd--step > .container .richtext div p:nth-of-type(3) {
  font-weight: bold;
}
.vd--step > .container .richtext div p:nth-of-type(3) a {
  color: #00175a;
}
.aem-GridColumn--default--12:nth-child(6)
  .vd--section
  > .container
  .richtext
  div
  h2:nth-of-type(2) {
  margin-bottom: 70px;
}
.vd--card-icon-headline > .container > .row > .col-md-12 > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vd--card-icon-headline > .container {
  padding: 0 !important;
}
[data-dls-icon][data-dls-icon-size="lg"] svg {
  height: 30px;
  width: 24px;
}
.vd--steps-wrapper
  > .container
  > .row
  > .col-md-12
  > div
  > .grid:nth-of-type(1) {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  background: #fff;
  border-radius: 12px;
}
.vd--steps-wrapper
  > .container
  > .row
  > .col-md-12
  > div
  > .grid:nth-of-type(2) {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  background: #fff;
  border-radius: 12px;
}
.vd--steps-wrapper
  > .container
  > .row
  > .col-md-12
  > div
  > .grid:nth-of-type(3) {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  background: #fff;
  border-radius: 12px;
}
.vd--steps-wrapper
  > .container
  > .row
  > .col-md-12
  > div
  > .grid:nth-of-type(4) {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  background: #fff;
  border-radius: 12px;
}
/* .vd--steps-wrapper .vd--round-corners {
  height: 288px !important;
} */
.vd--section {
  padding-top: 60px;
  padding-bottom: 60px;
}
.vd--grid-max-width {
  max-width: 562px;
  margin: auto;
}

.vd--grid-small-width > .container > .row > .col-md-12 > div {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vd--grid-max-width > .container {
  padding: 0 !important;
}
.vd--grid-max-width p {
  margin: 25px 0 35px;
}
@media (max-width: 768px) {
  .vd--steps-wrapper > .container > .row > .col-md-12 > div > .grid {
    max-width: 100%;
  }
  .vd--benefits-wrapper .vd--round-corners {
    height: auto !important;
  }

  .vd--benefits-image-left > .container > .row > .col-md-12 > div {
    flex-direction: column;
  }

  .vd--steps-wrapper > .container > .row > .col-md-12 > div {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 320px) {
  .vd--benefits-wrapper > .container > .row > .col-md-12 > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .vd--steps-wrapper > .container > .row > .col-md-12 > div {
    display: grid;
    grid-template-columns: 1fr;
  }
  .vd--steps-wrapper
    > .container
    > .row
    > .col-md-12
    > div
    > .grid
    .dls-white-bg {
    height: auto;
  }
  .vd--steps-wrapper
    > .container
    > .row
    > .col-md-12
    > div
    > .grid
    .dls-white-bg {
    height: auto;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1240px !important;
  }
  .vd--steps-wrapper .container {
    padding: 0;
  }
  .vd--benefits-wrapper .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media screen and (max-width: 1024px) {
  .container {
    max-width: 100% !important;
    margin: auto;
  }
  .vd--benefits-wrapper .container {
    padding: 0;
  }
  .vd--steps-wrapper > .container > .row > .col-md-12 > div {
    flex-wrap: wrap;
  }
}

/* Steps: enable wrapping and fluid widths across large breakpoints */
@media (min-width: 769px) {
  .vd--steps-wrapper > .container > .row > .col-md-12 > div {
    flex-wrap: wrap;
  }

  /* override overly strict per-card widths */
  .vd--steps-wrapper > .container > .row > .col-md-12 > div > .grid {
    flex: 1 1 300px !important; /* base width, allows 3-4 per row as space permits */
    max-width: 100% !important;
  }

  /* neutralize nth-of-type fixed flex settings on larger screens */
  .vd--steps-wrapper > .container > .row > .col-md-12 > div > .grid:nth-of-type(n) {
    flex-basis: auto !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
  }
}

/* Optional: prefer 4-up near desktop max widths, then 3-up below */
@media (min-width: 1240px) {
  /* Desktop: keep cards on one row */
  .vd--steps-wrapper > .container > .row > .col-md-12 > div {
    flex-wrap: nowrap;
  }
  .vd--steps-wrapper > .container > .row > .col-md-12 > div > .grid {
    /* Exactly 4 equal columns accounting for gaps (gap = 16px) */
    flex: 0 0 calc((100% - 48px) / 4) !important; /* 3 gaps * 16px = 48px */
    max-width: calc((100% - 48px) / 4) !important;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Ensure no residual nth-of-type sizing causes mismatch */
  .vd--steps-wrapper > .container > .row > .col-md-12 > div > .grid:nth-of-type(n) {
    flex: 0 0 calc((100% - 48px) / 4) !important;
    max-width: calc((100% - 48px) / 4) !important;
  }
}

/* ---------------------------------------------
   Mobile (≤768px): Center hero and benefits content and make full width
---------------------------------------------- */
@media (max-width: 768px) {
  /* Hero */
  .vd--hero-corporate .vd--mobile-middle-align,
  .vd--hero-corporate .vd--content-text .richtext {
    text-align: center !important;
  }
  .vd--hero-corporate .vd--hero-content-left > .container,
  .vd--hero-corporate .vd--content-text > .container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .vd--hero-corporate .vd--button-dark .btn,
  .vd--hero-corporate .vd--button-dark .btn-sm {
    display: inline-block;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Benefits content */
  .vd--benefits-content > .container,
  .vd--benefits-content-text > .container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Ensure all grids in benefits content text span full width */
  .vd--benefits-content-text > .container > .row > .col-md-12 > div > .grid {
    width: 100%;
    max-width: 100%;
  }
  /* Ensure the grid directly above benefits content also spans full width */
  .vd--benefits-image-left > .container > .row > .col-md-12 > div > .grid {
    width: 100%;
    max-width: 100%;
  }
  .vd--benefits-content > .container > .row > .col-md-12 > div,
  .vd--benefits-content-text > .container > .row > .col-md-12 > div {
    align-items: center;
  }
  .vd--benefits-content .richtext,
  .vd--benefits-content-text .richtext {
    text-align: center !important;
  }
  .vd--benefits-content a,
  .vd--benefits-content-text a {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1024px) and (max-width: 1239px) {
  .vd--steps-wrapper > .container > .row > .col-md-12 > div > .grid {
    flex: 1 1 calc(33.333% - 16px) !important;
  }
}

/***** HELP BUBBLE *****/
/*---------------------*/

.vd--questions-wrapper {
  position: fixed !important;
  z-index: 29;
  bottom: 2.5rem;
  width: 100%;
  padding: 0 2.5rem !important;
  pointer-events: none;
}

.vd--questions-wrapper > .container {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
}

.vd--questions-wrapper > .container > .row > .col-md-12.margin-0-tb > div {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.vd--questions-wrapper > .container > .row > .col-md-12.margin-0-tb > div > .grid {
  position: absolute;
  bottom: 48px;
  right: 1rem;
  z-index: -1
}

.vd--questions-button {
  width: 112px;
  pointer-events: auto;
  cursor: pointer;
}

.vd--questions-button-phone {
  visibility: hidden;
  width: 0;
}

.vd--questions-button:hover {
  scale: 1.45;
  transition: scale 0.25s ease-in-out;
}

/* Questions overlay and popup visibility */
.vd--questions-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 28; /* below wrapper (29), above page content */
}

.vd--questions-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.vd--questions-button {
  transition: scale 0.25s ease-in-out;
}

.vd--questions-button.is-active {
  scale: 1.45;
}

/* swap button visuals when questions are open */
.vd--questions-wrapper.questions-open .vd--questions-button {
  visibility: hidden;
  width: 0;
}

.vd--questions-wrapper.questions-open .vd--questions-button-phone {
  visibility: visible;
  width: 112px;
  scale: 1.45;
}

/* fade-in grid content when active */
.vd--questions-wrapper > .container > .row > .col-md-12.margin-0-tb > div > .grid {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}

.vd--questions-wrapper > .container > .row > .col-md-12.margin-0-tb > div > .grid.is-open {
  opacity: 1;
  pointer-events: auto;
  z-index: 31;
}

.vd--questions-popup .container {
  width: 310px;
  padding: 18px 16px;
  background-color: #fff;
  border-radius: 8px;
}

.vd--questions-popup .container > .row > .col-md-12.margin-0-tb > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vd--questions-popup .container > .row > .col-md-12.margin-0-tb > div >  .richtext.parbase:nth-child(2) p {
  padding-right: 6px;
}

.vd--questions-popup p {
  line-height: 1.25 !important;
}


@media (max-width: 768px) {
  .vd--hero-corporate .vd--hero-content-left {
    margin-top: 56px;
    margin-bottom: 0 !important;
  }

  .vd--hero-corporate .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .vd--hero-corporate .vd--hero-content-left .container {
    padding: 16px;
  }

  .vd--hero-corporate .vd--hero-content-left .dls-white-bg {
    border-radius: 8px;
  }

  .vd--hero-corporate .card-img-bg.hidden-md-up {
    min-height: clamp(200px, 40vh, 380px);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
  }

  .vd--mobile-middle-align .richtext h1 {
    font-size: 36px !important;
    line-height: 1.15;
  }
}

@media (min-width: 769px) {
  .vd--hero-corporate .vd--hero-content-left {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}

/* ---------------------------------------------
   Fixes: vd--section vd--benefits-image-left
   - Make image column ~40% width on desktop/tablet
   - Prevent squeezed images by removing fixed heights
   - Ensure content column uses remaining space (~60%)
   - Preserve mobile stacking behavior
---------------------------------------------- */
.vd--benefits-image-left > .container > .row > .col-md-12 > div {
  align-items: center;
}

/* Columns: image 40%, content 60% */
@media (min-width: 769px) {
  .vd--benefits-image-left .image.parbase {
    flex: 0 1 45%;
    max-width: 45%;
  }
  .vd--benefits-image-left .grid:has(.vd--benefits-content) {
    flex: 1 1 55%;
    max-width: 55%;
  }
}


/* Mobile: stack, full-width columns */
@media (max-width: 768px) {
  .vd--benefits-image-left > .container > 
  .row > .col-md-12 > div {
    flex-direction: column !important;
  }
  .vd--benefits-image-left .image.parbase,
  .vd--benefits-image-left .grid:has(.vd--benefits-content) {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Prevent horizontal overflow by letting content shrink and balancing gap */
@media (min-width: 769px) {
  /* Slightly smaller gap to keep total width within container */
  .vd--benefits-image-left > .container > .row > .col-md-12 > div {
    gap: 24px;
    align-items: stretch;
  }

  /* Fix image at 40% and allow content to flex remaining space */
  .vd--benefits-image-left .image.parbase {
    flex: 0 0 45%;
    max-width: 45%;
  }

  .vd--benefits-image-left .grid:has(.vd--benefits-content) {
    flex: 1 1 0;
    max-width: none;
    min-width: 0; /* allow flex child to shrink without overflowing */
    display: flex;            /* center content vertically */
    align-items: center;      /* vertical centering */
  }

  /* Ensure inner container also centers its children and fills height */
  .vd--benefits-image-left .grid:has(.vd--benefits-content) > .container {
    display: flex;
    align-items: center;
    height: 100%;
  }

  /* Remove inner padding that can cause overflow */
  .vd--benefits-image-left .grid:has(.vd--benefits-content) > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Ensure image fills container height */
.vd--benefits-image-left .vd--card-benefits-image,
.vd--benefits-image-left .vd--round-corners {
  height: 100% !important;
  border-radius: 12px; /* keep rounded corners */
  overflow: hidden; /* ensure child image respects radius */
}
.vd--benefits-image-left .vd--card-benefits-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}