/* Scroll-led process, scoped independently of the hero and Services. */
#process.brawnd-process { padding: 0 !important; overflow: visible; background: #181315; color: #f1eee6; }
#process .brawnd-process-pin { padding: clamp(64px, 7vw, 104px) 0; }
#process #brawndProcessTitle { margin: 0 0 clamp(32px, 4vw, 60px); font-size: clamp(36px, 4vw, 58px); }
#process .brawnd-process-window { overflow: hidden; padding: 8px 0 12px; }
#process .brawnd-process-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); list-style: none; padding: 0; margin: 0; }
#process .brawnd-process-track li { min-width: 0; position: relative; padding-bottom: 36px; }
#process .brawnd-process-number { display: block; color: #a79b9f; font-size: 11px; letter-spacing: .12em; margin-bottom: 22px; }
#process .brawnd-process-track h3 { font-size: clamp(22px, 2vw, 29px); margin: 0 0 16px; }
#process .brawnd-process-track p { font-size: 14px; line-height: 1.65; color: #c1b8ba; margin: 0; max-width: 32ch; }
#process .brawnd-process-line { height: 1px; position: relative; background: rgba(241,238,230,.16); margin: 12px 0 36px; }
#process .brawnd-process-line span { display: block; height: 100%; background: #d8c9cc; transform-origin: left; }
#process .brawnd-process-track li::after { content: ''; position: absolute; left: 0; bottom: -17px; width: 7px; height: 7px; border-radius: 50%; background: #d8c9cc; }
#process.is-process-motion { height: 190vh; height: 190svh; }
#process.is-process-motion .brawnd-process-pin { position: sticky; top: 86px; }
@media (max-width: 760px) {
  #process .brawnd-process-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  #process .brawnd-process-track p { font-size: 13px; }
  #process.is-process-motion { height: 260vh; height: 260svh; }
  #process.is-process-motion .brawnd-process-track { display: flex; }
  #process.is-process-motion .brawnd-process-track li { flex: 0 0 85%; }
  #process:not(.is-process-motion) .brawnd-process-track { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #process.is-process-motion { height: auto; }
  #process.is-process-motion .brawnd-process-pin { position: static; }
}

/* Keep the stage within the viewport rather than disabling its scroll sequence. */
#process.brawnd-process { background: #181315 !important; }
#process #brawndProcessTitle { font-size: clamp(34px, 3.5vw, 54px) !important; }
#process.is-process-motion { height: 700vh; height: 700svh; }
#process.is-process-motion .brawnd-process-pin {
  box-sizing: border-box; height: calc(100svh - 104px);
  padding: clamp(24px, 4vh, 48px) 0;
  display: flex; align-items: center;
}
#process.is-process-motion #brawndProcessTitle { margin-bottom: clamp(28px, 5vh, 60px); }
#process .brawnd-process-track h3 { font-size: clamp(21px, 1.8vw, 28px) !important; }
#process .brawnd-process-track li { will-change: opacity, transform; }
#process .brawnd-process-track li::after { opacity: inherit; }
@media (max-width: 760px) {
  #process.is-process-motion { height: 460vh; height: 460svh; }
  #process.is-process-motion .brawnd-process-track li { flex-basis: 100%; }
  #process.is-process-motion .brawnd-process-track { gap: 32px; }
  #process .brawnd-process-track p { max-width: 38ch; }
  #process.is-process-motion .brawnd-process-pin { padding: 24px 0; }
}

#process.is-process-motion .brawnd-process-track li::after { display: none; }
#process .brawnd-process-dot { display: none; }
#process.is-process-motion .brawnd-process-dot {
  display: block; position: absolute; top: 50%; width: 7px; height: 7px;
  border-radius: 50%; background: #65575b; transform: translate(-50%, -50%);
}
#process.is-process-motion .brawnd-process-dot.is-reached { background: #e3d8da; }

#process .brawnd-process-track { position: relative; }

/* Compact heading; phones use a natural vertical timeline, including desktop mode. */
#process #brawndProcessTitle {
  font-size: clamp(26px, 2.6775vw, 41.4px) !important;
  /* Give Georgia a little more presence without jumping to its heavy bold face. */
  -webkit-text-stroke: .22px currentColor;
}
#process.is-process-motion #brawndProcessTitle { margin-bottom: clamp(20px, 2.8vh, 34px); }
#process.is-process-vertical { height: auto; }
#process.is-process-vertical .brawnd-process-pin {
  position: static; display: block; height: auto; padding: 56px 0 64px;
}
#process.is-process-vertical #brawndProcessTitle { margin-bottom: 28px; }
#process.is-process-vertical .brawnd-process-window { position: relative; overflow: visible; padding: 0 0 36px; }
#process.is-process-vertical .brawnd-process-track {
  display: grid; grid-template-columns: 1fr; gap: clamp(80px, 12vh, 120px);
  margin-left: 32px; transform: none !important;
}
#process.is-process-vertical .brawnd-process-track li { padding: 0; }
#process.is-process-vertical .brawnd-process-track li::after { display: none; }
#process.is-process-vertical .brawnd-process-track p { max-width: 48ch; }
#process.is-process-vertical .brawnd-process-line {
  position: absolute; left: 4px; top: 4px; width: 1px !important; margin: 0;
  transform: none !important;
}
#process.is-process-vertical .brawnd-process-line span { transform-origin: top; }
#process.is-process-vertical .brawnd-process-dot {
  display: block; position: absolute; left: 50%; width: 7px; height: 7px;
  border-radius: 50%; background: #65575b; transform: translate(-50%, -50%);
}
#process.is-process-vertical .brawnd-process-dot.is-reached { background: #e3d8da; }

/* A completed stage gains a frame without changing its dimensions. */
#process .brawnd-process-card-frame {
  position: absolute; inset: -10px -10px 20px; width: calc(100% + 20px);
  height: calc(100% - 10px); pointer-events: none; overflow: visible;
}
#process .brawnd-process-card-frame rect {
  stroke: rgba(222, 205, 211, .38); stroke-width: 1px;
  stroke-dasharray: 1; stroke-dashoffset: 1; fill: rgba(241, 238, 230, 0);
  transition: stroke-dashoffset .65s ease, fill .45s ease;
}
#process .is-process-complete .brawnd-process-card-frame rect {
  stroke-dashoffset: 0; fill: rgba(241, 238, 230, .025);
}
#process.is-process-vertical .brawnd-process-card-frame {
  inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px);
}
@media (prefers-reduced-motion: reduce) {
  #process .brawnd-process-card-frame rect { transition: none; }
}

#process .brawnd-process-track li { isolation: isolate; }
#process .brawnd-process-card-frame { z-index: -1; }

#process:not(.is-process-vertical) .brawnd-process-window { padding: 16px 12px 12px; }
#process:not(.is-process-vertical) .brawnd-process-line { margin-left: 12px; }

/* Size the sticky desktop stage to its content, so its final position leaves
   only deliberate breathing room before the FAQ divider. Scroll travel still
   comes from the section height and the measured pin height in the existing JS. */
#process.is-process-motion:not(.is-process-vertical) .brawnd-process-pin {
  height: auto;
  min-height: 0;
  display: block;
  padding-top: clamp(32px, 4vh, 48px);
  padding-bottom: clamp(80px, 7vw, 110px);
}