@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root{--hh-purple:#813be6;--hh-paper:#fffefa;--hh-black:#080808;--hh-wrap:1154px}
.elementor-widget[class*="elementor-widget-hh_"]{margin:0!important;align-self:stretch!important;width:100%!important}
.elementor-widget[class*="elementor-widget-hh_"]>.elementor-widget-container{margin:0!important;padding:0!important}
.elementor-element.e-con:has(>.elementor-widget[class*="elementor-widget-hh_"]){gap:0!important;row-gap:0!important;column-gap:0!important;--gap:0px!important;--row-gap:0px!important;--column-gap:0px!important}
.hh-section,.hh-section *{box-sizing:border-box}
.hh-section{width:100%;max-width:100%;font-family:Poppins,Arial,sans-serif;overflow:hidden}
.hh-section a{text-decoration:none;color:inherit}.hh-section img{display:block;max-width:100%}.hh-section button,.hh-section input,.hh-section textarea{font:inherit}.hh-section button{cursor:pointer}
.hh-wrap{width:min(var(--hh-wrap),calc(100% - 44px));margin:0 auto}
.hh-grid{background-color:var(--hh-paper);background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(10% - 1px),#ebe7e4 calc(10% - 1px),#ebe7e4 10%)}
.hh-pill{display:inline-flex;align-items:center;justify-content:space-between;gap:15px;min-width:138px;height:42px;border-radius:24px;background:#222;color:#fff!important;padding:2px 2px 2px 18px;border:0;white-space:nowrap;font-size:12px;font-weight:400;transition:transform .28s,background .28s}
.hh-pill:hover{transform:translateY(-3px);background:#3b3b3b}.hh-pill-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--hh-purple);color:#fff;font-size:17px}.hh-pill-light{background:#fff!important;color:#111!important}.hh-pill-light:hover{background:#f5edff!important}

/* The header and hero are one Elementor widget so their first entrance stays in sync. */
.hh-hero{position:relative;min-height:650px;height:88vh;max-height:820px;color:var(--hh-black)}
.hh-header{position:absolute;top:0;left:50%;transform:translateX(-50%);height:98px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:30px;opacity:0}
.hh-header{background:var(--hh-header-bg,transparent)}.hh-header-sticky{position:fixed;box-shadow:0 8px 30px #0000000d;backdrop-filter:blur(12px)}.hh-header nav{margin-left:auto}.hh-header .hh-nav{list-style:none;margin:0;padding:0}.hh-header .hh-nav a{color:var(--hh-header-link,#919191)!important}.hh-header .hh-nav a:hover,.hh-header .hh-nav .current-menu-item>a{color:var(--hh-header-active,#111)!important}.hh-header>.hh-pill{background:var(--hh-header-button,#222)}.hh-header>.hh-pill .hh-pill-arrow{background:var(--hh-header-accent,#813be6)}
.hh-header.hh-ready{animation:hhHeadIn .65s .12s both}@keyframes hhHeadIn{from{opacity:0;transform:translateX(-50%) translateY(-26px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.hh-brand{width:205px;flex:none}.hh-brand img{width:195px;height:auto}.hh-nav{display:flex;align-items:center;gap:43px}.hh-nav a{font-size:12px;color:#919191!important;transition:color .25s}.hh-nav a:first-child,.hh-nav a:hover{color:#111!important}.hh-menu-toggle{display:none}
.hh-hero-grid{height:100%;padding-top:76px;display:grid;grid-template-columns:66% 34%;align-items:center}
.hh-hero-title{font:400 clamp(58px,5.7vw,82px)/1.55 Arial,Helvetica,sans-serif;letter-spacing:-.063em;margin:0;color:#050505}
.hh-hero-line{display:block;white-space:nowrap;opacity:0;transform:translateY(84px) rotate(-2deg);will-change:transform,opacity}
.hh-hero-line.hh-visible{animation:hhHeroLine .95s cubic-bezier(.2,.72,.15,1) both}@keyframes hhHeroLine{from{opacity:0;transform:translateY(84px) rotate(-2deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
.hh-creative-line{display:flex;align-items:center;line-height:1.12;margin:20px 0 16px;padding-left:62px;gap:20px}
.hh-video-tile{width:225px;height:116px;flex:none;border:0;background:linear-gradient(125deg,#2c103e,#4b176c);display:grid;place-items:center;box-shadow:0 20px 55px #34115422;transform:rotate(-2deg);position:relative;overflow:hidden}
.hh-video-tile:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 28px,#7b3ea021 29px 32px);opacity:.8;animation:hhTileDrift 8s linear infinite}@keyframes hhTileDrift{to{transform:translateX(80px)}}
.hh-play{position:relative;width:30px;height:30px;border-radius:50%;background:#b48bea;color:#521c77;font-size:12px;display:grid;place-items:center;border:3px solid #6a3897;transition:transform .25s}.hh-video-tile:hover .hh-play{transform:scale(1.3)}
.hh-hero-side{padding-left:30px;opacity:0;transform:translateY(48px)}.hh-hero-side.hh-visible{animation:hhSideIn 1.15s cubic-bezier(.2,.72,.15,1) both}@keyframes hhSideIn{to{opacity:1;transform:none}}
.hh-laptop-art{width:310px;margin:0 0 22px 70px;will-change:transform;animation:hhFloat 5.2s ease-in-out infinite}.hh-laptop-art img{width:100%}.hh-hero-side p{max-width:360px;font-size:16px;line-height:1.5;font-weight:300;margin:0 0 24px;color:#333}
@keyframes hhFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.hh-scroll-cue{position:absolute;bottom:21px;left:50%;transform:translateX(-50%);font-size:11px;color:#aaa!important;text-align:center}.hh-scroll-cue span{display:block;color:var(--hh-purple);font-size:23px;animation:hhArrowBounce 2s infinite}@keyframes hhArrowBounce{50%{transform:translateY(8px)}}
.hh-video-modal{position:fixed;inset:0;z-index:9999;background:#050505eb;display:grid;place-items:center;padding:30px}.hh-video-modal[hidden]{display:none}.hh-video-modal video{max-width:900px;width:100%;max-height:80vh}.hh-video-close{position:absolute;right:30px;top:20px;background:none;color:#fff;border:0;font-size:38px}

/* About is revealed by scrolling, with title before metrics and team. */
.hh-about{min-height:920px;padding:70px 0 110px;background:var(--hh-paper);color:#222}
.hh-about-heading{text-align:right;font:400 clamp(57px,6vw,86px)/.95 Arial,sans-serif;letter-spacing:-.066em;margin:0 0 105px;opacity:0;transform:translateY(80px)}.hh-about-heading span{display:block}
.hh-about-heading.hh-visible{animation:hhRise .95s cubic-bezier(.16,.78,.15,1) both}@keyframes hhRise{to{opacity:1;transform:none}}
.hh-about-grid{display:grid;grid-template-columns:47% 53%;gap:35px;align-items:end}.hh-about-left,.hh-about-right{opacity:0;transform:translateY(70px)}.hh-about-left.hh-visible,.hh-about-right.hh-visible{animation:hhRise 1s cubic-bezier(.16,.78,.15,1) both}
.hh-experience{display:flex;align-items:end;gap:18px;margin:0 0 60px}.hh-experience strong{font:400 85px/.82 Arial,sans-serif;color:var(--hh-purple)}.hh-experience span{font-size:20px}.hh-team{width:320px;height:230px;object-fit:cover;margin-left:auto}
.hh-about-right p{font-size:16px;line-height:1.53;font-weight:300;max-width:575px;margin:0 0 40px}.hh-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.hh-metrics strong{display:block;color:var(--hh-purple);font:400 56px Arial,sans-serif}.hh-metrics span{font-size:12px}

/* Work title occupies the viewport before the staggered project columns. */
.hh-work{background:var(--hh-paper);color:#111}.hh-work-intro{min-height:98vh;display:grid;place-items:center}.hh-work-intro h2{font:400 clamp(62px,7vw,100px) Arial,sans-serif;letter-spacing:-.07em;margin:0;opacity:0;transform:scale(.72);will-change:transform,opacity}
.hh-projects{padding:75px 0 135px}.hh-projects h3{font:400 34px Arial,sans-serif;letter-spacing:-.05em;margin:0 0 55px}.hh-project-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:65px;row-gap:25px}.hh-project-card{opacity:0;transform:translateY(80px)}.hh-project-card.hh-visible{animation:hhRise .85s cubic-bezier(.16,.78,.15,1) both}.hh-project-card:nth-child(3n + 2){margin-top:65px;position:relative;top:110px}.hh-project-image{overflow:hidden;background:#f4eff9}.hh-project-image img{width:100%;height:280px;object-fit:cover;transition:transform .6s}.hh-project-card:hover img{transform:scale(1.055)}.hh-project-card h4,.hh-project-card p{font-size:12px;font-weight:400;margin:11px 0 0}.hh-project-card p{margin:2px 0 0}.hh-work-cta{display:flex;justify-content:center;margin-top:0;padding-top:24px;position:relative;z-index:3}.hh-project-grid{margin-bottom:110px}

/* The oversized white-to-black prelude and pinned card stack follow the recording. */
.hh-services{background:#050505}.hh-service-prelude{height:115vh;min-height:550px;background:var(--hh-paper);display:grid;place-items:center;position:relative;overflow:hidden}.hh-service-prelude h2{text-align:center;font:400 43px/1.2 Arial,sans-serif;letter-spacing:-.055em;margin:0;transform:scale(.55);opacity:.4;will-change:transform,opacity}.hh-service-prelude h2 span{display:block}.hh-service-prelude:after{content:'';position:absolute;inset:0;background:#050505;transform:translateY(calc(100% - var(--hh-wipe,0%)));pointer-events:none}
.hh-services-scroll{height:calc((var(--hh-slides) + 1)*100vh);min-height:850px;background:#050505;color:#fff}.hh-services-stage{position:sticky;top:0;height:100vh;min-height:680px;display:grid;align-items:center;padding:45px 0 30px;background:#050505;overflow:hidden}
.hh-service-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 110px}.hh-service-head h2{font:400 36px Arial,sans-serif;letter-spacing:-.055em;margin:0}.hh-stack{width:min(853px,100%);height:420px;margin:0 auto;position:relative;perspective:1200px}.hh-stack-back{position:absolute;inset:0}.hh-stack-back i{position:absolute;width:100%;height:100%;display:block}.hh-stack-back i:nth-child(1){background:#ffe9e5;transform:translate(60px,-52px)}.hh-stack-back i:nth-child(2){background:#e1ecff;transform:translate(30px,-27px)}.hh-stack-back i:nth-child(3){background:#f3dfff;transform:translate(0,0)}
.hh-service-card{position:absolute;inset:0;display:grid;grid-template-columns:39% 61%;align-items:center;gap:25px;padding:24px 38px 24px 32px;color:#313131;background:#fff;opacity:0;transform:translateX(170px) translateY(60px) rotate(9deg) scale(.88);transform-origin:center;pointer-events:none;will-change:transform,opacity;transition:transform .9s cubic-bezier(.16,.75,.18,1),opacity .65s}
.hh-service-card.hh-active{opacity:1;transform:translateX(0) translateY(0) rotate(0) scale(1);pointer-events:auto;z-index:4}.hh-service-card.hh-previous{opacity:.22;transform:translateX(-105%) rotate(-14deg) scale(.87);z-index:2}
.hh-service-card img{width:322px;height:370px;object-fit:cover}.hh-service-copy h3{font:400 30px Arial,sans-serif;letter-spacing:-.05em;margin:0 0 26px}.hh-service-copy p{font-size:16px;line-height:1.48;font-weight:300;max-width:460px;margin:0 0 50px}.hh-service-dots{display:flex;gap:9px;margin:30px 0 0 7px}.hh-service-dots button{height:5px;width:45px;background:#e9e9e9;border:0;border-radius:6px;padding:0}.hh-service-dots button.hh-current{background:var(--hh-purple)}.hh-service-arrows{display:flex;justify-content:center;gap:12px;margin-top:53px}.hh-service-arrows button{height:40px;width:40px;border:1px solid #777;border-radius:50%;background:#161616;color:#fff;font-size:20px}

/* The black process interlude zooms into the white step timeline. */
.hh-process-intro{height:115vh;min-height:720px;position:relative;display:grid;place-items:center;background:#050505;color:#fff;overflow:hidden}.hh-process-intro-content{text-align:center;position:relative;z-index:2;transform:translateY(50px);opacity:0}.hh-process-intro-content h2{font:400 clamp(64px,7vw,105px) Arial,sans-serif;letter-spacing:-.065em;margin:30px 0 0}.hh-process-symbol{display:block;width:120px;height:120px;margin:auto;background:linear-gradient(145deg,#ad58ff,#6b2ad7);clip-path:polygon(50% 0,100% 100%,50% 66%,0 100%);transform:rotate(-25deg);filter:drop-shadow(0 8px 8px #7b3ad8)}.hh-process-giant{position:absolute;bottom:-.4em;left:50%;transform:translateX(-50%) scale(1.7);white-space:nowrap;font:400 clamp(80px,10vw,180px) Arial,sans-serif;letter-spacing:-.08em;color:#fff;opacity:0;pointer-events:none}
.hh-process-main{background:var(--hh-paper);color:#222;padding:120px 0 65px}.hh-process-grid{display:grid;grid-template-columns:42% 7% 51%;gap:0}.hh-process-copy{position:sticky;align-self:start;top:115px}.hh-process-copy h2{font:400 clamp(39px,3.7vw,52px)/1.1 Arial,sans-serif;letter-spacing:-.045em;max-width:430px;margin:0 0 35px}.hh-timeline{position:relative;background:#e4d6f4;width:3px;min-height:700px;margin:0 auto}.hh-timeline-fill{position:absolute;top:0;left:0;width:3px;height:var(--hh-line,0%);background:var(--hh-purple)}.hh-timeline-arrow{position:absolute;top:var(--hh-line,0%);left:-9px;color:var(--hh-purple);font-size:20px;transform:translateY(-50%)}
.hh-process-steps{display:grid;gap:18px}.hh-process-step{position:relative;min-height:210px;border:1px solid #e7e1e1;border-radius:8px;background:#fff;padding:35px;opacity:.35;transform:translateY(30px);transition:opacity .7s,transform .7s}.hh-process-step.hh-visible{opacity:1;transform:none}.hh-step-symbol{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;background:var(--hh-purple);color:#fff;font-size:22px;margin-bottom:22px}.hh-process-step strong{position:absolute;right:25px;top:12px;font:400 90px Arial,sans-serif;letter-spacing:-.07em;color:#dbc5f2}.hh-process-step h3{font:400 21px Arial,sans-serif;letter-spacing:-.03em;margin:0 0 12px}.hh-process-step p{font-size:14px;font-weight:300;line-height:1.5;max-width:370px;margin:0}

.hh-tech{padding:80px 0 95px;background:var(--hh-paper)}.hh-tech h2{text-align:center;font:400 clamp(34px,4vw,49px) Arial,sans-serif;letter-spacing:-.055em;margin:0 0 58px;color:#0b0b0b}.hh-tech h2 span{color:#a548dd}.hh-tech-rail{overflow:hidden;border-block:1px solid #e8e4e8}.hh-tech-track{display:flex;width:max-content;animation:hhMarquee 27s linear infinite}.hh-tech-track span{height:84px;min-width:170px;padding:0 22px;border-right:1px solid #e8e4e8;display:flex;align-items:center;justify-content:center;gap:12px;font-size:30px;font-weight:600;white-space:nowrap;color:#252525}.hh-tech-track span img{width:34px;height:34px;object-fit:contain;display:block;flex:0 0 auto}.hh-tech-track span b{font:inherit;color:inherit}.hh-tech-track span.hh-tech-platform b{color:var(--hh-platform-color,#252525)}.hh-tech-track span:nth-child(4n+1){color:#7533d9}.hh-tech-track span:nth-child(4n+2){color:#55a348}@keyframes hhMarquee{to{transform:translateX(-50%)}}

.hh-contact{background:#050505;color:#fff;padding:125px 0 120px}.hh-contact-grid{display:grid;grid-template-columns:48% 52%;gap:30px}.hh-contact-copy{opacity:0;transform:translateY(70px)}.hh-contact-copy.hh-visible,.hh-contact-form.hh-visible{animation:hhRise .9s cubic-bezier(.16,.78,.15,1) both}.hh-contact-copy h2{font:400 clamp(45px,5vw,71px)/1.05 Arial,sans-serif;letter-spacing:-.06em;margin:0 0 32px}.hh-contact-copy h2 span{display:block}.hh-contact-copy p{max-width:510px;font-size:16px;font-weight:300;line-height:1.65;margin:0 0 30px}.hh-contact-form{background:var(--hh-paper);border-radius:16px;color:#222;padding:32px 25px;display:grid;grid-template-columns:1fr 1fr;gap:19px;opacity:0;transform:translateY(70px)}.hh-contact-form label{display:grid;gap:7px;font-size:15px}.hh-contact-form .hh-full{grid-column:1/-1}.hh-contact-form input,.hh-contact-form textarea{width:100%;background:transparent;border:1px solid #ccc7cc;border-radius:6px;padding:10px;outline:none}.hh-contact-form input:focus,.hh-contact-form textarea:focus{border-color:var(--hh-purple)}.hh-contact-form textarea{resize:vertical;min-height:110px}.hh-contact-form button{grid-column:1/-1;justify-self:center;margin:10px auto 0}.hh-form-status{grid-column:1/-1;text-align:center;font-size:13px;margin:0}
.hh-footer{background:#050505;color:#fff;padding:70px 0 25px;border-top:1px solid #2a2a2a}.hh-footer-grid{display:grid;grid-template-columns:2.4fr 1fr 1fr 1fr;gap:45px}.hh-footer-brand img{width:265px;height:auto}.hh-footer-brand p{max-width:380px;font-size:13px;font-weight:300;line-height:1.6;margin:20px 0 0}.hh-footer h3{font-size:15px;font-weight:400;margin:0 0 16px}.hh-footer a,.hh-footer span{font-size:12px;display:block;margin:0 0 14px;color:#ddd}.hh-footer a:hover{color:#ba75f0}.hh-copyright{text-align:center;color:#aaa;font-size:13px;border-top:1px solid #242424;margin:75px 0 0;padding-top:22px}

@media(max-width:1050px){.hh-nav{gap:18px}.hh-hero-grid{grid-template-columns:61% 39%}.hh-hero-title{font-size:62px}.hh-video-tile{width:170px;height:90px}.hh-laptop-art{width:270px;margin-left:0}.hh-project-grid{gap:25px 25px}.hh-project-card:nth-child(3n + 2){margin-top:55px;top:90px}.hh-project-image img{height:225px}.hh-stack{width:min(760px,100%)}.hh-service-card{grid-template-columns:43% 57%}.hh-service-card img{height:330px}}
@media(max-width:760px){.hh-wrap{width:calc(100% - 32px)}.hh-hero{height:auto;min-height:780px;max-height:none}.hh-header{height:75px}.hh-brand{width:170px}.hh-brand img{width:165px}.hh-header>.hh-pill{display:none}.hh-menu-toggle{display:block;background:none;border:0;color:#111;font-size:29px;margin-left:auto}.hh-nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;box-shadow:0 15px 35px #0002;flex-direction:column;align-items:stretch;gap:0;padding:12px}.hh-nav.hh-open{display:flex}.hh-nav a{padding:10px}.hh-hero-grid{display:block;padding-top:125px}.hh-hero-title{font-size:clamp(43px,10vw,64px);line-height:1.22}.hh-creative-line{gap:8px;margin:25px 0;padding-left:0}.hh-video-tile{width:100px;height:65px}.hh-hero-side{padding:25px 0 80px}.hh-laptop-art{width:255px;margin:0 auto 15px}.hh-hero-side p{font-size:14px}.hh-about{min-height:0;padding:90px 0}.hh-about-heading{text-align:left;margin-bottom:60px}.hh-about-grid{display:block}.hh-experience{margin-bottom:35px}.hh-experience strong{font-size:70px}.hh-team{width:100%;height:auto;margin:0 0 30px}.hh-metrics strong{font-size:38px}.hh-metrics span{font-size:11px}.hh-work-intro{min-height:55vh}.hh-projects{padding:55px 0 100px}.hh-project-grid{grid-template-columns:repeat(2,1fr);gap:25px 15px;margin-bottom:0}.hh-project-card:nth-child(n){margin-top:0;top:0}.hh-project-image img{height:165px}.hh-work-cta{margin-top:28px}.hh-service-prelude{height:80vh;min-height:400px}.hh-service-prelude h2{font-size:37px}.hh-services-scroll{height:calc((var(--hh-slides) + 1)*85vh)}.hh-services-stage{min-height:620px;height:85vh;padding:50px 0 25px}.hh-service-head{margin-bottom:80px}.hh-service-head h2{font-size:26px}.hh-service-head .hh-pill{display:none}.hh-stack{height:455px}.hh-stack-back i:nth-child(1){transform:translate(20px,-48px)}.hh-stack-back i:nth-child(2){transform:translate(10px,-24px)}.hh-service-card{display:block;min-height:455px;padding:20px}.hh-service-card img{width:100%;height:210px}.hh-service-copy h3{font-size:23px;margin:19px 0 11px}.hh-service-copy p{font-size:12px;margin:0 0 18px}.hh-service-dots{margin-top:17px}.hh-service-arrows{margin-top:24px}.hh-process-intro{height:75vh;min-height:420px}.hh-process-intro-content h2{font-size:61px}.hh-process-grid{display:block}.hh-process-copy{position:static;margin-bottom:45px}.hh-timeline{display:none}.hh-process-main{padding:80px 0}.hh-process-step{min-height:185px}.hh-tech{padding:50px 0}.hh-tech h2{margin-bottom:35px}.hh-contact{padding:75px 0}.hh-contact-grid{display:block}.hh-contact-copy{margin-bottom:40px}.hh-footer-grid{grid-template-columns:repeat(2,1fr);gap:40px 25px}.hh-footer-brand{grid-column:1/-1}}
@media(max-width:480px){.hh-hero-title{font-size:41px}.hh-creative-line{white-space:nowrap}.hh-video-tile{width:92px;height:58px}.hh-hero-side{padding-top:15px}.hh-project-image img{height:135px}.hh-projects h3{font-size:28px}.hh-service-card img{height:180px}.hh-service-card{min-height:425px}.hh-stack{height:425px}.hh-service-dots button{width:34px}.hh-metrics strong{font-size:30px}.hh-contact-form{display:block}.hh-contact-form label{margin-bottom:15px}.hh-contact-form button{margin:18px auto}.hh-contact-copy h2{font-size:44px}}
@media(prefers-reduced-motion:reduce){.hh-section *{animation-duration:.01ms!important;transition-duration:.01ms!important}.hh-header,.hh-hero-line,.hh-hero-side,.hh-about-heading,.hh-about-left,.hh-about-right,.hh-project-card,.hh-contact-copy,.hh-contact-form,.hh-process-step{opacity:1!important;transform:none!important}.hh-tech-track{animation:none}}
@media(min-width:761px){.hh-services-stage{align-items:start;padding-top:62px}.hh-service-head{margin-bottom:110px}}
.hh-services,.hh-process{overflow:visible}
.elementor-widget-hh_services,.elementor-widget-hh_process{overflow:visible!important}
/* The recorded services sequence runs within one naturally scrolling panel. */
.hh-services-scroll{height:calc(100vh + 45px);min-height:735px}
.hh-services-stage{position:relative;height:100vh;min-height:690px;overflow:hidden}
.hh-stack-back{transition:opacity .55s ease}
.hh-services-stage[data-hh-active="2"] .hh-stack-back,.hh-services-stage[data-hh-active="3"] .hh-stack-back{opacity:0}
.hh-service-card{transform:translate(34%,-58%) rotate(4deg) scale(1.03);transition:transform .82s cubic-bezier(.18,.74,.19,1),opacity .28s ease;z-index:5}
.hh-service-card.hh-active{transform:translate(0,0) rotate(0) scale(1);z-index:6}
.hh-service-card.hh-previous{opacity:1;transform:translateX(-105%) rotate(-14deg) scale(.87);z-index:4}
.hh-service-card.hh-past{opacity:0;transform:translate(0,-65px) rotate(0) scale(1);z-index:1}
.hh-service-arrows{margin-top:20px}
.hh-service-head{margin-bottom:137px}
.hh-stack{transform:translateX(-27px)}
@media(max-width:760px){.hh-services-scroll{height:calc(85vh + 35px);min-height:685px}.hh-services-stage{position:relative;height:85vh;min-height:650px}.hh-stack{transform:none}.hh-service-card.hh-active{transform:translateY(0)}.hh-service-card.hh-previous{transform:translateX(-105%) rotate(8deg)}}
.hh-process-intro-content h2{font-size:clamp(56px,5vw,68px);margin-top:22px}
.hh-process-symbol{background:none;clip-path:none;filter:drop-shadow(2px 3px 1px #a35aff) drop-shadow(-2px -2px 1px #6329ba)}
.hh-process-main{will-change:opacity}
@media(max-width:760px){.hh-process-intro-content h2{font-size:45px}}
/* The hero's CREA / video / TIVE pieces settle from opposite angles in the reference. */
.hh-creative-line.hh-visible>span:first-child{animation:hhHeroCreativeLeft .95s cubic-bezier(.2,.72,.15,1) both}
.hh-creative-line.hh-visible>span:last-child{animation:hhHeroCreativeRight .95s cubic-bezier(.2,.72,.15,1) both}
.hh-creative-line.hh-visible>.hh-video-tile{animation:hhHeroCreativeTile .95s cubic-bezier(.2,.72,.15,1) both}
@keyframes hhHeroCreativeLeft{from{transform:translateY(14px) rotate(-8deg)}to{transform:none}}
@keyframes hhHeroCreativeRight{from{transform:translateY(14px) rotate(8deg)}to{transform:none}}
@keyframes hhHeroCreativeTile{from{transform:rotate(-3deg) scale(1.03)}to{transform:none}}
/* WORK shrinks in two discrete clicks, as seen at 18–19s and 21–22s. */
.hh-work-intro h2{font-size:clamp(82px,10vw,132px);transform:none}
.hh-work-trigger{display:block;border:0;background:transparent;color:inherit;padding:0;font:inherit;letter-spacing:inherit;line-height:inherit;transform:scale(1);transform-origin:center;transition:transform .95s cubic-bezier(.18,.68,.18,1);will-change:transform}
.hh-work-trigger:focus-visible{outline:2px solid var(--hh-purple);outline-offset:14px}
.hh-work:not(.hh-work-unlocked) .hh-projects{display:none}
@media(max-width:760px){.hh-work-intro h2{font-size:clamp(65px,16vw,95px)}}
/* Hero reference: separate words and the laptop fly in from the viewport edges. */
.hh-header{opacity:1}
.hh-header.hh-ready{animation:none}
.hh-hero-line[data-hh-line="0"].hh-visible{animation:hhHeroFirst 1.65s cubic-bezier(.18,.7,.18,1) both}
.hh-hero-line[data-hh-line="1"].hh-visible{animation:hhHeroCreativeGroup 1.55s ease-out both}
.hh-hero-line[data-hh-line="2"].hh-visible{animation:hhHeroDigital 1.6s cubic-bezier(.18,.7,.18,1) both}
.hh-hero-line[data-hh-line="3"].hh-visible{animation:hhHeroExperience 1.7s cubic-bezier(.18,.7,.18,1) both}
.hh-creative-line.hh-visible>span:first-child{animation:hhHeroCreativeLeft 1.7s cubic-bezier(.18,.7,.18,1) both}
.hh-creative-line.hh-visible>span:last-child{animation:hhHeroCreativeRight 1.7s cubic-bezier(.18,.7,.18,1) both}
.hh-creative-line.hh-visible>.hh-video-tile{animation:hhHeroCreativeTile 1.7s cubic-bezier(.18,.7,.18,1) both}
.hh-hero-side.hh-visible{animation:hhSideIn 1.55s cubic-bezier(.18,.7,.18,1) both}
.hh-hero-side.hh-visible .hh-laptop-art{animation:hhLaptopEnter 1.65s cubic-bezier(.18,.7,.18,1) both}
.hh-hero-side.hh-floating .hh-laptop-art{animation:hhFloat 5.2s ease-in-out infinite}
@keyframes hhHeroFirst{from{opacity:0;transform:translate(-34vw,-48vh) rotate(-18deg)}to{opacity:1;transform:none}}
@keyframes hhHeroCreativeGroup{from{opacity:0;transform:none}to{opacity:1;transform:none}}
@keyframes hhHeroCreativeLeft{from{opacity:.25;transform:translate(-58vw,11vh) rotate(-34deg)}to{opacity:1;transform:none}}
@keyframes hhHeroCreativeRight{from{opacity:.25;transform:translate(50vw,16vh) rotate(32deg)}to{opacity:1;transform:none}}
@keyframes hhHeroCreativeTile{from{opacity:.2;transform:translate(25vw,-50vh) rotate(-28deg) scale(.85)}to{opacity:1;transform:none}}
@keyframes hhHeroDigital{from{opacity:0;transform:translate(-48vw,44vh) rotate(-24deg)}to{opacity:1;transform:none}}
@keyframes hhHeroExperience{from{opacity:0;transform:translate(23vw,68vh) rotate(20deg)}to{opacity:1;transform:none}}
@keyframes hhLaptopEnter{from{opacity:.15;transform:translate(15vw,-53vh) rotate(25deg) scale(.85)}to{opacity:1;transform:none}}
.hh-hero-title,.hh-about-heading,.hh-service-prelude h2,.hh-process-intro-content{cursor:pointer}
.hh-service-prelude:after{transition:transform .43s cubic-bezier(.22,.66,.18,1)}
.hh-process-symbol{transition:transform .65s cubic-bezier(.18,.7,.18,1)}

/* Recording-matched click states. The first click reveals; the next advances. */
.hh-hero,.hh-about,.hh-service-prelude,.hh-services-stage,.hh-process-intro{cursor:pointer}
.hh-hero[data-hh-state="waiting"] .hh-scroll-cue{opacity:0;pointer-events:none}
.hh-scroll-cue{display:none}

/* CTA pills fill from the purple arrow side and the arrow turns on interaction. */
.hh-pill{position:relative;isolation:isolate;overflow:hidden;transition:transform .35s cubic-bezier(.2,.72,.18,1),box-shadow .35s ease!important}
.hh-pill>span{position:relative;z-index:2}
.hh-pill:before{content:"";position:absolute;z-index:1;inset:0;background:var(--hh-header-accent,var(--hh-purple));border-radius:inherit;transform:translateX(calc(100% - 42px));transition:transform .48s cubic-bezier(.18,.75,.18,1)}
.hh-pill:hover{transform:translateY(-3px);box-shadow:0 10px 25px #7130c733;background:#222}
.hh-pill:hover:before,.hh-pill:focus-visible:before{transform:translateX(0)}
.hh-pill:hover .hh-pill-arrow,.hh-pill:focus-visible .hh-pill-arrow{transform:rotate(-45deg) scale(1.07)}
.hh-pill-arrow{transition:transform .48s cubic-bezier(.18,.75,.18,1);background:transparent!important}
.hh-pill-light:hover{color:#fff!important}
.hh-pill.hh-pill-clicked{animation:hhPillClick .52s cubic-bezier(.2,.72,.18,1)}
@keyframes hhPillClick{0%,100%{transform:translateY(-3px) scale(1)}45%{transform:translateY(-1px) scale(.92)}72%{transform:translateY(-4px) scale(1.035)}}

/* The reference holds the service statement at normal size until it is clicked. */
.hh-service-prelude:after{transition:transform .62s cubic-bezier(.22,.66,.18,1)}
.hh-services-scroll{height:calc(100vh - 120px);min-height:690px}
.hh-services-stage{height:calc(100vh - 120px);min-height:690px;position:relative}
.hh-services-stage .hh-stack{cursor:pointer}
.hh-services-stage:focus{outline:none}.hh-services-stage:focus-visible{outline:2px solid var(--hh-purple);outline-offset:-3px}
.hh-services-stage:not(.hh-services-started) .hh-stack-back{opacity:0}
.hh-service-card{transform:translate(38%,-58%) rotate(6deg) scale(1.03);opacity:0;transition:transform .9s cubic-bezier(.18,.74,.19,1),opacity .38s ease}
.hh-service-card.hh-active{opacity:1;transform:translate(0,0) rotate(0) scale(1);z-index:6}
.hh-service-card.hh-previous{opacity:0;transform:translate(112%,-48%) rotate(10deg) scale(1.04);z-index:8}
.hh-service-card.hh-past{opacity:0;transform:translate(0,-70px) scale(.98);z-index:1}
/* Automatic services reveal: once the prelude animation finishes, remove only the
   temporary intro panel from the document flow. This prevents the large black gap
   before Popular Services without changing the service card animation. */
.hh-service-prelude.hh-prelude-complete{height:0!important;min-height:0!important;padding:0!important;margin:0!important}

/* Four process clicks rotate the mark; the fourth runs the recorded giant-title wipe. */
.hh-process-intro{--hh-process-turn:0deg}
.hh-process-intro-content{opacity:0;transform:translateY(150px);transition:opacity .65s ease,transform .8s cubic-bezier(.18,.72,.18,1)}
.hh-process-ready .hh-process-intro-content{opacity:1;transform:translateY(115px)}
.hh-process-symbol{transform:rotate(calc(180deg + var(--hh-process-turn))) scale(1.04)!important;transition:transform .62s cubic-bezier(.18,.72,.18,1)}
.hh-process-giant{opacity:0;transform:translateX(-50%) scale(.62);max-width:100%;overflow:hidden}
.hh-process-exit .hh-process-intro-content{animation:hhProcessContentOut .24s both}
.hh-process-exit .hh-process-giant{animation:hhProcessGiant 1.35s .26s cubic-bezier(.16,.72,.16,1) both}
.hh-process-intro:after{content:"";position:absolute;z-index:10;inset:0;background:var(--hh-paper);transform:translateY(101%);pointer-events:none}
.hh-process-exit:after{animation:hhProcessWipe .58s 1.08s cubic-bezier(.22,.7,.18,1) forwards}
@keyframes hhProcessContentOut{from{opacity:1;transform:translateY(115px) scale(1)}to{opacity:0;transform:translateY(125px) scale(.92)}}
@keyframes hhProcessGiant{0%{opacity:0;transform:translateX(-50%) scale(.55)}22%{opacity:1}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes hhProcessWipe{to{transform:translateY(0)}}
.hh-process:not(.hh-process-unlocked) .hh-process-main{display:none}

/* A quiet interaction cue prevents click-based scenes from looking broken. */
.hh-about,.hh-work-intro,.hh-services-stage{position:relative}
.hh-click-cue{position:absolute;z-index:20;left:50%;bottom:24px;display:flex;align-items:center;gap:9px;transform:translateX(-50%);padding:9px 14px;border:1px solid #7e7e7e55;border-radius:999px;background:#fffdfad9;box-shadow:0 8px 25px #00000012;color:#5f5f5f;font-size:10px;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none;backdrop-filter:blur(8px);transition:opacity .25s ease,transform .25s ease}
.hh-click-cue i{width:7px;height:7px;border-radius:50%;background:var(--hh-purple);box-shadow:0 0 0 0 #813be655;animation:hhCuePulse 1.6s ease-out infinite}
.hh-click-cue.hh-cue-hidden{opacity:0;transform:translateX(-50%) translateY(8px)}
.hh-services-stage .hh-click-cue,.hh-process-intro .hh-click-cue{color:#eee;background:#151515d9;border-color:#ffffff2c}
.hh-about>.hh-click-cue{bottom:auto;top:50%}
.hh-service-prelude>.hh-click-cue{bottom:auto;top:calc(50% + 145px)}
.hh-services-stage>.hh-click-cue{top:auto;bottom:15px}
.hh-process-intro>.hh-click-cue{bottom:auto;top:calc(50% + 235px)}
@keyframes hhCuePulse{55%{box-shadow:0 0 0 7px #813be600}}

@media(max-width:760px){
  .hh-services-scroll{height:calc(85vh - 35px);min-height:620px}.hh-services-stage{height:calc(85vh - 35px);min-height:620px}
  .hh-service-card.hh-active{transform:translateY(0)}
  .hh-service-card.hh-previous{transform:translate(105%,-32%) rotate(8deg)}
  .hh-process-ready .hh-process-intro-content{transform:translateY(45px)}
  .hh-process-intro>.hh-click-cue{top:calc(50% + 155px)}
  .hh-services-stage>.hh-click-cue{top:auto;bottom:12px}
  @keyframes hhProcessContentOut{from{opacity:1;transform:translateY(45px) scale(1)}to{opacity:0;transform:translateY(55px) scale(.92)}}
}


/* FINAL PROCESS TITLE SIZE FIX — keep the 4-click OUR PROCESS title compact */
.hh-process-intro .hh-process-giant{
  font-size:clamp(48px,5vw,90px)!important;
  line-height:.9!important;
  max-width:none!important;
  width:max-content!important;
  bottom:48px!important;
}
.hh-process-intro.hh-process-exit .hh-process-giant{
  animation:hhProcessGiantCompact 1.35s .26s cubic-bezier(.16,.72,.16,1) both!important;
}
@keyframes hhProcessGiantCompact{
  0%{opacity:0;transform:translateX(-50%) scale(.72)}
  22%{opacity:1}
  100%{opacity:1;transform:translateX(-50%) scale(.72)}
}
@media(max-width:760px){
  .hh-process-intro .hh-process-giant{bottom:32px!important;}
}


/* REAL FIX: keep OUR PROCESS fully above the white wipe on the 4th click */
.hh-process-intro.hh-process-exit .hh-process-giant{
  z-index:11!important;
  top:42%!important;
  bottom:auto!important;
  left:50%!important;
  width:max-content!important;
  max-width:none!important;
  overflow:visible!important;
  animation:hhProcessGiantRealFix 1.35s .26s cubic-bezier(.16,.72,.16,1) both!important;
}
@keyframes hhProcessGiantRealFix{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(.72)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(.72)}
}

/* Hexhover universal Elementor button */
.hh-button-wrap { display: block; width: 100%; }
.hh-universal-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: var(--hh-button-min-width, 138px);
  min-height: var(--hh-button-height, 42px);
  padding: 3px 4px 3px 20px;
  box-sizing: border-box;
  border: 0;
  border-radius: 24px;
  background: #222;
  color: #fff;
  text-decoration: none !important;
  cursor: pointer;
  transition: box-shadow .35s ease;
  will-change: box-shadow;
}
/* Video-matched hover: the accent starts as the right-side circle and expands leftward.
   On hover-out it retracts from left to right, matching the supplied reference video. */
.hh-universal-button::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: var(--hh-arrow-size, 38px);
  border-radius: inherit;
  background: var(--hh-hover-sweep, #813be6);
  transition: width .55s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.hh-universal-button:hover::before,
.hh-universal-button:focus-visible::before { width: 100%; }
.hh-universal-button:hover,
.hh-universal-button:focus-visible { transform: none !important; }
.hh-universal-light { background: #fff; color: #222; }
.hh-universal-custom { background: #222; color: #fff; }
.hh-universal-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  transition: color .25s ease;
}
.hh-universal-arrow {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex: 0 0 var(--hh-arrow-size, 38px);
  width: var(--hh-arrow-size, 38px);
  height: var(--hh-arrow-size, 38px);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #813be6;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  transition: transform .48s cubic-bezier(.22,.61,.36,1), background-color .25s ease;
}
.hh-universal-button:hover .hh-universal-arrow,
.hh-universal-button:focus-visible .hh-universal-arrow {
  transform: rotate(-45deg);
  background: transparent;
}
.hh-universal-enter { animation-duration: .7s; animation-fill-mode: both; }
.hh-enter-fade { animation-name: hhButtonFade; }
.hh-enter-fade-up { animation-name: hhButtonFadeUp; }
.hh-enter-slide-right { animation-name: hhButtonSlideRight; }
@keyframes hhButtonFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hhButtonFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hhButtonSlideRight { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 767px) {
  .hh-universal-button { min-width: 120px; padding-left: 16px; }
}


/* FINAL MOBILE HEADING / CARD SPACING CONTROL.
   The stage uses CSS grid elsewhere, which can overlap the heading and card.
   On phones we switch the stage to normal flow so the spacing controls are real. */
@media (max-width: 760px){
  .hh-services-stage{
    display:block !important;
  }
  .hh-service-head{
    position:relative;
    z-index:30;
    margin:0 !important;
    padding:0 0 var(--hh-mobile-heading-padding,0px) !important; margin-bottom:0 !important;
    min-height:0;
  }
  .hh-service-head h2{position:relative;z-index:31;}
  .hh-stack{
    position:relative;
    z-index:5;
    margin:var(--hh-mobile-heading-gap,25px) auto 0 !important;
  }
}

/* FINAL MOBILE RESPONSIVE FIX — services card + technology marquee */
@media (max-width: 760px){
  /* Keep the Popular Services card fully inside the mobile viewport. */
  .hh-services-stage{
    height: auto;
    min-height: 0;
    padding: 28px 0 24px;
    overflow: hidden;
  }
  .hh-services-scroll{
    height: auto;
    min-height: 0;
  }
  .hh-service-head{
    margin:0 !important;
    min-height:31px;
  }
  .hh-service-head h2{
    font-size: 24px;
    line-height: 1.1;
  }
  .hh-stack{
    width:100%;
    max-width:100%;
    height:440px;
    margin-top:var(--hh-mobile-heading-gap,25px) !important;
    margin-right:auto !important;
    margin-bottom:0 !important;
    margin-left:auto !important;
    transform:none;
  }
  /* Keep the layered card backgrounds below the section heading on phones.
     The previous negative offsets made the back cards cover OUR POPULAR SERVICES. */
  .hh-stack-back i:nth-child(1){transform:translate(20px,18px)}
  .hh-stack-back i:nth-child(2){transform:translate(10px,9px)}
  .hh-stack-back i:nth-child(3){transform:translate(0,0)}
  .hh-service-card{
    width: 100%;
    min-height: 440px;
    height: 440px;
    padding: 16px;
    overflow: hidden;
  }
  .hh-service-card img{
    width: 100%;
    height: 180px;
    object-fit: cover;
  }
  .hh-service-copy h3{
    font-size: 22px;
    line-height: 1.12;
    margin: 15px 0 9px;
  }
  .hh-service-copy p{
    font-size: 12px;
    line-height: 1.42;
    margin: 0 0 14px;
    max-width: none;
  }
  .hh-service-dots{
    margin-top: 14px;
  }
  .hh-service-dots button{
    width: 34px;
  }

  /* Slightly faster technology-logo marquee on phones. */
  .hh-tech-track{
    animation-duration: 18s;
  }
}


/* FINAL FIX: hard-set a reliable mobile gap below OUR POPULAR SERVICES.
   This intentionally does not depend on Elementor CSS variables, so it also works
   on the live page when the editor preview does not refresh control selectors. */
@media (max-width: 760px){
  #hh-services .hh-services-stage{
    display:block !important;
    overflow:hidden !important;
    padding-top:28px !important;
  }
  #hh-services .hh-service-head{
    position:relative !important;
    z-index:100 !important;
    display:flex !important;
    min-height:31px !important;
    margin:0 !important;
    padding:0 !important;
  }
  #hh-services .hh-service-head h2{
    position:relative !important;
    z-index:101 !important;
    margin:0 !important;
  }
  #hh-services .hh-stack{
    position:relative !important;
    z-index:5 !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:50px auto 0 !important;
    top:0 !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
  }
  #hh-services .hh-stack-back{
    inset:0 !important;
  }
  #hh-services .hh-stack-back i:nth-child(1){transform:translate(20px,18px) !important}
  #hh-services .hh-stack-back i:nth-child(2){transform:translate(10px,9px) !important}
  #hh-services .hh-stack-back i:nth-child(3){transform:translate(0,0) !important}
}

/* FINAL FIX: keep every active service card at the same vertical position.
   The slide index must not move the active card upward as the carousel advances. */
.hh-service-card.hh-active{
  transform:translate(0,0) rotate(0) scale(1) !important;
}

@media (max-width:760px){
  #hh-services .hh-service-card.hh-active{
    transform:translateY(0) rotate(0) scale(1) !important;
  }
}

/* FINAL DESKTOP FIX: keep the active Popular Services card vertically fixed.
   The carousel may still animate horizontally, but slide index must never move
   the active card upward on desktop. Mobile rules remain untouched. */
@media (min-width: 761px){
  #hh-services .hh-service-card.hh-active{
    transform: translate3d(0,0,0) rotate(0deg) scale(1) !important;
    top: 0 !important;
    bottom: auto !important;
  }
}