/* ===========================================
   Ratcliff IT - CTA Highlight Styling
   Uses .cta-highlight everywhere
   Optional: add .cta-highlight-hero for the hero button
   =========================================== */

/* Base style for highlighted CTAs (body sections) */
.cta-highlight,
.cta-highlight a,
.cta-highlight.primary-btn,
.cta-highlight.secondary-btn,
.cta-highlight .hs-button,
.cta-highlight .hs-button a {
  border: 2px solid #8ec73f !important;                  /* brand green outline */
  background: rgba(142,199,63,0.08) !important;           /* very soft green fill */
  color: #175e85 !important;                              /* dark blue text */
  padding: 10px 22px !important;
  border-radius: 8px !important;
  display: inline-block;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

/* Hover state for body CTAs */
.cta-highlight:hover,
.cta-highlight a:hover,
.cta-highlight.primary-btn:hover,
.cta-highlight.secondary-btn:hover,
.cta-highlight .hs-button:hover,
.cta-highlight .hs-button a:hover {
  background: #8ec73f !important;                         /* solid green on hover */
  color: #ffffff !important;
  border-color: #8ec73f !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  text-decoration: none !important;
}

/* ===========================================
   Hero CTA Styling
   Add .cta-highlight-hero as an extra class
   to the hero button
   =========================================== */

/* Default hero state - white outline on dark background */
.cta-highlight-hero.cta-highlight,
.cta-highlight-hero.cta-highlight.secondary-btn {
  border: 2px solid #ffffff !important;
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* Hero hover */
.cta-highlight-hero.cta-highlight:hover,
.cta-highlight-hero.cta-highlight.secondary-btn:hover {
  background: #ffffff !important;
  color: #8ec73f !important;
  border-color: #ffffff !important;
}

/* Utility */
.cta-highlight {
  display: inline-block;
}
<style>
  #homepage-two-col-content { padding-top: 30px !important; }
  #homepage-two-col-content > .row:not(.section-heading):not(.section-cta) {
    align-items: center;
  }
</style>
/* ============================================================
     ▼▼▼ BEGIN PAGE OVERRIDE — PASTE THIS INTO HUBSPOT ▼▼▼
     Overrides the graphics/layout of the "4 Column - Rich Text"
     modules (section class .four-rt).
     Handles layout, spacing and the card's vertical padding only.
     Sets NO colours and NO button styles — those stay as they are.
     ============================================================ */

  .four-rt { padding: clamp(48px,6vw,80px) 0; background: transparent; }

  /* Columns row: centred, even, equal width */
  .four-rt .row:has(> .col-3){
    display:flex; flex-wrap:wrap; align-items:stretch;
    gap:28px; max-width:1320px; margin:0 auto; background:transparent;
  }

  /* Columns are transparent layout cells — no box painted here */
  .four-rt .row > .col-3{
    flex:1 1 0 !important; max-width:none !important; width:auto !important;
    min-width:240px; margin:0; padding:0;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    display:flex; flex-direction:column;
  }

  /* Trim the module card's TOP + BOTTOM padding (left/right untouched) */
  .four-rt .white-card{ padding-top:32px !important; padding-bottom:32px !important; }
  .four-rt .white-card .card-content{ padding-top:0 !important; padding-bottom:0 !important; }

  /* Card headings (not the intro column) — controlled, smaller size. No colour. */
  .four-rt .row > .col-3:not(:first-child) :is(h1,h2,h3){
    font-size:1.4rem; line-height:1.2; margin:0 0 .5rem;
  }

  /* Body copy spacing (no colour set) */
  .four-rt .row > .col-3 :is(h1,h2,h3) + p{ margin-top:0; }
  .four-rt .row > .col-3 p{ margin:0 0 1rem; text-align:left; }
  .four-rt .row > .col-3 p:empty{ display:none; }

  /* Stack on mobile */
  @media (max-width:860px){
    .four-rt .row:has(> .col-3){ flex-direction:column; }
    .four-rt .row > .col-3{ min-width:0; }
  }
/* Line up card headings with the body text */
.image-grey-card > h3,
.image-grey-card > p {
  margin-left: 0 !important;
  padding-left: 12 !important;
}
  /* ============================================================
     ▲▲▲ END PAGE OVERRIDE ▲▲▲
     ============================================================ */