
main.web-approach{width:100%;max-width:none;margin:0;padding:70px clamp(32px,8vw,120px) 120px}
.web-approach .about-label{position:relative;display:inline-flex;align-items:center;gap:2px;padding:2px 20px 2px 6px}
.web-approach .about-label h2{font-size:clamp(12px,1.24vw,19px);font-weight:500;line-height:1.4;letter-spacing:.04em;margin:0;color:#373937}
.web-approach canvas.about-bone{order:-1;position:static;width:68px;height:48px}
.web-approach .about-hand-circle{position:absolute;left:-14px;top:-10px;width:calc(100% + 28px);height:calc(100% + 20px);overflow:visible;pointer-events:none}
.web-approach .about-hand-circle path{fill:none;stroke:#373937;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.web-approach .is-drawn .about-hand-circle path{animation:approach-circle 2.5s cubic-bezier(.43,.13,.23,.96) forwards}@keyframes approach-circle{to{stroke-dashoffset:0}}

.approach-content{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.8fr);align-items:start;gap:clamp(32px,6vw,96px);margin-top:clamp(36px,6vh,72px);min-height:55vh}
.approach-slogan{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:clamp(36px,6vw,88px);font-weight:700;line-height:1.12;letter-spacing:-.045em;color:#777971}
.approach-slogan strong{display:inline-block;padding-inline:.12em;margin-left:-.12em;transform:skewX(-18deg);color:#171917;font-weight:900}
.approach-description{margin:clamp(100px,13vw,200px) 0 0;max-width:52ch;font:300 clamp(10px,1vw,15px)/1.9 system-ui,-apple-system,"Segoe UI",sans-serif;color:#61645e;letter-spacing:.01em}
@media(max-width:700px){.approach-content{grid-template-columns:1fr;gap:40px}.approach-description{margin:0 0 0 auto;width:85%;max-width:58ch}}
@media(prefers-reduced-motion:reduce){.web-approach .about-hand-circle path{stroke-dashoffset:0;animation:none}}

.approach-content{position:relative}
.approach-paw-trail{position:absolute;left:calc((100% - clamp(32px,6vw,96px))* .619);top:clamp(80px,10vw,155px);width:clamp(32px,6vw,96px);height:190px;pointer-events:none}
.approach-paw{position:absolute;width:24px;height:24px;left:calc(50% - 20px);top:calc(var(--step)*39px);opacity:0;transform:rotate(170deg);animation:paw-step 3.4s ease-in-out infinite;animation-delay:calc(var(--step)*.28s)}
.approach-paw:nth-child(even){left:calc(50% + 1px);transform:rotate(190deg)}
.approach-paw svg{width:100%;height:100%;fill:#454840}
@keyframes paw-step{0%,4%{opacity:0;scale:.82}12%,53%{opacity:.55;scale:1}72%,100%{opacity:0;scale:1}}
@media(max-width:700px){.approach-paw-trail{position:relative;left:auto;top:auto;justify-self:center;width:190px;height:40px;margin:0}.approach-paw{left:calc(var(--step)*43px);top:0;transform:rotate(85deg)}.approach-paw:nth-child(even){left:calc(var(--step)*43px);top:14px;transform:rotate(95deg)}}
@media(prefers-reduced-motion:reduce){.approach-paw{animation:none;opacity:.45}}

/* Follow the annotated curved trail from lower-left to upper-right. */
@media(min-width:701px){
 .approach-paw-trail{left:44%;top:clamp(48px,5vw,80px);width:28%;height:clamp(230px,24vw,330px)}
 .approach-paw{width:25px;height:25px}
 .approach-paw:nth-child(1){left:4%;top:87%;transform:rotate(8deg)}
 .approach-paw:nth-child(2){left:23%;top:52%;transform:rotate(45deg)}
 .approach-paw:nth-child(3){left:61%;top:33%;transform:rotate(60deg)}
 .approach-paw:nth-child(4){left:87%;top:3%;transform:rotate(18deg)}
}

.approach-paw:nth-child(1){width:29px;height:29px}.approach-paw:nth-child(2){width:25px;height:25px}.approach-paw:nth-child(3){width:22px;height:22px}.approach-paw:nth-child(4){width:18px;height:18px}

