/* The pink thread belongs to the services overview only. */
.s-overview .o-pink{color:var(--pink)}
.s-overview .s-service-nav>a:is(:hover,:focus-visible)>span,
.s-overview .s-service-nav>a:is(:hover,:focus-visible)>small,
.s-overview .s-hero .s-cta:is(:hover,:focus-visible){color:var(--pink)}
.s-overview .s-cta:is(:hover,:focus-visible) svg path{fill:currentColor}
.s-overview .s-service-nav>a>small{transition:color .25s}
.s-overview .o-journey{padding-block:65px 75px;border-block:1px solid #0003}
.s-overview .o-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:45px}
.s-overview .o-heading>p{margin:0}
.s-overview .o-route{position:relative}
.s-overview .o-thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.s-overview .o-thread path{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.s-overview .o-thread-base{stroke:#f0b4bd30}
.s-overview .o-thread-draw{stroke:var(--pink)}
.s-overview .o-step{position:relative;display:grid;grid-template-columns:42% 16% 42%;align-items:center;min-height:290px;padding-block:35px}
.s-overview .o-step-copy{grid-column:1;grid-row:1}
.s-overview .o-step:nth-of-type(even) .o-step-copy{grid-column:3}
.s-overview .o-step h3{font:clamp(28px,3.2vw,46px)/1.12 Anton,sans-serif;margin:12px 0 20px;max-width:17ch}
.s-overview .o-step p{font-size:15px;line-height:1.65;margin:0;max-width:43ch}
.s-overview .o-step .o-label{font-family:Anton,sans-serif;font-size:21px}
.s-overview .o-step .o-outcome{margin-top:20px;padding-top:14px;border-top:1px solid #0002;font-size:13px;font-weight:700}
.s-overview .o-node{position:absolute;width:18px;height:18px;border:4px solid var(--pink);border-radius:50%;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%)}
.s-overview .o-step.is-reached .o-node{background:var(--pink);box-shadow:0 0 0 7px #f0b4bd25}
@media(max-width:700px){
.s-overview .o-journey{padding-block:42px}
.s-overview .o-heading{display:block;margin-bottom:24px}
.s-overview .o-heading h2{font-size:36px}
.s-overview .o-heading>p{margin-top:20px;font-size:13px}
.s-overview .o-step{display:block;min-height:255px;padding:30px 0 30px 48px}
.s-overview .o-step h3{font-size:32px}
.s-overview .o-step p{font-size:14px}
.s-overview .o-node{left:12px;width:14px;height:14px;border-width:3px}
.s-overview .o-thread path{stroke-width:6}
}
@media(prefers-reduced-motion:reduce){.s-overview .o-thread-draw{stroke-dashoffset:0!important}}
.s-overview .s-progress-top{background:var(--pink)}

/* Pink interactions and staggered stops, close to the corresponding copy. */
.s-overview .s-goals>a:is(:hover,:focus-visible) h3{color:var(--pink)}
.s-overview .s-goals h3{transition:color .25s}
@media(min-width:701px){
.s-overview .o-step:nth-of-type(odd) .o-node{left:46%}
.s-overview .o-step:nth-of-type(even) .o-node{left:54%}
}

/* Give the opening loop its own space above the process heading. */
.s-overview .o-journey{padding-top:160px}
.s-overview .o-heading{display:grid;grid-template-columns:62% 20%;justify-content:space-between;margin-bottom:110px;align-items:start;gap:0}
.s-overview .o-heading h2{font-size:clamp(36px,4.2vw,62px)}
.s-overview .o-heading>p{padding-top:12px}
@media(max-width:700px){
.s-overview .o-journey{padding-top:130px}
.s-overview .o-heading{display:block;padding-right:32px;margin-bottom:110px}
.s-overview .o-heading h2{font-size:36px}
.s-overview .o-heading>p{padding-top:0}
}
/* Motion study: one rhythm for type, ink and the existing journey. */
body.s-overview .o-motion-line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
body.s-overview .o-motion-wordline{display:block;will-change:auto}
body.s-overview .s-service-nav>a{position:relative;isolation:isolate}
body.s-overview .s-service-nav>a>span{display:inline-block;transition:transform .45s cubic-bezier(.16,1,.3,1),color .25s;transform-origin:left center}
body.s-overview .s-service-nav>a:hover>span,body.s-overview .s-service-nav>a:focus-visible>span{transform:translateX(9px)}
body.s-overview .s-service-nav>a:after{content:"";position:absolute;bottom:5px;left:0;width:min(280px,70%);height:7px;background:#f0b4bd;clip-path:polygon(0 48%,17% 25%,48% 35%,76% 0,100% 26%,88% 65%,50% 85%,20% 74%,0 100%);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)}
body.s-overview .s-service-nav>a:is(:hover,:focus-visible):after{transform:scaleX(1)}
body.s-overview .o-heading h2{position:relative}
body.s-overview .o-heading h2:after{content:"";display:block;width:60%;max-width:280px;height:8px;margin-top:18px;background:#f0b4bd;clip-path:polygon(0 55%,18% 20%,55% 37%,92% 0,100% 30%,75% 70%,25% 95%,0 80%);transform:scaleX(0);transform-origin:left;transition:transform .65s cubic-bezier(.16,1,.3,1)}
body.s-overview .o-heading.o-ink-visible h2:after{transform:scaleX(1)}
body.s-overview .o-node{transition:background .25s,box-shadow .4s}
body.s-overview .o-step.is-reached .o-node{animation:o-node-arrive .65s cubic-bezier(.16,1,.3,1) both}
@keyframes o-node-arrive{0%{box-shadow:0 0 0 0 #f0b4bd70}60%{box-shadow:0 0 0 13px #f0b4bd20}100%{box-shadow:0 0 0 7px #f0b4bd25}}
body.s-overview .s-goals>a{transition:transform .4s cubic-bezier(.16,1,.3,1)}
body.s-overview .s-goals>a:is(:hover,:focus-visible){transform:translateY(-4px)}
@media(max-width:700px){body.s-overview .s-service-nav>a:hover>span{transform:none}}
@media(prefers-reduced-motion:reduce){body.s-overview .s-service-nav>a>span,body.s-overview .s-service-nav>a:after,body.s-overview .o-heading h2:after,body.s-overview .s-goals>a,body.s-overview .o-node{transition:none;animation:none!important}body.s-overview .o-heading h2:after{transform:none}}
body.s-overview.motion-paused .o-node{animation:none!important}body.s-overview.motion-paused .s-service-nav>a>span,body.s-overview.motion-paused .s-goals>a{transform:none;transition:none}body.s-overview.motion-paused .o-heading h2:after{transform:none;transition:none}
/* Stronger motion uses the existing type and rows, not additional sections. */
body.s-overview .o-motion-line{perspective:750px;overflow:clip}
body.s-overview .o-motion-wordline{transform-origin:center bottom}
body.s-overview .s-service-nav>a{padding:25px 18px;overflow:hidden;transition:padding .55s cubic-bezier(.16,1,.3,1)}
body.s-overview .s-service-nav>a:before{content:"";position:absolute;inset:0;background:#000;z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.16,1,.3,1)}
body.s-overview .s-service-nav>a>span{transition:font-size .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),color .3s;position:relative}
body.s-overview .s-service-nav>a:is(:hover,:focus-visible,.o-row-active){padding-block:42px}
body.s-overview .s-service-nav>a:is(:hover,:focus-visible,.o-row-active):before{transform:scaleY(1)}
body.s-overview .s-service-nav>a:is(:hover,:focus-visible,.o-row-active)>span{color:#f0b4bd;transform:translateX(12px);font-size:clamp(50px,7.5vw,108px)}
body.s-overview .s-service-nav>a:is(:hover,:focus-visible,.o-row-active)>small{color:#fff}
body.s-overview .s-service-nav>a:after{left:30px;bottom:19px;width:55%;height:8px;transition:transform .65s cubic-bezier(.16,1,.3,1)}
body.s-overview .s-service-nav>a.o-row-active:after{transform:scaleX(1)}
body.s-overview .o-step h3{transition:transform .65s cubic-bezier(.16,1,.3,1),color .4s;transform-origin:left center}
body.s-overview .o-step.o-step-active h3{transform:translateX(8px) scale(1.055);color:#000}
body.s-overview .o-step .o-label{display:inline-block;background:linear-gradient(#f0b4bd,#f0b4bd) 0 100%/0 45% no-repeat;transition:background-size .65s cubic-bezier(.16,1,.3,1)}
body.s-overview .o-step.o-step-active .o-label{background-size:100% 45%}
body.s-overview .o-step.o-step-active .o-node{box-shadow:0 0 0 12px #f0b4bd33;background:#f0b4bd}
body.s-overview .s-hero h1{transform:translateX(calc(var(--o-hero-drift,0)*-12px));transform-origin:left center}
body.s-overview .s-hero h1 .o-motion-line:nth-child(2){transform:translateX(calc(var(--o-hero-drift,0)*26px))}
@media(max-width:700px){body.s-overview .s-service-nav>a{padding:22px 12px}body.s-overview .s-service-nav>a:is(:hover,:focus-visible,.o-row-active){padding-block:32px}body.s-overview .s-service-nav>a:is(:hover,:focus-visible,.o-row-active)>span{font-size:clamp(42px,10vw,62px);transform:translateX(5px)}body.s-overview .s-service-nav>a:after{left:17px;bottom:12px}body.s-overview .o-step.o-step-active h3{transform:translateX(4px) scale(1.025)}}
@media(prefers-reduced-motion:reduce){body.s-overview .s-service-nav>a,body.s-overview .s-service-nav>a:before,body.s-overview .s-service-nav>a>span,body.s-overview .o-step h3,body.s-overview .o-step .o-label{transition:none}body.s-overview .s-hero h1,body.s-overview .s-hero h1 .o-motion-line:nth-child(2){transform:none}}
body.s-overview.motion-paused .s-hero h1,body.s-overview.motion-paused .s-hero h1 .o-motion-line:nth-child(2){transform:none}

/* Service rows retain the white canvas and use only the brand-pink accent. */
body.s-overview .s-service-nav>a:before{display:none}
body.s-overview .s-service-nav>a:is(:hover,:focus-visible,.o-row-active)>small{color:#000}
