/* Two columns only: the timing column is the timeline. */
.retainer-step{grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:44px;margin-bottom:140px;align-items:center}
.step-conferences{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.retainer-step .timeline-card{grid-column:1}
.retainer-step .timing-note{grid-column:2;position:relative;padding:0;gap:0;align-self:stretch;justify-content:center}
.step-conferences .timeline-card{grid-column:2}
.step-conferences .timing-note{grid-column:1}
.time-ring{background:#fff;border-radius:50%;position:relative;z-index:1}
.timing-caption{background:#fff;position:relative;z-index:1;padding:8px 14px;margin:0 0 10px}
.route-badge{display:flex;justify-content:center;align-items:center;width:52px;height:52px;background:#fff;padding:8px;box-sizing:border-box;margin-bottom:20px;z-index:1}
.route-badge img{width:36px;height:36px;object-fit:contain}
.route-events{list-style:none;padding:0;margin:10px 0 0;width:100%;display:grid;gap:28px}
.route-events li{position:relative;display:flex;align-items:center;min-height:24px;padding-left:calc(50% + 16px);box-sizing:border-box;text-align:left;font:400 12px/1.5 'DM Sans',sans-serif;color:#7a8593}
.route-events li i{position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;background:#9aa9b8;border-radius:50%;box-shadow:0 0 0 5px #fff}
.route-events li span{background:white;padding:3px 0;max-width:140px}
.timeline-milestone{margin-bottom:64px;padding:26px 24px}
.timeline-milestone h3{font-size:clamp(22px,2.4vw,29px);margin-bottom:8px}
.timeline-route path{stroke:#c4ced9;stroke-width:1.35}
.timeline-close{margin-top:0}
@media(max-width:800px){
 .retainer-step,.step-conferences{grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:80px}
 .retainer-step .timeline-card{grid-column:1;grid-row:2}
 .retainer-step .timing-note{grid-column:1;grid-row:1;flex-direction:column;align-items:center;padding:0}
 .retainer-step .time-ring{width:160px;height:160px}
 .timing-caption{text-align:center;margin-top:0}
 .route-events{width:min(300px,100%)}
 .route-badge{margin-bottom:12px}
 .timeline-milestone{margin-bottom:40px}
 .timeline-close{flex-direction:column;align-items:center;padding:0;margin:0;gap:8px}
 .timeline-close .closing-puzzle{padding:8px;width:36px;height:36px}
 .timeline-close h3{margin:0;padding:4px 12px}
 .timeline-timing-note{text-align:center;margin-left:0}
}
/* Milestone rhythm: opening badges align with the cards; related diligence stays grouped. */
@media(min-width:801px){
 .retainer-step{align-items:start;margin-bottom:112px}
 .retainer-step .timing-note{justify-content:flex-start}
 .route-badge{margin-bottom:44px;padding-top:0;height:44px;align-items:flex-start}
 .step-preparation .route-events{margin-top:64px}
 .step-execution .route-events{margin-top:48px;gap:54px}
 .step-conferences .timing-note{padding-top:0}
 .step-conferences .route-events{margin-top:36px}
 .step-conferences .timeline-card{align-self:start}
 .timeline-milestone{margin-bottom:48px}
}
.step-conferences .route-events{gap:0}
.step-conferences .route-events li.diligence-start{margin-top:36px}
.step-conferences .route-events li.diligence-next{margin-top:18px}
.step-conferences .route-events li.route-more{margin-top:10px;min-height:24px}
.route-events .route-more span{font-size:22px;line-height:20px;letter-spacing:2px}
.route-events .route-more i{width:4px;height:4px;left:calc(50% - 2px);top:calc(50% - 2px);background:#bec6ce}
@media(max-width:800px){
 .route-badge{margin-bottom:24px}
 .route-events{margin-top:24px}
 .step-execution .route-events{gap:32px}
 .step-conferences .route-events{margin-top:24px}
}
@media(min-width:801px){
 .step-preparation .route-badge{margin-bottom:72px}
 .step-preparation .route-events{margin-top:112px}
 .step-execution .route-badge{margin-bottom:64px}
 .step-execution .route-events{margin-top:72px}
}
.timeline-route path{stroke-linecap:round;stroke-linejoin:round}
/* Solid white charts fully mask the route, including ring gaps. */
.time-ring{background:#fff}
/* Alternate milestone annotations across the same path, without moving the dots. */
.route-events li.event-left{padding-left:0;padding-right:calc(50% + 16px);justify-content:flex-end;text-align:right}
.route-events li.event-right{padding-left:calc(50% + 16px);padding-right:0;justify-content:flex-start;text-align:left}

/* On phones, explain each service before its timing and milestones. */
@media(max-width:800px){
 .retainer-step .timeline-card{grid-row:1;position:relative;z-index:1}
 .retainer-step .timing-note{grid-row:2}
}