/* A responsive, interactive view of Sisu's approach. */
.approach-section{grid-column:1/-1;border-top:1px solid var(--line);padding-top:42px;scroll-margin-top:30px}
.approach-intro{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end}
.approach-intro .eyebrow{font-size:9px;margin-bottom:19px}
.approach-intro h3{font-size:47px;line-height:1.05}
.approach-intro h3 em{color:var(--teal);font-style:italic}
.approach-intro>div>p:not(.eyebrow){font-size:14px;line-height:1.8;max-width:490px}
.process-invitation{display:inline-flex;align-items:center;gap:22px;color:var(--rust);font-size:11px;font-weight:500;margin-top:17px}
.process-invitation>span{font-size:23px;line-height:1}
.process-map{position:relative;margin-top:27px}
.process-ribbon{position:absolute;top:0;left:0;width:100%;height:220px;pointer-events:none}
.process-topline,.process-bottomline{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round}
.process-bottomline{stroke:var(--rust);stroke-width:1.5;opacity:.65}
.process-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative;z-index:1}
.process-stage{appearance:none;display:flex;align-items:center;flex-direction:column;background:transparent;border:0;color:var(--ink);cursor:pointer;padding:59px 8px 0;text-align:center;border-radius:4px}
.stage-icon{width:100px;height:100px;background:var(--cream);border:1px solid #b4c5b5;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:background .2s,transform .2s,box-shadow .2s}
.stage-icon svg{width:68px;height:68px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.process-stage[aria-selected=true] .stage-icon{background:var(--yellow);border-color:var(--ink);box-shadow:4px 5px 0 #143f4218;transform:translateY(-5px)}
.process-stage:hover .stage-icon{transform:translateY(-5px);border-color:var(--ink)}
.stage-count{font-size:8px;font-weight:600;letter-spacing:.12em;line-height:1.5;margin-top:43px;color:var(--muted)}
.stage-name{font-family:var(--serif);font-size:27px;letter-spacing:-.035em;line-height:1.15;margin-top:8px;position:relative;padding-bottom:10px}
.process-stage[aria-selected=true] .stage-name:after{content:'';position:absolute;bottom:2px;left:10%;width:80%;height:2px;background:var(--rust);transform:rotate(-2deg)}
.stage-question{font-size:11px;line-height:1.6;color:var(--muted)}
.process-loop{margin:4px auto 23px;width:70%;text-align:center}
.process-loop svg{width:100%;height:32px;display:block;fill:none;stroke:var(--teal);stroke-width:1.4;opacity:.65}
.process-loop>span{display:inline-block;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--teal);background:var(--cream);padding:0 15px;position:relative;top:-15px;line-height:1.3}
.process-details{background:#e6eadd;border:1px solid #cbd2c6;min-height:180px}
.stage-detail{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;padding:29px 35px;align-items:center}
.stage-detail[hidden]{display:none}
.stage-detail>.eyebrow,.stage-detail .eyebrow{font-size:8px;margin-bottom:12px;letter-spacing:.12em}
.stage-detail h4{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.08;letter-spacing:-.025em;margin:0}
.stage-detail>div>p:not(.eyebrow){font-size:13px;line-height:1.8}
.stage-detail .stage-output{margin-top:14px;color:var(--ink)}
.stage-output>span{display:block;font-size:8px;font-weight:600;letter-spacing:.11em;line-height:1.5;margin-bottom:5px;color:var(--teal)}
.behaviour-thread{display:flex;justify-content:space-between;align-items:center;gap:45px;padding-top:26px}
.behaviour-thread strong{font-family:var(--serif);font-size:24px;line-height:1.1;font-weight:400;letter-spacing:-.025em}
.behaviour-thread p{font-size:11px;margin-top:9px;line-height:1.7}
.behaviour-thread ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.behaviour-thread li{font-size:11px;line-height:1.5;display:flex;align-items:center;gap:8px;white-space:nowrap}
.behaviour-thread li>span{font-size:24px;color:var(--teal)}
.experience-stamp strong{font-size:31px;line-height:1.05}
.experience-stamp strong>span{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:0;display:block;margin-top:5px}
.client-names .client-long{font-size:17px;line-height:1.2;letter-spacing:-.025em}
.working-well-brand-title{line-height:1}
.working-well-brand .working-well-logo{margin:0;width:330px;max-width:100%}
.working-well-brand .ideas-intro{align-items:center}
.working-well-brand .community-sticker{font-size:23px}
@media(max-width:1100px){.approach-intro{gap:45px}.approach-intro h3{font-size:42px}.approach-intro>div>p:not(.eyebrow){font-size:13px}.stage-name{font-size:24px}.stage-detail{gap:35px;padding:27px 29px}.behaviour-thread{gap:30px}.behaviour-thread ul{gap:19px}.behaviour-thread li{font-size:10px;gap:6px}.behaviour-thread p{max-width:260px}.client-names .client-long{font-size:14px}.experience-stamp strong{font-size:28px}.experience-stamp strong>span{font-size:12px}}
@media(max-width:850px){.approach-intro{gap:30px}.approach-intro h3{font-size:36px}.process-stages{gap:6px}.stage-name{font-size:21px}.stage-question{font-size:10px}.stage-icon{width:86px;height:86px}.stage-icon svg{width:61px;height:61px}.process-stage{padding:67px 3px 0}.stage-count{margin-top:47px;font-size:7px}.stage-detail h4{font-size:29px}.stage-detail>div>p:not(.eyebrow){font-size:12px}.behaviour-thread{align-items:flex-start}.behaviour-thread ul{display:grid;gap:9px}.behaviour-thread li{font-size:11px}.behaviour-thread strong br{display:none}.behaviour-thread>div{max-width:310px}.client-names .client-long{font-size:12px}.experience-stamp strong{font-size:24px}.experience-stamp strong>span{font-size:10px}}
@media(max-width:620px){.approach-section{margin-top:38px;padding-top:32px;scroll-margin-top:10px}.approach-intro{display:block}.approach-intro h3{font-size:38px}.approach-intro>div>p:not(.eyebrow){font-size:13px;margin-top:20px}.approach-intro .eyebrow{font-size:8px;margin-bottom:16px}.process-invitation{margin-top:14px}.process-map{margin-top:22px}.process-ribbon{display:none}.process-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 16px;position:relative}.process-stages:before{content:'';position:absolute;top:41px;left:25%;right:25%;bottom:88px;border:2px solid #c4d0bd;border-radius:20px;z-index:-1}.process-stage{padding:0 1px;position:relative}.stage-icon{width:85px;height:85px;border-width:1px}.stage-icon svg{width:59px;height:59px}.stage-count{margin-top:12px;font-size:7px;background:var(--cream);padding:0 3px}.stage-name{font-size:22px;margin-top:6px;line-height:1.1;background:var(--cream);padding:0 3px 10px;white-space:nowrap}.stage-question{font-size:10px;background:var(--cream);padding:0 4px}.process-stage[aria-selected=true] .stage-icon{transform:none;box-shadow:3px 3px 0 #143f4218}.process-loop{width:90%;margin:9px auto 4px}.process-loop>span{font-size:16px;max-width:220px;top:-12px}.process-loop svg{height:30px}.process-details{min-height:0}.stage-detail{display:block;padding:24px}.stage-detail h4{font-size:30px}.stage-detail h4 br{display:none}.stage-detail>div+div{margin-top:16px}.stage-detail>div>p:not(.eyebrow){font-size:12px}.stage-output>span{font-size:7px}.behaviour-thread{display:block;padding-top:24px}.behaviour-thread>div{max-width:none}.behaviour-thread strong{font-size:26px}.behaviour-thread strong br{display:block}.behaviour-thread p{font-size:12px;max-width:280px}.behaviour-thread ul{display:grid;gap:8px;margin-top:17px}.behaviour-thread li{font-size:12px;gap:12px}.client-names{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 11px}.client-names .client-long{font-size:11px;white-space:normal}.experience-stamp strong{font-size:25px}.experience-stamp strong>span{font-size:10px}.working-well-brand .working-well-logo{width:270px;max-width:95%}.working-well-brand .community-sticker{font-size:23px}.working-well-brand .ideas-description{margin-top:27px}}
@media(max-width:370px){.stage-name{font-size:20px}.stage-question{font-size:9px}.process-stages{gap:22px 10px}.stage-detail{padding:20px}.client-names .client-long{font-size:10px}.experience-stamp strong{font-size:22px}.experience-stamp strong>span{font-size:9px}.approach-intro h3{font-size:35px}}

@media(max-width:850px){.hero{overflow:clip}}