/* ============================================================
   Tiempo — "3 steps to support" process diagram
   Shared by the homepage and all 7 service pages. This block, plus
   its five keyframes (lineSlideIn, dotPopIn, vlineGrow, labelSlideIn,
   ringFill), previously existed as eight byte-identical copies; the
   service-page comment even said "copied 1:1 from homepage".
   ============================================================ */


/* ─── Process Section (copied 1:1 from homepage) ─── */
.process-section {
  background-color: var(--cream-500);
  padding: var(--band) var(--pad-x) var(--band);
}
.process-heading {
  font-family: 'F37 Bobby', var(--font-body);
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  color: var(--red);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  text-align: center;
}
.process-subhead {
  font-size: var(--fs-body);
  color: var(--clockwork);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.5;
  font-family: var(--font-body);
  text-align: center;
}
.process-diagram {
  text-align: center;
  --cd: clamp(32px, 4vw, 72px);
  --cr: calc(var(--cd) / 2);
  display: flex;
  isolation: isolate;
  margin: 16px 0 0;
  position: relative;
}
.process-diagram::before {
  content: '';
  position: absolute;
  left: calc(var(--pad-x) * -1);
  right: calc(var(--pad-x) * -1);
  height: 4px;
  bottom: calc(var(--cr) - 2px);
  background: var(--clockwork);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: right center;
}
.process-section.revealed .process-diagram::before {
  animation: lineSlideIn 0.7s cubic-bezier(0.33,1,0.68,1) 0.35s both;
}
@keyframes lineSlideIn {
  from { transform: scaleX(0); transform-origin: right center; }
  to   { transform: scaleX(1); transform-origin: right center; }
}
.process-diagram .step-col { opacity: 1; }
.process-diagram .zone-wrap {
  opacity: 0;
  transform: scale(0.6);
  position: relative;
}
.process-section.revealed .step-col:nth-child(1) .zone-wrap { animation: dotPopIn 0.4s cubic-bezier(0.33,1,0.68,1) 0.75s both; }
.process-section.revealed .step-col:nth-child(2) .zone-wrap { animation: dotPopIn 0.4s cubic-bezier(0.33,1,0.68,1) 0.9s both; }
.process-section.revealed .step-col:nth-child(3) .zone-wrap { animation: dotPopIn 0.4s cubic-bezier(0.33,1,0.68,1) 1.05s both; }
@keyframes dotPopIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.process-diagram .step-vline {
  transform: scaleY(0);
  transform-origin: bottom center;
}
.process-section.revealed .step-col:nth-child(1) .step-vline { animation: vlineGrow 0.45s cubic-bezier(0.33,1,0.68,1) 1.0s both; }
.process-section.revealed .step-col:nth-child(2) .step-vline { animation: vlineGrow 0.45s cubic-bezier(0.33,1,0.68,1) 1.15s both; }
.process-section.revealed .step-col:nth-child(3) .step-vline { animation: vlineGrow 0.45s cubic-bezier(0.33,1,0.68,1) 1.3s both; }
@keyframes vlineGrow {
  from { transform: scaleY(0); transform-origin: bottom center; }
  to   { transform: scaleY(1); transform-origin: bottom center; }
}
.process-diagram .step-label {
  opacity: 0;
  transform: translateY(12px);
}
.process-section.revealed .step-col:nth-child(1) .step-label { animation: labelSlideIn 0.5s cubic-bezier(0.33,1,0.68,1) 1.25s both; }
.process-section.revealed .step-col:nth-child(2) .step-label { animation: labelSlideIn 0.5s cubic-bezier(0.33,1,0.68,1) 1.4s both; }
.process-section.revealed .step-col:nth-child(3) .step-label { animation: labelSlideIn 0.5s cubic-bezier(0.33,1,0.68,1) 1.55s both; }
@keyframes labelSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-label {
  font-family: 'F37 Bobby', var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  color: var(--clockwork);
  text-align: center;
  padding: 0 8px 10px;
  line-height: 1.1;
}
.step-vline {
  width: 2px;
  flex: 1;
  min-height: clamp(24px, 3.5vw, 60px);
  background: var(--clockwork);
  border-radius: 1px;
  margin-bottom: -8px;
  position: relative;
  z-index: 0;
}
.process-zone {
  width: var(--cd);
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  background: var(--clockwork);
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.process-zone:hover  { transform: scale(1.22); }
.process-zone:focus  { outline: none; }
.process-zone.active { transform: scale(1.16); }
.step-ring {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  pointer-events: none;
  transform: rotate(-90deg);
  z-index: 2;
  overflow: visible;
}
.step-ring circle {
  stroke: var(--honey);
  stroke-width: 8;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
}
.step-ring.filling circle {
  animation: ringFill 3800ms linear forwards;
}
@keyframes ringFill {
  from { stroke-dashoffset: 289; }
  to   { stroke-dashoffset: 0; }
}
.process-zone .circle-num {
  color: var(--crema);
  font-family: 'F37 Bobby', var(--font-body);
  font-weight: var(--fw-light);
  font-size: clamp(18px, 2.8vw, 50px);
  line-height: 1;
  user-select: none;
}
.process-reveal {
  margin-top: 20px;
  height: 72px;
  position: relative;
  overflow: hidden;
}
.process-step-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(8px);
}
.process-step-text.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.process-step-text p {
  font-size: var(--fs-body);
  color: var(--clockwork);
  max-width: 760px;
  line-height: 1.55;
  font-family: var(--font-body);
  font-weight: 400;
  text-align: center;
}
.process-step-text p u {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--clockwork);
}
.process-cta {
  margin-top: 36px;
  text-align: center;
}
.process-cta__btn {
  display: inline-block;
  padding: 10px 26px;
  background-color: var(--red);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.process-cta__btn:hover {
  transform: scale(1.04);
}
@media (max-width: 767px) {
  /* These two belonged to the service pages' own responsive block, but they
     style the diagram, so they live with it — otherwise the homepage's copy
     of the diagram renders its step labels at the desktop size on mobile. */
  .process-diagram .step-col { min-width: 0; }
  .process-diagram .step-label { font-size: var(--fs-h3); }
  .process-reveal { height: auto; min-height: 60px; }
  .process-step-text { position: static; display: none; opacity: 1; transform: none; }
  .process-step-text.visible { display: flex; }
  .process-step-text p { font-size: var(--fs-body); }
  .process-heading { font-size: var(--fs-h2); }
}
@media (max-width: 430px) {
  .process-section { padding: var(--band-sm) var(--pad-x); }
  .process-heading { font-size: var(--fs-h2); }
  .process-reveal { min-height: 50px; }
  .process-step-text p { font-size: var(--fs-body); line-height: 1.5; }
}