/* Scroll-driven motion layer */
.cbp-so-scroller{overflow:visible;overflow-x:clip}
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:#EC572C;transform:scaleX(0);transform-origin:0 50%;z-index:100000}

/* Pinned manifesto: words reveal as you scroll */
.manifesto{position:relative;height:280vh;background:#000}
.mf-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:0 20px}
.mf-words{display:flex;flex-direction:column;align-items:center}
.mf-w{font-family:'Poiret One',cursive;font-weight:900;text-transform:uppercase;font-size:clamp(56px,12vw,170px);line-height:1;margin:0;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);opacity:.35;transform:translateY(40px) scale(.96);transition:opacity .6s,transform .6s,color .6s,-webkit-text-stroke-color .6s}
.mf-w.on{opacity:1;transform:none;color:#fff;-webkit-text-stroke-color:transparent}
.mf-words{will-change:transform,opacity}
.mf-w.cur{color:#EC572C}
.mf-sub{max-width:620px;margin:34px auto 0;color:#bbb;font-size:18px;line-height:1.6;opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}
.mf-sub.on{opacity:1;transform:none}
.mf-cue{position:absolute;bottom:34px;left:0;right:0;color:#999;font-size:15px;letter-spacing:.5px;transition:opacity .4s}
.mf-cue span{display:inline-block;color:#EC572C;animation:mfBounce 1.4s ease-in-out infinite}
.mf-cue.off{opacity:0}
.mf-pin{padding-top:70px}
@keyframes mfBounce{50%{transform:translateY(7px)}}

/* Infinite marquee */
.marquee{background:#000;border-top:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c;overflow:hidden;padding:26px 0;white-space:nowrap}
.mq-track{display:inline-flex;align-items:center;animation:mq 38s linear infinite;will-change:transform}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{font-family:'Poiret One',cursive;font-weight:900;text-transform:uppercase;font-size:clamp(34px,5vw,64px);color:transparent;-webkit-text-stroke:1px #777;padding:0 28px;transition:color .3s,-webkit-text-stroke-color .3s}
.mq-track span:hover{color:#EC572C;-webkit-text-stroke-color:#EC572C}
.mq-track i{width:14px;height:14px;background:#EC572C;display:inline-block;transform:rotate(45deg)}
@keyframes mq{to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
 .mq-track,.mf-cue span{animation:none}
 .mf-w,.mf-sub{transition:none}
}

.academy-cta .cl-effect-9 a,.academy-cta .cl-effect-9 a:visited{color:#fff}
.academy-cta .cl-effect-9 a:hover{color:#EC572C}

/* Services: cards rise from below and stack as you scroll */
#services,#services .background-pat,#services .container{overflow:visible!important}
#services .background-pat{background:#000;padding:40px 0 20vh}
.stack{width:min(1100px,92%)}
.sc{position:sticky;top:calc(88px + var(--i)*26px);display:grid;grid-template-columns:1fr 1.1fr;min-height:min(68vh,500px);margin-bottom:14vh;background:#0b0b0b;border:1px solid #232323;box-shadow:0 -20px 60px rgba(0,0,0,.8);transform-origin:50% 0;will-change:transform,filter;overflow:hidden}
.sc-text{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
.sc-n{font:400 15px 'Open Sans',sans-serif;color:#EC572C;letter-spacing:3px;margin-bottom:14px}
.sc h3{font-family:'Poiret One',cursive;font-weight:900;text-transform:uppercase;font-size:clamp(30px,3.6vw,48px);line-height:1.1;color:#fff;margin:0 0 14px}
.sc p{color:#bbb;font-size:17px;line-height:1.6;margin:0 0 20px}
.sc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sc li{border:1px solid #333;color:#ddd;padding:7px 14px;font-size:14px;transition:all .25s}
.sc li:hover{border-color:#EC572C;color:#EC572C}
.sc-img{overflow:hidden;border-left:1px solid #232323;background:#000}
.sc-img img{width:100%;height:112%;object-fit:cover;display:block;will-change:transform}
@media(max-width:760px){.sc{grid-template-columns:1fr;min-height:0}.sc-img{order:-1;height:200px;border:0}.sc-text{padding:28px 24px}}

/* drifting light particles replace the cloud / falling-leaf animations */
#parallax-2,#parallax-3{position:relative}
#parallax-2 .parallax-wrap,#parallax-3 .parallax-wrap{position:relative;z-index:2}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* ===== Hero: background keeps changing behind Learn / Create / Innovate ===== */
.mf-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#05070b}
.mf-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.mf-slide.on{opacity:1}
.mf-slide img,.mf-slide video{width:100%;height:100%;object-fit:cover;object-position:78% 50%;display:block}
.mf-slide.on img{animation:mfDrift 9s ease-out both}
@keyframes mfDrift{from{transform:scale(1.08)}to{transform:scale(1)}}
.mf-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.18),rgba(0,0,0,.55) 78%),linear-gradient(180deg,rgba(0,0,0,.55),transparent 25%,transparent 70%,#000)}
.mf-words,.mf-sub,.mf-cue{position:relative;z-index:2}
.mf-cue{position:absolute}
.mf-w{text-shadow:0 2px 30px rgba(0,0,0,.5)}

/* ===== Brand story: huge type travels sideways, company photo stays put ===== */
#profile{overflow:clip;padding-bottom:0}
.bs{position:relative;background:#000;height:600vh}
.bs-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:#000}
.bs-photo{position:absolute;left:50%;bottom:5vh;width:min(60vw,920px);aspect-ratio:1718/915;margin:0;transform:translateX(-50%) scale(.38);transform-origin:50% 100%;box-shadow:0 30px 80px rgba(0,0,0,.9);overflow:hidden;z-index:1;will-change:transform}
.bs-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bs-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:flex-start;gap:9vw;padding:13vh 14vw 0 100vw;will-change:transform;z-index:2}
.bs-blk{flex:0 0 auto;will-change:opacity,transform}
.bs-blk p{margin:0;text-shadow:0 2px 20px rgba(0,0,0,.85);color:#fff;font-family:'Open Sans',Arial,sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.bs-xl{font-size:clamp(24px,2.9vw,46px);line-height:1.08;font-weight:400;width:min(38vw,640px)}
.bs-lg{font-size:clamp(24px,2.7vw,44px);line-height:1.1;font-weight:400;white-space:nowrap}
.bs-lg em{font-style:normal;color:#EC572C}
.bs-sm{font-size:clamp(14px,1.25vw,19px);line-height:1.5;font-weight:400;text-transform:none!important;letter-spacing:0!important;color:#cfcfcf!important;width:min(30vw,400px)}
.bs-down{padding-top:5vh}
.bs-blk .bs-sm{margin-top:20px}
.bs-md{font-size:clamp(17px,1.7vw,26px);width:min(32vw,460px);margin-top:0!important;color:#fff!important}
.bs-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:#1c1c1c;z-index:3}
.bs-prog i{display:block;height:100%;background:#EC572C;transform:scaleX(0);transform-origin:0 50%}
@media(max-width:760px){
 .bs-photo{width:96vw;bottom:4vh}
 .bs-track{padding-top:13vh;gap:14vw}
 .bs-xl{width:78vw;font-size:26px}
 .bs-lg{font-size:26px;white-space:normal;width:76vw}
 .bs-sm{width:74vw;font-size:15px}
 .bs-down{padding-top:4vh}
 .bs-md{width:74vw;font-size:18px}
}
@media(prefers-reduced-motion:reduce){
 .bs{height:auto}.bs-pin{position:relative;height:auto;overflow:visible;padding:40px 5vw}
 .bs-photo{position:relative;left:auto;bottom:auto;transform:none!important;margin:30px auto 0;width:min(92vw,720px)}
 .bs-track{position:relative;height:auto;flex-direction:column;padding:0;gap:26px}
 .bs-blk,.bs-down{padding-top:0!important}.bs-xl,.bs-sm{width:auto}.bs-lg{white-space:normal}
 .bs-prog{display:none}
}

/* ===== Team: names on the left, photo swaps on the right ===== */
#crew{position:relative;background:#000;overflow:clip;padding-top:20px}
#crew .title{background:#000 url(../images/classy_fabric.png) repeat}
.crew-body{padding:50px 0 100px;background:#000}
.crew-grid{width:min(1180px,92%);margin:0 auto;display:grid;grid-template-columns:1fr minmax(260px,380px);gap:5vw;justify-content:space-between;align-items:start}
.crew-list{list-style:none;margin:0;padding:0}
.crew-list li{border-top:1px solid #262626;margin:0}
.crew-list li:last-child{border-bottom:1px solid #262626}
.crew-list button{display:flex;align-items:baseline;justify-content:space-between;gap:20px;width:100%;padding:16px 0;background:none;border:0;color:#fff;text-align:left;cursor:pointer;font:inherit;transition:padding .35s cubic-bezier(.2,.8,.2,1),color .25s}
.crew-th{display:none}
.crew-name{font-family:'Open Sans',Arial,sans-serif;text-transform:uppercase;font-size:clamp(18px,1.9vw,28px);line-height:1.05;letter-spacing:-.01em}
.crew-role{color:#8a8a8a;font-size:14px;text-align:right;max-width:14em;transition:color .25s}
.crew-list button:hover,.crew-list button:focus-visible,.crew-list button.on{padding-left:16px;color:#EC572C;outline:0}
.crew-list button:hover .crew-role,.crew-list button.on .crew-role{color:#fff}
.crew-list button:focus-visible{box-shadow:inset 3px 0 0 #EC572C}
.crew-stage{position:sticky;top:90px;aspect-ratio:3/4;background:#0b0b0b;border:1px solid #232323;overflow:hidden}
.crew-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.crew-stage img.on{opacity:1;transform:scale(1)}
.crew-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#EC572C}
@media(max-width:860px){
 .crew-grid{grid-template-columns:1fr}
 .crew-stage{display:none}
 .crew-th{display:block;width:76px;height:76px;object-fit:cover;object-position:50% 20%;flex:0 0 auto}
 .crew-list button{align-items:center;justify-content:flex-start;gap:16px;padding:14px 0}
 .crew-list button>span{display:block}
 .crew-name{font-size:18px}
 .crew-role{text-align:left;margin-left:auto;font-size:13px;max-width:9em}
 .crew-list button:hover,.crew-list button.on{padding-left:0}
}
@media(prefers-reduced-motion:reduce){.crew-stage img,.crew-list button,.mf-slide{transition:none}.mf-slide.on img{animation:none}}

/* Services: click a sub-service to read about it */
.sc li{border:0;padding:0}
.sc li:hover{border:0}
.sc li button{font:inherit;font-size:14px;background:none;border:1px solid #333;color:#ddd;padding:7px 14px;cursor:pointer;transition:all .25s}
.sc li button:hover,.sc li button:focus-visible{border-color:#EC572C;color:#EC572C;outline:0}
.sc li button.on{background:#EC572C;border-color:#EC572C;color:#000}
.sc .sc-ex{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
.sc .sc-ex.open{grid-template-rows:1fr}
.sc .sc-ex p{min-height:0;overflow:hidden;margin:0;font-size:16px;line-height:1.65;color:#cfcfcf;border-left:2px solid #EC572C;padding:0 0 0 16px;opacity:0;transition:opacity .35s .05s}
.sc .sc-ex.open p{margin:20px 0 0;padding:2px 0 2px 16px;opacity:1}
@media(prefers-reduced-motion:reduce){.sc .sc-ex,.sc .sc-ex p{transition:none}}

/* particles behind the web-services strip, same as the academy block */
.svc-cta{position:relative;overflow:hidden}
.svc-cta .container{position:relative;z-index:2}

/* Blog: side margins + equal-height cards + aligned Read More */
#blog.owl-carousel{width:min(1180px,92%);margin:0 auto}
#blog .owl-wrapper{display:flex!important}
#blog .owl-item{display:flex!important;float:none!important}
#blog .item{width:100%;margin:10px 0!important;padding-bottom:72px!important;box-sizing:border-box}
#blog .owl-item .item{margin-left:0!important;margin-right:0!important}
#blog .owl-item{padding:0 10px;box-sizing:border-box}
#blog a.link-blog{left:5px!important;bottom:20px!important}