.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.services-page {
  background:
    radial-gradient(circle at 8% 42%, rgba(217, 189, 112, 0.12), transparent 22rem),
    var(--color-cream-100);
}

.services-hero {
  position: relative;
  min-height: 40rem;
  overflow: hidden;
  background: var(--color-forest-950);
  color: var(--color-white);
}

.services-hero__image,
.services-hero__shade {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.services-hero__image {
  object-fit: cover;
  object-position: 65% center;
}

.services-hero__shade {
  background:
    linear-gradient(90deg, rgba(4, 37, 24, 0.98) 0%, rgba(4, 37, 24, 0.88) 35%, rgba(4, 37, 24, 0.22) 72%, rgba(4, 37, 24, 0.04) 100%),
    linear-gradient(0deg, rgba(4, 37, 24, 0.18), transparent 50%);
}

.services-hero__content {
  position: relative;
  z-index: 1;
  min-height: 40rem;
  display: grid;
  grid-template-columns: minmax(22rem, 0.92fr) minmax(17rem, 0.34fr);
  align-items: center;
  gap: clamp(var(--space-xl), 6vw, var(--space-4xl));
  padding-block: clamp(var(--space-2xl), 6vw, var(--space-4xl));
}

.services-hero__copy {
  max-width: 43rem;
}

.services-hero h1 {
  max-width: 13ch;
  color: var(--color-white);
  font-size: clamp(4rem, 7vw, 6.6rem);
}

.services-hero h1 em {
  color: var(--color-gold-300);
}

.services-hero p:not(.eyebrow) {
  margin-block-start: var(--space-lg);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(var(--text-base), 1.4vw, var(--text-md));
  line-height: 1.55;
}

.services-hero__actions,
.services-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
}

.services-proof,
.benefits-panel {
  display: grid;
  border: 1px solid rgba(217, 189, 112, 0.5);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(6, 61, 43, 0.94), rgba(4, 37, 24, 0.96));
  box-shadow: var(--shadow-soft);
  color: var(--color-white);
  padding: var(--space-xl);
}

.services-proof {
  justify-self: end;
  width: min(100%, 20rem);
}

.services-proof article,
.benefits-panel li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

.services-proof article + article,
.benefits-panel li + li {
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
}

.services-proof p,
.benefits-panel span:last-child {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-sm);
  font-weight: 750;
  line-height: 1.45;
}

.services-icon {
  inline-size: 3.05rem;
  block-size: 3.05rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--color-gold-300);
}

.services-icon::before,
.service-tile__icon::before {
  content: "";
  inline-size: 1.55rem;
  block-size: 1.55rem;
  display: block;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.services-icon--leaf::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 4 13c0-5 4-8 16-9-1 12-4 16-9 16Z'/%3E%3Cpath d='M7 17c3-3 6-5 10-6'/%3E%3C/g%3E%3C/svg%3E");
}

.services-icon--shield::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3C/g%3E%3C/svg%3E");
}

.services-icon--users::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-8 0v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3Cpath d='M2 21v-2a4 4 0 0 1 3-3.87'/%3E%3Cpath d='M8 3.13a4 4 0 0 0 0 7.75'/%3E%3C/g%3E%3C/svg%3E");
}

.services-icon--sprout::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M12 20V10'/%3E%3Cpath d='M18 10c-4 0-6 2-6 6 4 0 6-2 6-6Z'/%3E%3Cpath d='M6 8c4 0 6 2 6 6-4 0-6-2-6-6Z'/%3E%3C/g%3E%3C/svg%3E");
}

.services-icon--spray::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 21h8l-1-8H8l-1 8Z'/%3E%3Cpath d='M10 13V8h3v5'/%3E%3Cpath d='M9 8h5l2-5H9v5Z'/%3E%3Cpath d='M18 5h2'/%3E%3Cpath d='M18 9l2 1'/%3E%3Cpath d='M17 2l2-1'/%3E%3C/g%3E%3C/svg%3E");
}

.services-icon--cog::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.4 1.1V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1A1.65 1.65 0 0 0 2.9 13H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-.6 1.65 1.65 0 0 0 .4-1.1V3a2 2 0 1 1 4 0v.09A1.65 1.65 0 0 0 15 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 8c.2.38.48.7.85.92.34.2.73.29 1.15.29H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z'/%3E%3C/g%3E%3C/svg%3E");
}

.services-icon--wrench::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5 5L3 18v3h3l6.7-6.7a4 4 0 0 0 5-5L15 12l-3-3 2.7-2.7Z'/%3E%3C/g%3E%3C/svg%3E");
}

.services-icon--bug::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8a4 4 0 0 1 8 0v8a4 4 0 0 1-8 0V8Z'/%3E%3Cpath d='M12 4V2'/%3E%3Cpath d='M4 13h4'/%3E%3Cpath d='M16 13h4'/%3E%3Cpath d='M5 19l3-2'/%3E%3Cpath d='M19 19l-3-2'/%3E%3Cpath d='M5 7l3 2'/%3E%3Cpath d='M19 7l-3 2'/%3E%3Cpath d='M8 12h8'/%3E%3C/g%3E%3C/svg%3E");
}

.services-icon--bolt::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E");
}

.services-icon--hard-hat::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18h20'/%3E%3Cpath d='M4 18v-4a8 8 0 0 1 16 0v4'/%3E%3Cpath d='M9 18V9'/%3E%3Cpath d='M15 18V9'/%3E%3Cpath d='M8 22h8'/%3E%3C/g%3E%3C/svg%3E");
}

.services-icon--sparkles::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3Z'/%3E%3Cpath d='M19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8L19 14Z'/%3E%3Cpath d='M5 14l.8 2.2L8 17l-2.2.8L5 20l-.8-2.2L2 17l2.2-.8L5 14Z'/%3E%3C/g%3E%3C/svg%3E");
}

.services-strip {
  background: linear-gradient(180deg, var(--color-cream-100), #fbf8ef);
  border-block: 1px solid var(--color-border);
  box-shadow: 0 0.9rem 1.8rem rgba(4, 37, 24, 0.05);
}

.services-strip__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.service-tile {
  min-height: 9.25rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-sm);
  border-inline-start: 1px solid var(--color-border);
  color: var(--color-forest-950);
  padding: var(--space-md);
  text-align: center;
  transition: background var(--transition-base);
}

.service-tile:last-child {
  border-inline-end: 1px solid var(--color-border);
}

.service-tile:hover,
.service-tile:focus-visible {
  background: var(--color-olive-100);
}

.service-tile.is-active {
  background: var(--color-forest-900);
  color: var(--color-white);
  box-shadow: inset 0 -4px var(--color-gold-500);
}

.service-tile.is-active .service-tile__icon { background: var(--color-gold-300); }
.services-strip__grid > a { min-width: 0; }
.service-feature { scroll-margin-top: calc(var(--header-height) + 1rem); }
.service-feature__grid > * { min-width: 0; }
.service-feature h2, .service-feature li, .service-feature .button { overflow-wrap: anywhere; }
.services-page .service-feature__copy h2 { font-size: 32px; }
.services-page .benefits-panel h2 { font-size: 24px; }

.service-tile__icon {
  inline-size: 3.35rem;
  block-size: 3.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9eadc;
  color: var(--color-forest-800);
  color: var(--color-forest-900);
}

.service-tile__icon::before {
  inline-size: 1.85rem;
  block-size: 1.85rem;
}

.service-tile span:last-child {
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.28;
}

.service-tile span:last-child::after,
.mini-service span::after,
.services-cta .button::after,
.service-feature .button::after,
.services-hero .button::after {
  content: " ->";
  white-space: nowrap;
}

.service-feature {
  background: var(--color-cream-100);
  padding-block: var(--space-2xl) var(--space-lg);
}

.service-feature__grid {
  display: grid;
  grid-template-columns: 0.96fr 0.86fr 0.58fr;
  align-items: stretch;
  gap: var(--space-lg);
}

.service-feature__copy {
  display: grid;
  align-content: center;
  gap: var(--space-md);
}

.service-feature h2,
.service-process h2,
.more-services h2,
.services-cta h2 {
  color: var(--color-ink);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
}

.service-feature__copy > p,
.service-process__heading p,
.more-services__heading p,
.services-cta p {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: 1.55;
}

.check-list {
  display: grid;
  gap: 0.5rem;
  margin-block: var(--space-sm);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: var(--color-text-muted);
}

.check-list li::before {
  content: "";
  inline-size: 1.25rem;
  block-size: 1.25rem;
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--color-gold-300);
  color: var(--color-forest-950);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 72%;
}

.service-feature .button {
  justify-self: start;
  background: var(--color-forest-900);
  color: var(--color-white);
}

.service-feature__image {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-forest-100);
  min-height: 0;
  align-self: center;
  aspect-ratio: 7 / 4;
}

.services-page .service-feature__image img { display: block; height: auto; aspect-ratio: 7 / 4; object-fit: contain; }
.service-feature__image img[hidden] { display: none; }
.service-image-status { display: grid; place-items: center; height: 100%; padding: var(--space-md); color: var(--color-text-muted); text-align: center; }
.service-image-status[hidden] { display: none; }

.service-feature__image img,
.mini-service img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.benefits-panel {
  border-radius: var(--radius-sm);
}

.benefits-panel h2 {
  color: var(--color-white);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-block-end: var(--space-md);
}

.service-planning {
  padding-block: var(--space-xl);
  border-block: 1px solid var(--color-border);
}
.service-planning__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
.service-planning__grid > section { min-width: 0; }
.service-planning h2 { font-size: 24px; margin-block: var(--space-sm) var(--space-md); }
.service-planning p, .service-planning li { color: var(--color-text-muted); line-height: 1.55; }
.service-planning p + p { margin-block-start: var(--space-md); }
.service-planning__note { font-size: var(--text-sm); }
@media (max-width: 820px) {
  .service-planning__grid { grid-template-columns: 1fr; }
}

.service-process {
  background: var(--color-cream-100);
  padding-block: var(--space-sm) var(--space-2xl);
}

.service-process__heading {
  margin-block-end: var(--space-xl);
}

.process-steps {
  --step-gap: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--step-gap);
}

.process-steps li {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding-inline: 0;
  padding-block-start: 3.7rem;
}

.process-steps li:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.process-steps li::after {
  content: "";
  position: absolute;
  inset-block-start: 1.55rem;
  inset-inline-start: 4.1rem;
  inset-inline-end: calc(1rem - var(--step-gap));
  block-size: 1px;
  background: var(--color-text-muted);
}

.process-steps li:last-child::after {
  display: none;
}

.process-steps span {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 3.1rem;
  block-size: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-forest-900);
  color: var(--color-white);
  font-weight: 850;
}

.process-steps li:first-child span {
  inset-inline-start: 0;
  background: var(--color-gold-600);
}

.process-steps h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 900;
}

.process-steps p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.more-services {
  background: var(--color-cream-100);
  padding-block: var(--space-md) var(--space-2xl);
}

.more-services__heading {
  margin-block-end: var(--space-lg);
}

.more-services__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-md);
}

.mini-service {
  display: grid;
  grid-template-rows: 6.2rem auto;
  gap: var(--space-xs);
  color: var(--color-forest-950);
}

.mini-service img {
  border-radius: var(--radius-xs);
  background: var(--color-forest-100);
}

.mini-service span {
  font-size: var(--text-sm);
  font-weight: 850;
  line-height: 1.22;
}

.services-cta {
  background:
    linear-gradient(90deg, rgba(4, 37, 24, 0.98), rgba(6, 61, 43, 0.84) 58%, rgba(6, 61, 43, 0.28)),
    image-set(url("../../assets/images/services/landscaping/grounds-care-office-entrance.png.webp") type("image/webp"), url("../../assets/images/services/landscaping/grounds-care-office-entrance.png") type("image/png")) right 36% / cover,
    var(--color-forest-950);
  color: var(--color-white);
  padding-block: clamp(var(--space-2xl), 5vw, var(--space-3xl));
}

.services-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.services-cta h2,
.services-cta p {
  color: var(--color-white);
}

.services-cta p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 56rem;
}

@media (max-width: 1160px) {
  .services-hero__content {
    grid-template-columns: 1fr;
  }

  .services-proof {
    justify-self: start;
    width: min(100%, 48rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .services-proof article {
    grid-template-columns: 1fr;
  }

  .services-proof article + article {
    border-block-start: 0;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
    margin-block-start: 0;
    padding-block-start: 0;
    padding-inline-start: var(--space-md);
  }

  .services-strip__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .service-feature__grid {
    grid-template-columns: 1fr 1fr;
  }

  .benefits-panel {
    grid-column: 1 / -1;
  }

  .benefits-panel ul {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .benefits-panel li + li {
    border-block-start: 0;
    margin-block-start: 0;
    padding-block-start: 0;
  }

  .more-services__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .services-hero h1 {
    font-size: clamp(3rem, 12vw, 4.4rem);
  }

  .services-proof,
  .service-feature__grid,
  .process-steps,
  .benefits-panel ul,
  .services-cta__inner {
    grid-template-columns: 1fr;
  }

  .services-proof article + article {
    border-inline-start: 0;
    border-block-start: 1px solid rgba(255, 255, 255, 0.2);
    padding-inline-start: 0;
    padding-block-start: var(--space-md);
    margin-block-start: var(--space-md);
  }

  .services-strip__grid,
  .more-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-steps {
    gap: var(--space-lg);
  }

  .process-steps li,
  .process-steps li:first-child {
    border-inline-start: 0;
    padding: 0 0 0 4.2rem;
  }

  .process-steps li::after {
    display: none;
  }

  .process-steps span,
  .process-steps li:first-child span {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .services-cta__inner {
    display: grid;
  }

  .services-cta__actions {
    margin-block-start: 0;
  }
}

@media (max-width: 520px) {
  .services-hero__actions,
  .services-cta__actions {
    display: grid;
  }

  .services-strip__grid,
  .more-services__grid {
    grid-template-columns: 1fr;
  }

  .services-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .service-tile {
    min-height: 5.5rem;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-sm);
    text-align: left;
  }
  .service-tile__icon { inline-size: 2rem; block-size: 2rem; }
  .service-tile__icon::before { inline-size: 1.25rem; block-size: 1.25rem; }
}