/* The same sage wash joins the service promise and the planning steps. */
:root{--service-sage-background:radial-gradient(ellipse at 50% 0,#e2ead4 0,#d3dfc5 65%,#cbd9ba 100%)}
.service-section,.how-section{background:var(--service-sage-background)}
.how-section{padding-block:56px 60px;border-block:1px solid #afbf976b}
.how-section h2{font-size:clamp(44px,4.1vw,59px);margin-bottom:22px;text-wrap:balance}
.how-section .steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px;max-width:1100px;margin:0 auto;text-align:center}
.steps>li{position:relative;min-width:0}
.steps>li+li:before{content:"";position:absolute;left:-30px;top:119px;width:11px;height:11px;border-top:2px solid #657c54;border-right:2px solid #657c54;transform:rotate(45deg)}
.step-illustration{position:relative;width:250px;max-width:100%;height:185px;margin:0 auto 13px;display:flex;align-items:flex-end;justify-content:center;padding-left:26px}
.step-illustration:before{content:"";position:absolute;height:1px;left:43px;right:20px;bottom:65px;background:linear-gradient(90deg,#c7a25a88,transparent);z-index:0}
.step-illustration img{position:relative;width:176px;height:176px;object-fit:contain;transform:translateY(var(--planning-baseline-shift,0%))}
/* Match the painted bases inside the three transparent 384px canvases. */
.planning-art-plan{--planning-baseline-shift:4.166667%}
.planning-art-enjoy{--planning-baseline-shift:7.552083%}
.step-illustration .step-number{position:absolute;left:0;top:auto;bottom:43px;z-index:1;width:44px;height:44px;margin:0;font-size:28px;background:#bb9449;color:#fffdf5;border:2px solid #fff1d2;box-shadow:0 0 0 1px #bc9b5e66}
.how-section .steps h3{font-family:var(--invitation-font);font-size:30px;line-height:1.15;margin-bottom:9px;text-wrap:balance}
.how-section .steps p{font-size:14px;line-height:1.65;max-width:29ch;margin:auto;color:#3d563b;text-wrap:pretty}
@media(min-width:701px) and (max-width:1000px){
  .how-section .steps{gap:34px}
  .step-illustration{height:162px;padding-left:20px}
  .step-illustration img{width:155px;height:155px}
  .step-illustration .step-number{width:37px;height:37px;font-size:25px;bottom:40px}
  .steps>li+li:before{left:-22px;top:103px;width:9px;height:9px}
  .how-section .steps h3{font-size:26px}
  .how-section .steps p{font-size:13px}
}
@media(max-width:700px){
  .how-section{padding-block:38px 40px}
  .how-section h2{font-size:44px;margin-bottom:24px}
  .how-section .steps{grid-template-columns:1fr;gap:25px;max-width:440px;text-align:left}
  .steps>li{display:grid;grid-template-columns:116px minmax(0,1fr);gap:15px;align-items:center}
  .steps>li+li:before{display:none}
  .step-illustration{width:116px;height:113px;padding:0;margin:0}
  .step-illustration:before{display:none}
  .step-illustration img{width:113px;height:113px}
  .step-illustration .step-number{width:28px;height:28px;left:-3px;bottom:0;font-size:19px;border-width:1.5px}
  .how-section .steps h3{font-size:27px;margin-bottom:7px}
  .how-section .steps p{font-size:12px;line-height:1.55;max-width:none}
}
@media(max-width:370px){
  .steps>li{grid-template-columns:99px minmax(0,1fr);gap:12px}
  .step-illustration{width:99px;height:103px}
  .step-illustration img{width:99px;height:99px}
  .how-section .steps h3{font-size:25px}
}