.approach-page{--ink:#192d4e;--muted:#617086;color:var(--ink)}
.approach-hero{max-width:1260px;margin:auto;padding:75px 6% 55px}.approach-hero h1{font-size:clamp(48px,7vw,94px);margin:30px 0;line-height:1.05}.approach-intro{display:flex;justify-content:space-between;gap:40px;align-items:end}.approach-intro>p{max-width:530px;color:#566275;font-size:17px;line-height:1.8}.process-caption{font-size:10px;line-height:2;color:#718096;letter-spacing:.8px}
.journey-map{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px}.journey-map>a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:15px;font-size:13px}.journey-map b{width:44px;height:44px;display:grid;place-items:center;background:#fafbfd;border:1px solid #b6c5d3;border-radius:50%;font-size:11px;color:#627a8b;transition:background .25s,color .25s}.journey-map a:hover b{background:#192d4e;color:white}.map-line{position:absolute;left:12.5%;right:12.5%;height:1px;top:22px;background:#cfdae1}.map-line span{display:block;width:9px;height:9px;position:absolute;top:-4px;border-radius:50%;background:#c77643;box-shadow:0 0 0 5px #c7764320;animation:travel 7s ease-in-out infinite}@keyframes travel{0%,10%{left:0}30%{left:33.33%}60%{left:66.66%}85%,100%{left:100%}}
.approach-progress{position:sticky;top:0;z-index:10;display:flex;justify-content:center;gap:45px;background:#fafbfdf2;backdrop-filter:blur(12px);border-block:1px solid #e0e6ec;padding:18px 20px}.approach-progress a{font-size:13px;color:#647184;white-space:nowrap}.approach-progress a span{font-size:10px;margin-right:6px;opacity:.6}.approach-progress a[aria-current="step"]{color:#192d4e;font-weight:700}.approach-progress a[aria-current="step"]:after{content:'';display:block;height:2px;background:#c77643;margin-top:6px}
.approach-journey{max-width:1280px;margin:auto;padding:20px 6% 40px;position:relative}.approach-journey:before{content:'';position:absolute;left:calc(6% + 18px);top:80px;bottom:80px;border-left:2px dashed #c8d6de}.approach-step{scroll-margin-top:95px;position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) minmax(0,1.1fr);gap:30px;align-items:center;padding:65px 0}.step-pin{position:relative;align-self:start;margin-top:6px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fafbfd;border:1px solid var(--step-color);color:var(--step-color);font-size:11px;z-index:1}.step-label{font-size:10px;font-weight:bold;letter-spacing:1.7px;color:var(--step-color);margin-bottom:18px}.step-copy h2{font-size:clamp(28px,3vw,40px);line-height:1.16;letter-spacing:-1px;margin-bottom:22px}.step-copy>p:not(.step-label){font-size:15px;line-height:1.85;color:#566275}.step-deliverables{font-size:11px;line-height:1.8;color:var(--step-color);border-top:1px solid #dce3e9;margin-top:25px;padding-top:16px}.step-visual{background:#edf1f5;border:1px solid #e1e7ec;border-radius:18px;overflow:hidden;min-width:0;padding-top:22px;transition:transform .7s,opacity .7s}.visual-label{padding:0 24px;font-size:8px;letter-spacing:1.4px;color:#64788c}.step-visual img{width:100%;height:auto;display:block;animation:float 6s ease-in-out infinite}.step-visual figcaption{background:white;border-top:1px solid #e4e9ed;padding:18px 22px;font-size:11px;color:#62778b;display:flex;align-items:center;gap:8px}.visual-dot{width:6px;height:6px;border-radius:50%;background:var(--step-color)}.approach-step:nth-child(2) .step-visual{background:#f2ece4}.approach-step:nth-child(3) .step-visual{background:#efedf8}.approach-step:nth-child(4) .step-visual{background:#e8f0ec}.motion-ready .approach-step:not(.is-visible) .step-visual{opacity:.2;transform:translateY(25px)}.approach-step.is-active .step-pin{box-shadow:0 0 0 7px #c7764310}.approach-loop{padding:70px max(6%,calc((100% - 1100px)/2));background:#192d4e;color:white;display:flex;gap:60px;align-items:center}.loop-icon{font-size:130px;line-height:1;color:#c98558;animation:turn 15s ease-in-out infinite}.approach-loop .eyebrow{font-size:10px;color:#abc3d7}.approach-loop h2{font-size:clamp(30px,4vw,48px);letter-spacing:-1px;line-height:1.15;margin:22px 0}.approach-loop p:not(.eyebrow){color:#c3d0df;font-size:15px;line-height:1.8;max-width:550px}.approach-loop a{display:inline-flex;gap:40px;align-items:center;border-bottom:1px solid #74849d;padding:18px 0 10px;margin-top:12px;font-size:14px}@keyframes float{50%{transform:translateY(-5px)}}@keyframes turn{0%,60%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@media(max-width:760px){.approach-hero{padding-top:45px}.approach-intro{display:block}.process-caption{display:block;margin-top:22px}.journey-map{margin-top:35px}.approach-progress{gap:18px;padding:16px 10px}.approach-progress a{font-size:11px}.approach-progress a span{display:none}.approach-step{grid-template-columns:38px minmax(0,1fr);gap:20px;padding:38px 0}.step-visual{grid-column:2}.step-copy h2{font-size:30px}.approach-loop{padding:45px 7%;gap:20px;align-items:start}.loop-icon{font-size:60px}.approach-loop .eyebrow{line-height:1.8}.step-copy>p:not(.step-label){font-size:14px}}
@media(prefers-reduced-motion:reduce){.map-line span,.step-visual img,.loop-icon{animation:none}.step-visual{transition:none}.motion-ready .approach-step:not(.is-visible) .step-visual{opacity:1;transform:none}html{scroll-behavior:auto}}
.step-visual .visual-label{position:static;display:block;top:auto;left:auto;font-weight:500}