/* ==========================================================================
   PIE Builders & Developers — Our Process section
   Centred heading and the process stages, presented three ways:
   - default: stacked vertical timeline (tablet portrait, mobile, reduced
     motion, no JS) with a gold line running through the icon badges
   - .is-stack-mode: same layout, revealed and line drawn on scroll
   - .is-stage-mode: pinned full-viewport "active stage" composition with a
     scroll-linked curved gold rail (desktop / iPad landscape)
   - .is-slider-mode: swipeable carousel with a peek of the next slide and a
     compact rail (phones)
   Modes are set by our-process.js.

   Elementor widget copy of html/css/our-process.css. Every selector is
   prefixed with the widget root .buildero-our-process (the <section>), so
   Elementor Site Settings (h2/h3/p typography) cannot restyle it and these
   rules never reach other widgets. Additions for the widget are at the end.
   ========================================================================== */


/* Tokens are scoped to the section: header.css / hero-banner.css define a few
   of the same names on :root with slightly different values. */
.buildero-our-process {
  /* Brand palette */
  --pie-gold: #D99A00;
  --pie-deep-gold: #A96C08;
  --pie-brown: #603800;
  --pie-charcoal: #17191C;
  --pie-body: #626873;
  --pie-background: #FBFAF7;
  --pie-cream: #F5EFE3;
  --pie-white: #FFFFFF;
  --pie-border: #E8E3DB;

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

  /* Motion */
  --pie-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Section & background
   -------------------------------------------------------------------------- */
.buildero-our-process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 7vw, 112px);
  background:
    radial-gradient(ellipse 60% 45% at 12% 8%, rgba(245, 239, 227, 0.9), transparent 70%),
    radial-gradient(ellipse 55% 40% at 92% 96%, rgba(245, 239, 227, 0.75), transparent 70%),
    var(--pie-background);
  color: var(--pie-body);
  font-family: var(--pie-font-body);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}

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

.buildero-our-process .pie-process__decoration {
  position: absolute;
  z-index: -1;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.buildero-our-process .pie-process__decoration--top {
  top: clamp(8px, 2vw, 32px);
  right: clamp(-80px, -3vw, -24px);
  width: clamp(300px, 30vw, 560px);
  opacity: 0.13;
}

.buildero-our-process .pie-process__decoration--bottom {
  bottom: -24px;
  left: clamp(-90px, -4vw, -30px);
  width: clamp(260px, 24vw, 440px);
  opacity: 0.08;
  transform: scaleX(-1);
}

.buildero-our-process .pie-process__container {
  position: relative;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 48px);
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */
.buildero-our-process .pie-process__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto clamp(44px, 4.6vw, 72px);
  text-align: center;
}

.buildero-our-process .pie-process__rule {
  display: block;
  width: 58px;
  height: 3px;
  margin-bottom: 24px;
  border-radius: 2px;
  background: var(--pie-gold);
}

.buildero-our-process .pie-process__eyebrow {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  padding-left: 5px; /* balances the trailing letter-spacing */
  color: #5D6573;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.buildero-our-process .pie-process__title {
  margin: 0;
  color: var(--pie-charcoal);
  font-family: var(--pie-font-display);
  font-size: clamp(36px, 4.8vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.buildero-our-process .pie-process__title span {
  color: var(--pie-deep-gold);
  background: linear-gradient(100deg, var(--pie-deep-gold) 0%, var(--pie-gold) 55%, var(--pie-deep-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.buildero-our-process .pie-process__description {
  max-width: 820px;
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  color: var(--pie-body);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Stages — default stacked timeline
   --pie-process-rail       width of the badge column
   --pie-process-badge      icon badge diameter
   --pie-process-row-gap    space between stages (the line spans it)
   --pie-process-cut        slant of the photo panels, % of panel width
                            (also read by our-process.js for clip reveals)
   -------------------------------------------------------------------------- */
.buildero-our-process .pie-process__steps-wrap {
  --pie-process-rail: 76px;
  --pie-process-badge: 64px;
  --pie-process-row-gap: clamp(56px, 6vw, 88px);
  --pie-process-cut: 7;

  position: relative;
  max-width: 1180px;
  margin-inline: auto;
}

.buildero-our-process .pie-process__steps {
  position: relative;
  display: grid;
  row-gap: var(--pie-process-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Badge | photo | text. The body is display: contents so its children can
   sit in the badge and text columns. */
.buildero-our-process .pie-process__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--pie-process-rail) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto auto 1fr;
  column-gap: clamp(20px, 3.2vw, 52px);
  align-items: start;
  min-width: 0;
}

.buildero-our-process .pie-process__body {
  display: contents;
}

/* Gold line: one segment per stage, from its badge centre to the next.
   ::before is the faint track, ::after the fill (scaled by --pie-process-seg). */
.buildero-our-process .pie-process__step:not(:last-child)::before,
.buildero-our-process .pie-process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--pie-process-badge) / 2);
  left: calc(var(--pie-process-rail) / 2 - 1px);
  width: 2px;
  height: calc(100% + var(--pie-process-row-gap));
  pointer-events: none;
}

.buildero-our-process .pie-process__step:not(:last-child)::before {
  background: rgba(217, 154, 0, 0.2);
}

.buildero-our-process .pie-process__step:not(:last-child)::after {
  background: linear-gradient(180deg, var(--pie-gold), var(--pie-deep-gold));
  transform: scaleY(var(--pie-process-seg, 1));
  transform-origin: top;
}

/* Photo panel */
.buildero-our-process .pie-process__media {
  position: relative;
  grid-column: 2;
  grid-row: 1 / -1;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.buildero-our-process .pie-process__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--pie-cream);
  clip-path: polygon(
    0 0,
    calc(100% - var(--pie-process-cut) * 1%) 0,
    100% 100%,
    calc(var(--pie-process-cut) * 1%) 100%
  );
}

.buildero-our-process .pie-process__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pie-process-focal, 50% 50%);
}

/* Soft warm wash so the numbers stay legible on bright photos */
.buildero-our-process .pie-process__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(23, 25, 28, 0.45) 0%, rgba(23, 25, 28, 0) 50%);
  pointer-events: none;
}

/* Number and short descriptor over the photo */
.buildero-our-process .pie-process__caption {
  position: absolute;
  top: clamp(10px, 1.2vw, 18px);
  left: clamp(14px, 1.6vw, 24px);
  z-index: 1;
  pointer-events: none;
}

.buildero-our-process .pie-process__number {
  display: block;
  color: rgba(255, 251, 243, 0.82);
  font-family: var(--pie-font-display);
  font-size: clamp(46px, 5vw, 72px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(23, 25, 28, 0.2);
}

.buildero-our-process .pie-process__descriptor {
  max-width: 11em;
  margin: 10px 0 0;
  color: #FFFBF3;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(23, 25, 28, 0.45);
}

.buildero-our-process .pie-process__descriptor::before {
  content: "";
  display: block;
  width: 36px;
  height: 1.5px;
  margin-bottom: 10px;
  background: var(--pie-gold);
}

/* Icon badge */
.buildero-our-process .pie-process__icon {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / -1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: var(--pie-process-badge);
  height: var(--pie-process-badge);
  border: 3px solid var(--pie-white);
  border-radius: 50%;
  background: var(--pie-cream);
  color: var(--pie-deep-gold);
  box-shadow: 0 8px 22px rgba(96, 56, 0, 0.12), 0 0 0 1px rgba(217, 154, 0, 0.14);
  transition: background-color 0.4s var(--pie-ease), color 0.4s var(--pie-ease), box-shadow 0.4s var(--pie-ease);
}

.buildero-our-process .pie-process__icon svg {
  width: calc(var(--pie-process-badge) * 0.42);
  height: calc(var(--pie-process-badge) * 0.42);
  stroke-width: 1.6;
}

/* Text */
.buildero-our-process .pie-process__step-title {
  grid-column: 3;
  grid-row: 2;
  margin: 0;
  color: var(--pie-charcoal);
  font-family: var(--pie-font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.buildero-our-process .pie-process__title-text {
  display: block;
}

.buildero-our-process .pie-process__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.buildero-our-process .pie-process__divider {
  grid-column: 3;
  grid-row: 3;
  display: block;
  width: 46px;
  height: 2px;
  margin: 18px 0;
  border-radius: 2px;
  background: var(--pie-gold);
  transform-origin: left center;
}

.buildero-our-process .pie-process__step-description {
  grid-column: 3;
  grid-row: 4;
  max-width: 420px;
  margin: 0;
  color: var(--pie-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Supporting details: icon + short label */
.buildero-our-process .pie-process__details {
  grid-column: 3;
  grid-row: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.buildero-our-process .pie-process__detail {
  --pie-process-detail-icon: 36px;

  display: flex;
  align-items: center;
  gap: 12px;
  color: #4A4F57;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.buildero-our-process .pie-process__detail-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--pie-process-detail-icon);
  height: var(--pie-process-detail-icon);
  border: 1px solid rgba(217, 154, 0, 0.22);
  border-radius: 50%;
  background: var(--pie-white);
  color: var(--pie-deep-gold);
  box-shadow: 0 4px 12px rgba(96, 56, 0, 0.08);
}

.buildero-our-process .pie-process__detail-icon svg {
  width: 48%;
  height: 48%;
  stroke-width: 1.7;
}

.buildero-our-process .pie-process__stage {
  position: relative;
}

/* Counter, rail, gold edge and inset belong to stage mode only */
.buildero-our-process .pie-process__counter,
.buildero-our-process .pie-process__rail,
.buildero-our-process .pie-process__edge,
.buildero-our-process .pie-process__inset {
  display: none;
}

/* Stack mode: badges fill in as the line reaches them */
.buildero-our-process.is-stack-mode .pie-process__step.is-reached .pie-process__icon {
  background: var(--pie-gold);
  color: var(--pie-white);
  box-shadow: 0 10px 24px rgba(169, 108, 8, 0.28), 0 0 0 6px rgba(217, 154, 0, 0.14);
}

/* --------------------------------------------------------------------------
   Stage mode — pinned active-stage composition
   The section fills the viewport; the five stages share one area
   (photo | editorial text) and GSAP moves between them. Sizes are tied to
   vh so heading, stage and rail always fit the pinned frame.
   --pie-process-media      width of the photo column
   --pie-process-cols-gap   gap between photo and text
   -------------------------------------------------------------------------- */
.buildero-our-process.is-stage-mode {
  box-sizing: border-box;
  height: 100vh;
  padding-block: clamp(20px, 4vh, 48px);
}

.buildero-our-process.is-stage-mode .pie-process__container {
  max-width: 1760px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.buildero-our-process.is-stage-mode .pie-process__heading {
  flex: none;
  margin-bottom: clamp(16px, 3.6vh, 40px);
}

.buildero-our-process.is-stage-mode .pie-process__rule {
  margin-bottom: clamp(12px, 2.2vh, 24px);
}

.buildero-our-process.is-stage-mode .pie-process__eyebrow {
  margin-bottom: clamp(8px, 1.4vh, 16px);
}

.buildero-our-process.is-stage-mode .pie-process__title {
  font-size: clamp(32px, min(3.6vw, 6.2vh), 56px);
}

.buildero-our-process.is-stage-mode .pie-process__description {
  max-width: 760px;
  margin-top: clamp(8px, 1.4vh, 16px);
  font-size: clamp(15px, min(1.2vw, 2.1vh), 19px);
}

.buildero-our-process.is-stage-mode .pie-process__steps-wrap {
  --pie-process-media: 62%;
  --pie-process-cols-gap: clamp(28px, 3vw, 56px);
  --pie-process-badge: clamp(54px, 8vh, 76px);
  --pie-process-cut: 12;

  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-width: none;
}

.buildero-our-process.is-stage-mode .pie-process__stage {
  flex: 1;
  min-height: 0;
}

.buildero-our-process.is-stage-mode .pie-process__steps {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

.buildero-our-process.is-stage-mode .pie-process__step {
  position: absolute;
  inset: 0;
  grid-template-columns: var(--pie-process-media) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--pie-process-cols-gap);
}

.buildero-our-process.is-stage-mode .pie-process__step::before,
.buildero-our-process.is-stage-mode .pie-process__step::after {
  display: none;
}

.buildero-our-process.is-stage-mode .pie-process__media {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  aspect-ratio: auto;
}

.buildero-our-process.is-stage-mode .pie-process__image {
  transform-origin: 40% 50%;
}

/* Darker on the left for the caption, with a faint warm grade */
.buildero-our-process.is-stage-mode .pie-process__image::after {
  background:
    linear-gradient(90deg, rgba(23, 25, 28, 0.55) 0%, rgba(23, 25, 28, 0.2) 34%, rgba(23, 25, 28, 0) 58%),
    linear-gradient(rgba(169, 108, 8, 0.1), rgba(169, 108, 8, 0.1));
}

.buildero-our-process.is-stage-mode .pie-process__caption {
  top: 11%;
  left: clamp(40px, 13%, 210px);
}

.buildero-our-process.is-stage-mode .pie-process__number {
  color: rgba(255, 251, 243, 0.86);
  font-size: clamp(80px, min(8.5vw, 15vh), 160px);
  font-weight: 500;
}

.buildero-our-process.is-stage-mode .pie-process__descriptor {
  margin-top: clamp(14px, 2.4vh, 24px);
  font-size: clamp(12px, min(1vw, 1.9vh), 16px);
  font-weight: 500;
  letter-spacing: 0.14em;
}

.buildero-our-process.is-stage-mode .pie-process__descriptor::before {
  width: 48px;
  margin-bottom: clamp(12px, 2vh, 20px);
}

/* Gold edge: the photo's slanted shape nudged right, behind the photos, so
   only the diagonal right edge shows */
.buildero-our-process.is-stage-mode .pie-process__edge {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  display: block;
  width: var(--pie-process-media);
  background: linear-gradient(180deg, var(--pie-gold), var(--pie-deep-gold));
  clip-path: polygon(
    0 0,
    calc(100% - var(--pie-process-cut) * 1%) 0,
    100% 100%,
    calc(var(--pie-process-cut) * 1%) 100%
  );
  transform: translateX(clamp(7px, 0.7vw, 12px));
}

/* Decorative inset over the photo's lower-left corner, bleeding to the
   container edge: gold edge, white frame, photo */
.buildero-our-process.is-stage-mode .pie-process__inset {
  --pie-process-inset-shape: polygon(0 6%, 64% 0, 100% 100%, 0 100%);

  position: absolute;
  bottom: 0;
  left: calc(-1 * clamp(20px, 3vw, 48px));
  z-index: 2;
  display: block;
  width: clamp(130px, 12vw, 220px);
  aspect-ratio: 1 / 1.1;
  isolation: isolate;
  pointer-events: none;
}

.buildero-our-process.is-stage-mode .pie-process__inset::before,
.buildero-our-process.is-stage-mode .pie-process__inset::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--pie-process-inset-shape);
}

.buildero-our-process.is-stage-mode .pie-process__inset::before {
  z-index: -2;
  background: linear-gradient(180deg, var(--pie-gold), var(--pie-deep-gold));
  transform: translateX(9px);
}

.buildero-our-process.is-stage-mode .pie-process__inset::after {
  z-index: -1;
  background: var(--pie-white);
}

.buildero-our-process .pie-process__inset img {
  position: absolute;
  top: 7px;
  left: 0;
  display: block;
  width: calc(100% - 9px);
  height: calc(100% - 14px);
  object-fit: cover;
  object-position: 35% 60%;
  clip-path: var(--pie-process-inset-shape);
}

.buildero-our-process.is-stage-mode .pie-process__decoration--bottom {
  top: clamp(8px, 4vh, 48px);
  bottom: auto;
  left: -40px;
  width: clamp(260px, 22vw, 420px);
  opacity: 0.1;
}

.buildero-our-process.is-stage-mode .pie-process__body {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  flex-direction: column;
  align-self: stretch;
  align-items: flex-start;
  justify-content: center;
  max-width: 580px;
  min-height: 0;
  padding-top: clamp(48px, 8vh, 72px); /* clears the counter */
}

.buildero-our-process.is-stage-mode .pie-process__icon {
  flex: none;
  margin-bottom: clamp(14px, 2.6vh, 28px);
}

.buildero-our-process.is-stage-mode .pie-process__step-title {
  overflow: hidden;
  padding-bottom: 0.08em; /* keeps descenders inside the reveal mask */
  font-size: clamp(28px, min(2.8vw, 5.2vh), 46px);
  line-height: 1.15;
}

.buildero-our-process.is-stage-mode .pie-process__divider {
  width: 56px;
  margin-block: clamp(12px, 2.4vh, 24px);
}

.buildero-our-process.is-stage-mode .pie-process__step-description {
  max-width: 460px;
  font-size: clamp(15px, min(1.25vw, 2.3vh), 19px);
}

.buildero-our-process.is-stage-mode .pie-process__details {
  flex-direction: row;
  gap: 0;
  margin-top: clamp(16px, 3.4vh, 34px);
}

.buildero-our-process.is-stage-mode .pie-process__detail {
  --pie-process-detail-icon: clamp(36px, 5.4vh, 46px);

  padding-inline: clamp(12px, 1.4vw, 26px);
  font-size: clamp(12px, min(0.95vw, 1.9vh), 15px);
}

.buildero-our-process.is-stage-mode .pie-process__detail:first-child {
  padding-left: 0;
}

.buildero-our-process.is-stage-mode .pie-process__detail + .pie-process__detail {
  border-left: 1px solid rgba(217, 154, 0, 0.35);
}

.buildero-our-process.is-stage-mode .pie-process__detail-label {
  max-width: 8.5em;
}

/* Shared counter, aligned with the text column */
.buildero-our-process.is-stage-mode .pie-process__counter {
  position: absolute;
  top: 0;
  left: calc(var(--pie-process-media) + var(--pie-process-cols-gap));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  line-height: 1;
}

.buildero-our-process .pie-process__counter-current {
  display: inline-block;
  min-width: 1.3em;
  color: var(--pie-deep-gold);
  font-family: var(--pie-font-display);
  font-size: clamp(40px, 4vh, 36px);
  font-weight: 600;
}

.buildero-our-process .pie-process__counter-total {
  color: #8A8F98;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
}

.buildero-our-process.is-stage-mode .pie-process__counter::after {
  content: "";
  width: 56px;
  height: 1px;
  margin-left: 6px;
  background: rgba(217, 154, 0, 0.5);
}

/* Rail: curved gold connector with one marker per stage. The connector runs
   between the first and last marker centres; its path crests (y = 30 of 60)
   sit exactly on the markers. */
.buildero-our-process.is-stage-mode .pie-process__rail {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  max-width: 1420px;
  margin: clamp(14px, 3.4vh, 36px) auto 0;
}

.buildero-our-process .pie-process__connector {
  position: absolute;
  top: 0;
  left: calc(50% / var(--pie-process-count, 5));
  width: calc(100% - 100% / var(--pie-process-count, 5));
  height: 60px;
  color: var(--pie-gold);
  pointer-events: none;
}

.buildero-our-process .pie-process__line {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.buildero-our-process .pie-process__line--track {
  opacity: 0.3;
}

/* --pie-process-fill: how far the gold line is drawn, as a % of the
   connector width (0% = first marker, 100% = last marker; the path's
   tails run from -12% to 112%). */
.buildero-our-process .pie-process__line--fill {
  clip-path: inset(-60% calc(100% - var(--pie-process-fill, 112%)) -60% -15%);
}

.buildero-our-process .pie-process__markers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--pie-process-count, 5), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.buildero-our-process .pie-process__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 19px 8px 4px; /* dot centre at 30px = connector crest */
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.buildero-our-process .pie-process__marker:focus-visible {
  outline: 2px solid var(--pie-deep-gold);
  outline-offset: 2px;
}

.buildero-our-process .pie-process__marker-dot {
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(217, 154, 0, 0.45);
  border-radius: 50%;
  background: var(--pie-background);
  transform: scale(0.64);
  transition: transform 0.45s var(--pie-ease), background-color 0.45s var(--pie-ease),
    border-color 0.45s var(--pie-ease), box-shadow 0.45s var(--pie-ease);
}

.buildero-our-process .pie-process__marker-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 220px;
  margin-top: clamp(8px, 1.4vh, 14px);
  color: #8A8F98;
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.45s var(--pie-ease);
}

.buildero-our-process .pie-process__marker-num {
  color: rgba(169, 108, 8, 0.6);
  font-size: 11px;
  letter-spacing: 2px;
}

.buildero-our-process .pie-process__marker.is-complete .pie-process__marker-dot {
  border-color: var(--pie-gold);
  background: var(--pie-gold);
}

.buildero-our-process .pie-process__marker.is-complete .pie-process__marker-label {
  color: var(--pie-body);
}

.buildero-our-process .pie-process__marker.is-active .pie-process__marker-dot {
  border-color: var(--pie-gold);
  background: var(--pie-gold);
  box-shadow: 0 0 0 6px rgba(217, 154, 0, 0.16), 0 4px 12px rgba(169, 108, 8, 0.3);
  transform: scale(1);
}

.buildero-our-process .pie-process__marker.is-active .pie-process__marker-label {
  color: var(--pie-charcoal);
}

.buildero-our-process .pie-process__marker.is-active .pie-process__marker-num {
  color: var(--pie-deep-gold);
}

@media (hover: hover) {
  .buildero-our-process .pie-process__marker:hover .pie-process__marker-label {
    color: var(--pie-charcoal);
  }
}

/* --------------------------------------------------------------------------
   Slider mode — phones (< 768px)
   Counter and arrows above a horizontally scrolling, snapping track; each
   slide is ~84% wide so the next one peeks in. The track bleeds to the
   container edges; the section's overflow: hidden keeps the page from
   scrolling sideways. The curved rail below shows numbers only.
   --pie-process-peek      width left for the next slide's preview
   --pie-process-gutter    container padding (track bleed and snap inset)
   -------------------------------------------------------------------------- */
.buildero-our-process.is-slider-mode .pie-process__steps-wrap {
  --pie-process-peek: clamp(44px, 14vw, 64px);
  --pie-process-gutter: clamp(20px, 3vw, 48px);
  --pie-process-badge: 52px;
  --pie-process-cut: 6;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 20px;
  max-width: 560px;
}

.buildero-our-process.is-slider-mode .pie-process__counter {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  line-height: 1;
}

.buildero-our-process.is-slider-mode .pie-process__counter::after {
  content: "";
  width: 40px;
  height: 1px;
  margin-left: 4px;
  background: rgba(217, 154, 0, 0.5);
}

.buildero-our-process .pie-process__nav {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 10px;
}

.buildero-our-process .pie-process__nav-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(217, 154, 0, 0.45);
  border-radius: 50%;
  background: var(--pie-white);
  color: var(--pie-deep-gold);
  box-shadow: 0 4px 12px rgba(96, 56, 0, 0.08);
  cursor: pointer;
  transition: background-color 0.3s var(--pie-ease), color 0.3s var(--pie-ease), opacity 0.3s var(--pie-ease);
}

.buildero-our-process .pie-process__nav-btn svg {
  width: 20px;
  height: 20px;
}

.buildero-our-process .pie-process__nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.buildero-our-process .pie-process__nav-btn:focus-visible {
  outline: 2px solid var(--pie-deep-gold);
  outline-offset: 3px;
}

@media (hover: hover) {
  .buildero-our-process .pie-process__nav-btn:not(:disabled):hover {
    background: var(--pie-gold);
    color: var(--pie-white);
  }
}

.buildero-our-process.is-slider-mode .pie-process__stage {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

.buildero-our-process.is-slider-mode .pie-process__steps {
  display: flex;
  gap: 16px;
  margin-inline: calc(-1 * var(--pie-process-gutter));
  padding: 4px var(--pie-process-gutter) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--pie-process-gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.buildero-our-process.is-slider-mode .pie-process__steps::-webkit-scrollbar {
  display: none;
}

.buildero-our-process.is-slider-mode .pie-process__steps:focus-visible {
  outline: 2px solid var(--pie-deep-gold);
  outline-offset: -2px;
}

/* One slide: photo on top, badge overlapping its lower edge, text below */
.buildero-our-process.is-slider-mode .pie-process__step {
  display: flex;
  flex: 0 0 calc(100% - var(--pie-process-peek));
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  opacity: 0.5;
  transition: opacity 0.5s var(--pie-ease);
}

.buildero-our-process.is-slider-mode .pie-process__step.is-active {
  opacity: 1;
}

.buildero-our-process.is-slider-mode .pie-process__step::before,
.buildero-our-process.is-slider-mode .pie-process__step::after {
  display: none;
}

.buildero-our-process.is-slider-mode .pie-process__media {
  aspect-ratio: 4 / 3;
}

.buildero-our-process.is-slider-mode .pie-process__number {
  font-size: clamp(44px, 13vw, 56px);
}

.buildero-our-process.is-slider-mode .pie-process__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-inline: 4px;
}

.buildero-our-process.is-slider-mode .pie-process__icon {
  margin: calc(var(--pie-process-badge) / -2) 0 0 18px;
}

.buildero-our-process.is-slider-mode .pie-process__step-title {
  margin-top: 16px;
  font-size: clamp(21px, 6vw, 24px);
}

.buildero-our-process.is-slider-mode .pie-process__divider {
  margin-block: 14px;
}

.buildero-our-process.is-slider-mode .pie-process__step-description {
  font-size: 15px;
}

.buildero-our-process.is-slider-mode .pie-process__details {
  margin-top: 18px;
}

/* Rail: numbers only; the slide already carries the title */
.buildero-our-process.is-slider-mode .pie-process__rail {
  position: relative;
  display: block;
  grid-column: 1 / -1;
  grid-row: 3;
}

.buildero-our-process.is-slider-mode .pie-process__marker {
  min-height: 72px;
  padding-inline: 2px;
}

.buildero-our-process.is-slider-mode .pie-process__marker-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.buildero-our-process.is-slider-mode .pie-process__marker-num {
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Entrance-animation guard
   Hidden only while JS is running (html.pie-js) until our-process.js marks
   the section as set up. The failsafe reveals content if the script never runs.
   -------------------------------------------------------------------------- */
.pie-js .buildero-our-process:not(.is-animated) [data-pie-process-reveal] {
  opacity: 0;
  animation: pie-process-failsafe 0.4s ease 2.5s forwards;
}

@keyframes pie-process-failsafe {
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Short desktop viewports: tighten the pinned frame */
@media (max-height: 800px) {
  .buildero-our-process.is-stage-mode .pie-process__rule {
    display: none;
  }

  .buildero-our-process.is-stage-mode .pie-process__description {
    max-width: 700px;
    line-height: 1.45;
  }
}

/* iPad landscape / small laptops */
@media (max-width: 1199px) {
  .buildero-our-process.is-stage-mode .pie-process__steps-wrap {
    --pie-process-media: 58%;
    --pie-process-cols-gap: 32px;
  }

  .buildero-our-process.is-stage-mode .pie-process__detail {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .buildero-our-process.is-stage-mode .pie-process__title {
    font-size: clamp(30px, min(3.6vw, 5.6vh), 44px);
  }

  .buildero-our-process.is-stage-mode .pie-process__step-title {
    font-size: clamp(26px, min(2.8vw, 4.6vh), 34px);
  }

  .buildero-our-process.is-stage-mode .pie-process__step-description {
    font-size: clamp(15px, 2.2vh, 17px);
  }
}

/* iPad portrait */
@media (max-width: 1023px) {
  .buildero-our-process .pie-process__decoration--top {
    width: 300px;
    opacity: 0.1;
  }

  .buildero-our-process .pie-process__steps-wrap {
    --pie-process-rail: 64px;
    --pie-process-badge: 60px;
    --pie-process-row-gap: 56px;
  }

  .buildero-our-process .pie-process__step {
    grid-template-columns: var(--pie-process-rail) minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 24px;
  }

  .buildero-our-process .pie-process__number {
    font-size: 52px;
  }

  .buildero-our-process .pie-process__step-title {
    font-size: 22px;
  }

  .buildero-our-process .pie-process__divider {
    margin-block: 14px;
  }

  .buildero-our-process .pie-process__step-description {
    font-size: 15px;
  }
}

/* Mobile: badge column + photo above text */
@media (max-width: 767px) {
  .buildero-our-process .pie-process__decoration--bottom {
    display: none;
  }

  .buildero-our-process .pie-process__steps-wrap {
    --pie-process-rail: 52px;
    --pie-process-badge: 52px;
    --pie-process-row-gap: 48px;

    max-width: 560px;
  }

  .buildero-our-process .pie-process__step {
    grid-template-columns: var(--pie-process-rail) minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 18px;
  }

  .buildero-our-process .pie-process__icon {
    grid-row: 1;
  }

  .buildero-our-process .pie-process__media {
    grid-row: 1;
  }

  .buildero-our-process .pie-process__step-title {
    grid-column: 2;
    grid-row: 2;
    margin-top: 22px;
    font-size: 22px;
  }

  .buildero-our-process .pie-process__divider {
    grid-column: 2;
    margin-block: 12px;
  }

  .buildero-our-process .pie-process__step-description {
    grid-column: 2;
    grid-row: 4;
  }

  .buildero-our-process .pie-process__details {
    grid-column: 2;
  }
}

/* Mobile portrait */
@media (max-width: 575px) {
  .buildero-our-process .pie-process__decoration--top {
    top: 4px;
    right: -60px;
    width: 220px;
    opacity: 0.07;
  }

  .buildero-our-process .pie-process__rule {
    margin-bottom: 18px;
  }

  .buildero-our-process .pie-process__eyebrow {
    letter-spacing: 4px;
  }

  .buildero-our-process .pie-process__steps-wrap {
    --pie-process-rail: 44px;
    --pie-process-badge: 44px;
    --pie-process-row-gap: 44px;
    --pie-process-cut: 6;
  }

  .buildero-our-process .pie-process__step {
    column-gap: 14px;
  }

  .buildero-our-process .pie-process__icon {
    border-width: 2px;
  }

  .buildero-our-process .pie-process__media {
    aspect-ratio: 4 / 3;
  }

  .buildero-our-process .pie-process__number {
    font-size: 44px;
  }

  .buildero-our-process .pie-process__step-title {
    margin-top: 18px;
    font-size: 21px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: our-process.js sets no mode, so the static stacked
   timeline (full gold line) is shown.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .buildero-our-process *,
  .buildero-our-process *::before,
  .buildero-our-process *::after {
    transition-duration: 0.01ms !important;
  }

  .pie-js .buildero-our-process:not(.is-animated) [data-pie-process-reveal] {
    opacity: 1;
    animation: none;
  }
}

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

/* The original inherits the browser's default line height (the theme body
   uses 1.6), which sizes the eyebrow and the rail labels.
   overflow: clip (overflow: hidden above stays as the fallback) clips the
   bleeding decorations and slider track the same way, but the section is
   not a scroll container: focus or scrollIntoView() calls (e.g. from a
   fixed site header covering the slider arrows) cannot scroll the whole
   section sideways. */
.buildero-our-process {
  overflow: clip;
  line-height: normal;
}

/* Timeline line: colour and thickness come from the widget's Style controls
   (--pie-process-line-color, --pie-process-track-color,
   --pie-process-line-width); the fallbacks are the original values. */
.buildero-our-process .pie-process__step:not(:last-child)::before,
.buildero-our-process .pie-process__step:not(:last-child)::after {
  left: calc(var(--pie-process-rail) / 2 - var(--pie-process-line-width, 2px) / 2);
  width: var(--pie-process-line-width, 2px);
}

.buildero-our-process .pie-process__step:not(:last-child)::before {
  background: var(--pie-process-track-color, rgba(217, 154, 0, 0.2));
}

.buildero-our-process .pie-process__step:not(:last-child)::after {
  background: var(--pie-process-line-color, linear-gradient(180deg, var(--pie-gold), var(--pie-deep-gold)));
}

.buildero-our-process .pie-process__connector {
  color: var(--pie-process-line-color, var(--pie-gold));
}

.buildero-our-process .pie-process__line path {
  stroke-width: var(--pie-process-rail-width, 1.6px);
}

/* Layout switches (Layout & Behaviour controls) */
.buildero-our-process.pie-process--no-line .pie-process__step::before,
.buildero-our-process.pie-process--no-line .pie-process__step::after,
.buildero-our-process.pie-process--no-line .pie-process__connector {
  display: none;
}

.buildero-our-process.pie-process--no-rail .pie-process__rail,
.buildero-our-process.pie-process--no-counter .pie-process__counter {
  display: none;
}

/* Slider mode keeps the arrows on the right when the counter is hidden */
.buildero-our-process.pie-process--no-counter.is-slider-mode .pie-process__nav {
  grid-column: 1 / -1;
  justify-self: end;
}

/* Rail numbers only (step titles stay available to screen readers) */
.buildero-our-process.pie-process--rail-numbers .pie-process__marker-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Site Settings may style every <button>; the rail markers and slider
   arrows keep the design's own look in every state (the gold arrow hover
   above still wins: it is more specific). */
.buildero-our-process .pie-process__marker:hover,
.buildero-our-process .pie-process__marker:focus {
  border: 0;
  background: none;
  color: inherit;
}

.buildero-our-process .pie-process__nav-btn:hover,
.buildero-our-process .pie-process__nav-btn:focus {
  border-color: rgba(217, 154, 0, 0.45);
  background: var(--pie-white);
  color: var(--pie-deep-gold);
}

/* 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-process .pie-process__icon i {
  display: block;
  font-size: calc(var(--pie-process-badge) * 0.42);
  line-height: 1;
}

.buildero-our-process .pie-process__detail-icon i {
  display: block;
  font-size: calc(var(--pie-process-detail-icon) * 0.48);
  line-height: 1;
}

.buildero-our-process .pie-process__icon svg:not(.lucide),
.buildero-our-process .pie-process__detail-icon svg:not(.lucide) {
  fill: currentColor;
}

/* A stage without a photo keeps its slanted cream panel */
.buildero-our-process .pie-process__image--empty::after {
  background: linear-gradient(160deg, rgba(169, 108, 8, 0.28) 0%, rgba(169, 108, 8, 0) 60%);
}

/* Editor notice when no steps are configured */
.buildero-our-process .pie-process__empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px;
  border: 1px dashed rgba(217, 154, 0, 0.5);
  border-radius: 10px;
  color: var(--pie-body);
  font-size: 15px;
  text-align: center;
}