/* Homepage-only PHP port of the approved Vercel process timeline. */
body.homepage-refresh-page #stages.homepage-process {
    --process-ink: #3b4173;
    --process-accent: #c1492e;
    --playback-duration: 9600ms;
    color: var(--process-ink);
    font-family: Roboto, Arial, sans-serif;
    scroll-margin-top: 110px;
}
body.homepage-refresh-page #stages.homepage-process .s-stages__container { padding-inline: 0; }
body.homepage-refresh-page #stages .homepage-process__title {
    margin: 0 0 clamp(44px, 5vw, 70px);
    color: var(--process-ink) !important;
    font: 700 clamp(36px, 2.75vw, 44px)/1.1 Roboto, Arial, sans-serif;
    letter-spacing: -.035em;
    text-align: left;
    text-transform: none;
}
.homepage-process__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.homepage-process__step { min-width: 0; }
.homepage-process__number { display: block; margin-bottom: 12px; font-size: clamp(34px, 3.4vw, 48px); font-weight: 650; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
body.homepage-refresh-page #stages .homepage-process__number { color: var(--process-number, #8b8ca1) !important; }
.homepage-process__step:first-child .homepage-process__number { --process-number: var(--process-accent); }
.homepage-process__track { position: relative; height: 64px; margin-bottom: 20px; }
.homepage-process__track::before { position: absolute; inset: 9px 0 auto; height: 9px; border-bottom: 1px solid #a5a6b7; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), #c2c3d0 calc(12.5% - 1px), #c2c3d0 12.5%); content: ''; }
.homepage-process__fader { position: absolute; z-index: 1; top: 0; left: 0; display: grid; width: 20px; height: 37px; place-items: center; border: 1px solid #c9b9a9; border-radius: 8px; background: linear-gradient(100deg, #fffdf8, #faf4e9 44%, #e9dccb); box-shadow: inset 0 1px 1px #fff, inset 0 -2px 2px #7551301f, 0 3px 0 #dbd0c3, 0 5px 8px #513b2521; pointer-events: none; }
.homepage-process__fader i { width: 10px; height: 2px; border-radius: 1px; background: var(--process-accent); box-shadow: 0 1px 0 #ffffffcc; }
.homepage-process__playhead { z-index: 4; border-color: #ad452c; background: linear-gradient(100deg, #d97550, var(--process-accent) 58%, #a63c24); box-shadow: inset 0 1px 1px #efa586, inset 0 -2px 2px #68211033, 0 3px 0 #9f3b25, 0 7px 13px #853d2238; will-change: transform; }
.homepage-process__playhead i { background: #fff4e9; box-shadow: none; }
.homepage-process__ghost { z-index: 2; opacity: .46; filter: saturate(.45) contrast(.88); }
.homepage-process__ghost::after { position: absolute; inset: -8px; border: 1px solid #c1492e7a; border-radius: 13px; content: ''; opacity: 0; transform: scale(.72); }
.homepage-process[data-playing="true"] .homepage-process__ghost { animation: homepage-process-ghost .76s var(--hit-delay) cubic-bezier(.16, 1, .3, 1) both; }
.homepage-process[data-playing="true"] .homepage-process__ghost::after { animation: homepage-process-ring .76s var(--hit-delay) cubic-bezier(.16, 1, .3, 1) both; }
.homepage-process[data-playing="true"] .homepage-process__step:not(:first-child) .homepage-process__number { animation: homepage-process-reached .62s var(--hit-delay) cubic-bezier(.16, 1, .3, 1) both; }
.homepage-process__time { position: absolute; top: 47px; left: 0; color: #8b8ca1; font-size: 12px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
body.homepage-refresh-page #stages .homepage-process__time,
body.homepage-refresh-page #stages .homepage-process__caption span { color: #8b8ca1 !important; }
.homepage-process__copy { padding-right: clamp(20px, 3vw, 46px); }
.homepage-process__step:last-child .homepage-process__copy { padding-right: 0; }
body.homepage-refresh-page #stages .homepage-process__copy h3 { margin: 0 0 14px; color: var(--process-ink) !important; font: 700 clamp(21px, 2.15vw, 30px)/1.15 Roboto, Arial, sans-serif; letter-spacing: -.045em; text-transform: none; }
body.homepage-refresh-page #stages .homepage-process__copy p { max-width: 25ch; margin: 0; color: var(--process-ink) !important; font: 400 clamp(16px, 1.2vw, 18px)/1.65 Roboto, Arial, sans-serif; text-wrap: pretty; }
body.homepage-refresh-page #stages .homepage-process__copy a { border-radius: 3px; color: inherit !important; text-decoration: underline; text-decoration-color: #c1492e80; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.homepage-refresh-page #stages .homepage-process__copy a:hover { color: var(--process-accent) !important; }
.homepage-process__copy a:focus-visible { outline: 2px solid var(--process-accent); outline-offset: 4px; }
.homepage-process__waveform { position: relative; width: 100%; height: clamp(88px, 9vw, 132px); margin: clamp(30px, 4vw, 58px) 0 28px; color: var(--process-accent); mask-image: linear-gradient(90deg, #0004, #000b); -webkit-mask-image: linear-gradient(90deg, #0004, #000b); pointer-events: none; }
.homepage-process__waveform svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
body.homepage-refresh-page #stages .homepage-process__waveform,
body.homepage-refresh-page #stages .homepage-process__waveform svg,
body.homepage-refresh-page #stages .homepage-process__waveform path { color: var(--process-accent) !important; }
.homepage-process__waveform-ghost { opacity: .13; }
.homepage-process__waveform-live { opacity: .78; clip-path: inset(0 100% 0 0); }
.homepage-process__waveform-live path { transform-box: fill-box; transform-origin: center; }
.homepage-process[data-playing="true"] .homepage-process__waveform-live { animation: homepage-process-reveal var(--playback-duration) .25s linear forwards; }
.homepage-process[data-playing="true"] .homepage-process__waveform-live path { animation: homepage-process-breathe 1.92s ease-in-out 5; }
.homepage-process__caption { display: flex; gap: 28px; align-items: center; color: #8b8ca1; }
.homepage-process__caption span { flex: none; font-size: 12px; font-weight: 500; line-height: 1.9; letter-spacing: .18em; text-transform: uppercase; }
.homepage-process__caption i { height: 1px; flex: 1; background: #c2c3d0; }

@media (max-width: 760px) {
    body.homepage-refresh-page #stages .homepage-process__title { margin-bottom: 38px; font-size: clamp(34px, 7vw, 44px); }
    .homepage-process__steps { grid-template-columns: 1fr; }
    .homepage-process__step { position: relative; display: grid; min-height: 132px; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; padding-bottom: 34px; }
    .homepage-process__step:last-child { padding-bottom: 0; }
    .homepage-process__number { margin: 0; font-size: 30px; }
    .homepage-process__track { position: absolute; top: 44px; bottom: 6px; left: 8px; width: 20px; height: auto; margin: 0; }
    .homepage-process__track::before { inset: 0 auto 0 9px; width: 8px; height: auto; border-bottom: 0; border-left: 1px solid #a5a6b7; background: repeating-linear-gradient(0deg, transparent 0 11px, #c2c3d0 11px 12px); }
    .homepage-process__fader { width: 19px; height: 32px; }
    .homepage-process__time { display: none; }
    .homepage-process__copy { grid-column: 2; padding: 0; }
    body.homepage-refresh-page #stages .homepage-process__copy h3 { margin-bottom: 8px; font-size: 23px; }
    body.homepage-refresh-page #stages .homepage-process__copy p { max-width: 32ch; font-size: 16px; line-height: 1.6; }
    .homepage-process__waveform { height: 72px; margin: 32px 0 18px; }
    .homepage-process__caption { gap: 14px; }
    .homepage-process__caption span { font-size: 10px; letter-spacing: .14em; }
}
@keyframes homepage-process-ghost { 0% { opacity: .46; transform: translateY(0) scale(1); } 38% { opacity: .74; transform: translateY(-4px) scale(.88); } 64% { opacity: .26; transform: translateY(2px) scale(1.07); } 100% { opacity: .14; transform: translateY(0) scale(1); } }
@keyframes homepage-process-ring { 0%, 28% { opacity: 0; transform: scale(.72); } 48% { opacity: .62; } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes homepage-process-reached { 0% { --process-number: #8b8ca1; transform: translateY(0) scale(1); } 48% { --process-number: var(--process-accent); transform: translateY(-3px) scale(1.04); } 100% { --process-number: var(--process-accent); transform: translateY(0) scale(1); } }
@keyframes homepage-process-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes homepage-process-breathe { 0%, 100% { opacity: .72; transform: scaleY(.82); } 46% { opacity: .96; transform: scaleY(1.04); } 62% { opacity: .82; transform: scaleY(.92); } }
@media (prefers-reduced-motion: reduce) {
    .homepage-process__playhead { will-change: auto; }
    .homepage-process[data-playing="true"] .homepage-process__ghost,
    .homepage-process[data-playing="true"] .homepage-process__ghost::after,
    .homepage-process[data-playing="true"] .homepage-process__number,
    .homepage-process[data-playing="true"] .homepage-process__waveform-live,
    .homepage-process[data-playing="true"] .homepage-process__waveform-live path { animation: none; }
    .homepage-process__waveform-live { opacity: .42; clip-path: inset(0); }
}
.homepage-process[data-process-static="true"] .homepage-process__waveform-live { opacity: .42; clip-path: inset(0); }