/* Principles: one clear statement, with the next statements waiting below. */
.cp-principles-focus{position:relative;background:#fff;color:#1c1c1c}
.cp-focus-pin{padding:100px 0}
.cp-focus-heading{text-align:center;margin:0 auto 70px}
.cp-focus-heading .cp-label{display:block;margin-bottom:22px}
.cp-about .cp-focus-heading h2{font-size:clamp(36px,3.8vw,56px);line-height:1.3;font-weight:700;letter-spacing:-.05em}
.cp-focus-heading h2 strong{color:#ee7138;font-weight:700}
.cp-focus-heading>p{font-size:17px;line-height:1.7;color:#777;margin-top:24px;word-break:keep-all}
.cp-focus-stage{max-width:900px;margin:0 auto}
.cp-focus-item{position:relative;text-align:center;padding:28px 0}
.cp-about .cp-focus-item h3{font-size:clamp(24px,3vw,40px);line-height:1.35;font-weight:700;letter-spacing:-.045em;margin:0}
.cp-focus-item p{font-size:16px;line-height:1.7;max-width:610px;margin:18px auto 0;color:#777;word-break:keep-all}
.cp-focus-icon{display:grid;place-items:center;width:72px;height:72px;color:#ee7138;border-radius:22px;background:linear-gradient(145deg,#fff6ec,#ffdfc4);box-shadow:inset 0 1px 2px #fff,0 10px 24px #ee71381a;margin:0 auto 20px}
.cp-principles-focus.has-motion{height:340svh}
.cp-principles-focus.has-motion .cp-focus-pin{position:sticky;top:0;height:100svh;min-height:660px;padding:0;overflow:clip}
.cp-principles-focus.has-motion .cp-focus-heading{position:absolute;top:13%;left:0;right:0;margin:0 auto}
.cp-principles-focus.has-motion .cp-focus-stage{position:absolute;top:58%;left:0;right:0;width:calc(100% - 72px);height:40%;max-width:1000px}
.cp-principles-focus.has-motion .cp-focus-item{position:absolute;inset:0 0 auto;padding:0;will-change:transform,opacity;transition:transform .6s cubic-bezier(.22,1.3,.36,1),opacity .35s,filter .4s}
.cp-principles-focus.has-motion .cp-focus-item p{transition:opacity .3s}
.cp-principles-focus.has-motion .cp-focus-icon{position:absolute;left:calc(50% + var(--focus-title-half) + 22px);top:-12px;margin:0;opacity:0;transform:scale(.5) rotate(15deg);transition:opacity .2s,transform .6s cubic-bezier(.22,1.4,.36,1)}
.cp-principles-focus.has-motion .cp-focus-item.is-current .cp-focus-icon{opacity:1;transform:none}
.cp-focus-item.is-current.is-pop h3{animation:principle-text-pop .65s .1s both}
@keyframes principle-text-pop{0%,100%{transform:none}20%{transform:scale(1.04,.9)}55%{transform:scale(.99,1.025)}80%{transform:scale(1.005,.995)}}
@media(max-width:900px){.cp-principles-focus.has-motion .cp-focus-icon{left:50%;top:-84px;margin-left:-29px;width:58px;height:58px;border-radius:18px}.cp-focus-icon svg{width:38px;height:38px}.cp-principles-focus.has-motion .cp-focus-stage{top:60%}.cp-focus-heading>p{font-size:15px}}
@media(max-width:700px){.cp-focus-pin{padding:64px 0}.cp-focus-heading{margin-bottom:44px}.cp-about .cp-focus-heading h2{font-size:32px}.cp-focus-heading>p{font-size:14px;margin-top:18px}.cp-focus-heading .cp-label{margin-bottom:18px}.cp-about .cp-focus-item h3{font-size:23px}.cp-focus-item p{font-size:14px;max-width:330px;margin-top:12px}.cp-principles-focus.has-motion .cp-focus-heading{top:12%;padding:0 18px}.cp-principles-focus.has-motion .cp-focus-stage{top:57%;width:calc(100% - 40px)}.cp-focus-item{padding:24px 0}}
@media(prefers-reduced-motion:reduce){.cp-principles-focus *{animation:none!important;transition:none!important}}