.hrpo-case{--black:#08090a;--ink:#111820;--muted:#66717d;--blue:#e8f2ff;--navy:#062f55;--coral:#f57050;--content:1056px;--side:218px;--head:88px}
@font-face{font-family:"HRPOMontserrat";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/templates/fonts/Montserrat-Regular.woff2") format("woff2")}
@font-face{font-family:"HRPOMontserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/templates/fonts/Montserrat-Bold.woff2") format("woff2")}
@font-face{font-family:"HRPOMontserrat";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/templates/fonts/Montserrat-ExtraBold.woff2") format("woff2")}
.hrpo-case *{box-sizing:border-box}
.hrpo-case{scroll-behavior:smooth}
.hrpo-case{margin:0;font-family:Arial,"Helvetica Neue",sans-serif;color:var(--ink);background:#fff}
.hrpo-case .portfolio-sidebar{position:fixed;z-index:30;inset:0 auto 0 0;width:var(--side);padding:25px 25px 18px;background:var(--black);color:#bfc4ca;display:flex;flex-direction:column}
.hrpo-case .studio-mark{width:90px;height:27px;border:1px solid #74787d;display:flex;color:#fff;text-decoration:none;font-size:12px}
.hrpo-case .studio-mark span,.hrpo-case .studio-mark b{display:grid;place-items:center;width:50%}
.hrpo-case .studio-mark span{background:var(--coral)}
.hrpo-case .side-nav{display:grid;gap:29px;margin-top:45px}
.hrpo-case .side-nav a{position:relative;color:#bbc0c6;text-decoration:none;font-size:16px}
.hrpo-case .side-nav a.is-active{color:#fff}
.hrpo-case .side-nav a.is-active:before{content:"";position:absolute;left:-25px;top:8px;width:14px;height:2px;background:var(--coral)}
.hrpo-case .side-socials{display:flex;gap:7px;margin-top:auto}
.hrpo-case .side-socials span{border:1px solid #30343a;padding:4px 5px;font-size:10px}
.hrpo-case .portfolio-header{position:fixed;z-index:25;left:var(--side);right:0;top:0;height:var(--head);padding:0 55px;display:flex;align-items:center;gap:42px;background:var(--black);color:#c8ccd0;font-size:15px}
.hrpo-case .portfolio-header>span:not(.header-phone):not(.header-circle):before{content:"□";margin-right:11px;color:#82909c}
.hrpo-case .header-phone{margin-left:auto}
.hrpo-case .header-circle{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#169bd2;color:#fff;font-size:18px}
.hrpo-case.case{margin-left:var(--side);padding-top:var(--head);overflow:hidden}
.hrpo-case .copy-section{min-height:350px;display:grid;align-items:center;background:#fff}
.hrpo-case .copy-section.first{min-height:328px}
.hrpo-case .copy-inner{width:69%;max-width:740px;margin:auto}
.hrpo-case .copy-inner h1,.hrpo-case .copy-inner h2{margin:0 0 36px;font-size:23px;line-height:1.18;letter-spacing:-.025em}
.hrpo-case .copy-inner p{margin:0 0 22px;font-size:15px;line-height:1.58}
.hrpo-case .compact-copy{min-height:315px}
.hrpo-case .compact-copy .copy-inner{width:62%}
.hrpo-case .compact-copy h2{font-size:37px;max-width:670px}
.hrpo-case .scene{position:relative;width:100%;overflow:hidden}
.hrpo-case .home-scene{height:610px;background:var(--blue)}
.hrpo-case .ribbon{position:absolute;background:var(--coral);transform:rotate(10deg);filter:drop-shadow(0 15px 0 rgba(255,177,139,.85))}
.hrpo-case .ribbon-home{width:1160px;height:75px;left:-150px;top:330px;border-radius:45px}
.hrpo-case .ribbon-home:after{content:"";position:absolute;width:520px;height:260px;border:70px solid var(--coral);border-left-color:transparent;border-top-color:transparent;border-radius:50%;right:-260px;top:-145px}
.hrpo-case .browser{position:absolute;background:#fff;border:10px solid #fff;border-radius:10px;overflow:hidden;box-shadow:0 18px 38px rgba(1,30,57,.28)}
.hrpo-case .browser-bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f5f7f9;color:#94a0aa;font-size:10px}
.hrpo-case .browser-bar i{width:8px;height:8px;border-radius:50%;background:#cbd3da}
.hrpo-case .browser-bar span{margin-left:9px}
.hrpo-case .browser img{display:block;width:100%;height:auto}
.hrpo-case .browser-home{left:7%;top:62px;width:86%;height:486px}
.hrpo-case .facts-scene{height:880px;background:var(--navy)}
.hrpo-case .facts-grid{position:absolute;inset:70px 5% 230px}
.hrpo-case .shot{position:absolute;overflow:hidden;background:#fff;box-shadow:0 22px 50px rgba(0,0,0,.28)}
.hrpo-case .shot img{width:100%;display:block}
.hrpo-case .shot-a{left:0;top:50px;width:58%;height:500px;transform:rotate(-4deg)}
.hrpo-case .shot-b{right:4%;top:0;width:48%;height:440px;transform:rotate(4deg)}
.hrpo-case .phone{overflow:hidden;border:8px solid #0c1420;border-radius:30px;background:#0c1420;box-shadow:0 20px 40px rgba(0,0,0,.3)}
.hrpo-case .phone img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}
.hrpo-case .facts-grid>.phone{position:absolute;right:0;top:160px;width:220px;height:460px;transform:rotate(7deg)}
.hrpo-case .metrics{position:absolute;left:8%;right:8%;bottom:70px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px;color:#fff}
.hrpo-case .metrics div{display:flex;gap:14px;align-items:flex-start}
.hrpo-case .metrics b{font-size:34px}
.hrpo-case .metrics span{font-size:12px;line-height:1.45;color:#c6d5e2}
.hrpo-case .persona-scene{height:620px;background:var(--blue);display:flex;align-items:center;justify-content:center;gap:3.5%;padding:60px 6%}
.hrpo-case .ribbon-persona{width:1200px;height:70px;left:-80px;top:265px;transform:rotate(-11deg);border-radius:50px}
.hrpo-case .ribbon-persona:after{content:"";position:absolute;width:500px;height:250px;border:65px solid var(--coral);border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;left:50px;top:-220px}
.hrpo-case .persona{position:relative;z-index:2;width:29%;min-height:390px;padding:20px 20px 30px;background:#fff;border-radius:4px;box-shadow:0 14px 35px rgba(3,39,73,.16)}
.hrpo-case .persona:nth-of-type(2){transform:translateY(-34px)}
.hrpo-case .persona>span{font-size:12px;color:#8494a0}
.hrpo-case .avatar{height:205px;margin:18px 0;background-size:cover;background-position:center}
.hrpo-case .avatar-one{background-image:linear-gradient(135deg,transparent 50%,rgba(245,112,80,.55)),url("/uploads/portfolio_card/hrpo-popugaevo/v20260917/assets/hrpo-banner.webp")}
.hrpo-case .avatar-two{background-image:linear-gradient(135deg,rgba(6,47,85,.15),transparent),url("/uploads/portfolio_card/hrpo-popugaevo/v20260917/assets/hrpo-banner.webp");background-position:70% center}
.hrpo-case .avatar-three{background-image:linear-gradient(135deg,transparent,rgba(6,47,85,.55)),url("/uploads/portfolio_card/hrpo-popugaevo/v20260917/assets/hrpo-banner.webp");background-position:20% center}
.hrpo-case .persona h3{font-size:17px;margin:0 0 10px}
.hrpo-case .persona p{font-size:12px;line-height:1.5;color:var(--muted);margin:0}
.hrpo-case .profile-scene{height:720px;background:#f1f6fc}
.hrpo-case .profile-card{position:absolute;background:#fff;box-shadow:0 16px 42px rgba(5,45,79,.16)}
.hrpo-case .profile-main{left:8%;top:70px;width:58%;height:455px;display:grid;grid-template-columns:46% 54%}
.hrpo-case .profile-main img{width:100%;height:100%;object-fit:cover}
.hrpo-case .profile-main>div{padding:45px 36px}
.hrpo-case .profile-main small{color:var(--coral);text-transform:uppercase;font-size:10px}
.hrpo-case .profile-main h3{font-size:29px;line-height:1.18;margin:55px 0 20px}
.hrpo-case .profile-main p{font-size:13px;line-height:1.6;color:var(--muted)}
.hrpo-case .profile-notes{position:absolute;right:7%;top:155px;width:31%;padding:30px;background:var(--navy);color:#fff;display:grid;gap:15px;box-shadow:0 18px 40px rgba(3,29,55,.28)}
.hrpo-case .profile-notes b{font-size:15px;margin-bottom:8px}
.hrpo-case .profile-notes span{padding:14px 0;border-top:1px solid rgba(255,255,255,.22);font-size:12px}
.hrpo-case .profile-quote{position:absolute;left:31%;bottom:55px;width:52%;padding:30px 38px;background:var(--coral);color:#fff;font-size:20px;line-height:1.4}
.hrpo-case .scheme-scene{height:760px;background:var(--blue)}
.hrpo-case .scheme-line{position:absolute;left:0;right:0;top:220px;height:55px;background:var(--coral);transform:skewY(-6deg)}
.hrpo-case .scheme-cards{position:absolute;z-index:2;top:90px;left:7%;right:7%;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.hrpo-case .scheme-card{height:160px;padding:22px 17px;background:#fff;box-shadow:0 10px 30px rgba(4,45,80,.12);display:flex;flex-direction:column;justify-content:space-between}
.hrpo-case .scheme-card b{color:var(--coral);font-size:12px}
.hrpo-case .scheme-card span{font-size:13px;font-weight:700}
.hrpo-case .scheme-browser{width:68%;height:410px;right:7%;bottom:-25px}
.hrpo-case .menu-scene{height:660px;background:var(--navy);display:grid;place-items:center}
.hrpo-case .laptop{width:84%;margin-top:30px}
.hrpo-case .laptop-screen{height:480px;padding:12px 12px 0;background:#121923;border-radius:18px 18px 5px 5px;overflow:hidden}
.hrpo-case .laptop-screen img{width:100%;display:block}
.hrpo-case .laptop-base{width:112%;height:24px;margin-left:-6%;background:linear-gradient(#dae1e7,#aeb8c1);clip-path:polygon(3% 0,97% 0,100% 65%,99% 100%,1% 100%,0 65%)}
.hrpo-case .collage-scene{height:760px;background:var(--navy)}
.hrpo-case .collage-window{position:absolute;overflow:hidden;box-shadow:0 25px 55px rgba(0,0,0,.3)}
.hrpo-case .collage-window img{width:100%;display:block}
.hrpo-case .collage-one{left:-6%;top:80px;width:66%;height:520px;transform:rotate(-3deg)}
.hrpo-case .collage-two{right:-7%;top:35px;width:62%;height:540px;transform:rotate(4deg)}
.hrpo-case .collage-phone{position:absolute;left:43%;top:210px;width:210px;height:445px;z-index:3}
.hrpo-case .responsive-scene{height:850px;background:#f7f9fc;display:grid;grid-template-columns:30% 39% 26%;gap:2.5%;padding:70px 5%}
.hrpo-case .responsive-scene>div>span{display:block;margin-bottom:22px;font-size:12px;text-transform:uppercase;letter-spacing:.15em}
.hrpo-case .tablet-card{height:650px;padding:26px;background:var(--coral);overflow:hidden}
.hrpo-case .tablet-card img{width:150%;height:570px;object-fit:cover;object-position:top}
.hrpo-case .desktop-card{height:710px;padding:26px;background:var(--navy);color:#fff;overflow:hidden}
.hrpo-case .desktop-card img{width:100%;height:620px;object-fit:cover;object-position:top}
.hrpo-case .mobile-card{height:650px;padding:26px;background:var(--blue)}
.hrpo-case .mobile-card .phone{width:88%;height:550px;margin:auto}
.hrpo-case .banner-placeholder{height:340px;padding:55px 7%;background:#fff}
.hrpo-case .banner-placeholder>div{height:100%;border:1px dashed #9aa8b2;background:repeating-linear-gradient(135deg,#f4f7f9,#f4f7f9 10px,#edf1f4 10px,#edf1f4 20px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#66747e}
.hrpo-case .banner-placeholder small{font-size:11px;letter-spacing:.2em}
.hrpo-case .banner-placeholder strong{font-size:34px;margin:16px 0 8px;color:#2a343c}
.hrpo-case .banner-placeholder span{font-size:13px}
.hrpo-case .pages-scene{height:760px;background:var(--blue)}
.hrpo-case .page-strip{position:absolute;width:44%;height:600px;overflow:hidden;box-shadow:0 18px 40px rgba(3,39,72,.18)}
.hrpo-case .page-strip img{width:100%;display:block}
.hrpo-case .strip-one{left:-7%;top:105px;transform:rotate(-4deg)}
.hrpo-case .strip-two{left:30%;top:55px;z-index:2}
.hrpo-case .strip-three{right:-8%;top:120px;transform:rotate(4deg)}
.hrpo-case .final-section{position:relative;height:610px;background:var(--navy);overflow:hidden}
.hrpo-case .final-section>img{width:100%;height:100%;object-fit:cover}
.hrpo-case .final-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,31,61,.9),rgba(0,31,61,.18))}
.hrpo-case .final-copy{position:absolute;left:8%;top:50%;transform:translateY(-50%);max-width:610px;color:#fff}
.hrpo-case .final-copy span{font-size:12px;letter-spacing:.18em}
.hrpo-case .final-copy h2{font-size:48px;line-height:1.07;margin:28px 0}
.hrpo-case .reveal,.hrpo-case .motion-left,.hrpo-case .motion-right,.hrpo-case .persona,.hrpo-case .scheme-card{opacity:0;transition:opacity .85s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.hrpo-case .reveal{transform:translateY(28px)}
.hrpo-case .motion-left{transform:translateX(-70px)}
.hrpo-case .motion-right{transform:translateX(70px)}
.hrpo-case .persona{transform:translateY(60px)}
.hrpo-case .persona:nth-of-type(2){transform:translateY(25px)}
.hrpo-case .scheme-card{transform:translateY(45px)}
.hrpo-case .is-visible{opacity:1;transform:none}
.hrpo-case .persona:nth-of-type(2).is-visible{transform:translateY(-34px)}
.hrpo-case .case-hero{min-height:28.38542vw;background:#0f2c48;color:#fff;font-family:"HRPOMontserrat",Arial,sans-serif}
.hrpo-case .case-hero-inner{width:100%;min-height:inherit;padding:3.125vw 5.72917vw}
.hrpo-case .case-breadcrumbs{display:flex;align-items:center;gap:1.04167vw;margin:0 0 5.20833vw;font-size:14px;line-height:21px}
.hrpo-case .case-breadcrumbs a{color:inherit;text-decoration:none}
.hrpo-case .case-breadcrumbs span{opacity:1}
.hrpo-case .case-hero-content{display:flex;align-items:flex-start;justify-content:space-between}
.hrpo-case .case-hero h1{width:100%;max-width:38.59375vw;margin:0;padding:0;font-size:2.60417vw;font-weight:800;line-height:1.3;letter-spacing:normal}
.hrpo-case .case-hero-meta{display:flex;flex-direction:column;align-items:flex-start;gap:25px;margin:0;padding:0}
.hrpo-case .case-hero-meta div{display:flex;flex-direction:column;align-items:flex-start}
.hrpo-case .case-hero-meta dt{font-size:14px;font-weight:400;line-height:1.55;color:#fff}
.hrpo-case .case-hero-meta dd{margin:0;font-size:16px;font-weight:700;line-height:1.55;color:#fff}
.hrpo-case .case-hero-meta a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
.hrpo-case .copy-section.first{position:relative;display:block;min-height:0;aspect-ratio:1882/596;container-type:inline-size}
.hrpo-case .copy-section.first .copy-inner{position:absolute;left:16.06%;top:22.65%;width:67.7%;max-width:none;margin:0}
.hrpo-case .copy-section.first .copy-inner h2{margin:0 0 3.45cqw;font-size:max(1.59cqw,23px);line-height:1;letter-spacing:0}
.hrpo-case .copy-section.first .copy-inner p{margin:0 0 2.15cqw;font-size:max(1.38cqw,15px);line-height:1.48}
.hrpo-case .home-scene{z-index:1;height:auto;aspect-ratio:1882/1140;overflow:visible;background:#d4e0f4;border-radius:1.06cqw;line-height:0;container-type:inline-size}
.hrpo-case .section-01-line{position:absolute;inset:0;display:block;width:100%;height:100%}
.hrpo-case .section-01-line{z-index:1;overflow:visible}
.hrpo-case .section-01-line path{fill:none;stroke:#f3734d;stroke-width:45;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1}
.hrpo-case .section-01-line.is-visible path{animation:section-line-draw 2.8s cubic-bezier(.24,.72,.22,1) forwards}
.hrpo-case .section-01-video{position:absolute;z-index:2;left:7.226%;top:10.965%;display:block;width:85.494%;height:78.158%;object-fit:cover;border-radius:1.063cqw;background:#fff;box-shadow:0 .213cqw 2.684cqw rgba(101,115,139,.89)}
@keyframes section-line-draw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
.hrpo-case .section-02-copy{position:relative;display:block;min-height:0;aspect-ratio:1882/549;container-type:inline-size}
.hrpo-case .section-02-copy .copy-inner{position:absolute;left:16.06%;top:24.6%;width:67.7%;max-width:none;margin:0}
.hrpo-case .section-02-copy .copy-inner h2{margin:0 0 3.45cqw;font-size:max(1.59cqw,23px);line-height:1;letter-spacing:0}
.hrpo-case .section-02-copy .copy-inner p{margin:0 0 2.15cqw;font-size:max(1.38cqw,15px);line-height:1.48}
.hrpo-case .section-02-scene{height:auto;aspect-ratio:1882/1462;background:#fff;line-height:0;container-type:inline-size}
.hrpo-case .section-02-background,.hrpo-case .section-02-content,.hrpo-case .section-02-line,.hrpo-case .section-02-card-outlines{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.hrpo-case .section-02-background{z-index:0}
.hrpo-case .section-02-line{z-index:1}
.hrpo-case .section-02-card-outlines{z-index:2}
.hrpo-case .section-02-content{z-index:3;pointer-events:none}
.hrpo-case .section-02-line path{fill:none;stroke:url(#section02LineGradient);stroke-width:45;stroke-dasharray:1;stroke-dashoffset:1}
.hrpo-case .section-02-scene.is-visible .section-02-line path{animation:section-02-line-draw 3.4s cubic-bezier(.24,.72,.22,1) forwards}
.hrpo-case .section-02-collage-frame{position:absolute;z-index:2;left:26.993%;top:23.666%;width:39.161%;height:32.285%;overflow:hidden;border:1px solid rgba(147,179,207,.9);border-radius:1.065cqw;background:#0f2c48}
.hrpo-case .section-02-collage{display:block;width:108%;height:108%;max-width:none;object-fit:cover;transform:translate3d(-3.5%,3.5%,0);will-change:transform}
.hrpo-case .section-02-scene.is-visible .section-02-collage{animation:section-02-collage-move 10s ease-in-out .35s infinite alternate}
.hrpo-case .section-02-card-outlines{pointer-events:none}
.hrpo-case .section-02-card-outlines rect{fill:none;stroke:#66839b;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.hrpo-case .section-02-scene.is-visible .section-02-card-outlines rect{animation:section-02-card-draw .8s cubic-bezier(.24,.72,.22,1) forwards}
.hrpo-case .section-02-scene.is-visible .section-02-card-outlines rect:nth-child(2){animation-delay:.12s}
.hrpo-case .section-02-scene.is-visible .section-02-card-outlines rect:nth-child(3){animation-delay:.24s}
.hrpo-case .section-02-scene.is-visible .section-02-card-outlines rect:nth-child(4){animation-delay:.36s}
@keyframes section-02-line-draw{to{stroke-dashoffset:0}}
@keyframes section-02-card-draw{to{stroke-dashoffset:0}}
@keyframes section-02-collage-move{to{transform:translate3d(-4%,-4%,0)}}
.hrpo-case .section-03-copy{position:relative;display:block;min-height:0;aspect-ratio:1882/598;container-type:inline-size}
.hrpo-case .section-03-copy .copy-inner{position:absolute;left:16.06%;top:22.7%;width:67.7%;max-width:none;margin:0}
.hrpo-case .section-03-copy .copy-inner h2{margin:0 0 3.45cqw;font-size:max(1.59cqw,23px);line-height:1;letter-spacing:0}
.hrpo-case .section-03-copy .copy-inner p{margin:0 0 2.15cqw;font-size:max(1.38cqw,15px);line-height:1.48}
.hrpo-case .section-03-scene{height:auto;aspect-ratio:1882/823;background:#fff;line-height:0;container-type:inline-size}
.hrpo-case .section-03-background,.hrpo-case .section-03-line{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.hrpo-case .section-03-background{z-index:0}
.hrpo-case .section-03-line{z-index:1;overflow:visible}
.hrpo-case .section-03-line path{fill:none;stroke:url(#section03LineGradient);stroke-width:45;stroke-dasharray:1;stroke-dashoffset:1}
.hrpo-case .section-03-scene.is-visible .section-03-line path{animation:section-03-line-draw 3s cubic-bezier(.24,.72,.22,1) forwards}
.hrpo-case .section-03-card{position:absolute;z-index:2;top:27.085%;display:block;width:30.287%;height:55.782%}
.hrpo-case .section-03-card-01{left:3.267%}
.hrpo-case .section-03-card-02{left:34.883%}
.hrpo-case .section-03-card-03{left:66.445%;width:30.313%}
.hrpo-case .section-03-card-state{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:opacity .22s ease}
.hrpo-case .section-03-card-active{opacity:0}
.hrpo-case .section-03-card:hover .section-03-card-active{opacity:1}
.hrpo-case .section-03-card:hover .section-03-card-neutral{opacity:0}
@keyframes section-03-line-draw{to{stroke-dashoffset:0}}
.hrpo-case .section-04-copy{position:relative;display:block;min-height:0;aspect-ratio:1882/495;container-type:inline-size}
.hrpo-case .section-04-copy .copy-inner{position:absolute;left:16.06%;top:21.2%;width:67.7%;max-width:none;margin:0}
.hrpo-case .section-04-copy .copy-inner h2{margin:0 0 3.45cqw;font-size:max(1.59cqw,23px);line-height:1;letter-spacing:0}
.hrpo-case .section-04-copy .copy-inner p{margin:0 0 2.15cqw;font-size:max(1.38cqw,15px);line-height:1.48}
.hrpo-case .section-04-scene{height:auto;aspect-ratio:1882/1639;background:#fff;line-height:0;container-type:inline-size}
.hrpo-case .section-04-line,.hrpo-case .section-04-content,.hrpo-case .section-04-rings{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.hrpo-case .section-04-line{z-index:1}
.hrpo-case .section-04-content{z-index:2}
.hrpo-case .section-04-rings{z-index:3;pointer-events:none}
.hrpo-case .section-04-line path{fill:none;stroke:url(#section04LineGradient);stroke-width:45;stroke-dasharray:1;stroke-dashoffset:1}
.hrpo-case .section-04-rings path{fill:none;stroke:#f3734d;stroke-width:14.42;stroke-dasharray:1 1;stroke-dashoffset:1}
.hrpo-case .section-04-scene.is-visible .section-04-line path{animation:section-04-line-draw 3.6s cubic-bezier(.24,.72,.22,1) forwards}
.hrpo-case .section-04-scene.is-visible .section-04-rings path{animation:section-04-ring-draw 2s cubic-bezier(.22,.7,.2,1) forwards}
.hrpo-case .section-04-scene.is-visible .section-04-rings path:nth-child(2){animation-delay:.1s}
.hrpo-case .section-04-scene.is-visible .section-04-rings path:nth-child(3){animation-delay:.2s}
.hrpo-case .section-04-scene.is-visible .section-04-rings path:nth-child(4){animation-delay:.3s}
.hrpo-case .section-04-scene.is-visible .section-04-rings path:nth-child(5){animation-delay:.4s}
.hrpo-case .section-04-scene.is-visible .section-04-rings path:nth-child(6){animation-delay:.5s}
.hrpo-case .section-04-counters{position:absolute;z-index:4;inset:0;pointer-events:none}
.hrpo-case .section-04-counter{position:absolute;transform:translate(-50%,-50%);color:#012851;font-size:1.17cqw;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;text-align:center}
.hrpo-case .section-04-counter.counter-01{left:31.2738%;top:31.5741%}
.hrpo-case .section-04-counter.counter-02{left:39.5732%;top:31.5741%}
.hrpo-case .section-04-counter.counter-03{left:47.8726%;top:31.5741%}
.hrpo-case .section-04-counter.counter-04{left:31.2738%;top:44.5711%}
.hrpo-case .section-04-counter.counter-05{left:39.5732%;top:44.5711%}
.hrpo-case .section-04-counter.counter-06{left:47.8726%;top:44.5711%}
@keyframes section-04-line-draw{to{stroke-dashoffset:0}}
@keyframes section-04-ring-draw{to{stroke-dashoffset:var(--ring-offset)}}
.hrpo-case .section-05-copy{position:relative;display:block;min-height:0;aspect-ratio:1882/519;container-type:inline-size}
.hrpo-case .section-05-copy .copy-inner{position:absolute;left:16.06%;top:26.1%;width:67.7%;max-width:none;margin:0}
.hrpo-case .section-05-copy .copy-inner h2{margin:0 0 3.45cqw;font-size:max(1.59cqw,23px);line-height:1;letter-spacing:0}
.hrpo-case .section-05-copy .copy-inner p{margin:0 0 2.15cqw;font-size:max(1.38cqw,15px);line-height:1.48}
.hrpo-case .section-05-composition{position:relative;overflow:hidden}
.hrpo-case .section-05-scene{height:auto;aspect-ratio:1882/1788;background:#fff;line-height:0;container-type:inline-size}
.hrpo-case .section-05-background,.hrpo-case .section-05-line,.hrpo-case .section-05-content{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.hrpo-case .section-05-background{z-index:0}
.hrpo-case .section-05-line{z-index:1;overflow:visible}
.hrpo-case .section-05-content{z-index:3;pointer-events:none}
.hrpo-case .section-05-video{position:absolute;z-index:2;left:30.2338%;top:56.7114%;display:block;width:60.8397%;height:40.4362%;object-fit:cover;object-position:center;pointer-events:none;background:#fff;border-radius:1.063cqw 1.063cqw 0 0}
.hrpo-case .section-05-line path{fill:none;stroke:url(#section05LineGradient);stroke-width:45;stroke-dasharray:1;stroke-dashoffset:1}
.hrpo-case .section-05-composition.is-visible .section-05-line path{animation:section-05-line-draw 3.6s cubic-bezier(.24,.72,.22,1) forwards}
.hrpo-case .section-05-card{position:absolute;z-index:2;width:20.5632%;height:20.9172%}
.hrpo-case .section-05-card-01{left:3.1881%;top:35.4027%}
.hrpo-case .section-05-card-02{left:24.7609%;top:35.4027%}
.hrpo-case .section-05-card-03{left:46.44%;top:13.3669%}
.hrpo-case .section-05-card-04{left:68.0659%;top:35.4027%}
.hrpo-case .section-05-card-05{left:3.1881%;top:57.4385%}
.hrpo-case .section-05-card-state{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:opacity .22s ease}
.hrpo-case .section-05-card-active{opacity:0}
.hrpo-case .section-05-card:hover .section-05-card-active{opacity:1}
.hrpo-case .section-05-card:hover .section-05-card-neutral{opacity:0}
.hrpo-case .section-05-card-03 .section-05-card-neutral{opacity:0}
.hrpo-case .section-05-card-03 .section-05-card-active{opacity:1}
@keyframes section-05-line-draw{to{stroke-dashoffset:0}}
.hrpo-case .exact-section{position:relative;width:100%;height:auto;overflow:hidden;background:#fff;line-height:0;container-type:inline-size}
.hrpo-case .exact-section>img,.hrpo-case .exact-section-line{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.hrpo-case .exact-section>img{z-index:2}
.hrpo-case .exact-section-line{z-index:3;overflow:visible;pointer-events:none}
.hrpo-case .section-06{aspect-ratio:1882/1870}
.hrpo-case .section-07{aspect-ratio:1882/2110}
.hrpo-case .section-08{aspect-ratio:1882/2736}
.hrpo-case .section-09{aspect-ratio:1882/1888}
.hrpo-case .section-10{aspect-ratio:1882/2640}
.hrpo-case .section-11{aspect-ratio:1882/1526}
.hrpo-case .section-12{aspect-ratio:1882/1693}
.hrpo-case .section-07 .exact-section-line path{fill:none;stroke:url(#section07LineGradient);stroke-width:45;stroke-dasharray:1;stroke-dashoffset:1}
.hrpo-case .section-07 .section-07-back{z-index:2}
.hrpo-case .section-07 .exact-section-line{z-index:3}
.hrpo-case .section-07 .section-07-front{z-index:4;pointer-events:none}
.hrpo-case .section-07 .section-07-copy{z-index:5;pointer-events:none}
.hrpo-case .section-08-video{position:absolute;z-index:4;overflow:hidden;pointer-events:none;background:#fff}
.hrpo-case .section-08-video video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.hrpo-case .section-08-video-tablet{left:12.593%;top:30.300%;width:24.283%;height:22.442%}
.hrpo-case .section-08-video-mobile{left:17.163%;top:69.481%;width:15.223%;height:22.700%;border-radius:.797cqw .797cqw 1.594cqw 1.594cqw}
.hrpo-case .exact-video{position:absolute;z-index:4;display:block;object-fit:cover;pointer-events:none;background:#fff}
.hrpo-case .section-09-video{left:6.482%;top:42.002%;width:86.823%;height:47.881%;border-radius:1.063cqw}
.hrpo-case .section-10-video{left:16.472%;top:69.735%;width:67.003%;height:23.657%;border-radius:1.063cqw}
.hrpo-case .animated-section.is-visible .exact-section-line path{animation:exact-section-line-draw 3.8s cubic-bezier(.24,.72,.22,1) forwards}
@keyframes exact-section-line-draw{to{stroke-dashoffset:0}}
@media(max-width:1180px){.hrpo-case{--side:190px}
.hrpo-case .portfolio-header{gap:20px;padding:0 28px}
.hrpo-case .copy-inner{width:75%}
.hrpo-case .metrics{gap:15px}
.hrpo-case .metrics b{font-size:27px}
.hrpo-case .metrics span{font-size:10px}}
@media(max-width:1440px){.hrpo-case .case-hero{min-height:500px}
.hrpo-case .case-hero-inner{min-height:500px;padding:60px}
.hrpo-case .case-breadcrumbs{gap:15px;margin-bottom:75px;font-size:14px;line-height:21px}
.hrpo-case .case-hero h1{max-width:561px;font-size:40px;line-height:1.3}
.hrpo-case .case-hero-meta{gap:15px}
.hrpo-case .copy-section.first,.hrpo-case .section-02-copy,.hrpo-case .section-03-copy,.hrpo-case .section-04-copy,.hrpo-case .section-05-copy{display:block;min-height:0;aspect-ratio:auto;padding:56px clamp(48px,7vw,80px);container-type:normal}
.hrpo-case .copy-section.first .copy-inner,.hrpo-case .section-02-copy .copy-inner,.hrpo-case .section-03-copy .copy-inner,.hrpo-case .section-04-copy .copy-inner,.hrpo-case .section-05-copy .copy-inner{position:static;width:100%;max-width:780px;margin:0 auto}
.hrpo-case .copy-section.first .copy-inner h2,.hrpo-case .section-02-copy .copy-inner h2,.hrpo-case .section-03-copy .copy-inner h2,.hrpo-case .section-04-copy .copy-inner h2,.hrpo-case .section-05-copy .copy-inner h2{margin:0 0 26px;font-size:30px;line-height:1.12;letter-spacing:-.025em}
.hrpo-case .copy-section.first .copy-inner p,.hrpo-case .section-02-copy .copy-inner p,.hrpo-case .section-03-copy .copy-inner p,.hrpo-case .section-04-copy .copy-inner p,.hrpo-case .section-05-copy .copy-inner p{margin:0 0 18px;font-size:16px;line-height:1.55}
.hrpo-case .copy-inner p:last-child{margin-bottom:0}}
@media(min-width:1025px) and (max-width:1280px){.hrpo-case .case-breadcrumbs{margin-bottom:66.6666px;font-size:12px;line-height:18px}}
@media(max-width:1024px){.hrpo-case{--side:0px;--head:116px}
.hrpo-case{scroll-padding-top:116px}
.hrpo-case .portfolio-sidebar{inset:0 0 auto 0;width:100%;height:64px;padding:14px 24px;flex-direction:row;align-items:center;gap:28px}
.hrpo-case .studio-mark{flex:0 0 auto}
.hrpo-case .side-nav{display:flex;align-items:center;gap:24px;min-width:0;margin:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
.hrpo-case .side-nav::-webkit-scrollbar,.hrpo-case .portfolio-header::-webkit-scrollbar{display:none}
.hrpo-case .side-nav a{flex:0 0 auto;font-size:14px;white-space:nowrap}
.hrpo-case .side-nav a.is-active:before{left:0;right:0;top:auto;bottom:-9px;width:auto;height:2px}
.hrpo-case .side-socials{flex:0 0 auto;margin:0 0 0 auto}
.hrpo-case .portfolio-header{left:0;top:64px;height:52px;padding:0 24px;gap:20px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;white-space:nowrap;font-size:13px}
.hrpo-case .portfolio-header>span{flex:0 0 auto}
.hrpo-case .portfolio-header>span:not(.header-phone):not(.header-circle):before{margin-right:7px}
.hrpo-case .header-phone{margin-left:auto}
.hrpo-case .header-circle{width:30px;height:30px}
.hrpo-case.case{margin-left:0;padding-top:var(--head)}
.hrpo-case .case-hero{min-height:0}
.hrpo-case .case-hero-inner{min-height:0;padding:40px 30px 80px}
.hrpo-case .case-breadcrumbs{gap:15px;margin-bottom:85px;font-size:14px;line-height:21px}
.hrpo-case .case-hero-content{gap:148px}
.hrpo-case .case-hero h1{flex:1 1 405px;max-width:405px;font-size:30px;line-height:1.3}
.hrpo-case .case-hero-meta{flex:0 1 286px;min-width:0;gap:15px}
.hrpo-case .copy-section.first,.hrpo-case .section-02-copy,.hrpo-case .section-03-copy,.hrpo-case .section-04-copy,.hrpo-case .section-05-copy{display:block;min-height:0;aspect-ratio:auto;padding:64px clamp(32px,8vw,82px);container-type:normal}
.hrpo-case .copy-section.first .copy-inner,.hrpo-case .section-02-copy .copy-inner,.hrpo-case .section-03-copy .copy-inner,.hrpo-case .section-04-copy .copy-inner,.hrpo-case .section-05-copy .copy-inner{position:static;width:100%;max-width:780px;margin:0 auto}
.hrpo-case .copy-section.first .copy-inner h2,.hrpo-case .section-02-copy .copy-inner h2,.hrpo-case .section-03-copy .copy-inner h2,.hrpo-case .section-04-copy .copy-inner h2,.hrpo-case .section-05-copy .copy-inner h2{margin:0 0 28px;font-size:clamp(28px,3.4vw,34px);line-height:1.12;letter-spacing:-.025em}
.hrpo-case .copy-section.first .copy-inner p,.hrpo-case .section-02-copy .copy-inner p,.hrpo-case .section-03-copy .copy-inner p,.hrpo-case .section-04-copy .copy-inner p,.hrpo-case .section-05-copy .copy-inner p{margin:0 0 18px;font-size:17px;line-height:1.55}
.hrpo-case .copy-inner p:last-child{margin-bottom:0}}
@media(max-width:767px){.hrpo-case{--head:106px}
.hrpo-case{scroll-padding-top:106px}
.hrpo-case .portfolio-sidebar{height:58px;padding:12px 16px;gap:16px}
.hrpo-case .studio-mark{width:74px;height:23px;font-size:10px}
.hrpo-case .side-nav{gap:18px}
.hrpo-case .side-nav a{font-size:13px}
.hrpo-case .side-nav a.is-active:before{bottom:-8px}
.hrpo-case .side-socials{display:none}
.hrpo-case .portfolio-header{top:58px;height:48px;padding:0 16px;gap:22px;font-size:12px}
.hrpo-case .header-phone{margin-left:0}
.hrpo-case .header-circle{width:28px;height:28px;font-size:16px}
.hrpo-case .copy-section.first,.hrpo-case .section-02-copy,.hrpo-case .section-03-copy,.hrpo-case .section-04-copy,.hrpo-case .section-05-copy{padding:44px 20px}
.hrpo-case .copy-section.first .copy-inner h2,.hrpo-case .section-02-copy .copy-inner h2,.hrpo-case .section-03-copy .copy-inner h2,.hrpo-case .section-04-copy .copy-inner h2,.hrpo-case .section-05-copy .copy-inner h2{margin-bottom:22px;font-size:25px;line-height:1.16}
.hrpo-case .copy-section.first .copy-inner p,.hrpo-case .section-02-copy .copy-inner p,.hrpo-case .section-03-copy .copy-inner p,.hrpo-case .section-04-copy .copy-inner p,.hrpo-case .section-05-copy .copy-inner p{margin-bottom:16px;font-size:16px;line-height:1.55}}
@media(max-width:600px){.hrpo-case .case-hero-meta{display:none}
.hrpo-case .case-hero-content{display:block}
.hrpo-case .case-hero h1{max-width:none}}
@media(max-width:480px){.hrpo-case .case-hero-inner{padding:40px 15px 80px}
.hrpo-case .case-breadcrumbs{margin-bottom:50px}
.hrpo-case .case-hero h1{font-size:25px;line-height:1.3}}
@media(prefers-reduced-motion:reduce){.hrpo-case{scroll-behavior:auto}
.hrpo-case .reveal,.hrpo-case .motion-left,.hrpo-case .motion-right,.hrpo-case .persona,.hrpo-case .scheme-card{opacity:1;transform:none;transition:none}
.hrpo-case .section-01-line.is-visible path,.hrpo-case .section-02-scene.is-visible .section-02-line path,.hrpo-case .section-03-scene.is-visible .section-03-line path,.hrpo-case .section-04-scene.is-visible .section-04-line path,.hrpo-case .section-05-composition.is-visible .section-05-line path,.hrpo-case .animated-section.is-visible .exact-section-line path{animation:none;stroke-dashoffset:0}
.hrpo-case .section-02-scene.is-visible .section-02-card-outlines rect{animation:none;stroke-dashoffset:0}
.hrpo-case .section-02-scene.is-visible .section-02-collage{animation:none}
.hrpo-case .section-04-scene.is-visible .section-04-rings path{animation:none;stroke-dashoffset:var(--ring-offset)}}
.hrpo-case{scroll-padding-top:0}
.hrpo-case.case{margin-left:0;padding-top:0}
/* The host template supplies the navigation offsets. */
.hrpo-case.case{margin:0;padding:0;width:100%;max-width:none;position:relative;isolation:isolate}
.hrpo-case img{max-width:100%}

/* Override the host site's white heading color inside this case only. */
.hrpo-case .copy-inner h2{color:var(--ink);display:block;font-weight:700}