{% require_css %}
<style>
/* --------------------------- */
/* Grid & Layout Adjustments   */
/* --------------------------- */

.v-grid--services {
  gap: 1.5rem; /* balanced vertical spacing between rows */
  grid-template-columns: 1fr;
}

. .grid__item {
  align-items: start;
  display: grid;
  gap: 1.25rem; /* tighter spacing between image and text */
  grid-template-columns: 1fr;
  padding-block: 0.5rem 1rem; /* smaller vertical padding */
}

@media only screen and (min-width: 600px) {
  . .grid__item {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }
}

/* Remove bottom spacing below module */
.,
.module--services {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove top/bottom gaps between HubSpot sections */
:where(.dnd-section, .hs-section, section, .section):has(.) {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
:where(.dnd-section, .hs-section, section, .section):has(.)
  + :where(.dnd-section, .hs-section, section, .section) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Safety for adjacent blocks */
. + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Typography and visuals */
. .grid__item .grid__text {
  max-inline-size: 55ch;
}
. .v-grid h2 {
  margin: 1rem 0 0.5rem;
  text-align: start;
}
. h2::before {
  content: '';
}
. p {
  margin-block: 0 1rem;
  line-height: 1.7;
}

/* --------------------------- */
/* Image styling & SVGs        */
/* --------------------------- */
. .grid__item .grid__image-wrapper {
  z-index: 1;
}
. .grid__item .grid__image-wrapper img.aspect-ratio- {
  aspect-ratio: 3/4;
}
@media only screen and (min-width: 600px) {
  . .grid__item:nth-child(2n) .grid__image-wrapper {
    display: grid;
    justify-self: end;
    order: 2;
    width: 100%;
  }
}
. .grid__item:nth-child(2n) .grid__text {
  display: grid;
  justify-self: end;
}
. svg {
  inline-size: clamp(1rem, 6vw, 4rem);
}

/* --------------------------- */
/* ✅ FINAL Rich Text List Fix */
/* --------------------------- */

/* Force sane defaults on ul/ol */
. .grid__text ul,
. .grid__text ol {
  display: block !important;
  list-style-position: outside !important;
  list-style-type: revert !important;
  padding-left: 1.5rem !important;
  margin: 0 0 1rem 0 !important;
  line-height: 1.7 !important;
}

/* Individual list items */
. .grid__text li {
  display: list-item !important;
  position: static !important;
  margin: 0.6rem 0 !important;
  line-height: 1.75 !important; /* fix cramped bullets */
}

/* Handle HubSpot’s <li><p> wrapper */
. .grid__text li > p {
  display: inline !important;
  margin: 0 !important;
  line-height: inherit !important;
}

/* Nested lists */
. .grid__text ul ul,
. .grid__text ol ol {
  margin: 0.25rem 0 0.75rem 1.25rem !important;
  padding-left: 1.25rem !important;
  line-height: 1.65 !important;
}

/* Prevent ghost bullets from theme resets */
. .grid__text li::before {
  content: none !important;
}

/* Clean bullet marker styling */
. .grid__text li::marker {
  font-size: 1em;
  color: var(--accent-color);
}

/* Remove trailing gaps inside text */
. .grid__text > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* --------------------------- */
/* Misc small tweaks           */
/* --------------------------- */
. .button {
  justify-self: start;
}
.module--services span {
  color: var(--accent-color);
  display: inline-block;
}
</style>
{% end_require_css %}