/* An illustrated route from the work to the person behind it. */
.how-hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,6vw,100px); align-items: center; padding-block: 72px 96px; }
.how-intro h1 { font: 500 clamp(46px,5.5vw,78px)/1.08 var(--display); letter-spacing: -.045em; margin: 20px 0 24px; }
.how-intro p { max-width: 34ch; font-size: 18px; line-height: 1.65; margin-bottom: 28px; }
.how-promise { display: block; font-size: 12px; color: var(--fg-2); margin-top: 18px; }
.how-hero-images { position: relative; padding: 0 100px 40px 0; }
.how-person { margin: 0; }
.how-person > img { width: 100%; aspect-ratio: 4/5; object-fit: contain; background: #edeae1; border-radius: 8px; }
.how-person figcaption { padding: 16px 0; font-size: 13px; line-height: 1.5; }
.how-person figcaption span { color: var(--fg-2); font-size: 12px; }
.how-piece { position: absolute; width: 44%; right: 0; bottom: 0; padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 30px #343a2910; }
.how-piece img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.how-piece > span { display: block; padding: 10px 4px 3px; font-size: 12px; line-height: 1.5; }
.how-step { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px,7vw,110px); align-items: center; padding: 72px 0; border-top: 1px solid var(--line); }
.how-step-reverse .how-step-image { order: 2; }
.how-step-copy h2, .how-maker-inner h2, .how-trust h2 { font-size: clamp(34px,3.5vw,50px); line-height: 1.15; letter-spacing: -.035em; margin: 20px 0; }
.how-step-copy p, .how-maker-inner p, .how-trust p { font-size: 16px; line-height: 1.75; max-width: 44ch; margin-bottom: 20px; }
.how-step-copy .how-small { font-size: 13px; color: var(--fg-2); }
.how-step-image { position: relative; min-width: 0; border-radius: 8px; overflow: hidden; background: #efede5; }
.how-objects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 26px 20px 58px; }
.how-objects img { width: 100%; height: 360px; object-fit: contain; }
.how-objects img:last-of-type { padding-top: 50px; }
.how-image-label { display: block; font-size: 12px; line-height: 1.5; padding: 15px 20px; color: var(--fg-2); }
.how-objects .how-image-label { position: absolute; bottom: 0; left: 0; right: 0; }
.how-process .media-open, .how-maker-photo .media-open { padding: 18px; background: #edeae1; }
.how-process .media-open img { height: 430px; object-fit: contain; }
.how-conversation { background: #edeae1; padding: clamp(24px,4vw,48px); border-radius: 8px; }
.how-contact-person { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 28px; }
.how-contact-person img { width: 64px; height: 80px; object-fit: cover; border-radius: 4px; }
.how-contact-person strong { display: block; font: 500 23px/1.3 var(--display); margin-top: 8px; }
.how-conversation ul { list-style: none; padding: 0; margin: 16px 0 24px; }
.how-conversation li { border-bottom: 1px solid var(--line); padding: 15px 0; font: 400 21px/1.4 var(--display); }
.how-conversation > p { font-size: 13px; color: var(--fg-2); }
.how-maker-note { background: #edeae1; margin-top: 36px; }
.how-maker-inner { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(32px,7vw,100px); align-items: center; padding-block: 72px; }
.how-maker-photo { min-width: 0; }
.how-maker-photo img { height: 350px; object-fit: contain; }
.how-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.how-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-block: 80px; }
.how-trust h2 { margin-top: 16px; }
@media (max-width: 860px) {
 .how-hero { gap: 40px; padding-block: 40px 56px; }
 .how-hero-images { padding-right: 45px; }
 .how-step { gap: 32px; padding-block: 48px; }
 .how-objects { padding-inline: 12px; gap: 4px; }
 .how-objects img { height: 260px; }
 .how-process .media-open img { height: 340px; }
 .how-contact-person { flex-wrap: wrap; }
 .how-trust { gap: 32px; }
}
@media (max-width: 600px) {
 .how-hero, .how-step, .how-maker-inner, .how-trust { grid-template-columns: 1fr; }
 .how-hero { padding-block: 36px 48px; }
 .how-hero-images { padding: 0 56px 60px 0; }
 .how-step { gap: 24px; padding-block: 36px; }
 .how-step-reverse .how-step-image { order: 0; }
 .how-step-copy h2 { margin-top: 12px; }
 .how-objects img { height: 250px; }
 .how-process .media-open img { height: 350px; }
 .how-contact-person { flex-wrap: nowrap; gap: 12px; }
 .how-contact-person strong { font-size: 21px; }
 .how-maker-inner, .how-trust { padding-block: 48px; gap: 28px; }
 .how-maker-inner h2 { margin-top: 12px; }
 .how-trust h2 { margin-bottom: 0; }
}