/* White editorial process page, using the site's shared typography and navigation. */
.service-page{width:calc(100% - 80px);max-width:1200px;margin-inline:auto;padding-top:158px;padding-bottom:110px}
.service-intro,.creative-process__intro{max-width:960px;margin-inline:auto}
.service-intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start}
.service-intro h1,.creative-process__intro h2{margin:0;font-family:var(--serif);font-size:clamp(32px,2.8vw,42px);font-weight:400;line-height:1.1;letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance}
.service-intro .process-link{margin-top:31px}
.service-intro__copy h2{margin:0 0 24px;font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.15;letter-spacing:-.015em;text-wrap:pretty}
.service-intro__copy>p{color:#65695f;font-size:16px;line-height:1.7;text-wrap:pretty}
.creative-process{margin-top:112px}
.creative-process__intro>p{margin-top:20px;color:#74766d;font-family:var(--serif);font-size:21px;line-height:1.4;text-wrap:pretty}
.process-step-nav{display:flex;justify-content:space-between;gap:20px;margin-top:32px;padding-block:16px;border-block:1px solid #e6e3dc}
.process-step-nav a{position:relative;padding-block:7px;font-size:11.5px;line-height:1.5;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap}
.process-step-nav a::after{content:'';position:absolute;inset:auto 0 1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.process-step-nav a:hover::after,.process-step-nav a:focus-visible::after{transform:scaleX(1)}
.process-steps{display:grid;gap:120px;margin-top:88px}
.process-step{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);grid-template-areas:'copy visual';align-items:center;gap:64px;scroll-margin-top:24px}
.process-step:nth-child(even){grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);grid-template-areas:'visual copy'}
.process-step__copy{grid-area:copy}
.process-step__number{margin-bottom:26px;color:#8c9086;font-family:var(--sans);font-size:52px;font-weight:400;line-height:1;letter-spacing:-.04em}
.process-step h3{margin:0 0 22px;font-family:var(--serif);font-size:clamp(28px,2.45vw,36px);font-weight:400;line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.process-step__lead{margin-bottom:18px;font-size:16px;line-height:1.5;text-wrap:pretty}
.process-step__lead strong{font-weight:500}
.process-step__description{color:#65695f;font-size:16px;line-height:1.7;text-wrap:pretty}
.process-step__description+.process-step__description{margin-top:18px}
.process-step__visual{grid-area:visual;min-width:0}
.process-step__visual>a{display:block}
.process-step__visual img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#f1eee7}
.process-step__image-link{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;color:#65695f;font-size:10px;line-height:1.5;letter-spacing:.045em;text-transform:uppercase}
.process-step__image-link svg{width:16px;height:16px;transition:transform .25s ease}
.process-step__visual a:hover svg,.process-step__visual a:focus-visible svg{transform:translate(2px,-2px)}

@media(max-width:1050px){
    .service-page{width:calc(100% - 60px);padding-top:145px}
    .service-intro{gap:40px}
    .process-step,.process-step:nth-child(even){gap:40px}
}
@media(max-width:900px){
    .service-intro{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:36px}
    .service-intro__copy h2{font-size:28px}
    .process-steps{gap:88px;margin-top:64px}
    .process-step,.process-step:nth-child(even){grid-template-columns:1fr;grid-template-areas:'copy' 'visual';gap:28px}
    .process-step__copy{max-width:650px}
    .process-step__number{margin-bottom:22px;font-size:44px}
}
@media(max-width:640px){
    .service-page{width:calc(100% - 48px);padding-top:131px;padding-bottom:65px}
    .service-intro{grid-template-columns:1fr;gap:38px}
    .service-intro h1,.creative-process__intro h2{font-size:32px;line-height:1.08}
    .service-intro .process-link{margin-top:22px}
    .service-intro__copy h2{margin-bottom:20px;font-size:28px}
    .creative-process{margin-top:72px}
    .creative-process__intro>p{font-size:20px}
    .process-step-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 20px;margin-top:26px}
    .process-step-nav a{justify-self:start}
    .process-steps{gap:72px;margin-top:52px}
    .process-step__number{font-size:40px}
    .process-step h3{font-size:30px}
}