@font-face{font-family:LaPupaHeading;src:url('assets/heading-bold.woff') format('woff');font-weight:700 900;font-display:swap}
@font-face{font-family:LaPupaHeading;src:url('assets/heading-regular.woff') format('woff');font-weight:100 600;font-display:swap}
@font-face{font-family:LaPupaBody;src:url('assets/body-regular.woff') format('woff');font-weight:400;font-display:swap}
:root{--blue:#004a98;--mint:#5eead2;--light:#f3f8fe;--line:#5bbacb;--body:LaPupaBody,Arial,sans-serif;--heading:LaPupaHeading,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--blue);background:#fff;font-family:var(--body);font-size:18px;line-height:1.4}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--heading);letter-spacing:-.035em}h2{font-size:clamp(36px,5.2vw,72px);line-height:1.04;font-weight:700}h2 span,h2 strong{color:var(--mint)}h3{letter-spacing:-.045em}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #20aaff;outline-offset:5px}.skip-link{position:fixed;top:-100px;left:20px;background:#fff;padding:15px;z-index:20}.skip-link:focus{top:10px}.container{width:88%;max-width:1240px;margin:auto}.header{height:96px;border-bottom:1px solid #75a7ce;padding:0 3% 0 5.5%;display:flex;align-items:center;justify-content:space-between;gap:35px}.wordmark{font-family:var(--heading);font-weight:800;font-size:36px;letter-spacing:-.08em;white-space:nowrap}.header nav{display:flex;align-items:center;gap:clamp(20px,3vw,45px)}nav>a{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:var(--mint);color:var(--blue);padding:13px 23px;border:0;border-radius:40px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0;transition:transform .2s,background .2s;min-height:48px}.button span{font-size:36px;font-weight:400;line-height:.65;transform:translateY(-3px)}.button:hover{transform:translateY(-3px);background:#7cf4df}.button-outline{background:white;border:2px solid #34d6e1;min-width:190px}.menu-toggle{display:none}.hero{position:relative;min-height:680px;max-width:1600px;margin:auto;padding:68px 6.7% 110px;overflow:hidden}.hero-copy{position:relative;z-index:1;width:54%}.hero h1{font-size:clamp(70px,7.7vw,112px);line-height:.99;font-weight:700;letter-spacing:-.04em}.gradient{background:linear-gradient(90deg,#55e6d0,#219bf3);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-copy p{font-size:20px;margin:32px 0 48px;letter-spacing:-.035em}.hero-image{position:absolute;width:45%;bottom:0;right:3.8%;height:auto}.blue-section{background:var(--blue);color:#fff;position:relative;overflow:hidden}.eyebrow{text-transform:uppercase;font-size:14px;font-weight:700;margin-bottom:22px;letter-spacing:.015em}.blue-section .eyebrow{color:var(--mint)}.about{min-height:780px;padding:84px 0 100px}.about h2{font-size:clamp(34px,5.2vw,72px);font-weight:400;letter-spacing:-.04em;line-height:1.06}.about h2 strong{font-weight:700}.about .container{position:relative;z-index:1}.about-description{max-width:460px;font-size:19px;margin-top:80px;line-height:1.3}.stats{display:flex;margin:90px 0 0;gap:40px;color:var(--mint)}.stats div+div{border-left:1px solid #4096b5;padding-left:40px}.stats dt{font-family:var(--heading);font-weight:700;font-size:50px;line-height:1.1;letter-spacing:-.04em}.stats dd{margin:8px 0 0;font-size:17px}.about-shape{position:absolute;width:43%;right:0;bottom:50px}.services{position:relative;overflow:hidden;padding:45px 0 112px}.services h2{margin-bottom:54px}.services h2 span{color:var(--mint)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card{background:var(--light);border-radius:24px;min-height:370px;padding:115px 27px 30px}.service-card>img{width:80px;height:80px;object-fit:contain;mix-blend-mode:multiply;margin-bottom:22px}.service-card h3{font-size:21px;margin-bottom:10px}.service-card p{font-size:20px;line-height:1.27;letter-spacing:-.03em}.services-shape{position:absolute;right:0;bottom:0;width:32%}.process{display:grid;grid-template-columns:54% 46%;min-height:920px}.process-intro{position:relative;padding:56px 0 450px 12%;overflow:hidden}.process h2{font-size:clamp(40px,5.2vw,72px);position:relative;z-index:1}.process-intro>img{position:absolute;width:100%;bottom:0;left:-2%;height:auto}.timeline{margin:62px 8% 58px 4%;padding:32px 0 0 66px;border-left:1px solid #77a8c4;list-style:none;display:flex;flex-direction:column;justify-content:space-between;gap:25px}.timeline li{position:relative}.timeline li:before{content:'';position:absolute;left:-71px;top:8px;width:10px;height:10px;background:var(--mint);border-radius:50%}.timeline li:after{content:'';position:absolute;left:-61px;top:13px;width:45px;border-top:1px solid #77a8c4}.step{font-size:13px;color:var(--mint);display:block;margin-bottom:18px}.timeline h3{font-size:32px;line-height:1.06;margin-bottom:14px}.timeline p{font-size:18px;max-width:430px;color:#d4e4f4;line-height:1.3}.projects-heading{position:relative;padding:55px 0}.projects-heading>img{position:absolute;right:-7%;top:25px;width:240px}.projects-heading h2{position:relative;z-index:1}.project-grid{display:grid;grid-template-columns:repeat(3,1fr)}.project{padding:42px 28px 70px;display:flex;flex-direction:column;justify-content:space-between;min-height:590px}.project-social{background:#e0e0e0}.project-brand{background:#f4f2ef}.project-erp{background:#e0e0e0}.project>img{width:100%;height:390px;object-fit:contain;margin:auto}.project h3,.project p{background:var(--mint);width:fit-content;padding:1px 8px;font-size:20px;letter-spacing:-.02em}.project p{margin-top:4px;font-size:18px}.contact{display:grid;grid-template-columns:40% 56%;gap:4%;padding:150px 5.7% 155px;min-height:820px}.contact h2{font-size:clamp(40px,5vw,70px)}.contact-copy p{font-size:20px;line-height:1.3;max-width:400px;margin-top:42px;position:relative;z-index:1}.contact-form{align-self:start;border:0;background:#08529c;border-radius:22px;padding:66px 32px 28px;position:relative;z-index:1}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 55px;margin-bottom:26px}.contact-form label{display:block;color:var(--mint);text-transform:uppercase;font-size:12px;letter-spacing:.03em;font-weight:700}.contact-form input,.contact-form textarea{display:block;width:100%;border:0;border-bottom:1px solid #49a1bb;background:transparent;color:#fff;padding:10px 0 8px;font-size:18px;border-radius:0;min-height:44px;resize:vertical}.contact-form textarea{min-height:86px}.form-submit{width:100%;border-radius:16px;margin-top:38px;font-size:14px;padding:19px}.form-status{font-size:13px;margin-top:16px;color:#d4e4f4;line-height:1.4}.contact-shape{position:absolute;bottom:20px;left:0;width:210px}.footer{min-height:125px;display:flex;align-items:center;gap:30px;padding:20px 4.5%}.footer small,.footer-terms{font-size:11px}.socials{margin-left:auto;display:flex;gap:30px;align-items:center;font-size:34px;font-family:Arial,sans-serif;font-weight:bold}.linkedin{background:var(--blue);color:white;font-size:22px;padding:0 3px;line-height:1.1}
@media(min-width:1600px){.hero{min-height:770px}.about,.services,.process,.contact{padding-left:max(0px,calc((100vw - 1600px)/2));padding-right:max(0px,calc((100vw - 1600px)/2))}.contact{padding-left:max(6%,calc((100vw - 1400px)/2));padding-right:max(6%,calc((100vw - 1400px)/2))}}
@media(max-width:1100px){.header{height:76px;gap:20px}.wordmark{font-size:29px}.header nav{gap:20px}nav>a{font-size:10px}.button-outline{min-width:150px;font-size:11px;padding:10px 15px}.hero{min-height:580px;padding-top:60px;padding-bottom:80px}.hero-copy p{font-size:17px}.about{min-height:590px;padding:60px 0}.about-description{max-width:360px;font-size:17px;margin-top:65px}.stats{margin-top:60px}.stats dt{font-size:40px}.stats dd{font-size:15px}.services{padding-bottom:85px}.service-card{padding:80px 22px 25px;min-height:285px}.service-card>img{width:64px;height:64px;margin-bottom:15px}.service-card h3{font-size:17px}.service-card p{font-size:17px}.process{min-height:720px}.process-intro{padding-bottom:320px}.timeline{padding-left:50px}.timeline li:before{left:-55px}.timeline li:after{left:-45px;width:30px}.timeline h3{font-size:26px}.timeline p{font-size:16px}.project{min-height:450px;padding:25px 23px 45px}.project>img{height:285px}.project h3{font-size:16px}.project p{font-size:15px}.contact{padding-top:115px;padding-bottom:130px;min-height:650px}.contact-copy p{font-size:17px}.contact-form{padding:40px 24px 20px}.form-grid{gap:20px 30px}.footer{gap:20px}.footer small,.footer-terms{font-size:10px}.socials{gap:24px}}
@media(max-width:900px){body{font-size:16px}.header{height:76px;padding:0 6%;position:relative;z-index:5}.wordmark{font-size:30px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:7px;width:46px;height:46px;background:transparent;border:1px solid #bad9ed;border-radius:50%;padding:11px}.menu-toggle span{height:2px;background:var(--blue);width:22px;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}.header nav{display:none;position:absolute;left:0;right:0;top:75px;background:#fff;box-shadow:0 12px 18px #004a9812;padding:25px 6%;align-items:stretch;gap:0}.header nav.is-open{display:flex;flex-direction:column}.header nav>a{padding:14px 0;font-size:13px}.header nav .button{margin-top:10px;padding:15px}.hero{padding:45px 6% 0;min-height:0}.hero-copy{width:100%}.hero h1{font-size:clamp(57px,11.8vw,88px)}.hero-copy p{font-size:17px;margin:25px 0 28px;max-width:370px}.hero-image{position:relative;width:100%;max-width:490px;right:auto;bottom:auto;margin:34px auto 0}.desktop-break{display:none}.button{font-size:13px}.container{width:88%}.eyebrow{font-size:13px;margin-bottom:20px}h2{font-size:clamp(34px,7.5vw,54px)}.about{padding:52px 0 235px;min-height:0}.about h2{font-size:clamp(29px,6.7vw,46px)}.about-description{font-size:17px;max-width:350px;margin-top:38px}.stats{margin-top:38px;gap:30px}.stats div+div{padding-left:30px}.stats dt{font-size:40px}.about-shape{width:250px;bottom:5px;right:-20px}.services{padding:48px 0 65px}.services h2{margin-bottom:30px}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.service-card{padding:34px 18px 25px;border-radius:18px;min-height:275px}.service-card>img{width:57px;height:57px;margin-bottom:23px}.service-card h3{font-size:17px;letter-spacing:-.045em}.service-card p{font-size:16px;line-height:1.35}.services-shape{width:52%}.process{display:flex;flex-direction:column;min-height:0}.process-intro{padding:48px 6% 0;min-height:0}.process h2{font-size:clamp(39px,8vw,58px)}.process-intro>img{position:relative;width:90%;max-width:450px;margin:25px auto 0;left:auto}.timeline{margin:40px 8% 55px 9%;padding:0 0 0 37px;gap:35px}.timeline li:before{left:-42px}.timeline li:after{left:-32px;width:21px}.timeline h3{font-size:27px;margin-bottom:10px}.timeline p{font-size:17px}.step{margin-bottom:10px}.projects-heading{padding:46px 0 36px}.projects-heading>img{width:125px;top:30px;opacity:.65}.project-grid{grid-template-columns:1fr}.project{min-height:0;padding:25px 6% 35px}.project>img{height:340px;max-width:400px;margin:auto}.project h3{font-size:18px}.project p{font-size:16px}.contact{grid-template-columns:1fr;padding:55px 6% 125px;gap:35px;min-height:0}.contact h2{font-size:clamp(41px,9vw,60px)}.contact-copy p{font-size:17px;margin-top:25px;max-width:340px}.contact-form{padding:30px 22px 22px;border-radius:18px}.contact-form label{font-size:12px}.form-grid{gap:26px 20px}.contact-shape{width:140px;bottom:6px}.footer{padding:30px 6%;flex-wrap:wrap;gap:20px}.footer .wordmark{width:60%}.footer small{order:3;font-size:11px}.footer-terms{order:4;font-size:11px}.socials{gap:20px;font-size:27px}.linkedin{font-size:19px}}
@media(max-width:380px){.hero h1{font-size:53px}.service-grid{grid-template-columns:1fr}.service-card{min-height:0;padding:28px}.form-grid{grid-template-columns:1fr}.project>img{height:290px}.footer .wordmark{width:auto}.socials{gap:16px}}
.projects{overflow:hidden}
.honeypot{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}.button:disabled{cursor:not-allowed;opacity:.65;transform:none}.form-status a{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Original Canva gradients and graphic composition. */
.button{background:linear-gradient(90deg,#5eead2,#269cf2);font-family:var(--heading)}
.button:hover{background:linear-gradient(90deg,#78f3dd,#40afff)}
.button-outline{border:2px solid transparent;background:linear-gradient(white,white) padding-box,linear-gradient(90deg,#5eead2,#269cf2) border-box}
.button-outline:hover{background:linear-gradient(#f3fffd,#f3fffd) padding-box,linear-gradient(90deg,#5eead2,#269cf2) border-box}
.gradient{background-image:linear-gradient(90deg,#5eead2,#269cf2)}
.form-submit{border-radius:40px}.service-card>img{mix-blend-mode:normal}
.process-intro:before{content:'';position:absolute;width:105%;height:55%;left:-8%;bottom:-2%;background:url('assets/brand-shape.webp') center/contain no-repeat;transform:scaleX(-1)}
.project-logo{height:95px!important;max-width:230px!important;object-fit:contain!important;object-position:center;margin:0 auto 12px!important}
.project-brand>img:not(.project-logo){height:300px}
@media(max-width:900px){.process-intro:before{height:48%;bottom:-4%}.project-logo{height:72px!important;max-width:175px!important;margin-top:20px!important}.project-brand>img:not(.project-logo){height:290px}}

.socials img{width:26px;height:26px;object-fit:contain}

/* Final Canva reference, September 2026. */
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.hero-actions .button { min-width:190px; }
.hero-actions .button-outline { color:#4c9df9; }
.header-cta { min-width:190px; }
.timeline h3 { color:var(--mint); }
.timeline p { color:#fff; }
.timeline li:before { width:16px; height:16px; left:-74px; top:5px; }
.contact-form {
  border:2px solid transparent;
  background:linear-gradient(#0a559d,#0a559d) padding-box,
             linear-gradient(110deg,#5eead2,#269cf2) border-box;
}
.form-submit, .form-submit:hover {
  background:linear-gradient(90deg,#269cf2 0%,#5eead2 50%,#269cf2 100%);
}
.form-submit:disabled { opacity:1; }
.socials img { width:34px; height:34px; }

/* Vector patterns and web-native motion. */
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.hero h1{animation:hero-enter .85s cubic-bezier(.2,.7,.2,1) both}
.hero-copy p{animation:hero-enter .85s .12s cubic-bezier(.2,.7,.2,1) both}
.hero-actions{animation:hero-enter .85s .22s cubic-bezier(.2,.7,.2,1) both}
.hero-image{animation:hero-image-enter 1s .12s cubic-bezier(.2,.7,.2,1) both;filter:drop-shadow(0 24px 25px rgba(0,74,152,.09))}
.gradient{background-size:180% 100%;animation:gradient-flow 5s ease-in-out infinite alternate}
.about-shape,.services-shape,.projects-heading>img,.contact-shape{image-rendering:auto;filter:drop-shadow(0 22px 28px rgba(0,74,152,.12))}
.about-shape{width:48%;right:-5%;bottom:-10px;opacity:.96}
.services-shape{width:42%;right:-3%;bottom:-3px}
.projects-heading>img{width:220px;right:-2%;top:24px}
.contact-shape{width:190px;left:22px;bottom:18px;transform:none;opacity:.9}
.process-intro:before{background-image:url('assets/pattern-wave.svg');filter:saturate(1.08)}
.process-intro>img{bottom:-17%;transform:scale(1.06);transform-origin:center bottom}
.service-card,.project{position:relative;isolation:isolate;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.service-card:before,.project:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(94,234,210,.22),transparent 55%);opacity:0;transition:opacity .3s}
.service-card:hover,.project:hover{transform:translateY(-10px);box-shadow:0 24px 55px rgba(0,74,152,.16)}
.service-card:hover:before,.project:hover:before{opacity:1}
.service-card>img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.service-card:hover>img{transform:rotate(-5deg) scale(1.1)}
.service-card h3{opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.service-card:hover h3,.service-card:focus h3,.service-card:focus-within h3{opacity:1;transform:none}
.service-card:focus-visible{outline:3px solid #269cf2;outline-offset:4px}
.stats dt{position:relative;width:max-content;transition:filter .25s,transform .25s}
.stats dt.is-counting{filter:drop-shadow(0 0 18px rgba(94,234,210,.55));transform:translateY(-3px)}
.project>div{opacity:0;transform:translateY(12px);transition:opacity .28s ease,transform .28s ease}
.project:hover>div,.project:focus>div,.project:focus-within>div{opacity:1;transform:none}
.project:focus-visible{outline:3px solid #20aaff;outline-offset:-6px}
.project-grid{gap:1px;background:#fff}
.project>img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.project:hover>img{transform:scale(1.035)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s var(--reveal-delay,0ms) ease,transform .7s var(--reveal-delay,0ms) cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
@keyframes hero-enter{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes hero-image-enter{from{opacity:0;transform:translateX(45px) scale(.97)}to{opacity:1;transform:none}}
@keyframes gradient-flow{to{background-position:100% 50%}}
@media(min-width:901px) {
  .header { height:clamp(76px,6.9vw,96px); padding-left:5.5%; padding-right:2%; }
  .hero { min-height:clamp(540px,50.6vw,730px); padding-top:52px; }
  .hero h1 { font-size:clamp(70px,8vw,112px); }
  .hero-copy p { margin:26px 0 48px; }
  .hero-image { width:43.5%; right:4.2%; bottom:32px; }
  .about { min-height:clamp(640px,58vw,810px); padding-top:80px; }
  .about-shape { width:43%; right:0; bottom:0; }
  .process { min-height:clamp(720px,68.4vw,950px); grid-template-columns:55% 45%; }
  .process-intro { padding-left:11.5%; }
  .process-intro>img { width:95%; left:-8%; bottom:-17%; }
  .process-intro:before { width:105%; height:55%; left:-24%; bottom:-3%; }
  .timeline { margin-top:56px; margin-bottom:44px; margin-left:2%; }
  .project { min-height:520px; padding-top:38px; padding-bottom:32px; }
  .project>img { height:365px; }
  .project-brand>img:not(.project-logo) { height:260px; }
  .projects-heading { padding-top:55px; padding-bottom:55px; }
  .contact { grid-template-columns:40% 56%; padding-top:150px; padding-bottom:130px; min-height:770px; }
  .contact-shape { width:180px; left:20px; bottom:16px; }
}
@media(min-width:901px) and (max-width:1100px) {
  .header nav { gap:18px; }
  .header-cta { min-width:155px; font-size:11px; padding:10px 15px; }
  .hero-actions { gap:16px; }
  .hero-actions .button { min-width:155px; font-size:12px; padding:12px 15px; }
  .timeline li:before { left:-58px; }
  .project { min-height:450px; }
  .project>img { height:290px; }
  .project-brand>img:not(.project-logo) { height:210px; }
}
@media(max-width:900px) {
  .hero-actions { gap:14px; }
  .hero-actions .button { min-width:0; padding:13px 18px; }
  .hero-actions .button-outline { min-height:48px; font-size:13px; }
  .timeline li:before { left:-45px; }
  .socials { gap:20px; }
  .socials img { width:27px; height:27px; }
  .footer .wordmark { width:auto; }
  .header{position:sticky}
  .process-intro>img{bottom:-9%;transform:scale(1.03)}
  .service-card:hover,.project:hover{transform:none;box-shadow:none}
  .about-shape{width:285px;right:-38px;bottom:-18px}
  .services-shape{width:70%;right:-12%}
  .service-card h3{opacity:1;transform:none}
  .contact-shape{width:145px;left:10px;bottom:8px}
  .project>div{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.hero h1,.hero-copy p,.hero-actions,.hero-image,.gradient{animation:none}.reveal{opacity:1;transform:none;transition:none}.service-card,.project,.service-card>img,.project>img{transition:none}}

/* Landing experience polish */
.scroll-progress{position:fixed;z-index:40;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#5eead2,#269cf2);transform:scaleX(0);transform-origin:left;pointer-events:none}
.header{box-shadow:0 8px 35px rgba(0,74,152,.055)}
.header nav>a:not(.button){position:relative;padding-block:10px}
.header nav>a:not(.button):after{content:'';position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:#269cf2;transform:scaleX(0);transition:transform .25s ease}
.header nav>a.is-active:after,.header nav>a:not(.button):hover:after{transform:scaleX(1)}
.button{box-shadow:0 10px 24px rgba(38,156,242,.16)}
.button span{transition:transform .25s ease}
.button:hover span{transform:translate(5px,-3px)}
.hero:before{content:'';position:absolute;width:430px;height:430px;border:1px solid rgba(38,156,242,.16);border-radius:50%;right:13%;top:8%;animation:orbit-pulse 5s ease-in-out infinite}
.hero:after{content:'';position:absolute;width:16px;height:16px;background:#5eead2;border-radius:50%;right:14.5%;top:17%;box-shadow:0 0 0 10px rgba(94,234,210,.13)}
.expertise-strip{overflow:hidden;background:#004a98;color:#fff;border-block:1px solid rgba(94,234,210,.35);padding:15px 0;white-space:nowrap}
.expertise-strip>div{display:inline-flex;align-items:center;gap:28px;min-width:max-content;animation:ticker 25s linear infinite}
.expertise-strip span{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.expertise-strip i{font-style:normal;color:#5eead2;font-size:22px}
.services{background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}
.service-grid{perspective:1000px}
.service-card{border:1px solid rgba(0,74,152,.075);box-shadow:0 8px 24px rgba(0,74,152,.045);background:rgba(243,248,254,.92)}
.service-card:before,.project:before{display:none}
.service-card:hover{background:#fff;border-color:rgba(38,156,242,.28);box-shadow:0 22px 48px rgba(0,74,152,.13)}
.service-card:hover>img{transform:translateY(-7px) scale(1.06)}
.timeline li{padding:18px 22px;border-radius:16px;transition:background .25s ease,transform .25s ease}
.timeline li:hover{background:rgba(255,255,255,.06);transform:translateX(7px)}
.projects{padding-bottom:90px;background:#fff}
.project-grid{width:92%;max-width:1440px;margin:auto;gap:18px;background:transparent}
.project{border-radius:24px;min-width:0;border:1px solid rgba(0,74,152,.08);box-shadow:0 12px 32px rgba(0,74,152,.07)}
.project:hover{box-shadow:0 24px 55px rgba(0,74,152,.15)}
.project>div{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;padding:15px 16px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.75);border-radius:15px;box-shadow:0 12px 35px rgba(0,74,152,.14);backdrop-filter:blur(12px)}
.project h3,.project p{background:transparent;padding:0}
.project p{color:#39719f}
.contact{isolation:isolate}
.contact:before{content:'';position:absolute;z-index:-1;width:520px;height:520px;border:1px solid rgba(94,234,210,.18);border-radius:50%;left:-250px;top:-170px}
.contact-form{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(0,74,152,.25));border:1px solid rgba(94,234,210,.75);box-shadow:0 30px 70px rgba(0,32,82,.22);backdrop-filter:blur(12px)}
.footer{border-top:1px solid rgba(0,74,152,.12)}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes orbit-pulse{50%{transform:scale(1.035);opacity:.65}}
@media(max-width:900px){
  .scroll-progress{height:3px}
  .hero:before{width:300px;height:300px;right:-120px;top:10%}
  .hero:after{right:8%;top:17%}
  .expertise-strip{padding:12px 0}
  .expertise-strip>div{gap:22px;animation-duration:20s}
  .expertise-strip span{font-size:12px}
  .project-grid{width:100%;gap:1px}
  .project{border-radius:0;box-shadow:none}
  .project>div{position:relative;left:auto;right:auto;bottom:auto;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
  .project h3,.project p{background:#5eead2;padding:1px 8px}
  .timeline li{padding:8px 10px}
}

/* UX refinement: continuous ticker, compact process and typographic project reveal */
.hero-image{bottom:95px;width:45%;max-height:570px;object-fit:contain;object-position:center bottom}
.expertise-strip{padding:21px 0}
.expertise-strip>.expertise-track{display:flex;width:max-content;gap:0;animation:ticker-seamless 24s linear infinite;will-change:transform}
.expertise-group{display:flex;align-items:center;justify-content:space-around;gap:34px;min-width:100vw;padding:0 34px}
.expertise-group span{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.075em}
.expertise-group i{font-style:normal;color:#5eead2;font-size:25px;line-height:1}
.about-shape{right:-28%}
.process-intro>img{width:56%;height:auto;left:22%;bottom:0;object-fit:contain}
.project>img{clip-path:none;transform:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.project.is-visible>img{clip-path:none;transform:none}
.project.is-visible:hover>img{transform:scale(1.035)}
.project>div{opacity:1;transform:none;background:transparent;border:0;box-shadow:none;backdrop-filter:none;overflow:hidden;padding:0}
.project>div h3,.project>div p{transform:translateX(-115%);transition:transform .55s cubic-bezier(.72,0,.18,1);will-change:transform}
.project>div p{transition-delay:.07s}
.project:hover>div h3,.project:hover>div p,.project:focus>div h3,.project:focus>div p,.project:focus-within>div h3,.project:focus-within>div p{transform:translateX(0)}
.project h3,.project p{background:#5eead2;padding:2px 9px;box-shadow:none}
@keyframes ticker-seamless{to{transform:translateX(-50%)}}
@media(max-width:900px){
  .hero-image{bottom:auto;width:100%;max-height:none;margin-top:6px}
  .expertise-strip{padding:17px 0}
  .expertise-group{min-width:760px;gap:25px;padding:0 25px}
  .expertise-group span{font-size:14px}
  .about-shape{right:-125px}
  .process-intro>img{width:64%;left:auto;bottom:auto;margin:18px auto 0}
  .project>div h3,.project>div p{transform:none}
}
@media(prefers-reduced-motion:reduce){.expertise-strip>.expertise-track{animation:none}}

/* Final reference alignment */
.button .button-arrow path{stroke-width:2}
.hero:before,.hero:after{display:none}
.hero-image{clip-path:none;bottom:34px;width:46%;filter:drop-shadow(0 22px 24px rgba(0,74,152,.12))}
.expertise-strip{padding:20px 0}
.expertise-strip>div{gap:34px}
.expertise-strip span{font-size:16px;letter-spacing:.075em}
.expertise-strip i{font-size:25px}
.about-shape{right:-22%;width:49%}
.process-intro>img{width:86%;height:auto;left:4%;bottom:0;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(0,25,70,.18))}
.projects-heading>img{display:none}
.project.reveal{opacity:1;transform:none}
.project>img{clip-path:inset(0 100% 0 0);transform:scale(1.06);transition:clip-path .9s cubic-bezier(.72,0,.18,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.project.is-visible>img{clip-path:inset(0);transform:scale(1)}
.project:nth-child(2)>img{transition-delay:.12s}
.project:nth-child(3)>img{transition-delay:.24s}
.project.is-visible:hover>img{transform:scale(1.035)}
@media(max-width:900px){
  .hero-image{width:100%;bottom:auto;clip-path:none;margin-top:12px;margin-bottom:0}
  .expertise-strip{padding:16px 0}
  .expertise-strip>div{gap:26px}
  .expertise-strip span{font-size:14px}
  .about-shape{right:-105px;width:310px}
  .process-intro>img{position:relative;width:92%;height:auto;left:auto;bottom:auto;margin:24px auto 0}
  .project>img{clip-path:none;transform:none;transition:none}
}
@media(prefers-reduced-motion:reduce){.expertise-strip>div,.hero:before{animation:none}}

/* Reference refinements */
.button .button-arrow{display:block;width:54px;height:22px;font-size:0;line-height:1;transform:none}
.button .button-arrow svg{display:block;width:100%;height:100%;overflow:visible}
.button .button-arrow path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:square;stroke-linejoin:miter}
.button:hover .button-arrow{transform:translateX(5px)}
.hero-image{clip-path:inset(0 0 4.5% 0);filter:drop-shadow(0 26px 26px rgba(0,74,152,.13))}
.about-shape{width:47%;right:-1%;bottom:18px;filter:drop-shadow(0 24px 34px rgba(0,24,73,.16))}
.process-intro:before{width:100%;height:44%;left:0;bottom:0;background:url('assets/pattern-wave.svg') center bottom/100% auto no-repeat;transform:none;filter:none}
.process-intro>img{width:100%;left:0;bottom:0;transform:none}
@media(min-width:901px){
  .hero-image{bottom:7px}
  .about-shape{width:45%;right:1%;bottom:24px}
  .process-intro:before{width:100%;height:45%;left:0;bottom:0}
  .process-intro>img{width:100%;left:0;bottom:0}
}
@media(max-width:900px){
  .button .button-arrow{width:44px;height:18px}
  .hero-image{clip-path:inset(0 0 4.5% 0);margin-bottom:-4%}
  .about-shape{width:290px;right:-20px;bottom:8px}
  .process-intro:before{height:38%;bottom:0;background-size:100% auto}
  .process-intro>img{width:100%;max-width:500px;left:auto;bottom:0;transform:none}
}

/* Authoritative final sizing and motion */
.button .button-arrow path{stroke-width:1.6}
.hero-image{width:45%;max-height:570px;bottom:95px;clip-path:none;object-fit:contain;object-position:center bottom}
.about-shape{width:49%;right:-28%;bottom:18px}
.process-intro>img{width:56%;height:auto;max-width:none;left:22%;bottom:0;transform:none;object-fit:contain}
.project>img{clip-path:none;transform:none;transition:transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:0s}
.project.is-visible>img{clip-path:none;transform:none}
.project.is-visible:hover>img{transform:scale(1.035)}
@media(max-width:900px){
  .hero-image{width:100%;max-height:none;bottom:auto;clip-path:none;margin:6px auto 0}
  .about-shape{width:310px;right:-125px;bottom:8px}
  .process-intro>img{position:relative;width:64%;max-width:380px;left:auto;bottom:auto;margin:18px auto 0}
  .project>img,.project.is-visible>img{clip-path:none;transform:none;transition:none}
}

/* Mockup-accurate section placement */
.about-shape{width:43%;right:-3%;bottom:28px}
.process{min-height:760px}
.process-intro{padding-bottom:360px}
.process-intro:before{height:48%;background:
  radial-gradient(circle at 8% 72%,#5eead2 0 12%,transparent 12.5%),
  radial-gradient(circle at 58% 78%,#269cf2 0 17%,transparent 17.5%),
  radial-gradient(circle at 34% 102%,#168bf0 0 20%,transparent 20.5%);}
.process-intro>img{width:56%;left:8%;bottom:0}
.timeline{margin:34px 8% 28px 2%;padding-top:0;gap:8px}
.timeline li{padding:7px 18px}
.step{margin-bottom:5px}
.timeline h3{margin-bottom:7px}
.timeline p{line-height:1.22}
.contact:before{display:none}
@media(max-width:900px){
  .about-shape{width:285px;right:-72px;bottom:8px}
  .process{min-height:0}
  .process-intro{padding-bottom:0}
  .process-intro:before{height:43%;bottom:0}
  .process-intro>img{width:64%;left:auto;bottom:auto;margin:18px auto 0}
  .timeline{margin-top:30px;gap:24px}
}

html{scroll-padding-top:96px}
@media(max-width:900px){html{scroll-padding-top:76px}}

/* About composition matched to the approved mockup */
@media(min-width:901px){
  .about{min-height:clamp(760px,56vw,880px);padding:96px 0 88px}
  .about h2{font-size:clamp(64px,5.25vw,80px);line-height:1.02}
  .about-description{max-width:630px;margin-top:106px;font-size:20px;line-height:1.48}
  .stats{margin-top:136px;gap:64px}
  .stats div+div{padding-left:50px}
  .stats dt{font-size:60px}
  .stats dd{margin-top:8px;font-size:19px}
  .about-shape{width:49%;right:-3%;bottom:28px}
}

@media(max-width:900px){
  .about{padding-top:58px}
  .about-description{line-height:1.42}
}

/* Final depth, process artwork and scroll focus */
.reveal{
  filter:blur(11px);
  transform:translateY(48px) scale(.985);
  transition:opacity .9s var(--reveal-delay,0ms) ease,
    transform .9s var(--reveal-delay,0ms) cubic-bezier(.2,.7,.2,1),
    filter .9s var(--reveal-delay,0ms) ease;
  will-change:opacity,transform,filter
}
.reveal.is-visible{filter:blur(0);transform:none}

@media(min-width:901px){
  .about-shape{width:48%;right:-1%;bottom:28px}
  .process{grid-template-columns:52% 48%;min-height:780px}
  .process-intro{padding:62px 0 354px 11.5%}
  .process-intro:before{
    width:128%;height:47%;left:-28%;bottom:0;
    background:url('assets/process-flow.svg') left bottom/100% 100% no-repeat;
    transform:none;filter:none
  }
  .process-intro>img{width:70%;left:3%;bottom:0;filter:drop-shadow(0 20px 28px rgba(0,25,70,.17))}
  .timeline{
    margin:40px 9% 36px 3%;padding:16px 0 14px 70px;gap:4px;
    border-left:1px solid rgba(94,234,210,.52)
  }
  .timeline li{
    padding:10px 18px 12px 20px;border-radius:14px;
    transition:background .28s ease,transform .28s cubic-bezier(.2,.7,.2,1)
  }
  .timeline li:before{
    left:-76px;top:18px;width:13px;height:13px;
    border:3px solid var(--blue);box-shadow:0 0 0 1px var(--mint),0 0 18px rgba(94,234,210,.38)
  }
  .timeline li:after{left:-63px;top:24px;width:48px;border-color:rgba(94,234,210,.52)}
  .timeline li:hover{background:rgba(255,255,255,.055);transform:translateX(5px)}
  .step{margin-bottom:4px;font-weight:700;letter-spacing:.08em}
  .timeline h3{font-size:clamp(25px,2.1vw,31px);margin-bottom:7px}
  .timeline p{font-size:17px;line-height:1.32;max-width:440px;color:#e0edf8}
}

@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .reveal{
      opacity:1;filter:none;transform:none;transition:none;
      animation:scroll-focus linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 72%
    }
    @keyframes scroll-focus{
      from{opacity:.18;filter:blur(14px);transform:translateY(54px) scale(.985)}
      to{opacity:1;filter:blur(0);transform:none}
    }
  }
}

@media(max-width:900px){
  .about-shape{width:275px;right:-96px}
  .process-intro:before{
    width:108%;height:42%;left:-8%;bottom:0;
    background:url('assets/process-flow.svg') center bottom/100% 100% no-repeat
  }
  .timeline{border-color:rgba(94,234,210,.5)}
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;filter:none;transform:none;animation:none;transition:none}
}

@media(min-width:901px){
  .process{grid-template-columns:54% 46%;min-height:760px}
  .process-intro{padding:56px 0 360px 12%}
  .process-intro:before{
    width:110%;height:48%;left:-10%;bottom:0;
    background:url('assets/process-flow.svg') left bottom/100% 100% no-repeat
  }
  .process-intro>img{width:56%;left:8%;bottom:0}
  .timeline{margin:34px 8% 28px 2%;padding:0 0 0 66px;gap:8px}
  .timeline li{padding:7px 18px}
  .timeline li:before{left:-72px;top:14px;width:12px;height:12px}
  .timeline li:after{left:-60px;top:20px;width:44px}
  .step{margin-bottom:5px}
  .timeline h3{margin-bottom:7px}
  .timeline p{line-height:1.28}
}

@media(max-width:900px){
  .process-intro>img{width:64%;max-width:380px}
}

/* Narrative landing composition */
.about{isolation:isolate;background:
  radial-gradient(circle at 82% 72%,rgba(38,156,242,.17),transparent 34%),
  var(--blue)}
.about:before{
  content:'';position:absolute;z-index:0;inset:0;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent 35%,#000 78%,transparent)
}
.stats div{
  min-width:190px;padding:17px 22px 19px;border:1px solid rgba(94,234,210,.28);
  border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:0 18px 42px rgba(0,27,70,.14);backdrop-filter:blur(8px);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,background .35s
}
.stats div+div{border-left:1px solid rgba(94,234,210,.28)}
.stats div:hover{transform:translateY(-8px);border-color:rgba(94,234,210,.72);background:rgba(255,255,255,.09)}

@media(min-width:901px){
  .about-shape{animation:about-drift 9s ease-in-out infinite alternate;transform-origin:70% 60%}
  .process{--process-progress:0;grid-template-columns:46% 54%;min-height:220vh;align-items:start;overflow:visible}
  .process-intro{
    position:sticky;top:96px;height:calc(100vh - 96px);min-height:660px;
    padding:clamp(58px,7vh,86px) 0 330px 13%;overflow:hidden
  }
  .process-intro .reveal{
    opacity:1;filter:none;transform:none;animation:none;transition:none
  }
  .process-intro:after{
    content:'DESLIZA PARA VER EL PROCESO';position:absolute;left:13%;bottom:32px;z-index:3;
    color:rgba(255,255,255,.56);font-size:11px;font-weight:700;letter-spacing:.16em
  }
  .process-intro:before{height:45%;width:112%;left:-12%}
  .process-intro>img{width:58%;left:7%;bottom:0;z-index:2}
  .timeline{
    position:relative;min-height:220vh;margin:0;padding:20vh 9% 20vh 92px;
    border:0;gap:0;justify-content:flex-start
  }
  .timeline:after{
    content:'';position:absolute;left:39px;top:20vh;bottom:20vh;width:1px;
    background:rgba(255,255,255,.18)
  }
  .timeline:before{
    content:'';position:absolute;z-index:1;left:39px;top:20vh;width:2px;
    height:calc((100% - 40vh) * var(--process-progress));
    background:linear-gradient(#5eead2,#269cf2);box-shadow:0 0 16px rgba(94,234,210,.4)
  }
  .timeline li{
    min-height:45vh;display:flex;flex-direction:column;justify-content:center;
    padding:34px 30px;border:1px solid transparent;border-radius:22px;
    opacity:.28;filter:blur(5px);transform:translateX(28px) scale(.97);
    transition:opacity .55s ease,filter .55s ease,transform .65s cubic-bezier(.2,.7,.2,1),background .45s,border-color .45s
  }
  .timeline li.is-current{
    opacity:1;filter:blur(0);transform:none;background:rgba(255,255,255,.06);
    border-color:rgba(94,234,210,.22);box-shadow:0 28px 70px rgba(0,27,70,.16)
  }
  .timeline li.is-past{opacity:.7;filter:blur(0);transform:none}
  .timeline li:before{z-index:2;left:-60px;top:50%;width:13px;height:13px;transform:translateY(-50%)}
  .timeline li:after{left:-47px;top:50%;width:47px}
  .timeline li.is-current:before{background:#fff;box-shadow:0 0 0 5px rgba(94,234,210,.2),0 0 24px var(--mint)}
  .timeline h3{font-size:clamp(30px,2.55vw,42px)}
  .timeline p{font-size:18px;max-width:500px}
}

@keyframes about-drift{to{transform:translate3d(-12px,-10px,0) rotate(-1deg)}}

@media(max-width:900px){
  .stats{gap:10px}
  .stats div{min-width:0;padding:14px 16px;border-radius:14px}
  .process{--process-progress:0;overflow:hidden}
  .process-intro:after{display:none}
  .motion-ready .timeline li{opacity:.24;filter:blur(5px);transform:translateY(28px);transition:opacity .55s,filter .55s,transform .55s}
  .motion-ready .timeline li.is-current,.motion-ready .timeline li.is-past{opacity:1;filter:blur(0);transform:none}
}

@media(prefers-reduced-motion:reduce){
  .about-shape{animation:none}
  .timeline li,.motion-ready .timeline li{opacity:1;filter:none;transform:none;transition:none}
}

/* Clean metrics and process story */
.stats div{
  min-width:0;padding:0;border:0;border-radius:0;background:none;
  box-shadow:none;backdrop-filter:none
}
.stats div+div{border-left:1px solid rgba(94,234,210,.58);padding-left:50px}
.stats div:hover{transform:translateY(-4px);border-color:rgba(94,234,210,.58);background:none}
.stats div:hover dt{text-shadow:0 0 24px rgba(94,234,210,.25)}

@media(min-width:901px){
  .process-intro{padding-bottom:330px}
  .process-intro:before{
    width:104%;height:44%;left:-3%;bottom:5%;
    background:url('assets/process-flow.svg') center bottom/contain no-repeat
  }
  .process-intro>img{
    width:54%;left:9%;bottom:5%;
    filter:drop-shadow(0 22px 30px rgba(0,25,70,.2))
  }
  .process-intro:after{display:none}
  .timeline li,
  .timeline li.is-current,
  .timeline li.is-past{
    padding:34px 0 34px 28px;border:0;border-radius:0;
    background:none;box-shadow:none
  }
  .timeline li:hover{background:none}
  .timeline li.is-current h3{text-shadow:0 0 28px rgba(94,234,210,.16)}
}

@media(max-width:900px){
  .stats div{padding:0;border-radius:0}
  .stats div+div{padding-left:18px}
  .process-intro:before{
    width:100%;height:39%;left:0;bottom:2%;
    background:url('assets/process-flow.svg') center bottom/contain no-repeat
  }
  .process-intro>img{width:61%;max-width:350px;margin-top:12px}
  .timeline li,.motion-ready .timeline li{
    padding:12px 0 18px 20px;border:0;border-radius:0;background:none;box-shadow:none
  }
}

/* Final process refinement */
@media(min-width:901px){
  .process-intro:before{
    width:88%;height:39%;left:2%;bottom:7%;opacity:.46;
    background:url('assets/process-flow.svg') center bottom/contain no-repeat
  }
  .process-intro>img{
    width:46%;left:13%;bottom:4%;
    filter:drop-shadow(0 14px 24px rgba(0,25,70,.13))
  }
  .timeline li:before{
    left:-58px;top:50%;width:9px;height:9px;border:0;
    background:var(--mint);box-shadow:none;
    transform:translateY(-50%);transition:transform .35s ease
  }
  .timeline li:after{display:none}
  .timeline li.is-current:before{
    background:var(--mint);box-shadow:none;transform:translateY(-50%) scale(1.3)
  }
  .timeline:before{width:1px;box-shadow:none}
}

@media(max-width:900px){
  .process-intro:before{
    width:94%;height:34%;left:3%;bottom:4%;opacity:.44;
    background:url('assets/process-flow.svg') center bottom/contain no-repeat
  }
  .process-intro>img{width:56%;max-width:320px;margin-top:10px}
  .timeline li:before,.timeline li.is-current:before{
    width:9px;height:9px;border:0;background:var(--mint);box-shadow:none
  }
  .timeline li:after{display:none}
}

/* Process image integration */
@media(min-width:901px){
  .process-intro:before{
    width:68%;height:28%;left:5%;bottom:7%;opacity:1;
    background:radial-gradient(ellipse at 48% 62%,rgba(94,234,210,.2) 0%,rgba(38,156,242,.13) 40%,transparent 72%);
    filter:blur(8px)
  }
  .process-intro>img{
    width:46%;left:13%;bottom:2%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%)
  }
}

@media(max-width:900px){
  .process-intro:before{
    width:78%;height:25%;left:11%;bottom:4%;opacity:1;
    background:radial-gradient(ellipse at center,rgba(94,234,210,.2),rgba(38,156,242,.12) 45%,transparent 74%);
    filter:blur(7px)
  }
  .process-intro>img{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%)
  }
}