#page-story.active .story-pink-portrait{animation:storyPortraitRise 2.2s cubic-bezier(.3,.15,.2,1) var(--portrait-delay,.15s) both}
#page-story .story-portrait-hero .story-why{top:-64px;margin-bottom:-.34em}
#page-story .story-portrait-hero .lede{margin-top:8px}
#principles{background:#f5f3ee;color:#171923}
#principles .pr-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:7%;align-items:center;min-height:100%;padding-top:110px;padding-bottom:90px;text-align:left}
#principles .pr-head{text-align:left}
#principles .pr-head h2{font-size:clamp(56px,6.5vw,94px);margin:22px 0!important;max-width:7ch}
#principles .pr-head h2 em{color:var(--cobalt)}
#principles .pr-items{border-left:1px solid #17192340;min-height:370px;width:100%;max-width:none;margin:0;padding:0}
#principles .pr-item{inset:35px 0 0 10%;text-align:left}
#principles .pr-item h3{font-size:clamp(34px,3.8vw,56px);margin:0 0 25px;font-style:normal}
#principles .pr-item p{font-size:18px;margin:0;max-width:38ch;color:#333640;opacity:1}
.approach-cycle{width:min(100%,800px);height:630px;display:block;position:relative}
.process-controls{position:absolute;inset:0;display:block;max-width:none;border:1px solid #bac8e42b;border-radius:50%;margin:65px 110px}
.approach .cycle-stage[data-stage]{position:absolute!important;inset:auto!important;transform:translate(-50%,-50%)!important;width:150px;height:76px;border-radius:50%;border:1px solid #adbde329;background:#11151e;overflow:hidden;isolation:isolate;font-size:26px}
.approach .cycle-stage[data-stage="0"]{left:50%!important;top:0!important}
.approach .cycle-stage[data-stage="1"]{left:100%!important;top:25%!important}
.approach .cycle-stage[data-stage="2"]{left:100%!important;top:75%!important}
.approach .cycle-stage[data-stage="3"]{left:50%!important;top:100%!important}
.approach .cycle-stage[data-stage="4"]{left:0!important;top:75%!important}
.approach .cycle-stage[data-stage="5"]{left:0!important;top:25%!important}
.approach .cycle-stage::before{inset:-45%;border-radius:43% 57% 61% 39%;background:radial-gradient(ellipse at 32% 42%,#d6e2f6b3,transparent 42%),radial-gradient(ellipse at 70% 60%,#2343d6cc,transparent 55%);filter:blur(5px);opacity:.7;animation:liquidDrift 6s ease-in-out infinite alternate}
.approach .cycle-stage::after{display:none!important}
.approach .cycle-stage:hover,.approach .cycle-stage:focus-visible{transform:translate(-50%,-50%) scale(1.04)!important}
.approach .cycle-stage[aria-pressed=true]{border-color:#b9c8ef;background:#1c2941}
.approach .cycle-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:43%;margin:0;padding:0;border:0;min-height:0}
.approach .cycle-centre h3{font-size:44px}.approach .cycle-centre p{font-size:16px;line-height:1.7}
@media(max-width:800px){
#page-story .story-portrait-hero .story-why{top:-52px}
#principles .pr-grid{grid-template-columns:1fr;gap:25px;align-content:center;padding-top:100px;padding-bottom:55px}
#principles .pr-head h2{max-width:none;font-size:47px;margin-bottom:10px!important}
#principles .pr-items{min-height:300px}
#principles .pr-item{inset:20px 0 0 7%}
#principles .pr-item h3{font-size:36px}#principles .pr-item p{font-size:16px}
}
@media(max-width:600px){
.approach-cycle{height:520px;width:100%;display:block}
.process-controls{display:block;margin:45px 52px;border-radius:50%}
.approach .cycle-stage[data-stage]{width:104px;height:59px;font-size:21px;padding:10px}
.approach .cycle-centre{width:48%;padding:0}
.approach .cycle-centre h3{font-size:32px}.approach .cycle-centre p{font-size:14px;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){
#page-story.active .story-pink-portrait{animation:none}
.approach .cycle-stage::before{animation:none}
#principles .pr-grid{min-height:0}#principles .pr-items{min-height:0}
#principles .pr-item{position:relative;inset:auto;margin:0 0 25px 7%;opacity:1;visibility:visible}
}