.flow-section{position:relative;isolation:isolate;overflow:hidden;background:#fff;color:#20352f;padding:150px 0 150px}
.flow-section *{box-sizing:border-box}
.flow-section__header{position:relative;z-index:1;width:calc(100% - 48px);max-width:1100px;margin:0 auto;text-align:center}
.flow-section__label{display:table;margin:0 auto;padding:6px 30px;background:#e5f2e2;color:#43876e;border-radius:99px;font:500 14px/1.5 YBConceptLabel,sans-serif;letter-spacing:.075em}
.flow-section__title{font:500 clamp(42px,4.5vw,68px)/1.5 YorisoiHeadline,serif;letter-spacing:.02em;margin:18px 0 14px}
.flow-section__title span{position:relative;isolation:isolate;display:inline-block}
.flow-section__title span::after{content:'';position:absolute;z-index:-1;left:-7%;right:-7%;bottom:7%;height:20%;background:#fcf1d8;border-radius:48% 36% 57% 42%;transform:rotate(-1deg);opacity:.8}
.flow-section__lead{font:18px/1.85 YorisoiBody,sans-serif;color:#404540;max-width:850px;margin:0 auto}
.flow-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 76px;width:calc(100% - 144px);max-width:1290px;margin:32px auto 0;align-items:stretch}
.flow-step{--flow-tint:#fdf0ea;--flow-accent:#ee987f;position:relative;z-index:1;display:grid;grid-template-columns:44% 56%;grid-template-areas:'heading photo' 'description photo';align-content:center;align-items:start;padding:28px 22px 32px 45px;min-width:0;min-height:340px;background:var(--flow-tint);border-radius:37% 27% 29% 23% / 34% 40% 30% 33%;isolation:isolate}
.flow-step--02{--flow-tint:#f0f7ed;--flow-accent:#7caf78;border-radius:29% 37% 25% 27% / 37% 42% 28% 29%}
.flow-step--03{--flow-tint:#edf6fc;--flow-accent:#87b8e7;border-radius:31% 39% 29% 31% / 34% 30% 29% 41%}
.flow-step--04{--flow-tint:#fdf7e4;--flow-accent:#e6bd5b;border-radius:29% 33% 34% 24% / 41% 39% 34% 29%}
.flow-step::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url('assets/feature-wash.webp') center/100% 100% no-repeat;opacity:.055;pointer-events:none}
.flow-step__heading{grid-area:heading;position:relative;z-index:1;padding-right:4px}
.flow-step__number{color:var(--flow-accent);font-family:'Times New Roman',serif;margin:0 0 10px;line-height:1;text-align:left}
.flow-step__number span{display:block;font-size:16px;letter-spacing:.075em;margin:0 0 0 18px}
.flow-step__number b{display:block;font-size:76px;line-height:.98;font-weight:400}
.flow-step__title{font:500 clamp(25px,2.05vw,32px)/1.4 YorisoiHeadline,serif;letter-spacing:-.045em;margin:0;white-space:nowrap}
.flow-step__title::after{content:'';display:block;width:43px;height:2px;background:var(--flow-accent);border-radius:40%;margin:13px 0}
.flow-step__description{grid-area:description;position:relative;z-index:1;font:17px/1.8 YorisoiBody,sans-serif;color:#414641;margin:0;padding-right:10px;overflow-wrap:anywhere}
.flow-step__visual{grid-area:photo;position:relative;align-self:center;width:100%;margin:0;min-width:0}
.flow-step__image{display:block;width:100%;height:290px;object-fit:cover;object-position:center;border-radius:48% 47% 41% 44% / 44% 45% 49% 52%}
.flow-step--01 .flow-step__image{object-position:43% center}
.flow-step--02 .flow-step__image{border-radius:46% 51% 44% 48% / 44% 48% 50% 45%;object-position:48% center}
.flow-step--03 .flow-step__image{border-radius:47% 40% 46% 49% / 40% 49% 44% 48%}
.flow-step--04 .flow-step__image{border-radius:43% 52% 48% 44% / 47% 44% 50% 46%}
.flow-step__icon{position:absolute;right:0;bottom:-12px;width:78px;height:78px;display:grid;place-items:center;border-radius:50%;border:4px solid #fff;background:var(--flow-accent)}
.flow-step__icon svg{width:44px;height:44px;stroke:#fff;stroke-width:1.5}
.flow-path{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.flow-path__segment{stroke:#8fc5a5;stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.flow-leaf{position:absolute;z-index:2;pointer-events:none;width:68px;height:80px;object-fit:contain}
.flow-leaf--top{left:calc(50% - 32px);top:0;transform:rotate(48deg)}
.flow-leaf--middle{left:calc(50% - 34px);top:44%;transform:rotate(-14deg)}
.flow-leaf--left{left:-48px;top:64%;transform:rotate(25deg)}
.flow-leaf--right{right:-54px;top:26%;transform:scaleX(-1) rotate(25deg)}
.flow-section__closing{position:relative;text-align:center;max-width:670px;width:calc(100% - 48px);margin:36px auto 0;padding:0 85px;color:#304139;font:25px/1.8 YorisoiHeadline,serif}
.flow-section__closing p{margin:0}.flow-section__closing::after,.flow-section__note::after{content:'';display:block;width:380px;max-width:100%;height:25px;margin:8px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' fill='none'%3E%3Cpath d='M2 12C100 0 130 28 220 16S330 2 398 12' stroke='%238ab580' stroke-width='1.3'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.flow-section__closing-leaf{position:absolute;width:78px;height:95px;object-fit:contain;top:0;pointer-events:none}
.flow-section__closing-leaf--left{left:0;transform:rotate(-12deg)}.flow-section__closing-leaf--right{right:0;transform:scaleX(-1) rotate(10deg)}
.flow-section__note{position:absolute;top:255px;z-index:1;font:16px/1.9 YorisoiHandFull,cursive;color:#706b76;letter-spacing:.08em;transform:rotate(-9deg);margin:0}
.flow-section__note--left{left:4%}.flow-section__note--right{right:3%}.flow-section__note::after{width:185px;height:22px;margin-top:4px}
.flow-section__bird{position:absolute;top:132px;right:7%;width:140px;height:115px;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
.flow-section__wash{position:absolute;z-index:-1;pointer-events:none;background:url('assets/feature-wash.webp') center/contain no-repeat;width:190px;height:140px;opacity:.7}
.flow-section__wash--blue{top:110px;left:6%;transform:rotate(12deg)}.flow-section__wash--green{top:355px;left:-95px;filter:hue-rotate(290deg)}.flow-section__wash--yellow{top:690px;right:-80px;filter:hue-rotate(170deg)}
.flow-section__landscape{position:absolute;z-index:-1;bottom:0;left:0;width:100%;height:190px;object-fit:cover;object-position:bottom;mask-image:linear-gradient(transparent,#000 40%);pointer-events:none}
@media(max-width:1250px){.flow-section__note{display:none}.flow-grid{width:calc(100% - 80px);gap:36px 50px}.flow-step{padding:28px 18px 28px 30px;grid-template-columns:47% 53%}.flow-step__image{height:265px}.flow-step__title{font-size:26px}.flow-step__description{font-size:16px}.flow-step__icon{width:68px;height:68px}.flow-step__icon svg{width:38px;height:38px}.flow-leaf{width:48px;height:62px}.flow-leaf--top,.flow-leaf--middle{left:calc(50% - 24px)}.flow-leaf--left{left:-30px}.flow-leaf--right{right:-35px}}
@media(max-width:1100px){.flow-section{padding-top:120px}.flow-grid{max-width:740px;grid-template-columns:1fr;gap:40px}.flow-step{grid-template-columns:44% 56%;padding:28px 26px 34px 44px;min-height:340px}.flow-step__title{font-size:30px}.flow-step__description{font-size:17px}.flow-step__image{height:295px}.flow-leaf{display:none}.flow-path__segment{stroke-dasharray:3 6}.flow-section__bird{right:2%;width:105px}.flow-section__closing{font-size:23px}.flow-section__lead{font-size:17px}}
@media(max-width:600px){.flow-section{padding:80px 0 100px}.flow-section__header{width:calc(100% - 40px)}.flow-section__label{font-size:12px;padding:6px 22px}.flow-section__title{font-size:clamp(33px,9vw,44px);margin:20px 0}.flow-section__lead{font-size:15px;line-height:1.9}.flow-grid{width:calc(100% - 48px);max-width:420px;margin-top:30px;gap:36px}.flow-step{grid-template-columns:1fr;grid-template-areas:'heading' 'photo' 'description';padding:28px 22px 32px;min-height:0;border-radius:37% 32% 29% 25% / 13% 15% 15% 17%}.flow-step--02{border-radius:29% 39% 24% 31% / 15% 14% 18% 14%}.flow-step--03{border-radius:39% 30% 36% 26% / 13% 16% 13% 18%}.flow-step--04{border-radius:31% 38% 28% 36% / 16% 15% 17% 14%}.flow-step__heading{display:flex;align-items:center;gap:17px;padding:0;margin:0 0 17px}.flow-step__number{flex-shrink:0;margin:0}.flow-step__number span{font-size:12px;margin-left:9px}.flow-step__number b{font-size:59px}.flow-step__title{font-size:clamp(21px,5.7vw,26px);line-height:1.5;white-space:normal}.flow-step__title::after{margin:8px 0 0;width:34px}.flow-step__visual{width:100%;margin-bottom:25px}.flow-step__image{height:auto;aspect-ratio:1.23;object-fit:cover}.flow-step__description{font-size:16px;line-height:1.85;padding:0 4px}.flow-step__description br{display:none}.flow-step__icon{width:65px;height:65px;bottom:-14px;right:-3px}.flow-step__icon svg{width:36px;height:36px}.flow-section__closing{width:calc(100% - 40px);padding:0 12px 34px;margin-top:34px;font-size:20px}.flow-section__closing-leaf{width:37px;height:44px;top:auto;bottom:0}.flow-section__closing-leaf--left{left:12px}.flow-section__closing-leaf--right{right:12px}.flow-section__closing::after{width:260px}.flow-section__bird{display:none}.flow-section__wash--blue{width:100px;height:95px;left:-40px;top:80px}.flow-section__wash--green,.flow-section__wash--yellow{display:none}.flow-section__landscape{height:100px;mask-image:linear-gradient(transparent 25%,#000 70%)}}
@media(prefers-reduced-motion:no-preference){
.flow-motion{opacity:0;translate:0 10px;transition:opacity 700ms ease var(--flow-delay,0ms),translate 700ms cubic-bezier(.22,.61,.36,1) var(--flow-delay,0ms)}
.flow-step.flow-motion{translate:none}
.flow-motion--visible{opacity:1;translate:0 0}
.flow-motion-ready .flow-path__segment{opacity:0;transition:opacity 800ms ease var(--flow-path-delay,400ms)}
.flow-motion-ready .flow-path--visible{opacity:1}
}
@media(min-width:1101px) and (prefers-reduced-motion:no-preference){
.flow-motion-ready .flow-path__segment{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1100ms cubic-bezier(.22,.61,.36,1) var(--flow-path-delay,400ms),opacity 500ms ease var(--flow-path-delay,400ms)}
.flow-motion-ready .flow-path--visible{stroke-dashoffset:0}
}
@media(prefers-reduced-motion:reduce){.flow-motion{opacity:1;translate:none;transition:none}.flow-path__segment{opacity:1;transition:none}}
/* A continuous gently waved silhouette, independent of the photo clipping. */
.flow-shapes{position:absolute;pointer-events:none}
@media(min-width:601px){
.flow-step{background:none;border-radius:0}
.flow-step--04{grid-template-columns:minmax(max-content,1fr) minmax(0,1fr);column-gap:18px}
.flow-step--04 .flow-step__description{min-width:0;contain:inline-size}
.flow-step::before{background:var(--flow-tint);opacity:1;border-radius:0}
.flow-step--01::before{clip-path:url(#flow-blob-01)}
.flow-step--02::before{clip-path:url(#flow-blob-02)}
.flow-step--03::before{clip-path:url(#flow-blob-03)}
.flow-step--04::before{clip-path:url(#flow-blob-04)}
}
.flow-leaf--middle{left:calc(50% - 88px);top:43%}

