.page-id-129 .entry-hero.page-hero-section.entry-hero-layout-standard {
    display: none;
}
.vs-explore-services {
    padding: 10px !important;
}
.entry.single-entry {
    box-shadow: 0px 15px 15px -10px rgba(0, 0, 0, 0.05);
    background: transparent;
	padding: 0;
}
.vs-five-discipline-text span {
    color: #c79a73;
}
.vs-home-banner-section p {
    margin-bottom: 0;
}
.content-area {
    margin-top: 0;
    margin-bottom: 5rem;
}
.entry-content-wrap {
    padding: 0;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #B8B8B8;
  text-decoration: none;
  width: fit-content;
}

.contact-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.contact-item .phone-number {
  color: #FFFFFF;
  transition: color 0.2s ease;
}

.contact-item:hover .phone-number {
  color: #D4A853;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Equal-height cards — .vs-guidance-cards
 *
 * Add the class "vs-guidance-cards" to a Kadence Row Layout block
 * (Advanced > Additional CSS class) to make every column in that row the
 * same height on every screen size.
 *
 * Structure these rules target:
 *   .kb-row-layout-wrap.vs-guidance-cards   <- the row
 *     > .kt-row-column-wrap                 <- CSS grid, holds the columns
 *       > .wp-block-kadence-column          <- flex, one per card
 *         > .kt-inside-inner-col            <- carries the background + padding
 * ------------------------------------------------------------------------ */

/* 1. Let the grid stretch its items. Kadence's "kt-row-valign-top" aligns
      columns to the start, which is what leaves the cards ragged. */
.vs-guidance-cards.kb-row-layout-wrap > .kt-row-column-wrap,
.vs-guidance-cards.kb-row-layout-wrap > .kt-row-column-wrap.kt-row-valign-top,
.vs-guidance-cards.kb-row-layout-wrap > .kt-row-column-wrap.kt-row-valign-middle,
.vs-guidance-cards.kb-row-layout-wrap > .kt-row-column-wrap.kt-row-valign-bottom {
  align-items: stretch;
}

/* 2. Each column fills the full height of its row. align-self beats any
      per-column vertical alignment set in the block sidebar.

      No "height: 100%" here, deliberately. align-self: stretch only applies
      when the item's cross size is auto, so setting a height would switch the
      stretch off and leave the cards ragged again. */
.vs-guidance-cards.kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/* 3. The inner wrapper carries the card background, border and padding, so it
      is the element that actually has to be full height. flex-grow does that
      job, again without a height that would block stretching.

      No "width: 100%" either. The column above is a flex container, so this
      already stretches to full width; adding a width would overflow the card
      by its own padding and border wherever box-sizing is not border-box. */
.vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column > .kt-inside-inner-col {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  box-sizing: border-box;
}

/* 4. Keep the card content at its natural height now that the inner column is
      a flex container, so nothing stretches to fill the extra space. */
.vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col > * {
  flex: 0 0 auto;
}

/* 5. Push a trailing button to the bottom of every card so the CTAs line up
      even when the text above them differs in length.
      Delete this block if these cards have no buttons. */
.vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col > .wp-block-kadence-advancedbtn:last-child,
.vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col > .wp-block-buttons:last-child,
.vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col > .wp-block-button:last-child {
  margin-top: auto;
}

/* 6. Centring an incomplete row.
      CSS Grid cannot centre a row that is not full, so the column wrap is
      switched to flex-wrap. A full row of three still fills the width exactly
      and looks unchanged; a row left holding one or two cards is centred.

      Three per row is fixed here rather than read from Kadence's
      "kt-has-N-columns" class, because that class reports however many columns
      the block holds. A five-column row is "kt-has-5-columns", so matching on
      it would miss exactly the case this is for: five cards laid out three on
      the first row and two centred underneath.

      --vs-card-gap must match the Row Gap set on the block, or the cards wrap
      a card early and leave an uneven edge. */
.vs-guidance-cards.kb-row-layout-wrap {
  --vs-card-gap: 30px;
  --vs-card-basis: calc((100% - (2 * var(--vs-card-gap))) / 3);
}

.vs-guidance-cards.kb-row-layout-wrap > .kt-row-column-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* One rule for every card, whatever the block's column count.
   min-width: 0 stops a long unbroken word forcing the card wider than its
   share and pushing the row out of alignment. */
.vs-guidance-cards.kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column {
  flex: 0 1 var(--vs-card-basis);
  min-width: 0;
  max-width: 100%;
}

/* 7. Responsive. The wrap is flex now, so Kadence's own tablet and mobile
      column settings no longer drive this row — these breakpoints do.
      Only the basis changes; the centring carries over automatically, so a
      leftover card is centred at every width. */
@media (max-width: 1024px) {
  .vs-guidance-cards.kb-row-layout-wrap {
    --vs-card-basis: calc((100% - var(--vs-card-gap)) / 2);
  }
}

@media (max-width: 767px) {
  .vs-guidance-cards.kb-row-layout-wrap {
    --vs-card-basis: 100%;
  }
}

/* 8. Hover. The lift lives on the inner wrapper because that is the element
      carrying the card background and border.
      :focus-within mirrors it so keyboard users get the same feedback. */
.vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column:hover > .kt-inside-inner-col,
.vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column:focus-within > .kt-inside-inner-col {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -12px rgba(28, 20, 10, 0.22);
  border-color: #c79a73;
}

/* Icon gets a small lift of its own. */
.vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col .kb-svg-icon-wrap,
.vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col figure,
.vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col img {
  transition: transform 0.3s ease;
}

.vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column:hover .kb-svg-icon-wrap,
.vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column:hover figure,
.vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column:hover img {
  transform: scale(1.06);
}

/* Respect a reduced-motion preference: keep the colour and shadow cues,
   drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col,
  .vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col .kb-svg-icon-wrap,
  .vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col figure,
  .vs-guidance-cards.kb-row-layout-wrap .kt-inside-inner-col img {
    transition: none;
  }

  .vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column:hover > .kt-inside-inner-col,
  .vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column:focus-within > .kt-inside-inner-col,
  .vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column:hover .kb-svg-icon-wrap,
  .vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column:hover figure,
  .vs-guidance-cards.kb-row-layout-wrap .wp-block-kadence-column:hover img {
    transform: none;
  }
}