/* v42: scoped WEB service, extensible WORKS, FLOW and PRICE. */
#business .business-grid{grid-template-columns:minmax(0,1fr)}
#business #web-service{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,4vw,64px);align-items:center}
#business #web-service figcaption{margin:0;min-width:0}
#business .business-tilt-frame>.photo>img{transform:scale(1.04);transition:transform 1.5s cubic-bezier(.22,1,.36,1)}
#business #web-service.seen .photo>img{transform:scale(1)}
#business #web-service figcaption{opacity:0;translate:0 16px;transition:opacity .8s .35s,translate .8s .35s}
#business #web-service.seen figcaption{opacity:1;translate:0 0}
/* WORKS uses the original grid, image ratios, colors and link shapes. */
#works .work-grid{align-items:start}
#works .work-grid>figure{min-width:0}
#works .work-grid>figure:nth-child(even){padding-top:130px}
#works .work-grid .work-media{overflow:hidden;border-radius:8px;isolation:isolate}
#works .work-media::after{content:'';position:absolute;inset:0;z-index:2;background:var(--paper);transform:translateY(0);transition:transform 1s cubic-bezier(.76,0,.24,1)}
#works .work-media::after{background:#121310}
#works .work-grid>.seen .work-media::after{transform:translateY(-101%)}
#works .work-media>img:not(.ys-logo){transform:scale(1.04);transition:transform 1.5s cubic-bezier(.22,1,.36,1)}
#works .work-grid>.seen .work-media>img:not(.ys-logo){transform:scale(1)}
#works .work-grid figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-top:22px;margin:0}
#works .work-label{opacity:0;transform:translateY(14px);transition:opacity .8s .25s,transform .8s .25s}
#works .seen .work-label{opacity:1;transform:none}
#works .work-label h3{font-size:clamp(23px,2.4vw,32px);font-weight:400;line-height:1.4;margin:0;letter-spacing:-.03em}
#works .work-label p{margin:8px 0 0;font-size:12px;line-height:1.8}
#works .work-category{letter-spacing:.1em;color:#62635d}
#works .work-label .work-description{font-size:14px;letter-spacing:0;max-width:48em}
#works figcaption>.pjk-link{margin:0}
/* Shared type hierarchy for the two new sections only. */
.web-section-heading{margin-bottom:64px}
.web-section-kicker{margin:0 0 14px;font-size:12px;line-height:1.4;letter-spacing:.16em;font-weight:600;color:#A62B38}
.web-section-heading h2{font-size:clamp(32px,3.5vw,48px);font-weight:400;letter-spacing:-.04em;line-height:1.4;margin:0}
.web-flow{border-top:1px solid #cfcec6}
.flow-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 0}
.flow-step{position:relative;min-width:0;padding:28px 32px 0 0;border-top:1px solid #cfcec6;transition-delay:var(--step-delay,0s)}
.flow-step::before{content:'';position:absolute;left:0;top:-3px;width:5px;height:5px;border-radius:50%;background:#A62B38}
.flow-number{display:flex;align-items:baseline;gap:10px;margin-bottom:22px;color:#A62B38}
.flow-number>span{font-size:10px;letter-spacing:.12em}
.flow-number>strong{font-size:clamp(56px,5.2vw,76px);font-weight:300;line-height:1;letter-spacing:-.04em}
.flow-step h3{margin:0 0 12px;font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.6}
.flow-step>p{font-size:14px;line-height:1.95;margin:0;max-width:30em;overflow-wrap:break-word;line-break:strict}















@media(min-width:901px) and (max-width:1100px){.header-navigation{gap:18px}}
@media(max-width:900px){
#business #web-service{display:block}#business #web-service figcaption{margin-top:24px}
.flow-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
#works .work-grid>figure:nth-child(even){padding-top:0}
.web-section-heading{margin-bottom:40px}.web-section-heading h2{font-size:32px}
.flow-list{display:block;padding-left:9px}
.flow-step{border-top:0;border-left:1px solid #cfcec6;padding:0 0 38px 28px;transition-delay:0s}
.flow-step::before{left:-3px;top:8px}.flow-step:last-child{padding-bottom:0}
.flow-number{margin-bottom:16px}.flow-number>strong{font-size:56px}.flow-step h3{font-size:20px}

}
@media(prefers-reduced-motion:reduce){
#business #web-service figcaption,#works .work-label{opacity:1;transform:none;translate:none;transition:none}
#business .business-tilt-frame>.photo>img,#works .work-media>img:not(.ys-logo){transform:none;transition:none}
#works .work-media::after{display:none}
.flow-step{transition:none}
}