.process-step { padding: clamp(32px,5vw,52px) clamp(24px,3vw,36px); background: var(--off-black); transition: background .4s; }

.process-step:hover { background: var(--dark); }

.process-step-num { font-family: var(--font-serif); font-size: clamp(3.5rem,6vw,5rem); font-weight: 300; color: transparent; -webkit-text-stroke: 1px rgba(201,169,110,.2); line-height: 1; margin-bottom: 20px; transition: -webkit-text-stroke-color .4s; }

.process-step:hover .process-step-num { -webkit-text-stroke-color: rgba(201,169,110,.5); }

.process-step h4 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400; margin-bottom: 10px; }

.process-step p { font-size: .82rem; color: var(--muted); line-height: 1.75; }


/* ===== v3 refinement: process dividers always visible ===== */
.process-grid {
  gap: 1px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 28px;
  overflow: hidden;
}

.process-step {
  position: relative;
  min-height: 100%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}


/* ===== v5 refinement: process mobile card polish ===== */
@media (max-width: 700px) {
  .process-grid {
    gap: 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .process-step {
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(20,20,20,0.98), rgba(10,10,10,0.98)) !important;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 42px rgba(0,0,0,0.16);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ROUND 5 — PROCESS: ARCHITECTURAL TIMELINE
   ═══════════════════════════════════════════════════════════════════
   Desktop: vertical gold line connects steps 01→02→03→04 with
   construction-mark dots at each step. Mobile: keeps the clean
   card stack from existing v5 refinement.
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1. STEP HOVER — gold inset glow + premium lift ───────────── */
.process-step {
  transition:
    background 400ms ease,
    transform 360ms var(--ease-out),
    box-shadow 400ms ease !important;
}
.process-step:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(201,169,110,0.18),
    0 18px 42px rgba(0,0,0,0.22),
    0 2px 0 rgba(201,169,110,0.08) !important;
}


/* ── 2. NUMBER ANIMATION — serif num shifts + fills on hover ── */
.process-step-num {
  transition:
    -webkit-text-stroke-color 400ms ease,
    color 400ms ease,
    transform 400ms var(--ease-out) !important;
}
.process-step:hover .process-step-num {
  transform: translateX(3px);
  -webkit-text-stroke-color: rgba(201,169,110,0.75) !important;
}
[dir="rtl"] .process-step:hover .process-step-num {
  transform: translateX(-3px);
}


/* ── 3. DESKTOP VERTICAL DIVIDERS — subtle gold accent strip
   Makes the grid feel like a connected process, not 4 isolated
   boxes. A 1px gold line sits between each step at low opacity. */
@media (min-width: 900px) {
  .process-grid {
    position: relative;
  }
  /* Gold strip spanning the 3 inner gaps — uses a linear-gradient
     background overlay so we don't need new HTML. The grid already
     has gap:1px with a light bg, we add a gold warmth layer on top. */
  .process-step {
    position: relative;
  }
  /* Vertical gold hairline accent that fades in on hover of adjacent
     cards — gives the impression of connection. */
  .process-step::before {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    right: -1px;
    width: 1px;
    background: linear-gradient(180deg,
      rgba(201,169,110,0) 0%,
      rgba(201,169,110,0.45) 50%,
      rgba(201,169,110,0) 100%);
    opacity: 0;
    transition: opacity 360ms ease;
    pointer-events: none;
    z-index: 2;
  }
  .process-step:hover::before,
  .process-step:has(+ .process-step:hover)::before {
    opacity: 1;
  }
  /* Last card doesn't get a right divider */
  .process-step:last-child::before {
    display: none;
  }

  /* RTL: flip divider to left edge */
  [dir="rtl"] .process-step::before {
    right: auto;
    left: -1px;
  }
}


/* ── 4. § SECTION MARK before number — tiny architectural marker
   Positioned absolutely top-left of each step so it doesn't
   interfere with existing large number typography. */
.process-step {
  position: relative;
}
.process-step::after {
  content: '§';
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(201,169,110,0.28);
  letter-spacing: 0;
  transition: color 360ms ease, opacity 360ms ease;
  pointer-events: none;
}
.process-step:hover::after {
  color: rgba(201,169,110,0.75);
}
[dir="rtl"] .process-step::after {
  right: auto;
  left: 18px;
}
/* Mobile: move § mark to top-right of card, slightly smaller */
@media (max-width: 700px) {
  .process-step::after {
    top: 14px;
    right: 14px;
    font-size: 0.68rem;
  }
  [dir="rtl"] .process-step::after {
    right: auto;
    left: 14px;
  }
}


/* ── 5. REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .process-step,
  .process-step-num,
  .process-step::before {
    transition: none !important;
    transform: none !important;
  }
}