/* ===========================================
   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). 4 across desktop, 2 tablet,
   1 phone. Keeps the theme's row centring. Sets NO colours/buttons.
   ============================================================ */
  .four-rt { background: transparent; }

  .four-rt .row{ display:flex; flex-wrap:wrap; }

  .four-rt .row > .col-3{
    float:none !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    margin:0; padding:0 14px !important; min-width:0; text-align:left;
    display:flex; flex-direction:column;
  }

  /* ---- 4 across (desktop, 1200px+) ---- */
  @media (min-width:1200px){
    .four-rt .row > .col-3{ flex:0 0 25% !important; max-width:25% !important; width:25% !important; }
    .four-rt .row > .col-3:not(:first-child) :is(h2,h3){ font-size:1.4rem; line-height:1.2; }
  }

  /* ---- 2 across (768–1199px) ---- */
  @media (min-width:768px) and (max-width:1199px){
    .four-rt .row > .col-3{ flex:0 0 50% !important; max-width:50% !important; width:50% !important; }
  }

  /* the theme force-stacks #specialist-support at 768–1024px — undo it */
  @media (min-width:768px) and (max-width:1024px){
    #specialist-support .row{ flex-direction:row !important; }
    #specialist-support .row > .col-3{ width:50% !important; }
  }

  /* ---- 1 across (phone) ---- */
  @media (max-width:767px){
    .four-rt .row > .col-3{ flex:0 0 100% !important; max-width:100% !important; width:100% !important; }
  }

  /* Card vertical padding — one value on the outer card, inner zeroed */
  .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; }

  /* Uniform spacing — override the editor's per-block inline margins.
     It sets inline margins on the h3, p AND wrapper divs, varying per card. */
  .four-rt .white-card .card-content > div{ margin:0 !important; }
  .four-rt .row > .col-3:not(:first-child) :is(h2,h3){ margin:0 0 .5rem !important; }
  .four-rt .row > .col-3:not(:first-child) p{ margin:0 0 1rem !important; }
  .four-rt .row > .col-3 p{ text-align:left; }

  /* Hide editor-injected blank spacers (empty / <br>-only paragraphs AND divs) */
  .four-rt .row > .col-3 p:empty,
  .four-rt .row > .col-3 div:empty,
  .four-rt .row > .col-3 p:has(> br:only-child),
  .four-rt .row > .col-3 div:has(> br:only-child){ display:none; }

  /* Line up card headings with the body text (your edit) */
  .image-grey-card > h3,
  .image-grey-card > p {
    margin-left: 0 !important;
    padding-left: 12px !important;
  }
  /* ============================================================
     ▲▲▲ END PAGE OVERRIDE ▲▲▲
     ============================================================ */