/* ==========================================================================
   PIE Builders & Developers — Our Services section
   Intro over an architectural backdrop, service cards in two groups (4 + 3 by
   default) and a centred CTA.

   Elementor widget copy of html/css/our-services.css. Every selector is
   prefixed with the widget root .buildero-our-services (the <section>), so
   Elementor Site Settings (h2/h3/p/a styles) cannot restyle it and these
   rules never reach other widgets. Values the widget controls can change are
   read from custom properties whose fallbacks are the original values.
   Additions for the widget are at the end.
   ========================================================================== */

.buildero-our-services {
  /* Brand palette */
  --pie-services-gold: #D99A00;
  --pie-services-gold-deep: #A96C08;
  --pie-services-brown: #603800;
  --pie-services-text: #17191C;
  --pie-services-text-body: #5E626B;
  --pie-services-bg: #FBFAF7;
  --pie-services-cream: #F5EFE3;
  --pie-services-white: #FFFFFF;
  --pie-services-border: #E8E3DB;

  /* Typography */
  --pie-services-font-display: "Playfair Display", "DM Serif Display", Georgia, "Times New Roman", serif;
  --pie-services-font-body: "Manrope", "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Layout */
  --pie-services-max: 1440px;
  --pie-services-gutter: clamp(16px, 4vw, 60px);
  --pie-services-card-gap: 14px;
  --pie-services-radius: 10px;
  --pie-services-hero-bleed: 170px;   /* how far the backdrop runs behind the first card row */
  --pie-services-icon: 56px;

  /* Motion */
  --pie-services-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pie-services-dur: 0.35s;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(56px, 6vw, 96px);
  background: var(--pie-services-bg);
  color: var(--pie-services-text);
  font-family: var(--pie-services-font-body);
  -webkit-font-smoothing: antialiased;
  scroll-margin-top: 24px;
}

.buildero-our-services *,
.buildero-our-services *::before,
.buildero-our-services *::after {
  box-sizing: border-box;
}

/* Architectural line art along the bottom edge, behind the cards */
.buildero-our-services::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: clamp(120px, 17vw, 260px);
  background: url("images/services-line-art.svg") center bottom / max(1600px, 100%) auto no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

.buildero-our-services .pie-services__container {
  position: relative;
  width: 100%;
  max-width: var(--pie-services-max);
  margin-inline: auto;
  padding-inline: var(--pie-services-gutter);
}

/* --------------------------------------------------------------------------
   Top area: backdrop image, intro and accent panel
   -------------------------------------------------------------------------- */
.buildero-our-services .pie-services__top {
  position: relative;
  z-index: 0;
}

.buildero-our-services .pie-services__hero-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(-1 * var(--pie-services-hero-bleed));
  z-index: -1;
  width: 66%;
  margin: 0;
  pointer-events: none;
}

.buildero-our-services .pie-services__hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 48%;
  filter: saturate(0.78) sepia(0.28) brightness(1.04);   /* warms the dusk sky towards the brand palette */
}

/* Cream fade from the left (headline legibility) and into the page at the bottom */
.buildero-our-services .pie-services__hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--pie-services-bg) 0%,
      rgba(251, 250, 247, 0.92) 16%,
      rgba(251, 250, 247, 0.5) 32%,
      rgba(251, 250, 247, 0) 50%),
    linear-gradient(0deg,
      var(--pie-services-bg) 0%,
      rgba(251, 250, 247, 0.7) 20%,
      rgba(251, 250, 247, 0) 46%),
    linear-gradient(180deg,
      rgba(236, 196, 132, 0.42) 0%,
      rgba(236, 196, 132, 0.12) 40%,
      rgba(236, 196, 132, 0) 60%);
}

.buildero-our-services .pie-services__intro {
  max-width: 640px;
  padding-block: clamp(48px, 5vw, 76px) clamp(40px, 4vw, 60px);
}

.buildero-our-services .pie-services__eyebrow {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  color: #43474F;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* --pie-services-eyebrow-line (0–1) lets the script draw the line; it is fully drawn by default */
.buildero-our-services .pie-services__eyebrow::before {
  content: "";
  width: 46px;
  height: 2px;
  background: var(--pie-services-gold);
  transform: scaleX(var(--pie-services-eyebrow-line, 1));
  transform-origin: left center;
}

.buildero-our-services .pie-services__title {
  margin: 18px 0 24px;
  color: var(--pie-services-text);
  font-family: var(--pie-services-font-display);
  font-size: clamp(2.125rem, 1.2rem + 4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.04;
}

.buildero-our-services .pie-services__title-line {
  display: block;
}

.buildero-our-services .pie-services__title-text {
  display: block;
}

/* Each headline line masks its text so it can rise into place; the padding keeps descenders visible */
.pie-js .buildero-our-services .pie-services__title-line {
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.buildero-our-services .pie-services__title-line--accent {
  color: var(--pie-services-gold-deep);
}

.buildero-our-services .pie-services__description {
  max-width: min(560px, 46vw);
  margin: 0;
  color: var(--pie-services-text-body);
  font-size: clamp(15px, 0.85rem + 0.2vw, 17px);
  line-height: 1.6;
}

/* Decorative gold panel, top right */
.buildero-our-services .pie-services__accent-panel {
  position: absolute;
  top: clamp(32px, 3vw, 44px);
  right: var(--pie-services-gutter);
  width: clamp(200px, 16.5vw, 240px);
  min-height: clamp(170px, 14vw, 200px);
  padding: 34px 32px 30px;
  background: linear-gradient(160deg, rgba(185, 120, 10, 0.94) 0%, rgba(150, 92, 6, 0.92) 100%);
  box-shadow: 0 24px 48px -28px rgba(40, 24, 0, 0.6);
  color: var(--pie-services-white);
  pointer-events: none;
}

.buildero-our-services .pie-services__accent-panel::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: 22px;
  background: #F0C46A;
}

.buildero-our-services .pie-services__accent-text {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1.75;
  text-transform: uppercase;
}

.buildero-our-services .pie-services__accent-text span {
  display: block;
}

/* --------------------------------------------------------------------------
   Card grids. Desktop column counts come from the markup (--pie-services-cols,
   set per group by the widget); tablet/mobile counts from the widget controls.
   -------------------------------------------------------------------------- */
.buildero-our-services .pie-services__cards {
  z-index: 1;
  display: grid;
  gap: var(--pie-services-row-gap, var(--pie-services-card-gap));
  scroll-margin-top: 24px;
}

.buildero-our-services .pie-services__grid {
  display: grid;
  column-gap: var(--pie-services-col-gap, var(--pie-services-card-gap));
  row-gap: var(--pie-services-row-gap, var(--pie-services-card-gap));
}

.buildero-our-services .pie-services__grid--primary {
  --pie-services-media-height: var(--pie-services-media-h-primary, clamp(140px, 11.2vw, 168px));
  grid-template-columns: repeat(var(--pie-services-cols, 4), minmax(0, 1fr));
}

.buildero-our-services .pie-services__grid--secondary {
  --pie-services-media-height: var(--pie-services-media-h-secondary, clamp(112px, 8.6vw, 130px));
  grid-template-columns: repeat(var(--pie-services-cols, 3), minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   Service card
   -------------------------------------------------------------------------- */
.buildero-our-services .pie-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pie-services-white);
  border: 1px solid var(--pie-services-border);
  border-radius: var(--pie-services-radius);
  box-shadow:
    0 1px 2px rgba(23, 25, 28, 0.04),
    0 18px 36px -26px rgba(96, 56, 0, 0.32);
  scroll-margin-top: 24px;
  transition:
    box-shadow var(--pie-services-dur) var(--pie-services-ease),
    transform var(--pie-services-dur) var(--pie-services-ease);
}

/* While the scroll reveal runs GSAP owns these transforms; CSS transitions would lag behind it */
.buildero-our-services .pie-service-card.is-revealing,
.buildero-our-services .pie-service-card.is-revealing .pie-service-card__image {
  transition: none;
}

.buildero-our-services .pie-service-card.is-revealing .pie-service-card__image {
  will-change: transform;
}

.buildero-our-services .pie-service-card__media {
  position: relative;
  flex: none;
  height: var(--pie-services-media-height);
  overflow: hidden;
  background: var(--pie-services-cream);
}

.buildero-our-services .pie-service-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pie-card-focal, 50% 50%);
  transition: transform 0.7s var(--pie-services-ease);
}

.buildero-our-services .pie-service-card__body {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  column-gap: 14px;
  padding: 14px 18px 22px;
}

/* Icon tile overlapping the bottom edge of the image by 18px */
.buildero-our-services .pie-service-card__icon {
  position: absolute;
  top: calc(18px - var(--pie-services-icon));
  left: 16px;
  display: grid;
  place-items: center;
  width: var(--pie-services-icon);
  height: var(--pie-services-icon);
  background: var(--pie-services-cream);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  box-shadow: 0 8px 18px -10px rgba(96, 56, 0, 0.45);
  color: var(--pie-services-gold-deep);
}

.buildero-our-services .pie-service-card__icon svg {
  width: 46%;
  height: 46%;
  stroke-width: 1.5;
}

/* Number sits to the right of the icon; the title starts below the icon */
.buildero-our-services .pie-service-card__number {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-left: calc(var(--pie-services-icon) + 12px);
  color: var(--pie-services-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 18px;
}

/* --pie-card-line (0–1) lets the script draw the divider as the card reveals */
.buildero-our-services .pie-service-card__number::after {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--pie-services-gold);
  transform: scaleX(var(--pie-card-line, 1));
  transform-origin: left center;
}

.buildero-our-services .pie-service-card__title {
  grid-column: 1;
  margin: 14px 0 0;
  color: var(--pie-services-text);
  font-family: var(--pie-services-font-display);
  font-size: clamp(17px, 0.85rem + 0.4vw, 20px);
  font-variant-numeric: lining-nums;
  font-weight: 600;
  line-height: 1.25;
}

.buildero-our-services .pie-service-card__description {
  grid-column: 1;
  margin: 8px 0 0;
  color: var(--pie-services-text-body);
  font-size: clamp(13px, 0.78rem + 0.1vw, 14px);
  line-height: 1.5;
}

.buildero-our-services .pie-service-card__arrow {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--pie-services-white);
  border: 1px solid rgba(169, 108, 8, 0.55);
  border-radius: 50%;
  color: var(--pie-services-text);
  transition:
    background-color var(--pie-services-dur) var(--pie-services-ease),
    border-color var(--pie-services-dur) var(--pie-services-ease),
    color var(--pie-services-dur) var(--pie-services-ease);
}

.buildero-our-services .pie-service-card__arrow svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  transition: transform var(--pie-services-dur) var(--pie-services-ease);
}

.buildero-our-services .pie-service-card__arrow:focus-visible,
.buildero-our-services .pie-services__cta:focus-visible {
  outline: 2px solid var(--pie-services-gold-deep);
  outline-offset: 3px;
}

.buildero-our-services .pie-service-card__arrow:focus-visible {
  background: var(--pie-services-gold-deep);
  border-color: var(--pie-services-gold-deep);
  color: var(--pie-services-white);
}

.buildero-our-services .pie-service-card__arrow:focus-visible svg {
  transform: translateX(3px);
}

@media (hover: hover) {
  .buildero-our-services .pie-service-card:hover {
    transform: translateY(calc(-1 * var(--pie-services-hover-lift, 4px)));
    box-shadow:
      0 1px 2px rgba(23, 25, 28, 0.05),
      0 24px 44px -26px rgba(96, 56, 0, 0.42);
  }

  .buildero-our-services .pie-service-card:hover .pie-service-card__image {
    transform: scale(1.045);
  }

  .buildero-our-services .pie-service-card:hover .pie-service-card__arrow {
    background: var(--pie-services-gold-deep);
    border-color: var(--pie-services-gold-deep);
    color: var(--pie-services-white);
  }

  .buildero-our-services .pie-service-card:hover .pie-service-card__arrow svg {
    transform: translateX(3px);
  }
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.buildero-our-services .pie-services__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(10px, 1.6vw, 22px);
}

.buildero-our-services .pie-services__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 305px;
  min-height: 58px;
  padding: 0 34px;
  background: linear-gradient(90deg, var(--pie-services-gold-deep) 0%, #8A5606 55%, var(--pie-services-brown) 100%);
  border-radius: 6px;
  box-shadow: 0 16px 30px -18px rgba(96, 56, 0, 0.7);
  color: var(--pie-services-white);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    transform var(--pie-services-dur) var(--pie-services-ease),
    box-shadow var(--pie-services-dur) var(--pie-services-ease);
}

.buildero-our-services .pie-services__cta svg {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}

.buildero-our-services .pie-services__cta-arrow {
  transition: transform var(--pie-services-dur) var(--pie-services-ease);
}

@media (hover: hover) {
  .buildero-our-services .pie-services__cta:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 0 0 100vmax rgba(60, 35, 0, 0.16),
      0 20px 34px -18px rgba(96, 56, 0, 0.75);
  }

  .buildero-our-services .pie-services__cta:hover .pie-services__cta-arrow {
    transform: translateX(4px);
  }
}

.buildero-our-services .pie-services__cta:focus-visible .pie-services__cta-arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Pre-animation state. Only while JS runs (html.pie-js) and until
   our-services.js marks the section ready; the fallback animation reveals
   everything after 3s if the script never loads.
   -------------------------------------------------------------------------- */
.pie-js .buildero-our-services:not(.is-ready) [data-pie-services-reveal],
.pie-js .buildero-our-services:not(.is-ready) [data-pie-services-line],
.pie-js .buildero-our-services:not(.is-ready) [data-pie-services-panel],
.pie-js .buildero-our-services:not(.is-ready) .pie-service-card,
.pie-js .buildero-our-services:not(.is-ready) [data-pie-services-cta] {
  opacity: 0;
  animation: pie-services-fallback-reveal 0.4s ease 3s forwards;
}

@keyframes pie-services-fallback-reveal {
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   iPad landscape — 1024px to 1199px: keep 4 + 3, tighten the cards
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .buildero-our-services {
    --pie-services-card-gap: 12px;
    --pie-services-icon: 50px;
    --pie-services-hero-bleed: 140px;
  }

  .buildero-our-services .pie-services__hero-image {
    width: 70%;
  }

  .buildero-our-services .pie-services__intro {
    max-width: 560px;
  }

  .buildero-our-services .pie-services__accent-panel {
    width: 190px;
    min-height: 0;
    padding: 26px 24px 24px;
  }

  .buildero-our-services .pie-services__accent-panel::before {
    margin-bottom: 16px;
  }

  .buildero-our-services .pie-services__accent-text {
    font-size: 12px;
    letter-spacing: 0.26em;
  }

  .buildero-our-services .pie-service-card__body {
    column-gap: 10px;
    padding: 12px 14px 18px;
  }

  .buildero-our-services .pie-service-card__icon {
    left: 12px;
  }

  .buildero-our-services .pie-service-card__number {
    padding-left: calc(var(--pie-services-icon) + 10px);
  }

  /* Arrow beside the title; the description takes the full card width */
  .buildero-our-services .pie-service-card__arrow {
    grid-row: 2;
  }

  .buildero-our-services .pie-service-card__description {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   iPad portrait — 768px to 1023px: image moves below the intro, 2 columns
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .buildero-our-services {
    --pie-services-hero-bleed: 90px;
  }

  .buildero-our-services .pie-services__top {
    display: flex;
    flex-direction: column;
  }

  /* The panel now positions against .pie-services__top (over the image) */
  .buildero-our-services .pie-services__top > .pie-services__container {
    position: static;
  }

  .buildero-our-services .pie-services__intro {
    max-width: 640px;
    padding-bottom: 8px;
  }

  .buildero-our-services .pie-services__description {
    max-width: 560px;
  }

  .buildero-our-services .pie-services__hero-image {
    position: relative;
    order: 2;
    width: 100%;
    height: clamp(280px, 46vw, 420px);
    margin-bottom: calc(-1 * var(--pie-services-hero-bleed));
  }

  .buildero-our-services .pie-services__hero-image::after {
    background:
      linear-gradient(180deg,
        var(--pie-services-bg) 0%,
        rgba(251, 250, 247, 0) 26%),
      linear-gradient(0deg,
        var(--pie-services-bg) 0%,
        rgba(251, 250, 247, 0.6) 22%,
        rgba(251, 250, 247, 0) 50%);
  }

  .buildero-our-services .pie-services__accent-panel {
    top: auto;
    bottom: 36px;
    width: 168px;
    padding: 20px 20px 18px;
  }

  .buildero-our-services .pie-services__accent-text {
    font-size: 11px;
  }

  .buildero-our-services .pie-services__grid--primary,
  .buildero-our-services .pie-services__grid--secondary {
    --pie-services-media-height: var(--pie-services-media-h-tablet, clamp(170px, 24vw, 220px));
    grid-template-columns: repeat(var(--pie-services-cols-tablet, 2), minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Mobile landscape — 576px to 767px
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .buildero-our-services {
    --pie-services-hero-bleed: 64px;
  }

  .buildero-our-services .pie-services__hero-image {
    height: clamp(220px, 50vw, 320px);
  }

  .buildero-our-services .pie-services__hero-image img {
    object-position: 58% 50%;
  }

  .buildero-our-services .pie-services__title {
    margin-bottom: 18px;
  }

  .buildero-our-services .pie-services__grid--primary,
  .buildero-our-services .pie-services__grid--secondary {
    --pie-services-media-height: var(--pie-services-media-h-tablet, clamp(150px, 28vw, 190px));
  }
}

/* --------------------------------------------------------------------------
   Mobile portrait — below 576px: single column, full-width CTA
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .buildero-our-services {
    --pie-services-icon: 52px;
    --pie-services-card-gap: 16px;
  }

  .buildero-our-services .pie-services__eyebrow {
    gap: 14px;
    font-size: 12px;
    letter-spacing: 0.28em;
  }

  .buildero-our-services .pie-services__accent-panel {
    display: none;
  }

  .buildero-our-services .pie-services__grid--primary,
  .buildero-our-services .pie-services__grid--secondary {
    --pie-services-media-height: var(--pie-services-media-h-mobile, clamp(190px, 54vw, 230px));
    grid-template-columns: repeat(var(--pie-services-cols-mobile, 1), minmax(0, 1fr));
  }

  .buildero-our-services .pie-service-card__body {
    padding: 14px 16px 20px;
  }

  .buildero-our-services .pie-service-card__title {
    font-size: 19px;
  }

  .buildero-our-services .pie-service-card__description {
    font-size: 14px;
  }

  .buildero-our-services .pie-services__cta-wrap {
    margin-top: 12px;
  }

  .buildero-our-services .pie-services__cta {
    width: 100%;
    min-width: 0;
    padding-inline: 20px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .buildero-our-services *,
  .buildero-our-services *::before,
  .buildero-our-services *::after {
    transition-duration: 0.01ms !important;
  }

  .buildero-our-services .pie-service-card:hover,
  .buildero-our-services .pie-service-card:hover .pie-service-card__image,
  .buildero-our-services .pie-services__cta:hover {
    transform: none;
  }

  .pie-js .buildero-our-services:not(.is-ready) [data-pie-services-reveal],
  .pie-js .buildero-our-services:not(.is-ready) [data-pie-services-line],
  .pie-js .buildero-our-services:not(.is-ready) [data-pie-services-panel],
  .pie-js .buildero-our-services:not(.is-ready) .pie-service-card,
  .pie-js .buildero-our-services:not(.is-ready) [data-pie-services-cta] {
    opacity: 1;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Buildero Theme additions (Elementor widget)
   -------------------------------------------------------------------------- */

/* "Background line art" switched off */
.buildero-our-services.pie-services--no-line-art::after {
  content: none;
}

/* Card without an image: the icon tile moves inside the card and the text
   keeps the same position relative to it as when it overlaps the image edge
   (number 4px above the tile's bottom, to its right). */
.buildero-our-services .pie-service-card--no-media .pie-service-card__icon {
  top: 16px;
}

.buildero-our-services .pie-service-card--no-media:not(.pie-service-card--no-icon) .pie-service-card__body {
  padding-top: calc(var(--pie-services-icon) + 12px);
}

.buildero-our-services .pie-service-card--no-icon .pie-service-card__number {
  padding-left: 0;
}

/* Numbers hidden: the title is the first row, so the arrow moves up with it */
.buildero-our-services .pie-service-card--no-number .pie-service-card__arrow {
  grid-row: 1 / span 2;
}

@media (max-width: 1199.98px) {
  .buildero-our-services .pie-service-card--no-number .pie-service-card__arrow {
    grid-row: 1;
  }
}

/* Narrow custom column settings (e.g. 2 columns on a 320px phone): long
   words wrap instead of overflowing the card. */
.buildero-our-services .pie-service-card__title,
.buildero-our-services .pie-service-card__description {
  overflow-wrap: break-word;
}

/* Icons chosen from Elementor's icon library: font icons are sized like the
   bundled Lucide SVGs; uploaded/Font Awesome SVGs follow the icon colour. */
.buildero-our-services .pie-service-card__icon i {
  display: block;
  font-size: calc(var(--pie-services-icon) * 0.46);
  line-height: 1;
}

.buildero-our-services .pie-service-card__icon svg:not(.lucide) {
  fill: currentColor;
}

/* Editor-only notice when the Services list is empty */
.buildero-our-services .pie-services__empty {
  margin: 0;
  padding: 32px 24px;
  border: 1px dashed var(--pie-services-border);
  border-radius: var(--pie-services-radius);
  background: var(--pie-services-white);
  color: var(--pie-services-text-body);
  font-size: 14px;
  text-align: center;
}