/* =========================
   Services HERO Component
   ========================= */
.services-hero {
  margin-top: 50px;
}

.services-hero-inner {
  max-width: 70rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--spaceSmmd);
  padding: clamp(1rem, 2.3vw, 3rem) 1rem;
}

.services-hero {
  position: relative;
  background:
    radial-gradient(
      900px 400px at 50% 0%,
      rgba(201, 185, 155, 0.45),
      rgba(201, 185, 155, 0) 60%
    ),
    radial-gradient(
      700px 500px at 100% 100%,
      rgba(201, 185, 155, 0.35),
      rgba(156, 175, 136, 0) 60%
    ),
    radial-gradient(
      700px 500px at 0% 100%,
      rgba(201, 185, 155, 0.45),
      rgba(156, 175, 136, 0) 60%
    ),
    var(--bgColour1);
}


.services-hero-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spaceSm);
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
}

.services-hero-heading {
  max-width: 52rem;
}

.services-hero .heading-underline {
  margin: 0 auto;
}

.services-hero-text {
  max-width: 45rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spaceSm);
}


/* SERVICES LIST SECTION */
h3 {
  font-size: clamp(1.8rem, 2.5vw, 2rem);
}

.services-list-head-con {
  margin: 0 auto;
  max-width: 850px;
  padding-bottom: var(--spaceLg);
  gap: var(--spaceSm);
  display: flex;
  flex-direction: column;
}

.services-list {
  background-color: var(--bgColour1);
}

.service-panels {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  gap: 100px;
  max-width: 1150px;
}

.service-panel {
  background: var(--bgColour2);
  border-radius: 28px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  gap: var(--spaceSm);
}

.services-cta-con {
  padding-top: var(--spaceSm);
}

.service-panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--spaceSm);
  margin-bottom: var(--spaceSmmd);
}

.service-panel-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #c9b99b1a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.service-panel-icon .icon {
  fill: var(--brandColour2);
}

.service-panel-titles {
  display: flex;
  flex-direction: column;
  gap: var(--spaceXs);
}

.service-panel-subtitle {
  margin: 0;
  font-size: 1.1rem;
}

.service-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--spaceSm);
  max-width: 62rem;
}

.service-panel-label {
  font-weight: 300;
  letter-spacing: 1px;
  margin-top: var(--spaceSm);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
}

.service-panel-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spaceXs);
}

.service-panel-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.service-panel-points .icon {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

.service-panel-ideal {
  margin: 0;
}

@media (max-width: 700px) {
  .services-hero-title-row {
    gap: var(--spaceXs);
  }
}

@media (max-width: 550px) {
  .service-panel {
    flex-direction: column;
  }
}