/* An ongoing practice, expressed as a calm four-part cycle. */
.how-work-hero{background:#f0f1e6;color:#183e35;text-align:center;padding-block:76px 78px}
.how-work-hero>h1{font-size:clamp(3rem,5.8vw,5.25rem);max-width:16ch}
.how-work-hero>p:not(.eyebrow){max-width:650px;margin-inline:auto;font-size:1.25rem;line-height:1.65;color:#57655e}
.approach-cycle{--cycle-ink:#183e35;--cycle-paper:#fffef8;--cycle-tint:#e7edc9;padding-block:92px 112px;color:var(--cycle-ink);background:#f8f7f0}
.cycle-heading{text-align:center;margin-bottom:64px}
.cycle-heading .eyebrow{margin-bottom:18px}
.cycle-heading h2{font-size:clamp(2.5rem,4.5vw,4rem)}
.cycle-heading>p:last-child{font-size:1.25rem;line-height:1.55;margin-top:22px;color:#5b6b61}
.cycle-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(36px,5.5vw,84px)}
.cycle-diagram{min-width:0}
.cycle-map{width:100%;max-width:620px;aspect-ratio:1;position:relative;margin-inline:auto;isolation:isolate}
.cycle-path{position:absolute;inset:0;width:100%;height:100%;color:#849784;overflow:visible}
.cycle-inner-path{opacity:.35}
.cycle-direction{opacity:.75}
.cycle-traveller{transform-origin:300px 300px;transform:rotate(var(--cycle-angle,0deg));transition:transform 1.65s cubic-bezier(.4,0,.2,1);color:#365e4c;opacity:.7}
.cycle-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40%;text-align:center}
.cycle-core-label{display:block;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:#6f8073;margin-bottom:13px}
.cycle-core>p{font-family:var(--heading);font-size:clamp(1.5rem,2.15vw,2.1rem);line-height:1.2;letter-spacing:-.025em}
.cycle-tablist{position:absolute;inset:0}
.cycle-node{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:28%;aspect-ratio:1;border:1px solid #183e3510;border-radius:50%;padding:12px;line-height:1;transform:translate(-50%,-50%);color:#183e35;background:var(--node-color);box-shadow:inset 0 1px 1px #ffffffb5,0 7px 14px #183e3505;transition:box-shadow .8s ease,background .8s ease;isolation:isolate}
.cycle-node::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid #183e35;opacity:0;transform:scale(.97);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.3,1)}
.cycle-node::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,#ffffff42,transparent 65%);z-index:-1}
.cycle-node[aria-selected=true]{box-shadow:inset 0 1px 1px #ffffffb5,0 14px 32px #183e3512}
.cycle-node[aria-selected=true]::before{opacity:.8;transform:scale(1)}
.cycle-node:hover{box-shadow:inset 0 1px 1px #ffffffb5,0 16px 32px #183e3518}
.cycle-node:focus-visible{outline:3px solid #183e35;outline-offset:9px}
.cycle-observe{--node-color:#e0eab0;left:50%;top:14%}
.cycle-understand{--node-color:#dcd0e7;left:86%;top:50%}
.cycle-act{--node-color:#f2d983;left:50%;top:86%}
.cycle-sustain{--node-color:#edc6ad;left:14%;top:50%}
.cycle-number{font-size:1.25rem;font-weight:700;letter-spacing:.1em;margin-bottom:9px;opacity:1}
.cycle-node svg{width:36px;height:36px;flex-shrink:0;margin-bottom:10px}
.cycle-name{font-family:var(--subheading);font-size:clamp(.75rem,1.14vw,1.05rem);font-weight:600;letter-spacing:-.04em}
.cycle-hint{text-align:center;margin-top:28px;color:#6b7b6e;font-size:.9375rem}
.cycle-hint span{display:inline-block;margin-left:8px;color:#183e35}
.cycle-details{min-width:0;display:grid;gap:22px}
.cycle-panel{min-width:0;padding:clamp(28px,3.1vw,46px);background:var(--cycle-paper);border:1px solid #dce1d3;border-radius:36px 36px 36px 10px;box-shadow:0 20px 65px #183e3505}
.cycle-panel-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}
.cycle-panel .eyebrow{font-size:.75rem;letter-spacing:.11em}
.cycle-panel-index{white-space:nowrap;font-size:.8125rem;letter-spacing:.06em;color:#718171}
.cycle-panel h3{font-family:var(--subheading);font-size:clamp(1.3rem,1.9vw,1.8rem);line-height:1.4;font-weight:600;letter-spacing:-.04em;margin-bottom:22px;text-wrap:balance}
.cycle-panel>p{font-size:1.1875rem;line-height:1.6;color:#57655e}
.cycle-takeaway{margin-top:28px;padding-top:22px;border-top:1px solid #dce1d3}
.cycle-takeaway>span{display:block;color:#72806f;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.cycle-takeaway strong{font-family:var(--heading);font-size:1.125rem;font-weight:500;line-height:1.4}
[data-cycle-ready] .cycle-details{display:grid;gap:0}
[data-cycle-ready] .cycle-panel{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .65s ease,transform 1.15s cubic-bezier(.4,0,.2,1),visibility 0s .65s}
[data-cycle-ready] .cycle-panel.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity 1.1s .18s ease,transform 1.3s .12s cubic-bezier(.4,0,.2,1),visibility 0s}
.cycle-panel[data-cycle-panel="1"]{background:#fcf9ff}
.cycle-panel[data-cycle-panel="2"]{background:#fffdf4}
.cycle-panel[data-cycle-panel="3"]{background:#fff9f4}
@media(max-width:1050px){.cycle-layout{grid-template-columns:1fr;gap:42px}.cycle-map{max-width:560px}.cycle-details{max-width:720px;width:100%;margin-inline:auto}.cycle-core>p{font-size:2rem}.cycle-name{font-size:1rem}.cycle-panel h3{font-size:1.65rem}.cycle-panel{padding:38px}.cycle-panel>p{font-size:1.2rem}.cycle-hint{margin-top:26px}}
@media(max-width:600px){
 .how-work-hero{padding-block:50px 56px}.how-work-hero>p:not(.eyebrow){font-size:1.125rem;line-height:1.55}
 .approach-cycle{padding-block:60px 68px}.cycle-heading{margin-bottom:42px}.cycle-heading h2{font-size:2.6rem}.cycle-heading>p:last-child{font-size:1.125rem;margin-top:18px}.cycle-layout{gap:28px}
 .cycle-node{padding:8px;width:28.5%}.cycle-node::before{inset:-5px}.cycle-node:focus-visible{outline-offset:6px}
 .cycle-number{font-size:.875rem;margin-bottom:6px}.cycle-node svg{width:26px;height:26px;margin-bottom:7px}.cycle-name{font-size:clamp(.63rem,2.5vw,.88rem);letter-spacing:-.05em}
 .cycle-core{width:40%}.cycle-core-label{font-size:.5rem;letter-spacing:.08em;margin-bottom:9px}.cycle-core>p{font-size:clamp(1.125rem,4.6vw,1.6rem)}
 .cycle-hint{font-size:.875rem;margin-top:24px}.cycle-panel{padding:28px 25px;border-radius:28px 28px 28px 8px}.cycle-panel-meta{gap:10px;margin-bottom:20px}.cycle-panel .eyebrow{font-size:.6875rem;letter-spacing:.08em}.cycle-panel-index{font-size:.6875rem}.cycle-panel h3{font-size:1.375rem;margin-bottom:20px}.cycle-panel>p{font-size:1.125rem;line-height:1.55}.cycle-takeaway{margin-top:24px;padding-top:20px}.cycle-takeaway strong{font-size:1.05rem}
}
@media(max-width:380px){.cycle-node{padding:6px}}
@media(prefers-reduced-motion:reduce){.cycle-traveller{transition:none}.cycle-node,.cycle-node::before,[data-cycle-ready] .cycle-panel{transition:none;transform:translate(-50%,-50%)}[data-cycle-ready] .cycle-panel,.cycle-node::before{transform:none}}
html[data-motion=off] .cycle-traveller{transition:none}
/* Bring the current step forward, like an automatically moving carousel. */
.cycle-node{transition:transform .65s cubic-bezier(.22,.7,.25,1),box-shadow .65s ease,background .65s ease;z-index:1}
.cycle-node[aria-selected=true]{transform:translate(-50%,-50%) scale(1.08);z-index:2}
.cycle-node:focus-visible{transform:translate(-50%,-50%) scale(1.15);z-index:3}
@media(hover:hover) and (pointer:fine){.cycle-node:hover{transform:translate(-50%,-50%) scale(1.18);z-index:3}}
.cycle-playback{display:block;margin:16px auto 0;padding:9px 18px;min-height:44px;border:1px solid #183e3533;border-radius:24px;background:transparent;color:#183e35;font:inherit;font-size:.9375rem}
.cycle-playback:hover{background:#e9eddf}
@media(prefers-reduced-motion:reduce){.cycle-node,.cycle-node[aria-selected=true],.cycle-node:focus-visible,.cycle-node:hover{transform:translate(-50%,-50%);transition:none}}
html[data-motion=off] .cycle-node,html[data-motion=off] .cycle-node[aria-selected=true],html[data-motion=off] .cycle-node:hover{transform:translate(-50%,-50%);transition:none}
/* Hide outgoing copy immediately; only the incoming panel fades in. */
[data-cycle-ready] .cycle-panel:not(.is-active){visibility:hidden;opacity:0;transform:none;transition:none;pointer-events:none}
[data-cycle-ready] .cycle-panel.is-active{transition:opacity .5s ease,transform .6s ease;visibility:visible}
/* Each selected step sets the tone of the entire approach section. */
.approach-cycle{--cycle-section:#eef2dc;background:var(--cycle-section);transition:background-color .65s ease}
.approach-cycle[data-cycle-active="0"]{--cycle-section:#eef2dc;--cycle-tint:#e0eab0}
.approach-cycle[data-cycle-active="1"]{--cycle-section:#eee6f3;--cycle-tint:#dcd0e7}
.approach-cycle[data-cycle-active="2"]{--cycle-section:#f4ebc9;--cycle-tint:#f2d983}
.approach-cycle[data-cycle-active="3"]{--cycle-section:#f2e0d3;--cycle-tint:#edc6ad}
@media(prefers-reduced-motion:reduce){.approach-cycle{transition:none}}
html[data-motion=off] .approach-cycle{transition:none}
/* Share the selected step's palette while the approach sits under the header. */
.site-header[data-cycle-tone]{transition:background-color .65s ease,color .65s ease}
.site-header[data-cycle-tone] .brand,.site-header[data-cycle-tone] .menu-toggle{color:inherit!important}
@media(prefers-reduced-motion:reduce){.site-header[data-cycle-tone]{transition:none}}
html[data-motion=off] .site-header[data-cycle-tone]{transition:none}

/* Let the sculpture fill the space between each number and label. */
.cycle-node{container-type:inline-size;padding:4px}
.cycle-node .cycle-number{margin-bottom:2px}
.cycle-node .cycle-icon{--cycle-icon-size:clamp(48px,calc(100cqi - 40px),104px);display:block;width:var(--cycle-icon-size);height:var(--cycle-icon-size);flex-shrink:0;margin-bottom:2px;object-fit:contain;object-position:center}
@media(max-width:600px){
 .cycle-node{padding:2px}
 .cycle-node .cycle-number{font-size:.75rem;margin-bottom:1px}
 .cycle-node .cycle-icon{--cycle-icon-size:clamp(38px,calc(100cqi - 28px),104px);margin-bottom:1px}
}